@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

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

@@ -0,0 +1,40 @@
+import React from "react";
+
+const VisaSmallIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="16"
+      viewBox="0 0 24 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Visa"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M23.2387 16H0.761973C0.340958 16 0 15.6492 0 15.2168V0.783232C0 0.3508 0.340958 0 0.761973 0H23.2387C23.6598 0 24 0.3508 24 0.783232V15.2168C24 15.6492 23.6598 16 23.2387 16Z"
+        fill="#F6F6F9"
+      />
+      <g clipPath="url(#clip0_3693_1186)">
+        <path
+          d="M10.075 5.09143L7.98023 10.0892H6.61357L5.58274 6.10076C5.52016 5.8551 5.46574 5.7651 5.27541 5.6616C4.96466 5.49301 4.4515 5.33485 4 5.23668L4.03067 5.09143H6.23057C6.51099 5.09143 6.76307 5.2781 6.82674 5.60101L7.37115 8.493L8.71664 5.09135H10.075V5.09143ZM15.4298 8.45758C15.4353 7.13851 13.6058 7.06584 13.6184 6.47659C13.6223 6.29726 13.793 6.10659 14.1668 6.05793C14.352 6.03368 14.8624 6.01518 15.4414 6.28159L15.6684 5.22177C15.3574 5.10885 14.9571 5.00018 14.4591 5.00018C13.1812 5.00018 12.2819 5.67951 12.2743 6.65226C12.266 7.37175 12.9162 7.77325 13.406 8.01233C13.9099 8.25717 14.079 8.4145 14.0771 8.6335C14.0735 8.96875 13.6752 9.11675 13.303 9.12258C12.6531 9.13258 12.276 8.94675 11.9755 8.807L11.7411 9.90191C12.0432 10.0405 12.6008 10.1614 13.1789 10.1675C14.5371 10.1675 15.4256 9.49658 15.4298 8.45758ZM18.8043 10.0893H20L18.9563 5.09143H17.8526C17.6044 5.09143 17.3951 5.23593 17.3024 5.4581L15.3624 10.0892H16.7199L16.9894 9.34274H18.6482L18.8043 10.0892V10.0893ZM17.3617 8.3185L18.0422 6.44201L18.4338 8.3185H17.3617ZM11.9222 5.09143L10.8531 10.0892H9.5603L10.6298 5.09143H11.9222Z"
+          fill="#1434CB"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3693_1186">
+          <rect
+            width="16"
+            height="5.16731"
+            fill="white"
+            transform="translate(4 5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default VisaSmallIcon;

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

@@ -0,0 +1,22 @@
+import React from "react";
+
+const WireSmallIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="16"
+      viewBox="0 0 24 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="0.5" y="0.5" width="23" height="15" rx="1.5" fill="#E4F4FD" />
+      <rect x="0.5" y="0.5" width="23" height="15" rx="1.5" stroke="#15749D" />
+      <path
+        d="M12.667 7.33324V10.6662H14V7.33324H12.667ZM10 10.6662H11.333V7.33324H10V10.6662ZM15.333 10.6662H15.75C15.888 10.6662 15.9999 10.7783 16 10.9162V11.7502C15.9998 11.8881 15.8879 12.0002 15.75 12.0002H8.25C8.11206 12.0002 8.00021 11.8881 8 11.7502V10.9162C8.00015 10.7783 8.11202 10.6662 8.25 10.6662H8.66699V7.33324H8.25C8.11195 7.33324 8.00003 7.22128 8 7.08324V6.15453C8 6.05983 8.05398 5.97324 8.13867 5.93089L11.8887 4.05589C11.9589 4.02092 12.0411 4.02092 12.1113 4.05589L15.8613 5.93089C15.946 5.97324 16 6.05983 16 6.15453V7.08324C16 7.22128 15.8881 7.33324 15.75 7.33324H15.333V10.6662Z"
+        fill="#15749D"
+      />
+    </svg>
+  );
+};
+
+export default WireSmallIcon;

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

