@thecb/components 4.3.8 → 4.3.11

package/dist/index.cjs.js

@@ -12469,10 +12469,10 @@ var border = {
 };
 var hoverBackgroundColor = {
   primary: "#116285",
-  secondary: "transparent",
+  secondary: "#DBEAF0",
   back: "transparent",
   smallPrimary: "#116285",
-  smallSecondary: "transparent",
+  smallSecondary: "#DBEAF0",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -12482,10 +12482,10 @@ var hoverBackgroundColor = {
 };
 var hoverBorderColor = {
   primary: "#116285",
-  secondary: "#DCEAF1",
+  secondary: "#15749D",
   back: "#DCEAF1",
   smallPrimary: "#116285",
-  smallSecondary: "#DCEAF1",
+  smallSecondary: "#15749D",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -12508,10 +12508,10 @@ var hoverColor = {
 };
 var activeBackgroundColor = {
   primary: "#0E506D",
-  secondary: "transparent",
+  secondary: "#B8D5E1",
   back: "transparent",
   smallPrimary: "#0E506D",
-  smallSecondary: "transparent",
+  smallSecondary: "#B8D5E1",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -12521,10 +12521,10 @@ var activeBackgroundColor = {
 };
 var activeBorderColor = {
   primary: "#0E506D",
-  secondary: "#0E506D",
+  secondary: "#15749D",
   back: "#0E506D",
   smallPrimary: "#0E506D",
-  smallSecondary: "#0E506D",
+  smallSecondary: "#15749D",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -12534,7 +12534,7 @@ var activeBorderColor = {
 };
 var activeColor = {
   primary: "#FFFFFF",
-  secondary: "#0E506D",
+  secondary: "#15749D",
   back: "#0E506D",
   smallPrimary: "#FFFFFF",
   smallSecondary: "#0E506D",
@@ -12620,7 +12620,7 @@ var SpinnerIcon = function SpinnerIcon(_ref3) {
     xmlnsXlink: "http://www.w3.org/1999/xlink"
   }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
     d: "M72.1558149,36 C72.0733136,36 72.0151877,35.9981252 71.9829372,35.9970003 C66.1928468,35.9876262 60,31.1685779 60,23.9985001 C60,16.821298 66.204847,12 71.9998125,12 C78.2804106,12 84,17.7189638 84,23.9985001 C84,24.4124613 83.6639947,24.7484298 83.2499883,24.7484298 C82.8356068,24.7484298 82.4999766,24.4124613 82.4999766,23.9985001 C82.4999766,18.5041402 77.4951484,13.4998594 71.9998125,13.4998594 C66.9289833,13.4998594 61.5000234,17.7185889 61.5000234,23.9985001 C61.5000234,30.2784114 66.9289833,34.4971409 71.9998125,34.4971409 C72.0129377,34.4971409 72.0260629,34.4975159 72.0391881,34.4982658 C72.0789387,34.4990157 76.2268785,34.6471268 79.907186,30.9675968 C80.2000656,30.6747492 80.675198,30.6747492 80.9677026,30.9675968 C81.2605822,31.2604443 81.2605822,31.7351498 80.9677026,32.0279974 C77.2236441,35.7716464 73.1034547,36 72.1558149,36 L72.1558149,36 Z",
-    id: "path-1"
+    id: "spinner-path-1"
   })), /*#__PURE__*/React__default.createElement("g", {
     id: "Symbols",
     fill: "none",
@@ -12632,11 +12632,11 @@ var SpinnerIcon = function SpinnerIcon(_ref3) {
     id: "mask-2",
     fill: color || "white"
   }, /*#__PURE__*/React__default.createElement("use", {
-    xlinkHref: "#path-1"
+    xlinkHref: "#spinner-path-1"
   })), /*#__PURE__*/React__default.createElement("use", {
     id: "loader",
     fill: color || "white",
-    xlinkHref: "#path-1"
+    xlinkHref: "#spinner-path-1"
   }))))));
 };
 
@@ -15176,6 +15176,51 @@ var PaymentSearchIcon = function PaymentSearchIcon() {
   }))))));
 };
 
