@planningcenter/sweetest-alert 0.1.0 → 0.2.3

package/package.json

@@ -1,9 +1,24 @@
 {
   "name": "@planningcenter/sweetest-alert",
-  "version": "0.1.0",
+  "version": "0.2.3",
   "description": "The sweetest alert ever",
   "type": "module",
   "packageManager": "yarn@1.22.22",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/planningcenter/sweetest-alert.git"
@@ -14,24 +29,26 @@
     "url": "https://github.com/planningcenter/sweetest-alert/issues"
   },
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
+    "dev": "vite --config vite.config.docs.ts",
+    "build": "vite build --config vite.config.docs.ts",
+    "build:lib": "vite build --config vite.config.lib.ts && tsc --project tsconfig.lib.json && cp src/sweetest_alert.css dist/style.css",
+    "build:docs": "vite build --config vite.config.docs.ts",
+    "preview": "vite preview --config vite.config.docs.ts",
     "test": "vitest",
     "lint:js": "eslint .",
     "lint:css": "stylelint \"**/*.css\""
   },
   "peerDependencies": {
-    "@planningcenter/icons": "^15.25.0",
-    "@planningcenter/tapestry": "^2.3.0",
+    "@planningcenter/icons": "^15.26.0",
+    "@planningcenter/tapestry": "^2.5.0",
     "react": "^18.3.1 <19",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@planningcenter/icons": "^15.25.0",
+    "@planningcenter/icons": "^15.26.0",
     "@planningcenter/stylelint-config-pco": "^0.0.5",
-    "@planningcenter/tapestry": "^2.3.0",
+    "@planningcenter/tapestry": "^2.5.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",

package/.editorconfig

@@ -1,8 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-indent_size = 2
-indent_style = space
-insert_final_newline = true

package/.github/CODEOWNERS

@@ -1 +0,0 @@
-* @starzonmyarmz

package/.github/workflows/pco-release-create-pr.yml

@@ -1,24 +0,0 @@
-name: PCO-Release - Release Automation
-
-on:
-  push:
-    branches:
-      - main
-
-permissions:
-  contents: write
-  pull-requests: write
-
-jobs:
-  release-automation:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          cache: "yarn"
-      - uses: planningcenter/pco-release-action/release-by-pr@v1
-        with:
-          app-id: ${{ secrets.PCO_DEPENDENCIES_APP_ID }}
-          private-key: ${{ secrets.PCO_DEPENDENCIES_PRIVATE_KEY}}

package/.github/workflows/pco-release-create-release-on-merge.yml

@@ -1,17 +0,0 @@
-name: PCO-Release - Create Release on Merge
-
-on:
-  pull_request:
-    types: [closed]
-    branches:
-      - main
-
-jobs:
-  create-release:
-    runs-on: ubuntu-latest
-    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'pco-release-pending')
-    steps:
-      - uses: planningcenter/pco-release-action/create-release-on-merge@v1
-        with:
-          app-id: ${{ secrets.PCO_DEPENDENCIES_APP_ID }}
-          private-key: ${{ secrets.PCO_DEPENDENCIES_PRIVATE_KEY}}

package/.github/workflows/pco-release-dependabot-automation.yml

@@ -1,15 +0,0 @@
-name: PCO-Release - Dependabot Automation (Update changelog)
-
-on: pull_request
-
-jobs:
-  update-dependabot-pr-changelog:
-    if: github.actor == 'dependabot[bot]'
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-      - uses: planningcenter/pco-release-action/dependabot-automation@v1

package/.github/workflows/pco-release-require-changelog-update.yml

@@ -1,22 +0,0 @@
-name: PCO-Release - Require Changelog Update
-
-on:
-  pull_request:
-    branches: [main]
-
-jobs:
-  require-changelog-update:
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: read
-      contents: read
-    steps:
-      - uses: actions/checkout@v4
-      - id: changed-files
-        uses: tj-actions/changed-files@v44
-        with:
-          files: CHANGELOG.md
-      - if: steps.changed-files.outputs.any_changed == 'false'
-        run: |
-          echo "Pull Requests require an update to the CHANGELOG.md file."
-          exit 1

package/.github/workflows/pco-release-sync-release-by-label.yml

@@ -1,18 +0,0 @@
-on:
-  pull_request:
-    types: [labeled]
-
-permissions:
-  contents: write
-  pull-requests: write
-
-name: PCO-Release - Sync With Labels
-
-jobs:
-  sync-with-labels:
-    if: ${{ github.event.pull_request.head.ref == 'pco-release--internal' && (github.event.label.name == 'pco-release-patch' || github.event.label.name == 'pco-release-minor' || github.event.label.name == 'pco-release-major') }}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: planningcenter/pco-release-action/sync-with-labels@v1
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.stylelintrc.json

