dev: use turbopack for local development

This PR sets up turbopack for local development for apps using the component
library.  This should result in much faster development rebuilds.

apps/entropy-explorer/next.config.js

@@ -9,16 +9,20 @@ const config = {
     },
   },
 
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["@svgr/webpack"],
+        as: "*.js",
+      },
+    },
+  },
+
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,
       use: ["@svgr/webpack"],
     });
-
-    config.resolve.extensionAlias = {
-      ".js": [".js", ".ts", ".tsx"],
-    };
-
     return config;
   },
 

apps/entropy-explorer/package.json

@@ -12,7 +12,7 @@
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
     "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_34F8THr7mZ3eAOQoCLdo8xWj9fdT vercel env pull",
-    "start:dev": "next dev --port 3006",
+    "start:dev": "next dev --port 3006 --turbopack",
     "start:prod": "next start --port 3006",
     "test:format": "prettier --check .",
     "test:lint:eslint": "eslint . --max-warnings 0",

apps/insights/next.config.js

@@ -13,16 +13,21 @@ const config = {
     },
   },
 
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["@svgr/webpack"],
+        as: "*.js",
+      },
+    },
+  },
+
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,
       use: ["@svgr/webpack"],
     });
 
-    config.resolve.extensionAlias = {
-      ".js": [".js", ".ts", ".tsx"],
-    };
-
     return config;
   },
 

apps/insights/package.json

@@ -12,7 +12,7 @@
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
     "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_TBkf9EyQjQF37gs4Vk0sQKJj97kE vercel env pull",
-    "start:dev": "next dev --port 3003",
+    "start:dev": "next dev --port 3003 --turbopack",
     "start:prod": "next start --port 3003",
     "test:format": "prettier --check .",
     "test:lint:eslint": "eslint . --max-warnings 0",

apps/insights/src/components/PriceComponentsCard/index.module.scss

@@ -87,8 +87,3 @@
     }
   }
 }
-
-:export {
-  // stylelint-disable-next-line property-no-unknown
-  headerHeight: theme.$header-height;
-}

apps/insights/src/components/PriceComponentsCard/index.tsx

@@ -489,7 +489,7 @@ export const PriceComponentsCardContents = <
         label={label}
         fill
         rounded
