From f5f4858cf14b4cc1d6cb7f388815838f84a8a431 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dro=C5=84?= <dron.official@yahoo.com>
Date: Thu, 17 Feb 2022 12:08:17 +0100
Subject: [PATCH] Change StatusLabels to Pills (#1867)

* Change StatusLabels to Pills (#1819)

* Refactor StatusLabel component to use Pills

* Remove StatusLabel component

* Remove StatusChip component

* Refactor ChannelsAvailibilityDropdown for usage with Pills

* Remove AvailabilityStatusLabel

* Fix FilterErrorsList dot

* Refactor plugin availability

* Update messages

* Update snapshots & solve rebase conflicts

* Fix rebase conflict - duplicate intl

* Handle products & collections without channels

* Change plugins messages from inactive to deactivated

* Remove redundant ChannelConfigPopup

* Change AvailabilityMenu from onClick to onHover

* Update snapshots & fix rebase conflicts

* Add order title

* Fix status colors

* Remove unused import

* Fix extra spacing in unfulfilled pill

* Add payment card title & move messages outside file

* Fix impromper skeleton rendering in product list

* Update snapshots & fix rebase conflicts

* Change plugins pills to interactive

* Update snapshots

* Trigger deployment

* Apply minor CR fixes

* Change callb
acks props to mapped objects in ChannelsAvailabilityMenu

* Rebase / update snapshots

* Fix fulfilled from label position

* Update snapshots

* Change messages names in oRderPayment

* Fix Pill overflowing

* Update snapshots
---
 locale/defaultMessages.json                   |  209 +-
 .../CollectionDetailsPage.tsx                 |    1 -
 .../CollectionList/CollectionList.tsx         |   23 +-
 .../CollectionListPage/CollectionListPage.tsx |    1 -
 .../CollectionProducts/CollectionProducts.tsx |    3 -
 .../AvailabilityStatusLabel.tsx               |   33 -
 .../AvailabilityStatusLabel/index.ts          |    2 -
 .../ChannelsAvailabilityDropdown.stories.tsx  |    4 +-
 .../ChannelsAvailabilityDropdown.tsx          |  167 +-
 .../ChannelsAvailabilityDropdown/messages.ts  |   36 +
 .../ChannelsAvailabilityDropdown/styles.ts    |   21 -
 .../ChannelsAvailabilityDropdown/utils.ts     |   61 +
 .../ChannelsAvailabilityMenuContent.tsx       |   51 +
 .../ChannelsAvailabilityMenuContent/index.ts  |    2 +
 .../ChannelsAvailabilityMenuContent/styles.ts |   36 +
 .../Filter/FilterContent/FilterErrorsList.tsx |   12 +-
 .../StatusChip/StatusChip.stories.tsx         |   17 -
 src/components/StatusChip/StatusChip.tsx      |   92 -
 src/components/StatusChip/index.ts            |    1 -
 src/components/StatusChip/types.ts            |    6 -
 src/components/StatusLabel/StatusLabel.tsx    |  102 -
 src/components/StatusLabel/index.ts           |    2 -
 src/components/StatusLabel/messages.ts        |   16 -
 .../CustomerOrders/CustomerOrders.tsx         |    7 +-
 .../DiscountProducts/DiscountProducts.tsx     |    3 -
 .../SaleDetailsPage/SaleDetailsPage.tsx       |    1 -
 .../VoucherDetailsPage/VoucherDetailsPage.tsx |    1 -
 src/misc.ts                                   |   21 +-
 .../OrderDetailsPage/OrderDetailsPage.tsx     |    9 +-
 .../components/OrderDetailsPage/Title.tsx     |   48 +
 src/orders/components/OrderList/OrderList.tsx |   21 +-
 .../components/OrderPayment/OrderPayment.tsx  |  113 +-
 .../components/OrderPayment/messages.ts       |   93 +-
 .../OrderReturnRefundItemsCard/CardTitle.tsx  |   61 +-
 .../OrderStatusChip/OrderStatusChip.tsx       |   23 -
 src/pages/components/PageList/PageList.tsx    |    7 +-
 .../PluginsList/PluginAvailabilityStatus.tsx  |   47 +-
 .../ChannelConfigPluginPopupBody.tsx          |   76 -
 .../GlobalConfigPluginPopupBody.tsx           |   12 +-
 .../PluginAvailabilityStatusPopup.tsx         |    9 +-
 .../components/PluginsList/messages.ts        |   14 +-
 src/plugins/components/PluginsList/utils.ts   |   24 +
 .../components/PluginsListPage/filters.ts     |   10 +-
 .../components/ProductList/ProductList.tsx    |   28 +-
 .../ProductListPage/ProductListPage.tsx       |    1 -
 .../__snapshots__/Stories.test.ts.snap        | 6098 ++++++-----------
 src/storybook/config.js                       |    1 -
 .../stories/components/StatusLabel.tsx        |   19 -
 src/types.ts                                  |    7 +
 49 files changed, 2680 insertions(+), 4972 deletions(-)
 delete mode 100644 src/components/AvailabilityStatusLabel/AvailabilityStatusLabel.tsx
 delete mode 100644 src/components/AvailabilityStatusLabel/index.ts
 create mode 100644 src/components/ChannelsAvailabilityDropdown/messages.ts
 delete mode 100644 src/components/ChannelsAvailabilityDropdown/styles.ts
 create mode 100644 src/components/ChannelsAvailabilityDropdown/utils.ts
 create mode 100644 src/components/ChannelsAvailabilityMenuContent/ChannelsAvailabilityMenuContent.tsx
 create mode 100644 src/components/ChannelsAvailabilityMenuContent/index.ts
 create mode 100644 src/components/ChannelsAvailabilityMenuContent/styles.ts
 delete mode 100644 src/components/StatusChip/StatusChip.stories.tsx
 delete mode 100644 src/components/StatusChip/StatusChip.tsx
 delete mode 100644 src/components/StatusChip/index.ts
 delete mode 100644 src/components/StatusChip/types.ts
 delete mode 100644 src/components/StatusLabel/StatusLabel.tsx
 delete mode 100644 src/components/StatusLabel/index.ts
 delete mode 100644 src/components/StatusLabel/messages.ts
 create mode 100644 src/orders/components/OrderDetailsPage/Title.tsx
 delete mode 100644 src/orders/components/OrderStatusChip/OrderStatusChip.tsx
 delete mode 100644 src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx
 delete mode 100644 src/storybook/stories/components/StatusLabel.tsx

diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 1aa5d8838..59500c719 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -2040,25 +2040,33 @@
     "context": "select title",
     "string": "Select channels you want for {contentType} to be available on"
   },
-  "src_dot_components_dot_ChannelsAvailabilityDropdown_dot_1043589445": {
-    "context": "product channel publication status",
-    "string": "hidden"
+  "src_dot_components_dot_ChannelsAvailabilityDropdown_dot_channel": {
+    "context": "Channel label",
+    "string": "Channel"
   },
-  "src_dot_components_dot_ChannelsAvailabilityDropdown_dot_1702481199": {
-    "context": "product channel  publication date",
-    "string": "published since {date}"
-  },
-  "src_dot_components_dot_ChannelsAvailabilityDropdown_dot_1944644572": {
+  "src_dot_components_dot_ChannelsAvailabilityDropdown_dot_dropdownLabel": {
     "context": "product status title",
-    "string": "{count}/{allCount} channels"
+    "string": "{channelCount} {channelCount,plural, =1 {Channel} other {Channels}}"
   },
-  "src_dot_components_dot_ChannelsAvailabilityDropdown_dot_3285520461": {
-    "context": "product channel publication date",
-    "string": "Will become available on {date}"
+  "src_dot_components_dot_ChannelsAvailabilityDropdown_dot_noChannels": {
+    "context": "dropdown label when there are no channels assigned",
+    "string": "No channels"
   },
-  "src_dot_components_dot_ChannelsAvailabilityDropdown_dot_802058289": {
-    "context": "product status",
-    "string": "Available in {count} out of {allCount, plural, one {# channel} other {# channels}}"
+  "src_dot_components_dot_ChannelsAvailabilityDropdown_dot_published": {
+    "context": "Status label when object is published in a channel",
+    "string": "Published"
+  },
+  "src_dot_components_dot_ChannelsAvailabilityDropdown_dot_scheduled": {
+    "context": "Status label when object is scheduled to publish in a channel",
+    "string": "Scheduled to publish"
+  },
+  "src_dot_components_dot_ChannelsAvailabilityDropdown_dot_status": {
+    "context": "Status label",
+    "string": "Status"
+  },
+  "src_dot_components_dot_ChannelsAvailabilityDropdown_dot_unpublished": {
+    "context": "Status label when object is unpublished in a channel",
+    "string": "Unpublished"
   },
   "src_dot_components_dot_ColumnPicker_dot_1483881697": {
     "context": "button",
@@ -2467,18 +2475,6 @@
   "src_dot_components_dot_SingleSelectField_dot_4205644805": {
     "string": "No results found"
   },
-  "src_dot_components_dot_StatusLabel_dot_active": {
-    "context": "status label active",
-    "string": "Active"
-  },
-  "src_dot_components_dot_StatusLabel_dot_deactivated": {
-    "context": "status label deactivated",
-    "string": "Deactivated"
-  },
-  "src_dot_components_dot_StatusLabel_dot_inactive": {
-    "context": "status label inactive",
-    "string": "Inactive"
-  },
   "src_dot_components_dot_TableHead_dot_868570480": {
     "string": "Selected {number} items"
   },
@@ -4377,6 +4373,9 @@
     "context": "OrderCustomer Fulfillment from Local Warehouse",
     "string": "Fulfill from Local Stock"
   },
+  "src_dot_orders_dot_components_dot_OrderDetailsPage_dot_580490159": {
+    "string": "Order #{orderNumber}"
+  },
   "src_dot_orders_dot_components_dot_OrderDetailsPage_dot_cancelOrder": {
     "context": "cancel button",
     "string": "Cancel order"
@@ -4950,85 +4949,93 @@
     "context": "dialog header",
     "string": "Void Payment"
   },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_1322321687": {
-    "context": "order payment",
-    "string": "Refunded amount"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_1325966144": {
-    "context": "order shipping method name",
-    "string": "Shipping"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_1817306106": {
-    "context": "vat included in order price",
-    "string": "VAT included"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_1934027242": {
-    "context": "voucher type order discount",
-    "string": "Voucher"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_2183023165": {
-    "context": "ordered products",
-    "string": "{quantity} items"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_2320183694": {
-    "context": "order payment",
-    "string": "Captured amount"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_2392156856": {
-    "context": "staff added type order discount",
-    "string": "Staff added"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_2444197639": {
-    "context": "void payment, button",
-    "string": "Void"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_2845258362": {
-    "context": "button",
-    "string": "Refund"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_3500506678": {
-    "context": "order, button",
-    "string": "Mark as paid"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_353147224": {
-    "context": "order payment",
-    "string": "Outstanding Balance"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_3720114122": {
-    "context": "order discount",
-    "string": "Discount"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_372187363": {
-    "context": "order payment",
-    "string": "Paid with Gift Card"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_3768782744": {
-    "context": "order payment",
-    "string": "Preauthorized amount"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_3955023266": {
-    "string": "Taxes"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_4211710217": {
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_capture": {
     "context": "capture payment, button",
     "string": "Capture"
   },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_781550514": {
-    "context": "order subtotal price",
-    "string": "Subtotal"
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_captured": {
+    "context": "order payment",
+    "string": "Captured amount"
   },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_878013594": {
-    "context": "order total price",
-    "string": "Total"
-  },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_orderPaymentClickAndCollectShippingMethod": {
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_clickAndCollectShippingMethod": {
     "context": "OrderPayment click&collect shipping method",
     "string": "click&collect"
   },
-  "src_dot_orders_dot_components_dot_OrderPayment_dot_orderPaymentShippingDoesNotApply": {
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_discount": {
+    "context": "order discount",
+    "string": "Discount"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_itemCount": {
+    "context": "ordered products",
+    "string": "{quantity} items"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_markAsPaid": {
+    "context": "order, button",
+    "string": "Mark as paid"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_outstanding": {
+    "context": "order payment",
+    "string": "Outstanding Balance"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_paidWithGiftCard": {
+    "context": "order payment",
+    "string": "Paid with Gift Card"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_paymentTitle": {
+    "context": "Payment card title",
+    "string": "Payment status"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_preauthorized": {
+    "context": "order payment",
+    "string": "Preauthorized amount"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_refund": {
+    "context": "button",
+    "string": "Refund"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_refunded": {
+    "context": "order payment",
+    "string": "Refunded amount"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_shipping": {
+    "context": "order shipping method name",
+    "string": "Shipping"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_shippingDoesNotApply": {
     "context": "OrderPayment does not require shipping",
     "string": "does not apply"
   },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_shippingNotApplicable": {
+    "context": "order does not require shipping",
+    "string": "does not apply"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_staffAdded": {
+    "context": "staff added type order discount",
+    "string": "Staff added"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_subtotal": {
+    "context": "order subtotal price",
+    "string": "Subtotal"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_taxes": {
+    "string": "Taxes"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_total": {
+    "context": "order total price",
+    "string": "Total"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_vatIncluded": {
+    "context": "vat included in order price",
+    "string": "VAT included"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_void": {
+    "context": "button",
+    "string": "Refund"
+  },
+  "src_dot_orders_dot_components_dot_OrderPayment_dot_voucher": {
+    "context": "voucher type order discount",
+    "string": "Voucher"
+  },
   "src_dot_orders_dot_components_dot_OrderProductAddDialog_dot_2272209368": {
     "context": "variant sku",
     "string": "SKU {sku}"
@@ -5945,18 +5952,26 @@
   "src_dot_plugins_dot_components_dot_PluginsList_dot_666641390": {
     "string": "No plugins found"
   },
+  "src_dot_plugins_dot_components_dot_PluginsList_dot_active": {
+    "context": "status label active",
+    "string": "Active"
+  },
   "src_dot_plugins_dot_components_dot_PluginsList_dot_channelLabel": {
     "context": "table header channel col label",
     "string": "Channel"
   },
   "src_dot_plugins_dot_components_dot_PluginsList_dot_channelTitle": {
     "context": "plugin channel availability status title",
-    "string": "Active in {activeChannelsCount}"
+    "string": "{activeChannelsCount,plural, =0 {Deactivated} other {Active in {activeChannelsCount}}}"
   },
   "src_dot_plugins_dot_components_dot_PluginsList_dot_confLabel": {
     "context": "table header configuration col label",
     "string": "Configuration"
   },
+  "src_dot_plugins_dot_components_dot_PluginsList_dot_deactivated": {
+    "context": "status label deactivated",
+    "string": "Deactivated"
+  },
   "src_dot_plugins_dot_components_dot_PluginsList_dot_description": {
     "context": "global config plugin status popup description",
     "string": "Global plugins are set across all channels in your ecommerce. Only status is shown for those types of plugins"
diff --git a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
index db6cf6f7a..da5227c40 100644
--- a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
+++ b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
@@ -101,7 +101,6 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
               <CardSpacer />
               <CollectionProducts
                 disabled={disabled}
-                channelsCount={channelsCount}
                 collection={collection}
                 {...collectionProductsProps}
               />
diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx
index 761f6a36e..ee3f2ae5b 100644
--- a/src/collections/components/CollectionList/CollectionList.tsx
+++ b/src/collections/components/CollectionList/CollectionList.tsx
@@ -1,8 +1,11 @@
 import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core";
 import { CollectionListUrlSortField } from "@saleor/collections/urls";
 import { canBeSorted } from "@saleor/collections/views/CollectionList/sort";
-import AvailabilityStatusLabel from "@saleor/components/AvailabilityStatusLabel";
 import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown";
+import {
+  getChannelAvailabilityColor,
+  getChannelAvailabilityLabel
+} from "@saleor/components/ChannelsAvailabilityDropdown/utils";
 import Checkbox from "@saleor/components/Checkbox";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
@@ -11,7 +14,7 @@ import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import TooltipTableCellHeader from "@saleor/components/TooltipTableCellHeader";
 import { commonTooltipMessages } from "@saleor/components/TooltipTableCellHeader/messages";
-import { makeStyles } from "@saleor/macaw-ui";
+import { makeStyles, Pill } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
@@ -19,7 +22,6 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { CollectionList_collections_edges_node } from "../../types/CollectionList";
-import { messages } from "./messages";
 
 const useStyles = makeStyles(
   theme => ({
@@ -52,14 +54,12 @@ interface CollectionListProps
     SortPage<CollectionListUrlSortField>,
     ChannelProps {
   collections: CollectionList_collections_edges_node[];
-  channelsCount: number;
 }
 
 const numberOfColumns = 4;
 
 const CollectionList: React.FC<CollectionListProps> = props => {
   const {
-    channelsCount,
     collections,
     disabled,
     settings,
@@ -194,17 +194,16 @@ const CollectionList: React.FC<CollectionListProps> = props => {
                   data-test-availability={!!collection?.channelListings?.length}
                 >
                   {(!collection && <Skeleton />) ||
-                    (!collection?.channelListings?.length && "-") ||
-                    (collection?.channelListings !== undefined && channel ? (
-                      <AvailabilityStatusLabel
-                        channel={channel}
-                        messages={messages}
+                    (channel ? (
+                      <Pill
+                        label={intl.formatMessage(
+                          getChannelAvailabilityLabel(channel)
+                        )}
+                        color={getChannelAvailabilityColor(channel)}
                       />
                     ) : (
                       <ChannelsAvailabilityDropdown
-                        allChannelsCount={channelsCount}
                         channels={collection?.channelListings}
-                        showStatus
                       />
                     ))}
                 </TableCell>
diff --git a/src/collections/components/CollectionListPage/CollectionListPage.tsx b/src/collections/components/CollectionListPage/CollectionListPage.tsx
index 90f72f230..e6b0ff287 100644
--- a/src/collections/components/CollectionListPage/CollectionListPage.tsx
+++ b/src/collections/components/CollectionListPage/CollectionListPage.tsx
@@ -98,7 +98,6 @@ const CollectionListPage: React.FC<CollectionListPageProps> = ({
         />
         <CollectionList
           disabled={disabled}
-          channelsCount={channelsCount}
           selectedChannelId={selectedChannelId}
           filterDependency={filterDependency}
           {...listProps}
diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx
index 422758b74..f02e14702 100644
--- a/src/collections/components/CollectionProducts/CollectionProducts.tsx
+++ b/src/collections/components/CollectionProducts/CollectionProducts.tsx
@@ -54,13 +54,11 @@ const useStyles = makeStyles(
 
 export interface CollectionProductsProps extends PageListProps, ListActions {
   collection: CollectionDetails_collection;
-  channelsCount: number;
   onProductUnassign: (id: string, event: React.MouseEvent<any>) => void;
 }
 
 const CollectionProducts: React.FC<CollectionProductsProps> = props => {
   const {
-    channelsCount,
     collection,
     disabled,
     onAdd,
@@ -195,7 +193,6 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
                       "-"
                     ) : product?.channelListings !== undefined ? (
                       <ChannelsAvailabilityDropdown
-                        allChannelsCount={channelsCount}
                         channels={product?.channelListings}
                       />
                     ) : (
diff --git a/src/components/AvailabilityStatusLabel/AvailabilityStatusLabel.tsx b/src/components/AvailabilityStatusLabel/AvailabilityStatusLabel.tsx
deleted file mode 100644
index 0e21070ab..000000000
--- a/src/components/AvailabilityStatusLabel/AvailabilityStatusLabel.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import StatusLabel from "@saleor/components/StatusLabel";
-import useDateLocalize from "@saleor/hooks/useDateLocalize";
-import React from "react";
-import { useIntl } from "react-intl";
-
-export const AvailabilityStatusLabel = ({ channel, messages }) => {
-  const intl = useIntl();
-  const localizeDate = useDateLocalize();
-
-  return (
-    <StatusLabel
-      label={intl.formatMessage(
-        channel.publicationDate
-          ? channel.isPublished
-            ? messages.published
-            : messages.willBePublished
-          : messages.unpublished,
-        {
-          date: localizeDate(channel.publicationDate, "L")
-        }
-      )}
-      status={
-        channel.publicationDate
-          ? channel.isPublished
-            ? "success"
-            : "alert"
-          : "error"
-      }
-    />
-  );
-};
-
-export default AvailabilityStatusLabel;
diff --git a/src/components/AvailabilityStatusLabel/index.ts b/src/components/AvailabilityStatusLabel/index.ts
deleted file mode 100644
index ed07509bf..000000000
--- a/src/components/AvailabilityStatusLabel/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./AvailabilityStatusLabel";
-export * from "./AvailabilityStatusLabel";
diff --git a/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.stories.tsx b/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.stories.tsx
index 619225247..b897a1015 100644
--- a/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.stories.tsx
+++ b/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.stories.tsx
@@ -8,9 +8,7 @@ import ChannelsAvailabilityDropdown, {
 } from "./ChannelsAvailabilityDropdown";
 
 const props: ChannelsAvailabilityDropdownProps = {
-  allChannelsCount: 6,
-  channels: productChannels,
-  showStatus: true
+  channels: productChannels
 };
 
 storiesOf("Generics / ChannelsAvailabilityDropdown", module)
diff --git a/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx b/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx
index e98126c03..ab5a6b184 100644
--- a/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx
+++ b/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx
@@ -1,140 +1,63 @@
-import { Menu, MenuItem, Typography } from "@material-ui/core";
-import { CollectionList_collections_edges_node_channelListings } from "@saleor/collections/types/CollectionList";
-import Hr from "@saleor/components/Hr";
-import StatusLabel from "@saleor/components/StatusLabel";
-import useDateLocalize from "@saleor/hooks/useDateLocalize";
+import { Card, Popper } from "@material-ui/core";
+import { Pill } from "@saleor/macaw-ui";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
-import { useStyles } from "./styles";
-
-type Channels = Pick<
-  CollectionList_collections_edges_node_channelListings,
-  "isPublished" | "publicationDate" | "channel"
->;
+import ChannelsAvailabilityMenuContent from "../ChannelsAvailabilityMenuContent";
+import { messages } from "./messages";
+import {
+  CollectionChannels,
+  getDropdownColor,
+  mapChannelsToPills
+} from "./utils";
 
 export interface ChannelsAvailabilityDropdownProps {
-  allChannelsCount: number;
-  channels: Channels[];
-  showStatus?: boolean;
+  channels: CollectionChannels[] | null;
 }
 
-const isActive = (channelData: Channels) => channelData?.isPublished;
-
 export const ChannelsAvailabilityDropdown: React.FC<ChannelsAvailabilityDropdownProps> = ({
-  allChannelsCount,
-  channels,
-  showStatus = false
+  channels
 }) => {
   const intl = useIntl();
-  const classes = useStyles({});
-  const localizeDate = useDateLocalize();
-  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [isPopupOpen, setPopupOpen] = React.useState(false);
+  const anchor = React.useRef<HTMLDivElement>(null);
 
-  const handleClick = event => setAnchorEl(event.currentTarget);
-  const handleClose = () => setAnchorEl(null);
-  const activeInAllChannels = React.useMemo(
-    () => showStatus && channels.every(isActive),
-    [channels, showStatus]
-  );
+  const dropdownColor = React.useMemo(() => getDropdownColor(channels), [
+    channels
+  ]);
+
+  if (!channels?.length) {
+    return (
+      <Pill label={intl.formatMessage(messages.noChannels)} color="error" />
+    );
+  }
 
   return (
-    <div onClick={e => e.stopPropagation()}>
-      <div
-        aria-controls="availability-menu"
-        aria-haspopup="true"
-        role="button"
-        onClick={handleClick}
-      >
-        <StatusLabel
-          label={intl.formatMessage(
-            {
-              defaultMessage: "{count}/{allCount} channels",
-              description: "product status title"
-            },
-            {
-              allCount: allChannelsCount,
-              count: channels.length
-            }
-          )}
-          status={
-            showStatus ? (activeInAllChannels ? "success" : "error") : undefined
-          }
+    <div
+      onClick={e => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      ref={anchor}
+      onMouseOver={() => setPopupOpen(true)}
+      onMouseLeave={() => setPopupOpen(false)}
+    >
+      <div aria-controls="availability-menu" aria-haspopup="true" role="button">
+        <Pill
+          label={intl.formatMessage(messages.dropdownLabel, {
+            channelCount: channels.length
+          })}
+          color={dropdownColor}
+          onClick={() => null} // required for dashed border
         />
       </div>
-      <Menu
-        id="availability-menu"
-        anchorEl={anchorEl}
-        keepMounted
-        elevation={8}
-        open={Boolean(anchorEl)}
-        onClose={handleClose}
-        getContentAnchorEl={null}
-        anchorOrigin={{
-          horizontal: "center",
-          vertical: "bottom"
-        }}
-        transformOrigin={{
-          horizontal: "center",
-          vertical: "top"
-        }}
-      >
-        <Typography className={classes.title}>
-          <FormattedMessage
-            defaultMessage="Available in {count} out of {allCount, plural, one {# channel} other {# channels}}"
-            description="product status"
-            values={{
-              allCount: allChannelsCount,
-              count: channels.length
-            }}
+      <Popper anchorEl={anchor.current} open={isPopupOpen} placement={"left"}>
+        <Card elevation={8}>
+          <ChannelsAvailabilityMenuContent
+            pills={mapChannelsToPills(channels)}
           />
-        </Typography>
-        <Hr className={classes.hr} />
-        {channels.map(channelData => {
-          const notPublishedText = intl.formatMessage(
-            {
-              defaultMessage: "Will become available on {date}",
-              description: "product channel publication date"
-            },
-            {
-              date: localizeDate(channelData.publicationDate, "L")
-            }
-          );
-
-          const publishedText = intl.formatMessage(
-            {
-              defaultMessage: "published since {date}",
-              description: "product channel  publication date"
-            },
-            {
-              date: localizeDate(channelData.publicationDate, "L")
-            }
-          );
-
-          return (
-            <MenuItem key={channelData.channel.id} className={classes.menuItem}>
-              <StatusLabel
-                label={channelData.channel.name}
-                status={isActive(channelData) ? "success" : "error"}
-              />
-              <div>
-                <Typography variant="caption" className={classes.caption}>
-                  {channelData.isPublished && channelData.publicationDate
-                    ? publishedText
-                    : channelData.publicationDate && !channelData.isPublished
-                    ? notPublishedText
-                    : channelData.isPublished
-                    ? ""
-                    : intl.formatMessage({
-                        defaultMessage: "hidden",
-                        description: "product channel publication status"
-                      })}
-                </Typography>
-              </div>
-            </MenuItem>
-          );
-        })}
-      </Menu>
+        </Card>
+      </Popper>
     </div>
   );
 };
diff --git a/src/components/ChannelsAvailabilityDropdown/messages.ts b/src/components/ChannelsAvailabilityDropdown/messages.ts
new file mode 100644
index 000000000..835a96545
--- /dev/null
+++ b/src/components/ChannelsAvailabilityDropdown/messages.ts
@@ -0,0 +1,36 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  status: {
+    defaultMessage: "Status",
+    description: "Status label"
+  },
+  channel: {
+    defaultMessage: "Channel",
+    description: "Channel label"
+  },
+  dropdownLabel: {
+    defaultMessage:
+      "{channelCount} {channelCount,plural, =1 {Channel} other {Channels}}",
+    description: "product status title"
+  },
+  noChannels: {
+    defaultMessage: "No channels",
+    description: "dropdown label when there are no channels assigned"
+  }
+});
+
+export const channelStatusMessages = defineMessages({
+  unpublished: {
+    defaultMessage: "Unpublished",
+    description: "Status label when object is unpublished in a channel"
+  },
+  scheduled: {
+    defaultMessage: "Scheduled to publish",
+    description: "Status label when object is scheduled to publish in a channel"
+  },
+  published: {
+    defaultMessage: "Published",
+    description: "Status label when object is published in a channel"
+  }
+});
diff --git a/src/components/ChannelsAvailabilityDropdown/styles.ts b/src/components/ChannelsAvailabilityDropdown/styles.ts
deleted file mode 100644
index 4b7b3151e..000000000
--- a/src/components/ChannelsAvailabilityDropdown/styles.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { makeStyles } from "@saleor/macaw-ui";
-
-export const useStyles = makeStyles(
-  theme => ({
-    caption: {
-      paddingLeft: theme.spacing(2)
-    },
-    hr: {
-      left: theme.spacing(-1),
-      position: "relative",
-      width: `calc(100% + ${theme.spacing(2)}px)`
-    },
-    menuItem: {
-      display: "block"
-    },
-    title: {
-      padding: theme.spacing(1, 2, 1, 2)
-    }
-  }),
-  { name: "ChannelsAvailabilityDropdown" }
-);
diff --git a/src/components/ChannelsAvailabilityDropdown/utils.ts b/src/components/ChannelsAvailabilityDropdown/utils.ts
new file mode 100644
index 000000000..92fa913ee
--- /dev/null
+++ b/src/components/ChannelsAvailabilityDropdown/utils.ts
@@ -0,0 +1,61 @@
+import { CollectionList_collections_edges_node_channelListings } from "@saleor/collections/types/CollectionList";
+import { PillColor } from "@saleor/macaw-ui";
+import { MessageDescriptor } from "react-intl";
+
+import { Pill } from "../ChannelsAvailabilityMenuContent";
+import { channelStatusMessages } from "./messages";
+
+export type CollectionChannels = Pick<
+  CollectionList_collections_edges_node_channelListings,
+  "isPublished" | "publicationDate" | "channel"
+>;
+export type Channels = Pick<
+  CollectionList_collections_edges_node_channelListings,
+  "channel"
+>;
+
+export const isActive = (channelData: CollectionChannels) =>
+  channelData?.isPublished;
+export const isScheduled = (channelData: CollectionChannels) =>
+  channelData?.publicationDate && !channelData?.isPublished;
+
+export const getDropdownColor = (channels: CollectionChannels[]) => {
+  if (channels.some(isActive)) {
+    return "success";
+  }
+  if (channels.some(isScheduled)) {
+    return "warning";
+  }
+  return "error";
+};
+
+export const getChannelAvailabilityColor = (
+  channelData: CollectionChannels
+): PillColor => {
+  if (isActive(channelData)) {
+    return "success";
+  }
+  if (isScheduled(channelData)) {
+    return "warning";
+  }
+  return "error";
+};
+
+export const getChannelAvailabilityLabel = (
+  channelData: CollectionChannels
+): MessageDescriptor => {
+  if (isActive(channelData)) {
+    return channelStatusMessages.published;
+  }
+  if (isScheduled(channelData)) {
+    return channelStatusMessages.scheduled;
+  }
+  return channelStatusMessages.unpublished;
+};
+
+export const mapChannelsToPills = (channelData: CollectionChannels[]): Pill[] =>
+  channelData.map(channel => ({
+    channel: channel.channel,
+    color: getChannelAvailabilityColor(channel),
+    label: getChannelAvailabilityLabel(channel)
+  }));
diff --git a/src/components/ChannelsAvailabilityMenuContent/ChannelsAvailabilityMenuContent.tsx b/src/components/ChannelsAvailabilityMenuContent/ChannelsAvailabilityMenuContent.tsx
new file mode 100644
index 000000000..4d8ea6a02
--- /dev/null
+++ b/src/components/ChannelsAvailabilityMenuContent/ChannelsAvailabilityMenuContent.tsx
@@ -0,0 +1,51 @@
+import { Typography } from "@material-ui/core";
+import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
+import { CollectionList_collections_edges_node_channelListings_channel } from "@saleor/collections/types/CollectionList";
+import { Pill, PillColor } from "@saleor/macaw-ui";
+import ScrollableContent from "@saleor/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ScrollableContent";
+import React from "react";
+import { MessageDescriptor } from "react-intl";
+import { useIntl } from "react-intl";
+
+import { messages } from "../ChannelsAvailabilityDropdown/messages";
+import { useStyles } from "./styles";
+
+export interface ChannelsAvailabilityMenuContentProps {
+  pills: Pill[];
+}
+export interface Pill {
+  channel: CollectionList_collections_edges_node_channelListings_channel;
+  color: PillColor;
+  label: MessageDescriptor;
+}
+
+export const ChannelsAvailabilityMenuContent: React.FC<ChannelsAvailabilityMenuContentProps> = ({
+  pills
+}) => {
+  const intl = useIntl();
+  const classes = useStyles({});
+
+  return (
+    <div className={classes.menuContainer}>
+      <div className={classes.row}>
+        <Typography variant="caption" className={classes.caption}>
+          {intl.formatMessage(messages.channel)}
+        </Typography>
+        <Typography variant="caption" className={classes.caption}>
+          {intl.formatMessage(messages.status)}
+        </Typography>
+      </div>
+      <ScrollableContent>
+        {pills.map(pill => (
+          <div key={pill.channel.id} className={classes.row}>
+            <Typography>{pill.channel.name}</Typography>
+            <HorizontalSpacer spacing={4} />
+            <Pill label={intl.formatMessage(pill.label)} color={pill.color} />
+          </div>
+        ))}
+      </ScrollableContent>
+    </div>
+  );
+};
+ChannelsAvailabilityMenuContent.displayName = "ChannelsAvailabilityMenuContent";
+export default ChannelsAvailabilityMenuContent;
diff --git a/src/components/ChannelsAvailabilityMenuContent/index.ts b/src/components/ChannelsAvailabilityMenuContent/index.ts
new file mode 100644
index 000000000..2cfa10c71
--- /dev/null
+++ b/src/components/ChannelsAvailabilityMenuContent/index.ts
@@ -0,0 +1,2 @@
+export * from "./ChannelsAvailabilityMenuContent";
+export { default } from "./ChannelsAvailabilityMenuContent";
diff --git a/src/components/ChannelsAvailabilityMenuContent/styles.ts b/src/components/ChannelsAvailabilityMenuContent/styles.ts
new file mode 100644
index 000000000..875cc2662
--- /dev/null
+++ b/src/components/ChannelsAvailabilityMenuContent/styles.ts
@@ -0,0 +1,36 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  theme => ({
+    menuContainer: {
+      padding: theme.spacing(2)
+    },
+
+    row: {
+      display: "flex",
+      justifyContent: "space-between",
+
+      "&:not(:last-child)": {
+        marginBottom: theme.spacing(2)
+      }
+    },
+    caption: {
+      textTransform: "uppercase",
+      color: theme.palette.saleor.main[3],
+      fontWeight: 500,
+      letterSpacing: "0.1em"
+    },
+    hr: {
+      left: theme.spacing(-1),
+      position: "relative",
+      width: `calc(100% + ${theme.spacing(2)}px)`
+    },
+    menuItem: {
+      display: "block"
+    },
+    title: {
+      padding: theme.spacing(1, 2, 1, 2)
+    }
+  }),
+  { name: "ChannelsAvailabilityMenuContent" }
+);
diff --git a/src/components/Filter/FilterContent/FilterErrorsList.tsx b/src/components/Filter/FilterContent/FilterErrorsList.tsx
index c91ab3070..1b41591d8 100644
--- a/src/components/Filter/FilterContent/FilterErrorsList.tsx
+++ b/src/components/Filter/FilterContent/FilterErrorsList.tsx
@@ -1,9 +1,7 @@
 import { Typography } from "@material-ui/core";
 import { fade, makeStyles } from "@material-ui/core/styles";
 import InlineAlert from "@saleor/components/Alert/InlineAlert";
-import { useStyles as useDotStyles } from "@saleor/components/StatusLabel";
 import errorTracker from "@saleor/services/errorTracking";
-import classNames from "classnames";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -21,7 +19,12 @@ const useStyles = makeStyles(
     },
     dot: {
       backgroundColor: theme.palette.primary.contrastText,
-      marginRight: theme.spacing(1)
+      marginRight: theme.spacing(1),
+      borderRadius: "100%",
+      height: 8,
+      minHeight: 8,
+      width: 8,
+      minWidth: 8
     },
     itemContainer: {
       display: "flex",
@@ -43,7 +46,6 @@ const FilterErrorsList: React.FC<FilterErrorsListProps> = ({
   errorMessages
 }) => {
   const classes = useStyles({});
-  const dotClasses = useDotStyles({});
   const intl = useIntl();
 
   const getErrorMessage = (code: string) => {
@@ -69,7 +71,7 @@ const FilterErrorsList: React.FC<FilterErrorsListProps> = ({
         <InlineAlert>
           {errors.map(code => (
             <div className={classes.itemContainer} key={code}>
-              <div className={classNames(classes.dot, dotClasses.dot)} />
+              <div className={classes.dot} />
               <Typography className={classes.listItemTitle}>
                 {getErrorMessage(code)}
               </Typography>
diff --git a/src/components/StatusChip/StatusChip.stories.tsx b/src/components/StatusChip/StatusChip.stories.tsx
deleted file mode 100644
index dc1d53c7c..000000000
--- a/src/components/StatusChip/StatusChip.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Decorator from "@saleor/storybook/Decorator";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import StatusChip from "./StatusChip";
-import { StatusType } from "./types";
-
-storiesOf("Generics / Status Chip", module)
-  .addDecorator(Decorator)
-  .add("neutral", () => (
-    <StatusChip label="label" status={StatusType.NEUTRAL} />
-  ))
-  .add("error", () => <StatusChip label="label" status={StatusType.ERROR} />)
-  .add("success", () => (
-    <StatusChip label="label" status={StatusType.SUCCESS} />
-  ))
-  .add("alert", () => <StatusChip label="label" status={StatusType.ALERT} />);
diff --git a/src/components/StatusChip/StatusChip.tsx b/src/components/StatusChip/StatusChip.tsx
deleted file mode 100644
index fb75d31ca..000000000
--- a/src/components/StatusChip/StatusChip.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Typography } from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
-import React from "react";
-
-import { Size } from "../ActionDialog/types";
-import { StatusType } from "./types";
-
-export interface StatusChipProps {
-  status?: StatusType;
-  size?: Size;
-  label?: string;
-}
-
-export const statusChipStyles = {
-  alert: {
-    background: "#FFF4E4"
-  },
-  alertLabel: {
-    color: "#FFB84E"
-  },
-  error: {
-    backgroundColor: "rgba(254, 110, 118, 0.15)"
-  },
-  errorLabel: {
-    color: "#FE6E76"
-  },
-  neutral: {
-    background: "rgba(40, 35, 74, 0.1)"
-  },
-  neutralLabel: {
-    color: "#28234A"
-  },
-  success: {
-    background: "rgba(93, 194, 146, 0.3)"
-  },
-  successLabel: {
-    color: "#5DC292"
-  },
-  lg: {
-    padding: "4px 16px"
-  },
-  lgLabel: {
-    fontSize: "1.5rem"
-  },
-  md: {
-    padding: "4px 16px"
-  },
-  mdLabel: {
-    fontSize: 16
-  }
-};
-
-const useStyles = makeStyles(
-  theme => ({
-    label: {
-      fontWeight: theme.typography.fontWeightBold,
-      textTransform: "uppercase"
-    },
-    root: {
-      borderRadius: 22,
-      display: "inline-block"
-    },
-    ...statusChipStyles
-  }),
-  { name: "StatusChip" }
-);
-
-const StatusChip: React.FC<StatusChipProps> = props => {
-  const { status = StatusType.NEUTRAL, size = "lg", label } = props;
-  const classes = useStyles(props);
-
-  if (!label) {
-    return null;
-  }
-
-  return (
-    <div className={classNames(classes.root, classes[status], classes[size])}>
-      <Typography
-        className={classNames(
-          classes.label,
-          classes[`${status}Label`],
-          classes[`${size}Label`]
-        )}
-      >
-        {label}
-      </Typography>
-    </div>
-  );
-};
-
-export default StatusChip;
diff --git a/src/components/StatusChip/index.ts b/src/components/StatusChip/index.ts
deleted file mode 100644
index d3563e4fb..000000000
--- a/src/components/StatusChip/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StatusChip";
diff --git a/src/components/StatusChip/types.ts b/src/components/StatusChip/types.ts
deleted file mode 100644
index 1f826401b..000000000
--- a/src/components/StatusChip/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export enum StatusType {
-  NEUTRAL = "neutral",
-  ERROR = "error",
-  ALERT = "alert",
-  SUCCESS = "success"
-}
diff --git a/src/components/StatusLabel/StatusLabel.tsx b/src/components/StatusLabel/StatusLabel.tsx
deleted file mode 100644
index 1c210d5f4..000000000
--- a/src/components/StatusLabel/StatusLabel.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Typography } from "@material-ui/core";
-import grey from "@material-ui/core/colors/grey";
-import yellow from "@material-ui/core/colors/yellow";
-import { makeStyles } from "@saleor/macaw-ui";
-import Label from "@saleor/orders/components/OrderHistory/Label";
-import classNames from "classnames";
-import React from "react";
-
-export const useStyles = makeStyles(
-  theme => {
-    const dot = {
-      borderRadius: "100%",
-      height: 8,
-      minHeight: 8,
-      width: 8,
-      minWidth: 8
-    };
-
-    return {
-      dot,
-      container: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center"
-      },
-      containerVertical: {
-        alignItems: "flex-start"
-      },
-      textContainer: {
-        marginLeft: theme.spacing(1),
-        display: "flex",
-        flexDirection: "column",
-        width: "100%"
-      },
-      dotVertical: {
-        marginTop: theme.spacing(1)
-      },
-      alertDot: {
-        backgroundColor: yellow[500],
-        ...dot
-      },
-      errorDot: {
-        backgroundColor: theme.palette.error.main,
-        ...dot
-      },
-      neutralDot: {
-        backgroundColor: grey[300],
-        ...dot
-      },
-      successDot: {
-        backgroundColor: theme.palette.primary.main,
-        ...dot
-      },
-      span: {
-        display: "inline"
-      }
-    };
-  },
-  { name: "StatusLabel" }
-);
-
-export interface StatusLabelProps {
-  label: string | React.ReactNode;
-  status: "success" | "alert" | "neutral" | "error" | undefined;
-  subtitle?: string;
-  className?: string;
-}
-
-const StatusLabel: React.FC<StatusLabelProps> = ({
-  className,
-  label,
-  status,
-  subtitle
-}) => {
-  const classes = useStyles({});
-
-  return (
-    <div
-      className={classNames({
-        [classes.container]: true,
-        [classes.containerVertical]: !!subtitle
-      })}
-    >
-      <div
-        className={classNames({
-          [className]: true,
-          [classes.dotVertical]: !!subtitle,
-          [classes.successDot]: status === "success",
-          [classes.alertDot]: status === "alert",
-          [classes.neutralDot]: status === "neutral",
-          [classes.errorDot]: status === "error"
-        })}
-      ></div>
-      <div className={classes.textContainer}>
-        <Typography>{label}</Typography>
-        {subtitle && <Label text={subtitle} />}
-      </div>
-    </div>
-  );
-};
-
-export default StatusLabel;
diff --git a/src/components/StatusLabel/index.ts b/src/components/StatusLabel/index.ts
deleted file mode 100644
index 277ccdc27..000000000
--- a/src/components/StatusLabel/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./StatusLabel";
-export * from "./StatusLabel";
diff --git a/src/components/StatusLabel/messages.ts b/src/components/StatusLabel/messages.ts
deleted file mode 100644
index 8b9e19047..000000000
--- a/src/components/StatusLabel/messages.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { defineMessages } from "react-intl";
-
-export const statusLabelMessages = defineMessages({
-  active: {
-    defaultMessage: "Active",
-    description: "status label active"
-  },
-  inactive: {
-    defaultMessage: "Inactive",
-    description: "status label inactive"
-  },
-  deactivated: {
-    defaultMessage: "Deactivated",
-    description: "status label deactivated"
-  }
-});
diff --git a/src/customers/components/CustomerOrders/CustomerOrders.tsx b/src/customers/components/CustomerOrders/CustomerOrders.tsx
index efaaa7729..ca54ce5cd 100644
--- a/src/customers/components/CustomerOrders/CustomerOrders.tsx
+++ b/src/customers/components/CustomerOrders/CustomerOrders.tsx
@@ -10,8 +10,7 @@ import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
-import StatusLabel from "@saleor/components/StatusLabel";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { Button, makeStyles, Pill } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -120,8 +119,8 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
                 <TableCell>
                   {maybe(() => order.paymentStatus.status) !== undefined ? (
                     order.paymentStatus.status === null ? null : (
-                      <StatusLabel
-                        status={order.paymentStatus.status}
+                      <Pill
+                        color={order.paymentStatus.status}
                         label={order.paymentStatus.localized}
                       />
                     )
diff --git a/src/discounts/components/DiscountProducts/DiscountProducts.tsx b/src/discounts/components/DiscountProducts/DiscountProducts.tsx
index 9f3e8636c..d32c7f098 100644
--- a/src/discounts/components/DiscountProducts/DiscountProducts.tsx
+++ b/src/discounts/components/DiscountProducts/DiscountProducts.tsx
@@ -27,7 +27,6 @@ export interface SaleProductsProps extends ListProps, ListActions {
   products:
     | SaleDetails_sale_products_edges_node[]
     | VoucherDetails_voucher_products_edges_node[];
-  channelsCount: number;
   onProductAssign: () => void;
   onProductUnassign: (id: string) => void;
 }
@@ -36,7 +35,6 @@ const numberOfColumns = 5;
 
 const DiscountProducts: React.FC<SaleProductsProps> = props => {
   const {
-    channelsCount,
     products,
     disabled,
     pageInfo,
@@ -150,7 +148,6 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
                       "-"
                     ) : product?.channelListings !== undefined ? (
                       <ChannelsAvailabilityDropdown
-                        allChannelsCount={channelsCount}
                         channels={product?.channelListings}
                       />
                     ) : (
diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
index 366ab4f99..e11d0f337 100644
--- a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
+++ b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
@@ -320,7 +320,6 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
                     onRowClick={onProductClick}
                     pageInfo={pageInfo}
                     products={mapEdgesToItems(sale?.products)}
-                    channelsCount={allChannelsCount}
                     isChecked={isChecked}
                     selected={selected}
                     toggle={toggle}
diff --git a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
index e945bd2e2..aaa6d9b84 100644
--- a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
+++ b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
@@ -350,7 +350,6 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                         onRowClick={onProductClick}
                         pageInfo={pageInfo}
                         products={mapEdgesToItems(voucher.products)}
-                        channelsCount={allChannelsCount}
                         isChecked={isChecked}
                         selected={selected}
                         toggle={toggle}
diff --git a/src/misc.ts b/src/misc.ts
index 80d719240..4786b6306 100644
--- a/src/misc.ts
+++ b/src/misc.ts
@@ -9,8 +9,6 @@ import {
 import { IntlShape } from "react-intl";
 
 import { MultiAutocompleteChoiceType } from "./components/MultiAutocompleteSelectField";
-import { StatusType } from "./components/StatusChip/types";
-import { StatusLabelProps } from "./components/StatusLabel";
 import { AddressType, AddressTypeInput } from "./customers/types";
 import {
   commonStatusMessages,
@@ -21,6 +19,7 @@ import { OrderDetails_order_shippingAddress } from "./orders/types/OrderDetails"
 import {
   MutationResultAdditionalProps,
   PartialMutationProviderOutput,
+  StatusType,
   UserError
 } from "./types";
 import {
@@ -81,7 +80,7 @@ export const removeDoubleSlashes = (url: string) =>
 export const transformPaymentStatus = (
   status: string,
   intl: IntlShape
-): { localized: string; status: StatusLabelProps["status"] } => {
+): { localized: string; status: StatusType } => {
   switch (status) {
     case PaymentChargeStatusEnum.PARTIALLY_CHARGED:
       return {
@@ -96,17 +95,17 @@ export const transformPaymentStatus = (
     case PaymentChargeStatusEnum.PARTIALLY_REFUNDED:
       return {
         localized: intl.formatMessage(paymentStatusMessages.partiallyRefunded),
-        status: StatusType.ERROR
+        status: StatusType.INFO
       };
     case PaymentChargeStatusEnum.FULLY_REFUNDED:
       return {
         localized: intl.formatMessage(paymentStatusMessages.refunded),
-        status: StatusType.SUCCESS
+        status: StatusType.INFO
       };
     case PaymentChargeStatusEnum.PENDING:
       return {
         localized: intl.formatMessage(paymentStatusMessages.pending),
-        status: StatusType.NEUTRAL
+        status: StatusType.WARNING
       };
     case PaymentChargeStatusEnum.REFUSED:
       return {
@@ -143,7 +142,7 @@ export const transformOrderStatus = (
     case OrderStatus.PARTIALLY_FULFILLED:
       return {
         localized: intl.formatMessage(orderStatusMessages.partiallyFulfilled),
-        status: StatusType.NEUTRAL
+        status: StatusType.WARNING
       };
     case OrderStatus.UNFULFILLED:
       return {
@@ -158,22 +157,22 @@ export const transformOrderStatus = (
     case OrderStatus.DRAFT:
       return {
         localized: intl.formatMessage(orderStatusMessages.draft),
-        status: StatusType.ERROR
+        status: StatusType.INFO
       };
     case OrderStatus.UNCONFIRMED:
       return {
         localized: intl.formatMessage(orderStatusMessages.unconfirmed),
-        status: StatusType.NEUTRAL
+        status: StatusType.INFO
       };
     case OrderStatus.PARTIALLY_RETURNED:
       return {
         localized: intl.formatMessage(orderStatusMessages.partiallyReturned),
-        status: StatusType.NEUTRAL
+        status: StatusType.INFO
       };
     case OrderStatus.RETURNED:
       return {
         localized: intl.formatMessage(orderStatusMessages.returned),
-        status: StatusType.NEUTRAL
+        status: StatusType.INFO
       };
   }
   return {
diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
index be4a9251c..64755cdf4 100644
--- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
+++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
@@ -7,7 +7,6 @@ import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
 import Metadata, { MetadataFormData } from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
-import PageTitleWithStatusChip from "@saleor/components/PageTitleWithStatusChip";
 import Savebar from "@saleor/components/Savebar";
 import Skeleton from "@saleor/components/Skeleton";
 import { SubmitPromise } from "@saleor/hooks/useForm";
@@ -36,8 +35,8 @@ import OrderFulfilledProductsCard from "../OrderFulfilledProductsCard";
 import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
 import OrderInvoiceList from "../OrderInvoiceList";
 import OrderPayment from "../OrderPayment/OrderPayment";
-import OrderStatusChip from "../OrderStatusChip/OrderStatusChip";
 import OrderUnfulfilledProductsCard from "../OrderUnfulfilledProductsCard";
+import Title from "./Title";
 import { filteredConditionalItems, hasAnyItemsReplaceable } from "./utils";
 
 const useStyles = makeStyles(
@@ -224,11 +223,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
             <PageHeader
               className={classes.header}
               inline
-              title={
-                <PageTitleWithStatusChip title={order?.number}>
-                  <OrderStatusChip order={order} />
-                </PageTitleWithStatusChip>
-              }
+              title={<Title order={order} />}
               cardMenu={<CardMenu outlined menuItems={selectCardMenuItems} />}
             />
             <div className={classes.date}>
diff --git a/src/orders/components/OrderDetailsPage/Title.tsx b/src/orders/components/OrderDetailsPage/Title.tsx
new file mode 100644
index 000000000..377a66abd
--- /dev/null
+++ b/src/orders/components/OrderDetailsPage/Title.tsx
@@ -0,0 +1,48 @@
+import { makeStyles, Pill } from "@saleor/macaw-ui";
+import { transformOrderStatus } from "@saleor/misc";
+import { OrderDetails_order } from "@saleor/orders/types/OrderDetails";
+import React from "react";
+import { useIntl } from "react-intl";
+
+export interface TitleProps {
+  order?: OrderDetails_order;
+}
+
+const useStyles = makeStyles(
+  theme => ({
+    container: {
+      alignItems: "center",
+      display: "flex"
+    },
+    statusContainer: {
+      marginLeft: theme.spacing(2)
+    }
+  }),
+  { name: "OrderDetailsTitle" }
+);
+
+const Title: React.FC<TitleProps> = props => {
+  const intl = useIntl();
+  const classes = useStyles(props);
+  const { order } = props;
+
+  if (!order) {
+    return null;
+  }
+
+  const { localized, status } = transformOrderStatus(order.status, intl);
+
+  return (
+    <div className={classes.container}>
+      {intl.formatMessage(
+        { defaultMessage: "Order #{orderNumber}" },
+        { orderNumber: order?.number }
+      )}
+      <div className={classes.statusContainer}>
+        <Pill label={localized} color={status} />
+      </div>
+    </div>
+  );
+};
+
+export default Title;
diff --git a/src/orders/components/OrderList/OrderList.tsx b/src/orders/components/OrderList/OrderList.tsx
index 35c58d622..3a9eb8e13 100644
--- a/src/orders/components/OrderList/OrderList.tsx
+++ b/src/orders/components/OrderList/OrderList.tsx
@@ -10,10 +10,9 @@ import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
-import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TablePagination from "@saleor/components/TablePagination";
-import { makeStyles } from "@saleor/macaw-ui";
+import { makeStyles, Pill } from "@saleor/macaw-ui";
 import {
   maybe,
   renderCollection,
@@ -52,11 +51,15 @@ const useStyles = makeStyles(
         },
         colTotal: {}
       },
+      pill: {
+        maxWidth: "100%",
+        ...overflowing
+      },
       colCustomer: overflowing,
       colDate: {},
-      colFulfillment: overflowing,
+      colFulfillment: {},
       colNumber: {},
-      colPayment: overflowing,
+      colPayment: {},
       colTotal: {
         textAlign: "right"
       },
@@ -227,8 +230,9 @@ export const OrderList: React.FC<OrderListProps> = props => {
               <TableCell className={classes.colPayment}>
                 {maybe(() => order.paymentStatus.status) !== undefined ? (
                   order.paymentStatus.status === null ? null : (
-                    <StatusLabel
-                      status={order.paymentStatus.status}
+                    <Pill
+                      className={classes.pill}
+                      color={order.paymentStatus.status}
                       label={order.paymentStatus.localized}
                     />
                   )
@@ -238,8 +242,9 @@ export const OrderList: React.FC<OrderListProps> = props => {
               </TableCell>
               <TableCell className={classes.colFulfillment}>
                 {maybe(() => order.status) ? (
-                  <StatusLabel
-                    status={order.status.status}
+                  <Pill
+                    className={classes.pill}
+                    color={order.status.status}
                     label={order.status.localized}
                   />
                 ) : (
diff --git a/src/orders/components/OrderPayment/OrderPayment.tsx b/src/orders/components/OrderPayment/OrderPayment.tsx
index f919bf6fe..c49aadadf 100644
--- a/src/orders/components/OrderPayment/OrderPayment.tsx
+++ b/src/orders/components/OrderPayment/OrderPayment.tsx
@@ -1,10 +1,10 @@
 import { Card, CardContent } from "@material-ui/core";
+import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import { Hr } from "@saleor/components/Hr";
 import Money from "@saleor/components/Money";
 import Skeleton from "@saleor/components/Skeleton";
-import StatusLabel from "@saleor/components/StatusLabel";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { Button, makeStyles, Pill } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -15,7 +15,7 @@ import {
   OrderStatus
 } from "../../../types/globalTypes";
 import { OrderDetails_order } from "../../types/OrderDetails";
-import messages from "./messages";
+import { orderPaymentMessages, paymentButtonMessages } from "./messages";
 import {
   extractOrderGiftCardUsedAmount,
   extractOutstandingBalance,
@@ -38,6 +38,9 @@ const useStyles = makeStyles(
     },
     totalRow: {
       fontWeight: 600
+    },
+    titleContainer: {
+      display: "flex"
     }
   }),
   { name: "OrderPayment" }
@@ -65,10 +68,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
   const canMarkAsPaid = maybe(() => order.actions, []).includes(
     OrderAction.MARK_AS_PAID
   );
-  const payment = transformPaymentStatus(
-    maybe(() => order.paymentStatus),
-    intl
-  );
+  const payment = transformPaymentStatus(order?.paymentStatus, intl);
   const refundedAmount = extractRefundedAmount(order);
   const outstandingBalance = extractOutstandingBalance(order);
   const usedGiftCardAmount = extractOrderGiftCardUsedAmount(order);
@@ -84,10 +84,10 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
 
     if (order.shippingMethodName === null) {
       return order.collectionPointName == null ? (
-        <FormattedMessage {...messages.orderPaymentShippingDoesNotApply} />
+        <FormattedMessage {...orderPaymentMessages.shippingDoesNotApply} />
       ) : (
         <FormattedMessage
-          {...messages.orderPaymentClickAndCollectShippingMethod}
+          {...orderPaymentMessages.clickAndCollectShippingMethod}
         />
       );
     }
@@ -98,20 +98,21 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
     <Card>
       <CardTitle
         title={
-          maybe(() => order.paymentStatus) === undefined ? (
+          !order?.paymentStatus ? (
             <Skeleton />
           ) : (
             <div className={classes.header}>
-              <StatusLabel label={payment.localized} status={payment.status} />
+              <div className={classes.titleContainer}>
+                <FormattedMessage {...orderPaymentMessages.paymentTitle} />
+                <HorizontalSpacer spacing={2} />
+                <Pill label={payment.localized} color={payment.status} />
+              </div>
               {maybe(() => order.status) !== OrderStatus.CANCELED &&
                 (canCapture || canRefund || canVoid || canMarkAsPaid) && (
                   <div>
                     {canCapture && (
                       <Button variant="tertiary" onClick={onCapture}>
-                        <FormattedMessage
-                          defaultMessage="Capture"
-                          description="capture payment, button"
-                        />
+                        <FormattedMessage {...paymentButtonMessages.capture} />
                       </Button>
                     )}
                     {canRefund && (
@@ -120,25 +121,18 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
                         onClick={onRefund}
                         data-test-id="refund-button"
                       >
-                        <FormattedMessage
-                          defaultMessage="Refund"
-                          description="button"
-                        />
+                        <FormattedMessage {...paymentButtonMessages.refund} />
                       </Button>
                     )}
                     {canVoid && (
                       <Button variant="tertiary" onClick={onVoid}>
-                        <FormattedMessage
-                          defaultMessage="Void"
-                          description="void payment, button"
-                        />
+                        <FormattedMessage {...paymentButtonMessages.void} />
                       </Button>
                     )}
                     {canMarkAsPaid && (
                       <Button variant="tertiary" onClick={onMarkAsPaid}>
                         <FormattedMessage
-                          defaultMessage="Mark as paid"
-                          description="order, button"
+                          {...paymentButtonMessages.markAsPaid}
                         />
                       </Button>
                     )}
@@ -153,18 +147,14 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
           <tbody>
             <tr>
               <td>
-                <FormattedMessage
-                  defaultMessage="Subtotal"
-                  description="order subtotal price"
-                />
+                <FormattedMessage {...orderPaymentMessages.subtotal} />
               </td>
               <td>
                 {maybe(() => order.lines) === undefined ? (
                   <Skeleton />
                 ) : (
                   <FormattedMessage
-                    defaultMessage="{quantity} items"
-                    description="ordered products"
+                    {...orderPaymentMessages.itemCount}
                     values={{
                       quantity: order.lines
                         .map(line => line.quantity)
@@ -183,22 +173,15 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
             </tr>
             <tr>
               <td>
-                <FormattedMessage defaultMessage="Taxes" />
+                <FormattedMessage {...orderPaymentMessages.taxes} />
               </td>
               <td>
                 {maybe(() => order.total.tax) === undefined ? (
                   <Skeleton />
                 ) : order.total.tax.amount > 0 ? (
-                  intl.formatMessage({
-                    defaultMessage: "VAT included",
-                    description: "vat included in order price"
-                  })
+                  intl.formatMessage(orderPaymentMessages.vatIncluded)
                 ) : (
-                  intl.formatMessage({
-                    defaultMessage: "does not apply",
-                    description: "vat not included in order price",
-                    id: "orderPaymentVATDoesNotApply"
-                  })
+                  intl.formatMessage(orderPaymentMessages.vatNotIncluded)
                 )}
               </td>
               <td className={classes.textRight}>
@@ -211,10 +194,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
             </tr>
             <tr>
               <td>
-                <FormattedMessage
-                  defaultMessage="Shipping"
-                  description="order shipping method name"
-                />
+                <FormattedMessage {...orderPaymentMessages.shipping} />
               </td>
               <td>{getDeliveryMethodName(order)}</td>
               <td className={classes.textRight}>
@@ -228,22 +208,13 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
             {order?.discounts?.map(discount => (
               <tr>
                 <td>
-                  <FormattedMessage
-                    defaultMessage="Discount"
-                    description="order discount"
-                  />
+                  <FormattedMessage {...orderPaymentMessages.discount} />
                 </td>
                 <td>
                   {discount.type === OrderDiscountType.MANUAL ? (
-                    <FormattedMessage
-                      defaultMessage="Staff added"
-                      description="staff added type order discount"
-                    />
+                    <FormattedMessage {...orderPaymentMessages.staffAdded} />
                   ) : (
-                    <FormattedMessage
-                      defaultMessage="Voucher"
-                      description="voucher type order discount"
-                    />
+                    <FormattedMessage {...orderPaymentMessages.voucher} />
                   )}
                 </td>
                 <td className={classes.textRight}>
@@ -253,10 +224,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
             ))}
             <tr className={classes.totalRow}>
               <td>
-                <FormattedMessage
-                  defaultMessage="Total"
-                  description="order total price"
-                />
+                <FormattedMessage {...orderPaymentMessages.total} />
               </td>
               <td />
               <td className={classes.textRight}>
@@ -278,8 +246,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
               <tr>
                 <td>
                   <FormattedMessage
-                    defaultMessage="Paid with Gift Card"
-                    description="order payment"
+                    {...orderPaymentMessages.paidWithGiftCard}
                   />
                 </td>
                 <td className={classes.textRight}>
@@ -294,10 +261,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
             )}
             <tr>
               <td>
-                <FormattedMessage
-                  defaultMessage="Preauthorized amount"
-                  description="order payment"
-                />
+                <FormattedMessage {...orderPaymentMessages.preauthorized} />
               </td>
               <td className={classes.textRight}>
                 {maybe(() => order.totalAuthorized.amount) === undefined ? (
@@ -309,10 +273,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
             </tr>
             <tr>
               <td>
-                <FormattedMessage
-                  defaultMessage="Captured amount"
-                  description="order payment"
-                />
+                <FormattedMessage {...orderPaymentMessages.captured} />
               </td>
               <td className={classes.textRight}>
                 {maybe(() => order.totalCaptured.amount) === undefined ? (
@@ -324,10 +285,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
             </tr>
             <tr>
               <td>
-                <FormattedMessage
-                  defaultMessage="Refunded amount"
-                  description="order payment"
-                />
+                <FormattedMessage {...orderPaymentMessages.refunded} />
               </td>
               <td className={classes.textRight}>
                 {refundedAmount?.amount === undefined ? (
@@ -339,10 +297,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
             </tr>
             <tr className={classes.totalRow}>
               <td>
-                <FormattedMessage
-                  defaultMessage="Outstanding Balance"
-                  description="order payment"
-                />
+                <FormattedMessage {...orderPaymentMessages.outstanding} />
               </td>
               <td className={classes.textRight}>
                 {outstandingBalance?.amount === undefined ? (
diff --git a/src/orders/components/OrderPayment/messages.ts b/src/orders/components/OrderPayment/messages.ts
index a6e5ecf56..e29bc176c 100644
--- a/src/orders/components/OrderPayment/messages.ts
+++ b/src/orders/components/OrderPayment/messages.ts
@@ -1,14 +1,99 @@
 import { defineMessages } from "react-intl";
 
-const messages = defineMessages({
-  orderPaymentClickAndCollectShippingMethod: {
+export const orderPaymentMessages = defineMessages({
+  clickAndCollectShippingMethod: {
     defaultMessage: "click&collect",
     description: "OrderPayment click&collect shipping method"
   },
-  orderPaymentShippingDoesNotApply: {
+  shippingDoesNotApply: {
     defaultMessage: "does not apply",
     description: "OrderPayment does not require shipping"
+  },
+  paymentTitle: {
+    defaultMessage: "Payment status",
+    description: "Payment card title"
+  },
+  subtotal: {
+    defaultMessage: "Subtotal",
+    description: "order subtotal price"
+  },
+  itemCount: {
+    defaultMessage: "{quantity} items",
+    description: "ordered products"
+  },
+  taxes: {
+    defaultMessage: "Taxes"
+  },
+  vatIncluded: {
+    defaultMessage: "VAT included",
+    description: "vat included in order price"
+  },
+  vatNotIncluded: {
+    defaultMessage: "does not apply",
+    description: "vat not included in order price",
+    id: "orderPaymentVATDoesNotApply"
+  },
+  shipping: {
+    defaultMessage: "Shipping",
+    description: "order shipping method name"
+  },
+  shippingNotApplicable: {
+    defaultMessage: "does not apply",
+    description: "order does not require shipping"
+  },
+  discount: {
+    defaultMessage: "Discount",
+    description: "order discount"
+  },
+  staffAdded: {
+    defaultMessage: "Staff added",
+    description: "staff added type order discount"
+  },
+  voucher: {
+    defaultMessage: "Voucher",
+    description: "voucher type order discount"
+  },
+  total: {
+    defaultMessage: "Total",
+    description: "order total price"
+  },
+  preauthorized: {
+    defaultMessage: "Preauthorized amount",
+    description: "order payment"
+  },
+  captured: {
+    defaultMessage: "Captured amount",
+    description: "order payment"
+  },
+  refunded: {
+    defaultMessage: "Refunded amount",
+    description: "order payment"
+  },
+  outstanding: {
+    defaultMessage: "Outstanding Balance",
+    description: "order payment"
+  },
+  paidWithGiftCard: {
+    defaultMessage: "Paid with Gift Card",
+    description: "order payment"
   }
 });
 
-export default messages;
+export const paymentButtonMessages = defineMessages({
+  capture: {
+    defaultMessage: "Capture",
+    description: "capture payment, button"
+  },
+  refund: {
+    defaultMessage: "Refund",
+    description: "button"
+  },
+  void: {
+    defaultMessage: "Refund",
+    description: "button"
+  },
+  markAsPaid: {
+    defaultMessage: "Mark as paid",
+    description: "order, button"
+  }
+});
diff --git a/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/CardTitle.tsx b/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/CardTitle.tsx
index 4e461eed2..2d932d188 100644
--- a/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/CardTitle.tsx
+++ b/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/CardTitle.tsx
@@ -1,8 +1,7 @@
 import { Typography } from "@material-ui/core";
 import DefaultCardTitle from "@saleor/components/CardTitle";
-import { StatusType } from "@saleor/components/StatusChip/types";
-import StatusLabel from "@saleor/components/StatusLabel";
-import { makeStyles } from "@saleor/macaw-ui";
+import { makeStyles, Pill } from "@saleor/macaw-ui";
+import { StatusType } from "@saleor/types";
 import { FulfillmentStatus } from "@saleor/types/globalTypes";
 import camelCase from "lodash/camelCase";
 import React from "react";
@@ -14,7 +13,8 @@ const useStyles = makeStyles(
   theme => ({
     title: {
       width: "100%",
-      display: "flex"
+      display: "flex",
+      justifyContent: "space-between"
     },
     orderNumber: {
       display: "inline",
@@ -22,6 +22,7 @@ const useStyles = makeStyles(
     },
     warehouseName: {
       float: "right",
+      alignSelf: "center",
       color: theme.palette.text.secondary,
       margin: `auto ${theme.spacing(1)} auto auto`
     }
@@ -89,19 +90,19 @@ const selectStatus = (status: CardTitleStatus) => {
     case FulfillmentStatus.FULFILLED:
       return StatusType.SUCCESS;
     case FulfillmentStatus.REFUNDED:
-      return StatusType.NEUTRAL;
+      return StatusType.INFO;
     case FulfillmentStatus.RETURNED:
-      return StatusType.NEUTRAL;
+      return StatusType.INFO;
     case FulfillmentStatus.REPLACED:
-      return StatusType.NEUTRAL;
+      return StatusType.INFO;
     case FulfillmentStatus.REFUNDED_AND_RETURNED:
-      return StatusType.NEUTRAL;
+      return StatusType.INFO;
     case FulfillmentStatus.WAITING_FOR_APPROVAL:
-      return StatusType.ALERT;
+      return StatusType.WARNING;
     case FulfillmentStatus.CANCELED:
       return StatusType.ERROR;
     default:
-      return StatusType.ALERT;
+      return StatusType.WARNING;
   }
 };
 
@@ -130,36 +131,40 @@ const CardTitle: React.FC<CardTitleProps> = ({
   );
 
   const title = (
-    <div className={classes.title}>
+    <>
       {intl.formatMessage(messageForStatus, {
         fulfillmentName,
         quantity: totalQuantity
       })}
-      <Typography className={classes.orderNumber} variant="body1">
-        {fulfillmentName}
-      </Typography>
-      {!!warehouseName && (
-        <Typography className={classes.warehouseName} variant="caption">
-          <FormattedMessage
-            {...messages.fulfilledFrom}
-            values={{
-              warehouseName
-            }}
-          />
+      {fulfillmentName && (
+        <Typography className={classes.orderNumber} variant="body1">
+          {fulfillmentName}
         </Typography>
       )}
-    </div>
+    </>
   );
 
   return (
     <DefaultCardTitle
       toolbar={toolbar}
       title={
-        withStatus ? (
-          <StatusLabel label={title} status={selectStatus(status)} />
-        ) : (
-          title
-        )
+        <div className={classes.title}>
+          {withStatus ? (
+            <Pill label={title} color={selectStatus(status)} />
+          ) : (
+            title
+          )}
+          {!!warehouseName && (
+            <Typography className={classes.warehouseName} variant="caption">
+              <FormattedMessage
+                {...messages.fulfilledFrom}
+                values={{
+                  warehouseName
+                }}
+              />
+            </Typography>
+          )}
+        </div>
       }
     />
   );
diff --git a/src/orders/components/OrderStatusChip/OrderStatusChip.tsx b/src/orders/components/OrderStatusChip/OrderStatusChip.tsx
deleted file mode 100644
index 643f27877..000000000
--- a/src/orders/components/OrderStatusChip/OrderStatusChip.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import StatusChip from "@saleor/components/StatusChip";
-import { transformOrderStatus } from "@saleor/misc";
-import { OrderDetails_order } from "@saleor/orders/types/OrderDetails";
-import React from "react";
-import { useIntl } from "react-intl";
-
-interface OrderStatusChipProps {
-  order?: OrderDetails_order;
-}
-
-const OrderStatusChip: React.FC<OrderStatusChipProps> = ({ order }) => {
-  const intl = useIntl();
-
-  if (!order) {
-    return null;
-  }
-
-  const { localized, status } = transformOrderStatus(order.status, intl);
-
-  return <StatusChip size="md" status={status} label={localized} />;
-};
-
-export default OrderStatusChip;
diff --git a/src/pages/components/PageList/PageList.tsx b/src/pages/components/PageList/PageList.tsx
index 82ac394b3..b4da48711 100644
--- a/src/pages/components/PageList/PageList.tsx
+++ b/src/pages/components/PageList/PageList.tsx
@@ -8,11 +8,10 @@ import {
 import Checkbox from "@saleor/components/Checkbox";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
-import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
-import { makeStyles } from "@saleor/macaw-ui";
+import { makeStyles, Pill } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import { PageListUrlSortField } from "@saleor/pages/urls";
 import { ListActions, ListProps, SortPage } from "@saleor/types";
@@ -179,7 +178,7 @@ const PageList: React.FC<PageListProps> = props => {
                   <TableCell className={classes.colVisibility}>
                     {maybe<React.ReactNode>(
                       () => (
-                        <StatusLabel
+                        <Pill
                           label={
                             page.isPublished
                               ? intl.formatMessage({
@@ -191,7 +190,7 @@ const PageList: React.FC<PageListProps> = props => {
                                   description: "page status"
                                 })
                           }
-                          status={page.isPublished ? "success" : "error"}
+                          color={page.isPublished ? "success" : "error"}
                         />
                       ),
                       <Skeleton />
diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx
index 82164f3a8..5e2934a01 100644
--- a/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx
+++ b/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx
@@ -1,27 +1,12 @@
-import { Typography } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
-import StatusLabel from "@saleor/components/StatusLabel";
-import { statusLabelMessages } from "@saleor/components/StatusLabel/messages";
+import { Pill } from "@saleor/macaw-ui";
 import { Plugins_plugins_edges_node } from "@saleor/plugins/types/Plugins";
 import { isPluginGlobal } from "@saleor/plugins/views/utils";
 import React from "react";
 import { useIntl } from "react-intl";
 
+import { pluginStatusMessages } from "./messages";
 import { pluginAvailabilityStatusMessages as messages } from "./messages";
-import {
-  getActiveChannelConfigsCount,
-  getAllChannelConfigsCount
-} from "./utils";
-
-const useStyles = makeStyles(
-  () => ({
-    horizontalContainer: {
-      display: "flex",
-      flexDirection: "row"
-    }
-  }),
-  { name: "ChannelStatusLabel" }
-);
+import { getActiveChannelConfigsCount } from "./utils";
 
 interface PluginAvailabilityStatusProps {
   plugin: Plugins_plugins_edges_node;
@@ -30,7 +15,6 @@ interface PluginAvailabilityStatusProps {
 const PluginAvailabilityStatus: React.FC<PluginAvailabilityStatusProps> = ({
   plugin: { globalConfiguration, channelConfigurations }
 }) => {
-  const classes = useStyles({});
   const intl = useIntl();
 
   const isGlobalPlugin = isPluginGlobal(globalConfiguration);
@@ -45,26 +29,21 @@ const PluginAvailabilityStatus: React.FC<PluginAvailabilityStatusProps> = ({
 
   const globalPluginLabel = intl.formatMessage(
     isStatusActive
-      ? statusLabelMessages.active
-      : statusLabelMessages.deactivated
+      ? pluginStatusMessages.active
+      : pluginStatusMessages.deactivated
   );
 
   return (
-    <StatusLabel
+    <Pill
       label={
-        isGlobalPlugin ? (
-          globalPluginLabel
-        ) : (
-          <div className={classes.horizontalContainer}>
-            <Typography>
-              {`${intl.formatMessage(messages.channelTitle, {
-                activeChannelsCount
-              })}/${getAllChannelConfigsCount(channelConfigurations)}`}
-            </Typography>
-          </div>
-        )
+        isGlobalPlugin
+          ? globalPluginLabel
+          : intl.formatMessage(messages.channelTitle, {
+              activeChannelsCount
+            })
       }
-      status={isStatusActive ? "success" : "error"}
+      color={isStatusActive ? "success" : "error"}
+      onClick={() => null} // required for dashed border
     />
   );
 };
diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx
deleted file mode 100644
index a9aea82c0..000000000
--- a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { CardContent, Divider, Typography } from "@material-ui/core";
-import CardSpacer from "@saleor/components/CardSpacer";
-import CollectionWithDividers from "@saleor/components/CollectionWithDividers";
-import StatusLabel from "@saleor/components/StatusLabel";
-import { statusLabelMessages } from "@saleor/components/StatusLabel/messages";
-import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment";
-import { makeStyles } from "@saleor/macaw-ui";
-import React from "react";
-import { useIntl } from "react-intl";
-
-import { channelConfigPluginMessages as messages } from "../messages";
-import {
-  getActiveChannelConfigsCount,
-  getAllChannelConfigsCount
-} from "../utils";
-import ScrollableContent from "./ScrollableContent";
-
-const useStyles = makeStyles(
-  theme => ({
-    itemContainer: {
-      padding: theme.spacing(0, 4)
-    }
-  }),
-  { name: "ChannelConfigPluginPopupBody" }
-);
-
-interface ChannelConfigPluginPopupBodyProps {
-  plugin: PluginBaseFragment;
-}
-
-const ChannelConfigPluginPopupBody: React.FC<ChannelConfigPluginPopupBodyProps> = ({
-  plugin: { channelConfigurations }
-}) => {
-  const intl = useIntl();
-  const classes = useStyles({});
-
-  return (
-    <>
-      <CardContent>
-        <Typography>
-          {intl.formatMessage(messages.title, {
-            allChannelsCount: getAllChannelConfigsCount(channelConfigurations),
-            activeChannelsCount: getActiveChannelConfigsCount(
-              channelConfigurations
-            )
-          })}
-        </Typography>
-      </CardContent>
-      <Divider />
-      <ScrollableContent>
-        <CardSpacer />
-        <CollectionWithDividers
-          collection={channelConfigurations}
-          DividerComponent={CardSpacer}
-          renderItem={({ channel, active }) => (
-            <div className={classes.itemContainer}>
-              <StatusLabel
-                key={channel.id}
-                label={channel.name}
-                status={active ? "success" : "error"}
-                subtitle={intl.formatMessage(
-                  active
-                    ? statusLabelMessages.active
-                    : statusLabelMessages.inactive
-                )}
-              />
-            </div>
-          )}
-        />
-        <CardSpacer />
-      </ScrollableContent>
-    </>
-  );
-};
-
-export default ChannelConfigPluginPopupBody;
diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx
index f8f763aa0..79d305cf8 100644
--- a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx
+++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx
@@ -1,12 +1,12 @@
 import { CardContent, Typography } from "@material-ui/core";
 import CardSpacer from "@saleor/components/CardSpacer";
-import StatusLabel from "@saleor/components/StatusLabel";
-import { statusLabelMessages } from "@saleor/components/StatusLabel/messages";
 import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment";
+import { Pill } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import { globalConfigPluginMessages as messages } from "../messages";
+import { pluginStatusMessages } from "../messages";
 
 interface GlobalConfigPluginPopupBodyProps {
   plugin: PluginBaseFragment;
@@ -28,10 +28,12 @@ const GlobalConfigPluginPopupBody: React.FC<GlobalConfigPluginPopupBodyProps> =
           {intl.formatMessage(messages.description)}
         </Typography>
         <CardSpacer />
-        <StatusLabel
-          status={active ? "success" : "error"}
+        <Pill
+          color={active ? "success" : "error"}
           label={intl.formatMessage(
-            active ? statusLabelMessages.active : statusLabelMessages.inactive
+            active
+              ? pluginStatusMessages.active
+              : pluginStatusMessages.deactivated
           )}
         />
       </CardContent>
diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx
index cbf437e07..f7669bef9 100644
--- a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx
+++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx
@@ -1,16 +1,17 @@
 import { Card, Popper } from "@material-ui/core";
+import ChannelsAvailabilityMenuContent from "@saleor/components/ChannelsAvailabilityMenuContent";
 import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment";
 import { makeStyles } from "@saleor/macaw-ui";
 import { isPluginGlobal } from "@saleor/plugins/views/utils";
 import React from "react";
 
-import ChannelConfigPluginPopupBody from "./ChannelConfigPluginPopupBody";
+import { mapPluginsToPills } from "../utils";
 import GlobalConfigPluginPopupBody from "./GlobalConfigPluginPopupBody";
 
 const useStyles = makeStyles(
   () => ({
     container: {
-      maxWidth: 300,
+      maxWidth: 500,
       zIndex: 1000
     }
   }),
@@ -43,7 +44,9 @@ const PluginAvailabilityStatusPopup: React.FC<PluginAvailabilityStatusPopupProps
         {isGlobalPlugin ? (
           <GlobalConfigPluginPopupBody plugin={plugin} />
         ) : (
-          <ChannelConfigPluginPopupBody plugin={plugin} />
+          <ChannelsAvailabilityMenuContent
+            pills={mapPluginsToPills(plugin.channelConfigurations)}
+          />
         )}
       </Card>
     </Popper>
diff --git a/src/plugins/components/PluginsList/messages.ts b/src/plugins/components/PluginsList/messages.ts
index 6fe8c7e73..d6ea9cc70 100644
--- a/src/plugins/components/PluginsList/messages.ts
+++ b/src/plugins/components/PluginsList/messages.ts
@@ -2,7 +2,8 @@ import { defineMessages } from "react-intl";
 
 export const pluginAvailabilityStatusMessages = defineMessages({
   channelTitle: {
-    defaultMessage: "Active in {activeChannelsCount}",
+    defaultMessage:
+      "{activeChannelsCount,plural, =0 {Deactivated} other {Active in {activeChannelsCount}}}",
     description: "plugin channel availability status title"
   }
 });
@@ -54,3 +55,14 @@ export const pluginChannelConfigurationCellMessages = defineMessages({
     id: "pluginChannelConfigurationCellMessages per channel"
   }
 });
+
+export const pluginStatusMessages = defineMessages({
+  active: {
+    defaultMessage: "Active",
+    description: "status label active"
+  },
+  deactivated: {
+    defaultMessage: "Deactivated",
+    description: "status label deactivated"
+  }
+});
diff --git a/src/plugins/components/PluginsList/utils.ts b/src/plugins/components/PluginsList/utils.ts
index 15e60023d..dfd261b35 100644
--- a/src/plugins/components/PluginsList/utils.ts
+++ b/src/plugins/components/PluginsList/utils.ts
@@ -1,4 +1,9 @@
+import { Pill } from "@saleor/components/ChannelsAvailabilityMenuContent";
 import { PluginConfigurationBaseFragment } from "@saleor/fragments/types/PluginConfigurationBaseFragment";
+import { PillColor } from "@saleor/macaw-ui";
+import { MessageDescriptor } from "react-intl";
+
+import { pluginStatusMessages } from "./messages";
 
 export const getAllChannelConfigsCount = (
   channelConfigurations: PluginConfigurationBaseFragment[]
@@ -7,3 +12,22 @@ export const getAllChannelConfigsCount = (
 export const getActiveChannelConfigsCount = (
   channelConfigurations: PluginConfigurationBaseFragment[]
 ) => channelConfigurations?.filter(({ active }) => !!active).length;
+
+export const getPluginStatusLabel = (
+  channelData: PluginConfigurationBaseFragment
+): MessageDescriptor =>
+  channelData.active
+    ? pluginStatusMessages.active
+    : pluginStatusMessages.deactivated;
+export const getPluginStatusColor = (
+  channelData: PluginConfigurationBaseFragment
+): PillColor => (channelData.active ? "success" : "error");
+
+export const mapPluginsToPills = (
+  channelConfigurations: PluginConfigurationBaseFragment[]
+): Pill[] =>
+  channelConfigurations.map(channel => ({
+    channel: channel.channel,
+    color: getPluginStatusColor(channel),
+    label: getPluginStatusLabel(channel)
+  }));
diff --git a/src/plugins/components/PluginsListPage/filters.ts b/src/plugins/components/PluginsListPage/filters.ts
index e2eaa73e3..ee70e5001 100644
--- a/src/plugins/components/PluginsListPage/filters.ts
+++ b/src/plugins/components/PluginsListPage/filters.ts
@@ -1,5 +1,4 @@
 import { IFilter, IFilterElement } from "@saleor/components/Filter";
-import { statusLabelMessages } from "@saleor/components/StatusLabel/messages";
 import { sectionNames } from "@saleor/intl";
 import { AutocompleteFilterOpts, FilterOpts } from "@saleor/types";
 import { PluginConfigurationType } from "@saleor/types/globalTypes";
@@ -10,7 +9,10 @@ import {
 } from "@saleor/utils/filters/fields";
 import { defineMessages, IntlShape } from "react-intl";
 
-import { pluginChannelConfigurationCellMessages } from "../PluginsList/messages";
+import {
+  pluginChannelConfigurationCellMessages,
+  pluginStatusMessages
+} from "../PluginsList/messages";
 
 export enum PluginFilterKeys {
   active = "active",
@@ -58,8 +60,8 @@ export function createFilterStructure(
             intl.formatMessage(messages.channelStatusSectionSubtitle),
             opts.isActive.value,
             {
-              negative: intl.formatMessage(statusLabelMessages.inactive),
-              positive: intl.formatMessage(statusLabelMessages.active)
+              negative: intl.formatMessage(pluginStatusMessages.deactivated),
+              positive: intl.formatMessage(pluginStatusMessages.active)
             }
           )
         },
diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx
index 6892f1758..06c72e9fa 100644
--- a/src/products/components/ProductList/ProductList.tsx
+++ b/src/products/components/ProductList/ProductList.tsx
@@ -5,8 +5,11 @@ import {
   TableRow,
   Typography
 } from "@material-ui/core";
-import AvailabilityStatusLabel from "@saleor/components/AvailabilityStatusLabel";
 import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown";
+import {
+  getChannelAvailabilityColor,
+  getChannelAvailabilityLabel
+} from "@saleor/components/ChannelsAvailabilityDropdown/utils";
 import Checkbox from "@saleor/components/Checkbox";
 import Date from "@saleor/components/Date";
 import MoneyRange from "@saleor/components/MoneyRange";
@@ -20,7 +23,7 @@ import TablePagination from "@saleor/components/TablePagination";
 import TooltipTableCellHeader from "@saleor/components/TooltipTableCellHeader";
 import { commonTooltipMessages } from "@saleor/components/TooltipTableCellHeader/messages";
 import { ProductListColumns } from "@saleor/config";
-import { makeStyles } from "@saleor/macaw-ui";
+import { makeStyles, Pill } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import {
   getAttributeIdFromColumnValue,
@@ -39,7 +42,7 @@ import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { columnsMessages, messages } from "./messages";
+import { columnsMessages } from "./messages";
 
 const useStyles = makeStyles(
   theme => ({
@@ -116,13 +119,11 @@ interface ProductListProps
   gridAttributes: GridAttributes_grid_edges_node[];
   products: ProductList_products_edges_node[];
   loading: boolean;
-  channelsCount: number;
 }
 
 export const ProductList: React.FC<ProductListProps> = props => {
   const {
     activeAttributeSortId,
-    channelsCount,
     settings,
     disabled,
     isChecked,
@@ -397,20 +398,19 @@ export const ProductList: React.FC<ProductListProps> = props => {
                         !!product?.channelListings?.length
                       }
                     >
-                      {(!product && <Skeleton />) ||
-                        (!product?.channelListings?.length && "-") ||
-                        (product?.channelListings !== undefined && channel ? (
-                          <AvailabilityStatusLabel
-                            channel={channel}
-                            messages={messages}
+                      {(product &&
+                        (channel ? (
+                          <Pill
+                            label={intl.formatMessage(
+                              getChannelAvailabilityLabel(channel)
+                            )}
+                            color={getChannelAvailabilityColor(channel)}
                           />
                         ) : (
                           <ChannelsAvailabilityDropdown
-                            allChannelsCount={channelsCount}
                             channels={product?.channelListings}
-                            showStatus
                           />
-                        ))}
+                        ))) ?? <Skeleton />}
                     </TableCell>
                   </DisplayColumn>
                   {gridAttributesFromSettings.map(gridAttribute => (
diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx
index 3321f4718..b8e5a0073 100644
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@@ -245,7 +245,6 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
           loading={loading}
           gridAttributes={gridAttributes}
           settings={settings}
-          channelsCount={channelsCount}
           selectedChannelId={selectedChannelId}
           onUpdateListSettings={onUpdateListSettings}
           filterDependency={filterDependency}
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 94e004ec5..5a82d0261 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -5212,22 +5212,15 @@ exports[`Storyshots Generics / ChannelsAvailabilityDropdown default 1`] = `
       aria-haspopup="true"
       role="button"
     >
-      <div
-        class="StatusLabel-container-id"
+      <button
+        class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
       >
-        <div
-          class="undefined StatusLabel-errorDot-id"
-        />
-        <div
-          class="StatusLabel-textContainer-id"
+        <span
+          class="MuiChip-label-id Pill-label-id"
         >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            3/6 channels
-          </div>
-        </div>
-      </div>
+          3 Channels
+        </span>
+      </button>
     </div>
   </div>
 </div>
@@ -15288,166 +15281,6 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
 </div>
 `;
 
-exports[`Storyshots Generics / Status Chip alert 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="StatusChip-root-id StatusChip-alert-id StatusChip-lg-id"
-  >
-    <div
-      class="MuiTypography-root-id StatusChip-label-id StatusChip-alertLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
-    >
-      label
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Status Chip error 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="StatusChip-root-id StatusChip-error-id StatusChip-lg-id"
-  >
-    <div
-      class="MuiTypography-root-id StatusChip-label-id StatusChip-errorLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
-    >
-      label
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Status Chip neutral 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="StatusChip-root-id StatusChip-neutral-id StatusChip-lg-id"
-  >
-    <div
-      class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
-    >
-      label
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Status Chip success 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="StatusChip-root-id StatusChip-success-id StatusChip-lg-id"
-  >
-    <div
-      class="MuiTypography-root-id StatusChip-label-id StatusChip-successLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
-    >
-      label
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / StatusLabel when error 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="StatusLabel-container-id"
-      >
-        <div
-          class="undefined StatusLabel-errorDot-id"
-        />
-        <div
-          class="StatusLabel-textContainer-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Example label
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / StatusLabel when neutral 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="StatusLabel-container-id"
-      >
-        <div
-          class="undefined StatusLabel-neutralDot-id"
-        />
-        <div
-          class="StatusLabel-textContainer-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Example label
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / StatusLabel when success 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="StatusLabel-container-id"
-      >
-        <div
-          class="undefined StatusLabel-successDot-id"
-        />
-        <div
-          class="StatusLabel-textContainer-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Example label
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Storyshots Generics / Table header ascending 1`] = `
 <div
   style="padding:24px"
@@ -51641,22 +51474,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                           aria-haspopup="true"
                           role="button"
                         >
-                          <div
-                            class="StatusLabel-container-id"
+                          <button
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                           >
-                            <div
-                              class="undefined"
-                            />
-                            <div
-                              class="StatusLabel-textContainer-id"
+                            <span
+                              class="MuiChip-label-id Pill-label-id"
                             >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                2/2 channels
-                              </div>
-                            </div>
-                          </div>
+                              2 Channels
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </td>
@@ -51761,22 +51587,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                           aria-haspopup="true"
                           role="button"
                         >
-                          <div
-                            class="StatusLabel-container-id"
+                          <button
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                           >
-                            <div
-                              class="undefined"
-                            />
-                            <div
-                              class="StatusLabel-textContainer-id"
+                            <span
+                              class="MuiChip-label-id Pill-label-id"
                             >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                2/2 channels
-                              </div>
-                            </div>
-                          </div>
+                              2 Channels
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </td>
@@ -51881,22 +51700,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                           aria-haspopup="true"
                           role="button"
                         >
-                          <div
-                            class="StatusLabel-container-id"
+                          <button
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                           >
-                            <div
-                              class="undefined"
-                            />
-                            <div
-                              class="StatusLabel-textContainer-id"
+                            <span
+                              class="MuiChip-label-id Pill-label-id"
                             >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                2/2 channels
-                              </div>
-                            </div>
-                          </div>
+                              2 Channels
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </td>
@@ -52001,22 +51813,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                           aria-haspopup="true"
                           role="button"
                         >
-                          <div
-                            class="StatusLabel-container-id"
+                          <button
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                           >
-                            <div
-                              class="undefined"
-                            />
-                            <div
-                              class="StatusLabel-textContainer-id"
+                            <span
+                              class="MuiChip-label-id Pill-label-id"
                             >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                2/2 channels
-                              </div>
-                            </div>
-                          </div>
+                              2 Channels
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </td>
@@ -53145,22 +52950,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                           aria-haspopup="true"
                           role="button"
                         >
-                          <div
-                            class="StatusLabel-container-id"
+                          <button
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                           >
-                            <div
-                              class="undefined"
-                            />
-                            <div
-                              class="StatusLabel-textContainer-id"
+                            <span
+                              class="MuiChip-label-id Pill-label-id"
                             >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                2/2 channels
-                              </div>
-                            </div>
-                          </div>
+                              2 Channels
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </td>
@@ -53265,22 +53063,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                           aria-haspopup="true"
                           role="button"
                         >
-                          <div
-                            class="StatusLabel-container-id"
+                          <button
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                           >
-                            <div
-                              class="undefined"
-                            />
-                            <div
-                              class="StatusLabel-textContainer-id"
+                            <span
+                              class="MuiChip-label-id Pill-label-id"
                             >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                2/2 channels
-                              </div>
-                            </div>
-                          </div>
+                              2 Channels
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </td>
@@ -53385,22 +53176,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                           aria-haspopup="true"
                           role="button"
                         >
-                          <div
-                            class="StatusLabel-container-id"
+                          <button
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                           >
-                            <div
-                              class="undefined"
-                            />
-                            <div
-                              class="StatusLabel-textContainer-id"
+                            <span
+                              class="MuiChip-label-id Pill-label-id"
                             >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                2/2 channels
-                              </div>
-                            </div>
-                          </div>
+                              2 Channels
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </td>
@@ -53505,22 +53289,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                           aria-haspopup="true"
                           role="button"
                         >
-                          <div
-                            class="StatusLabel-container-id"
+                          <button
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                           >
-                            <div
-                              class="undefined"
-                            />
-                            <div
-                              class="StatusLabel-textContainer-id"
+                            <span
+                              class="MuiChip-label-id Pill-label-id"
                             >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                2/2 channels
-                              </div>
-                            </div>
-                          </div>
+                              2 Channels
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </td>
@@ -56117,20 +55894,13 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                 data-test-id="availability"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpublished
-                    </div>
-                  </div>
+                    Unpublished
+                  </span>
                 </div>
               </td>
             </tr>
@@ -56197,22 +55967,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                     aria-haspopup="true"
                     role="button"
                   >
-                    <div
-                      class="StatusLabel-container-id"
+                    <button
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
                     >
-                      <div
-                        class="undefined StatusLabel-errorDot-id"
-                      />
-                      <div
-                        class="StatusLabel-textContainer-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          1/2 channels
-                        </div>
-                      </div>
-                    </div>
+                        1 Channel
+                      </span>
+                    </button>
                   </div>
                 </div>
               </td>
@@ -56280,22 +56043,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                     aria-haspopup="true"
                     role="button"
                   >
-                    <div
-                      class="StatusLabel-container-id"
+                    <button
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
                     >
-                      <div
-                        class="undefined StatusLabel-errorDot-id"
-                      />
-                      <div
-                        class="StatusLabel-textContainer-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          1/2 channels
-                        </div>
-                      </div>
-                    </div>
+                        1 Channel
+                      </span>
+                    </button>
                   </div>
                 </div>
               </td>
@@ -56363,22 +56119,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                     aria-haspopup="true"
                     role="button"
                   >
-                    <div
-                      class="StatusLabel-container-id"
+                    <button
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
                     >
-                      <div
-                        class="undefined StatusLabel-errorDot-id"
-                      />
-                      <div
-                        class="StatusLabel-textContainer-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          1/2 channels
-                        </div>
-                      </div>
-                    </div>
+                        1 Channel
+                      </span>
+                    </button>
                   </div>
                 </div>
               </td>
@@ -56446,22 +56195,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                     aria-haspopup="true"
                     role="button"
                   >
-                    <div
-                      class="StatusLabel-container-id"
+                    <button
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
                     >
-                      <div
-                        class="undefined StatusLabel-errorDot-id"
-                      />
-                      <div
-                        class="StatusLabel-textContainer-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          1/2 channels
-                        </div>
-                      </div>
-                    </div>
+                        1 Channel
+                      </span>
+                    </button>
                   </div>
                 </div>
               </td>
@@ -56529,22 +56271,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                     aria-haspopup="true"
                     role="button"
                   >
-                    <div
-                      class="StatusLabel-container-id"
+                    <button
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
                     >
-                      <div
-                        class="undefined StatusLabel-errorDot-id"
-                      />
-                      <div
-                        class="StatusLabel-textContainer-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          1/2 channels
-                        </div>
-                      </div>
-                    </div>
+                        1 Channel
+                      </span>
+                    </button>
                   </div>
                 </div>
               </td>
@@ -66775,20 +66510,13 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-container-id"
+                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                       >
-                        <div
-                          class="undefined StatusLabel-successDot-id"
-                        />
-                        <div
-                          class="StatusLabel-textContainer-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Fully paid
-                          </div>
-                        </div>
+                          Fully paid
+                        </span>
                       </div>
                     </td>
                     <td
@@ -67537,20 +67265,13 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-container-id"
+                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                       >
-                        <div
-                          class="undefined StatusLabel-successDot-id"
-                        />
-                        <div
-                          class="StatusLabel-textContainer-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Fully paid
-                          </div>
-                        </div>
+                          Fully paid
+                        </span>
                       </div>
                     </td>
                     <td
@@ -68354,20 +68075,13 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-container-id"
+                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                       >
-                        <div
-                          class="undefined StatusLabel-successDot-id"
-                        />
-                        <div
-                          class="StatusLabel-textContainer-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Fully paid
-                          </div>
-                        </div>
+                          Fully paid
+                        </span>
                       </div>
                     </td>
                     <td
@@ -69813,20 +69527,13 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-container-id"
+                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                       >
-                        <div
-                          class="undefined StatusLabel-successDot-id"
-                        />
-                        <div
-                          class="StatusLabel-textContainer-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Fully paid
-                          </div>
-                        </div>
+                          Fully paid
+                        </span>
                       </div>
                     </td>
                     <td
@@ -70569,20 +70276,13 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-container-id"
+                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                       >
-                        <div
-                          class="undefined StatusLabel-successDot-id"
-                        />
-                        <div
-                          class="StatusLabel-textContainer-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Fully paid
-                          </div>
-                        </div>
+                          Fully paid
+                        </span>
                       </div>
                     </td>
                     <td
@@ -71325,20 +71025,13 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-container-id"
+                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                       >
-                        <div
-                          class="undefined StatusLabel-successDot-id"
-                        />
-                        <div
-                          class="StatusLabel-textContainer-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Fully paid
-                          </div>
-                        </div>
+                          Fully paid
+                        </span>
                       </div>
                     </td>
                     <td
@@ -72059,20 +71752,13 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-container-id"
+                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                       >
-                        <div
-                          class="undefined StatusLabel-successDot-id"
-                        />
-                        <div
-                          class="StatusLabel-textContainer-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Fully paid
-                          </div>
-                        </div>
+                          Fully paid
+                        </span>
                       </div>
                     </td>
                     <td
@@ -72821,20 +72507,13 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <div
-                        class="StatusLabel-container-id"
+                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                       >
-                        <div
-                          class="undefined StatusLabel-successDot-id"
-                        />
-                        <div
-                          class="StatusLabel-textContainer-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Fully paid
-                          </div>
-                        </div>
+                          Fully paid
+                        </span>
                       </div>
                     </td>
                     <td
@@ -85582,22 +85261,15 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           aria-haspopup="true"
                           role="button"
                         >
-                          <div
-                            class="StatusLabel-container-id"
+                          <button
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                           >
-                            <div
-                              class="undefined"
-                            />
-                            <div
-                              class="StatusLabel-textContainer-id"
+                            <span
+                              class="MuiChip-label-id Pill-label-id"
                             >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                1/7 channels
-                              </div>
-                            </div>
-                          </div>
+                              1 Channel
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </td>
@@ -85702,22 +85374,15 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           aria-haspopup="true"
                           role="button"
                         >
-                          <div
-                            class="StatusLabel-container-id"
+                          <button
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                           >
-                            <div
-                              class="undefined"
-                            />
-                            <div
-                              class="StatusLabel-textContainer-id"
+                            <span
+                              class="MuiChip-label-id Pill-label-id"
                             >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                1/7 channels
-                              </div>
-                            </div>
-                          </div>
+                              1 Channel
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </td>
@@ -85822,22 +85487,15 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           aria-haspopup="true"
                           role="button"
                         >
-                          <div
-                            class="StatusLabel-container-id"
+                          <button
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                           >
-                            <div
-                              class="undefined"
-                            />
-                            <div
-                              class="StatusLabel-textContainer-id"
+                            <span
+                              class="MuiChip-label-id Pill-label-id"
                             >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                1/7 channels
-                              </div>
-                            </div>
-                          </div>
+                              1 Channel
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </td>
@@ -85942,22 +85600,15 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           aria-haspopup="true"
                           role="button"
                         >
-                          <div
-                            class="StatusLabel-container-id"
+                          <button
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                           >
-                            <div
-                              class="undefined"
-                            />
-                            <div
-                              class="StatusLabel-textContainer-id"
+                            <span
+                              class="MuiChip-label-id Pill-label-id"
                             >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                1/7 channels
-                              </div>
-                            </div>
-                          </div>
+                              1 Channel
+                            </span>
+                          </button>
                         </div>
                       </div>
                     </td>
@@ -111067,27 +110718,20 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+              class="OrderDetailsTitle-container-id"
             >
+              Order #9
               <div
-                class="ExtendedPageHeader-titleRow-id"
-              >
-                9
-              </div>
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+                class="OrderDetailsTitle-statusContainer-id"
               >
                 <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-                <div
-                  class="StatusChip-root-id StatusChip-error-id StatusChip-md-id"
+                  class="MuiChip-root-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="MuiTypography-root-id StatusChip-label-id StatusChip-errorLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
                     Cancelled
-                  </div>
+                  </span>
                 </div>
               </div>
             </div>
@@ -111163,26 +110807,16 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-alertDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-warning-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="CardTitle-title-id"
-                        >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          />
-                        </div>
-                      </div>
+                        Unfulfilled
+                      </span>
                     </div>
                   </div>
                 </span>
@@ -111329,33 +110963,26 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-errorDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-error-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Unfulfilled
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-2
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from Be stocked
-                          </div>
+                          #9-2
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from Be stocked
                     </div>
                   </div>
                 </span>
@@ -111502,33 +111129,26 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-errorDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-error-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Unfulfilled
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-1
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from C our wares
-                          </div>
+                          #9-1
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from C our wares
                     </div>
                   </div>
                 </span>
@@ -111709,19 +111329,20 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                     class="OrderPayment-header-id"
                   >
                     <div
-                      class="StatusLabel-container-id"
+                      class="OrderPayment-titleContainer-id"
                     >
+                      Payment status
                       <div
-                        class="undefined StatusLabel-errorDot-id"
+                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                       />
                       <div
-                        class="StatusLabel-textContainer-id"
+                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
                           Unpaid
-                        </div>
+                        </span>
                       </div>
                     </div>
                   </div>
@@ -112908,27 +112529,20 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+              class="OrderDetailsTitle-container-id"
             >
+              Order #9
               <div
-                class="ExtendedPageHeader-titleRow-id"
-              >
-                9
-              </div>
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+                class="OrderDetailsTitle-statusContainer-id"
               >
                 <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-                <div
-                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
                     Partially fulfilled
-                  </div>
+                  </span>
                 </div>
               </div>
             </div>
@@ -113004,26 +112618,16 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-alertDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-warning-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="CardTitle-title-id"
-                        >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          />
-                        </div>
-                      </div>
+                        Unfulfilled
+                      </span>
                     </div>
                   </div>
                 </span>
@@ -113185,33 +112789,26 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-2
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from Be stocked
-                          </div>
+                          #9-2
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from Be stocked
                     </div>
                   </div>
                 </span>
@@ -113406,33 +113003,26 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-1
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from C our wares
-                          </div>
+                          #9-1
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from C our wares
                     </div>
                   </div>
                 </span>
@@ -113661,19 +113251,20 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                     class="OrderPayment-header-id"
                   >
                     <div
-                      class="StatusLabel-container-id"
+                      class="OrderPayment-titleContainer-id"
                     >
+                      Payment status
                       <div
-                        class="undefined StatusLabel-errorDot-id"
+                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                       />
                       <div
-                        class="StatusLabel-textContainer-id"
+                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
                           Unpaid
-                        </div>
+                        </span>
                       </div>
                     </div>
                     <div>
@@ -113708,7 +113299,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                         <span
                           class="MuiButton-label-id"
                         >
-                          Void
+                          Refund
                         </span>
                       </button>
                       <button
@@ -114939,27 +114530,20 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+              class="OrderDetailsTitle-container-id"
             >
+              Order #9
               <div
-                class="ExtendedPageHeader-titleRow-id"
-              >
-                9
-              </div>
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+                class="OrderDetailsTitle-statusContainer-id"
               >
                 <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-                <div
-                  class="StatusChip-root-id StatusChip-success-id StatusChip-md-id"
+                  class="MuiChip-root-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="MuiTypography-root-id StatusChip-label-id StatusChip-successLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
                     Fulfilled
-                  </div>
+                  </span>
                 </div>
               </div>
             </div>
@@ -115035,26 +114619,16 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-alertDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-warning-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="CardTitle-title-id"
-                        >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          />
-                        </div>
-                      </div>
+                        Unfulfilled
+                      </span>
                     </div>
                   </div>
                 </span>
@@ -115216,33 +114790,26 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-2
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from Be stocked
-                          </div>
+                          #9-2
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from Be stocked
                     </div>
                   </div>
                 </span>
@@ -115437,33 +115004,26 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-1
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from C our wares
-                          </div>
+                          #9-1
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from C our wares
                     </div>
                   </div>
                 </span>
@@ -115692,19 +115252,20 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                     class="OrderPayment-header-id"
                   >
                     <div
-                      class="StatusLabel-container-id"
+                      class="OrderPayment-titleContainer-id"
                     >
+                      Payment status
                       <div
-                        class="undefined StatusLabel-errorDot-id"
+                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                       />
                       <div
-                        class="StatusLabel-textContainer-id"
+                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
                           Unpaid
-                        </div>
+                        </span>
                       </div>
                     </div>
                     <div>
@@ -115739,7 +115300,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                         <span
                           class="MuiButton-label-id"
                         >
-                          Void
+                          Refund
                         </span>
                       </button>
                       <button
@@ -116968,22 +116529,7 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
         >
           <div
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
-          >
-            <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-            >
-              <div
-                class="ExtendedPageHeader-titleRow-id"
-              />
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
-              >
-                <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-              </div>
-            </div>
-          </div>
+          />
           <div>
             <button
               aria-haspopup="true"
@@ -117611,27 +117157,20 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+              class="OrderDetailsTitle-container-id"
             >
+              Order #9
               <div
-                class="ExtendedPageHeader-titleRow-id"
-              >
-                9
-              </div>
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+                class="OrderDetailsTitle-statusContainer-id"
               >
                 <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-                <div
-                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
                     Partially fulfilled
-                  </div>
+                  </span>
                 </div>
               </div>
             </div>
@@ -117707,26 +117246,16 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-alertDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-warning-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="CardTitle-title-id"
-                        >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          />
-                        </div>
-                      </div>
+                        Unfulfilled
+                      </span>
                     </div>
                   </div>
                 </span>
@@ -117888,33 +117417,26 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-2
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from Be stocked
-                          </div>
+                          #9-2
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from Be stocked
                     </div>
                   </div>
                 </span>
@@ -118109,33 +117631,26 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-1
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from C our wares
-                          </div>
+                          #9-1
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from C our wares
                     </div>
                   </div>
                 </span>
@@ -118364,19 +117879,20 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                     class="OrderPayment-header-id"
                   >
                     <div
-                      class="StatusLabel-container-id"
+                      class="OrderPayment-titleContainer-id"
                     >
+                      Payment status
                       <div
-                        class="undefined StatusLabel-errorDot-id"
+                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                       />
                       <div
-                        class="StatusLabel-textContainer-id"
+                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
                           Unpaid
-                        </div>
+                        </span>
                       </div>
                     </div>
                     <div>
@@ -118411,7 +117927,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                         <span
                           class="MuiButton-label-id"
                         >
-                          Void
+                          Refund
                         </span>
                       </button>
                       <button
@@ -119642,27 +119158,20 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+              class="OrderDetailsTitle-container-id"
             >
+              Order #9
               <div
-                class="ExtendedPageHeader-titleRow-id"
-              >
-                9
-              </div>
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+                class="OrderDetailsTitle-statusContainer-id"
               >
                 <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-                <div
-                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
                     Partially fulfilled
-                  </div>
+                  </span>
                 </div>
               </div>
             </div>
@@ -119738,26 +119247,16 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-alertDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-warning-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="CardTitle-title-id"
-                        >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          />
-                        </div>
-                      </div>
+                        Unfulfilled
+                      </span>
                     </div>
                   </div>
                 </span>
@@ -119919,33 +119418,26 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-2
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from Be stocked
-                          </div>
+                          #9-2
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from Be stocked
                     </div>
                   </div>
                 </span>
@@ -120140,33 +119632,26 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-1
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from C our wares
-                          </div>
+                          #9-1
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from C our wares
                     </div>
                   </div>
                 </span>
@@ -120391,71 +119876,12 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                 <span
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
-                  <div
-                    class="OrderPayment-header-id"
+                  <span
+                    class="Skeleton-skeleton-id"
+                    data-test-id="skeleton"
                   >
-                    <div
-                      class="StatusLabel-container-id"
-                    >
-                      <div
-                        class="undefined StatusLabel-errorDot-id"
-                      />
-                      <div
-                        class="StatusLabel-textContainer-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        />
-                      </div>
-                    </div>
-                    <div>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Capture
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="refund-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Void
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Mark as paid
-                        </span>
-                      </button>
-                    </div>
-                  </div>
+                    ‌
+                  </span>
                 </span>
               </div>
             </div>
@@ -121671,27 +121097,20 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+              class="OrderDetailsTitle-container-id"
             >
+              Order #9
               <div
-                class="ExtendedPageHeader-titleRow-id"
-              >
-                9
-              </div>
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+                class="OrderDetailsTitle-statusContainer-id"
               >
                 <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-                <div
-                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
                     Partially fulfilled
-                  </div>
+                  </span>
                 </div>
               </div>
             </div>
@@ -121767,26 +121186,16 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-alertDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-warning-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="CardTitle-title-id"
-                        >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          />
-                        </div>
-                      </div>
+                        Unfulfilled
+                      </span>
                     </div>
                   </div>
                 </span>
@@ -121948,33 +121357,26 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-2
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from Be stocked
-                          </div>
+                          #9-2
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from Be stocked
                     </div>
                   </div>
                 </span>
@@ -122169,33 +121571,26 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-1
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from C our wares
-                          </div>
+                          #9-1
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from C our wares
                     </div>
                   </div>
                 </span>
@@ -122424,19 +121819,20 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                     class="OrderPayment-header-id"
                   >
                     <div
-                      class="StatusLabel-container-id"
+                      class="OrderPayment-titleContainer-id"
                     >
+                      Payment status
                       <div
-                        class="undefined StatusLabel-errorDot-id"
+                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                       />
                       <div
-                        class="StatusLabel-textContainer-id"
+                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
                           Unpaid
-                        </div>
+                        </span>
                       </div>
                     </div>
                     <div>
@@ -122471,7 +121867,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                         <span
                           class="MuiButton-label-id"
                         >
-                          Void
+                          Refund
                         </span>
                       </button>
                       <button
@@ -123694,27 +123090,20 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+              class="OrderDetailsTitle-container-id"
             >
+              Order #9
               <div
-                class="ExtendedPageHeader-titleRow-id"
-              >
-                9
-              </div>
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+                class="OrderDetailsTitle-statusContainer-id"
               >
                 <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-                <div
-                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
                     Partially fulfilled
-                  </div>
+                  </span>
                 </div>
               </div>
             </div>
@@ -123790,26 +123179,16 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-alertDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-warning-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="CardTitle-title-id"
-                        >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          />
-                        </div>
-                      </div>
+                        Unfulfilled
+                      </span>
                     </div>
                   </div>
                 </span>
@@ -123971,33 +123350,26 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-2
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from Be stocked
-                          </div>
+                          #9-2
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from Be stocked
                     </div>
                   </div>
                 </span>
@@ -124192,33 +123564,26 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-1
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from C our wares
-                          </div>
+                          #9-1
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from C our wares
                     </div>
                   </div>
                 </span>
@@ -124447,19 +123812,20 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                     class="OrderPayment-header-id"
                   >
                     <div
-                      class="StatusLabel-container-id"
+                      class="OrderPayment-titleContainer-id"
                     >
+                      Payment status
                       <div
-                        class="undefined StatusLabel-errorDot-id"
+                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                       />
                       <div
-                        class="StatusLabel-textContainer-id"
+                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
                           Unpaid
-                        </div>
+                        </span>
                       </div>
                     </div>
                     <div>
@@ -124494,7 +123860,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                         <span
                           class="MuiButton-label-id"
                         >
-                          Void
+                          Refund
                         </span>
                       </button>
                       <button
@@ -125725,27 +125091,20 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+              class="OrderDetailsTitle-container-id"
             >
+              Order #9
               <div
-                class="ExtendedPageHeader-titleRow-id"
-              >
-                9
-              </div>
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+                class="OrderDetailsTitle-statusContainer-id"
               >
                 <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-                <div
-                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
                     Partially fulfilled
-                  </div>
+                  </span>
                 </div>
               </div>
             </div>
@@ -125821,26 +125180,16 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-alertDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-warning-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="CardTitle-title-id"
-                        >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          />
-                        </div>
-                      </div>
+                        Unfulfilled
+                      </span>
                     </div>
                   </div>
                 </span>
@@ -126002,33 +125351,26 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-2
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from Be stocked
-                          </div>
+                          #9-2
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from Be stocked
                     </div>
                   </div>
                 </span>
@@ -126223,33 +125565,26 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-1
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from C our wares
-                          </div>
+                          #9-1
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from C our wares
                     </div>
                   </div>
                 </span>
@@ -126478,19 +125813,20 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                     class="OrderPayment-header-id"
                   >
                     <div
-                      class="StatusLabel-container-id"
+                      class="OrderPayment-titleContainer-id"
                     >
+                      Payment status
                       <div
-                        class="undefined StatusLabel-successDot-id"
+                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                       />
                       <div
-                        class="StatusLabel-textContainer-id"
+                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
                           Fully paid
-                        </div>
+                        </span>
                       </div>
                     </div>
                     <div>
@@ -126525,7 +125861,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                         <span
                           class="MuiButton-label-id"
                         >
-                          Void
+                          Refund
                         </span>
                       </button>
                       <button
@@ -127756,27 +127092,20 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+              class="OrderDetailsTitle-container-id"
             >
+              Order #9
               <div
-                class="ExtendedPageHeader-titleRow-id"
-              >
-                9
-              </div>
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+                class="OrderDetailsTitle-statusContainer-id"
               >
                 <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-                <div
-                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
                     Partially fulfilled
-                  </div>
+                  </span>
                 </div>
               </div>
             </div>
@@ -127852,26 +127181,16 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-alertDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-warning-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="CardTitle-title-id"
-                        >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          />
-                        </div>
-                      </div>
+                        Unfulfilled
+                      </span>
                     </div>
                   </div>
                 </span>
@@ -128033,33 +127352,26 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-2
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from Be stocked
-                          </div>
+                          #9-2
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from Be stocked
                     </div>
                   </div>
                 </span>
@@ -128254,33 +127566,26 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-1
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from C our wares
-                          </div>
+                          #9-1
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from C our wares
                     </div>
                   </div>
                 </span>
@@ -128509,19 +127814,20 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                     class="OrderPayment-header-id"
                   >
                     <div
-                      class="StatusLabel-container-id"
+                      class="OrderPayment-titleContainer-id"
                     >
+                      Payment status
                       <div
-                        class="undefined StatusLabel-errorDot-id"
+                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                       />
                       <div
-                        class="StatusLabel-textContainer-id"
+                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
                           Unpaid
-                        </div>
+                        </span>
                       </div>
                     </div>
                     <div>
@@ -128556,7 +127862,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                         <span
                           class="MuiButton-label-id"
                         >
-                          Void
+                          Refund
                         </span>
                       </button>
                       <button
@@ -129787,27 +129093,20 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+              class="OrderDetailsTitle-container-id"
             >
+              Order #9
               <div
-                class="ExtendedPageHeader-titleRow-id"
-              >
-                9
-              </div>
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+                class="OrderDetailsTitle-statusContainer-id"
               >
                 <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-                <div
-                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
                     Partially fulfilled
-                  </div>
+                  </span>
                 </div>
               </div>
             </div>
@@ -129883,26 +129182,16 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-alertDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-warning-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="CardTitle-title-id"
-                        >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          />
-                        </div>
-                      </div>
+                        Unfulfilled
+                      </span>
                     </div>
                   </div>
                 </span>
@@ -130064,33 +129353,26 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-2
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from Be stocked
-                          </div>
+                          #9-2
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from Be stocked
                     </div>
                   </div>
                 </span>
@@ -130285,33 +129567,26 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-1
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from C our wares
-                          </div>
+                          #9-1
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from C our wares
                     </div>
                   </div>
                 </span>
@@ -130540,19 +129815,20 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                     class="OrderPayment-header-id"
                   >
                     <div
-                      class="StatusLabel-container-id"
+                      class="OrderPayment-titleContainer-id"
                     >
+                      Payment status
                       <div
-                        class="undefined StatusLabel-errorDot-id"
+                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                       />
                       <div
-                        class="StatusLabel-textContainer-id"
+                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
                           Unpaid
-                        </div>
+                        </span>
                       </div>
                     </div>
                     <div>
@@ -130587,7 +129863,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                         <span
                           class="MuiButton-label-id"
                         >
-                          Void
+                          Refund
                         </span>
                       </button>
                       <button
@@ -131818,27 +131094,20 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+              class="OrderDetailsTitle-container-id"
             >
+              Order #9
               <div
-                class="ExtendedPageHeader-titleRow-id"
-              >
-                9
-              </div>
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+                class="OrderDetailsTitle-statusContainer-id"
               >
                 <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-                <div
-                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
                     Partially fulfilled
-                  </div>
+                  </span>
                 </div>
               </div>
             </div>
@@ -131914,26 +131183,16 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-alertDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-warning-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="CardTitle-title-id"
-                        >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          />
-                        </div>
-                      </div>
+                        Unfulfilled
+                      </span>
                     </div>
                   </div>
                 </span>
@@ -132095,33 +131354,26 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-2
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from Be stocked
-                          </div>
+                          #9-2
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from Be stocked
                     </div>
                   </div>
                 </span>
@@ -132316,33 +131568,26 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-1
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from C our wares
-                          </div>
+                          #9-1
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from C our wares
                     </div>
                   </div>
                 </span>
@@ -132571,19 +131816,20 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                     class="OrderPayment-header-id"
                   >
                     <div
-                      class="StatusLabel-container-id"
+                      class="OrderPayment-titleContainer-id"
                     >
+                      Payment status
                       <div
-                        class="undefined StatusLabel-successDot-id"
+                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                       />
                       <div
-                        class="StatusLabel-textContainer-id"
+                        class="MuiChip-root-id Pill-root-id Pill-info-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
                           Fully refunded
-                        </div>
+                        </span>
                       </div>
                     </div>
                     <div>
@@ -132618,7 +131864,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                         <span
                           class="MuiButton-label-id"
                         >
-                          Void
+                          Refund
                         </span>
                       </button>
                       <button
@@ -133849,27 +133095,20 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+              class="OrderDetailsTitle-container-id"
             >
+              Order #9
               <div
-                class="ExtendedPageHeader-titleRow-id"
-              >
-                9
-              </div>
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+                class="OrderDetailsTitle-statusContainer-id"
               >
                 <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-                <div
-                  class="StatusChip-root-id StatusChip-neutral-id StatusChip-md-id"
+                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
                     Partially fulfilled
-                  </div>
+                  </span>
                 </div>
               </div>
             </div>
@@ -133945,26 +133184,16 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-alertDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-warning-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="CardTitle-title-id"
-                        >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          />
-                        </div>
-                      </div>
+                        Unfulfilled
+                      </span>
                     </div>
                   </div>
                 </span>
@@ -134126,33 +133355,26 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-2
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from Be stocked
-                          </div>
+                          #9-2
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from Be stocked
                     </div>
                   </div>
                 </span>
@@ -134347,33 +133569,26 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-1
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from C our wares
-                          </div>
+                          #9-1
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from C our wares
                     </div>
                   </div>
                 </span>
@@ -134602,19 +133817,20 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                     class="OrderPayment-header-id"
                   >
                     <div
-                      class="StatusLabel-container-id"
+                      class="OrderPayment-titleContainer-id"
                     >
+                      Payment status
                       <div
-                        class="undefined StatusLabel-errorDot-id"
+                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                       />
                       <div
-                        class="StatusLabel-textContainer-id"
+                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
                           Unpaid
-                        </div>
+                        </span>
                       </div>
                     </div>
                     <div>
@@ -134649,7 +133865,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                         <span
                           class="MuiButton-label-id"
                         >
-                          Void
+                          Refund
                         </span>
                       </button>
                       <button
@@ -135880,27 +135096,20 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
             class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
           >
             <div
-              class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+              class="OrderDetailsTitle-container-id"
             >
+              Order #9
               <div
-                class="ExtendedPageHeader-titleRow-id"
-              >
-                9
-              </div>
-              <div
-                class="ExtendedPageHeader-action-id OrderDetailsPageTitleWithStatusChip-container-id"
+                class="OrderDetailsTitle-statusContainer-id"
               >
                 <div
-                  class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                />
-                <div
-                  class="StatusChip-root-id StatusChip-error-id StatusChip-md-id"
+                  class="MuiChip-root-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="MuiTypography-root-id StatusChip-label-id StatusChip-errorLabel-id StatusChip-mdLabel-id MuiTypography-body1-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
                     Unfulfilled
-                  </div>
+                  </span>
                 </div>
               </div>
             </div>
@@ -135976,26 +135185,16 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-alertDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-warning-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
-                        <div
-                          class="CardTitle-title-id"
-                        >
-                          Unfulfilled
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          />
-                        </div>
-                      </div>
+                        Unfulfilled
+                      </span>
                     </div>
                   </div>
                 </span>
@@ -136157,33 +135356,26 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-2
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from Be stocked
-                          </div>
+                          #9-2
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from Be stocked
                     </div>
                   </div>
                 </span>
@@ -136378,33 +135570,26 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="CardTitle-title-id"
                   >
                     <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                      class="MuiChip-root-id Pill-root-id Pill-success-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      <span
+                        class="MuiChip-label-id Pill-label-id"
                       >
+                        Fulfilled (1)
                         <div
-                          class="CardTitle-title-id"
+                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                         >
-                          Fulfilled (1)
-                          <div
-                            class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
-                          >
-                            #9-1
-                          </div>
-                          <div
-                            class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
-                          >
-                            Fulfilled from C our wares
-                          </div>
+                          #9-1
                         </div>
-                      </div>
+                      </span>
+                    </div>
+                    <div
+                      class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
+                    >
+                      Fulfilled from C our wares
                     </div>
                   </div>
                 </span>
@@ -136633,19 +135818,20 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                     class="OrderPayment-header-id"
                   >
                     <div
-                      class="StatusLabel-container-id"
+                      class="OrderPayment-titleContainer-id"
                     >
+                      Payment status
                       <div
-                        class="undefined StatusLabel-errorDot-id"
+                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                       />
                       <div
-                        class="StatusLabel-textContainer-id"
+                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                       >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        <span
+                          class="MuiChip-label-id Pill-label-id"
                         >
                           Unpaid
-                        </div>
+                        </span>
                       </div>
                     </div>
                     <div>
@@ -136680,7 +135866,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                         <span
                           class="MuiButton-label-id"
                         >
-                          Void
+                          Refund
                         </span>
                       </button>
                       <button
@@ -140234,40 +139420,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -140310,40 +139482,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -140386,40 +139544,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-info-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Draft
-                    </div>
-                  </div>
+                    Draft
+                  </span>
                 </div>
               </td>
               <td
@@ -140462,40 +139606,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -140538,40 +139668,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -140614,40 +139730,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -140690,40 +139792,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -140766,40 +139854,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -140842,40 +139916,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -140918,40 +139978,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled
-                    </div>
-                  </div>
+                    Unfulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -140994,40 +140040,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -141070,40 +140102,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -141146,40 +140164,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -141222,40 +140226,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -141298,40 +140288,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fulfilled
-                    </div>
-                  </div>
+                    Fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -141374,40 +140350,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -141450,40 +140412,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -141526,40 +140474,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -141602,40 +140536,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -141678,40 +140598,26 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -142195,40 +141101,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -142271,40 +141163,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -142347,40 +141225,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-info-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Draft
-                    </div>
-                  </div>
+                    Draft
+                  </span>
                 </div>
               </td>
               <td
@@ -142423,40 +141287,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -142499,40 +141349,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -142575,40 +141411,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -142651,40 +141473,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -142727,40 +141535,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -142803,40 +141597,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -142879,40 +141659,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled
-                    </div>
-                  </div>
+                    Unfulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -142955,40 +141721,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -143031,40 +141783,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -143107,40 +141845,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -143183,40 +141907,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -143259,40 +141969,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fulfilled
-                    </div>
-                  </div>
+                    Fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -143335,40 +142031,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -143411,40 +142093,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -143487,40 +142155,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -143563,40 +142217,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -143639,40 +142279,26 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -144509,40 +143135,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -144585,40 +143197,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -144661,40 +143259,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-info-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Draft
-                    </div>
-                  </div>
+                    Draft
+                  </span>
                 </div>
               </td>
               <td
@@ -144737,40 +143321,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -144813,40 +143383,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -144889,40 +143445,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -144965,40 +143507,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -145041,40 +143569,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -145117,40 +143631,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -145193,40 +143693,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled
-                    </div>
-                  </div>
+                    Unfulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -145269,40 +143755,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Cancelled
-                    </div>
-                  </div>
+                    Cancelled
+                  </span>
                 </div>
               </td>
               <td
@@ -145345,40 +143817,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -145421,40 +143879,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -145497,40 +143941,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -145573,40 +144003,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fulfilled
-                    </div>
-                  </div>
+                    Fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -145649,40 +144065,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -145725,40 +144127,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -145801,40 +144189,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Unpaid
-                    </div>
-                  </div>
+                    Unpaid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -145877,40 +144251,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -145953,40 +144313,26 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fully paid
-                    </div>
-                  </div>
+                    Fully paid
+                  </span>
                 </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                 >
-                  <div
-                    class="undefined StatusLabel-neutralDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Partially fulfilled
-                    </div>
-                  </div>
+                    Partially fulfilled
+                  </span>
                 </div>
               </td>
               <td
@@ -155782,20 +154128,13 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Published
-                    </div>
-                  </div>
+                    Published
+                  </span>
                 </div>
               </td>
             </tr>
@@ -155853,20 +154192,13 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id Pill-root-id Pill-error-id"
                 >
-                  <div
-                    class="undefined StatusLabel-errorDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Not Published
-                    </div>
-                  </div>
+                    Not Published
+                  </span>
                 </div>
               </td>
             </tr>
@@ -155924,20 +154256,13 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Published
-                    </div>
-                  </div>
+                    Published
+                  </span>
                 </div>
               </td>
             </tr>
@@ -155995,20 +154320,13 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
               >
                 <div
-                  class="StatusLabel-container-id"
+                  class="MuiChip-root-id Pill-root-id Pill-success-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Published
-                    </div>
-                  </div>
+                    Published
+                  </span>
                 </div>
               </td>
             </tr>
@@ -164217,30 +162535,15 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id"
                 colspan="2"
               >
-                <div
-                  class="StatusLabel-container-id"
+                <button
+                  class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ChannelStatusLabel-horizontalContainer-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Active in 1/1
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                    Active in 1
+                  </span>
+                </button>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-alignRight-id"
@@ -164282,30 +162585,15 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id"
                 colspan="2"
               >
-                <div
-                  class="StatusLabel-container-id"
+                <button
+                  class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
                 >
-                  <div
-                    class="undefined StatusLabel-successDot-id"
-                  />
-                  <div
-                    class="StatusLabel-textContainer-id"
+                  <span
+                    class="MuiChip-label-id Pill-label-id"
                   >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ChannelStatusLabel-horizontalContainer-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Active in 1/1
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                    Active in 1
+                  </span>
+                </button>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-alignRight-id"
@@ -206857,20 +205145,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -206969,20 +205250,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -207081,20 +205355,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -207193,20 +205460,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -207305,20 +205565,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -207417,20 +205670,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -207529,20 +205775,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -207641,20 +205880,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -207753,20 +205985,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -207865,20 +206090,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -207977,20 +206195,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -208089,20 +206300,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -208201,20 +206405,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -208313,20 +206510,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -208425,20 +206615,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -208537,20 +206720,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -208649,20 +206825,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -208761,20 +206930,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -208873,20 +207035,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -208985,20 +207140,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -209608,20 +207756,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -209720,20 +207861,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -209832,20 +207966,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -209944,20 +208071,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -210056,20 +208176,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -210168,20 +208281,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -210280,20 +208386,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -210392,20 +208491,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -210504,20 +208596,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -210616,20 +208701,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -210728,20 +208806,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -210840,20 +208911,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -210952,20 +209016,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -211064,20 +209121,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -211176,20 +209226,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -211288,20 +209331,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -211400,20 +209436,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -211512,20 +209541,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -211624,20 +209646,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -211736,20 +209751,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -212837,7 +210845,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -212934,7 +210950,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -213031,7 +211055,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -213128,7 +211160,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -213225,7 +211265,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -213322,7 +211370,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -213419,7 +211475,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -213516,7 +211580,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -213613,7 +211685,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -213710,7 +211790,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -213807,7 +211895,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -213904,7 +212000,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -214001,7 +212105,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -214098,7 +212210,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -214195,7 +212315,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -214292,7 +212420,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -214389,7 +212525,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -214486,7 +212630,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -214583,7 +212735,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -214680,7 +212840,15 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                   data-test-availability="false"
                   data-test-id="availability"
                 >
-                  -
+                  <div
+                    class="MuiChip-root-id Pill-root-id Pill-error-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
+                    >
+                      No channels
+                    </span>
+                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
@@ -215606,20 +213774,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -215718,20 +213879,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -215830,20 +213984,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -215942,20 +214089,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -216054,20 +214194,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -216166,20 +214299,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -216278,20 +214404,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -216390,20 +214509,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -216502,20 +214614,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -216614,20 +214719,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -216726,20 +214824,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -216838,20 +214929,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -216950,20 +215034,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -217062,20 +215139,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -217174,20 +215244,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -217286,20 +215349,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -217398,20 +215454,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -217510,20 +215559,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -217622,20 +215664,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -217734,20 +215769,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -218277,20 +216305,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -218389,20 +216410,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -218501,20 +216515,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -218613,20 +216620,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -218725,20 +216725,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -218837,20 +216830,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -218949,20 +216935,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -219061,20 +217040,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -219173,20 +217145,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -219285,20 +217250,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -219397,20 +217355,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -219509,20 +217460,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -219621,20 +217565,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -219733,20 +217670,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -219845,20 +217775,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -219957,20 +217880,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -220069,20 +217985,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -220181,20 +218090,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -220293,20 +218195,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
@@ -220405,20 +218300,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                   data-test-id="availability"
                 >
                   <div
-                    class="StatusLabel-container-id"
+                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                   >
-                    <div
-                      class="undefined StatusLabel-successDot-id"
-                    />
-                    <div
-                      class="StatusLabel-textContainer-id"
+                    <span
+                      class="MuiChip-label-id Pill-label-id"
                     >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Published on 07/14/2020
-                      </div>
-                    </div>
+                      Published
+                    </span>
                   </div>
                 </td>
                 <td
diff --git a/src/storybook/config.js b/src/storybook/config.js
index 045de6e46..b9038b55c 100644
--- a/src/storybook/config.js
+++ b/src/storybook/config.js
@@ -36,7 +36,6 @@ function loadStories() {
   require("./stories/components/SaveFilterTabDialog");
   require("./stories/components/SingleSelectField");
   require("./stories/components/Skeleton");
-  require("./stories/components/StatusLabel");
   require("./stories/components/TablePagination");
   require("./stories/components/Timeline");
   require("./stories/components/Weight");
diff --git a/src/storybook/stories/components/StatusLabel.tsx b/src/storybook/stories/components/StatusLabel.tsx
deleted file mode 100644
index d69d531fe..000000000
--- a/src/storybook/stories/components/StatusLabel.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import StatusLabel from "@saleor/components/StatusLabel";
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import CardDecorator from "../../CardDecorator";
-import Decorator from "../../Decorator";
-
-storiesOf("Generics / StatusLabel", module)
-  .addDecorator(CardDecorator)
-  .addDecorator(Decorator)
-  .add("when success", () => (
-    <StatusLabel label="Example label" status="success" />
-  ))
-  .add("when neutral", () => (
-    <StatusLabel label="Example label" status="neutral" />
-  ))
-  .add("when error", () => (
-    <StatusLabel label="Example label" status="error" />
-  ));
diff --git a/src/types.ts b/src/types.ts
index 2ad0f4330..37692d961 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -217,3 +217,10 @@ export interface AutocompleteFilterOpts
 }
 
 export type Ids = string[];
+
+export enum StatusType {
+  INFO = "info",
+  ERROR = "error",
+  WARNING = "warning",
+  SUCCESS = "success"
+}