@thecb/components 2.2.0

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

@@ -0,0 +1,138 @@
+import React, { Fragment, useContext } from "react";
+import { ThemeContext } from "styled-components";
+import AriaModal from "react-aria-modal";
+import { WHITE, ATHENS_GREY, SILVER_GREY } from "../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import Paragraph from "../../atoms/paragraph";
+import Heading from "../../atoms/heading";
+import ButtonWithAction from "../../atoms/button-with-action";
+import { Box, Stack, Cluster } from "../../atoms/layouts";
+
+/*
+Default Modal molecule
+Uses react-aria-modal behind the scenes for a11y purposes
+Styling accomplished with our atoms / layout primitives
+
+Cancel button will (for now) always use hideModal as its action
+Continue button takes an action, if you want to navigate to
+a different route (as with a link) connect() and use "push" from connected-react-router
+*/
+
+const getApplicationNode = () => document.getElementById("root");
+
+const Modal = ({
+  ModalLink,
+  hideModal,
+  continueAction,
+  modalOpen,
+  modalHeaderText,
+  modalBodyText,
+  cancelButtonText = "Cancel",
+  continueButtonText = "Continue",
+  modalHeaderBg = WHITE,
+  modalBodyBg = ATHENS_GREY,
+  useDangerButton = false,
+  defaultWrapper = true,
+  onlyCloseButton = false,
+  maxHeight
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+  return (
+    <Fragment>
+      <ModalLink />
+      {modalOpen && (
+        <AriaModal
+          onExit={hideModal}
+          getApplicationNode={getApplicationNode}
+          titleText={modalHeaderText}
+          underlayStyle={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center"
+          }}
+          dialogStyle={{
+            width: "615px"
+          }}
+        >
+          <Box
+            padding="0"
+            borderRadius="2px"
+            boxShadow="inset 0px -2px 0px 0px rgb(0, 80, 149)"
+          >
+            <Box background={modalHeaderBg} padding="1rem 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">
+              <Stack childGap="1.5rem">
+                <Box
+                  borderWidthOverride="0 0 2px 0"
+                  borderColor={SILVER_GREY}
+                  padding="0 0 1.5rem 0"
+                  extraStyles={
+                    maxHeight ? `max-height: ${maxHeight}; overflow: auto;` : ``
+                  }
+                >
+                  {defaultWrapper ? (
+                    <Paragraph variant="p">{modalBodyText}</Paragraph>
+                  ) : (
+                    <Box padding={maxHeight ? "0 0 1rem 0" : "0"}>
+                      {modalBodyText}
+                    </Box>
+                  )}
+                </Box>
+                <Box padding="0">
+                  <Cluster justify="flex-end" align="center" childGap="0rem">
+                    {!onlyCloseButton ? (
+                      <Fragment>
+                        <Box
+                          padding="0.5rem"
+                          extraStyles={isMobile ? "flex-grow: 1" : ""}
+                        >
+                          <ButtonWithAction
+                            variant="secondary"
+                            action={hideModal}
+                            text={cancelButtonText}
+                            dataQa={cancelButtonText}
+                            extraStyles="width: 100%;"
+                          />
+                        </Box>
+                        <Box
+                          padding="0.5rem"
+                          extraStyles={isMobile ? "flex-grow: 1" : ""}
+                        >
+                          <ButtonWithAction
+                            variant={useDangerButton ? "danger" : "primary"}
+                            action={continueAction}
+                            text={continueButtonText}
+                            dataQa={continueButtonText}
+                            extraStyles="width: 100%;"
+                          />
+                        </Box>
+                      </Fragment>
+                    ) : (
+                      <Box padding="0.5rem">
+                        <ButtonWithAction
+                          action={hideModal}
+                          variant="primary"
+                          text="Close"
+                          dataQa="Close"
+                        />
+                      </Box>
+                    )}
+                  </Cluster>
+                </Box>
+              </Stack>
+            </Box>
+          </Box>
+        </AriaModal>
+      )}
+    </Fragment>
+  );
+};
+
+export default Modal;

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

