@thecb/components 4.5.3 → 5.0.0-beta.0

package/dist/index.cjs.js

@@ -15431,6 +15431,52 @@ var CheckIcon = function CheckIcon() {
   })))))));
 };
 
+var WarningIconXS = function WarningIconXS() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "16px",
+    height: "13px",
+    viewBox: "0 0 16 13",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    "aria-labelledby": "#warning-restricted-item",
+    role: "img"
+  }, /*#__PURE__*/React__default.createElement("title", {
+    id: "warning-restricted-item"
+  }, "Warning: restricted items cannot be selected"), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M11.0106463,4.4659633 C11.3063934,4.63914978 11.5526739,4.88543032 11.7258604,5.18117739 L16.7999622,13.846119 C17.3581267,14.7992854 17.0379144,16.0244612 16.0847481,16.5826257 C15.7781918,16.762142 15.4293522,16.8567653 15.0741018,16.8567653 L4.92589823,16.8567653 C3.82132873,16.8567653 2.92589823,15.9613348 2.92589823,14.8567653 C2.92589823,14.5015149 3.02052159,14.1526753 3.20003784,13.846119 L8.27413962,5.18117739 C8.83230416,4.22801102 10.0574799,3.90779877 11.0106463,4.4659633 Z M10.6666667,13.3333333 L9.33333333,13.3333333 L9.33333333,14.6666667 L10.6666667,14.6666667 L10.6666667,13.3333333 Z M10.6666667,6.66666667 L9.33333333,6.66666667 L9.33333333,12 L10.6666667,12 L10.6666667,6.66666667 Z",
+    id: "WarningIconXs-path-1"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    id: "WarningIconXs-SRV-2647---Workflow-$0-Balance",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "WarningIconXs-11---Search-Results----Checked--Copy-6",
+    transform: "translate(-135.000000, -483.000000)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "WarningIconXs-Group",
+    transform: "translate(133.000000, 479.000000)"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "WarningIconXs-mask-2",
+    fill: "white"
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#WarningIconXs-path-1"
+  })), /*#__PURE__*/React__default.createElement("use", {
+    id: "WarningIconXs-Mask",
+    fill: "#B34A00",
+    fillRule: "nonzero",
+    xlinkHref: "#WarningIconXs-path-1"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    id: "WarningIconXs-Path",
+    fill: "#B34A00",
+    fillRule: "nonzero",
+    mask: "url(#WarningIconXs-mask-2)",
+    points: "-2.84217094e-14 -4.26325641e-14 20 -4.26325641e-14 20 20 -2.84217094e-14 20"
+  })))));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -33807,6 +33853,46 @@ const validatorToPredicate = (validatorFn, emptyCase) => (
   ...rest
 ) => (value === "" ? emptyCase : validatorFn(value, ...rest));
 
