material-plus-ui 1.6.0 → 1.8.0

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "material-plus-ui",
-  "version": "1.6.0",
-  "description": "A React component library implementing Material Design 3 — the components other Material libraries do not ship, and wider versions of the ones they do. Built on Base UI and Tailwind CSS v4, themed with CSS custom properties so it can coexist with an existing Material setup. ESM only, types included.",
+  "version": "1.8.0",
+  "description": "A React component library written from the Material Design 3 specification and extended past it — wider versions of the components it names, and the charts, data table and command palette it does not. Built on Base UI and Tailwind CSS v4, themed with CSS custom properties so it coexists with an existing Material setup. ESM only, types included.",
   "type": "module",
   "sideEffects": [
     "**/*.css"
   ],
   "types": "dist/index.d.ts",
-  "author": "CDGet <jooy2.contact@gmail.com>",
+  "author": "CDGet (https://cdget.com)",
   "license": "MIT",
   "homepage": "https://material-plus.cdget.com",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jooy2/material-plus.git"
+    "url": "git+https://github.com/jooy2/material-plus-ui.git"
   },
   "bugs": {
-    "url": "https://github.com/jooy2/material-plus/issues"
+    "url": "https://github.com/jooy2/material-plus-ui/issues"
   },
   "scripts": {
-    "build": "npm run format:fix && tsc --project tsconfig.prod.json && node scripts/specify-imports.mjs && node scripts/annotate-pure.mjs && npm run minify && node scripts/mark-client.mjs && node scripts/build-styles.mjs && node scripts/build-split-styles.mjs && node scripts/measure-bundle.mjs",
+    "build": "npm run format:fix && node scripts/clean-dist.mjs && tsc --project tsconfig.prod.json && node scripts/specify-imports.mjs && node scripts/annotate-pure.mjs && npm run minify && node scripts/mark-client.mjs && node scripts/build-styles.mjs && node scripts/build-split-styles.mjs && node scripts/measure-bundle.mjs",
     "lint": "eslint . --ext .js,.ts .",
     "lint:fix": "eslint . --ext .js,.ts --fix .",
     "minify": "terser-glob 'dist/**/*.js' --config-file terser.config.json",
@@ -124,42 +124,43 @@
     "composition"
   ],
   "devDependencies": {
-    "@base-ui/react": "^1.7.0",
+    "@base-ui/react": "^1.8.0",
     "@eslint/js": "^9.39.1",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.4.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "@typescript-eslint/parser": "^8.68.0",
+    "@types/node": "^26.6.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@typescript-eslint/parser": "^8.70.0",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/browser": "^4.1.11",
-    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/browser": "^5.0.1",
+    "@vitest/browser-playwright": "^5.0.1",
     "esbuild": "^0.28.2",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-n": "^18.3.0",
-    "globals": "^17.11.0",
+    "globals": "^17.12.0",
     "jiti": "^2.7.0",
-    "playwright": "^1.62.1",
-    "postcss": "^8.5.26",
-    "prettier": "^3.9.6",
+    "playwright": "^1.63.0",
+    "postcss": "^8.5.28",
+    "prettier": "^3.9.7",
     "prettier-plugin-tailwindcss": "^0.8.1",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "tailwindcss": "^4.3.3",
     "terser-glob": "^1.2.1",
     "tsx": "^4.23.13",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.68.0",
-    "vite": "^8.2.2",
+    "typescript-eslint": "^8.70.0",
+    "vite": "^8.3.0",
     "vitepress": "^1.6.4",
     "vitepress-i18n": "^1.4.0",
-    "vitepress-sidebar": "^1.39.0",
-    "vitest": "^4.1.11",
-    "vitest-browser-react": "^2.2.0"
+    "vitepress-sidebar": "^1.40.0",
+    "vitest": "^5.0.1",
+    "vitest-browser-react": "^2.3.0"
   },
   "dependencies": {
-    "lucide-react": "^1.37.0"
+    "highlight.js": "^11.12.0",
+    "lucide-react": "^1.47.0"
   },
   "peerDependencies": {
     "@base-ui/react": "^1.7.0",

package/.fix.py

@@ -1,92 +0,0 @@
-import pathlib, sys
-def rep(path, old, new):
-    p = pathlib.Path(path); s = p.read_text(encoding='utf-8')
-    if s.count(old) != 1: print(f'FAIL {path}: {s.count(old)}'); sys.exit(1)
-    p.write_text(s.replace(old, new, 1), encoding='utf-8'); print('ok ', path)
-
-EN_OLD = """Yours is appended to the component's own, and nothing is removed to make room for it. So **two utilities setting the same property are resolved by the stylesheet rather than by which of them you wrote.**
-
-Which one that is depends on how the styles were wired up. On the precompiled path it is whichever sheet the application imported second. On the Tailwind path both are generated in one pass, and Tailwind's own ordering decides — which is per property, and not something to work out at the call site:
-
-| You pass     | The component sets    | Which one wins |
-| ------------ | --------------------- | -------------- |
-| `p-8`        | `px-6`                | the component  |
-| `rounded-lg` | `rounded-mp-full`     | the component  |
-| `shadow-lg`  | `shadow-mp-1`         | the component  |
-| `text-lg`    | `text-mp-label-large` | yours          |
-| `bg-red-500` | `bg-mp-primary`       | yours          |
-| `h-20`       | `h-14`                | yours          |
-
-Read the column, not the rows: the answers are what one version of Tailwind happens to emit, and the point is that there is no rule connecting them. `className` is the right tool for what a component does **not** already set — margin, width, grid placement, position, an animation — and the wrong one for taking something over."""
-
-EN_NEW = """Yours is appended to the component's own, and nothing is removed to make room for it. Two classes setting the same property both end up on the element, at equal specificity, and **the one that wins is the one the stylesheet happens to put last** — not the one you wrote.
-
-A class for something the component does not already set always works. That is most of what a class is for, and there is nothing more to know about it:
-
-```tsx
-<MPButton className="mt-4 w-full">Save</MPButton>
-```
-
-Past that it depends on the pair. On the precompiled path it depends on which sheet the application imported second; on the Tailwind path both are generated in one pass and Tailwind's own ordering decides. Measured against this repository's own stylesheet, on an `MPButton` at the default size:
-
-| You pass                     | It sets                  | Result  |
-| ---------------------------- | ------------------------ | ------- |
-| `px-8`                       | `px-6`                   | applies |
-| `px-2`                       | `px-6`                   | ignored |
-| `h-20`                       | `h-14`                   | applies |
-| `h-8`                        | `h-14`                   | ignored |
-| `text-lg`, `text-xs`         | `text-mp-title-medium`   | applies |
-| `bg-red-500`                 | `bg-(--_mp-accent)`      | applies |
-| `rounded-lg`                 | `rounded-mp-full`        | ignored |
-| `shadow-lg`                  | `shadow-mp-1`            | ignored |
-| `p-8`                        | `px-6`                   | ignored |
-| any of the above with a `!`  | —                        | applies |
-
-The first four rows are the ones worth staring at. `px-8` works and `px-2` does not, on the same component and the same property, because Tailwind emits a scale in scale order and the larger step is therefore later — so *making a control bigger tends to work and making it smaller tends not to*. The rest is which of two theme keys Tailwind happened to sort first: the library's `--text-mp-*` land before Tailwind's own, so any `text-*` you pass wins, while `--radius-mp-*` and `--shadow-mp-*` land after, so `rounded-*` and `shadow-*` do not.
-
-None of that is a promise. It is what one version of Tailwind emits, it is per pair rather than per property, and it can move under you when either side adds a token. Treat `className` as the tool for what the component leaves alone."""
-
-KO_OLD = """넘긴 클래스는 컴포넌트 자신의 클래스 뒤에 붙고, 자리를 내주기 위해 지워지는 것은 없습니다. 그래서 **같은 속성을 지정하는 두 유틸리티는 어느 쪽을 썼는지가 아니라 스타일시트가 결정합니다.**
-
-어느 쪽이 되는지는 스타일을 어떻게 연결했는지에 달려 있습니다. 컴파일된 시트를 쓰는 경우에는 애플리케이션이 나중에 import한 시트가 이깁니다. Tailwind를 쓰는 경우에는 둘이 한 번의 패스에서 생성되고 Tailwind 자신의 정렬이 결정하는데, 그 정렬은 속성마다 다르고 호출부에서 따져볼 만한 것이 아닙니다.
-
-| 넘긴 것 | 컴포넌트가 지정한 것 | 이기는 쪽 |
-| --- | --- | --- |
-| `p-8` | `px-6` | 컴포넌트 |
-| `rounded-lg` | `rounded-mp-full` | 컴포넌트 |
-| `shadow-lg` | `shadow-mp-1` | 컴포넌트 |
-| `text-lg` | `text-mp-label-large` | 넘긴 쪽 |
-| `bg-red-500` | `bg-mp-primary` | 넘긴 쪽 |
-| `h-20` | `h-14` | 넘긴 쪽 |
-
-행이 아니라 열을 보세요. 이 답들은 어떤 한 버전의 Tailwind가 그렇게 내놓은 것일 뿐이고, 요점은 이들을 이어 주는 규칙이 없다는 것입니다. `className`은 컴포넌트가 **지정하지 않은** 것 — 마진, 너비, 그리드 배치, 위치, 애니메이션 — 에 쓰는 도구이고, 이미 지정된 것을 가져오는 데 쓰는 도구가 아닙니다."""
-
-KO_NEW = """넘긴 클래스는 컴포넌트 자신의 클래스 뒤에 붙고, 자리를 내주기 위해 지워지는 것은 없습니다. 같은 속성을 지정하는 두 클래스가 같은 명시도로 엘리먼트에 함께 올라가고, **이기는 쪽은 스타일시트가 뒤에 놓은 쪽입니다.** 어느 쪽을 썼는지가 아닙니다.
-
-컴포넌트가 지정하지 않은 것에 대한 클래스는 언제나 적용됩니다. 클래스로 하려는 일의 대부분이 이것이고, 여기에 더 알아야 할 것은 없습니다.
-
-```tsx
-<MPButton className="mt-4 w-full">저장</MPButton>
-```
-
-그 너머는 짝에 따라 다릅니다. 컴파일된 시트를 쓰는 경우에는 애플리케이션이 나중에 import한 시트가 이기고, Tailwind를 쓰는 경우에는 둘이 한 번의 패스에서 생성되어 Tailwind 자신의 정렬이 결정합니다. 이 저장소의 시트로, 기본 크기의 `MPButton`에 대고 실제로 측정한 결과입니다.
-
-| 넘긴 것 | 컴포넌트가 지정한 것 | 결과 |
-| --- | --- | --- |
-| `px-8` | `px-6` | 적용됨 |
-| `px-2` | `px-6` | 무시됨 |
-| `h-20` | `h-14` | 적용됨 |
-| `h-8` | `h-14` | 무시됨 |
-| `text-lg`, `text-xs` | `text-mp-title-medium` | 적용됨 |
-| `bg-red-500` | `bg-(--_mp-accent)` | 적용됨 |
-| `rounded-lg` | `rounded-mp-full` | 무시됨 |
-| `shadow-lg` | `shadow-mp-1` | 무시됨 |
-| `p-8` | `px-6` | 무시됨 |
-| 위의 어느 것이든 `!`를 붙이면 | — | 적용됨 |
-
-들여다볼 만한 것은 처음 네 줄입니다. 같은 컴포넌트, 같은 속성인데 `px-8`은 되고 `px-2`는 안 됩니다. Tailwind가 스케일을 스케일 순서로 내놓기 때문에 더 큰 단계가 더 뒤에 오고, 그래서 *컨트롤을 키우는 쪽은 대체로 되고 줄이는 쪽은 대체로 안 됩니다*. 나머지는 두 테마 키 중 어느 쪽을 Tailwind가 먼저 정렬했는가의 문제입니다. 이 라이브러리의 `--text-mp-*`는 Tailwind 자신의 것보다 앞에 놓이므로 넘긴 `text-*`가 이기고, `--radius-mp-*`와 `--shadow-mp-*`는 뒤에 놓이므로 `rounded-*`와 `shadow-*`는 지지 않고 집니다.
-
-이 중 무엇도 약속이 아닙니다. 어떤 한 버전의 Tailwind가 내놓은 결과이고, 속성 단위가 아니라 짝 단위이며, 양쪽 중 어느 한쪽이 토큰을 추가하면 발밑에서 움직일 수 있습니다. `className`은 컴포넌트가 건드리지 않는 것에 쓰는 도구로 두세요."""
-
-rep('docs/en/guide/getting-started.md', EN_OLD, EN_NEW)
-rep('docs/ko/guide/getting-started.md', KO_OLD, KO_NEW)

package/dist/components/avatar-group/MPAvatarGroup.d.ts

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import { type MPAvatarShape } from '../avatar/MPAvatar.js';
-import type { MPColor, MPSize, MPVariant } from '../../types.js';
-export interface MPAvatarGroupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
-    /**
-     * How many avatars are drawn before the rest become a count. Left out, every
-     * one of them is drawn.
-     */
-    max?: number;
-    /**
-     * How many there are altogether, when the group was handed only the first few.
-     *
-     * Without it the count is worked out from the children, which is right only
-     * when all of them were passed — and a list of forty faces that ships four
-     * `<img>`s and a number is exactly why this prop exists.
-     */
-    total?: number;
-    /**
-     * How far each avatar sits under the one before it — a number in pixels, or
-     * any CSS length. Left out it is a fraction of `size`, which keeps the overlap
-     * looking the same at every rung.
-     */
-    overlap?: number | string;
-    /**
-     * Passed to every avatar in the group.
-     * @default 'md'
-     */
-    size?: MPSize;
-    /**
-     * Passed to every avatar in the group.
-     * @default 'circle'
-     */
-    shape?: MPAvatarShape;
-    /**
-     * Passed to every avatar in the group.
-     * @default 'tonal'
-     */
-    variant?: MPVariant;
-    /**
-     * Passed to every avatar in the group.
-     * @default 'primary'
-     */
-    color?: MPColor;
-    /** The avatars. */
-    children?: React.ReactNode;
-}
-/**
- * A stack of avatars, overlapping, with the ones that did not fit as a count.
- *
- * `size`, `shape`, `variant` and `color` are set once here rather than on every
- * avatar — a stack whose fourth face is a rung out is not a stack — and an
- * avatar's own prop still wins, which is what lets one of them be marked out
- * from the rest.
- *
- * ## The ring is not decoration
- *
- * Two circles of similar tone laid over each other have no edge between them at
- * all, and the stack reads as one smeared shape. The ring is drawn in the page's
- * own `surface`, so it is the background showing through rather than a colour of
- * its own — which is what puts the near avatar in front instead of putting a
- * white line on it.
- *
- * `isolate` on the group is the other half: it makes the first avatar's ring
- * paint against the page rather than against whatever the group happens to be
- * stacked over.
- *
- * ## The first avatar is on top
- *
- * The order is the DOM order, and each avatar is drawn under the one before it.
- * A stack read from the start is therefore read front to back, so the person the
- * group is *about* comes first rather than last — and under RTL the whole thing
- * flips on its own, because the overlap is a logical margin.
- */
-export declare const MPAvatarGroup: React.ForwardRefExoticComponent<MPAvatarGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/avatar-group/MPAvatarGroup.js

