@thecb/components 9.5.2-beta.0 → 9.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.5.2-beta.0",
+  "version": "9.5.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/icons/MultiCartIcon.d.ts

@@ -0,0 +1 @@
+export const MultiCartIcon: JSX.Element;

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

@@ -0,0 +1,26 @@
+import React from "react";
+
+const MultiCartIcon = ({ iconFill = "#3B5BDB", isMobile = true }) => {
+  const iconWidth = isMobile ? "20" : "25";
+  const iconHeight = isMobile ? "17" : "23";
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={iconWidth}
+      height={iconHeight}
+      viewBox={`0 0 ${iconWidth} ${iconHeight}`}
+      fill="none"
+    >
+      <path
+        d={
+          isMobile
+            ? "M17.5312 9.99414C17.4648 10.1934 17.3652 10.3594 17.2324 10.459C17.0996 10.5918 16.9336 10.625 16.7676 10.625H7.03906L7.23828 11.6875H16.1699C16.4023 11.6875 16.6016 11.7871 16.7676 11.9863C16.9004 12.1855 16.9668 12.418 16.9336 12.6504L16.7344 13.4805C17.0664 13.6465 17.2988 13.8789 17.498 14.1777C17.6973 14.4766 17.7969 14.8086 17.7969 15.1406C17.7969 15.6719 17.5977 16.1035 17.2324 16.4688C16.8672 16.834 16.4355 17 15.9375 17C15.4062 17 14.9746 16.834 14.6094 16.4688C14.2441 16.1035 14.0781 15.6719 14.0781 15.1406C14.0781 14.6094 14.2441 14.1777 14.6426 13.8125H7.66992C8.03516 14.1777 8.23438 14.6094 8.23438 15.1406C8.23438 15.6719 8.03516 16.1035 7.66992 16.4688C7.30469 16.834 6.87305 17 6.375 17C5.84375 17 5.41211 16.834 5.04688 16.4688C4.68164 16.1035 4.51562 15.6719 4.51562 15.1406C4.51562 14.8086 4.58203 14.5098 4.74805 14.2109C4.91406 13.9453 5.14648 13.7129 5.44531 13.5137L3.12109 2.125H0.796875C0.564453 2.125 0.365234 2.05859 0.232422 1.89258C0.0664062 1.75977 0 1.56055 0 1.32812V0.796875C0 0.597656 0.0664062 0.398438 0.232422 0.232422C0.365234 0.0996094 0.564453 0 0.796875 0H4.2168C4.38281 0 4.54883 0.0664062 4.68164 0.199219C4.81445 0.332031 4.91406 0.464844 4.98047 0.630859L5.2793 2.125H18.3281C18.5938 2.125 18.793 2.22461 18.959 2.42383C19.0918 2.62305 19.1582 2.85547 19.0918 3.08789L17.5312 9.99414Z"
+            : "M22.6875 13.4336C22.6016 13.6914 22.4727 13.9062 22.3008 14.0352C22.1289 14.207 21.9141 14.25 21.6992 14.25H9.10938L9.36719 15.625H20.9258C21.2266 15.625 21.4844 15.7539 21.6992 16.0117C21.8711 16.2695 21.957 16.5703 21.9141 16.8711L21.6562 17.9453C22.0859 18.1602 22.3867 18.4609 22.6445 18.8477C22.9023 19.2344 23.0312 19.6641 23.0312 20.0938C23.0312 20.7812 22.7734 21.3398 22.3008 21.8125C21.8281 22.2852 21.2695 22.5 20.625 22.5C19.9375 22.5 19.3789 22.2852 18.9062 21.8125C18.4336 21.3398 18.2188 20.7812 18.2188 20.0938C18.2188 19.4062 18.4336 18.8477 18.9492 18.375H9.92578C10.3984 18.8477 10.6562 19.4062 10.6562 20.0938C10.6562 20.7812 10.3984 21.3398 9.92578 21.8125C9.45312 22.2852 8.89453 22.5 8.25 22.5C7.5625 22.5 7.00391 22.2852 6.53125 21.8125C6.05859 21.3398 5.84375 20.7812 5.84375 20.0938C5.84375 19.6641 5.92969 19.2773 6.14453 18.8906C6.35938 18.5469 6.66016 18.2461 7.04688 17.9883L4.03906 3.25H1.03125C0.730469 3.25 0.472656 3.16406 0.300781 2.94922C0.0859375 2.77734 0 2.51953 0 2.21875V1.53125C0 1.27344 0.0859375 1.01562 0.300781 0.800781C0.472656 0.628906 0.730469 0.5 1.03125 0.5H5.45703C5.67188 0.5 5.88672 0.585938 6.05859 0.757812C6.23047 0.929688 6.35938 1.10156 6.44531 1.31641L6.83203 3.25H23.7188C24.0625 3.25 24.3203 3.37891 24.5352 3.63672C24.707 3.89453 24.793 4.19531 24.707 4.49609L22.6875 13.4336Z"
+        }
+        fill={iconFill}
+      />
+    </svg>
+  );
+};
+
+export default MultiCartIcon;

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