@@ -1,8 +0,0 @@
-{
-  "extends": "@planningcenter/stylelint-config-pco",
-  "rules": {
-    "number-leading-zero": "always",
-    "order/properties-order": null,
-    "order/properties-alphabetical-order": true
-  }
-}

package/CHANGELOG.md

@@ -1,6 +0,0 @@
-
-
-### Dependencies
-
-- Bump vite from 7.1.10 to 7.1.11
-

package/docs/demo.css

@@ -1,198 +0,0 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-#root {
-  display: contents;
-}
-
-body {
-  background: linear-gradient(135deg, var(--t-fill-color-tag-blue-040) 0%, var(--t-fill-color-tag-purple-030) 100%);
-  color: var(--t-text-color-default-primary);
-  display: grid;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  line-height: 1.4;
-  min-height: 100vh;
-  padding: var(--t-spacing-3);
-  place-items: center;
-  text-wrap: pretty;
-  gap:32px;
-}
-
-.container {
-  background: var(--t-surface-color-card);
-  border-radius: var(--t-border-radius-xl);
-  box-shadow: 0 var(--t-spacing-3) var(--t-spacing-6) var(--t-fill-color-transparency-dark-030);
-  max-width: 960px;
-  padding: var(--t-spacing-6);
-  width: 100%;
-}
-
-h1 {
-  color: var(--t-text-color-default-headline);
-  font-size: 2.5rem;
-  margin: 0;
-  text-align: center;
-}
-
-h2 {
-  color: var(--t-text-color-default-secondary);
-  font-size: 1.2rem;
-  font-weight: var(--t-font-weight-normal);
-  margin-bottom: var(--t-spacing-5);
-  text-align: center;
-}
-
-ul {
-  margin: 1rem;
-  padding-left: 2ch;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-th, td {
-  border-bottom: var(--t-border-width-default) solid var(--t-border-color-default-base);
-  text-align: left;
-  padding: var(--t-spacing-1);
-}
-
-tr:last-child :is(th, td) {
-  border: 0;
-}
-
-.button-grid {
-  display: grid;
-  gap: var(--t-spacing-2);
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  margin-bottom: var(--t-spacing-4);
-}
-
-.demo-button {
-  background: var(--t-surface-color-card);
-  border: var(--t-border-width-thick) solid var(--t-border-color-default-base);
-  border-radius: 12px;
-  color: var(--t-text-color-default-secondary);
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  font-family: inherit;
-  font-size: 1rem;
-  gap: var(--t-spacing-half);
-  padding: var(--t-spacing-3);
-  text-align: left;
-  transition: all .2s ease;
-
-  &:hover {
-    box-shadow: 0 var(--t-spacing-half) var(--t-spacing-1) var(--t-fill-color-transparency-dark-010);
-    translate: 0 -2px;
-  }
-
-  &:active {
-    translate: 0;
-  }
-
-  h3 {
-    color: var(--t-text-color-default-headline);
-    font-size: 1.1rem;
-    font-weight: var(--t-font-weight-semibold);
-  }
-}
-
-.info {
-  border-color: var(--t-border-color-status-info);
-
-  &:hover {
-    background: var(--t-fill-color-status-info-dim);
-    border-color: var(--t-border-color-status-info);
-  }
-}
-
-.success {
-  border-color: var(--t-border-color-status-success);
-
-  &:hover {
-    background: var(--t-fill-color-status-success-ghost);
-    border-color: var(--t-border-color-status-success);
-  }
-}
-
-.warning {
-  border-color: var(--t-border-color-status-warning);
-
-  &:hover {
-    background: var(--t-fill-color-status-warning-ghost);
-    border-color: var(--t-border-color-status-warning);
-  }
-}
-
-.error, .danger {
-  border-color: var(--t-border-color-status-error);
-
-  &:hover {
-    background: var(--t-fill-color-status-error-ghost);
-    border-color: var(--t-border-color-status-error);
-  }
-}
-
-.custom {
-  border-color: var(--t-border-color-default-darker);
-
-  &:hover {
-    background: var(--t-fill-color-tag-purple-010);
-    border-color: var(--t-border-color-default-darkest);
-  }
-}
-
-.tip {
-  background: var(--t-fill-color-neutral-090);
-  border: var(--t-border-width-default) solid var(--t-border-color-default-base);
-  border-radius: var(--t-border-radius-lg);
-  color: var(--t-text-color-default-secondary);
-  font-size: 1rem;
-  padding: var(--t-spacing-2) var(--t-spacing-3);
-
-  strong {
-    color: var(--t-text-color-default-primary);
-  }
-}
-
-.codeblock {
-  background: #2d2d2d;
-  border-radius: var(--t-border-radius-lg);
-  margin: var(--t-spacing-3) 0 var(--t-spacing-6);
-  overflow-x: auto;
-  padding: 0;
-
-  pre {
-    margin: 0;
-    padding: 0;
-  }
-
-  code {
-    display: block;
-    font-family: 'Fira Code', 'Monaco', 'Menlo', 'Courier New', monospace;
-    font-size: 0.9rem;
-    line-height: 1.5;
-    padding: var(--t-spacing-3);
-  }
-}
-
-@media (max-width: 640px) {
-  .demo-container {
-    padding: var(--t-spacing-4) var(--t-spacing-3);
-  }
-
-  h1 {
-    font-size: 2rem;
-  }
-
-  .button-grid {
-    grid-template-columns: 1fr;
-  }
-}

package/docs/demo.tsx

@@ -1,306 +0,0 @@
-/* eslint-disable no-console */
-
-import { createRoot } from "react-dom/client"
-import { useEffect, useRef } from "react"
-import { SweetestAlert } from "../src/index"
-import Prism from "prismjs"
-import "prismjs/themes/prism-tomorrow.css"
-import "prismjs/components/prism-jsx"
-import "prismjs/components/prism-tsx"
-import "prismjs/components/prism-bash"
-
-import "../node_modules/@planningcenter/tapestry/dist/index.css"
-import "../src/sweetest_alert.css"
-import "./demo.css"
-
-function CodeBlock({ code, language = "jsx" }: { code: string; language?: string }) {
-  const codeRef = useRef<HTMLElement>(null)
-
-  useEffect(() => {
-    if (codeRef.current) {
-      Prism.highlightElement(codeRef.current)
-    }
-  }, [code, language])
-
-  return (
-    <div className="codeblock">
-    <pre>
-      <code ref={codeRef} className={`language-${language}`}>
-        {code}
-      </code>
-    </pre>
-    </div>
-  )
-}
-
-function Demo() {
-  const showInfoAlert = () => {
-    SweetestAlert({
-      type: "info",
-      title: "Information",
-      content: "This is an informational alert to let you know something.",
-      hideCancel: true,
-    })
-  }
-
-  const showSuccessAlert = () => {
-    SweetestAlert({
-      type: "success",
-      title: "Success!",
-      content: "Your operation completed successfully.",
-      hideCancel: true,
-    })
-  }
-
-  const showWarningAlert = () => {
-    SweetestAlert({
-      type: "warning",
-      title: "Warning",
-      content: "Are you sure you want to proceed with this action?",
-      confirm: () => console.log("User confirmed warning"),
-      cancel: () => console.log("User cancelled warning"),
-    })
-  }
-
-  const showErrorAlert = () => {
-    SweetestAlert({
-      type: "error",
-      title: "Error Occurred",
-      content: "Something went wrong. Please try again.",
-      hideCancel: true,
-    })
-  }
-
-  const showDangerAlert = () => {
-    SweetestAlert({
-      type: "danger",
-      title: "Delete Item",
-      content: "Are you sure you want to delete this item? This action cannot be undone.",
-      confirmButton: "Delete",
-      confirm: () => console.log("User confirmed deletion"),
-      cancel: () => console.log("User cancelled deletion"),
-    })
-  }
-
-  const showCustomContentAlert = () => {
-    SweetestAlert({
-      type: "info",
-      title: "Custom Content",
-      content: (
-        <>
-          <p>You can pass custom React components as content.</p>
-          <ul>
-            <li>Item one</li>
-            <li>Item two</li>
-            <li>Item three</li>
-          </ul>
-          <p>This allows for rich, formatted content in your alerts.</p>
-        </>
-      ),
-      confirm: () => console.log("Custom content confirmed"),
-      cancel: () => console.log("Custom content cancelled"),
-    })
-  }
-
-  return (
-    <>
-      <div className="container">
-        <h1>Sweetest Alert Demo</h1>
-        <h2>Click the buttons below to test different alert types</h2>
-
-        <div className="button-grid">
-          <button className="demo-button info" onClick={showInfoAlert}>
-            <h3>Info Alert</h3>
-            Simple notification
-          </button>
-
-          <button className="demo-button success" onClick={showSuccessAlert}>
-            <h3>Success Alert</h3>
-            Success message
-          </button>
-
-          <button className="demo-button warning" onClick={showWarningAlert}>
-            <h3>Warning Alert</h3>
-            With cancel option
-          </button>
-
-          <button className="demo-button error" onClick={showErrorAlert}>
-            <h3>Error Alert</h3>
-            Error notification
-          </button>
-
-          <button className="demo-button danger" onClick={showDangerAlert}>
-            <h3>Danger Alert</h3>
-            Destructive action
-          </button>
-
-          <button className="demo-button custom" onClick={showCustomContentAlert}>
-            <h3>Custom Content</h3>
-            Rich content example
-          </button>
-        </div>
-
-        <div className="tip">
-          <strong>Tip:</strong> Open your browser console to see the callback logs when you confirm or cancel alerts.
-        </div>
-      </div>
-
-      <div className="container">
-        <h1>Documentation</h1>
-
-        <h2>Installation</h2>
-        <CodeBlock code="yarn add @planningcenter/sweetest-alert" language="bash" />
-
-        <h3>Peer Dependencies</h3>
-        <p>This package requires the following peer dependencies:</p>
-        <ul>
-          <li>react ^18.3.1</li>
-          <li>react-dom ^18.3.1</li>
-          <li>@planningcenter/tapestry ^2.3.0</li>
-          <li>@planningcenter/icons ^15.25.0</li>
-        </ul>
-
-        <h2>Usage</h2>
-
-        <h3>Basic Example</h3>
-        <CodeBlock code={`import { SweetestAlert } from '@planningcenter/sweetest-alert'
-
-// Simple notification
-SweetestAlert({
-  title: "Warning!",
-  content: "Watch out, he's coming to get you!",
-})`} />
-
-        <h3>Confirmation Dialog</h3>
-        <CodeBlock code={`SweetestAlert({
-  type: "danger",
-  title: "Delete Item",
-  content: "Are you sure you want to delete this item?",
-  confirm: () => console.log("Confirmed"),
-  cancel: () => console.log("Cancelled")
-})`} />
-
-        <h3>Alert Types</h3>
-        <p>The component supports five visual types:</p>
-        <CodeBlock code={`// Info alert
-SweetestAlert({
-  type: "info",
-  title: "Information",
-  content: "This is an informational message."
-})
-
-// Success alert
-SweetestAlert({
-  type: "success",
-  title: "Success!",
-  content: "Operation completed successfully."
-})
-
-// Warning alert (default)
-SweetestAlert({
-  type: "warning",
-  title: "Warning",
-  content: "Please proceed with caution."
-})
-
-// Error alert
-SweetestAlert({
-  type: "error",
-  title: "Error",
-  content: "Something went wrong."
-})
-
-// Danger alert (for destructive actions)
-SweetestAlert({
-  type: "danger",
-  title: "Delete Account",
-  content: "This action cannot be undone.",
-  confirmButton: "Delete"
-})`} />
-
-        <h3>Custom Content</h3>
-        <p>You can pass React components as content for rich formatting:</p>
-        <CodeBlock code={`SweetestAlert({
-  title: "Custom Content",
-  content: (
-    <>
-      <p>You can include any React elements:</p>
-      <ul>
-        <li>Lists</li>
-        <li>Links</li>
-        <li>Formatted text</li>
-      </ul>
-    </>
-  )
-})`} />
-
-        <h2>API</h2>
-        <table>
-          <thead>
-            <tr>
-              <th>Parameter</th>
-              <th>Type</th>
-              <th>Required</th>
-              <th>Default</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>title</code></td>
-              <td><code>string</code></td>
-              <td>Yes</td>
-              <td>-</td>
-              <td>The main heading text displayed at the top of the modal</td>
-            </tr>
-            <tr>
-              <td><code>content</code></td>
-              <td><code>string | React.ReactNode</code></td>
-              <td>Yes</td>
-              <td>-</td>
-              <td>The body content. Accepts plain text or React components</td>
-            </tr>
-            <tr>
-              <td><code>type</code></td>
-              <td><code>&quot;info&quot; | &quot;success&quot; | &quot;error&quot; | &quot;danger&quot; | &quot;warning&quot;</code></td>
-              <td>No</td>
-              <td>&quot;warning&quot;</td>
-              <td>The visual type of alert, affects icon and styling</td>
-            </tr>
-            <tr>
-              <td><code>confirm</code></td>
-              <td><code>() =&gt; void</code></td>
-              <td>No</td>
-              <td>-</td>
-              <td>Callback executed when confirm button is clicked</td>
-            </tr>
-            <tr>
-              <td><code>cancel</code></td>
-              <td><code>() =&gt; void</code></td>
-              <td>No</td>
-              <td>-</td>
-              <td>Callback executed when cancel button is clicked</td>
-            </tr>
-            <tr>
-              <td><code>confirmButton</code></td>
-              <td><code>string</code></td>
-              <td>No</td>
-              <td>&quot;Okay&quot;</td>
-              <td>Custom text for the confirm button</td>
-            </tr>
-            <tr>
-              <td><code>hideCancel</code></td>
-              <td><code>boolean</code></td>
-              <td>No</td>
-              <td>false</td>
-              <td>When true, hides the cancel button for simple notifications</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </>
-  )
-}
-
-const root = createRoot(document.getElementById("root")!)
-root.render(<Demo />)

package/docs/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍬</text></svg>" />
-    <title>Sweetest Alert Demo</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./demo.tsx"></script>
-  </body>
-</html>

package/eslint.config.js

@@ -1,56 +0,0 @@
-import js from '@eslint/js';
-import tseslint from 'typescript-eslint';
-import react from 'eslint-plugin-react';
-import reactHooks from 'eslint-plugin-react-hooks';
-
-export default tseslint.config(
-  js.configs.recommended,
-  ...tseslint.configs.recommended,
-  {
-    files: ['**/*.{js,jsx,ts,tsx}'],
-    plugins: {
-      react,
-      'react-hooks': reactHooks,
-    },
-    languageOptions: {
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-    },
-    settings: {
-      react: {
-        version: 'detect',
-      },
-    },
-    rules: {
-      ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
-      ...reactHooks.configs.recommended.rules,
-      'eqeqeq': ['error', 'always'],
-      'no-console': 'warn',
-      'no-underscore-dangle': 'error',
-      'no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-vars': ['error', {
-        'argsIgnorePattern': '^_',
-        'varsIgnorePattern': '^_',
-      }],
-      'react/no-deprecated': 'error',
-      'semi': ['error', 'never'],
-    },
-  },
-  {
-    files: ['tests/**/*.{js,jsx,ts,tsx}'],
-    languageOptions: {
-      globals: {
-        document: 'readonly',
-        window: 'readonly',
-        Event: 'readonly',
-      },
-    },
-  },
-  {
-    ignores: ['dist/', 'node_modules/', '*.config.ts', '*.config.js'],
-  }
-);

package/src/index.ts

@@ -1 +0,0 @@
-export { SweetestAlert } from "./sweetest_alert.tsx"

package/src/sweetest_alert.css

@@ -1,62 +0,0 @@
-.pco-sweetest-alert {
-  background: var(--t-surface-color-card);
-  border: 0;
-  border-radius: var(--t-border-radius-lg);
-  box-shadow: 0 0 var(--t-spacing-3) var(--t-fill-color-transparency-dark-020);
-  font-size: var(--t-font-size-md);
-  margin: auto;
-  max-width: 600px;
-  padding: var(--t-spacing-4) var(--t-spacing-4) 0;
-  text-align: center;
-
-  &::backdrop {
-    background: var(--t-fill-color-transparency-dark-040);
-  }
-}
-
-.pco-sweetest-alert__icon {
-  height: var(--t-element-size-3xl);
-  margin-block: var(--t-spacing-1);
-  width: var(--t-element-size-3xl);
-
-  &.pco-sweetest-alert--info {
-    fill: var(--t-icon-color-status-info-primary);
-  }
-
-  &.pco-sweetest-alert--success {
-    fill: var(--t-icon-color-status-success-primary);
-  }
-
-  &.pco-sweetest-alert--warning {
-    fill: var(--t-icon-color-status-warning-primary);
-  }
-
-  &:is(.pco-sweetest-alert--danger, .pco-sweetest-alert--error) {
-    fill: var(--t-icon-color-status-error-primary);
-  }
-}
-
-.pco-sweetest-alert__title {
-  color: var(--t-text-color-default-headline);
-  font-size: var(--t-font-size-2xl);
-  font-weight: var(--t-font-weight-semibold);
-  margin-block: var(--t-spacing-2);
-}
-
-.pco-sweetest-alert__body {
-  color: var(--t-text-color-default-primary);
-  font-weight: var(--t-font-weight-normal);
-  line-height: 1.4;
-  margin-bottom: var(--t-spacing-4);
-}
-
-.pco-sweetest-alert__actions {
-  align-items: center;
-  border-top: var(--t-border-width-default) solid var(--t-border-color-default-base);
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--t-spacing-1);
-  justify-content: center;
-  margin-inline: calc(-1 * var(--t-spacing-4));
-  padding: var(--t-spacing-3) var(--t-spacing-4);
-}