@@ -0,0 +1,3 @@
+import Modal from "./Modal";
+
+export default Modal;

package/src/components/molecules/module/Module.js

@@ -0,0 +1,42 @@
+import React from "react";
+
+import Heading from "../../atoms/heading";
+import { Box } from "../../atoms/layouts";
+import { Fragment } from "react";
+
+const Module = ({
+  heading,
+  spacing = "1rem",
+  padding = "0",
+  spacingBottom = "2.5rem",
+  themeValues,
+  variant = "default",
+  children
+}) => (
+  <Fragment>
+    {heading && (
+      <Heading
+        variant={variant === "default" ? "h5" : "h3"}
+        weight={themeValues.fontWeight}
+        color={themeValues.fontColor}
+        margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
+        textAlign={themeValues.textAlign}
+        aria-level={variant === "default" ? "3" : "1"}
+      >
+        {heading}
+      </Heading>
+    )}
+    <Box padding={`0 0 ${spacingBottom}`}>
+      <Box
+        padding={padding}
+        background={themeValues.backgroundColor}
+        borderRadius={themeValues.borderRadius}
+        boxShadow={themeValues.boxShadow}
+      >
+        {children}
+      </Box>
+    </Box>
+  </Fragment>
+);
+
+export default Module;

package/src/components/molecules/module/Module.theme.js

@@ -0,0 +1,30 @@
+import { WHITE, CHARADE_GREY } from "../../../constants/colors";
+
+const fontSize = { default: "1.375rem", largeTitle: "1.75rem" };
+const fontWeight = { default: "600", largeTitle: "700" };
+const fontColor = { default: CHARADE_GREY, largeTitle: CHARADE_GREY };
+const lineHeight = { default: "2rem", largeTitle: "2rem" };
+const textAlign = { default: "left", largeTitle: "left" };
+const titleType = { default: "h5", largeTitle: "h3" };
+const titleSpacing = { default: "0.5rem", largeTitle: "1.125rem" };
+const boxShadow = {
+  default:
+    "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
+  largeTitle:
+    "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
+};
+const borderRadius = { default: "0.25rem", largeTitle: "0.25rem" };
+const backgroundColor = { default: WHITE, largeTitle: WHITE };
+
+export const fallbackValues = {
+  fontSize,
+  fontWeight,
+  fontColor,
+  lineHeight,
+  textAlign,
+  titleType,
+  titleSpacing,
+  boxShadow,
+  borderRadius,
+  backgroundColor
+};

package/src/components/molecules/module/index.js

@@ -0,0 +1,8 @@
+import { memo } from "react";
+import Module from "./Module";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./Module.theme";
+
+export default memo(
+  themeComponent(Module, "Module", fallbackValues, "default")
+);

package/src/components/molecules/nav-menu/NavMenu.theme.js

@@ -0,0 +1,5 @@
+const backgroundColor = "#3b414d";
+
+export const fallbackValues = {
+  backgroundColor
+};

package/src/components/molecules/nav-menu/NavMenuDesktop.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Box, Imposter } from "../../atoms/layouts";
+import { fallbackValues } from "./NavMenu.theme.js";
+import { themeComponent } from "../../../util/themeUtils";
+
+const NavMenuDesktop = ({
+  top = "125%",
+  left = "-100%",
+  menuContent = [],
+  visible = true,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  themeValues
+}) => {
+  const menuCarat = `&:after { bottom: 100%; right: 10px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: ${themeValues.backgroundColor}00; border-bottom-color: ${themeValues.backgroundColor}; border-width: 10px; margin-left: -10px; }`;
+
+  return (
+    <Imposter breakout top={top} left={left} visible={visible}>
+      <Box
+        minWidth="240px"
+        padding="1rem 0.5rem"
+        extraStyles={`position: relative; ${menuCarat}`}
+        background={themeValues.backgroundColor}
+        borderRadius="5px"
+        boxShadow={`0px 3px 8px 0px ${themeValues.backgroundColor}, 0px 2px 14px 0px ${themeValues.backgroundColor};`}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      >
+        {menuContent}
+      </Box>
+    </Imposter>
+  );
+};
+
+export default themeComponent(NavMenuDesktop, "NavMenu", fallbackValues);

