@plexui/ui 0.19.1 → 0.20.0

package/dist/types/components/Transition/index.d.ts

@@ -1,5 +1,5 @@
-export { Animate, type AnimateProps } from "./Animate";
-export { AnimateLayout, type AnimateLayoutProps } from "./AnimateLayout";
-export { AnimateLayoutGroup, type AnimateLayoutGroupProps } from "./AnimateLayoutGroup";
-export { SlotTransitionGroup, type SlotTransitionGroupProps } from "./SlotTransitionGroup";
-export { TransitionGroup, type TransitionGroupProps } from "./TransitionGroup";
+export { Animate, type AnimateProps } from "./Animate.js";
+export { AnimateLayout, type AnimateLayoutProps } from "./AnimateLayout.js";
+export { AnimateLayoutGroup, type AnimateLayoutGroupProps } from "./AnimateLayoutGroup.js";
+export { SlotTransitionGroup, type SlotTransitionGroupProps } from "./SlotTransitionGroup.js";
+export { TransitionGroup, type TransitionGroupProps } from "./TransitionGroup.js";

package/dist/types/components/UIProvider/index.d.ts

@@ -1 +1 @@
-export { UIProvider } from "./UIProvider";
+export { UIProvider } from "./UIProvider.js";

package/dist/types/global.d.ts

@@ -4,13 +4,17 @@ declare global {
     Breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
   }
 
+  // Augment PlexUIConfig (the name the docs use) or PlexUIOverrides to
+  // override DefaultConfig, e.g. `interface PlexUIConfig { LinkComponent: typeof Link }`
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface PlexUIConfig {}
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   interface PlexUIOverrides {}
 
   // Utility type to merge defaults with overrides. The override keys take precedence.
   type MergeOverrides<Defaults, Overrides> = Omit<Defaults, keyof Overrides> & Overrides
 