-        stickyHeader={styles.headerHeight}
+        stickyHeader
         className={styles.table ?? ""}
         columns={[
           {

apps/insights/src/components/PriceFeed/chart.module.scss

@@ -0,0 +1,12 @@
+@use "@pythnetwork/component-library/theme";
+
+.chart {
+  --border-light: #{theme.pallette-color("stone", 300)};
+  --border-dark: #{theme.pallette-color("steel", 600)};
+  --muted-light: #{theme.pallette-color("stone", 700)};
+  --muted-dark: #{theme.pallette-color("steel", 300)};
+  --chart-series-primary-light: #{theme.pallette-color("violet", 500)};
+  --chart-series-primary-dark: #{theme.pallette-color("violet", 400)};
+  --chart-series-neutral-light: #{theme.pallette-color("stone", 500)};
+  --chart-series-neutral-dark: #{theme.pallette-color("steel", 300)};
+}

apps/insights/src/components/PriceFeed/chart.tsx

@@ -9,7 +9,7 @@ import type { RefObject } from "react";
 import { useEffect, useRef, useCallback } from "react";
 import { z } from "zod";
 
-import theme from "./theme.module.scss";
+import styles from "./chart.module.scss";
 import { useLivePriceData } from "../../hooks/use-live-price-data";
 import { Cluster } from "../../services/pyth";
 
@@ -22,14 +22,18 @@ export const Chart = ({ symbol, feedId }: Props) => {
   const chartContainerRef = useChart(symbol, feedId);
 
   return (
-    <div style={{ width: "100%", height: "100%" }} ref={chartContainerRef} />
+    <div
+      style={{ width: "100%", height: "100%" }}
+      className={styles.chart}
+      ref={chartContainerRef}
+    />
   );
 };
 
 const useChart = (symbol: string, feedId: string) => {
   const { chartContainerRef, chartRef } = useChartElem(symbol, feedId);
   useChartResize(chartContainerRef, chartRef);
-  useChartColors(chartRef);
+  useChartColors(chartContainerRef, chartRef);
   return chartContainerRef;
 };
 
@@ -217,17 +221,24 @@ const useChartResize = (
   });
 };
 
-const useChartColors = (chartRef: RefObject<ChartRefContents | undefined>) => {
+const useChartColors = (
+  chartContainerRef: RefObject<HTMLDivElement | null>,
+  chartRef: RefObject<ChartRefContents | undefined>,
+) => {
   const { resolvedTheme } = useTheme();
   useEffect(() => {
-    if (chartRef.current && resolvedTheme) {
-      applyColors(chartRef.current, resolvedTheme);
+    if (chartRef.current && chartContainerRef.current && resolvedTheme) {
+      applyColors(chartRef.current, chartContainerRef.current, resolvedTheme);
     }
-  }, [resolvedTheme, chartRef]);
+  }, [resolvedTheme, chartRef, chartContainerRef]);
 };
 
-const applyColors = ({ chart, ...series }: ChartRefContents, theme: string) => {
-  const colors = getColors(theme);
+const applyColors = (
+  { chart, ...series }: ChartRefContents,
+  container: HTMLDivElement,
+  theme: string,
+) => {
+  const colors = getColors(container, theme);
   chart.applyOptions({
     grid: {
       horzLines: {
@@ -260,12 +271,20 @@ const applyColors = ({ chart, ...series }: ChartRefContents, theme: string) => {
   }
 };
 
-const getColors = (resolvedTheme: string) => ({
-  border: theme[`border-${resolvedTheme}`] ?? "red",
-  muted: theme[`muted-${resolvedTheme}`] ?? "",
-  chartNeutral: theme[`chart-series-neutral-${resolvedTheme}`] ?? "",
-  chartPrimary: theme[`chart-series-primary-${resolvedTheme}`] ?? "",
-});
+const getColors = (container: HTMLDivElement, resolvedTheme: string) => {
+  const style = getComputedStyle(container);
+
+  return {
+    border: style.getPropertyValue(`--border-${resolvedTheme}`),
+    muted: style.getPropertyValue(`--muted-${resolvedTheme}`),
+    chartNeutral: style.getPropertyValue(
+      `--chart-series-neutral-${resolvedTheme}`,
+    ),
+    chartPrimary: style.getPropertyValue(
+      `--chart-series-primary-${resolvedTheme}`,
+    ),
+  };
+};
 
 const getLocalTimestamp = (date: Date): UTCTimestamp =>
   (Date.UTC(

apps/insights/src/components/PriceFeed/theme.module.scss

@@ -1,15 +0,0 @@
-@use "@pythnetwork/component-library/theme";
-
-// stylelint-disable property-no-unknown
-:export {
-  border-light: theme.pallette-color("stone", 300);
-  border-dark: theme.pallette-color("steel", 600);
-  muted-light: theme.pallette-color("stone", 700);
-  muted-dark: theme.pallette-color("steel", 300);
-  chart-series-primary-light: theme.pallette-color("violet", 500);
-  chart-series-primary-dark: theme.pallette-color("violet", 400);
-  chart-series-neutral-light: theme.pallette-color("stone", 500);
-  chart-series-neutral-dark: theme.pallette-color("steel", 300);
-}
-
-// stylelint-enable property-no-unknown

apps/insights/src/components/PriceFeeds/price-feeds-card.module.scss

@@ -21,8 +21,3 @@
     }
   }
 }
-
-:export {
-  // stylelint-disable-next-line property-no-unknown
-  headerHeight: theme.$header-height;
-}

apps/insights/src/components/PriceFeeds/price-feeds-card.tsx

@@ -319,7 +319,7 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
       rounded
       fill
       label="Price Feeds"
-      stickyHeader={styles.headerHeight}
+      stickyHeader
       className={styles.table ?? ""}
       columns={[
         {

apps/insights/src/components/Publisher/ois-apy-history.module.scss

@@ -45,11 +45,9 @@
     .chartArea {
       color: theme.color("button", "primary", "background", "normal");
 
-      :global {
-        // stylelint-disable-next-line selector-class-pattern
-        .recharts-area-area {
-          fill: theme.color("states", "data", "background");
-        }
+      // stylelint-disable-next-line selector-class-pattern
+      :global(.recharts-area-area) {
+        fill: theme.color("states", "data", "background");
       }
     }
   }

apps/insights/src/components/Publishers/publishers-card.module.scss

@@ -39,8 +39,3 @@
     }
   }
 }
-
-:export {
-  // stylelint-disable-next-line property-no-unknown
-  headerHeight: theme.$header-height;
-}

apps/insights/src/components/Publishers/publishers-card.tsx

@@ -323,7 +323,7 @@ const PublishersCardContents = ({
       rounded
       fill
       label="Publishers"
-      stickyHeader={styles.headerHeight}
+      stickyHeader
       className={styles.table ?? ""}
       columns={[
         {

packages/component-library/.gitignore

@@ -1 +1,2 @@
 storybook-static
+dist/

packages/component-library/.prettierignore

@@ -1,2 +1,3 @@
+dist/
 coverage/
 node_modules/

packages/component-library/.storybook/main.ts

@@ -62,7 +62,8 @@ const config = {
       ...config.resolve,
       extensionAlias: {
         ...config.resolve?.extensionAlias,
-        ".js": [".js", ".ts", ".tsx"],
+        ".js": [".js", ".ts"],
+        ".jsx": [".jsx", ".tsx"],
       },
     };
 

packages/component-library/.storybook/preview.tsx

@@ -2,9 +2,9 @@ import type { Preview, Decorator } from "@storybook/react";
 import { useEffect } from "react";
 
 import styles from "./storybook.module.scss";
-import { BodyProviders } from "../src/AppShell/body-providers.js";
+import { BodyProviders } from "../src/AppShell/body-providers.jsx";
 import { sans } from "../src/AppShell/fonts";
-import { RootProviders } from "../src/AppShell/index.js";
+import { RootProviders } from "../src/AppShell/index.jsx";
 import shellStyles from "../src/AppShell/index.module.scss";
 
 const preview = {

packages/component-library/package.json

@@ -7,12 +7,21 @@
     "node": "22"
   },
   "exports": {
-    "./*": "./src/*/index.tsx",
-    "./useData": "./src/useData/index.ts",
-    "./theme": "./src/theme.scss"
+    "./*": {
+      "types": "./dist/esm/*/index.d.ts",
+      "default": "./dist/esm/*/index.jsx"
+    },
+    "./useData": {
+      "types": "./dist/esm/useData/index.d.ts",
+      "default": "./dist/esm/useData/index.js"
+    },
+    "./theme": "./dist/esm/theme.scss"
   },
   "scripts": {
+    "build:esm": "tsc --project tsconfig.build.json --outDir ./dist/esm && echo '{\"type\":\"module\"}' > dist/esm/package.json",
+    "build:scss": "copyfiles -u 1 \"src/**/*.scss\" dist/esm",
     "build:storybook": "storybook build",
+    "build:svg": "copyfiles -u 1 \"src/**/*.svg\" dist/esm",
     "fix:format": "prettier --write .",
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
@@ -60,6 +69,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "autoprefixer": "catalog:",
+    "copyfiles": "catalog:",
     "css-loader": "catalog:",
     "eslint": "catalog:",
     "jest": "catalog:",

packages/component-library/src/AppShell/body-providers.tsx

@@ -4,9 +4,9 @@ import { ThemeProvider } from "next-themes";
 import type { ComponentProps, CSSProperties } from "react";
 import { useState } from "react";
 
-import { OverlayVisibleContext } from "../overlay-visible-context.js";
-import { AlertProvider } from "../useAlert/index.js";
-import { DrawerProvider } from "../useDrawer/index.js";
+import { OverlayVisibleContext } from "../overlay-visible-context.jsx";
+import { AlertProvider } from "../useAlert/index.jsx";
+import { DrawerProvider } from "../useDrawer/index.jsx";
 
 type TabRootProps = ComponentProps<"div"> & {
   theme?: "dark" | "light" | undefined;

packages/component-library/src/AppShell/index.module.scss

@@ -5,6 +5,10 @@
 
   --header-height: #{theme.spacing(18)};
 
+  @each $name, $breakpoint in theme.$breakpoints {
+    --breakpoint-#{$name}: #{$breakpoint};
+  }
+
   @include theme.breakpoint("md") {
     --header-height: #{theme.spacing(20)};
   }

packages/component-library/src/AppShell/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { AppBody as AppShellComponent } from "./index.js";
+import { AppBody as AppShellComponent } from "./index.jsx";
 
 const meta = {
   component: AppShellComponent,

packages/component-library/src/AppShell/index.tsx

@@ -3,20 +3,20 @@ import clsx from "clsx";
 import dynamic from "next/dynamic";
 import type { ComponentProps, ReactNode } from "react";
 
-import { Amplitude } from "./amplitude.js";
-import { BodyProviders } from "./body-providers.js";
+import { Amplitude } from "./amplitude.jsx";
+import { BodyProviders } from "./body-providers.jsx";
 import { sans } from "./fonts.js";
-import { HtmlWithLang } from "./html-with-lang.js";
-import { I18nProvider } from "./i18n-provider.js";
+import { HtmlWithLang } from "./html-with-lang.jsx";
+import { I18nProvider } from "./i18n-provider.jsx";
 import styles from "./index.module.scss";
-import { TabRoot, TabPanel } from "./tabs";
-import { Footer } from "../Footer/index.js";
-import { Header } from "../Header/index.js";
-import { MainNavTabs } from "../MainNavTabs/index.js";
-import { MobileNavTabs } from "../MobileNavTabs/index.js";
-import { ComposeProviders } from "../compose-providers.js";
-import { RouterProvider } from "./router-provider.js";
-import { LoggerProvider } from "../useLogger/index.js";
+import { TabRoot, TabPanel } from "./tabs.jsx";
+import { Footer } from "../Footer/index.jsx";
+import { Header } from "../Header/index.jsx";
+import { MainNavTabs } from "../MainNavTabs/index.jsx";
+import { MobileNavTabs } from "../MobileNavTabs/index.jsx";
+import { ComposeProviders } from "../compose-providers.jsx";
+import { RouterProvider } from "./router-provider.jsx";
+import { LoggerProvider } from "../useLogger/index.jsx";
 
 import "./base.scss";
 

packages/component-library/src/AppShell/report-accessibility.ts

@@ -1,10 +1,9 @@
 "use client";
 
-import { useEffect } from "react";
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import React, { useEffect } from "react";
+import ReactDOM from "react-dom";
 
-import { useLogger } from "../useLogger/index.js";
+import { useLogger } from "../useLogger/index.jsx";
 
 const AXE_TIMEOUT = 1000;
 

packages/component-library/src/AppShell/tabs.tsx

@@ -3,7 +3,7 @@
 import { useSelectedLayoutSegment } from "next/navigation";
 import type { ComponentProps } from "react";
 
-import { TabPanel as UnstyledTabPanel, Tabs } from "../unstyled/Tabs/index.js";
+import { TabPanel as UnstyledTabPanel, Tabs } from "../unstyled/Tabs/index.jsx";
 
 export const TabRoot = (
   props: Omit<ComponentProps<typeof Tabs>, "selectedKey">,

packages/component-library/src/Badge/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Badge as BadgeComponent, VARIANTS, SIZES, STYLES } from "./index.js";
+import { Badge as BadgeComponent, VARIANTS, SIZES, STYLES } from "./index.jsx";
 
 const meta = {
   component: BadgeComponent,

packages/component-library/src/Breadcrumbs/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Breadcrumbs as BreadcrumbsComponent } from "./index.js";
+import { Breadcrumbs as BreadcrumbsComponent } from "./index.jsx";
 
 const meta = {
   component: BreadcrumbsComponent,

packages/component-library/src/Breadcrumbs/index.tsx

@@ -6,12 +6,12 @@ import clsx from "clsx";
 import type { ComponentProps, ReactNode } from "react";
 
 import styles from "./index.module.scss";
-import { Button } from "../Button/index.js";
-import { Link } from "../Link/index.js";
+import { Button } from "../Button/index.jsx";
+import { Link } from "../Link/index.jsx";
 import {
   Breadcrumbs as UnstyledBreadcrumbs,
   Breadcrumb,
-} from "../unstyled/Breadcrumbs/index.js";
+} from "../unstyled/Breadcrumbs/index.jsx";
 
 type OwnProps = {
   label: string;

packages/component-library/src/Button/index.stories.tsx

@@ -1,7 +1,7 @@
 import * as Icon from "@phosphor-icons/react/dist/ssr";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button as ButtonComponent, VARIANTS, SIZES } from "./index.js";
+import { Button as ButtonComponent, VARIANTS, SIZES } from "./index.jsx";
 
 const meta = {
   component: ButtonComponent,

packages/component-library/src/Button/index.tsx

@@ -7,8 +7,8 @@ import type {
 } from "react";
 
 import styles from "./index.module.scss";
-import { Button as UnstyledButton } from "../unstyled/Button/index.js";
-import { Link } from "../unstyled/Link/index.js";
+import { Button as UnstyledButton } from "../unstyled/Button/index.jsx";
+import { Link } from "../unstyled/Link/index.jsx";
 
 export const VARIANTS = [
   "primary",

packages/component-library/src/Card/index.stories.tsx

@@ -1,7 +1,7 @@
 import * as Icon from "@phosphor-icons/react/dist/ssr";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Card as CardComponent, VARIANTS } from "./index.js";
+import { Card as CardComponent, VARIANTS } from "./index.jsx";
 
 const meta = {
   component: CardComponent,

packages/component-library/src/Card/index.tsx

@@ -6,8 +6,8 @@ import { use } from "react";
 import { OverlayTriggerStateContext } from "react-aria-components";
 
 import styles from "./index.module.scss";
-import { Button } from "../unstyled/Button/index.js";
-import { Link } from "../unstyled/Link/index.js";
+import { Button } from "../unstyled/Button/index.jsx";
+import { Link } from "../unstyled/Link/index.jsx";
 
 export const VARIANTS = ["primary", "secondary", "tertiary"] as const;
 

packages/component-library/src/CopyButton/index.tsx

@@ -7,8 +7,8 @@ import type { ComponentProps } from "react";
 import { useCallback, useEffect, useState } from "react";
 
 import styles from "./index.module.scss";
-import { Button } from "../unstyled/Button/index.js";
-import { useLogger } from "../useLogger/index.js";
+import { Button } from "../unstyled/Button/index.jsx";
+import { useLogger } from "../useLogger/index.jsx";
 
 const COPY_INDICATOR_TIME = 1000;
 

packages/component-library/src/CrossfadeTabPanels/index.tsx

@@ -5,7 +5,7 @@ import type { ReactNode } from "react";
 import { use } from "react";
 import { TabListStateContext } from "react-aria-components";
 
-import { TabPanel as UnstyledTabPanel } from "../unstyled/Tabs/index.js";
+import { TabPanel as UnstyledTabPanel } from "../unstyled/Tabs/index.jsx";
 
 const AnimatedPanel = motion.create(UnstyledTabPanel);
 

packages/component-library/src/EntityList/index.module.scss

@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme";
+@use "../theme";
 
 .entityList {
   background: theme.color("background", "primary");

packages/component-library/src/EntityList/index.tsx

@@ -1,14 +1,11 @@
 "use client";
 
-import { Skeleton } from "@pythnetwork/component-library/Skeleton";
-import {
-  GridList,
-  GridListItem,
-} from "@pythnetwork/component-library/unstyled/GridList";
 import clsx from "clsx";
 import type { ComponentProps, ReactNode } from "react";
 
 import styles from "./index.module.scss";
+import { Skeleton } from "../Skeleton/index.jsx";
+import { GridList, GridListItem } from "../unstyled/GridList";
 
 type Props<T extends string> = ComponentProps<typeof GridList<RowConfig<T>>> & {
   headerLoadingSkeleton?: ReactNode | undefined;

packages/component-library/src/ErrorPage/index.module.scss

@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme";
+@use "../theme";
 
 .errorPage {
   display: flex;

packages/component-library/src/ErrorPage/index.tsx

@@ -1,8 +1,8 @@
 import { Warning } from "@phosphor-icons/react/dist/ssr/Warning";
-import { Button } from "@pythnetwork/component-library/Button";
-import { useLogger } from "@pythnetwork/component-library/useLogger";
 import { useEffect } from "react";
 
+import { Button } from "../Button";
+import { useLogger } from "../useLogger";
 import styles from "./index.module.scss";
 
 type Props = {

packages/component-library/src/Footer/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Footer as FooterComponent } from "./index.js";
+import { Footer as FooterComponent } from "./index.jsx";
 
 const meta = {
   component: FooterComponent,

packages/component-library/src/Footer/index.tsx

@@ -3,10 +3,10 @@ import type { ComponentProps, ElementType } from "react";
 
 import styles from "./index.module.scss";
 import Wordmark from "./wordmark.svg";
-import type { Props as ButtonProps } from "../Button/index.js";
-import { Button } from "../Button/index.js";
-import { SupportDrawer } from "../Header/index.js";
-import { Link } from "../Link/index.js";
+import type { Props as ButtonProps } from "../Button/index.jsx";
+import { Button } from "../Button/index.jsx";
+import { SupportDrawer } from "../Header/index.jsx";
+import { Link } from "../Link/index.jsx";
 import { socialLinks } from "../social-links.js";
 
 export const Footer = ({ className, ...props }: ComponentProps<"footer">) => (

packages/component-library/src/Header/index.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { ThemeProvider } from "next-themes";
 
-import { Header as HeaderComponent } from "./index.js";
+import { Header as HeaderComponent } from "./index.jsx";
 
 const meta = {
   component: HeaderComponent,

packages/component-library/src/Header/index.tsx

@@ -13,12 +13,12 @@ import type { ComponentProps, ReactNode } from "react";
 import { socialLinks } from "../social-links.js";
 import styles from "./index.module.scss";
 import Logo from "./logo.svg";
-import { ThemeSwitch } from "./theme-switch.js";
-import { Button } from "../Button/index.js";
-import type { Props as CardProps } from "../Card/index.js";
-import { Card } from "../Card/index.js";
-import { Link } from "../Link/index.js";
-import type { Link as UnstyledLink } from "../unstyled/Link/index.js";
+import { ThemeSwitch } from "./theme-switch.jsx";
+import { Button } from "../Button/index.jsx";
+import type { Props as CardProps } from "../Card/index.jsx";
+import { Card } from "../Card/index.jsx";
+import { Link } from "../Link/index.jsx";
+import type { Link as UnstyledLink } from "../unstyled/Link/index.jsx";
 
 type Props = ComponentProps<"header"> & {
   appName: string;

packages/component-library/src/Header/theme-switch.tsx

@@ -12,8 +12,8 @@ import { useCallback, useRef, useMemo } from "react";
 import { useIsSSR } from "react-aria";
 
 import styles from "./theme-switch.module.scss";
-import type { Props as ButtonProps } from "../Button/index.js";
-import { Button } from "../Button/index.js";
+import type { Props as ButtonProps } from "../Button/index.jsx";
+import { Button } from "../Button/index.jsx";
 
 type Props<T extends ElementType> = Omit<
   ButtonProps<T>,

packages/component-library/src/Link/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Link as LinkComponent } from "./index.js";
+import { Link as LinkComponent } from "./index.jsx";
 
 const meta = {
   component: LinkComponent,

packages/component-library/src/Link/index.tsx

@@ -2,8 +2,8 @@ import clsx from "clsx";
 import type { ComponentProps, ElementType } from "react";
 
 import styles from "./index.module.scss";
-import { Button } from "../unstyled/Button/index.js";
-import { Link as UnstyledLink } from "../unstyled/Link/index.js";
+import { Button } from "../unstyled/Button/index.jsx";
+import { Link as UnstyledLink } from "../unstyled/Link/index.jsx";
 
 type OwnProps = {
   invert?: boolean | undefined;

packages/component-library/src/MainNavTabs/index.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { MainNavTabs as MainNavTabsComponent } from "./index.js";
-import { Tabs } from "../unstyled/Tabs/index.js";
+import { MainNavTabs as MainNavTabsComponent } from "./index.jsx";
+import { Tabs } from "../unstyled/Tabs/index.jsx";
 
 const meta = {
   component: MainNavTabsComponent,

packages/component-library/src/MainNavTabs/index.tsx

@@ -8,7 +8,7 @@ import { useId } from "react";
 
 import styles from "./index.module.scss";
 import buttonStyles from "../Button/index.module.scss";
-import { Tab, TabList } from "../unstyled/Tabs/index.js";
+import { Tab, TabList } from "../unstyled/Tabs/index.jsx";
 
 type Tab = Omit<ComponentProps<typeof Tab>, "id" | "href"> & {
   segment: string;

packages/component-library/src/Meter/index.module.scss

@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme";
+@use "../theme";
 
 .meter {
   display: flex;

packages/component-library/src/Meter/index.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Meter as MeterComponent } from "@pythnetwork/component-library/unstyled/Meter";
 import clsx from "clsx";
 import type { ComponentProps, ReactNode } from "react";
 
 import styles from "./index.module.scss";
+import { Meter as MeterComponent } from "../unstyled/Meter";
 
 type OwnProps = {
   label: string;

packages/component-library/src/MobileNavTabs/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { MobileNavTabs as MobileNavTabsComponent } from "./index.js";
+import { MobileNavTabs as MobileNavTabsComponent } from "./index.jsx";
 
 const meta = {
   component: MobileNavTabsComponent,

packages/component-library/src/MobileNavTabs/index.tsx

@@ -7,7 +7,7 @@ import type { ReactNode } from "react";
 import { useId, useMemo } from "react";
 
 import styles from "./index.module.scss";
-import { Link } from "../unstyled/Link/index.js";
+import { Link } from "../unstyled/Link/index.jsx";
 
 type Props = {
   className?: string | undefined;

packages/component-library/src/ModalDialog/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { PanInfo } from "motion/react";
+import type { MotionProps, PanInfo } from "motion/react";
 import { motion } from "motion/react";
 import type {
   ComponentProps,
@@ -26,10 +26,29 @@ import {
   Select,
 } from "react-aria-components";
 
-import { useSetOverlayVisible } from "../overlay-visible-context.js";
+import { useSetOverlayVisible } from "../overlay-visible-context.jsx";
 
-const MotionModalOverlay = motion.create(ModalOverlay);
-const MotionDialog = motion.create(Dialog);
+// These types are absurd, but the annotations have to be here or else we get a
+// TS2742 due to some issue in how framer-motion is packaged.  Eventually it
+// would be great to figure out what about framer-motion's packaging causes this
+// to be required, and to find a way to make it a nonissue, but for now these
+// annotations will allow us to move on...
+const MotionModalOverlay: ComponentType<
+  Omit<ComponentProps<typeof ModalOverlay>, keyof MotionProps> &
+    Omit<MotionProps, "children"> & {
+      children?:
+        | MotionProps["children"]
+        | ComponentProps<typeof ModalOverlay>["children"];
+    }
+> = motion.create(ModalOverlay);
+const MotionDialog: ComponentType<
+  Omit<ComponentProps<typeof Dialog>, keyof MotionProps> &
+    Omit<MotionProps, "children"> & {
+      children?:
+        | MotionProps["children"]
+        | ComponentProps<typeof Dialog>["children"];
+    }
+> = motion.create(Dialog);
 
 export const ModalDialogTrigger = (
   props: ComponentProps<typeof DialogTrigger>,

packages/component-library/src/NoResults/index.module.scss

@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme";
+@use "../theme";
 
 .noResults {
   display: flex;

packages/component-library/src/NoResults/index.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import type { ReactNode } from "react";
 
 import styles from "./index.module.scss";
-import { Button } from "../Button/index.js";
+import { Button } from "../Button/index.jsx";
 
 type Props = {
   className?: string | undefined;

packages/component-library/src/NotFoundPage/index.module.scss

@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme";
+@use "../theme";
 
 .notFoundPage {
   display: flex;

packages/component-library/src/NotFoundPage/index.tsx

@@ -1,6 +1,6 @@
 import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
-import { Button } from "@pythnetwork/component-library/Button";
 
+import { Button } from "../Button";
 import styles from "./index.module.scss";
 
 export const NotFoundPage = () => (

packages/component-library/src/Paginator/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Paginator as PaginatorComponent } from "./index.js";
+import { Paginator as PaginatorComponent } from "./index.jsx";
 
 const meta = {
   component: PaginatorComponent,

packages/component-library/src/Paginator/index.tsx

@@ -6,11 +6,11 @@ import { useMemo, useCallback } from "react";
 import type { Link } from "react-aria-components";
 
 import styles from "./index.module.scss";
-import type { Props as ButtonProps } from "../Button/index.js";
-import { Button } from "../Button/index.js";
+import type { Props as ButtonProps } from "../Button/index.jsx";
+import { Button } from "../Button/index.jsx";
 import buttonStyles from "../Button/index.module.scss";
-import { Select } from "../Select/index.js";
-import { Toolbar } from "../unstyled/Toolbar/index.js";
+import { Select } from "../Select/index.jsx";
+import { Toolbar } from "../unstyled/Toolbar/index.jsx";
 
 type Props = {
   numPages: number;

packages/component-library/src/SearchInput/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { SearchInput as SearchInputComponent, SIZES } from "./index.js";
+import { SearchInput as SearchInputComponent, SIZES } from "./index.jsx";
 
 const meta = {
   component: SearchInputComponent,

packages/component-library/src/SearchInput/index.tsx

@@ -7,9 +7,9 @@ import clsx from "clsx";
 import type { CSSProperties, ComponentProps } from "react";
 
 import styles from "./index.module.scss";
-import { Button } from "../unstyled/Button/index.js";
-import { SearchField } from "../unstyled/SearchField/index.js";
-import { Input } from "../unstyled/TextField/index.js";
+import { Button } from "../unstyled/Button/index.jsx";
+import { SearchField } from "../unstyled/SearchField/index.jsx";
+import { Input } from "../unstyled/TextField/index.jsx";
 
 export const SIZES = ["xs", "sm", "md", "lg"] as const;
 

packages/component-library/src/Select/index.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Select as SelectComponent } from "./index.js";
-import buttonMeta from "../Button/index.stories.js";
+import { Select as SelectComponent } from "./index.jsx";
+import buttonMeta from "../Button/index.stories.jsx";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { children, beforeIcon, ...argTypes } = buttonMeta.argTypes;

packages/component-library/src/Select/index.tsx

@@ -14,14 +14,14 @@ import {
 } from "react-aria-components";
 
 import styles from "./index.module.scss";
-import type { Props as ButtonProps } from "../Button/index.js";
-import { Button } from "../Button/index.js";
-import { DropdownCaretDown } from "../DropdownCaretDown/index.js";
+import type { Props as ButtonProps } from "../Button/index.jsx";
+import { Button } from "../Button/index.jsx";
+import { DropdownCaretDown } from "../DropdownCaretDown/index.jsx";
 import {
   ListBox,
   ListBoxItem,
   ListBoxSection,
-} from "../unstyled/ListBox/index.js";
+} from "../unstyled/ListBox/index.jsx";
 
 export type Props<T extends { id: string | number }> = Omit<
   ComponentProps<typeof BaseSelect>,

packages/component-library/src/SingleToggleGroup/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { SingleToggleGroup as SingleToggleGroupComponent } from "./index.js";
+import { SingleToggleGroup as SingleToggleGroupComponent } from "./index.jsx";
 
 const meta = {
   component: SingleToggleGroupComponent,

packages/component-library/src/Skeleton/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Skeleton as SkeletonComponent } from "./index.js";
+import { Skeleton as SkeletonComponent } from "./index.jsx";
 
 const meta = {
   component: SkeletonComponent,

packages/component-library/src/Spinner/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Spinner as SpinnerComponent } from "./index.js";
+import { Spinner as SpinnerComponent } from "./index.jsx";
 
 const meta = {
   component: SpinnerComponent,

packages/component-library/src/StatCard/index.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { StatCard as StatCardComponent } from "./index.js";
-import cardMeta, { Card as CardStory } from "../Card/index.stories.js";
+import { StatCard as StatCardComponent } from "./index.jsx";
+import cardMeta, { Card as CardStory } from "../Card/index.stories.jsx";
 
 const cardMetaArgTypes = () => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

packages/component-library/src/StatCard/index.tsx

@@ -2,8 +2,8 @@ import clsx from "clsx";
 import type { ReactNode, ElementType } from "react";
 
 import styles from "./index.module.scss";
-import type { Props as CardProps } from "../Card/index.js";
-import { Card } from "../Card/index.js";
+import type { Props as CardProps } from "../Card/index.jsx";
+import { Card } from "../Card/index.jsx";
 
 type OwnPropsSingle = {
   header: ReactNode;

packages/component-library/src/Status/index.stories.tsx

@@ -1,6 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Status as StatusComponent, VARIANTS, SIZES, STYLES } from "./index.js";
+import {
+  Status as StatusComponent,
+  VARIANTS,
+  SIZES,
+  STYLES,
+} from "./index.jsx";
 
 const meta = {
   component: StatusComponent,

packages/component-library/src/Switch/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Switch as SwitchComponent } from "./index.js";
+import { Switch as SwitchComponent } from "./index.jsx";
 
 const meta = {
   component: SwitchComponent,

packages/component-library/src/Switch/index.tsx

@@ -3,7 +3,7 @@ import { motion } from "motion/react";
 import type { ComponentProps } from "react";
 
 import styles from "./index.module.scss";
-import { Switch as UnstyledSwitch } from "../unstyled/Switch/index.js";
+import { Switch as UnstyledSwitch } from "../unstyled/Switch/index.jsx";
 
 type OwnProps = {
   isPending?: boolean | undefined;

packages/component-library/src/TabList/index.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { TabList as TabListComponent } from "./index.js";
-import { Tabs as UnstyledTabs } from "../unstyled/Tabs/index.js";
+import { TabList as TabListComponent } from "./index.jsx";
+import { Tabs as UnstyledTabs } from "../unstyled/Tabs/index.jsx";
 
 const meta = {
   component: TabListComponent,

packages/component-library/src/TabList/index.tsx

@@ -6,7 +6,7 @@ import type { ComponentProps } from "react";
 
 import styles from "./index.module.scss";
 import buttonStyles from "../Button/index.module.scss";
-import { Tab, TabList as UnstyledTabList } from "../unstyled/Tabs/index.js";
+import { Tab, TabList as UnstyledTabList } from "../unstyled/Tabs/index.jsx";
 
 type OwnProps = {
   label: string;

packages/component-library/src/Table/index.module.scss

@@ -105,7 +105,7 @@
 
         &[data-sticky-header] {
           position: sticky;
-          top: var(--sticky-header-top);
+          top: theme.$header-height;
           z-index: 1;
         }
 

packages/component-library/src/Table/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Table as TableComponent } from "./index.js";
+import { Table as TableComponent } from "./index.jsx";
 
 const meta = {
   component: TableComponent,

packages/component-library/src/Table/index.tsx

@@ -9,8 +9,8 @@ import type {
 } from "react-aria-components";
 
 import styles from "./index.module.scss";
-import { Button } from "../Button/index.js";
-import { Skeleton } from "../Skeleton/index.js";
+import { Button } from "../Button/index.jsx";
+import { Skeleton } from "../Skeleton/index.jsx";
 import {
   Cell,
   Column,
@@ -18,14 +18,14 @@ import {
   Table as UnstyledTable,
   TableBody,
   TableHeader,
-} from "../unstyled/Table/index.js";
+} from "../unstyled/Table/index.jsx";
 
-export type { SortDescriptor } from "../unstyled/Table/index.js";
+export type { SortDescriptor } from "../unstyled/Table/index.jsx";
 
 type TableProps<T extends string> = ComponentProps<typeof UnstyledTable> & {
   className?: string | undefined;
   headerCellClassName?: string | undefined;
-  stickyHeader?: boolean | string | undefined;
+  stickyHeader?: boolean | undefined;
   fill?: boolean | undefined;
   rounded?: boolean | undefined;
   label: string;
@@ -112,10 +112,7 @@ export const Table = <T extends string>({
             <Column
               data-sticky-header={stickyHeader === undefined ? undefined : ""}
               {...columnConfig}
-              {...cellProps(columnConfig, headerCellClassName, {
-                "--sticky-header-top":
-                  typeof stickyHeader === "string" ? stickyHeader : 0,
-              } as CSSProperties)}
+              {...cellProps(columnConfig, headerCellClassName)}
             >
               {({ allowsSorting, sortDirection, ...column }) => (
                 <>

packages/component-library/src/Term/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Term as TermComponent } from "./index.js";
+import { Term as TermComponent } from "./index.jsx";
 
 const meta = {
   component: TermComponent,

packages/component-library/src/unstyled/Button/index.tsx

@@ -5,10 +5,10 @@ import { useCallback } from "react";
 import type { PressEvent } from "react-aria-components";
 import { Button as BaseButton } from "react-aria-components";
 
-import type { OpenAlertArgs } from "../../useAlert/index.js";
-import { useAlert } from "../../useAlert/index.js";
-import type { OpenDrawerArgs } from "../../useDrawer/index.js";
-import { useDrawer } from "../../useDrawer/index.js";
+import type { OpenAlertArgs } from "../../useAlert/index.jsx";
+import { useAlert } from "../../useAlert/index.jsx";
+import type { OpenDrawerArgs } from "../../useDrawer/index.jsx";
+import { useDrawer } from "../../useDrawer/index.jsx";
 
 export type Props = ComponentProps<typeof BaseButton> & {
   alert?: OpenAlertArgs | undefined;

packages/component-library/src/useAlert/index.stories.tsx

@@ -1,8 +1,8 @@
 import * as Icon from "@phosphor-icons/react/dist/ssr";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { useAlert as useAlertImpl } from "./index.js";
-import { Button } from "../Button/index.js";
+import { useAlert as useAlertImpl } from "./index.jsx";
+import { Button } from "../Button/index.jsx";
 
 const ShowButton = (
   props: Parameters<ReturnType<typeof useAlertImpl>["open"]>[0],

packages/component-library/src/useAlert/index.tsx

@@ -6,9 +6,12 @@ import type { ComponentProps, ReactNode } from "react";
 import { Heading } from "react-aria-components";
 
 import styles from "./index.module.scss";
-import { Button } from "../Button/index.js";
-import type { OpenArgs } from "../ModalDialog/index.js";
-import { ModalDialog, createModalDialogContext } from "../ModalDialog/index.js";
+import { Button } from "../Button/index.jsx";
+import type { OpenArgs } from "../ModalDialog/index.jsx";
+import {
+  ModalDialog,
+  createModalDialogContext,
+} from "../ModalDialog/index.jsx";
 
 const CLOSE_DURATION_IN_S = 0.1;
 

packages/component-library/src/useDrawer/index.module.scss

@@ -159,9 +159,3 @@
     }
   }
 }
-
-// stylelint-disable property-no-unknown
-:export {
-  breakpoint-sm: theme.map-get-strict(theme.$breakpoints, "sm");
-}
-// stylelint-enable property-no-unknown

packages/component-library/src/useDrawer/index.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { useDrawer as useDrawerImpl } from "./index.js";
-import { Button } from "../Button/index.js";
+import { useDrawer as useDrawerImpl } from "./index.jsx";
+import { Button } from "../Button/index.jsx";
 
 const OpenButton = (
   props: Parameters<ReturnType<typeof useDrawerImpl>["open"]>[0],

packages/component-library/src/useDrawer/index.tsx

@@ -3,13 +3,17 @@ import { useMediaQuery } from "@react-hookz/web";
 import clsx from "clsx";
 import { animate, useMotionValue, useMotionValueEvent } from "motion/react";
 import type { ComponentProps, ReactNode } from "react";
-import { useState, useRef, useEffect } from "react";
+import { useMemo, useState, useRef, useEffect } from "react";
+import { useIsSSR } from "react-aria";
 import { Heading } from "react-aria-components";
 
 import styles from "./index.module.scss";
-import { Button } from "../Button/index.js";
-import type { OpenArgs } from "../ModalDialog/index.js";
-import { ModalDialog, createModalDialogContext } from "../ModalDialog/index.js";
+import { Button } from "../Button/index.jsx";
+import type { OpenArgs } from "../ModalDialog/index.jsx";
+import {
+  ModalDialog,
+  createModalDialogContext,
+} from "../ModalDialog/index.jsx";
 
 const CLOSE_DURATION_IN_S = 0.15;
 
@@ -245,8 +249,19 @@ const useAnimationProps = (
       };
 };
 
-const useIsLarge = () =>
-  useMediaQuery(`(min-width: ${styles["breakpoint-sm"] ?? ""})`);
+const useIsLarge = () => {
+  const isSSR = useIsSSR();
+  const breakpoint = useMemo(
+    () =>
+      isSSR
+        ? ""
+        : getComputedStyle(
+            globalThis.document.documentElement,
+          ).getPropertyValue("--breakpoint-sm"),
+    [isSSR],
+  );
+  return useMediaQuery(`(min-width: ${breakpoint})`);
+};
 
 const { Provider, useValue } = createModalDialogContext<
   Props,

packages/component-library/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "incremental": false,
+    "declaration": true
+  },
+  "exclude": ["node_modules", "dist", ".storybook", "**/*.stories.tsx"]
+}

packages/component-library/tsconfig.json

@@ -6,5 +6,6 @@
     "**/*.tsx",
     ".storybook/**/*.ts",
     ".storybook/**/*.tsx"
-  ]
+  ],
+  "exclude": ["node_modules", "dist"]
 }

packages/component-library/turbo.json

@@ -2,9 +2,28 @@
   "$schema": "https://turbo.build/schema.json",
   "extends": ["//"],
   "tasks": {
+    "build": {
+      "dependsOn": [
+        "//#install:modules",
+        "^build",
+        "build:esm",
+        "build:scss",
+        "build:svg"
+      ]
+    },
+    "build:scss": {
+      "dependsOn": ["//#install:modules"],
+      "inputs": ["src/**/*.scss"],
+      "outputs": ["dist/**/*.scss"]
+    },
     "build:storybook": {
       "outputs": ["storybook-static/**"]
     },
+    "build:svg": {
+      "dependsOn": ["//#install:modules"],
+      "inputs": ["src/**/*.svg"],
+      "outputs": ["dist/**/*.svg"]
+    },
     "fix:lint": {
       "dependsOn": [
         "//#install:modules",

pnpm-lock.yaml

@@ -141,6 +141,9 @@ catalogs:
     connectkit:
       specifier: ^1.9.0
       version: 1.9.0
+    copyfiles:
+      specifier: ^2.4.1
+      version: 2.4.1
     cryptocurrency-icons:
       specifier: ^0.18.1
       version: 0.18.1
@@ -1866,6 +1869,9 @@ importers:
       autoprefixer:
         specifier: 'catalog:'
         version: 10.4.21(postcss@8.5.3)
+      copyfiles:
+        specifier: 'catalog:'
+        version: 2.4.1
       css-loader:
         specifier: 'catalog:'
         version: 7.1.2(webpack@5.98.0(esbuild@0.25.2))

pnpm-workspace.yaml

@@ -91,6 +91,7 @@ catalog:
   class-variance-authority: ^0.7.1
   clsx: ^2.1.1
   connectkit: ^1.9.0
+  copyfiles: ^2.4.1
   cryptocurrency-icons: ^0.18.1
   css-loader: ^7.1.2
   dnum: ^2.14.0