package/src/components/molecules/nav-menu/NavMenuMobile.js

@@ -0,0 +1,63 @@
+import React from "react";
+import styled from "styled-components";
+import posed from "react-pose";
+import { easeIn, easeOut } from "@popmotion/easing";
+import { Box } from "../../atoms/layouts";
+import { fallbackValues } from "./NavMenu.theme.js";
+import { themeComponent } from "../../../util/themeUtils";
+
+const menu = posed.div({
+  invisible: {
+    left: "-100vw",
+    right: "100vw",
+    transition: {
+      right: {
+        ease: easeOut,
+        duration: 500
+      },
+      left: {
+        ease: easeOut,
+        duration: 500
+      }
+    }
+  },
+  visible: {
+    left: "0",
+    right: "0",
+    transition: {
+      left: {
+        ease: easeIn,
+        duration: 500
+      },
+      right: {
+        ease: easeIn,
+        duration: 500
+      }
+    }
+  }
+});
+
+const ImposterMenu = styled(menu)`
+  position: fixed;
+  top: 72px;
+`;
+
+const NavMenuMobile = ({ menuContent = [], visible = false, themeValues }) => {
+  return (
+    <ImposterMenu
+      initialPose="invisible"
+      pose={visible ? "visible" : "invisible"}
+    >
+      <Box
+        width="100vw"
+        padding="1rem 0.5rem"
+        extraStyles={`position: relative; max-width: 400px; height: calc(100vh - 72px);`}
+        background={themeValues.backgroundColor}
+      >
+        {menuContent}
+      </Box>
+    </ImposterMenu>
+  );
+};
+
+export default themeComponent(NavMenuMobile, "NavMenu", fallbackValues);

package/src/components/molecules/nav-menu/index.js

@@ -0,0 +1,4 @@
+import NavMenuDesktop from "./NavMenuDesktop";
+import NavMenuMobile from "./NavMenuMobile";
+
+export { NavMenuDesktop, NavMenuMobile };

package/src/components/molecules/obligation/Obligation.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { Box, Cluster, Stack } from "../../../components/atoms/layouts";
+import { WHITE, GHOST_GREY, BRIGHT_GREY } from "../../../constants/colors";
+import {
+  IconModule,
+  TitleModule,
+  AmountModule,
+  PaymentDetailsActions
+} from "./modules";
+
+const Obligation = ({
+  config,
+  obligations,
+  actions,
+  autoPayEnabled,
+  isMobile
+}) => {
+  const obligation = obligations[0];
+  const { customAttributes } = obligation;
+  return (
+    <Box
+      background={WHITE}
+      borderRadius="4px"
+      boxShadow={`0px 0px 5px 0px ${GHOST_GREY}`}
+    >
+      <Stack childGap="14px">
+        <Box key={`${obligations[0].id}-top`} padding="0 8px" minWidth="100%">
+          <Cluster justify="space-between" align="center" childGap="4px">
+            <Box padding="0">
+              <Cluster justify="flex-start" align="center">
+                {!isMobile && (
+                  <IconModule
+                    icon={config.icon}
+                    iconDefault={config.iconDefault}
+                    configIconMap={config.iconMap}
+                    iconValue={config.iconValue}
+                    customAttributes={customAttributes}
+                  />
+                )}
+                <TitleModule
+                  title={obligation.description}
+                  subtitle={obligation.subDescription}
+                  titleColor={BRIGHT_GREY}
+                  isMobile={isMobile}
+                />
+              </Cluster>
+            </Box>
+            <AmountModule
+              totalAmountDue={obligations.reduce(
+                (acc, curr) => acc + curr.amountDue,
+                0
+              )}
+              autoPayEnabled={autoPayEnabled}
+              isMobile={isMobile}
+            />
+          </Cluster>
+        </Box>
+        <PaymentDetailsActions
+          obligations={obligations}
+          config={config}
+          actions={actions}
+          isMobile={isMobile}
+        />
+      </Stack>
+    </Box>
+  );
+};
+
+export default Obligation;