-  type Config = MergeOverrides<DefaultConfig, PlexUIOverrides>
+  type Config = MergeOverrides<DefaultConfig, PlexUIConfig & PlexUIOverrides>
 
   namespace PlexUI {
     export type LinkComponent = Config["LinkComponent"]

package/dist/types/lib/constants.d.ts

@@ -1,2 +1,2 @@
-export { isDev, isTest } from "./environment";
+export { isDev, isTest } from "./environment.js";
 export declare const EMAIL_REGEX: RegExp;

package/dist/types/lib/helpers.d.ts

@@ -33,9 +33,9 @@ export declare const sleep: (ms: number) => Promise<void>;
  * groupByOrdered(people, "team")
  * // => [ { team: "infra", items:[...] }, { team:"design", items:[...] }, ... ]
  */
-export declare function groupByProperty<T extends object, K extends keyof T, F = T[K]>(items: T[], key: K, format?: (raw: T[K], item: T) => F): ({ [P in K]: F; } & {
+export declare function groupByProperty<T extends object, K extends keyof T, F = T[K]>(items: T[], key: K, format?: (raw: T[K], item: T) => F): ({
+    [P in K]: F;
+} & {
     items: T[];
-} extends infer T_1 extends Record<string, unknown> ? { [K_1 in keyof T_1]: ({ [P in K]: F; } & {
-    items: T[];
-})[K_1]; } : never)[];
+})[];
 export {};

package/dist/types/lib/theme.d.ts

@@ -1,4 +1,4 @@
 export type DocumentTheme = "light" | "dark";
-export declare function useDocumentTheme(): "dark" | "light";
+export declare function useDocumentTheme(): DocumentTheme;
 export declare function getDocumentTheme(): "dark" | "light";
 export declare function applyDocumentTheme(theme: "light" | "dark"): void;

package/dist/types/types.d.ts

@@ -1,15 +1,2 @@
-export type Size = "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
-export type Sizes<T extends Size = Size> = T;
-export type ControlSize = Sizes<"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl">;
-export type Radius = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
-export type Radii<T extends Radius = Radius> = T;
-export type TextColor = "base" | "emphasis" | "secondary" | "tertiary";
-export type TextColors<T extends TextColor = TextColor> = T;
-export type SemanticColor = "primary" | "secondary" | "danger" | "success" | "warning" | "caution" | "discovery" | "info";
-export type SemanticColors<T extends SemanticColor = SemanticColor> = T;
-export type Variant = "solid" | "soft" | "outline" | "ghost";
-export type Variants<T extends Variant = Variant> = T;
-export type Alignment = "start" | "center" | "end";
-export type Alignments<T extends Alignment = Alignment> = T;
-export type FontWeight = "inherit" | "normal" | "medium" | "semibold" | "bold";
-export type FontWeights<T extends FontWeight = FontWeight> = T;
+/// <reference path="./global.d.ts" preserve="true" />
+export type * from "@plexui/styles/types";

package/dist/types/vite/index.d.ts

@@ -1,55 +1,2 @@
-/**
- * Vite plugin for Plex UI.
- *
- * Importing `@plexui/ui/vite` and adding `plexui()` to your `plugins`
- * array eliminates every install-time gotcha documented in
- * /docs/installation:
- *
- *   1. Pins `css.transformer = 'postcss'` so Lightning CSS doesn't
- *      reorder cascade layers strict-by-first-occurrence.
- *   2. Pins `build.cssMinify = 'esbuild'` so Vite 8's Lightning CSS
- *      minifier doesn't strip the bare `@layer` declaration.
- *   3. Injects `<style>@layer theme, base, components, utilities;</style>`
- *      into <head> as a runtime failsafe — the browser sees the layer
- *      order before any stylesheet rule arrives, regardless of how the
- *      bundler shuffles things.
- *
- * Usage:
- *
- *     // vite.config.ts
- *     import { defineConfig } from 'vite';
- *     import plexui from '@plexui/ui/vite';
- *
- *     export default defineConfig({
- *       plugins: [plexui()],
- *     });
- *
- * That replaces the manual `@layer …;` declaration in main.css and the
- * manual `css.transformer` / `build.cssMinify` overrides. Your global
- * stylesheet still needs `@import "@plexui/ui/css"` and `@source` —
- * those wire the runtime tokens and Tailwind class-extraction, which a
- * Vite plugin can't do for you.
- */
-type ViteLikePlugin = {
-    name: string;
-    enforce?: "pre" | "post";
-    config?: () => {
-        css?: {
-            transformer?: "postcss" | "lightningcss";
-        };
-        build?: {
-            cssMinify?: boolean | "esbuild" | "lightningcss";
-        };
-    };
-    transformIndexHtml?: (html: string) => string;
-};
-export type PlexUIPluginOptions = {
-    /**
-     * Inject the cascade-layer `<style>` tag into <head> as a runtime
-     * failsafe. Defaults to `true`. Disable only if you've already added
-     * the equivalent `<style>` tag to your `index.html` by hand.
-     */
-    injectLayerOrder?: boolean;
-};
-export default function plexui(options?: PlexUIPluginOptions): ViteLikePlugin;
-export {};
+export { default } from "@plexui/styles/vite";
+export type { PlexUIPluginOptions } from "@plexui/styles/vite";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",
@@ -38,6 +38,7 @@
     "./styles/variables-tailwind-theme.css": "./dist/es/styles/variables-tailwind-theme.css",
     "./styles/variables-tokens-root.css": "./dist/es/styles/variables-tokens-root.css",
     "./styles/variables-components.css": "./dist/es/styles/variables-components.css",
+    "./styles/tailwind-utilities.css": "./dist/es/styles/tailwind-utilities.css",
     "./components/*": {
       "types": "./dist/types/components/*/index.d.ts",
       "default": "./dist/es/components/*/index.js"
@@ -76,16 +77,16 @@
     "build:js": "tsc -p tsconfig.build.json",
     "build:css": "node ./scripts/build-css.mjs",
     "dev:js": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
-    "dev:css": "node ./scripts/build-css.mjs --watch",
-    "dev": "npm run build:clean && npm run build:js && npm run build:css && npm run build:assets && (npm run dev:js & npm run dev:css & wait)",
+    "dev": "npm run build:clean && npm run build:js && npm run build:css && npm run build:assets && npm run dev:js",
     "build:assets": "node -e \"const fs=require('fs'),p=require('path');function c(s,d){fs.readdirSync(s,{withFileTypes:true}).forEach(e=>{const sp=p.join(s,e.name),dp=p.join(d,e.name);if(e.isDirectory()){c(sp,dp)}else if(e.name.endsWith('.d.ts')){fs.mkdirSync(d,{recursive:true});fs.copyFileSync(sp,dp)}})}c('src','dist/types')\"",
-    "build": "npm run build:clean && npm run build:js && npm run build:css && npm run build:assets",
+    "build": "npm run build:clean && npm run build:js && npm run build:css && npm run build:assets && npm run build:finalize",
+    "build:finalize": "node ./scripts/finalize-dist.mjs",
     "prepublishOnly": "npm run build",
     "postpublish": "npm run build"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwindcss": "^4.0.10",
     "vite": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
@@ -98,7 +99,9 @@
     "@maskito/core": "^5.2.2",
     "@maskito/kit": "^5.2.2",
     "@maskito/react": "^5.2.2",
+    "@plexui/styles": "^0.1.0",
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/table-core": "^8.21.3",
     "@tiptap/core": "^3.21.0",
     "@tiptap/extension-bold": "^3.21.0",
     "@tiptap/extension-bullet-list": "^3.21.0",
@@ -114,6 +117,7 @@
     "@tiptap/extension-text": "^3.21.0",
     "@tiptap/pm": "^3.21.0",
     "@tiptap/react": "^3.21.0",
+    "@types/luxon": "3.7.1",
     "clsx": "^2.1.1",
     "lodash": "4.17.21",
     "luxon": "3.7.1",
@@ -132,21 +136,9 @@
     "usehooks-ts": "^3.1.1"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "4.0.17",
     "@types/lodash": "4.17.16",
-    "@types/luxon": "^3.7.1",
     "@types/mdast": "^4.0.4",
-    "@types/postcss-functions": "4.0.4",
-    "@types/postcss-mixins": "9.0.6",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "autoprefixer": "10.4.20",
-    "postcss": "^8",
-    "postcss-functions": "^4.0.2",
-    "postcss-mixins": "^11.0.3",
-    "postcss-nested": "^7.0.2",
-    "postcss-selector-parser": "7.1.0",
-    "postcss-value-parser": "4.2.0",
-    "tailwindcss": "4.0.10",
     "typescript": "5.7.3"
   }
 }

