@thecb/components 7.5.1 → 7.5.2

package/dist/src/index.js

@@ -0,0 +1,4 @@
+export * from "./components";
+import * as constants from "./constants";
+import * as util from "./util";
+export { constants, util };

package/dist/src/util/focusFirstInvalidInputHook.d.ts

@@ -0,0 +1,2 @@
+export default useFocusInvalidInput;
+declare function useFocusInvalidInput(hasErrors: any, resetHasErrors?: () => void): void;

package/dist/src/util/focusFirstInvalidInputHook.js

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+var useFocusInvalidInput = function (hasErrors, resetHasErrors) {
+    if (resetHasErrors === void 0) { resetHasErrors = function () { }; }
+    // Only move focus when "hasErrors" is true
+    // "hasErrors" is managed by container page of form
+    // typically set to "true" on attempted form submission, if errors exist
+    // Reset errors, if provided, resets the error state tracking in order to properly re-run
+    useEffect(function () {
+        var _a;
+        if (hasErrors) {
+            var inputsWithErrors = document.querySelectorAll("input[aria-invalid=true]");
+            (_a = inputsWithErrors === null || inputsWithErrors === void 0 ? void 0 : inputsWithErrors[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        return function () { return resetHasErrors(false); };
+    });
+};
+export default useFocusInvalidInput;

package/dist/src/util/formats.d.ts

@@ -0,0 +1,9 @@
+export const formatDelimiter: "_";
+export const phoneFormats: string[];
+export const moneyFormats: string[];
+export const expirationDateFormats: string[];
+export const zipFormat: any;
+export const creditCardFormat: any;
+export const expirationDateFormat: any;
+export const phoneFormat: any;
+export const moneyFormat: any;

package/dist/src/util/formats.js

@@ -0,0 +1,70 @@
+import { createFormat } from "formatted-input";
+export var formatDelimiter = "_";
+export var phoneFormats = [
+    "",
+    "_",
+    "__",
+    "(___) ",
+    "(___) _",
+    "(___) __",
+    "(___) ___-",
+    "(___) ___-_",
+    "(___) ___-__",
+    "(___) ___-___",
+    "(___) ___-____"
+];
+var zipFormats = [
+    "",
+    "_",
+    "__",
+    "___",
+    "____",
+    "_____",
+    "______",
+    "_____-__",
+    "_____-___",
+    "_____-____"
+];
+var creditCardFormats = [
+    "",
+    "_",
+    "__",
+    "___",
+    "____",
+    "____ _",
+    "____ __",
+    "____ ___",
+    "____ ____",
+    "____ ____ _",
+    "____ ____ __",
+    "____ ____ ___",
+    "____ ____ ____",
+    "____ ____ ____ _",
+    "____ ____ ____ __",
+    "____ ____ ____ ___",
+    "____ ____ ____ ____"
+];
+export var moneyFormats = [
+    "",
+    "$0.0_",
+    "$0.__",
+    "$_.__",
+    "$__.__",
+    "$___.__",
+    "$_,___.__",
+    "$__,___.__",
+    "$___,___.__",
+    "$_,___,___.__",
+    "$__,___,___.__",
+    "$___,___,___.__",
+    "$_,___,___,___.__",
+    "$__,___,___,___.__",
+    "$___,___,___,___.__",
+    "$_,___,___,___,___.__"
+];
+export var expirationDateFormats = ["", "_", "__/", "__/_", "__/__"];
+export var zipFormat = createFormat(zipFormats, formatDelimiter);
+export var creditCardFormat = createFormat(creditCardFormats, formatDelimiter);
+export var expirationDateFormat = createFormat(expirationDateFormats, formatDelimiter);
+export var phoneFormat = createFormat(phoneFormats, formatDelimiter);
+export var moneyFormat = createFormat(moneyFormats, formatDelimiter);

package/dist/src/util/general.d.ts

@@ -0,0 +1,13 @@
+export function noop(): void;
+export function displayCurrency(cents: any): any;
+export function convertCentsToMoneyInt(n: any): string;
+export function formatPercent(decimal: any): string;
+export function createIdFromString(text: any, postscript: any, unique?: boolean): string;
+export function safeChildren(children: any, replacement?: any[]): any;
+export function generateClickHandler(form: any, handleErrors: any, submitForm: any): (e: any) => any;
+export function checkCardBrand(number: any): "DISCOVER" | "MASTERCARD" | "VISA" | "AMEX" | "UNKNOWN";
+export function displayCardBrand(number: any): "Discover" | "Mastercard" | "Visa" | "American Express" | "Unknown Card";
+export function checkDeniedCards(name: any): RegExp | "";
+export const screenReaderOnlyStyle: "\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n";
+export const inputPlaceholderTextStyle: string;
+export const inputDisabledStyle: "\n  color: #6e727e;\n  background-color: #f7f7f7;\n  pointer-events: none;\n";

package/dist/src/util/general.js

@@ -0,0 +1,101 @@
+import React, { Fragment } from "react";
+import numeral from "numeral";
+import { CHARADE_GREY } from "../constants/colors";
+export var noop = function () { };
+var formatMoneyString = function (s) { return numeral(s).format("$0,0.00"); };
+var convertCentsToMoneyDecimal = function (n) { return (n / 100).toFixed(2); };
+export var displayCurrency = function (cents) {
+    return formatMoneyString(convertCentsToMoneyDecimal(cents));
+};
+export var convertCentsToMoneyInt = function (n) { return (n / 100).toFixed(0); };
+export var formatPercent = function (decimal) { return Number.parseFloat(decimal).toFixed(2); };
+var createUniqueId = function () {
+    return "_" +
+        Math.random()
+            .toString(36)
+            .substr(2, 9);
+};
+export var createIdFromString = function (text, postscript, unique) {
+    if (unique === void 0) { unique = false; }
+    if (text === undefined) {
+        return createUniqueId();
+    }
+    else {
+        // "first name", undefined, false -> "first-name"
+        // "email address", "error message", false -> "email-address-error-message"
+        // "shopping cart", "order item", true -> "shopping-cart-order-item_2ahtlz608"
+        return "".concat(text === null || text === void 0 ? void 0 : text.replace(/\s+/g, "-")).concat(postscript ? "-".concat(postscript === null || postscript === void 0 ? void 0 : postscript.replace(/\s+/g, "-")) : "").concat(unique ? createUniqueId() : "");
+    }
+};
+export var safeChildren = function (children, replacement) {
+    if (replacement === void 0) { replacement = []; }
+    var unsafeValues = [false, undefined, NaN, null];
+    if (children && children instanceof Array) {
+        return children.map(function (child) {
+            return unsafeValues.includes(child) ? (React.createElement(Fragment, { key: createUniqueId() }, replacement)) : (child);
+        });
+    }
+    return unsafeValues.includes(children) ? replacement : children;
+};
+export var generateClickHandler = function (form, handleErrors, submitForm) { return function (e) {
+    e.preventDefault();
+    var formHasError = Object.values(form.fields).reduce(function (acc, curr) { return acc || curr.hasErrors; }, false);
+    return formHasError ? handleErrors() : submitForm();
+}; };
+export var checkCardBrand = function (number) {
+    if (/^6011/.test(number)) {
+        return "DISCOVER";
+    }
+    else if (/^5[1-5]/.test(number)) {
+        return "MASTERCARD";
+    }
+    else if (/^4/.test(number)) {
+        return "VISA";
+    }
+    else if (/^3[4,7]/.test(number)) {
+        return "AMEX";
+    }
+    else
+        return "UNKNOWN";
+};
+export var displayCardBrand = function (number) {
+    if (/^6011/.test(number)) {
+        return "Discover";
+    }
+    else if (/^5[1-5]/.test(number)) {
+        return "Mastercard";
+    }
+    else if (/^4/.test(number)) {
+        return "Visa";
+    }
+    else if (/^3[4,7]/.test(number)) {
+        return "American Express";
+    }
+    else
+        return "Unknown Card";
+};
+export var checkDeniedCards = function (name) {
+    switch (name) {
+        case "DISCOVER":
+            return /^(?!6011)/;
+        case "MASTERCARD":
+            return /^(?!5[1-5])/;
+        case "VISA":
+            return /^(?!4)/;
+        case "AMEX":
+            return /^(?!3[4,7])/;
+        default:
+            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
+*/
+export var screenReaderOnlyStyle = "\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n";
+export var inputPlaceholderTextStyle = "\n  ::-webkit-input-placeholder {\n    color: ".concat(CHARADE_GREY, ";\n  }\n  ::-moz-placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n  ::-ms-placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n  ::placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n");
+export var inputDisabledStyle = "\n  color: #6e727e;\n  background-color: #f7f7f7;\n  pointer-events: none;\n";

package/dist/src/util/index.d.ts

@@ -0,0 +1,5 @@
+import * as formats from "./formats";
+import * as general from "./general";
+import * as theme from "./themeUtils";
+import useFocusInvalidInput from "./focusFirstInvalidInputHook";
+export { formats, general, theme, useFocusInvalidInput };

package/dist/src/util/index.js

@@ -0,0 +1,5 @@
+import * as formats from "./formats";
+import * as general from "./general";
+import * as theme from "./themeUtils";
+import useFocusInvalidInput from "./focusFirstInvalidInputHook";
+export { formats, general, theme, useFocusInvalidInput };

package/dist/src/util/inputValidationUtils.d.ts

@@ -0,0 +1,43 @@
+export const MIN_LENGTH_ERROR: "error/HAS_LENGTH";
+export const MAX_LENGTH_ERROR: "max_length_error";
+export const EXACT_LENGTH_ERROR: "exact_length_error";
+export const MULTIPLE_LENGTHS_ERROR: "multiple_lengths_error";
+export const EMAIL_ERROR: "email_error";
+export const HAS_NUMBER_ERROR: "error/HAS_NUMBER";
+export const HAS_UPPERCASE_LETTER_ERROR: "error/HAS_UPPERCASE_LETTER";
+export const HAS_LOWERCASE_LETTER_ERROR: "error/HAS_LOWERCASE_LETTER";
+export const HAS_SPECIAL_CHARACTER_ERROR: "error/HAS_SPECIAL_CHARACTER";
+export const ONLY_NUMBERS_ERROR: "only_numbers_error";
+export const ONLY_LETTERS_ERROR: "only_letters_error";
+export const REQUIRED_FIELD_ERROR: "required_field_error";
+export const NUM_GREATER_THAN_ERROR: "num_greater_than_error";
+export const NUM_LESS_THAN_ERROR: "num_less_than_error";
+export const MATCHES_FIELD_ERROR: "matches_field_error";
+export const VALID_SELECT_OPTION_ERROR: "valid_select_option_error";
+export const DEFAULT_ERROR_MESSAGES: {
+    "error/HAS_LENGTH": (inputState: any) => any;
+    max_length_error: (inputState: any) => any;
+    exact_length_error: (inputState: any) => any;
+    multiple_lengths_error: (inputState: any) => any;
+    email_error: (inputState: any) => any;
+    "error/HAS_NUMBER": (inputState: any) => any;
+    "error/HAS_UPPERCASE_LETTER": (inputState: any) => any;
+    "error/HAS_LOWERCASE_LETTER": (inputState: any) => any;
+    "error/HAS_SPECIAL_CHARACTER": (inputState: any) => any;
+    only_numbers_error: (inputState: any) => any;
+    only_letters_error: (inputState: any) => any;
+    required_field_error: (inputState: any) => any;
+    num_greater_than_error: (inputState: any) => any;
+    num_less_than_error: (inputState: any) => any;
+    matches_field_error: (inputState: any) => any;
+    valid_select_option_error: (inputState: any) => any;
+};
+export const INPUT_STATE_NEUTRAL: "NEUTRAL";
+export const INPUT_STATE_INVALID: "INVALID";
+export const INPUT_STATE_VALID: "VALID";
+export function getInputState({ dirty, hasErrors, errors, rawValue }: {
+    dirty: any;
+    hasErrors: any;
+    errors: any;
+    rawValue: any;
+}, errorsToCheck?: any[]): "NEUTRAL" | "INVALID" | "VALID";

package/dist/src/util/inputValidationUtils.js

@@ -0,0 +1,92 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var _a;
+import * as R from "ramda";
+// Constants to reprsent input error types
+export var MIN_LENGTH_ERROR = "error/HAS_LENGTH";
+export var MAX_LENGTH_ERROR = "max_length_error";
+export var EXACT_LENGTH_ERROR = "exact_length_error";
+export var MULTIPLE_LENGTHS_ERROR = "multiple_lengths_error";
+export var EMAIL_ERROR = "email_error";
+export var HAS_NUMBER_ERROR = "error/HAS_NUMBER";
+export var HAS_UPPERCASE_LETTER_ERROR = "error/HAS_UPPERCASE_LETTER";
+export var HAS_LOWERCASE_LETTER_ERROR = "error/HAS_LOWERCASE_LETTER";
+export var HAS_SPECIAL_CHARACTER_ERROR = "error/HAS_SPECIAL_CHARACTER";
+export var ONLY_NUMBERS_ERROR = "only_numbers_error";
+export var ONLY_LETTERS_ERROR = "only_letters_error";
+export var REQUIRED_FIELD_ERROR = "required_field_error";
+export var NUM_GREATER_THAN_ERROR = "num_greater_than_error";
+export var NUM_LESS_THAN_ERROR = "num_less_than_error";
+export var MATCHES_FIELD_ERROR = "matches_field_error";
+export var VALID_SELECT_OPTION_ERROR = "valid_select_option_error";
+// Array<String>, Array<String> -> Object -> String
+var genErrorMessage = function (strings) {
+    var argKeys = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        argKeys[_i - 1] = arguments[_i];
+    }
+    return function (inputState) {
+        return strings.reduce(function (accum, current, index) {
+            return "".concat(accum).concat(current).concat(argKeys[index] ? R.pathOr("", [argKeys[index]], inputState) : "");
+        }, []);
+    };
+};
+/*
+What's going on here? This looks weird, you may ask...
+DEFAULT_ERROR_MESSAGES is a map between the error constants (which are returned by validators)
+and some tagged template literals.
+In this case, the template tag function is curried and returns a function which accepts an args object
+I'm calling that object inputState, but it could really be anything.
+When the error message string fucntion is called with that arg, it's reduced to produce a custom error message
+with interpolation.
+*/
+export var DEFAULT_ERROR_MESSAGES = (_a = {},
+    _a[MIN_LENGTH_ERROR] = genErrorMessage(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", " is too short"], ["", " is too short"])), "fieldLabel"),
+    _a[MAX_LENGTH_ERROR] = genErrorMessage(templateObject_2 || (templateObject_2 = __makeTemplateObject(["", " is too long"], ["", " is too long"])), "fieldLabel"),
+    _a[EXACT_LENGTH_ERROR] = genErrorMessage(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", " is not the right length"], ["", " is not the right length"])), "fieldLabel"),
+    _a[MULTIPLE_LENGTHS_ERROR] = genErrorMessage(templateObject_4 || (templateObject_4 = __makeTemplateObject(["", " is not a valid length"], ["", " is not a valid length"])), "fieldLabel"),
+    _a[EMAIL_ERROR] = genErrorMessage(templateObject_5 || (templateObject_5 = __makeTemplateObject(["", " is not a valid email address"], ["", " is not a valid email address"])), "fieldLabel"),
+    _a[HAS_NUMBER_ERROR] = genErrorMessage(templateObject_6 || (templateObject_6 = __makeTemplateObject(["", " needs a number"], ["", " needs a number"])), "fieldLabel"),
+    _a[HAS_UPPERCASE_LETTER_ERROR] = genErrorMessage(templateObject_7 || (templateObject_7 = __makeTemplateObject(["", " needs an uppercase letter"], ["", " needs an uppercase letter"])), "fieldLabel"),
+    _a[HAS_LOWERCASE_LETTER_ERROR] = genErrorMessage(templateObject_8 || (templateObject_8 = __makeTemplateObject(["", " needs a lowercase letter"], ["", " needs a lowercase letter"])), "fieldLabel"),
+    _a[HAS_SPECIAL_CHARACTER_ERROR] = genErrorMessage(templateObject_9 || (templateObject_9 = __makeTemplateObject(["", " needs a special character"], ["", " needs a special character"])), "fieldLabel"),
+    _a[ONLY_NUMBERS_ERROR] = genErrorMessage(templateObject_10 || (templateObject_10 = __makeTemplateObject(["", " must be only numbers"], ["", " must be only numbers"])), "fieldLabel"),
+    _a[ONLY_LETTERS_ERROR] = genErrorMessage(templateObject_11 || (templateObject_11 = __makeTemplateObject(["", " must be only letters"], ["", " must be only letters"])), "fieldLabel"),
+    _a[REQUIRED_FIELD_ERROR] = genErrorMessage(templateObject_12 || (templateObject_12 = __makeTemplateObject(["", " is required"], ["", " is required"])), "fieldLabel"),
+    _a[NUM_GREATER_THAN_ERROR] = genErrorMessage(templateObject_13 || (templateObject_13 = __makeTemplateObject(["", " is too high"], ["", " is too high"])), "fieldLabel"),
+    _a[NUM_LESS_THAN_ERROR] = genErrorMessage(templateObject_14 || (templateObject_14 = __makeTemplateObject(["", " is too low"], ["", " is too low"])), "fieldLabel"),
+    _a[MATCHES_FIELD_ERROR] = genErrorMessage(templateObject_15 || (templateObject_15 = __makeTemplateObject(["", " must match ", ""], ["", " must match ", ""])), "fieldLabel", "matchField"),
+    _a[VALID_SELECT_OPTION_ERROR] = genErrorMessage(templateObject_16 || (templateObject_16 = __makeTemplateObject(["", " is not a valid option"], ["", " is not a valid option"])), "fieldLabel"),
+    _a);
+// Constants to represent an input's state
+// Neutral - has not been validated
+// Invalid - has been validated and has an error
+// Valid - has been validated and has no error
+export var INPUT_STATE_NEUTRAL = "NEUTRAL";
+export var INPUT_STATE_INVALID = "INVALID";
+export var INPUT_STATE_VALID = "VALID";
+// Function to check the state of an input
+// This function is intended to be used with inputs that have multiple validators
+// Takes an input's state value, destructures for the input's error and showError booleans, list of errors
+// Also takes a list of the specific error constants to look for
+// If the input's showError property is false, the input has not been validated, and input state is NEUTRAL
+// If the input has an error, and showError is true, check if the errors we care about are in the input's error list
+// If yes, input state is INVALID
+// If input has no error and showError is true, or the errors we're looking for aren't present in the list
+// then input state is VALID
+// { error: Boolean, showError: Boolean, errorsList: Array<String> }, Array<String> -> String
+export var getInputState = function (_a, errorsToCheck) {
+    var dirty = _a.dirty, hasErrors = _a.hasErrors, errors = _a.errors, rawValue = _a.rawValue;
+    if (errorsToCheck === void 0) { errorsToCheck = []; }
+    if (!dirty) {
+        return INPUT_STATE_NEUTRAL;
+    }
+    else if ((dirty && rawValue === "") ||
+        (hasErrors && errorsToCheck.some(function (error) { return errors.includes(error); }))) {
+        return INPUT_STATE_INVALID;
+    }
+    return INPUT_STATE_VALID;
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;

package/dist/src/util/themeUtils.d.ts

@@ -0,0 +1,5 @@
+export function createThemeValues(themeContext: any, fallbackValues: any, componentName: any, variant: any): {};
+export function themeComponent(component: any, componentThemeId: any, fallbackValues: any, defaultVariant: any): ({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any;

package/dist/src/util/themeUtils.js

@@ -0,0 +1,129 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import theme from "styled-theming";
+import { useContext } from "react";
+import { ThemeContext } from "styled-components";
+/*
+themeContext: { name: "default", values: {JSON_THEME_VALUES_HERE} }
+
+fallbackValues: {
+  padding: {
+    primary: "2rem 1rem",
+    secondary: "1rem 0.5rem"
+  },
+  fontWeight: "600"
+}
+
+componentName: "Button"
+
+Iterates over a component's fallback values, checks to see if any of those values
+are present in the theme values available in the app's theme context.
+If they are, those values override the fallback value.
+
+We use the resuting values as an argument to the styled-theming lib functions
+to create new functions that can be called with theme props to produce values.
+Typically, those functions are passed back to components and used in styled-component files.
+We do things a bit differently...
+
+Before returning, we call the styled-theming functions with relevant theme props (name, variant...)
+The styled-theming API then returns the value
+Ultimately, an object of property values ({ color: "red", fontWeight: "600" })
+is returned to the component, which can be passed
+to whatever layout atoms / other atoms the component is using to build itself
+
+Why do things this way? It's powerful. Right now we're always using "default" as our theme name
+And only expecting one set of theme value in our context (one theme per client)
+
+However, this function can easily be modified to allow for multiple themes per client and
+allow for toggling those themes on the fly via state values
+
+Future use cases for the above:
+  -Different themes per agency/sub-division of client
+  -Extra themes designed for accessibility (high contrast / color blindness)
+  -Superfluous extra themes (dark mode)
+  -Toggling between many client themes / proposed client themes in a live demo
+
+The above functionality is not available right now, but it is trivial to enable it with this approach.
+*/
+export var createThemeValues = function (themeContext, fallbackValues, componentName, variant) {
+    var themeValues = themeContext.values;
+    var themeProps = { theme: __assign({ name: "default" }, themeContext), variant: variant };
+    var mergedValues = Object.entries(fallbackValues).reduce(function (acc, _a) {
+        var _b, _c;
+        var _d, _e;
+        var propName = _a[0], propValue = _a[1];
+        if (typeof propValue === "object") {
+            var mergedPropValues = Object.entries(propValue).reduce(function (innerAcc, _a) {
+                var _b;
+                var _c, _d, _e;
+                var variantName = _a[0], defaultVariantValue = _a[1];
+                var variantValue = (_e = (_d = (_c = themeValues === null || themeValues === void 0 ? void 0 : themeValues[componentName]) === null || _c === void 0 ? void 0 : _c[propName]) === null || _d === void 0 ? void 0 : _d[variantName]) !== null && _e !== void 0 ? _e : defaultVariantValue;
+                return __assign(__assign({}, innerAcc), (_b = {}, _b[variantName] = {
+                    default: variantValue
+                }, _b));
+            }, {});
+            // Always using "default" as our theme name right now
+            // In the future if we want to toggle themes on the fly, change this
+            return __assign(__assign({}, acc), (_b = {}, _b[propName] = mergedPropValues, _b));
+        }
+        var mergedSinglePropValue = (_e = (_d = themeValues === null || themeValues === void 0 ? void 0 : themeValues[componentName]) === null || _d === void 0 ? void 0 : _d[propName]) !== null && _e !== void 0 ? _e : propValue;
+        return __assign(__assign({}, acc), (_c = {}, _c[propName] = { default: mergedSinglePropValue }, _c));
+    }, {});
+    var createdTheme = Object.entries(mergedValues).reduce(function (acc, _a) {
+        var _b, _c;
+        var propName = _a[0], propValue = _a[1];
+        if (propValue[variant]) {
+            return __assign(__assign({}, acc), (_b = {}, _b[propName] = theme.variants("name", "variant", propValue)(themeProps), _b));
+        }
+        return __assign(__assign({}, acc), (_c = {}, _c[propName] = theme("name", propValue)(themeProps), _c));
+    }, {});
+    return createdTheme;
+};
+export var themeComponent = function (component, componentThemeId, fallbackValues, defaultVariant) { return function (_a) {
+    var _b;
+    var _c = _a.variant, variant = _c === void 0 ? defaultVariant : _c, props = __rest(_a, ["variant"]);
+    var themeContext = useContext(ThemeContext);
+    var metadata = (_b = themeContext === null || themeContext === void 0 ? void 0 : themeContext.metadata) !== null && _b !== void 0 ? _b : {};
+    var themeValues = themeContext
+        ? createThemeValues(themeContext, fallbackValues, componentThemeId, variant)
+        : fallbackValues;
+    return component(__assign(__assign({}, props), { themeValues: themeValues, variant: variant, metadata: metadata }));
+}; };
+/*
+Keeping this around for now in case we need it later...
+
+export const generateImgSrc = (
+  configAssetsEndpoint,
+  clientSlug,
+  agency = ""
+) => filename => {
+  if (configAssetsEndpoint === "http://localhost:8080/assets") {
+    return agency !== ""
+      ? `${configAssetsEndpoint}/${clientSlug}/${agency}/${filename}`
+      : `${configAssetsEndpoint}/${clientSlug}/${filename}`;
+  }
+  return agency !== ""
+    ? `${configAssetsEndpoint}/${agency}/${filename}`
+    : `${configAssetsEndpoint}/${filename}`;
+};
+*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.5.1",
+  "version": "7.5.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

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

@@ -0,0 +1,49 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const FindIconSmall = ({ themeValues, iconIndex = 0 }) => {
+  const maskId = `find-icon-mask-${iconIndex}`;
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.4142 4.34313C13.1295 6.05839 13.338 8.70983 12.0397 10.6527L15.9968 14.6098C16.1921 14.805 16.1921 15.1216 15.9968 15.3169L15.4665 15.8472C15.2712 16.0425 14.9546 16.0425 14.7594 15.8472L10.8287 11.9165C8.87269 13.3493 6.1108 13.1818 4.34315 11.4142C2.39053 9.46157 2.39053 6.29575 4.34315 4.34313C6.29577 2.39051 9.4616 2.39051 11.4142 4.34313ZM10.4246 10.4246C11.7915 9.05777 11.7915 6.84169 10.4246 5.47486C9.05779 4.10802 6.84171 4.10802 5.47488 5.47486C4.10804 6.84169 4.10804 9.05777 5.47488 10.4246C6.84171 11.7914 9.05779 11.7914 10.4246 10.4246Z"
+        fill={themeValues.singleIconColor}
+      />
+      <mask
+        id={maskId}
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="2"
+        y="2"
+        width="15"
+        height="14"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.4142 4.34313C13.1295 6.05839 13.338 8.70983 12.0397 10.6527L15.9968 14.6098C16.1921 14.805 16.1921 15.1216 15.9968 15.3169L15.4665 15.8472C15.2712 16.0425 14.9546 16.0425 14.7594 15.8472L10.8287 11.9165C8.87269 13.3493 6.1108 13.1818 4.34315 11.4142C2.39053 9.46157 2.39053 6.29575 4.34315 4.34313C6.29577 2.39051 9.4616 2.39051 11.4142 4.34313ZM10.4246 10.4246C11.7915 9.05777 11.7915 6.84169 10.4246 5.47486C9.05779 4.10802 6.84171 4.10802 5.47488 5.47486C4.10804 6.84169 4.10804 9.05777 5.47488 10.4246C6.84171 11.7914 9.05779 11.7914 10.4246 10.4246Z"
+          fill="white"
+        />
+      </mask>
+      <g mask={`url(#${maskId})`}>
+        <rect width="20" height="20" fill={themeValues.singleIconColor} />
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  FindIconSmall,
+  "Icons",
+  fallbackValues,
+  "primary"
+);

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

@@ -61,6 +61,7 @@ import WalletBannerIcon from "./WalletBannerIcon";
 import StandardCheckoutImage from "./StandardCheckoutImage";
 import GuidedCheckoutImage from "./GuidedCheckoutImage";
 import ProfileImage from "./ProfileImage";
+import FindIconSmall from "./FindIconSmall";
 
 export {
   AccountsIcon,
@@ -125,5 +126,6 @@ export {
   WalletBannerIcon,
   StandardCheckoutImage,
   GuidedCheckoutImage,
-  ProfileImage
+  ProfileImage,
+  FindIconSmall
 };

package/src/components/atoms/index.js

@@ -32,7 +32,8 @@ export { default as Paragraph } from "./paragraph";
 export { default as PasswordRequirements } from "./password-requirements";
 export { default as Placeholder } from "./placeholder";
 export { default as ProcessingFee } from "./processing-fee";
-export { default as RadioButton } from "./radio-button";
+export { default as RadioButtonWithLabel } from "./radio-button-with-label";
+export { default as RadioButton } from "../molecules/radio-section/radio-button/RadioButton";
 export { default as SearchableSelect } from "./searchable-select";
 export { default as SolidDivider } from "./solid-divider";
 export { default as Spinner } from "./spinner";

package/src/components/atoms/link/ExternalLink.d.ts

@@ -15,4 +15,4 @@ export interface ExternalLinkProps {
 }
 
 export const ExternalLink: React.FC<Expand<ExternalLinkProps> &
-  React.HTMLAttributes<HTMLElement>>;
+  React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLLinkElement> }>;