@thecb/components 5.6.6 → 5.6.10

package/dist/index.cjs.js

@@ -6115,6 +6115,16 @@ var checkDeniedCards = function checkDeniedCards(name) {
       return "";
   }
 };
+/*
+  An optional style for layout atoms that positions the atom completely off screen
+  This will *not* be visible or accessible to sighted users
+  Use to contain text content or a11y interactive content (skip links when not visible)
+  that is only for users of assistive technologies (screen readers)
+
+  Currently implemented on the Box atom via the srOnly prop
+*/
+
+var screenReaderOnlyStyle = "\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n";
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6126,7 +6136,8 @@ var general = /*#__PURE__*/Object.freeze({
   generateClickHandler: generateClickHandler,
   checkCardBrand: checkCardBrand,
   displayCardBrand: displayCardBrand,
-  checkDeniedCards: checkDeniedCards
+  checkDeniedCards: checkDeniedCards,
+  screenReaderOnlyStyle: screenReaderOnlyStyle
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"];
@@ -6269,10 +6280,13 @@ var BoxWrapper = styled__default(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var _excluded$3 = ["padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "dataQa", "children"];
+var _excluded$3 = ["padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"];
 /*
   Box component to create generic boxes
   Supply padding, border, background, and color values
+
+  srOnly prop enables special screen-reader style that is used to position content
+  completely off screen (only for users of screen readers)
 */
 
 var Box = function Box(_ref) {
@@ -6309,6 +6323,8 @@ var Box = function Box(_ref) {
       theme = _ref.theme,
       hiddenStyles = _ref.hiddenStyles,
       extraStyles = _ref.extraStyles,
+      _ref$srOnly = _ref.srOnly,
+      srOnly = _ref$srOnly === void 0 ? false : _ref$srOnly,
       dataQa = _ref.dataQa,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$3);
@@ -6335,7 +6351,7 @@ var Box = function Box(_ref) {
     onClick: onClick,
     hiddenStyles: hiddenStyles,
     onKeyDown: onKeyDown,
-    extraStyles: extraStyles,
+    extraStyles: srOnly ? "".concat(screenReaderOnlyStyle).concat(extraStyles) : extraStyles,
     theme: theme,
     textAlign: textAlign,
     "data-qa": dataQa,
@@ -19376,8 +19392,6 @@ var SearchInput = styled__default.input.withConfig({
 });
 
 var Dropdown = function Dropdown(_ref9) {
-  var _options$find;
-
   var placeholder = _ref9.placeholder,
       options = _ref9.options,
       value = _ref9.value,
@@ -19392,7 +19406,9 @@ var Dropdown = function Dropdown(_ref9) {
       maxHeight = _ref9.maxHeight,
       _ref9$widthFitOptions = _ref9.widthFitOptions,
       widthFitOptions = _ref9$widthFitOptions === void 0 ? false : _ref9$widthFitOptions,
-      disabled = _ref9.disabled;
+      disabled = _ref9.disabled,
+      _ref9$hasTitles = _ref9.hasTitles,
+      hasTitles = _ref9$hasTitles === void 0 ? false : _ref9$hasTitles;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19434,6 +19450,14 @@ var Dropdown = function Dropdown(_ref9) {
   }));
   var dropdownRef = React.useRef(null);
 
+  var getSelection = function getSelection() {
+    var _options$find;
+
+    return value ? (_options$find = options.find(function (option) {
+      return option.value === value;
+    })) === null || _options$find === void 0 ? void 0 : _options$find.text : placeholder;
+  };
+
   var onKeyDown = function onKeyDown(e) {
     var key = e.key,
         keyCode = e.keyCode;
@@ -19529,7 +19553,8 @@ var Dropdown = function Dropdown(_ref9) {
     width: "100%",
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     "aria-expanded": isOpen,
-    extraStyles: disabled && "color: #6e727e;\n      background-color: #f7f7f7;\n      pointer-events: none;"
+    extraStyles: disabled && "color: #6e727e;\n      background-color: #f7f7f7;\n      pointer-events: none;",
+    title: hasTitles ? getSelection() : null
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "button",
     background: isOpen ? themeValues.hoverColor : WHITE,
@@ -19553,9 +19578,7 @@ var Dropdown = function Dropdown(_ref9) {
   }) : /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     extraStyles: disabled && "color: #6e727e;\n            background-color: #f7f7f7;\n            pointer-events: none;"
-  }, value ? (_options$find = options.find(function (option) {
-    return option.value === value;
-  })) === null || _options$find === void 0 ? void 0 : _options$find.text : placeholder), /*#__PURE__*/React__default.createElement(IconWrapper, {
+  }, getSelection()), /*#__PURE__*/React__default.createElement(IconWrapper, {
     open: isOpen
   }, /*#__PURE__*/React__default.createElement(DropdownIcon, null)))), isOpen ? /*#__PURE__*/React__default.createElement(DropdownContentWrapper, {
     maxHeight: maxHeight,
@@ -19579,7 +19602,8 @@ var Dropdown = function Dropdown(_ref9) {
       selected: choice.value === value,
       disabled: disabledValues.includes(choice.value),
       "data-qa": choice.text,
-      themeValues: themeValues
+      themeValues: themeValues,
+      title: hasTitles ? choice.text : null
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
@@ -19684,7 +19708,9 @@ var FormSelect = function FormSelect(_ref) {
       dropdownMaxHeight = _ref.dropdownMaxHeight,
       disabledValues = _ref.disabledValues,
       disabled = _ref.disabled,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      _ref$hasTitles = _ref.hasTitles,
+      hasTitles = _ref$hasTitles === void 0 ? false : _ref$hasTitles;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19724,6 +19750,7 @@ var FormSelect = function FormSelect(_ref) {
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
     "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
     maxHeight: dropdownMaxHeight,
+    hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
     options: options,
     value: field.rawValue,
@@ -33188,25 +33215,37 @@ const validatorToPredicate = (validatorFn, emptyCase) => (
 
 var commonjsGlobal$1 = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-function createCommonjsModule$1(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
+var dayjs_min = {exports: {}};
 
-var dayjs_min = createCommonjsModule$1(function (module, exports) {
+(function (module, exports) {
 !function(t,e){module.exports=e();}(commonjsGlobal$1,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",$="Invalid Date",l=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},g={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},D="en",v={};v[D]=M;var p=function(t){return t instanceof _},S=function(t,e,n){var r;if(!t)return D;if("string"==typeof t)v[t]&&(r=t),e&&(v[t]=e,r=t);else {var i=t.name;v[i]=t,r=i;}return !n&&r&&(D=r),r||!n&&D},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=g;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match(l);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===$)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),$=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},l=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,g="set"+(this.$u?"UTC":"");switch(h){case c:return r?$(1,0):$(31,11);case f:return r?$(1,M):$(0,M+1);case o:var D=this.$locale().weekStart||0,v=(y<D?y+7:y)-D;return $(r?m-v:m+(6-v),M);case a:case d:return l(g+"Hours",0);case u:return l(g+"Minutes",1);case s:return l(g+"Seconds",2);case i:return l(g+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),$=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],l=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[$](l),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else $&&this.$d[$](l);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,$=this;r=Number(r);var l=O.p(h),y=function(t){var e=w($);return O.w(e.date(e.date()+Math.round(t*r)),$)};if(l===f)return this.set(f,this.$M+r);if(l===c)return this.set(c,this.$y+r);if(l===a)return y(1);if(l===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[l]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||$;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].substr(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||l[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,$){var l,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,g=this-M,D=O.m(this,M);return D=(l={},l[c]=D/12,l[f]=D,l[h]=D/3,l[o]=(g-m)/6048e5,l[a]=(g-m)/864e5,l[u]=g/n,l[s]=g/e,l[i]=g/t,l)[y]||g,$?D:O.a(D)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return v[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),b=_.prototype;return w.prototype=b,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){b[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=v[D],w.Ls=v,w.p={},w}));
-});
+}(dayjs_min));
+
+var dayjs = dayjs_min.exports;
+
+var customParseFormat$1 = {exports: {}};
 
-var customParseFormat = createCommonjsModule$1(function (module, exports) {
+(function (module, exports) {
 !function(t,e){module.exports=e();}(commonjsGlobal$1,(function(){var t={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"},e=/(\[[^[]*\])|([-:/.()\s]+)|(A|a|YYYY|YY?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g,n=/\d\d/,r=/\d\d?/,i=/\d*[^\s\d-_:/()]+/,o={},s=function(t){return (t=+t)+(t>68?1900:2e3)};var a=function(t){return function(e){this[t]=+e;}},f=[/[+-]\d\d:?(\d\d)?|Z/,function(t){(this.zone||(this.zone={})).offset=function(t){if(!t)return 0;if("Z"===t)return 0;var e=t.match(/([+-]|\d\d)/g),n=60*e[1]+(+e[2]||0);return 0===n?0:"+"===e[0]?-n:n}(t);}],u=function(t){var e=o[t];return e&&(e.indexOf?e:e.s.concat(e.f))},h=function(t,e){var n,r=o.meridiem;if(r){for(var i=1;i<=24;i+=1)if(t.indexOf(r(i,0,e))>-1){n=i>12;break}}else n=t===(e?"pm":"PM");return n},d={A:[i,function(t){this.afternoon=h(t,!1);}],a:[i,function(t){this.afternoon=h(t,!0);}],S:[/\d/,function(t){this.milliseconds=100*+t;}],SS:[n,function(t){this.milliseconds=10*+t;}],SSS:[/\d{3}/,function(t){this.milliseconds=+t;}],s:[r,a("seconds")],ss:[r,a("seconds")],m:[r,a("minutes")],mm:[r,a("minutes")],H:[r,a("hours")],h:[r,a("hours")],HH:[r,a("hours")],hh:[r,a("hours")],D:[r,a("day")],DD:[n,a("day")],Do:[i,function(t){var e=o.ordinal,n=t.match(/\d+/);if(this.day=n[0],e)for(var r=1;r<=31;r+=1)e(r).replace(/\[|\]/g,"")===t&&(this.day=r);}],M:[r,a("month")],MM:[n,a("month")],MMM:[i,function(t){var e=u("months"),n=(u("monthsShort")||e.map((function(t){return t.substr(0,3)}))).indexOf(t)+1;if(n<1)throw new Error;this.month=n%12||n;}],MMMM:[i,function(t){var e=u("months").indexOf(t)+1;if(e<1)throw new Error;this.month=e%12||e;}],Y:[/[+-]?\d+/,a("year")],YY:[n,function(t){this.year=s(t);}],YYYY:[/\d{4}/,a("year")],Z:f,ZZ:f};function c(n){var r,i;r=n,i=o&&o.formats;for(var s=(n=r.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(e,n,r){var o=r&&r.toUpperCase();return n||i[r]||t[r]||i[o].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(t,e,n){return e||n.slice(1)}))}))).match(e),a=s.length,f=0;f<a;f+=1){var u=s[f],h=d[u],c=h&&h[0],l=h&&h[1];s[f]=l?{regex:c,parser:l}:u.replace(/^\[|\]$/g,"");}return function(t){for(var e={},n=0,r=0;n<a;n+=1){var i=s[n];if("string"==typeof i)r+=i.length;else {var o=i.regex,f=i.parser,u=t.substr(r),h=o.exec(u)[0];f.call(e,h),t=t.replace(h,"");}}return function(t){var e=t.afternoon;if(void 0!==e){var n=t.hours;e?n<12&&(t.hours+=12):12===n&&(t.hours=0),delete t.afternoon;}}(e),e}}return function(t,e,n){n.p.customParseFormat=!0,t&&t.parseTwoDigitYear&&(s=t.parseTwoDigitYear);var r=e.prototype,i=r.parse;r.parse=function(t){var e=t.date,r=t.utc,s=t.args;this.$u=r;var a=s[1];if("string"==typeof a){var f=!0===s[2],u=!0===s[3],h=f||u,d=s[2];u&&(d=s[2]),o=this.$locale(),!f&&d&&(o=n.Ls[d]),this.$d=function(t,e,n){try{if(["x","X"].indexOf(e)>-1)return new Date(("X"===e?1e3:1)*t);var r=c(e)(t),i=r.year,o=r.month,s=r.day,a=r.hours,f=r.minutes,u=r.seconds,h=r.milliseconds,d=r.zone,l=new Date,m=s||(i||o?1:l.getDate()),M=i||l.getFullYear(),Y=0;i&&!o||(Y=o>0?o-1:l.getMonth());var p=a||0,v=f||0,D=u||0,g=h||0;return d?new Date(Date.UTC(M,Y,m,p,v,D,g+60*d.offset*1e3)):n?new Date(Date.UTC(M,Y,m,p,v,D,g)):new Date(M,Y,m,p,v,D,g)}catch(t){return new Date("")}}(e,a,r),this.init(),d&&!0!==d&&(this.$L=this.locale(d).$L),h&&e!=this.format(a)&&(this.$d=new Date("")),o={};}else if(a instanceof Array)for(var l=a.length,m=1;m<=l;m+=1){s[1]=a[m-1];var M=n.apply(this,s);if(M.isValid()){this.$d=M.$d,this.$L=M.$L,this.init();break}m===l&&(this.$d=new Date(""));}else i.call(this,t);};}}));
-});
+}(customParseFormat$1));
+
+var customParseFormat = customParseFormat$1.exports;
 
-var isSameOrBefore = createCommonjsModule$1(function (module, exports) {
+var isSameOrBefore$1 = {exports: {}};
+
+(function (module, exports) {
 !function(e,i){module.exports=i();}(commonjsGlobal$1,(function(){return function(e,i){i.prototype.isSameOrBefore=function(e,i){return this.isSame(e,i)||this.isBefore(e,i)};}}));
-});
+}(isSameOrBefore$1));
+
+var isSameOrBefore = isSameOrBefore$1.exports;
 
-var isSameOrAfter = createCommonjsModule$1(function (module, exports) {
+var isSameOrAfter$1 = {exports: {}};
+
+(function (module, exports) {
 !function(e,t){module.exports=t();}(commonjsGlobal$1,(function(){return function(e,t){t.prototype.isSameOrAfter=function(e,t){return this.isSame(e,t)||this.isAfter(e,t)};}}));
-});
+}(isSameOrAfter$1));
+
+var isSameOrAfter = isSameOrAfter$1.exports;
 
 /* eslint-disable no-unused-vars */
 
@@ -33216,9 +33255,9 @@ const createValidator = (type, error) => {
   return validator;
 };
 
-dayjs_min.extend(customParseFormat);
-dayjs_min.extend(isSameOrBefore);
-dayjs_min.extend(isSameOrAfter);
+dayjs.extend(customParseFormat);
+dayjs.extend(isSameOrBefore);
+dayjs.extend(isSameOrAfter);
 
 let validatorFns = {};
 
@@ -33297,15 +33336,14 @@ const MATCHES_FIELD = "validator/MATCHES_FIELD";
 const MATCHES_FIELD_ERROR$1 = "error/MATCHES_FIELD";
 const matchesField = createValidator(MATCHES_FIELD, MATCHES_FIELD_ERROR$1);
 validatorFns[MATCHES_FIELD] = (value, args, form) => {
-  if (value === "") {
-    return true;
-  }
-  if (form[args[0]] === undefined) {
+  const dependentField = form[args[0]];
+  if (dependentField === undefined) {
     throw new Error(
       `${args[0]} was passed to matchesField, but that field does not exist in the form`
     );
   }
-  return value === form[args[0]].rawValue;
+  const dependentFieldValue = dependentField.rawValue;
+  return value === dependentFieldValue;
 };
 
 const validateWhenErrorMessage = type =>
@@ -33448,8 +33486,8 @@ validatorFns[DATE_BEFORE_TODAY] = (value, args, form) => {
       "Date format and unit need to be defined for dateBeforeToday, one or both are undefined"
     );
   }
-  const now = dayjs_min();
-  const dateValue = dayjs_min(value, dateFormat);
+  const now = dayjs();
+  const dateValue = dayjs(value, dateFormat);
 
   if (inclusive === true) {
     return dateValue.isSameOrBefore(now, unit);
@@ -33476,8 +33514,8 @@ validatorFns[DATE_AFTER_TODAY] = (value, args, form) => {
       "Date format and unit need to be defined for dateAfterToday, one or both are undefined"
     );
   }
-  const now = dayjs_min();
-  const dateValue = dayjs_min(value, dateFormat);
+  const now = dayjs();
+  const dateValue = dayjs(value, dateFormat);
 
   if (inclusive === true) {
     return dateValue.isSameOrAfter(now, unit);
@@ -33861,7 +33899,7 @@ function get(state, prop) {
   return value;
 }
 
-function set(state, prop, value) {
+function set$1(state, prop, value) {
   assertUnrevoked(state);
   state.assigned[prop] = true;
 
@@ -33912,8 +33950,8 @@ function proxyProperty(draft, prop, enumerable) {
         return get(this[DRAFT_STATE], prop);
       },
 
-      set: function set$1(value) {
-        set(this[DRAFT_STATE], prop, value);
+      set: function set$1$1(value) {
+        set$1(this[DRAFT_STATE], prop, value);
       }
 
     };
@@ -34094,7 +34132,7 @@ var objectTraps = {
     return Reflect.ownKeys(source$1(target));
   },
 
-  set: set$1,
+  set: set$1$1,
   deleteProperty: deleteProperty,
   getOwnPropertyDescriptor: getOwnPropertyDescriptor,
 
@@ -34172,7 +34210,7 @@ function get$1(state, prop) {
   return drafts[prop] = createProxy$1(value, state);
 }
 
-function set$1(state, prop, value) {
+function set$1$1(state, prop, value) {
   if (!state.modified) {
     var baseValue = peek$1(state.base, prop); // Optimize based on value's truthiness. Truthy values are guaranteed to
     // never be undefined, so we can avoid the `in` operator. Lastly, truthy
@@ -34395,7 +34433,7 @@ var Immer = function Immer(config) {
 };
 
 Immer.prototype.produce = function produce (base, recipe, patchListener) {
-    var this$1 = this;
+    var this$1$1 = this;
 
   // curried invocation
   if (typeof base === "function" && typeof recipe !== "function") {
@@ -34403,12 +34441,12 @@ Immer.prototype.produce = function produce (base, recipe, patchListener) {
     recipe = base;
     var self = this;
     return function curriedProduce(base) {
-        var this$1 = this;
+        var this$1$1 = this;
         if ( base === void 0 ) base = defaultBase;
         var args = [], len = arguments.length - 1;
         while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
 
-      return self.produce(base, function (draft) { return recipe.call.apply(recipe, [ this$1, draft ].concat( args )); }); // prettier-ignore
+      return self.produce(base, function (draft) { return recipe.call.apply(recipe, [ this$1$1, draft ].concat( args )); }); // prettier-ignore
     };
   } // prettier-ignore
 
@@ -34440,7 +34478,7 @@ Immer.prototype.produce = function produce (base, recipe, patchListener) {
     if (result instanceof Promise) {
       return result.then(function (result) {
         scope.usePatches(patchListener);
-        return this$1.processResult(result, scope);
+        return this$1$1.processResult(result, scope);
       }, function (error) {
         scope.revoke();
         throw error;
@@ -34457,14 +34495,14 @@ Immer.prototype.produce = function produce (base, recipe, patchListener) {
 };
 
 Immer.prototype.produceWithPatches = function produceWithPatches (arg1, arg2, arg3) {
-    var this$1 = this;
+    var this$1$1 = this;
 
   if (typeof arg1 === "function") {
     return function (state) {
         var args = [], len = arguments.length - 1;
         while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
 
-        return this$1.produceWithPatches(state, function (draft) { return arg1.apply(void 0, [ draft ].concat( args )); });
+        return this$1$1.produceWithPatches(state, function (draft) { return arg1.apply(void 0, [ draft ].concat( args )); });
       };
   } // non-curried form
 
@@ -34589,7 +34627,7 @@ Immer.prototype.processResult = function processResult (result, scope) {
 
 
 Immer.prototype.finalize = function finalize (draft, path, scope) {
-    var this$1 = this;
+    var this$1$1 = this;
 
   var state = draft[DRAFT_STATE];
 
@@ -34623,7 +34661,7 @@ Immer.prototype.finalize = function finalize (draft, path, scope) {
         var base = state.base;
           var copy = state.copy;
         each(base, function (prop) {
-          if (!has(copy, prop)) { this$1.onDelete(state, prop); }
+          if (!has(copy, prop)) { this$1$1.onDelete(state, prop); }
         });
       }
     }
@@ -34652,7 +34690,7 @@ Immer.prototype.finalize = function finalize (draft, path, scope) {
 
 
 Immer.prototype.finalizeTree = function finalizeTree (root, rootPath, scope) {
-    var this$1 = this;
+    var this$1$1 = this;
 
   var state = root[DRAFT_STATE];
 
@@ -34678,7 +34716,7 @@ Immer.prototype.finalizeTree = function finalizeTree (root, rootPath, scope) {
     if (isDraft(value)) {
       var path = isDraftProp && needPatches && !state.assigned[prop] ? rootPath.concat(prop) : null; // Drafts owned by `scope` are finalized here.
 
-      value = this$1.finalize(value, path, scope); // Drafts from another scope must prevent auto-freezing.
+      value = this$1$1.finalize(value, path, scope); // Drafts from another scope must prevent auto-freezing.
 
       if (isDraft(value)) {
         scope.canAutoFreeze = false;
@@ -34703,8 +34741,8 @@ Immer.prototype.finalizeTree = function finalizeTree (root, rootPath, scope) {
           each(value, finalizeProperty);
         }
 
-    if (isDraftProp && this$1.onAssign) {
-      this$1.onAssign(state, prop, value);
+    if (isDraftProp && this$1$1.onAssign) {
+      this$1$1.onAssign(state, prop, value);
     }
   };
 
@@ -34739,14 +34777,14 @@ var produce = immer.produce;
  * [nextState, patches, inversePatches] (instead of just the next state)
  */
 
-var produceWithPatches = immer.produceWithPatches.bind(immer);
+immer.produceWithPatches.bind(immer);
 /**
  * Pass true to automatically freeze all copies created by Immer.
  *
  * By default, auto-freezing is disabled in production.
  */
 
-var setAutoFreeze = immer.setAutoFreeze.bind(immer);
+immer.setAutoFreeze.bind(immer);
 /**
  * Pass true to use the ES2015 `Proxy` class when creating drafts, which is
  * always faster than using ES5 proxies.
@@ -34754,20 +34792,20 @@ var setAutoFreeze = immer.setAutoFreeze.bind(immer);
  * By default, feature detection is used, so calling this is rarely necessary.
  */
 
-var setUseProxies = immer.setUseProxies.bind(immer);
+immer.setUseProxies.bind(immer);
 /**
  * Apply an array of Immer patches to the first argument.
  *
  * This function is a producer, which means copy-on-write is in effect.
  */
 
-var applyPatches$1 = immer.applyPatches.bind(immer);
+immer.applyPatches.bind(immer);
 /**
  * Create an Immer draft from the given base state, which may be a draft itself.
  * The draft can be modified until you finalize it with the `finishDraft` function.
  */
 
-var createDraft = immer.createDraft.bind(immer);
+immer.createDraft.bind(immer);
 /**
  * Finalize an Immer draft from a `createDraft` call, returning the base state
  * (if no changes were made) or a modified copy. The draft must *not* be
@@ -34777,7 +34815,7 @@ var createDraft = immer.createDraft.bind(immer);
  * changes that were made.
  */
 
-var finishDraft = immer.finishDraft.bind(immer);
+immer.finishDraft.bind(immer);
 
 const createInitialState = formConfig => {
   let initialForm = {};
@@ -34802,7 +34840,7 @@ const createInitialState = formConfig => {
 };
 
 const SET = "field/SET";
-const set$2 = fieldName => value => ({
+const set = fieldName => value => ({
   type: SET,
   payload: { fieldName, value }
 });
@@ -34882,7 +34920,7 @@ const createMapDispatchToProps = formConfig => {
     const keys = Object.keys(formConfig);
     for (let fieldName of keys) {
       dispatchObj.fields[fieldName] = {
-        set: value => dispatch(set$2(fieldName)(value)),
+        set: value => dispatch(set(fieldName)(value)),
         addValidator: validator => dispatch(addValidator(fieldName)(validator))
       };
     }
@@ -41435,6 +41473,119 @@ var WorkflowTile = function WorkflowTile(_ref) {
   }))));
 };
 
+var DashboardIframe = styled__default.iframe.withConfig({
+  displayName: "PeriscopeDashboardIframestyled__DashboardIframe",
+  componentId: "sc-j0cucj-0"
+})(["border:none;box-shadow:0 0 5px 0 ", ";display:none;"], ALTO_GREY);
+
+/**
+ * Component: PeriscopeDashboardIframe
+ *
+ * Used for rendering Citybase's periscope reporting dashboards in iframes.
+ * Receives action props to trigger a request on mount for the iframe's url.
+ * Receives a string prop if/when we receive the url result.
+ * And receives action props to emit errors from failed iframe loading.
+ *
+ * The logic and api client methods to handle requests/response,
+ * store the url, etc. should be provided from the app consuming this library.
+ *
+ * If the url request is pending, render a spinner.
+ * If the url request failed, render a UI error state.
+ **/
+
+var DASHBOARD_SIZE_MESSAGE_TYPE = "dashboard_resize";
+var PERISCOPE_ORIGIN = "https://app.periscopedata.com";
+
+var isValidMessage = function isValidMessage(message) {
+  return message.isTrusted && message.origin === PERISCOPE_ORIGIN && message.data && message.data.event_type === DASHBOARD_SIZE_MESSAGE_TYPE;
+};
+
+var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
+  var url = _ref.url,
+      requestDashboardUrl = _ref.requestDashboardUrl,
+      periscopeDataPending = _ref.periscopeDataPending,
+      periscopeDataSuccess = _ref.periscopeDataSuccess,
+      periscopeDataFailure = _ref.periscopeDataFailure,
+      periscopeDataRequestSuccess = _ref.periscopeDataRequestSuccess,
+      periscopeDataRequestFailure = _ref.periscopeDataRequestFailure;
+
+  var _useState = React.useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  var time = {
+    timer: null
+  };
+  React.useEffect(function () {
+    time.timer = setTimeout(function () {
+      periscopeDataRequestFailure();
+    }, 10000);
+  }, []);
+
+  var Dashboard = function Dashboard(height) {
+    return function (url) {
+      return /*#__PURE__*/React__default.createElement(DashboardIframe, {
+        src: url,
+        width: "100%",
+        height: height,
+        "data-qa": "DashboardIframe",
+        onLoad: function onLoad() {
+          var iframe = document.querySelector("iframe");
+          iframe.style.display = "initial";
+        }
+      });
+    };
+  };
+
+  var validatePeriscope = function validatePeriscope(message) {
+    if (isValidMessage(message)) {
+      setHeight(message.data.dashboard_height + 100);
+      clearTimeout(time.timer);
+      periscopeDataRequestSuccess();
+    }
+  };
+
+  React.useLayoutEffect(function () {
+    window.addEventListener("message", validatePeriscope);
+    requestDashboardUrl();
+    return function () {
+      return window.removeEventListener("message", validatePeriscope);
+    };
+  }, [requestDashboardUrl]);
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(BoxWithShadow$1, {
+    padding: "0",
+    minWidth: "100%",
+    minHeight: "592px",
+    variant: "baseStandard",
+    background: "#fff",
+    borderRadius: "4px",
+    extraStyles: "display: flex; justify-content: center; align-items: center; flex-direction: column;"
+  }, periscopeDataPending && !periscopeDataSuccess && /*#__PURE__*/React__default.createElement(Cover, {
+    minHeight: "100%",
+    singleChild: true
+  }, /*#__PURE__*/React__default.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React__default.createElement(Spinner$2, {
+    size: "100"
+  }))), periscopeDataFailure && !periscopeDataSuccess && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "64px"
+  }, /*#__PURE__*/React__default.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0 2rem"
+  }, /*#__PURE__*/React__default.createElement(PeriscopeFailedIcon, null)), /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h3",
+    weight: "700"
+  }, "Something Went Wrong"), /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    variant: "p",
+    extraStyles: "text-align: center;"
+  }, "There was an issue trying to load the dashboard."), /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    variant: "p",
+    extraStyles: "text-align: center;"
+  }, "Your organization may not have a dashboard configured."))), !periscopeDataFailure && url && Dashboard(height)(url)));
+};
+
 var pageBackground = "#F6F6F9";
 var fallbackValues$H = {
   pageBackground: pageBackground
@@ -41813,6 +41964,7 @@ exports.PaymentMethodIcon = PaymentMethodIcon$1;
 exports.PaymentSearchIcon = PaymentSearchIcon;
 exports.PaymentsIconSmall = PaymentsIconSmall$1;
 exports.PendingIcon = PendingIcon;
+exports.PeriscopeDashboardIframe = PeriscopeDashboardIframe;
 exports.PeriscopeFailedIcon = PeriscopeFailedIcon;
 exports.PhoneForm = PhoneForm;
 exports.Placeholder = Placeholder$1;