@thecb/components 2.2.0

package/src/components/atoms/form-layouts/FormInputRow.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Box, Switcher } from "../layouts";
+
+const FormInputRow = ({
+  breakpoint = "30rem",
+  childGap = "1rem",
+  largeChild,
+  largeChildSize,
+  children,
+  ...rest
+}) => {
+  return (
+    <Box padding="0" {...rest}>
+      <Switcher
+        childGap={childGap}
+        breakpoint={breakpoint}
+        largeChild={largeChild}
+        largeChildSize={largeChildSize}
+      >
+        {children}
+      </Switcher>
+    </Box>
+  );
+};
+
+export default FormInputRow;

package/src/components/atoms/form-layouts/FormLayouts.theme.js

@@ -0,0 +1,52 @@
+import {
+  STORM_GREY,
+  MATISSE_BLUE,
+  WHITE,
+  SEASHELL_WHITE,
+  MINESHAFT_GREY,
+  DUSTY_GREY,
+  GREY_CHATEAU,
+  ATHENS_GREY
+} from "../../../constants/colors";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+
+const linkColor = { default: `${MATISSE_BLUE}`, disabled: `${MATISSE_BLUE}` };
+const formBackgroundColor = {
+  default: `${WHITE}`,
+  disabled: `${WHITE}`,
+  checkout: `${ATHENS_GREY}`,
+  collapsible: `${ATHENS_GREY}`
+};
+
+const inputBackgroundColor = {
+  default: `${WHITE}`,
+  disabled: `${SEASHELL_WHITE}`
+};
+const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
+const labelColor = { default: `${STORM_GREY}`, disabled: `${STORM_GREY}` };
+const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
+const lineHeight = { default: "1rem", disabled: "1rem" };
+const fontSize = { default: "0.875rem", disabled: "0.875rem" };
+const errorFontSize = { default: "0.75rem", disabled: "0.75rem" };
+const fontWeight = {
+  default: `${FONT_WEIGHT_REGULAR}`,
+  disabled: `${FONT_WEIGHT_REGULAR}`
+};
+const hoverFocusStyles = {
+  default: `color: #0E506D; outline: none; text-decoration: underline;  `,
+  disabled: `color: #6E727E;`
+};
+
+export const fallbackValues = {
+  linkColor,
+  formBackgroundColor,
+  inputBackgroundColor,
+  color,
+  labelColor,
+  borderColor,
+  lineHeight,
+  fontSize,
+  errorFontSize,
+  fontWeight,
+  hoverFocusStyles
+};

package/src/components/atoms/form-layouts/index.js

@@ -0,0 +1,6 @@
+import FormInput from "./FormInput";
+import FormInputRow from "./FormInputRow";
+import FormInputColumn from "./FormInputColumn";
+import FormContainer from "./FormContainer";
+
+export { FormInput, FormInputRow, FormInputColumn, FormContainer };

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

@@ -0,0 +1,62 @@
+import React, { useState, useRef, useEffect } from "react";
+import Dropdown from "../dropdown";
+import Text from "../text";
+import { STORM_GREY } from "../../../constants/colors";
+import { SelectContainer, SelectLabel } from "./FormSelect.styled";
+
+const FormSelect = ({
+  fieldActions,
+  labelTextWhenNoError,
+  errorMessages,
+  options,
+  field,
+  showErrors,
+  onChange
+}) => {
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const handleClickAway = event => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickAway);
+    return () => {
+      document.removeEventListener("mousedown", handleClickAway);
+    };
+  });
+
+  return (
+    <SelectContainer ref={dropdownRef}>
+      <Text
+        variant="pS"
+        color={STORM_GREY}
+        weight="400"
+        extraStyles={`margin-bottom: 4px;`}
+      >
+        {labelTextWhenNoError}
+      </Text>
+      <Dropdown
+        placeholder={options[0] ? options[0].text : ""}
+        options={options}
+        value={field.rawValue}
+        isOpen={open}
+        isError={false}
+        onSelect={
+          onChange ? value => onChange(value) : value => fieldActions.set(value)
+        }
+        onClick={() => setOpen(!open)}
+      />
+      <SelectLabel field={field} showErrors={showErrors}>
+        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
+          ? errorMessages[field.errors[0]]
+          : null}
+      </SelectLabel>
+    </SelectContainer>
+  );
+};
+
+export default FormSelect;

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

