@thecb/components 5.0.0-beta.11 → 5.0.0-beta.12

package/dist/index.esm.js

@@ -5006,10 +5006,6 @@ var TextSpan = styled.span.withConfig({
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-function unwrapExports (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
 }
@@ -20667,303 +20663,283 @@ var DisplayCard = function DisplayCard(_ref) {
   }) : /*#__PURE__*/React.createElement(Fragment, null))))));
 };
 
-var src = createCommonjsModule(function (module, exports) {
-(function (global, factory) {
-   factory(exports, React) ;
-}(commonjsGlobal, function (exports, React) {
-  var React__default = 'default' in React ? React['default'] : React;
-
-  function _extends() {
-    _extends = Object.assign || function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
+function _extends$2() {
+  _extends$2 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
         }
       }
+    }
 
-      return target;
-    };
-
-    return _extends.apply(this, arguments);
-  }
+    return target;
+  };
 
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
+  return _extends$2.apply(this, arguments);
+}
 
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
+function _objectWithoutPropertiesLoose$1(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
-    return target;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
 
-  function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
+  return target;
+}
 
-    var target = _objectWithoutPropertiesLoose(source, excluded);
+function _objectWithoutProperties$1(source, excluded) {
+  if (source == null) return {};
 
-    var key, i;
+  var target = _objectWithoutPropertiesLoose$1(source, excluded);
 
-    if (Object.getOwnPropertySymbols) {
-      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+  var key, i;
 
-      for (i = 0; i < sourceSymbolKeys.length; i++) {
-        key = sourceSymbolKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-        target[key] = source[key];
-      }
-    }
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
 
-    return target;
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
   }
 
-  function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
-  }
+  return target;
+}
 
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
-  }
+function _slicedToArray$1(arr, i) {
+  return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1();
+}
 
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) {
-      for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+function _toConsumableArray$1(arr) {
+  return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _nonIterableSpread$1();
+}
 
-      return arr2;
-    }
-  }
+function _arrayWithoutHoles$1(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
 
-  function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
+    return arr2;
   }
+}
 
-  function _iterableToArray(iter) {
-    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+function _arrayWithHoles$1(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArray$1(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
+
+function _iterableToArrayLimit$1(arr, i) {
+  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
+    return;
   }
 
-  function _iterableToArrayLimit(arr, i) {
-    if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
-      return;
-    }
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
 
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _e = undefined;
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
 
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
     try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
+      if (!_n && _i["return"] != null) _i["return"]();
     } finally {
-      try {
-        if (!_n && _i["return"] != null) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
+      if (_d) throw _e;
     }
-
-    return _arr;
   }
 
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance");
-  }
+  return _arr;
+}
 
-  function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
-  }
+function _nonIterableSpread$1() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
 