package/src/sweetest_alert.tsx

@@ -1,130 +0,0 @@
-import React from "react"
-import { createRoot } from "react-dom/client"
-import { Button } from "@planningcenter/tapestry"
-import {
-  checkCircle,
-  xCircle,
-  infoCircle,
-  exclamationTriangle,
-} from "@planningcenter/icons/paths/general"
-
-// A modal dialog component that replaces SweetAlert2 with a custom implementation.
-// Creates and manages its own DOM dialog element with React rendering.
-//
-// Basic Usage
-//
-// SweetestAlert({
-//   title: "Delete Item",
-//   content: "Are you sure you want to delete this item?",
-//   confirm: () => console.log("Confirmed"),
-//   cancel: () => console.log("Cancelled")
-// });
-
-type AlertTypes = "info" | "success" | "error" | "danger" | "warning"
-
-export function SweetestAlert({
-  // Optional: Callback function executed when cancel button is clicked
-  cancel,
-
-  // Optional: Callback function executed when confirm button is clicked
-  confirm,
-
-  // Optional: Text for the confirm button. Defaults to "Okay".
-  confirmButton = "Okay",
-
-  // Required: The body content explaining the alert.
-  // Accepts a React fragment or a string of text.
-  content,
-
-  // Optional: When true, hides the cancel button for simple notifications.
-  // Defaults to "false".
-  hideCancel = false,
-
-  // Required: The main heading text displayed at the top of the modal
-  title,
-
-  // Optional: The visual type of alert, affects icon and styling.
-  // Values can be "info", "success", "error", "danger", or "warning" (default).
-  type = "warning",
-}: {
-  cancel?: () => void
-  confirm?: () => void
-  confirmButton?: string
-  content: string | React.ReactNode
-  hideCancel?: boolean
-  title: string
-  type?: AlertTypes
-}) {
-  const dialog = document.createElement("dialog")
-  dialog.className = "pco-sweetest-alert"
-  document.body.appendChild(dialog)
-  const root = createRoot(dialog)
-
-  const cleanup = () => {
-    root.unmount()
-    document.body.removeChild(dialog)
-  }
-
-  const handleConfirm = () => {
-    cleanup()
-    confirm?.()
-  }
-
-  const handleCancel = () => {
-    cleanup()
-    cancel?.()
-  }
-
-  const iconPath = () => {
-    switch (type) {
-      case "success":
-        return checkCircle
-      case "error":
-        return xCircle
-      case "info":
-        return infoCircle
-      case "danger":
-      case "warning":
-        return exclamationTriangle
-    }
-  }
-
-  root.render(
-    <>
-      <svg
-        className={`pco-sweetest-alert__icon pco-sweetest-alert--${type}`}
-        width="48"
-        height="48"
-        viewBox="0 0 16 16"
-        aria-hidden="true"
-      >
-        <path d={iconPath()} />
-      </svg>
-
-      <h2 className="pco-sweetest-alert__title">{title}</h2>
-
-      <div className="pco-sweetest-alert__body">
-        {typeof content === "string" ? <p>{content}</p> : content}
-      </div>
-
-      <div className="pco-sweetest-alert__actions">
-        {!hideCancel && <Button label="Cancel" kind="ghost" onClick={handleCancel} />}
-        <Button
-          label={confirmButton}
-          kind={type === "danger" ? "delete" : "primary"}
-          onClick={handleConfirm}
-        />
-      </div>
-    </>
-  )
-
-  dialog.showModal()
-
-  dialog.addEventListener("close", handleCancel)
-
-  return {
-    show: () => dialog.showModal(),
-    close: () => dialog.close(),
-    cleanup,
-  }
-}

