@thecb/components 4.1.0 → 4.1.4

package/dist/index.cjs.js

@@ -14175,6 +14175,190 @@ var SearchIcon = function SearchIcon() {
   })))))));
 };
 
+var WalletIcon = function WalletIcon(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "299",
+    height: "150",
+    viewBox: "0 0 299 150"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(-154 -340)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(132 261)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(22 79)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    stroke: "#3B414D",
+    strokeLinecap: "round",
+    strokeWidth: "4.08",
+    transform: "translate(52.686 118.445)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M208.2 0.375L175.611 0.776"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M233.568 0.375L218.318 0.776"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M44.527 0.375L17.757 0.776"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M7.759 0.375L0 0.776"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#B8E4F4",
+    d: "M192.663 142.912c0 3.646-13.311 6.602-29.731 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602s29.73 2.956 29.73 6.602"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "4.08",
+    transform: "translate(150.58 129.154)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M8.08496185 -1.08959555e-14L8.08496185 12.6741246 1.81599258e-15 12.6741246"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M16.0044112 -1.18039517e-14L16.0044112 13.0723155 24.0893731 13.0723155"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "4.08",
+    d: "M97.135 97.043L85.756 106.925"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "4.08",
+    d: "M267.332301 89.6743933L241.12027 107.066692 228.276465 97.0878034"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeWidth: "4.08",
+    d: "M257.527 89.028L274.395 89.028"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(255.032 47.73)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "40.703",
+    height: "25.03",
+    x: "1.02",
+    y: "1.02",
+    fill: "#E8FFEF",
+    stroke: "#45B770",
+    strokeWidth: "2.04",
+    rx: "2.72"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#45B770",
+    d: "M0 6.411H42.743V12.11H0z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(249.333 54.141)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "40.703",
+    height: "25.03",
+    x: "1.02",
+    y: "1.02",
+    fill: "#CACED8",
+    stroke: "#3B414D",
+    strokeWidth: "2.04",
+    rx: "2.72"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#3B414D",
+    d: "M0 6.411H42.743V12.11H0z"
+  }), /*#__PURE__*/React__default.createElement("rect", {
+    width: "9.973",
+    height: "2.85",
+    x: "27.163",
+    y: "18.367",
+    fill: "#3B414D",
+    rx: "1.36"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(237.223 59.128)"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "8.905",
+    cy: "8.905",
+    r: "8.905",
+    fill: themeValues.subIconColor
+  }), /*#__PURE__*/React__default.createElement("g", {
+    fill: "#FFF",
+    transform: "translate(4.274 4.274)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M3.562 0H5.699V9.261H3.562z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 3.562H9.261V5.699H0z"
+  }))), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#B8E4F4",
+    stroke: "#3B414D",
+    strokeWidth: "4.08",
+    d: "M196.423 22.699c2.441 0 4.651.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0V78.88c0 2.441-.99 4.651-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-90.084a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V28.139c0-1.502.609-2.862 1.593-3.847a5.423 5.423 0 013.847-1.593h0z"
+  }), /*#__PURE__*/React__default.createElement("rect", {
+    width: "32.964",
+    height: "11.592",
+    x: "97.499",
+    y: "22.699",
+    stroke: "#3B414D",
+    strokeWidth: "4.08",
+    rx: "5.796"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#B8E4F4",
+    d: "M121.817 24.933H141.051V32.057H121.817z"
+  }), /*#__PURE__*/React__default.createElement("rect", {
+    width: "133.928",
+    height: "98.309",
+    x: "95.459",
+    y: "32.057",
+    fill: "#FFF",
+    rx: "10.88"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#3B414D",
+    strokeWidth: "4.08",
+    d: "M218.507 34.097c2.44 0 4.65.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0v76.549c0 2.44-.99 4.65-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-112.168a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V34.097z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M99.733 35.148c.745.789 2.175 1.183 4.289 1.183s2.114.304 0 .911l-4.289-.022v-2.072z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "4.08",
+    d: "M85.756 106.925L111.684 112.988"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "4.08",
+    transform: "translate(112.486 110.241)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M3.887.053a3.887 3.887 0 000 7.775h3.396"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    stroke: "#3B414D",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "3.791",
+    transform: "translate(147.003 64.237)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M.415 3.316C1.012 1.651 2.54.466 4.333.466c1.792 0 3.321 1.185 3.918 2.85"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M23.928 3.316c.597-1.665 2.126-2.85 3.918-2.85 1.792 0 3.321 1.185 3.918 2.85"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#3B414D",
+    strokeLinecap: "round",
+    strokeWidth: "3.791",
+    d: "M173.17 87.239h0a3.52 3.52 0 01-3.52 3.52h-13.505a3.52 3.52 0 01-3.52-3.52"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    fill: "#B8E4F4"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M245.538 5.06c-.639 0-1.244.141-1.792.387a2.94 2.94 0 00-3.113-1.016A6.9 6.9 0 00234.193 0c-3.205 0-5.891 2.186-6.67 5.147a4.374 4.374 0 10-.865 8.662h18.88a4.374 4.374 0 100-8.749"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M37.36 89.272a6.45 6.45 0 00-3.769 1.214c-.507-5.463-5.102-9.74-10.697-9.74-4.925 0-9.073 3.314-10.343 7.833a7.545 7.545 0 00-4.537-1.516 7.587 7.587 0 000 15.175h29.345a6.483 6.483 0 000-12.966"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M108.726 75.108a4.35 4.35 0 00-1.792.387 2.943 2.943 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.431c-3.204 0-5.891 2.186-6.67 5.146a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M71.695 41.493c-.639 0-1.245.14-1.792.387a2.941 2.941 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.432c-3.204 0-5.89 2.187-6.67 5.147a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"
+  })))))));
+};
+
+var WalletIcon$1 = themeComponent(WalletIcon, "Icons", fallbackValues$2, "info");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -18321,7 +18505,7 @@ function _templateObject3$5() {
 }
 
 function _templateObject2$b() {
-  var data = _taggedTemplateLiteral(["\n  transform-origin: 0 0;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 8px 0 8px;\n  position: absolute;\n  width: 100%;\n  max-height: 400px;\n  overflow-y: scroll;\n  z-index: 1;\n  box-sizing: border-box;\n  &:focus {\n    outline: none;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  transform-origin: 0 0;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 8px 0 8px;\n  position: absolute;\n  width: 100%;\n  max-height: ", ";\n  overflow-y: scroll;\n  z-index: 1;\n  box-sizing: border-box;\n  &:focus {\n    outline: none;\n  }\n"]);
 
   _templateObject2$b = function _templateObject2() {
     return data;
@@ -18343,44 +18527,48 @@ var IconWrapper = styled__default.div(_templateObject$n(), function (_ref) {
   var open = _ref.open;
   return open ? "transform: rotate(-180deg)" : "";
 });
-var DropdownContentWrapper = styled__default.div(_templateObject2$b(), GREY_CHATEAU, WHITE);
-var DropdownItemWrapper = styled__default.div(_templateObject3$5(), function (_ref2) {
-  var selected = _ref2.selected,
-      themeValues = _ref2.themeValues;
+var DropdownContentWrapper = styled__default.div(_templateObject2$b(), GREY_CHATEAU, WHITE, function (_ref2) {
+  var maxHeight = _ref2.maxHeight;
+  return maxHeight || "400px";
+});
+var DropdownItemWrapper = styled__default.div(_templateObject3$5(), function (_ref3) {
+  var selected = _ref3.selected,
+      themeValues = _ref3.themeValues;
   return selected ? themeValues.selectedColor : WHITE;
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? "default" : "pointer";
 }, function (_ref4) {
-  var selected = _ref4.selected,
-      disabled = _ref4.disabled,
-      themeValues = _ref4.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+  var disabled = _ref4.disabled;
+  return disabled ? "default" : "pointer";
 }, function (_ref5) {
   var selected = _ref5.selected,
       disabled = _ref5.disabled,
       themeValues = _ref5.themeValues;
   return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+}, function (_ref6) {
+  var selected = _ref6.selected,
+      disabled = _ref6.disabled,
+      themeValues = _ref6.themeValues;
+  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
 });
-var SearchInput = styled__default.input(_templateObject4$2(), function (_ref6) {
-  var themeValues = _ref6.themeValues;
+var SearchInput = styled__default.input(_templateObject4$2(), function (_ref7) {
+  var themeValues = _ref7.themeValues;
   return themeValues.hoverColor && themeValues.hoverColor;
 });
 
-var Dropdown = function Dropdown(_ref7) {
+var Dropdown = function Dropdown(_ref8) {
   var _options$find;
 
-  var placeholder = _ref7.placeholder,
-      options = _ref7.options,
-      value = _ref7.value,
-      isOpen = _ref7.isOpen,
-      isError = _ref7.isError,
-      onSelect = _ref7.onSelect,
-      _ref7$disabledValues = _ref7.disabledValues,
-      disabledValues = _ref7$disabledValues === void 0 ? [] : _ref7$disabledValues,
-      _ref7$onClick = _ref7.onClick,
-      onClick = _ref7$onClick === void 0 ? noop : _ref7$onClick,
-      themeValues = _ref7.themeValues;
+  var placeholder = _ref8.placeholder,
+      options = _ref8.options,
+      value = _ref8.value,
+      isOpen = _ref8.isOpen,
+      isError = _ref8.isError,
+      onSelect = _ref8.onSelect,
+      _ref8$disabledValues = _ref8.disabledValues,
+      disabledValues = _ref8$disabledValues === void 0 ? [] : _ref8$disabledValues,
+      _ref8$onClick = _ref8.onClick,
+      onClick = _ref8$onClick === void 0 ? noop : _ref8$onClick,
+      themeValues = _ref8.themeValues,
+      maxHeight = _ref8.maxHeight;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18544,6 +18732,7 @@ var Dropdown = function Dropdown(_ref7) {
   })) === null || _options$find === void 0 ? void 0 : _options$find.text : placeholder), /*#__PURE__*/React__default.createElement(IconWrapper, {
     open: isOpen
   }, /*#__PURE__*/React__default.createElement(DropdownIcon, null)))), isOpen ? /*#__PURE__*/React__default.createElement(DropdownContentWrapper, {
+    maxHeight: maxHeight,
     open: isOpen,
     ref: dropdownRef,
     tabIndex: 0
@@ -18639,7 +18828,8 @@ var FormSelect = function FormSelect(_ref) {
       options = _ref.options,
       field = _ref.field,
       showErrors = _ref.showErrors,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      dropdownMaxHeight = _ref.dropdownMaxHeight;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18668,6 +18858,7 @@ var FormSelect = function FormSelect(_ref) {
     weight: "400",
     extraStyles: "margin-bottom: 4px;"
   }, labelTextWhenNoError), /*#__PURE__*/React__default.createElement(Dropdown$1, {
+    maxHeight: dropdownMaxHeight,
     placeholder: options[0] ? options[0].text : "",
     options: options,
     value: field.rawValue,
@@ -34325,6 +34516,7 @@ var EmailForm = function EmailForm(_ref) {
       fields = _ref.fields,
       actions = _ref.actions,
       showErrors = _ref.showErrors,
+      guestCheckout = _ref.guestCheckout,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
 
@@ -34341,7 +34533,9 @@ var EmailForm = function EmailForm(_ref) {
     variant: variant,
     role: "form",
     "aria-label": "Email"
-  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
+  }, guestCheckout && /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    margin: "0 0 1.125rem 0"
+  }, "If desired, you can create a wallet later for faster checkout"), /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Email",
     errorMessages: emailFieldErrorMessages,
     type: "email",
@@ -38050,6 +38244,10 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
       forwardButtonText = _ref$forwardButtonTex === void 0 ? "Next" : _ref$forwardButtonTex,
       forwardButtonAction = _ref.forwardButtonAction,
       forwardButtonLoading = _ref.forwardButtonLoading,
+      _ref$forwardButtonVar = _ref.forwardButtonVariant,
+      forwardButtonVariant = _ref$forwardButtonVar === void 0 ? "primary" : _ref$forwardButtonVar,
+      _ref$backButtonVarian = _ref.backButtonVariant,
+      backButtonVariant = _ref$backButtonVarian === void 0 ? "secondary" : _ref$backButtonVarian,
       backButtonAction = _ref.backButtonAction,
       cancelURL = _ref.cancelURL,
       _ref$cancelText = _ref.cancelText,
@@ -38064,12 +38262,12 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var backButton = !!cancelURL && !!cancelText ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
     text: cancelText,
     url: cancelURL,
-    variant: "secondary",
+    variant: backButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: cancelText
   }) : backButtonAction && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: "Back",
-    variant: "secondary",
+    variant: backButtonVariant,
     action: backButtonAction,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: "Back"
@@ -38077,12 +38275,12 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var forwardButton = !!redirectURL ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
     url: redirectURL,
     text: redirectText,
-    variant: "primary",
+    variant: forwardButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: redirectText
   }) : forwardButtonAction && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: forwardButtonText,
-    variant: "primary",
+    variant: forwardButtonVariant,
     action: forwardButtonAction,
     isLoading: forwardButtonLoading,
     extraStyles: isMobile && "flex-grow: 1",
@@ -40001,6 +40199,7 @@ exports.TimeoutImage = TimeoutImage;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.TypeaheadInput = TypeaheadInput;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
+exports.WalletIcon = WalletIcon$1;
 exports.WelcomeModule = WelcomeModule$1;
 exports.WorkflowTile = WorkflowTile;
 exports.cardRegistry = cardRegistry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.0",
+  "version": "4.1.4",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/dropdown/Dropdown.js

@@ -31,7 +31,7 @@ const DropdownContentWrapper = styled.div`
   padding: 8px 0 8px;
   position: absolute;
   width: 100%;
-  max-height: 400px;
+  max-height: ${({ maxHeight }) => maxHeight || "400px"};
   overflow-y: scroll;
   z-index: 1;
   box-sizing: border-box;
@@ -88,7 +88,8 @@ const Dropdown = ({
   onSelect,
   disabledValues = [],
   onClick = noop,
-  themeValues
+  themeValues,
+  maxHeight
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -242,7 +243,12 @@ const Dropdown = ({
         </Stack>
       </Box>
       {isOpen ? (
-        <DropdownContentWrapper open={isOpen} ref={dropdownRef} tabIndex={0}>
+        <DropdownContentWrapper
+          maxHeight={maxHeight}
+          open={isOpen}
+          ref={dropdownRef}
+          tabIndex={0}
+        >
           <Stack childGap="0">
             {filteredOptions.map((choice, i) => (
               <DropdownItemWrapper

package/src/components/atoms/form-select/FormSelect.js

@@ -11,7 +11,8 @@ const FormSelect = ({
   options,
   field,
   showErrors,
-  onChange
+  onChange,
+  dropdownMaxHeight
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -40,6 +41,7 @@ const FormSelect = ({
         {labelTextWhenNoError}
       </Text>
       <Dropdown
+        maxHeight={dropdownMaxHeight}
         placeholder={options[0] ? options[0].text : ""}
         options={options}
         value={field.rawValue}

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

@@ -0,0 +1,190 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const WalletIcon = ({ themeValues }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="299"
+      height="150"
+      viewBox="0 0 299 150"
+    >
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g transform="translate(-154 -340)">
+          <g transform="translate(132 261)">
+            <g transform="translate(22 79)">
+              <g
+                stroke="#3B414D"
+                strokeLinecap="round"
+                strokeWidth="4.08"
+                transform="translate(52.686 118.445)"
+              >
+                <path d="M208.2 0.375L175.611 0.776"></path>
+                <path d="M233.568 0.375L218.318 0.776"></path>
+                <path d="M44.527 0.375L17.757 0.776"></path>
+                <path d="M7.759 0.375L0 0.776"></path>
+              </g>
+              <path
+                fill="#B8E4F4"
+                d="M192.663 142.912c0 3.646-13.311 6.602-29.731 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602s29.73 2.956 29.73 6.602"
+              ></path>
+              <g
+                stroke="#45B770"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="4.08"
+                transform="translate(150.58 129.154)"
+              >
+                <path d="M8.08496185 -1.08959555e-14L8.08496185 12.6741246 1.81599258e-15 12.6741246"></path>
+                <path d="M16.0044112 -1.18039517e-14L16.0044112 13.0723155 24.0893731 13.0723155"></path>
+              </g>
+              <path
+                stroke="#45B770"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="4.08"
+                d="M97.135 97.043L85.756 106.925"
+              ></path>
+              <path
+                stroke="#45B770"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="4.08"
+                d="M267.332301 89.6743933L241.12027 107.066692 228.276465 97.0878034"
+              ></path>
+              <path
+                stroke="#45B770"
+                strokeLinecap="round"
+                strokeWidth="4.08"
+                d="M257.527 89.028L274.395 89.028"
+              ></path>
+              <g transform="translate(255.032 47.73)">
+                <rect
+                  width="40.703"
+                  height="25.03"
+                  x="1.02"
+                  y="1.02"
+                  fill="#E8FFEF"
+                  stroke="#45B770"
+                  strokeWidth="2.04"
+                  rx="2.72"
+                ></rect>
+                <path fill="#45B770" d="M0 6.411H42.743V12.11H0z"></path>
+              </g>
+              <g transform="translate(249.333 54.141)">
+                <rect
+                  width="40.703"
+                  height="25.03"
+                  x="1.02"
+                  y="1.02"
+                  fill="#CACED8"
+                  stroke="#3B414D"
+                  strokeWidth="2.04"
+                  rx="2.72"
+                ></rect>
+                <path fill="#3B414D" d="M0 6.411H42.743V12.11H0z"></path>
+                <rect
+                  width="9.973"
+                  height="2.85"
+                  x="27.163"
+                  y="18.367"
+                  fill="#3B414D"
+                  rx="1.36"
+                ></rect>
+              </g>
+              <g transform="translate(237.223 59.128)">
+                <circle
+                  cx="8.905"
+                  cy="8.905"
+                  r="8.905"
+                  fill={themeValues.subIconColor}
+                ></circle>
+                <g fill="#FFF" transform="translate(4.274 4.274)">
+                  <path d="M3.562 0H5.699V9.261H3.562z"></path>
+                  <path d="M0 3.562H9.261V5.699H0z"></path>
+                </g>
+              </g>
+              <path
+                fill="#B8E4F4"
+                stroke="#3B414D"
+                strokeWidth="4.08"
+                d="M196.423 22.699c2.441 0 4.651.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0V78.88c0 2.441-.99 4.651-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-90.084a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V28.139c0-1.502.609-2.862 1.593-3.847a5.423 5.423 0 013.847-1.593h0z"
+              ></path>
+              <rect
+                width="32.964"
+                height="11.592"
+                x="97.499"
+                y="22.699"
+                stroke="#3B414D"
+                strokeWidth="4.08"
+                rx="5.796"
+              ></rect>
+              <path
+                fill="#B8E4F4"
+                d="M121.817 24.933H141.051V32.057H121.817z"
+              ></path>
+              <rect
+                width="133.928"
+                height="98.309"
+                x="95.459"
+                y="32.057"
+                fill="#FFF"
+                rx="10.88"
+              ></rect>
+              <path
+                stroke="#3B414D"
+                strokeWidth="4.08"
+                d="M218.507 34.097c2.44 0 4.65.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0v76.549c0 2.44-.99 4.65-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-112.168a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V34.097z"
+              ></path>
+              <path
+                fill="#FFF"
+                d="M99.733 35.148c.745.789 2.175 1.183 4.289 1.183s2.114.304 0 .911l-4.289-.022v-2.072z"
+              ></path>
+              <path
+                stroke="#45B770"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="4.08"
+                d="M85.756 106.925L111.684 112.988"
+              ></path>
+              <g
+                stroke="#45B770"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="4.08"
+                transform="translate(112.486 110.241)"
+              >
+                <path d="M3.887.053a3.887 3.887 0 000 7.775h3.396"></path>
+              </g>
+              <g
+                stroke="#3B414D"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3.791"
+                transform="translate(147.003 64.237)"
+              >
+                <path d="M.415 3.316C1.012 1.651 2.54.466 4.333.466c1.792 0 3.321 1.185 3.918 2.85"></path>
+                <path d="M23.928 3.316c.597-1.665 2.126-2.85 3.918-2.85 1.792 0 3.321 1.185 3.918 2.85"></path>
+              </g>
+              <path
+                stroke="#3B414D"
+                strokeLinecap="round"
+                strokeWidth="3.791"
+                d="M173.17 87.239h0a3.52 3.52 0 01-3.52 3.52h-13.505a3.52 3.52 0 01-3.52-3.52"
+              ></path>
+              <g fill="#B8E4F4">
+                <path d="M245.538 5.06c-.639 0-1.244.141-1.792.387a2.94 2.94 0 00-3.113-1.016A6.9 6.9 0 00234.193 0c-3.205 0-5.891 2.186-6.67 5.147a4.374 4.374 0 10-.865 8.662h18.88a4.374 4.374 0 100-8.749"></path>
+                <path d="M37.36 89.272a6.45 6.45 0 00-3.769 1.214c-.507-5.463-5.102-9.74-10.697-9.74-4.925 0-9.073 3.314-10.343 7.833a7.545 7.545 0 00-4.537-1.516 7.587 7.587 0 000 15.175h29.345a6.483 6.483 0 000-12.966"></path>
+                <path d="M108.726 75.108a4.35 4.35 0 00-1.792.387 2.943 2.943 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.431c-3.204 0-5.891 2.186-6.67 5.146a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"></path>
+                <path d="M71.695 41.493c-.639 0-1.245.14-1.792.387a2.941 2.941 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.432c-3.204 0-5.89 2.187-6.67 5.147a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(WalletIcon, "Icons", fallbackValues, "info");

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

@@ -23,6 +23,7 @@ import TimeoutImage from "./TimeoutImage";
 import AutopayOnIcon from "./AutopayOnIcon";
 import NotFoundIcon from "./NotFoundIcon";
 import SearchIcon from "./SearchIcon";
+import WalletIcon from "./WalletIcon";
 
 export {
   AccountsIcon,
@@ -49,5 +50,6 @@ export {
   TimeoutImage,
   AutopayOnIcon,
   NotFoundIcon,
-  SearchIcon
+  SearchIcon,
+  WalletIcon
 };

package/src/components/molecules/email-form/EmailForm.js

@@ -5,6 +5,7 @@ import {
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
+import Paragraph from "../../atoms/paragraph";
 import { noop } from "../../../util/general";
 
 const EmailForm = ({
@@ -13,6 +14,7 @@ const EmailForm = ({
   fields,
   actions,
   showErrors,
+  guestCheckout,
   handleSubmit = noop
 }) => {
   if (clearOnDismount) {
@@ -25,6 +27,11 @@ const EmailForm = ({
 
   return (
     <FormContainer variant={variant} role="form" aria-label="Email">
+      {guestCheckout && (
+        <Paragraph margin="0 0 1.125rem 0">
+          If desired, you can create a wallet later for faster checkout
+        </Paragraph>
+      )}
       <FormInputColumn>
         <FormInput
           labelTextWhenNoError="Email"

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -10,6 +10,8 @@ const PaymentButtonBar = ({
   forwardButtonText = "Next",
   forwardButtonAction,
   forwardButtonLoading,
+  forwardButtonVariant = "primary",
+  backButtonVariant = "secondary",
   backButtonAction,
   cancelURL,
   cancelText = "Cancel",
@@ -23,7 +25,7 @@ const PaymentButtonBar = ({
       <ButtonWithLink
         text={cancelText}
         url={cancelURL}
-        variant="secondary"
+        variant={backButtonVariant}
         extraStyles={isMobile && "flex-grow: 1"}
         dataQa={cancelText}
       />
@@ -31,7 +33,7 @@ const PaymentButtonBar = ({
       backButtonAction && (
         <ButtonWithAction
           text="Back"
-          variant="secondary"
+          variant={backButtonVariant}
           action={backButtonAction}
           extraStyles={isMobile && "flex-grow: 1"}
           dataQa="Back"
@@ -43,7 +45,7 @@ const PaymentButtonBar = ({
     <ButtonWithLink
       url={redirectURL}
       text={redirectText}
-      variant="primary"
+      variant={forwardButtonVariant}
       extraStyles={isMobile && "flex-grow: 1"}
       dataQa={redirectText}
     />
@@ -51,7 +53,7 @@ const PaymentButtonBar = ({
     forwardButtonAction && (
       <ButtonWithAction
         text={forwardButtonText}
-        variant="primary"
+        variant={forwardButtonVariant}
         action={forwardButtonAction}
         isLoading={forwardButtonLoading}
         extraStyles={isMobile && "flex-grow: 1"}