@@ -4,6 +4,8 @@ import page from "../../../../.storybook/page";
 import {
   AccountsIcon,
   AccountsAddIcon,
+  CaretArrowDown,
+  CaretArrowUp,
   ForgotPasswordIcon,
   GoToEmailIcon,
   VerifiedEmailIcon,
@@ -42,11 +44,17 @@ import {
   AutopayIcon,
   KebabMenuIcon,
   MultiCartIcon,
+  NoResultsIcon,
   CloseIcon,
   TrashIconV2,
   DisabledPropertiesAddIcon,
   DisabledAccountsAddIcon,
-  DisabledPaymentMethodsAddIcon
+  DisabledPaymentMethodsAddIcon,
+  ReversalNeededIcon,
+  OverageIcon,
+  ShortageIcon,
+  PersonIcon,
+  PaymentStatusIcon
 } from "./index";
 
 const story = page({
@@ -55,50 +63,58 @@ const story = page({
 });
 export default story;
 
-export const accountsIcon = () => <AccountsIcon />;
+export const accountNumberImage = () => <AccountNumberImage />;
 export const accountsAddIcon = () => <AccountsAddIcon />;
-export const forgotPasswordIcon = () => <ForgotPasswordIcon />;
-export const goToEmailIcon = () => <GoToEmailIcon />;
-export const plusCircleIcon = () => <PlusCircleIcon />;
-export const verifiedEmailIcon = () => <VerifiedEmailIcon />;
-export const paymentMethodIcon = () => <PaymentMethodIcon />;
+export const accountsIcon = () => <AccountsIcon />;
 export const accountsIconSmall = () => <AccountsIconSmall />;
-export const paymentsIconSmall = () => <PaymentsIconSmall />;
-export const profileIconSmall = () => <ProfileIconSmall />;
-export const settingsIconSmall = () => <SettingsIconSmall />;
-export const chevronIcon = () => <ChevronIcon />;
-export const propertiesAddIcon = () => <PropertiesAddIcon />;
-export const propertiesIconSmall = () => <PropertiesIconSmall />;
-export const accountNumberImage = () => <AccountNumberImage />;
-export const routingNumberImage = () => <RoutingNumberImage />;
-export const checkmarkIcon = () => <CheckmarkIcon />;
-export const bankIcon = () => <BankIcon />;
-export const genericCard = () => <GenericCard />;
-export const autopayOnIcon = () => <AutopayOnIcon />;
-export const searchIcon = () => <SearchIcon />;
 export const achReturnIcon = () => <AchReturnIcon />;
 export const allocatedIcon = () => <AllocatedIcon />;
+export const autopayIcon = () => <AutopayIcon />;
+export const autopayOnIcon = () => <AutopayOnIcon />;
+export const bankIcon = () => <BankIcon />;
 export const calendarIcon = () => <CalendarIcon />;
+export const caretArrowDown = () => <CaretArrowDown />;
+export const caretArrowUp = () => <CaretArrowUp />;
 export const chargebackIcon = () => <ChargebackIcon />;
 export const chargebackReversalIcon = () => <ChargebackReversalIcon />;
+export const checkmarkIcon = () => <CheckmarkIcon />;
+export const chevronIcon = () => <ChevronIcon />;
+export const closeIcon = () => <CloseIcon />;
+export const disabledAccountsAddIcon = () => <DisabledAccountsAddIcon />;
+export const disabledPaymentMethodsAddIcon = () => (
+  <DisabledPaymentMethodsAddIcon />
+);
+export const disabledPropertiesAddIcon = () => <DisabledPropertiesAddIcon />;
 export const duplicateIcon = () => <DuplicateIcon />;
 export const erroredIcon = () => <ErroredIcon />;
 export const failedIcon = () => <FailedIcon />;
+export const forgotPasswordIcon = () => <ForgotPasswordIcon />;
+export const genericCard = () => <GenericCard />;
+export const goToEmailIcon = () => <GoToEmailIcon />;
+export const kebabMenuIcon = () => <KebabMenuIcon />;
+export const multiCartIcon = () => <MultiCartIcon />;
+export const noResultsIcon = () => <NoResultsIcon />;
+export const overageIcon = () => <OverageIcon />;
+export const paymentMethodIcon = () => <PaymentMethodIcon />;
+export const paymentsIconSmall = () => <PaymentsIconSmall />;
 export const pencilIcon = () => <PencilIcon />;
 export const pendingIcon = () => <PendingIcon />;
+export const plusCircleIcon = () => <PlusCircleIcon />;
+export const profileIconSmall = () => <ProfileIconSmall />;
+export const propertiesAddIcon = () => <PropertiesAddIcon />;
+export const propertiesIconSmall = () => <PropertiesIconSmall />;
 export const refundIcon = () => <RefundIcon />;
 export const rejectedIcon = () => <RejectedIcon />;
 export const rejectedVelocityIcon = () => <RejectedVelocityIcon />;
-export const successfulIcon = () => <SuccessfulIcon />;
-export const voidedIcon = () => <VoidedIcon />;
+export const reversalNeededIcon = () => <ReversalNeededIcon />;
+export const routingNumberImage = () => <RoutingNumberImage />;
+export const searchIcon = () => <SearchIcon />;
+export const settingsIconSmall = () => <SettingsIconSmall />;
+export const shortageIcon = () => <ShortageIcon />;
 export const statusUnknownIcon = () => <StatusUnknownIcon />;
-export const autopayIcon = () => <AutopayIcon />;
-export const kebabMenuIcon = () => <KebabMenuIcon />;
-export const multiCartIcon = () => <MultiCartIcon />;
-export const closeIcon = () => <CloseIcon />;
+export const successfulIcon = () => <SuccessfulIcon />;
 export const trashIconV2 = () => <TrashIconV2 />;
-export const disabledPropertiesAddIcon = () => <DisabledPropertiesAddIcon />;
-export const disabledAccountsAddIcon = () => <DisabledAccountsAddIcon />;
-export const disabledPaymentMethodsAddIcon = () => (
-  <DisabledPaymentMethodsAddIcon />
-);
+export const verifiedEmailIcon = () => <VerifiedEmailIcon />;
+export const voidedIcon = () => <VoidedIcon />;
+export const personIcon = () => <PersonIcon />;
+export const paymentStatusIcon = () => <PaymentStatusIcon />;

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

@@ -4,6 +4,8 @@ export * from "./ArrowLeftCircleIconSmall";
 export * from "./ArrowRightCircleIconSmall";
 export * from "./ArrowUpCircleIconSmall";
 export * from "./BankIconLarge";
+export * from "./CaretArrowDown";
+export * from "./CaretArrowUp";
 export * from "./ChargebackIconMedium";
 export * from "./ChargebackIconSmall";
 export * from "./ChargebackReversalIconMedium";
@@ -16,7 +18,7 @@ export * from "./RefundIconSmall";
 export * from "./RevenueManagementImage";
 export * from "./StandardCheckoutImage";
 export * from "./KioskImage";
-export * from "./PointOfSaleImage";
+export * from "./CashieringImage";
 export * from "./SuccessfulIconMedium";
 export * from "./SuccessfulIconSmall";
 export * from "./XCircleIconMedium";
@@ -25,3 +27,4 @@ export * from "./KebabMenuIcon";
 export * from "./MultiCartIcon";
 export * from "./CloseIcon";
 export * from "./TrashIconV2";
+export * from "./PaydotImage";

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

@@ -45,6 +45,8 @@ import RejectedVelocityIcon from "./RejectedVelocityIcon";
 import SuccessfulIcon from "./SuccessfulIcon";
 import VoidedIcon from "./VoidedIcon";
 import StatusUnknownIcon from "./StatusUnknownIcon";
+import CaretArrowDown from "./CaretArrowDown";
+import CaretArrowUp from "./CaretArrowUp";
 import CarrotIcon from "./CarrotIcon";
 import ProfileIcon from "./ProfileIcon";
 import GenericCardLarge from "./GenericCardLarge";
@@ -52,8 +54,6 @@ import EmptyCartIcon from "./EmptyCartIcon";
 import EmptyCartIconV2 from "./EmptyCartIconV2";
 import ShoppingCartIcon from "./ShoppingCartIcon";
 import TrashIcon from "./TrashIcon";
-import NoCustomerResultsIcon from "./NoCustomerResultsIcon";
-import NoPaymentResultsIcon from "./NoPaymentResultsIcon";
 import CustomerSearchIcon from "./CustomerSearchIcon";
 import PaymentSearchIcon from "./PaymentSearchIcon";
 import ResetPasswordIcon from "./ResetPasswordIcon";
@@ -67,7 +67,7 @@ import GuidedCheckoutImage from "./GuidedCheckoutImage";
 import ProfileImage from "./ProfileImage";
 import RevenueManagementImage from "./RevenueManagementImage";
 import KioskImage from "./KioskImage";
-import PointOfSaleImage from "./PointOfSaleImage";
+import CashieringImage from "./CashieringImage";
 import FindIconSmall from "./FindIconSmall";
 import HistoryIconSmall from "./HistoryIconSmall";
 import ChargebackIconSmall from "./ChargebackIconSmall";
@@ -94,6 +94,26 @@ import TrashIconV2 from "./TrashIconV2";
 import DisabledAccountsAddIcon from "./DisabledAccountsAddIcon";
 import DisabledPropertiesAddIcon from "./DisabledPropertiesAddIcon";
 import DisabledPaymentMethodsAddIcon from "./DisabledPaymentMethodsAddIcon";
+import ReversalNeededIcon from "./ReversalNeededIcon";
+import OverageIcon from "./OverageIcon";
+import ShortageIcon from "./ShortageIcon";
+import NoResultsIcon from "./NoResultsIcon";
+import AgencyIcon from "./AgencyIcon";
+import PersonIcon from "./PersonIcon";
+import PaymentStatusIcon from "./PaymentStatusIcon";
+import PaydotImage from "./PaydotImage";
+import VisaSmallIcon from "./VisaSmallIcon";
+import AmExSmallIcon from "./AmExSmallIcon";
+import BankGenericSmallIcon from "./BankGenericSmallIcon";
+import CashSmallIcon from "./CashSmallIcon";
+import DiscoverSmallIcon from "./DiscoverSmallIcon";
+import GenericSmallIcon from "./GenericSmallIcon";
+import MasterCardSmallIcon from "./MasterCardSmallIcon";
+import WireSmallIcon from "./WireSmallIcon";
+import VisaLargeIcon from "./VisaLargeIcon";
+import AmExLargeIcon from "./AmExLargeIcon";
+import DiscoverLargeIcon from "./DiscoverLargeIcon";
+import MasterCardLargeIcon from "./MasterCardLargeIcon";
 
 export {
   AccountsIcon,
@@ -143,6 +163,8 @@ export {
   SuccessfulIcon,
   VoidedIcon,
   StatusUnknownIcon,
+  CaretArrowDown,
+  CaretArrowUp,
   CarrotIcon,
   ProfileIcon,
   GenericCardLarge,
@@ -150,8 +172,6 @@ export {
   EmptyCartIconV2,
   ShoppingCartIcon,
   TrashIcon,
-  NoCustomerResultsIcon,
-  NoPaymentResultsIcon,
   CustomerSearchIcon,
   PaymentSearchIcon,
   ResetPasswordIcon,
@@ -165,7 +185,7 @@ export {
   ProfileImage,
   RevenueManagementImage,
   KioskImage,
-  PointOfSaleImage,
+  CashieringImage,
   FindIconSmall,
   HistoryIconSmall,
   ChargebackIconSmall,
@@ -191,5 +211,25 @@ export {
   TrashIconV2,
   DisabledAccountsAddIcon,
   DisabledPropertiesAddIcon,
-  DisabledPaymentMethodsAddIcon
+  DisabledPaymentMethodsAddIcon,
+  ReversalNeededIcon,
+  OverageIcon,
+  ShortageIcon,
+  NoResultsIcon,
+  AgencyIcon,
+  PersonIcon,
+  PaymentStatusIcon,
+  PaydotImage,
+  VisaSmallIcon,
+  AmExSmallIcon,
+  BankGenericSmallIcon,
+  CashSmallIcon,
+  DiscoverSmallIcon,
+  GenericSmallIcon,
+  MasterCardSmallIcon,
+  WireSmallIcon,
+  VisaLargeIcon,
+  AmExLargeIcon,
+  DiscoverLargeIcon,
+  MasterCardLargeIcon
 };

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

@@ -1,7 +1,10 @@
 export * from "./alert";
+export * from "./badge";
 export * from "./button-with-action";
 export * from "./button-with-link";
 export * from "./card";
+export * from "./dropdown";
+export * from "./sortable-table-heading";
 export * from "./form-layouts";
 export * from "./form-select";
 export * from "./icons";
@@ -12,6 +15,7 @@ export * from "./nav-footer";
 export * from "./nav-header";
 export * from "./nav-tabs";
 export * from "./paragraph";
+export * from "./search";
 export * from "./searchable-select";
 export * from "./spinner";
 export * from "./table";

package/src/components/atoms/index.js

@@ -9,10 +9,10 @@ export { default as ButtonWithLink } from "./button-with-link";
 export { default as cardRegistry } from "./card-registry";
 export { default as Checkbox } from "./checkbox";
 export { default as CheckboxList } from "./checkbox-list";
+export { default as SortableTableHeading } from "./sortable-table-heading";
 export { default as CountryDropdown } from "./country-dropdown";
 export { default as Detail } from "./detail";
 export { default as DisplayBox } from "./display-box";
-export { default as DisplayCard } from "./display-card";
 export { default as Dropdown } from "./dropdown";
 export * from "./form-layouts";
 export { default as FormSelect } from "./form-select";
@@ -37,6 +37,7 @@ export { default as Placeholder } from "./placeholder";
 export { default as ProcessingFee } from "./processing-fee";
 export { default as RadioButtonWithLabel } from "./radio-button-with-label";
 export { default as RadioButton } from "../molecules/radio-section/radio-button/RadioButton";
+export { default as Search } from "./search";
 export { default as SearchableSelect } from "./searchable-select";
 export { default as SolidDivider } from "./solid-divider";
 export { default as Spinner } from "./spinner";
@@ -46,6 +47,7 @@ export { default as Title } from "./title";
 export { default as ToggleSwitch } from "./toggle-switch";
 export { default as TypeaheadInput } from "./typeahead-input";
 export { default as Card } from "./card";
+export { default as CardType } from "./card-type";
 export { default as NavTabs } from "./nav-tabs";
 export { default as LoadingLine } from "./loading-line";
 export { default as WalletName } from "./wallet-name";

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

@@ -2,14 +2,17 @@ import React, { useContext } from "react";
 import { ThemeContext } from "styled-components";
 
 import ButtonWithLink from "../button-with-link";
+import Spinner from "../spinner";
 import { Box, Cluster, Center, Cover, Switcher } from "../layouts";
 import Heading from "../heading";
 import Title from "../title";
 import withWindowSize from "../../withWindowSize";
+import { WHITE } from "../../../constants/colors";
 
 const Jumbo = ({
   showButton,
   heading,
+  isHeadingLoading = false,
   buttonLink,
   subHeading,
   buttonText,
@@ -55,16 +58,28 @@ const Jumbo = ({
               <Title
                 variant={isMobile ? "small" : "large"}
                 as="h1"
-                color="#ffffff"
+                color={WHITE}
                 className="themeJumboHeading"
                 extraStyles={showCartStatus && isMobile && `max-width: 60%;`}
               >
-                {heading}
+                {isHeadingLoading ? (
+                  <Spinner
+                    size="50"
+                    cx="25"
+                    cy="25"
+                    radius="12.5"
+                    strokeWidth="3"
+                    centerSpinner
+                    color={WHITE}
+                  />
+                ) : (
+                  heading
+                )}
               </Title>
               {subHeading && (
                 <Heading
                   variant={isMobile ? "h6" : "h2"}
-                  color="#ffffff"
+                  color={WHITE}
                   className="themeJumboSubheading"
                 >
                   {subHeading}

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

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as LabeledAmountStories from './LabeledAmount.stories.js';
+
+<Meta of={LabeledAmountStories} />
+
+<Title />
+
+The LabeledAmount component is a component that combines a text label with a formatted money string, for use in checkout experiences (payment details, receipts, etc). The wrapping container for the text elements is styled using flexbox, by default using the  `space-between` value for the `justify-content` property. This can be changed by passing an override using the `extraStyles` prop like so:
+
+```
+ <LabeledAmount extraStyles={`justify-content: space-around`} />
+```
+
+Currently, there are two versions of this component: LabeledAmountV1 and LabeledAmountV2. While both versions are in active use in the codebase, LabeledAmountV1 is deprecated and should not be used in new code. The difference between the two is that LabeledAmountV2 has been updated to decouple the component's rendered HTML element from its theme size variant. This allows for arbitrary HTML elements (any heading size, paragraph, span) to be used as the underlying element regardless of the component size specified in the design, preserving proper HTML semantics and accessibility.
+
+LabeledAmountV2 takes the following props:
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

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

@@ -0,0 +1,118 @@
+import LabeledAmount from "./LabeledAmount";
+import { Box } from "../layouts";
+
+const meta = {
+  title: "Atoms/LabeledAmount",
+  component: LabeledAmount,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    version: "v2",
+    variant: "regular",
+    label: "Subtotal:",
+    amount: "$102.55",
+    as: "h3",
+    extraStyles: undefined
+  },
+  argTypes: {
+    version: {
+      description:
+        "The verison (v1 or v2) of the LabeledAmount component to use",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "v1" }
+      }
+    },
+    variant: {
+      description:
+        "The variant (regular, extraSmall, small, large) of the LabeledAmount component to use",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "regular" }
+      }
+    },
+    label: {
+      description: "The label to place before the amount",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    amount: {
+      description: "The formatted amount value to display, as a money string",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    as: {
+      description:
+        "The HTML element to render the component as, generally h or p element",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "p" }
+      }
+    },
+    extraStyles: {
+      description: "Extra styles used for wrapping container",
+      table: {
+        type: { summary: "string" },
+        defaultvalue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const LabeledAmountDefault = {
+  render: args => (
+    <Box minWidth="300px" padding="0">
+      <LabeledAmount {...args} />
+    </Box>
+  )
+};
+
+export const LabeledAmountHeading = {
+  render: args => (
+    <Box minWidth="450px" padding="0">
+      <LabeledAmount {...args} />
+    </Box>
+  ),
+  args: {
+    as: "h3",
+    label: "Total paid:",
+    amount: "$626.93",
+    variant: "large"
+  }
+};
+
+export const ExtraSmallLabeledAmount = {
+  render: args => (
+    <Box minWidth="150px" padding="0">
+      <LabeledAmount {...args} />
+    </Box>
+  ),
+  args: {
+    as: "h6",
+    label: "Fees:",
+    amount: "$2.50",
+    variant: "extraSmall"
+  }
+};
+
+export const SmallLabeledAmount = {
+  render: args => (
+    <Box minWidth="150px" padding="0">
+      <LabeledAmount {...args} />
+    </Box>
+  ),
+  args: {
+    as: "h4",
+    label: "Tax:",
+    amount: "$20.75",
+    variant: "small"
+  }
+};

package/src/components/atoms/layouts/Box.styled.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import styled, { css } from "styled-components";
 import { ROYAL_BLUE } from "../../../constants/colors";
 /*
@@ -11,27 +11,39 @@ import { ROYAL_BLUE } from "../../../constants/colors";
 
 /* eslint-disable no-unused-vars */
 export const BoxWrapper = styled(
-  ({
-    activeStyles,
-    focusStyles,
-    hoverStyles,
-    disabledStyles,
-    extraStyles,
-    borderSize,
-    borderColor,
-    borderWidthOverride,
-    borderRadius,
-    textAlign,
-    boxShadow,
-    minHeight,
-    minWidth,
-    maxWidth,
-    padding,
-    hiddenStyles,
-    ariaControls,
-    ariaLabel,
-    ...props
-  }) => <div aria-controls={ariaControls} aria-label={ariaLabel} {...props} />
+  forwardRef(
+    (
+      {
+        activeStyles,
+        focusStyles,
+        hoverStyles,
+        disabledStyles,
+        extraStyles,
+        borderSize,
+        borderColor,
+        borderWidthOverride,
+        borderRadius,
+        textAlign,
+        boxShadow,
+        minHeight,
+        minWidth,
+        maxWidth,
+        padding,
+        hiddenStyles,
+        ariaControls,
+        ariaLabel,
+        ...props
+      },
+      ref
+    ) => (
+      <div
+        ref={ref}
+        aria-controls={ariaControls}
+        aria-label={ariaLabel}
+        {...props}
+      />
+    )
+  )
 )`
   position: relative;
   box-sizing: border-box;

package/src/components/atoms/layouts/Center.styled.js

@@ -4,6 +4,7 @@ export const CenterWrapper = styled.div`
   box-sizing: content-box;
   margin-left: auto;
   margin-right: auto;
+  width: ${({ width }) => width || "auto"};
   max-width: ${({ maxWidth }) => maxWidth};
   padding-left: ${({ gutters }) => gutters};
   padding-right: ${({ gutters }) => gutters};
@@ -15,4 +16,5 @@ export const CenterWrapper = styled.div`
     align-items: center;
   `
       : ``};
+  ${({ extraStyles }) => extraStyles}
 `;

package/src/components/atoms/layouts/Motion.js

@@ -1,5 +1,5 @@
 import React, { Fragment, forwardRef } from "react";
-import { MotionWrapper } from "./Motion.styled";
+import { MotionWrapper, MotionSpanWrapper } from "./Motion.styled";
 import { safeChildren } from "../../../util/general";
 
 /*
@@ -38,11 +38,30 @@ import { safeChildren } from "../../../util/general";
 */
 
 export const Motion = forwardRef(
-  ({ position = "relative", padding = "0", children, ...rest }, ref) => (
-    <MotionWrapper position={position} padding={padding} ref={ref} {...rest}>
-      {safeChildren(children, <Fragment />)}
-    </MotionWrapper>
-  )
+  (
+    {
+      position = "relative",
+      padding = "0",
+      children,
+      useSpan = false,
+      ...rest
+    },
+    ref
+  ) =>
+    useSpan ? (
+      <MotionSpanWrapper
+        position={position}
+        padding={padding}
+        ref={ref}
+        {...rest}
+      >
+        {safeChildren(children, <Fragment />)}
+      </MotionSpanWrapper>
+    ) : (
+      <MotionWrapper position={position} padding={padding} ref={ref} {...rest}>
+        {safeChildren(children, <Fragment />)}
+      </MotionWrapper>
+    )
 );
 
 export default Motion;