From 6794376e39d9bb99eb649270316040e193217637 Mon Sep 17 00:00:00 2001
From: Chris Nanninga <chris.nanninga@bigcommerce.com>
Date: Tue, 6 Feb 2024 20:54:54 -0600
Subject: [PATCH] Catalyst 536d9a8

---
 .env.example                                  |  14 +-
 .github/workflows/basic.yml                   |   2 +-
 .github/workflows/playwright.yml              |   2 +-
 .gitignore                                    |   2 +
 README.md                                     |   6 +-
 apps/core/.eslintrc.cjs                       |   2 +
 apps/core/README.md                           |   2 +-
 .../(faceted)/_components/breadcrumbs.tsx     |   8 +-
 .../(faceted)/_components/facets.tsx          |  12 +-
 .../(faceted)/_components/mobile-side-nav.tsx |   4 +-
 .../(faceted)/_components/refine-by.tsx       |   2 +-
 .../(faceted)/_components/skeleton-ui.tsx     |   2 +-
 .../(faceted)/_components/sort-by.tsx         |   2 +-
 .../(faceted)/brand/[slug]/static/page.tsx    |  16 +
 .../(faceted)/category/[slug]/static/page.tsx |  28 ++
 .../core/app/(default)/blog/[blogId]/page.tsx |   4 +-
 .../app/(default)/cart/CartItemCounter.tsx    |  12 +-
 apps/core/app/(default)/cart/page.tsx         |   2 +-
 apps/core/app/(default)/compare/AddToCart.tsx |   9 +-
 apps/core/app/(default)/compare/page.tsx      |   4 +-
 apps/core/app/(default)/login/LoginForm.tsx   |   8 +-
 apps/core/app/(default)/login/page.tsx        |   2 +-
 .../product/[slug]/_components/Gallery.tsx    |   8 +-
 .../[slug]/_components/ReviewSummary.tsx      |   2 +-
 .../product/[slug]/_components/Reviews.tsx    |   2 +-
 .../app/(default)/product/[slug]/loading.tsx  |   2 +-
 .../app/(default)/product/[slug]/page.tsx     |  32 +-
 .../(default)/product/[slug]/static/page.tsx  |  17 ++
 apps/core/app/(default)/static/page.tsx       |   6 +
 apps/core/app/favicon.ico                     | Bin 25931 -> 1546 bytes
 apps/core/app/not-found.tsx                   |   2 +-
 apps/core/auth.ts                             |  14 +-
 apps/core/client/queries/getCategory.ts       |   1 +
 apps/core/client/queries/getCategoryTree.ts   |   1 +
 apps/core/components/BlogPostCard/index.tsx   |   8 +-
 apps/core/components/CompareDrawer/index.tsx  |   4 +-
 apps/core/components/Footer/Footer.tsx        |  10 +-
 .../Footer/FooterMenus/BaseFooterMenu.tsx     |   2 +-
 apps/core/components/Footer/SocialIcons.tsx   |   2 +-
 apps/core/components/Forbidden/index.tsx      |   2 +-
 apps/core/components/Forms/ContactUs.tsx      |  10 +-
 apps/core/components/Header/cart.tsx          |   4 +-
 apps/core/components/Header/index.tsx         |   6 +-
 apps/core/components/Hero/index.tsx           |   4 +-
 apps/core/components/Pricing/index.tsx        |  25 +-
 .../core/components/ProductCard/AddToCart.tsx |   9 +-
 apps/core/components/ProductCard/Compare.tsx  |   4 +-
 apps/core/components/ProductCard/index.tsx    |  10 +-
 .../ProductCardCarousel/Pagination.tsx        |   2 +-
 .../components/ProductCardCarousel/index.tsx  |   2 +-
 .../core/components/ProductForm/AddToCart.tsx |   4 +-
 .../ProductForm/Fields/CheckboxField.tsx      |   4 +-
 .../ProductForm/Fields/DateField.tsx          |   4 +-
 .../ProductForm/Fields/MultiLineTextField.tsx |   4 +-
 .../Fields/MultipleChoiceField.tsx            |  12 +-
 .../ProductForm/Fields/NumberField.tsx        |   4 +-
 .../ProductForm/Fields/QuantityField.tsx      |   4 +-
 .../ProductForm/Fields/TextField.tsx          |   4 +-
 apps/core/components/ProductForm/index.tsx    |   2 +-
 apps/core/components/ProductSheet/index.tsx   |  38 ++-
 apps/core/components/QuickSearch/index.tsx    |   8 +-
 apps/core/components/SearchForm/index.tsx     |   6 +-
 apps/core/middlewares/with-custom-urls.ts     |  26 +-
 apps/core/next.config.js                      |   4 +-
 apps/core/package.json                        |   2 +-
 apps/core/tailwind.config.js                  |   6 +-
 apps/core/tsconfig.json                       |   2 +-
 apps/docs/.eslintrc.cjs                       |   1 +
 apps/docs/package.json                        |   4 +-
 apps/docs/stories/Accordion.stories.tsx       |   2 +-
 apps/docs/stories/Badge.stories.tsx           |   2 +-
 apps/docs/stories/BlogPostCard.stories.tsx    |   2 +-
 apps/docs/stories/Breadcrumbs.stories.tsx     |   2 +-
 apps/docs/stories/Button.stories.tsx          |   2 +-
 apps/docs/stories/Calendar.stories.tsx        |   2 +-
 apps/docs/stories/Carousel.stories.tsx        |   4 +-
 apps/docs/stories/Checkbox.stories.tsx        |   4 +-
 apps/docs/stories/Counter.stories.tsx         |   3 +-
 apps/docs/stories/DatePicker.stories.tsx      |   2 +-
 apps/docs/stories/FileChooser.stories.tsx     |   4 +-
 apps/docs/stories/Footer.stories.tsx          |   2 +-
 apps/docs/stories/Form.stories.tsx            |  10 +-
 apps/docs/stories/Gallery.stories.tsx         |   2 +-
 apps/docs/stories/Input.stories.tsx           |   2 +-
 apps/docs/stories/Label.stories.tsx           |   4 +-
 apps/docs/stories/Message.stories.tsx         |   2 +-
 apps/docs/stories/NavigationMenu.stories.tsx  |   6 +-
 apps/docs/stories/PickList.stories.tsx        |   4 +-
 apps/docs/stories/Popover.stories.tsx         |   4 +-
 apps/docs/stories/ProductCard.stories.tsx     |   2 +-
 apps/docs/stories/RadioGroup.stories.tsx      |   4 +-
 apps/docs/stories/Rating.stories.tsx          |   2 +-
 apps/docs/stories/RectangleList.stories.tsx   |   4 +-
 apps/docs/stories/Select.stories.tsx          |   2 +-
 apps/docs/stories/Sheet.stories.tsx           |   2 +-
 apps/docs/stories/Skeleton.stories.tsx        |   2 +-
 apps/docs/stories/Slideshow.stories.tsx       |   4 +-
 apps/docs/stories/Swatch.stories.tsx          |   4 +-
 apps/docs/stories/Tag.stories.tsx             |   2 +-
 apps/docs/stories/TextArea.stories.tsx        |   2 +-
 apps/docs/tailwind.config.js                  |   6 +-
 packages/client/.eslintrc.cjs                 |   1 +
 .../{reactant => components}/.eslintrc.cjs    |   2 +
 .../{reactant => components}/package.json     |   2 +-
 .../postcss.config.js                         |   0
 .../prettier.config.js                        |   0
 .../src/components/Accordion/Accordion.tsx    |   0
 .../src/components/Accordion/index.ts         |   0
 .../src/components/Badge/Badge.tsx            |   0
 .../src/components/Badge/index.ts             |   0
 .../components/BlogPostCard/BlogPostCard.tsx  |   0
 .../src/components/BlogPostCard/index.ts      |   0
 .../components/Breadcrumbs/Breadcrumbs.tsx    |   0
 .../src/components/Breadcrumbs/index.ts       |   0
 .../src/components/Button/Button.tsx          |   0
 .../src/components/Button/index.ts            |   0
 .../src/components/Calendar/Calendar.tsx      |   0
 .../src/components/Calendar/index.ts          |   0
 .../src/components/Carousel/Carousel.tsx      |   0
 .../src/components/Carousel/index.ts          |   0
 .../src/components/Checkbox/Checkbox.tsx      |   0
 .../src/components/Checkbox/index.ts          |   0
 .../src/components/Counter/Counter.tsx        |   4 +
 .../src/components/Counter/index.ts           |   0
 .../src/components/DatePicker/DatePicker.tsx  |   0
 .../src/components/DatePicker/index.ts        |   0
 .../components/FileChooser/FileChooser.tsx    |   0
 .../src/components/FileChooser/index.ts       |   0
 .../src/components/Footer/Footer.tsx          |   0
 .../src/components/Footer/index.ts            |   0
 .../src/components/Form/Form.tsx              |   0
 .../src/components/Form/index.ts              |   0
 .../src/components/Gallery/Gallery.tsx        |   0
 .../src/components/Gallery/index.ts           |   0
 .../src/components/Input/Input.tsx            |   0
 .../src/components/Input/index.ts             |   0
 .../src/components/Label/Label.tsx            |   0
 .../src/components/Label/index.ts             |   0
 .../src/components/Message/Message.tsx        |   0
 .../src/components/Message/index.ts           |   0
 .../NavigationMenu/NavigationMenu.tsx         |   0
 .../src/components/NavigationMenu/index.ts    |   0
 .../src/components/PickList/PickList.tsx      |   0
 .../src/components/PickList/index.ts          |   0
 .../src/components/Popover/Popover.tsx        |   0
 .../src/components/Popover/index.ts           |   0
 .../components/ProductCard/ProductCard.tsx    |   0
 .../src/components/ProductCard/index.ts       |   0
 .../src/components/RadioGroup/RadioGroup.tsx  |   0
 .../src/components/RadioGroup/index.ts        |   0
 .../src/components/Rating/Rating.tsx          |   0
 .../components/Rating/StarIcons/StarEmpty.tsx |   0
 .../Rating/StarIcons/StarFilled.tsx           |   0
 .../components/Rating/StarIcons/StarHalf.tsx  |   0
 .../src/components/Rating/index.ts            |   0
 .../RectangleList/RectangleList.tsx           |   0
 .../src/components/RectangleList/index.ts     |   0
 .../src/components/Select/Select.tsx          |   0
 .../src/components/Select/index.ts            |   0
 .../src/components/Sheet/Sheet.tsx            |   0
 .../src/components/Sheet/index.ts             |   0
 .../src/components/Skeleton/Skeleton.tsx      |   0
 .../src/components/Skeleton/index.ts          |   0
 .../src/components/Slideshow/Slideshow.tsx    |   0
 .../src/components/Slideshow/index.ts         |   0
 .../src/components/Swatch/Swatch.tsx          |   0
 .../src/components/Swatch/index.ts            |   0
 .../src/components/Tag/Tag.tsx                |   0
 .../src/components/Tag/index.ts               |   0
 .../src/components/TextArea/TextArea.tsx      |   0
 .../src/components/TextArea/index.ts          |   0
 .../{reactant => components}/src/lib/utils.ts |   0
 .../tailwind.config.js                        |   0
 .../{reactant => components}/tsconfig.json    |   0
 packages/create-catalyst/README.md            |   2 +-
 packages/eslint-config-catalyst/base.js       |  19 ++
 packages/eslint-config-catalyst/package.json  |   1 +
 packages/functional/.eslintrc.cjs             |   3 +
 .../functional/actions/product-actions.ts     |   2 +-
 .../ui/core/components/Accordion.spec.ts      |  48 ++-
 .../ui/core/components/BreadCrumbs.spec.ts    |  10 +-
 .../tests/ui/core/components/Carousel.spec.ts |  26 +-
 .../tests/ui/core/components/Checkbox.spec.ts |  19 +-
 .../tests/ui/core/components/Counter.spec.ts  |  51 ++++
 .../ui/core/components/RadioGroup.spec.ts     |  25 ++
 .../tests/ui/core/components/Select.spec.ts   |  37 +++
 .../ui/core/components/Slideshow.spec.ts      |  21 +-
 .../tests/ui/core/components/Swatch.spec.ts   |  24 ++
 pnpm-lock.yaml                                | 285 +++++++++++-------
 189 files changed, 766 insertions(+), 392 deletions(-)
 create mode 100644 apps/core/app/(default)/(faceted)/brand/[slug]/static/page.tsx
 create mode 100644 apps/core/app/(default)/(faceted)/category/[slug]/static/page.tsx
 create mode 100644 apps/core/app/(default)/product/[slug]/static/page.tsx
 create mode 100644 apps/core/app/(default)/static/page.tsx
 rename packages/{reactant => components}/.eslintrc.cjs (83%)
 rename packages/{reactant => components}/package.json (98%)
 rename packages/{reactant => components}/postcss.config.js (100%)
 rename packages/{reactant => components}/prettier.config.js (100%)
 rename packages/{reactant => components}/src/components/Accordion/Accordion.tsx (100%)
 rename packages/{reactant => components}/src/components/Accordion/index.ts (100%)
 rename packages/{reactant => components}/src/components/Badge/Badge.tsx (100%)
 rename packages/{reactant => components}/src/components/Badge/index.ts (100%)
 rename packages/{reactant => components}/src/components/BlogPostCard/BlogPostCard.tsx (100%)
 rename packages/{reactant => components}/src/components/BlogPostCard/index.ts (100%)
 rename packages/{reactant => components}/src/components/Breadcrumbs/Breadcrumbs.tsx (100%)
 rename packages/{reactant => components}/src/components/Breadcrumbs/index.ts (100%)
 rename packages/{reactant => components}/src/components/Button/Button.tsx (100%)
 rename packages/{reactant => components}/src/components/Button/index.ts (100%)
 rename packages/{reactant => components}/src/components/Calendar/Calendar.tsx (100%)
 rename packages/{reactant => components}/src/components/Calendar/index.ts (100%)
 rename packages/{reactant => components}/src/components/Carousel/Carousel.tsx (100%)
 rename packages/{reactant => components}/src/components/Carousel/index.ts (100%)
 rename packages/{reactant => components}/src/components/Checkbox/Checkbox.tsx (100%)
 rename packages/{reactant => components}/src/components/Checkbox/index.ts (100%)
 rename packages/{reactant => components}/src/components/Counter/Counter.tsx (98%)
 rename packages/{reactant => components}/src/components/Counter/index.ts (100%)
 rename packages/{reactant => components}/src/components/DatePicker/DatePicker.tsx (100%)
 rename packages/{reactant => components}/src/components/DatePicker/index.ts (100%)
 rename packages/{reactant => components}/src/components/FileChooser/FileChooser.tsx (100%)
 rename packages/{reactant => components}/src/components/FileChooser/index.ts (100%)
 rename packages/{reactant => components}/src/components/Footer/Footer.tsx (100%)
 rename packages/{reactant => components}/src/components/Footer/index.ts (100%)
 rename packages/{reactant => components}/src/components/Form/Form.tsx (100%)
 rename packages/{reactant => components}/src/components/Form/index.ts (100%)
 rename packages/{reactant => components}/src/components/Gallery/Gallery.tsx (100%)
 rename packages/{reactant => components}/src/components/Gallery/index.ts (100%)
 rename packages/{reactant => components}/src/components/Input/Input.tsx (100%)
 rename packages/{reactant => components}/src/components/Input/index.ts (100%)
 rename packages/{reactant => components}/src/components/Label/Label.tsx (100%)
 rename packages/{reactant => components}/src/components/Label/index.ts (100%)
 rename packages/{reactant => components}/src/components/Message/Message.tsx (100%)
 rename packages/{reactant => components}/src/components/Message/index.ts (100%)
 rename packages/{reactant => components}/src/components/NavigationMenu/NavigationMenu.tsx (100%)
 rename packages/{reactant => components}/src/components/NavigationMenu/index.ts (100%)
 rename packages/{reactant => components}/src/components/PickList/PickList.tsx (100%)
 rename packages/{reactant => components}/src/components/PickList/index.ts (100%)
 rename packages/{reactant => components}/src/components/Popover/Popover.tsx (100%)
 rename packages/{reactant => components}/src/components/Popover/index.ts (100%)
 rename packages/{reactant => components}/src/components/ProductCard/ProductCard.tsx (100%)
 rename packages/{reactant => components}/src/components/ProductCard/index.ts (100%)
 rename packages/{reactant => components}/src/components/RadioGroup/RadioGroup.tsx (100%)
 rename packages/{reactant => components}/src/components/RadioGroup/index.ts (100%)
 rename packages/{reactant => components}/src/components/Rating/Rating.tsx (100%)
 rename packages/{reactant => components}/src/components/Rating/StarIcons/StarEmpty.tsx (100%)
 rename packages/{reactant => components}/src/components/Rating/StarIcons/StarFilled.tsx (100%)
 rename packages/{reactant => components}/src/components/Rating/StarIcons/StarHalf.tsx (100%)
 rename packages/{reactant => components}/src/components/Rating/index.ts (100%)
 rename packages/{reactant => components}/src/components/RectangleList/RectangleList.tsx (100%)
 rename packages/{reactant => components}/src/components/RectangleList/index.ts (100%)
 rename packages/{reactant => components}/src/components/Select/Select.tsx (100%)
 rename packages/{reactant => components}/src/components/Select/index.ts (100%)
 rename packages/{reactant => components}/src/components/Sheet/Sheet.tsx (100%)
 rename packages/{reactant => components}/src/components/Sheet/index.ts (100%)
 rename packages/{reactant => components}/src/components/Skeleton/Skeleton.tsx (100%)
 rename packages/{reactant => components}/src/components/Skeleton/index.ts (100%)
 rename packages/{reactant => components}/src/components/Slideshow/Slideshow.tsx (100%)
 rename packages/{reactant => components}/src/components/Slideshow/index.ts (100%)
 rename packages/{reactant => components}/src/components/Swatch/Swatch.tsx (100%)
 rename packages/{reactant => components}/src/components/Swatch/index.ts (100%)
 rename packages/{reactant => components}/src/components/Tag/Tag.tsx (100%)
 rename packages/{reactant => components}/src/components/Tag/index.ts (100%)
 rename packages/{reactant => components}/src/components/TextArea/TextArea.tsx (100%)
 rename packages/{reactant => components}/src/components/TextArea/index.ts (100%)
 rename packages/{reactant => components}/src/lib/utils.ts (100%)
 rename packages/{reactant => components}/tailwind.config.js (100%)
 rename packages/{reactant => components}/tsconfig.json (100%)
 create mode 100644 packages/functional/tests/ui/core/components/Counter.spec.ts
 create mode 100644 packages/functional/tests/ui/core/components/RadioGroup.spec.ts
 create mode 100644 packages/functional/tests/ui/core/components/Select.spec.ts
 create mode 100644 packages/functional/tests/ui/core/components/Swatch.spec.ts