+var ResetPasswordIcon = function ResetPasswordIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "86",
+    height: "80",
+    viewBox: "0 0 86 80"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(-677 -192)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(432 168)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(245 24)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M36 2.44311523L50.2941895 1.66943359 67 7.32739258 78 18.2668457 85 35.1682129 83 53.0935059 75.1977539 66.3569336 62.1745605 75.9748535 46 80 36 78z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E5E7EC",
+    d: "M46 6h17.5l11.749 10H46a1 1 0 01-1-1V7a1 1 0 011-1zm27 62L58.5 78H46a1 1 0 01-1-1v-8a1 1 0 011-1h27zm10-16l-4.506 10H46a1 1 0 01-1-1v-8a1 1 0 011-1h37zm2-16l-.382 10H46a1 1 0 01-1-1v-8a1 1 0 011-1h39zm-7-16l4 10H46a1 1 0 01-1-1v-8a1 1 0 011-1h32z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#15749D",
+    d: "M45.09 0c22.091 0 40 17.909 40 40s-17.909 40-40 40C28.569 80 14.387 69.984 8.286 55.693H5a5 5 0 01-5-5V33.345a5 5 0 015-5h1.814C11.804 11.939 27.052 0 45.09 0zm33.573 55.693l-42.202-.001v20.326c2.78.667 5.682 1.02 8.667 1.02 14.84 0 27.639-8.735 33.535-21.345zm-45.24-.001l-21.83.001c4.271 9.134 12.164 16.235 21.83 19.456V55.692zm-23.41-27.345l23.41-.001V4.928C22.4 8.601 13.683 17.321 10.013 28.347zM45.128 3.038c-2.985 0-5.887.354-8.667 1.021v24.287h43.782C75.349 13.643 61.477 3.039 45.128 3.039z"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(8 38)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "11",
+    height: "7",
+    x: "0",
+    y: "2",
+    fill: "#FFF",
+    rx: "1"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#FFF",
+    strokeWidth: "2",
+    d: "M5.5-1l.205.008c.609.05 1.156.317 1.563.724C7.72.185 8 .81 8 1.5h0V3H3V1.5c0-.69.28-1.315.732-1.768A2.492 2.492 0 015.5-1h0z"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M41.5 38a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm11 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm11 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm11 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm-44 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7z"
+  }))))));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -22419,13 +22464,15 @@ var SearchableSelect = function SearchableSelect(_ref) {
     padding: "0.5rem 0",
     extraStyles: "overflow-y: scroll; height: 250px;"
   }, /*#__PURE__*/React__default.createElement(Stack, null, itemList.map(function (value) {
+    var _selectedItems$find;
+
     return /*#__PURE__*/React__default.createElement(Checkbox$1, {
       key: value.name,
       title: value.name,
       name: value.name,
-      checked: selectedItems.find(function (item) {
-        return item.name === value.name;
-      }),
+      checked: (_selectedItems$find = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find(function (item) {
+        return (item === null || item === void 0 ? void 0 : item.name) === (value === null || value === void 0 ? void 0 : value.name);
+      })) !== null && _selectedItems$find !== void 0 ? _selectedItems$find : false,
       onChange: function onChange() {
         return handleSelect(value);
       },
@@ -38845,6 +38892,10 @@ var Modal$1 = function Modal(_ref) {
       maxHeight = _ref.maxHeight,
       _ref$underlayClickExi = _ref.underlayClickExits,
       underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi,
+      noBorder = _ref.noBorder,
+      customWidth = _ref.customWidth,
+      isLoading = _ref.isLoading,
+      buttonExtraStyles = _ref.buttonExtraStyles,
       children = _ref.children;
 
   var _useContext = React.useContext(styled.ThemeContext),
@@ -38861,7 +38912,7 @@ var Modal$1 = function Modal(_ref) {
       alignItems: "center"
     },
     dialogStyle: {
-      width: "615px"
+      width: customWidth || "615px"
     },
     underlayClickExits: underlayClickExits
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -38870,7 +38921,7 @@ var Modal$1 = function Modal(_ref) {
     boxShadow: "inset 0px -2px 0px 0px rgb(0, 80, 149)"
   }, /*#__PURE__*/React__default.createElement(Box, {
     background: modalHeaderBg,
-    padding: "1rem 1.5rem"
+    padding: "1.5rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
@@ -38879,13 +38930,13 @@ var Modal$1 = function Modal(_ref) {
     weight: FONT_WEIGHT_SEMIBOLD
   }, modalHeaderText))), /*#__PURE__*/React__default.createElement(Box, {
     background: modalBodyBg,
-    padding: "1rem 1.5rem"
+    padding: "1.5rem"
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "1.5rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    borderWidthOverride: "0 0 2px 0",
-    borderColor: SILVER_GREY,
-    padding: "0 0 1.5rem 0",
+    borderWidthOverride: noBorder && "0 0 2px 0",
+    borderColor: !noBorder && SILVER_GREY,
+    padding: !noBorder && "0 0 1.5rem 0",
     extraStyles: maxHeight ? "max-height: ".concat(maxHeight, "; overflow: auto;") : ""
   }, defaultWrapper ? /*#__PURE__*/React__default.createElement(Paragraph$1, {
     variant: "p"
@@ -38893,33 +38944,63 @@ var Modal$1 = function Modal(_ref) {
     padding: maxHeight ? "0 0 1rem 0" : "0"
   }, modalBodyText)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
-  }, /*#__PURE__*/React__default.createElement(Cluster, {
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
     justify: "flex-end",
     align: "center",
     childGap: "0rem"
-  }, !onlyCloseButton ? /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.5rem",
-    extraStyles: isMobile ? "flex-grow: 1" : ""
+  }, !onlyCloseButton ? /*#__PURE__*/React__default.createElement(React.Fragment, null, isMobile ? /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "1rem",
+    direction: "row"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    width: "100%",
+    padding: "0"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: "secondary",
     action: cancelAction ? cancelAction : hideModal,
     text: cancelButtonText,
-    dataQa: cancelButtonText
+    dataQa: cancelButtonText,
+    extraStyles: buttonExtraStyles,
+    className: "modal-cancel-button"
   })), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.5rem",
-    extraStyles: isMobile ? "flex-grow: 1" : ""
+    width: "100%",
+    padding: "0"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: useDangerButton ? "danger" : "primary",
     action: continueAction,
     text: continueButtonText,
-    dataQa: continueButtonText
+    dataQa: continueButtonText,
+    isLoading: isLoading,
+    extraStyles: buttonExtraStyles,
+    className: "modal-continue-button"
+  }))) : /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "1rem",
+    direction: "row",
+    justify: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: "secondary",
+    action: cancelAction ? cancelAction : hideModal,
+    text: cancelButtonText,
+    dataQa: cancelButtonText,
+    extraStyles: buttonExtraStyles,
+    className: "modal-cancel-button"
+  }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: useDangerButton ? "danger" : "primary",
+    action: continueAction,
+    text: continueButtonText,
+    dataQa: continueButtonText,
+    isLoading: isLoading,
+    extraStyles: buttonExtraStyles,
+    className: "modal-continue-button"
   }))) : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     action: hideModal,
     variant: "primary",
     text: "Close",