+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 = createCommonjsModule$1(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}));
+});
+
+var customParseFormat = createCommonjsModule$1(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);};}}));
+});
+
+var customParseFormat$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': customParseFormat,
+  __moduleExports: customParseFormat
+});
+
+var isSameOrBefore = createCommonjsModule$1(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)};}}));
+});
+
+var isSameOrBefore$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': isSameOrBefore,
+  __moduleExports: isSameOrBefore
+});
+
+var isSameOrAfter = createCommonjsModule$1(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)};}}));
+});
+
+var isSameOrAfter$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': isSameOrAfter,
+  __moduleExports: isSameOrAfter
+});
+
 /* eslint-disable no-unused-vars */
 
 const createValidator = (type, error) => {
@@ -33815,6 +33901,10 @@ const createValidator = (type, error) => {
   return validator;
 };
 
+dayjs_min.extend(customParseFormat$1);
+dayjs_min.extend(isSameOrBefore$1);
+dayjs_min.extend(isSameOrAfter$1);
+
 let validatorFns = {};
 
 const REQUIRED = "validator/REQUIRED";
@@ -34024,6 +34114,62 @@ validatorFns[HAS_LENGTH] = (value, args, form) => {
   return max >= valueLength && valueLength >= min;
 };
 
+const DATE_BEFORE_TODAY = "validator/DATE_BEFORE_TODAY";
+const DATE_BEFORE_TODAY_ERROR = "error/DATE_BEFORE_TODAY";
+const dateBeforeToday = createValidator(
+  DATE_BEFORE_TODAY,
+  DATE_BEFORE_TODAY_ERROR
+);
+validatorFns[DATE_BEFORE_TODAY] = (value, args, form) => {
+  if (value === "") {
+    return true;
+  }
+  const dateFormat = args[0];
+  const unit = args[1];
+  const inclusive = args[2] || false;
+
+  if (dateFormat == undefined || unit == undefined) {
+    throw new Error(
+      "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);
+
+  if (inclusive === true) {
+    return dateValue.isSameOrBefore(now, unit);
+  }
+  return dateValue.isBefore(now, unit);
+};
+
+const DATE_AFTER_TODAY = "validator/DATE_AFTER_TODAY";
+const DATE_AFTER_TODAY_ERROR = "error/DATE_AFTER_TODAY";
+const dateAfterToday = createValidator(
+  DATE_AFTER_TODAY,
+  DATE_AFTER_TODAY_ERROR
+);
+validatorFns[DATE_AFTER_TODAY] = (value, args, form) => {
+  if (value === "") {
+    return true;
+  }
+  const dateFormat = args[0];
+  const unit = args[1];
+  const inclusive = args[2] || false;
+
+  if (dateFormat == undefined || unit == undefined) {
+    throw new Error(
+      "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);
+
+  if (inclusive === true) {
+    return dateValue.isSameOrAfter(now, unit);
+  }
+  return dateValue.isAfter(now, unit);
+};
+
 const MATCHES_REGEX = "validator/MATCHES_REGEX";
 const MATCHES_REGEX_ERROR = "error/MATCHES_REGEX";
 const matchesRegex = createValidator(MATCHES_REGEX, MATCHES_REGEX_ERROR);
@@ -40861,7 +41007,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
   var nameOnCardErrors = _defineProperty({}, required.error, "Name is required");
 
   var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required.error, "Credit card number is required"), _defineProperty(_creditCardNumberErro, hasLength.error, "Credit card number is invalid"), _defineProperty(_creditCardNumberErro, matchesRegex.error, "".concat(displayCardBrand(fields.creditCardNumber.rawValue), " is not accepted")), _creditCardNumberErro);
-  var expirationDateErrors = (_expirationDateErrors = {}, _defineProperty(_expirationDateErrors, required.error, "Expiration date is required"), _defineProperty(_expirationDateErrors, hasLength.error, "Expiration date is invalid"), _defineProperty(_expirationDateErrors, matchesRegex.error, "Expiration date is invalid"), _expirationDateErrors);
+  var expirationDateErrors = (_expirationDateErrors = {}, _defineProperty(_expirationDateErrors, required.error, "Expiration date is required"), _defineProperty(_expirationDateErrors, hasLength.error, "Expiration date is invalid"), _defineProperty(_expirationDateErrors, dateAfterToday.error, "Expiration date is invalid"), _expirationDateErrors);
   var cvvErrors = (_cvvErrors = {}, _defineProperty(_cvvErrors, required.error, "CVV is required"), _defineProperty(_cvvErrors, hasLength.error, "CVV is invalid"), _cvvErrors);
   var zipCodeErrors = (_zipCodeErrors = {}, _defineProperty(_zipCodeErrors, required.error, "Zip code is required"), _defineProperty(_zipCodeErrors, hasLength.error, "Zip code is invalid"), _zipCodeErrors);
 
@@ -40967,7 +41113,7 @@ var formConfig$8 = {
     constraints: [onlyIntegers(), hasLength(0, 16)]
   },
   expirationDate: {
-    validators: [required(), hasLength(4, 4), matchesRegex(/^(01|02|03|04|05|06|07|08|09|10|11|12)[2-9]\d$/)],
+    validators: [required(), hasLength(4, 4), dateAfterToday("MM/YY", "month", true)],
     constraints: [onlyIntegers(), hasLength(0, 4)]
   },
   cvv: {
@@ -42405,6 +42551,7 @@ exports.TypeaheadInput = TypeaheadInput;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
 exports.VoidedIcon = VoidedIcon;
 exports.WalletIcon = WalletIcon$1;
+exports.WarningIconXS = WarningIconXS;
 exports.WelcomeModule = WelcomeModule$1;
 exports.WorkflowTile = WorkflowTile;
 exports.cardRegistry = cardRegistry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.5.3",
+  "version": "5.0.0-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -80,6 +80,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.0.1"
+    "redux-freeform": "^5.1.0-beta.1"
   }
 }

package/src/components/atoms/icons/WarningIconXS.js

@@ -0,0 +1,60 @@
+import React from "react";
+
+const WarningIconXS = () => (
+  <svg
+    width="16px"
+    height="13px"
+    viewBox="0 0 16 13"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    aria-labelledby="#warning-restricted-item"
+    role="img"
+  >
+    <title id="warning-restricted-item">
+      Warning: restricted items cannot be selected
+    </title>
+    <defs>
+      <path
+        d="M11.0106463,4.4659633 C11.3063934,4.63914978 11.5526739,4.88543032 11.7258604,5.18117739 L16.7999622,13.846119 C17.3581267,14.7992854 17.0379144,16.0244612 16.0847481,16.5826257 C15.7781918,16.762142 15.4293522,16.8567653 15.0741018,16.8567653 L4.92589823,16.8567653 C3.82132873,16.8567653 2.92589823,15.9613348 2.92589823,14.8567653 C2.92589823,14.5015149 3.02052159,14.1526753 3.20003784,13.846119 L8.27413962,5.18117739 C8.83230416,4.22801102 10.0574799,3.90779877 11.0106463,4.4659633 Z M10.6666667,13.3333333 L9.33333333,13.3333333 L9.33333333,14.6666667 L10.6666667,14.6666667 L10.6666667,13.3333333 Z M10.6666667,6.66666667 L9.33333333,6.66666667 L9.33333333,12 L10.6666667,12 L10.6666667,6.66666667 Z"
+        id="WarningIconXs-path-1"
+      ></path>
+    </defs>
+    <g
+      id="WarningIconXs-SRV-2647---Workflow-$0-Balance"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="WarningIconXs-11---Search-Results----Checked--Copy-6"
+        transform="translate(-135.000000, -483.000000)"
+      >
+        <g
+          id="WarningIconXs-Group"
+          transform="translate(133.000000, 479.000000)"
+        >
+          <mask id="WarningIconXs-mask-2" fill="white">
+            <use xlinkHref="#WarningIconXs-path-1"></use>
+          </mask>
+          <use
+            id="WarningIconXs-Mask"
+            fill="#B34A00"
+            fillRule="nonzero"
+            xlinkHref="#WarningIconXs-path-1"
+          ></use>
+          <polygon
+            id="WarningIconXs-Path"
+            fill="#B34A00"
+            fillRule="nonzero"
+            mask="url(#WarningIconXs-mask-2)"
+            points="-2.84217094e-14 -4.26325641e-14 20 -4.26325641e-14 20 20 -2.84217094e-14 20"
+          ></polygon>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default WarningIconXS;

package/src/components/atoms/icons/index.js

@@ -53,6 +53,7 @@ import PaymentSearchIcon from "./PaymentSearchIcon";
 import ResetPasswordIcon from "./ResetPasswordIcon";
 import PeriscopeFailedIcon from "./PeriscopeFailedIcon";
 import CheckIcon from "./CheckIcon";
+import WarningIconXS from "./WarningIconXS";
 
 export {
   AccountsIcon,
@@ -109,5 +110,6 @@ export {
   PaymentSearchIcon,
   ResetPasswordIcon,
   PeriscopeFailedIcon,
-  CheckIcon
+  CheckIcon,
+  WarningIconXS
 };

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -1,6 +1,11 @@
 import React, { useEffect, useContext } from "react";
 import { ThemeContext } from "styled-components";
-import { required, hasLength, matchesRegex } from "redux-freeform";
+import {
+  required,
+  hasLength,
+  matchesRegex,
+  dateAfterToday
+} from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
 import {
@@ -66,7 +71,7 @@ const PaymentFormCard = ({
   const expirationDateErrors = {
     [required.error]: "Expiration date is required",
     [hasLength.error]: "Expiration date is invalid",
-    [matchesRegex.error]: "Expiration date is invalid"
+    [dateAfterToday.error]: "Expiration date is invalid"
   };
   const cvvErrors = {
     [required.error]: "CVV is required",

package/src/components/molecules/payment-form-card/PaymentFormCard.state.js

@@ -4,7 +4,8 @@ import {
   onlyIntegers,
   hasLength,
   matchesRegex,
-  validateWhen
+  validateWhen,
+  dateAfterToday
 } from "redux-freeform";
 
 //TODO: Will make zip code able to have more than 5 digits once we add in the FormattedInput because it will have issues with format of 60606-1111.
@@ -25,7 +26,7 @@ const formConfig = {
     validators: [
       required(),
       hasLength(4, 4),
-      matchesRegex(/^(01|02|03|04|05|06|07|08|09|10|11|12)[2-9]\d$/)
+      dateAfterToday("MM/YY", "month", true)
     ],
     constraints: [onlyIntegers(), hasLength(0, 4)]
   },