@usememos/ui 26.11.14 → 26.11.16
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 +1 -1
- package/dist/components/combobox/index.js +1 -1
- package/dist/components/combobox/index.js.map +3 -3
- package/dist/components/dialog/parts.js +1 -1
- package/dist/components/dialog/parts.js.map +3 -3
- package/dist/components/drawer/index.js +1 -1
- package/dist/components/drawer/index.js.map +3 -3
- package/dist/components/toast/index.js +1 -1
- package/dist/components/toast/index.js.map +3 -3
- package/dist/internal/icon-tooltip.js +3 -0
- package/dist/internal/icon-tooltip.js.map +7 -0
- package/dist/styles.css +1 -1
- package/dist/tokens.css +1 -1
- package/dist/types/internal/icon-tooltip.d.ts +7 -0
- package/dist/types/internal/popup.d.ts +1 -1
- package/llms-full.txt +36 -30
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Memos UI design system: tokens, foundation styles and React components for memos, the website, the web clipper and future usememos projects.
|
|
4
4
|
|
|
5
|
-
- Calm, dense and flat:
|
|
5
|
+
- Calm, dense and flat: a warm-gray paper canvas in Light, ink for emphasis, and clear fills and borders for controls and state.
|
|
6
6
|
- Light and Dark themes, all from CSS custom properties. Apps can add their own.
|
|
7
7
|
- One package, `@usememos/ui`. ESM only, for React 18 or later, with behavior from [Base UI](https://base-ui.com).
|
|
8
8
|
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{Combobox as s}from"@base-ui/react/combobox";import{Check as f,ChevronsUpDown as d,Search as C}from"lucide-react";import{createContext as I,forwardRef as p,useContext as L}from"react";import{cx as B,withClass as a}from"../../internal/class-name.js";import{
|
|
2
|
+
import{Combobox as s}from"@base-ui/react/combobox";import{Check as f,ChevronsUpDown as d,Search as C}from"lucide-react";import{createContext as I,forwardRef as p,useContext as L}from"react";import{cx as B,withClass as a}from"../../internal/class-name.js";import{IconTooltip as N}from"../../internal/icon-tooltip.js";import{splitPositioner as y}from"../../internal/popup.js";import{SizeContext as E,useRowSize as b}from"../../internal/size.js";import{jsx as e,jsxs as P}from"react/jsx-runtime";var w=s.Collection,h=s.useFilter,x=I(!1);function z({size:n,...o}){let t=b(n);return e(E.Provider,{value:t,children:e(x.Provider,{value:o.inline??!1,children:e(s.Root,{...o.inline&&o.open===void 0&&o.defaultOpen===void 0?{open:!0}:null,...o})})})}var D=p(function({icon:o=e(C,{}),triggerLabel:t="Show options",className:r,style:i,...m},u){let l=b(),c=L(x);return P(s.InputGroup,{className:B("mu-input-root",!c&&"mu-combobox-input-root","mu-base",`mu-s-${l}`,r),style:i,children:[o!==null?e("span",{className:"mu-input-prefix",children:o}):null,e(s.Input,{ref:u,...m,className:"mu-input"}),c?null:e("span",{className:"mu-input-suffix",children:e(N,{label:t,children:e(s.Trigger,{className:"mu-combobox-trigger mu-focus","aria-label":t,children:e(d,{"aria-hidden":!0})})})})]})}),H=p(function({container:o,className:t,...r},i){let m=b(),[u,l]=y(r);return e(s.Portal,{container:o,children:e(s.Positioner,{sideOffset:4,align:"start",...u,className:"mu-positioner",children:e(s.Popup,{ref:i,...l,className:a(`mu-combobox-popup mu-popup mu-popup-motion mu-base mu-s-${m}`,t)})})})}),V=p(function({className:o,...t},r){return e(s.List,{ref:r,...t,className:a("mu-combobox-list",o)})}),k=p(function({icon:o,className:t,children:r,...i},m){return P(s.Item,{ref:m,...i,className:a("mu-combobox-item",t),children:[o,e("span",{className:"mu-combobox-item-text",children:r}),e("span",{className:"mu-combobox-indicator",children:e(s.ItemIndicator,{render:e(f,{"aria-hidden":!0}),children:null})})]})}),O=p(function({className:o,...t},r){return e(s.Row,{ref:r,...t,className:a("mu-combobox-row",o)})}),A=p(function({className:o,...t},r){return e(s.Empty,{ref:r,...t,className:a("mu-combobox-empty mu-body",o)})}),F=p(function({className:o,...t},r){return e(s.Group,{ref:r,...t,className:a("mu-combobox-group",o)})}),$=p(function({className:o,...t},r){return e(s.GroupLabel,{ref:r,...t,className:a("mu-combobox-group-label mu-label-sm",o)})}),U=p(function({className:o,...t},r){return e(s.Separator,{ref:r,...t,className:a("mu-combobox-separator",o)})});export{w as Collection,A as Empty,F as Group,$ as GroupLabel,D as Input,k as Item,V as List,H as Popup,z as Root,O as Row,U as Separator,h as useFilter};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/combobox/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { Check, ChevronsUpDown, Search } from 'lucide-react';\nimport { createContext, forwardRef, useContext, type CSSProperties, type ReactNode } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport { splitPositioner } from '../../internal/popup';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { IconElement, Size } from '../../types';\n\n/** Renders the items of one group from grouped `items`, inside a Group. Base UI's part, unstyled. */\nexport const Collection = BaseCombobox.Collection;\n\n/** Base UI's matcher for `filter`, with locale-aware `contains`, `startsWith` and `endsWith`. */\nexport const useFilter = BaseCombobox.useFilter;\n\n/** Whether the Root is `inline`: its list sits in the page, not in a popup. */\nconst InlineContext = createContext(false);\n\nexport type RootProps<Value, Multiple extends boolean | undefined = false, Item = Value> = BaseCombobox.Root.Props<Value, Multiple, Item> & {\n size?: Exclude<Size, 'xs'>;\n};\n\n/**\n * Groups the input and the list, and holds the value. Pass `items` so the\n * list filters as people type and `Empty` knows when nothing matches.\n */\nexport function Root<Value, Multiple extends boolean | undefined = false, Item = Value>({ size, ...props }: RootProps<Value, Multiple, Item>) {\n const resolved = useRowSize(size);\n return (\n <SizeContext.Provider value={resolved}>\n <InlineContext.Provider value={props.inline ?? false}>\n {/* An inline list is always shown, so it is open unless the app says otherwise; Enter only picks in an open list. */}\n <BaseCombobox.Root {...(props.inline && props.open === undefined && props.defaultOpen === undefined ? { open: true } : null)} {...props} />\n </InlineContext.Provider>\n </SizeContext.Provider>\n );\n}\n\nexport interface InputProps extends Omit<BaseCombobox.Input.Props, 'size' | 'className' | 'style'> {\n /** A Lucide element at the start. Default a search icon; `null` drops it. */\n icon?: IconElement | null;\n /** The accessible name of the chevron that opens the list. Default \"Show options\". */\n triggerLabel?: string;\n /** Classes for the visible box around the input. */\n className?: string;\n /** Styles for the visible box around the input. */\n style?: CSSProperties;\n}\n\n/**\n * The text box people type in: an Input with a search icon and a chevron that\n * opens the list. The ref and every other prop go to the `<input>`;\n * `className` and `style` go to the box around it.\n */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function ComboboxInput(\n { icon = <Search />, triggerLabel = 'Show options', className, style, ...props },\n ref,\n) {\n const size = useRowSize();\n const inline = useContext(InlineContext);\n return (\n <BaseCombobox.InputGroup className={cx('mu-input-root', !inline && 'mu-combobox-input-root', 'mu-base', `mu-s-${size}`, className)} style={style}>\n {icon !== null ? <span className=\"mu-input-prefix\">{icon}</span> : null}\n <BaseCombobox.Input ref={ref} {...props} className=\"mu-input\" />\n {/* An inline list is always shown, so there is nothing to open. */}\n {inline ? null : (\n <span className=\"mu-input-suffix\">\n <BaseCombobox.Trigger className=\"mu-combobox-trigger mu-focus\" aria-label={triggerLabel}>\n
|
|
5
|
-
"mappings": ";AAAA,OAAS,YAAYA,MAAoB,0BACzC,OAAS,SAAAC,EAAO,kBAAAC,EAAgB,UAAAC,MAAc,eAC9C,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,MAAsD,QAC1F,OAAS,MAAAC,EAAI,aAAAC,MAAiB,+BAC9B,OAAS,mBAAAC,MAAuB,0BAChC,OAAS,eAAAC,EAAa,cAAAC,MAAkB,yBA0BhC,cAAAC,EA6BJ,QAAAC,MA7BI,oBAtBD,IAAMC,
|
|
6
|
-
"names": ["BaseCombobox", "Check", "ChevronsUpDown", "Search", "createContext", "forwardRef", "useContext", "cx", "withClass", "splitPositioner", "SizeContext", "useRowSize", "jsx", "jsxs", "Collection", "useFilter", "InlineContext", "Root", "size", "props", "resolved", "Input", "icon", "triggerLabel", "className", "style", "ref", "inline", "Popup", "container", "positioner", "rest", "List", "Item", "children", "Row", "Empty", "Group", "GroupLabel", "Separator"]
|
|
4
|
+
"sourcesContent": ["import { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { Check, ChevronsUpDown, Search } from 'lucide-react';\nimport { createContext, forwardRef, useContext, type CSSProperties, type ReactNode } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport { IconTooltip } from '../../internal/icon-tooltip';\nimport { splitPositioner } from '../../internal/popup';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { IconElement, Size } from '../../types';\n\n/** Renders the items of one group from grouped `items`, inside a Group. Base UI's part, unstyled. */\nexport const Collection = BaseCombobox.Collection;\n\n/** Base UI's matcher for `filter`, with locale-aware `contains`, `startsWith` and `endsWith`. */\nexport const useFilter = BaseCombobox.useFilter;\n\n/** Whether the Root is `inline`: its list sits in the page, not in a popup. */\nconst InlineContext = createContext(false);\n\nexport type RootProps<Value, Multiple extends boolean | undefined = false, Item = Value> = BaseCombobox.Root.Props<Value, Multiple, Item> & {\n size?: Exclude<Size, 'xs'>;\n};\n\n/**\n * Groups the input and the list, and holds the value. Pass `items` so the\n * list filters as people type and `Empty` knows when nothing matches.\n */\nexport function Root<Value, Multiple extends boolean | undefined = false, Item = Value>({ size, ...props }: RootProps<Value, Multiple, Item>) {\n const resolved = useRowSize(size);\n return (\n <SizeContext.Provider value={resolved}>\n <InlineContext.Provider value={props.inline ?? false}>\n {/* An inline list is always shown, so it is open unless the app says otherwise; Enter only picks in an open list. */}\n <BaseCombobox.Root {...(props.inline && props.open === undefined && props.defaultOpen === undefined ? { open: true } : null)} {...props} />\n </InlineContext.Provider>\n </SizeContext.Provider>\n );\n}\n\nexport interface InputProps extends Omit<BaseCombobox.Input.Props, 'size' | 'className' | 'style'> {\n /** A Lucide element at the start. Default a search icon; `null` drops it. */\n icon?: IconElement | null;\n /** The accessible name of the chevron that opens the list. Default \"Show options\". */\n triggerLabel?: string;\n /** Classes for the visible box around the input. */\n className?: string;\n /** Styles for the visible box around the input. */\n style?: CSSProperties;\n}\n\n/**\n * The text box people type in: an Input with a search icon and a chevron that\n * opens the list. The ref and every other prop go to the `<input>`;\n * `className` and `style` go to the box around it.\n */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function ComboboxInput(\n { icon = <Search />, triggerLabel = 'Show options', className, style, ...props },\n ref,\n) {\n const size = useRowSize();\n const inline = useContext(InlineContext);\n return (\n <BaseCombobox.InputGroup className={cx('mu-input-root', !inline && 'mu-combobox-input-root', 'mu-base', `mu-s-${size}`, className)} style={style}>\n {icon !== null ? <span className=\"mu-input-prefix\">{icon}</span> : null}\n <BaseCombobox.Input ref={ref} {...props} className=\"mu-input\" />\n {/* An inline list is always shown, so there is nothing to open. */}\n {inline ? null : (\n <span className=\"mu-input-suffix\">\n <IconTooltip label={triggerLabel}>\n <BaseCombobox.Trigger className=\"mu-combobox-trigger mu-focus\" aria-label={triggerLabel}>\n <ChevronsUpDown aria-hidden />\n </BaseCombobox.Trigger>\n </IconTooltip>\n </span>\n )}\n </BaseCombobox.InputGroup>\n );\n});\n\ntype PositionerProps = Pick<\n BaseCombobox.Positioner.Props,\n | 'side'\n | 'align'\n | 'collisionAvoidance'\n | 'collisionBoundary'\n | 'sticky'\n | 'anchor'\n | 'positionMethod'\n | 'disableAnchorTracking'\n>;\n\nexport interface PopupProps extends BaseCombobox.Popup.Props, PositionerProps {\n /** Where the list is portaled to. Default `document.body`. */\n container?: BaseCombobox.Portal.Props['container'];\n}\n\n/** The floating panel under the input. Holds `Empty` and `List`. */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function ComboboxPopup({ container, className, ...props }, ref) {\n const size = useRowSize();\n const [positioner, rest] = splitPositioner(props);\n return (\n <BaseCombobox.Portal container={container}>\n <BaseCombobox.Positioner sideOffset={4} align=\"start\" {...positioner} className=\"mu-positioner\">\n <BaseCombobox.Popup ref={ref} {...rest} className={withClass(`mu-combobox-popup mu-popup mu-popup-motion mu-base mu-s-${size}`, className)} />\n </BaseCombobox.Positioner>\n </BaseCombobox.Portal>\n );\n});\n\nexport interface ListProps extends BaseCombobox.List.Props {}\n\n/** The items. Pass a function child to render each of the root's filtered `items`. */\nexport const List = forwardRef<HTMLDivElement, ListProps>(function ComboboxList({ className, ...props }, ref) {\n return <BaseCombobox.List ref={ref} {...props} className={withClass('mu-combobox-list', className)} />;\n});\n\nexport interface ItemProps extends BaseCombobox.Item.Props {\n /** A Lucide element before the label. */\n icon?: IconElement;\n children?: ReactNode;\n}\n\n/** One option, with a check at the end when chosen. */\nexport const Item = forwardRef<HTMLDivElement, ItemProps>(function ComboboxItem({ icon, className, children, ...props }, ref) {\n return (\n <BaseCombobox.Item ref={ref} {...props} className={withClass('mu-combobox-item', className)}>\n {icon}\n <span className=\"mu-combobox-item-text\">{children}</span>\n <span className=\"mu-combobox-indicator\">\n {/* The empty children replace Base UI's default \"\u2714\uFE0F\" text inside the svg. */}\n <BaseCombobox.ItemIndicator render={<Check aria-hidden />}>{null}</BaseCombobox.ItemIndicator>\n </span>\n </BaseCombobox.Item>\n );\n});\n\nexport interface RowProps extends BaseCombobox.Row.Props {}\n\n/**\n * One row of a grid, with `grid` on the root: its items are square cells for\n * an icon or an emoji, and arrow keys move across rows and columns. Split the\n * filtered items into rows of a fixed count.\n */\nexport const Row = forwardRef<HTMLDivElement, RowProps>(function ComboboxRow({ className, ...props }, ref) {\n return <BaseCombobox.Row ref={ref} {...props} className={withClass('mu-combobox-row', className)} />;\n});\n\nexport interface EmptyProps extends BaseCombobox.Empty.Props {}\n\n/** What shows when nothing matches, such as \"No tags found\". Always mounted, so screen readers hear it. */\nexport const Empty = forwardRef<HTMLDivElement, EmptyProps>(function ComboboxEmpty({ className, ...props }, ref) {\n return <BaseCombobox.Empty ref={ref} {...props} className={withClass('mu-combobox-empty mu-body', className)} />;\n});\n\nexport interface GroupProps extends BaseCombobox.Group.Props {}\n\n/** A labeled set of items. With grouped `items`, render its items with `Collection`. */\nexport const Group = forwardRef<HTMLDivElement, GroupProps>(function ComboboxGroup({ className, ...props }, ref) {\n return <BaseCombobox.Group ref={ref} {...props} className={withClass('mu-combobox-group', className)} />;\n});\n\nexport interface GroupLabelProps extends BaseCombobox.GroupLabel.Props {}\n\n/** The name of a Group. */\nexport const GroupLabel = forwardRef<HTMLDivElement, GroupLabelProps>(function ComboboxGroupLabel({ className, ...props }, ref) {\n return <BaseCombobox.GroupLabel ref={ref} {...props} className={withClass('mu-combobox-group-label mu-label-sm', className)} />;\n});\n\nexport interface SeparatorProps extends BaseCombobox.Separator.Props {}\n\n/** A line between groups of items. */\nexport const Separator = forwardRef<HTMLDivElement, SeparatorProps>(function ComboboxSeparator({ className, ...props }, ref) {\n return <BaseCombobox.Separator ref={ref} {...props} className={withClass('mu-combobox-separator', className)} />;\n});\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAS,YAAYA,MAAoB,0BACzC,OAAS,SAAAC,EAAO,kBAAAC,EAAgB,UAAAC,MAAc,eAC9C,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,MAAsD,QAC1F,OAAS,MAAAC,EAAI,aAAAC,MAAiB,+BAC9B,OAAS,eAAAC,MAAmB,iCAC5B,OAAS,mBAAAC,MAAuB,0BAChC,OAAS,eAAAC,EAAa,cAAAC,MAAkB,yBA0BhC,cAAAC,EA6BJ,QAAAC,MA7BI,oBAtBD,IAAMC,EAAaf,EAAa,WAG1BgB,EAAYhB,EAAa,UAGhCiB,EAAgBb,EAAc,EAAK,EAUlC,SAASc,EAAwE,CAAE,KAAAC,EAAM,GAAGC,CAAM,EAAqC,CAC5I,IAAMC,EAAWT,EAAWO,CAAI,EAChC,OACEN,EAACF,EAAY,SAAZ,CAAqB,MAAOU,EAC3B,SAAAR,EAACI,EAAc,SAAd,CAAuB,MAAOG,EAAM,QAAU,GAE7C,SAAAP,EAACb,EAAa,KAAb,CAAmB,GAAIoB,EAAM,QAAUA,EAAM,OAAS,QAAaA,EAAM,cAAgB,OAAY,CAAE,KAAM,EAAK,EAAI,KAAQ,GAAGA,EAAO,EAC3I,EACF,CAEJ,CAkBO,IAAME,EAAQjB,EAAyC,SAC5D,CAAE,KAAAkB,EAAOV,EAACV,EAAA,EAAO,EAAI,aAAAqB,EAAe,eAAgB,UAAAC,EAAW,MAAAC,EAAO,GAAGN,CAAM,EAC/EO,EACA,CACA,IAAMR,EAAOP,EAAW,EAClBgB,EAAStB,EAAWW,CAAa,EACvC,OACEH,EAACd,EAAa,WAAb,CAAwB,UAAWO,EAAG,gBAAiB,CAACqB,GAAU,yBAA0B,UAAW,QAAQT,CAAI,GAAIM,CAAS,EAAG,MAAOC,EACxI,UAAAH,IAAS,KAAOV,EAAC,QAAK,UAAU,kBAAmB,SAAAU,EAAK,EAAU,KACnEV,EAACb,EAAa,MAAb,CAAmB,IAAK2B,EAAM,GAAGP,EAAO,UAAU,WAAW,EAE7DQ,EAAS,KACRf,EAAC,QAAK,UAAU,kBACd,SAAAA,EAACJ,EAAA,CAAY,MAAOe,EAClB,SAAAX,EAACb,EAAa,QAAb,CAAqB,UAAU,+BAA+B,aAAYwB,EACzE,SAAAX,EAACX,EAAA,CAAe,cAAW,GAAC,EAC9B,EACF,EACF,GAEJ,CAEJ,CAAC,EAoBY2B,EAAQxB,EAAuC,SAAuB,CAAE,UAAAyB,EAAW,UAAAL,EAAW,GAAGL,CAAM,EAAGO,EAAK,CAC1H,IAAMR,EAAOP,EAAW,EAClB,CAACmB,EAAYC,CAAI,EAAItB,EAAgBU,CAAK,EAChD,OACEP,EAACb,EAAa,OAAb,CAAoB,UAAW8B,EAC9B,SAAAjB,EAACb,EAAa,WAAb,CAAwB,WAAY,EAAG,MAAM,QAAS,GAAG+B,EAAY,UAAU,gBAC9E,SAAAlB,EAACb,EAAa,MAAb,CAAmB,IAAK2B,EAAM,GAAGK,EAAM,UAAWxB,EAAU,2DAA2DW,CAAI,GAAIM,CAAS,EAAG,EAC9I,EACF,CAEJ,CAAC,EAKYQ,EAAO5B,EAAsC,SAAsB,CAAE,UAAAoB,EAAW,GAAGL,CAAM,EAAGO,EAAK,CAC5G,OAAOd,EAACb,EAAa,KAAb,CAAkB,IAAK2B,EAAM,GAAGP,EAAO,UAAWZ,EAAU,mBAAoBiB,CAAS,EAAG,CACtG,CAAC,EASYS,EAAO7B,EAAsC,SAAsB,CAAE,KAAAkB,EAAM,UAAAE,EAAW,SAAAU,EAAU,GAAGf,CAAM,EAAGO,EAAK,CAC5H,OACEb,EAACd,EAAa,KAAb,CAAkB,IAAK2B,EAAM,GAAGP,EAAO,UAAWZ,EAAU,mBAAoBiB,CAAS,EACvF,UAAAF,EACDV,EAAC,QAAK,UAAU,wBAAyB,SAAAsB,EAAS,EAClDtB,EAAC,QAAK,UAAU,wBAEd,SAAAA,EAACb,EAAa,cAAb,CAA2B,OAAQa,EAACZ,EAAA,CAAM,cAAW,GAAC,EAAK,cAAK,EACnE,GACF,CAEJ,CAAC,EASYmC,EAAM/B,EAAqC,SAAqB,CAAE,UAAAoB,EAAW,GAAGL,CAAM,EAAGO,EAAK,CACzG,OAAOd,EAACb,EAAa,IAAb,CAAiB,IAAK2B,EAAM,GAAGP,EAAO,UAAWZ,EAAU,kBAAmBiB,CAAS,EAAG,CACpG,CAAC,EAKYY,EAAQhC,EAAuC,SAAuB,CAAE,UAAAoB,EAAW,GAAGL,CAAM,EAAGO,EAAK,CAC/G,OAAOd,EAACb,EAAa,MAAb,CAAmB,IAAK2B,EAAM,GAAGP,EAAO,UAAWZ,EAAU,4BAA6BiB,CAAS,EAAG,CAChH,CAAC,EAKYa,EAAQjC,EAAuC,SAAuB,CAAE,UAAAoB,EAAW,GAAGL,CAAM,EAAGO,EAAK,CAC/G,OAAOd,EAACb,EAAa,MAAb,CAAmB,IAAK2B,EAAM,GAAGP,EAAO,UAAWZ,EAAU,oBAAqBiB,CAAS,EAAG,CACxG,CAAC,EAKYc,EAAalC,EAA4C,SAA4B,CAAE,UAAAoB,EAAW,GAAGL,CAAM,EAAGO,EAAK,CAC9H,OAAOd,EAACb,EAAa,WAAb,CAAwB,IAAK2B,EAAM,GAAGP,EAAO,UAAWZ,EAAU,sCAAuCiB,CAAS,EAAG,CAC/H,CAAC,EAKYe,EAAYnC,EAA2C,SAA2B,CAAE,UAAAoB,EAAW,GAAGL,CAAM,EAAGO,EAAK,CAC3H,OAAOd,EAACb,EAAa,UAAb,CAAuB,IAAK2B,EAAM,GAAGP,EAAO,UAAWZ,EAAU,wBAAyBiB,CAAS,EAAG,CAChH,CAAC",
|
|
6
|
+
"names": ["BaseCombobox", "Check", "ChevronsUpDown", "Search", "createContext", "forwardRef", "useContext", "cx", "withClass", "IconTooltip", "splitPositioner", "SizeContext", "useRowSize", "jsx", "jsxs", "Collection", "useFilter", "InlineContext", "Root", "size", "props", "resolved", "Input", "icon", "triggerLabel", "className", "style", "ref", "inline", "Popup", "container", "positioner", "rest", "List", "Item", "children", "Row", "Empty", "Group", "GroupLabel", "Separator"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{X as M}from"lucide-react";import{forwardRef as a}from"react";import{cx as
|
|
2
|
+
import{X as M}from"lucide-react";import{forwardRef as a}from"react";import{cx as n,withClass as s}from"../../internal/class-name.js";import{IconTooltip as N}from"../../internal/icon-tooltip.js";import{SizeContext as B}from"../../internal/size.js";import{Button as E}from"../button/index.js";import{jsx as e,jsxs as m}from"react/jsx-runtime";function z(i,p,g){let P=a(function({className:o,...r},t){return e(i.Trigger,{ref:t,...r,className:s(`mu-${p}-trigger`,o)})}),f=a(function({container:o,sheet:r=!0,variant:t="panel",fullScreen:b=!1,closeLabel:u="Close",className:C,children:v,...H},L){let c=t==="bare";return m(i.Portal,{container:o,children:[e(i.Backdrop,{className:"mu-dialog-backdrop"}),e(i.Viewport,{className:n("mu-dialog-viewport",b?"mu-dialog-full":r&&"mu-dialog-sheet"),children:m(i.Popup,{ref:L,...H,className:s(n(`mu-dialog-popup mu-${p}-popup`,c&&"mu-dialog-bare","mu-popup mu-base mu-s-md"),C),children:[e(B.Provider,{value:"md",children:v}),g&&!c?e(N,{label:u,container:o,children:e(i.Close,{className:"mu-dialog-x",render:e(E,{variant:"ghost",size:"sm",icon:e(M,{}),"aria-label":u})})}):null]})})]})}),d=a(function({className:o,...r},t){return e(i.Title,{ref:t,...r,className:s("mu-dialog-title mu-title",o)})}),D=a(function({className:o,...r},t){return e(i.Description,{ref:t,...r,className:s("mu-dialog-description mu-body",o)})}),T=a(function({className:o,...r},t){return e(i.Close,{ref:t,...r,className:s(`mu-${p}-close`,o)})}),x=a(function({className:o,...r},t){return e("div",{ref:t,...r,className:n("mu-dialog-footer",o)})});return{Root:i.Root,Trigger:P,Popup:f,Title:d,Description:D,Close:T,Footer:x}}export{z as createDialogParts};
|
|
3
3
|
//# sourceMappingURL=parts.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dialog/parts.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { X } from 'lucide-react';\nimport { forwardRef, type HTMLAttributes } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport { SizeContext } from '../../internal/size';\nimport { Button } from '../button';\n\nexport type RootProps = BaseDialog.Root.Props;\nexport interface TriggerProps extends BaseDialog.Trigger.Props {}\nexport interface PopupProps extends BaseDialog.Popup.Props {\n /** Where the dialog is portaled to. Default `document.body`. */\n container?: BaseDialog.Portal.Props['container'];\n /** Below `breakpoint-sm` the dialog becomes a sheet from the bottom. `false` keeps it centered. Default true. */\n sheet?: boolean;\n}\n\nexport interface VariantProps {\n /**\n * `panel` (default) pads the content `space-5`, stacks it `space-4` apart and\n * adds the X. `bare` keeps the surface, radius and border but has no padding,\n * gap or X: the content runs edge to edge, for a search palette or an image.\n */\n variant?: 'panel' | 'bare';\n /**\n * Covers the whole screen with square corners, at every width, instead of\n * a centered panel or a sheet. With `bare`, for an image viewer.\n */\n fullScreen?: boolean;\n}\nexport interface TitleProps extends BaseDialog.Title.Props {}\nexport interface DescriptionProps extends BaseDialog.Description.Props {}\nexport interface CloseProps extends BaseDialog.Close.Props {}\nexport interface FooterProps extends HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Builds the styled parts on Base UI's Dialog or AlertDialog, which share\n * their anatomy. `closeButton` adds the X at the top right of the popup.\n */\nexport function createDialogParts(Base: typeof BaseDialog, name: 'dialog' | 'alert-dialog', closeButton: boolean) {\n const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function DialogTrigger({ className, ...props }, ref) {\n return <Base.Trigger ref={ref} {...props} className={withClass(`mu-${name}-trigger`, className)} />;\n });\n\n const Popup = forwardRef<HTMLDivElement, PopupProps & VariantProps & { closeLabel?: string }>(function DialogPopup(\n { container, sheet = true, variant = 'panel', fullScreen = false, closeLabel = 'Close', className, children, ...props },\n ref,\n ) {\n const bare = variant === 'bare';\n return (\n <Base.Portal container={container}>\n <Base.Backdrop className=\"mu-dialog-backdrop\" />\n <Base.Viewport className={cx('mu-dialog-viewport', fullScreen ? 'mu-dialog-full' : sheet && 'mu-dialog-sheet')}>\n <Base.Popup\n ref={ref}\n {...props}\n className={withClass(cx(`mu-dialog-popup mu-${name}-popup`, bare && 'mu-dialog-bare', 'mu-popup mu-base mu-s-md'), className)}\n >\n {/* A dialog is md wherever it is declared: React context crosses the portal, so a size set by a parent Root (a sm Table) would leak in. */}\n <SizeContext.Provider value=\"md\">{children}</SizeContext.Provider>\n {closeButton && !bare ? (\n <Base.Close className=\"mu-dialog-x\" render={<Button variant=\"ghost\" size=\"sm\" icon={<X />} aria-label={closeLabel} />} />\n ) : null}\n </Base.Popup>\n </Base.Viewport>\n </Base.Portal>\n );\n });\n\n const Title = forwardRef<HTMLHeadingElement, TitleProps>(function DialogTitle({ className, ...props }, ref) {\n return <Base.Title ref={ref} {...props} className={withClass('mu-dialog-title mu-title', className)} />;\n });\n\n const Description = forwardRef<HTMLParagraphElement, DescriptionProps>(function DialogDescription({ className, ...props }, ref) {\n return <Base.Description ref={ref} {...props} className={withClass('mu-dialog-description mu-body', className)} />;\n });\n\n const Close = forwardRef<HTMLButtonElement, CloseProps>(function DialogClose({ className, ...props }, ref) {\n return <Base.Close ref={ref} {...props} className={withClass(`mu-${name}-close`, className)} />;\n });\n\n const Footer = forwardRef<HTMLDivElement, FooterProps>(function DialogFooter({ className, ...props }, ref) {\n return <div ref={ref} {...props} className={cx('mu-dialog-footer', className)} />;\n });\n\n return { Root: Base.Root, Trigger, Popup, Title, Description, Close, Footer };\n}\n"],
|
|
5
|
-
"mappings": ";AACA,OAAS,KAAAA,MAAS,eAClB,OAAS,cAAAC,MAAuC,QAChD,OAAS,MAAAC,EAAI,aAAAC,MAAiB,+BAC9B,OAAS,eAAAC,MAAmB,yBAC5B,OAAS,UAAAC,MAAc,qBAmCZ,cAAAC,EAYD,QAAAC,MAZC,oBAFJ,SAASC,EAAkBC,EAAyBC,EAAiCC,EAAsB,CAChH,IAAMC,
|
|
6
|
-
"names": ["X", "forwardRef", "cx", "withClass", "SizeContext", "Button", "jsx", "jsxs", "createDialogParts", "Base", "name", "closeButton", "Trigger", "className", "props", "ref", "Popup", "container", "sheet", "variant", "fullScreen", "closeLabel", "children", "bare", "Title", "Description", "Close", "Footer"]
|
|
4
|
+
"sourcesContent": ["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { X } from 'lucide-react';\nimport { forwardRef, type HTMLAttributes } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport { IconTooltip } from '../../internal/icon-tooltip';\nimport { SizeContext } from '../../internal/size';\nimport { Button } from '../button';\n\nexport type RootProps = BaseDialog.Root.Props;\nexport interface TriggerProps extends BaseDialog.Trigger.Props {}\nexport interface PopupProps extends BaseDialog.Popup.Props {\n /** Where the dialog is portaled to. Default `document.body`. */\n container?: BaseDialog.Portal.Props['container'];\n /** Below `breakpoint-sm` the dialog becomes a sheet from the bottom. `false` keeps it centered. Default true. */\n sheet?: boolean;\n}\n\nexport interface VariantProps {\n /**\n * `panel` (default) pads the content `space-5`, stacks it `space-4` apart and\n * adds the X. `bare` keeps the surface, radius and border but has no padding,\n * gap or X: the content runs edge to edge, for a search palette or an image.\n */\n variant?: 'panel' | 'bare';\n /**\n * Covers the whole screen with square corners, at every width, instead of\n * a centered panel or a sheet. With `bare`, for an image viewer.\n */\n fullScreen?: boolean;\n}\nexport interface TitleProps extends BaseDialog.Title.Props {}\nexport interface DescriptionProps extends BaseDialog.Description.Props {}\nexport interface CloseProps extends BaseDialog.Close.Props {}\nexport interface FooterProps extends HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Builds the styled parts on Base UI's Dialog or AlertDialog, which share\n * their anatomy. `closeButton` adds the X at the top right of the popup.\n */\nexport function createDialogParts(Base: typeof BaseDialog, name: 'dialog' | 'alert-dialog', closeButton: boolean) {\n const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function DialogTrigger({ className, ...props }, ref) {\n return <Base.Trigger ref={ref} {...props} className={withClass(`mu-${name}-trigger`, className)} />;\n });\n\n const Popup = forwardRef<HTMLDivElement, PopupProps & VariantProps & { closeLabel?: string }>(function DialogPopup(\n { container, sheet = true, variant = 'panel', fullScreen = false, closeLabel = 'Close', className, children, ...props },\n ref,\n ) {\n const bare = variant === 'bare';\n return (\n <Base.Portal container={container}>\n <Base.Backdrop className=\"mu-dialog-backdrop\" />\n <Base.Viewport className={cx('mu-dialog-viewport', fullScreen ? 'mu-dialog-full' : sheet && 'mu-dialog-sheet')}>\n <Base.Popup\n ref={ref}\n {...props}\n className={withClass(cx(`mu-dialog-popup mu-${name}-popup`, bare && 'mu-dialog-bare', 'mu-popup mu-base mu-s-md'), className)}\n >\n {/* A dialog is md wherever it is declared: React context crosses the portal, so a size set by a parent Root (a sm Table) would leak in. */}\n <SizeContext.Provider value=\"md\">{children}</SizeContext.Provider>\n {closeButton && !bare ? (\n <IconTooltip label={closeLabel} container={container}>\n <Base.Close className=\"mu-dialog-x\" render={<Button variant=\"ghost\" size=\"sm\" icon={<X />} aria-label={closeLabel} />} />\n </IconTooltip>\n ) : null}\n </Base.Popup>\n </Base.Viewport>\n </Base.Portal>\n );\n });\n\n const Title = forwardRef<HTMLHeadingElement, TitleProps>(function DialogTitle({ className, ...props }, ref) {\n return <Base.Title ref={ref} {...props} className={withClass('mu-dialog-title mu-title', className)} />;\n });\n\n const Description = forwardRef<HTMLParagraphElement, DescriptionProps>(function DialogDescription({ className, ...props }, ref) {\n return <Base.Description ref={ref} {...props} className={withClass('mu-dialog-description mu-body', className)} />;\n });\n\n const Close = forwardRef<HTMLButtonElement, CloseProps>(function DialogClose({ className, ...props }, ref) {\n return <Base.Close ref={ref} {...props} className={withClass(`mu-${name}-close`, className)} />;\n });\n\n const Footer = forwardRef<HTMLDivElement, FooterProps>(function DialogFooter({ className, ...props }, ref) {\n return <div ref={ref} {...props} className={cx('mu-dialog-footer', className)} />;\n });\n\n return { Root: Base.Root, Trigger, Popup, Title, Description, Close, Footer };\n}\n"],
|
|
5
|
+
"mappings": ";AACA,OAAS,KAAAA,MAAS,eAClB,OAAS,cAAAC,MAAuC,QAChD,OAAS,MAAAC,EAAI,aAAAC,MAAiB,+BAC9B,OAAS,eAAAC,MAAmB,iCAC5B,OAAS,eAAAC,MAAmB,yBAC5B,OAAS,UAAAC,MAAc,qBAmCZ,cAAAC,EAYD,QAAAC,MAZC,oBAFJ,SAASC,EAAkBC,EAAyBC,EAAiCC,EAAsB,CAChH,IAAMC,EAAUZ,EAA4C,SAAuB,CAAE,UAAAa,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC/G,OAAOT,EAACG,EAAK,QAAL,CAAa,IAAKM,EAAM,GAAGD,EAAO,UAAWZ,EAAU,MAAMQ,CAAI,WAAYG,CAAS,EAAG,CACnG,CAAC,EAEKG,EAAQhB,EAAgF,SAC5F,CAAE,UAAAiB,EAAW,MAAAC,EAAQ,GAAM,QAAAC,EAAU,QAAS,WAAAC,EAAa,GAAO,WAAAC,EAAa,QAAS,UAAAR,EAAW,SAAAS,EAAU,GAAGR,CAAM,EACtHC,EACA,CACA,IAAMQ,EAAOJ,IAAY,OACzB,OACEZ,EAACE,EAAK,OAAL,CAAY,UAAWQ,EACtB,UAAAX,EAACG,EAAK,SAAL,CAAc,UAAU,qBAAqB,EAC9CH,EAACG,EAAK,SAAL,CAAc,UAAWR,EAAG,qBAAsBmB,EAAa,iBAAmBF,GAAS,iBAAiB,EAC3G,SAAAX,EAACE,EAAK,MAAL,CACC,IAAKM,EACJ,GAAGD,EACJ,UAAWZ,EAAUD,EAAG,sBAAsBS,CAAI,SAAUa,GAAQ,iBAAkB,0BAA0B,EAAGV,CAAS,EAG5H,UAAAP,EAACF,EAAY,SAAZ,CAAqB,MAAM,KAAM,SAAAkB,EAAS,EAC1CX,GAAe,CAACY,EACfjB,EAACH,EAAA,CAAY,MAAOkB,EAAY,UAAWJ,EACzC,SAAAX,EAACG,EAAK,MAAL,CAAW,UAAU,cAAc,OAAQH,EAACD,EAAA,CAAO,QAAQ,QAAQ,KAAK,KAAK,KAAMC,EAACP,EAAA,EAAE,EAAI,aAAYsB,EAAY,EAAI,EACzH,EACE,MACN,EACF,GACF,CAEJ,CAAC,EAEKG,EAAQxB,EAA2C,SAAqB,CAAE,UAAAa,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC1G,OAAOT,EAACG,EAAK,MAAL,CAAW,IAAKM,EAAM,GAAGD,EAAO,UAAWZ,EAAU,2BAA4BW,CAAS,EAAG,CACvG,CAAC,EAEKY,EAAczB,EAAmD,SAA2B,CAAE,UAAAa,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC9H,OAAOT,EAACG,EAAK,YAAL,CAAiB,IAAKM,EAAM,GAAGD,EAAO,UAAWZ,EAAU,gCAAiCW,CAAS,EAAG,CAClH,CAAC,EAEKa,EAAQ1B,EAA0C,SAAqB,CAAE,UAAAa,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACzG,OAAOT,EAACG,EAAK,MAAL,CAAW,IAAKM,EAAM,GAAGD,EAAO,UAAWZ,EAAU,MAAMQ,CAAI,SAAUG,CAAS,EAAG,CAC/F,CAAC,EAEKc,EAAS3B,EAAwC,SAAsB,CAAE,UAAAa,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACzG,OAAOT,EAAC,OAAI,IAAKS,EAAM,GAAGD,EAAO,UAAWb,EAAG,mBAAoBY,CAAS,EAAG,CACjF,CAAC,EAED,MAAO,CAAE,KAAMJ,EAAK,KAAM,QAAAG,EAAS,MAAAI,EAAO,MAAAQ,EAAO,YAAAC,EAAa,MAAAC,EAAO,OAAAC,CAAO,CAC9E",
|
|
6
|
+
"names": ["X", "forwardRef", "cx", "withClass", "IconTooltip", "SizeContext", "Button", "jsx", "jsxs", "createDialogParts", "Base", "name", "closeButton", "Trigger", "className", "props", "ref", "Popup", "container", "sheet", "variant", "fullScreen", "closeLabel", "children", "bare", "Title", "Description", "Close", "Footer"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{useDirection as D}from"@base-ui/react/direction-provider";import{Drawer as t}from"@base-ui/react/drawer";import{X as f}from"lucide-react";import{createContext as g,forwardRef as n,useContext as x}from"react";import{cx as C,withClass as i}from"../../internal/class-name.js";import{
|
|
2
|
+
import{useDirection as D}from"@base-ui/react/direction-provider";import{Drawer as t}from"@base-ui/react/drawer";import{X as f}from"lucide-react";import{createContext as g,forwardRef as n,useContext as x}from"react";import{cx as C,withClass as i}from"../../internal/class-name.js";import{IconTooltip as T}from"../../internal/icon-tooltip.js";import{SizeContext as B}from"../../internal/size.js";import{Button as b}from"../button/index.js";import{jsx as r,jsxs as m}from"react/jsx-runtime";var l=g("right");function y({side:s="end",...o}){let a=D(),e=s==="bottom"?"bottom":s==="start"==(a==="rtl")?"right":"left",p=e==="bottom"?"down":e;return r(l.Provider,{value:e,children:r(t.Root,{...o,swipeDirection:p})})}var L=n(function({className:o,...a},e){return r(t.Trigger,{ref:e,...a,className:i("mu-drawer-trigger",o)})}),z=n(function({container:o,variant:a="panel",closeLabel:e="Close",className:p,children:d,...u},w){let P=x(l),c=a==="bare";return m(t.Portal,{container:o,children:[r(t.Backdrop,{className:"mu-drawer-backdrop"}),r(t.Viewport,{className:`mu-drawer-viewport mu-drawer-${P}`,children:m(t.Popup,{ref:w,...u,className:i(C("mu-drawer-popup",c&&"mu-drawer-bare","mu-base mu-s-md"),p),children:[r(t.Content,{className:"mu-drawer-content",children:r(B.Provider,{value:"md",children:d})}),c?r(t.Close,{className:"mu-drawer-sr-close mu-visually-hidden",tabIndex:-1,children:e}):r(T,{label:e,container:o,children:r(t.Close,{className:"mu-drawer-x",render:r(b,{variant:"ghost",size:"sm",icon:r(f,{}),"aria-label":e})})})]})})]})}),I=n(function({className:o,...a},e){return r(t.Title,{ref:e,...a,className:i("mu-drawer-title mu-title",o)})}),k=n(function({className:o,...a},e){return r(t.Description,{ref:e,...a,className:i("mu-drawer-description mu-body",o)})}),V=n(function({className:o,...a},e){return r(t.Close,{ref:e,...a,className:i("mu-drawer-close",o)})});export{V as Close,k as Description,z as Popup,y as Root,I as Title,L as Trigger};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/drawer/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useDirection } from '@base-ui/react/direction-provider';\nimport { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { X } from 'lucide-react';\nimport { createContext, forwardRef, useContext } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport { SizeContext } from '../../internal/size';\nimport { Button } from '../button';\n\n/** The edge a drawer slides from. `start` and `end` follow the text direction. */\nexport type DrawerSide = 'start' | 'end' | 'bottom';\n\ntype Edge = 'left' | 'right' | 'bottom';\n\nconst EdgeContext = createContext<Edge>('right');\n\nexport interface RootProps extends Omit<BaseDrawer.Root.Props, 'swipeDirection' | 'snapPoints' | 'defaultSnapPoint' | 'snapPoint' | 'onSnapPointChange' | 'snapToSequentialPoints'> {\n /** The edge it slides from, and swipes back to. `start` is the left edge in a left-to-right page. Default `end`. */\n side?: DrawerSide;\n}\n\n/** Groups a trigger and its drawer. Controlled with `open` and `onOpenChange`. */\nexport function Root({ side = 'end', ...props }: RootProps) {\n const direction = useDirection();\n const edge: Edge = side === 'bottom' ? 'bottom' : (side === 'start') === (direction === 'rtl') ? 'right' : 'left';\n const swipeDirection = edge === 'bottom' ? 'down' : edge;\n return (\n <EdgeContext.Provider value={edge}>\n <BaseDrawer.Root {...props} swipeDirection={swipeDirection} />\n </EdgeContext.Provider>\n );\n}\n\nexport interface TriggerProps extends BaseDrawer.Trigger.Props {}\n\n/** Opens the drawer. Usually `render={<Button />}`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function DrawerTrigger({ className, ...props }, ref) {\n return <BaseDrawer.Trigger ref={ref} {...props} className={withClass('mu-drawer-trigger', className)} />;\n});\n\nexport interface PopupProps extends BaseDrawer.Popup.Props {\n /** Where the drawer is portaled to. Default `document.body`. */\n container?: BaseDrawer.Portal.Props['container'];\n /**\n * `panel` (default) pads the content `space-5`, stacks it `space-4` apart\n * and adds the X. `bare` has no padding, gap or X, for content that lays\n * itself out, such as an app's navigation sidebar: its content is exactly\n * the drawer's height, so the app's own region scrolls, and its Close is\n * for screen readers only.\n */\n variant?: 'panel' | 'bare';\n /** The accessible name of the X, or of the screen-reader Close in `bare`. Default \"Close\". */\n closeLabel?: string;\n}\n\n/**\n * The panel against one edge of the screen, over a dimmed backdrop, full\n * height (or full width from the bottom). Swipe it back to its edge to close.\n */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function DrawerPopup(\n { container, variant = 'panel', closeLabel = 'Close', className, children, ...props },\n ref,\n) {\n const edge = useContext(EdgeContext);\n const bare = variant === 'bare';\n return (\n <BaseDrawer.Portal container={container}>\n <BaseDrawer.Backdrop className=\"mu-drawer-backdrop\" />\n <BaseDrawer.Viewport className={`mu-drawer-viewport mu-drawer-${edge}`}>\n <BaseDrawer.Popup ref={ref} {...props} className={withClass(cx('mu-drawer-popup', bare && 'mu-drawer-bare', 'mu-base mu-s-md'), className)}>\n {/* Content keeps text selectable with a mouse instead of starting a swipe. */}\n <BaseDrawer.Content className=\"mu-drawer-content\">\n {/* A drawer is md wherever it is declared, as a Dialog is. */}\n <SizeContext.Provider value=\"md\">{children}</SizeContext.Provider>\n </BaseDrawer.Content>\n {bare ? (\n /* No X on screen, but screen reader users on touch screens, who can't press Escape or swipe, still find a Close. Out of the tab order: keyboards have Escape. */\n <BaseDrawer.Close className=\"mu-drawer-sr-close mu-visually-hidden\" tabIndex={-1}>\n {closeLabel}\n </BaseDrawer.Close>\n ) : (\n <BaseDrawer.Close className=\"mu-drawer-x\" render={<Button variant=\"ghost\" size=\"sm\" icon={<X />} aria-label={closeLabel} />} />\n )}\n </BaseDrawer.Popup>\n </BaseDrawer.Viewport>\n </BaseDrawer.Portal>\n );\n});\n\nexport interface TitleProps extends BaseDrawer.Title.Props {}\n\n/** The drawer's heading, an `<h2>`. Names it for screen readers; hide it with `mu-visually-hidden` when the content names itself. */\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(function DrawerTitle({ className, ...props }, ref) {\n return <BaseDrawer.Title ref={ref} {...props} className={withClass('mu-drawer-title mu-title', className)} />;\n});\n\nexport interface DescriptionProps extends BaseDrawer.Description.Props {}\n\n/** A `<p>` under the title. */\nexport const Description = forwardRef<HTMLParagraphElement, DescriptionProps>(function DrawerDescription({ className, ...props }, ref) {\n return <BaseDrawer.Description ref={ref} {...props} className={withClass('mu-drawer-description mu-body', className)} />;\n});\n\nexport interface CloseProps extends BaseDrawer.Close.Props {}\n\n/** Closes the drawer, such as a link in a navigation drawer. Usually `render={<Button />}`. */\nexport const Close = forwardRef<HTMLButtonElement, CloseProps>(function DrawerClose({ className, ...props }, ref) {\n return <BaseDrawer.Close ref={ref} {...props} className={withClass('mu-drawer-close', className)} />;\n});\n"],
|
|
5
|
-
"mappings": ";AAAA,OAAS,gBAAAA,MAAoB,oCAC7B,OAAS,UAAUC,MAAkB,wBACrC,OAAS,KAAAC,MAAS,eAClB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,MAAkB,QACtD,OAAS,MAAAC,EAAI,aAAAC,MAAiB,+BAC9B,OAAS,eAAAC,MAAmB,yBAC5B,OAAS,UAAAC,MAAc,qBAqBjB,cAAAC,EAyCE,QAAAC,MAzCF,oBAdN,IAAMC,
|
|
6
|
-
"names": ["useDirection", "BaseDrawer", "X", "createContext", "forwardRef", "useContext", "cx", "withClass", "SizeContext", "Button", "jsx", "jsxs", "EdgeContext", "Root", "side", "props", "direction", "edge", "swipeDirection", "Trigger", "className", "ref", "Popup", "container", "variant", "closeLabel", "children", "bare", "Title", "Description", "Close"]
|
|
4
|
+
"sourcesContent": ["import { useDirection } from '@base-ui/react/direction-provider';\nimport { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { X } from 'lucide-react';\nimport { createContext, forwardRef, useContext } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport { IconTooltip } from '../../internal/icon-tooltip';\nimport { SizeContext } from '../../internal/size';\nimport { Button } from '../button';\n\n/** The edge a drawer slides from. `start` and `end` follow the text direction. */\nexport type DrawerSide = 'start' | 'end' | 'bottom';\n\ntype Edge = 'left' | 'right' | 'bottom';\n\nconst EdgeContext = createContext<Edge>('right');\n\nexport interface RootProps extends Omit<BaseDrawer.Root.Props, 'swipeDirection' | 'snapPoints' | 'defaultSnapPoint' | 'snapPoint' | 'onSnapPointChange' | 'snapToSequentialPoints'> {\n /** The edge it slides from, and swipes back to. `start` is the left edge in a left-to-right page. Default `end`. */\n side?: DrawerSide;\n}\n\n/** Groups a trigger and its drawer. Controlled with `open` and `onOpenChange`. */\nexport function Root({ side = 'end', ...props }: RootProps) {\n const direction = useDirection();\n const edge: Edge = side === 'bottom' ? 'bottom' : (side === 'start') === (direction === 'rtl') ? 'right' : 'left';\n const swipeDirection = edge === 'bottom' ? 'down' : edge;\n return (\n <EdgeContext.Provider value={edge}>\n <BaseDrawer.Root {...props} swipeDirection={swipeDirection} />\n </EdgeContext.Provider>\n );\n}\n\nexport interface TriggerProps extends BaseDrawer.Trigger.Props {}\n\n/** Opens the drawer. Usually `render={<Button />}`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function DrawerTrigger({ className, ...props }, ref) {\n return <BaseDrawer.Trigger ref={ref} {...props} className={withClass('mu-drawer-trigger', className)} />;\n});\n\nexport interface PopupProps extends BaseDrawer.Popup.Props {\n /** Where the drawer is portaled to. Default `document.body`. */\n container?: BaseDrawer.Portal.Props['container'];\n /**\n * `panel` (default) pads the content `space-5`, stacks it `space-4` apart\n * and adds the X. `bare` has no padding, gap or X, for content that lays\n * itself out, such as an app's navigation sidebar: its content is exactly\n * the drawer's height, so the app's own region scrolls, and its Close is\n * for screen readers only.\n */\n variant?: 'panel' | 'bare';\n /** The accessible name of the X, or of the screen-reader Close in `bare`. Default \"Close\". */\n closeLabel?: string;\n}\n\n/**\n * The panel against one edge of the screen, over a dimmed backdrop, full\n * height (or full width from the bottom). Swipe it back to its edge to close.\n */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function DrawerPopup(\n { container, variant = 'panel', closeLabel = 'Close', className, children, ...props },\n ref,\n) {\n const edge = useContext(EdgeContext);\n const bare = variant === 'bare';\n return (\n <BaseDrawer.Portal container={container}>\n <BaseDrawer.Backdrop className=\"mu-drawer-backdrop\" />\n <BaseDrawer.Viewport className={`mu-drawer-viewport mu-drawer-${edge}`}>\n <BaseDrawer.Popup ref={ref} {...props} className={withClass(cx('mu-drawer-popup', bare && 'mu-drawer-bare', 'mu-base mu-s-md'), className)}>\n {/* Content keeps text selectable with a mouse instead of starting a swipe. */}\n <BaseDrawer.Content className=\"mu-drawer-content\">\n {/* A drawer is md wherever it is declared, as a Dialog is. */}\n <SizeContext.Provider value=\"md\">{children}</SizeContext.Provider>\n </BaseDrawer.Content>\n {bare ? (\n /* No X on screen, but screen reader users on touch screens, who can't press Escape or swipe, still find a Close. Out of the tab order: keyboards have Escape. */\n <BaseDrawer.Close className=\"mu-drawer-sr-close mu-visually-hidden\" tabIndex={-1}>\n {closeLabel}\n </BaseDrawer.Close>\n ) : (\n <IconTooltip label={closeLabel} container={container}>\n <BaseDrawer.Close className=\"mu-drawer-x\" render={<Button variant=\"ghost\" size=\"sm\" icon={<X />} aria-label={closeLabel} />} />\n </IconTooltip>\n )}\n </BaseDrawer.Popup>\n </BaseDrawer.Viewport>\n </BaseDrawer.Portal>\n );\n});\n\nexport interface TitleProps extends BaseDrawer.Title.Props {}\n\n/** The drawer's heading, an `<h2>`. Names it for screen readers; hide it with `mu-visually-hidden` when the content names itself. */\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(function DrawerTitle({ className, ...props }, ref) {\n return <BaseDrawer.Title ref={ref} {...props} className={withClass('mu-drawer-title mu-title', className)} />;\n});\n\nexport interface DescriptionProps extends BaseDrawer.Description.Props {}\n\n/** A `<p>` under the title. */\nexport const Description = forwardRef<HTMLParagraphElement, DescriptionProps>(function DrawerDescription({ className, ...props }, ref) {\n return <BaseDrawer.Description ref={ref} {...props} className={withClass('mu-drawer-description mu-body', className)} />;\n});\n\nexport interface CloseProps extends BaseDrawer.Close.Props {}\n\n/** Closes the drawer, such as a link in a navigation drawer. Usually `render={<Button />}`. */\nexport const Close = forwardRef<HTMLButtonElement, CloseProps>(function DrawerClose({ className, ...props }, ref) {\n return <BaseDrawer.Close ref={ref} {...props} className={withClass('mu-drawer-close', className)} />;\n});\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAS,gBAAAA,MAAoB,oCAC7B,OAAS,UAAUC,MAAkB,wBACrC,OAAS,KAAAC,MAAS,eAClB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,MAAkB,QACtD,OAAS,MAAAC,EAAI,aAAAC,MAAiB,+BAC9B,OAAS,eAAAC,MAAmB,iCAC5B,OAAS,eAAAC,MAAmB,yBAC5B,OAAS,UAAAC,MAAc,qBAqBjB,cAAAC,EAyCE,QAAAC,MAzCF,oBAdN,IAAMC,EAAcV,EAAoB,OAAO,EAQxC,SAASW,EAAK,CAAE,KAAAC,EAAO,MAAO,GAAGC,CAAM,EAAc,CAC1D,IAAMC,EAAYjB,EAAa,EACzBkB,EAAaH,IAAS,SAAW,SAAYA,IAAS,UAAcE,IAAc,OAAS,QAAU,OACrGE,EAAiBD,IAAS,SAAW,OAASA,EACpD,OACEP,EAACE,EAAY,SAAZ,CAAqB,MAAOK,EAC3B,SAAAP,EAACV,EAAW,KAAX,CAAiB,GAAGe,EAAO,eAAgBG,EAAgB,EAC9D,CAEJ,CAKO,IAAMC,EAAUhB,EAA4C,SAAuB,CAAE,UAAAiB,EAAW,GAAGL,CAAM,EAAGM,EAAK,CACtH,OAAOX,EAACV,EAAW,QAAX,CAAmB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,oBAAqBc,CAAS,EAAG,CACxG,CAAC,EAqBYE,EAAQnB,EAAuC,SAC1D,CAAE,UAAAoB,EAAW,QAAAC,EAAU,QAAS,WAAAC,EAAa,QAAS,UAAAL,EAAW,SAAAM,EAAU,GAAGX,CAAM,EACpFM,EACA,CACA,IAAMJ,EAAOb,EAAWQ,CAAW,EAC7Be,EAAOH,IAAY,OACzB,OACEb,EAACX,EAAW,OAAX,CAAkB,UAAWuB,EAC5B,UAAAb,EAACV,EAAW,SAAX,CAAoB,UAAU,qBAAqB,EACpDU,EAACV,EAAW,SAAX,CAAoB,UAAW,gCAAgCiB,CAAI,GAClE,SAAAN,EAACX,EAAW,MAAX,CAAiB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAUD,EAAG,kBAAmBsB,GAAQ,iBAAkB,iBAAiB,EAAGP,CAAS,EAEvI,UAAAV,EAACV,EAAW,QAAX,CAAmB,UAAU,oBAE5B,SAAAU,EAACF,EAAY,SAAZ,CAAqB,MAAM,KAAM,SAAAkB,EAAS,EAC7C,EACCC,EAECjB,EAACV,EAAW,MAAX,CAAiB,UAAU,wCAAwC,SAAU,GAC3E,SAAAyB,EACH,EAEAf,EAACH,EAAA,CAAY,MAAOkB,EAAY,UAAWF,EACzC,SAAAb,EAACV,EAAW,MAAX,CAAiB,UAAU,cAAc,OAAQU,EAACD,EAAA,CAAO,QAAQ,QAAQ,KAAK,KAAK,KAAMC,EAACT,EAAA,EAAE,EAAI,aAAYwB,EAAY,EAAI,EAC/H,GAEJ,EACF,GACF,CAEJ,CAAC,EAKYG,EAAQzB,EAA2C,SAAqB,CAAE,UAAAiB,EAAW,GAAGL,CAAM,EAAGM,EAAK,CACjH,OAAOX,EAACV,EAAW,MAAX,CAAiB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,2BAA4Bc,CAAS,EAAG,CAC7G,CAAC,EAKYS,EAAc1B,EAAmD,SAA2B,CAAE,UAAAiB,EAAW,GAAGL,CAAM,EAAGM,EAAK,CACrI,OAAOX,EAACV,EAAW,YAAX,CAAuB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,gCAAiCc,CAAS,EAAG,CACxH,CAAC,EAKYU,EAAQ3B,EAA0C,SAAqB,CAAE,UAAAiB,EAAW,GAAGL,CAAM,EAAGM,EAAK,CAChH,OAAOX,EAACV,EAAW,MAAX,CAAiB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,kBAAmBc,CAAS,EAAG,CACpG,CAAC",
|
|
6
|
+
"names": ["useDirection", "BaseDrawer", "X", "createContext", "forwardRef", "useContext", "cx", "withClass", "IconTooltip", "SizeContext", "Button", "jsx", "jsxs", "EdgeContext", "Root", "side", "props", "direction", "edge", "swipeDirection", "Trigger", "className", "ref", "Popup", "container", "variant", "closeLabel", "children", "bare", "Title", "Description", "Close"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{Toast as t}from"@base-ui/react/toast";import{CircleAlert as
|
|
2
|
+
import{Toast as t}from"@base-ui/react/toast";import{CircleAlert as m,CircleCheck as l,Info as u,TriangleAlert as T,X as d}from"lucide-react";import{forwardRef as f}from"react";import{cx as c,withClass as w}from"../../internal/class-name.js";import{IconTooltip as P}from"../../internal/icon-tooltip.js";import{Button as g,buttonClasses as v}from"../button/index.js";import{jsx as o,jsxs as p}from"react/jsx-runtime";var L=t.Provider,R=t.useToastManager,k=t.createToastManager,A=f(function({container:a,closeLabel:n="Close",className:s,...r},i){return o(t.Portal,{container:a,children:o(t.Viewport,{ref:i,...r,className:w("mu-toast-viewport",s),children:o(x,{closeLabel:n,container:a})})})}),B={neutral:u,success:l,warning:T,danger:m},C=e=>e==="success"||e==="warning"||e==="danger"?e:"neutral",N=["up","right"];function x({closeLabel:e,container:a}){let{toasts:n}=t.useToastManager();return n.map(s=>{let r=C(s.type),i=B[r];return o(t.Root,{toast:s,swipeDirection:N,className:c("mu-toast mu-popup mu-base mu-s-md",`mu-toast-${r}`),children:p(t.Content,{className:"mu-toast-content",children:[o(i,{className:"mu-toast-icon","aria-hidden":!0}),p("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:c("mu-toast-action",v({variant:"neutral",size:"sm"}))}),o(P,{label:e,container:a,children:o(t.Close,{className:"mu-toast-close",render:o(g,{variant:"ghost",size:"sm",icon:o(d,{}),"aria-label":e})})})]})},s.id)})}export{L as Provider,A as Viewport,k as createToastManager,R 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: top-right, or across the top 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\n/** Toasts sit at the top right, so they swipe away up or to the right. */\nconst swipeDirection: BaseToast.Root.Props['swipeDirection'] = ['up', 'right'];\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} swipeDirection={swipeDirection} 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
|
-
"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,+
|
|
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", "swipeDirection", "toasts", "toast", "tone", "Icon"]
|
|
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 { IconTooltip } from '../../internal/icon-tooltip';\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: top-right, or across the top 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} container={container} />\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\n/** Toasts sit at the top right, so they swipe away up or to the right. */\nconst swipeDirection: BaseToast.Root.Props['swipeDirection'] = ['up', 'right'];\n\nfunction ToastList({ closeLabel, container }: Pick<ViewportProps, 'container'> & { 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} swipeDirection={swipeDirection} 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 <IconTooltip label={closeLabel} container={container}>\n <BaseToast.Close className=\"mu-toast-close\" render={<Button variant=\"ghost\" size=\"sm\" icon={<X />} aria-label={closeLabel} />} />\n </IconTooltip>\n </BaseToast.Content>\n </BaseToast.Root>\n );\n });\n}\n"],
|
|
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,+BAC9B,OAAS,eAAAC,MAAmB,iCAE5B,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,qBA4B9B,cAAAC,EAsBE,QAAAC,MAtBF,oBAvBD,IAAMC,EAAWd,EAAU,SAMrBe,EAAkBf,EAAU,gBAG5BgB,EAAqBhB,EAAU,mBAU/BiB,EAAWX,EAA0C,SAAuB,CAAE,UAAAY,EAAW,WAAAC,EAAa,QAAS,UAAAC,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACtJ,OACEV,EAACZ,EAAU,OAAV,CAAiB,UAAWkB,EAC3B,SAAAN,EAACZ,EAAU,SAAV,CAAmB,IAAKsB,EAAM,GAAGD,EAAO,UAAWb,EAAU,oBAAqBY,CAAS,EAC1F,SAAAR,EAACW,EAAA,CAAU,WAAYJ,EAAY,UAAWD,EAAW,EAC3D,EACF,CAEJ,CAAC,EAEKM,EAAQ,CAAE,QAASrB,EAAM,QAASD,EAAa,QAASE,EAAe,OAAQH,CAAY,EAE3FwB,EAAUC,GAAoCA,IAAS,WAAaA,IAAS,WAAaA,IAAS,SAAWA,EAAO,UAGrHC,EAAyD,CAAC,KAAM,OAAO,EAE7E,SAASJ,EAAU,CAAE,WAAAJ,EAAY,UAAAD,CAAU,EAA8D,CACvG,GAAM,CAAE,OAAAU,CAAO,EAAI5B,EAAU,gBAAgB,EAC7C,OAAO4B,EAAO,IAAKC,GAAU,CAC3B,IAAMC,EAAOL,EAAOI,EAAM,IAAI,EACxBE,EAAOP,EAAMM,CAAI,EACvB,OACElB,EAACZ,EAAU,KAAV,CAA8B,MAAO6B,EAAO,eAAgBF,EAAgB,UAAWpB,EAAG,oCAAqC,YAAYuB,CAAI,EAAE,EAChJ,SAAAjB,EAACb,EAAU,QAAV,CAAkB,UAAU,mBAC3B,UAAAY,EAACmB,EAAA,CAAK,UAAU,gBAAgB,cAAW,GAAC,EAC5ClB,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACZ,EAAU,MAAV,CAAgB,UAAU,0BAA0B,EACrDY,EAACZ,EAAU,YAAV,CAAsB,UAAU,kCAAkC,GACrE,EACAY,EAACZ,EAAU,OAAV,CAAiB,UAAWO,EAAG,kBAAmBI,EAAc,CAAE,QAAS,UAAW,KAAM,IAAK,CAAC,CAAC,EAAG,EACvGC,EAACH,EAAA,CAAY,MAAOU,EAAY,UAAWD,EACzC,SAAAN,EAACZ,EAAU,MAAV,CAAgB,UAAU,iBAAiB,OAAQY,EAACF,EAAA,CAAO,QAAQ,QAAQ,KAAK,KAAK,KAAME,EAACP,EAAA,EAAE,EAAI,aAAYc,EAAY,EAAI,EACjI,GACF,GAXmBU,EAAM,EAY3B,CAEJ,CAAC,CACH",
|
|
6
|
+
"names": ["BaseToast", "CircleAlert", "CircleCheck", "Info", "TriangleAlert", "X", "forwardRef", "cx", "withClass", "IconTooltip", "Button", "buttonClasses", "jsx", "jsxs", "Provider", "useToastManager", "createToastManager", "Viewport", "container", "closeLabel", "className", "props", "ref", "ToastList", "icons", "toneOf", "type", "swipeDirection", "toasts", "toast", "tone", "Icon"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import{useCallback as u,useState as T}from"react";import*as o from"../components/tooltip/index.js";import{jsx as n,jsxs as c}from"react/jsx-runtime";function R({label:l,container:t,children:p}){let[i,r]=T(null),a=u(d=>{let e=d?.getRootNode();r(e?.nodeType===11?e:null)},[]);return c(o.Root,{children:[n(o.Trigger,{ref:a,render:p}),n(o.Popup,{container:t===void 0?i??void 0:t,children:l})]})}export{R as IconTooltip};
|
|
3
|
+
//# sourceMappingURL=icon-tooltip.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/internal/icon-tooltip.tsx"],
|
|
4
|
+
"sourcesContent": ["import { useCallback, useState, type ReactElement } from 'react';\nimport * as Tooltip from '../components/tooltip';\n\nexport function IconTooltip({ label, container, children }: { label: string; container?: Tooltip.PopupProps['container']; children: ReactElement }) {\n const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n const triggerRef = useCallback((element: HTMLElement | null) => {\n const root = element?.getRootNode();\n setShadowRoot(root?.nodeType === 11 ? root as ShadowRoot : null);\n }, []);\n return (\n <Tooltip.Root>\n <Tooltip.Trigger ref={triggerRef} render={children} />\n <Tooltip.Popup container={container === undefined ? shadowRoot ?? undefined : container}>{label}</Tooltip.Popup>\n </Tooltip.Root>\n );\n}\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAS,eAAAA,EAAa,YAAAC,MAAmC,QACzD,UAAYC,MAAa,iCASrB,OACE,OAAAC,EADF,QAAAC,MAAA,oBAPG,SAASC,EAAY,CAAE,MAAAC,EAAO,UAAAC,EAAW,SAAAC,CAAS,EAA2F,CAClJ,GAAM,CAACC,EAAYC,CAAa,EAAIT,EAA4B,IAAI,EAC9DU,EAAaX,EAAaY,GAAgC,CAC9D,IAAMC,EAAOD,GAAS,YAAY,EAClCF,EAAcG,GAAM,WAAa,GAAKA,EAAqB,IAAI,CACjE,EAAG,CAAC,CAAC,EACL,OACET,EAAS,OAAR,CACC,UAAAD,EAAS,UAAR,CAAgB,IAAKQ,EAAY,OAAQH,EAAU,EACpDL,EAAS,QAAR,CAAc,UAAWI,IAAc,OAAYE,GAAc,OAAYF,EAAY,SAAAD,EAAM,GAClG,CAEJ",
|
|
6
|
+
"names": ["useCallback", "useState", "Tooltip", "jsx", "jsxs", "IconTooltip", "label", "container", "children", "shadowRoot", "setShadowRoot", "triggerRef", "element", "root"]
|
|
7
|
+
}
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer mu{@font-face{font-family:"Segoe UI (mu)";font-weight:400;src:local("Segoe UI"),local("SegoeUI")}@font-face{font-family:"Segoe UI (mu)";font-weight:400;font-style:italic;src:local("Segoe UI Italic"),local("SegoeUI-Italic")}@font-face{font-family:"Segoe UI (mu)";font-weight:500 600;src:local("Segoe UI Semibold"),local("SegoeUI-Semibold")}@font-face{font-family:"Segoe UI (mu)";font-weight:500 600;font-style:italic;src:local("Segoe UI Semibold Italic"),local("SegoeUI-SemiboldItalic")}@font-face{font-family:"Segoe UI (mu)";font-weight:700;src:local("Segoe UI Bold"),local("SegoeUI-Bold")}@font-face{font-family:"Segoe UI (mu)";font-weight:700;font-style:italic;src:local("Segoe UI Bold Italic"),local("SegoeUI-BoldItalic")}.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: 11px;--mu-row-line-height: 16px;--mu-row-field-font-size: 11px;--mu-row-field-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: var(--mu-icon-stroke);--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-field-font-size: 13px;--mu-row-field-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: var(--mu-icon-stroke);--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-field-font-size: 14px;--mu-row-field-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: var(--mu-icon-stroke);--mu-row-check-box: 18px}@media(pointer:coarse){.mu-s-xs,.mu-s-sm,.mu-s-md{--mu-row-field-font-size: 16px;--mu-row-field-line-height: 20px}}.mu-compact{--mu-control-md: var(--mu-control-compact)}.mu-well{box-sizing:border-box;background-color:var(--mu-well);border:var(--mu-control-border-width, 1px) solid var(--mu-edge)}.mu-key{box-sizing:border-box;background-color:var(--mu-key);border:var(--mu-control-border-width, 1px) solid var(--mu-edge)}.mu-key:where([data-selected],[data-pressed],[aria-selected=true],[aria-pressed=true]){border-color:var(--mu-text-secondary)}.mu-popup{background:var(--mu-surface);border:1px solid var(--mu-edge);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-text);-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{--mu-control-border-width: 1px;outline:none}.mu-hit{position:relative}@media(pointer:coarse){.mu-hit{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}.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-icon-xs,.mu-icon-sm,.mu-icon-md,.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, var(--mu-icon-stroke))}.mu-icon *,.mu-icon-xs *,.mu-icon-sm *,.mu-icon-md *,.mu-base svg.lucide *,.mu-prose svg.lucide *{vector-effect:non-scaling-stroke}.mu-icon-xs{--mu-row-icon: var(--mu-icon-xs);--mu-row-icon-stroke: var(--mu-icon-stroke)}.mu-icon-sm{--mu-row-icon: var(--mu-icon-sm);--mu-row-icon-stroke: var(--mu-icon-stroke)}.mu-icon-md{--mu-row-icon: var(--mu-icon-md);--mu-row-icon-stroke: var(--mu-icon-stroke)}.mu-label-xs{font-family:var(--mu-font-sans);font-size:11px;line-height:16px;font-weight:500}.mu-caption-xs{font-family:var(--mu-font-sans);font-size:11px;line-height:16px;font-weight:400}.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;text-wrap:balance}.mu-heading{font-family:var(--mu-font-display);font-size:20px;line-height:28px;font-weight:500;text-wrap:balance}.mu-display{font-family:var(--mu-font-display);font-size:32px;line-height:40px;font-weight:500;text-wrap:balance}.mu-prose{--prose-fs: 16px;--prose-lh: 24px;--prose-h1: 24px;--prose-h1-lh: 32px;--prose-h2: 20px;--prose-h2-lh: 28px;--prose-h3: 16px;--prose-h3-lh: 24px;--prose-head: 13px;--prose-head-lh: 18px}.mu-prose-sm{--prose-fs: 14px;--prose-lh: 22px;--prose-h1: 16px;--prose-h1-lh: 24px;--prose-h2: 14px;--prose-h2-lh: 22px;--prose-h3: 14px;--prose-h3-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 calc(var(--mu-row-padding) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid var(--mu-edge);border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:var(--mu-key);white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;transition-property:background-color,border-color,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-button:where(:has(>svg:first-child)){padding-inline-start:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width))}.mu-button:where(:has(>.mu-button-label+svg)){padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width))}.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-neutral:hover:where(:not([data-disabled])){border-color:var(--mu-control-edge)}.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)}.mu-button-ghost:hover:not([data-disabled]){background-color:var(--mu-hover);color:var(--mu-text)}}.mu-button:active:not([data-disabled]){background-color:var(--mu-well)}.mu-button-primary{--mu-control-focus: var(--mu-on-primary);border-color:transparent;color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-button-danger{--mu-control-focus: var(--mu-on-danger);border-color:transparent;color:var(--mu-on-danger);background-color:var(--mu-danger-key)}.mu-button-primary:active:not([data-disabled]){background-color:var(--mu-primary-hover);border-color:var(--mu-on-primary)}.mu-button-danger:active:not([data-disabled]){background-color:var(--mu-danger-key);border-color:var(--mu-on-danger)}.mu-button-ghost{border-color:transparent;color:var(--mu-text-secondary);background-color:transparent}.mu-button-ghost[data-popup-open]{background-color:var(--mu-hover);color:var(--mu-text)}.mu-button-ghost:active:not([data-disabled]){background-color:var(--mu-well)}.mu-button[data-disabled]:not([data-loading]){--mu-control-focus: var(--mu-focus);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);cursor:not-allowed}.mu-button[data-loading]{cursor:progress}.mu-button[data-loading-visible]>:not(.mu-spinner){opacity:0}.mu-button>.mu-spinner{position:absolute;inset:0;margin:auto}@media(pointer:coarse){.mu-button{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}}@layer mu{.mu-kbd{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--mu-edge);min-width:var(--mu-control-xs);height:var(--mu-control-xs);padding:0 calc(var(--mu-space-1) - 1px);border-radius:var(--mu-radius-sm);color:var(--mu-text-secondary);background-color:var(--mu-key);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;border:1px solid transparent;max-width:100%;height:var(--mu-control-xs);padding:0 calc(var(--mu-row-padding) + var(--mu-space-1) / 2 - 1px);border-radius:var(--mu-radius-full);white-space:nowrap;vertical-align:middle}.mu-badge-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-badge-neutral{--mu-badge-tint: oklch(from var(--mu-badge-color) clamp(.5, l, .75) c h / 18%);color:var(--mu-text);background-color:var(--mu-badge-tint, var(--mu-well))}@supports not (color: oklch(from red l c h)){.mu-badge-neutral{--mu-badge-tint: color-mix(in srgb, var(--mu-badge-color) 18%, transparent)}}.mu-badge-primary{color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-badge-outline{color:var(--mu-text-secondary);border-color: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-text-secondary);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}.mu-link-muted{color:var(--mu-text-secondary)}.mu-link-muted:hover{color:var(--mu-text)}.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-text)}.mu-field-item{display:flex}.mu-field-label:where(: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]{color:var(--mu-text-disabled);cursor:not-allowed}.mu-field-description{margin:0;color:var(--mu-text-secondary)}.mu-field-root[data-invalid]>.mu-field-description{display:none}.mu-field-horizontal{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--mu-space-4);row-gap:0}.mu-field-horizontal>*{grid-column:2;grid-row:1;justify-self:end}.mu-field-horizontal:where(:has(>.mu-field-description))>*{grid-row:1 / span 2}.mu-field-horizontal>.mu-field-label{grid-column:1;grid-row:1;justify-self:stretch;font-weight:400}.mu-field-horizontal>.mu-field-description{grid-column:1;grid-row:2;justify-self:stretch;margin-top:var(--mu-space-1)}.mu-field-horizontal>.mu-field-error{grid-column:1 / -1;grid-row:3;justify-self:stretch;margin-top:var(--mu-space-1)}.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:calc(-1 * var(--mu-space-1));padding:0;color:var(--mu-text)}}@layer mu{.mu-input-root{--mu-field-edge: 1px;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 calc(var(--mu-row-padding) - var(--mu-field-edge));border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:var(--mu-surface);border:var(--mu-field-edge) solid var(--mu-edge);cursor:text;transition:border-color var(--mu-duration-fade) var(--mu-ease-out)}.mu-input-root:where(:has(>.mu-input-prefix)){padding-inline-start:calc(var(--mu-row-padding-icon) - var(--mu-field-edge))}.mu-input-root:where(:has(>.mu-input-suffix)){padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-field-edge))}@media(hover:hover){.mu-input-root:hover:where(:not([data-disabled],[aria-disabled=true],:has(>[data-disabled]),:focus-within)){border-color:var(--mu-control-edge)}}.mu-input-root:where(:has(>.mu-input:focus)),.mu-input-root:where(:not(:has(>.mu-input))):focus-within{--mu-field-edge: var(--mu-focus-edge-width);border-color:var(--mu-focus-edge);outline:none}.mu-input-root:is([data-invalid],[aria-invalid=true],:has(>[data-invalid])){border-color:var(--mu-danger)}.mu-input-root:is([data-disabled],[aria-disabled=true],:has(>[data-disabled])){color:var(--mu-text-disabled);background-color:var(--mu-well);border-color:var(--mu-edge);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-size:var(--mu-row-field-font-size);font-weight:400}.mu-input-root:where(:not(:has(>.mu-input))) :where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),textarea){font-size:var(--mu-row-field-font-size)}.mu-input::placeholder{color:var(--mu-text-secondary);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-text-secondary)}.mu-input-root:where([data-disabled],[aria-disabled=true],:has(>[data-disabled])) :where(.mu-input,.mu-input-prefix,.mu-input-suffix){color:var(--mu-text-disabled)}.mu-input-root:where([data-disabled],[aria-disabled=true],:has(>[data-disabled])) .mu-input::placeholder{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-input-root{min-height:var(--mu-hit-area)}}}@layer mu{.mu-textarea{--mu-field-edge: 1px;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-field-line-height)) / 2 - var(--mu-field-edge)) calc(var(--mu-row-padding) - var(--mu-field-edge));border:var(--mu-field-edge) solid var(--mu-edge);outline:none;border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:var(--mu-surface);font-size:var(--mu-row-field-font-size);line-height:var(--mu-row-field-line-height);font-weight:400;resize:vertical;transition:border-color var(--mu-duration-fade) var(--mu-ease-out)}.mu-textarea::placeholder{color:var(--mu-text-secondary);opacity:1}@media(hover:hover){.mu-textarea:hover:where(:not([data-disabled],[aria-disabled=true],:focus-within)){border-color:var(--mu-control-edge)}}.mu-textarea:focus-within{--mu-field-edge: var(--mu-focus-edge-width);border-color:var(--mu-focus-edge)}.mu-textarea:is([data-invalid],[aria-invalid=true]){border-color:var(--mu-danger)}.mu-textarea:is([data-disabled],[aria-disabled=true]){color:var(--mu-text-disabled);background-color:var(--mu-well);border-color:var(--mu-edge);cursor:not-allowed}.mu-textarea:where([data-disabled],[aria-disabled=true])::placeholder{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-textarea{min-height:var(--mu-hit-area)}}}@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);border:var(--mu-control-border-width) solid var(--mu-control-edge);cursor:pointer}.mu-checkbox[data-checked],.mu-checkbox[data-indeterminate]{--mu-control-focus: var(--mu-on-primary);background-color:var(--mu-primary);border-color:transparent}.mu-checkbox[data-invalid]{border-color:var(--mu-danger)}.mu-checkbox[data-disabled]{--mu-control-focus: var(--mu-focus);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);cursor:not-allowed}.mu-checkbox-indicator{display:flex}.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(pointer:coarse){.mu-checkbox{min-width:0;min-height:0;margin:calc((var(--mu-hit-area) - var(--mu-row-check-box)) / 2)}}}@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:calc(var(--mu-inset) - var(--mu-control-border-width));border-radius:var(--mu-radius-full);background-color:var(--mu-well);border:var(--mu-control-border-width) solid var(--mu-edge);cursor:pointer;transition:background-color var(--mu-duration-settle) var(--mu-ease-settle),border-color var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch[data-checked]{--mu-control-focus: var(--mu-on-primary);background-color:var(--mu-primary);border-color:transparent}.mu-switch[data-invalid]{border-color:var(--mu-danger)}.mu-switch[data-disabled]{--mu-control-focus: var(--mu-focus);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);cursor:not-allowed}.mu-switch-thumb{display:block;width:var(--knob);height:var(--knob);border-radius:var(--mu-radius-full);background-color:var(--mu-text);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),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[data-disabled]>.mu-switch-thumb{background-color:var(--mu-text-disabled)}@media(hover:hover){.mu-switch:hover:where(:not([data-checked],[data-disabled],[data-invalid])){border-color:var(--mu-control-edge)}}@media(pointer:coarse){.mu-switch{min-width:0;min-height:0;margin-block:calc((var(--mu-hit-area) - var(--switch-h)) / 2);margin-inline:calc((var(--mu-hit-area) - var(--switch-w)) / 2)}}@media(prefers-reduced-motion:reduce){.mu-switch-thumb{transition-property:background-color}}}@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);border:var(--mu-control-border-width) solid var(--mu-control-edge);cursor:pointer}.mu-radio[data-checked]{--mu-control-focus: var(--mu-on-primary);background-color:var(--mu-primary);border-color:transparent}.mu-radio[data-invalid]{border-color:var(--mu-danger)}.mu-radio[data-disabled]{--mu-control-focus: var(--mu-focus);--mu-on-primary: var(--mu-text-disabled);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);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)}@media(pointer:coarse){.mu-radio{min-width:0;min-height:0;margin:calc((var(--mu-hit-area) - var(--mu-row-check-box)) / 2)}}}@layer mu{.mu-toggle{position:relative;display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;min-width:0;min-height:var(--mu-row-height);margin:0;padding:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2 - var(--mu-control-border-width)) calc(var(--mu-row-padding) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid transparent;border-radius:var(--mu-row-radius);color:var(--mu-text-secondary);background-color:transparent;white-space:normal;cursor:pointer;user-select:none;transition-property:background-color,border-color,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-toggle:where(:has(>svg:first-child)){padding-inline-start:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width))}.mu-toggle.mu-toggle-icon{flex:none;width:var(--mu-row-height);padding:0}.mu-toggle-label{min-width:0;overflow-wrap:anywhere}.mu-toggle>svg{flex:none}@media(hover:hover){.mu-toggle:hover:not([data-disabled]){color:var(--mu-text);background-color:var(--mu-hover)}}.mu-toggle[data-pressed]{color:var(--mu-text);background-color:var(--mu-well);border-color:var(--mu-control-edge)}.mu-toggle[data-disabled]{color:var(--mu-text-disabled);cursor:not-allowed}@media(pointer:coarse){.mu-toggle{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}}@layer mu{.mu-segmented{position:relative;display:inline-flex;align-items:stretch;gap:0;box-sizing:border-box;min-height:var(--mu-row-height);padding:calc(var(--mu-inset) - 1px);border-radius:var(--mu-row-radius);background-color:var(--mu-well);border:1px solid transparent}.mu-segmented-key{position:absolute;top:calc(var(--mu-inset) - 1px);left:0;width:var(--key-width);bottom:calc(var(--mu-inset) - 1px);translate:var(--key-left) 0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));box-sizing:border-box;border:1px solid transparent;background-color:var(--mu-key);pointer-events:none;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{--segment-line: min(var(--mu-row-line-height), calc(var(--mu-row-height) - 2 * var(--mu-inset) - 2 * var(--mu-focus-edge-width)));position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;min-width:0;min-height:calc(var(--mu-row-height) - 2 * var(--mu-inset));margin:0;padding:calc((var(--mu-row-height) - 2 * var(--mu-inset) - var(--segment-line)) / 2 - var(--mu-control-border-width)) calc(var(--mu-row-padding) - var(--mu-inset) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid transparent;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));color:var(--mu-text-secondary);background:none;font:inherit;line-height:var(--segment-line);white-space:normal;overflow-wrap:anywhere;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:where(:not([data-disabled])),.mu-segmented>.mu-toggle:hover:where(:not([data-disabled])){color:var(--mu-text);background:none}}.mu-segmented-item[data-active],.mu-segmented>.mu-toggle[data-pressed]{color:var(--mu-text);background:none}.mu-segmented-item[data-disabled],.mu-segmented>.mu-toggle[data-disabled]{color:var(--mu-text-disabled);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:var(--mu-focus-edge-width) solid transparent;border-radius:var(--mu-radius-sm)}@media(pointer:coarse){.mu-segmented-item,.mu-segmented>.mu-toggle{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}@media(forced-colors:active){.mu-segmented{--mu-text: var(--mu-key);--mu-text-secondary: var(--mu-key)}.mu-segmented-item,.mu-segmented>.mu-toggle{forced-color-adjust:none;background:none}.mu-segmented-key{forced-color-adjust:none;background-color:transparent;border-color:var(--mu-key)}}@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);box-sizing:border-box;min-width:0;max-width:100%}.mu-toggle-group.mu-segmented{align-items:stretch;gap:0}.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)}.mu-toggle-group.mu-toggle-group-full{display:flex;width:100%}.mu-toggle-group-full>.mu-toggle:not(.mu-toggle-icon){flex:1 1 auto}}@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:calc(var(--mu-space-4) - 1px);outline:0}.mu-popover-title{margin:0;color:var(--mu-text)}.mu-popover-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-text-secondary)}.mu-popover-list{gap:0;padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px)}.mu-popover-list>.mu-popover-title{padding:var(--mu-space-2) var(--mu-row-padding) 0}.mu-popover-list>.mu-popover-description{margin:0;padding:0 var(--mu-row-padding) var(--mu-space-2)}}@layer mu{.mu-menu-popup{box-sizing:border-box;min-width:min(var(--mu-menu-width),var(--available-width, 100vw));max-width:min(var(--mu-menu-max-width),var(--available-width, 100vw));max-height:var(--available-height);overflow-y:auto;padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px);outline:0}.mu-menu-popup.mu-s-sm{--mu-row-height: var(--mu-control-compact)}.mu-menu-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;width:100%;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:transparent;font:inherit;font-weight:400;text-align:start;text-decoration:none;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-menu-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-menu-item>svg{color:var(--mu-text-secondary)}.mu-menu-item[data-highlighted],.mu-menu-item[data-popup-open]{background-color:var(--mu-hover)}.mu-menu-item:focus-visible:not([data-disabled]){background-color:var(--mu-hover)}.mu-menu-item[data-disabled]{color:var(--mu-text-disabled)}.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-item:where(:has(>.mu-menu-text)){align-items:flex-start;height:auto;min-height:var(--mu-row-height);padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2)}.mu-menu-item:where(:has(>.mu-menu-text))>svg,.mu-menu-item:where(:has(>.mu-menu-text))>.mu-menu-indicator{margin-block:calc((var(--mu-row-line-height) - var(--mu-row-icon)) / 2)}.mu-menu-text{display:flex;flex:1;flex-direction:column;min-width:0}.mu-menu-text>.mu-menu-label{flex:none}.mu-menu-description{color:var(--mu-text-secondary);white-space:normal}.mu-menu-shortcut{margin-inline-start:var(--mu-space-4);color:var(--mu-text-secondary)}.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-text)}.mu-menu-chevron{margin-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-row-padding));color:var(--mu-text-secondary)}.mu-menu-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-text-secondary)}.mu-menu-separator{height:1px;margin:calc(var(--mu-radius-xl) - var(--mu-radius-md)) calc(var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}.mu-menu-item[data-disabled]>svg{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-menu-item{min-height:var(--mu-hit-area)}.mu-menu-item:where(:has(>.mu-menu-text)){min-height:var(--mu-hit-area)}}}@layer mu{.mu-select-trigger{justify-content:space-between;min-width:0;padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width));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-text-secondary);font-weight:400}.mu-select-icon{display:flex;flex:none;color:var(--mu-text-secondary)}.mu-select-trigger.mu-button-ghost:not([data-disabled]){color:var(--mu-text)}.mu-select-trigger[data-invalid]{border-color:var(--mu-danger)}.mu-select-positioner{outline:0}.mu-select-popup{box-sizing:border-box;min-width:min(max(var(--mu-menu-width),var(--anchor-width)),var(--available-width));max-width:min(max(var(--mu-menu-max-width),var(--anchor-width)),var(--available-width));max-height:var(--available-height);padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px);outline:0}.mu-select-popup.mu-s-sm{--mu-row-height: var(--mu-control-compact)}.mu-select-list{overflow-y:auto;max-height:var(--available-height);scroll-padding-block:calc(var(--mu-radius-xl) - var(--mu-radius-md));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:var(--mu-row-radius);color:var(--mu-text);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-select-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-select-item>svg{color:var(--mu-text-secondary)}.mu-select-item[data-highlighted]{background-color:var(--mu-hover)}.mu-select-item[data-disabled]{color:var(--mu-text-disabled)}.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-text)}.mu-select-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-text-secondary)}.mu-select-separator{height:1px;margin:calc(var(--mu-radius-xl) - var(--mu-radius-md)) calc(var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}.mu-select-scroll-arrow{display:grid;place-items:center;height:var(--mu-space-4);color:var(--mu-text-secondary)}.mu-select-trigger[data-disabled] :where(.mu-select-value,.mu-select-icon),.mu-select-item[data-disabled]>svg{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-select-trigger{min-width:var(--mu-hit-area)}.mu-select-item{min-height:var(--mu-hit-area)}}}@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:calc(var(--mu-space-5) - 1px);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:where(:has(>.mu-dialog-x))>.mu-dialog-title{padding-inline-end:var(--mu-space-6)}.mu-dialog-popup.mu-dialog-bare{gap:0;padding:0;overflow:hidden}.mu-dialog-full{place-items:stretch;padding:0}.mu-dialog-full>.mu-dialog-popup{width:100%;height:100%;border:0;border-radius:0}.mu-dialog-title{margin:0;color:var(--mu-text)}.mu-dialog-description{margin:calc(-1 * var(--mu-space-3)) 0 0;color:var(--mu-text-secondary)}.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:calc(max(var(--mu-space-5),env(safe-area-inset-bottom)) - 1px);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-popup.mu-dialog-bare{padding-bottom:env(safe-area-inset-bottom)}.mu-dialog-sheet .mu-dialog-footer{flex-direction:column-reverse}.mu-dialog-sheet .mu-dialog-footer>*{width:100%}}@media(pointer:coarse){.mu-dialog-popup:where(:has(>.mu-dialog-x))>.mu-dialog-title{padding-inline-end:var(--mu-hit-area)}}@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-drawer-backdrop{position:fixed;inset:0;z-index:var(--mu-layer-overlay);background-color:var(--mu-overlay);opacity:calc(1 - var(--drawer-swipe-progress, 0));transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-drawer-backdrop[data-starting-style],.mu-drawer-backdrop[data-ending-style]{opacity:0}.mu-drawer-viewport{position:fixed;inset:0;z-index:var(--mu-layer-overlay);display:flex}.mu-drawer-left{justify-content:flex-start}.mu-drawer-right{justify-content:flex-end}.mu-drawer-bottom{align-items:flex-end}.mu-drawer-popup{--drawer-hidden: 0 0;position:relative;box-sizing:border-box;width:var(--mu-drawer-width);max-width:calc(100% - var(--mu-space-12));height:100%;overflow-y:auto;overscroll-behavior:contain;background-color:var(--mu-surface);outline:0;translate:var(--drawer-swipe-movement-x, 0) var(--drawer-swipe-movement-y, 0);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-drawer-bottom>.mu-drawer-popup{width:100%;max-width:none;height:auto;max-height:calc(100% - var(--mu-space-6));padding-bottom:env(safe-area-inset-bottom);border-start-start-radius:var(--mu-radius-2xl);border-start-end-radius:var(--mu-radius-2xl)}.mu-drawer-left>.mu-drawer-popup{--drawer-hidden: -100% 0;border-right:1px solid var(--mu-line)}.mu-drawer-right>.mu-drawer-popup{--drawer-hidden: 100% 0;border-left:1px solid var(--mu-line)}.mu-drawer-bottom>.mu-drawer-popup{--drawer-hidden: 0 100%;border-top:1px solid var(--mu-edge)}.mu-drawer-popup[data-starting-style],.mu-drawer-popup[data-ending-style]{translate:var(--drawer-hidden)}.mu-drawer-popup[data-swiping]{transition:none;user-select:none}.mu-drawer-content{display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;min-height:100%;padding:var(--mu-space-5)}.mu-drawer-bare>.mu-drawer-content{gap:0;height:100%;min-height:0;padding:0}.mu-drawer-popup:where(:has(>.mu-drawer-x))>.mu-drawer-content>.mu-drawer-title{padding-inline-end:var(--mu-space-6)}.mu-drawer-title{margin:0;color:var(--mu-text)}.mu-drawer-description{margin:calc(-1 * var(--mu-space-3)) 0 0;color:var(--mu-text-secondary)}.mu-drawer-x{position:absolute;top:var(--mu-space-4);inset-inline-end:var(--mu-space-4)}@media(pointer:coarse){.mu-drawer-popup:where(:has(>.mu-drawer-x))>.mu-drawer-content>.mu-drawer-title{padding-inline-end:var(--mu-hit-area)}}@media(prefers-reduced-motion:reduce){.mu-drawer-popup[data-starting-style],.mu-drawer-popup[data-ending-style]{translate:none;opacity:0}}}@layer mu{.mu-toast-viewport{position:fixed;top:var(--mu-space-6);right: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{top:max(var(--mu-space-4),env(safe-area-inset-top));right:var(--mu-space-4);left:var(--mu-space-4);width:auto}}.mu-toast{--mu-control-border-width: 1px;border-width:var(--mu-control-border-width);--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) + var(--toast-index) * var(--mu-row-gap) + var(--toast-swipe-movement-y));position:absolute;top:0;right:0;z-index:calc(var(--mu-layer-toast) - var(--toast-index));box-sizing:border-box;width:100%;height:var(--height);transform-origin:top 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:after{content:"";position:absolute;bottom: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:calc(var(--mu-space-3) - var(--mu-control-border-width)) calc(var(--mu-space-3) - var(--mu-control-border-width)) calc(var(--mu-space-3) - var(--mu-control-border-width)) calc(var(--mu-space-4) - var(--mu-control-border-width));overflow:hidden;border-radius:inherit;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-content[data-behind]{opacity:0;transition:none}.mu-toast-content[data-expanded]{opacity:1;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-icon{margin-block:calc((var(--mu-row-height) - var(--mu-row-icon)) / 2);color:var(--mu-text-secondary)}.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-text)}.mu-toast-description{margin:0;color:var(--mu-text-secondary)}.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) - var(--mu-field-edge))}.mu-combobox-trigger{box-sizing:border-box;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:var(--mu-control-border-width) solid transparent;border-radius:var(--mu-radius-sm);color:var(--mu-text-secondary);background:none;cursor:pointer}.mu-combobox-trigger:hover:not([data-disabled]){color:var(--mu-text)}.mu-combobox-trigger[data-disabled]{cursor:not-allowed}.mu-combobox-popup{box-sizing:border-box;width:var(--anchor-width);min-width:min(var(--mu-menu-width),var(--available-width));max-width:var(--available-width);outline:0}.mu-combobox-list{box-sizing:border-box;max-height:min(calc(var(--mu-list-height) - var(--mu-inset)),calc(var(--available-height) - var(--mu-inset)));overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px);scroll-padding-block:calc(var(--mu-radius-xl) - var(--mu-radius-md));outline:0}.mu-combobox-list[data-empty]{padding:0}.mu-combobox-popup.mu-s-sm .mu-combobox-list{--mu-row-height: var(--mu-control-compact)}.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:var(--mu-row-radius);color:var(--mu-text);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-combobox-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-combobox-item>svg{color:var(--mu-text-secondary)}.mu-combobox-item[data-highlighted]{background-color:var(--mu-hover)}.mu-combobox-item[data-disabled]{color:var(--mu-text-disabled)}.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-text)}.mu-combobox-row{display:flex;gap:var(--mu-inset)}.mu-combobox-row+.mu-combobox-row{margin-top:var(--mu-inset)}.mu-combobox-row>.mu-combobox-item{flex:none;justify-content:center;width:var(--mu-row-height);padding:0;border:1px solid transparent;border-radius:var(--mu-row-radius)}.mu-combobox-row>.mu-combobox-item>.mu-combobox-item-text{flex:none;overflow:visible}.mu-combobox-row>.mu-combobox-item>.mu-combobox-indicator{display:none}.mu-combobox-row>.mu-combobox-item[data-selected]{background-color:var(--mu-well);border-color:var(--mu-edge)}.mu-combobox-empty:not(:empty){padding:var(--mu-space-3) var(--mu-space-4);color:var(--mu-text-secondary)}.mu-combobox-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-text-secondary)}.mu-combobox-separator{height:1px;margin:calc(var(--mu-radius-xl) - var(--mu-radius-md)) calc(var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}.mu-combobox-item[data-disabled]>svg{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-combobox-item{min-height:var(--mu-hit-area)}.mu-combobox-row>.mu-combobox-item{width:var(--mu-hit-area)}.mu-combobox-trigger{width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}}@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-text-secondary);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-bordered{box-sizing:border-box;border:1px solid var(--mu-line);border-radius:var(--mu-radius-lg);background-color:var(--mu-surface)}.mu-table{width:100%;border-collapse:collapse;color:var(--mu-text);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-text-secondary);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-actions{display:inline-flex;align-items:center;gap:var(--mu-space-1);vertical-align:top}.mu-table-cell>:is(.mu-button,.mu-table-actions){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-text-secondary)}.mu-table-caption{caption-side:bottom;padding:var(--mu-space-2) var(--mu-row-padding) 0;color:var(--mu-text-secondary);text-align:start}.mu-table-bordered .mu-table-caption{padding-bottom:var(--mu-space-2);border-top:1px solid var(--mu-line)}.mu-table-bordered .mu-table-head{background-color:var(--mu-canvas)}.mu-table-bordered :is(.mu-table-head,.mu-table-cell):first-child,.mu-table-bordered .mu-table-caption{padding-inline-start:calc(var(--mu-row-padding) + var(--mu-space-1))}.mu-table-bordered :is(.mu-table-head,.mu-table-cell):last-child{padding-inline-end:calc(var(--mu-row-padding) + var(--mu-space-1))}}@layer mu{.mu-list{box-sizing:border-box;margin:0;padding:0;border:1px solid var(--mu-line);border-radius:var(--mu-radius-lg);color:var(--mu-text);background-color:var(--mu-surface);list-style:none}.mu-list{--list-pad-block: var(--mu-space-3);--list-pad-inline: var(--mu-space-4)}.mu-list.mu-s-sm{--list-pad-block: var(--mu-space-2);--list-pad-inline: var(--mu-space-3)}.mu-list-item{box-sizing:border-box;min-width:0;padding:var(--list-pad-block) var(--list-pad-inline)}.mu-list-item+.mu-list-item{border-top:1px solid var(--mu-line)}.mu-list-item-button{display:flex;align-items:center;gap:var(--mu-space-3);box-sizing:border-box;width:calc(100% + 2 * var(--list-pad-inline));margin:calc(-1 * var(--list-pad-block)) calc(-1 * var(--list-pad-inline));padding:calc(var(--list-pad-block) - var(--mu-control-border-width)) calc(var(--list-pad-inline) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid transparent;border-radius:0;color:inherit;background-color:transparent;font:inherit;text-align:start;text-decoration:none;cursor:pointer;transition:background-color var(--mu-duration-press) var(--mu-ease-out)}.mu-list-item:first-child>.mu-list-item-button{border-start-start-radius:calc(var(--mu-radius-lg) - 1px);border-start-end-radius:calc(var(--mu-radius-lg) - 1px)}.mu-list-item:last-child>.mu-list-item-button{border-end-start-radius:calc(var(--mu-radius-lg) - 1px);border-end-end-radius:calc(var(--mu-radius-lg) - 1px)}@media(hover:hover){.mu-list-item-button:hover:not(:disabled){background-color:var(--mu-hover)}}.mu-list-item-button:disabled{color:var(--mu-text-disabled);cursor:not-allowed}@media(pointer:coarse){.mu-list-item-button{min-height:var(--mu-hit-area)}}@media(prefers-reduced-motion:reduce){.mu-list-item-button{transition:none}}}@layer mu{.mu-form{display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;min-width:0;margin:0;color:var(--mu-text)}.mu-form-title{margin:0;color:var(--mu-text)}.mu-form-description{margin:calc(-1 * var(--mu-space-3)) 0 0;color:var(--mu-text-secondary)}.mu-form-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mu-space-2)}.mu-form-bordered{padding:var(--mu-space-4);border:1px solid var(--mu-line);border-radius:var(--mu-radius-lg);background-color:var(--mu-surface)}.mu-form-bordered>.mu-form-footer{margin:0 calc(-1 * var(--mu-space-4)) calc(-1 * var(--mu-space-4));padding:var(--mu-space-3) var(--mu-space-4);border-top:1px solid var(--mu-line);border-end-start-radius:calc(var(--mu-radius-lg) - 1px);border-end-end-radius:calc(var(--mu-radius-lg) - 1px);background-color:var(--mu-canvas)}}@layer mu{.mu-prose{color:var(--mu-text);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;text-wrap:balance}.mu-prose :where(p,li){text-wrap:pretty}.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-h3);line-height:var(--prose-h3-lh)}.mu-prose :where(strong,b){font-weight:600}.mu-prose del{color:var(--mu-text-secondary)}.mu-prose a{color:var(--mu-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;border-radius:var(--mu-radius-xs);outline:none}.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-text-secondary)}.mu-prose li:where(:has(>input[type=checkbox]:first-child)){position:relative;list-style:none}.mu-prose li>input[type=checkbox]:first-child{--mu-control-border-width: 1px;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);border:var(--mu-control-border-width) solid var(--mu-control-edge);outline:none;cursor:pointer}.mu-prose li>input[type=checkbox]:first-child:disabled{cursor:default}.mu-prose li>input[type=checkbox]:first-child:checked{background-color:var(--mu-primary);border-color:transparent}.mu-prose li>input[type=checkbox]:first-child:checked:after{content:"";position:absolute;inset:calc(var(--mu-inset) + 1px - var(--mu-control-border-width));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:where(:has(>input[type=checkbox]:first-child:checked)){color:var(--mu-text-secondary);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-text-secondary)}.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-text-secondary);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-text-secondary);background-color:var(--mu-well)}}@layer mu{.mu-focus:focus-visible,.mu-toast:focus-visible{--mu-control-border-width: var(--mu-focus-edge-width);border-color:var(--mu-control-focus, var(--mu-focus))}.mu-link:focus-visible,.mu-prose a:focus-visible{text-decoration:underline;text-decoration-style:double}.mu-prose li>input[type=checkbox]:first-child:focus-visible{--mu-control-border-width: var(--mu-focus-edge-width);border-color:var(--mu-focus)}.mu-prose li>input[type=checkbox]:first-child:checked:focus-visible{border-color:var(--mu-on-primary)}@media(forced-colors:active){.mu-focus:focus-visible,.mu-toast:focus-visible,.mu-prose li>input[type=checkbox]:first-child:focus-visible{border-color:var(--mu-focus)}.mu-input-root:focus-within,.mu-textarea:focus-within{border-color:var(--mu-focus)}.mu-switch-thumb{forced-color-adjust:none;background-color:var(--mu-key)}.mu-switch-thumb[data-checked]{background-color:var(--mu-on-primary)}}}
|
|
1
|
+
@layer mu{@font-face{font-family:"Segoe UI (mu)";font-weight:400;src:local("Segoe UI"),local("SegoeUI")}@font-face{font-family:"Segoe UI (mu)";font-weight:400;font-style:italic;src:local("Segoe UI Italic"),local("SegoeUI-Italic")}@font-face{font-family:"Segoe UI (mu)";font-weight:500 600;src:local("Segoe UI Semibold"),local("SegoeUI-Semibold")}@font-face{font-family:"Segoe UI (mu)";font-weight:500 600;font-style:italic;src:local("Segoe UI Semibold Italic"),local("SegoeUI-SemiboldItalic")}@font-face{font-family:"Segoe UI (mu)";font-weight:700;src:local("Segoe UI Bold"),local("SegoeUI-Bold")}@font-face{font-family:"Segoe UI (mu)";font-weight:700;font-style:italic;src:local("Segoe UI Bold Italic"),local("SegoeUI-BoldItalic")}.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: 11px;--mu-row-line-height: 16px;--mu-row-field-font-size: 11px;--mu-row-field-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: var(--mu-icon-stroke);--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-field-font-size: 13px;--mu-row-field-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: var(--mu-icon-stroke);--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-field-font-size: 14px;--mu-row-field-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: var(--mu-icon-stroke);--mu-row-check-box: 18px}@media(pointer:coarse){.mu-s-xs,.mu-s-sm,.mu-s-md{--mu-row-field-font-size: 16px;--mu-row-field-line-height: 20px}}.mu-compact{--mu-control-md: var(--mu-control-compact)}.mu-well{box-sizing:border-box;background-color:var(--mu-well);border:var(--mu-control-border-width, 1px) solid var(--mu-edge)}.mu-key{box-sizing:border-box;background-color:var(--mu-key);border:var(--mu-control-border-width, 1px) solid var(--mu-edge)}.mu-popup{background:var(--mu-surface);border:1px solid var(--mu-edge);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-text);-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{--mu-control-border-width: 1px;outline:none}.mu-hit{position:relative}@media(pointer:coarse){.mu-hit{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}.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-icon-xs,.mu-icon-sm,.mu-icon-md,.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, var(--mu-icon-stroke))}.mu-icon *,.mu-icon-xs *,.mu-icon-sm *,.mu-icon-md *,.mu-base svg.lucide *,.mu-prose svg.lucide *{vector-effect:non-scaling-stroke}.mu-icon-xs{--mu-row-icon: var(--mu-icon-xs);--mu-row-icon-stroke: var(--mu-icon-stroke)}.mu-icon-sm{--mu-row-icon: var(--mu-icon-sm);--mu-row-icon-stroke: var(--mu-icon-stroke)}.mu-icon-md{--mu-row-icon: var(--mu-icon-md);--mu-row-icon-stroke: var(--mu-icon-stroke)}.mu-label-xs{font-family:var(--mu-font-sans);font-size:11px;line-height:16px;font-weight:500}.mu-caption-xs{font-family:var(--mu-font-sans);font-size:11px;line-height:16px;font-weight:400}.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;text-wrap:balance}.mu-heading{font-family:var(--mu-font-display);font-size:20px;line-height:28px;font-weight:500;text-wrap:balance}.mu-display{font-family:var(--mu-font-display);font-size:32px;line-height:40px;font-weight:500;text-wrap:balance}.mu-prose{--prose-fs: 16px;--prose-lh: 24px;--prose-h1: 24px;--prose-h1-lh: 32px;--prose-h2: 20px;--prose-h2-lh: 28px;--prose-h3: 16px;--prose-h3-lh: 24px;--prose-head: 13px;--prose-head-lh: 18px}.mu-prose-sm{--prose-fs: 14px;--prose-lh: 22px;--prose-h1: 16px;--prose-h1-lh: 24px;--prose-h2: 14px;--prose-h2-lh: 22px;--prose-h3: 14px;--prose-h3-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 calc(var(--mu-row-padding) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid var(--mu-edge);border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:var(--mu-key);white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;transition-property:background-color,border-color,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-button:where(:has(>svg:first-child)){padding-inline-start:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width))}.mu-button:where(:has(>.mu-button-label+svg)){padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width))}.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)}.mu-button-ghost:hover:not([data-disabled]){background-color:var(--mu-hover);color:var(--mu-text)}}.mu-button:active:not([data-disabled]){background-color:var(--mu-well)}.mu-button-primary{--mu-control-focus: var(--mu-on-primary);border-color:transparent;color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-button-danger{--mu-control-focus: var(--mu-on-danger);border-color:transparent;color:var(--mu-on-danger);background-color:var(--mu-danger-key)}.mu-button-primary:active:not([data-disabled]){background-color:var(--mu-primary-hover);border-color:var(--mu-on-primary)}.mu-button-danger:active:not([data-disabled]){background-color:var(--mu-danger-key);border-color:var(--mu-on-danger)}.mu-button-ghost{border-color:transparent;color:var(--mu-text-secondary);background-color:transparent}.mu-button-ghost[data-popup-open]{background-color:var(--mu-hover);color:var(--mu-text)}.mu-button-ghost:active:not([data-disabled]){background-color:var(--mu-well)}.mu-button[data-disabled]:not([data-loading]){--mu-control-focus: var(--mu-focus);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);cursor:not-allowed}.mu-button[data-loading]{cursor:progress}.mu-button[data-loading-visible]>:not(.mu-spinner){opacity:0}.mu-button>.mu-spinner{position:absolute;inset:0;margin:auto}@media(pointer:coarse){.mu-button{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}}@layer mu{.mu-kbd{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--mu-edge);min-width:var(--mu-control-xs);height:var(--mu-control-xs);padding:0 calc(var(--mu-space-1) - 1px);border-radius:var(--mu-radius-sm);color:var(--mu-text-secondary);background-color:var(--mu-key);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;border:1px solid transparent;max-width:100%;height:var(--mu-control-xs);padding:0 calc(var(--mu-row-padding) + var(--mu-space-1) / 2 - 1px);border-radius:var(--mu-radius-full);white-space:nowrap;vertical-align:middle}.mu-badge-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-badge-neutral{--mu-badge-tint: oklch(from var(--mu-badge-color) clamp(.5, l, .75) c h / 18%);color:var(--mu-text);background-color:var(--mu-badge-tint, var(--mu-well))}@supports not (color: oklch(from red l c h)){.mu-badge-neutral{--mu-badge-tint: color-mix(in srgb, var(--mu-badge-color) 18%, transparent)}}.mu-badge-primary{color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-badge-outline{color:var(--mu-text-secondary);border-color: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-text-secondary);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}.mu-link-muted{color:var(--mu-text-secondary)}.mu-link-muted:hover{color:var(--mu-text)}.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-text)}.mu-field-item{display:flex}.mu-field-label:where(: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]{color:var(--mu-text-disabled);cursor:not-allowed}.mu-field-description{margin:0;color:var(--mu-text-secondary)}.mu-field-root[data-invalid]>.mu-field-description{display:none}.mu-field-horizontal{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--mu-space-4);row-gap:0}.mu-field-horizontal>*{grid-column:2;grid-row:1;justify-self:end}.mu-field-horizontal:where(:has(>.mu-field-description))>*{grid-row:1 / span 2}.mu-field-horizontal>.mu-field-label{grid-column:1;grid-row:1;justify-self:stretch;font-weight:400}.mu-field-horizontal>.mu-field-description{grid-column:1;grid-row:2;justify-self:stretch;margin-top:var(--mu-space-1)}.mu-field-horizontal>.mu-field-error{grid-column:1 / -1;grid-row:3;justify-self:stretch;margin-top:var(--mu-space-1)}.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:calc(-1 * var(--mu-space-1));padding:0;color:var(--mu-text)}}@layer mu{.mu-input-root{--mu-field-edge: 1px;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 calc(var(--mu-row-padding) - var(--mu-field-edge));border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:var(--mu-surface);border:var(--mu-field-edge) solid var(--mu-edge);cursor:text;transition:border-color var(--mu-duration-fade) var(--mu-ease-out)}.mu-input-root:where(:has(>.mu-input-prefix)){padding-inline-start:calc(var(--mu-row-padding-icon) - var(--mu-field-edge))}.mu-input-root:where(:has(>.mu-input-suffix)){padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-field-edge))}.mu-input-root:where(:has(>.mu-input:focus)),.mu-input-root:where(:not(:has(>.mu-input))):focus-within{--mu-field-edge: var(--mu-focus-edge-width);border-color:var(--mu-focus-edge);outline:none}.mu-input-root:is([data-invalid],[aria-invalid=true],:has(>[data-invalid])){border-color:var(--mu-danger)}.mu-input-root:is([data-disabled],[aria-disabled=true],:has(>[data-disabled])){color:var(--mu-text-disabled);background-color:var(--mu-well);border-color:var(--mu-edge);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-size:var(--mu-row-field-font-size);font-weight:400}.mu-input-root:where(:not(:has(>.mu-input))) :where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),textarea){font-size:var(--mu-row-field-font-size)}.mu-input::placeholder{color:var(--mu-text-secondary);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-text-secondary)}.mu-input-root:where([data-disabled],[aria-disabled=true],:has(>[data-disabled])) :where(.mu-input,.mu-input-prefix,.mu-input-suffix){color:var(--mu-text-disabled)}.mu-input-root:where([data-disabled],[aria-disabled=true],:has(>[data-disabled])) .mu-input::placeholder{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-input-root{min-height:var(--mu-hit-area)}}}@layer mu{.mu-textarea{--mu-field-edge: 1px;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-field-line-height)) / 2 - var(--mu-field-edge)) calc(var(--mu-row-padding) - var(--mu-field-edge));border:var(--mu-field-edge) solid var(--mu-edge);outline:none;border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:var(--mu-surface);font-size:var(--mu-row-field-font-size);line-height:var(--mu-row-field-line-height);font-weight:400;resize:vertical;transition:border-color var(--mu-duration-fade) var(--mu-ease-out)}.mu-textarea::placeholder{color:var(--mu-text-secondary);opacity:1}.mu-textarea:focus-within{--mu-field-edge: var(--mu-focus-edge-width);border-color:var(--mu-focus-edge)}.mu-textarea:is([data-invalid],[aria-invalid=true]){border-color:var(--mu-danger)}.mu-textarea:is([data-disabled],[aria-disabled=true]){color:var(--mu-text-disabled);background-color:var(--mu-well);border-color:var(--mu-edge);cursor:not-allowed}.mu-textarea:where([data-disabled],[aria-disabled=true])::placeholder{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-textarea{min-height:var(--mu-hit-area)}}}@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);border:var(--mu-control-border-width) solid var(--mu-control-edge);cursor:pointer}.mu-checkbox[data-checked],.mu-checkbox[data-indeterminate]{--mu-control-focus: var(--mu-on-primary);background-color:var(--mu-primary);border-color:transparent}.mu-checkbox[data-invalid]{border-color:var(--mu-danger)}.mu-checkbox[data-disabled]{--mu-control-focus: var(--mu-focus);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);cursor:not-allowed}.mu-checkbox-indicator{display:flex}.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(pointer:coarse){.mu-checkbox{min-width:0;min-height:0;margin:calc((var(--mu-hit-area) - var(--mu-row-check-box)) / 2)}}}@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:calc(var(--mu-inset) - var(--mu-control-border-width));border-radius:var(--mu-radius-full);background-color:var(--mu-well);border:var(--mu-control-border-width) solid var(--mu-edge);cursor:pointer;transition:background-color var(--mu-duration-settle) var(--mu-ease-settle),border-color var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch[data-checked]{--mu-control-focus: var(--mu-on-primary);background-color:var(--mu-primary);border-color:transparent}.mu-switch[data-invalid]{border-color:var(--mu-danger)}.mu-switch[data-disabled]{--mu-control-focus: var(--mu-focus);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);cursor:not-allowed}.mu-switch-thumb{display:block;width:var(--knob);height:var(--knob);border-radius:var(--mu-radius-full);background-color:var(--mu-text);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),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[data-disabled]>.mu-switch-thumb{background-color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-switch{min-width:0;min-height:0;margin-block:calc((var(--mu-hit-area) - var(--switch-h)) / 2);margin-inline:calc((var(--mu-hit-area) - var(--switch-w)) / 2)}}@media(prefers-reduced-motion:reduce){.mu-switch-thumb{transition-property:background-color}}}@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);border:var(--mu-control-border-width) solid var(--mu-control-edge);cursor:pointer}.mu-radio[data-checked]{--mu-control-focus: var(--mu-on-primary);background-color:var(--mu-primary);border-color:transparent}.mu-radio[data-invalid]{border-color:var(--mu-danger)}.mu-radio[data-disabled]{--mu-control-focus: var(--mu-focus);--mu-on-primary: var(--mu-text-disabled);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);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)}@media(pointer:coarse){.mu-radio{min-width:0;min-height:0;margin:calc((var(--mu-hit-area) - var(--mu-row-check-box)) / 2)}}}@layer mu{.mu-toggle{position:relative;display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;min-width:0;min-height:var(--mu-row-height);margin:0;padding:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2 - var(--mu-control-border-width)) calc(var(--mu-row-padding) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid transparent;border-radius:var(--mu-row-radius);color:var(--mu-text-secondary);background-color:transparent;white-space:normal;cursor:pointer;user-select:none;transition-property:background-color,border-color,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-toggle:where(:has(>svg:first-child)){padding-inline-start:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width))}.mu-toggle.mu-toggle-icon{flex:none;width:var(--mu-row-height);padding:0}.mu-toggle-label{min-width:0;overflow-wrap:break-word}.mu-toggle>svg{flex:none}@media(hover:hover){.mu-toggle:hover:where(:not([data-disabled])){color:var(--mu-text);background-color:var(--mu-hover)}}.mu-toggle[data-pressed]{color:var(--mu-text);background-color:var(--mu-well)}.mu-toggle[data-disabled]{color:var(--mu-text-disabled);cursor:not-allowed}@media(pointer:coarse){.mu-toggle{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}@media(forced-colors:active){.mu-toggle{forced-color-adjust:none;--mu-text: var(--mu-key);--mu-text-secondary: var(--mu-key);--mu-hover: transparent;--mu-well: transparent}.mu-toggle:where([data-pressed]){border-color:var(--mu-key)}.mu-toggle:where([data-pressed])[data-disabled]{border-color:var(--mu-text-disabled)}}}@layer mu{.mu-segmented{position:relative;display:inline-flex;align-items:stretch;gap:0;box-sizing:border-box;min-height:var(--mu-row-height);padding:calc(var(--mu-inset) - 1px);border-radius:var(--mu-row-radius);background-color:var(--mu-well);border:1px solid transparent}.mu-segmented-key{position:absolute;top:calc(var(--mu-inset) - 1px);left:0;width:var(--key-width);bottom:calc(var(--mu-inset) - 1px);translate:var(--key-left) 0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));box-sizing:border-box;border:1px solid transparent;background-color:var(--mu-key);pointer-events:none;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{--segment-line: min(var(--mu-row-line-height), calc(var(--mu-row-height) - 2 * var(--mu-inset) - 2 * var(--mu-focus-edge-width)));position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;min-width:0;min-height:calc(var(--mu-row-height) - 2 * var(--mu-inset));margin:0;padding:calc((var(--mu-row-height) - 2 * var(--mu-inset) - var(--segment-line)) / 2 - var(--mu-control-border-width)) calc(var(--mu-row-padding) - var(--mu-inset) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid transparent;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));color:var(--mu-text-secondary);background:none;font:inherit;line-height:var(--segment-line);white-space:normal;overflow-wrap:anywhere;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:where(:not([data-disabled])),.mu-segmented>.mu-toggle:hover:where(:not([data-disabled])){color:var(--mu-text);background:none}}.mu-segmented-item[data-active],.mu-segmented>.mu-toggle[data-pressed]{color:var(--mu-text);background:none}.mu-segmented-item[data-disabled],.mu-segmented>.mu-toggle[data-disabled]{color:var(--mu-text-disabled);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:var(--mu-focus-edge-width) solid transparent;border-radius:var(--mu-radius-sm)}@media(pointer:coarse){.mu-segmented-item,.mu-segmented>.mu-toggle{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}@media(forced-colors:active){.mu-segmented{--mu-text: var(--mu-key);--mu-text-secondary: var(--mu-key)}.mu-segmented-item,.mu-segmented>.mu-toggle{forced-color-adjust:none;background:none;border-color:transparent}.mu-segmented-key{forced-color-adjust:none;background-color:transparent;border-color:var(--mu-key)}}@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);box-sizing:border-box;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}.mu-toggle-group.mu-segmented{align-items:stretch;gap:0}.mu-toggle-group>.mu-toggle:not(.mu-toggle-icon){min-width:min-content}.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)}.mu-toggle-group.mu-toggle-group-full{display:flex;width:100%}.mu-toggle-group-full>.mu-toggle:not(.mu-toggle-icon){flex:1 1 auto}}@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:calc(var(--mu-space-4) - 1px);outline:0}.mu-popover-title{margin:0;color:var(--mu-text)}.mu-popover-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-text-secondary)}.mu-popover-list{gap:0;padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px)}.mu-popover-list>.mu-popover-title{padding:var(--mu-space-2) var(--mu-row-padding) 0}.mu-popover-list>.mu-popover-description{margin:0;padding:0 var(--mu-row-padding) var(--mu-space-2)}}@layer mu{.mu-menu-popup{box-sizing:border-box;min-width:min(var(--mu-menu-width),var(--available-width, 100vw));max-width:min(var(--mu-menu-max-width),var(--available-width, 100vw));max-height:var(--available-height);overflow-y:auto;padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px);outline:0}.mu-menu-popup.mu-s-sm{--mu-row-height: var(--mu-control-compact)}.mu-menu-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;width:100%;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:transparent;font:inherit;font-weight:400;text-align:start;text-decoration:none;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-menu-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-menu-item>svg{color:var(--mu-text-secondary)}.mu-menu-item[data-highlighted],.mu-menu-item[data-popup-open]{background-color:var(--mu-hover)}.mu-menu-item:focus-visible:not([data-disabled]){background-color:var(--mu-hover)}.mu-menu-item[data-disabled]{color:var(--mu-text-disabled)}.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-item:where(:has(>.mu-menu-text)){align-items:flex-start;height:auto;min-height:var(--mu-row-height);padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2)}.mu-menu-item:where(:has(>.mu-menu-text))>svg,.mu-menu-item:where(:has(>.mu-menu-text))>.mu-menu-indicator{margin-block:calc((var(--mu-row-line-height) - var(--mu-row-icon)) / 2)}.mu-menu-text{display:flex;flex:1;flex-direction:column;min-width:0}.mu-menu-text>.mu-menu-label{flex:none}.mu-menu-description{color:var(--mu-text-secondary);white-space:normal}.mu-menu-shortcut{margin-inline-start:var(--mu-space-4);color:var(--mu-text-secondary)}.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-text)}.mu-menu-chevron{margin-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-row-padding));color:var(--mu-text-secondary)}.mu-menu-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-text-secondary)}.mu-menu-separator{height:1px;margin:calc(var(--mu-radius-xl) - var(--mu-radius-md)) calc(var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}.mu-menu-item[data-disabled]>svg{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-menu-item{min-height:var(--mu-hit-area)}.mu-menu-item:where(:has(>.mu-menu-text)){min-height:var(--mu-hit-area)}}}@layer mu{.mu-select-trigger{justify-content:space-between;min-width:0;padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width));text-align:start}.mu-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}.mu-select-value[data-placeholder]{color:var(--mu-text-secondary)}.mu-select-icon{display:flex;flex:none;color:var(--mu-text-secondary)}.mu-select-trigger.mu-button-ghost:not([data-disabled]){color:var(--mu-text)}.mu-select-trigger[data-invalid]{border-color:var(--mu-danger)}.mu-select-positioner{outline:0}.mu-select-popup{box-sizing:border-box;min-width:min(max(var(--mu-menu-width),var(--anchor-width)),var(--available-width));max-width:min(max(var(--mu-menu-max-width),var(--anchor-width)),var(--available-width));max-height:var(--available-height);padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px);outline:0}.mu-select-popup.mu-s-sm{--mu-row-height: var(--mu-control-compact)}.mu-select-list{overflow-y:auto;max-height:var(--available-height);scroll-padding-block:calc(var(--mu-radius-xl) - var(--mu-radius-md));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:var(--mu-row-radius);color:var(--mu-text);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-select-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-select-item>svg{color:var(--mu-text-secondary)}.mu-select-item[data-highlighted]{background-color:var(--mu-hover)}.mu-select-item[data-disabled]{color:var(--mu-text-disabled)}.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-text)}.mu-select-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-text-secondary)}.mu-select-separator{height:1px;margin:calc(var(--mu-radius-xl) - var(--mu-radius-md)) calc(var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}.mu-select-scroll-arrow{display:grid;place-items:center;height:var(--mu-space-4);color:var(--mu-text-secondary)}.mu-select-trigger[data-disabled] :where(.mu-select-value,.mu-select-icon),.mu-select-item[data-disabled]>svg{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-select-trigger{min-width:var(--mu-hit-area)}.mu-select-item{min-height:var(--mu-hit-area)}}}@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:calc(var(--mu-space-5) - 1px);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:where(:has(>.mu-dialog-x))>.mu-dialog-title{padding-inline-end:var(--mu-space-6)}.mu-dialog-popup.mu-dialog-bare{gap:0;padding:0;overflow:hidden}.mu-dialog-full{place-items:stretch;padding:0}.mu-dialog-full>.mu-dialog-popup{width:100%;height:100%;border:0;border-radius:0}.mu-dialog-title{margin:0;color:var(--mu-text)}.mu-dialog-description{margin:calc(-1 * var(--mu-space-3)) 0 0;color:var(--mu-text-secondary)}.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:calc(max(var(--mu-space-5),env(safe-area-inset-bottom)) - 1px);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-popup.mu-dialog-bare{padding-bottom:env(safe-area-inset-bottom)}.mu-dialog-sheet .mu-dialog-footer{flex-direction:column-reverse}.mu-dialog-sheet .mu-dialog-footer>*{width:100%}}@media(pointer:coarse){.mu-dialog-popup:where(:has(>.mu-dialog-x))>.mu-dialog-title{padding-inline-end:var(--mu-hit-area)}}@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-drawer-backdrop{position:fixed;inset:0;z-index:var(--mu-layer-overlay);background-color:var(--mu-overlay);opacity:calc(1 - var(--drawer-swipe-progress, 0));transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-drawer-backdrop[data-starting-style],.mu-drawer-backdrop[data-ending-style]{opacity:0}.mu-drawer-viewport{position:fixed;inset:0;z-index:var(--mu-layer-overlay);display:flex}.mu-drawer-left{justify-content:flex-start}.mu-drawer-right{justify-content:flex-end}.mu-drawer-bottom{align-items:flex-end}.mu-drawer-popup{--drawer-hidden: 0 0;position:relative;box-sizing:border-box;width:var(--mu-drawer-width);max-width:calc(100% - var(--mu-space-12));height:100%;overflow-y:auto;overscroll-behavior:contain;background-color:var(--mu-surface);outline:0;translate:var(--drawer-swipe-movement-x, 0) var(--drawer-swipe-movement-y, 0);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-drawer-bottom>.mu-drawer-popup{width:100%;max-width:none;height:auto;max-height:calc(100% - var(--mu-space-6));padding-bottom:env(safe-area-inset-bottom);border-start-start-radius:var(--mu-radius-2xl);border-start-end-radius:var(--mu-radius-2xl)}.mu-drawer-left>.mu-drawer-popup{--drawer-hidden: -100% 0;border-right:1px solid var(--mu-line)}.mu-drawer-right>.mu-drawer-popup{--drawer-hidden: 100% 0;border-left:1px solid var(--mu-line)}.mu-drawer-bottom>.mu-drawer-popup{--drawer-hidden: 0 100%;border-top:1px solid var(--mu-edge)}.mu-drawer-popup[data-starting-style],.mu-drawer-popup[data-ending-style]{translate:var(--drawer-hidden)}.mu-drawer-popup[data-swiping]{transition:none;user-select:none}.mu-drawer-content{display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;min-height:100%;padding:var(--mu-space-5)}.mu-drawer-bare>.mu-drawer-content{gap:0;height:100%;min-height:0;padding:0}.mu-drawer-popup:where(:has(>.mu-drawer-x))>.mu-drawer-content>.mu-drawer-title{padding-inline-end:var(--mu-space-6)}.mu-drawer-title{margin:0;color:var(--mu-text)}.mu-drawer-description{margin:calc(-1 * var(--mu-space-3)) 0 0;color:var(--mu-text-secondary)}.mu-drawer-x{position:absolute;top:var(--mu-space-4);inset-inline-end:var(--mu-space-4)}@media(pointer:coarse){.mu-drawer-popup:where(:has(>.mu-drawer-x))>.mu-drawer-content>.mu-drawer-title{padding-inline-end:var(--mu-hit-area)}}@media(prefers-reduced-motion:reduce){.mu-drawer-popup[data-starting-style],.mu-drawer-popup[data-ending-style]{translate:none;opacity:0}}}@layer mu{.mu-toast-viewport{position:fixed;top:var(--mu-space-6);right: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{top:max(var(--mu-space-4),env(safe-area-inset-top));right:var(--mu-space-4);left:var(--mu-space-4);width:auto}}.mu-toast{--mu-control-border-width: 1px;border-width:var(--mu-control-border-width);--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) + var(--toast-index) * var(--mu-row-gap) + var(--toast-swipe-movement-y));position:absolute;top:0;right:0;z-index:calc(var(--mu-layer-toast) - var(--toast-index));box-sizing:border-box;width:100%;height:var(--height);transform-origin:top 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:after{content:"";position:absolute;bottom: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:calc(var(--mu-space-3) - var(--mu-control-border-width)) calc(var(--mu-space-3) - var(--mu-control-border-width)) calc(var(--mu-space-3) - var(--mu-control-border-width)) calc(var(--mu-space-4) - var(--mu-control-border-width));overflow:hidden;border-radius:inherit;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-content[data-behind]{opacity:0;transition:none}.mu-toast-content[data-expanded]{opacity:1;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-icon{margin-block:calc((var(--mu-row-height) - var(--mu-row-icon)) / 2);color:var(--mu-text-secondary)}.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-text)}.mu-toast-description{margin:0;color:var(--mu-text-secondary)}.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) - var(--mu-field-edge))}.mu-combobox-trigger{box-sizing:border-box;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:var(--mu-control-border-width) solid transparent;border-radius:var(--mu-radius-sm);color:var(--mu-text-secondary);background:none;cursor:pointer}.mu-combobox-trigger:hover:not([data-disabled]){color:var(--mu-text)}.mu-combobox-trigger[data-disabled]{color:var(--mu-text-disabled);cursor:not-allowed}.mu-combobox-popup{box-sizing:border-box;width:var(--anchor-width);min-width:min(var(--mu-menu-width),var(--available-width));max-width:var(--available-width);outline:0}.mu-combobox-list{box-sizing:border-box;max-height:min(calc(var(--mu-list-height) - var(--mu-inset)),calc(var(--available-height) - var(--mu-inset)));overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px);scroll-padding-block:calc(var(--mu-radius-xl) - var(--mu-radius-md));outline:0}.mu-combobox-list[data-empty]{padding:0}.mu-combobox-popup.mu-s-sm .mu-combobox-list{--mu-row-height: var(--mu-control-compact)}.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:var(--mu-row-radius);color:var(--mu-text);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-combobox-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-combobox-item>svg{color:var(--mu-text-secondary)}.mu-combobox-item[data-highlighted]{background-color:var(--mu-hover)}.mu-combobox-item[data-disabled]{color:var(--mu-text-disabled)}.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-text)}.mu-combobox-row{display:flex;gap:var(--mu-inset)}.mu-combobox-row+.mu-combobox-row{margin-top:var(--mu-inset)}.mu-combobox-row>.mu-combobox-item{flex:none;justify-content:center;width:var(--mu-row-height);padding:0;border:1px solid transparent;border-radius:var(--mu-row-radius)}.mu-combobox-row>.mu-combobox-item>.mu-combobox-item-text{flex:none;overflow:visible}.mu-combobox-row>.mu-combobox-item>.mu-combobox-indicator{display:none}.mu-combobox-row>.mu-combobox-item[data-selected]{background-color:var(--mu-well);border-color:var(--mu-edge)}.mu-combobox-empty:not(:empty){padding:var(--mu-space-3) var(--mu-space-4);color:var(--mu-text-secondary)}.mu-combobox-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-text-secondary)}.mu-combobox-separator{height:1px;margin:calc(var(--mu-radius-xl) - var(--mu-radius-md)) calc(var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}.mu-combobox-item[data-disabled]>svg{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-combobox-item{min-height:var(--mu-hit-area)}.mu-combobox-row>.mu-combobox-item{width:var(--mu-hit-area)}.mu-combobox-trigger{width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}}@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-text-secondary);transition:rotate var(--mu-duration-settle) var(--mu-ease-settle)}.mu-collapsible-trigger[data-panel-open]>.mu-collapsible-chevron{rotate:180deg}.mu-collapsible-trigger[data-disabled]>.mu-collapsible-chevron{color:var(--mu-text-disabled)}.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-bordered{box-sizing:border-box;border:1px solid var(--mu-line);border-radius:var(--mu-radius-lg);background-color:var(--mu-surface)}.mu-table{width:100%;border-collapse:collapse;color:var(--mu-text);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-text-secondary);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-actions{display:inline-flex;align-items:center;gap:var(--mu-space-1);vertical-align:top}.mu-table-cell>:is(.mu-button,.mu-table-actions){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-text-secondary)}.mu-table-caption{caption-side:bottom;padding:var(--mu-space-2) var(--mu-row-padding) 0;color:var(--mu-text-secondary);text-align:start}.mu-table-bordered .mu-table-caption{padding-bottom:var(--mu-space-2);border-top:1px solid var(--mu-line)}.mu-table-bordered .mu-table-head{background-color:var(--mu-canvas)}.mu-table-bordered :is(.mu-table-head,.mu-table-cell):first-child,.mu-table-bordered .mu-table-caption{padding-inline-start:calc(var(--mu-row-padding) + var(--mu-space-1))}.mu-table-bordered :is(.mu-table-head,.mu-table-cell):last-child{padding-inline-end:calc(var(--mu-row-padding) + var(--mu-space-1))}}@layer mu{.mu-list{box-sizing:border-box;margin:0;padding:0;border:1px solid var(--mu-line);border-radius:var(--mu-radius-lg);color:var(--mu-text);background-color:var(--mu-surface);list-style:none}.mu-list{--list-pad-block: var(--mu-space-3);--list-pad-inline: var(--mu-space-4)}.mu-list.mu-s-sm{--list-pad-block: var(--mu-space-2);--list-pad-inline: var(--mu-space-3)}.mu-list-item{box-sizing:border-box;min-width:0;padding:var(--list-pad-block) var(--list-pad-inline)}.mu-list-item+.mu-list-item{border-top:1px solid var(--mu-line)}.mu-list-item-button{display:flex;align-items:center;gap:var(--mu-space-3);box-sizing:border-box;width:calc(100% + 2 * var(--list-pad-inline));margin:calc(-1 * var(--list-pad-block)) calc(-1 * var(--list-pad-inline));padding:calc(var(--list-pad-block) - var(--mu-control-border-width)) calc(var(--list-pad-inline) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid transparent;border-radius:0;color:inherit;background-color:transparent;font:inherit;text-align:start;text-decoration:none;cursor:pointer;transition:background-color var(--mu-duration-press) var(--mu-ease-out)}.mu-list-item:first-child>.mu-list-item-button{border-start-start-radius:calc(var(--mu-radius-lg) - 1px);border-start-end-radius:calc(var(--mu-radius-lg) - 1px)}.mu-list-item:last-child>.mu-list-item-button{border-end-start-radius:calc(var(--mu-radius-lg) - 1px);border-end-end-radius:calc(var(--mu-radius-lg) - 1px)}@media(hover:hover){.mu-list-item-button:hover:not(:disabled){background-color:var(--mu-hover)}}.mu-list-item-button:disabled{color:var(--mu-text-disabled);cursor:not-allowed}@media(pointer:coarse){.mu-list-item-button{min-height:var(--mu-hit-area)}}@media(prefers-reduced-motion:reduce){.mu-list-item-button{transition:none}}}@layer mu{.mu-form{display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;min-width:0;margin:0;color:var(--mu-text)}.mu-form-title{margin:0;color:var(--mu-text)}.mu-form-description{margin:calc(-1 * var(--mu-space-3)) 0 0;color:var(--mu-text-secondary)}.mu-form-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mu-space-2)}.mu-form-bordered{padding:var(--mu-space-4);border:1px solid var(--mu-line);border-radius:var(--mu-radius-lg);background-color:var(--mu-surface)}.mu-form-bordered>.mu-form-footer{margin:0 calc(-1 * var(--mu-space-4)) calc(-1 * var(--mu-space-4));padding:var(--mu-space-3) var(--mu-space-4);border-top:1px solid var(--mu-line);border-end-start-radius:calc(var(--mu-radius-lg) - 1px);border-end-end-radius:calc(var(--mu-radius-lg) - 1px);background-color:var(--mu-canvas)}}@layer mu{.mu-prose{color:var(--mu-text);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;text-wrap:balance}.mu-prose :where(p,li){text-wrap:pretty}.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-h3);line-height:var(--prose-h3-lh)}.mu-prose :where(strong,b){font-weight:600}.mu-prose del{color:var(--mu-text-secondary)}.mu-prose a{color:var(--mu-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;border-radius:var(--mu-radius-xs);outline:none}.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-text-secondary)}.mu-prose li:where(:has(>input[type=checkbox]:first-child)){position:relative;list-style:none}.mu-prose li>input[type=checkbox]:first-child{--mu-control-border-width: 1px;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:0;background:none;outline:none;cursor:pointer}.mu-prose li>input[type=checkbox]:first-child:disabled{cursor:default}.mu-prose li>input[type=checkbox]:first-child:before{content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:var(--mu-radius-sm);background-color:var(--mu-well);border:var(--mu-control-border-width) solid var(--mu-control-edge)}.mu-prose li>input[type=checkbox]:first-child:checked:before{background-color:var(--mu-primary);border-color:transparent}.mu-prose li>input[type=checkbox]:first-child:checked:after{content:"";position:absolute;inset:calc(var(--mu-inset) + 1px);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:where(:has(>input[type=checkbox]:first-child:checked)){color:var(--mu-text-secondary);text-decoration:line-through}@media(pointer:coarse){.mu-prose li:where(:has(>input[type=checkbox]:first-child)){padding-inline-start:calc(var(--mu-hit-area) - var(--mu-space-6))}.mu-prose li>input[type=checkbox]:first-child:disabled{inset-inline-start:calc(-1 * var(--mu-space-6) + (var(--mu-hit-area) - var(--mu-space-4)) / 2)}.mu-prose li:where(:has(>input[type=checkbox]:first-child:not(:disabled))){box-sizing:border-box;min-height:var(--mu-hit-area);padding-block:calc((var(--mu-hit-area) - var(--prose-lh)) / 2)}.mu-prose li>input[type=checkbox]:first-child:not(:disabled){top:0;width:var(--mu-hit-area);height:var(--mu-hit-area)}.mu-prose li>input[type=checkbox]:first-child:not(:disabled):before{inset:calc((var(--mu-hit-area) - var(--mu-space-4)) / 2)}.mu-prose li>input[type=checkbox]:first-child:not(:disabled):checked:after{inset:calc((var(--mu-hit-area) - var(--mu-space-4)) / 2 + var(--mu-inset) + 1px)}}.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-text-secondary)}.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-text-secondary);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-text-secondary);background-color:var(--mu-well)}}@layer mu{.mu-focus:focus-visible,.mu-toast:focus-visible{--mu-control-border-width: var(--mu-focus-edge-width);border-color:var(--mu-control-focus, var(--mu-focus))}.mu-link:focus-visible,.mu-prose a:focus-visible{text-decoration:underline;text-decoration-style:double}.mu-prose li>input[type=checkbox]:first-child:focus-visible{--mu-control-border-width: var(--mu-focus-edge-width)}.mu-prose li>input[type=checkbox]:first-child:focus-visible:before{border-color:var(--mu-focus)}.mu-prose li>input[type=checkbox]:first-child:checked:focus-visible:before{border-color:var(--mu-on-primary)}@media(forced-colors:active){.mu-focus:focus-visible,.mu-toast:focus-visible,.mu-prose li>input[type=checkbox]:first-child:focus-visible:before{border-color:var(--mu-focus)}.mu-input-root:focus-within,.mu-textarea:focus-within{border-color:var(--mu-focus)}.mu-switch-thumb{forced-color-adjust:none;background-color:var(--mu-key)}.mu-switch-thumb[data-checked]{background-color:var(--mu-on-primary)}}}
|
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:
|
|
1
|
+
@layer mu{:where(:root,:host,.mu-root:not([data-theme] *)),[data-theme=light]{color-scheme:light;--mu-canvas: oklch(.982 .004 95);--mu-surface: #ffffff;--mu-well: oklch(.934 .008 95);--mu-hover: oklch(.95 .006 95);--mu-key: #ffffff;--mu-key-hover: oklch(.982 .004 95);--mu-edge: oklch(.858 .006 95);--mu-control-edge: #909090;--mu-line: oklch(.919 .004 95);--mu-overlay: rgba(0,0,0,.32);--mu-text: #1a1a1a;--mu-text-secondary: #5e5e5e;--mu-text-disabled: #666666;--mu-primary: #1a1a1a;--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-primary);--mu-focus-edge: var(--mu-text)}[data-theme=dark]{--mu-canvas: #0f0f0f;--mu-surface: #1a1a1a;--mu-well: #252525;--mu-hover: #252525;--mu-key: #343434;--mu-key-hover: #3c3c3c;--mu-edge: #343434;--mu-control-edge: #777777;--mu-line: #252525;--mu-overlay: rgba(0,0,0,.6);--mu-text: #ededed;--mu-text-secondary: #adadad;--mu-text-disabled: #9e9e9e;--mu-primary: #e6e6e6;--mu-primary-hover: #ffffff;--mu-on-primary: #0f0f0f;--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-primary);--mu-focus-edge: var(--mu-text);color-scheme:dark}: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-control-compact: 28px;--mu-inset: 2px;--mu-hit-area: 44px;--mu-focus-edge-width: 1px;--mu-icon-xs: 12px;--mu-icon-sm: 14px;--mu-icon-md: 16px;--mu-icon-stroke: 1.25px;--mu-content-width: 720px;--mu-sidebar-width: 240px;--mu-menu-width: 160px;--mu-menu-max-width: 280px;--mu-list-height: 240px;--mu-popover-width: 280px;--mu-tooltip-width: 240px;--mu-toast-width: 360px;--mu-dialog-width: 440px;--mu-drawer-width: 320px;--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: -apple-system, BlinkMacSystemFont, "Segoe UI (mu)", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI (mu)", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}@media(forced-colors:active){:where(:root,:host,.mu-root),[data-theme]{--mu-focus-edge-width: 2px;--mu-control-edge: ButtonText;--mu-text-disabled: GrayText;--mu-focus: Highlight;--mu-focus-edge: Highlight;--mu-on-primary: Highlight;--mu-on-danger: Highlight;--mu-key: ButtonText}}}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { type ReactElement } from 'react';
|
|
2
|
+
import * as Tooltip from '../components/tooltip/index.js';
|
|
3
|
+
export declare function IconTooltip({ label, container, children }: {
|
|
4
|
+
label: string;
|
|
5
|
+
container?: Tooltip.PopupProps['container'];
|
|
6
|
+
children: ReactElement;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,5 +5,5 @@ type PositionerKey = (typeof positionerKeys)[number];
|
|
|
5
5
|
* Splits a folded Popup's props into the ones for Base UI's Positioner and
|
|
6
6
|
* the rest, for its Popup.
|
|
7
7
|
*/
|
|
8
|
-
export declare function splitPositioner<Props extends object>(props: Props): readonly [Record<string, unknown>, Omit<Props, "
|
|
8
|
+
export declare function splitPositioner<Props extends object>(props: Props): readonly [Record<string, unknown>, Omit<Props, "side" | "align" | "collisionAvoidance" | "collisionBoundary" | "sticky" | "anchor" | "positionMethod" | "disableAnchorTracking" | "alignItemWithTrigger">];
|
|
9
9
|
export {};
|
package/llms-full.txt
CHANGED
|
@@ -50,7 +50,7 @@ It is not a general-purpose UI library for outside developers. Components are ge
|
|
|
50
50
|
|
|
51
51
|
## Principles
|
|
52
52
|
|
|
53
|
-
1. **Content first.** The interface
|
|
53
|
+
1. **Content first.** The interface uses quiet neutrals, with a pale warm-gray paper canvas in Light and brighter surfaces. People's words, tags and images carry the color on the page.
|
|
54
54
|
2. **Ink is the emphasis.** The primary action, a checked box and a switch that is on use `primary` (near-black in Light, near-white in Dark). There is no brand hue in controls.
|
|
55
55
|
3. **Flat surfaces, clear states.** Fills show controls and state; borders separate surfaces. No shadows, sheen, focus rings or visible outlines. Content stays unboxed. See [Surfaces and boundaries](depth.md).
|
|
56
56
|
4. **Calm by default.** Hierarchy comes from text color, lightness steps and spacing, not from weight, size or extra color. Interaction uses a few shared treatments, not a separate effect for every event. Controls stay still while pressed; passive content does not highlight on hover. Few sizes and two weights: see [Typography](typography.md).
|
|
@@ -80,7 +80,7 @@ It is not a general-purpose UI library for outside developers. Components are ge
|
|
|
80
80
|
|
|
81
81
|
# Color
|
|
82
82
|
|
|
83
|
-
Memos UI is ink on paper:
|
|
83
|
+
Memos UI is ink on paper: a light warm-gray canvas, bright surfaces, `primary` ink for emphasis, one quiet blue for links and selection, and status colors only when there is a status.
|
|
84
84
|
|
|
85
85
|
## Roles
|
|
86
86
|
|
|
@@ -88,17 +88,17 @@ Memos UI is ink on paper: pure-gray neutrals, `primary` ink for emphasis, one qu
|
|
|
88
88
|
| --- | --- | --- |
|
|
89
89
|
| Surfaces | `canvas`, `surface`, `overlay` | The page; then inputs, menus, dialogs and toasts one step up. `overlay` dims the page behind dialogs |
|
|
90
90
|
| Wells | `well` | Switch tracks, segmented groups, unchecked boxes and radios, pressed toggles, inline code |
|
|
91
|
-
| Hover | `hover` | Rows, ghost buttons, the highlighted menu row
|
|
91
|
+
| Hover | `hover` | Rows, ghost buttons, the highlighted menu row |
|
|
92
92
|
| Keys | `key`, `key-hover` | Neutral buttons, select triggers, the selected tab, kbd |
|
|
93
93
|
| Text | `text`, `text-secondary`, `text-disabled` | Primary, secondary and disabled text. Each keeps 4.5:1 on the backgrounds named in the token table below |
|
|
94
94
|
| Emphasis | `primary`, `primary-hover`, `on-primary` | Primary button, checked checkbox and radio, switch when on, tooltip |
|
|
95
95
|
| Meta | `accent`, `selection`, `focus`, `focus-edge` | Links and text selection (`accent`); the keyboard focus edge and the focused field edge (`focus`, `focus-edge`, both ink). Never a fill |
|
|
96
96
|
| Status | `success`, `warning`, `danger` and their `-soft` pairs; `danger-key`, `on-danger` | Toasts, badges, field errors, danger buttons |
|
|
97
|
-
| Lines | `edge`, `control-edge`, `line` | Quiet resting borders on fields, neutral buttons, switch tracks and surfaces;
|
|
97
|
+
| Lines | `edge`, `control-edge`, `line` | Quiet resting borders on fields, neutral buttons, switch tracks and surfaces; small checkbox/radio markers; separators and table rules |
|
|
98
98
|
|
|
99
99
|
## Rules
|
|
100
100
|
|
|
101
|
-
-
|
|
101
|
+
- Light uses near-neutral warm grays for its canvas, wells, hover fills and quiet boundaries: one OKLCH hue (95), with chroma at most 0.008. Surfaces and keys stay white. Text, ink emphasis and stronger control boundaries stay pure gray; Dark keeps its pure-gray neutrals.
|
|
102
102
|
- `accent` is a quiet blue used only for links and selection. If a screen has blue on it at rest, apart from links, something is wrong.
|
|
103
103
|
- Focus is ink, not blue. A focused field darkens its own edge to `focus-edge`; controls reuse the existing 1px focus border. On primary and checked fills, the border uses `on-primary`; danger buttons use `on-danger`. Only forced-colors mode uses a 2px system focus edge. See [States](states.md).
|
|
104
104
|
- Status colors appear only when there is a status. Red is for destructive actions and errors, never for emphasis.
|
|
@@ -113,8 +113,9 @@ There are two themes: **Light** (the default) and **Dark**.
|
|
|
113
113
|
|
|
114
114
|
- `text`, `text-secondary` and `text-disabled` name content roles for text and icons, not fixed colors. App themes can set each one; they are not derived from `primary`.
|
|
115
115
|
- Each theme sets every color token explicitly. The package's tests check the values against the table on this page and check the contrast promised here.
|
|
116
|
+
- Light starts with a pale warm-gray paper canvas. White surfaces and keys remain brighter; wells and hover fills are darker steps in the same warm-gray family. This is a flat color treatment, with no texture.
|
|
116
117
|
- Dark keeps the same flat surface roles. Wells and keys are distinct gray fills, and `primary` flips to near-white with a dark `on-primary`.
|
|
117
|
-
-
|
|
118
|
+
- `edge` separates bounded surfaces and stays quiet at rest, on hover and under selected/pressed attributes. Text fields keep it until typing focus; neutral buttons, Selects and off switch tracks do not strengthen it on hover. `control-edge` is reserved for small unchecked Checkbox, Radio and Prose task marks, at least 3:1 against `canvas` and `surface` in both themes. On toggles use a `well` fill with `text`, without a visible border; segmented choices use a contrasting `key` fill in a quiet well. Text tokens never become persistent borders. Focus and invalid states retain their explicit edge treatments. Forced colors adds system-colored selection boundaries when fills disappear; `line` separates content. The quiet resting field boundary remains below 3:1; see [boundary contrast](depth.md#rules).
|
|
118
119
|
|
|
119
120
|
### Choosing a theme
|
|
120
121
|
|
|
@@ -166,15 +167,15 @@ An app can offer more themes than the two the package ships, such as a warm Pape
|
|
|
166
167
|
|
|
167
168
|
| Token | Light | Dark | Usage |
|
|
168
169
|
| --- | --- | --- | --- |
|
|
169
|
-
| `canvas` |
|
|
170
|
+
| `canvas` | `oklch(0.982 0.004 95)` | `#0f0f0f` | Page background |
|
|
170
171
|
| `surface` | `#ffffff` | `#1a1a1a` | One lightness step above canvas: inputs, menus, popovers, dialogs, toasts, table headers |
|
|
171
|
-
| `well` |
|
|
172
|
-
| `hover` |
|
|
172
|
+
| `well` | `oklch(0.934 0.008 95)` | `#252525` | Flat parts that hold a state: switch, tab, checkbox and radio wells, pressed toggles, inline code. A boundary is added only where the component needs one. Not for enabled text entry |
|
|
173
|
+
| `hover` | `oklch(0.95 0.006 95)` | `#252525` | Hover on rows, ghost buttons and wells; the highlighted row in menus and selects |
|
|
173
174
|
| `key` | `#ffffff` | `#343434` | Controls and selected parts: neutral buttons, select triggers, the selected tab, kbd. Flat: neutral buttons and selects use `edge`; selected segments use fill without a visible border in normal colors |
|
|
174
|
-
| `key-hover` |
|
|
175
|
-
| `edge` |
|
|
176
|
-
| `control-edge` | `#909090` | `#777777` |
|
|
177
|
-
| `line` |
|
|
175
|
+
| `key-hover` | `oklch(0.982 0.004 95)` | `#3c3c3c` | Hover on a neutral key |
|
|
176
|
+
| `edge` | `oklch(0.858 0.006 95)` | `#343434` | Quiet resting borders of fields, neutral buttons, switch tracks, well/key surfaces, popups, badges, selects and disabled controls |
|
|
177
|
+
| `control-edge` | `#909090` | `#777777` | Small unchecked Checkbox, Radio and Prose task markers only; never a full-control hover or selected boundary; at least 3:1 on `canvas` and `surface` |
|
|
178
|
+
| `line` | `oklch(0.919 0.004 95)` | `#252525` | Separators, table rules and menu dividers. About 1.2:1 against canvas in Light, so structural lines also need spacing or a heading |
|
|
178
179
|
| `overlay` | `rgba(0,0,0,0.32)` | `rgba(0,0,0,0.6)` | Backdrop behind dialogs and sheets |
|
|
179
180
|
| `text` | `#1a1a1a` | `#ededed` | Primary text and icons on canvas, surface, well and key (13:1 or more in both themes) |
|
|
180
181
|
| `text-secondary` | `#5e5e5e` | `#adadad` | Secondary text: descriptions, placeholders, unselected tabs and toggles, shortcuts, timestamps (4.9:1 or more on every surface) |
|
|
@@ -182,7 +183,7 @@ An app can offer more themes than the two the package ships, such as a warm Pape
|
|
|
182
183
|
| `primary` | `#1a1a1a` | `#e6e6e6` | The one emphasized action and every on state: primary buttons, checked boxes and radios, switches when on, tooltips. Ink, not a hue |
|
|
183
184
|
| `primary-hover` | `#333333` | `#ffffff` | Hover on a primary key |
|
|
184
185
|
| `on-primary` | `#ffffff` | `#0f0f0f` | Text, icons and the switch knob on `primary` (16:1 Light, 15:1 Dark) |
|
|
185
|
-
| `accent` | `oklch(0.5 0.13 255)` | `oklch(0.78 0.11 255)` | The only hue at rest: links, the text cursor and selection. 5.
|
|
186
|
+
| `accent` | `oklch(0.5 0.13 255)` | `oklch(0.78 0.11 255)` | The only hue at rest: links, the text cursor and selection. 5.7:1 on canvas in Light. Never a fill |
|
|
186
187
|
| `selection` | `rgba(40,99,171,0.18)` | `rgba(135,186,253,0.28)` | Text selection and the selected range in an editor |
|
|
187
188
|
| `focus` | `var(--mu-primary)` | `var(--mu-primary)` | 1px keyboard focus border, on `:focus-visible` only; contrasting text color on filled controls |
|
|
188
189
|
| `focus-edge` | `var(--mu-text)` | `var(--mu-text)` | Edge of a focused field (Input, Textarea, Combobox): 1px on any focus, recoloring the quiet `edge` |
|
|
@@ -218,11 +219,11 @@ Use these classes before writing new surface styles. `mu-key` covers both a cont
|
|
|
218
219
|
|
|
219
220
|
- No `box-shadow`, `text-shadow`, sheen gradients, focus rings or visible `outline`. `outline: none` or `0` only suppresses a browser outline when another visible focus treatment exists.
|
|
220
221
|
- Text entry keeps its `surface` fill on hover and focus. Enabled fields never use a gray well; disabled fields use `well` with `text-disabled` text.
|
|
221
|
-
- Boundary strength follows its job. Text entry
|
|
222
|
+
- Boundary strength follows its job. Resting, hovered and persistently selected surfaces never borrow text or focus colors for their borders. Text entry keeps its quiet 1px `edge` on hover and takes a 1px ink edge on focus. A resting text field does not need the same visual weight as a checkbox or switch's state marker. The quiet field boundary is below 3:1 in the built-in themes; this treatment does not guarantee WCAG 1.4.11 for text entry.
|
|
222
223
|
- A checked checkbox or radio uses `primary` with an `on-primary` mark. A switch also moves its knob.
|
|
223
|
-
- Neutral buttons, Select triggers and switch tracks
|
|
224
|
-
- A single choice among peers uses a contrasting `key` fill in a quiet well, with `text` for the selected label and icon. The group and selected key have no visible border in normal colors. Hover only increases label and icon contrast; focus reuses `mu-focus`. Borders reserve space, so geometry stays fixed. In forced colors the selected key gains a text-colored border. An independent on/off toggle uses `well` and `
|
|
225
|
-
- Surface classes
|
|
224
|
+
- Neutral buttons, Select triggers and switch tracks keep the quiet `edge` on hover. Button and Select fills provide hover feedback; fields and switches keep their fill. A switch keeps its contrasting `text` knob when off. Checkbox, Radio and Prose task checkboxes alone use `control-edge` around their small unchecked marks. Do not reuse that marker color around a toolbar item or a full control.
|
|
225
|
+
- A single choice among peers uses a contrasting `key` fill in a quiet well, with `text` for the selected label and icon. The group and selected key have no visible border in normal colors. Hover only increases label and icon contrast; focus reuses `mu-focus`. Borders reserve space, so geometry stays fixed. In forced colors the selected key gains a text-colored border. An independent on/off toggle uses `well` and `text` when on, with a transparent reserved border. Disabled on toggles keep that fill and use `text-disabled`. In forced colors an on toggle gets a system-colored boundary because its fill may disappear.
|
|
226
|
+
- Surface classes describe a surface, not an interaction state. `mu-key` keeps its `key` fill and quiet `edge` even with selected or pressed attributes. Use Toggle for a persistent on/off fill, or a key inside a well for one selected choice. Never turn a text token into a persistent border. Focus and invalid states are the explicit exceptions to quiet control boundaries.
|
|
226
227
|
- Floating surfaces have a border so they remain distinct over the same surface color. Modal backdrops still use `overlay`.
|
|
227
228
|
- Content is grouped by spacing, headings and separators. The boxed exceptions are List, bordered Table and bordered Form.
|
|
228
229
|
- Borders count toward the documented padding. Reserve their space and compensate inner padding so states never move text or change a control's size.
|
|
@@ -508,9 +509,9 @@ Every interactive component handles these states the same way.
|
|
|
508
509
|
|
|
509
510
|
| State | Looks like |
|
|
510
511
|
| --- | --- |
|
|
511
|
-
| Hover | Interactive keys go to `key-hover`; actionable rows and ghost buttons use `hover`. Passive content and ordinary table rows do not highlight.
|
|
512
|
+
| Hover | Interactive keys go to `key-hover`; actionable rows and ghost buttons use `hover`. Passive content and ordinary table rows do not highlight. Bounded controls keep their quiet `edge`; fields and switches keep their fill. Invalid fields keep `danger`. Muted labels go to `text`. Primary keys go to `primary-hover`. |
|
|
512
513
|
| Pressed (while held) | Buttons keep their geometry: neutral and ghost use `well`, primary uses `primary-hover`, danger retains `danger-key`. Filled primary and danger actions use their contrasting text color on the existing edge. Toggles do not imitate a selected state before activation |
|
|
513
|
-
| Pressed toggle (on) | Uses `well`
|
|
514
|
+
| Pressed toggle (on) | Uses `well` and the `text` color; the reserved border stays transparent |
|
|
514
515
|
| Selected (one of several) | A flat `key` fill in a quiet well that slides to the chosen item, with `text` for its label and icon; no visible group or selected-key border in normal colors. Hover only changes label and icon contrast; focus reuses `mu-focus` |
|
|
515
516
|
| Checked | A flat `primary` fill with an `on-primary` mark |
|
|
516
517
|
| Loading | The control becomes inert at once. After 300ms it hides its label and shows a Spinner without changing size; short waits keep the label |
|
|
@@ -523,6 +524,7 @@ Every interactive component handles these states the same way.
|
|
|
523
524
|
## Rules
|
|
524
525
|
|
|
525
526
|
- Keep state styling minimal. Reuse the shared component and foundation treatments; add a separate treatment only when it communicates a distinct action or state. A component does not need a new fill, border, scale or animation for every pointer or focus event.
|
|
527
|
+
- Persistent states and hover never strengthen a quiet boundary. Reserve `control-edge` for small checkbox/radio markers; text colors are not border colors. Focus and invalid states keep their explicit boundary treatments.
|
|
526
528
|
- Keep selection persistent and independent of transient events. A selected fill is not a focus border. Reuse `mu-focus` for the shared focus behavior instead of defining component-specific focus variants.
|
|
527
529
|
- Hover confirms an action, not the presence of content. Do not highlight a non-interactive container or data row merely because the pointer crosses it.
|
|
528
530
|
- Press feedback does not move or resize a control, apply a brightness filter, or animate its mark. Checkbox and Radio marks change immediately. A Switch's knob still moves to show its saved state.
|
|
@@ -532,7 +534,7 @@ Every interactive component handles these states the same way.
|
|
|
532
534
|
- Focus changes the existing edge, never adds a ring or visible outline. Filled controls use their contrasting text color at the edge.
|
|
533
535
|
- Popups, dialogs and panels never show a focus ring when they open and take focus.
|
|
534
536
|
- Focused borders use 2px in the system `Highlight` color in forced-colors mode. No shadow or outline fallback is needed.
|
|
535
|
-
-
|
|
537
|
+
- In forced-colors mode, segmented selection keeps a system-colored key border and on toggles get a system-colored boundary, distinct from the shared focus treatment.
|
|
536
538
|
- Disabled controls stay in place. Prefer explaining why something is unavailable over hiding it.
|
|
537
539
|
- Button waits 300ms before showing its spinner. It ignores presses and sets `aria-busy` immediately, cancels the delay when loading ends, and removes the spinner as soon as work finishes. Other loading indicators follow the same delay policy.
|
|
538
540
|
|
|
@@ -722,7 +724,7 @@ Wraps Base UI's [Button](https://base-ui.com/react/components/button): `disabled
|
|
|
722
724
|
## Style
|
|
723
725
|
|
|
724
726
|
- A flat control: 20, 24 or 32px tall. `primary` is an ink key with `on-primary` text; `neutral` a `key` with a quiet `edge` boundary; `ghost` flat `text-secondary` with `hover` on hover; `danger` a `danger-key` with `on-danger` text.
|
|
725
|
-
- A neutral button
|
|
727
|
+
- A neutral button keeps its quiet `edge` on hover; its `key-hover` fill provides feedback. Keyboard focus changes the 1px edge to ink; filled actions retain their contrasting focus edge.
|
|
726
728
|
- Only an icon: square. The side with an icon (`icon` at the start, `iconEnd` at the end) has 2px less padding.
|
|
727
729
|
- Press uses `well` for neutral and ghost, and `primary-hover` for primary; danger retains `danger-key`. Filled primary and danger actions also recolor the existing edge to their contrasting text color. No translation, scale or brightness filter.
|
|
728
730
|
- `loading` immediately sets `aria-busy` and `aria-disabled`, ignores presses and stays focusable. The label stays visible for 300ms; if still loading, a Spinner replaces it without changing width. Finishing cancels the delay and restores the label immediately.
|
|
@@ -763,7 +765,8 @@ Wraps Base UI's [Toggle](https://base-ui.com/react/components/toggle): `pressed`
|
|
|
763
765
|
|
|
764
766
|
## Style
|
|
765
767
|
|
|
766
|
-
- Off: flat `text-secondary
|
|
768
|
+
- Off: flat `text-secondary`, with `hover` on hover. On: a `well` fill and the `text` color, with a transparent reserved border; hover keeps that selected fill. Hover never adds a boundary; keyboard focus reuses `mu-focus`.
|
|
769
|
+
- Disabled: `text-disabled`; an on Toggle keeps its well and transparent border. In forced colors an on Toggle uses a system-colored boundary so selection survives when fills disappear.
|
|
767
770
|
- A label wraps when its row runs out of room; an icon-only toggle never shrinks. A ToggleGroup is at most as wide as its container and grows in height to keep long translated labels readable. On touch screens each Toggle reserves at least 44px in each direction.
|
|
768
771
|
|
|
769
772
|
<!-- docs/components/toggle-group.md -->
|
|
@@ -825,8 +828,8 @@ Base UI's props pass through: `value`, `defaultValue`, `onValueChange`, `multipl
|
|
|
825
828
|
|
|
826
829
|
## Style
|
|
827
830
|
|
|
828
|
-
- At most as wide as its container. With `fullWidth`, exactly as wide: labeled Toggles start at their natural width and share the extra space equally (`flex: 1 1 auto`), so equal labels give equal Toggles and a long label is never cut while there is room. Inside a popup that sizes to its content, the group is as wide as its labels need.
|
|
829
|
-
- `multiple`: items 2px apart.
|
|
831
|
+
- At most as wide as its container. With `fullWidth`, exactly as wide: labeled Toggles start at their natural width and share the extra space equally (`flex: 1 1 auto`), so equal labels give equal Toggles and a long label is never cut while there is room. Inside a popup that sizes to its content, the group is as wide as its labels need. Labels wrap at word boundaries, and the group and key grow to fit. Items keep enough width for their longest word, icon and padding; when those minimum widths cannot fit together, the group scrolls horizontally instead of breaking words or widening the page. Icon-only items keep their size. Prefer a Select when a narrow panel regularly needs this fallback.
|
|
832
|
+
- `multiple`: items 2px apart, using Toggle's `well` fill and `text` when on, with no visible border in normal colors. Keyboard focus stays separate from selection.
|
|
830
833
|
- Inside a segmented key, the label's line box can tighten at xs and sm to leave room for the focus border without changing geometry; its font size stays in the size row. Long labels wrap and increase the group's height.
|
|
831
834
|
- Use the existing `md` size for a labeled layout choice at the top of a settings popover: a 32px group, 28px selected face and 16px icons. Keep `sm` (24px) for dense contexts; do not invent a height between the size rows.
|
|
832
835
|
- Without `multiple`: a quiet `well` and contrasting `key` fill, with no visible group or selected-key border in normal colors. The selected label and icon use `text`; hover only changes label and icon contrast, without adding a fill or moving the key. Focus reuses `mu-focus`; do not add a component-specific focus treatment. In forced colors the selected key retains its text-colored border. The key slides to the chosen item over `duration-settle` with `ease-settle` and re-measures when an item changes width. Under reduced motion it jumps. On touch screens every item reserves at least 44px in each direction, without overlapping its neighbor.
|
|
@@ -1152,7 +1155,7 @@ Wraps Base UI's [Input](https://base-ui.com/react/components/input), so inside a
|
|
|
1152
1155
|
|
|
1153
1156
|
- Enabled fields use flat `surface` with a quiet 1px `edge` border. A gray well is reserved for the disabled state.
|
|
1154
1157
|
- Typed text weight 400; placeholder `text-secondary`. On touch screens typed text is 16px at every size, so iOS Safari does not zoom in on focus; the field keeps its height.
|
|
1155
|
-
- Hover
|
|
1158
|
+
- Hover keeps the quiet `edge`; focus recolors the 1px edge to `focus-edge` (ink), on click and keyboard alike. There is no ring around the field. The background stays fixed on hover and focus. Invalid fields keep their `danger` edge on hover and focus. Disabled fields use `well`, a quiet `edge` and `text-disabled` text. See [boundary contrast](../depth.md#rules) for the resting edge's contrast tradeoff.
|
|
1156
1159
|
- The side with a prefix or suffix has 2px less padding.
|
|
1157
1160
|
|
|
1158
1161
|
<!-- docs/components/textarea.md -->
|
|
@@ -1268,7 +1271,7 @@ Base UI's props pass through: `items`, `value`, `defaultValue`, `onValueChange`,
|
|
|
1268
1271
|
|
|
1269
1272
|
## Style
|
|
1270
1273
|
|
|
1271
|
-
- Trigger: a neutral key ([Button](button.md) `neutral`), a quiet `edge` at rest and
|
|
1274
|
+
- Trigger: a neutral key ([Button](button.md) `neutral`), a quiet `edge` at rest and on hover, value left-aligned at weight 400, `ChevronsUpDown` in `text-secondary`. `ghost`: a ghost Button with the `text` color, `hover` on hover and while open. Placeholder in `text-secondary`, also weight 400. Invalid: a `danger` edge at rest and on hover; focus reuses the shared 1px edge while the error message stays visible.
|
|
1272
1275
|
- List: `mu-popup`, 6px padding, at least `menu-width` and the trigger's width, at most `menu-max-width` or the trigger's width when that is wider. Rows like [Menu](menu.md) items: 28px at sm, 32px at md, highlight in the row's radius; the highlighted row uses `hover`.
|
|
1273
1276
|
- Fades in and rises `space-1` over `duration-fade`; no rise under reduced motion.
|
|
1274
1277
|
|
|
@@ -1372,7 +1375,7 @@ Base UI's props pass through: `items`, `value`, `defaultValue`, `onValueChange`,
|
|
|
1372
1375
|
|
|
1373
1376
|
## Style
|
|
1374
1377
|
|
|
1375
|
-
- The box is an [Input](input.md): flat `surface`, `edge`, and the focused edge on the box. The search icon and chevron are `text-secondary`; the chevron turns `text` on hover.
|
|
1378
|
+
- The box is an [Input](input.md): flat `surface`, `edge`, and the focused edge on the box. The search icon and chevron are `text-secondary`; the chevron turns `text` on hover. Disabled text and both icons use `text-disabled`. The chevron has a built-in Tooltip using `triggerLabel`.
|
|
1376
1379
|
- List: `mu-popup`, 6px padding, as wide as the input and at least `menu-width`. Rows like [Menu](menu.md) items: 28px at sm, 32px at md, highlight in the row's radius. The list is at most `list-height` (240px) tall, then it scrolls.
|
|
1377
1380
|
- Rows are text weight 400; the highlighted row uses `hover`; the chosen row has a check at the end.
|
|
1378
1381
|
- Empty text: `body` in `text-secondary`, `space-3` by `space-4` padding.
|
|
@@ -1453,7 +1456,7 @@ Wraps Base UI's [Switch](https://base-ui.com/react/components/switch) root with
|
|
|
1453
1456
|
|
|
1454
1457
|
## Style
|
|
1455
1458
|
|
|
1456
|
-
- A pill well with a round knob and a quiet `edge` at rest; the well fills with `primary` when on.
|
|
1459
|
+
- A pill well with a round knob and a quiet `edge` at rest; the well fills with `primary` when on. The track keeps its quiet boundary and fill on hover. Keyboard focus uses a fine 1px contrasting boundary.
|
|
1457
1460
|
- Height = checkbox box + 2px; width = height × 1.7.
|
|
1458
1461
|
- The knob is flat `text`, inset 2px; `on-primary` when on. It slides with `ease-settle` when the state changes, without growing on press. Under reduced motion it doesn't slide. Disabled switches keep the knob position, but use a quiet `edge` and a `text-disabled` knob. On touch screens margins reserve a 44px target without enlarging the mark.
|
|
1459
1462
|
|
|
@@ -1618,6 +1621,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `disabled`
|
|
|
1618
1621
|
|
|
1619
1622
|
- The trigger is a ghost key that bleeds `px` to the left, so its label lines up with the content below.
|
|
1620
1623
|
- The chevron is `text-secondary` and turns 180° over `duration-settle` with `ease-settle`.
|
|
1624
|
+
- Disabled labels and chevrons use `text-disabled`.
|
|
1621
1625
|
- The panel fades in and rises `space-1` over `duration-fade`. Its height never animates. No rise or turn under reduced motion.
|
|
1622
1626
|
|
|
1623
1627
|
<!-- docs/components/dialog.md -->
|
|
@@ -1883,6 +1887,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `disabled`
|
|
|
1883
1887
|
## Rules
|
|
1884
1888
|
|
|
1885
1889
|
- Give every icon-only Button and Toggle a tooltip with the same text as its `aria-label`. Two or three words.
|
|
1890
|
+
- Dialog, Drawer and Toast include the Tooltip on their built-in Close; it uses `closeLabel` and the popup's `container`. Combobox includes one on its chevron, using `triggerLabel`. These tooltips stay inside a shadow root when their trigger is mounted there.
|
|
1886
1891
|
- Never put essential information only in a tooltip: it doesn't open on touch screens.
|
|
1887
1892
|
- For text that explains something, use a [Popover](popover.md) instead.
|
|
1888
1893
|
- Wrap a toolbar, or the whole app, in one `Tooltip.Provider`.
|
|
@@ -2405,6 +2410,7 @@ Every native attribute passes through.
|
|
|
2405
2410
|
|
|
2406
2411
|
- Put plain HTML from a Markdown renderer inside it. It styles elements (`h1`–`h6`, `p`, `ul`, `ol`, `li`, `a`, `code`, `pre`, `blockquote`, `table`, `img`, `video`, `hr`), so the renderer needs no classes.
|
|
2407
2412
|
- Task lists are `<li>` elements that start with `<input type="checkbox">`, as GFM renders them. Give each checkbox a name, such as `aria-label` with the item text. Drop `disabled` when people can tick them.
|
|
2413
|
+
- On touch screens, interactive task checkboxes reserve a 44px square in the row. Their visible mark stays 16px; adjacent task targets and their text never overlap. Read-only task lists keep their compact spacing.
|
|
2408
2414
|
- Mark tags inside the text with `<span class="mu-prose-tag">#tag</span>`. They scale with the text and read as words. Tags listed outside the text, such as a row under an entry, are [Badge](badge.md)s.
|
|
2409
2415
|
- Do not put components that are not content (forms, menus) inside it.
|
|
2410
2416
|
- The editor (`@usememos/editor`) uses the same stylesheet in edit mode, so content does not shift between editing and reading.
|
|
@@ -3210,7 +3216,7 @@ Apply these classes to an app's own elements. Don't override their rules: the pr
|
|
|
3210
3216
|
| `mu-compact` | md controls and rows inside are `control-compact` (28px) tall; text, icons, padding and radius stay md | An app's sidebar with 28px rows, or a list Popover beside it |
|
|
3211
3217
|
| `mu-base` | The system font, the row's text size and weight 500, the `text` color, and icon sizing for Lucide icons inside | The root of a control |
|
|
3212
3218
|
| `mu-well` | `well` and a quiet 1px `edge` | A recessed surface; add a separate treatment for selection |
|
|
3213
|
-
| `mu-key` | `key` and a quiet 1px `edge
|
|
3219
|
+
| `mu-key` | `key` and a quiet 1px `edge`, including with selected or pressed attributes | A bounded control surface, or the bright selected face inside a well. It does not add interaction-state styling; use Toggle or ToggleGroup for choices |
|
|
3214
3220
|
| `mu-popup` | `surface`, a 1px `edge` and `radius-xl` | A part that floats |
|
|
3215
3221
|
| `mu-popup-motion` | The popup fade and rise, none under reduced motion | A popup Base UI opens |
|
|
3216
3222
|
| `mu-positioner` | The popup layer | A popup's positioner |
|