@planningcenter/sweetest-alert 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("react-dom"),h=require("@planningcenter/tapestry");var o={},_;function C(){if(_)return o;_=1;var c=v;if(process.env.NODE_ENV==="production")o.createRoot=c.createRoot,o.hydrateRoot=c.hydrateRoot;else{var r=c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;o.createRoot=function(l,n){r.usingClientEntryPoint=!0;try{return c.createRoot(l,n)}finally{r.usingClientEntryPoint=!1}},o.hydrateRoot=function(l,n,s){r.usingClientEntryPoint=!0;try{return c.hydrateRoot(l,n,s)}finally{r.usingClientEntryPoint=!1}}}return o}var f=C();const p="M8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824zM12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z",w="M15.7713,14.0548c0.0002,0.133 -0.0347,0.2638 -0.1011,0.3791c-0.0664,0.1153 -0.162,0.211 -0.2772,0.2776c-0.1152,0.0665 -0.246,0.1015 -0.379,0.1015h-14.02801c-0.13305,0 -0.26377,-0.035 -0.37898,-0.1015c-0.11521,-0.0666 -0.21084,-0.1623 -0.27725,-0.2776c-0.06642,-0.1153 -0.10127,-0.2461 -0.10106,-0.3791c0.00022,-0.1331 0.0355,-0.2637 0.10229,-0.3788l7.014,-12.11501c0.06631,-0.11506 0.16176,-0.21062 0.27675,-0.27707c0.11498,-0.06644 0.24544,-0.10142 0.37825,-0.10142c0.1328,0 0.26326,0.03498 0.37824,0.10142c0.11499,0.06645 0.21044,0.16201 0.27676,0.27707l7.01401,12.11501c0.0668,0.1151 0.1021,0.2457 0.1023,0.3788zM8.75699,11.028h-1.514v1.514h1.514zM8.75699,6.48499h-1.514v3.029h1.514z",E="M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824z",R="M11.3951,10.2621l-2.26245,-2.2621l2.26245,-2.26215l-1.1317,-1.1316l-2.2625,2.26215l-2.26246,-2.26215l-1.13175,1.1316l2.26246,2.26215l-2.26246,2.2621l1.13175,1.1316l2.26246,-2.2621l2.2625,2.2621zM16,8c0,2.1214 -0.8421,4.156 -2.3414,5.6569c-1.119,1.1188 -2.5446,1.8807 -4.09668,2.1894c-1.55205,0.3087 -3.16079,0.1502 -4.62278,-0.4553c-1.46199,-0.6055 -2.71157,-1.6309 -3.59073,-2.9465c-0.87916,-1.3156 -1.34841,-2.86226 -1.34841,-4.4445c0,-1.58224 0.46925,-3.12895 1.34841,-4.44453c0.87916,-1.31559 2.12874,-2.34097 3.59073,-2.94648c1.46199,-0.60551 3.07073,-0.76395 4.62278,-0.45529c1.55208,0.30866 2.97768,1.07056 4.09668,2.18935c1.4993,1.50098 2.3414,3.5356 2.3414,5.65695z";function x({onCancel:c,onConfirm:r,confirmButton:l="Okay",content:n,hideCancel:s=!1,title:y,type:a="warning"}){const t=document.createElement("dialog");t.className="pco-sweetest-alert",document.body.appendChild(t);const d=f.createRoot(t),i=()=>{d.unmount(),document.body.removeChild(t)},g=()=>{i(),r?.()},u=()=>{i(),c?.()},m=()=>{switch(a){case"success":return p;case"error":return R;case"info":return E;case"danger":case"warning":return w}};return d.render(e.jsxs(e.Fragment,{children:[e.jsx("svg",{className:`pco-sweetest-alert__icon pco-sweetest-alert--${a}`,width:"48",height:"48",viewBox:"0 0 16 16","aria-hidden":"true",children:e.jsx("path",{d:m()})}),e.jsx("h2",{className:"pco-sweetest-alert__title",children:y}),e.jsx("div",{className:"pco-sweetest-alert__body",children:typeof n=="string"?e.jsx("p",{children:n}):n}),e.jsxs("div",{className:"pco-sweetest-alert__actions",children:[!s&&e.jsx(h.Button,{label:"Cancel",kind:"ghost",onClick:u}),e.jsx(h.Button,{label:l,kind:a==="danger"?"delete":"primary",onClick:g})]})]})),t.showModal(),t.addEventListener("close",u),{show:()=>t.showModal(),close:()=>t.close(),cleanup:i}}exports.SweetestAlert=x;

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,108 @@
+import { jsxs as u, Fragment as g, jsx as r } from "react/jsx-runtime";
+import v from "react-dom";
+import { Button as m } from "@planningcenter/tapestry";
+var o = {}, _;
+function y() {
+  if (_) return o;
+  _ = 1;
+  var c = v;
+  if (process.env.NODE_ENV === "production")
+    o.createRoot = c.createRoot, o.hydrateRoot = c.hydrateRoot;
+  else {
+    var n = c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    o.createRoot = function(l, t) {
+      n.usingClientEntryPoint = !0;
+      try {
+        return c.createRoot(l, t);
+      } finally {
+        n.usingClientEntryPoint = !1;
+      }
+    }, o.hydrateRoot = function(l, t, a) {
+      n.usingClientEntryPoint = !0;
+      try {
+        return c.hydrateRoot(l, t, a);
+      } finally {
+        n.usingClientEntryPoint = !1;
+      }
+    };
+  }
+  return o;
+}
+var w = y();
+const E = "M8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824zM12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z", R = "M15.7713,14.0548c0.0002,0.133 -0.0347,0.2638 -0.1011,0.3791c-0.0664,0.1153 -0.162,0.211 -0.2772,0.2776c-0.1152,0.0665 -0.246,0.1015 -0.379,0.1015h-14.02801c-0.13305,0 -0.26377,-0.035 -0.37898,-0.1015c-0.11521,-0.0666 -0.21084,-0.1623 -0.27725,-0.2776c-0.06642,-0.1153 -0.10127,-0.2461 -0.10106,-0.3791c0.00022,-0.1331 0.0355,-0.2637 0.10229,-0.3788l7.014,-12.11501c0.06631,-0.11506 0.16176,-0.21062 0.27675,-0.27707c0.11498,-0.06644 0.24544,-0.10142 0.37825,-0.10142c0.1328,0 0.26326,0.03498 0.37824,0.10142c0.11499,0.06645 0.21044,0.16201 0.27676,0.27707l7.01401,12.11501c0.0668,0.1151 0.1021,0.2457 0.1023,0.3788zM8.75699,11.028h-1.514v1.514h1.514zM8.75699,6.48499h-1.514v3.029h1.514z", M = "M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824z", z = "M11.3951,10.2621l-2.26245,-2.2621l2.26245,-2.26215l-1.1317,-1.1316l-2.2625,2.26215l-2.26246,-2.26215l-1.13175,1.1316l2.26246,2.26215l-2.26246,2.2621l1.13175,1.1316l2.26246,-2.2621l2.2625,2.2621zM16,8c0,2.1214 -0.8421,4.156 -2.3414,5.6569c-1.119,1.1188 -2.5446,1.8807 -4.09668,2.1894c-1.55205,0.3087 -3.16079,0.1502 -4.62278,-0.4553c-1.46199,-0.6055 -2.71157,-1.6309 -3.59073,-2.9465c-0.87916,-1.3156 -1.34841,-2.86226 -1.34841,-4.4445c0,-1.58224 0.46925,-3.12895 1.34841,-4.44453c0.87916,-1.31559 2.12874,-2.34097 3.59073,-2.94648c1.46199,-0.60551 3.07073,-0.76395 4.62278,-0.45529c1.55208,0.30866 2.97768,1.07056 4.09668,2.18935c1.4993,1.50098 2.3414,3.5356 2.3414,5.65695z";
+function O({
+  // Optional: Callback function executed when cancel button is clicked
+  onCancel: c,
+  // Optional: Callback function executed when confirm button is clicked
+  onConfirm: n,
+  // Optional: Text for the confirm button. Defaults to "Okay".
+  confirmButton: l = "Okay",
+  // Required: The body content explaining the alert.
+  // Accepts a React fragment or a string of text.
+  content: t,
+  // Optional: When true, hides the cancel button for simple notifications.
+  // Defaults to "false".
+  hideCancel: a = !1,
+  // Required: The main heading text displayed at the top of the modal
+  title: f,
+  // Optional: The visual type of alert, affects icon and styling.
+  // Values can be "info", "success", "error", "danger", or "warning" (default).
+  type: s = "warning"
+}) {
+  const e = document.createElement("dialog");
+  e.className = "pco-sweetest-alert", document.body.appendChild(e);
+  const d = w.createRoot(e), i = () => {
+    d.unmount(), document.body.removeChild(e);
+  }, p = () => {
+    i(), n?.();
+  }, h = () => {
+    i(), c?.();
+  }, C = () => {
+    switch (s) {
+      case "success":
+        return E;
+      case "error":
+        return z;
+      case "info":
+        return M;
+      case "danger":
+      case "warning":
+        return R;
+    }
+  };
+  return d.render(
+    /* @__PURE__ */ u(g, { children: [
+      /* @__PURE__ */ r(
+        "svg",
+        {
+          className: `pco-sweetest-alert__icon pco-sweetest-alert--${s}`,
+          width: "48",
+          height: "48",
+          viewBox: "0 0 16 16",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ r("path", { d: C() })
+        }
+      ),
+      /* @__PURE__ */ r("h2", { className: "pco-sweetest-alert__title", children: f }),
+      /* @__PURE__ */ r("div", { className: "pco-sweetest-alert__body", children: typeof t == "string" ? /* @__PURE__ */ r("p", { children: t }) : t }),
+      /* @__PURE__ */ u("div", { className: "pco-sweetest-alert__actions", children: [
+        !a && /* @__PURE__ */ r(m, { label: "Cancel", kind: "ghost", onClick: h }),
+        /* @__PURE__ */ r(
+          m,
+          {
+            label: l,
+            kind: s === "danger" ? "delete" : "primary",
+            onClick: p
+          }
+        )
+      ] })
+    ] })
+  ), e.showModal(), e.addEventListener("close", h), {
+    show: () => e.showModal(),
+    close: () => e.close(),
+    cleanup: i
+  };
+}
+export {
+  O as SweetestAlert
+};

package/dist/sweetest_alert.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+type AlertTypes = "info" | "success" | "error" | "danger" | "warning";
+export declare function SweetestAlert({ onCancel, onConfirm, confirmButton, content, hideCancel, title, type, }: {
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    confirmButton?: string;
+    content: string | React.ReactNode;
+    hideCancel?: boolean;
+    title: string;
+    type?: AlertTypes;
+}): {
+    show: () => void;
+    close: () => void;
+    cleanup: () => void;
+};
+export {};

package/package.json

@@ -1,9 +1,24 @@
 {
   "name": "@planningcenter/sweetest-alert",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "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,27 @@
     "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\""
+    "lint:css": "stylelint \"**/*.css\"",
+    "prepublishOnly": "yarn build:lib"
   },
   "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;
-  }
-}