diff --git a/.env.example b/.env.example
index 80874d01..9c28c2ca 100644
--- a/.env.example
+++ b/.env.example
@@ -1,7 +1,16 @@
-# Shared env vars, used by all apps and api client
+# The hash visible in the subject store's URL when signed in to the store control panel.
+# The control panel URL is of the form `https://store-{hash}.mybigcommerce.com`. 
 BIGCOMMERCE_STORE_HASH=
+
+# The access token from a store-level API account. The only scope required to run Catalyst is Carts `read-only`.
+# See https://developer.bigcommerce.com/api-docs/getting-started/api-accounts#store-level-api-accounts
 BIGCOMMERCE_ACCESS_TOKEN=
+
+# A bearer token that authorizes server-to-server requests to the GraphQL Storefront API
+# See https://developer.bigcommerce.com/docs/rest-authentication/tokens/customer-impersonation-token
 BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN=
+
+# The channel ID for the Catalyst storefront's dedicated channel.
 BIGCOMMERCE_CHANNEL_ID=1
 
 # Set to true to allow the /admin route to redirect to the BigCommerce control panel.
@@ -9,4 +18,5 @@ BIGCOMMERCE_CHANNEL_ID=1
 # You may also delete /admin/route.ts if you wish.
 ENABLE_ADMIN_ROUTE=true
 
-AUTH_SECRET= # Generate one typing `openssl rand -hex 32` in your terminal
+# Used by NextAuth, can be generated by running `openssl rand -hex 32` in your terminal.
+AUTH_SECRET=
diff --git a/.github/workflows/basic.yml b/.github/workflows/basic.yml
index e8e4f91d..e7c21adc 100644
--- a/.github/workflows/basic.yml
+++ b/.github/workflows/basic.yml
@@ -1,4 +1,4 @@
-name: Basic workflow
+name: Lint, Typecheck, GraphQL Codegen
 
 on:
   push:
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index f91d286e..1a04916b 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -34,7 +34,7 @@ jobs:
           PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
         run: |
           cd packages/functional
-          npx playwright test tests/visual-regression/reactant/components/ --project=tests-chromium 
+          npx playwright test tests/visual-regression/reactant/components/ --project=tests-chromium
 
       - uses: actions/upload-artifact@v3
         if: failure()
diff --git a/.gitignore b/.gitignore
index 97e23f9c..5a7229c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,8 @@ dist
 .turbo
 .vscode/**/*
 !.vscode/settings.example.json
+.idea
+.vercel
 .env
 .env*.local
 test-results/
diff --git a/README.md b/README.md
index eefba2e1..08ff8524 100644
--- a/README.md
+++ b/README.md
@@ -3,12 +3,12 @@
 > [!WARNING]
 > - Catalyst is in development and should not be used in production environments.
 
-**Catalyst** is a composable, fully customizable headless storefront that offers a set of opinionated defaults. It is intended to fit the needs of modern developers, merchants, and shoppers. Catalyst is built with [Next.js (nextjs.org)](https://nextjs.org/) and uses our [React.js-based (react.dev)](https://react.dev/) **Reactant** storefront components.
+**Catalyst** is a composable, fully customizable headless storefront that offers a set of opinionated defaults. It is intended to fit the needs of modern developers, merchants, and shoppers. Catalyst is built with [Next.js (nextjs.org)](https://nextjs.org/) and uses our [React.js-based (react.dev)](https://react.dev/) storefront components.
 
 The Catalyst monorepo contains the following:
 
 * The core **Catalyst** Next.js storefront, in [apps/core](apps/core).
-* The **Reactant** storefront component library, in [packages/reactant](packages/reactant).
+* The storefront component library, in [packages/components](packages/components).
 * The BigCommerce [GraphQL Storefront API (BigCommerce Dev Center)](https://developer.bigcommerce.com/docs/graphql-storefront) client, in [packages/client](packages/client).
 
 ## Requirements
@@ -83,7 +83,7 @@ The `dev` script runs all packages and apps in watch mode. The following table l
 | Process | URL with port |
 |:--------|:--------------|
 | Core Catalyst storefront | http://localhost:3000 |
-| Reactant Storybook | http://localhost:6006 |
+| Components Storybook | http://localhost:6006 |
 
 Happy developing! Let us know how things are going in the dedicated Slack channel.
 
diff --git a/apps/core/.eslintrc.cjs b/apps/core/.eslintrc.cjs
index e2155b80..d0a7c7bf 100644
--- a/apps/core/.eslintrc.cjs
+++ b/apps/core/.eslintrc.cjs
@@ -25,6 +25,8 @@ const config = {
         ],
       },
     ],
+    'check-file/filename-naming-convention': 'off',
+    'check-file/folder-naming-convention': 'off',
   },
 };
 
diff --git a/apps/core/README.md b/apps/core/README.md
index 788f7aac..0e9c1e68 100644
--- a/apps/core/README.md
+++ b/apps/core/README.md
@@ -1,6 +1,6 @@
 # Catalyst
 
