@usememos/ui 26.10.3 → 26.10.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -1
- package/dist/components/badge/index.js +1 -1
- package/dist/components/badge/index.js.map +3 -3
- package/dist/components/collapsible/index.js +1 -1
- package/dist/components/collapsible/index.js.map +3 -3
- package/dist/components/combobox/index.js +1 -1
- package/dist/components/combobox/index.js.map +3 -3
- package/dist/components/field/fieldset.js +1 -1
- package/dist/components/field/fieldset.js.map +3 -3
- package/dist/components/field/index.js +1 -1
- package/dist/components/field/index.js.map +3 -3
- package/dist/components/input/index.js +1 -1
- package/dist/components/input/index.js.map +3 -3
- package/dist/components/menu/classes.js +3 -0
- package/dist/components/menu/classes.js.map +7 -0
- package/dist/components/menu/index.js +1 -1
- package/dist/components/menu/index.js.map +3 -3
- package/dist/components/popover/classes.js +3 -0
- package/dist/components/popover/classes.js.map +7 -0
- package/dist/components/popover/index.js +1 -1
- package/dist/components/popover/index.js.map +3 -3
- package/dist/components/select/index.js +1 -1
- package/dist/components/select/index.js.map +3 -3
- package/dist/components/spinner/index.js.map +1 -1
- package/dist/components/table/index.js +1 -1
- package/dist/components/table/index.js.map +3 -3
- package/dist/components/tabs/index.js +1 -1
- package/dist/components/tabs/index.js.map +3 -3
- package/dist/components/textarea/index.js +1 -1
- package/dist/components/textarea/index.js.map +3 -3
- package/dist/components/toast/index.js +1 -1
- package/dist/components/toast/index.js.map +1 -1
- package/dist/components/tooltip/index.js +1 -1
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +3 -3
- package/dist/internal/popup.js +1 -1
- package/dist/internal/popup.js.map +2 -2
- package/dist/internal/size.js +1 -1
- package/dist/internal/size.js.map +3 -3
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +66 -0
- package/dist/theme-tokens.js +3 -0
- package/dist/theme-tokens.js.map +7 -0
- package/dist/tokens.css +1 -1
- package/dist/types/components/badge/index.d.ts +9 -0
- package/dist/types/components/collapsible/index.d.ts +1 -1
- package/dist/types/components/combobox/index.d.ts +2 -2
- package/dist/types/components/field/fieldset.d.ts +1 -1
- package/dist/types/components/field/index.d.ts +1 -1
- package/dist/types/components/input/index.d.ts +11 -1
- package/dist/types/components/menu/classes.d.ts +28 -0
- package/dist/types/components/menu/index.d.ts +2 -2
- package/dist/types/components/popover/classes.d.ts +14 -0
- package/dist/types/components/popover/index.d.ts +1 -1
- package/dist/types/components/select/index.d.ts +2 -2
- package/dist/types/components/spinner/index.d.ts +1 -1
- package/dist/types/components/table/index.d.ts +1 -1
- package/dist/types/components/tabs/index.d.ts +1 -1
- package/dist/types/components/textarea/index.d.ts +11 -1
- package/dist/types/components/tooltip/index.d.ts +1 -1
- package/dist/types/index.d.ts +6 -3
- package/dist/types/internal/popup.d.ts +2 -2
- package/dist/types/internal/size.d.ts +2 -0
- package/dist/types/theme-tokens.d.ts +7 -0
- package/dist/types/types.d.ts +6 -2
- package/llms-full.txt +305 -87
- package/llms.txt +1 -0
- package/package.json +3 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/table/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { forwardRef, type ComponentPropsWithoutRef } from 'react';\nimport { cx } from '../../internal/class-name';\nimport { SizeContext,
|
|
5
|
-
"mappings": ";AAAA,OAAS,cAAAA,MAAiD,QAC1D,OAAS,MAAAC,MAAU,+BACnB,OAAS,eAAAC,EAAa,
|
|
6
|
-
"names": ["forwardRef", "cx", "SizeContext", "
|
|
4
|
+
"sourcesContent": ["import { forwardRef, type ComponentPropsWithoutRef } from 'react';\nimport { cx } from '../../internal/class-name';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { Size } from '../../types';\n\nconst bodyText: Record<Exclude<Size, 'xs'>, string> = { sm: 'mu-caption', md: 'mu-body' };\n\nexport interface RootProps extends ComponentPropsWithoutRef<'table'> {\n /** `sm` for dense admin lists. Sets row height and cell text. */\n size?: Exclude<Size, 'xs'>;\n}\n\n/**\n * A `<table>` with rows separated by `line`. It sits in a box that scrolls\n * sideways when the table is wider than the screen; the ref and every prop go\n * to the `<table>`.\n */\nexport const Root = forwardRef<HTMLTableElement, RootProps>(function TableRoot({ size, className, ...props }, ref) {\n const resolved = useRowSize(size);\n return (\n <SizeContext.Provider value={resolved}>\n <div className=\"mu-table-scroll\">\n <table ref={ref} {...props} className={cx('mu-table mu-base', `mu-s-${resolved}`, bodyText[resolved], className)} />\n </div>\n </SizeContext.Provider>\n );\n});\n\nexport interface HeaderProps extends ComponentPropsWithoutRef<'thead'> {}\n\n/** The `<thead>`, holding one Row of Head cells. */\nexport const Header = forwardRef<HTMLTableSectionElement, HeaderProps>(function TableHeader({ className, ...props }, ref) {\n return <thead ref={ref} {...props} className={cx('mu-table-header', className)} />;\n});\n\nexport interface BodyProps extends ComponentPropsWithoutRef<'tbody'> {}\n\n/** The `<tbody>`, holding the data Rows. */\nexport const Body = forwardRef<HTMLTableSectionElement, BodyProps>(function TableBody({ className, ...props }, ref) {\n return <tbody ref={ref} {...props} className={cx('mu-table-body', className)} />;\n});\n\nexport interface RowProps extends ComponentPropsWithoutRef<'tr'> {}\n\n/** A `<tr>`. Body rows highlight with `hover`. */\nexport const Row = forwardRef<HTMLTableRowElement, RowProps>(function TableRow({ className, ...props }, ref) {\n return <tr ref={ref} {...props} className={cx('mu-table-row', className)} />;\n});\n\nexport interface HeadProps extends ComponentPropsWithoutRef<'th'> {\n /** Right-aligns a column of numbers. Set it on the column's Cells too. */\n num?: boolean;\n}\n\n/** A column header, `<th scope=\"col\">` in 12px `ink-muted`. */\nexport const Head = forwardRef<HTMLTableCellElement, HeadProps>(function TableHead({ num = false, scope = 'col', className, ...props }, ref) {\n return <th ref={ref} scope={scope} {...props} className={cx('mu-table-head mu-label-sm', num && 'mu-table-num', className)} />;\n});\n\nexport interface CellProps extends ComponentPropsWithoutRef<'td'> {\n /** Right-aligns a number. */\n num?: boolean;\n /** Secondary text, such as a date, in `ink-muted`. */\n muted?: boolean;\n}\n\n/** A data cell, `<td>`. */\nexport const Cell = forwardRef<HTMLTableCellElement, CellProps>(function TableCell({ num = false, muted = false, className, ...props }, ref) {\n return <td ref={ref} {...props} className={cx('mu-table-cell', num && 'mu-table-num', muted && 'mu-table-muted', className)} />;\n});\n\nexport interface CaptionProps extends ComponentPropsWithoutRef<'caption'> {}\n\n/** Names the table, under it in `caption` style. Screen readers read it as the table's name. */\nexport const Caption = forwardRef<HTMLTableCaptionElement, CaptionProps>(function TableCaption({ className, ...props }, ref) {\n return <caption ref={ref} {...props} className={cx('mu-table-caption mu-caption', className)} />;\n});\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAS,cAAAA,MAAiD,QAC1D,OAAS,MAAAC,MAAU,+BACnB,OAAS,eAAAC,EAAa,cAAAC,MAAkB,yBAoBhC,cAAAC,MAAA,oBAjBR,IAAMC,EAAgD,CAAE,GAAI,aAAc,GAAI,SAAU,EAY3EC,EAAON,EAAwC,SAAmB,CAAE,KAAAO,EAAM,UAAAC,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACjH,IAAMC,EAAWR,EAAWI,CAAI,EAChC,OACEH,EAACF,EAAY,SAAZ,CAAqB,MAAOS,EAC3B,SAAAP,EAAC,OAAI,UAAU,kBACb,SAAAA,EAAC,SAAM,IAAKM,EAAM,GAAGD,EAAO,UAAWR,EAAG,mBAAoB,QAAQU,CAAQ,GAAIN,EAASM,CAAQ,EAAGH,CAAS,EAAG,EACpH,EACF,CAEJ,CAAC,EAKYI,EAASZ,EAAiD,SAAqB,CAAE,UAAAQ,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACxH,OAAON,EAAC,SAAM,IAAKM,EAAM,GAAGD,EAAO,UAAWR,EAAG,kBAAmBO,CAAS,EAAG,CAClF,CAAC,EAKYK,EAAOb,EAA+C,SAAmB,CAAE,UAAAQ,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAClH,OAAON,EAAC,SAAM,IAAKM,EAAM,GAAGD,EAAO,UAAWR,EAAG,gBAAiBO,CAAS,EAAG,CAChF,CAAC,EAKYM,EAAMd,EAA0C,SAAkB,CAAE,UAAAQ,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC3G,OAAON,EAAC,MAAG,IAAKM,EAAM,GAAGD,EAAO,UAAWR,EAAG,eAAgBO,CAAS,EAAG,CAC5E,CAAC,EAQYO,EAAOf,EAA4C,SAAmB,CAAE,IAAAgB,EAAM,GAAO,MAAAC,EAAQ,MAAO,UAAAT,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC3I,OAAON,EAAC,MAAG,IAAKM,EAAK,MAAOO,EAAQ,GAAGR,EAAO,UAAWR,EAAG,4BAA6Be,GAAO,eAAgBR,CAAS,EAAG,CAC9H,CAAC,EAUYU,EAAOlB,EAA4C,SAAmB,CAAE,IAAAgB,EAAM,GAAO,MAAAG,EAAQ,GAAO,UAAAX,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC3I,OAAON,EAAC,MAAG,IAAKM,EAAM,GAAGD,EAAO,UAAWR,EAAG,gBAAiBe,GAAO,eAAgBG,GAAS,iBAAkBX,CAAS,EAAG,CAC/H,CAAC,EAKYY,EAAUpB,EAAkD,SAAsB,CAAE,UAAAQ,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC3H,OAAON,EAAC,WAAQ,IAAKM,EAAM,GAAGD,EAAO,UAAWR,EAAG,8BAA+BO,CAAS,EAAG,CAChG,CAAC",
|
|
6
|
+
"names": ["forwardRef", "cx", "SizeContext", "useRowSize", "jsx", "bodyText", "Root", "size", "className", "props", "ref", "resolved", "Header", "Body", "Row", "Head", "num", "scope", "Cell", "muted", "Caption"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{Tabs as r}from"@base-ui/react/tabs";import{forwardRef as i}from"react";import{withClass as m}from"../../internal/class-name.js";import{SizeContext as l,
|
|
2
|
+
import{Tabs as r}from"@base-ui/react/tabs";import{forwardRef as i}from"react";import{withClass as m}from"../../internal/class-name.js";import{SizeContext as l,useRowSize as p}from"../../internal/size.js";import{jsx as n,jsxs as b}from"react/jsx-runtime";var d=i(function({size:e,className:s,...t},o){let a=p(e);return n(l.Provider,{value:a,children:n(r.Root,{ref:o,...t,className:m("mu-tabs-root",s)})})}),x=i(function({className:e,children:s,...t},o){let a=p();return b(r.List,{ref:o,...t,className:m(`mu-tabs-list mu-segmented mu-base mu-s-${a}`,e),children:[n(r.Indicator,{className:"mu-tabs-indicator mu-segmented-key"}),s]})}),L=i(function({icon:e,className:s,children:t,...o},a){return b(r.Tab,{ref:a,...o,className:m("mu-tabs-tab mu-segmented-item mu-focus",s),children:[e,t]})}),R=i(function({className:e,...s},t){return n(r.Panel,{ref:t,...s,className:m("mu-tabs-panel mu-focus",e)})});export{x as List,R as Panel,d as Root,L as Tab};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/tabs/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { forwardRef, type ReactNode } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { SizeContext,
|
|
5
|
-
"mappings": ";AAAA,OAAS,QAAQA,MAAgB,sBACjC,OAAS,cAAAC,MAAkC,QAC3C,OAAS,aAAAC,MAAiB,+BAC1B,OAAS,eAAAC,EAAa,
|
|
6
|
-
"names": ["BaseTabs", "forwardRef", "withClass", "SizeContext", "
|
|
4
|
+
"sourcesContent": ["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { forwardRef, type ReactNode } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { IconElement, Size } from '../../types';\n\nexport interface RootProps extends BaseTabs.Root.Props {\n size?: Exclude<Size, 'xs'>;\n}\n\n/** Switches between sections of the same page. Holds a List and one Panel per tab. */\nexport const Root = forwardRef<HTMLDivElement, RootProps>(function TabsRoot({ size, className, ...props }, ref) {\n const resolved = useRowSize(size);\n return (\n <SizeContext.Provider value={resolved}>\n <BaseTabs.Root ref={ref} {...props} className={withClass('mu-tabs-root', className)} />\n </SizeContext.Provider>\n );\n});\n\nexport interface ListProps extends BaseTabs.List.Props {}\n\n/** The well that holds the tabs, with the sliding key built in. */\nexport const List = forwardRef<HTMLDivElement, ListProps>(function TabsList({ className, children, ...props }, ref) {\n const size = useRowSize();\n return (\n <BaseTabs.List ref={ref} {...props} className={withClass(`mu-tabs-list mu-segmented mu-base mu-s-${size}`, className)}>\n <BaseTabs.Indicator className=\"mu-tabs-indicator mu-segmented-key\" />\n {children}\n </BaseTabs.List>\n );\n});\n\nexport interface TabProps extends BaseTabs.Tab.Props {\n icon?: IconElement;\n children?: ReactNode;\n}\n\n/** One tab. Its `value` matches a Panel's. */\nexport const Tab = forwardRef<HTMLElement, TabProps>(function TabsTab({ icon, className, children, ...props }, ref) {\n return (\n <BaseTabs.Tab ref={ref} {...props} className={withClass('mu-tabs-tab mu-segmented-item mu-focus', className)}>\n {icon}\n {children}\n </BaseTabs.Tab>\n );\n});\n\nexport interface PanelProps extends BaseTabs.Panel.Props {}\n\n/** The content of one tab. */\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function TabsPanel({ className, ...props }, ref) {\n return <BaseTabs.Panel ref={ref} {...props} className={withClass('mu-tabs-panel mu-focus', className)} />;\n});\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAS,QAAQA,MAAgB,sBACjC,OAAS,cAAAC,MAAkC,QAC3C,OAAS,aAAAC,MAAiB,+BAC1B,OAAS,eAAAC,EAAa,cAAAC,MAAkB,yBAYlC,cAAAC,EAWF,QAAAC,MAXE,oBAJC,IAAMC,EAAON,EAAsC,SAAkB,CAAE,KAAAO,EAAM,UAAAC,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC9G,IAAMC,EAAWR,EAAWI,CAAI,EAChC,OACEH,EAACF,EAAY,SAAZ,CAAqB,MAAOS,EAC3B,SAAAP,EAACL,EAAS,KAAT,CAAc,IAAKW,EAAM,GAAGD,EAAO,UAAWR,EAAU,eAAgBO,CAAS,EAAG,EACvF,CAEJ,CAAC,EAKYI,EAAOZ,EAAsC,SAAkB,CAAE,UAAAQ,EAAW,SAAAK,EAAU,GAAGJ,CAAM,EAAGC,EAAK,CAClH,IAAMH,EAAOJ,EAAW,EACxB,OACEE,EAACN,EAAS,KAAT,CAAc,IAAKW,EAAM,GAAGD,EAAO,UAAWR,EAAU,0CAA0CM,CAAI,GAAIC,CAAS,EAClH,UAAAJ,EAACL,EAAS,UAAT,CAAmB,UAAU,qCAAqC,EAClEc,GACH,CAEJ,CAAC,EAQYC,EAAMd,EAAkC,SAAiB,CAAE,KAAAe,EAAM,UAAAP,EAAW,SAAAK,EAAU,GAAGJ,CAAM,EAAGC,EAAK,CAClH,OACEL,EAACN,EAAS,IAAT,CAAa,IAAKW,EAAM,GAAGD,EAAO,UAAWR,EAAU,yCAA0CO,CAAS,EACxG,UAAAO,EACAF,GACH,CAEJ,CAAC,EAKYG,EAAQhB,EAAuC,SAAmB,CAAE,UAAAQ,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC3G,OAAON,EAACL,EAAS,MAAT,CAAe,IAAKW,EAAM,GAAGD,EAAO,UAAWR,EAAU,yBAA0BO,CAAS,EAAG,CACzG,CAAC",
|
|
6
|
+
"names": ["BaseTabs", "forwardRef", "withClass", "SizeContext", "useRowSize", "jsx", "jsxs", "Root", "size", "className", "props", "ref", "resolved", "List", "children", "Tab", "icon", "Panel"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{Field as
|
|
2
|
+
import{Field as x}from"@base-ui/react/field";import{forwardRef as m}from"react";import{cx as p,withClass as l}from"../../internal/class-name.js";import{useRowSize as f}from"../../internal/size.js";import{jsx as r}from"react/jsx-runtime";function d({size:e="md"}={}){return p("mu-textarea","mu-base",`mu-s-${e}`)}var C=m(function({size:t,rows:s=3,className:a,...o},i){let n=f(t);return r(x.Control,{ref:i,...o,render:r("textarea",{rows:s}),className:l(d({size:n}),a)})});export{C as Textarea,d as textareaClasses};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/textarea/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Field as BaseField } from '@base-ui/react/field';\nimport { forwardRef } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport {
|
|
5
|
-
"mappings": ";AAAA,OAAS,SAASA,MAAiB,uBACnC,OAAS,cAAAC,MAAkB,QAC3B,OAAS,aAAAC,MAAiB,+
|
|
6
|
-
"names": ["BaseField", "forwardRef", "withClass", "
|
|
4
|
+
"sourcesContent": ["import { Field as BaseField } from '@base-ui/react/field';\nimport { forwardRef } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport { useRowSize } from '../../internal/size';\nimport type { Size } from '../../types';\n\nexport interface TextareaProps extends Omit<BaseField.Control.Props, 'size' | 'render'> {\n size?: Exclude<Size, 'xs'>;\n /** Visible lines before it scrolls. Default 3. */\n rows?: number;\n}\n\nexport interface TextareaClassesOptions {\n size?: Exclude<Size, 'xs'>;\n}\n\n/**\n * The classes that make an element look like a Textarea. Use them on an app's\n * own multi-line field, such as a content-editable editor: focus shows the\n * ring, and `aria-invalid=\"true\"` or `aria-disabled=\"true\"` show those states.\n * See docs/custom-components.md.\n */\nexport function textareaClasses({ size = 'md' }: TextareaClassesOptions = {}) {\n return cx('mu-textarea', 'mu-base', `mu-s-${size}`);\n}\n\n/** A few lines of plain text. Looks like Input. */\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea({ size, rows = 3, className, ...props }, ref) {\n const resolved = useRowSize(size);\n return (\n <BaseField.Control\n ref={ref as never}\n {...props}\n render={<textarea rows={rows} />}\n className={withClass(textareaClasses({ size: resolved }), className)}\n />\n );\n});\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAS,SAASA,MAAiB,uBACnC,OAAS,cAAAC,MAAkB,QAC3B,OAAS,MAAAC,EAAI,aAAAC,MAAiB,+BAC9B,OAAS,cAAAC,MAAkB,yBA8Bb,cAAAC,MAAA,oBAXP,SAASC,EAAgB,CAAE,KAAAC,EAAO,IAAK,EAA4B,CAAC,EAAG,CAC5E,OAAOL,EAAG,cAAe,UAAW,QAAQK,CAAI,EAAE,CACpD,CAGO,IAAMC,EAAWP,EAA+C,SAAkB,CAAE,KAAAM,EAAM,KAAAE,EAAO,EAAG,UAAAC,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACrI,IAAMC,EAAWT,EAAWG,CAAI,EAChC,OACEF,EAACL,EAAU,QAAV,CACC,IAAKY,EACJ,GAAGD,EACJ,OAAQN,EAAC,YAAS,KAAMI,EAAM,EAC9B,UAAWN,EAAUG,EAAgB,CAAE,KAAMO,CAAS,CAAC,EAAGH,CAAS,EACrE,CAEJ,CAAC",
|
|
6
|
+
"names": ["BaseField", "forwardRef", "cx", "withClass", "useRowSize", "jsx", "textareaClasses", "size", "Textarea", "rows", "className", "props", "ref", "resolved"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{Toast as t}from"@base-ui/react/toast";import{CircleAlert as l,CircleCheck as p,Info as u,TriangleAlert as T,X as d}from"lucide-react";import{forwardRef as f}from"react";import{cx as i,withClass as g}from"../../internal/class-name.js";import{Button as P,buttonClasses as w}from"../button/index.js";import{jsx as o,jsxs as c}from"react/jsx-runtime";var L=t.Provider,h=t.useToastManager,
|
|
2
|
+
import{Toast as t}from"@base-ui/react/toast";import{CircleAlert as l,CircleCheck as p,Info as u,TriangleAlert as T,X as d}from"lucide-react";import{forwardRef as f}from"react";import{cx as i,withClass as g}from"../../internal/class-name.js";import{Button as P,buttonClasses as w}from"../button/index.js";import{jsx as o,jsxs as c}from"react/jsx-runtime";var L=t.Provider,h=t.useToastManager,A=t.createToastManager,R=f(function({container:r,closeLabel:s="Close",className:a,...n},m){return o(t.Portal,{container:r,children:o(t.Viewport,{ref:m,...n,className:g("mu-toast-viewport",a),children:o(C,{closeLabel:s})})})}),v={neutral:u,success:p,warning:T,danger:l},B=e=>e==="success"||e==="warning"||e==="danger"?e:"neutral";function C({closeLabel:e}){let{toasts:r}=t.useToastManager();return r.map(s=>{let a=B(s.type),n=v[a];return o(t.Root,{toast:s,className:i("mu-toast mu-popup mu-base mu-s-md",`mu-toast-${a}`),children:c(t.Content,{className:"mu-toast-content",children:[o(n,{className:"mu-toast-icon","aria-hidden":!0}),c("div",{className:"mu-toast-text",children:[o(t.Title,{className:"mu-toast-title mu-label"}),o(t.Description,{className:"mu-toast-description mu-caption"})]}),o(t.Action,{className:i("mu-toast-action",w({variant:"neutral",size:"sm"}))}),o(t.Close,{className:"mu-toast-close",render:o(P,{variant:"ghost",size:"sm",icon:o(d,{}),"aria-label":e})})]})},s.id)})}export{L as Provider,R as Viewport,A as createToastManager,h as useToastManager};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/toast/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Toast as BaseToast } from '@base-ui/react/toast';\nimport { CircleAlert, CircleCheck, Info, TriangleAlert, X } from 'lucide-react';\nimport { forwardRef } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport type { Tone } from '../../types';\nimport { Button, buttonClasses } from '../button';\n\nexport type ProviderProps = BaseToast.Provider.Props;\n\n/** Holds the toasts. Wrap the app in it once. `timeout` (default 5000ms) and `limit` (default 3) apply to every toast. */\nexport const Provider = BaseToast.Provider;\n\n/**\n * Adds, updates and closes toasts: `add({ title, description, type, actionProps, timeout })`.\n * `type` is the tone: \"success\", \"warning\", \"danger\", or none for neutral.\n */\nexport const useToastManager = BaseToast.useToastManager;\n\n/** A manager for code outside React. Pass it to `Provider` as `toastManager`. */\nexport const createToastManager = BaseToast.createToastManager;\n\nexport interface ViewportProps extends BaseToast.Viewport.Props {\n /** Where the toasts are portaled to. Default `document.body`. */\n container?: BaseToast.Portal.Props['container'];\n /** The accessible name of each toast's X button. Default \"Close\". */\n closeLabel?: string;\n}\n\n/** Shows the toasts: bottom-right, or bottom-center below `breakpoint-sm`. Render it once, inside Provider. */\nexport const Viewport = forwardRef<HTMLDivElement, ViewportProps>(function ToastViewport({ container, closeLabel = 'Close', className, ...props }, ref) {\n return (\n <BaseToast.Portal container={container}>\n <BaseToast.Viewport ref={ref} {...props} className={withClass('mu-toast-viewport', className)}>\n <ToastList closeLabel={closeLabel} />\n </BaseToast.Viewport>\n </BaseToast.Portal>\n );\n});\n\nconst icons = { neutral: Info, success: CircleCheck, warning: TriangleAlert, danger: CircleAlert };\n\nconst toneOf = (type: string | undefined): Tone => (type === 'success' || type === 'warning' || type === 'danger' ? type : 'neutral');\n\nfunction ToastList({ closeLabel }: { closeLabel: string }) {\n const { toasts } = BaseToast.useToastManager();\n return toasts.map((toast) => {\n const tone = toneOf(toast.type);\n const Icon = icons[tone];\n return (\n <BaseToast.Root key={toast.id} toast={toast} className={cx('mu-toast mu-popup mu-base mu-s-md', `mu-toast-${tone}`)}>\n <BaseToast.Content className=\"mu-toast-content\">\n <Icon className=\"mu-toast-icon\" aria-hidden />\n <div className=\"mu-toast-text\">\n <BaseToast.Title className=\"mu-toast-title mu-label\" />\n <BaseToast.Description className=\"mu-toast-description mu-
|
|
4
|
+
"sourcesContent": ["import { Toast as BaseToast } from '@base-ui/react/toast';\nimport { CircleAlert, CircleCheck, Info, TriangleAlert, X } from 'lucide-react';\nimport { forwardRef } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport type { Tone } from '../../types';\nimport { Button, buttonClasses } from '../button';\n\nexport type ProviderProps = BaseToast.Provider.Props;\n\n/** Holds the toasts. Wrap the app in it once. `timeout` (default 5000ms) and `limit` (default 3) apply to every toast. */\nexport const Provider = BaseToast.Provider;\n\n/**\n * Adds, updates and closes toasts: `add({ title, description, type, actionProps, timeout })`.\n * `type` is the tone: \"success\", \"warning\", \"danger\", or none for neutral.\n */\nexport const useToastManager = BaseToast.useToastManager;\n\n/** A manager for code outside React. Pass it to `Provider` as `toastManager`. */\nexport const createToastManager = BaseToast.createToastManager;\n\nexport interface ViewportProps extends BaseToast.Viewport.Props {\n /** Where the toasts are portaled to. Default `document.body`. */\n container?: BaseToast.Portal.Props['container'];\n /** The accessible name of each toast's X button. Default \"Close\". */\n closeLabel?: string;\n}\n\n/** Shows the toasts: bottom-right, or bottom-center below `breakpoint-sm`. Render it once, inside Provider. */\nexport const Viewport = forwardRef<HTMLDivElement, ViewportProps>(function ToastViewport({ container, closeLabel = 'Close', className, ...props }, ref) {\n return (\n <BaseToast.Portal container={container}>\n <BaseToast.Viewport ref={ref} {...props} className={withClass('mu-toast-viewport', className)}>\n <ToastList closeLabel={closeLabel} />\n </BaseToast.Viewport>\n </BaseToast.Portal>\n );\n});\n\nconst icons = { neutral: Info, success: CircleCheck, warning: TriangleAlert, danger: CircleAlert };\n\nconst toneOf = (type: string | undefined): Tone => (type === 'success' || type === 'warning' || type === 'danger' ? type : 'neutral');\n\nfunction ToastList({ closeLabel }: { closeLabel: string }) {\n const { toasts } = BaseToast.useToastManager();\n return toasts.map((toast) => {\n const tone = toneOf(toast.type);\n const Icon = icons[tone];\n return (\n <BaseToast.Root key={toast.id} toast={toast} className={cx('mu-toast mu-popup mu-base mu-s-md', `mu-toast-${tone}`)}>\n <BaseToast.Content className=\"mu-toast-content\">\n <Icon className=\"mu-toast-icon\" aria-hidden />\n <div className=\"mu-toast-text\">\n <BaseToast.Title className=\"mu-toast-title mu-label\" />\n <BaseToast.Description className=\"mu-toast-description mu-caption\" />\n </div>\n <BaseToast.Action className={cx('mu-toast-action', buttonClasses({ variant: 'neutral', size: 'sm' }))} />\n <BaseToast.Close className=\"mu-toast-close\" render={<Button variant=\"ghost\" size=\"sm\" icon={<X />} aria-label={closeLabel} />} />\n </BaseToast.Content>\n </BaseToast.Root>\n );\n });\n}\n"],
|
|
5
5
|
"mappings": ";AAAA,OAAS,SAASA,MAAiB,uBACnC,OAAS,eAAAC,EAAa,eAAAC,EAAa,QAAAC,EAAM,iBAAAC,EAAe,KAAAC,MAAS,eACjE,OAAS,cAAAC,MAAkB,QAC3B,OAAS,MAAAC,EAAI,aAAAC,MAAiB,+BAE9B,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,qBA4B9B,cAAAC,EAmBE,QAAAC,MAnBF,oBAvBD,IAAMC,EAAWb,EAAU,SAMrBc,EAAkBd,EAAU,gBAG5Be,EAAqBf,EAAU,mBAU/BgB,EAAWV,EAA0C,SAAuB,CAAE,UAAAW,EAAW,WAAAC,EAAa,QAAS,UAAAC,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACtJ,OACEV,EAACX,EAAU,OAAV,CAAiB,UAAWiB,EAC3B,SAAAN,EAACX,EAAU,SAAV,CAAmB,IAAKqB,EAAM,GAAGD,EAAO,UAAWZ,EAAU,oBAAqBW,CAAS,EAC1F,SAAAR,EAACW,EAAA,CAAU,WAAYJ,EAAY,EACrC,EACF,CAEJ,CAAC,EAEKK,EAAQ,CAAE,QAASpB,EAAM,QAASD,EAAa,QAASE,EAAe,OAAQH,CAAY,EAE3FuB,EAAUC,GAAoCA,IAAS,WAAaA,IAAS,WAAaA,IAAS,SAAWA,EAAO,UAE3H,SAASH,EAAU,CAAE,WAAAJ,CAAW,EAA2B,CACzD,GAAM,CAAE,OAAAQ,CAAO,EAAI1B,EAAU,gBAAgB,EAC7C,OAAO0B,EAAO,IAAKC,GAAU,CAC3B,IAAMC,EAAOJ,EAAOG,EAAM,IAAI,EACxBE,EAAON,EAAMK,CAAI,EACvB,OACEjB,EAACX,EAAU,KAAV,CAA8B,MAAO2B,EAAO,UAAWpB,EAAG,oCAAqC,YAAYqB,CAAI,EAAE,EAChH,SAAAhB,EAACZ,EAAU,QAAV,CAAkB,UAAU,mBAC3B,UAAAW,EAACkB,EAAA,CAAK,UAAU,gBAAgB,cAAW,GAAC,EAC5CjB,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACX,EAAU,MAAV,CAAgB,UAAU,0BAA0B,EACrDW,EAACX,EAAU,YAAV,CAAsB,UAAU,kCAAkC,GACrE,EACAW,EAACX,EAAU,OAAV,CAAiB,UAAWO,EAAG,kBAAmBG,EAAc,CAAE,QAAS,UAAW,KAAM,IAAK,CAAC,CAAC,EAAG,EACvGC,EAACX,EAAU,MAAV,CAAgB,UAAU,iBAAiB,OAAQW,EAACF,EAAA,CAAO,QAAQ,QAAQ,KAAK,KAAK,KAAME,EAACN,EAAA,EAAE,EAAI,aAAYa,EAAY,EAAI,GACjI,GATmBS,EAAM,EAU3B,CAEJ,CAAC,CACH",
|
|
6
6
|
"names": ["BaseToast", "CircleAlert", "CircleCheck", "Info", "TriangleAlert", "X", "forwardRef", "cx", "withClass", "Button", "buttonClasses", "jsx", "jsxs", "Provider", "useToastManager", "createToastManager", "Viewport", "container", "closeLabel", "className", "props", "ref", "ToastList", "icons", "toneOf", "type", "toasts", "toast", "tone", "Icon"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{Tooltip as o}from"@base-ui/react/tooltip";import{forwardRef as s}from"react";import{withClass as n}from"../../internal/class-name.js";import{splitPositioner as
|
|
2
|
+
import{Tooltip as o}from"@base-ui/react/tooltip";import{forwardRef as s}from"react";import{withClass as n}from"../../internal/class-name.js";import{splitPositioner as m}from"../../internal/popup.js";import{jsx as t,jsxs as T}from"react/jsx-runtime";var x=o.Provider,y=o.Root,R=s(function({delay:e=400,className:r,...i},p){return t(o.Trigger,{ref:p,delay:e,...i,className:n("mu-tooltip-trigger",r)})}),v=s(function({container:e,shortcut:r,className:i,children:p,...l},P){let[c,u]=m(l);return t(o.Portal,{container:e,children:t(o.Positioner,{sideOffset:6,...c,className:"mu-positioner",children:T(o.Popup,{ref:P,...u,className:n("mu-tooltip-popup mu-popup-motion mu-label-sm",i),children:[p,r!==void 0?t("span",{className:"mu-tooltip-shortcut",children:r}):null]})})})});export{v as Popup,x as Provider,y as Root,R as Trigger};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/tooltip/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { forwardRef, type ReactNode } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { splitPositioner } from '../../internal/popup';\n\nexport type ProviderProps = BaseTooltip.Provider.Props;\n\n/** Shares the hover delay between tooltips, so moving from one trigger to the next opens at once. */\nexport const Provider = BaseTooltip.Provider;\n\nexport type RootProps = BaseTooltip.Root.Props;\n\n/** Groups a trigger and its tooltip. */\nexport const Root = BaseTooltip.Root;\n\nexport interface TriggerProps extends BaseTooltip.Trigger.Props {\n /** Hover time before the tooltip opens, in ms. Default 400. */\n delay?: number;\n}\n\n/** The control the tooltip names. Usually `render={<Button icon={...} aria-label=\"...\" />}`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function TooltipTrigger({ delay = 400, className, ...props }, ref) {\n return <BaseTooltip.Trigger ref={ref} delay={delay} {...props} className={withClass('mu-tooltip-trigger', className)} />;\n});\n\ntype PositionerProps = Pick<\n BaseTooltip.Positioner.Props,\n 'side' | 'align' | '
|
|
4
|
+
"sourcesContent": ["import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { forwardRef, type ReactNode } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { splitPositioner } from '../../internal/popup';\n\nexport type ProviderProps = BaseTooltip.Provider.Props;\n\n/** Shares the hover delay between tooltips, so moving from one trigger to the next opens at once. */\nexport const Provider = BaseTooltip.Provider;\n\nexport type RootProps = BaseTooltip.Root.Props;\n\n/** Groups a trigger and its tooltip. */\nexport const Root = BaseTooltip.Root;\n\nexport interface TriggerProps extends BaseTooltip.Trigger.Props {\n /** Hover time before the tooltip opens, in ms. Default 400. */\n delay?: number;\n}\n\n/** The control the tooltip names. Usually `render={<Button icon={...} aria-label=\"...\" />}`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function TooltipTrigger({ delay = 400, className, ...props }, ref) {\n return <BaseTooltip.Trigger ref={ref} delay={delay} {...props} className={withClass('mu-tooltip-trigger', className)} />;\n});\n\ntype PositionerProps = Pick<\n BaseTooltip.Positioner.Props,\n 'side' | 'align' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'\n>;\n\nexport interface PopupProps extends BaseTooltip.Popup.Props, PositionerProps {\n /** A keyboard shortcut shown after the label, such as \"\u2318 K\". */\n shortcut?: ReactNode;\n /** Where the tooltip is portaled to. Default `document.body`. */\n container?: BaseTooltip.Portal.Props['container'];\n}\n\n/** The label: two or three words, the same text as the trigger's `aria-label`. */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function TooltipPopup({ container, shortcut, className, children, ...props }, ref) {\n const [positioner, rest] = splitPositioner(props);\n return (\n <BaseTooltip.Portal container={container}>\n <BaseTooltip.Positioner sideOffset={6} {...positioner} className=\"mu-positioner\">\n <BaseTooltip.Popup ref={ref} {...rest} className={withClass('mu-tooltip-popup mu-popup-motion mu-label-sm', className)}>\n {children}\n {shortcut !== undefined ? <span className=\"mu-tooltip-shortcut\">{shortcut}</span> : null}\n </BaseTooltip.Popup>\n </BaseTooltip.Positioner>\n </BaseTooltip.Portal>\n );\n});\n"],
|
|
5
5
|
"mappings": ";AAAA,OAAS,WAAWA,MAAmB,yBACvC,OAAS,cAAAC,MAAkC,QAC3C,OAAS,aAAAC,MAAiB,+BAC1B,OAAS,mBAAAC,MAAuB,0BAmBvB,cAAAC,EAqBD,QAAAC,MArBC,oBAdF,IAAMC,EAAWN,EAAY,SAKvBO,EAAOP,EAAY,KAQnBQ,EAAUP,EAA4C,SAAwB,CAAE,MAAAQ,EAAQ,IAAK,UAAAC,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACpI,OAAOR,EAACJ,EAAY,QAAZ,CAAoB,IAAKY,EAAK,MAAOH,EAAQ,GAAGE,EAAO,UAAWT,EAAU,qBAAsBQ,CAAS,EAAG,CACxH,CAAC,EAeYG,EAAQZ,EAAuC,SAAsB,CAAE,UAAAa,EAAW,SAAAC,EAAU,UAAAL,EAAW,SAAAM,EAAU,GAAGL,CAAM,EAAGC,EAAK,CAC7I,GAAM,CAACK,EAAYC,CAAI,EAAIf,EAAgBQ,CAAK,EAChD,OACEP,EAACJ,EAAY,OAAZ,CAAmB,UAAWc,EAC7B,SAAAV,EAACJ,EAAY,WAAZ,CAAuB,WAAY,EAAI,GAAGiB,EAAY,UAAU,gBAC/D,SAAAZ,EAACL,EAAY,MAAZ,CAAkB,IAAKY,EAAM,GAAGM,EAAM,UAAWhB,EAAU,+CAAgDQ,CAAS,EAClH,UAAAM,EACAD,IAAa,OAAYX,EAAC,QAAK,UAAU,sBAAuB,SAAAW,EAAS,EAAU,MACtF,EACF,EACF,CAEJ,CAAC",
|
|
6
6
|
"names": ["BaseTooltip", "forwardRef", "withClass", "splitPositioner", "jsx", "jsxs", "Provider", "Root", "Trigger", "delay", "className", "props", "ref", "Popup", "container", "shortcut", "children", "positioner", "rest"]
|
|
7
7
|
}
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import
|
|
2
|
+
import{themeTokens as r}from"./theme-tokens.js";import*as p from"./components/dialog/alert-dialog.js";import*as t from"./components/avatar/index.js";import{Badge as a,badgeClasses as x}from"./components/badge/index.js";import{Button as f,buttonClasses as l}from"./components/button/index.js";import{Checkbox as y}from"./components/checkbox/index.js";import*as i from"./components/collapsible/index.js";import*as P from"./components/combobox/index.js";import*as u from"./components/dialog/index.js";import*as C from"./components/field/index.js";import*as g from"./components/field/fieldset.js";import{Input as d,inputClasses as b}from"./components/input/index.js";import{Kbd as k}from"./components/kbd/index.js";import{Link as c}from"./components/link/index.js";import*as h from"./components/menu/index.js";import{menuClasses as v}from"./components/menu/classes.js";import*as G from"./components/popover/index.js";import{popoverClasses as R}from"./components/popover/classes.js";import{Prose as w}from"./components/prose/index.js";import{Radio as D,RadioGroup as F}from"./components/radio-group/index.js";import*as K from"./components/select/index.js";import{Separator as z}from"./components/separator/index.js";import{Skeleton as V}from"./components/skeleton/index.js";import{Spinner as q}from"./components/spinner/index.js";import{Switch as J}from"./components/switch/index.js";import*as N from"./components/table/index.js";import*as Q from"./components/tabs/index.js";import{Textarea as W,textareaClasses as X}from"./components/textarea/index.js";import*as Y from"./components/toast/index.js";import{Toggle as _}from"./components/toggle/index.js";import{ToggleGroup as oo}from"./components/toggle-group/index.js";import*as eo from"./components/tooltip/index.js";export{p as AlertDialog,t as Avatar,a as Badge,f as Button,y as Checkbox,i as Collapsible,P as Combobox,u as Dialog,C as Field,g as Fieldset,d as Input,k as Kbd,c as Link,h as Menu,G as Popover,w as Prose,D as Radio,F as RadioGroup,K as Select,z as Separator,V as Skeleton,q as Spinner,J as Switch,N as Table,Q as Tabs,W as Textarea,Y as Toast,_ as Toggle,oo as ToggleGroup,eo as Tooltip,x as badgeClasses,l as buttonClasses,b as inputClasses,v as menuClasses,R as popoverClasses,X as textareaClasses,r as themeTokens};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export type { IconElement, Size, Tone } from './types';\n\nexport * as AlertDialog from './components/dialog/alert-dialog';\nexport * as Avatar from './components/avatar';\nexport { Badge, type BadgeProps } from './components/badge';\nexport { Button, buttonClasses, type ButtonClassesOptions, type ButtonProps, type ButtonVariant } from './components/button';\nexport { Checkbox, type CheckboxProps } from './components/checkbox';\nexport * as Collapsible from './components/collapsible';\nexport * as Combobox from './components/combobox';\nexport * as Dialog from './components/dialog';\nexport * as Field from './components/field';\nexport * as Fieldset from './components/field/fieldset';\nexport { Input, type InputProps } from './components/input';\nexport { Kbd, type KbdProps } from './components/kbd';\nexport { Link, type LinkProps } from './components/link';\nexport * as Menu from './components/menu';\nexport * as Popover from './components/popover';\nexport { Prose, type ProseProps } from './components/prose';\nexport { Radio, RadioGroup, type RadioGroupProps, type RadioProps } from './components/radio-group';\nexport * as Select from './components/select';\nexport { Separator, type SeparatorProps } from './components/separator';\nexport { Skeleton, type SkeletonProps } from './components/skeleton';\nexport { Spinner, type SpinnerProps } from './components/spinner';\nexport { Switch, type SwitchProps } from './components/switch';\nexport * as Table from './components/table';\nexport * as Tabs from './components/tabs';\nexport { Textarea, type TextareaProps } from './components/textarea';\nexport * as Toast from './components/toast';\nexport { Toggle, type ToggleProps } from './components/toggle';\nexport { ToggleGroup, type ToggleGroupProps } from './components/toggle-group';\nexport * as Tooltip from './components/tooltip';\n"],
|
|
5
|
-
"mappings": ";
|
|
6
|
-
"names": ["AlertDialog", "Avatar", "Badge", "Button", "buttonClasses", "Checkbox", "Collapsible", "Combobox", "Dialog", "Field", "Fieldset", "Input", "Kbd", "Link", "Menu", "Popover", "Prose", "Radio", "RadioGroup", "Select", "Separator", "Skeleton", "Spinner", "Switch", "Table", "Tabs", "Textarea", "Toast", "Toggle", "ToggleGroup", "Tooltip"]
|
|
4
|
+
"sourcesContent": ["export type { IconElement, Size, Tone } from './types';\nexport { themeTokens } from './theme-tokens';\n\nexport * as AlertDialog from './components/dialog/alert-dialog';\nexport * as Avatar from './components/avatar';\nexport { Badge, badgeClasses, type BadgeClassesOptions, type BadgeProps } from './components/badge';\nexport { Button, buttonClasses, type ButtonClassesOptions, type ButtonProps, type ButtonVariant } from './components/button';\nexport { Checkbox, type CheckboxProps } from './components/checkbox';\nexport * as Collapsible from './components/collapsible';\nexport * as Combobox from './components/combobox';\nexport * as Dialog from './components/dialog';\nexport * as Field from './components/field';\nexport * as Fieldset from './components/field/fieldset';\nexport { Input, inputClasses, type InputClassesOptions, type InputProps } from './components/input';\nexport { Kbd, type KbdProps } from './components/kbd';\nexport { Link, type LinkProps } from './components/link';\nexport * as Menu from './components/menu';\nexport { menuClasses, type MenuClasses, type MenuClassesOptions } from './components/menu/classes';\nexport * as Popover from './components/popover';\nexport { popoverClasses, type PopoverClasses } from './components/popover/classes';\nexport { Prose, type ProseProps } from './components/prose';\nexport { Radio, RadioGroup, type RadioGroupProps, type RadioProps } from './components/radio-group';\nexport * as Select from './components/select';\nexport { Separator, type SeparatorProps } from './components/separator';\nexport { Skeleton, type SkeletonProps } from './components/skeleton';\nexport { Spinner, type SpinnerProps } from './components/spinner';\nexport { Switch, type SwitchProps } from './components/switch';\nexport * as Table from './components/table';\nexport * as Tabs from './components/tabs';\nexport { Textarea, textareaClasses, type TextareaClassesOptions, type TextareaProps } from './components/textarea';\nexport * as Toast from './components/toast';\nexport { Toggle, type ToggleProps } from './components/toggle';\nexport { ToggleGroup, type ToggleGroupProps } from './components/toggle-group';\nexport * as Tooltip from './components/tooltip';\n"],
|
|
5
|
+
"mappings": ";AACA,OAAS,eAAAA,MAAmB,oBAE5B,UAAYC,MAAiB,sCAC7B,UAAYC,MAAY,+BACxB,OAAS,SAAAC,EAAO,gBAAAC,MAA+D,8BAC/E,OAAS,UAAAC,EAAQ,iBAAAC,MAAsF,+BACvG,OAAS,YAAAC,MAAoC,iCAC7C,UAAYC,MAAiB,oCAC7B,UAAYC,MAAc,iCAC1B,UAAYC,MAAY,+BACxB,UAAYC,MAAW,8BACvB,UAAYC,MAAc,iCAC1B,OAAS,SAAAC,EAAO,gBAAAC,MAA+D,8BAC/E,OAAS,OAAAC,MAA0B,4BACnC,OAAS,QAAAC,MAA4B,6BACrC,UAAYC,MAAU,6BACtB,OAAS,eAAAC,MAA8D,+BACvE,UAAYC,MAAa,gCACzB,OAAS,kBAAAC,MAA2C,kCACpD,OAAS,SAAAC,MAA8B,8BACvC,OAAS,SAAAC,EAAO,cAAAC,MAAyD,oCACzE,UAAYC,MAAY,+BACxB,OAAS,aAAAC,MAAsC,kCAC/C,OAAS,YAAAC,MAAoC,iCAC7C,OAAS,WAAAC,MAAkC,gCAC3C,OAAS,UAAAC,MAAgC,+BACzC,UAAYC,MAAW,8BACvB,UAAYC,MAAU,6BACtB,OAAS,YAAAC,EAAU,mBAAAC,MAAwE,iCAC3F,UAAYC,MAAW,8BACvB,OAAS,UAAAC,MAAgC,+BACzC,OAAS,eAAAC,OAA0C,qCACnD,UAAYC,OAAa",
|
|
6
|
+
"names": ["themeTokens", "AlertDialog", "Avatar", "Badge", "badgeClasses", "Button", "buttonClasses", "Checkbox", "Collapsible", "Combobox", "Dialog", "Field", "Fieldset", "Input", "inputClasses", "Kbd", "Link", "Menu", "menuClasses", "Popover", "popoverClasses", "Prose", "Radio", "RadioGroup", "Select", "Separator", "Skeleton", "Spinner", "Switch", "Table", "Tabs", "Textarea", "textareaClasses", "Toast", "Toggle", "ToggleGroup", "Tooltip"]
|
|
7
7
|
}
|
package/dist/internal/popup.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
var t=["side","align","
|
|
2
|
+
var t=["side","align","collisionAvoidance","collisionBoundary","sticky","anchor","positionMethod","disableAnchorTracking","alignItemWithTrigger"];function r(s){let e={},i={};for(let[o,n]of Object.entries(s))t.includes(o)?n!==void 0&&(e[o]=n):i[o]=n;return[e,i]}export{r as splitPositioner};
|
|
3
3
|
//# sourceMappingURL=popup.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/internal/popup.tsx"],
|
|
4
|
-
"sourcesContent": ["/** Base UI's Positioner props that every folded `Popup` part accepts. */\nconst positionerKeys = [\n 'side',\n 'align',\n '
|
|
5
|
-
"mappings": ";AACA,IAAMA,EAAiB,CACrB,OACA,QACA,
|
|
4
|
+
"sourcesContent": ["/** Base UI's Positioner props that every folded `Popup` part accepts. */\nconst positionerKeys = [\n 'side',\n 'align',\n 'collisionAvoidance',\n 'collisionBoundary',\n 'sticky',\n 'anchor',\n 'positionMethod',\n 'disableAnchorTracking',\n 'alignItemWithTrigger',\n] as const;\n\ntype PositionerKey = (typeof positionerKeys)[number];\n\n/**\n * Splits a folded Popup's props into the ones for Base UI's Positioner and\n * the rest, for its Popup.\n */\nexport function splitPositioner<Props extends object>(props: Props) {\n const positioner: Record<string, unknown> = {};\n const rest: Record<string, unknown> = {};\n for (const [key, value] of Object.entries(props)) {\n if ((positionerKeys as readonly string[]).includes(key)) {\n if (value !== undefined) positioner[key] = value;\n } else {\n rest[key] = value;\n }\n }\n return [positioner, rest as Omit<Props, PositionerKey>] as const;\n}\n"],
|
|
5
|
+
"mappings": ";AACA,IAAMA,EAAiB,CACrB,OACA,QACA,qBACA,oBACA,SACA,SACA,iBACA,wBACA,sBACF,EAQO,SAASC,EAAsCC,EAAc,CAClE,IAAMC,EAAsC,CAAC,EACvCC,EAAgC,CAAC,EACvC,OAAW,CAACC,EAAKC,CAAK,IAAK,OAAO,QAAQJ,CAAK,EACxCF,EAAqC,SAASK,CAAG,EAChDC,IAAU,SAAWH,EAAWE,CAAG,EAAIC,GAE3CF,EAAKC,CAAG,EAAIC,EAGhB,MAAO,CAACH,EAAYC,CAAkC,CACxD",
|
|
6
6
|
"names": ["positionerKeys", "splitPositioner", "props", "positioner", "rest", "key", "value"]
|
|
7
7
|
}
|
package/dist/internal/size.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{createContext as i,useContext as n}from"react";var o=i(void 0);function
|
|
2
|
+
import{createContext as i,useContext as n}from"react";var o=i(void 0);function r(t){let e=n(o);return t??e??"md"}function u(t){let e=r(t);return e==="xs"?"sm":e}export{o as SizeContext,u as useRowSize,r as useSize};
|
|
3
3
|
//# sourceMappingURL=size.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/internal/size.ts"],
|
|
4
|
-
"sourcesContent": ["import { createContext, useContext } from 'react';\nimport type { Size } from '../types';\n\n/** The size set on a component's Root, read by its parts. */\nexport const SizeContext = createContext<Size | undefined>(undefined);\n\n/** The size to render at: the component's own prop, else the nearest Root's, else md. */\nexport function useSize(size?: Size): Size {\n const inherited = useContext(SizeContext);\n return size ?? inherited ?? 'md';\n}\n"],
|
|
5
|
-
"mappings": ";AAAA,OAAS,iBAAAA,EAAe,cAAAC,MAAkB,QAInC,IAAMC,EAAcF,EAAgC,MAAS,EAG7D,SAASG,EAAQC,EAAmB,CACzC,IAAMC,EAAYJ,EAAWC,CAAW,EACxC,OAAOE,GAAQC,GAAa,IAC9B",
|
|
6
|
-
"names": ["createContext", "useContext", "SizeContext", "useSize", "size", "inherited"]
|
|
4
|
+
"sourcesContent": ["import { createContext, useContext } from 'react';\nimport type { Size } from '../types';\n\n/** The size set on a component's Root, read by its parts. */\nexport const SizeContext = createContext<Size | undefined>(undefined);\n\n/** The size to render at: the component's own prop, else the nearest Root's, else md. */\nexport function useSize(size?: Size): Size {\n const inherited = useContext(SizeContext);\n return size ?? inherited ?? 'md';\n}\n\n/** useSize for components without xs: text entry, menus, tabs and tables. An xs inherited from a parent renders them at sm. */\nexport function useRowSize(size?: Exclude<Size, 'xs'>): Exclude<Size, 'xs'> {\n const resolved = useSize(size);\n return resolved === 'xs' ? 'sm' : resolved;\n}\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAS,iBAAAA,EAAe,cAAAC,MAAkB,QAInC,IAAMC,EAAcF,EAAgC,MAAS,EAG7D,SAASG,EAAQC,EAAmB,CACzC,IAAMC,EAAYJ,EAAWC,CAAW,EACxC,OAAOE,GAAQC,GAAa,IAC9B,CAGO,SAASC,EAAWF,EAAiD,CAC1E,IAAMG,EAAWJ,EAAQC,CAAI,EAC7B,OAAOG,IAAa,KAAO,KAAOA,CACpC",
|
|
6
|
+
"names": ["createContext", "useContext", "SizeContext", "useSize", "size", "inherited", "useRowSize", "resolved"]
|
|
7
7
|
}
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer mu{.mu-s-sm{--h: var(--mu-control-sm);--px: var(--mu-space-2);--pxi: 6px;--fs: 12px;--lh: 16px;--r: var(--mu-radius-sm);--gap: var(--mu-space-1);--icon: var(--mu-icon-sm);--icon-stroke: 1.25px;--box: 16px}.mu-s-md{--h: var(--mu-control-md);--px: var(--mu-space-3);--pxi: 10px;--fs: 14px;--lh: 20px;--r: var(--mu-radius-md);--gap: 6px;--icon: var(--mu-icon-md);--icon-stroke: 1.5px;--box: 18px}.mu-s-lg{--h: var(--mu-control-lg);--px: var(--mu-space-4);--pxi: var(--mu-space-3);--fs: 16px;--lh: 24px;--r: var(--mu-radius-lg);--gap: var(--mu-space-2);--icon: var(--mu-icon-lg);--icon-stroke: 1.5px;--box: 20px}.mu-recessed{background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-raised{background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),rgba(255,255,255,0) 60%);box-shadow:var(--mu-shadow-raised)}.mu-key{background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),rgba(255,255,255,0) 60%);box-shadow:var(--mu-shadow-key)}.mu-popup{background:var(--mu-surface);box-shadow:var(--mu-shadow-pop);border-radius:var(--mu-radius-xl)}.mu-positioner{z-index:var(--mu-layer-popup);outline:0}.mu-popup-motion{transition:opacity var(--mu-duration-fade) var(--mu-ease-out),translate var(--mu-duration-fade) var(--mu-ease-out)}.mu-popup-motion[data-starting-style],.mu-popup-motion[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}.mu-popup-motion[data-instant]{transition:none}@media(prefers-reduced-motion:reduce){.mu-popup-motion[data-starting-style],.mu-popup-motion[data-ending-style]{translate:none}}.mu-base{font-family:var(--mu-font-sans);font-size:var(--fs, 14px);line-height:var(--lh, 20px);font-weight:500;letter-spacing:0;color:var(--mu-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}.mu-base ::selection,.mu-base::selection{background:var(--mu-selection)}.mu-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.mu-focus:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-hit{position:relative}@media(pointer:coarse){.mu-hit:after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--mu-hit-area));height:max(100%,var(--mu-hit-area));transform:translate(-50%,-50%)}}.mu-icon,.mu-base svg.lucide,.mu-prose svg.lucide{width:var(--icon, 16px);height:var(--icon, 16px);flex:none;display:block;stroke-width:var(--icon-stroke, 1.5px)}.mu-icon *,.mu-base svg.lucide *,.mu-prose svg.lucide *{vector-effect:non-scaling-stroke}.mu-label-xs{font-family:var(--mu-font-sans);font-size:11px;line-height:16px;font-weight:500}.mu-caption{font-family:var(--mu-font-sans);font-size:12px;line-height:16px;font-weight:400}.mu-label-sm{font-family:var(--mu-font-sans);font-size:12px;line-height:16px;font-weight:500}.mu-body-sm{font-family:var(--mu-font-sans);font-size:13px;line-height:18px;font-weight:400}.mu-body{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;font-weight:400}.mu-label{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;font-weight:500}.mu-body-lg{font-family:var(--mu-font-sans);font-size:16px;line-height:24px;font-weight:400}.mu-label-lg{font-family:var(--mu-font-sans);font-size:16px;line-height:24px;font-weight:500}.mu-title{font-family:var(--mu-font-display);font-size:18px;line-height:28px;font-weight:600}.mu-heading-3{font-family:var(--mu-font-display);font-size:20px;line-height:28px;font-weight:600}.mu-heading-2{font-family:var(--mu-font-display);font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em}.mu-heading-1{font-family:var(--mu-font-display);font-size:32px;line-height:40px;font-weight:600;letter-spacing:-.01em}.mu-display{font-family:var(--mu-font-display);font-size:40px;line-height:48px;font-weight:600;letter-spacing:-.02em}.mu-prose{--prose-fs: 15px;--prose-lh: 24px;--prose-h1: 20px;--prose-h1-lh: 28px;--prose-h2: 17px;--prose-h2-lh: 24px;--prose-head: 12px;--prose-head-lh: 16px}.mu-prose-sm{--prose-fs: 14px;--prose-lh: 22px}}@layer mu{.mu-spinner{display:inline-block;flex:none;box-sizing:border-box;width:var(--icon);height:var(--icon);border:var(--icon-stroke) solid currentColor;border-top-color:transparent;border-radius:var(--mu-radius-full);animation:mu-spin var(--mu-duration-spin) linear infinite}@keyframes mu-spin{to{rotate:1turn}}}@layer mu{.mu-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--gap);box-sizing:border-box;height:var(--h);margin:0;padding:0 var(--px);border:0;border-radius:var(--r);color:var(--mu-ink);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-raised);white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;transition-property:background-color,box-shadow,color,translate;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-button:has(>svg:first-child){padding-inline-start:var(--pxi)}.mu-button.mu-button-icon{width:var(--h);padding:0}.mu-button-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@media(hover:hover){.mu-button:hover:not([data-disabled]){background-color:var(--mu-key-hover)}.mu-button-primary:hover:not([data-disabled]){background-color:var(--mu-primary-hover)}.mu-button-danger:hover:not([data-disabled]){background-color:var(--mu-danger-key);filter:brightness(1.08)}.mu-button-ghost:hover:not([data-disabled]){background-color:var(--mu-hover);color:var(--mu-ink)}}.mu-button:active:not([data-disabled]){translate:0 .5px;box-shadow:var(--mu-shadow-pressed)}.mu-button-primary{color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-button-danger{color:var(--mu-on-danger);background-color:var(--mu-danger-key)}.mu-button-ghost{color:var(--mu-ink-muted);background-color:transparent;background-image:none;box-shadow:none}.mu-button-ghost[data-popup-open]{background-color:var(--mu-hover);color:var(--mu-ink)}.mu-button-ghost:active:not([data-disabled]){translate:none;background-color:var(--mu-well);box-shadow:var(--mu-shadow-track)}.mu-button[data-disabled]:not([data-loading]){opacity:.45;cursor:not-allowed}.mu-button[data-loading]{cursor:progress}.mu-button[data-loading]>:not(.mu-spinner){opacity:0}.mu-button>.mu-spinner{position:absolute;inset:0;margin:auto}@media(prefers-reduced-motion:reduce){.mu-button:active:not([data-disabled]){translate:none}}}@layer mu{.mu-kbd{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(var(--mu-control-sm) - 2 * var(--mu-inset));height:calc(var(--mu-control-sm) - 2 * var(--mu-inset));padding:0 var(--mu-space-1);border-radius:var(--mu-radius-sm);color:var(--mu-ink-muted);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-raised);white-space:nowrap}}@layer mu{.mu-separator{flex:none;align-self:stretch;margin:0;border:0;background-color:var(--mu-line)}.mu-separator[data-orientation=horizontal]{height:1px}.mu-separator[data-orientation=vertical]{width:1px}}@layer mu{.mu-badge{--icon: calc(var(--mu-icon-sm) - var(--mu-inset));display:inline-flex;align-items:center;gap:var(--mu-space-1);box-sizing:border-box;height:calc(var(--mu-control-sm) - 2 * var(--mu-inset));padding:0 calc(var(--mu-space-1) + var(--mu-inset));border-radius:var(--mu-radius-sm);white-space:nowrap;vertical-align:middle}.mu-badge-neutral{color:var(--mu-ink);background-color:var(--mu-well)}.mu-badge-outline{color:var(--mu-ink-muted);box-shadow:inset 0 0 0 1px var(--mu-edge)}.mu-badge-success{color:var(--mu-success);background-color:var(--mu-success-soft)}.mu-badge-warning{color:var(--mu-warning);background-color:var(--mu-warning-soft)}.mu-badge-danger{color:var(--mu-danger);background-color:var(--mu-danger-soft)}}@layer mu{.mu-avatar-root{display:inline-flex;flex:none;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;width:var(--h);height:var(--h);border-radius:var(--mu-radius-full);color:var(--mu-ink-muted);background-color:var(--mu-well);vertical-align:middle;user-select:none}.mu-avatar-image{width:100%;height:100%;object-fit:cover}.mu-avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%}}@layer mu{.mu-link{color:var(--mu-accent);text-decoration:none;text-underline-offset:.2em;border-radius:var(--mu-radius-xs);cursor:pointer}.mu-link:hover,.mu-link:focus-visible,.mu-link-underline{text-decoration:underline}[data-theme=contrast] .mu-link{text-decoration:underline}.mu-link-muted{color:var(--mu-ink-muted)}.mu-link-muted:hover{color:var(--mu-ink)}.mu-link>.mu-icon{display:inline-block;width:.85em;height:.85em;margin-inline-start:.1em;vertical-align:-.05em}}@layer mu{.mu-skeleton{box-sizing:border-box;width:100%;height:var(--lh);border-radius:var(--mu-radius-sm);background-color:var(--mu-well);background-image:linear-gradient(90deg,transparent 0%,var(--mu-hover) 50%,transparent 100%);background-size:200% 100%;background-repeat:no-repeat;animation:mu-shimmer var(--mu-duration-shimmer) ease-in-out infinite}.mu-skeleton-round{width:var(--h);height:var(--h);border-radius:var(--mu-radius-full)}@keyframes mu-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@media(prefers-reduced-motion:reduce){.mu-skeleton{animation:none;background-image:none}}}@layer mu{.mu-field-root{display:flex;flex-direction:column;gap:var(--mu-space-1);min-width:0}.mu-field-label{color:var(--mu-ink)}.mu-field-item{display:flex}.mu-field-label:has(>.mu-checkbox,>.mu-switch,>.mu-radio){display:inline-flex;align-items:center;gap:var(--mu-space-2);font-weight:400;cursor:pointer}.mu-field-label[data-disabled]{opacity:.45;cursor:not-allowed}.mu-field-description{margin:0;color:var(--mu-ink-muted)}.mu-field-root[data-invalid]>.mu-field-description{display:none}.mu-field-error{display:flex;align-items:flex-start;gap:var(--mu-space-1);color:var(--mu-danger)}.mu-field-error>.mu-icon{--icon: var(--mu-icon-sm);margin-block:calc((1lh - var(--mu-icon-sm)) / 2)}.mu-fieldset-root{display:flex;flex-direction:column;gap:var(--mu-space-3);min-width:0;margin:0;padding:0;border:0}.mu-fieldset-legend{margin-bottom:var(--mu-space-1);padding:0;color:var(--mu-ink)}}@layer mu{.mu-input-root{display:flex;align-items:center;gap:var(--gap);box-sizing:border-box;width:100%;min-width:0;height:var(--h);padding:0 var(--px);border-radius:var(--r);color:var(--mu-ink);background-color:var(--mu-surface);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:text;transition:box-shadow var(--mu-duration-fade) var(--mu-ease-out)}.mu-input-root:has(>.mu-input-prefix){padding-inline-start:var(--pxi)}.mu-input-root:has(>.mu-input-suffix){padding-inline-end:var(--pxi)}@media(hover:hover){.mu-input-root:hover:not(:has(>[data-disabled])){box-shadow:inset 0 0 0 1px var(--mu-ink-muted),var(--mu-shadow-track)}}.mu-input-root:has(>.mu-input:focus){outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-input-root:has(>[data-invalid]){box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-input-root:has(>[data-disabled]){opacity:.45;cursor:not-allowed}.mu-input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;outline:none;color:inherit;background:none;font:inherit;font-weight:400}.mu-input::placeholder{color:var(--mu-ink-muted);opacity:1}.mu-input[data-disabled]{cursor:not-allowed}.mu-input-prefix,.mu-input-suffix{display:flex;flex:none;align-items:center;gap:var(--mu-space-1);color:var(--mu-ink-muted)}}@layer mu{.mu-textarea{display:block;box-sizing:border-box;width:100%;min-height:var(--h);margin:0;padding:calc((var(--h) - var(--lh)) / 2) var(--px);border:0;border-radius:var(--r);color:var(--mu-ink);background-color:var(--mu-surface);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);font-weight:400;resize:vertical;transition:box-shadow var(--mu-duration-fade) var(--mu-ease-out)}.mu-textarea::placeholder{color:var(--mu-ink-muted);opacity:1}@media(hover:hover){.mu-textarea:hover:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--mu-ink-muted),var(--mu-shadow-track)}}.mu-textarea:focus{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-textarea[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-textarea[data-disabled]{opacity:.45;cursor:not-allowed}}@layer mu{.mu-checkbox{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--box);height:var(--box);border-radius:var(--mu-radius-sm);color:var(--mu-on-primary);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition-property:background-color,box-shadow,scale;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-checkbox[data-checked],.mu-checkbox[data-indeterminate]{background-color:var(--mu-primary);box-shadow:none}.mu-checkbox[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-checkbox:active:not([data-disabled],[data-readonly]){scale:.94}.mu-checkbox[data-disabled]{opacity:.45;cursor:not-allowed}.mu-checkbox-indicator{display:flex;transition:opacity var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press),scale var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press)}.mu-checkbox-indicator[data-starting-style],.mu-checkbox-indicator[data-ending-style]{opacity:0;scale:.6}.mu-checkbox-indicator>svg{width:calc(var(--box) - 2 * var(--mu-inset));height:calc(var(--box) - 2 * var(--mu-inset));stroke-width:2}.mu-checkbox-indicator>svg *{vector-effect:non-scaling-stroke}@media(prefers-reduced-motion:reduce){.mu-checkbox:active:not([data-disabled],[data-readonly]){scale:none}.mu-checkbox-indicator[data-starting-style],.mu-checkbox-indicator[data-ending-style]{scale:none}}}@layer mu{.mu-switch{--switch-h: calc(var(--box) + var(--mu-inset));--switch-w: calc(var(--switch-h) * 1.7);--knob: calc(var(--switch-h) - 2 * var(--mu-inset));position:relative;display:inline-flex;flex:none;align-items:center;box-sizing:border-box;width:var(--switch-w);height:var(--switch-h);padding:var(--mu-inset);border-radius:var(--mu-radius-full);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition:background-color var(--mu-duration-settle) var(--mu-ease-settle),box-shadow var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch[data-checked]{background-color:var(--mu-primary);box-shadow:inset 0 0 0 1px var(--mu-primary)}.mu-switch[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-switch[data-disabled]{opacity:.45;cursor:not-allowed}.mu-switch-thumb{display:block;width:var(--knob);height:var(--knob);border-radius:var(--mu-radius-full);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-key);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),scale var(--mu-duration-press) var(--mu-ease-out),background-color var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch-thumb[data-checked]{translate:calc(var(--switch-w) - var(--switch-h)) 0;background-color:var(--mu-on-primary)}.mu-switch:active:not([data-disabled],[data-readonly])>.mu-switch-thumb{scale:1.1}@media(prefers-reduced-motion:reduce){.mu-switch-thumb{transition-property:background-color}.mu-switch:active:not([data-disabled],[data-readonly])>.mu-switch-thumb{scale:none}}}@layer mu{.mu-radio-group{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mu-space-3)}.mu-radio-group[data-orientation=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--mu-space-3) var(--mu-space-4)}.mu-radio-group[data-orientation=horizontal]>.mu-fieldset-legend{flex-basis:100%}.mu-radio{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--box);height:var(--box);border-radius:var(--mu-radius-full);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition-property:background-color,box-shadow,scale;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-radio[data-checked]{background-color:var(--mu-primary);box-shadow:none}.mu-radio[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-radio:active:not([data-disabled],[data-readonly]){scale:.94}.mu-radio[data-disabled]{opacity:.45;cursor:not-allowed}.mu-radio-indicator{width:calc(var(--box) / 2.5);height:calc(var(--box) / 2.5);border-radius:var(--mu-radius-full);background-color:var(--mu-on-primary);transition:opacity var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press),scale var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press)}.mu-radio-indicator[data-starting-style],.mu-radio-indicator[data-ending-style]{opacity:0;scale:.4}@media(prefers-reduced-motion:reduce){.mu-radio:active:not([data-disabled],[data-readonly]){scale:none}.mu-radio-indicator[data-starting-style],.mu-radio-indicator[data-ending-style]{scale:none}}}@layer mu{.mu-toggle{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:var(--gap);box-sizing:border-box;height:var(--h);margin:0;padding:0 var(--px);border:0;border-radius:var(--r);color:var(--mu-ink-muted);background-color:transparent;white-space:nowrap;cursor:pointer;user-select:none;transition-property:background-color,box-shadow,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-toggle:has(>svg:first-child){padding-inline-start:var(--pxi)}.mu-toggle.mu-toggle-icon{width:var(--h);padding:0}@media(hover:hover){.mu-toggle:hover:not([data-disabled]){color:var(--mu-ink);background-color:var(--mu-hover)}}.mu-toggle[data-pressed],.mu-toggle:active:not([data-disabled]){color:var(--mu-ink);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-toggle[data-disabled]{opacity:.45;cursor:not-allowed}}@layer mu{.mu-segmented{position:relative;display:inline-flex;align-items:stretch;gap:0;box-sizing:border-box;height:var(--h);padding:var(--mu-inset);border-radius:var(--r);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-segmented-key{position:absolute;top:var(--mu-inset);left:0;width:var(--key-width);height:calc(var(--h) - 2 * var(--mu-inset));translate:var(--key-left) 0;border-radius:calc(var(--r) - var(--mu-inset));background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-key);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),width var(--mu-duration-settle) var(--mu-ease-settle)}.mu-toggle-group.mu-segmented:not([data-keyed])>.mu-segmented-key{display:none}.mu-tabs-indicator{--key-left: var(--active-tab-left);--key-width: var(--active-tab-width)}.mu-segmented-item,.mu-segmented>.mu-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--gap);box-sizing:border-box;height:100%;margin:0;padding:0 calc(var(--px) - var(--mu-inset));border:0;border-radius:calc(var(--r) - var(--mu-inset));color:var(--mu-ink-muted);background:none;box-shadow:none;font:inherit;white-space:nowrap;cursor:pointer;user-select:none;transition:color var(--mu-duration-fade) var(--mu-ease-out)}.mu-segmented>.mu-toggle.mu-toggle-icon{width:calc(var(--h) - 2 * var(--mu-inset));padding:0}@media(hover:hover){.mu-segmented-item:hover:not([data-disabled]),.mu-segmented>.mu-toggle:hover:not([data-disabled]){color:var(--mu-ink);background:none}}.mu-segmented-item[data-active],.mu-segmented>.mu-toggle[data-pressed],.mu-segmented>.mu-toggle:active:not([data-disabled]){color:var(--mu-ink);background:none;box-shadow:none}.mu-segmented-item[data-disabled]{opacity:.45;cursor:not-allowed}.mu-tabs-root{display:flex;flex-direction:column;gap:var(--mu-space-4)}.mu-tabs-list{align-self:flex-start}.mu-tabs-panel{border-radius:var(--mu-radius-sm)}@media(prefers-reduced-motion:reduce){.mu-segmented-key{transition:none}}}@layer mu{.mu-toggle-group{display:inline-flex;align-items:center;gap:var(--mu-inset)}.mu-toggle-group>.mu-separator{align-self:center;height:calc(var(--h) - 2 * var(--mu-space-2));margin-inline:var(--mu-space-1)}}@layer mu{.mu-tooltip-popup{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;max-width:var(--mu-tooltip-width);padding:var(--mu-space-1) var(--mu-space-2);border-radius:var(--mu-radius-md);color:var(--mu-on-primary);background-color:var(--mu-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mu-tooltip-shortcut{opacity:.65}}@layer mu{.mu-popover-popup{display:flex;flex-direction:column;gap:var(--mu-space-3);box-sizing:border-box;width:var(--mu-popover-width);max-width:var(--available-width);padding:var(--mu-space-4);outline:0}.mu-popover-title{margin:0;color:var(--mu-ink)}.mu-popover-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-ink-muted)}}@layer mu{.mu-menu-popup{box-sizing:border-box;min-width:var(--mu-menu-width);max-height:var(--available-height);overflow-y:auto;padding:var(--mu-space-1);outline:0}.mu-menu-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--h);padding:0 var(--px);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-menu-item:has(>svg:first-child){padding-inline-start:var(--pxi)}.mu-menu-item>svg{color:var(--mu-ink-muted)}.mu-menu-item[data-highlighted],.mu-menu-submenu-trigger[data-popup-open]{background-color:var(--mu-hover)}.mu-menu-item[data-disabled]{opacity:.45}.mu-menu-item-danger,.mu-menu-item-danger>svg{color:var(--mu-danger)}.mu-menu-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-menu-shortcut{margin-inline-start:var(--mu-space-4);color:var(--mu-ink-muted)}.mu-menu-indicator{display:grid;flex:none;place-items:center;width:var(--icon);height:var(--icon);margin-inline-start:var(--mu-space-2)}.mu-menu-indicator>svg{color:var(--mu-ink)}.mu-menu-chevron{margin-inline-end:calc(var(--pxi) - var(--px));color:var(--mu-ink-muted)}.mu-menu-group-label{padding:var(--mu-space-2) var(--px) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-menu-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}}@layer mu{.mu-select-trigger{justify-content:space-between;min-width:0;padding-inline-end:var(--pxi);text-align:start}.mu-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mu-select-value[data-placeholder]{color:var(--mu-ink-muted);font-weight:400}.mu-select-icon{display:flex;flex:none;color:var(--mu-ink-muted)}.mu-select-trigger[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-key)}.mu-select-positioner{outline:0}.mu-select-popup{box-sizing:border-box;min-width:max(var(--mu-menu-width),var(--anchor-width));max-height:var(--available-height);padding:var(--mu-space-1);outline:0}.mu-select-list{overflow-y:auto;max-height:var(--available-height);scroll-padding-block:var(--mu-space-1);outline:0}.mu-select-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--h);padding:0 var(--px);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-select-item:has(>svg:first-child){padding-inline-start:var(--pxi)}.mu-select-item>svg{color:var(--mu-ink-muted)}.mu-select-item[data-highlighted]{background-color:var(--mu-hover)}.mu-select-item[data-disabled]{opacity:.45}.mu-select-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-select-indicator{display:grid;flex:none;place-items:center;width:var(--icon);height:var(--icon);margin-inline-start:var(--mu-space-2);color:var(--mu-ink)}.mu-select-group-label{padding:var(--mu-space-2) var(--px) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-select-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}.mu-select-scroll-arrow{display:grid;place-items:center;height:var(--mu-space-4);color:var(--mu-ink-muted)}}@layer mu{.mu-dialog-backdrop{position:fixed;inset:0;z-index:var(--mu-layer-overlay);background-color:var(--mu-overlay);transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-dialog-backdrop[data-starting-style],.mu-dialog-backdrop[data-ending-style]{opacity:0}.mu-dialog-viewport{position:fixed;inset:0;z-index:var(--mu-layer-overlay);display:grid;place-items:safe center;box-sizing:border-box;padding:var(--mu-space-6) var(--mu-space-4);overflow-y:auto}.mu-dialog-popup{position:relative;display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;width:var(--mu-dialog-width);max-width:100%;padding:var(--mu-space-5);border-radius:var(--mu-radius-2xl);outline:0;transition:opacity var(--mu-duration-settle) var(--mu-ease-out),translate var(--mu-duration-settle) var(--mu-ease-out)}.mu-dialog-popup[data-starting-style],.mu-dialog-popup[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}.mu-dialog-popup:has(>.mu-dialog-x)>.mu-dialog-title{padding-inline-end:var(--mu-space-6)}.mu-dialog-title{margin:0;color:var(--mu-ink)}.mu-dialog-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-ink-muted)}.mu-dialog-x{position:absolute;top:var(--mu-space-4);right:var(--mu-space-4)}.mu-dialog-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mu-space-2);margin-top:var(--mu-space-2)}@media(max-width:639.98px){.mu-dialog-sheet{place-items:end stretch;padding:var(--mu-space-6) 0 0}.mu-dialog-sheet>.mu-dialog-popup{width:100%;padding-bottom:max(var(--mu-space-5),env(safe-area-inset-bottom));border-end-start-radius:0;border-end-end-radius:0}.mu-dialog-sheet>.mu-dialog-popup[data-starting-style],.mu-dialog-sheet>.mu-dialog-popup[data-ending-style]{translate:0 var(--mu-space-6)}.mu-dialog-sheet .mu-dialog-footer{flex-direction:column-reverse}.mu-dialog-sheet .mu-dialog-footer>*{width:100%}}@media(prefers-reduced-motion:reduce){.mu-dialog-popup[data-starting-style],.mu-dialog-popup[data-ending-style],.mu-dialog-sheet>.mu-dialog-popup[data-starting-style],.mu-dialog-sheet>.mu-dialog-popup[data-ending-style]{translate:none}}}@layer mu{.mu-toast-viewport{position:fixed;right:var(--mu-space-6);bottom:var(--mu-space-6);z-index:var(--mu-layer-toast);width:var(--mu-toast-width);outline:0}@media(max-width:639.98px){.mu-toast-viewport{right:var(--mu-space-4);bottom:var(--mu-space-4);left:var(--mu-space-4);width:auto}}.mu-toast{--gap: var(--mu-space-3);--peek: var(--mu-space-2);--scale: max(0, 1 - var(--toast-index) * .05);--shrink: calc(1 - var(--scale));--height: var(--toast-frontmost-height, var(--toast-height));--offset-y: calc(var(--toast-offset-y) * -1 - var(--toast-index) * var(--gap) + var(--toast-swipe-movement-y));position:absolute;right:0;bottom:0;z-index:calc(var(--mu-layer-toast) - var(--toast-index));box-sizing:border-box;width:100%;height:var(--height);transform-origin:bottom center;translate:var(--toast-swipe-movement-x) calc(var(--toast-swipe-movement-y) - var(--toast-index) * var(--peek) - var(--shrink) * var(--height));scale:var(--scale);user-select:none;outline:0;transition:translate var(--mu-duration-settle) var(--mu-ease-settle),scale var(--mu-duration-settle) var(--mu-ease-settle),opacity var(--mu-duration-settle) var(--mu-ease-out),height var(--mu-duration-fade) var(--mu-ease-out)}.mu-toast[data-expanded]{height:var(--toast-height);translate:var(--toast-swipe-movement-x) var(--offset-y);scale:1}.mu-toast[data-starting-style],.mu-toast[data-ending-style]{translate:0 150%}.mu-toast[data-ending-style]{opacity:0}.mu-toast[data-ending-style][data-swipe-direction=up]{translate:0 calc(var(--toast-swipe-movement-y) - 150%)}.mu-toast[data-ending-style][data-swipe-direction=down]{translate:0 calc(var(--toast-swipe-movement-y) + 150%)}.mu-toast[data-ending-style][data-swipe-direction=left]{translate:calc(var(--toast-swipe-movement-x) - 150%) var(--offset-y)}.mu-toast[data-ending-style][data-swipe-direction=right]{translate:calc(var(--toast-swipe-movement-x) + 150%) var(--offset-y)}.mu-toast[data-limited]{opacity:0}.mu-toast:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-toast:after{content:"";position:absolute;top:100%;left:0;width:100%;height:calc(var(--gap) + 1px)}.mu-toast-content{display:flex;align-items:flex-start;gap:var(--mu-space-3);box-sizing:border-box;height:100%;padding:var(--mu-space-3) var(--mu-space-3) var(--mu-space-3) var(--mu-space-4);overflow:hidden;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-content[data-behind]{opacity:0}.mu-toast-content[data-expanded]{opacity:1}.mu-toast-icon{margin-block:calc((var(--h) - var(--icon)) / 2);color:var(--mu-ink-muted)}.mu-toast-success .mu-toast-icon{color:var(--mu-success)}.mu-toast-warning .mu-toast-icon{color:var(--mu-warning)}.mu-toast-danger .mu-toast-icon{color:var(--mu-danger)}.mu-toast-text{display:flex;flex:1;flex-direction:column;min-width:0;padding-block:calc((var(--h) - var(--lh)) / 2)}.mu-toast-title{margin:0;color:var(--mu-ink)}.mu-toast-description{margin:0;color:var(--mu-ink-muted)}.mu-toast-action,.mu-toast-close{margin-block:calc((var(--mu-control-md) - var(--mu-control-sm)) / 2)}@media(prefers-reduced-motion:reduce){.mu-toast{transition-property:opacity,height}.mu-toast[data-starting-style],.mu-toast[data-ending-style]{translate:var(--toast-swipe-movement-x) var(--offset-y)}}}@layer mu{.mu-input-root.mu-combobox-input-root{padding-inline-end:calc(var(--pxi) - var(--mu-space-1))}.mu-combobox-trigger{display:grid;place-items:center;width:calc(var(--icon) + var(--mu-space-2));height:calc(var(--icon) + var(--mu-space-2));margin:0;padding:0;border:0;border-radius:var(--mu-radius-sm);color:var(--mu-ink-muted);background:none;cursor:pointer}.mu-combobox-trigger:hover:not([data-disabled]){color:var(--mu-ink)}.mu-combobox-trigger[data-disabled]{cursor:not-allowed}.mu-combobox-popup{box-sizing:border-box;width:var(--anchor-width);min-width:var(--mu-menu-width);max-width:var(--available-width);outline:0}.mu-combobox-list{box-sizing:border-box;max-height:min(var(--mu-list-height),var(--available-height));overflow-y:auto;overscroll-behavior:contain;padding:var(--mu-space-1);scroll-padding-block:var(--mu-space-1);outline:0}.mu-combobox-list[data-empty]{padding:0}.mu-combobox-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--h);padding:0 var(--px);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-combobox-item:has(>svg:first-child){padding-inline-start:var(--pxi)}.mu-combobox-item>svg{color:var(--mu-ink-muted)}.mu-combobox-item[data-highlighted]{background-color:var(--mu-hover)}.mu-combobox-item[data-disabled]{opacity:.45}.mu-combobox-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-combobox-indicator{display:grid;flex:none;place-items:center;width:var(--icon);height:var(--icon);margin-inline-start:var(--mu-space-2);color:var(--mu-ink)}.mu-combobox-empty:not(:empty){padding:var(--mu-space-3) var(--mu-space-4);color:var(--mu-ink-muted)}.mu-combobox-group-label{padding:var(--mu-space-2) var(--px) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-combobox-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}}@layer mu{.mu-button.mu-collapsible-trigger{margin-inline-start:calc(-1 * var(--px));padding-inline-end:var(--pxi)}.mu-collapsible-chevron{color:var(--mu-ink-muted);transition:rotate var(--mu-duration-settle) var(--mu-ease-settle)}.mu-collapsible-trigger[data-panel-open]>.mu-collapsible-chevron{rotate:180deg}.mu-collapsible-panel{transition:opacity var(--mu-duration-fade) var(--mu-ease-out),translate var(--mu-duration-fade) var(--mu-ease-out)}.mu-collapsible-panel[data-starting-style],.mu-collapsible-panel[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}@media(prefers-reduced-motion:reduce){.mu-collapsible-chevron{transition:none}.mu-collapsible-panel[data-starting-style],.mu-collapsible-panel[data-ending-style]{translate:none}}}@layer mu{.mu-table-scroll{overflow-x:auto;max-width:100%}.mu-table{width:100%;border-collapse:collapse;color:var(--mu-ink);font-variant-numeric:tabular-nums;text-align:start}.mu-table-head,.mu-table-cell{padding:0 var(--px);text-align:start;vertical-align:middle}.mu-table-head{height:var(--h);color:var(--mu-ink-muted);white-space:nowrap;border-bottom:1px solid var(--mu-line)}.mu-table-cell{padding-block:calc((var(--h) - var(--lh)) / 2 + var(--mu-space-1))}.mu-table-body>.mu-table-row+.mu-table-row>.mu-table-cell{border-top:1px solid var(--mu-line)}.mu-table-body>.mu-table-row:hover>.mu-table-cell{background-color:var(--mu-hover)}.mu-table-cell>.mu-button{margin-block:calc((var(--lh) - var(--h)) / 2);vertical-align:top}.mu-table-num{text-align:end}.mu-table-muted{color:var(--mu-ink-muted)}.mu-table-caption{caption-side:bottom;padding:var(--mu-space-2) var(--px) 0;color:var(--mu-ink-muted);text-align:start}}@layer mu{.mu-prose{color:var(--mu-ink);font-family:var(--mu-font-sans);font-size:var(--prose-fs);line-height:var(--prose-lh);font-weight:400;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mu-prose ::selection{background:var(--mu-selection)}.mu-prose :where(p,ul,ol,pre,blockquote,table,figure,img,video,hr){margin:0 0 var(--mu-space-3)}.mu-prose :where(h1,h2,h3,h4,h5,h6){margin:var(--mu-space-5) 0 var(--mu-space-2);font-family:var(--mu-font-display);font-weight:600;letter-spacing:0}.mu-prose>:first-child{margin-top:0}.mu-prose>:last-child{margin-bottom:0}.mu-prose h1{font-size:var(--prose-h1);line-height:var(--prose-h1-lh)}.mu-prose h2{font-size:var(--prose-h2);line-height:var(--prose-h2-lh)}.mu-prose :where(h3,h4,h5,h6){font-size:var(--prose-fs);line-height:var(--prose-lh)}.mu-prose :where(strong,b){font-weight:600}.mu-prose del{color:var(--mu-ink-muted)}.mu-prose a{color:var(--mu-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;border-radius:var(--mu-radius-xs)}.mu-prose a:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-prose :where(ul,ol){padding-inline-start:var(--mu-space-6)}.mu-prose li+li{margin-top:var(--mu-space-1)}.mu-prose li>:where(ul,ol){margin:var(--mu-space-1) 0 0}.mu-prose li>p{margin:0}.mu-prose li::marker{color:var(--mu-ink-muted)}.mu-prose li:has(>input[type=checkbox]:first-child){position:relative;list-style:none}.mu-prose li>input[type=checkbox]:first-child{appearance:none;position:absolute;inset-inline-start:calc(-1 * (var(--mu-space-4) + var(--mu-space-2)));top:calc((var(--prose-lh) - var(--mu-space-4)) / 2);box-sizing:border-box;width:var(--mu-space-4);height:var(--mu-space-4);margin:0;border-radius:var(--mu-radius-sm);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer}.mu-prose li>input[type=checkbox]:first-child:disabled{cursor:default}.mu-prose li>input[type=checkbox]:first-child:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-prose li>input[type=checkbox]:first-child:checked{background-color:var(--mu-primary);box-shadow:none}.mu-prose li>input[type=checkbox]:first-child:checked:after{content:"";position:absolute;inset:var(--mu-inset);background-color:var(--mu-on-primary);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat}.mu-prose li:has(>input[type=checkbox]:first-child:checked){color:var(--mu-ink-muted);text-decoration:line-through}.mu-prose :where(code,kbd,samp,pre){font-family:var(--mu-font-mono);font-size:.875em}.mu-prose :not(pre)>code{padding:.1em .3em;border-radius:var(--mu-radius-xs);background-color:var(--mu-well)}.mu-prose pre{overflow-x:auto;padding:var(--mu-space-3) var(--mu-space-4);border-radius:var(--mu-radius-md);background-color:var(--mu-well);line-height:1.6}.mu-prose pre>code{font-size:inherit}.mu-prose blockquote{margin-inline:0;padding-inline-start:var(--mu-space-4);border-inline-start:var(--mu-inset) solid var(--mu-edge);color:var(--mu-ink-muted)}.mu-prose hr{height:1px;margin-block:var(--mu-space-5);border:0;background-color:var(--mu-line)}.mu-prose :where(img,video){display:block;max-width:100%;height:auto;border-radius:var(--mu-radius-lg)}.mu-prose table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-variant-numeric:tabular-nums}.mu-prose :where(th,td){padding:var(--mu-space-2) var(--mu-space-3);text-align:start;vertical-align:top}.mu-prose th{color:var(--mu-ink-muted);font-size:var(--prose-head);line-height:var(--prose-head-lh);font-weight:500;white-space:nowrap;border-bottom:1px solid var(--mu-line)}.mu-prose tr+tr>td{border-top:1px solid var(--mu-line)}.mu-prose-tag{padding:0 .25em;border-radius:var(--mu-radius-xs);color:var(--mu-ink-muted);background-color:var(--mu-well)}}
|
|
1
|
+
@layer mu{.mu-s-xs{--mu-row-height: var(--mu-control-xs);--mu-row-padding: 6px;--mu-row-padding-icon: var(--mu-space-1);--mu-row-font-size: 12px;--mu-row-line-height: 16px;--mu-row-radius: var(--mu-radius-sm);--mu-row-gap: var(--mu-space-1);--mu-row-icon: var(--mu-icon-xs);--mu-row-icon-stroke: 1.25px;--mu-row-check-box: 14px}.mu-s-sm{--mu-row-height: var(--mu-control-sm);--mu-row-padding: var(--mu-space-2);--mu-row-padding-icon: 6px;--mu-row-font-size: 13px;--mu-row-line-height: 18px;--mu-row-radius: var(--mu-radius-sm);--mu-row-gap: var(--mu-space-1);--mu-row-icon: var(--mu-icon-sm);--mu-row-icon-stroke: 1.25px;--mu-row-check-box: 16px}.mu-s-md{--mu-row-height: var(--mu-control-md);--mu-row-padding: var(--mu-space-3);--mu-row-padding-icon: 10px;--mu-row-font-size: 14px;--mu-row-line-height: 20px;--mu-row-radius: var(--mu-radius-md);--mu-row-gap: 6px;--mu-row-icon: var(--mu-icon-md);--mu-row-icon-stroke: 1.5px;--mu-row-check-box: 18px}.mu-recessed{background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-raised{background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),rgba(255,255,255,0) 60%);box-shadow:var(--mu-shadow-raised)}.mu-key{background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),rgba(255,255,255,0) 60%);box-shadow:var(--mu-shadow-key)}.mu-popup{background:var(--mu-surface);box-shadow:var(--mu-shadow-pop);border-radius:var(--mu-radius-xl)}.mu-positioner{z-index:var(--mu-layer-popup);outline:0}.mu-popup-motion{transition:opacity var(--mu-duration-fade) var(--mu-ease-out),translate var(--mu-duration-fade) var(--mu-ease-out)}.mu-popup-motion[data-starting-style],.mu-popup-motion[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}.mu-popup-motion[data-instant]{transition:none}@media(prefers-reduced-motion:reduce){.mu-popup-motion[data-starting-style],.mu-popup-motion[data-ending-style]{translate:none}}.mu-base{font-family:var(--mu-font-sans);font-size:var(--mu-row-font-size, 14px);line-height:var(--mu-row-line-height, 20px);font-weight:500;letter-spacing:0;color:var(--mu-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}.mu-base ::selection,.mu-base::selection{background:var(--mu-selection)}.mu-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.mu-focus:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-hit{position:relative}@media(pointer:coarse){.mu-hit:after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--mu-hit-area));height:max(100%,var(--mu-hit-area));transform:translate(-50%,-50%)}}.mu-icon,.mu-base svg.lucide,.mu-prose svg.lucide{width:var(--mu-row-icon, 16px);height:var(--mu-row-icon, 16px);flex:none;display:block;stroke-width:var(--mu-row-icon-stroke, 1.5px)}.mu-icon *,.mu-base svg.lucide *,.mu-prose svg.lucide *{vector-effect:non-scaling-stroke}.mu-label-xs{font-family:var(--mu-font-sans);font-size:12px;line-height:16px;font-weight:500}.mu-caption{font-family:var(--mu-font-sans);font-size:13px;line-height:18px;font-weight:400}.mu-label-sm{font-family:var(--mu-font-sans);font-size:13px;line-height:18px;font-weight:500}.mu-body{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;font-weight:400}.mu-label{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;font-weight:500}.mu-title{font-family:var(--mu-font-display);font-size:16px;line-height:24px;font-weight:500}.mu-heading{font-family:var(--mu-font-display);font-size:20px;line-height:28px;font-weight:500}.mu-display{font-family:var(--mu-font-display);font-size:32px;line-height:40px;font-weight:500;letter-spacing:-.02em}.mu-prose{--prose-fs: 16px;--prose-lh: 24px;--prose-h1: 20px;--prose-h1-lh: 28px;--prose-h2: 16px;--prose-h2-lh: 24px;--prose-head: 13px;--prose-head-lh: 18px}.mu-prose-sm{--prose-fs: 14px;--prose-lh: 22px}}@layer mu{.mu-spinner{display:inline-block;flex:none;box-sizing:border-box;width:var(--mu-row-icon);height:var(--mu-row-icon);border:var(--mu-row-icon-stroke) solid currentColor;border-top-color:transparent;border-radius:var(--mu-radius-full);animation:mu-spin var(--mu-duration-spin) linear infinite}@keyframes mu-spin{to{rotate:1turn}}}@layer mu{.mu-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-raised);white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;transition-property:background-color,box-shadow,color,translate;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-button:has(>svg:first-child){padding-inline-start:var(--mu-row-padding-icon)}.mu-button.mu-button-icon{width:var(--mu-row-height);padding:0}.mu-button-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@media(hover:hover){.mu-button:hover:not([data-disabled]){background-color:var(--mu-key-hover)}.mu-button-primary:hover:not([data-disabled]){background-color:var(--mu-primary-hover)}.mu-button-danger:hover:not([data-disabled]){background-color:var(--mu-danger-key);filter:brightness(1.08)}.mu-button-ghost:hover:not([data-disabled]){background-color:var(--mu-hover);color:var(--mu-ink)}}.mu-button:active:not([data-disabled]){translate:0 .5px;box-shadow:var(--mu-shadow-pressed)}.mu-button-primary{color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-button-danger{color:var(--mu-on-danger);background-color:var(--mu-danger-key)}.mu-button-ghost{color:var(--mu-ink-muted);background-color:transparent;background-image:none;box-shadow:none}.mu-button-ghost[data-popup-open]{background-color:var(--mu-hover);color:var(--mu-ink)}.mu-button-ghost:active:not([data-disabled]){translate:none;background-color:var(--mu-well);box-shadow:var(--mu-shadow-track)}.mu-button[data-disabled]:not([data-loading]){opacity:.45;cursor:not-allowed}.mu-button[data-loading]{cursor:progress}.mu-button[data-loading]>:not(.mu-spinner){opacity:0}.mu-button>.mu-spinner{position:absolute;inset:0;margin:auto}@media(prefers-reduced-motion:reduce){.mu-button:active:not([data-disabled]){translate:none}}}@layer mu{.mu-kbd{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:var(--mu-control-xs);height:var(--mu-control-xs);padding:0 var(--mu-space-1);border-radius:var(--mu-radius-sm);color:var(--mu-ink-muted);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-raised);white-space:nowrap}}@layer mu{.mu-separator{flex:none;align-self:stretch;margin:0;border:0;background-color:var(--mu-line)}.mu-separator[data-orientation=horizontal]{height:1px}.mu-separator[data-orientation=vertical]{width:1px}}@layer mu{.mu-badge{display:inline-flex;align-items:center;gap:var(--mu-space-1);box-sizing:border-box;height:var(--mu-control-xs);padding:0 var(--mu-row-padding);border-radius:var(--mu-radius-sm);white-space:nowrap;vertical-align:middle}.mu-badge-neutral{color:var(--mu-ink);background-color:var(--mu-well)}.mu-badge-outline{color:var(--mu-ink-muted);box-shadow:inset 0 0 0 1px var(--mu-edge)}.mu-badge-success{color:var(--mu-success);background-color:var(--mu-success-soft)}.mu-badge-warning{color:var(--mu-warning);background-color:var(--mu-warning-soft)}.mu-badge-danger{color:var(--mu-danger);background-color:var(--mu-danger-soft)}}@layer mu{.mu-avatar-root{display:inline-flex;flex:none;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;width:var(--mu-row-height);height:var(--mu-row-height);border-radius:var(--mu-radius-full);color:var(--mu-ink-muted);background-color:var(--mu-well);vertical-align:middle;user-select:none}.mu-avatar-image{width:100%;height:100%;object-fit:cover}.mu-avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%}}@layer mu{.mu-link{color:var(--mu-accent);text-decoration:none;text-underline-offset:.2em;border-radius:var(--mu-radius-xs);cursor:pointer}.mu-link:hover,.mu-link:focus-visible,.mu-link-underline{text-decoration:underline}[data-theme=contrast] .mu-link{text-decoration:underline}.mu-link-muted{color:var(--mu-ink-muted)}.mu-link-muted:hover{color:var(--mu-ink)}.mu-link>.mu-icon{display:inline-block;width:.85em;height:.85em;margin-inline-start:.1em;vertical-align:-.05em}}@layer mu{.mu-skeleton{box-sizing:border-box;width:100%;height:var(--mu-row-line-height);border-radius:var(--mu-radius-sm);background-color:var(--mu-well);background-image:linear-gradient(90deg,transparent 0%,var(--mu-hover) 50%,transparent 100%);background-size:200% 100%;background-repeat:no-repeat;animation:mu-shimmer var(--mu-duration-shimmer) ease-in-out infinite}.mu-skeleton-round{width:var(--mu-row-height);height:var(--mu-row-height);border-radius:var(--mu-radius-full)}@keyframes mu-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@media(prefers-reduced-motion:reduce){.mu-skeleton{animation:none;background-image:none}}}@layer mu{.mu-field-root{display:flex;flex-direction:column;gap:var(--mu-space-1);min-width:0}.mu-field-label{color:var(--mu-ink)}.mu-field-item{display:flex}.mu-field-label:has(>.mu-checkbox,>.mu-switch,>.mu-radio){display:inline-flex;align-items:center;gap:var(--mu-space-2);font-weight:400;cursor:pointer}.mu-field-label[data-disabled]{opacity:.45;cursor:not-allowed}.mu-field-description{margin:0;color:var(--mu-ink-muted)}.mu-field-root[data-invalid]>.mu-field-description{display:none}.mu-field-error{display:flex;align-items:flex-start;gap:var(--mu-space-1);color:var(--mu-danger)}.mu-field-error>.mu-icon{--mu-row-icon: var(--mu-icon-sm);margin-block:calc((1lh - var(--mu-icon-sm)) / 2)}.mu-fieldset-root{display:flex;flex-direction:column;gap:var(--mu-space-3);min-width:0;margin:0;padding:0;border:0}.mu-fieldset-legend{margin-bottom:var(--mu-space-1);padding:0;color:var(--mu-ink)}}@layer mu{.mu-input-root{display:flex;align-items:center;gap:var(--mu-row-gap);box-sizing:border-box;width:100%;min-width:0;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-surface);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:text;transition:box-shadow var(--mu-duration-fade) var(--mu-ease-out)}.mu-input-root:has(>.mu-input-prefix){padding-inline-start:var(--mu-row-padding-icon)}.mu-input-root:has(>.mu-input-suffix){padding-inline-end:var(--mu-row-padding-icon)}@media(hover:hover){.mu-input-root:hover:not([data-disabled],[aria-disabled=true],:has(>[data-disabled])){box-shadow:inset 0 0 0 1px var(--mu-ink-muted),var(--mu-shadow-track)}}.mu-input-root:has(>.mu-input:focus),.mu-input-root:not(:has(>.mu-input)):focus-within{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-input-root:is([data-invalid],[aria-invalid=true],:has(>[data-invalid])){box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-input-root:is([data-disabled],[aria-disabled=true],:has(>[data-disabled])){opacity:.45;cursor:not-allowed}.mu-input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;outline:none;color:inherit;background:none;font:inherit;font-weight:400}.mu-input::placeholder{color:var(--mu-ink-muted);opacity:1}.mu-input[data-disabled]{cursor:not-allowed}.mu-input-prefix,.mu-input-suffix{display:flex;flex:none;align-items:center;gap:var(--mu-space-1);color:var(--mu-ink-muted)}}@layer mu{.mu-textarea{display:block;box-sizing:border-box;width:100%;min-height:var(--mu-row-height);margin:0;padding:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2) var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-surface);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);font-weight:400;resize:vertical;transition:box-shadow var(--mu-duration-fade) var(--mu-ease-out)}.mu-textarea::placeholder{color:var(--mu-ink-muted);opacity:1}@media(hover:hover){.mu-textarea:hover:not([data-disabled],[aria-disabled=true]){box-shadow:inset 0 0 0 1px var(--mu-ink-muted),var(--mu-shadow-track)}}.mu-textarea:focus{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-textarea:is([data-invalid],[aria-invalid=true]){box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-textarea:is([data-disabled],[aria-disabled=true]){opacity:.45;cursor:not-allowed}}@layer mu{.mu-checkbox{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--mu-row-check-box);height:var(--mu-row-check-box);border-radius:var(--mu-radius-sm);color:var(--mu-on-primary);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition-property:background-color,box-shadow,scale;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-checkbox[data-checked],.mu-checkbox[data-indeterminate]{background-color:var(--mu-primary);box-shadow:none}.mu-checkbox[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-checkbox:active:not([data-disabled],[data-readonly]){scale:.94}.mu-checkbox[data-disabled]{opacity:.45;cursor:not-allowed}.mu-checkbox-indicator{display:flex;transition:opacity var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press),scale var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press)}.mu-checkbox-indicator[data-starting-style],.mu-checkbox-indicator[data-ending-style]{opacity:0;scale:.6}.mu-checkbox-indicator>svg{width:calc(var(--mu-row-check-box) - 2 * var(--mu-inset));height:calc(var(--mu-row-check-box) - 2 * var(--mu-inset));stroke-width:2}.mu-checkbox-indicator>svg *{vector-effect:non-scaling-stroke}@media(prefers-reduced-motion:reduce){.mu-checkbox:active:not([data-disabled],[data-readonly]){scale:none}.mu-checkbox-indicator[data-starting-style],.mu-checkbox-indicator[data-ending-style]{scale:none}}}@layer mu{.mu-switch{--switch-h: calc(var(--mu-row-check-box) + var(--mu-inset));--switch-w: calc(var(--switch-h) * 1.7);--knob: calc(var(--switch-h) - 2 * var(--mu-inset));position:relative;display:inline-flex;flex:none;align-items:center;box-sizing:border-box;width:var(--switch-w);height:var(--switch-h);padding:var(--mu-inset);border-radius:var(--mu-radius-full);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition:background-color var(--mu-duration-settle) var(--mu-ease-settle),box-shadow var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch[data-checked]{background-color:var(--mu-primary);box-shadow:inset 0 0 0 1px var(--mu-primary)}.mu-switch[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-switch[data-disabled]{opacity:.45;cursor:not-allowed}.mu-switch-thumb{display:block;width:var(--knob);height:var(--knob);border-radius:var(--mu-radius-full);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-key);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),scale var(--mu-duration-press) var(--mu-ease-out),background-color var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch-thumb[data-checked]{translate:calc(var(--switch-w) - var(--switch-h)) 0;background-color:var(--mu-on-primary)}.mu-switch:active:not([data-disabled],[data-readonly])>.mu-switch-thumb{scale:1.1}@media(prefers-reduced-motion:reduce){.mu-switch-thumb{transition-property:background-color}.mu-switch:active:not([data-disabled],[data-readonly])>.mu-switch-thumb{scale:none}}}@layer mu{.mu-radio-group{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mu-space-3)}.mu-radio-group[data-orientation=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--mu-space-3) var(--mu-space-4)}.mu-radio-group[data-orientation=horizontal]>.mu-fieldset-legend{flex-basis:100%}.mu-radio{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--mu-row-check-box);height:var(--mu-row-check-box);border-radius:var(--mu-radius-full);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition-property:background-color,box-shadow,scale;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-radio[data-checked]{background-color:var(--mu-primary);box-shadow:none}.mu-radio[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-radio:active:not([data-disabled],[data-readonly]){scale:.94}.mu-radio[data-disabled]{opacity:.45;cursor:not-allowed}.mu-radio-indicator{width:calc(var(--mu-row-check-box) / 2.5);height:calc(var(--mu-row-check-box) / 2.5);border-radius:var(--mu-radius-full);background-color:var(--mu-on-primary);transition:opacity var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press),scale var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press)}.mu-radio-indicator[data-starting-style],.mu-radio-indicator[data-ending-style]{opacity:0;scale:.4}@media(prefers-reduced-motion:reduce){.mu-radio:active:not([data-disabled],[data-readonly]){scale:none}.mu-radio-indicator[data-starting-style],.mu-radio-indicator[data-ending-style]{scale:none}}}@layer mu{.mu-toggle{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink-muted);background-color:transparent;white-space:nowrap;cursor:pointer;user-select:none;transition-property:background-color,box-shadow,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-toggle:has(>svg:first-child){padding-inline-start:var(--mu-row-padding-icon)}.mu-toggle.mu-toggle-icon{width:var(--mu-row-height);padding:0}@media(hover:hover){.mu-toggle:hover:not([data-disabled]){color:var(--mu-ink);background-color:var(--mu-hover)}}.mu-toggle[data-pressed],.mu-toggle:active:not([data-disabled]){color:var(--mu-ink);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-toggle[data-disabled]{opacity:.45;cursor:not-allowed}}@layer mu{.mu-segmented{position:relative;display:inline-flex;align-items:stretch;gap:0;box-sizing:border-box;height:var(--mu-row-height);padding:var(--mu-inset);border-radius:var(--mu-row-radius);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-segmented-key{position:absolute;top:var(--mu-inset);left:0;width:var(--key-width);height:calc(var(--mu-row-height) - 2 * var(--mu-inset));translate:var(--key-left) 0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-key);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),width var(--mu-duration-settle) var(--mu-ease-settle)}.mu-toggle-group.mu-segmented:not([data-keyed])>.mu-segmented-key{display:none}.mu-tabs-indicator{--key-left: var(--active-tab-left);--key-width: var(--active-tab-width)}.mu-segmented-item,.mu-segmented>.mu-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;height:100%;margin:0;padding:0 calc(var(--mu-row-padding) - var(--mu-inset));border:0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));color:var(--mu-ink-muted);background:none;box-shadow:none;font:inherit;white-space:nowrap;cursor:pointer;user-select:none;transition:color var(--mu-duration-fade) var(--mu-ease-out)}.mu-segmented>.mu-toggle.mu-toggle-icon{width:calc(var(--mu-row-height) - 2 * var(--mu-inset));padding:0}@media(hover:hover){.mu-segmented-item:hover:not([data-disabled]),.mu-segmented>.mu-toggle:hover:not([data-disabled]){color:var(--mu-ink);background:none}}.mu-segmented-item[data-active],.mu-segmented>.mu-toggle[data-pressed],.mu-segmented>.mu-toggle:active:not([data-disabled]){color:var(--mu-ink);background:none;box-shadow:none}.mu-segmented-item[data-disabled]{opacity:.45;cursor:not-allowed}.mu-tabs-root{display:flex;flex-direction:column;gap:var(--mu-space-4)}.mu-tabs-list{align-self:flex-start}.mu-tabs-panel{border-radius:var(--mu-radius-sm)}@media(prefers-reduced-motion:reduce){.mu-segmented-key{transition:none}}}@layer mu{.mu-toggle-group{display:inline-flex;align-items:center;gap:var(--mu-inset)}.mu-toggle-group>.mu-separator{align-self:center;height:max(var(--mu-space-2),calc(var(--mu-row-height) - 2 * var(--mu-space-2)));margin-inline:var(--mu-space-1)}}@layer mu{.mu-tooltip-popup{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;max-width:var(--mu-tooltip-width);padding:var(--mu-space-1) var(--mu-space-2);border-radius:var(--mu-radius-md);color:var(--mu-on-primary);background-color:var(--mu-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mu-tooltip-shortcut{opacity:.65}}@layer mu{.mu-popover-popup{display:flex;flex-direction:column;gap:var(--mu-space-3);box-sizing:border-box;width:var(--mu-popover-width);max-width:var(--available-width);padding:var(--mu-space-4);outline:0}.mu-popover-title{margin:0;color:var(--mu-ink)}.mu-popover-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-ink-muted)}}@layer mu{.mu-menu-popup{box-sizing:border-box;min-width:var(--mu-menu-width);max-height:var(--available-height);overflow-y:auto;padding:var(--mu-space-1);outline:0}.mu-menu-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-menu-item:has(>svg:first-child){padding-inline-start:var(--mu-row-padding-icon)}.mu-menu-item>svg{color:var(--mu-ink-muted)}.mu-menu-item[data-highlighted],.mu-menu-submenu-trigger[data-popup-open]{background-color:var(--mu-hover)}.mu-menu-item[data-disabled]{opacity:.45}.mu-menu-item-danger,.mu-menu-item-danger>svg{color:var(--mu-danger)}.mu-menu-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-menu-shortcut{margin-inline-start:var(--mu-space-4);color:var(--mu-ink-muted)}.mu-menu-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2)}.mu-menu-indicator>svg{color:var(--mu-ink)}.mu-menu-chevron{margin-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-row-padding));color:var(--mu-ink-muted)}.mu-menu-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-menu-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}}@layer mu{.mu-select-trigger{justify-content:space-between;min-width:0;padding-inline-end:var(--mu-row-padding-icon);text-align:start}.mu-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mu-select-value[data-placeholder]{color:var(--mu-ink-muted);font-weight:400}.mu-select-icon{display:flex;flex:none;color:var(--mu-ink-muted)}.mu-select-trigger[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-key)}.mu-select-positioner{outline:0}.mu-select-popup{box-sizing:border-box;min-width:max(var(--mu-menu-width),var(--anchor-width));max-height:var(--available-height);padding:var(--mu-space-1);outline:0}.mu-select-list{overflow-y:auto;max-height:var(--available-height);scroll-padding-block:var(--mu-space-1);outline:0}.mu-select-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-select-item:has(>svg:first-child){padding-inline-start:var(--mu-row-padding-icon)}.mu-select-item>svg{color:var(--mu-ink-muted)}.mu-select-item[data-highlighted]{background-color:var(--mu-hover)}.mu-select-item[data-disabled]{opacity:.45}.mu-select-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-select-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2);color:var(--mu-ink)}.mu-select-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-select-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}.mu-select-scroll-arrow{display:grid;place-items:center;height:var(--mu-space-4);color:var(--mu-ink-muted)}}@layer mu{.mu-dialog-backdrop{position:fixed;inset:0;z-index:var(--mu-layer-overlay);background-color:var(--mu-overlay);transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-dialog-backdrop[data-starting-style],.mu-dialog-backdrop[data-ending-style]{opacity:0}.mu-dialog-viewport{position:fixed;inset:0;z-index:var(--mu-layer-overlay);display:grid;place-items:safe center;box-sizing:border-box;padding:var(--mu-space-6) var(--mu-space-4);overflow-y:auto}.mu-dialog-popup{position:relative;display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;width:var(--mu-dialog-width);max-width:100%;padding:var(--mu-space-5);border-radius:var(--mu-radius-2xl);outline:0;transition:opacity var(--mu-duration-settle) var(--mu-ease-out),translate var(--mu-duration-settle) var(--mu-ease-out)}.mu-dialog-popup[data-starting-style],.mu-dialog-popup[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}.mu-dialog-popup:has(>.mu-dialog-x)>.mu-dialog-title{padding-inline-end:var(--mu-space-6)}.mu-dialog-title{margin:0;color:var(--mu-ink)}.mu-dialog-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-ink-muted)}.mu-dialog-x{position:absolute;top:var(--mu-space-4);right:var(--mu-space-4)}.mu-dialog-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mu-space-2);margin-top:var(--mu-space-2)}@media(max-width:639.98px){.mu-dialog-sheet{place-items:end stretch;padding:var(--mu-space-6) 0 0}.mu-dialog-sheet>.mu-dialog-popup{width:100%;padding-bottom:max(var(--mu-space-5),env(safe-area-inset-bottom));border-end-start-radius:0;border-end-end-radius:0}.mu-dialog-sheet>.mu-dialog-popup[data-starting-style],.mu-dialog-sheet>.mu-dialog-popup[data-ending-style]{translate:0 var(--mu-space-6)}.mu-dialog-sheet .mu-dialog-footer{flex-direction:column-reverse}.mu-dialog-sheet .mu-dialog-footer>*{width:100%}}@media(prefers-reduced-motion:reduce){.mu-dialog-popup[data-starting-style],.mu-dialog-popup[data-ending-style],.mu-dialog-sheet>.mu-dialog-popup[data-starting-style],.mu-dialog-sheet>.mu-dialog-popup[data-ending-style]{translate:none}}}@layer mu{.mu-toast-viewport{position:fixed;right:var(--mu-space-6);bottom:var(--mu-space-6);z-index:var(--mu-layer-toast);width:var(--mu-toast-width);outline:0}@media(max-width:639.98px){.mu-toast-viewport{right:var(--mu-space-4);bottom:var(--mu-space-4);left:var(--mu-space-4);width:auto}}.mu-toast{--mu-row-gap: var(--mu-space-3);--peek: var(--mu-space-2);--scale: max(0, 1 - var(--toast-index) * .05);--shrink: calc(1 - var(--scale));--height: var(--toast-frontmost-height, var(--toast-height));--offset-y: calc(var(--toast-offset-y) * -1 - var(--toast-index) * var(--mu-row-gap) + var(--toast-swipe-movement-y));position:absolute;right:0;bottom:0;z-index:calc(var(--mu-layer-toast) - var(--toast-index));box-sizing:border-box;width:100%;height:var(--height);transform-origin:bottom center;translate:var(--toast-swipe-movement-x) calc(var(--toast-swipe-movement-y) - var(--toast-index) * var(--peek) - var(--shrink) * var(--height));scale:var(--scale);user-select:none;outline:0;transition:translate var(--mu-duration-settle) var(--mu-ease-settle),scale var(--mu-duration-settle) var(--mu-ease-settle),opacity var(--mu-duration-settle) var(--mu-ease-out),height var(--mu-duration-fade) var(--mu-ease-out)}.mu-toast[data-expanded]{height:var(--toast-height);translate:var(--toast-swipe-movement-x) var(--offset-y);scale:1}.mu-toast[data-starting-style],.mu-toast[data-ending-style]{translate:0 150%}.mu-toast[data-ending-style]{opacity:0}.mu-toast[data-ending-style][data-swipe-direction=up]{translate:0 calc(var(--toast-swipe-movement-y) - 150%)}.mu-toast[data-ending-style][data-swipe-direction=down]{translate:0 calc(var(--toast-swipe-movement-y) + 150%)}.mu-toast[data-ending-style][data-swipe-direction=left]{translate:calc(var(--toast-swipe-movement-x) - 150%) var(--offset-y)}.mu-toast[data-ending-style][data-swipe-direction=right]{translate:calc(var(--toast-swipe-movement-x) + 150%) var(--offset-y)}.mu-toast[data-limited]{opacity:0}.mu-toast:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-toast:after{content:"";position:absolute;top:100%;left:0;width:100%;height:calc(var(--mu-row-gap) + 1px)}.mu-toast-content{display:flex;align-items:flex-start;gap:var(--mu-space-3);box-sizing:border-box;height:100%;padding:var(--mu-space-3) var(--mu-space-3) var(--mu-space-3) var(--mu-space-4);overflow:hidden;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-content[data-behind]{opacity:0}.mu-toast-content[data-expanded]{opacity:1}.mu-toast-icon{margin-block:calc((var(--mu-row-height) - var(--mu-row-icon)) / 2);color:var(--mu-ink-muted)}.mu-toast-success .mu-toast-icon{color:var(--mu-success)}.mu-toast-warning .mu-toast-icon{color:var(--mu-warning)}.mu-toast-danger .mu-toast-icon{color:var(--mu-danger)}.mu-toast-text{display:flex;flex:1;flex-direction:column;min-width:0;padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2)}.mu-toast-title{margin:0;color:var(--mu-ink)}.mu-toast-description{margin:0;color:var(--mu-ink-muted)}.mu-toast-action,.mu-toast-close{margin-block:calc((var(--mu-control-md) - var(--mu-control-sm)) / 2)}@media(prefers-reduced-motion:reduce){.mu-toast{transition-property:opacity,height}.mu-toast[data-starting-style],.mu-toast[data-ending-style]{translate:var(--toast-swipe-movement-x) var(--offset-y)}}}@layer mu{.mu-input-root.mu-combobox-input-root{padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-space-1))}.mu-combobox-trigger{display:grid;place-items:center;width:calc(var(--mu-row-icon) + var(--mu-space-2));height:calc(var(--mu-row-icon) + var(--mu-space-2));margin:0;padding:0;border:0;border-radius:var(--mu-radius-sm);color:var(--mu-ink-muted);background:none;cursor:pointer}.mu-combobox-trigger:hover:not([data-disabled]){color:var(--mu-ink)}.mu-combobox-trigger[data-disabled]{cursor:not-allowed}.mu-combobox-popup{box-sizing:border-box;width:var(--anchor-width);min-width:var(--mu-menu-width);max-width:var(--available-width);outline:0}.mu-combobox-list{box-sizing:border-box;max-height:min(var(--mu-list-height),var(--available-height));overflow-y:auto;overscroll-behavior:contain;padding:var(--mu-space-1);scroll-padding-block:var(--mu-space-1);outline:0}.mu-combobox-list[data-empty]{padding:0}.mu-combobox-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-combobox-item:has(>svg:first-child){padding-inline-start:var(--mu-row-padding-icon)}.mu-combobox-item>svg{color:var(--mu-ink-muted)}.mu-combobox-item[data-highlighted]{background-color:var(--mu-hover)}.mu-combobox-item[data-disabled]{opacity:.45}.mu-combobox-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-combobox-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2);color:var(--mu-ink)}.mu-combobox-empty:not(:empty){padding:var(--mu-space-3) var(--mu-space-4);color:var(--mu-ink-muted)}.mu-combobox-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-combobox-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}}@layer mu{.mu-button.mu-collapsible-trigger{margin-inline-start:calc(-1 * var(--mu-row-padding));padding-inline-end:var(--mu-row-padding-icon)}.mu-collapsible-chevron{color:var(--mu-ink-muted);transition:rotate var(--mu-duration-settle) var(--mu-ease-settle)}.mu-collapsible-trigger[data-panel-open]>.mu-collapsible-chevron{rotate:180deg}.mu-collapsible-panel{transition:opacity var(--mu-duration-fade) var(--mu-ease-out),translate var(--mu-duration-fade) var(--mu-ease-out)}.mu-collapsible-panel[data-starting-style],.mu-collapsible-panel[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}@media(prefers-reduced-motion:reduce){.mu-collapsible-chevron{transition:none}.mu-collapsible-panel[data-starting-style],.mu-collapsible-panel[data-ending-style]{translate:none}}}@layer mu{.mu-table-scroll{overflow-x:auto;max-width:100%}.mu-table{width:100%;border-collapse:collapse;color:var(--mu-ink);font-variant-numeric:tabular-nums;text-align:start}.mu-table-head,.mu-table-cell{padding:0 var(--mu-row-padding);text-align:start;vertical-align:middle}.mu-table-head{height:var(--mu-row-height);color:var(--mu-ink-muted);white-space:nowrap;border-bottom:1px solid var(--mu-line)}.mu-table-cell{padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2 + var(--mu-space-1))}.mu-table-body>.mu-table-row+.mu-table-row>.mu-table-cell{border-top:1px solid var(--mu-line)}.mu-table-body>.mu-table-row:hover>.mu-table-cell{background-color:var(--mu-hover)}.mu-table-cell>.mu-button{margin-block:calc((var(--mu-row-line-height) - var(--mu-row-height)) / 2);vertical-align:top}.mu-table-num{text-align:end}.mu-table-muted{color:var(--mu-ink-muted)}.mu-table-caption{caption-side:bottom;padding:var(--mu-space-2) var(--mu-row-padding) 0;color:var(--mu-ink-muted);text-align:start}}@layer mu{.mu-prose{color:var(--mu-ink);font-family:var(--mu-font-sans);font-size:var(--prose-fs);line-height:var(--prose-lh);font-weight:400;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mu-prose ::selection{background:var(--mu-selection)}.mu-prose :where(p,ul,ol,pre,blockquote,table,figure,img,video,hr){margin:0 0 var(--mu-space-3)}.mu-prose :where(h1,h2,h3,h4,h5,h6){margin:var(--mu-space-5) 0 var(--mu-space-2);font-family:var(--mu-font-display);font-weight:600;letter-spacing:0}.mu-prose>:first-child{margin-top:0}.mu-prose>:last-child{margin-bottom:0}.mu-prose h1{font-size:var(--prose-h1);line-height:var(--prose-h1-lh)}.mu-prose :where(h2,h3,h4,h5,h6){font-size:var(--prose-h2);line-height:var(--prose-h2-lh)}.mu-prose :where(strong,b){font-weight:600}.mu-prose del{color:var(--mu-ink-muted)}.mu-prose a{color:var(--mu-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;border-radius:var(--mu-radius-xs)}.mu-prose a:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-prose :where(ul,ol){padding-inline-start:var(--mu-space-6)}.mu-prose li+li{margin-top:var(--mu-space-1)}.mu-prose li>:where(ul,ol){margin:var(--mu-space-1) 0 0}.mu-prose li>p{margin:0}.mu-prose li::marker{color:var(--mu-ink-muted)}.mu-prose li:has(>input[type=checkbox]:first-child){position:relative;list-style:none}.mu-prose li>input[type=checkbox]:first-child{appearance:none;position:absolute;inset-inline-start:calc(-1 * (var(--mu-space-4) + var(--mu-space-2)));top:calc((var(--prose-lh) - var(--mu-space-4)) / 2);box-sizing:border-box;width:var(--mu-space-4);height:var(--mu-space-4);margin:0;border-radius:var(--mu-radius-sm);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer}.mu-prose li>input[type=checkbox]:first-child:disabled{cursor:default}.mu-prose li>input[type=checkbox]:first-child:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-prose li>input[type=checkbox]:first-child:checked{background-color:var(--mu-primary);box-shadow:none}.mu-prose li>input[type=checkbox]:first-child:checked:after{content:"";position:absolute;inset:var(--mu-inset);background-color:var(--mu-on-primary);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat}.mu-prose li:has(>input[type=checkbox]:first-child:checked){color:var(--mu-ink-muted);text-decoration:line-through}.mu-prose :where(code,kbd,samp,pre){font-family:var(--mu-font-mono);font-size:.875em}.mu-prose :not(pre)>code{padding:.1em .3em;border-radius:var(--mu-radius-xs);background-color:var(--mu-well)}.mu-prose pre{overflow-x:auto;padding:var(--mu-space-3) var(--mu-space-4);border-radius:var(--mu-radius-md);background-color:var(--mu-well);line-height:1.6}.mu-prose pre>code{font-size:inherit}.mu-prose blockquote{margin-inline:0;padding-inline-start:var(--mu-space-4);border-inline-start:var(--mu-inset) solid var(--mu-edge);color:var(--mu-ink-muted)}.mu-prose hr{height:1px;margin-block:var(--mu-space-5);border:0;background-color:var(--mu-line)}.mu-prose :where(img,video){display:block;max-width:100%;height:auto;border-radius:var(--mu-radius-lg)}.mu-prose table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-variant-numeric:tabular-nums}.mu-prose :where(th,td){padding:var(--mu-space-2) var(--mu-space-3);text-align:start;vertical-align:top}.mu-prose th{color:var(--mu-ink-muted);font-size:var(--prose-head);line-height:var(--prose-head-lh);font-weight:500;white-space:nowrap;border-bottom:1px solid var(--mu-line)}.mu-prose tr+tr>td{border-top:1px solid var(--mu-line)}.mu-prose-tag{padding:0 .25em;border-radius:var(--mu-radius-xs);color:var(--mu-ink-muted);background-color:var(--mu-well)}}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Memos UI tokens as Tailwind CSS v4 theme variables, for apps on Tailwind.
|
|
3
|
+
* Import it after tailwindcss and the package's tokens.css:
|
|
4
|
+
*
|
|
5
|
+
* @import "tailwindcss";
|
|
6
|
+
* @import "@usememos/ui/tokens.css";
|
|
7
|
+
* @import "@usememos/ui/styles.css";
|
|
8
|
+
* @import "@usememos/ui/tailwind.css";
|
|
9
|
+
*
|
|
10
|
+
* Utilities carry an mu- prefix (bg-mu-surface, text-mu-ink-muted,
|
|
11
|
+
* shadow-mu-raised, rounded-mu-md), so they never clash with an app's own
|
|
12
|
+
* colors. `inline` makes each utility read the --mu- token where it is used,
|
|
13
|
+
* so a .mu-root with its own data-theme recolors the utilities inside it.
|
|
14
|
+
* Spacing needs no mapping: Tailwind's 0.25rem step is the 4px grid.
|
|
15
|
+
* See docs/custom-components.md#tailwind-css.
|
|
16
|
+
*/
|
|
17
|
+
@theme inline {
|
|
18
|
+
/* Colors (docs/color.md) */
|
|
19
|
+
--color-mu-canvas: var(--mu-canvas);
|
|
20
|
+
--color-mu-surface: var(--mu-surface);
|
|
21
|
+
--color-mu-well: var(--mu-well);
|
|
22
|
+
--color-mu-hover: var(--mu-hover);
|
|
23
|
+
--color-mu-key: var(--mu-key);
|
|
24
|
+
--color-mu-key-hover: var(--mu-key-hover);
|
|
25
|
+
--color-mu-key-sheen: var(--mu-key-sheen);
|
|
26
|
+
--color-mu-edge: var(--mu-edge);
|
|
27
|
+
--color-mu-line: var(--mu-line);
|
|
28
|
+
--color-mu-overlay: var(--mu-overlay);
|
|
29
|
+
--color-mu-ink: var(--mu-ink);
|
|
30
|
+
--color-mu-ink-muted: var(--mu-ink-muted);
|
|
31
|
+
--color-mu-primary: var(--mu-primary);
|
|
32
|
+
--color-mu-primary-hover: var(--mu-primary-hover);
|
|
33
|
+
--color-mu-on-primary: var(--mu-on-primary);
|
|
34
|
+
--color-mu-accent: var(--mu-accent);
|
|
35
|
+
--color-mu-selection: var(--mu-selection);
|
|
36
|
+
--color-mu-focus: var(--mu-focus);
|
|
37
|
+
--color-mu-success: var(--mu-success);
|
|
38
|
+
--color-mu-success-soft: var(--mu-success-soft);
|
|
39
|
+
--color-mu-warning: var(--mu-warning);
|
|
40
|
+
--color-mu-warning-soft: var(--mu-warning-soft);
|
|
41
|
+
--color-mu-danger: var(--mu-danger);
|
|
42
|
+
--color-mu-danger-key: var(--mu-danger-key);
|
|
43
|
+
--color-mu-danger-soft: var(--mu-danger-soft);
|
|
44
|
+
--color-mu-on-danger: var(--mu-on-danger);
|
|
45
|
+
|
|
46
|
+
/* Shadows (docs/depth.md) */
|
|
47
|
+
--shadow-mu-track: var(--mu-shadow-track);
|
|
48
|
+
--shadow-mu-key: var(--mu-shadow-key);
|
|
49
|
+
--shadow-mu-raised: var(--mu-shadow-raised);
|
|
50
|
+
--shadow-mu-pressed: var(--mu-shadow-pressed);
|
|
51
|
+
--shadow-mu-pop: var(--mu-shadow-pop);
|
|
52
|
+
|
|
53
|
+
/* Radius (docs/layout.md) */
|
|
54
|
+
--radius-mu-xs: var(--mu-radius-xs);
|
|
55
|
+
--radius-mu-sm: var(--mu-radius-sm);
|
|
56
|
+
--radius-mu-md: var(--mu-radius-md);
|
|
57
|
+
--radius-mu-lg: var(--mu-radius-lg);
|
|
58
|
+
--radius-mu-xl: var(--mu-radius-xl);
|
|
59
|
+
--radius-mu-2xl: var(--mu-radius-2xl);
|
|
60
|
+
--radius-mu-full: var(--mu-radius-full);
|
|
61
|
+
|
|
62
|
+
/* Fonts (docs/typography.md) */
|
|
63
|
+
--font-mu-sans: var(--mu-font-sans);
|
|
64
|
+
--font-mu-display: var(--mu-font-display);
|
|
65
|
+
--font-mu-mono: var(--mu-font-mono);
|
|
66
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
var m=["--mu-canvas","--mu-surface","--mu-well","--mu-hover","--mu-key","--mu-key-hover","--mu-key-sheen","--mu-edge","--mu-line","--mu-overlay","--mu-ink","--mu-ink-muted","--mu-primary","--mu-primary-hover","--mu-on-primary","--mu-accent","--mu-selection","--mu-focus","--mu-success","--mu-success-soft","--mu-warning","--mu-warning-soft","--mu-danger","--mu-danger-key","--mu-danger-soft","--mu-on-danger","--mu-shadow-track","--mu-shadow-key","--mu-shadow-raised","--mu-shadow-pressed","--mu-shadow-pop"];export{m as themeTokens};
|
|
3
|
+
//# sourceMappingURL=theme-tokens.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/theme-tokens.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * The custom properties an app theme sets: the 26 color tokens in\n * docs/color.md and the five shadow tokens in docs/depth.md. A token a theme\n * leaves out keeps its Light value, so an app's tests can check its theme\n * against this list. See docs/color.md#app-themes.\n */\nexport const themeTokens = [\n '--mu-canvas',\n '--mu-surface',\n '--mu-well',\n '--mu-hover',\n '--mu-key',\n '--mu-key-hover',\n '--mu-key-sheen',\n '--mu-edge',\n '--mu-line',\n '--mu-overlay',\n '--mu-ink',\n '--mu-ink-muted',\n '--mu-primary',\n '--mu-primary-hover',\n '--mu-on-primary',\n '--mu-accent',\n '--mu-selection',\n '--mu-focus',\n '--mu-success',\n '--mu-success-soft',\n '--mu-warning',\n '--mu-warning-soft',\n '--mu-danger',\n '--mu-danger-key',\n '--mu-danger-soft',\n '--mu-on-danger',\n '--mu-shadow-track',\n '--mu-shadow-key',\n '--mu-shadow-raised',\n '--mu-shadow-pressed',\n '--mu-shadow-pop',\n] as const;\n"],
|
|
5
|
+
"mappings": ";AAMO,IAAMA,EAAc,CACzB,cACA,eACA,YACA,aACA,WACA,iBACA,iBACA,YACA,YACA,eACA,WACA,iBACA,eACA,qBACA,kBACA,cACA,iBACA,aACA,eACA,oBACA,eACA,oBACA,cACA,kBACA,mBACA,iBACA,oBACA,kBACA,qBACA,sBACA,iBACF",
|
|
6
|
+
"names": ["themeTokens"]
|
|
7
|
+
}
|
package/dist/tokens.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer mu{:where(:root,:host,.mu-root:not([data-theme] *)),[data-theme=light]{color-scheme:light;--mu-canvas: #f9f9f9;--mu-surface: #ffffff;--mu-well: #e4e4e4;--mu-hover: #ededed;--mu-key: #ffffff;--mu-key-hover: #fbfbfb;--mu-key-sheen: rgba(255,255,255,.18);--mu-edge: #d0d0d0;--mu-line: #e0e0e0;--mu-overlay: rgba(0,0,0,.32);--mu-ink: #1a1a1a;--mu-ink-muted: #5e5e5e;--mu-primary: #1f1f1f;--mu-primary-hover: #333333;--mu-on-primary: #ffffff;--mu-accent: oklch(.5 .13 255);--mu-selection: rgba(40,99,171,.18);--mu-success: oklch(.52 .13 150);--mu-success-soft: #e9f4ec;--mu-warning: oklch(.5 .11 70);--mu-warning-soft: #fbf1df;--mu-danger: oklch(.53 .19 27);--mu-danger-key: oklch(.53 .19 27);--mu-danger-soft: #fbeaea;--mu-on-danger: #ffffff;--mu-focus: var(--mu-accent);--mu-shadow-track: inset 0 1px 2px rgba(0,0,0,.1);--mu-shadow-key: 0 1px 2px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.05);--mu-shadow-raised: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.12);--mu-shadow-pressed: inset 0 1px 3px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.12);--mu-shadow-pop: 0 8px 24px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8)}[data-theme=dark]{--mu-canvas: #0f0f0f;--mu-surface: #1a1a1a;--mu-well: #262626;--mu-hover: #242424;--mu-key: #343434;--mu-key-hover: #3c3c3c;--mu-key-sheen: rgba(255,255,255,.08);--mu-edge: #353535;--mu-line: #262626;--mu-overlay: rgba(0,0,0,.6);--mu-ink: #ededed;--mu-ink-muted: #adadad;--mu-primary: #e6e6e6;--mu-primary-hover: #f5f5f5;--mu-on-primary: #111111;--mu-accent: oklch(.78 .11 255);--mu-selection: rgba(135,186,253,.28);--mu-success: oklch(.78 .14 150);--mu-success-soft: #14261a;--mu-warning: oklch(.8 .13 75);--mu-warning-soft: #2a2112;--mu-danger: oklch(.72 .16 25);--mu-danger-key: oklch(.55 .17 25);--mu-danger-soft: #2c1616;--mu-on-danger: #ffffff;--mu-focus: var(--mu-accent);--mu-shadow-track: inset 0 1px 2px rgba(0,0,0,.55), inset 0 -.5px 0 rgba(255,255,255,.06);--mu-shadow-key: 0 1px 2px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);--mu-shadow-raised: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);--mu-shadow-pressed: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 .5px rgba(0,0,0,.6);--mu-shadow-pop: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.06);color-scheme:dark}[data-theme=contrast]{color-scheme:light;--mu-canvas: #ffffff;--mu-surface: #ffffff;--mu-well: #e6e6e6;--mu-hover: #d9d9d9;--mu-key: #ffffff;--mu-key-hover: #f2f2f2;--mu-key-sheen: #ffffff00;--mu-edge: #6b6b6b;--mu-line: #6b6b6b;--mu-overlay: rgba(0,0,0,.6);--mu-ink: #000000;--mu-ink-muted: #333333;--mu-primary: #000000;--mu-primary-hover: #262626;--mu-on-primary: #ffffff;--mu-accent: oklch(.42 .14 255);--mu-selection: rgba(0,75,151,.25);--mu-success: oklch(.42 .12 150);--mu-success-soft: #e9f4ec;--mu-warning: oklch(.45 .11 70);--mu-warning-soft: #fbf1df;--mu-danger: oklch(.45 .18 27);--mu-danger-key: oklch(.45 .18 27);--mu-danger-soft: #fbeaea;--mu-on-danger: #ffffff;--mu-focus: var(--mu-accent);--mu-shadow-track: 0 0 0 0 rgba(0,0,0,0);--mu-shadow-key: 0 0 0 1px #6b6b6b;--mu-shadow-raised: 0 0 0 1px #000000;--mu-shadow-pressed: inset 0 0 0 2px #000000;--mu-shadow-pop: 0 0 0 1px #000000}:where(:root,:host,.mu-root){--mu-space-
|
|
1
|
+
@layer mu{:where(:root,:host,.mu-root:not([data-theme] *)),[data-theme=light]{color-scheme:light;--mu-canvas: #f9f9f9;--mu-surface: #ffffff;--mu-well: #e4e4e4;--mu-hover: #ededed;--mu-key: #ffffff;--mu-key-hover: #fbfbfb;--mu-key-sheen: rgba(255,255,255,.18);--mu-edge: #d0d0d0;--mu-line: #e0e0e0;--mu-overlay: rgba(0,0,0,.32);--mu-ink: #1a1a1a;--mu-ink-muted: #5e5e5e;--mu-primary: #1f1f1f;--mu-primary-hover: #333333;--mu-on-primary: #ffffff;--mu-accent: oklch(.5 .13 255);--mu-selection: rgba(40,99,171,.18);--mu-success: oklch(.52 .13 150);--mu-success-soft: #e9f4ec;--mu-warning: oklch(.5 .11 70);--mu-warning-soft: #fbf1df;--mu-danger: oklch(.53 .19 27);--mu-danger-key: oklch(.53 .19 27);--mu-danger-soft: #fbeaea;--mu-on-danger: #ffffff;--mu-focus: var(--mu-accent);--mu-shadow-track: inset 0 1px 2px rgba(0,0,0,.1);--mu-shadow-key: 0 1px 2px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.05);--mu-shadow-raised: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.12);--mu-shadow-pressed: inset 0 1px 3px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.12);--mu-shadow-pop: 0 8px 24px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8)}[data-theme=dark]{--mu-canvas: #0f0f0f;--mu-surface: #1a1a1a;--mu-well: #262626;--mu-hover: #242424;--mu-key: #343434;--mu-key-hover: #3c3c3c;--mu-key-sheen: rgba(255,255,255,.08);--mu-edge: #353535;--mu-line: #262626;--mu-overlay: rgba(0,0,0,.6);--mu-ink: #ededed;--mu-ink-muted: #adadad;--mu-primary: #e6e6e6;--mu-primary-hover: #f5f5f5;--mu-on-primary: #111111;--mu-accent: oklch(.78 .11 255);--mu-selection: rgba(135,186,253,.28);--mu-success: oklch(.78 .14 150);--mu-success-soft: #14261a;--mu-warning: oklch(.8 .13 75);--mu-warning-soft: #2a2112;--mu-danger: oklch(.72 .16 25);--mu-danger-key: oklch(.55 .17 25);--mu-danger-soft: #2c1616;--mu-on-danger: #ffffff;--mu-focus: var(--mu-accent);--mu-shadow-track: inset 0 1px 2px rgba(0,0,0,.55), inset 0 -.5px 0 rgba(255,255,255,.06);--mu-shadow-key: 0 1px 2px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);--mu-shadow-raised: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);--mu-shadow-pressed: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 .5px rgba(0,0,0,.6);--mu-shadow-pop: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.06);color-scheme:dark}[data-theme=contrast]{color-scheme:light;--mu-canvas: #ffffff;--mu-surface: #ffffff;--mu-well: #e6e6e6;--mu-hover: #d9d9d9;--mu-key: #ffffff;--mu-key-hover: #f2f2f2;--mu-key-sheen: #ffffff00;--mu-edge: #6b6b6b;--mu-line: #6b6b6b;--mu-overlay: rgba(0,0,0,.6);--mu-ink: #000000;--mu-ink-muted: #333333;--mu-primary: #000000;--mu-primary-hover: #262626;--mu-on-primary: #ffffff;--mu-accent: oklch(.42 .14 255);--mu-selection: rgba(0,75,151,.25);--mu-success: oklch(.42 .12 150);--mu-success-soft: #e9f4ec;--mu-warning: oklch(.45 .11 70);--mu-warning-soft: #fbf1df;--mu-danger: oklch(.45 .18 27);--mu-danger-key: oklch(.45 .18 27);--mu-danger-soft: #fbeaea;--mu-on-danger: #ffffff;--mu-focus: var(--mu-accent);--mu-shadow-track: 0 0 0 0 rgba(0,0,0,0);--mu-shadow-key: 0 0 0 1px #6b6b6b;--mu-shadow-raised: 0 0 0 1px #000000;--mu-shadow-pressed: inset 0 0 0 2px #000000;--mu-shadow-pop: 0 0 0 1px #000000}:where(:root,:host,.mu-root){--mu-space-1: 4px;--mu-space-2: 8px;--mu-space-3: 12px;--mu-space-4: 16px;--mu-space-5: 20px;--mu-space-6: 24px;--mu-space-8: 32px;--mu-space-12: 48px;--mu-space-16: 64px;--mu-radius-xs: 2px;--mu-radius-sm: 4px;--mu-radius-md: 6px;--mu-radius-lg: 8px;--mu-radius-xl: 12px;--mu-radius-2xl: 16px;--mu-radius-full: 9999px;--mu-control-xs: 20px;--mu-control-sm: 24px;--mu-control-md: 32px;--mu-inset: 2px;--mu-hit-area: 44px;--mu-focus-width: 2px;--mu-icon-xs: 12px;--mu-icon-sm: 14px;--mu-icon-md: 16px;--mu-content-width: 720px;--mu-sidebar-width: 240px;--mu-menu-width: 200px;--mu-list-height: 240px;--mu-popover-width: 280px;--mu-tooltip-width: 240px;--mu-toast-width: 360px;--mu-dialog-width: 440px;--mu-layer-popup: 50;--mu-layer-overlay: 50;--mu-layer-toast: 60;--mu-duration-press: 80ms;--mu-duration-settle: .15s;--mu-duration-fade: .1s;--mu-duration-spin: .8s;--mu-duration-shimmer: 1.4s;--mu-ease-settle: cubic-bezier(.2, .9, .3, 1);--mu-ease-out: cubic-bezier(.2, 0, 0, 1);--mu-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}}
|
|
@@ -6,5 +6,14 @@ export interface BadgeProps extends useRender.ComponentProps<'span'> {
|
|
|
6
6
|
/** A Lucide element before the text, drawn at 12px. */
|
|
7
7
|
icon?: IconElement;
|
|
8
8
|
}
|
|
9
|
+
export interface BadgeClassesOptions {
|
|
10
|
+
tone?: BadgeProps['tone'];
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* The classes that make an element look like a Badge. Use them on an app's
|
|
14
|
+
* own label, such as a tag that is also a link:
|
|
15
|
+
* `<a className={badgeClasses()} href="/tags/work">work</a>`.
|
|
16
|
+
*/
|
|
17
|
+
export declare function badgeClasses({ tone }?: BadgeClassesOptions): string;
|
|
9
18
|
/** A tag or status label: one or two words. */
|
|
10
19
|
export declare const Badge: import("react").ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|