-  var getUniqueFormatDelimiters = function getUniqueFormatDelimiters(formats, formatChar) {
-    return _toConsumableArray(new Set(formats.join("").split(formatChar).join("").split("")));
-  };
-  var format = function format(formatter) {
-    return function (value) {
-      var usedFormat = formatter.formats[value.length];
+function _nonIterableRest$1() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
 
-      if (!usedFormat) {
-        return value;
-      }
+var getUniqueFormatDelimiters = function getUniqueFormatDelimiters(formats, formatChar) {
+  return _toConsumableArray$1(new Set(formats.join("").split(formatChar).join("").split("")));
+};
+var format$1 = function format(formatter) {
+  return function (value) {
+    var usedFormat = formatter.formats[value.length];
 
-      var formatPieces = usedFormat.split(formatter.formatChar);
-      var valuePieces = value.split("");
-      var zipped = formatPieces.map(function (v, i) {
-        return v + (valuePieces[i] || "");
-      });
-      return zipped.join("");
-    };
-  };
+    if (!usedFormat) {
+      return value;
+    }
 
-  var countDelims = function countDelims(formatter, index) {
-    var count = 0;
-    var format = formatter.formats[index];
-    if (!format) return 0;
-    formatter.uniqueDelimiters.forEach(function (delim) {
-      return count += format.split(delim).length - 1;
+    var formatPieces = usedFormat.split(formatter.formatChar);
+    var valuePieces = value.split("");
+    var zipped = formatPieces.map(function (v, i) {
+      return v + (valuePieces[i] || "");
     });
-    return count;
+    return zipped.join("");
   };
+};
 
-  var unformat = function unformat(formatter) {
-    return function (formattedValue, formatIndex) {
-      if (formatIndex >= formatter.formats.length) {
-        return formattedValue;
-      }
-
-      var format = formatter.formats[formatIndex];
-      return formattedValue.split("").filter(function (_, i) {
-        return !(format[i] != formatter.formatChar);
-      }).join("");
-    };
-  };
-  var inject = function inject(baseString) {
-    return function (start, end, newString) {
-      return baseString.substring(0, start) + newString + baseString.substring(end);
-    };
-  };
-  var formattedToUnformattedIndex = function formattedToUnformattedIndex(formattedIndex, rawValue, formatter) {
-    var maxFormatExceeded = rawValue.length >= formatter.formats.length;
+var countDelims = function countDelims(formatter, index) {
+  var count = 0;
+  var format = formatter.formats[index];
+  if (!format) return 0;
+  formatter.uniqueDelimiters.forEach(function (delim) {
+    return count += format.split(delim).length - 1;
+  });
+  return count;
+};
 
-    if (maxFormatExceeded) {
-      return formattedIndex;
-    } else {
-      var formatString = formatter.formats[rawValue.length];
-      var beforeString = formatString.slice(0, formattedIndex);
-      return beforeString.split("").filter(function (c) {
-        return c === formatter.formatChar;
-      }).length;
+var unformat = function unformat(formatter) {
+  return function (formattedValue, formatIndex) {
+    if (formatIndex >= formatter.formats.length) {
+      return formattedValue;
     }
-  };
-  var unformattedToFormattedIndex = function unformattedToFormattedIndex(rawIndex, rawValue, formatter, del) {
-    var maxFormatExceeded = rawValue.length >= formatter.formats.length; // If forced to stay formatted, offset by delims - 1
-    // This is done so the component doesn't assume that any added chars will be kept
-    // (i.e. if an external constraint is applied)
-
-    if (maxFormatExceeded) {
-      var delims = countDelims(formatter, rawValue.length - 1);
-      return delims > 0 && !del ? rawIndex + delims - 1 : rawIndex;
-    } else {
-      return formatter.formats[rawValue.length].split(formatter.formatChar).slice(0, rawIndex).reduce(function (acc, curr) {
-        return curr.length + acc;
-      }, 0) + rawIndex;
-    }
-  };
 
-  var createFormat = function createFormat(formats, formatChar) {
-    return {
-      uniqueDelimiters: getUniqueFormatDelimiters(formats, formatChar),
-      formats: formats,
-      formatChar: formatChar
-    };
+    var format = formatter.formats[formatIndex];
+    return formattedValue.split("").filter(function (_, i) {
+      return !(format[i] != formatter.formatChar);
+    }).join("");
   };
+};
+var inject = function inject(baseString) {
+  return function (start, end, newString) {
+    return baseString.substring(0, start) + newString + baseString.substring(end);
+  };
+};
+var formattedToUnformattedIndex = function formattedToUnformattedIndex(formattedIndex, rawValue, formatter) {
+  var maxFormatExceeded = rawValue.length >= formatter.formats.length;
 
-  var FormattedInput = function FormattedInput(_ref) {
-    var value = _ref.value,
-        formatter = _ref.formatter,
-        _onChange = _ref.onChange,
-        props = _objectWithoutProperties(_ref, ["value", "formatter", "onChange"]);
-
-    var inputEl = React.useRef(null);
-
-    var _useState = React.useState({
-      selectionStart: 0,
-      selectionEnd: 0,
-      rawValue: value,
-      "delete": false,
-      formattedValue: format(formatter)(value)
-    }),
-        _useState2 = _slicedToArray(_useState, 2),
-        state = _useState2[0],
-        setState = _useState2[1];
-
-    React.useLayoutEffect(function () {
-      // A lot of the work here is cursor manipulation
-      if (inputEl.current && inputEl.current === document.activeElement) {
-        inputEl.current.setSelectionRange(state.selectionStart, state.selectionEnd);
-      }
-    });
-    return React__default.createElement("input", _extends({}, props, {
-      ref: inputEl,
-      value: format(formatter)(value),
-      onKeyDown: function onKeyDown(event) {
-        // Keep track of the state of the input before onChange, including if user is hitting delete
-        setState({
-          rawValue: value,
-          selectionStart: event.target.selectionStart,
-          selectionEnd: event.target.selectionEnd,
-          "delete": event.key === "Backspace" || event.key === "Delete",
-          formattedValue: event.target.value
-        });
-      },
-      onChange: function onChange(event) {
-        /* At the beginning of onChange, event.target.value is a concat of the previous formatted value
-         * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
-         * the unformatted value for the user's onChange, the formatted string and unformatted injection need
-         * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
-         * old unformatted value.
-         */
-        var injectionLength = event.target.value.length - state.formattedValue.length;
-        var end = state.selectionStart === state.selectionEnd ? state.selectionStart + injectionLength : state.selectionEnd - 1;
-        var injection = event.target.value.substring(state.selectionStart, end); // Injection is the new unformatted piece of the input
-        // Need to find where to put it
-
-        var rawInjectionPointStart = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter);
-        var rawInjectionPointEnd = formattedToUnformattedIndex(state.selectionEnd, state.rawValue, formatter); // Unformat the previous formatted value for injection
-        // Using the relevant format string, strips away chars not marked with the formatChar
-
-        var unformattedOldValue = unformat(formatter)(state.formattedValue, state.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
+  if (maxFormatExceeded) {
+    return formattedIndex;
+  } else {
+    var formatString = formatter.formats[rawValue.length];
+    var beforeString = formatString.slice(0, formattedIndex);
+    return beforeString.split("").filter(function (c) {
+      return c === formatter.formatChar;
+    }).length;
+  }
+};
+var unformattedToFormattedIndex = function unformattedToFormattedIndex(rawIndex, rawValue, formatter, del) {
+  var maxFormatExceeded = rawValue.length >= formatter.formats.length; // If forced to stay formatted, offset by delims - 1
+  // This is done so the component doesn't assume that any added chars will be kept
+  // (i.e. if an external constraint is applied)
 
-        var injectIntoOldValue = inject(unformattedOldValue);
-        var unformattedNewValue = state["delete"] ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
-        var lengthDifference = unformattedNewValue.length - state.rawValue.length;
-        var rawIndex = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
-        // Applied by useLayoutEffect
+  if (maxFormatExceeded) {
+    var delims = countDelims(formatter, rawValue.length - 1);
+    return delims > 0 && !del ? rawIndex + delims - 1 : rawIndex;
+  } else {
+    return formatter.formats[rawValue.length].split(formatter.formatChar).slice(0, rawIndex).reduce(function (acc, curr) {
+      return curr.length + acc;
+    }, 0) + rawIndex;
+  }
+};
 
-        var newFormattedCursorPosition = state.selectionStart == state.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, state["delete"]) : state["delete"] ? state.selectionStart : state.selectionEnd;
-        setState({
-          selectionStart: newFormattedCursorPosition,
-          selectionEnd: newFormattedCursorPosition,
-          rawValue: state.rawValue,
-          "delete": false,
-          formattedValue: state.formattedValue
-        }); // Apply the external onChange function to the raw underlying string
-        // This is where the user generally updates the input value
-
-        if (_onChange) {
-          _onChange(unformattedNewValue);
-        }
-      }
-    }));
+var createFormat = function createFormat(formats, formatChar) {
+  return {
+    uniqueDelimiters: getUniqueFormatDelimiters(formats, formatChar),
+    formats: formats,
+    formatChar: formatChar
   };
+};
 
-  exports.FormattedInput = FormattedInput;
-  exports.createFormat = createFormat;
-  exports.format = format;
+var FormattedInput = function FormattedInput(_ref) {
+  var value = _ref.value,
+      formatter = _ref.formatter,
+      _onChange = _ref.onChange,
+      props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
 
-  Object.defineProperty(exports, '__esModule', { value: true });
+  var inputEl = useRef(null);
 
-}));
-});
+  var _useState = useState({
+    selectionStart: 0,
+    selectionEnd: 0,
+    rawValue: value,
+    "delete": false,
+    formattedValue: format$1(formatter)(value)
+  }),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
 
-unwrapExports(src);
-var src_1 = src.FormattedInput;
-var src_2 = src.createFormat;
-var src_3 = src.format;
+  useLayoutEffect(function () {
+    // A lot of the work here is cursor manipulation
+    if (inputEl.current && inputEl.current === document.activeElement) {
+      inputEl.current.setSelectionRange(state.selectionStart, state.selectionEnd);
+    }
+  });
+  return React.createElement("input", _extends$2({}, props, {
+    ref: inputEl,
+    value: format$1(formatter)(value),
+    onKeyDown: function onKeyDown(event) {
+      // Keep track of the state of the input before onChange, including if user is hitting delete
+      setState({
+        rawValue: value,
+        selectionStart: event.target.selectionStart,
+        selectionEnd: event.target.selectionEnd,
+        "delete": event.key === "Backspace" || event.key === "Delete",
+        formattedValue: event.target.value
+      });
+    },
+    onChange: function onChange(event) {
+      /* At the beginning of onChange, event.target.value is a concat of the previous formatted value
+       * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
+       * the unformatted value for the user's onChange, the formatted string and unformatted injection need
+       * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
+       * old unformatted value.
+       */
+      var injectionLength = event.target.value.length - state.formattedValue.length;
+      var end = state.selectionStart === state.selectionEnd ? state.selectionStart + injectionLength : state.selectionEnd - 1;
+      var injection = event.target.value.substring(state.selectionStart, end); // Injection is the new unformatted piece of the input
+      // Need to find where to put it
+
+      var rawInjectionPointStart = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter);
+      var rawInjectionPointEnd = formattedToUnformattedIndex(state.selectionEnd, state.rawValue, formatter); // Unformat the previous formatted value for injection
+      // Using the relevant format string, strips away chars not marked with the formatChar
+
+      var unformattedOldValue = unformat(formatter)(state.formattedValue, state.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
+
+      var injectIntoOldValue = inject(unformattedOldValue);
+      var unformattedNewValue = state["delete"] ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
+      var lengthDifference = unformattedNewValue.length - state.rawValue.length;
+      var rawIndex = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
+      // Applied by useLayoutEffect
+
+      var newFormattedCursorPosition = state.selectionStart == state.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, state["delete"]) : state["delete"] ? state.selectionStart : state.selectionEnd;
+      setState({
+        selectionStart: newFormattedCursorPosition,
+        selectionEnd: newFormattedCursorPosition,
+        rawValue: state.rawValue,
+        "delete": false,
+        formattedValue: state.formattedValue
+      }); // Apply the external onChange function to the raw underlying string
+      // This is where the user generally updates the input value
+
+      if (_onChange) {
+        _onChange(unformattedNewValue);
+      }
+    }
+  }));
+};
 
 var linkColor$2 = {
   "default": "".concat(MATISSE_BLUE),
@@ -21065,7 +21041,7 @@ var FormattedInputField = styled(function (_ref8) {
       themeValues = _ref8.themeValues,
       props = _objectWithoutProperties(_ref8, _excluded$p);
 
-  return /*#__PURE__*/React.createElement(src_1, props);
+  return /*#__PURE__*/React.createElement(FormattedInput, props);
 }).withConfig({
   displayName: "FormInput__FormattedInputField",
   componentId: "sc-l094r1-1"
@@ -34857,11 +34833,11 @@ var zipFormats = ["", "_", "__", "___", "____", "_____", "______", "_____-__", "
 var creditCardFormats = ["", "_", "__", "___", "____", "____ _", "____ __", "____ ___", "____ ____", "____ ____ _", "____ ____ __", "____ ____ ___", "____ ____ ____", "____ ____ ____ _", "____ ____ ____ __", "____ ____ ____ ___", "____ ____ ____ ____"];
 var moneyFormats = ["", "$0.0_", "$0.__", "$_.__", "$__.__", "$___.__", "$_,___.__", "$__,___.__", "$___,___.__", "$_,___,___.__", "$__,___,___.__", "$___,___,___.__", "$_,___,___,___.__", "$__,___,___,___.__", "$___,___,___,___.__", "$_,___,___,___,___.__"];
 var expirationDateFormats = ["", "_", "__/", "__/_", "__/__"];
-var zipFormat = src_2(zipFormats, formatDelimiter);
-var creditCardFormat = src_2(creditCardFormats, formatDelimiter);
-var expirationDateFormat = src_2(expirationDateFormats, formatDelimiter);
-var phoneFormat = src_2(phoneFormats, formatDelimiter);
-var moneyFormat = src_2(moneyFormats, formatDelimiter);
+var zipFormat = createFormat(zipFormats, formatDelimiter);
+var creditCardFormat = createFormat(creditCardFormats, formatDelimiter);
+var expirationDateFormat = createFormat(expirationDateFormats, formatDelimiter);
+var phoneFormat = createFormat(phoneFormats, formatDelimiter);
+var moneyFormat = createFormat(moneyFormats, formatDelimiter);
 
 var formats = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -40383,7 +40359,7 @@ var PhoneForm = function PhoneForm(_ref) {
     field: fields.phone,
     fieldActions: actions.fields.phone,
     showErrors: showErrors,
-    formatter: src_2(phoneFormats, formatDelimiter),
+    formatter: createFormat(phoneFormats, formatDelimiter),
     onKeyUp: function onKeyUp(e) {
       return e.key === "Enter" && handleSubmit(e);
     },