-Catalyst is the next generation of storefronts at BigCommerce. It aims to be composable and powerful to meet the needs of our enterprise customers, exceeding performance of Stencil and Blueprint themes. Catalyst is built with [Next.js](https://nextjs.org/) using our React.js storefront component library called Reactant.
+Catalyst is the next generation of storefronts at BigCommerce. It aims to be composable and powerful to meet the needs of our enterprise customers, exceeding performance of Stencil and Blueprint themes. Catalyst is built with [Next.js](https://nextjs.org/) using our React.js storefront component library.
 
 ## Getting Started
 
diff --git a/apps/core/app/(default)/(faceted)/_components/breadcrumbs.tsx b/apps/core/app/(default)/(faceted)/_components/breadcrumbs.tsx
index 15262c00..a721dab3 100644
--- a/apps/core/app/(default)/(faceted)/_components/breadcrumbs.tsx
+++ b/apps/core/app/(default)/(faceted)/_components/breadcrumbs.tsx
@@ -1,8 +1,8 @@
 import {
   BreadcrumbDivider,
   BreadcrumbItem,
-  Breadcrumbs as ReactantBreadcrumbs,
-} from '@bigcommerce/reactant/Breadcrumbs';
+  Breadcrumbs as ComponentsBreadcrumbs,
+} from '@bigcommerce/components/Breadcrumbs';
 import { ChevronRight } from 'lucide-react';
 import { Fragment } from 'react';
 
@@ -18,7 +18,7 @@ interface Props {
 }
 
 export const Breadcrumbs = ({ breadcrumbs, category }: Props) => (
-  <ReactantBreadcrumbs className="py-4">
+  <ComponentsBreadcrumbs className="py-4">
     {breadcrumbs.map(({ name, entityId, path }, index) => {
       if (!path || breadcrumbs.length - 1 === index) {
         return (
@@ -39,5 +39,5 @@ export const Breadcrumbs = ({ breadcrumbs, category }: Props) => (
         </Fragment>
       );
     })}
-  </ReactantBreadcrumbs>
+  </ComponentsBreadcrumbs>
 );
diff --git a/apps/core/app/(default)/(faceted)/_components/facets.tsx b/apps/core/app/(default)/(faceted)/_components/facets.tsx
index 752391a3..02dc8b98 100644
--- a/apps/core/app/(default)/(faceted)/_components/facets.tsx
+++ b/apps/core/app/(default)/(faceted)/_components/facets.tsx
@@ -5,12 +5,12 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from '@bigcommerce/reactant/Accordion';
-import { Button } from '@bigcommerce/reactant/Button';
-import { Checkbox } from '@bigcommerce/reactant/Checkbox';
-import { Input } from '@bigcommerce/reactant/Input';
-import { Label } from '@bigcommerce/reactant/Label';
-import { Rating } from '@bigcommerce/reactant/Rating';
+} from '@bigcommerce/components/Accordion';
+import { Button } from '@bigcommerce/components/Button';
+import { Checkbox } from '@bigcommerce/components/Checkbox';
+import { Input } from '@bigcommerce/components/Input';
+import { Label } from '@bigcommerce/components/Label';
+import { Rating } from '@bigcommerce/components/Rating';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { FormEvent, useRef } from 'react';
 
diff --git a/apps/core/app/(default)/(faceted)/_components/mobile-side-nav.tsx b/apps/core/app/(default)/(faceted)/_components/mobile-side-nav.tsx
index bea891b5..97fe13b0 100644
--- a/apps/core/app/(default)/(faceted)/_components/mobile-side-nav.tsx
+++ b/apps/core/app/(default)/(faceted)/_components/mobile-side-nav.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import {
   Sheet,
   SheetClose,
@@ -9,7 +9,7 @@ import {
   SheetOverlay,
   SheetTitle,
   SheetTrigger,
-} from '@bigcommerce/reactant/Sheet';
+} from '@bigcommerce/components/Sheet';
 import { Filter } from 'lucide-react';
 import { PropsWithChildren, useEffect, useState } from 'react';
 
diff --git a/apps/core/app/(default)/(faceted)/_components/refine-by.tsx b/apps/core/app/(default)/(faceted)/_components/refine-by.tsx
index d9e3421d..eee24b8b 100644
--- a/apps/core/app/(default)/(faceted)/_components/refine-by.tsx
+++ b/apps/core/app/(default)/(faceted)/_components/refine-by.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Tag, TagAction, TagContent } from '@bigcommerce/reactant/Tag';
+import { Tag, TagAction, TagContent } from '@bigcommerce/components/Tag';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 import type { Facet, PageType, PublicParamKeys } from '../types';
diff --git a/apps/core/app/(default)/(faceted)/_components/skeleton-ui.tsx b/apps/core/app/(default)/(faceted)/_components/skeleton-ui.tsx
index 49c41399..43d6a79a 100644
--- a/apps/core/app/(default)/(faceted)/_components/skeleton-ui.tsx
+++ b/apps/core/app/(default)/(faceted)/_components/skeleton-ui.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from '@bigcommerce/reactant/Skeleton';
+import { Skeleton } from '@bigcommerce/components/Skeleton';
 
 export const SkeletonIU = () => (
   <div>
diff --git a/apps/core/app/(default)/(faceted)/_components/sort-by.tsx b/apps/core/app/(default)/(faceted)/_components/sort-by.tsx
index de205074..7fc28df7 100644
--- a/apps/core/app/(default)/(faceted)/_components/sort-by.tsx
+++ b/apps/core/app/(default)/(faceted)/_components/sort-by.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Select, SelectContent, SelectItem } from '@bigcommerce/reactant/Select';
+import { Select, SelectContent, SelectItem } from '@bigcommerce/components/Select';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 export function SortBy() {
diff --git a/apps/core/app/(default)/(faceted)/brand/[slug]/static/page.tsx b/apps/core/app/(default)/(faceted)/brand/[slug]/static/page.tsx
new file mode 100644
index 00000000..06ce7d67
--- /dev/null
+++ b/apps/core/app/(default)/(faceted)/brand/[slug]/static/page.tsx
@@ -0,0 +1,16 @@
+import { getBrands } from '~/client/queries/getBrands';
+
+import BrandPage from '../page';
+
+export default BrandPage;
+
+export async function generateStaticParams() {
+  const brands = await getBrands();
+
+  return brands.map((brand) => ({
+    slug: brand.entityId.toString(),
+  }));
+}
+
+export const dynamic = 'force-static';
+export const revalidate = 600;
diff --git a/apps/core/app/(default)/(faceted)/category/[slug]/static/page.tsx b/apps/core/app/(default)/(faceted)/category/[slug]/static/page.tsx
new file mode 100644
index 00000000..7f268259
--- /dev/null
+++ b/apps/core/app/(default)/(faceted)/category/[slug]/static/page.tsx
@@ -0,0 +1,28 @@
+import { getCategoryTree } from '~/client/queries/getCategoryTree';
+import { ExistingResultType } from '~/client/util';
+
+import CategoryPage from '../page';
+
+export default CategoryPage;
+
+type Categories = ExistingResultType<typeof getCategoryTree>;
+type Category = Omit<Categories[number], 'children'> & { children?: Category[] };
+
+const getEntityIdsOfChildren = (categories: Category[] = []): number[] =>
+  categories.reduce<number[]>(
+    (acc, category) => acc.concat(category.entityId, getEntityIdsOfChildren(category.children)),
+    [],
+  );
+
+export async function generateStaticParams() {
+  const categories = await getCategoryTree();
+
+  const entityIds = getEntityIdsOfChildren(categories);
+
+  return entityIds.map((entityId) => ({
+    slug: entityId.toString(),
+  }));
+}
+
+export const dynamic = 'force-static';
+export const revalidate = 600;
diff --git a/apps/core/app/(default)/blog/[blogId]/page.tsx b/apps/core/app/(default)/blog/[blogId]/page.tsx
index 0e265dcc..dda1c510 100644
--- a/apps/core/app/(default)/blog/[blogId]/page.tsx
+++ b/apps/core/app/(default)/blog/[blogId]/page.tsx
@@ -4,8 +4,8 @@ import {
   BlogPostDate,
   BlogPostImage,
   BlogPostTitle,
-} from '@bigcommerce/reactant/BlogPostCard';
-import { Tag, TagContent } from '@bigcommerce/reactant/Tag';
+} from '@bigcommerce/components/BlogPostCard';
+import { Tag, TagContent } from '@bigcommerce/components/Tag';
 import type { Metadata } from 'next';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
diff --git a/apps/core/app/(default)/cart/CartItemCounter.tsx b/apps/core/app/(default)/cart/CartItemCounter.tsx
index 5295d778..88ef0599 100644
--- a/apps/core/app/(default)/cart/CartItemCounter.tsx
+++ b/apps/core/app/(default)/cart/CartItemCounter.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Counter } from '@bigcommerce/reactant/Counter';
+import { Counter } from '@bigcommerce/components/Counter';
 import { useState } from 'react';
 
 import {
@@ -21,10 +21,13 @@ interface UpdateProductQuantityData extends CartLineItemInput {
 
 export const CartItemCounter = ({ itemData }: { itemData: CartItemData }) => {
   const { quantity, lineItemEntityId, productEntityId, variantEntityId } = itemData;
-  const [counterValue, setCounterValue] = useState(quantity);
+
+  const [counterValue, setCounterValue] = useState<'' | number>(quantity);
   const handleCountUpdate = async (value: string | number) => {
-    if (Number.isNaN(value)) {
-      setCounterValue(0);
+    if (value === '') {
+      setCounterValue(value);
+
+      return;
     }
 
     setCounterValue(Number(value));
@@ -40,6 +43,7 @@ export const CartItemCounter = ({ itemData }: { itemData: CartItemData }) => {
   return (
     <Counter
       className="w-32 text-base font-bold"
+      min={1}
       onChange={handleCountUpdate}
       value={counterValue}
     />
diff --git a/apps/core/app/(default)/cart/page.tsx b/apps/core/app/(default)/cart/page.tsx
index e4b6984e..0b49e5e6 100644
--- a/apps/core/app/(default)/cart/page.tsx
+++ b/apps/core/app/(default)/cart/page.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import { Trash2 as Trash } from 'lucide-react';
 import { cookies } from 'next/headers';
 import Image from 'next/image';
diff --git a/apps/core/app/(default)/compare/AddToCart.tsx b/apps/core/app/(default)/compare/AddToCart.tsx
index 90c79eba..b678a001 100644
--- a/apps/core/app/(default)/compare/AddToCart.tsx
+++ b/apps/core/app/(default)/compare/AddToCart.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { Button } from '@bigcommerce/reactant/Button';
-import { ShoppingCart, Loader2 as Spinner } from 'lucide-react';
+import { Button } from '@bigcommerce/components/Button';
+import { Loader2 as Spinner } from 'lucide-react';
 import { useFormStatus } from 'react-dom';
 
 export const AddToCart = ({
@@ -21,10 +21,7 @@ export const AddToCart = ({
           <span className="sr-only">Processing...</span>
         </>
       ) : (
-        <>
-          <ShoppingCart aria-hidden="true" className="mx-2" />
-          <span>Add to Cart</span>
-        </>
+        'Add to cart'
       )}
     </Button>
   );
diff --git a/apps/core/app/(default)/compare/page.tsx b/apps/core/app/(default)/compare/page.tsx
index f56407ba..062084a8 100644
--- a/apps/core/app/(default)/compare/page.tsx
+++ b/apps/core/app/(default)/compare/page.tsx
@@ -1,5 +1,5 @@
-import { Button } from '@bigcommerce/reactant/Button';
-import { Rating } from '@bigcommerce/reactant/Rating';
+import { Button } from '@bigcommerce/components/Button';
+import { Rating } from '@bigcommerce/components/Rating';
 import Image from 'next/image';
 import * as z from 'zod';
 
diff --git a/apps/core/app/(default)/login/LoginForm.tsx b/apps/core/app/(default)/login/LoginForm.tsx
index 9a7833a9..112636c3 100644
--- a/apps/core/app/(default)/login/LoginForm.tsx
+++ b/apps/core/app/(default)/login/LoginForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import {
   Field,
   FieldControl,
@@ -8,9 +8,9 @@ import {
   FieldMessage,
   Form,
   FormSubmit,
-} from '@bigcommerce/reactant/Form';
-import { Input } from '@bigcommerce/reactant/Input';
-import { Message } from '@bigcommerce/reactant/Message';
+} from '@bigcommerce/components/Form';
+import { Input } from '@bigcommerce/components/Input';
+import { Message } from '@bigcommerce/components/Message';
 import { Loader2 as Spinner } from 'lucide-react';
 import { ChangeEvent, useState } from 'react';
 import { useFormState, useFormStatus } from 'react-dom';
diff --git a/apps/core/app/(default)/login/page.tsx b/apps/core/app/(default)/login/page.tsx
index 5a61b9a8..a81870f2 100644
--- a/apps/core/app/(default)/login/page.tsx
+++ b/apps/core/app/(default)/login/page.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 
 import { Link } from '~/components/Link';
 
diff --git a/apps/core/app/(default)/product/[slug]/_components/Gallery.tsx b/apps/core/app/(default)/product/[slug]/_components/Gallery.tsx
index 8c63453d..758983e0 100644
--- a/apps/core/app/(default)/product/[slug]/_components/Gallery.tsx
+++ b/apps/core/app/(default)/product/[slug]/_components/Gallery.tsx
@@ -1,14 +1,14 @@
 'use client';
 
 import {
+  Gallery as ComponentsGallery,
   GalleryContent,
   GalleryControls,
   GalleryImage,
   GalleryThumbnail,
   GalleryThumbnailItem,
   GalleryThumbnailList,
-  Gallery as ReactantGallery,
-} from '@bigcommerce/reactant/Gallery';
+} from '@bigcommerce/components/Gallery';
 import Image from 'next/image';
 
 import { getProduct } from '~/client/queries/getProduct';
@@ -24,7 +24,7 @@ export const Gallery = ({ images }: Props) => {
   return (
     <div className="-mx-6 mb-10 sm:-mx-0 md:mb-12">
       <div className="lg:sticky lg:top-0">
-        <ReactantGallery defaultImageIndex={defaultImageIndex} images={images}>
+        <ComponentsGallery defaultImageIndex={defaultImageIndex} images={images}>
           <GalleryContent>
             <GalleryImage>
               {({ selectedImage }) =>
@@ -57,7 +57,7 @@ export const Gallery = ({ images }: Props) => {
               );
             })}
           </GalleryThumbnailList>
-        </ReactantGallery>
+        </ComponentsGallery>
       </div>
     </div>
   );
diff --git a/apps/core/app/(default)/product/[slug]/_components/ReviewSummary.tsx b/apps/core/app/(default)/product/[slug]/_components/ReviewSummary.tsx
index 9f2e2d8d..de9ced4b 100644
--- a/apps/core/app/(default)/product/[slug]/_components/ReviewSummary.tsx
+++ b/apps/core/app/(default)/product/[slug]/_components/ReviewSummary.tsx
@@ -1,4 +1,4 @@
-import { Rating } from '@bigcommerce/reactant/Rating';
+import { Rating } from '@bigcommerce/components/Rating';
 import { useId } from 'react';
 
 import { getProductReviews } from '~/client/queries/getProductReviews';
diff --git a/apps/core/app/(default)/product/[slug]/_components/Reviews.tsx b/apps/core/app/(default)/product/[slug]/_components/Reviews.tsx
index c2f257ba..5cb7cb76 100644
--- a/apps/core/app/(default)/product/[slug]/_components/Reviews.tsx
+++ b/apps/core/app/(default)/product/[slug]/_components/Reviews.tsx
@@ -1,4 +1,4 @@
-import { Rating } from '@bigcommerce/reactant/Rating';
+import { Rating } from '@bigcommerce/components/Rating';
 
 import { getProductReviews } from '~/client/queries/getProductReviews';
 
diff --git a/apps/core/app/(default)/product/[slug]/loading.tsx b/apps/core/app/(default)/product/[slug]/loading.tsx
index 400d650c..dff037bd 100644
--- a/apps/core/app/(default)/product/[slug]/loading.tsx
+++ b/apps/core/app/(default)/product/[slug]/loading.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from '@bigcommerce/reactant/Skeleton';
+import { Skeleton } from '@bigcommerce/components/Skeleton';
 
 export default function Loading() {
   return (
diff --git a/apps/core/app/(default)/product/[slug]/page.tsx b/apps/core/app/(default)/product/[slug]/page.tsx
index a031cfb5..fe61e7d4 100644
--- a/apps/core/app/(default)/product/[slug]/page.tsx
+++ b/apps/core/app/(default)/product/[slug]/page.tsx
@@ -52,24 +52,20 @@ const ProductDetails = ({ product }: { product: NonNullable<Product> }) => {
                   </span>
                 </p>
               )}
-              {product.prices.basePrice?.value !== undefined && (
-                <p className="text-h4">
-                  {product.prices.salePrice?.value ? (
-                    <>
-                      Was:{' '}
-                      <span className="line-through">
-                        {currencyFormatter.format(product.prices.basePrice.value)}
-                      </span>
-                    </>
-                  ) : (
-                    currencyFormatter.format(product.prices.basePrice.value)
-                  )}
-                </p>
-              )}
-              {product.prices.salePrice?.value !== undefined && (
-                <p className="text-h4">
-                  Now: {currencyFormatter.format(product.prices.salePrice.value)}
-                </p>
+              {product.prices.salePrice?.value !== undefined &&
+              product.prices.basePrice?.value !== undefined ? (
+                <>
+                  Was:{' '}
+                  <span className="line-through">
+                    {currencyFormatter.format(product.prices.basePrice.value)}
+                  </span>
+                  <br />
+                  <>Now: {currencyFormatter.format(product.prices.salePrice.value)}</>
+                </>
+              ) : (
+                product.prices.price.value && (
+                  <>{currencyFormatter.format(product.prices.price.value)}</>
+                )
               )}
             </>
           )}
diff --git a/apps/core/app/(default)/product/[slug]/static/page.tsx b/apps/core/app/(default)/product/[slug]/static/page.tsx
new file mode 100644
index 00000000..95684aeb
--- /dev/null
+++ b/apps/core/app/(default)/product/[slug]/static/page.tsx
@@ -0,0 +1,17 @@
+import { getFeaturedProducts } from '~/client/queries/getFeaturedProducts';
+
+import ProductPage from '../page';
+
+export { generateMetadata } from '../page';
+export default ProductPage;
+
+export async function generateStaticParams() {
+  const products = await getFeaturedProducts();
+
+  return products.map((product) => ({
+    slug: product.entityId.toString(),
+  }));
+}
+
+export const dynamic = 'force-static';
+export const revalidate = 600;
diff --git a/apps/core/app/(default)/static/page.tsx b/apps/core/app/(default)/static/page.tsx
new file mode 100644
index 00000000..72914522
--- /dev/null
+++ b/apps/core/app/(default)/static/page.tsx
@@ -0,0 +1,6 @@
+import HomePage from '../page';
+
+export default HomePage;
+
+export const dynamic = 'force-static';
+export const revalidate = 600;
diff --git a/apps/core/app/favicon.ico b/apps/core/app/favicon.ico
index 718d6fea4835ec2d246af9800eddb7ffb276240c..6b0de8079fdad54237f0cd875fecc2b7a9106e85 100644
GIT binary patch
literal 1546
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD3?#3*wF4y>+X8$-TzxVN4Rvit(ZGhl`zami
zz=&xq3GxeO`1gmI@z-i5mfwGS%M>POHZ1tg+WB)v-||_)wpr5a%fD?tHoNh~>nB^~
zx$XGnemq_CPGmj@Ppjizwk<37wCf9e3O`YwptP3#!u{F<J+aPhZ_mX%@3N6?aoZm6
z>QxarCnMKSlxxCeV~y-X>iN8(2b(uuwST!(r8=c!lGBQkTe~DL9B1xlU|`<l>EalY
zac}F4@NyA%f!2Kg@2i$et0a_9RaKc-eC`1cpG5<&S~KrCHLLX5zt8_&Fn8|ExqEhp
zt}j0KcbQeleJux#HI~-zEjKDG&p&^;dfmyF@(Yz~6_(i_6!WY~tPP5qf9cnhYs<IT
zE&Zyw)<3h>>vb?GLh^D63D0)Cnp503i9uq{9*6tFAJ6s6CKOiv3)z1At>4+)+pb0*
zijMNJf2-dx+fKs#K+Efeygd8<yi2#*$kW5eyYGkMe1m1?H(S`GB~CChNGI9#8@N4g
z6_&r;&&P2&@v*+t_7%tGH=1?I+&ixq^tkm#$*Z+z1K;eZ`6!e#Um!`ddeW?QpYOf=
zVzlF}dg8D6c-hj)x@xx_Ppc|D$aP_9zFwAEw$SjvQq?Oa_KkfE@Api%bYILQQJ}~6
z=C&?lg`DohqX(~U)E8vV>ovNtWBT4qW#(l+SrSWp(%tNrP0oEEba4IrZ_`dZI(G3*
z=(=$2+(5Rj`|o?VEoh!OC+oV0JlkCRI?H`a<>$ZsadOtYe~~sPR+g^Ws>fY_P^2z)
z`E9;;+lsSdc^gbEjD_DOFPr5Se&E6P%%yFW1#31Izd6>xB>eex*t6e@qyF_upJJ3+
zzA`FnhWmXf>w{Od8V+u}xtOPoVa;#<a8?GMY1i8dL~ZM5Gref^HLDH3nEOUc>3__u
z#*4M#hF33ye)(G|lrYcsPff7>w0AYahup3Q=4U_AO8PI)tivZKwZqrmu8Tve+jpAA
z#dsCQ$?Z)cYlFMI3wPRu-w##!JzZqM)Jpza_rDcgs90>Ka8-UOL-Tva=sS0QXKnaX
zbyi&WZv9kdA%Ce4d3(((7wlin^rn+RtlB6$WO=;~yG5O-Y*O!b<Lf*9>Z7;<`s9xu
z&sgimcJrS(t3*i|W52sNBU^qLbJ4HYlag26s8j9HzSlT+>T-?s_5RbkK5U<9zx>gT
zPY;X!|6lkqbLr|6bNQ!C&z`&C{q@x~f&cy}vT|@o%QUwh7L^n^W1eMW@p|72*H(S4
zS@W+jmuz@(s(Q<zpFXk;Zy$VoSoAp5=Ko3-3E8MO_h&9YZ}nOAc;p<8?!$*3+{jr_
zb8~UL+5VzAy5|$_Ke}>tQKR47pEI8C|G#EU&YAA1z2Ecm?2CI-F5X#v@y}X=J;6(b
z*L&4IJ+-JL!@TeR`dL<8ufTbt<)XXFSI)oNSJ)ZG8}!LYFIemHRWxc5!~4Q{aRKxH
jCq9%pS`@J7!>4*?j#W8Xn?)u8ixLJ;S3j3^P6<r_zEgh$

literal 25931
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
LrJugUA?W`A8`#=m

diff --git a/apps/core/app/not-found.tsx b/apps/core/app/not-found.tsx
index a7e03c43..a74422ff 100644
--- a/apps/core/app/not-found.tsx
+++ b/apps/core/app/not-found.tsx
@@ -1,4 +1,4 @@
-import { Message } from '@bigcommerce/reactant/Message';
+import { Message } from '@bigcommerce/components/Message';
 import { ShoppingCart } from 'lucide-react';
 
 import { SearchForm } from 'components/SearchForm';
diff --git a/apps/core/auth.ts b/apps/core/auth.ts
index b1ba3eaf..881bcdff 100644
--- a/apps/core/auth.ts
+++ b/apps/core/auth.ts
@@ -88,13 +88,17 @@ const config = {
 const { handlers, auth, signIn, signOut, update } = NextAuth(config);
 
 const getSessionCustomerId = async () => {
-  const session = await auth();
+  try {
+    const session = await auth();
 
-  if (!session?.user?.id) {
-    return;
-  }
+    if (!session?.user?.id) {
+      return;
+    }
 
-  return session.user.id;
+    return session.user.id;
+  } catch {
+    // No empty
+  }
 };
 
 export { handlers, auth, signIn, signOut, update, getSessionCustomerId };
diff --git a/apps/core/client/queries/getCategory.ts b/apps/core/client/queries/getCategory.ts
index 2134293a..9f2e13cf 100644
--- a/apps/core/client/queries/getCategory.ts
+++ b/apps/core/client/queries/getCategory.ts
@@ -76,6 +76,7 @@ export const getCategory = cache(
     const response = await client.fetch({
       document: query,
       variables: { categoryId, breadcrumbDepth, ...paginationArgs },
+      customerId,
       fetchOptions: {
         cache: customerId ? 'no-store' : 'force-cache',
       },
diff --git a/apps/core/client/queries/getCategoryTree.ts b/apps/core/client/queries/getCategoryTree.ts
index ec628d6d..88978f8a 100644
--- a/apps/core/client/queries/getCategoryTree.ts
+++ b/apps/core/client/queries/getCategoryTree.ts
@@ -34,6 +34,7 @@ export const getCategoryTree = cache(async (categoryId?: number) => {
   const response = await client.fetch({
     document: query,
     variables: { categoryId },
+    customerId,
     fetchOptions: {
       cache: customerId ? 'no-store' : 'force-cache',
     },
diff --git a/apps/core/components/BlogPostCard/index.tsx b/apps/core/components/BlogPostCard/index.tsx
index bc28bb1e..a811c068 100644
--- a/apps/core/components/BlogPostCard/index.tsx
+++ b/apps/core/components/BlogPostCard/index.tsx
@@ -5,8 +5,8 @@ import {
   BlogPostDate,
   BlogPostImage,
   BlogPostTitle,
-  BlogPostCard as ReactantBlogPostCard,
-} from '@bigcommerce/reactant/BlogPostCard';
+  BlogPostCard as ComponentsBlogPostCard,
+} from '@bigcommerce/components/BlogPostCard';
 import Image from 'next/image';
 
 import { getBlogPosts } from '~/client/queries/getBlogPosts';
@@ -18,7 +18,7 @@ interface BlogPostCardProps {
 }
 
 export const BlogPostCard = ({ blogPost }: BlogPostCardProps) => (
-  <ReactantBlogPostCard>
+  <ComponentsBlogPostCard>
     {blogPost.thumbnailImage ? (
       <BlogPostImage>
         <Link className="block w-full" href={`/blog/${blogPost.entityId}`}>
@@ -52,5 +52,5 @@ export const BlogPostCard = ({ blogPost }: BlogPostCardProps) => (
       {new Intl.DateTimeFormat('en-US').format(new Date(blogPost.publishedDate.utc))}
     </BlogPostDate>
     {blogPost.author ? <BlogPostAuthor>, by {blogPost.author}</BlogPostAuthor> : null}
-  </ReactantBlogPostCard>
+  </ComponentsBlogPostCard>
 );
diff --git a/apps/core/components/CompareDrawer/index.tsx b/apps/core/components/CompareDrawer/index.tsx
index 31e63f46..a7ee8e52 100644
--- a/apps/core/components/CompareDrawer/index.tsx
+++ b/apps/core/components/CompareDrawer/index.tsx
@@ -5,8 +5,8 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from '@bigcommerce/reactant/Accordion';
-import { Button } from '@bigcommerce/reactant/Button';
+} from '@bigcommerce/components/Accordion';
+import { Button } from '@bigcommerce/components/Button';
 import { X } from 'lucide-react';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
diff --git a/apps/core/components/Footer/Footer.tsx b/apps/core/components/Footer/Footer.tsx
index 3d23fb69..497bf40d 100644
--- a/apps/core/components/Footer/Footer.tsx
+++ b/apps/core/components/Footer/Footer.tsx
@@ -1,4 +1,8 @@
-import { FooterNav, FooterSection, Footer as ReactantFooter } from '@bigcommerce/reactant/Footer';
+import {
+  Footer as ComponentsFooter,
+  FooterNav,
+  FooterSection,
+} from '@bigcommerce/components/Footer';
 import React from 'react';
 
 import { AvailableWebPages, getWebPages } from '~/client/queries/getWebPages';
@@ -48,7 +52,7 @@ const WebPageFooterMenu = () => {
 
 export const Footer = () => {
   return (
-    <ReactantFooter>
+    <ComponentsFooter>
       <FooterSection>
         <FooterNav>
           <CategoryFooterMenu />
@@ -67,6 +71,6 @@ export const Footer = () => {
         <PaymentMethods />
         <Copyright />
       </FooterSection>
-    </ReactantFooter>
+    </ComponentsFooter>
   );
 };
diff --git a/apps/core/components/Footer/FooterMenus/BaseFooterMenu.tsx b/apps/core/components/Footer/FooterMenus/BaseFooterMenu.tsx
index f06619a2..44b93525 100644
--- a/apps/core/components/Footer/FooterMenus/BaseFooterMenu.tsx
+++ b/apps/core/components/Footer/FooterMenus/BaseFooterMenu.tsx
@@ -1,4 +1,4 @@
-import { FooterNavGroupList, FooterNavLink } from '@bigcommerce/reactant/Footer';
+import { FooterNavGroupList, FooterNavLink } from '@bigcommerce/components/Footer';
 import React, { ComponentPropsWithoutRef } from 'react';
 
 import { Link } from '~/components/Link';
diff --git a/apps/core/components/Footer/SocialIcons.tsx b/apps/core/components/Footer/SocialIcons.tsx
index 8e57f5e5..a673f1d0 100644
--- a/apps/core/components/Footer/SocialIcons.tsx
+++ b/apps/core/components/Footer/SocialIcons.tsx
@@ -1,4 +1,4 @@
-import { FooterNav, FooterNavGroupList, FooterNavLink } from '@bigcommerce/reactant/Footer';
+import { FooterNav, FooterNavGroupList, FooterNavLink } from '@bigcommerce/components/Footer';
 import {
   SiFacebook,
   SiInstagram,
diff --git a/apps/core/components/Forbidden/index.tsx b/apps/core/components/Forbidden/index.tsx
index 2f38afc5..0ce77c75 100644
--- a/apps/core/components/Forbidden/index.tsx
+++ b/apps/core/components/Forbidden/index.tsx
@@ -1,4 +1,4 @@
-import { Message } from '@bigcommerce/reactant/Message';
+import { Message } from '@bigcommerce/components/Message';
 
 import { SearchForm } from 'components/SearchForm';
 import { getFeaturedProducts } from '~/client/queries/getFeaturedProducts';
diff --git a/apps/core/components/Forms/ContactUs.tsx b/apps/core/components/Forms/ContactUs.tsx
index 80c7a563..cad3b63c 100644
--- a/apps/core/components/Forms/ContactUs.tsx
+++ b/apps/core/components/Forms/ContactUs.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import {
   Field,
   FieldControl,
@@ -6,10 +6,10 @@ import {
   FieldMessage,
   Form,
   FormSubmit,
-} from '@bigcommerce/reactant/Form';
-import { Input } from '@bigcommerce/reactant/Input';
-import { Message } from '@bigcommerce/reactant/Message';
-import { TextArea } from '@bigcommerce/reactant/TextArea';
+} from '@bigcommerce/components/Form';
+import { Input } from '@bigcommerce/components/Input';
+import { Message } from '@bigcommerce/components/Message';
+import { TextArea } from '@bigcommerce/components/TextArea';
 import { Loader2 as Spinner } from 'lucide-react';
 import { ChangeEvent, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
diff --git a/apps/core/components/Header/cart.tsx b/apps/core/components/Header/cart.tsx
index 47141d28..11f7ce8f 100644
--- a/apps/core/components/Header/cart.tsx
+++ b/apps/core/components/Header/cart.tsx
@@ -1,5 +1,5 @@
-import { Badge } from '@bigcommerce/reactant/Badge';
-import { NavigationMenuLink } from '@bigcommerce/reactant/NavigationMenu';
+import { Badge } from '@bigcommerce/components/Badge';
+import { NavigationMenuLink } from '@bigcommerce/components/NavigationMenu';
 import { ShoppingCart } from 'lucide-react';
 import { cookies } from 'next/headers';
 import { ReactNode } from 'react';
diff --git a/apps/core/components/Header/index.tsx b/apps/core/components/Header/index.tsx
index 7eaf7d10..f5361a47 100644
--- a/apps/core/components/Header/index.tsx
+++ b/apps/core/components/Header/index.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import {
   NavigationMenu,
   NavigationMenuCollapsed,
@@ -8,7 +8,7 @@ import {
   NavigationMenuList,
   NavigationMenuToggle,
   NavigationMenuTrigger,
-} from '@bigcommerce/reactant/NavigationMenu';
+} from '@bigcommerce/components/NavigationMenu';
 import { ChevronDown, LogOut, ShoppingCart, User } from 'lucide-react';
 import { ReactNode, Suspense } from 'react';
 
@@ -115,7 +115,7 @@ export const Header = async ({ cart }: { cart: ReactNode }) => {
   return (
     <header>
       <NavigationMenu>
-        <NavigationMenuLink asChild className="px-0">
+        <NavigationMenuLink asChild className="shrink-0 px-0">
           <Link href="/">
             <StoreLogo />
           </Link>
diff --git a/apps/core/components/Hero/index.tsx b/apps/core/components/Hero/index.tsx
index 154edb8d..9ff2444f 100644
--- a/apps/core/components/Hero/index.tsx
+++ b/apps/core/components/Hero/index.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import {
   Slideshow,
   SlideshowAutoplayControl,
@@ -8,7 +8,7 @@ import {
   SlideshowPagination,
   SlideshowPreviousIndicator,
   SlideshowSlide,
-} from '@bigcommerce/reactant/Slideshow';
+} from '@bigcommerce/components/Slideshow';
 import Image from 'next/image';
 
 import SlideshowBG from './slideshow-bg-01.jpg';
diff --git a/apps/core/components/Pricing/index.tsx b/apps/core/components/Pricing/index.tsx
index 578a212d..f3557a63 100644
--- a/apps/core/components/Pricing/index.tsx
+++ b/apps/core/components/Pricing/index.tsx
@@ -32,20 +32,17 @@ export const Pricing = ({ prices }: { prices: Product['prices'] }) => {
               <br />
             </>
           )}
-          {prices.basePrice?.value !== undefined &&
-            (prices.salePrice?.value ? (
-              <>
-                Was:{' '}
-                <span className="line-through">
-                  {currencyFormatter.format(prices.basePrice.value)}
-                </span>
-                <br />
-              </>
-            ) : (
-              currencyFormatter.format(prices.basePrice.value)
-            ))}
-          {prices.salePrice?.value !== undefined && (
-            <>Now: {currencyFormatter.format(prices.salePrice.value)}</>
+          {prices.salePrice?.value !== undefined && prices.basePrice?.value !== undefined ? (
+            <>
+              Was:{' '}
+              <span className="line-through">
+                {currencyFormatter.format(prices.basePrice.value)}
+              </span>
+              <br />
+              <>Now: {currencyFormatter.format(prices.salePrice.value)}</>
+            </>
+          ) : (
+            prices.price?.value && <>{currencyFormatter.format(prices.price.value)}</>
           )}
         </>
       )}
diff --git a/apps/core/components/ProductCard/AddToCart.tsx b/apps/core/components/ProductCard/AddToCart.tsx
index 2d637aae..b91389da 100644
--- a/apps/core/components/ProductCard/AddToCart.tsx
+++ b/apps/core/components/ProductCard/AddToCart.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { Button } from '@bigcommerce/reactant/Button';
-import { ShoppingCart, Loader2 as Spinner } from 'lucide-react';
+import { Button } from '@bigcommerce/components/Button';
+import { Loader2 as Spinner } from 'lucide-react';
 import { useFormStatus } from 'react-dom';
 
 export const AddToCart = ({ disabled = false }: { disabled?: boolean }) => {
@@ -15,10 +15,7 @@ export const AddToCart = ({ disabled = false }: { disabled?: boolean }) => {
           <span className="sr-only">Processing...</span>
         </>
       ) : (
-        <>
-          <ShoppingCart aria-hidden="true" className="mx-2" />
-          <span>Add to Cart</span>
-        </>
+        'Add to cart'
       )}
     </Button>
   );
diff --git a/apps/core/components/ProductCard/Compare.tsx b/apps/core/components/ProductCard/Compare.tsx
index b7aa3cc1..a1687ead 100644
--- a/apps/core/components/ProductCard/Compare.tsx
+++ b/apps/core/components/ProductCard/Compare.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { Checkbox } from '@bigcommerce/reactant/Checkbox';
-import { Label } from '@bigcommerce/reactant/Label';
+import { Checkbox } from '@bigcommerce/components/Checkbox';
+import { Label } from '@bigcommerce/components/Label';
 import { useEffect, useId, useState } from 'react';
 
 import { useCompareProductsContext } from '../../app/contexts/CompareProductsContext';
diff --git a/apps/core/components/ProductCard/index.tsx b/apps/core/components/ProductCard/index.tsx
index d90cb44d..f2420928 100644
--- a/apps/core/components/ProductCard/index.tsx
+++ b/apps/core/components/ProductCard/index.tsx
@@ -1,12 +1,12 @@
 import {
+  ProductCard as ComponentsProductCard,
   ProductCardImage,
   ProductCardInfo,
   ProductCardInfoBrandName,
   ProductCardInfoPrice,
   ProductCardInfoProductName,
-  ProductCard as ReactantProductCard,
-} from '@bigcommerce/reactant/ProductCard';
-import { Rating } from '@bigcommerce/reactant/Rating';
+} from '@bigcommerce/components/ProductCard';
+import { Rating } from '@bigcommerce/components/Rating';
 import Image from 'next/image';
 import { useId } from 'react';
 
@@ -89,7 +89,7 @@ export const ProductCard = ({
   }
 
   return (
-    <ReactantProductCard key={product.entityId}>
+    <ComponentsProductCard key={product.entityId}>
       <ProductCardImage>
         <div
           className={cn('relative flex-auto', {
@@ -165,6 +165,6 @@ export const ProductCard = ({
         </div>
       </ProductCardInfo>
       {showCart && <Cart product={product} />}
-    </ReactantProductCard>
+    </ComponentsProductCard>
   );
 };
diff --git a/apps/core/components/ProductCardCarousel/Pagination.tsx b/apps/core/components/ProductCardCarousel/Pagination.tsx
index 61ec08ef..dc30ae6c 100644
--- a/apps/core/components/ProductCardCarousel/Pagination.tsx
+++ b/apps/core/components/ProductCardCarousel/Pagination.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { CarouselPagination, CarouselPaginationTab } from '@bigcommerce/reactant/Carousel';
+import { CarouselPagination, CarouselPaginationTab } from '@bigcommerce/components/Carousel';
 
 import { Product } from '../ProductCard';
 
diff --git a/apps/core/components/ProductCardCarousel/index.tsx b/apps/core/components/ProductCardCarousel/index.tsx
index 82c5502a..a701e152 100644
--- a/apps/core/components/ProductCardCarousel/index.tsx
+++ b/apps/core/components/ProductCardCarousel/index.tsx
@@ -4,7 +4,7 @@ import {
   CarouselNextIndicator,
   CarouselPreviousIndicator,
   CarouselSlide,
-} from '@bigcommerce/reactant/Carousel';
+} from '@bigcommerce/components/Carousel';
 import { useId } from 'react';
 
 import { Product, ProductCard } from '../ProductCard';
diff --git a/apps/core/components/ProductForm/AddToCart.tsx b/apps/core/components/ProductForm/AddToCart.tsx
index 5e4f7f08..a32d1ee2 100644
--- a/apps/core/components/ProductForm/AddToCart.tsx
+++ b/apps/core/components/ProductForm/AddToCart.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import { ShoppingCart, Loader2 as Spinner } from 'lucide-react';
 import { useFormContext } from 'react-hook-form';
 
@@ -18,7 +18,7 @@ export const AddToCart = ({ disabled = false }: { disabled?: boolean }) => {
       ) : (
         <>
           <ShoppingCart aria-hidden="true" className="mx-2" />
-          <span>Add to Cart</span>
+          <span>Add to cart</span>
         </>
       )}
     </Button>
diff --git a/apps/core/components/ProductForm/Fields/CheckboxField.tsx b/apps/core/components/ProductForm/Fields/CheckboxField.tsx
index b994f987..ffd985c4 100644
--- a/apps/core/components/ProductForm/Fields/CheckboxField.tsx
+++ b/apps/core/components/ProductForm/Fields/CheckboxField.tsx
@@ -1,5 +1,5 @@
-import { Checkbox } from '@bigcommerce/reactant/Checkbox';
-import { Label } from '@bigcommerce/reactant/Label';
+import { Checkbox } from '@bigcommerce/components/Checkbox';
+import { Label } from '@bigcommerce/components/Label';
 
 import { getProduct } from '~/client/queries/getProduct';
 import { ExistingResultType, Unpacked } from '~/client/util';
diff --git a/apps/core/components/ProductForm/Fields/DateField.tsx b/apps/core/components/ProductForm/Fields/DateField.tsx
index 4bf5fd7e..9651aa7b 100644
--- a/apps/core/components/ProductForm/Fields/DateField.tsx
+++ b/apps/core/components/ProductForm/Fields/DateField.tsx
@@ -1,5 +1,5 @@
-import { DatePicker } from '@bigcommerce/reactant/DatePicker';
-import { Label } from '@bigcommerce/reactant/Label';
+import { DatePicker } from '@bigcommerce/components/DatePicker';
+import { Label } from '@bigcommerce/components/Label';
 
 import { getProduct } from '~/client/queries/getProduct';
 import { ExistingResultType, Unpacked } from '~/client/util';
diff --git a/apps/core/components/ProductForm/Fields/MultiLineTextField.tsx b/apps/core/components/ProductForm/Fields/MultiLineTextField.tsx
index 5346d44d..1f5eefe6 100644
--- a/apps/core/components/ProductForm/Fields/MultiLineTextField.tsx
+++ b/apps/core/components/ProductForm/Fields/MultiLineTextField.tsx
@@ -1,5 +1,5 @@
-import { Label } from '@bigcommerce/reactant/Label';
-import { TextArea } from '@bigcommerce/reactant/TextArea';
+import { Label } from '@bigcommerce/components/Label';
+import { TextArea } from '@bigcommerce/components/TextArea';
 
 import { getProduct } from '~/client/queries/getProduct';
 import { ExistingResultType, Unpacked } from '~/client/util';
diff --git a/apps/core/components/ProductForm/Fields/MultipleChoiceField.tsx b/apps/core/components/ProductForm/Fields/MultipleChoiceField.tsx
index 405295f6..4debbc88 100644
--- a/apps/core/components/ProductForm/Fields/MultipleChoiceField.tsx
+++ b/apps/core/components/ProductForm/Fields/MultipleChoiceField.tsx
@@ -1,9 +1,9 @@
-import { Label } from '@bigcommerce/reactant/Label';
-import { PickList, PickListItem } from '@bigcommerce/reactant/PickList';
-import { RadioGroup, RadioItem } from '@bigcommerce/reactant/RadioGroup';
-import { RectangleList, RectangleListItem } from '@bigcommerce/reactant/RectangleList';
-import { Select, SelectContent, SelectItem } from '@bigcommerce/reactant/Select';
-import { Swatch, SwatchItem } from '@bigcommerce/reactant/Swatch';
+import { Label } from '@bigcommerce/components/Label';
+import { PickList, PickListItem } from '@bigcommerce/components/PickList';
+import { RadioGroup, RadioItem } from '@bigcommerce/components/RadioGroup';
+import { RectangleList, RectangleListItem } from '@bigcommerce/components/RectangleList';
+import { Select, SelectContent, SelectItem } from '@bigcommerce/components/Select';
+import { Swatch, SwatchItem } from '@bigcommerce/components/Swatch';
 import Image from 'next/image';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
diff --git a/apps/core/components/ProductForm/Fields/NumberField.tsx b/apps/core/components/ProductForm/Fields/NumberField.tsx
index 92e5a7ac..a3e2d58c 100644
--- a/apps/core/components/ProductForm/Fields/NumberField.tsx
+++ b/apps/core/components/ProductForm/Fields/NumberField.tsx
@@ -1,5 +1,5 @@
-import { Counter } from '@bigcommerce/reactant/Counter';
-import { Label } from '@bigcommerce/reactant/Label';
+import { Counter } from '@bigcommerce/components/Counter';
+import { Label } from '@bigcommerce/components/Label';
 
 import { getProduct } from '~/client/queries/getProduct';
 import { ExistingResultType, Unpacked } from '~/client/util';
diff --git a/apps/core/components/ProductForm/Fields/QuantityField.tsx b/apps/core/components/ProductForm/Fields/QuantityField.tsx
index ee7dbb3e..92d2aeaf 100644
--- a/apps/core/components/ProductForm/Fields/QuantityField.tsx
+++ b/apps/core/components/ProductForm/Fields/QuantityField.tsx
@@ -1,5 +1,5 @@
-import { Counter } from '@bigcommerce/reactant/Counter';
-import { Label } from '@bigcommerce/reactant/Label';
+import { Counter } from '@bigcommerce/components/Counter';
+import { Label } from '@bigcommerce/components/Label';
 
 import { useProductFieldController } from '../useProductForm';
 
diff --git a/apps/core/components/ProductForm/Fields/TextField.tsx b/apps/core/components/ProductForm/Fields/TextField.tsx
index 0acc683e..27f828c0 100644
--- a/apps/core/components/ProductForm/Fields/TextField.tsx
+++ b/apps/core/components/ProductForm/Fields/TextField.tsx
@@ -1,5 +1,5 @@
-import { Input } from '@bigcommerce/reactant/Input';
-import { Label } from '@bigcommerce/reactant/Label';
+import { Input } from '@bigcommerce/components/Input';
+import { Label } from '@bigcommerce/components/Label';
 
 import { getProduct } from '~/client/queries/getProduct';
 import { ExistingResultType, Unpacked } from '~/client/util';
diff --git a/apps/core/components/ProductForm/index.tsx b/apps/core/components/ProductForm/index.tsx
index 557b0deb..a198536a 100644
--- a/apps/core/components/ProductForm/index.tsx
+++ b/apps/core/components/ProductForm/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import { AlertCircle, Check, Heart } from 'lucide-react';
 import { FormProvider } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
diff --git a/apps/core/components/ProductSheet/index.tsx b/apps/core/components/ProductSheet/index.tsx
index cf4d0b5f..4dfa6684 100644
--- a/apps/core/components/ProductSheet/index.tsx
+++ b/apps/core/components/ProductSheet/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { Button } from '@bigcommerce/reactant/Button';
-import { Rating } from '@bigcommerce/reactant/Rating';
+import { Button } from '@bigcommerce/components/Button';
+import { Rating } from '@bigcommerce/components/Rating';
 import {
   Sheet,
   SheetClose,
@@ -10,7 +10,7 @@ import {
   SheetOverlay,
   SheetTitle,
   SheetTrigger,
-} from '@bigcommerce/reactant/Sheet';
+} from '@bigcommerce/components/Sheet';
 import { Loader2 as Spinner } from 'lucide-react';
 import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
@@ -154,24 +154,20 @@ export const ProductSheetContent = ({ productId }: { productId: number }) => {
                         </span>
                       </p>
                     )}
-                    {product.prices.basePrice?.value !== undefined && (
-                      <p className="text-h4">
-                        {product.prices.salePrice?.value ? (
-                          <>
-                            Was:{' '}
-                            <span className="line-through">
-                              {currencyFormatter.format(product.prices.basePrice.value)}
-                            </span>
-                          </>
-                        ) : (
-                          currencyFormatter.format(product.prices.basePrice.value)
-                        )}
-                      </p>
-                    )}
-                    {product.prices.salePrice?.value !== undefined && (
-                      <p className="text-h4">
-                        Now: {currencyFormatter.format(product.prices.salePrice.value)}
-                      </p>
+                    {product.prices.salePrice?.value !== undefined &&
+                    product.prices.basePrice?.value !== undefined ? (
+                      <>
+                        Was:{' '}
+                        <span className="line-through">
+                          {currencyFormatter.format(product.prices.basePrice.value)}
+                        </span>
+                        <br />
+                        <>Now: {currencyFormatter.format(product.prices.salePrice.value)}</>
+                      </>
+                    ) : (
+                      product.prices.price.value && (
+                        <>{currencyFormatter.format(product.prices.price.value)}</>
+                      )
                     )}
                   </>
                 )}
diff --git a/apps/core/components/QuickSearch/index.tsx b/apps/core/components/QuickSearch/index.tsx
index ca5fa163..97d559ac 100644
--- a/apps/core/components/QuickSearch/index.tsx
+++ b/apps/core/components/QuickSearch/index.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { Button } from '@bigcommerce/reactant/Button';
-import { Field, FieldControl, Form } from '@bigcommerce/reactant/Form';
-import { Input, InputIcon } from '@bigcommerce/reactant/Input';
+import { Button } from '@bigcommerce/components/Button';
+import { Field, FieldControl, Form } from '@bigcommerce/components/Form';
+import { Input, InputIcon } from '@bigcommerce/components/Input';
 import {
   Sheet,
   SheetClose,
@@ -10,7 +10,7 @@ import {
   SheetOverlay,
   SheetTitle,
   SheetTrigger,
-} from '@bigcommerce/reactant/Sheet';
+} from '@bigcommerce/components/Sheet';
 import debounce from 'lodash.debounce';
 import { Search, Loader2 as Spinner, X } from 'lucide-react';
 import Image from 'next/image';
diff --git a/apps/core/components/SearchForm/index.tsx b/apps/core/components/SearchForm/index.tsx
index 7accf174..6001b054 100644
--- a/apps/core/components/SearchForm/index.tsx
+++ b/apps/core/components/SearchForm/index.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { Button } from '@bigcommerce/reactant/Button';
-import { Field, FieldControl, Form, FormSubmit } from '@bigcommerce/reactant/Form';
-import { Input } from '@bigcommerce/reactant/Input';
+import { Button } from '@bigcommerce/components/Button';
+import { Field, FieldControl, Form, FormSubmit } from '@bigcommerce/components/Form';
+import { Input } from '@bigcommerce/components/Input';
 import { Loader2 as Spinner } from 'lucide-react';
 import { useFormStatus } from 'react-dom';
 
diff --git a/apps/core/middlewares/with-custom-urls.ts b/apps/core/middlewares/with-custom-urls.ts
index 118950e0..554a320c 100644
--- a/apps/core/middlewares/with-custom-urls.ts
+++ b/apps/core/middlewares/with-custom-urls.ts
@@ -1,5 +1,7 @@
+import { cookies } from 'next/headers';
 import { NextRequest, NextResponse } from 'next/server';
 
+import { getSessionCustomerId } from '~/auth';
 import { getRoute } from '~/client/queries/getRoute';
 
 import { kv } from '../lib/kv';
@@ -66,28 +68,44 @@ const getCustomUrlNode = async (request: NextRequest) => {
 export const withCustomUrls: MiddlewareFactory = (next) => {
   return async (request, event) => {
     const node = await getCustomUrlNode(request);
+    const customerId = await getSessionCustomerId();
+    const cartId = cookies().get('cartId');
+    let postfix = '';
+
+    if (!request.nextUrl.search && !customerId && !cartId && request.method === 'GET') {
+      postfix = '/static';
+    }
 
     switch (node?.__typename) {
       case 'Brand': {
-        const url = createRewriteUrl(`/brand/${node.entityId}`, request);
+        const url = createRewriteUrl(`/brand/${node.entityId}${postfix}`, request);
 
         return NextResponse.rewrite(url);
       }
 
       case 'Category': {
-        const url = createRewriteUrl(`/category/${node.entityId}`, request);
+        const url = createRewriteUrl(`/category/${node.entityId}${postfix}`, request);
 
         return NextResponse.rewrite(url);
       }
 
       case 'Product': {
-        const url = createRewriteUrl(`/product/${node.entityId}`, request);
+        const url = createRewriteUrl(`/product/${node.entityId}${postfix}`, request);
 
         return NextResponse.rewrite(url);
       }
 
-      default:
+      default: {
+        const { pathname } = new URL(request.url);
+
+        if (pathname === '/' && postfix) {
+          const url = createRewriteUrl(postfix, request);
+
+          return NextResponse.rewrite(url);
+        }
+
         return next(request, event);
+      }
     }
   };
 };
diff --git a/apps/core/next.config.js b/apps/core/next.config.js
index 7841d067..22c39ed3 100644
--- a/apps/core/next.config.js
+++ b/apps/core/next.config.js
@@ -10,13 +10,15 @@ const nextConfig = {
       },
     ],
   },
-  transpilePackages: ['@bigcommerce/reactant'],
+  transpilePackages: ['@bigcommerce/components'],
   typescript: {
     ignoreBuildErrors: !!process.env.CI,
   },
   eslint: {
     ignoreDuringBuilds: !!process.env.CI,
   },
+  // default URL generation in BigCommerce uses trailing slash
+  trailingSlash: process.env.TRAILING_SLASH !== 'false',
 };
 
 module.exports = nextConfig;
diff --git a/apps/core/package.json b/apps/core/package.json
index 4210ae50..85e7f967 100644
--- a/apps/core/package.json
+++ b/apps/core/package.json
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@bigcommerce/catalyst-client": "workspace:^",
-    "@bigcommerce/reactant": "workspace:^",
+    "@bigcommerce/components": "workspace:^",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@icons-pack/react-simple-icons": "^9.2.0",
     "@vercel/analytics": "^1.1.1",
diff --git a/apps/core/tailwind.config.js b/apps/core/tailwind.config.js
index cd726d0e..87915d53 100644
--- a/apps/core/tailwind.config.js
+++ b/apps/core/tailwind.config.js
@@ -1,12 +1,12 @@
-const reactantPreset = require('@bigcommerce/reactant/tailwind-config');
+const componentsPreset = require('@bigcommerce/components/tailwind-config');
 
 /** @type {import('tailwindcss').Config} */
 const config = {
-  presets: [reactantPreset],
+  presets: [componentsPreset],
   content: [
     './app/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
-    './node_modules/@bigcommerce/reactant/src/**/*.{ts,tsx}',
+    './node_modules/@bigcommerce/components/src/**/*.{ts,tsx}',
   ],
   plugins: [require('@tailwindcss/container-queries')],
 };
diff --git a/apps/core/tsconfig.json b/apps/core/tsconfig.json
index 5c0b0ceb..c403772e 100644
--- a/apps/core/tsconfig.json
+++ b/apps/core/tsconfig.json
@@ -27,7 +27,7 @@
     "baseUrl": ".",
     "paths": {
       "~/*": ["./*"],
-      "@bigcommerce/reactant/*": ["./node_modules/@bigcommerce/reactant/*"]
+      "@bigcommerce/components/*": ["./node_modules/@bigcommerce/components/*"]
     },
     "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
   },
diff --git a/apps/docs/.eslintrc.cjs b/apps/docs/.eslintrc.cjs
index dbd80f04..9f93a3e0 100644
--- a/apps/docs/.eslintrc.cjs
+++ b/apps/docs/.eslintrc.cjs
@@ -17,6 +17,7 @@ const config = {
         allow: ['__typename'],
       },
     ],
+    'check-file/filename-naming-convention': 'off',
   },
 };
 
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 53324cea..1622b75d 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/docs",
-  "description": "Reactant docs",
+  "description": "Components docs",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,7 +9,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@bigcommerce/reactant": "workspace:^",
+    "@bigcommerce/components": "workspace:^",
     "clsx": "^2.0.0",
     "lucide-react": "^0.294.0",
     "react": "^18.2.0",
diff --git a/apps/docs/stories/Accordion.stories.tsx b/apps/docs/stories/Accordion.stories.tsx
index d99b1f23..703ee380 100644
--- a/apps/docs/stories/Accordion.stories.tsx
+++ b/apps/docs/stories/Accordion.stories.tsx
@@ -3,7 +3,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from '@bigcommerce/reactant/Accordion';
+} from '@bigcommerce/components/Accordion';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Info } from 'lucide-react';
 
diff --git a/apps/docs/stories/Badge.stories.tsx b/apps/docs/stories/Badge.stories.tsx
index 724c7eac..59244762 100644
--- a/apps/docs/stories/Badge.stories.tsx
+++ b/apps/docs/stories/Badge.stories.tsx
@@ -1,4 +1,4 @@
-import { Badge } from '@bigcommerce/reactant/Badge';
+import { Badge } from '@bigcommerce/components/Badge';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ShoppingCart } from 'lucide-react';
 
diff --git a/apps/docs/stories/BlogPostCard.stories.tsx b/apps/docs/stories/BlogPostCard.stories.tsx
index 24e95b9b..e7c6a3b3 100644
--- a/apps/docs/stories/BlogPostCard.stories.tsx
+++ b/apps/docs/stories/BlogPostCard.stories.tsx
@@ -6,7 +6,7 @@ import {
   BlogPostDate,
   BlogPostImage,
   BlogPostTitle,
-} from '@bigcommerce/reactant/BlogPostCard';
+} from '@bigcommerce/components/BlogPostCard';
 import { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof BlogPostCard> = {
diff --git a/apps/docs/stories/Breadcrumbs.stories.tsx b/apps/docs/stories/Breadcrumbs.stories.tsx
index 2a99032a..49851d1a 100644
--- a/apps/docs/stories/Breadcrumbs.stories.tsx
+++ b/apps/docs/stories/Breadcrumbs.stories.tsx
@@ -1,4 +1,4 @@
-import { BreadcrumbDivider, BreadcrumbItem, Breadcrumbs } from '@bigcommerce/reactant/Breadcrumbs';
+import { BreadcrumbDivider, BreadcrumbItem, Breadcrumbs } from '@bigcommerce/components/Breadcrumbs';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ChevronRight } from 'lucide-react';
 
diff --git a/apps/docs/stories/Button.stories.tsx b/apps/docs/stories/Button.stories.tsx
index 3d8c7248..11a5e074 100644
--- a/apps/docs/stories/Button.stories.tsx
+++ b/apps/docs/stories/Button.stories.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Button> = {
diff --git a/apps/docs/stories/Calendar.stories.tsx b/apps/docs/stories/Calendar.stories.tsx
index cd0bee3c..20986524 100644
--- a/apps/docs/stories/Calendar.stories.tsx
+++ b/apps/docs/stories/Calendar.stories.tsx
@@ -1,4 +1,4 @@
-import { Calendar } from '@bigcommerce/reactant/Calendar';
+import { Calendar } from '@bigcommerce/components/Calendar';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
diff --git a/apps/docs/stories/Carousel.stories.tsx b/apps/docs/stories/Carousel.stories.tsx
index 9d07e9b4..210aa20f 100644
--- a/apps/docs/stories/Carousel.stories.tsx
+++ b/apps/docs/stories/Carousel.stories.tsx
@@ -6,7 +6,7 @@ import {
   CarouselPaginationTab,
   CarouselPreviousIndicator,
   CarouselSlide,
-} from '@bigcommerce/reactant/Carousel';
+} from '@bigcommerce/components/Carousel';
 import {
   ProductCard,
   ProductCardBadge,
@@ -15,7 +15,7 @@ import {
   ProductCardInfoBrandName,
   ProductCardInfoPrice,
   ProductCardInfoProductName,
-} from '@bigcommerce/reactant/ProductCard';
+} from '@bigcommerce/components/ProductCard';
 import { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Carousel> = {
diff --git a/apps/docs/stories/Checkbox.stories.tsx b/apps/docs/stories/Checkbox.stories.tsx
index 88384794..263b7bcf 100644
--- a/apps/docs/stories/Checkbox.stories.tsx
+++ b/apps/docs/stories/Checkbox.stories.tsx
@@ -1,5 +1,5 @@
-import { Checkbox } from '@bigcommerce/reactant/Checkbox';
-import { Label } from '@bigcommerce/reactant/Label';
+import { Checkbox } from '@bigcommerce/components/Checkbox';
+import { Label } from '@bigcommerce/components/Label';
 import type { Meta, StoryObj } from '@storybook/react';
 import { X } from 'lucide-react';
 
diff --git a/apps/docs/stories/Counter.stories.tsx b/apps/docs/stories/Counter.stories.tsx
index 41381677..9db30f2f 100644
--- a/apps/docs/stories/Counter.stories.tsx
+++ b/apps/docs/stories/Counter.stories.tsx
@@ -1,4 +1,4 @@
-import { Counter } from '@bigcommerce/reactant/Counter';
+import { Counter } from '@bigcommerce/components/Counter';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Counter> = {
@@ -20,6 +20,7 @@ export const Default: Story = {
     max: Infinity,
     min: 0,
     step: 1,
+    onChange: undefined,
   },
 };
 
diff --git a/apps/docs/stories/DatePicker.stories.tsx b/apps/docs/stories/DatePicker.stories.tsx
index bee57b28..59462abe 100644
--- a/apps/docs/stories/DatePicker.stories.tsx
+++ b/apps/docs/stories/DatePicker.stories.tsx
@@ -1,4 +1,4 @@
-import { DatePicker } from '@bigcommerce/reactant/DatePicker';
+import { DatePicker } from '@bigcommerce/components/DatePicker';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof DatePicker> = {
diff --git a/apps/docs/stories/FileChooser.stories.tsx b/apps/docs/stories/FileChooser.stories.tsx
index 0b02bcde..5b557ee5 100644
--- a/apps/docs/stories/FileChooser.stories.tsx
+++ b/apps/docs/stories/FileChooser.stories.tsx
@@ -1,5 +1,5 @@
-import { FileChooser } from '@bigcommerce/reactant/FileChooser';
-import { Label } from '@bigcommerce/reactant/Label';
+import { FileChooser } from '@bigcommerce/components/FileChooser';
+import { Label } from '@bigcommerce/components/Label';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof FileChooser> = {
diff --git a/apps/docs/stories/Footer.stories.tsx b/apps/docs/stories/Footer.stories.tsx
index 62dfe859..12003589 100644
--- a/apps/docs/stories/Footer.stories.tsx
+++ b/apps/docs/stories/Footer.stories.tsx
@@ -4,7 +4,7 @@ import {
   FooterNavGroupList,
   FooterNavLink,
   FooterSection,
-} from '@bigcommerce/reactant/Footer';
+} from '@bigcommerce/components/Footer';
 import { Meta, StoryObj } from '@storybook/react';
 import { FacebookIcon, InstagramIcon, TwitterIcon } from 'lucide-react';
 
diff --git a/apps/docs/stories/Form.stories.tsx b/apps/docs/stories/Form.stories.tsx
index e811f3ed..15f5f757 100644
--- a/apps/docs/stories/Form.stories.tsx
+++ b/apps/docs/stories/Form.stories.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import {
   BuiltInValidityState,
   Field,
@@ -8,10 +8,10 @@ import {
   FieldValidation,
   Form,
   FormSubmit,
-} from '@bigcommerce/reactant/Form';
-import { Input } from '@bigcommerce/reactant/Input';
-import { Select, SelectContent, SelectItem } from '@bigcommerce/reactant/Select';
-import { TextArea } from '@bigcommerce/reactant/TextArea';
+} from '@bigcommerce/components/Form';
+import { Input } from '@bigcommerce/components/Input';
+import { Select, SelectContent, SelectItem } from '@bigcommerce/components/Select';
+import { TextArea } from '@bigcommerce/components/TextArea';
 import type { Meta, StoryObj } from '@storybook/react';
 import { FormEvent } from 'react';
 
diff --git a/apps/docs/stories/Gallery.stories.tsx b/apps/docs/stories/Gallery.stories.tsx
index 2542ec57..0d124b90 100644
--- a/apps/docs/stories/Gallery.stories.tsx
+++ b/apps/docs/stories/Gallery.stories.tsx
@@ -8,7 +8,7 @@ import {
   GalleryThumbnail,
   GalleryThumbnailItem,
   GalleryThumbnailList,
-} from '@bigcommerce/reactant/Gallery';
+} from '@bigcommerce/components/Gallery';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-react';
 
diff --git a/apps/docs/stories/Input.stories.tsx b/apps/docs/stories/Input.stories.tsx
index 6a1afdfe..e2b7b14e 100644
--- a/apps/docs/stories/Input.stories.tsx
+++ b/apps/docs/stories/Input.stories.tsx
@@ -1,4 +1,4 @@
-import { Input, InputIcon } from '@bigcommerce/reactant/Input';
+import { Input, InputIcon } from '@bigcommerce/components/Input';
 import type { Meta, StoryObj } from '@storybook/react';
 import { CheckCircle } from 'lucide-react';
 
diff --git a/apps/docs/stories/Label.stories.tsx b/apps/docs/stories/Label.stories.tsx
index b01c054e..1695f338 100644
--- a/apps/docs/stories/Label.stories.tsx
+++ b/apps/docs/stories/Label.stories.tsx
@@ -1,5 +1,5 @@
-import { Input } from '@bigcommerce/reactant/Input';
-import { Label } from '@bigcommerce/reactant/Label';
+import { Input } from '@bigcommerce/components/Input';
+import { Label } from '@bigcommerce/components/Label';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Label> = {
diff --git a/apps/docs/stories/Message.stories.tsx b/apps/docs/stories/Message.stories.tsx
index f3ce4bb9..bad03937 100644
--- a/apps/docs/stories/Message.stories.tsx
+++ b/apps/docs/stories/Message.stories.tsx
@@ -1,4 +1,4 @@
-import { Message } from '@bigcommerce/reactant/Message';
+import { Message } from '@bigcommerce/components/Message';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Message> = {
diff --git a/apps/docs/stories/NavigationMenu.stories.tsx b/apps/docs/stories/NavigationMenu.stories.tsx
index 9be11f7b..5cad36e0 100644
--- a/apps/docs/stories/NavigationMenu.stories.tsx
+++ b/apps/docs/stories/NavigationMenu.stories.tsx
@@ -1,5 +1,5 @@
-import { Badge } from '@bigcommerce/reactant/Badge';
-import { cn } from '@bigcommerce/reactant/cn';
+import { Badge } from '@bigcommerce/components/Badge';
+import { cn } from '@bigcommerce/components/cn';
 import {
   NavigationMenu,
   NavigationMenuCollapsed,
@@ -9,7 +9,7 @@ import {
   NavigationMenuList,
   NavigationMenuToggle,
   NavigationMenuTrigger,
-} from '@bigcommerce/reactant/NavigationMenu';
+} from '@bigcommerce/components/NavigationMenu';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ChevronDown, MenuSquare, Search, ShoppingCart, User, XSquare } from 'lucide-react';
 
diff --git a/apps/docs/stories/PickList.stories.tsx b/apps/docs/stories/PickList.stories.tsx
index f7e3fed1..95aaf934 100644
--- a/apps/docs/stories/PickList.stories.tsx
+++ b/apps/docs/stories/PickList.stories.tsx
@@ -1,5 +1,5 @@
-import { Label } from '@bigcommerce/reactant/Label';
-import { PickList, PickListIndicator, PickListItem } from '@bigcommerce/reactant/PickList';
+import { Label } from '@bigcommerce/components/Label';
+import { PickList, PickListIndicator, PickListItem } from '@bigcommerce/components/PickList';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Paintbrush } from 'lucide-react';
 import { Fragment } from 'react';
diff --git a/apps/docs/stories/Popover.stories.tsx b/apps/docs/stories/Popover.stories.tsx
index 8d6f08af..578887d3 100644
--- a/apps/docs/stories/Popover.stories.tsx
+++ b/apps/docs/stories/Popover.stories.tsx
@@ -1,5 +1,5 @@
-import { Button } from '@bigcommerce/reactant/Button';
-import { Popover, PopoverContent, PopoverTrigger } from '@bigcommerce/reactant/Popover';
+import { Button } from '@bigcommerce/components/Button';
+import { Popover, PopoverContent, PopoverTrigger } from '@bigcommerce/components/Popover';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Popover> = {
diff --git a/apps/docs/stories/ProductCard.stories.tsx b/apps/docs/stories/ProductCard.stories.tsx
index 33257bf8..60da60ed 100644
--- a/apps/docs/stories/ProductCard.stories.tsx
+++ b/apps/docs/stories/ProductCard.stories.tsx
@@ -6,7 +6,7 @@ import {
   ProductCardInfoBrandName,
   ProductCardInfoPrice,
   ProductCardInfoProductName,
-} from '@bigcommerce/reactant/ProductCard';
+} from '@bigcommerce/components/ProductCard';
 import { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof ProductCard> = {
diff --git a/apps/docs/stories/RadioGroup.stories.tsx b/apps/docs/stories/RadioGroup.stories.tsx
index 23d1729f..ca545015 100644
--- a/apps/docs/stories/RadioGroup.stories.tsx
+++ b/apps/docs/stories/RadioGroup.stories.tsx
@@ -1,5 +1,5 @@
-import { Label } from '@bigcommerce/reactant/Label';
-import { RadioGroup, RadioIndicator, RadioItem } from '@bigcommerce/reactant/RadioGroup';
+import { Label } from '@bigcommerce/components/Label';
+import { RadioGroup, RadioIndicator, RadioItem } from '@bigcommerce/components/RadioGroup';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Paintbrush } from 'lucide-react';
 
diff --git a/apps/docs/stories/Rating.stories.tsx b/apps/docs/stories/Rating.stories.tsx
index 5577a21c..c59ca14f 100644
--- a/apps/docs/stories/Rating.stories.tsx
+++ b/apps/docs/stories/Rating.stories.tsx
@@ -1,4 +1,4 @@
-import { Rating } from '@bigcommerce/reactant/Rating';
+import { Rating } from '@bigcommerce/components/Rating';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Rating> = {
diff --git a/apps/docs/stories/RectangleList.stories.tsx b/apps/docs/stories/RectangleList.stories.tsx
index 2cbc6a9c..2f441503 100644
--- a/apps/docs/stories/RectangleList.stories.tsx
+++ b/apps/docs/stories/RectangleList.stories.tsx
@@ -1,5 +1,5 @@
-import { Label } from '@bigcommerce/reactant/Label';
-import { RectangleList, RectangleListItem } from '@bigcommerce/reactant/RectangleList';
+import { Label } from '@bigcommerce/components/Label';
+import { RectangleList, RectangleListItem } from '@bigcommerce/components/RectangleList';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof RectangleList> = {
diff --git a/apps/docs/stories/Select.stories.tsx b/apps/docs/stories/Select.stories.tsx
index f2ec0273..5c241425 100644
--- a/apps/docs/stories/Select.stories.tsx
+++ b/apps/docs/stories/Select.stories.tsx
@@ -1,4 +1,4 @@
-import { Select, SelectContent, SelectItem } from '@bigcommerce/reactant/Select';
+import { Select, SelectContent, SelectItem } from '@bigcommerce/components/Select';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Select> = {
diff --git a/apps/docs/stories/Sheet.stories.tsx b/apps/docs/stories/Sheet.stories.tsx
index c69f4ad0..c6dbf2f3 100644
--- a/apps/docs/stories/Sheet.stories.tsx
+++ b/apps/docs/stories/Sheet.stories.tsx
@@ -7,7 +7,7 @@ import {
   SheetOverlay,
   SheetTitle,
   SheetTrigger,
-} from '@bigcommerce/reactant/Sheet';
+} from '@bigcommerce/components/Sheet';
 import type { Meta, StoryObj } from '@storybook/react';
 
 // We need to remove these once we get variant types working with cva
diff --git a/apps/docs/stories/Skeleton.stories.tsx b/apps/docs/stories/Skeleton.stories.tsx
index 5f099a2b..233a9b50 100644
--- a/apps/docs/stories/Skeleton.stories.tsx
+++ b/apps/docs/stories/Skeleton.stories.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from '@bigcommerce/reactant/Skeleton';
+import { Skeleton } from '@bigcommerce/components/Skeleton';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Skeleton> = {
diff --git a/apps/docs/stories/Slideshow.stories.tsx b/apps/docs/stories/Slideshow.stories.tsx
index 0097877b..b3ccb62c 100644
--- a/apps/docs/stories/Slideshow.stories.tsx
+++ b/apps/docs/stories/Slideshow.stories.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import {
   Slideshow,
   SlideshowAutoplayControl,
@@ -8,7 +8,7 @@ import {
   SlideshowPagination,
   SlideshowPreviousIndicator,
   SlideshowSlide,
-} from '@bigcommerce/reactant/Slideshow';
+} from '@bigcommerce/components/Slideshow';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 
diff --git a/apps/docs/stories/Swatch.stories.tsx b/apps/docs/stories/Swatch.stories.tsx
index dbb86464..070238e2 100644
--- a/apps/docs/stories/Swatch.stories.tsx
+++ b/apps/docs/stories/Swatch.stories.tsx
@@ -1,5 +1,5 @@
-import { Label } from '@bigcommerce/reactant/Label';
-import { Swatch, SwatchItem } from '@bigcommerce/reactant/Swatch';
+import { Label } from '@bigcommerce/components/Label';
+import { Swatch, SwatchItem } from '@bigcommerce/components/Swatch';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Swatch> = {
diff --git a/apps/docs/stories/Tag.stories.tsx b/apps/docs/stories/Tag.stories.tsx
index 818d7736..edfb6e72 100644
--- a/apps/docs/stories/Tag.stories.tsx
+++ b/apps/docs/stories/Tag.stories.tsx
@@ -1,4 +1,4 @@
-import { Tag, TagAction, TagContent, TagProps } from '@bigcommerce/reactant/Tag';
+import { Tag, TagAction, TagContent, TagProps } from '@bigcommerce/components/Tag';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Tag> = {
diff --git a/apps/docs/stories/TextArea.stories.tsx b/apps/docs/stories/TextArea.stories.tsx
index f1b66441..47ea9734 100644
--- a/apps/docs/stories/TextArea.stories.tsx
+++ b/apps/docs/stories/TextArea.stories.tsx
@@ -1,4 +1,4 @@
-import { TextArea } from '@bigcommerce/reactant/TextArea';
+import { TextArea } from '@bigcommerce/components/TextArea';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof TextArea> = {
diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
index 2ba00da0..54ee2933 100644
--- a/apps/docs/tailwind.config.js
+++ b/apps/docs/tailwind.config.js
@@ -1,9 +1,9 @@
-const reactantPreset = require('@bigcommerce/reactant/tailwind-config');
+const componentsPreset = require('@bigcommerce/components/tailwind-config');
 
 /** @type {import('tailwindcss').Config} */
 const config = {
-  presets: [reactantPreset],
-  content: ['./stories/**/*.{ts,tsx}', './node_modules/@bigcommerce/reactant/src/**/*.{ts,tsx}'],
+  presets: [componentsPreset],
+  content: ['./stories/**/*.{ts,tsx}', './node_modules/@bigcommerce/components/src/**/*.{ts,tsx}'],
   plugins: [],
 };
 
diff --git a/packages/client/.eslintrc.cjs b/packages/client/.eslintrc.cjs
index 855b3475..113d9e5e 100644
--- a/packages/client/.eslintrc.cjs
+++ b/packages/client/.eslintrc.cjs
@@ -8,6 +8,7 @@ const config = {
     '@typescript-eslint/consistent-type-assertions': 'off',
     '@typescript-eslint/naming-convention': 'off',
     'no-underscore-dangle': ['error', { allow: ['__typename'] }],
+    'check-file/filename-naming-convention': 'off',
   },
   ignorePatterns: ['/src/generated/**', '/dist/**'],
 };
diff --git a/packages/reactant/.eslintrc.cjs b/packages/components/.eslintrc.cjs
similarity index 83%
rename from packages/reactant/.eslintrc.cjs
rename to packages/components/.eslintrc.cjs
index 9cc7abd3..1a13bfc9 100644
--- a/packages/reactant/.eslintrc.cjs
+++ b/packages/components/.eslintrc.cjs
@@ -14,6 +14,8 @@ const config = {
     '@next/next/no-html-link-for-pages': 'off',
     'import/dynamic-import-chunkname': 'off',
     'no-underscore-dangle': ['error', { allow: ['__typename'] }],
+    'check-file/filename-naming-convention': 'off',
+    'check-file/folder-naming-convention': 'off',
   },
 };
 
diff --git a/packages/reactant/package.json b/packages/components/package.json
similarity index 98%
rename from packages/reactant/package.json
rename to packages/components/package.json
index ee3b56b6..fd0d2e37 100644
--- a/packages/reactant/package.json
+++ b/packages/components/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@bigcommerce/reactant",
+  "name": "@bigcommerce/components",
   "description": "BigCommerce components for Catalyst.",
   "version": "0.1.0",
   "private": true,
diff --git a/packages/reactant/postcss.config.js b/packages/components/postcss.config.js
similarity index 100%
rename from packages/reactant/postcss.config.js
rename to packages/components/postcss.config.js
diff --git a/packages/reactant/prettier.config.js b/packages/components/prettier.config.js
similarity index 100%
rename from packages/reactant/prettier.config.js
rename to packages/components/prettier.config.js
diff --git a/packages/reactant/src/components/Accordion/Accordion.tsx b/packages/components/src/components/Accordion/Accordion.tsx
similarity index 100%
rename from packages/reactant/src/components/Accordion/Accordion.tsx
rename to packages/components/src/components/Accordion/Accordion.tsx
diff --git a/packages/reactant/src/components/Accordion/index.ts b/packages/components/src/components/Accordion/index.ts
similarity index 100%
rename from packages/reactant/src/components/Accordion/index.ts
rename to packages/components/src/components/Accordion/index.ts
diff --git a/packages/reactant/src/components/Badge/Badge.tsx b/packages/components/src/components/Badge/Badge.tsx
similarity index 100%
rename from packages/reactant/src/components/Badge/Badge.tsx
rename to packages/components/src/components/Badge/Badge.tsx
diff --git a/packages/reactant/src/components/Badge/index.ts b/packages/components/src/components/Badge/index.ts
similarity index 100%
rename from packages/reactant/src/components/Badge/index.ts
rename to packages/components/src/components/Badge/index.ts
diff --git a/packages/reactant/src/components/BlogPostCard/BlogPostCard.tsx b/packages/components/src/components/BlogPostCard/BlogPostCard.tsx
similarity index 100%
rename from packages/reactant/src/components/BlogPostCard/BlogPostCard.tsx
rename to packages/components/src/components/BlogPostCard/BlogPostCard.tsx
diff --git a/packages/reactant/src/components/BlogPostCard/index.ts b/packages/components/src/components/BlogPostCard/index.ts
similarity index 100%
rename from packages/reactant/src/components/BlogPostCard/index.ts
rename to packages/components/src/components/BlogPostCard/index.ts
diff --git a/packages/reactant/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/components/src/components/Breadcrumbs/Breadcrumbs.tsx
similarity index 100%
rename from packages/reactant/src/components/Breadcrumbs/Breadcrumbs.tsx
rename to packages/components/src/components/Breadcrumbs/Breadcrumbs.tsx
diff --git a/packages/reactant/src/components/Breadcrumbs/index.ts b/packages/components/src/components/Breadcrumbs/index.ts
similarity index 100%
rename from packages/reactant/src/components/Breadcrumbs/index.ts
rename to packages/components/src/components/Breadcrumbs/index.ts
diff --git a/packages/reactant/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx
similarity index 100%
rename from packages/reactant/src/components/Button/Button.tsx
rename to packages/components/src/components/Button/Button.tsx
diff --git a/packages/reactant/src/components/Button/index.ts b/packages/components/src/components/Button/index.ts
similarity index 100%
rename from packages/reactant/src/components/Button/index.ts
rename to packages/components/src/components/Button/index.ts
diff --git a/packages/reactant/src/components/Calendar/Calendar.tsx b/packages/components/src/components/Calendar/Calendar.tsx
similarity index 100%
rename from packages/reactant/src/components/Calendar/Calendar.tsx
rename to packages/components/src/components/Calendar/Calendar.tsx
diff --git a/packages/reactant/src/components/Calendar/index.ts b/packages/components/src/components/Calendar/index.ts
similarity index 100%
rename from packages/reactant/src/components/Calendar/index.ts
rename to packages/components/src/components/Calendar/index.ts
diff --git a/packages/reactant/src/components/Carousel/Carousel.tsx b/packages/components/src/components/Carousel/Carousel.tsx
similarity index 100%
rename from packages/reactant/src/components/Carousel/Carousel.tsx
rename to packages/components/src/components/Carousel/Carousel.tsx
diff --git a/packages/reactant/src/components/Carousel/index.ts b/packages/components/src/components/Carousel/index.ts
similarity index 100%
rename from packages/reactant/src/components/Carousel/index.ts
rename to packages/components/src/components/Carousel/index.ts
diff --git a/packages/reactant/src/components/Checkbox/Checkbox.tsx b/packages/components/src/components/Checkbox/Checkbox.tsx
similarity index 100%
rename from packages/reactant/src/components/Checkbox/Checkbox.tsx
rename to packages/components/src/components/Checkbox/Checkbox.tsx
diff --git a/packages/reactant/src/components/Checkbox/index.ts b/packages/components/src/components/Checkbox/index.ts
similarity index 100%
rename from packages/reactant/src/components/Checkbox/index.ts
rename to packages/components/src/components/Checkbox/index.ts
diff --git a/packages/reactant/src/components/Counter/Counter.tsx b/packages/components/src/components/Counter/Counter.tsx
similarity index 98%
rename from packages/reactant/src/components/Counter/Counter.tsx
rename to packages/components/src/components/Counter/Counter.tsx
index 105fdea1..dd1542fd 100644
--- a/packages/reactant/src/components/Counter/Counter.tsx
+++ b/packages/components/src/components/Counter/Counter.tsx
@@ -148,6 +148,10 @@ export const Counter = forwardRef<ElementRef<'div'>, CounterProps>(
           onBlur={(e) => {
             const valueAsNumber = e.target.valueAsNumber;
 
+            if (Number.isNaN(valueAsNumber)) {
+              return updateValue(min);
+            }
+
             if (valueAsNumber < min) {
               updateValue(min);
             } else if (valueAsNumber > max) {
diff --git a/packages/reactant/src/components/Counter/index.ts b/packages/components/src/components/Counter/index.ts
similarity index 100%
rename from packages/reactant/src/components/Counter/index.ts
rename to packages/components/src/components/Counter/index.ts
diff --git a/packages/reactant/src/components/DatePicker/DatePicker.tsx b/packages/components/src/components/DatePicker/DatePicker.tsx
similarity index 100%
rename from packages/reactant/src/components/DatePicker/DatePicker.tsx
rename to packages/components/src/components/DatePicker/DatePicker.tsx
diff --git a/packages/reactant/src/components/DatePicker/index.ts b/packages/components/src/components/DatePicker/index.ts
similarity index 100%
rename from packages/reactant/src/components/DatePicker/index.ts
rename to packages/components/src/components/DatePicker/index.ts
diff --git a/packages/reactant/src/components/FileChooser/FileChooser.tsx b/packages/components/src/components/FileChooser/FileChooser.tsx
similarity index 100%
rename from packages/reactant/src/components/FileChooser/FileChooser.tsx
rename to packages/components/src/components/FileChooser/FileChooser.tsx
diff --git a/packages/reactant/src/components/FileChooser/index.ts b/packages/components/src/components/FileChooser/index.ts
similarity index 100%
rename from packages/reactant/src/components/FileChooser/index.ts
rename to packages/components/src/components/FileChooser/index.ts
diff --git a/packages/reactant/src/components/Footer/Footer.tsx b/packages/components/src/components/Footer/Footer.tsx
similarity index 100%
rename from packages/reactant/src/components/Footer/Footer.tsx
rename to packages/components/src/components/Footer/Footer.tsx
diff --git a/packages/reactant/src/components/Footer/index.ts b/packages/components/src/components/Footer/index.ts
similarity index 100%
rename from packages/reactant/src/components/Footer/index.ts
rename to packages/components/src/components/Footer/index.ts
diff --git a/packages/reactant/src/components/Form/Form.tsx b/packages/components/src/components/Form/Form.tsx
similarity index 100%
rename from packages/reactant/src/components/Form/Form.tsx
rename to packages/components/src/components/Form/Form.tsx
diff --git a/packages/reactant/src/components/Form/index.ts b/packages/components/src/components/Form/index.ts
similarity index 100%
rename from packages/reactant/src/components/Form/index.ts
rename to packages/components/src/components/Form/index.ts
diff --git a/packages/reactant/src/components/Gallery/Gallery.tsx b/packages/components/src/components/Gallery/Gallery.tsx
similarity index 100%
rename from packages/reactant/src/components/Gallery/Gallery.tsx
rename to packages/components/src/components/Gallery/Gallery.tsx
diff --git a/packages/reactant/src/components/Gallery/index.ts b/packages/components/src/components/Gallery/index.ts
similarity index 100%
rename from packages/reactant/src/components/Gallery/index.ts
rename to packages/components/src/components/Gallery/index.ts
diff --git a/packages/reactant/src/components/Input/Input.tsx b/packages/components/src/components/Input/Input.tsx
similarity index 100%
rename from packages/reactant/src/components/Input/Input.tsx
rename to packages/components/src/components/Input/Input.tsx
diff --git a/packages/reactant/src/components/Input/index.ts b/packages/components/src/components/Input/index.ts
similarity index 100%
rename from packages/reactant/src/components/Input/index.ts
rename to packages/components/src/components/Input/index.ts
diff --git a/packages/reactant/src/components/Label/Label.tsx b/packages/components/src/components/Label/Label.tsx
similarity index 100%
rename from packages/reactant/src/components/Label/Label.tsx
rename to packages/components/src/components/Label/Label.tsx
diff --git a/packages/reactant/src/components/Label/index.ts b/packages/components/src/components/Label/index.ts
similarity index 100%
rename from packages/reactant/src/components/Label/index.ts
rename to packages/components/src/components/Label/index.ts
diff --git a/packages/reactant/src/components/Message/Message.tsx b/packages/components/src/components/Message/Message.tsx
similarity index 100%
rename from packages/reactant/src/components/Message/Message.tsx
rename to packages/components/src/components/Message/Message.tsx
diff --git a/packages/reactant/src/components/Message/index.ts b/packages/components/src/components/Message/index.ts
similarity index 100%
rename from packages/reactant/src/components/Message/index.ts
rename to packages/components/src/components/Message/index.ts
diff --git a/packages/reactant/src/components/NavigationMenu/NavigationMenu.tsx b/packages/components/src/components/NavigationMenu/NavigationMenu.tsx
similarity index 100%
rename from packages/reactant/src/components/NavigationMenu/NavigationMenu.tsx
rename to packages/components/src/components/NavigationMenu/NavigationMenu.tsx
diff --git a/packages/reactant/src/components/NavigationMenu/index.ts b/packages/components/src/components/NavigationMenu/index.ts
similarity index 100%
rename from packages/reactant/src/components/NavigationMenu/index.ts
rename to packages/components/src/components/NavigationMenu/index.ts
diff --git a/packages/reactant/src/components/PickList/PickList.tsx b/packages/components/src/components/PickList/PickList.tsx
similarity index 100%
rename from packages/reactant/src/components/PickList/PickList.tsx
rename to packages/components/src/components/PickList/PickList.tsx
diff --git a/packages/reactant/src/components/PickList/index.ts b/packages/components/src/components/PickList/index.ts
similarity index 100%
rename from packages/reactant/src/components/PickList/index.ts
rename to packages/components/src/components/PickList/index.ts
diff --git a/packages/reactant/src/components/Popover/Popover.tsx b/packages/components/src/components/Popover/Popover.tsx
similarity index 100%
rename from packages/reactant/src/components/Popover/Popover.tsx
rename to packages/components/src/components/Popover/Popover.tsx
diff --git a/packages/reactant/src/components/Popover/index.ts b/packages/components/src/components/Popover/index.ts
similarity index 100%
rename from packages/reactant/src/components/Popover/index.ts
rename to packages/components/src/components/Popover/index.ts
diff --git a/packages/reactant/src/components/ProductCard/ProductCard.tsx b/packages/components/src/components/ProductCard/ProductCard.tsx
similarity index 100%
rename from packages/reactant/src/components/ProductCard/ProductCard.tsx
rename to packages/components/src/components/ProductCard/ProductCard.tsx
diff --git a/packages/reactant/src/components/ProductCard/index.ts b/packages/components/src/components/ProductCard/index.ts
similarity index 100%
rename from packages/reactant/src/components/ProductCard/index.ts
rename to packages/components/src/components/ProductCard/index.ts
diff --git a/packages/reactant/src/components/RadioGroup/RadioGroup.tsx b/packages/components/src/components/RadioGroup/RadioGroup.tsx
similarity index 100%
rename from packages/reactant/src/components/RadioGroup/RadioGroup.tsx
rename to packages/components/src/components/RadioGroup/RadioGroup.tsx
diff --git a/packages/reactant/src/components/RadioGroup/index.ts b/packages/components/src/components/RadioGroup/index.ts
similarity index 100%
rename from packages/reactant/src/components/RadioGroup/index.ts
rename to packages/components/src/components/RadioGroup/index.ts
diff --git a/packages/reactant/src/components/Rating/Rating.tsx b/packages/components/src/components/Rating/Rating.tsx
similarity index 100%
rename from packages/reactant/src/components/Rating/Rating.tsx
rename to packages/components/src/components/Rating/Rating.tsx
diff --git a/packages/reactant/src/components/Rating/StarIcons/StarEmpty.tsx b/packages/components/src/components/Rating/StarIcons/StarEmpty.tsx
similarity index 100%
rename from packages/reactant/src/components/Rating/StarIcons/StarEmpty.tsx
rename to packages/components/src/components/Rating/StarIcons/StarEmpty.tsx
diff --git a/packages/reactant/src/components/Rating/StarIcons/StarFilled.tsx b/packages/components/src/components/Rating/StarIcons/StarFilled.tsx
similarity index 100%
rename from packages/reactant/src/components/Rating/StarIcons/StarFilled.tsx
rename to packages/components/src/components/Rating/StarIcons/StarFilled.tsx
diff --git a/packages/reactant/src/components/Rating/StarIcons/StarHalf.tsx b/packages/components/src/components/Rating/StarIcons/StarHalf.tsx
similarity index 100%
rename from packages/reactant/src/components/Rating/StarIcons/StarHalf.tsx
rename to packages/components/src/components/Rating/StarIcons/StarHalf.tsx
diff --git a/packages/reactant/src/components/Rating/index.ts b/packages/components/src/components/Rating/index.ts
similarity index 100%
rename from packages/reactant/src/components/Rating/index.ts
rename to packages/components/src/components/Rating/index.ts
diff --git a/packages/reactant/src/components/RectangleList/RectangleList.tsx b/packages/components/src/components/RectangleList/RectangleList.tsx
similarity index 100%
rename from packages/reactant/src/components/RectangleList/RectangleList.tsx
rename to packages/components/src/components/RectangleList/RectangleList.tsx
diff --git a/packages/reactant/src/components/RectangleList/index.ts b/packages/components/src/components/RectangleList/index.ts
similarity index 100%
rename from packages/reactant/src/components/RectangleList/index.ts
rename to packages/components/src/components/RectangleList/index.ts
diff --git a/packages/reactant/src/components/Select/Select.tsx b/packages/components/src/components/Select/Select.tsx
similarity index 100%
rename from packages/reactant/src/components/Select/Select.tsx
rename to packages/components/src/components/Select/Select.tsx
diff --git a/packages/reactant/src/components/Select/index.ts b/packages/components/src/components/Select/index.ts
similarity index 100%
rename from packages/reactant/src/components/Select/index.ts
rename to packages/components/src/components/Select/index.ts
diff --git a/packages/reactant/src/components/Sheet/Sheet.tsx b/packages/components/src/components/Sheet/Sheet.tsx
similarity index 100%
rename from packages/reactant/src/components/Sheet/Sheet.tsx
rename to packages/components/src/components/Sheet/Sheet.tsx
diff --git a/packages/reactant/src/components/Sheet/index.ts b/packages/components/src/components/Sheet/index.ts
similarity index 100%
rename from packages/reactant/src/components/Sheet/index.ts
rename to packages/components/src/components/Sheet/index.ts
diff --git a/packages/reactant/src/components/Skeleton/Skeleton.tsx b/packages/components/src/components/Skeleton/Skeleton.tsx
similarity index 100%
rename from packages/reactant/src/components/Skeleton/Skeleton.tsx
rename to packages/components/src/components/Skeleton/Skeleton.tsx
diff --git a/packages/reactant/src/components/Skeleton/index.ts b/packages/components/src/components/Skeleton/index.ts
similarity index 100%
rename from packages/reactant/src/components/Skeleton/index.ts
rename to packages/components/src/components/Skeleton/index.ts
diff --git a/packages/reactant/src/components/Slideshow/Slideshow.tsx b/packages/components/src/components/Slideshow/Slideshow.tsx
similarity index 100%
rename from packages/reactant/src/components/Slideshow/Slideshow.tsx
rename to packages/components/src/components/Slideshow/Slideshow.tsx
diff --git a/packages/reactant/src/components/Slideshow/index.ts b/packages/components/src/components/Slideshow/index.ts
similarity index 100%
rename from packages/reactant/src/components/Slideshow/index.ts
rename to packages/components/src/components/Slideshow/index.ts
diff --git a/packages/reactant/src/components/Swatch/Swatch.tsx b/packages/components/src/components/Swatch/Swatch.tsx
similarity index 100%
rename from packages/reactant/src/components/Swatch/Swatch.tsx
rename to packages/components/src/components/Swatch/Swatch.tsx
diff --git a/packages/reactant/src/components/Swatch/index.ts b/packages/components/src/components/Swatch/index.ts
similarity index 100%
rename from packages/reactant/src/components/Swatch/index.ts
rename to packages/components/src/components/Swatch/index.ts
diff --git a/packages/reactant/src/components/Tag/Tag.tsx b/packages/components/src/components/Tag/Tag.tsx
similarity index 100%
rename from packages/reactant/src/components/Tag/Tag.tsx
rename to packages/components/src/components/Tag/Tag.tsx
diff --git a/packages/reactant/src/components/Tag/index.ts b/packages/components/src/components/Tag/index.ts
similarity index 100%
rename from packages/reactant/src/components/Tag/index.ts
rename to packages/components/src/components/Tag/index.ts
diff --git a/packages/reactant/src/components/TextArea/TextArea.tsx b/packages/components/src/components/TextArea/TextArea.tsx
similarity index 100%
rename from packages/reactant/src/components/TextArea/TextArea.tsx
rename to packages/components/src/components/TextArea/TextArea.tsx
diff --git a/packages/reactant/src/components/TextArea/index.ts b/packages/components/src/components/TextArea/index.ts
similarity index 100%
rename from packages/reactant/src/components/TextArea/index.ts
rename to packages/components/src/components/TextArea/index.ts
diff --git a/packages/reactant/src/lib/utils.ts b/packages/components/src/lib/utils.ts
similarity index 100%
rename from packages/reactant/src/lib/utils.ts
rename to packages/components/src/lib/utils.ts
diff --git a/packages/reactant/tailwind.config.js b/packages/components/tailwind.config.js
similarity index 100%
rename from packages/reactant/tailwind.config.js
rename to packages/components/tailwind.config.js
diff --git a/packages/reactant/tsconfig.json b/packages/components/tsconfig.json
similarity index 100%
rename from packages/reactant/tsconfig.json
rename to packages/components/tsconfig.json
diff --git a/packages/create-catalyst/README.md b/packages/create-catalyst/README.md
index ba567865..bd76b825 100644
--- a/packages/create-catalyst/README.md
+++ b/packages/create-catalyst/README.md
@@ -42,7 +42,7 @@ While developing `create-catalyst` locally, it's essential to test your changes
 
 > ⚠️ **IMPORTANT:** NPM registry data is immutable, meaning once published, a package cannot change. Be careful to ensure that you do not run commands such as `publish` against the default NPM registry if your work is not ready to be published. Always explicitly pass `--registry=http://localhost:<VERDACCIO_PORT>` with commands that modify the registry (such as `publish`) to ensure you only publish to Verdaccio when working locally.
 
-4. If necessary, run `pnpm build` and `pnpm publish --registry=http://localhost:4873` in each Catalyst-scoped package required by relevant examples listed in `apps/` (e.g., Catalyst `core` examples require `@bigcommerce/reactant`, `@bigcommerce/eslint-config-catalyst`, `@bigcommerce/catalyst-configs`, `@bigcommerce/catalyst-client`)
+4. If necessary, run `pnpm build` and `pnpm publish --registry=http://localhost:4873` in each Catalyst-scoped package required by relevant examples listed in `apps/` (e.g., Catalyst `core` examples require `@bigcommerce/components`, `@bigcommerce/eslint-config-catalyst`, `@bigcommerce/catalyst-configs`, `@bigcommerce/catalyst-client`)
 5. Run `pnpm build` and `pnpm publish --registry=http://localhost:4873` in the `@bigcommerce/create-catalyst` package
 6. Confirm published packages are listed in Verdaccio: http://localhost:4873
 
diff --git a/packages/eslint-config-catalyst/base.js b/packages/eslint-config-catalyst/base.js
index 62cc11fc..24f7cc4f 100644
--- a/packages/eslint-config-catalyst/base.js
+++ b/packages/eslint-config-catalyst/base.js
@@ -1,6 +1,7 @@
 /** @type {import("eslint").Linter.Config} */
 const config = {
   extends: ['@bigcommerce/eslint-config/configs/base', 'prettier'],
+  plugins: ['check-file'],
   overrides: [
     {
       files: ['*.ts', '*.tsx'],
@@ -11,6 +12,24 @@ const config = {
     es2022: true,
     node: true,
   },
+  rules: {
+    'check-file/filename-naming-convention': [
+      'error',
+      {
+        '**/*.{jsx,tsx}': 'KEBAB_CASE',
+        '**/*.{js,ts}': 'KEBAB_CASE',
+      },
+      {
+        ignoreMiddleExtensions: true,
+      },
+    ],
+    "check-file/folder-naming-convention": [
+      "error",
+      {
+        "**": "KEBAB_CASE",
+      }
+    ]
+  },
 };
 
 module.exports = config;
diff --git a/packages/eslint-config-catalyst/package.json b/packages/eslint-config-catalyst/package.json
index cf62391c..b8a22eb7 100644
--- a/packages/eslint-config-catalyst/package.json
+++ b/packages/eslint-config-catalyst/package.json
@@ -13,6 +13,7 @@
     "@bigcommerce/eslint-config": "^2.7.0",
     "@next/eslint-plugin-next": "^14.0.4",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-check-file": "^2.6.2",
     "eslint-plugin-prettier": "^5.0.1"
   },
   "peerDependencies": {
diff --git a/packages/functional/.eslintrc.cjs b/packages/functional/.eslintrc.cjs
index 77f356ef..a597293a 100644
--- a/packages/functional/.eslintrc.cjs
+++ b/packages/functional/.eslintrc.cjs
@@ -4,6 +4,9 @@
 const config = {
   root: true,
   extends: ['@bigcommerce/catalyst/base', '@bigcommerce/catalyst/prettier'],
+  rules: {
+    'check-file/filename-naming-convention': 'off',
+  },
 };
 
 module.exports = config;
diff --git a/packages/functional/actions/product-actions.ts b/packages/functional/actions/product-actions.ts
index 57e25b49..e26e3e5d 100644
--- a/packages/functional/actions/product-actions.ts
+++ b/packages/functional/actions/product-actions.ts
@@ -10,7 +10,7 @@ export async function addProductToCart(page: Page, productName: string): Promise
     }),
   ).toBeVisible();
 
-  await page.getByRole('button', { name: 'Add to Cart', exact: true }).click();
+  await page.getByRole('button', { name: 'Add to Cart' }).first().click();
 }
 
 export async function addProductsToCompare(page: Page, names: string[]) {
diff --git a/packages/functional/tests/ui/core/components/Accordion.spec.ts b/packages/functional/tests/ui/core/components/Accordion.spec.ts
index 0cd3175f..f1b86f07 100644
--- a/packages/functional/tests/ui/core/components/Accordion.spec.ts
+++ b/packages/functional/tests/ui/core/components/Accordion.spec.ts
@@ -1,27 +1,45 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test('Verify accordion behavior on header', async ({ page }) => {
   await page.goto('/');
-  await page.getByLabel('Main').getByRole('link', { name: 'Kitchen' }).isVisible();
+  await expect(
+    page.getByRole('navigation', { name: 'Main' }).getByRole('link', { name: 'Kitchen' }),
+  ).toBeVisible();
 
-  await page.getByLabel('Main').getByRole('link', { name: 'Kitchen' }).hover();
-  await page.getByRole('link', { name: 'Knives' }).isVisible();
-  await page.getByRole('link', { name: 'Plates' }).isVisible();
+  await page
+    .getByRole('navigation', { name: 'Main' })
+    .getByRole('link', { name: 'Kitchen' })
+    .hover();
+  await expect(page.getByRole('link', { name: 'Knives' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Plates' })).toBeVisible();
+  await expect(
+    page.getByRole('navigation', { name: 'Main' }).getByRole('link', { name: 'Garden' }),
+  ).toBeVisible();
 
-  await page.getByLabel('Main').getByRole('link', { name: 'Garden' }).isVisible();
-  await page.getByLabel('Main').getByRole('link', { name: 'Garden' }).hover();
-  await page.getByRole('link', { name: 'Knives' }).isHidden();
-  await page.getByRole('link', { name: 'Plates' }).isHidden();
+  await page
+    .getByRole('navigation', { name: 'Main' })
+    .getByRole('link', { name: 'Garden' })
+    .hover();
+  await expect(page.getByRole('link', { name: 'Knives' })).toBeHidden();
+  await expect(page.getByRole('link', { name: 'Plates' })).toBeHidden();
 });
 
 test('Verify accordion behavior on desktop filter', async ({ page }) => {
   await page.goto('/');
-  await page.getByLabel('Main').getByRole('link', { name: 'Kitchen' }).click();
-  await page.getByRole('button', { name: 'Color' }).isVisible();
-  await page.getByText('Black1 products').isVisible();
-  await page.getByText('Blue1 products').isVisible();
+  await expect(
+    page.getByRole('navigation', { name: 'Main' }).getByRole('link', { name: 'Kitchen' }),
+  ).toBeVisible();
+
+  await page
+    .getByRole('navigation', { name: 'Main' })
+    .getByRole('link', { name: 'Kitchen' })
+    .click();
+
+  await expect(page.getByRole('button', { name: 'Color' })).toBeVisible();
+  await expect(page.getByText('Black1 products')).toBeVisible();
+  await expect(page.getByText('Blue1 products')).toBeVisible();
 
   await page.getByRole('button', { name: 'Color' }).click();
-  await page.getByText('Black1 products').isHidden();
-  await page.getByText('Blue1 products').isHidden();
+  await expect(page.getByText('Black1 products')).toBeHidden();
+  await expect(page.getByText('Blue1 products')).toBeHidden();
 });
diff --git a/packages/functional/tests/ui/core/components/BreadCrumbs.spec.ts b/packages/functional/tests/ui/core/components/BreadCrumbs.spec.ts
index bab0aaef..429332a3 100644
--- a/packages/functional/tests/ui/core/components/BreadCrumbs.spec.ts
+++ b/packages/functional/tests/ui/core/components/BreadCrumbs.spec.ts
@@ -2,8 +2,14 @@ import { expect, test } from '@playwright/test';
 
 test('Verify breadcrumbs on product selection', async ({ page }) => {
   await page.goto('/');
-  await page.getByLabel('Main').getByRole('link', { name: 'Kitchen' }).hover();
-  await page.getByRole('link', { name: 'Knives' }).isVisible();
+  await page
+    .getByRole('navigation', { name: 'Main' })
+    .getByRole('link', { name: 'Kitchen' })
+    .hover();
+
+  await expect(page.getByRole('link', { name: 'Knives' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Most popular' })).toBeVisible();
+
   await page.getByRole('link', { name: 'Most popular' }).click();
 
   await expect(page.getByLabel('Breadcrumb').getByRole('list')).toContainText('Kitchen');
diff --git a/packages/functional/tests/ui/core/components/Carousel.spec.ts b/packages/functional/tests/ui/core/components/Carousel.spec.ts
index ec9765f5..42638b37 100644
--- a/packages/functional/tests/ui/core/components/Carousel.spec.ts
+++ b/packages/functional/tests/ui/core/components/Carousel.spec.ts
@@ -1,16 +1,28 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-test('Navigate carousel items on homepage', async ({ page }) => {
+test.beforeEach(async ({ page }) => {
   await page.goto('/');
   await page.getByRole('heading', { name: 'Best Selling Products' }).scrollIntoViewIfNeeded();
-  await page.getByRole('link', { name: '[Sample] Tiered Wire Basket' }).isVisible();
+  await expect(page.getByRole('link', { name: '[Sample] Tiered Wire Basket' })).toBeVisible();
+});
 
+test('Navigate to next set of products', async ({ page }) => {
   await page.getByRole('button', { name: 'Next products' }).click();
-  await page.getByRole('link', { name: '[Sample] Fog Linen Chambray' }).isVisible();
 
-  await page.getByRole('button', { name: 'Previous products' }).click();
-  await page.getByRole('link', { name: '[Sample] Tiered Wire Basket' }).isVisible();
+  await expect(page.getByRole('link', { name: '[Sample] Fog Linen Chambray' })).toBeVisible();
+});
 
+test('Navigate to previous set of products', async ({ page }) => {
   await page.getByRole('button', { name: 'Previous products' }).click();
-  await page.getByRole('link', { name: '[Sample] Fog Linen Chambray' }).isVisible();
+
+  await expect(page.getByRole('link', { name: '[Sample] Fog Linen Chambray' })).toBeVisible();
+});
+
+test('Navigation on set of products is cyclic', async ({ page }) => {
+  await expect(page.getByRole('link', { name: '[Sample] Tiered Wire Basket' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'Next products' }).click();
+  await page.getByRole('button', { name: 'Next products' }).click();
+
+  await expect(page.getByRole('link', { name: '[Sample] Tiered Wire Basket' })).toBeVisible();
 });
diff --git a/packages/functional/tests/ui/core/components/Checkbox.spec.ts b/packages/functional/tests/ui/core/components/Checkbox.spec.ts
index c6c63eb6..9f808408 100644
--- a/packages/functional/tests/ui/core/components/Checkbox.spec.ts
+++ b/packages/functional/tests/ui/core/components/Checkbox.spec.ts
@@ -1,20 +1,23 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test('Filter products by selecting checkbox', async ({ page }) => {
   await page.goto('/');
-  await page.getByLabel('Main').getByRole('link', { name: 'Shop All' }).click();
+  await page
+    .getByRole('navigation', { name: 'Main' })
+    .getByRole('link', { name: 'Shop All' })
+    .click();
 
-  await page.getByText('13 items').isVisible();
+  await expect(page.getByText('13 items')).toBeVisible();
   await page.getByLabel('OFS5 products').click();
-  await page.getByText('5 items').isVisible();
+  await expect(page.getByText('5 items')).toBeVisible();
 
   await page.getByLabel('OFS5 products').click();
-  await page.getByText('13 items').isVisible();
+  await expect(page.getByText('13 items')).toBeVisible();
 
   await page.getByLabel('Common Good1 products').click();
-  await page.getByText('1 items').isVisible();
-  await page.getByRole('link', { name: '[Sample] Laundry Detergent' }).isVisible();
+  await expect(page.getByText('1 items')).toBeVisible();
+  await expect(page.getByRole('link', { name: '[Sample] Laundry Detergent' })).toBeVisible();
 
   await page.getByRole('button', { name: 'Clear all' }).click();
-  await page.getByText('13 items').isVisible();
+  await expect(page.getByText('13 items')).toBeVisible();
 });
diff --git a/packages/functional/tests/ui/core/components/Counter.spec.ts b/packages/functional/tests/ui/core/components/Counter.spec.ts
new file mode 100644
index 00000000..2e0380b4
--- /dev/null
+++ b/packages/functional/tests/ui/core/components/Counter.spec.ts
@@ -0,0 +1,51 @@
+import { expect, test } from '@playwright/test';
+
+import { ProductActions } from '../../../../actions/product-actions';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+  await page
+    .getByRole('navigation', { name: 'Main' })
+    .getByRole('link', { name: 'Shop All' })
+    .click();
+});
+
+test('Increase count and verify the results', async ({ page }) => {
+  await ProductActions.addProductToCart(page, '[Sample] Orbit Terrarium - Large');
+  await page.getByRole('link', { name: 'your cart' }).click();
+
+  await expect(page.getByRole('spinbutton')).toHaveValue('1');
+
+  await page.getByLabel('Increase count').click();
+  await page.getByLabel('Increase count').click();
+
+  await expect(page.getByRole('spinbutton')).toHaveValue('3');
+});
+
+test('Decrease count and verify the results', async ({ page }) => {
+  await ProductActions.addProductToCart(page, '[Sample] Orbit Terrarium - Large');
+  await page.getByRole('link', { name: 'your cart' }).click();
+
+  await expect(page.getByRole('spinbutton')).toHaveValue('1');
+
+  await page.getByLabel('Increase count').click();
+  await expect(page.getByRole('spinbutton')).toHaveValue('2');
+
+  await page.getByLabel('Decrease count').click();
+
+  await expect(page.getByRole('spinbutton')).toHaveValue('1');
+});
+
+test('Decreasing the count to 0 should remove the product from cart', async ({ page }) => {
+  await ProductActions.addProductToCart(page, '[Sample] Orbit Terrarium - Large');
+  await page.getByRole('link', { name: 'your cart' }).click();
+
+  await expect(page.getByRole('spinbutton')).toHaveValue('1');
+
+  await page.getByLabel('Decrease count').click();
+
+  await expect(page.getByRole('spinbutton')).toHaveValue('0');
+  await expect(page.getByText('[Sample] Orbit Terrarium -')).toBeHidden({
+    timeout: 10000,
+  });
+});
diff --git a/packages/functional/tests/ui/core/components/RadioGroup.spec.ts b/packages/functional/tests/ui/core/components/RadioGroup.spec.ts
new file mode 100644
index 00000000..eb633303
--- /dev/null
+++ b/packages/functional/tests/ui/core/components/RadioGroup.spec.ts
@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+
+test('Changing selection on radio button options should update query parameters', async ({
+  page,
+}) => {
+  await page.goto('/');
+
+  await page
+    .getByRole('navigation', { name: 'Main' })
+    .getByRole('link', { name: 'Shop All' })
+    .click();
+  await page.getByRole('button', { name: 'Quick add' }).first().click();
+
+  await page.getByLabel('Radio').getByText('1').click();
+
+  await expect(page).toHaveURL('shop-all?134=139');
+
+  await page.getByLabel('Radio').getByText('2').click();
+
+  await expect(page).toHaveURL('shop-all?134=140');
+
+  await page.getByLabel('Radio').getByText('3').click();
+
+  await expect(page).toHaveURL('shop-all?134=141');
+});
diff --git a/packages/functional/tests/ui/core/components/Select.spec.ts b/packages/functional/tests/ui/core/components/Select.spec.ts
new file mode 100644
index 00000000..cb33c86e
--- /dev/null
+++ b/packages/functional/tests/ui/core/components/Select.spec.ts
@@ -0,0 +1,37 @@
+import { expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+  await page
+    .getByRole('navigation', { name: 'Main' })
+    .getByRole('link', { name: 'Shop All' })
+    .click();
+});
+
+test('Sort products on display by review', async ({ page }) => {
+  await page.getByLabel('Sort by:').click();
+  await page.getByText('By review').click();
+
+  await expect(page).toHaveURL('shop-all?sort=best_reviewed');
+});
+
+test('Sort products on display by ascending price', async ({ page }) => {
+  await page.getByLabel('Sort by:').click();
+  await page.getByText('Price: ascending').click();
+
+  await expect(page).toHaveURL('shop-all?sort=lowest_price');
+});
+
+test('Sort products on display by descending price', async ({ page }) => {
+  await page.getByLabel('Sort by:').click();
+  await page.getByText('Price: descending').click();
+
+  await expect(page).toHaveURL('shop-all?sort=highest_price');
+});
+
+test('Sort products on display by relevance', async ({ page }) => {
+  await page.getByLabel('Sort by:').click();
+  await page.getByText('Relevance').click();
+
+  await expect(page).toHaveURL('shop-all?sort=relevance');
+});
diff --git a/packages/functional/tests/ui/core/components/Slideshow.spec.ts b/packages/functional/tests/ui/core/components/Slideshow.spec.ts
index 30b2732d..8e1916bf 100644
--- a/packages/functional/tests/ui/core/components/Slideshow.spec.ts
+++ b/packages/functional/tests/ui/core/components/Slideshow.spec.ts
@@ -1,17 +1,18 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-test('Navigate through slideshow on homepage and verify slide content', async ({ page }) => {
+test.beforeEach(async ({ page }) => {
   await page.goto('/');
-  await page.getByLabel('Next slide').isVisible();
-  await page.getByLabel('Next slide').click();
-  await page.getByRole('heading', { name: 'Great Deals' }).isVisible();
-
-  await page.getByLabel('Pause slideshow').click();
-  await page.getByLabel('Play slideshow').click();
+  await expect(page.getByLabel('Next slide')).toBeVisible();
+});
 
+test('Navigate to next slide', async ({ page }) => {
   await page.getByLabel('Next slide').click();
-  await page.getByRole('heading', { name: 'Low Prices' }).isVisible();
 
+  await expect(page.getByRole('heading', { name: 'Great Deals' })).toBeVisible();
+});
+
+test('Navigate to previous slide', async ({ page }) => {
   await page.getByLabel('Previous slide').click();
-  await page.getByRole('heading', { name: 'Great Deals' }).isVisible();
+
+  await expect(page.getByRole('heading', { name: 'Low Prices' })).toBeVisible();
 });
diff --git a/packages/functional/tests/ui/core/components/Swatch.spec.ts b/packages/functional/tests/ui/core/components/Swatch.spec.ts
new file mode 100644
index 00000000..26413465
--- /dev/null
+++ b/packages/functional/tests/ui/core/components/Swatch.spec.ts
@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test';
+
+test('Selecting various options on color panel should update query parameters', async ({
+  page,
+}) => {
+  await page.goto('/');
+
+  await page
+    .getByRole('navigation', { name: 'Main' })
+    .getByRole('link', { name: 'Shop All' })
+    .click();
+  await page.getByRole('button', { name: 'Quick add' }).first().click();
+  await page.getByRole('radio', { name: 'Color Silver' }).click();
+
+  await expect(page).toHaveURL('shop-all?109=103');
+
+  await page.getByRole('radio', { name: 'Color Purple' }).click();
+
+  await expect(page).toHaveURL('shop-all?109=105');
+
+  await page.getByRole('radio', { name: 'Color Orange' }).click();
+
+  await expect(page).toHaveURL('shop-all?109=109');
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8dfd479e..c565eaca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,9 +26,9 @@ importers:
       '@bigcommerce/catalyst-client':
         specifier: workspace:^
         version: link:../../packages/client
-      '@bigcommerce/reactant':
+      '@bigcommerce/components':
         specifier: workspace:^
-        version: link:../../packages/reactant
+        version: link:../../packages/components
       '@graphql-typed-document-node/core':
         specifier: ^3.2.0
         version: 3.2.0(graphql@16.8.1)
@@ -65,12 +65,12 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
-      react-hook-form:
-        specifier: ^7.49.3
-        version: 7.49.3(react@18.2.0)
       react-google-recaptcha:
         specifier: ^3.1.0
         version: 3.1.0(react@18.2.0)
+      react-hook-form:
+        specifier: ^7.49.3
+        version: 7.49.3(react@18.2.0)
       react-hot-toast:
         specifier: ^2.4.1
         version: 2.4.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0)
@@ -165,9 +165,9 @@ importers:
 
   apps/docs:
     dependencies:
-      '@bigcommerce/reactant':
+      '@bigcommerce/components':
         specifier: workspace:^
-        version: link:../../packages/reactant
+        version: link:../../packages/components
       clsx:
         specifier: ^2.0.0
         version: 2.0.0
@@ -297,95 +297,7 @@ importers:
         specifier: ^5.3.3
         version: 5.3.3
 
-  packages/configs:
-    devDependencies:
-      prettier:
-        specifier: ^3.1.1
-        version: 3.1.1
-
-  packages/create-catalyst:
-    devDependencies:
-      '@bigcommerce/catalyst-configs':
-        specifier: workspace:^
-        version: link:../configs
-      '@bigcommerce/eslint-config':
-        specifier: ^2.7.0
-        version: 2.7.0(eslint@8.55.0)(jest@29.7.0)(typescript@5.3.3)
-      '@bigcommerce/eslint-config-catalyst':
-        specifier: workspace:^
-        version: link:../eslint-config-catalyst
-      '@types/node':
-        specifier: ^18.17.12
-        version: 18.19.3
-      eslint:
-        specifier: ^8.55.0
-        version: 8.55.0
-      jest:
-        specifier: ^29.7.0
-        version: 29.7.0(@types/node@18.19.3)
-      prettier:
-        specifier: ^3.1.1
-        version: 3.1.1
-      tsup:
-        specifier: ^6.7.0
-        version: 6.7.0(typescript@5.3.3)
-      typescript:
-        specifier: ^5.3.3
-        version: 5.3.3
-
-  packages/eslint-config-catalyst:
-    dependencies:
-      '@bigcommerce/eslint-config':
-        specifier: ^2.7.0
-        version: 2.7.0(eslint@8.55.0)(jest@29.7.0)(typescript@5.3.3)
-      '@next/eslint-plugin-next':
-        specifier: ^14.0.4
-        version: 14.0.4
-      eslint-config-prettier:
-        specifier: ^9.1.0
-        version: 9.1.0(eslint@8.55.0)
-      eslint-plugin-prettier:
-        specifier: ^5.0.1
-        version: 5.0.1(eslint-config-prettier@9.1.0)(eslint@8.55.0)(prettier@3.2.4)
-    devDependencies:
-      eslint:
-        specifier: ^8.55.0
-        version: 8.55.0
-      typescript:
-        specifier: ^5.3.3
-        version: 5.3.3
-
-  packages/functional:
-    devDependencies:
-      '@bigcommerce/catalyst-configs':
-        specifier: workspace:^
-        version: link:../configs
-      '@bigcommerce/eslint-config':
-        specifier: ^2.7.0
-        version: 2.7.0(eslint@8.55.0)(jest@29.7.0)(typescript@5.3.3)
-      '@bigcommerce/eslint-config-catalyst':
-        specifier: workspace:^
-        version: link:../eslint-config-catalyst
-      '@playwright/test':
-        specifier: ^1.40.1
-        version: 1.40.1
-      '@types/node':
-        specifier: ^18.17.12
-        version: 18.19.3
-      dotenv:
-        specifier: ^16.3.1
-        version: 16.3.1
-      eslint:
-        specifier: ^8.55.0
-        version: 8.55.0
-      prettier:
-        specifier: ^3.1.1
-        version: 3.1.1
-      typescript:
-        specifier: ^5.3.3
-        version: 5.3.3
-
-  packages/reactant:
+  packages/components:
     dependencies:
       '@radix-ui/react-accordion':
         specifier: ^1.1.2
@@ -471,10 +383,10 @@ importers:
         version: 8.4.32
       prettier:
         specifier: ^3.1.1
-        version: 3.1.1
+        version: 3.2.4
       prettier-plugin-tailwindcss:
         specifier: ^0.5.9
-        version: 0.5.9(prettier@3.1.1)
+        version: 0.5.9(prettier@3.2.4)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -491,6 +403,97 @@ importers:
         specifier: ^5.3.3
         version: 5.3.3
 
+  packages/configs:
+    devDependencies:
+      prettier:
+        specifier: ^3.1.1
+        version: 3.1.1
+
+  packages/create-catalyst:
+    devDependencies:
+      '@bigcommerce/catalyst-configs':
+        specifier: workspace:^
+        version: link:../configs
+      '@bigcommerce/eslint-config':
+        specifier: ^2.7.0
+        version: 2.7.0(eslint@8.55.0)(jest@29.7.0)(typescript@5.3.3)
+      '@bigcommerce/eslint-config-catalyst':
+        specifier: workspace:^
+        version: link:../eslint-config-catalyst
+      '@types/node':
+        specifier: ^18.17.12
+        version: 18.19.3
+      eslint:
+        specifier: ^8.55.0
+        version: 8.55.0
+      jest:
+        specifier: ^29.7.0
+        version: 29.7.0(@types/node@18.19.3)
+      prettier:
+        specifier: ^3.1.1
+        version: 3.1.1
+      tsup:
+        specifier: ^6.7.0
+        version: 6.7.0(typescript@5.3.3)
+      typescript:
+        specifier: ^5.3.3
+        version: 5.3.3
+
+  packages/eslint-config-catalyst:
+    dependencies:
+      '@bigcommerce/eslint-config':
+        specifier: ^2.7.0
+        version: 2.7.0(eslint@8.55.0)(jest@29.7.0)(typescript@5.3.3)
+      '@next/eslint-plugin-next':
+        specifier: ^14.0.4
+        version: 14.0.4
+      eslint-config-prettier:
+        specifier: ^9.1.0
+        version: 9.1.0(eslint@8.55.0)
+      eslint-plugin-check-file:
+        specifier: ^2.6.2
+        version: 2.6.2(eslint@8.55.0)
+      eslint-plugin-prettier:
+        specifier: ^5.0.1
+        version: 5.0.1(eslint-config-prettier@9.1.0)(eslint@8.55.0)(prettier@3.2.4)
+    devDependencies:
+      eslint:
+        specifier: ^8.55.0
+        version: 8.55.0
+      typescript:
+        specifier: ^5.3.3
+        version: 5.3.3
+
+  packages/functional:
+    devDependencies:
+      '@bigcommerce/catalyst-configs':
+        specifier: workspace:^
+        version: link:../configs
+      '@bigcommerce/eslint-config':
+        specifier: ^2.7.0
+        version: 2.7.0(eslint@8.55.0)(jest@29.7.0)(typescript@5.3.3)
+      '@bigcommerce/eslint-config-catalyst':
+        specifier: workspace:^
+        version: link:../eslint-config-catalyst
+      '@playwright/test':
+        specifier: ^1.40.1
+        version: 1.40.1
+      '@types/node':
+        specifier: ^18.17.12
+        version: 18.19.3
+      dotenv:
+        specifier: ^16.3.1
+        version: 16.3.1
+      eslint:
+        specifier: ^8.55.0
+        version: 8.55.0
+      prettier:
+        specifier: ^3.1.1
+        version: 3.1.1
+      typescript:
+        specifier: ^5.3.3
+        version: 5.3.3
+
 packages:
 
   /@aashutoshrathi/word-wrap@1.2.6:
@@ -3446,7 +3449,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.6
       '@jest/types': 29.6.3
-      '@jridgewell/trace-mapping': 0.3.20
+      '@jridgewell/trace-mapping': 0.3.22
       babel-plugin-istanbul: 6.1.1
       chalk: 4.1.2
       convert-source-map: 2.0.0
@@ -3527,7 +3530,6 @@ packages:
     dependencies:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /@juggle/resize-observer@3.4.0:
     resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
@@ -7027,7 +7029,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001568
+      caniuse-lite: 1.0.30001579
       electron-to-chromium: 1.4.611
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.22.2)
@@ -7118,10 +7120,10 @@ packages:
 
   /caniuse-lite@1.0.30001568:
     resolution: {integrity: sha512-vSUkH84HontZJ88MiNrOau1EBrCqEQYgkC5gIySiDlpsm8sGVrhU7Kx4V6h0tnqaHzIHZv08HlJIwPbL4XL9+A==}
+    dev: true
 
   /caniuse-lite@1.0.30001579:
     resolution: {integrity: sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==}
-    dev: false
 
   /capital-case@1.0.4:
     resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
@@ -8319,6 +8321,17 @@ packages:
       - supports-color
     dev: true
 
+  /eslint-plugin-check-file@2.6.2(eslint@8.55.0):
+    resolution: {integrity: sha512-z3Rur4JjOdNH0fia1IH7JQseo9NLuFVtw9j8P6z2c5XmXWemH7/qGpmMB8XbOt9bJBNpmPlNAGJty9b3EervPw==}
+    engines: {node: 14.x || >= 16}
+    peerDependencies:
+      eslint: '>=7.28.0'
+    dependencies:
+      eslint: 8.55.0
+      is-glob: 4.0.3
+      micromatch: 4.0.5
+    dev: false
+
   /eslint-plugin-gettext@1.2.0:
     resolution: {integrity: sha512-k7jSJD1nETfGYk94VS7AxHXPe7AZN7LvTfhBEnpyUx6DR98/5Bffovuw5vGk4axFBgKqzzfIV7ASTz/lnVd2qQ==}
     engines: {node: '>=6.0.0'}
@@ -11833,6 +11846,58 @@ packages:
       prettier: 3.1.1
     dev: true
 
+  /prettier-plugin-tailwindcss@0.5.9(prettier@3.2.4):
+    resolution: {integrity: sha512-9x3t1s2Cjbut2QiP+O0mDqV3gLXTe2CgRlQDgucopVkUdw26sQi53p/q4qvGxMLBDfk/dcTV57Aa/zYwz9l8Ew==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 3.2.4
+    dev: true
+
   /prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
@@ -12096,13 +12161,6 @@ packages:
       react-is: 18.1.0
     dev: true
 
-  /react-hook-form@7.49.3(react@18.2.0):
-    resolution: {integrity: sha512-foD6r3juidAT1cOZzpmD/gOKt7fRsDhXXZ0y28+Al1CHgX+AY1qIN9VSIIItXRq1dN68QrRwl1ORFlwjBaAqeQ==}
-    engines: {node: '>=18', pnpm: '8'}
-    peerDependencies:
-      react: ^16.8.0 || ^17 || ^18
-    dependencies:
-      react: 18.2.0
   /react-google-recaptcha@3.1.0(react@18.2.0):
     resolution: {integrity: sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==}
     peerDependencies:
@@ -12113,6 +12171,15 @@ packages:
       react-async-script: 1.2.0(react@18.2.0)
     dev: false
 
+  /react-hook-form@7.49.3(react@18.2.0):
+    resolution: {integrity: sha512-foD6r3juidAT1cOZzpmD/gOKt7fRsDhXXZ0y28+Al1CHgX+AY1qIN9VSIIItXRq1dN68QrRwl1ORFlwjBaAqeQ==}
+    engines: {node: '>=18', pnpm: '8'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-hot-toast@2.4.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==}
     engines: {node: '>=10'}