package/src/components/molecules/obligation/icons/AccountBillIcon.js

@@ -0,0 +1,89 @@
+import React from "react";
+
+const AccountBillIcon = () => (
+  <svg
+    width="81px"
+    height="81px"
+    viewBox="0 0 81 81"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <defs>
+      <circle id="account-bill-path-1" cx="33.5" cy="33.5" r="33.5"></circle>
+      <filter
+        x="-17.2%"
+        y="-14.2%"
+        width="134.3%"
+        height="134.3%"
+        filterUnits="objectBoundingBox"
+        id="account-bill-filter-2"
+      >
+        <feOffset
+          dx="0"
+          dy="-4"
+          in="SourceAlpha"
+          result="shadowOffsetOuter1"
+        ></feOffset>
+        <feColorMatrix
+          values="0 0 0 0 0.964705882   0 0 0 0 0.964705882   0 0 0 0 0.976470588  0 0 0 1 0"
+          type="matrix"
+          in="shadowOffsetOuter1"
+          result="shadowMatrixOuter1"
+        ></feColorMatrix>
+        <feOffset
+          dx="0"
+          dy="2"
+          in="SourceAlpha"
+          result="shadowOffsetOuter2"
+        ></feOffset>
+        <feGaussianBlur
+          stdDeviation="3.5"
+          in="shadowOffsetOuter2"
+          result="shadowBlurOuter2"
+        ></feGaussianBlur>
+        <feColorMatrix
+          values="0 0 0 0 0.161570617   0 0 0 0 0.163300979   0 0 0 0 0.199501812  0 0 0 0.3 0"
+          type="matrix"
+          in="shadowBlurOuter2"
+          result="shadowMatrixOuter2"
+        ></feColorMatrix>
+        <feMerge>
+          <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+          <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+        </feMerge>
+      </filter>
+    </defs>
+    <g
+      id="AccountBill"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g id="AccountBillIcon" transform="translate(7.000000, 5.000000)">
+        <g id="Oval-Copy-6">
+          <use
+            fill="black"
+            fillOpacity="1"
+            filter="url(#account-bill-filter-2)"
+            xlinkHref="#account-bill-path-1"
+          ></use>
+          <use
+            fill="#FFFFFF"
+            fillRule="evenodd"
+            xlinkHref="#account-bill-path-1"
+          ></use>
+        </g>
+        <path
+          d="M45.9999428,26.0000477 L45.9999428,25.6250486 C45.9999428,25.2083826 45.8541101,24.8542174 45.5624438,24.5625511 L45.5624438,24.5625511 L39.4374584,18.4375657 C39.1457921,18.1458994 38.791627,18.0000668 38.374961,18.0000668 L38.374961,18.0000668 L37.9999619,18.0000668 L37.9999619,26.0000477 L45.9999428,26.0000477 Z M44.4999464,49.9999905 C44.9166123,49.9999905 45.2707775,49.8541578 45.5624438,49.5624915 C45.8541101,49.2708252 45.9999428,48.91666 45.9999428,48.499994 L45.9999428,48.499994 L45.9999428,28.0000429 L37.499963,28.0000429 C37.0832971,28.0000429 36.7291319,27.8542102 36.4374656,27.562544 C36.1457993,27.2708777 35.9999666,26.9167125 35.9999666,26.5000465 L35.9999666,26.5000465 L35.9999666,18.0000668 L23.5,18.0000668 C23.0833304,18.0000668 22.7291652,18.1458994 22.437499,18.4375657 C22.1458327,18.729232 22,19.0833972 22,19.5000668 L22,19.5000668 L22,48.499994 C22,48.91666 22.1458327,49.2708252 22.437499,49.5624915 C22.7291652,49.8541578 23.0833304,49.9999905 23.5,49.9999905 L23.5,49.9999905 L44.4999464,49.9999905 Z M31.4999774,24.0000572 L26.4999905,24.0000572 C26.3749896,24.0000572 26.2604068,23.9479696 26.1562401,23.8438028 C26.0520734,23.7396361 25.9999905,23.6250533 25.9999905,23.5000572 L25.9999905,23.5000572 L25.9999905,22.5000572 C25.9999905,22.3750563 26.0520734,22.2604736 26.1562401,22.1563068 C26.2604068,22.0521401 26.3749896,22.0000572 26.4999905,22.0000572 L26.4999905,22.0000572 L31.4999774,22.0000572 C31.6249771,22.0000572 31.7395598,22.0521401 31.8437265,22.1563068 C31.9478933,22.2604736 31.9999762,22.3750563 31.9999762,22.5000572 L31.9999762,22.5000572 L31.9999762,23.5000572 C31.9999762,23.6250533 31.9478933,23.7396361 31.8437265,23.8438028 C31.7395598,23.9479696 31.6249771,24.0000572 31.4999774,24.0000572 L31.4999774,24.0000572 Z M31.4999774,28.0000477 L26.4999905,28.0000477 C26.3749896,28.0000477 26.2604068,27.94796 26.1562401,27.8437933 C26.0520734,27.7396266 25.9999905,27.6250438 25.9999905,27.5000477 L25.9999905,27.5000477 L25.9999905,26.5000477 C25.9999905,26.3750468 26.0520734,26.260464 26.1562401,26.1562973 C26.2604068,26.0521306 26.3749896,26.0000477 26.4999905,26.0000477 L26.4999905,26.0000477 L31.4999774,26.0000477 C31.6249771,26.0000477 31.7395598,26.0521306 31.8437265,26.1562973 C31.9478933,26.260464 31.9999762,26.3750468 31.9999762,26.5000477 L31.9999762,26.5000477 L31.9999762,27.5000477 C31.9999762,27.6250438 31.9478933,27.7396266 31.8437265,27.8437933 C31.7395598,27.94796 31.6249771,28.0000477 31.4999774,28.0000477 L31.4999774,28.0000477 Z M34.4999702,46 L33.4999726,46 C33.3749729,46 33.2603901,45.9479171 33.1562234,45.8437504 C33.0520567,45.7395836 32.9999738,45.6250009 32.9999738,45.5000012 L32.9999738,45.5000012 L32.9999738,44.0000048 C32.2916424,43.9583379 31.64581,43.7083385 31.0624784,43.2500066 C30.9374787,43.1666737 30.8645619,43.05209 30.8437289,42.9062574 C30.8228959,42.7604247 30.8749788,42.625008 30.9999785,42.5000083 L30.9999785,42.5000083 L31.7499768,41.81251 C31.9166433,41.6458434 32.1249759,41.6354274 32.3749753,41.7812601 C32.6249747,41.9270927 32.895807,42.0000095 33.1874733,42.0000095 L33.1874733,42.0000095 L34.9374692,42.0000095 C35.1458017,42.0000095 35.3228852,41.9166767 35.4687179,41.7500101 C35.6145506,41.5833435 35.6874674,41.395844 35.6874674,41.1875115 C35.6874674,40.979179 35.6353845,40.8020954 35.5312177,40.6562627 C35.427051,40.5104301 35.2916353,40.4166803 35.1249687,40.3750134 L35.1249687,40.3750134 L32.3124802,39.5625153 C31.7291438,39.3541828 31.2499779,39.0000167 30.8749788,38.5000179 C30.4999797,38.0000191 30.3124802,37.4375204 30.3124802,36.8125219 C30.3124802,36.0625237 30.5728965,35.4166922 31.0937283,34.8750265 C31.6145601,34.3333608 32.2499756,34.0416955 32.9999738,34.0000334 L32.9999738,34.0000334 L32.9999738,32.5000334 C32.9999738,32.3750325 33.0520567,32.2604497 33.1562234,32.156283 C33.2603901,32.0521163 33.3749729,32.0000334 33.4999726,32.0000334 L33.4999726,32.0000334 L34.4999702,32.0000334 C34.6249699,32.0000334 34.7395526,32.0521163 34.8437194,32.156283 C34.9478861,32.2604497 34.999969,32.3750325 34.999969,32.5000334 L34.999969,32.5000334 L34.999969,34.0000334 C35.7083003,34.0416955 36.3541328,34.2916949 36.9374644,34.7500268 C37.0624641,34.8333596 37.1353809,34.9479433 37.1562139,35.093776 C37.1770468,35.2396087 37.1249639,35.3750253 36.9999642,35.5000334 L36.9999642,35.5000334 L36.249966,36.1875234 C36.0832994,36.35419 35.8749669,36.364606 35.6249675,36.2187733 C35.3749681,36.0729407 35.1041357,36.0000334 34.8124695,36.0000334 L34.8124695,36.0000334 L33.0624736,36.0000334 C32.8541411,36.0000334 32.6770576,36.0833567 32.5312249,36.2500232 C32.3853922,36.4166898 32.3124802,36.6041894 32.3124802,36.8125219 C32.3124802,37.0208544 32.3645583,37.197938 32.468725,37.3437706 C32.5728918,37.4896033 32.7083075,37.5833531 32.8749741,37.62502 L32.8749741,37.62502 L35.6874674,38.437518 C36.270799,38.6458505 36.7499648,39.0000167 37.1249639,39.5000155 C37.499963,40.0000143 37.6874626,40.562513 37.6874626,41.1875115 C37.6874626,41.9375097 37.4270462,42.5833412 36.9062145,43.1250069 C36.3853827,43.6666725 35.7499672,43.9583379 34.999969,44.0000048 L34.999969,44.0000048 L34.999969,45.5000012 C34.999969,45.6250009 34.9478861,45.7395836 34.8437194,45.8437504 C34.7395526,45.9479171 34.6249699,46 34.4999702,46 L34.4999702,46 Z"
+          id="f"
+          fill="#292A33"
+          fillRule="nonzero"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default AccountBillIcon;

package/src/components/molecules/obligation/icons/AccountConstructionIcon.js

@@ -0,0 +1,99 @@
+import React from "react";
+
+const AccountConstructionIcon = () => (
+  <svg
+    width="81px"
+    height="81px"
+    viewBox="0 0 81 81"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <defs>
+      <circle
+        id="account-construction-path-1"
+        cx="33.5"
+        cy="33.5"
+        r="33.5"
+      ></circle>
+      <filter
+        x="-17.2%"
+        y="-14.2%"
+        width="134.3%"
+        height="134.3%"
+        filterUnits="objectBoundingBox"
+        id="account-construction-filter-2"
+      >
+        <feOffset
+          dx="0"
+          dy="-4"
+          in="SourceAlpha"
+          result="shadowOffsetOuter1"
+        ></feOffset>
+        <feColorMatrix
+          values="0 0 0 0 0.964705882   0 0 0 0 0.964705882   0 0 0 0 0.976470588  0 0 0 1 0"
+          type="matrix"
+          in="shadowOffsetOuter1"
+          result="shadowMatrixOuter1"
+        ></feColorMatrix>
+        <feOffset
+          dx="0"
+          dy="2"
+          in="SourceAlpha"
+          result="shadowOffsetOuter2"
+        ></feOffset>
+        <feGaussianBlur
+          stdDeviation="3.5"
+          in="shadowOffsetOuter2"
+          result="shadowBlurOuter2"
+        ></feGaussianBlur>
+        <feColorMatrix
+          values="0 0 0 0 0.161570617   0 0 0 0 0.163300979   0 0 0 0 0.199501812  0 0 0 0.3 0"
+          type="matrix"
+          in="shadowBlurOuter2"
+          result="shadowMatrixOuter2"
+        ></feColorMatrix>
+        <feMerge>
+          <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+          <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+        </feMerge>
+      </filter>
+    </defs>
+    <g
+      id="account-construction-Profile-/-Icons"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g id="Outlined" transform="translate(-91.000000, -681.000000)">
+        <g
+          id="account-construction-Profile-Obligation-Icon-/-Account---Construction"
+          transform="translate(98.000000, 686.000000)"
+        >
+          <g id="Oval-Copy-6">
+            <use
+              fill="black"
+              fillOpacity="1"
+              filter="url(#account-construction-filter-2)"
+              xlinkHref="#account-construction-path-1"
+            ></use>
+            <use
+              fill="#FFFFFF"
+              fillRule="evenodd"
+              xlinkHref="#account-construction-path-1"
+            ></use>
+          </g>
+          <path
+            d="M45.34368,37.5000203 C45.6145124,37.5000203 45.8540958,37.3958535 46.0624283,37.187521 L46.0624283,37.187521 L51.6874149,31.5625344 C51.8957474,31.3542019 51.9999142,31.1146185 51.9999142,30.8437861 C51.9999142,30.5729538 51.8957474,30.3333704 51.6874149,30.1250378 L51.6874149,30.1250378 L50.3124182,28.6875413 C50.1040857,28.5208747 49.8645023,28.4375419 49.5936699,28.4375419 C49.3228375,28.4375419 49.0832541,28.5208747 48.8749216,28.6875413 L48.8749216,28.6875413 L48.1874233,29.4375395 L46.3749276,27.6250438 C46.5415942,26.9167125 46.5415942,26.2187972 46.3749276,25.5312988 C46.208261,24.8438004 45.8540958,24.2500519 45.3124301,23.750053 L45.3124301,23.750053 L42.246743,20.6849214 C41.0502644,19.5325165 39.6450828,18.7521483 38.0311975,18.3438159 C36.3020346,17.906317 34.5832887,17.906317 32.8749598,18.3438159 C31.1666308,18.7813149 29.6666344,19.6458958 28.3749705,20.9375598 L28.3749705,20.9375598 L33.9999571,23.750053 L33.9999571,24.9375502 C33.9999571,26.0208806 34.3957892,26.9583784 35.1874543,27.7500435 L35.1874543,27.7500435 L38.249947,30.8125362 C38.7916126,31.3542019 39.4061942,31.7083671 40.0936926,31.8750337 C40.7811909,32.0417003 41.4582723,32.0417003 42.1249377,31.8750337 L42.1249377,31.8750337 L43.9374334,33.6250295 L43.249935,34.3750277 C43.0416025,34.5416943 42.9374358,34.7708598 42.9374358,35.0625261 C42.9374358,35.3541924 43.0416025,35.5833579 43.249935,35.7500244 L43.249935,35.7500244 L44.6249318,37.187521 C44.8332643,37.3958535 45.0728477,37.5000203 45.34368,37.5000203 Z M19.9374906,49.9999905 C21.020821,49.9999905 21.9374858,49.5833245 22.6874841,48.7499934 L22.6874841,48.7499934 L37.5624486,32.8125314 C37.2707823,32.6041989 37.0416168,32.4166994 36.8749502,32.2500328 L36.8749502,32.2500328 L33.8124575,29.1875401 C33.604125,28.9792076 33.3957915,28.7292082 33.187459,28.4375419 L33.187459,28.4375419 L17.249997,43.3125064 C16.416666,44.0625046 16,44.9791694 16,46.0624999 C16,47.1458303 16.3854161,48.072912 17.1562472,48.8437432 C17.9270784,49.6145744 18.8541602,49.9999905 19.9374906,49.9999905 Z"
+            id="account-construction-h"
+            fill="#292A33"
+            fillRule="nonzero"
+          ></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default AccountConstructionIcon;