package/tests/sweetest_alert.test.jsx

@@ -1,254 +0,0 @@
-import React from "react"
-import { screen, fireEvent, waitFor, act } from "@testing-library/react"
-import { describe, it, expect, beforeEach, afterEach, vi } from "vitest"
-import { SweetestAlert } from "../src/sweetest_alert.tsx"
-
-describe("SweetestAlert", () => {
-  const mockConfirm = vi.fn()
-  const mockCancel = vi.fn()
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    document.querySelectorAll("dialog.pco-sweetest-alert").forEach((dialog) => dialog.remove())
-  })
-
-  afterEach(() => {
-    document.querySelectorAll("dialog.pco-sweetest-alert").forEach((dialog) => dialog.remove())
-  })
-
-  describe("Initial Render", () => {
-    beforeEach(async () => {
-      await act(async () => {
-        SweetestAlert({
-          title: "Test Title",
-          content: "Test content",
-          confirm: mockConfirm,
-          cancel: mockCancel,
-        })
-      })
-    })
-
-    it("creates and displays a modal dialog", () => {
-      const dialog = document.querySelector("dialog.pco-sweetest-alert")
-      expect(dialog).toBeInTheDocument()
-      expect(dialog).toHaveAttribute("open")
-    })
-
-    it("displays the provided title as a heading", () => {
-      expect(screen.getByRole("heading", { name: "Test Title" })).toBeInTheDocument()
-    })
-
-    it("displays the content text in the dialog body", () => {
-      expect(screen.getByText("Test content")).toBeInTheDocument()
-    })
-
-    it("displays a cancel button", () => {
-      expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument()
-    })
-
-    it("displays a confirm button with default label", () => {
-      expect(screen.getByRole("button", { name: "Okay" })).toBeInTheDocument()
-    })
-
-    it("displays a warning icon when no type is specified", () => {
-      const icon = document.querySelector(".pco-sweetest-alert__icon.pco-sweetest-alert--warning")
-      expect(icon).toBeInTheDocument()
-      expect(icon.querySelector("path")).toBeInTheDocument()
-    })
-  })
-
-  describe("Alert Types", () => {
-    it("displays success icon when type is set to success", async () => {
-      await act(async () => {
-        SweetestAlert({
-          title: "Success",
-          content: "Success content",
-          type: "success",
-        })
-      })
-
-      const icon = document.querySelector(".pco-sweetest-alert__icon.pco-sweetest-alert--success")
-      expect(icon).toBeInTheDocument()
-      expect(icon.querySelector("path")).toBeInTheDocument()
-    })
-
-    it("displays error icon when type is set to error", async () => {
-      await act(async () => {
-        SweetestAlert({
-          title: "Error",
-          content: "Error content",
-          type: "error",
-        })
-      })
-
-      const icon = document.querySelector(".pco-sweetest-alert__icon.pco-sweetest-alert--error")
-      expect(icon).toBeInTheDocument()
-      expect(icon.querySelector("path")).toBeInTheDocument()
-    })
-
-    it("displays info icon when type is set to info", async () => {
-      await act(async () => {
-        SweetestAlert({
-          title: "Info",
-          content: "Info content",
-          type: "info",
-        })
-      })
-
-      const icon = document.querySelector(".pco-sweetest-alert__icon.pco-sweetest-alert--info")
-      expect(icon).toBeInTheDocument()
-      expect(icon.querySelector("path")).toBeInTheDocument()
-    })
-
-    it("displays red warning icon and delete button kind when type is set to danger", async () => {
-      await act(async () => {
-        SweetestAlert({
-          title: "Danger",
-          content: "Danger content",
-          type: "danger",
-        })
-      })
-
-      const icon = document.querySelector(".pco-sweetest-alert__icon.pco-sweetest-alert--danger")
-      expect(icon).toBeInTheDocument()
-      expect(icon.querySelector("path")).toBeInTheDocument()
-
-      const button = document.querySelector(".tds-btn.tds-btn--delete")
-      expect(button).toBeInTheDocument()
-    })
-  })
-
-  describe("Button Interactions", () => {
-    beforeEach(async () => {
-      await act(async () => {
-        SweetestAlert({
-          title: "Interactive Test",
-          content: "Test content",
-          confirm: mockConfirm,
-          cancel: mockCancel,
-        })
-      })
-    })
-
-    it("executes confirm callback and removes dialog when confirm button is clicked", async () => {
-      const confirmButton = screen.getByRole("button", { name: "Okay" })
-      fireEvent.click(confirmButton)
-
-      await waitFor(() => {
-        expect(mockConfirm).toHaveBeenCalledTimes(1)
-      })
-
-      // Dialog should be removed from DOM
-      await waitFor(() => {
-        expect(document.querySelector("dialog.pco-sweetest-alert")).not.toBeInTheDocument()
-      })
-    })
-
-    it("executes cancel callback and removes dialog when cancel button is clicked", async () => {
-      const cancelButton = screen.getByRole("button", { name: "Cancel" })
-      fireEvent.click(cancelButton)
-
-      await waitFor(() => {
-        expect(mockCancel).toHaveBeenCalledTimes(1)
-      })
-
-      // Dialog should be removed from DOM
-      await waitFor(() => {
-        expect(document.querySelector("dialog.pco-sweetest-alert")).not.toBeInTheDocument()
-      })
-    })
-
-    it("executes cancel callback and removes dialog when escape key is pressed", async () => {
-      const dialog = document.querySelector("dialog.pco-sweetest-alert")
-
-      // Simulate pressing Escape key which triggers the dialog's close event
-      fireEvent.keyDown(dialog, { key: "Escape", code: "Escape" })
-
-      // Manually trigger the close event since jsdom doesn't handle native dialog behavior
-      fireEvent(dialog, new Event("close"))
-
-      await waitFor(() => {
-        expect(mockCancel).toHaveBeenCalledTimes(1)
-      })
-
-      // Dialog should be removed from DOM
-      await waitFor(() => {
-        expect(document.querySelector("dialog.pco-sweetest-alert")).not.toBeInTheDocument()
-      })
-    })
-  })
-
-  describe("Custom Button Labels", () => {
-    beforeEach(async () => {
-      await act(async () => {
-        SweetestAlert({
-          title: "Custom Buttons",
-          content: "Test content",
-          confirmButton: "Yes please",
-          confirm: mockConfirm,
-          cancel: mockCancel,
-        })
-      })
-    })
-
-    it("displays custom confirm button text when confirmButton prop is provided", () => {
-      expect(screen.getByRole("button", { name: "Yes please" })).toBeInTheDocument()
-    })
-  })
-
-  describe("Hide Cancel Button", () => {
-    beforeEach(async () => {
-      await act(async () => {
-        SweetestAlert({
-          title: "Custom Buttons",
-          content: "Test content",
-          confirm: mockConfirm,
-          cancel: mockCancel,
-          hideCancel: true,
-        })
-      })
-    })
-
-    it("does not display cancel button when hideCancel is true", () => {
-      expect(screen.queryByRole("button", { name: "Cancel" })).not.toBeInTheDocument()
-    })
-  })
-
-  describe("Renders HTML instead of text content", () => {
-    it("renders content property as HTML", async () => {
-      await act(async () => {
-        const HtmlFrag = () => {
-          return <strong>Test content</strong>
-        }
-
-        SweetestAlert({
-          title: "Custom HTML",
-          content: <HtmlFrag />,
-          confirm: mockConfirm,
-          cancel: mockCancel,
-        })
-      })
-
-      expect(screen.getByText("Test content")).toBeInTheDocument()
-      expect(screen.getByText("Test content").tagName).toBe("STRONG")
-    })
-
-    it("does not render content property as HTML", async () => {
-      await act(async () => {
-        SweetestAlert({
-          title: "Custom HTML",
-          content: "<strong>Test content</strong>",
-          confirm: mockConfirm,
-          cancel: mockCancel,
-        })
-      })
-
-      // Test that escaped HTML is displayed
-      expect(screen.getByText("<strong>Test content</strong>")).toBeInTheDocument()
-
-      // Test that actual HTML element is NOT created by checking there's no strong element
-      const strongElement = document.querySelector("strong")
-      expect(strongElement).not.toBeInTheDocument()
-    })
-  })
-})

package/tests/test-setup.ts

@@ -1,13 +0,0 @@
-import '@testing-library/jest-dom'
-import { vi, beforeAll } from 'vitest'
-
-// Mock dialog.showModal() method which is not available in jsdom
-beforeAll(() => {
-  HTMLDialogElement.prototype.showModal = vi.fn(function (this: HTMLDialogElement) {
-    this.open = true
-  })
-
-  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
-    this.open = false
-  })
-})

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2024",
-    "module": "esnext",
-    "lib": ["es2024", "DOM", "DOM.Iterable"],
-    "jsx": "react-jsx",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "allowImportingTsExtensions": true,
-    "allowJs": true,
-    "checkJs": false,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["src/**/*", "tests/sweetest_alert.test.jsx", "tests/test-setup.ts"],
-  "exclude": ["node_modules"]
-}

package/vite.config.ts

@@ -1,11 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  plugins: [react()],
-  root: './docs',
-  server: {
-    port: 3000,
-    open: true
-  }
-})

package/vitest.config.ts

@@ -1,11 +0,0 @@
-import { defineConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: './tests/test-setup.ts',
-  },
-})