@@ -1,2 +0,0 @@
-"use client";
-import{jsx as r,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{MPAvatar as t}from"../avatar/MPAvatar.js";import{MPAvatarGroupContext as i}from"../../internal/avatar-group.js";import{useMPColor as o,useMPSize as l}from"../../internal/config.js";const n={xs:"0.625rem",sm:"0.75rem",md:"1.125rem",lg:"1.25rem",xl:"1.5rem"};export const MPAvatarGroup=/*@__PURE__*/e.forwardRef(function({max:s,total:m,overlap:c,size:p,shape:v="circle",variant:f="tonal",color:d,className:h,style:u,children:x,...g},j){const M=l(p),y=o(d),z=e.useMemo(()=>({size:M,shape:v,variant:f,color:y}),[M,v,f,y]),A=e.Children.toArray(x),P=void 0===s?A:A.slice(0,Math.max(0,s)),N=m??A.length,$=Math.max(0,N-P.length);return r(i.Provider,{value:z,children:a("div",{ref:j,"data-mp-size":M,className:["mp-avatar-group isolate inline-flex items-center align-middle","[&>*:not(:first-child)]:[margin-inline-start:calc(var(--_mp-avatar-overlap)*-1)]","ring-mp-surface [&>*]:ring-2",h??""].filter(Boolean).join(" "),style:{"--_mp-avatar-overlap":void 0===c?n[M]:"number"==typeof c?`${c}px`:c,...u},...g,children:[P,$>0?r(t,{initials:`+${$}`}):null]})})});

package/dist/components/avatar-group/index.d.ts

@@ -1,2 +0,0 @@
-export { MPAvatarGroup } from './MPAvatarGroup.js';
-export type { MPAvatarGroupProps } from './MPAvatarGroup.js';

package/dist/components/avatar-group/index.js

@@ -1 +0,0 @@
-export{MPAvatarGroup}from"./MPAvatarGroup.js";

package/dist/internal/avatar-group.d.ts

@@ -1,22 +0,0 @@
-/**
- * What an avatar inherits from the stack around it.
- *
- * Its own module rather than a file `MPAvatarGroup` exports, for the reason
- * `button-group.ts` gives: both sides import it — the group provides the
- * context and the avatar reads it — so putting it in either component would
- * make one of them pull in the other, and an `MPAvatar` that dragged a group
- * nobody used into the bundle is dead weight on every page with a face on it.
- *
- * Every field is optional and every one of them may legitimately be `undefined`.
- * An avatar reads the group as a *fallback*, so "not set on the group" has to
- * keep meaning "use the avatar's own default" rather than turning into one.
- */
-import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../types.js';
-export interface MPAvatarGroupContextValue {
-    size?: MPSize;
-    shape?: 'circle' | 'square';
-    variant?: MPVariant;
-    color?: MPColor;
-}
-export declare const MPAvatarGroupContext: React.Context<MPAvatarGroupContextValue | null>;

package/dist/internal/avatar-group.js

@@ -1,2 +0,0 @@
-"use client";
-import*as t from"react";export const MPAvatarGroupContext=/*@__PURE__*/t.createContext(null);

package/dist/styles/avatar-group.css

@@ -1,2 +0,0 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--spacing:.25rem;--container-lg:32rem;--font-weight-medium:500}}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.isolate{isolation:isolate}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.contents{display:contents}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.size-18{width:calc(var(--spacing) * 18);height:calc(var(--spacing) * 18)}.size-\[60\%\]{width:60%;height:60%}.size-full{width:100%;height:100%}.size-px{width:1px;height:1px}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-18{height:calc(var(--spacing) * 18)}.max-w-\[30rem\]{max-width:30rem}.max-w-\[37\.5rem\]{max-width:37.5rem}.max-w-\[52\.5rem\]{max-width:52.5rem}.max-w-\[75rem\]{max-width:75rem}.max-w-\[100rem\]{max-width:100rem}.max-w-lg{max-width:var(--container-lg)}.shrink-0{flex-shrink:0}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-3\.5{gap:calc(var(--spacing) * 3.5)}.gap-4{gap:calc(var(--spacing) * 4)}.overflow-hidden{overflow:hidden}.border{border-style:var(--tw-border-style);border-width:1px}.bg-\(--_mp-accent\){background-color:var(--_mp-accent)}.bg-\(--_mp-accent-container\){background-color:var(--_mp-accent-container)}.bg-transparent{background-color:#0000}.object-cover{object-fit:cover}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-10{padding-inline:calc(var(--spacing) * 10)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.align-middle{vertical-align:middle}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-\(--_mp-accent\){color:var(--_mp-accent)}.text-\(--_mp-on-accent\){color:var(--_mp-on-accent)}.text-\(--_mp-on-accent-container\){color:var(--_mp-on-accent-container)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.select-none{-webkit-user-select:none;user-select:none}.\[clip-path\:inset\(50\%\)\]{clip-path:inset(50%)}.\[\&\>\*\]\:ring-2>*{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.\[\&\>\*\:not\(\:first-child\)\]\:\[margin-inline-start\:calc\(var\(--_mp-avatar-overlap\)\*-1\)\]>:not(:first-child){margin-inline-start:calc(var(--_mp-avatar-overlap) * -1)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}