use client wrapper on tsup

packages/nextjs/app/about/page.tsx

@@ -1,7 +1,7 @@
 import { Metadata } from "next";
 
 import Link from "next/link";
-import { BreadIcon } from "../ui/shared-ui";
+import { BreadIcon } from "shared-ui";
 import { Breadcrumbs } from "app/components/Breadcrumbs";
 import LocalImage from "app/components/LocalImage";
 import bigPictureImage from "../../../../docs/img/big-picture.png";

packages/nextjs/app/categories/page.tsx

@@ -1,7 +1,7 @@
 import { Breadcrumbs } from "app/components/Breadcrumbs";
 import { CategoryList } from "app/components/CategoryList";
 import { Metadata } from "next";
-import { WeDontSellBreadBanner } from "../ui/shared-ui";
+import { WeDontSellBreadBanner } from "shared-ui";
 import { getAllCategories } from "utils/getAllCategoriesQuery";
 import { isString, pluralize } from "utils/pluralize";
 

packages/nextjs/app/components/Card.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { SanityImageSource } from "@sanity/image-url/lib/types/types";
 import Link, { LinkProps } from "next/link";
 import { Image } from "./Image";
-import { Card as BaseCard } from "../ui/shared-ui";
+import { Card as BaseCard } from "shared-ui";
 
 export interface CardProps {
   title: string;

packages/nextjs/app/components/ImageCarousel.tsx

@@ -1,7 +1,7 @@
 import { ProductImage } from "utils/groqTypes/ProductList";
 import * as React from "react";
 import { Image } from "app/components/Image";
-import { ImageCarousel as BaseImageCarousel } from "../ui/shared-ui";
+import { ImageCarousel as BaseImageCarousel } from "shared-ui";
 
 export type ImageCarouselProps = {
   productImages: ProductImage[];

packages/nextjs/app/components/Pagination.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { Pagination as BasePagination } from "../ui/shared-ui";
+import { Pagination as BasePagination } from "shared-ui";
 import Link from "next/link";
 import classNames from "classnames";
 import { usePathname, useSearchParams } from "next/navigation";

packages/nextjs/app/components/PaginationFade.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import classNames from "classnames";
-import { FadeInOut } from "../ui/shared-ui";
+import { FadeInOut } from "shared-ui";
 import { useSearchParams } from "next/navigation";
 import { pluralize } from "utils/pluralize";
 import { PLPVariant } from "utils/groqTypes/ProductList";

packages/nextjs/app/components/Product.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Price } from "../ui/shared-ui";
+import { Price } from "shared-ui";
 import { PLPVariant } from "utils/groqTypes/ProductList";
 import { Image } from "./Image";
 

packages/nextjs/app/components/ProductDetailBody.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { BlockContent, Price } from "../ui/shared-ui";
+import { BlockContent, Price } from "shared-ui";
 
 import { ImageCarousel } from "app/components/ImageCarousel";
 import { StyleOptions } from "app/components/ProductPage/StyleOptions";

packages/nextjs/app/components/ProductFilters/FilterGroup.tsx

@@ -3,7 +3,7 @@
 import type { FilterGroup as FilterGroupType } from "utils/filters";
 import * as React from "react";
 import { ChangeEvent } from "react";
-import { Checkbox } from "../../ui/shared-ui";
+import { Checkbox } from "shared-ui";
 import { useRouterQueryParams } from "utils/useRouterQueryParams";
 
 type FilterGroupProps = {

packages/nextjs/app/components/ProductSort.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { useRouterQueryParams } from "utils/useRouterQueryParams";
-import { ProductSort as BaseProductSort, ProductSortProps as BaseProps } from "../ui/shared-ui";
+import { ProductSort as BaseProductSort, ProductSortProps as BaseProps } from "shared-ui";
 
 type ProductSortProps = Pick<BaseProps, "as" | "showTitle" | "title" | "selectClassName">;
 

packages/nextjs/app/components/ProductsList.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { AnimatePresence } from "../ui/framer";
 
-import { H6, WeDontSellBreadBanner } from "../ui/shared-ui";
+import { H6, WeDontSellBreadBanner } from "shared-ui";
 import { CategoryFilterItem, FlavourFilterItem, PLPVariant, StyleFilterItem } from "utils/groqTypes/ProductList";
 
 import { ProductFilters } from "app/components/ProductFilters/ProductFilters";

packages/nextjs/app/components/SortAndFiltersToolbarMobile.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "../ui/shared-ui";
+import { Button } from "shared-ui";
 import React from "react";
 import { MdOutlineFilterList } from "react-icons/md";
 import { ProductSort } from "app/components/ProductSort";

packages/nextjs/app/components/page.tsx

@@ -1,5 +1,5 @@
 import { MdArrowForward } from "react-icons/md";
-import { Button, Input, Pill, Checkbox, Select, LinkText } from "../ui/shared-ui";
+import { Button, Input, Pill, Checkbox, Select, LinkText } from "shared-ui";
 
 export default async function Page() {
   return (

packages/nextjs/app/layout.tsx

@@ -1,4 +1,4 @@
-import { Footer, MobileNavProvider } from "./ui/shared-ui";
+import { Footer, MobileNavProvider } from "shared-ui";
 import "./global.css";
 import { Header } from "app/components/Header/Header";
 import { Metadata } from "next";

packages/nextjs/app/page.tsx

@@ -4,7 +4,7 @@ import { getRecommendations } from "utils/getRecommendationsQuery";
 import { FiArrowRight } from "react-icons/fi";
 import Link from "next/link";
 
-import { Button, FeaturedQuote } from "./ui/shared-ui";
+import { Button, FeaturedQuote } from "shared-ui";
 
 import featuredImg from "assets/featured-story.jpg";
 import { FeaturedList } from "app/components/FeaturedList";

packages/nextjs/app/products/[slug]/page.tsx

@@ -4,7 +4,7 @@ import { Breadcrumbs } from "app/components/Breadcrumbs";
 import { AnimatePresence } from "../../ui/framer";
 import { Metadata } from "next";
 import React from "react";
-import { H6, FadeInOut } from "../../ui/shared-ui";
+import { H6, FadeInOut } from "shared-ui";
 import { getProductBySlug } from "utils/getProductBySlug";
 import { getRecommendations } from "utils/getRecommendationsQuery";
 import { isSlug } from "utils/isSlug";

packages/nextjs/app/template.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FadeInOut } from "./ui/shared-ui";
+import { FadeInOut } from "shared-ui";
 
 // TODO: exit animations currently do not work in next app router
 export default function Template({ children }: { children: React.ReactNode }) {

packages/shared-ui/tsup.config.ts

@@ -7,4 +7,9 @@ export default defineConfig({
   dts: true,
   format: ["cjs", "esm"],
   target: "es6",
+  esbuildOptions(options) {
+    options.banner = {
+      js: '"use client"',
+    };
+  },
 });