@@ -39,7 +39,8 @@ import {
   VoidedIcon,
   StatusUnknownIcon,
   AutopayIcon,
-  KebabMenuIcon
+  KebabMenuIcon,
+  MultiCartIcon
 } from "./index";
 
 const story = page({
@@ -86,3 +87,4 @@ export const voidedIcon = () => <VoidedIcon />;
 export const statusUnknownIcon = () => <StatusUnknownIcon />;
 export const autopayIcon = () => <AutopayIcon />;
 export const kebabMenuIcon = () => <KebabMenuIcon />;
+export const multiCartIcon = () => <MultiCartIcon />;

package/src/components/atoms/icons/index.d.ts

@@ -22,3 +22,4 @@ export * from "./SuccessfulIconSmall";
 export * from "./XCircleIconMedium";
 export * from "./XCircleIconSmall";
 export * from "./KebabMenuIcon";
+export * from "./MultiCartIcon";

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

@@ -87,6 +87,7 @@ import ChargebackIconMedium from "./ChargebackIconMedium";
 import ChargebackReversalIconMedium from "./ChargebackReversalIconMedium";
 import PlusCircleIcon from "./PlusCircleIcon";
 import KebabMenuIcon from "./KebabMenuIcon";
+import MultiCartIcon from "./MultiCartIcon";
 
 export {
   AccountsIcon,
@@ -177,5 +178,6 @@ export {
   ChargebackIconMedium,
   ChargebackReversalIconMedium,
   PlusCircleIcon,
-  KebabMenuIcon
+  KebabMenuIcon,
+  MultiCartIcon
 };

package/src/components/atoms/jumbo/Jumbo.js

@@ -20,7 +20,10 @@ const Jumbo = ({
   total,
   itemsCount,
   showCartStatus = false,
-  openCartSlider
+  openCartSlider,
+  extraStyles,
+  cartStatusExtraStyles,
+  cartStatusThemeValues
 }) => {
   const { isMobile } = useContext(ThemeContext);
   return (
@@ -29,6 +32,7 @@ const Jumbo = ({
       minHeight="65px"
       id={`heroImage-${slug}`}
       className="themeJumboBackground"
+      extraStyles={extraStyles}
     >
       <Center maxWidth="76.5rem">
         <Cover singleChild minHeight="65px">
@@ -49,6 +53,7 @@ const Jumbo = ({
               }
               align="center"
               nowrap={showCartStatus}
+              extraStyles={cartStatusExtraStyles}
             >
               <Title
                 variant={isMobile ? "small" : "large"}
@@ -78,6 +83,7 @@ const Jumbo = ({
               )}
               {showCartStatus && (
                 <CartStatus
+                  themeValues={cartStatusThemeValues}
                   total={total}
                   itemsCount={itemsCount}
                   openCart={openCartSlider}

package/src/components/atoms/labeled-amount/LabeledAmount.js

@@ -1,39 +1,14 @@
 import React from "react";
 import { fallbackValues } from "./LabeledAmount.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { Stack } from "../layouts";
-import Heading from "../heading";
-import Paragraph from "../paragraph";
+import LabeledAmountV1 from "./LabeledAmountV1";
+import LabeledAmountV2 from "./LabeledAmountV2";
 
-const LabeledAmount = ({
-  variant = "pL",
-  label,
-  amount,
-  themeValues,
-  as,
-  extraStyles
-}) => {
-  const LabeledAmountText = variant === "h6" ? Heading : Paragraph;
-  return (
-    <Stack direction="row">
-      <LabeledAmountText
-        variant={variant}
-        as={as}
-        weight={themeValues.fontWeight}
-        extraStyles={`${extraStyles}; text-align: start; flex: 3;`}
-      >
-        {label}:
-      </LabeledAmountText>
-      <LabeledAmountText
-        variant={variant}
-        as={as}
-        weight={themeValues.fontWeight}
-        extraStyles={`${extraStyles}; text-align: end; flex: 1;`}
-      >
-        {amount}
-      </LabeledAmountText>
-    </Stack>
-  );
+const LabeledAmount = ({ version = "v1", ...rest }) => {
+  const LabeledAmountComponent =
+    version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
+
+  return <LabeledAmountComponent {...rest} />;
 };
 
 export default themeComponent(

package/src/components/atoms/labeled-amount/LabeledAmount.stories.js

@@ -9,16 +9,29 @@ const variants = {
   p: "p",
   pL: "pL",
   h6: "h6",
+  small: "small",
+  regular: "regular",
+  large: "large",
   None: undefined
 };
 const defaultValue = "default";
+
+const versionsLabel = "version";
+const versions = {
+  v1: "v1",
+  v2: "v2"
+};
+const defaultVersion = "v1";
+
 const groupId = "props";
 
 export const labeledAmount = () => (
   <LabeledAmount
     variant={select(variantsLabel, variants, defaultValue, groupId)}
+    as={text("as", "p", groupId)}
     label={text("label", "Amount", groupId)}
     amount={text("amount", "$1.23", groupId)}
+    version={select(versionsLabel, versions, defaultVersion, groupId)}
   />
 );
 

package/src/components/atoms/labeled-amount/LabeledAmount.theme.js

@@ -1,9 +1,15 @@
 const fontWeight = {
+  // v1 variants
   default: "600",
   pS: "600",
   p: "600",
   pL: "600",
-  h6: "700"
+  h6: "700",
+  // v2 variants
+  regular: "600", // fontsize Detail large
+  extraSmall: "600", //fontsize Detail small
+  small: "600", // fontsize Detail regular
+  large: "700" // fontsize Title small
 };
 
 export const fallbackValues = {

package/src/components/atoms/labeled-amount/LabeledAmountV1.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { Stack } from "../layouts";
+import Heading from "../heading";
+import Paragraph from "../paragraph";
+
+const LabeledAmountV1 = ({
+  variant = "pL",
+  label,
+  amount,
+  themeValues,
+  as,
+  extraStyles
+}) => {
+  const LabeledAmountText = variant === "h6" ? Heading : Paragraph;
+  return (
+    <Stack direction="row">
+      <LabeledAmountText
+        variant={variant}
+        as={as}
+        weight={themeValues.fontWeight}
+        extraStyles={`${extraStyles}; text-align: start; flex: 3;`}
+      >
+        {label}:
+      </LabeledAmountText>
+      <LabeledAmountText
+        variant={variant}
+        as={as}
+        weight={themeValues.fontWeight}
+        extraStyles={`${extraStyles}; text-align: end; flex: 1;`}
+      >
+        {amount}
+      </LabeledAmountText>
+    </Stack>
+  );
+};
+
+export default LabeledAmountV1;

package/src/components/atoms/labeled-amount/LabeledAmountV2.js

@@ -0,0 +1,34 @@
+import React from "react";
+import Detail from "../detail";
+import Title from "../title";
+
+const LabeledAmountV2 = ({
+  variant = "regular",
+  label,
+  amount,
+  themeValues,
+  as,
+  extraStyles
+}) => {
+  const mappedDetailVariants = {
+    regular: "large",
+    small: "regular",
+    extraSmall: "small"
+  };
+  const LabeledAmountContainer = variant === "large" ? Title : Detail;
+  const containerVariant =
+    variant === "large" ? "small" : mappedDetailVariants[variant];
+  return (
+    <LabeledAmountContainer
+      variant={containerVariant}
+      as={as}
+      weight={themeValues.fontWeight}
+      extraStyles={`display: flex; justify-content: space-between; ${extraStyles}`}
+    >
+      <span>{label}</span>
+      <span>{amount}</span>
+    </LabeledAmountContainer>
+  );
+};
+
+export default LabeledAmountV2;

package/src/components/atoms/line-item/LineItem.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { Cluster, Stack } from "../layouts";
-import Paragraph from "../paragraph";
+import { Stack } from "../layouts";
+import Detail from "../detail";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LineItem.theme";
 import { STORM_GREY } from "../../../constants/colors";
@@ -28,43 +28,29 @@ const LineItem = ({
       attr => visibleFields?.includes(attr.key) && attr.key !== "description"
     )
     ?.map(attr => (
-      <Paragraph variant="pS" weight="400" key={attr.key} color={STORM_GREY}>
+      <Detail variant="small" weight="400" key={attr.key} color={STORM_GREY}>
         {`${formatAttrKeys(attr.key)}: ${attr.value}`}
-      </Paragraph>
+      </Detail>
     ));
-
   return (
-    <Cluster nowrap justify="space-between" align="start">
-      <Stack childGap="0px">
-        <Paragraph
-          variant={themeValues.paragraphVariant}
-          weight={themeValues.weightTitle}
-        >
-          {description}
-        </Paragraph>
-        <Paragraph variant={themeValues.paragraphVariant} weight="400">
-          {subDescription}
-        </Paragraph>
-        {visibleCustomAttrs && (
-          <Stack childGap="0.25rem">{visibleCustomAttrs}</Stack>
-        )}
-      </Stack>
-      {!!displayQuantity && (
-        <Paragraph
-          variant={themeValues.paragraphVariant}
-          weight={themeValues.weightTitle}
-        >
-          {`x${displayQuantity}`}
-        </Paragraph>
-      )}
-      <Paragraph
-        variant={themeValues.paragraphVariant}
-        weight="600"
-        extraStyles="margin: 0; text-align: end; min-width: fit-content; padding-left: 32px;"
+    <Stack childGap="0px">
+      <Detail
+        as="h3"
+        variant={themeValues.detailVariant}
+        weight={themeValues.weightTitle}
+        extraStyles={`display: flex; justify-content: space-between;`}
       >
-        {amount}
-      </Paragraph>
-    </Cluster>
+        <span>{description}</span>
+        <span>{!!displayQuantity && `x${displayQuantity}`}</span>
+        <span>{amount}</span>
+      </Detail>
+      <Detail as="p" variant={themeValues.detailVariant} weight="400">
+        {subDescription}
+      </Detail>
+      {visibleCustomAttrs && (
+        <Stack childGap="0.25rem">{visibleCustomAttrs}</Stack>
+      )}
+    </Stack>
   );
 };
 

package/src/components/atoms/line-item/LineItem.theme.js

@@ -1,7 +1,7 @@
 const weightTitle = { default: "600", small: "400" };
-const paragraphVariant = { default: "pL", small: "pS" };
+const detailVariant = { default: "large", small: "small" };
 
 export const fallbackValues = {
   weightTitle,
-  paragraphVariant
+  detailVariant
 };

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

@@ -5,7 +5,7 @@ import { Box, Stack } from "../layouts";
 import { FormInput } from "../form-layouts";
 import Checkbox from "../checkbox";
 
-const SELECT_ALL = "Select All";
+export const SELECT_ALL = "Select All";
 
 const SearchableSelect = ({
   autocompleteValue,
@@ -21,6 +21,13 @@ const SearchableSelect = ({
   placeholder = "Search agencies"
 }) => {
   const [itemList, setItemList] = useState([]);
+  const completeOptionsList = itemList.sort((a, b) =>
+    a.name == SELECT_ALL
+      ? -1
+      : b.name === SELECT_ALL
+      ? 1
+      : a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+  );
   useEffect(() => setItemList(items), [items, selectedItems]);
   useEffect(() => {
     const filteredItems = items.filter(item =>
@@ -38,6 +45,7 @@ const SearchableSelect = ({
       selectItem(value);
     }
   };
+
   return (
     <Box
       padding="1rem"
@@ -60,15 +68,15 @@ const SearchableSelect = ({
         extraStyles={`overflow-y: scroll; max-height: 250px;`}
       >
         <Stack>
-          {itemList.map(value => (
+          {completeOptionsList.map(option => (
             <Checkbox
-              key={value.name}
-              title={value.name}
-              name={value.name}
+              key={option.name}
+              title={option.name}
+              name={option.name}
               checked={
-                selectedItems?.find(item => item?.name === value?.name) ?? false
+                !!selectedItems?.find(item => item?.name === option?.name)
               }
-              onChange={() => handleSelect(value)}
+              onChange={() => handleSelect(option)}
               textExtraStyles={`margin: 0;`}
               disabled={disabled}
               extraStyles={`margin: 0.5rem;`}

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

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { text } from "@storybook/addon-knobs";
 import { createFormState } from "redux-freeform";
 
-import SearchableSelect from "./SearchableSelect";
+import SearchableSelect, { SELECT_ALL } from "./SearchableSelect";
 import page from "../../../../.storybook/page";
 
 const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
@@ -14,8 +14,9 @@ const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
 
 const items = [
   { name: "Foo", value: "foo-value" },
-  { name: "Bar", value: "bar-value" },
-  { name: "Baz", value: "baz-value" }
+  { name: "Baz", value: "baz-value" },
+  { name: SELECT_ALL, value: SELECT_ALL },
+  { name: "Bar", value: "bar-value" }
 ];
 
 const FormWrapper = props => {
@@ -41,7 +42,7 @@ const FormWrapper = props => {
       fields={props.fields}
       actions={props.actions}
       selectedItems={selectedItems}
-      selectItem={selectItem}
+      selectItem={item => selectItem(item)}
     />
   );
 };

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

@@ -4,7 +4,7 @@ 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 Title from "../../atoms/title";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { Box, Stack, Cluster } from "../../atoms/layouts";
 
@@ -84,9 +84,9 @@ const Modal = ({
           >
             <Box background={modalHeaderBg} padding="1.5rem">
               <Cluster justify="flex-start" align="center">
-                <Heading variant="h6" weight={FONT_WEIGHT_SEMIBOLD}>
+                <Title as="h2" weight={FONT_WEIGHT_SEMIBOLD} fontSize="1.25rem">
                   {modalHeaderText}
-                </Heading>
+                </Title>
               </Cluster>
             </Box>
             <Box background={modalBodyBg} padding="1.5rem">

package/src/components/molecules/partial-amount-form/PartialAmountForm.js

@@ -22,7 +22,8 @@ const PartialAmountForm = ({
   clearOnDismount,
   fields,
   actions,
-  showErrors = false
+  showErrors = false,
+  dataQa
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
@@ -54,7 +55,12 @@ const PartialAmountForm = ({
 
   const lineItemsNew = Array.isArray(lineItems) ? lineItems : [];
   return (
-    <FormContainer variant={variant} role="form" aria-label="Other amount">
+    <FormContainer
+      variant={variant}
+      role="form"
+      aria-label="Other amount"
+      data-qa={dataQa}
+    >
       <Text variant="p">
         Pay a different amount. The total balance will still be due on the same
         due date.

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -1,12 +1,5 @@
 import React, { useState, Fragment } from "react";
-import {
-  Stack,
-  Cluster,
-  Box,
-  Motion,
-  Cover,
-  Center
-} from "../../atoms/layouts";
+import { Stack, Cluster, Box, Motion } from "../../atoms/layouts";
 import { fallbackValues } from "./PaymentDetails.theme";
 
 import { displayCurrency } from "../../../util/general";
@@ -22,7 +15,7 @@ import {
   FONT_WEIGHT_BOLD,
   FONT_WEIGHT_REGULAR
 } from "../../../constants/style_constants";
-import { ATHENS_GREY, GRECIAN_GREY } from "../../../constants/colors";
+import { ATHENS_GREY } from "../../../constants/colors";
 import ButtonWithAction from "../../atoms/button-with-action";
 import Text from "../../atoms/text";
 import Alert from "../../atoms/alert";
@@ -84,6 +77,9 @@ const PaymentDetailsContent = ({
           <SolidDivider />
         </Box>
         <LabeledAmount
+          version="v2"
+          as="h3"
+          variant="small"
           extraStyles={`font-weight: ${FONT_WEIGHT_REGULAR}; font-size: 14px;`}
           label="Amount paid"
           amount={displayCurrency(voidableAmountPaid)}
@@ -97,9 +93,11 @@ const PaymentDetailsContent = ({
       <>
         <Box padding="0.5rem 0">
           <LabeledAmount
+            version="v2"
             variant={themeValues.labeledAmountSubtotal}
             label="Subtotal"
             amount={displayCurrency(subtotal)}
+            as="h3"
           />
           {feeElems}
         </Box>
@@ -109,13 +107,14 @@ const PaymentDetailsContent = ({
       <></>
     )}
     <LabeledAmount
-      as="p"
+      version="v2"
+      as="h3"
       variant={themeValues.labeledAmountTotal}
       label={hasVoidablePaymentsSection ? "Remaining amount due" : "Total"}
       amount={displayCurrency(
         typeof remainingBalance === "number" ? remainingBalance : total
       )}
-      extraStyles={variant === "small" && `font-weight: ${FONT_WEIGHT_BOLD};`}
+      extraStyles={`margin-top: 1rem;`}
     />
   </Stack>
 );
@@ -277,6 +276,8 @@ const PaymentDetails = ({
     <Fragment key={fee.label}>
       <Box padding="4px 0" />
       <LabeledAmount
+        version="v2"
+        as="h3"
         key={fee.label}
         variant={themeValues.labeledAmountSubtotal}
         {...fee}
@@ -328,7 +329,7 @@ const PaymentDetails = ({
       <Cluster justify="space-between" align="center">
         <Title
           weight={FONT_WEIGHT_BOLD}
-          as="h1"
+          as="h2"
           extraStyles={`font-size: 1.375rem;`}
           id="payment-details-title"
         >
@@ -345,7 +346,7 @@ const PaymentDetails = ({
     </Box>
   ) : (
     <Title
-      as="h1"
+      as="h2"
       weight={FONT_WEIGHT_BOLD}
       margin="1rem 0 0 0"
       extraStyles={`font-size: 1.75rem;`}

package/src/components/molecules/payment-details/PaymentDetails.stories.js

@@ -46,6 +46,42 @@ const payment = {
       description: "0034 Bednar Mission Unit: 79",
       quantity: 1,
       subDescription: "PIN: 71-83-630-216-0724"
+    },
+    {
+      amount: 42042,
+      customAttributes: [
+        {
+          key: "parcel_id",
+          value: "71-83-630-216-0724"
+        },
+        {
+          key: "property_city",
+          value: "North Breana"
+        },
+        {
+          key: "property_class",
+          value: "7-91"
+        },
+        {
+          key: "property_secondary_address",
+          value: "79"
+        },
+        {
+          key: "property_street_address",
+          value: "0034 Bednar Mission"
+        },
+        {
+          key: "property_zip_code",
+          value: "80326-6917"
+        },
+        {
+          key: "tax_rate",
+          value: "7.076"
+        }
+      ],
+      description: "42 Bednar Mission Unit: 42",
+      quantity: 1,
+      subDescription: "PIN: 71-83-630-216-0724"
     }
   ],
   subtotal: 77294,

package/src/components/molecules/payment-details/PaymentDetails.theme.js

@@ -1,7 +1,7 @@
 const backgroundColor = { default: "transparent", small: "transparent" };
 const lineItem = { default: "default", small: "small" };
-const labeledAmountSubtotal = { default: "pL", small: "pS" };
-const labeledAmountTotal = { default: "h6", small: "p" };
+const labeledAmountSubtotal = { default: "regular", small: "small" };
+const labeledAmountTotal = { default: "large", small: "small" };
 
 export const fallbackValues = {
   backgroundColor,