@@ -0,0 +1,65 @@
+import styled from "styled-components";
+import {
+  MINESHAFT_GREY,
+  STORM_GREY,
+  WHITE,
+  SEASHELL_WHITE,
+  DUSTY_GREY,
+  GHOST_GREY,
+  ERROR_COLOR,
+  MATISSE_BLUE
+} from "../../../constants/colors";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+
+export const SelectContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+
+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 }) =>
+      (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
+        ? ERROR_COLOR
+        : GHOST_GREY};
+  border-radius: 2px;
+  height: 48px;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  min-width: 100px;
+  margin: 0;
+  box-sizing: border-box;
+  position: relative;
+  font-size: 1.1rem;
+  font-family: Public Sans;
+  line-height: 2rem;
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  background-color: ${({ disabled }) => (disabled ? SEASHELL_WHITE : WHITE)};
+  color: ${({ disabled }) => (disabled ? DUSTY_GREY : MINESHAFT_GREY)};
+  box-shadow: none;
+
+  &:focus {
+    border: 1px solid ${MATISSE_BLUE};
+  }
+`;
+
+export const SelectOption = styled.option``;

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

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

package/src/components/atoms/formatted-address/FormattedAddress.js

@@ -0,0 +1,53 @@
+import React from "react";
+import Text from "../text";
+import Box from "../layouts/Box";
+import { fallbackValues } from "./FormattedAddress.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const FormattedAddress = ({
+  isActive,
+  street1,
+  city,
+  stateProvince,
+  country,
+  zip,
+  street2 = null,
+  name = null,
+  isRadio,
+  themeValues,
+  qaPrefix = "address"
+}) => {
+  return (
+    <Box padding={themeValues.padding} isActive={isActive} isRadio={isRadio}>
+      {name && (
+        <Text variant="p" color={themeValues.color} dataQa={`${qaPrefix}-name`}>
+          {name}
+        </Text>
+      )}
+      <Box padding="0">
+        <Text variant="p" color={themeValues.color} dataQa={`${qaPrefix}-1`}>
+          {street1}
+        </Text>
+        {street2 && (
+          <Text variant="p" dataQa={`${qaPrefix}-2`}>
+            , {street2}
+          </Text>
+        )}
+      </Box>
+      <Box padding="0">
+        <Text variant="p" color={themeValues.color} dataQa={`${qaPrefix}-3`}>
+          {city}, {stateProvince}
+          {` ${zip}`}
+          {country ? ` ${country}` : ""}
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default themeComponent(
+  FormattedAddress,
+  "FormattedAddress",
+  fallbackValues,
+  "default"
+);

package/src/components/atoms/formatted-address/FormattedAddress.theme.js

@@ -0,0 +1,11 @@
+import { CHARADE_GREY, MINESHAFT_GREY } from "../../../constants/colors";
+
+const fontSize = { default: "1rem", radio: "1.0625rem" };
+const padding = { default: "0", radio: "0.625rem 0" };
+const color = { default: `${CHARADE_GREY}`, radio: `${MINESHAFT_GREY}` };
+
+export const fallbackValues = {
+  fontSize,
+  padding,
+  color
+};

package/src/components/atoms/formatted-address/index.js

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

package/src/components/atoms/hamburger-button/HamburgerButton.js

@@ -0,0 +1,113 @@
+import React from "react";
+import styled from "styled-components";
+
+const Hamburger = styled.button`
+  padding: 8px;
+  display: inline-block;
+  cursor: pointer;
+  transition-property: opacity;
+  transition-duration: 0.15s;
+  transition-timing-function: linear;
+  font: inherit;
+  color: inherit;
+  text-transform: none;
+  background-color: transparent;
+  border: 0;
+  margin: 0;
+  overflow: visible;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const HamburgerBox = styled.span`
+  width: 34px;
+  height: 34px;
+  display: inline-block;
+  position: relative;
+`;
+
+const HamburgerInner = styled.span`
+  display: block;
+  top: auto;
+  bottom: 6px;
+  left: 2px;
+  transition-duration: 0.13s;
+  transition-delay: 0.13s;
+  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  margin-top: 12px;
+  background-color: ${({ inactiveColor }) => inactiveColor};
+
+  &, &::before, &::after {
+    background-color: ${({ inactiveColor }) => inactiveColor};
+    width: 30px;
+    height: 3px;
+    position: absolute;
+    transition-property: transform;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+  }
+
+  &::before, &::after {
+    content: "";
+    display: block;
+  }
+
+  &::before {
+    top: -10px;
+    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), 
+                transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  &::after {
+    bottom: -10px;
+    top: -20px;
+    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), 
+                opacity 0.1s linear;
+  }
+
+  &.active, &.active::before, &.active::after {
+    background-color: ${({ activeColor }) => activeColor};
+  }
+
+  &.active {
+    transform: translate3d(0, -10px, 0) rotate(-45deg);
+    transition-delay: 0.22s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  &.active::after {
+    top: 0;
+    opacity: 0;
+    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), 
+                opacity: 0.1s 0.22s linear;
+  }
+
+  &.active::before {
+    top: 0;
+    transform: rotate(-90deg);
+    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), 
+                transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+`;
+
+const HamburgerButton = ({ activeColor, inactiveColor, isActive, onClick }) => (
+  <Hamburger
+    className={isActive === true ? "active" : ""}
+    onClick={onClick}
+    type="button"
+    ariaLabel="Menu"
+    ariaControls="navigation"
+  >
+    <HamburgerBox>
+      <HamburgerInner
+        className={isActive === true ? "active" : ""}
+        inactiveColor={inactiveColor}
+        activeColor={activeColor}
+      />
+    </HamburgerBox>
+  </Hamburger>
+);
+
+export default HamburgerButton;