-    dataQa: "Close"
+    dataQa: "Close",
+    extraStyles: buttonExtraStyles,
+    className: "modal-cancel-button"
   })))))))), children);
 };
 
@@ -40929,7 +41010,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
     },
     type: "password"
   }), /*#__PURE__*/React__default.createElement(Box, {
-    padding: isMobile ? "0" : "0.5rem 0 0"
+    padding: "0"
   }, /*#__PURE__*/React__default.createElement(PasswordRequirements, {
     password: fields.password,
     isMobile: isMobile
@@ -41806,6 +41887,7 @@ exports.RejectedIcon = RejectedIcon;
 exports.RejectedVelocityIcon = RejectedVelocityIcon;
 exports.ResetConfirmationForm = ResetConfirmationForm$1;
 exports.ResetPasswordForm = ResetPasswordForm;
+exports.ResetPasswordIcon = ResetPasswordIcon;
 exports.ResetPasswordSuccess = ResetPasswordSuccess;
 exports.RoutingNumberImage = RoutingNumberImage;
 exports.SearchIcon = SearchIcon;

package/package.json

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

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -117,10 +117,10 @@ const border = {
 
 const hoverBackgroundColor = {
   primary: "#116285",
-  secondary: "transparent",
+  secondary: "#DBEAF0",
   back: "transparent",
   smallPrimary: "#116285",
-  smallSecondary: "transparent",
+  smallSecondary: "#DBEAF0",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -131,10 +131,10 @@ const hoverBackgroundColor = {
 
 const hoverBorderColor = {
   primary: "#116285",
-  secondary: "#DCEAF1",
+  secondary: "#15749D",
   back: "#DCEAF1",
   smallPrimary: "#116285",
-  smallSecondary: "#DCEAF1",
+  smallSecondary: "#15749D",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -159,10 +159,10 @@ const hoverColor = {
 
 const activeBackgroundColor = {
   primary: "#0E506D",
-  secondary: "transparent",
+  secondary: "#B8D5E1",
   back: "transparent",
   smallPrimary: "#0E506D",
-  smallSecondary: "transparent",
+  smallSecondary: "#B8D5E1",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -173,10 +173,10 @@ const activeBackgroundColor = {
 
 const activeBorderColor = {
   primary: "#0E506D",
-  secondary: "#0E506D",
+  secondary: "#15749D",
   back: "#0E506D",
   smallPrimary: "#0E506D",
-  smallSecondary: "#0E506D",
+  smallSecondary: "#15749D",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -187,7 +187,7 @@ const activeBorderColor = {
 
 const activeColor = {
   primary: "#FFFFFF",
-  secondary: "#0E506D",
+  secondary: "#15749D",
   back: "#0E506D",
   smallPrimary: "#FFFFFF",
   smallSecondary: "#0E506D",

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

@@ -0,0 +1,54 @@
+import React from "react";
+
+const ResetPasswordIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="86"
+      height="80"
+      viewBox="0 0 86 80"
+    >
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g transform="translate(-677 -192)">
+          <g transform="translate(432 168)">
+            <g transform="translate(245 24)">
+              <path
+                fill="#FFF"
+                d="M36 2.44311523L50.2941895 1.66943359 67 7.32739258 78 18.2668457 85 35.1682129 83 53.0935059 75.1977539 66.3569336 62.1745605 75.9748535 46 80 36 78z"
+              ></path>
+              <path
+                fill="#E5E7EC"
+                d="M46 6h17.5l11.749 10H46a1 1 0 01-1-1V7a1 1 0 011-1zm27 62L58.5 78H46a1 1 0 01-1-1v-8a1 1 0 011-1h27zm10-16l-4.506 10H46a1 1 0 01-1-1v-8a1 1 0 011-1h37zm2-16l-.382 10H46a1 1 0 01-1-1v-8a1 1 0 011-1h39zm-7-16l4 10H46a1 1 0 01-1-1v-8a1 1 0 011-1h32z"
+              ></path>
+              <path
+                fill="#15749D"
+                d="M45.09 0c22.091 0 40 17.909 40 40s-17.909 40-40 40C28.569 80 14.387 69.984 8.286 55.693H5a5 5 0 01-5-5V33.345a5 5 0 015-5h1.814C11.804 11.939 27.052 0 45.09 0zm33.573 55.693l-42.202-.001v20.326c2.78.667 5.682 1.02 8.667 1.02 14.84 0 27.639-8.735 33.535-21.345zm-45.24-.001l-21.83.001c4.271 9.134 12.164 16.235 21.83 19.456V55.692zm-23.41-27.345l23.41-.001V4.928C22.4 8.601 13.683 17.321 10.013 28.347zM45.128 3.038c-2.985 0-5.887.354-8.667 1.021v24.287h43.782C75.349 13.643 61.477 3.039 45.128 3.039z"
+              ></path>
+              <g transform="translate(8 38)">
+                <rect
+                  width="11"
+                  height="7"
+                  x="0"
+                  y="2"
+                  fill="#FFF"
+                  rx="1"
+                ></rect>
+                <path
+                  stroke="#FFF"
+                  strokeWidth="2"
+                  d="M5.5-1l.205.008c.609.05 1.156.317 1.563.724C7.72.185 8 .81 8 1.5h0V3H3V1.5c0-.69.28-1.315.732-1.768A2.492 2.492 0 015.5-1h0z"
+                ></path>
+              </g>
+              <path
+                fill="#FFF"
+                d="M41.5 38a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm11 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm11 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm11 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm-44 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7z"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default ResetPasswordIcon;

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

@@ -50,6 +50,7 @@ import NoCustomerResultsIcon from "./NoCustomerResultsIcon";
 import NoPaymentResultsIcon from "./NoPaymentResultsIcon";
 import CustomerSearchIcon from "./CustomerSearchIcon";
 import PaymentSearchIcon from "./PaymentSearchIcon";
+import ResetPasswordIcon from "./ResetPasswordIcon";
 
 export {
   AccountsIcon,
@@ -103,5 +104,6 @@ export {
   NoCustomerResultsIcon,
   NoPaymentResultsIcon,
   CustomerSearchIcon,
-  PaymentSearchIcon
+  PaymentSearchIcon,
+  ResetPasswordIcon
 };

package/src/components/atoms/searchable-select/SearchableSelect.js

@@ -63,7 +63,10 @@ const SearchableSelect = ({
                 key={value.name}
                 title={value.name}
                 name={value.name}
-                checked={selectedItems.find(item => item.name === value.name)}
+                checked={
+                  selectedItems?.find(item => item?.name === value?.name) ??
+                  false
+                }
                 onChange={() => handleSelect(value)}
                 textExtraStyles={`margin: 0;`}
                 disabled={disabled}

package/src/components/molecules/modal/Modal.js

@@ -36,6 +36,10 @@ const Modal = ({
   onlyCloseButton = false,
   maxHeight,
   underlayClickExits = true,
+  noBorder,
+  customWidth,
+  isLoading,
+  buttonExtraStyles,
   children
 }) => {
   const { isMobile } = useContext(ThemeContext);
@@ -53,7 +57,7 @@ const Modal = ({
             alignItems: "center"
           }}
           dialogStyle={{
-            width: "615px"
+            width: customWidth || "615px"
           }}
           underlayClickExits={underlayClickExits}
         >
@@ -62,19 +66,19 @@ const Modal = ({
             borderRadius="2px"
             boxShadow="inset 0px -2px 0px 0px rgb(0, 80, 149)"
           >
-            <Box background={modalHeaderBg} padding="1rem 1.5rem">
+            <Box background={modalHeaderBg} padding="1.5rem">
               <Cluster justify="flex-start" align="center">
                 <Heading variant="h6" weight={FONT_WEIGHT_SEMIBOLD}>
                   {modalHeaderText}
                 </Heading>
               </Cluster>
             </Box>
-            <Box background={modalBodyBg} padding="1rem 1.5rem">
+            <Box background={modalBodyBg} padding="1.5rem">
               <Stack childGap="1.5rem">
                 <Box
-                  borderWidthOverride="0 0 2px 0"
-                  borderColor={SILVER_GREY}
-                  padding="0 0 1.5rem 0"
+                  borderWidthOverride={noBorder && "0 0 2px 0"}
+                  borderColor={!noBorder && SILVER_GREY}
+                  padding={!noBorder && "0 0 1.5rem 0"}
                   extraStyles={
                     maxHeight ? `max-height: ${maxHeight}; overflow: auto;` : ``
                   }
@@ -88,31 +92,63 @@ const Modal = ({
                   )}
                 </Box>
                 <Box padding="0">
-                  <Cluster justify="flex-end" align="center" childGap="0rem">
+                  <Stack
+                    direction="row"
+                    justify="flex-end"
+                    align="center"
+                    childGap="0rem"
+                  >
                     {!onlyCloseButton ? (
                       <Fragment>
-                        <Box
-                          padding="0.5rem"
-                          extraStyles={isMobile ? "flex-grow: 1" : ""}
-                        >
-                          <ButtonWithAction
-                            variant="secondary"
-                            action={cancelAction ? cancelAction : hideModal}
-                            text={cancelButtonText}
-                            dataQa={cancelButtonText}
-                          />
-                        </Box>
-                        <Box
-                          padding="0.5rem"
-                          extraStyles={isMobile ? "flex-grow: 1" : ""}
-                        >
-                          <ButtonWithAction
-                            variant={useDangerButton ? "danger" : "primary"}
-                            action={continueAction}
-                            text={continueButtonText}
-                            dataQa={continueButtonText}
-                          />
-                        </Box>
+                        {isMobile ? (
+                          <Stack childGap="1rem" direction="row">
+                            <Box width="100%" padding="0">
+                              <ButtonWithAction
+                                variant="secondary"
+                                action={cancelAction ? cancelAction : hideModal}
+                                text={cancelButtonText}
+                                dataQa={cancelButtonText}
+                                extraStyles={buttonExtraStyles}
+                                className="modal-cancel-button"
+                              />
+                            </Box>
+                            <Box width="100%" padding="0">
+                              <ButtonWithAction
+                                variant={useDangerButton ? "danger" : "primary"}
+                                action={continueAction}
+                                text={continueButtonText}
+                                dataQa={continueButtonText}
+                                isLoading={isLoading}
+                                extraStyles={buttonExtraStyles}
+                                className="modal-continue-button"
+                              />
+                            </Box>
+                          </Stack>
+                        ) : (
+                          <Stack
+                            childGap="1rem"
+                            direction="row"
+                            justify="flex-end"
+                          >
+                            <ButtonWithAction
+                              variant="secondary"
+                              action={cancelAction ? cancelAction : hideModal}
+                              text={cancelButtonText}
+                              dataQa={cancelButtonText}
+                              extraStyles={buttonExtraStyles}
+                              className="modal-cancel-button"
+                            />
+                            <ButtonWithAction
+                              variant={useDangerButton ? "danger" : "primary"}
+                              action={continueAction}
+                              text={continueButtonText}
+                              dataQa={continueButtonText}
+                              isLoading={isLoading}
+                              extraStyles={buttonExtraStyles}
+                              className="modal-continue-button"
+                            />
+                          </Stack>
+                        )}
                       </Fragment>
                     ) : (
                       <Box padding="0.5rem">
@@ -121,10 +157,12 @@ const Modal = ({
                           variant="primary"
                           text="Close"
                           dataQa="Close"
+                          extraStyles={buttonExtraStyles}
+                          className="modal-cancel-button"
                         />
                       </Box>
                     )}
-                  </Cluster>
+                  </Stack>
                 </Box>
               </Stack>
             </Box>

package/src/components/molecules/reset-password-form/ResetPasswordForm.js

@@ -59,7 +59,7 @@ const ResetPasswordForm = ({
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="password"
       />
-      <Box padding={isMobile ? "0" : "0.5rem 0 0"}>
+      <Box padding="0">
         <PasswordRequirements password={fields.password} isMobile={isMobile} />
       </Box>
     </FormInputColumn>

package/src/deprecated/spinner/Spinner.js

@@ -45,7 +45,7 @@ const SpinnerIcon = ({ color, isMobile }) => (
         <defs>
           <path
             d="M72.1558149,36 C72.0733136,36 72.0151877,35.9981252 71.9829372,35.9970003 C66.1928468,35.9876262 60,31.1685779 60,23.9985001 C60,16.821298 66.204847,12 71.9998125,12 C78.2804106,12 84,17.7189638 84,23.9985001 C84,24.4124613 83.6639947,24.7484298 83.2499883,24.7484298 C82.8356068,24.7484298 82.4999766,24.4124613 82.4999766,23.9985001 C82.4999766,18.5041402 77.4951484,13.4998594 71.9998125,13.4998594 C66.9289833,13.4998594 61.5000234,17.7185889 61.5000234,23.9985001 C61.5000234,30.2784114 66.9289833,34.4971409 71.9998125,34.4971409 C72.0129377,34.4971409 72.0260629,34.4975159 72.0391881,34.4982658 C72.0789387,34.4990157 76.2268785,34.6471268 79.907186,30.9675968 C80.2000656,30.6747492 80.675198,30.6747492 80.9677026,30.9675968 C81.2605822,31.2604443 81.2605822,31.7351498 80.9677026,32.0279974 C77.2236441,35.7716464 73.1034547,36 72.1558149,36 L72.1558149,36 Z"
-            id="path-1"
+            id="spinner-path-1"
           />
         </defs>
         <g id="Symbols" fill="none" fillRule="evenodd">
@@ -54,9 +54,13 @@ const SpinnerIcon = ({ color, isMobile }) => (
             transform="translate(-60 -12)"
           >
             <mask id="mask-2" fill={color || "white"}>
-              <use xlinkHref="#path-1" />
+              <use xlinkHref="#spinner-path-1" />
             </mask>
-            <use id="loader" fill={color || "white"} xlinkHref="#path-1" />
+            <use
+              id="loader"
+              fill={color || "white"}
+              xlinkHref="#spinner-path-1"
+            />
           </g>
         </g>
       </svg>