package/dist/es/components/Accordion/Accordion.module.css

@@ -1,89 +0,0 @@
-@layer components {.Root {
-  width: 100%;
-}.Item {
-  border-bottom: var(--accordion-item-divider-width) solid
-    var(--accordion-item-divider-color);
-}
-
-  .Item:last-child {
-    border-bottom: 0;
-  }
-
-  .Item[data-disabled] {
-    opacity: var(--accordion-item-disabled-opacity);
-  }.Header {
-  display: flex;
-  margin: 0;
-}.Trigger {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--accordion-trigger-gap);
-  width: 100%;
-  padding: var(--accordion-trigger-padding-block) 0;
-  border: 0;
-  background: transparent;
-  font-family: inherit;
-  font-size: var(--accordion-trigger-font-size);
-  font-weight: var(--accordion-trigger-font-weight);
-  line-height: var(--accordion-trigger-line-height);
-  text-align: left;
-  color: var(--accordion-trigger-color);
-  cursor: pointer;
-  outline: none;
-  transition: color var(--accordion-transition-duration)
-    var(--accordion-transition-ease);
-}
-
-  .Trigger:focus-visible {
-    border-radius: var(--accordion-trigger-focus-radius);
-    outline: 2px solid var(--accordion-trigger-focus-ring-color);
-    outline-offset: 2px;
-  }
-
-  .Trigger:disabled,
-  .Trigger[data-disabled] {
-    cursor: not-allowed;
-  }.Chevron {
-  flex-shrink: 0;
-  width: var(--accordion-icon-size);
-  height: var(--accordion-icon-size);
-  color: var(--accordion-icon-color);
-  transition: transform var(--accordion-transition-duration)
-    var(--accordion-transition-ease);
-}.Trigger[data-state="open"] .Chevron {
-  transform: rotate(180deg);
-}.Content {
-  overflow: hidden;
-  font-size: var(--accordion-content-font-size);
-  line-height: var(--accordion-content-line-height);
-  color: var(--accordion-content-color);
-}
-
-  .Content[data-state="open"] {
-    animation: accordion-down var(--accordion-transition-duration)
-      var(--accordion-transition-ease);
-  }
-
-  .Content[data-state="closed"] {
-    animation: accordion-up var(--accordion-transition-duration)
-      var(--accordion-transition-ease);
-  }.ContentInner {
-  padding-bottom: var(--accordion-content-padding-bottom);
-}@keyframes accordion-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--radix-accordion-content-height);
-  }
-}@keyframes accordion-up {
-  from {
-    height: var(--radix-accordion-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
-}

package/dist/es/components/Alert/Alert.module.css

@@ -1,187 +0,0 @@
-@layer components {.Alert {
-  display: flex;
-  align-items: center;
-  gap: var(--alert-gap);
-  width: 100%;
-  padding: var(--alert-gutter);
-  border-radius: var(--alert-border-radius);
-  font-size: var(--alert-font-size);
-  line-height: var(--alert-line-height);
-}
-
-  .Alert:where([data-actions-placement="bottom"]) {
-    align-items: flex-start;
-  }
-
-  /* =============================================
-    Variants
-  ============================================= */
-  .Alert[data-variant="soft"] {
-    background-color: var(--alert-background-color);
-    box-shadow: 0 0 0 1px var(--alert-border-color) inset;
-    color: var(--alert-text-color);
-  }
-
-    .Alert[data-variant="soft"]:where([data-color="primary"]) {
-      --alert-background-color: var(--color-background-primary-surface);
-      --alert-border-color: var(--color-border-primary-surface);
-      --alert-text-color: var(--color-text);
-    }
-
-    .Alert[data-variant="soft"]:where([data-color="success"]) {
-      --alert-background-color: var(--color-background-success-surface);
-      --alert-border-color: var(--color-border-success-surface);
-      --alert-text-color: var(--color-text-success-surface);
-    }
-
-    .Alert[data-variant="soft"]:where([data-color="warning"]) {
-      --alert-background-color: var(--color-background-warning-surface);
-      --alert-border-color: var(--color-border-warning-surface);
-      --alert-text-color: var(--color-text-warning-surface);
-    }
-
-    .Alert[data-variant="soft"]:where([data-color="caution"]) {
-      --alert-background-color: var(--color-background-caution-surface);
-      --alert-border-color: var(--color-border-caution-surface);
-      --alert-text-color: var(--color-text-caution-surface);
-    }
-
-    .Alert[data-variant="soft"]:where([data-color="danger"]) {
-      --alert-background-color: var(--color-background-danger-surface);
-      --alert-border-color: var(--color-border-danger-surface);
-      --alert-text-color: var(--color-text-danger-surface);
-    }
-
-    .Alert[data-variant="soft"]:where([data-color="info"]) {
-      --alert-background-color: var(--color-background-info-surface);
-      --alert-border-color: var(--color-border-info-surface);
-      --alert-text-color: var(--color-text-info-surface);
-    }
-
-    .Alert[data-variant="soft"]:where([data-color="discovery"]) {
-      --alert-background-color: var(--color-background-discovery-surface);
-      --alert-border-color: var(--color-border-discovery-surface);
-      --alert-text-color: var(--color-text-discovery-surface);
-    }
-
-  .Alert[data-variant="solid"] {
-    background-color: var(--alert-background-color);
-    color: var(--alert-text-color);
-  }
-
-    .Alert[data-variant="solid"]:where([data-color="primary"]) {
-      --alert-background-color: var(--color-background-primary-solid);
-      --alert-text-color: var(--color-text-primary-solid);
-    }
-
-    .Alert[data-variant="solid"]:where([data-color="success"]) {
-      --alert-background-color: var(--color-background-success-solid);
-      --alert-text-color: var(--color-text-success-solid);
-    }
-
-    .Alert[data-variant="solid"]:where([data-color="warning"]) {
-      --alert-background-color: var(--color-background-warning-solid);
-      --alert-text-color: var(--color-text-warning-solid);
-    }
-
-    .Alert[data-variant="solid"]:where([data-color="caution"]) {
-      --alert-background-color: var(--color-background-caution-solid);
-      --alert-text-color: var(--color-text-caution-solid);
-    }
-
-    .Alert[data-variant="solid"]:where([data-color="danger"]) {
-      --alert-background-color: var(--color-background-danger-solid);
-      --alert-text-color: var(--color-text-danger-solid);
-    }
-
-    .Alert[data-variant="solid"]:where([data-color="info"]) {
-      --alert-background-color: var(--color-background-info-solid);
-      --alert-text-color: var(--color-text-info-solid);
-    }
-
-    .Alert[data-variant="solid"]:where([data-color="discovery"]) {
-      --alert-background-color: var(--color-background-discovery-solid);
-      --alert-text-color: var(--color-text-discovery-solid);
-    }
-
-  .Alert[data-variant="outline"] {
-    box-shadow: 0 0 0 1px var(--alert-border-color) inset;
-    color: var(--alert-text-color);
-  }
-
-    .Alert[data-variant="outline"]:where([data-color="primary"]) {
-      --alert-border-color: var(--color-border);
-      --alert-text-color: var(--color-text);
-    }
-
-    .Alert[data-variant="outline"]:where([data-color="success"]) {
-      --alert-border-color: var(--color-border-success-outline);
-      --alert-text-color: var(--color-text-success-outline);
-    }
-
-    .Alert[data-variant="outline"]:where([data-color="warning"]) {
-      --alert-border-color: var(--color-border-warning-outline);
-      --alert-text-color: var(--color-text-warning-outline);
-    }
-
-    .Alert[data-variant="outline"]:where([data-color="caution"]) {
-      --alert-border-color: var(--color-border-caution-outline);
-      --alert-text-color: var(--color-text-caution-outline);
-    }
-
-    .Alert[data-variant="outline"]:where([data-color="danger"]) {
-      --alert-border-color: var(--color-border-danger-outline);
-      --alert-text-color: var(--color-text-danger-outline);
-    }
-
-    .Alert[data-variant="outline"]:where([data-color="info"]) {
-      --alert-border-color: var(--color-border-info-outline);
-      --alert-text-color: var(--color-text-info-outline);
-    }
-
-    .Alert[data-variant="outline"]:where([data-color="discovery"]) {
-      --alert-border-color: var(--color-border-discovery-outline);
-      --alert-text-color: var(--color-text-discovery-outline);
-    }.Content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex: 1;
-  min-width: 0;
-}
-
-  :where(.Alert[data-actions-placement="bottom"]) .Content {
-    display: block;
-  }
-  .Indicator svg {
-    width: var(--alert-indicator-size, 20px);
-    height: var(--alert-indicator-size, 20px);
-  }.Message {
-  flex: 1;
-  min-width: 0;
-}.Title {
-  font-weight: var(--alert-title-font-weight);
-  text-wrap: pretty;
-}
-
-  /* Slight spacing when paired with a description */
-  .Title ~ .Description {
-    margin-top: 2px;
-  }.Description {
-  opacity: 1;
-  text-wrap: pretty;
-}.Actions {
-  display: flex;
-  gap: calc(var(--spacing) * 2);
-}
-
-  :where(.Alert[data-actions-placement="end"]) .Actions {
-    align-self: center;
-    /* Additional padding between right side or actions */
-    margin-left: var(--alert-gutter);
-  }
-
-  :where(.Alert[data-actions-placement="bottom"]) .Actions {
-    margin-top: var(--alert-gutter);
-  }
-}

package/dist/es/components/Avatar/Avatar.module.css

@@ -1,168 +0,0 @@
-@layer components {.Avatar {
-  position: relative;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 0;
-  flex-shrink: 0;
-  width: var(--avatar-size);
-  height: var(--avatar-size);
-  border-radius: var(--avatar-radius);
-  transition: background-color 0.3s var(--cubic-enter);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-
-  /* Interactive */
-  .Avatar[type="button"] {
-    cursor: pointer;
-  }
-
-    .Avatar[type="button"]:focus-visible {
-      outline: 2px solid var(--avatar-ring-color);
-      outline-offset: 2px;
-    }
-
-  .Avatar[data-variant="soft"] {
-    background-color: var(--avatar-background-color);
-    color: var(--avatar-text-color);
-  }
-
-    .Avatar[data-variant="soft"]:where([data-color="primary"]) {
-      --avatar-background-color: var(--color-background-primary-soft);
-      --avatar-text-color: var(--color-text-primary-soft);
-      --avatar-ring-color: var(--color-ring-primary-soft);
-    }
-
-    .Avatar[data-variant="soft"]:where([data-color="secondary"]) {
-      --avatar-background-color: var(--color-background-secondary-soft);
-      --avatar-text-color: var(--color-text-secondary-soft);
-      --avatar-ring-color: var(--color-ring-secondary-soft);
-    }
-
-    .Avatar[data-variant="soft"]:where([data-color="discovery"]) {
-      --avatar-background-color: var(--color-background-discovery-soft);
-      --avatar-text-color: var(--color-text-discovery-soft);
-      --avatar-ring-color: var(--color-ring-discovery-soft);
-    }
-
-    .Avatar[data-variant="soft"]:where([data-color="info"]) {
-      --avatar-background-color: var(--color-background-info-soft);
-      --avatar-text-color: var(--color-text-info-soft);
-      --avatar-ring-color: var(--color-ring-info-soft);
-    }
-
-    .Avatar[data-variant="soft"]:where([data-color="success"]) {
-      --avatar-background-color: var(--color-background-success-soft);
-      --avatar-text-color: var(--color-text-success-soft);
-      --avatar-ring-color: var(--color-ring-success-soft);
-    }
-
-    .Avatar[data-variant="soft"]:where([data-color="danger"]) {
-      --avatar-background-color: var(--color-background-danger-soft);
-      --avatar-text-color: var(--color-text-danger-soft);
-      --avatar-ring-color: var(--color-ring-danger-soft);
-    }
-
-  .Avatar[data-variant="solid"] {
-    background-color: var(--avatar-background-color);
-    color: var(--avatar-text-color);
-  }
-
-    .Avatar[data-variant="solid"]:where([data-color="primary"]) {
-      --avatar-background-color: var(--color-background-primary-solid);
-      --avatar-text-color: var(--color-text-primary-solid);
-      --avatar-ring-color: var(--color-ring-primary-solid);
-    }
-
-    .Avatar[data-variant="solid"]:where([data-color="secondary"]) {
-      --avatar-background-color: var(--color-background-secondary-solid);
-      --avatar-text-color: var(--color-text-secondary-solid);
-      --avatar-ring-color: var(--color-ring-secondary-solid);
-    }
-
-    .Avatar[data-variant="solid"]:where([data-color="discovery"]) {
-      --avatar-background-color: var(--color-background-discovery-solid);
-      --avatar-text-color: var(--color-text-discovery-solid);
-      --avatar-ring-color: var(--color-ring-discovery-solid);
-    }
-
-    .Avatar[data-variant="solid"]:where([data-color="info"]) {
-      --avatar-background-color: var(--color-background-info-solid);
-      --avatar-text-color: var(--color-text-info-solid);
-      --avatar-ring-color: var(--color-ring-info-solid);
-    }
-
-    .Avatar[data-variant="solid"]:where([data-color="success"]) {
-      --avatar-background-color: var(--color-background-success-solid);
-      --avatar-text-color: var(--color-text-success-solid);
-      --avatar-ring-color: var(--color-ring-success-solid);
-    }
-
-    .Avatar[data-variant="solid"]:where([data-color="danger"]) {
-      --avatar-background-color: var(--color-background-danger-solid);
-      --avatar-text-color: var(--color-text-danger-solid);
-      --avatar-ring-color: var(--color-ring-danger-solid);
-    }/*
- * Images with low contrast backgrounds should have clear edges,
- * but this border should not impact the size of the image, or
- * create fringed edges on various background colors. Using a transparency
- * on top of the image ensures crisp edges while also solving the issue of low contrast backgrounds.
- */.AvatarImageContainer {
-  border-radius: inherit;
-}
-
-  .AvatarImageContainer::after {
-    position: absolute;
-    inset: 0;
-    display: block;
-    border: 1px solid var(--avatar-image-border-color);
-    border-radius: inherit;
-    content: "";
-    pointer-events: none;
-  }.AvatarImage {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  -o-object-fit: cover;
-     object-fit: cover;
-  opacity: 0;
-  /* Prevent awkward dragging of the image */
-  pointer-events: none;
-  transition: 0.15s ease;
-}
-
-  .AvatarImage[data-loaded] {
-    opacity: 1;
-  }.AvatarInitial {
-  font-size: calc(var(--avatar-size) * var(--avatar-font-size-scaling));
-  font-weight: var(--font-weight-semibold);
-}.AvatarOverflowCount {
-  font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-three));
-  font-weight: var(--font-weight-semibold);
-}
-
-  .AvatarOverflowCount[data-letter-count="2"] {
-    font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-two));
-  }
-
-  .AvatarOverflowCount[data-letter-count="1"] {
-    font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-one));
-  }/*
- * The "+" sits very low in the baseline - this lifts it up 1px per 24px of size
- */.AvatarOverflowCountSymbol {
-  position: relative;
-  top: calc(-1 * var(--avatar-size) / 24);
-  margin-left: -1px;
-}.AvatarIcon {
-  display: block;
-  flex-grow: 0;
-  flex-shrink: 0;
-  font-size: calc(var(--avatar-size) * 0.7);
-}
-}