@agentero/design-system 0.0.1

package/LICENSE

@@ -0,0 +1,201 @@
+Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,53 @@
+# @agentero/design-system
+
+A React component library built with [Tailwind CSS v4](https://tailwindcss.com/) and [Radix UI](https://www.radix-ui.com/) primitives. Each component is individually importable, fully typed, and designed to integrate seamlessly into any Tailwind-based project.
+
+[Storybook](https://agentero.github.io/design-system/) | [npm](https://www.npmjs.com/package/@agentero/design-system)
+
+## Installation
+
+```bash
+yarn add @agentero/design-system
+```
+
+### Peer dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+yarn add react react-dom tailwindcss
+```
+
+## Setup
+
+### Tailwind CSS configuration
+
+Add the design system as a Tailwind source so that the CSS for component classes is generated:
+
+```css
+/* app.css */
+@import 'tailwindcss';
+@source "@agentero/design-system/theme";
+```
+
+## Components
+
+```tsx
+import { ComponentName } from '@agentero/design-system/ComponentName';
+```
+
+## Utilities
+
+### `cn`
+
+A class name merging utility combining `clsx` and `tailwind-merge`. Useful for conditionally joining Tailwind classes without conflicts.
+
+```tsx
+import { cn } from '@agentero/design-system/lib';
+
+cn('px-4 py-2', isActive && 'bg-blue-500', className);
+```
+
+## License
+
+[Apache-2.0](./LICENSE)

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './utils';

package/lib/index.js

@@ -0,0 +1,2 @@
+import { cn as e } from "./utils.js";
+export { e as cn };

package/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare const cn: (...inputs: ClassValue[]) => string;

package/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx as e } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+//#region lib/utils.ts
+var n = (...n) => t(e(n));
+//#endregion
+export { n as cn };

package/package.json

@@ -0,0 +1,46 @@
+{
+	"name": "@agentero/design-system",
+	"version": "0.0.1",
+	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
+	"type": "module",
+	"license": "Apache-2.0",
+	"sideEffects": false,
+	"homepage": "https://agentero.github.io/design-system/",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/agentero/design-system.git"
+	},
+	"bugs": {
+		"url": "https://github.com/agentero/design-system/issues"
+	},
+	"keywords": [
+		"react",
+		"design-system",
+		"components",
+		"tailwindcss",
+		"radix-ui"
+	],
+	"exports": {
+		"./avatar": {
+			"types": "./src/avatar/index.d.ts",
+			"import": "./src/avatar/index.js"
+		},
+		"./lib": {
+			"types": "./lib/index.d.ts",
+			"import": "./lib/index.js"
+		},
+		"./theme": "./theme/base.css",
+		"./package.json": "./package.json"
+	},
+	"peerDependencies": {
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4",
+		"tailwindcss": "^4.0.0"
+	},
+	"dependencies": {
+		"@radix-ui/react-avatar": "^1.1.11",
+		"clsx": "^2.1.1",
+		"tailwind-merge": "^3.5.0",
+		"tailwind-variants": "^3.2.2"
+	}
+}

package/src/avatar/avatar.d.ts

@@ -0,0 +1,229 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+/**
+ * Style recipe for Avatar using tailwind-variants.
+ * Defines slots (`root`, `image`, `fallback`) and variants (`size`, `variant`).
+ * Customize avatar appearance by composing these slots and variants.
+ */
+export declare const avatarRecipe: import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+            fallback: string;
+        };
+        sm: {
+            root: string;
+            fallback: string;
+        };
+        md: {
+            root: string;
+            fallback: string;
+        };
+        lg: {
+            root: string;
+            fallback: string;
+        };
+        xl: {
+            root: string;
+            fallback: string;
+        };
+        '2xl': {
+            root: string;
+            fallback: string;
+        };
+        '3xl': {
+            root: string;
+            fallback: string;
+        };
+        '4xl': {
+            root: string;
+            fallback: string;
+        };
+    };
+    variant: {
+        circle: {
+            root: string;
+        };
+        square: {
+            root: string;
+        };
+        pillow: {
+            root: string[];
+        };
+        pentagon: {
+            root: string[];
+        };
+    };
+}, {
+    root: string[];
+    image: string[];
+    fallback: string[];
+}, undefined, {
+    size: {
+        xs: {
+            root: string;
+            fallback: string;
+        };
+        sm: {
+            root: string;
+            fallback: string;
+        };
+        md: {
+            root: string;
+            fallback: string;
+        };
+        lg: {
+            root: string;
+            fallback: string;
+        };
+        xl: {
+            root: string;
+            fallback: string;
+        };
+        '2xl': {
+            root: string;
+            fallback: string;
+        };
+        '3xl': {
+            root: string;
+            fallback: string;
+        };
+        '4xl': {
+            root: string;
+            fallback: string;
+        };
+    };
+    variant: {
+        circle: {
+            root: string;
+        };
+        square: {
+            root: string;
+        };
+        pillow: {
+            root: string[];
+        };
+        pentagon: {
+            root: string[];
+        };
+    };
+}, {
+    root: string[];
+    image: string[];
+    fallback: string[];
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+            fallback: string;
+        };
+        sm: {
+            root: string;
+            fallback: string;
+        };
+        md: {
+            root: string;
+            fallback: string;
+        };
+        lg: {
+            root: string;
+            fallback: string;
+        };
+        xl: {
+            root: string;
+            fallback: string;
+        };
+        '2xl': {
+            root: string;
+            fallback: string;
+        };
+        '3xl': {
+            root: string;
+            fallback: string;
+        };
+        '4xl': {
+            root: string;
+            fallback: string;
+        };
+    };
+    variant: {
+        circle: {
+            root: string;
+        };
+        square: {
+            root: string;
+        };
+        pillow: {
+            root: string[];
+        };
+        pentagon: {
+            root: string[];
+        };
+    };
+}, {
+    root: string[];
+    image: string[];
+    fallback: string[];
+}, undefined, unknown, unknown, undefined>>;
+type AvatarVariants = VariantProps<typeof avatarRecipe>;
+type AvatarSlotsStyles = ReturnType<typeof avatarRecipe>;
+type AvatarContextValue = AvatarVariants & {
+    slotsStyles: AvatarSlotsStyles;
+};
+/**
+ * Returns the current Avatar context including variant props and computed slot styles.
+ * Must be called within an `AvatarRoot` (or `Avatar`) component tree.
+ *
+ * @summary Access avatar context for size, variant, and slot styles
+ */
+export declare const useAvatar: () => AvatarContextValue;
+type AvatarProps = ComponentPropsWithRef<typeof AvatarPrimitive.Root> & {
+    /** Accessible alt text describing the avatar image. Required when `src` is provided. */
+    alt?: string;
+    /** Image URL to display. When unavailable or loading fails, `fallback` content is shown instead. */
+    src?: string;
+    /** Content rendered when `src` is missing or fails to load. Typically user initials (e.g., "JD") or an icon. */
+    fallback?: ReactNode;
+    /**
+     * Controls the avatar dimensions. Defaults to `'md'` (40px).
+     * - `xs` (24px) — inline indicators, dense lists
+     * - `sm` (32px) — compact layouts, table rows
+     * - `md` (40px) — standard usage, cards, headers
+     * - `lg` (48px) — profile sections, detail views
+     * - `xl` (64px) — hero sections, prominent display
+     * - `2xl` (80px), `3xl` (96px), `4xl` (128px) — large feature areas, profile pages
+     */
+    size?: AvatarVariants['size'];
+    /**
+     * Shape of the avatar container. Defaults to `'circle'`.
+     * - `circle` — standard round avatar for user photos
+     * - `square` — rounded rectangle, suitable for workspace or team icons
+     * - `pillow` — soft, organic squircle shape
+     * - `pentagon` — distinctive five-sided shape for unique visual identity
+     */
+    variant?: AvatarVariants['variant'];
+};
+/**
+ * Avatar displays a user's profile image, initials, or a fallback icon.
+ * Use Avatar for user identification in lists, headers, cards, and comment threads.
+ *
+ * Do **not** use Avatar for decorative images or thumbnails unrelated to a person
+ * or entity — use a standard `<img>` or a Thumbnail component instead.
+ *
+ * Renders an image when `src` is provided; otherwise displays `fallback` content
+ * (typically initials or an icon). Built on Radix UI Avatar primitives.
+ *
+ * Available shapes: `circle` (default), `square`, `pillow`, and `pentagon`.
+ * Sizes range from `xs` (24px) to `4xl` (128px), defaulting to `md` (40px).
+ *
+ * @summary Displays a user's profile image, initials, or fallback icon
+ *
+ * @example
+ * <Avatar src="/photos/jane.jpg" alt="Jane Doe" size="md" variant="circle" />
+ *
+ * @example
+ * <Avatar fallback="JD" size="lg" variant="square" />
+ */
+export declare const Avatar: ({ alt, src, fallback, size, variant, ref, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/avatar/avatar.js

@@ -0,0 +1,120 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { createContext as t, use as n } from "react";
+import * as r from "@radix-ui/react-avatar";
+import { tv as i } from "tailwind-variants";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/avatar/avatar.tsx
+var s = i({
+	slots: {
+		root: [
+			"flex items-center justify-center align-middle",
+			"overflow-hidden select-none box-border",
+			"shrink-0 relative font-inherit",
+			"m-0 outline-none p-0 font-semibold",
+			"text-text-default-base-primary bg-bg-default-base-primary",
+			"border-solid border-[length:var(--avatar-border-width,1px)]",
+			"border-[var(--avatar-border-color,var(--color-border-default-base-primary))]",
+			"h-fit w-fit"
+		],
+		image: ["flex object-cover box-border h-full vertical-align-middle w-full"],
+		fallback: ["uppercase", "[&_svg]:size-[1.5em] [&_svg]:fill-neutral-500"]
+	},
+	variants: {
+		size: {
+			xs: {
+				root: "size-6",
+				fallback: "text-xs leading-[1.125rem] [&_svg]:size-[0.9375rem]"
+			},
+			sm: {
+				root: "size-8",
+				fallback: "text-sm"
+			},
+			md: {
+				root: "size-10",
+				fallback: "text-base"
+			},
+			lg: {
+				root: "size-12",
+				fallback: "text-lg"
+			},
+			xl: {
+				root: "size-16",
+				fallback: "text-[1.375rem]"
+			},
+			"2xl": {
+				root: "size-20",
+				fallback: "text-[1.625rem]"
+			},
+			"3xl": {
+				root: "size-24",
+				fallback: "text-[2rem]"
+			},
+			"4xl": {
+				root: "size-32",
+				fallback: "text-[3rem]"
+			}
+		},
+		variant: {
+			circle: { root: "rounded-full" },
+			square: { root: "rounded-md" },
+			pillow: { root: [
+				"rounded-[38.5%]",
+				"[mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==)]",
+				"[mask-size:contain]"
+			] },
+			pentagon: { root: [
+				"!border-none border-transparent",
+				"[mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjU2NTcgMC4yNTA5NzdDMTUuODM0OCAtMC4wODM2NTk0IDE3LjE2NTggLTAuMDgzNjU4NCAxOC40MzQ4IDAuMjUwOTc3QzE5Ljg5NDIgMC42MzU4OCAyMS4yMTMzIDEuNjMwODkgMjMuNjM0IDMuNDM3NUwyNy4yNDQ0IDYuMTMxODRDMjkuNjY3IDcuOTM5OCAzMC45OTMyIDguOTE5NzcgMzEuNzk4MSAxMC4yMjI3QzMyLjQ5NzcgMTEuMzU1IDMyLjkwNzYgMTIuNjQ5OCAzMi45ODk1IDEzLjk4NjNDMzMuMDgzNSAxNS41MjI3IDMyLjU3MjQgMTcuMTExOSAzMS42NDY3IDIwLjAzODFMMzAuMjY3OCAyNC4zOTc1QzI5LjM0MjUgMjcuMzIyNyAyOC44NDU4IDI4LjkxODIgMjcuODg4OSAzMC4xMDY0QzI3LjA1NjEgMzEuMTQwNiAyNS45ODA4IDMxLjk0MzIgMjQuNzYzIDMyLjQzODVDMjMuMzYxNSAzMy4wMDg0IDIxLjcyMzggMzMgMTguNzMxNyAzM0gxNC4yNjg4QzExLjI3NjcgMzMgOS42MzkwNCAzMy4wMDg0IDguMjM3NiAzMi40Mzg1QzcuMDE5NzUgMzEuOTQzMiA1Ljk0NDQ4IDMxLjE0MDYgNS4xMTE2MiAzMC4xMDY0QzQuMTU0NzIgMjguOTE4MiAzLjY1ODAyIDI3LjMyMjcgMi43MzI3MiAyNC4zOTc1TDEuMzUzODEgMjAuMDM4MUMwLjQyODE4NyAxNy4xMTE5IC0wLjA4Mjk0NiAxNS41MjI3IDAuMDExMDM5IDEzLjk4NjNDMC4wOTI5MDMgMTIuNjQ5OCAwLjUwMjg4MSAxMS4zNTUgMS4yMDI0NCAxMC4yMjI3QzIuMDA3NCA4LjkxOTc3IDMuMzMzNTggNy45Mzk4IDUuNzU2MTYgNi4xMzE4NEw5LjM2NjUxIDMuNDM3NUMxMS43ODcyIDEuNjMwODkgMTMuMTA2MyAwLjYzNTg4IDE0LjU2NTcgMC4yNTA5NzdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K)]",
+				"[mask-size:contain] [mask-repeat:no-repeat] [mask-position:center]"
+			] }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "circle"
+	}
+}), c = t(null), l = () => {
+	let e = n(c);
+	if (!e) throw Error("useAvatar must be used within an AvatarProvider");
+	return e;
+}, u = ({ size: t, variant: n, ...i }) => {
+	let o = s({
+		size: t,
+		variant: n
+	});
+	return /* @__PURE__ */ a(c, {
+		value: {
+			size: t,
+			variant: n,
+			slotsStyles: o
+		},
+		children: /* @__PURE__ */ a(r.Root, {
+			...i,
+			className: e(o.root(), i.className)
+		})
+	});
+}, d = (t) => {
+	let { slotsStyles: n } = l();
+	return /* @__PURE__ */ a(r.Image, {
+		...t,
+		className: e(n.image(), t.className)
+	});
+}, f = (t) => {
+	let { slotsStyles: n } = l();
+	return /* @__PURE__ */ a(r.Fallback, {
+		...t,
+		className: e(n.fallback(), t.className)
+	});
+}, p = ({ alt: e, src: t, fallback: n, size: r, variant: i, ref: s, ...c }) => /* @__PURE__ */ o(u, {
+	...c,
+	ref: s,
+	size: r,
+	variant: i,
+	children: [/* @__PURE__ */ a(d, {
+		alt: e,
+		src: t
+	}), /* @__PURE__ */ a(f, { children: n })]
+});
+//#endregion
+export { p as Avatar };

package/src/avatar/index.d.ts

@@ -0,0 +1 @@
+export { Avatar } from './avatar';

package/src/avatar/index.js

@@ -0,0 +1,2 @@
+import { Avatar as e } from "./avatar.js";
+export { e as Avatar };

package/theme/base.css

@@ -0,0 +1,701 @@
+@theme {
+  /* ========================================
+    * TYPOGRAPHY
+    * ======================================== */
+
+  /* Font Families */
+  --default-font-family: "Inter", sans-serif;
+  --font-family-body: "Inter", sans-serif;
+
+  /* ========================================
+    * TEXT STYLES (Typography Utilities)
+    * Migrated from Panda textStyles
+    * ======================================== */
+
+  /* Default Tailwind text sizes */
+  --text-2xs: 0.625rem; /* 10px */
+  --text-2xs--line-height: 1rem; /* 16px */
+  --text-xs: 0.75rem; /* 12px */
+  --text-xs--line-height: 1.125rem; /* 18px */
+  --text-xs--letter-spacing: 0.0105rem; /* 0.168px */
+
+  --text-sm: 0.875rem; /* 14px */
+  --text-sm--line-height: 1.375rem; /* 22px */
+
+  /* Tailwind base text size mapped to design system body.md */
+  --text-base: 1rem; /* 16px */
+  --text-base--line-height: 1.5rem; /* 24px */
+
+  --text-lg: 1.125rem; /* 18px */
+  --text-lg--line-height: 1.75rem; /* 28px */
+
+  --text-xl: 1.25rem; /* 20px */
+  --text-xl--line-height: 1.5rem; /* 24px */
+
+  --text-2xl: 1.5rem; /* 24px */
+  --text-2xl--line-height: 2.25rem; /* 36px */
+
+  --text-3xl: 2rem; /* 32px */
+  --text-3xl--line-height: 3rem; /* 48px */
+
+  --text-4xl: 2.5rem; /* 40px */
+  --text-4xl--line-height: 3.75rem; /* 60px */
+
+  --text-5xl: 3rem; /* 48px */
+  --text-5xl--line-height: 4.5rem; /* 72px */
+
+  --text-6xl: 4rem; /* 64px */
+  --text-6xl--line-height: 6rem; /* 96px */
+
+  --text-7xl: 4.5rem; /* 72px */
+  --text-7xl--line-height: 6.75rem; /* 108px */
+
+  --text-8xl: 6rem; /* 96px */
+  --text-8xl--line-height: 9rem; /* 144px */
+
+  --text-9xl: 8rem; /* 128px - Tailwind default */
+  --text-9xl--line-height: 1;
+
+  /* ========================================
+    * COLORS - Base Palette
+    * ======================================== */
+
+  /* Neutrals Scale */
+  --color-neutrals-000: #ffffff;
+  --color-neutrals-050: #f3f3f3;
+  --color-neutrals-100: #e3e3e3;
+  --color-neutrals-200: #cdcdcd;
+  --color-neutrals-300: #b2b2b2;
+  --color-neutrals-400: #949494;
+  --color-neutrals-500: #767676;
+  --color-neutrals-600: #5a5a5a;
+  --color-neutrals-700: #434343;
+  --color-neutrals-800: #303030;
+  --color-neutrals-900: #242424;
+  --color-neutrals-1000: #000000;
+
+  /* Slate Scale (deprecated but keep for compatibility) */
+  --color-slate-050: #f7f8fa;
+  --color-slate-100: #ebedf2;
+  --color-slate-200: #cfd2db;
+  --color-slate-300: #b3b8c7;
+  --color-slate-400: #949aad;
+  --color-slate-500: #727a91;
+  --color-slate-600: #5a6072;
+  --color-slate-700: #434856;
+  --color-slate-800: #2d3039;
+  --color-slate-900: #16181d;
+
+  /* Brand (Teal/Green) Scale */
+  --color-brand-050: #eafaf5;
+  --color-brand-100: #d6f5ec;
+  --color-brand-200: #adebd8;
+  --color-brand-300: #84e1c5;
+  --color-brand-400: #5bd7b2;
+  --color-brand-500: #32cd9f;
+  --color-brand-600: #28a47f;
+  --color-brand-700: #1e7b5f;
+  --color-brand-800: #14523f;
+  --color-brand-900: #0a2920;
+
+  /* Positive (Green) Scale */
+  --color-positive-050: #e8fcec;
+  --color-positive-100: #d1fada;
+  --color-positive-200: #a3f5b5;
+  --color-positive-300: #75f090;
+  --color-positive-400: #47eb6b;
+  --color-positive-500: #19e646;
+  --color-positive-600: #14b838;
+  --color-positive-700: #0f8a2a;
+  --color-positive-800: #0a5c1c;
+  --color-positive-900: #052e0e;
+
+  /* Danger (Red) Scale */
+  --color-danger-050: #fbe9e9;
+  --color-danger-100: #f7d4d4;
+  --color-danger-200: #f0a8a8;
+  --color-danger-300: #e87d7d;
+  --color-danger-400: #e05252;
+  --color-danger-500: #d92626;
+  --color-danger-600: #ad1f1f;
+  --color-danger-700: #821717;
+  --color-danger-800: #570f0f;
+  --color-danger-900: #2b0808;
+
+  /* Warning (Yellow) Scale */
+  --color-warning-050: #fef8e6;
+  --color-warning-100: #fdf1ce;
+  --color-warning-200: #fbe49d;
+  --color-warning-300: #fad66b;
+  --color-warning-400: #f8c83a;
+  --color-warning-500: #f6bb09;
+  --color-warning-600: #c59507;
+  --color-warning-700: #947005;
+  --color-warning-800: #624b04;
+  --color-warning-900: #312502;
+
+  /* Orange Scale */
+  --color-orange-050: #fef0e6;
+  --color-orange-100: #fee1cd;
+  --color-orange-200: #fcc49c;
+  --color-orange-300: #fba66a;
+  --color-orange-400: #fa8938;
+  --color-orange-500: #f96b06;
+  --color-orange-600: #c75605;
+  --color-orange-700: #954004;
+  --color-orange-800: #632b03;
+  --color-orange-900: #321501;
+
+  /* Blue Scale */
+  --color-blue-050: #e6f1fe;
+  --color-blue-100: #cee3fd;
+  --color-blue-200: #9cc7fc;
+  --color-blue-300: #6babfa;
+  --color-blue-400: #398ff9;
+  --color-blue-500: #0874f7;
+  --color-blue-600: #065cc6;
+  --color-blue-700: #054594;
+  --color-blue-800: #032e63;
+  --color-blue-900: #021731;
+
+  /* Purple Scale */
+  --color-purple-050: #f3e7fe;
+  --color-purple-100: #e6cefd;
+  --color-purple-200: #ce9efa;
+  --color-purple-300: #b56df8;
+  --color-purple-400: #9c3cf6;
+  --color-purple-500: #830bf4;
+  --color-purple-600: #6909c3;
+  --color-purple-700: #4f0792;
+  --color-purple-800: #350561;
+  --color-purple-900: #1a0231;
+
+  /* Pink Scale */
+  --color-pink-050: #fde8f0;
+  --color-pink-100: #fbd0e1;
+  --color-pink-200: #f7a1c3;
+  --color-pink-300: #f372a6;
+  --color-pink-400: #ef4388;
+  --color-pink-500: #eb146a;
+  --color-pink-600: #bc1055;
+  --color-pink-700: #8d0c40;
+  --color-pink-800: #5e082a;
+  --color-pink-900: #2f0415;
+
+  /* Overlay Colors (rgba for transparency) */
+  --color-overlay-dark-900: rgba(22, 24, 29, 0.9);
+  --color-overlay-dark-800: rgba(22, 24, 29, 0.8);
+  --color-overlay-dark-700: rgba(22, 24, 29, 0.7);
+  --color-overlay-dark-600: rgba(22, 24, 29, 0.6);
+  --color-overlay-dark-500: rgba(22, 24, 29, 0.5);
+  --color-overlay-dark-400: rgba(22, 24, 29, 0.4);
+  --color-overlay-dark-300: rgba(22, 24, 29, 0.3);
+  --color-overlay-dark-200: rgba(22, 24, 29, 0.2);
+  --color-overlay-dark-100: rgba(22, 24, 29, 0.1);
+  --color-overlay-dark-050: rgba(22, 24, 29, 0.05);
+
+  --color-overlay-light-900: rgba(255, 255, 255, 0.9);
+  --color-overlay-light-800: rgba(255, 255, 255, 0.8);
+  --color-overlay-light-700: rgba(255, 255, 255, 0.7);
+  --color-overlay-light-600: rgba(255, 255, 255, 0.6);
+  --color-overlay-light-500: rgba(255, 255, 255, 0.5);
+  --color-overlay-light-400: rgba(255, 255, 255, 0.4);
+  --color-overlay-light-300: rgba(255, 255, 255, 0.3);
+  --color-overlay-light-200: rgba(255, 255, 255, 0.2);
+  --color-overlay-light-100: rgba(255, 255, 255, 0.1);
+  --color-overlay-light-050: rgba(255, 255, 255, 0.05);
+
+  /* ========================================
+    * SEMANTIC COLOR TOKENS
+    * ======================================== */
+
+  /* Background Tokens */
+  --color-bg-default-base-primary: var(--color-neutrals-000);
+  --color-bg-default-base-primary-hover: var(--color-slate-100);
+  --color-bg-default-base-secondary: var(--color-slate-050);
+  --color-bg-default-base-secondary-hover: var(--color-slate-200);
+  --color-bg-default-base-tertiary: var(--color-slate-100);
+  --color-bg-default-base-tertiary-hover: var(--color-slate-300);
+
+  --color-bg-default-neutral-primary: var(--color-neutrals-050);
+  --color-bg-default-neutral-primary-hover: var(--color-neutrals-100);
+  --color-bg-default-neutral-secondary: var(--color-neutrals-100);
+  --color-bg-default-neutral-secondary-hover: var(--color-neutrals-200);
+  --color-bg-default-neutral-tertiary: var(--color-neutrals-200);
+  --color-bg-default-neutral-tertiary-hover: var(--color-neutrals-300);
+
+  --color-bg-default-brand-primary: var(--color-brand-500);
+  --color-bg-default-brand-primary-hover: var(--color-brand-600);
+  --color-bg-default-brand-secondary: var(--color-brand-200);
+  --color-bg-default-brand-secondary-hover: var(--color-brand-300);
+  --color-bg-default-brand-tertiary: var(--color-brand-050);
+  --color-bg-default-brand-tertiary-hover: var(--color-brand-100);
+
+  --color-bg-default-positive-primary: var(--color-positive-500);
+  --color-bg-default-positive-primary-hover: var(--color-positive-600);
+  --color-bg-default-positive-secondary: var(--color-positive-200);
+  --color-bg-default-positive-secondary-hover: var(--color-positive-300);
+  --color-bg-default-positive-tertiary: var(--color-positive-050);
+  --color-bg-default-positive-tertiary-hover: var(--color-positive-100);
+
+  --color-bg-default-danger-primary: var(--color-danger-500);
+  --color-bg-default-danger-primary-hover: var(--color-danger-600);
+  --color-bg-default-danger-secondary: var(--color-danger-200);
+  --color-bg-default-danger-secondary-hover: var(--color-danger-300);
+  --color-bg-default-danger-tertiary: var(--color-danger-050);
+  --color-bg-default-danger-tertiary-hover: var(--color-danger-100);
+
+  --color-bg-default-warning-primary: var(--color-warning-500);
+  --color-bg-default-warning-primary-hover: var(--color-warning-600);
+  --color-bg-default-warning-secondary: var(--color-warning-200);
+  --color-bg-default-warning-secondary-hover: var(--color-warning-300);
+  --color-bg-default-warning-tertiary: var(--color-warning-050);
+  --color-bg-default-warning-tertiary-hover: var(--color-warning-100);
+
+  --color-bg-default-disable-primary: var(--color-neutrals-050);
+
+  /* Input Backgrounds */
+  --color-bg-input-normal: var(--color-neutrals-000);
+  --color-bg-input-disable: var(--color-slate-050);
+
+  /* Button Backgrounds */
+  --color-bg-button-primary-enable: var(--color-slate-700);
+  --color-bg-button-primary-hover: var(--color-slate-800);
+  --color-bg-button-primary-disable: var(--color-slate-100);
+  --color-bg-button-primary-destructive-enable: var(--color-danger-500);
+  --color-bg-button-primary-destructive-hover: var(--color-danger-600);
+  --color-bg-button-primary-destructive-disable: var(--color-danger-100);
+
+  --color-bg-button-secondary-enable: var(--color-neutrals-000);
+  --color-bg-button-secondary-hover: var(--color-slate-100);
+  --color-bg-button-secondary-disable: var(--color-neutrals-000);
+  --color-bg-button-secondary-destructive-enable: var(--color-neutrals-000);
+  --color-bg-button-secondary-destructive-hover: var(--color-danger-050);
+  --color-bg-button-secondary-destructive-disable: var(--color-neutrals-000);
+
+  --color-bg-button-tertiary-enable: var(--color-slate-100);
+  --color-bg-button-tertiary-hover: var(--color-slate-200);
+  --color-bg-button-tertiary-disable: var(--color-slate-050);
+  --color-bg-button-tertiary-destructive-enable: var(--color-danger-050);
+  --color-bg-button-tertiary-destructive-hover: var(--color-danger-100);
+  --color-bg-button-tertiary-destructive-disable: var(--color-danger-050);
+
+  --color-bg-button-ghost-enable: var(--color-neutrals-000);
+  --color-bg-button-ghost-hover: var(--color-slate-100);
+  --color-bg-button-ghost-disable: var(--color-neutrals-000);
+  --color-bg-button-ghost-destructive-enable: var(--color-neutrals-000);
+  --color-bg-button-ghost-destructive-hover: var(--color-danger-050);
+  --color-bg-button-ghost-destructive-disable: var(--color-neutrals-000);
+
+  /* Border Tokens */
+  --color-border-input-default: var(--color-slate-200);
+  --color-border-input-hover: var(--color-slate-400);
+  --color-border-input-focus: var(--color-slate-800);
+  --color-border-input-disable: var(--color-slate-100);
+  --color-border-input-destructive: var(--color-danger-500);
+
+  --color-outline-input-focus: var(--color-brand-500);
+  --color-outline-input-destructive: var(--color-danger-500);
+
+  --color-border-button-secondary-enable: var(--color-slate-200);
+  --color-border-button-secondary-disable: var(--color-slate-100);
+  --color-border-button-secondary-destructive-enable: var(--color-danger-200);
+  --color-border-button-secondary-destructive-disable: var(--color-danger-100);
+
+  --color-border-default-base-primary: var(--color-slate-100);
+  --color-border-default-base-secondary: var(--color-slate-200);
+  --color-border-default-base-tertiary: var(--color-slate-300);
+  --color-border-default-base-inverse-secondary: var(--color-slate-700);
+
+  --color-border-default-neutral-primary: var(--color-neutrals-100);
+  --color-border-default-neutral-secondary: var(--color-neutrals-200);
+  --color-border-default-neutral-tertiary: var(--color-neutrals-300);
+
+  --color-border-default-brand-primary: var(--color-brand-600);
+  --color-border-default-brand-secondary: var(--color-brand-300);
+  --color-border-default-brand-tertiary: var(--color-brand-300);
+
+  --color-border-default-positive-primary: var(--color-positive-600);
+  --color-border-default-positive-secondary: var(--color-positive-600);
+  --color-border-default-positive-tertiary: var(--color-positive-500);
+
+  --color-border-default-danger-primary: var(--color-danger-700);
+  --color-border-default-danger-secondary: var(--color-danger-600);
+  --color-border-default-danger-tertiary: var(--color-danger-500);
+
+  --color-border-default-warning-primary: var(--color-warning-600);
+  --color-border-default-warning-secondary: var(--color-warning-600);
+  --color-border-default-warning-tertiary: var(--color-warning-500);
+
+  --color-border-default-disable-primary: var(--color-slate-100);
+
+  /* Text Tokens */
+  --color-text-input-normal: var(--color-slate-800);
+  --color-text-input-disable: var(--color-slate-300);
+  --color-text-input-placeholder: var(--color-slate-500);
+  --color-text-input-destructive: var(--color-danger-500);
+
+  --color-text-button-primary-enable: var(--color-neutrals-000);
+  --color-text-button-primary-disable: var(--color-slate-300);
+  --color-text-button-primary-destructive-enable: var(--color-neutrals-000);
+  --color-text-button-primary-destructive-disable: var(--color-neutrals-000);
+
+  --color-text-button-secondary-enable: var(--color-slate-800);
+  --color-text-button-secondary-disable: var(--color-slate-300);
+  --color-text-button-secondary-destructive-enable: var(--color-danger-500);
+  --color-text-button-secondary-destructive-disable: var(--color-danger-200);
+
+  --color-text-button-tertiary-enable: var(--color-slate-800);
+  --color-text-button-tertiary-disable: var(--color-slate-300);
+  --color-text-button-tertiary-destructive-enable: var(--color-danger-500);
+  --color-text-button-tertiary-destructive-disable: var(--color-danger-200);
+
+  --color-text-button-ghost-enable: var(--color-slate-800);
+  --color-text-button-ghost-disable: var(--color-slate-300);
+  --color-text-button-ghost-destructive-enable: var(--color-danger-500);
+  --color-text-button-ghost-destructive-disable: var(--color-danger-200);
+
+  --color-text-button-link-enable: var(--color-slate-800);
+  --color-text-button-link-disable: var(--color-slate-300);
+  --color-text-button-link-destructive-enable: var(--color-danger-500);
+  --color-text-button-link-destructive-hover: var(--color-danger-600);
+  --color-text-button-link-destructive-disable: var(--color-danger-200);
+
+  --color-text-default-base-primary: var(--color-slate-900);
+  --color-text-default-base-secondary: var(--color-slate-700);
+  --color-text-default-base-tertiary: var(--color-slate-500);
+  --color-text-default-base-inverse-primary: var(--color-neutrals-000);
+  --color-text-default-base-on-base-primary: var(--color-slate-800);
+  --color-text-default-base-on-base-secondary: var(--color-slate-700);
+  --color-text-default-base-on-base-tertiary: var(--color-slate-800);
+
+  --color-text-default-neutral-primary: var(--color-neutrals-1000);
+  --color-text-default-neutral-secondary: var(--color-neutrals-700);
+  --color-text-default-neutral-tertiary: var(--color-neutrals-500);
+  --color-text-default-neutral-on-neutral-primary: var(--color-neutrals-800);
+  --color-text-default-neutral-on-neutral-secondary: var(--color-neutrals-800);
+  --color-text-default-neutral-on-neutral-tertiary: var(--color-neutrals-900);
+
+  --color-text-default-brand-primary: var(--color-brand-500);
+  --color-text-default-brand-secondary: var(--color-brand-700);
+  --color-text-default-brand-tertiary: var(--color-brand-800);
+  --color-text-default-brand-on-brand-primary: var(--color-brand-900);
+  --color-text-default-brand-on-brand-secondary: var(--color-brand-800);
+  --color-text-default-brand-on-brand-tertiary: var(--color-brand-700);
+
+  --color-text-default-positive-primary: var(--color-positive-500);
+  --color-text-default-positive-secondary: var(--color-positive-700);
+  --color-text-default-positive-tertiary: var(--color-positive-800);
+  --color-text-default-positive-on-positive-primary: var(--color-positive-800);
+  --color-text-default-positive-on-positive-secondary: var(
+    --color-positive-800
+  );
+  --color-text-default-positive-on-positive-tertiary: var(--color-positive-800);
+
+  --color-text-default-danger-primary: var(--color-danger-500);
+  --color-text-default-danger-secondary: var(--color-danger-600);
+  --color-text-default-danger-tertiary: var(--color-danger-800);
+  --color-text-default-danger-on-danger-primary: var(--color-neutrals-000);
+  --color-text-default-danger-on-danger-secondary: var(--color-neutrals-000);
+  --color-text-default-danger-on-danger-tertiary: var(--color-danger-500);
+
+  --color-text-default-warning-primary: var(--color-warning-500);
+  --color-text-default-warning-secondary: var(--color-warning-700);
+  --color-text-default-warning-tertiary: var(--color-warning-800);
+  --color-text-default-warning-on-warning-primary: var(--color-warning-800);
+  --color-text-default-warning-on-warning-secondary: var(--color-warning-800);
+  --color-text-default-warning-on-warning-tertiary: var(--color-warning-800);
+
+  --color-text-default-disable-primary: var(--color-slate-200);
+  --color-text-default-disable-on-disable-primary: var(--color-slate-200);
+
+  /* Icon Tokens (same as text tokens) */
+  --color-icon-input-default: var(--color-slate-400);
+  --color-icon-input-disable: var(--color-slate-300);
+
+  --color-icon-button-primary-enable: var(--color-neutrals-000);
+  --color-icon-button-primary-disable: var(--color-slate-300);
+  --color-icon-button-primary-destructive-enable: var(--color-neutrals-000);
+  --color-icon-button-primary-destructive-disable: var(--color-neutrals-000);
+
+  --color-icon-button-secondary-enable: var(--color-slate-800);
+  --color-icon-button-secondary-disable: var(--color-slate-300);
+  --color-icon-button-secondary-destructive-enable: var(--color-danger-500);
+  --color-icon-button-secondary-destructive-disable: var(--color-danger-200);
+
+  --color-icon-button-tertiary-enable: var(--color-slate-800);
+  --color-icon-button-tertiary-disable: var(--color-slate-300);
+  --color-icon-button-tertiary-destructive-enable: var(--color-danger-500);
+  --color-icon-button-tertiary-destructive-disable: var(--color-danger-200);
+
+  --color-icon-button-ghost-enable: var(--color-slate-800);
+  --color-icon-button-ghost-disable: var(--color-slate-300);
+  --color-icon-button-ghost-destructive-enable: var(--color-danger-500);
+  --color-icon-button-ghost-destructive-disable: var(--color-danger-200);
+
+  --color-icon-button-link-enable: var(--color-slate-800);
+  --color-icon-button-link-disable: var(--color-slate-300);
+  --color-icon-button-link-destructive-enable: var(--color-danger-500);
+  --color-icon-button-link-destructive-hover: var(--color-danger-600);
+  --color-icon-button-link-destructive-disable: var(--color-danger-200);
+
+  --color-icon-default-base-primary: var(--color-slate-900);
+  --color-icon-default-base-secondary: var(--color-slate-700);
+  --color-icon-default-base-tertiary: var(--color-slate-500);
+  --color-icon-default-base-on-base-primary: var(--color-slate-800);
+  --color-icon-default-base-on-base-secondary: var(--color-slate-700);
+  --color-icon-default-base-on-base-tertiary: var(--color-slate-800);
+
+  --color-icon-default-neutral-primary: var(--color-neutrals-1000);
+  --color-icon-default-neutral-secondary: var(--color-neutrals-700);
+  --color-icon-default-neutral-tertiary: var(--color-neutrals-500);
+  --color-icon-default-neutral-on-neutral-primary: var(--color-neutrals-000);
+  --color-icon-default-neutral-on-neutral-secondary: var(--color-neutrals-700);
+  --color-icon-default-neutral-on-neutral-tertiary: var(--color-neutrals-600);
+
+  --color-icon-default-brand-primary: var(--color-brand-500);
+  --color-icon-default-brand-secondary: var(--color-brand-700);
+  --color-icon-default-brand-tertiary: var(--color-brand-800);
+  --color-icon-default-brand-on-brand-primary: var(--color-brand-900);
+  --color-icon-default-brand-on-brand-secondary: var(--color-brand-800);
+  --color-icon-default-brand-on-brand-tertiary: var(--color-brand-700);
+
+  --color-icon-default-positive-primary: var(--color-positive-500);
+  --color-icon-default-positive-secondary: var(--color-positive-700);
+  --color-icon-default-positive-tertiary: var(--color-positive-800);
+  --color-icon-default-positive-on-positive-primary: var(--color-positive-800);
+  --color-icon-default-positive-on-positive-secondary: var(
+    --color-positive-800
+  );
+  --color-icon-default-positive-on-positive-tertiary: var(--color-positive-800);
+
+  --color-icon-default-danger-primary: var(--color-danger-500);
+  --color-icon-default-danger-secondary: var(--color-danger-600);
+  --color-icon-default-danger-tertiary: var(--color-danger-800);
+  --color-icon-default-danger-on-danger-primary: var(--color-neutrals-000);
+  --color-icon-default-danger-on-danger-secondary: var(--color-neutrals-000);
+  --color-icon-default-danger-on-danger-tertiary: var(--color-danger-500);
+
+  --color-icon-default-warning-primary: var(--color-warning-500);
+  --color-icon-default-warning-secondary: var(--color-warning-700);
+  --color-icon-default-warning-tertiary: var(--color-warning-800);
+  --color-icon-default-warning-on-warning-primary: var(--color-warning-800);
+  --color-icon-default-warning-on-warning-secondary: var(--color-warning-800);
+  --color-icon-default-warning-on-warning-tertiary: var(--color-warning-800);
+
+  --color-icon-default-info-primary: var(--color-blue-500);
+
+  --color-icon-default-disable-primary: var(--color-slate-200);
+  --color-icon-default-disable-on-disable-primary: var(--color-slate-200);
+
+  /* ========================================
+    * ALERT
+    * ======================================== */
+
+  /* Alert Backgrounds - Primary */
+  --color-bg-alert-primary-neutral: var(--color-slate-050);
+  --color-bg-alert-primary-success: var(--color-positive-050);
+  --color-bg-alert-primary-danger: var(--color-danger-050);
+  --color-bg-alert-primary-warning: var(--color-warning-050);
+  --color-bg-alert-primary-info: var(--color-blue-050);
+  --color-bg-alert-primary-creative: var(--color-purple-050);
+  --color-bg-alert-primary-dynamic: var(--color-orange-050);
+  --color-bg-alert-primary-playful: var(--color-pink-050);
+
+  /* Alert Text - Primary */
+  --color-text-alert-primary-neutral: var(--color-slate-800);
+  --color-text-alert-primary-success: var(--color-positive-800);
+  --color-text-alert-primary-danger: var(--color-danger-600);
+  --color-text-alert-primary-warning: var(--color-warning-800);
+  --color-text-alert-primary-info: var(--color-blue-800);
+  --color-text-alert-primary-creative: var(--color-purple-800);
+  --color-text-alert-primary-dynamic: var(--color-orange-800);
+  --color-text-alert-primary-playful: var(--color-pink-800);
+
+  /* Alert Text - Ghost */
+  --color-text-alert-ghost-neutral: var(--color-slate-800);
+  --color-text-alert-ghost-success: var(--color-positive-800);
+  --color-text-alert-ghost-danger: var(--color-danger-500);
+  --color-text-alert-ghost-warning: var(--color-warning-700);
+  --color-text-alert-ghost-info: var(--color-blue-700);
+  --color-text-alert-ghost-creative: var(--color-purple-700);
+  --color-text-alert-ghost-dynamic: var(--color-orange-700);
+  --color-text-alert-ghost-playful: var(--color-pink-600);
+
+  /* Alert Icon - Primary */
+  --color-icon-alert-primary-neutral: var(--color-slate-800);
+  --color-icon-alert-primary-success: var(--color-positive-800);
+  --color-icon-alert-primary-danger: var(--color-danger-600);
+  --color-icon-alert-primary-warning: var(--color-warning-800);
+  --color-icon-alert-primary-info: var(--color-blue-800);
+  --color-icon-alert-primary-creative: var(--color-purple-800);
+  --color-icon-alert-primary-dynamic: var(--color-orange-800);
+  --color-icon-alert-primary-playful: var(--color-pink-800);
+
+  /* Alert Icon - Ghost */
+  --color-icon-alert-ghost-neutral: var(--color-slate-800);
+  --color-icon-alert-ghost-success: var(--color-positive-800);
+  --color-icon-alert-ghost-danger: var(--color-danger-500);
+  --color-icon-alert-ghost-warning: var(--color-warning-700);
+  --color-icon-alert-ghost-info: var(--color-blue-700);
+  --color-icon-alert-ghost-creative: var(--color-purple-700);
+  --color-icon-alert-ghost-dynamic: var(--color-orange-700);
+  --color-icon-alert-ghost-playful: var(--color-pink-600);
+
+  /* Focus Ring */
+  --color-focus-ring-button-primary: var(--color-slate-800);
+  --color-focus-ring-button-destructive: var(--color-danger-500);
+
+  /* ========================================
+    * SPACING
+    * ======================================== */
+
+  /* Use tailwind defaults */
+
+  /* ========================================
+    * BORDER RADIUS
+    * ======================================== */
+
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* ========================================
+    * SHADOWS
+    * ======================================== */
+
+  --shadow-1: 0 0.0625rem 0.125rem 0 var(--color-overlay-dark-050);
+  --shadow-2:
+    0 0.0625rem 0.125rem 0 var(--color-overlay-dark-050),
+    0 0.0625rem 0.125rem 0 var(--color-overlay-dark-050);
+  --shadow-3:
+    0 0.25rem 0.375rem -0.0625rem var(--color-overlay-dark-100),
+    0 0.125rem 0.25rem -0.0625rem var(--color-overlay-dark-050);
+  --shadow-4:
+    0 0.625rem 0.9375rem -0.1875rem var(--color-overlay-dark-100),
+    0 0.25rem 0.375rem -0.125rem var(--color-overlay-dark-050);
+  --shadow-5:
+    0 1.25rem 1.5625rem -0.3125rem var(--color-overlay-dark-100),
+    0 0.625rem 0.625rem -0.3125rem var(--color-overlay-dark-050);
+  --shadow-6: 0 1.5625rem 3.125rem -0.75rem var(--color-overlay-dark-200);
+
+  /* Semantic Shadows */
+  --shadow-xs: var(--shadow-1);
+  --shadow-sm: var(--shadow-2);
+  --shadow-md: var(--shadow-3);
+  --shadow-lg: var(--shadow-4);
+  --shadow-xl: var(--shadow-5);
+  --shadow-2xl: var(--shadow-6);
+
+  /* ========================================
+    * EASINGS / TRANSITIONS
+    * ======================================== */
+
+  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ========================================
+    * Z-INDEX
+    * ======================================== */
+
+  --z-index-modal: 1005;
+
+  /* ========================================
+    * BREAKPOINTS
+    * ======================================== */
+
+  --breakpoint-sm: 30rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 85.375rem;
+  --breakpoint-3xl: 100rem;
+}
+
+/* ========================================
+ * BASE LAYER - Global Styles
+ * ======================================== */
+
+@layer base {
+  :root {
+    --text-underline-offset: 0.3em;
+  }
+
+  @keyframes dotFade {
+    0% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes toast-slide-in {
+    from {
+      opacity: 0;
+      transform: translateY(1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes toast-slide-out {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(1rem);
+    }
+  }
+
+  html {
+    /* body.md textStyle from Panda → text-base */
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+    font-family: var(--font-family-body);
+    font-weight: 400;
+    color: var(--color-text-default-base-primary);
+  }
+
+  a {
+    color: var(--color-text-default-base-primary);
+    fill: var(--color-text-default-base-primary);
+    text-decoration: underline;
+    text-underline-offset: var(--text-underline-offset);
+  }
+
+  a:hover,
+  a:focus {
+    color: var(--color-text-default-base-primary);
+    fill: var(--color-text-default-base-primary);
+  }
+
+  a:active {
+    color: var(--color-text-default-base-primary);
+    fill: var(--color-text-default-base-primary);
+  }
+
+  b,
+  strong {
+    font-weight: 600;
+  }
+
+  em,
+  i {
+    font-style: italic;
+  }
+}