@thecb/components 4.1.16 → 4.1.18

package/dist/index.cjs.js

@@ -14663,6 +14663,40 @@ var ProfileIcon = function ProfileIcon(_ref) {
 
 var ProfileIcon$1 = themeComponent(ProfileIcon, "Icons", fallbackValues$2, "info");
 
+var GenericCardLarge = function GenericCardLarge() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "34",
+    height: "28",
+    viewBox: "0 0 34 28"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fillRule: "nonzero",
+    transform: "translate(-142 -927)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(94 518)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(24 350)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(0 35)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(24 24)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#CACED8",
+    d: "M29.259.699H3.282C1.497.699.035 2.217.035 4.074v20.25c0 1.856 1.462 3.375 3.247 3.375H29.26c1.786 0 3.247-1.52 3.247-3.375V4.074c0-1.857-1.461-3.375-3.247-3.375z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#000",
+    d: "M0.035 6.699H32.50599999999999V13.699H0.035z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#000",
+    d: "M27.51 22.699h-6.244c-.468 0-.937-.47-.937-.938v-3.125c0-.469.469-.937.937-.937h6.244c.469 0 .937.468.937.937v3.125c0 .625-.312.938-.937.938z"
+  }))))))));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -18374,7 +18408,7 @@ function _templateObject8() {
 }
 
 function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  border-radius: 2px;\n  transition: all 150ms;\n\n  ", " {\n    visibility: ", ";\n  }\n\n  ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: 16px;\n  width: 24px;\n  height: 24px;\n  border-radius: 2px;\n  transition: all 150ms;\n\n  ", " {\n    visibility: ", ";\n  }\n\n  ", ";\n"]);
 
   _templateObject7 = function _templateObject7() {
     return data;
@@ -19094,18 +19128,8 @@ var Dropdown = function Dropdown(_ref9) {
 
 var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$e);
 
-function _templateObject4$3() {
-  var data = _taggedTemplateLiteral([""]);
-
-  _templateObject4$3 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject3$6() {
-  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 0.75rem 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral([""]);
 
   _templateObject3$6 = function _templateObject3() {
     return data;
@@ -19115,7 +19139,7 @@ function _templateObject3$6() {
 }
 
 function _templateObject2$c() {
-  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: ", ";\n  margin-bottom: 4px;\n  font-family: Public Sans;\n\n  &::first-letter {\n    text-transform: uppercase;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 0.75rem 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"]);
 
   _templateObject2$c = function _templateObject2() {
     return data;
@@ -19134,23 +19158,18 @@ function _templateObject$o() {
   return data;
 }
 var SelectContainer = styled__default.div(_templateObject$o());
-var SelectLabel = styled__default.label(_templateObject2$c(), function (_ref) {
+var SelectField = styled__default.select(_templateObject2$c(), function (_ref) {
   var field = _ref.field,
       showErrors = _ref.showErrors;
-  return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : STORM_GREY;
-}, FONT_WEIGHT_REGULAR);
-var SelectField = styled__default.select(_templateObject3$6(), function (_ref2) {
-  var field = _ref2.field,
-      showErrors = _ref2.showErrors;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : GHOST_GREY;
-}, FONT_WEIGHT_REGULAR, function (_ref3) {
-  var themeValues = _ref3.themeValues;
+}, FONT_WEIGHT_REGULAR, function (_ref2) {
+  var themeValues = _ref2.themeValues;
   return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
-}, function (_ref4) {
-  var themeValues = _ref4.themeValues;
+}, function (_ref3) {
+  var themeValues = _ref3.themeValues;
   return themeValues.color && themeValues.color;
 }, MATISSE_BLUE);
-var SelectOption = styled__default.option(_templateObject4$3());
+var SelectOption = styled__default.option(_templateObject3$6());
 
 var linkColor$1 = {
   "default": "".concat(MATISSE_BLUE),
@@ -19256,8 +19275,10 @@ var FormSelect = function FormSelect(_ref) {
     variant: "pS",
     color: themeValues.labelColor,
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }"
+    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
+    id: labelTextWhenNoError.replace(/\s+/g, "-")
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
+    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
     maxHeight: dropdownMaxHeight,
     placeholder: options[0] ? options[0].text : "",
     options: options,
@@ -19273,9 +19294,9 @@ var FormSelect = function FormSelect(_ref) {
     onClick: function onClick() {
       return setOpen(!open);
     }
-  }), /*#__PURE__*/React__default.createElement(SelectLabel, {
-    field: field,
-    showErrors: showErrors
+  }), /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    justify: "space-between"
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
@@ -20479,10 +20500,10 @@ var fallbackValues$h = {
   hoverFocusStyles: hoverFocusStyles$1
 };
 
-function _templateObject4$4() {
+function _templateObject4$3() {
   var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
 
-  _templateObject4$4 = function _templateObject4() {
+  _templateObject4$3 = function _templateObject4() {
     return data;
   };
 
@@ -20563,7 +20584,7 @@ var FormattedInputField = styled__default(function (_ref7) {
   return themeValues.color && themeValues.color;
 }, MATISSE_BLUE, function (_ref12) {
   var extraStyles = _ref12.extraStyles;
-  return styled.css(_templateObject4$4(), extraStyles);
+  return styled.css(_templateObject4$3(), extraStyles);
 });
 
 var FormInput = function FormInput(_ref13) {
@@ -21318,10 +21339,10 @@ function _templateObject5$2() {
   return data;
 }
 
-function _templateObject4$5() {
+function _templateObject4$4() {
   var data = _taggedTemplateLiteral(["", " is not a valid length"]);
 
-  _templateObject4$5 = function _templateObject4() {
+  _templateObject4$4 = function _templateObject4() {
     return data;
   };
 
@@ -21397,7 +21418,7 @@ with interpolation.
 */
 
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$5(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
+var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$4(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // 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
@@ -32360,10 +32381,10 @@ var fallbackValues$r = {
   leftLabelStyles: leftLabelStyles
 };
 
-function _templateObject4$6() {
+function _templateObject4$5() {
   var data = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  top: 3px;\n  left: 3px;\n  right: 3px;\n  bottom: 3px;\n  border-radius: 50%;\n  box-sizing: border-box;\n"]);
 
-  _templateObject4$6 = function _templateObject4() {
+  _templateObject4$5 = function _templateObject4() {
     return data;
   };
 
@@ -32417,7 +32438,7 @@ var VisibleSwitchComponent = styled__default.label(_templateObject2$i(), functio
   return isMobile ? "transform: scale(0.75)" : "";
 });
 var ToggleSwitchMiddleRingComponent = styled__default.div(_templateObject3$a());
-var ToggleSwitchInnerRingComponent = styled__default.div(_templateObject4$6());
+var ToggleSwitchInnerRingComponent = styled__default.div(_templateObject4$5());
 
 var ToggleSwitch = function ToggleSwitch(_ref6) {
   var _ref6$isOn = _ref6.isOn,
@@ -34790,10 +34811,10 @@ function _templateObject5$3() {
   return data;
 }
 
-function _templateObject4$7() {
+function _templateObject4$6() {
   var data = _taggedTemplateLiteral(["\n  color: ", ";\n  align-items: center;\n  font-size: 1rem;\n  padding-right: 1rem;\n  cursor: pointer;\n  display: ", ";\n"]);
 
-  _templateObject4$7 = function _templateObject4() {
+  _templateObject4$6 = function _templateObject4() {
     return data;
   };
 
@@ -34847,7 +34868,7 @@ var EditableTableListItem = styled__default.div(_templateObject2$k(), function (
   return isMobile ? "padding: 1rem 0.5rem" : "padding: 0 0.5rem";
 });
 var EditableListItemControls$1 = styled__default.div(_templateObject3$b());
-var EditableListAction = styled__default.div(_templateObject4$7(), MATISSE_BLUE, function (_ref6) {
+var EditableListAction = styled__default.div(_templateObject4$6(), MATISSE_BLUE, function (_ref6) {
   var hide = _ref6.hide;
   return hide ? "none" : "flex";
 });
@@ -40068,24 +40089,22 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
       showTerms = _useState2[0],
       toggleShowTerms = _useState2[1];
 
-  return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, {
-    direction: "row"
-  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "terms",
+    title: "Terms and Conditions",
     error: error,
     checked: isChecked,
     onChange: onCheck
-  }), /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "p",
-    fontWeight: FONT_WEIGHT_BOLD
-  }, "Terms and Conditions"), /*#__PURE__*/React__default.createElement(Box, {
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0 0 58px"
+  }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, html), terms && /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
     link: "Learn More",
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms
-  }))));
+  })))));
 };
 
 var Timeout = function Timeout(_ref) {
@@ -40560,6 +40579,7 @@ exports.FormattedAddress = FormattedAddress$1;
 exports.FormattedCreditCard = FormattedCreditCard$1;
 exports.Frame = Frame;
 exports.GenericCard = GenericCard;
+exports.GenericCardLarge = GenericCardLarge;
 exports.GoToEmailIcon = GoToEmailIcon$1;
 exports.Grid = Grid;
 exports.HamburgerButton = HamburgerButton;

package/package.json

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

package/src/components/atoms/checkbox/Checkbox.js

@@ -44,6 +44,7 @@ const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
 
 const StyledCheckbox = styled.div`
   display: inline-block;
+  margin-right: 16px;
   width: 24px;
   height: 24px;
   border-radius: 2px;

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

@@ -2,10 +2,10 @@ import React, { useState, useRef, useEffect } from "react";
 import Dropdown from "../dropdown";
 import Text from "../text";
 import { ERROR_COLOR } from "../../../constants/colors";
-import { SelectContainer, SelectLabel } from "./FormSelect.styled";
+import { SelectContainer } from "./FormSelect.styled";
 import { fallbackValues } from "./FormSelect.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { Box, Cluster } from "../layouts";
+import { Box, Cluster, Stack } from "../layouts";
 
 const FormSelect = ({
   fieldActions,
@@ -49,12 +49,14 @@ const FormSelect = ({
               &::first-letter {
                 text-transform: uppercase;
               }`}
+            id={labelTextWhenNoError.replace(/\s+/g, "-")}
           >
             {labelTextWhenNoError}
           </Text>
         </Cluster>
       </Box>
       <Dropdown
+        aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
         maxHeight={dropdownMaxHeight}
         placeholder={options[0] ? options[0].text : ""}
         options={options}
@@ -69,7 +71,7 @@ const FormSelect = ({
         }
         onClick={() => setOpen(!open)}
       />
-      <SelectLabel field={field} showErrors={showErrors}>
+      <Stack direction="row" justify="space-between">
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
           <Text
             color={ERROR_COLOR}
@@ -86,7 +88,7 @@ const FormSelect = ({
         ) : (
           <Text extraStyles={`height: ${themeValues.lineHeight};`} />
         )}
-      </SelectLabel>
+      </Stack>
     </SelectContainer>
   );
 };

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

@@ -1,6 +1,5 @@
 import styled from "styled-components";
 import {
-  STORM_GREY,
   GHOST_GREY,
   ERROR_COLOR,
   MATISSE_BLUE
@@ -18,22 +17,6 @@ export const SelectContainer = styled.div`
   }
 `;
 
-export const SelectLabel = styled.label`
-  color: ${({ field, showErrors }) =>
-    (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
-      ? ERROR_COLOR
-      : STORM_GREY};
-  font-size: 14px;
-  line-height: 18px;
-  font-weight: ${FONT_WEIGHT_REGULAR};
-  margin-bottom: 4px;
-  font-family: Public Sans;
-
-  &::first-letter {
-    text-transform: uppercase;
-  }
-`;
-
 export const SelectField = styled.select`
   border: 1px solid
     ${({ field, showErrors }) =>

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

@@ -0,0 +1,39 @@
+import React from "react";
+
+const GenericCardLarge = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="34"
+      height="28"
+      viewBox="0 0 34 28"
+    >
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g fillRule="nonzero" transform="translate(-142 -927)">
+          <g transform="translate(94 518)">
+            <g transform="translate(24 350)">
+              <g transform="translate(0 35)">
+                <g transform="translate(24 24)">
+                  <path
+                    fill="#CACED8"
+                    d="M29.259.699H3.282C1.497.699.035 2.217.035 4.074v20.25c0 1.856 1.462 3.375 3.247 3.375H29.26c1.786 0 3.247-1.52 3.247-3.375V4.074c0-1.857-1.461-3.375-3.247-3.375z"
+                  ></path>
+                  <path
+                    fill="#000"
+                    d="M0.035 6.699H32.50599999999999V13.699H0.035z"
+                  ></path>
+                  <path
+                    fill="#000"
+                    d="M27.51 22.699h-6.244c-.468 0-.937-.47-.937-.938v-3.125c0-.469.469-.937.937-.937h6.244c.469 0 .937.468.937.937v3.125c0 .625-.312.938-.937.938z"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default GenericCardLarge;

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

@@ -41,6 +41,7 @@ import VoidedIcon from "./VoidedIcon";
 import StatusUnknownIcon from "./StatusUnknownIcon";
 import CarrotIcon from "./CarrotIcon";
 import ProfileIcon from "./ProfileIcon";
+import GenericCardLarge from "./GenericCardLarge";
 
 export {
   AccountsIcon,
@@ -85,5 +86,6 @@ export {
   VoidedIcon,
   StatusUnknownIcon,
   CarrotIcon,
-  ProfileIcon
+  ProfileIcon,
+  GenericCardLarge
 };

package/src/components/molecules/terms-and-conditions/TermsAndConditions.js

@@ -1,9 +1,7 @@
 import React, { useState } from "react";
 import Checkbox from "../../atoms/checkbox";
-import Text from "../../atoms/text";
 import { Box, Stack } from "../../atoms/layouts";
 import DisplayBox from "../../atoms/display-box";
-import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
 import TermsAndConditionsModal from "../../molecules/terms-and-conditions-modal";
 
 const TermsAndConditions = ({
@@ -16,27 +14,27 @@ const TermsAndConditions = ({
   const [showTerms, toggleShowTerms] = useState(false);
   return (
     <DisplayBox>
-      <Stack direction="row">
+      <Stack>
         <Checkbox
           name="terms"
+          title="Terms and Conditions"
           error={error}
           checked={isChecked}
           onChange={onCheck}
         />
-        <Stack>
-          <Text variant="p" fontWeight={FONT_WEIGHT_BOLD}>
-            Terms and Conditions
-          </Text>
-          <Box padding="0">{html}</Box>
-          {terms && (
-            <TermsAndConditionsModal
-              link="Learn More"
-              terms={terms}
-              isOpen={showTerms}
-              toggleOpen={toggleShowTerms}
-            />
-          )}
-        </Stack>
+        <Box padding="0 0 0 58px">
+          <Stack>
+            <Box padding="0">{html}</Box>
+            {terms && (
+              <TermsAndConditionsModal
+                link="Learn More"
+                terms={terms}
+                isOpen={showTerms}
+                toggleOpen={toggleShowTerms}
+              />
+            )}
+          </Stack>
+        </Box>
       </Stack>
     </DisplayBox>
   );