package/src/components/atoms/hamburger-button/index.js

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

package/src/components/atoms/heading/Heading.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FIREFLY_GREY } from "../../../constants/colors";
+import { HeadingText } from "./Heading.styled";
+import { safeChildren } from "../../../util/general";
+import { fallbackValues } from "./Heading.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const Heading = ({
+  themeValues,
+  weight = FONT_WEIGHT_REGULAR,
+  color = FIREFLY_GREY,
+  margin = 0,
+  textAlign,
+  extraStyles = ``,
+  className,
+  variant = "h1",
+  children,
+  ...rest
+}) => (
+  <HeadingText
+    as={variant}
+    weight={weight}
+    color={color}
+    margin={margin}
+    textAlign={textAlign}
+    extraStyles={extraStyles}
+    className={className}
+    fontFamily={themeValues.fontFamily}
+    fontSize={themeValues.fontSize}
+    {...rest}
+  >
+    {safeChildren(children, <span />)}
+  </HeadingText>
+);
+
+export default themeComponent(Heading, "Heading", fallbackValues, "h1");

package/src/components/atoms/heading/Heading.styled.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const HeadingText = styled.h1`
+  --font-size: ${({ fontSize }) => fontSize};
+  font-size: var(--font-size);
+  line-height: calc(1.5 * var(--font-size));
+  color: ${({ color }) => color};
+  font-weight: ${({ weight }) => weight};
+  margin: ${({ margin }) => margin};
+  text-align: ${({ textAlign }) => textAlign};
+  font-family: ${({ fontFamily }) => fontFamily};
+
+  ${({ extraStyles }) => extraStyles};
+`;

package/src/components/atoms/heading/Heading.theme.js

