jsonresume-theme-brutalist 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# jsonresume-theme-brutalist
+
+## 0.2.0
+
+### Minor Changes
+
+- 536adbf: Add the Brutalist theme: raw concrete brutalism with heavy 4px black rules, oversized uppercase Archivo Black headings, hard edges, monospace spec labels, numbered sections, offset block-shadows, and a single harsh safety-yellow accent. Renders all JSON Resume sections. (#275)

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2014-2026 JSON Resume contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# jsonresume-theme-brutalist
+
+Raw concrete brutalism for JSON Resume. Heavy 4px black rules, oversized
+UPPERCASE Archivo Black / Space Grotesk headings, hard edges (zero rounded
+corners), stark black-on-white with a single harsh safety-yellow accent,
+monospace spec labels, numbered sections, and hard offset block-shadows that
+make the structural grid literal.
+
+## Usage
+
+```bash
+resume export resume.html --theme brutalist
+```
+
+Renders every JSON Resume section: basics/summary, work, education, skills,
+projects, volunteer, awards, certificates, publications, languages, interests,
+and references.

package/index.jsx

@@ -0,0 +1,24 @@
+import { renderToString } from 'react-dom/server';
+import { ServerStyleSheet } from 'styled-components';
+import Resume from './src/Resume.jsx';
+
+export function render(resume) {
+  const sheet = new ServerStyleSheet();
+  const html = renderToString(sheet.collectStyles(<Resume resume={resume} />));
+  const styles = sheet.getStyleTags();
+  const title = (resume.basics && resume.basics.name) || 'Resume';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>${title}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
+  ${styles}
+</head>
+<body>${html}</body>
+</html>`;
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "jsonresume-theme-brutalist",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "./index.jsx",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "styled-components": "^6.1.19",
+    "@jsonresume/core": "0.1.0"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.jsx",
+      "default": "./index.jsx"
+    },
+    "./dist": {
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^5.4.21"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/src/Resume.jsx

@@ -0,0 +1,717 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  Section,
+  SectionTitle,
+  DateRange,
+  Badge,
+  BadgeList,
+  ContactInfo,
+  Link,
+  safeUrl,
+} from '@jsonresume/core';
+
+// ---------------------------------------------------------------------------
+// BRUTALIST — raw concrete. Heavy 4px black rules, oversized UPPERCASE
+// grotesque/mono headings, hard edges (zero border-radius), stark
+// black-on-white with ONE harsh accent: safety yellow (#FFE600). A visible
+// structural grid and hard offset block-shadows make the structure literal.
+// styled-components are defined INLINE (a separate styles.js crashes the
+// registry webpack with "withConfig undefined").
+// ---------------------------------------------------------------------------
+
+const INK = '#0a0a0a';
+const PAPER = '#ffffff';
+const ACCENT = '#ffe600'; // safety yellow
+const RULE = '4px solid #0a0a0a';
+const HAIR = '2px solid #0a0a0a';
+
+const Page = styled.div`
+  max-width: 900px;
+  margin: 0 auto;
+  background: ${PAPER};
+  color: ${INK};
+  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
+  font-size: 15px;
+  line-height: 1.5;
+  padding: 0;
+  border-left: ${RULE};
+  border-right: ${RULE};
+
+  @media print {
+    border: none;
+  }
+`;
+
+const Masthead = styled.header`
+  border-bottom: ${RULE};
+  background: ${PAPER};
+`;
+
+const SpecBar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  border-bottom: ${HAIR};
+  font-family: 'Space Mono', monospace;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+
+  span {
+    padding: 8px 16px;
+  }
+
+  span + span {
+    border-left: ${HAIR};
+  }
+`;
+
+const SpecTag = styled.span`
+  background: ${ACCENT};
+  font-weight: 700;
+`;
+
+const NameBlock = styled.div`
+  padding: 36px 32px 28px 32px;
+`;
+
+const Name = styled.h1`
+  font-family: 'Archivo Black', 'Space Grotesk', sans-serif;
+  font-size: clamp(40px, 9vw, 76px);
+  line-height: 0.92;
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: -1px;
+  word-break: break-word;
+`;
+
+const Label = styled.div`
+  display: inline-block;
+  margin-top: 16px;
+  background: ${INK};
+  color: ${PAPER};
+  font-family: 'Space Mono', monospace;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  font-size: 13px;
+  padding: 6px 12px;
+`;
+
+const ContactRow = styled.div`
+  border-top: ${HAIR};
+  padding: 14px 32px;
+  background: ${PAPER};
+`;
+
+const StyledContactInfo = styled(ContactInfo)`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 22px;
+  font-family: 'Space Mono', monospace;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+
+  a,
+  span {
+    color: ${INK};
+    text-decoration: none;
+    font-weight: 700;
+  }
+
+  a {
+    border-bottom: 3px solid ${ACCENT};
+    padding-bottom: 1px;
+  }
+`;
+
+const Summary = styled.p`
+  margin: 0;
+  padding: 24px 32px;
+  border-top: ${HAIR};
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.45;
+`;
+
+const Body = styled.main`
+  padding: 0;
+`;
+
+const Block = styled(Section)`
+  border-bottom: ${RULE};
+  padding: 28px 32px 32px 32px;
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+const Heading = styled(SectionTitle)`
+  font-family: 'Archivo Black', 'Space Grotesk', sans-serif;
+  font-size: clamp(22px, 4vw, 32px);
+  text-transform: uppercase;
+  letter-spacing: -0.5px;
+  margin: 0 0 22px 0;
+  display: flex;
+  align-items: baseline;
+  gap: 14px;
+
+  &::before {
+    content: attr(data-index);
+    font-family: 'Space Mono', monospace;
+    font-size: 14px;
+    background: ${ACCENT};
+    color: ${INK};
+    padding: 4px 8px;
+    letter-spacing: 0;
+    align-self: center;
+  }
+`;
+
+const Entry = styled.div`
+  border: ${HAIR};
+  box-shadow: 8px 8px 0 ${INK};
+  background: ${PAPER};
+  padding: 18px 20px;
+  margin-bottom: 26px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const EntryHead = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 6px 16px;
+  border-bottom: ${HAIR};
+  padding-bottom: 10px;
+  margin-bottom: 12px;
+`;
+
+const EntryTitle = styled.h3`
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 21px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: -0.3px;
+  margin: 0;
+
+  a {
+    color: ${INK};
+    text-decoration: none;
+    box-shadow: inset 0 -8px 0 ${ACCENT};
+  }
+`;
+
+const EntryMeta = styled.div`
+  font-family: 'Space Mono', monospace;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+`;
+
+const EntrySub = styled.div`
+  font-family: 'Space Mono', monospace;
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+
+  a {
+    color: ${INK};
+    text-decoration: none;
+    box-shadow: inset 0 -6px 0 ${ACCENT};
+  }
+`;
+
+const Para = styled.p`
+  margin: 0 0 10px 0;
+  font-size: 15px;
+  line-height: 1.5;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const Bullets = styled.ul`
+  list-style: none;
+  margin: 12px 0 0 0;
+  padding: 0;
+
+  li {
+    position: relative;
+    padding-left: 26px;
+    margin-bottom: 8px;
+    line-height: 1.45;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 6px;
+      width: 12px;
+      height: 12px;
+      background: ${ACCENT};
+      border: 2px solid ${INK};
+    }
+  }
+`;
+
+const SkillGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 0;
+  border: ${HAIR};
+
+  @media print {
+    grid-template-columns: repeat(2, 1fr);
+  }
+`;
+
+const SkillCell = styled.div`
+  border: ${HAIR};
+  margin: -1px;
+  padding: 14px 16px;
+
+  h4 {
+    font-family: 'Archivo Black', sans-serif;
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin: 0 0 10px 0;
+  }
+`;
+
+const StyledBadgeList = styled(BadgeList)`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+`;
+
+const StyledBadge = styled(Badge)`
+  font-family: 'Space Mono', monospace;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background: ${PAPER};
+  color: ${INK};
+  border: 2px solid ${INK};
+  border-radius: 0;
+  padding: 3px 8px;
+`;
+
+const PlainGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 18px;
+`;
+
+const PlainCard = styled.div`
+  border: ${HAIR};
+  border-left: ${RULE};
+  padding: 14px 16px;
+
+  h4 {
+    font-family: 'Space Grotesk', sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+    text-transform: uppercase;
+    margin: 0 0 6px 0;
+
+    a {
+      color: ${INK};
+      text-decoration: none;
+      box-shadow: inset 0 -7px 0 ${ACCENT};
+    }
+  }
+
+  p {
+    margin: 0 0 6px 0;
+    font-size: 14px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+
+const MetaTag = styled.span`
+  font-family: 'Space Mono', monospace;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: ${INK};
+  display: block;
+`;
+
+function pad(n) {
+  return String(n).padStart(2, '0');
+}
+
+function Resume({ resume }) {
+  const {
+    basics = {},
+    work = [],
+    education = [],
+    skills = [],
+    projects = [],
+    volunteer = [],
+    awards = [],
+    certificates = [],
+    publications = [],
+    languages = [],
+    interests = [],
+    references = [],
+  } = resume || {};
+
+  const loc = basics.location || {};
+  const locParts = [loc.city, loc.region, loc.countryCode].filter(Boolean);
+  const locLine = locParts.join(', ');
+
+  let section = 0;
+  const next = () => pad(++section);
+
+  return (
+    <Page>
+      <Masthead>
+        <SpecBar>
+          <SpecTag>Curriculum Vitae</SpecTag>
+          {locLine && <span>{locLine}</span>}
+          <span>Rev. 0.1</span>
+        </SpecBar>
+        <NameBlock>
+          {basics.name && <Name>{basics.name}</Name>}
+          {basics.label && <Label>{basics.label}</Label>}
+        </NameBlock>
+        {(basics.email ||
+          basics.phone ||
+          basics.url ||
+          (basics.profiles && basics.profiles.length > 0)) && (
+          <ContactRow>
+            <StyledContactInfo basics={basics} />
+          </ContactRow>
+        )}
+        {basics.summary && <Summary>{basics.summary}</Summary>}
+      </Masthead>
+
+      <Body>
+        {work.length > 0 && (
+          <Block>
+            <Heading data-index={next()}>Experience</Heading>
+            {work.map((job, i) => (
+              <Entry key={i}>
+                <EntryHead>
+                  <EntryTitle>{job.position || job.name || 'Role'}</EntryTitle>
+                  {(job.startDate || job.endDate) && (
+                    <EntryMeta>
+                      <DateRange
+                        startDate={job.startDate}
+                        endDate={job.endDate}
+                      />
+                    </EntryMeta>
+                  )}
+                </EntryHead>
+                {job.name && job.position && (
+                  <EntrySub>
+                    {job.url ? (
+                      <Link href={safeUrl(job.url)}>{job.name}</Link>
+                    ) : (
+                      job.name
+                    )}
+                    {job.location ? ` // ${job.location}` : ''}
+                  </EntrySub>
+                )}
+                {job.summary && <Para>{job.summary}</Para>}
+                {job.highlights && job.highlights.length > 0 && (
+                  <Bullets>
+                    {job.highlights.map((h, hi) => (
+                      <li key={hi}>{h}</li>
+                    ))}
+                  </Bullets>
+                )}
+              </Entry>
+            ))}
+          </Block>
+        )}
+
+        {education.length > 0 && (
+          <Block>
+            <Heading data-index={next()}>Education</Heading>
+            {education.map((edu, i) => (
+              <Entry key={i}>
+                <EntryHead>
+                  <EntryTitle>{edu.institution || 'Institution'}</EntryTitle>
+                  {(edu.startDate || edu.endDate) && (
+                    <EntryMeta>
+                      <DateRange
+                        startDate={edu.startDate}
+                        endDate={edu.endDate}
+                      />
+                    </EntryMeta>
+                  )}
+                </EntryHead>
+                {(edu.studyType || edu.area) && (
+                  <EntrySub>
+                    {[edu.studyType, edu.area].filter(Boolean).join(' // ')}
+                  </EntrySub>
+                )}
+                {edu.score && <Para>GPA: {edu.score}</Para>}
+                {edu.courses && edu.courses.length > 0 && (
+                  <Bullets>
+                    {edu.courses.map((c, ci) => (
+                      <li key={ci}>{c}</li>
+                    ))}
+                  </Bullets>
+                )}
+              </Entry>
+            ))}
+          </Block>
+        )}
+
+        {skills.length > 0 && (
+          <Block>
+            <Heading data-index={next()}>Skills</Heading>
+            <SkillGrid>
+              {skills.map((skill, i) => (
+                <SkillCell key={i}>
+                  <h4>
+                    {skill.name || 'Skills'}
+                    {skill.level ? ` — ${skill.level}` : ''}
+                  </h4>
+                  {skill.keywords && skill.keywords.length > 0 && (
+                    <StyledBadgeList>
+                      {skill.keywords.map((kw, ki) => (
+                        <StyledBadge key={ki}>{kw}</StyledBadge>
+                      ))}
+                    </StyledBadgeList>
+                  )}
+                </SkillCell>
+              ))}
+            </SkillGrid>
+          </Block>
+        )}
+
+        {projects.length > 0 && (
+          <Block>
+            <Heading data-index={next()}>Projects</Heading>
+            {projects.map((project, i) => (
+              <Entry key={i}>
+                <EntryHead>
+                  <EntryTitle>
+                    {project.url ? (
+                      <Link href={safeUrl(project.url)}>
+                        {project.name || 'Project'}
+                      </Link>
+                    ) : (
+                      project.name || 'Project'
+                    )}
+                  </EntryTitle>
+                  {(project.startDate || project.endDate) && (
+                    <EntryMeta>
+                      <DateRange
+                        startDate={project.startDate}
+                        endDate={project.endDate}
+                      />
+                    </EntryMeta>
+                  )}
+                </EntryHead>
+                {(project.entity || project.type) && (
+                  <EntrySub>
+                    {[project.entity, project.type]
+                      .filter(Boolean)
+                      .join(' // ')}
+                  </EntrySub>
+                )}
+                {project.description && <Para>{project.description}</Para>}
+                {project.highlights && project.highlights.length > 0 && (
+                  <Bullets>
+                    {project.highlights.map((h, hi) => (
+                      <li key={hi}>{h}</li>
+                    ))}
+                  </Bullets>
+                )}
+                {project.keywords && project.keywords.length > 0 && (
+                  <StyledBadgeList>
+                    {project.keywords.map((kw, ki) => (
+                      <StyledBadge key={ki}>{kw}</StyledBadge>
+                    ))}
+                  </StyledBadgeList>
+                )}
+              </Entry>
+            ))}
+          </Block>
+        )}
+
+        {volunteer.length > 0 && (
+          <Block>
+            <Heading data-index={next()}>Volunteer</Heading>
+            {volunteer.map((vol, i) => (
+              <Entry key={i}>
+                <EntryHead>
+                  <EntryTitle>{vol.position || 'Volunteer'}</EntryTitle>
+                  {(vol.startDate || vol.endDate) && (
+                    <EntryMeta>
+                      <DateRange
+                        startDate={vol.startDate}
+                        endDate={vol.endDate}
+                      />
+                    </EntryMeta>
+                  )}
+                </EntryHead>
+                {vol.organization && (
+                  <EntrySub>
+                    {vol.url ? (
+                      <Link href={safeUrl(vol.url)}>{vol.organization}</Link>
+                    ) : (
+                      vol.organization
+                    )}
+                  </EntrySub>
+                )}
+                {vol.summary && <Para>{vol.summary}</Para>}
+                {vol.highlights && vol.highlights.length > 0 && (
+                  <Bullets>
+                    {vol.highlights.map((h, hi) => (
+                      <li key={hi}>{h}</li>
+                    ))}
+                  </Bullets>
+                )}
+              </Entry>
+            ))}
+          </Block>
+        )}
+
+        {awards.length > 0 && (
+          <Block>
+            <Heading data-index={next()}>Awards</Heading>
+            <PlainGrid>
+              {awards.map((award, i) => (
+                <PlainCard key={i}>
+                  <h4>{award.title || 'Award'}</h4>
+                  {(award.awarder || award.date) && (
+                    <MetaTag>
+                      {[award.awarder, award.date].filter(Boolean).join(' // ')}
+                    </MetaTag>
+                  )}
+                  {award.summary && <p>{award.summary}</p>}
+                </PlainCard>
+              ))}
+            </PlainGrid>
+          </Block>
+        )}
+
+        {certificates.length > 0 && (
+          <Block>
+            <Heading data-index={next()}>Certificates</Heading>
+            <PlainGrid>
+              {certificates.map((cert, i) => (
+                <PlainCard key={i}>
+                  <h4>
+                    {cert.url ? (
+                      <Link href={safeUrl(cert.url)}>
+                        {cert.name || 'Certificate'}
+                      </Link>
+                    ) : (
+                      cert.name || 'Certificate'
+                    )}
+                  </h4>
+                  {(cert.issuer || cert.date) && (
+                    <MetaTag>
+                      {[cert.issuer, cert.date].filter(Boolean).join(' // ')}
+                    </MetaTag>
+                  )}
+                </PlainCard>
+              ))}
+            </PlainGrid>
+          </Block>
+        )}
+
+        {publications.length > 0 && (
+          <Block>
+            <Heading data-index={next()}>Publications</Heading>
+            <PlainGrid>
+              {publications.map((pub, i) => (
+                <PlainCard key={i}>
+                  <h4>
+                    {pub.url ? (
+                      <Link href={safeUrl(pub.url)}>
+                        {pub.name || 'Publication'}
+                      </Link>
+                    ) : (
+                      pub.name || 'Publication'
+                    )}
+                  </h4>
+                  {(pub.publisher || pub.releaseDate) && (
+                    <MetaTag>
+                      {[pub.publisher, pub.releaseDate]
+                        .filter(Boolean)
+                        .join(' // ')}
+                    </MetaTag>
+                  )}
+                  {pub.summary && <p>{pub.summary}</p>}
+                </PlainCard>
+              ))}
+            </PlainGrid>
+          </Block>
+        )}
+
+        {languages.length > 0 && (
+          <Block>
+            <Heading data-index={next()}>Languages</Heading>
+            <StyledBadgeList>
+              {languages.map((lang, i) => (
+                <StyledBadge key={i}>
+                  {lang.language || 'Language'}
+                  {lang.fluency ? ` — ${lang.fluency}` : ''}
+                </StyledBadge>
+              ))}
+            </StyledBadgeList>
+          </Block>
+        )}
+
+        {interests.length > 0 && (
+          <Block>
+            <Heading data-index={next()}>Interests</Heading>
+            <PlainGrid>
+              {interests.map((interest, i) => (
+                <PlainCard key={i}>
+                  <h4>{interest.name || 'Interest'}</h4>
+                  {interest.keywords && interest.keywords.length > 0 && (
+                    <p>{interest.keywords.join(', ')}</p>
+                  )}
+                </PlainCard>
+              ))}
+            </PlainGrid>
+          </Block>
+        )}
+
+        {references.length > 0 && (
+          <Block>
+            <Heading data-index={next()}>References</Heading>
+            <PlainGrid>
+              {references.map((ref, i) => (
+                <PlainCard key={i}>
+                  <h4>{ref.name || 'Reference'}</h4>
+                  {ref.reference && <p>{ref.reference}</p>}
+                </PlainCard>
+              ))}
+            </PlainGrid>
+          </Block>
+        )}
+      </Body>
+    </Page>
+  );
+}
+
+export default Resume;

package/vite.config.js

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    ssr: true,
+    target: 'node18',
+    outDir: './dist',
+    emptyOutDir: true,
+    minify: false,
+    lib: {
+      entry: './index.jsx',
+      formats: ['es'],
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react-dom/server', 'react/jsx-runtime'],
+      output: {
+        exports: 'named',
+      },
+    },
+  },
+  ssr: {
+    // Force bundle these packages instead of externalizing
+    noExternal: [
+      'styled-components',
+      '@emotion/is-prop-valid',
+      'stylis',
+      'shallowequal',
+    ],
+  },
+});