@usememos/ui 26.11.14 → 26.11.15
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/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/types/internal/icon-tooltip.d.ts +7 -0
- package/dist/types/internal/popup.d.ts +1 -1
- package/llms-full.txt +7 -3
- package/package.json +1 -1
|
@@ -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-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:break-word}.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}.mu-toggle[data-disabled]:where([data-pressed]){border-color:var(--mu-edge)}@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%;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)}}}
|
|
@@ -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
|
@@ -764,6 +764,7 @@ Wraps Base UI's [Toggle](https://base-ui.com/react/components/toggle): `pressed`
|
|
|
764
764
|
## Style
|
|
765
765
|
|
|
766
766
|
- Off: flat `text-secondary`. On: sits in a `well` with `control-edge` and the `text` color.
|
|
767
|
+
- Disabled: `text-disabled`; an on Toggle keeps its well and uses the quiet `edge`, so its state remains visible without an enabled boundary.
|
|
767
768
|
- 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
769
|
|
|
769
770
|
<!-- docs/components/toggle-group.md -->
|
|
@@ -825,7 +826,7 @@ Base UI's props pass through: `value`, `defaultValue`, `onValueChange`, `multipl
|
|
|
825
826
|
|
|
826
827
|
## Style
|
|
827
828
|
|
|
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
|
+
- 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.
|
|
829
830
|
- `multiple`: items 2px apart.
|
|
830
831
|
- 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
832
|
- 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.
|
|
@@ -1268,7 +1269,7 @@ Base UI's props pass through: `items`, `value`, `defaultValue`, `onValueChange`,
|
|
|
1268
1269
|
|
|
1269
1270
|
## Style
|
|
1270
1271
|
|
|
1271
|
-
- Trigger: a neutral key ([Button](button.md) `neutral`), a quiet `edge` at rest and `control-edge` on hover, value left-aligned, `ChevronsUpDown` in `text-secondary`. `ghost`: a ghost Button with the `text` color, `hover` on hover and while open. Placeholder in `text-secondary`, weight 400. Invalid: a `danger` edge at rest and on hover; focus reuses the shared 1px edge while the error message stays visible.
|
|
1272
|
+
- Trigger: a neutral key ([Button](button.md) `neutral`), a quiet `edge` at rest and `control-edge` 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
1273
|
- 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
1274
|
- Fades in and rises `space-1` over `duration-fade`; no rise under reduced motion.
|
|
1274
1275
|
|
|
@@ -1372,7 +1373,7 @@ Base UI's props pass through: `items`, `value`, `defaultValue`, `onValueChange`,
|
|
|
1372
1373
|
|
|
1373
1374
|
## Style
|
|
1374
1375
|
|
|
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.
|
|
1376
|
+
- 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
1377
|
- 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
1378
|
- Rows are text weight 400; the highlighted row uses `hover`; the chosen row has a check at the end.
|
|
1378
1379
|
- Empty text: `body` in `text-secondary`, `space-3` by `space-4` padding.
|
|
@@ -1618,6 +1619,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `disabled`
|
|
|
1618
1619
|
|
|
1619
1620
|
- The trigger is a ghost key that bleeds `px` to the left, so its label lines up with the content below.
|
|
1620
1621
|
- The chevron is `text-secondary` and turns 180° over `duration-settle` with `ease-settle`.
|
|
1622
|
+
- Disabled labels and chevrons use `text-disabled`.
|
|
1621
1623
|
- The panel fades in and rises `space-1` over `duration-fade`. Its height never animates. No rise or turn under reduced motion.
|
|
1622
1624
|
|
|
1623
1625
|
<!-- docs/components/dialog.md -->
|
|
@@ -1883,6 +1885,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `disabled`
|
|
|
1883
1885
|
## Rules
|
|
1884
1886
|
|
|
1885
1887
|
- Give every icon-only Button and Toggle a tooltip with the same text as its `aria-label`. Two or three words.
|
|
1888
|
+
- 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
1889
|
- Never put essential information only in a tooltip: it doesn't open on touch screens.
|
|
1887
1890
|
- For text that explains something, use a [Popover](popover.md) instead.
|
|
1888
1891
|
- Wrap a toolbar, or the whole app, in one `Tooltip.Provider`.
|
|
@@ -2405,6 +2408,7 @@ Every native attribute passes through.
|
|
|
2405
2408
|
|
|
2406
2409
|
- 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
2410
|
- 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.
|
|
2411
|
+
- 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
2412
|
- 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
2413
|
- Do not put components that are not content (forms, menus) inside it.
|
|
2410
2414
|
- The editor (`@usememos/editor`) uses the same stylesheet in edit mode, so content does not shift between editing and reading.
|