@@ -0,0 +1,18 @@
+const fontFamily = {
+  primary: "Public Sans",
+  secondary: "Open Sans"
+};
+
+const fontSize = {
+  h1: "2.25rem",
+  h2: "2rem",
+  h3: "1.75rem",
+  h4: "1.5rem",
+  h5: "1.375rem",
+  h6: "1.25rem"
+};
+
+export const fallbackValues = {
+  fontFamily,
+  fontSize
+};

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

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

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const AccountsAddIcon = ({ themeValues }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="100"
+      height="100"
+      viewBox="0 0 100 100"
+    >
+      <defs>
+        <path id="a" d="M0 0H100V100H0z"></path>
+      </defs>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <mask id="b" fill={themeValues.primaryColor}>
+          <use xlinkHref="#a"></use>
+        </mask>
+        <path
+          fill={themeValues.primaryColor}
+          d="M66.728 11.967c.566 0 1.024.466 1.024 1.042v18.508h6.362c.527 0 .962.406 1.018.928l.006.114v42.7c-2.433 2.351-4.911 4.22-7.386 5.687v.024s-.311.19-.898.49c-17.526 9.718-34.635-.176-34.635-.176v-1.02c-4.533-2.49-7.386-5.006-7.386-5.006V13.01c0-.576.459-1.042 1.025-1.042h40.87z"
+          mask="url(#b)"
+        ></path>
+        <path
+          fill={themeValues.accentColor}
+          fillRule="nonzero"
+          d="M63.551 84.435l-.22.087A36.867 36.867 0 0150 87c-20.435 0-37-16.588-37-37.05a36.96 36.96 0 0110.865-26.227V13.01c0-1.056.81-1.927 1.843-2.004l.15-.005h40.87a2 2 0 011.986 1.86l.006.15v8.085L68.746 18a37.09 37.09 0 014.464 3.095A36.994 36.994 0 0187 49.95a36.915 36.915 0 01-5.216 18.978 12.433 12.433 0 00-1.743-2.803 34.02 34.02 0 004.062-16.175A34.09 34.09 0 0071.39 23.353a34.268 34.268 0 00-2.67-1.952l-.002 9.536c.185-.227.477-.387.89-.387h4.505c1.053 0 1.91.822 1.986 1.86l.005.149.002 30.394a12.38 12.38 0 00-1.936-.796L74.17 39.74h-5.451l.001 21.957c-.663.09-1.31.233-1.935.424V20.19H25.8v53.82C31.978 80.24 40.539 84.1 50 84.1c3.871 0 7.592-.646 11.06-1.837.73.83 1.567 1.562 2.491 2.173zm-4.016-4.331l-11.28-.001V76.38h9.926a12.374 12.374 0 001.354 3.724zm-35.67-52.095a34.047 34.047 0 00-7.968 21.941 34.039 34.039 0 007.968 21.939v-43.88zM61.68 64.1c.31 0 .586.146.763.373a12.463 12.463 0 00-1.731 1.76v-.199H31.873v2.931h27.166c-.276.62-.504 1.266-.677 1.934H30.906a.967.967 0 01-.96-.854l-.007-.113v-4.865c0-.496.373-.904.854-.96l.113-.007h30.773zm0-8.734c.496 0 .905.373.96.855l.007.112v4.865a.967.967 0 01-.854.961l-.113.007H30.906a.967.967 0 01-.96-.855l-.007-.113v-4.865c0-.496.373-.905.854-.96l.113-.007h30.773zM60.71 57.3H31.873v2.931h28.838V57.3zm-14.418-6.751a.967.967 0 01.113 1.928l-.113.006H30.906a.967.967 0 01-.113-1.928l.113-.006h15.387zm15.386-11.266c.496 0 .905.374.96.855l.007.113v4.865a.967.967 0 01-.854.96l-.113.007H30.906a.967.967 0 01-.96-.855l-.007-.112V40.25c0-.496.373-.905.854-.961l.113-.007h30.773zm-.968 1.934H31.873v2.931h28.838v-2.931zm.968-10.667c.496 0 .905.374.96.855l.007.112v4.865a.967.967 0 01-.854.961l-.113.007H30.906a.967.967 0 01-.96-.855l-.007-.113v-4.865c0-.496.373-.904.854-.96l.113-.007h30.773zm-.968 1.934H31.873v2.931h28.838v-2.931zm-14.418-6.752a.967.967 0 01.113 1.928l-.113.007H30.906a.967.967 0 01-.113-1.928l.113-.007h15.387z"
+          mask="url(#b)"
+        ></path>
+        <path
+          fill={themeValues.subIconColor}
+          d="M70.42 61.582c6.88 0 12.458 5.578 12.458 12.459 0 6.88-5.577 12.458-12.458 12.458-6.88 0-12.458-5.578-12.458-12.458 0-6.881 5.578-12.459 12.458-12.459zm.82 6.721H69.6v4.918h-4.917v1.64H69.6v4.917h1.639V74.86h4.918v-1.64H71.24v-4.917z"
+          mask="url(#b)"
+        ></path>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(AccountsAddIcon, "Icons", fallbackValues, "info");

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const AccountsIcon = ({ themeValues }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="100"
+      height="100"
+      viewBox="0 0 100 100"
+    >
+      <defs>
+        <path id="a" d="M0 0H100V100H0z"></path>
+      </defs>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <mask id="b" fill={themeValues.primaryColor}>
+          <use xlinkHref="#a"></use>
+        </mask>
+        <path
+          fill={themeValues.primaryColor}
+          d="M66.728 11.967c.566 0 1.024.466 1.024 1.042v18.508h6.362c.527 0 .962.406 1.018.928l.006.114v42.7c-2.433 2.351-4.911 4.22-7.386 5.687v.024s-.311.19-.898.49c-17.526 9.718-34.635-.176-34.635-.176v-1.02c-4.533-2.49-7.386-5.006-7.386-5.006V13.01c0-.576.459-1.042 1.025-1.042h40.87z"
+          mask="url(#b)"
+        ></path>
+        <path
+          fill={themeValues.accentColor}
+          fillRule="nonzero"
+          d="M66.728 11a2 2 0 011.986 1.86l.006.15v8.085L68.746 18a37.09 37.09 0 014.464 3.095A36.994 36.994 0 0187 49.95C87 70.412 70.435 87 50 87S13 70.412 13 49.95a36.96 36.96 0 0110.865-26.227V13.01c0-1.056.81-1.927 1.843-2.004l.15-.005h40.87zm.057 9.19H25.8v53.82C31.978 80.24 40.539 84.1 50 84.1c6.102 0 11.83-1.605 16.786-4.417l-.001-59.492zm-5.106 56.19v3.723H48.254V76.38H61.68zM74.17 39.74h-5.451l.001 38.758a34.276 34.276 0 005.45-4.458v-34.3zM68.72 21.4l-.001 9.536c.185-.227.477-.387.89-.387h4.505c1.053 0 1.91.822 1.986 1.86l.005.149.001 39.364a34.039 34.039 0 007.997-21.973A34.09 34.09 0 0071.39 23.353a34.268 34.268 0 00-2.67-1.952zm-52.823 28.55a34.039 34.039 0 007.968 21.938v-43.88a34.047 34.047 0 00-7.968 21.941zM61.68 64.1c.534 0 .967.432.967.966v4.865a.967.967 0 01-.967.968H30.906a.967.967 0 01-.967-.968v-4.865c0-.534.433-.967.967-.967zm-.968 1.933H31.873v2.931h28.838v-2.931zm.968-10.668c.534 0 .967.433.967.967v4.865a.967.967 0 01-.967.968H30.906a.967.967 0 01-.967-.968v-4.865c0-.534.433-.967.967-.967zM60.71 57.3H31.873v2.931h28.838V57.3zm-14.418-6.751a.967.967 0 01.113 1.928l-.113.006H30.906a.967.967 0 01-.113-1.928l.113-.006h15.387zm15.386-11.266c.534 0 .967.433.967.968v4.865a.967.967 0 01-.967.967H30.906a.967.967 0 01-.967-.967V40.25c0-.535.433-.968.967-.968zm-.968 1.934H31.873v2.931h28.838v-2.931zm.968-10.667c.534 0 .967.433.967.967v4.865a.967.967 0 01-.967.968H30.906a.967.967 0 01-.967-.968v-4.865c0-.534.433-.967.967-.967zm-.968 1.934H31.873v2.931h28.838v-2.931zm-14.418-6.752a.967.967 0 01.113 1.928l-.113.007H30.906a.967.967 0 01-.113-1.928l.113-.007h15.387z"
+          mask="url(#b)"
+        ></path>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(AccountsIcon, "Icons", fallbackValues, "info");

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

@@ -0,0 +1,63 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const AccountsIconSmall = ({ themeValues }) => {
+  return (
+    <svg
+      width="22px"
+      height="22px"
+      viewBox="1 0 22 25"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      style={{ display: "inline-block", verticalAlign: "text-bottom" }}
+    >
+      <defs>
+        <rect
+          id="path-1-accountssmall"
+          x="0"
+          y="0"
+          width="29"
+          height="27"
+        ></rect>
+      </defs>
+      <g
+        id="Random-Icon-Work"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <g id="Header/Desktop/Menu">
+          <g id="Header/Desktop/Menu/Accounts-Tab">
+            <g>
+              <g id="Payments">
+                <g id="folder-open">
+                  <mask id="mask-2-accountssmall" fill="white">
+                    <use xlinkHref="#path-1-accountssmall"></use>
+                  </mask>
+                  <g id="Mask"></g>
+                  <path
+                    d="M1.875,17.9609424 L4.30077547,13.8125148 C4.60546242,13.2968908 5.01561733,12.8867359 5.53124128,12.5820489 C6.04686523,12.277362 6.60936389,12.1250188 7.21873726,12.1250188 L7.21873726,12.1250188 L18.7499598,12.1250188 L18.7499598,10.4375228 C18.7499598,9.9687741 18.5858975,9.57033719 18.2577734,9.24221315 C17.9296494,8.91408911 17.5312125,8.75002682 17.0624638,8.75002682 L17.0624638,8.75002682 L11.4374772,8.75002682 L9.18748257,6.50003219 L3.56249598,6.50003219 C3.09374727,6.50003219 2.69531037,6.66409447 2.36718633,6.99221851 C2.03906229,7.32034255 1.875,7.71877946 1.875,8.18752816 L1.875,8.18752816 L1.875,17.9609424 Z M17.519494,20 C17.9179303,20 18.2929296,19.900391 18.6444913,19.7011726 C18.9960529,19.5019541 19.2655837,19.2265643 19.4530831,18.8750027 L19.4530831,18.8750027 L22.0194832,14.5156381 C22.1835455,14.2343887 22.1835455,13.9531394 22.0194832,13.6718901 C21.8554209,13.3906408 21.6093278,13.2500161 21.2812037,13.2500161 L21.2812037,13.2500161 L7.21873726,13.2500161 C6.82030089,13.2500161 6.4453016,13.3496251 6.09373994,13.5488435 C5.74217828,13.748062 5.47264749,14.0234517 5.28514812,14.3750134 L5.28514812,14.3750134 L2.71874799,18.734378 C2.5546857,19.0156273 2.5546857,19.2968767 2.71874799,19.578126 C2.88281028,19.8593753 3.12890344,20 3.45702748,20 L3.45702748,20 L17.519494,20 Z"
+                    id="f"
+                    fill={themeValues.singleIconColor}
+                    fillRule="nonzero"
+                    mask="url(#mask-2-accountssmall)"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  AccountsIconSmall,
+  "Icons",
+  fallbackValues,
+  "primary"
+);