@mezo-org/mezo-clay 0.1.0-dev.9 → 0.2.0-dev.1

package/README.md

@@ -44,6 +44,28 @@ Storybook automatically runs component tests for each story (if written as a [pl
 pnpm run test
 ```
 
+### Creating new components
+
+Make sure to export your new component from `src/components/index.ts`. Then either run the generate exports script to update the `package.json`:
+
+```shell
+pnpm run generate-exports
+```
+
+or manually add it to the `exports` section of `package.json` like:
+
+```json
+  "exports": {
+    ...
+    "./my-component": {
+      "types": "./dist/components/my-component/index.d.ts",
+      "default": "./dist/components/my-component/index.js"
+    },
+  }
+```
+
+These steps make sure the component is included in the Clay package and make it available as a subpath export.
+
 ### Build
 
 #### Build storybook
@@ -62,6 +84,36 @@ pnpm run build:lib
 
 The library is output as the /dist directory.
 
+### Publishing to NPM
+
+Before you build and publish to NPM, you'll want to increment the version in `package.json`.
+
+#### Build the library (same as above)
+
+```shell
+pnpm run build:lib
+```
+
+#### Login to NPM
+
+```shell
+pnpm login
+```
+
+#### Test the Built Package Locally
+
+Use `pnpm pack` to build a `.tgz` file that you can link to from your test application.
+
+#### Publish
+
+```shell
+pnpm publish --access public
+```
+
+__Note__: You can use the `--dry-run` flag on `publish` if you want to preview what will be included in the release package without actually publishing.
+
+Check out your new release on the [npm page](https://www.npmjs.com/package/@mezo-org/mezo-clay).
+
 ## Using Clay
 
 ### Install
@@ -70,35 +122,134 @@ The library is output as the /dist directory.
 pnpm add @mezo-org/mezo-clay
 ```
 
-Clay (and Base) uses [Styletron](https://www.styletron.org/) for its component styling (as css in js), and requires its engine as a peer dependency, so you will need to install it as well.
+Add peer dependencies:
 
 ```shell
-pnpm add styletron-engine-monolithic
+pnpm add baseui@0.0.0-next-18f01efe0 "react@^18.3.1" "react-dom@^18.3.1" "styletron-engine-monolithic@^1.0.0"
+  "styletron-react@^6.1.1"
 ```
 
 ### Adding Clay to your React app
 
-Wrap the root of your app with `ClayProvider` component, like so:
+Wrap the root of your app with the `ClayProvider` component, like so:
 
 ```js
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
-import { ClayLightTheme } from "mezo-clay"
+import { ClayLightTheme, ClayProvider } from "@mezo-org/mezo-clay"
 
-import "mezo-clay/dist/mezo-clay.css" // Font styles
+import "@mezo-org/mezo-clay/fonts.css" // Font styles
 
 import App from "./App.tsx"
 
-const engine = new Styletron()
-
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
       <ClayProvider theme={ClayLightTheme}>
-          <App />
+        <App />
       </ClayProvider>
     </StrictMode>
   ,
 )
 ```
 
-Import the `mezo-clay/dist/mezo-clay.css` to ensure that the proper fonts are included.
+Import the `@mezo-org/mezo-clay/fonts.css` to ensure that the proper fonts are included.
+
+The Clay package supports both barrel style and subpath imports:
+
+```js
+// Import components (barrel style - backward compatible)
+import { Button, Input } from "@mezo-org/mezo-clay"
+import { ClayProvider, ClayLightTheme } from "@mezo-org/mezo-clay"
+
+// Or use subpath imports (better for tree-shaking)
+import { Button } from "@mezo-org/mezo-clay/button"
+import { Input } from "@mezo-org/mezo-clay/input"
+```
+
+### Adding Clay to Next.js
+
+> **Note:** Clay currently supports the **Pages Router** only. Clay is built on Base UI, which uses Styletron (a runtime CSS-in-JS library). Styletron requires React Context and hooks to generate styles at runtime, making it incompatible with React Server Components used in the App Router.
+
+#### 1. Setup SSR in `_document.tsx`
+
+```tsx
+import { styletronSheet } from "@mezo-org/mezo-clay/ssr"
+import { DocumentContext, Head, Html, Main, NextScript } from "next/document"
+import type { DocumentProps } from "next/document"
+
+export default function Document(props: DocumentProps) {
+  return (
+    <Html>
+      <Head>
+        {/* Pass the styletron stylesheets to the <head> */}
+        {props.__NEXT_DATA__.props?.styletronSheets}
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+
+Document.getInitialProps = async (ctx: DocumentContext) => {
+  const engine = styletronSheet.getStyletronEngine()
+
+  const page = await ctx.renderPage({
+    enhanceApp: (App) => (props) => <App {...props} styletronEngine={engine} />
+  })
+
+  return {
+    ...await ctx.defaultGetInitialProps(ctx),
+    ...page,
+    styletronSheets: styletronSheet.getStylesheets(engine)
+  }
+}
+```
+
+#### 2. Setup ClayProvider in `_app.tsx`
+
+```tsx
+import { ClayProvider, ClayLightTheme } from "@mezo-org/mezo-clay"
+import { styletronSheet } from "@mezo-org/mezo-clay/ssr"
+import type { AppProps } from "next/app"
+import { useMemo } from "react"
+
+import "@mezo-org/mezo-clay/fonts.css"
+
+interface CustomAppProps extends AppProps {
+  styletronEngine?: any
+}
+
+export default function App({
+  Component,
+  pageProps,
+  styletronEngine
+}: CustomAppProps) {
+  const engine = useMemo(
+    () => styletronEngine ?? styletronSheet.getStyletronEngine(),
+    [styletronEngine]
+  )
+
+  return (
+    <ClayProvider theme={ClayLightTheme} engine={engine}>
+      <Component {...pageProps} />
+    </ClayProvider>
+  )
+}
+```
+
+#### 3. Use Subpath Imports (Required for SSR)
+
+```tsx
+// ✅ Use subpath imports for SSR compatibility
+import { Button } from "@mezo-org/mezo-clay/button"
+import { Input } from "@mezo-org/mezo-clay/input"
+import { HeadingLarge } from "@mezo-org/mezo-clay/typography"
+import { useStyletron } from "@mezo-org/mezo-clay/styles"
+
+// ❌ Avoid barrel imports in SSR contexts
+import { Button, Input, HeadingLarge, useStyletron } from "@mezo-org/mezo-clay"
+```
+
+**Non-SSR-safe components** (Modal, Snackbar, Dropdown) must use `dynamic(() => import(...), { ssr: false })`.

package/dist/_virtual/ResizeObserver.es.js

@@ -0,0 +1,6 @@
+import { getAugmentedNamespace as e } from "./_commonjsHelpers.js";
+import * as r from "../node_modules/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js";
+const t = /* @__PURE__ */ e(r);
+export {
+  t as default
+};

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,26 @@
+function n(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+function c(e) {
+  if (e.__esModule) return e;
+  var o = e.default;
+  if (typeof o == "function") {
+    var t = function r() {
+      return this instanceof r ? Reflect.construct(o, arguments, this.constructor) : o.apply(this, arguments);
+    };
+    t.prototype = o.prototype;
+  } else t = {};
+  return Object.defineProperty(t, "__esModule", { value: !0 }), Object.keys(e).forEach(function(r) {
+    var u = Object.getOwnPropertyDescriptor(e, r);
+    Object.defineProperty(t, r, u.get ? u : {
+      enumerable: !0,
+      get: function() {
+        return e[r];
+      }
+    });
+  }), t;
+}
+export {
+  c as getAugmentedNamespace,
+  n as getDefaultExportFromCjs
+};

package/dist/_virtual/index.js

@@ -0,0 +1,7 @@
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
+import { __require as t } from "../node_modules/.pnpm/use-fit-text@2.4.0_react@18.3.1/node_modules/use-fit-text/dist/index.js";
+var e = t();
+const i = /* @__PURE__ */ r(e);
+export {
+  i as default
+};

package/dist/assets/fonts/font-face.css

@@ -0,0 +1,62 @@
+@font-face {
+  font-family: "RiformaLLWeb-Light";
+  src: url("./RiformaLLWeb-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "RiformaLLWeb-Regular";
+  src: url("./RiformaLLWeb-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "RiformaLLWeb-Medium";
+  src: url("./RiformaLLWeb-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "RiformaLLWeb-Bold";
+  src: url("./RiformaLLWeb-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "RiformaLLWeb-Heavy";
+  src: url("./RiformaLLWeb-Heavy.woff2") format("woff2");
+  font-weight: 900;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "RiformaMonoLLWeb-Regular";
+  src: url("./RiformaMonoLLWeb-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "RiformaMonoLLWeb-Bold";
+  src: url("RiformaMonoLLWeb-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Password";
+  font-style: normal;
+  font-weight: 400;
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAA8AAAAAB2QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcg9+z70dERUYAAAF0AAAAHAAAAB4AJwANT1MvMgAAAZAAAAA/AAAAYH7AkBhjbWFwAAAB0AAAAFkAAAFqZowMx2N2dCAAAAIsAAAABAAAAAQAIgKIZ2FzcAAAAjAAAAAIAAAACAAAABBnbHlmAAACOAAAALkAAAE0MwNYJ2hlYWQAAAL0AAAAMAAAADYPA2KgaGhlYQAAAyQAAAAeAAAAJAU+ATJobXR4AAADRAAAABwAAAAcCPoA6mxvY2EAAANgAAAAEAAAABAA5gFMbWF4cAAAA3AAAAAaAAAAIAAKAE9uYW1lAAADjAAAARYAAAIgB4hZ03Bvc3QAAASkAAAAPgAAAE5Ojr8ld2ViZgAABOQAAAAGAAAABuK7WtIAAAABAAAAANXulPUAAAAA1viLwQAAAADW+JM4eNpjYGRgYOABYjEgZmJgBEI2IGYB8xgAA+AANXjaY2BifMg4gYGVgYVBAwOeYEAFjMgcp8yiFAYHBl7VP8wx/94wpDDHMIoo2DP8B8kx2TLHACkFBkYA8/IL3QB42mNgYGBmgGAZBkYGEEgB8hjBfBYGDyDNx8DBwMTABmTxMigoKKmeV/3z/z9YJTKf8f/X/4/vP7pldosLag4SYATqhgkyMgEJJnQFECcMOGChndEAfOwRuAAAAAAiAogAAQAB//8AD3jaY2BiUGJgYDRiWsXAzMDOoLeRkUHfZhM7C8Nbo41srHdsNjEzAZkMG5lBwqwg4U3sbIx/bDYxgsSNBRUF1Y0FlZUYBd6dOcO06m+YElMa0DiGJIZUxjuM9xjkGRhU2djZlJXU1UDQ1MTcDASNjcTFQFBUBGjYEkkVMJCU4gcCKRTeHCk+fn4+KSllsJiUJEhMUgrMUQbZk8bgz/iA8SRR9qzAY087FjEYD2QPDDAzMFgyAwC39TCRAAAAeNpjYGRgYADid/fqneL5bb4yyLMwgMC1H90HIfRkCxDN+IBpFZDiYGAC8QBbSwuceNpjYGRgYI7594aBgcmOAQgYHzAwMqACdgBbWQN0AAABdgAiAAAAAAAAAAABFAAAAj4AYgI+AGYB9AAAAAAAKgAqACoAKgBeAJIAmnjaY2BkYGBgZ1BgYGIAAUYGBNADEQAFQQBaAAB42o2PwUrDQBCGvzVV9GAQDx485exBY1CU3PQgVgIFI9prlVqDwcZNC/oSPoKP4HNUfQLfxYN/NytCe5GwO9/88+/MBAh5I8C0VoAtnYYNa8oaXpAn9RxIP/XcIqLreZENnjwvyfPieVVdXj2H7DHxPJH/2/M7sVn3/MGyOfb8SWjOGv4K2DRdctpkmtqhos+D6ISh4kiUUXDj1Fr3Bc/Oc0vPqec6A8aUyu1cdTaPZvyXyqz6Fm5axC7bxHOv/r/dnbSRXCk7+mpVrOqVtFqdp3NKxaHUgeod9cm40rtrzfrt2OyQa8fppCO9tk7d1x0rpiQcuDuRkjjtkHt16ctbuf/radZY52/PnEcphXpZOcofiEZNcQAAeNpjYGIAg///GBgZsAF2BgZGJkZmBmaGdkYWRla29JzKggxD9tK8TAMDAxc2D0MLU2NjENfI1M0ZACUXCrsAAAABWtLiugAA) format('woff');
+}

package/dist/assets/fonts/riforma/font-face.css

@@ -0,0 +1,62 @@
+@font-face {
+  font-family: "RiformaLLWeb-Light";
+  src: url("./RiformaLLWeb-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "RiformaLLWeb-Regular";
+  src: url("./RiformaLLWeb-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "RiformaLLWeb-Medium";
+  src: url("./RiformaLLWeb-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "RiformaLLWeb-Bold";
+  src: url("./RiformaLLWeb-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "RiformaLLWeb-Heavy";
+  src: url("./RiformaLLWeb-Heavy.woff2") format("woff2");
+  font-weight: 900;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "RiformaMonoLLWeb-Regular";
+  src: url("./RiformaMonoLLWeb-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "RiformaMonoLLWeb-Bold";
+  src: url("RiformaMonoLLWeb-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Password";
+  font-style: normal;
+  font-weight: 400;
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAA8AAAAAB2QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcg9+z70dERUYAAAF0AAAAHAAAAB4AJwANT1MvMgAAAZAAAAA/AAAAYH7AkBhjbWFwAAAB0AAAAFkAAAFqZowMx2N2dCAAAAIsAAAABAAAAAQAIgKIZ2FzcAAAAjAAAAAIAAAACAAAABBnbHlmAAACOAAAALkAAAE0MwNYJ2hlYWQAAAL0AAAAMAAAADYPA2KgaGhlYQAAAyQAAAAeAAAAJAU+ATJobXR4AAADRAAAABwAAAAcCPoA6mxvY2EAAANgAAAAEAAAABAA5gFMbWF4cAAAA3AAAAAaAAAAIAAKAE9uYW1lAAADjAAAARYAAAIgB4hZ03Bvc3QAAASkAAAAPgAAAE5Ojr8ld2ViZgAABOQAAAAGAAAABuK7WtIAAAABAAAAANXulPUAAAAA1viLwQAAAADW+JM4eNpjYGRgYOABYjEgZmJgBEI2IGYB8xgAA+AANXjaY2BifMg4gYGVgYVBAwOeYEAFjMgcp8yiFAYHBl7VP8wx/94wpDDHMIoo2DP8B8kx2TLHACkFBkYA8/IL3QB42mNgYGBmgGAZBkYGEEgB8hjBfBYGDyDNx8DBwMTABmTxMigoKKmeV/3z/z9YJTKf8f/X/4/vP7pldosLag4SYATqhgkyMgEJJnQFECcMOGChndEAfOwRuAAAAAAiAogAAQAB//8AD3jaY2BiUGJgYDRiWsXAzMDOoLeRkUHfZhM7C8Nbo41srHdsNjEzAZkMG5lBwqwg4U3sbIx/bDYxgsSNBRUF1Y0FlZUYBd6dOcO06m+YElMa0DiGJIZUxjuM9xjkGRhU2djZlJXU1UDQ1MTcDASNjcTFQFBUBGjYEkkVMJCU4gcCKRTeHCk+fn4+KSllsJiUJEhMUgrMUQbZk8bgz/iA8SRR9qzAY087FjEYD2QPDDAzMFgyAwC39TCRAAAAeNpjYGRgYADid/fqneL5bb4yyLMwgMC1H90HIfRkCxDN+IBpFZDiYGAC8QBbSwuceNpjYGRgYI7594aBgcmOAQgYHzAwMqACdgBbWQN0AAABdgAiAAAAAAAAAAABFAAAAj4AYgI+AGYB9AAAAAAAKgAqACoAKgBeAJIAmnjaY2BkYGBgZ1BgYGIAAUYGBNADEQAFQQBaAAB42o2PwUrDQBCGvzVV9GAQDx485exBY1CU3PQgVgIFI9prlVqDwcZNC/oSPoKP4HNUfQLfxYN/NytCe5GwO9/88+/MBAh5I8C0VoAtnYYNa8oaXpAn9RxIP/XcIqLreZENnjwvyfPieVVdXj2H7DHxPJH/2/M7sVn3/MGyOfb8SWjOGv4K2DRdctpkmtqhos+D6ISh4kiUUXDj1Fr3Bc/Oc0vPqec6A8aUyu1cdTaPZvyXyqz6Fm5axC7bxHOv/r/dnbSRXCk7+mpVrOqVtFqdp3NKxaHUgeod9cm40rtrzfrt2OyQa8fppCO9tk7d1x0rpiQcuDuRkjjtkHt16ctbuf/radZY52/PnEcphXpZOcofiEZNcQAAeNpjYGIAg///GBgZsAF2BgZGJkZmBmaGdkYWRla29JzKggxD9tK8TAMDAxc2D0MLU2NjENfI1M0ZACUXCrsAAAABWtLiugAA) format('woff');
+}

package/dist/components/accordion/accordion.d.ts

@@ -1,2 +1,5 @@
 import { AccordionProps } from './types';
-export default function Accordion({ accordion, children, disabled, initialState, onChange, overrides, size, stateReducer, renderAll, toggleIcon, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare const useAccordionContext: () => {
+    toggleIcon?: AccordionProps["toggleIcon"];
+};
+export default function Accordion({ accordion, children, disabled, id, initialState, onChange, overrides, size, stateReducer, renderAll, toggleIcon, }: AccordionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/accordion.js

@@ -0,0 +1,71 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as l, createContext as u, useContext as x } from "react";
+import { mergeOverrides as A } from "baseui";
+import { Accordion as C } from "baseui/accordion";
+import { checkForContextError as v } from "../../utils/index.js";
+import { getToggleIconComponent as z } from "./shared-overrides.js";
+const n = u({
+  toggleIcon: void 0
+}), F = () => {
+  const o = x(n);
+  return v(o, "Accordion"), o;
+};
+function H({
+  accordion: o,
+  children: c,
+  disabled: i,
+  id: s,
+  initialState: d,
+  onChange: m,
+  overrides: a,
+  size: p = "standard",
+  stateReducer: f,
+  renderAll: g,
+  toggleIcon: r
+}) {
+  return /* @__PURE__ */ t(
+    n.Provider,
+    {
+      value: l(
+        () => ({
+          toggleIcon: r
+        }),
+        [r]
+      ),
+      children: /* @__PURE__ */ t(
+        C,
+        {
+          accordion: o,
+          disabled: i,
+          initialState: d,
+          onChange: m,
+          overrides: A(
+            {
+              Root: {
+                props: {
+                  id: s
+                }
+              },
+              Header: {
+                style: ({ $theme: e }) => ({
+                  padding: p === "compact" ? `${e.sizing.scale500} ${e.sizing.scale600}` : `${e.sizing.scale600}`
+                })
+              },
+              ToggleIcon: {
+                ...z(r)
+              }
+            },
+            a
+          ),
+          stateReducer: f,
+          renderAll: g,
+          children: c
+        }
+      )
+    }
+  );
+}
+export {
+  H as default,
+  F as useAccordionContext
+};

package/dist/components/accordion/constants.js

@@ -0,0 +1,12 @@
+import { ARTWORK_SIZES as t } from "baseui/list";
+const a = {
+  compact: "compact",
+  standard: "standard"
+}, c = {
+  ...t,
+  CUSTOM: "CUSTOM"
+};
+export {
+  a as ACCORDION_SIZE,
+  c as PANEL_ARTWORK_SIZE
+};

package/dist/components/accordion/index.js

@@ -0,0 +1,10 @@
+import { default as r } from "./accordion.js";
+import { Panel as a, PanelTitle as f } from "./panel.js";
+import { ACCORDION_SIZE as A, PANEL_ARTWORK_SIZE as m } from "./constants.js";
+export {
+  A as ACCORDION_SIZE,
+  r as Accordion,
+  m as PANEL_ARTWORK_SIZE,
+  a as Panel,
+  f as PanelTitle
+};

package/dist/components/accordion/panel.d.ts

@@ -1,3 +1,20 @@
+import { default as React } from 'react';
 import { PanelTitleProps } from './types';
 export declare function PanelTitle({ artwork, artworkSize, title, subtitle, }: PanelTitleProps): import("react/jsx-runtime").JSX.Element;
-export { Panel } from 'baseui/accordion';
+export declare const Panel: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    disabled?: boolean;
+    'aria-controls'?: string;
+    key?: React.Key;
+    onChange?: import('baseui/accordion').OnChangeHandler;
+    onClick?: (e: Event) => unknown;
+    onKeyDown?: (e: KeyboardEvent) => unknown;
+    overrides?: import('baseui/accordion').PanelOverrides;
+    title?: React.ReactNode;
+    renderPanelContent?: boolean;
+    renderAll?: boolean;
+} & {
+    expanded?: boolean;
+} & {
+    id?: string;
+} & React.RefAttributes<HTMLElement>>;

package/dist/components/accordion/panel.js

@@ -0,0 +1,119 @@
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import c from "react";
+import { useStyletron as p, mergeOverrides as m } from "baseui";
+import { Panel as d } from "baseui/accordion";
+import { ParagraphSmall as f } from "baseui/typography";
+import { useAccordionContext as g } from "./accordion.js";
+import { PANEL_ARTWORK_SIZE as n } from "./constants.js";
+import { getToggleIconComponent as u } from "./shared-overrides.js";
+function x(e) {
+  return e === n.SMALL ? "16px" : e === n.LARGE ? "36px" : e === n.CUSTOM ? "48px" : "24px";
+}
+function h(e) {
+  return e === n.SMALL ? "24px" : e === n.LARGE ? "14px" : e === n.CUSTOM ? "16px" : "20px";
+}
+function A({
+  artwork: e,
+  artworkSize: r = n.MEDIUM
+}) {
+  const [i] = p(), t = x(r), o = h(r);
+  return r === n.CUSTOM ? /* @__PURE__ */ l(
+    "div",
+    {
+      className: i({
+        width: t,
+        height: t,
+        padding: o
+      }),
+      children: e
+    }
+  ) : /* @__PURE__ */ l(
+    "div",
+    {
+      className: i({
+        display: "flex",
+        alignItems: "center",
+        padding: `0 ${o}`
+      }),
+      children: c.isValidElement(e) ? (
+        // @ts-expect-error artwork does not expect size prop
+        c.cloneElement(e, { size: t })
+      ) : e
+    }
+  );
+}
+function O({
+  artwork: e,
+  artworkSize: r,
+  title: i,
+  subtitle: t
+}) {
+  const [o, a] = p();
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: o({
+        display: "flex",
+        alignItems: "center",
+        marginLeft: e ? `-${a.sizing.scale600}` : 0
+      }),
+      children: [
+        e && /* @__PURE__ */ l(A, { artwork: e, artworkSize: r }),
+        /* @__PURE__ */ s("div", { children: [
+          i,
+          t ? /* @__PURE__ */ l(
+            f,
+            {
+              marginTop: a.sizing.scale100,
+              marginBottom: "0",
+              color: "contentSecondary",
+              children: t
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function P({ id: e, overrides: r, ...i }, t) {
+  const { toggleIcon: o } = g();
+  return /* @__PURE__ */ l(
+    d,
+    {
+      overrides: m(
+        {
+          PanelContainer: {
+            props: {
+              id: `${e}_panel-container`
+            }
+          },
+          Header: {
+            props: {
+              // Setting id here since this is the element would be passed as the
+              // `currentTarget` in the `onClick` handler, rather than the parent
+              id: e
+            }
+          },
+          ToggleIcon: {
+            props: {
+              id: `${e}_toggle-icon`
+            },
+            // Need to set this in both Accordion and Panel. If overrides are
+            // passed to Panel, they will override the ones in Accordion. If this
+            // is not set, the default one from Base will be used.
+            ...u(o)
+          }
+        },
+        r
+      ),
+      ...i
+    }
+  );
+}
+const R = c.forwardRef(
+  P
+);
+export {
+  R as Panel,
+  O as PanelTitle
+};

package/dist/components/accordion/shared-overrides.d.ts

@@ -0,0 +1,4 @@
+import { AccordionProps } from './types';
+export declare function getToggleIconComponent(toggleIcon?: AccordionProps["toggleIcon"]): {
+    component: (props: any) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/accordion/shared-overrides.js

@@ -0,0 +1,11 @@
+import { jsx as o } from "react/jsx-runtime";
+import { StyledToggleIcon as r, StyledToggleIconGroup as t } from "baseui/accordion";
+import m from "../icons/solid/chevron-down/index.js";
+function i(e) {
+  return {
+    component: (n) => /* @__PURE__ */ o(r, { ...n, children: /* @__PURE__ */ o(t, { ...n, children: e || /* @__PURE__ */ o(m, {}) }) })
+  };
+}
+export {
+  i as getToggleIconComponent
+};