@usememos/ui 26.11.1 → 26.11.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/components/badge/index.js.map +1 -1
- package/dist/components/button/index.js +1 -1
- package/dist/components/button/index.js.map +3 -3
- package/dist/components/combobox/index.js +1 -1
- package/dist/components/combobox/index.js.map +3 -3
- package/dist/components/dialog/index.js.map +2 -2
- package/dist/components/dialog/parts.js +1 -1
- package/dist/components/dialog/parts.js.map +3 -3
- package/dist/components/drawer/index.js +3 -0
- package/dist/components/drawer/index.js.map +7 -0
- package/dist/components/field/index.js +1 -1
- package/dist/components/field/index.js.map +3 -3
- package/dist/components/form/index.js +3 -0
- package/dist/components/form/index.js.map +7 -0
- package/dist/components/list/index.js +3 -0
- package/dist/components/list/index.js.map +7 -0
- package/dist/components/menu/classes.js +1 -1
- package/dist/components/menu/classes.js.map +2 -2
- package/dist/components/menu/index.js +1 -1
- package/dist/components/menu/index.js.map +3 -3
- package/dist/components/popover/classes.js +1 -1
- package/dist/components/popover/classes.js.map +3 -3
- package/dist/components/popover/index.js +1 -1
- package/dist/components/popover/index.js.map +3 -3
- package/dist/components/select/index.js +1 -1
- package/dist/components/select/index.js.map +3 -3
- package/dist/components/table/index.js +1 -1
- package/dist/components/table/index.js.map +3 -3
- package/dist/components/toast/index.js +1 -1
- package/dist/components/toast/index.js.map +3 -3
- package/dist/components/toggle-group/index.js +1 -1
- package/dist/components/toggle-group/index.js.map +3 -3
- package/dist/index.js +1 -1
- package/dist/index.js.map +3 -3
- package/dist/styles.css +1 -1
- package/dist/tokens.css +1 -1
- package/dist/types/components/badge/index.d.ts +2 -2
- package/dist/types/components/button/index.d.ts +2 -0
- package/dist/types/components/combobox/index.d.ts +8 -0
- package/dist/types/components/dialog/index.d.ts +3 -3
- package/dist/types/components/dialog/parts.d.ts +14 -1
- package/dist/types/components/drawer/index.d.ts +44 -0
- package/dist/types/components/field/index.d.ts +6 -0
- package/dist/types/components/form/index.d.ts +28 -0
- package/dist/types/components/list/index.d.ts +26 -0
- package/dist/types/components/menu/classes.d.ts +4 -0
- package/dist/types/components/menu/index.d.ts +2 -0
- package/dist/types/components/popover/classes.d.ts +6 -1
- package/dist/types/components/popover/index.d.ts +7 -0
- package/dist/types/components/select/index.d.ts +5 -0
- package/dist/types/components/table/index.d.ts +10 -0
- package/dist/types/components/toast/index.d.ts +1 -1
- package/dist/types/components/toggle-group/index.d.ts +2 -0
- package/dist/types/index.d.ts +5 -1
- package/llms-full.txt +487 -68
- package/llms.txt +4 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/popover/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { forwardRef } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { splitPositioner } from '../../internal/popup';\nimport { SizeContext } from '../../internal/size';\nimport { popoverClasses } from './classes';\n\nconst classes = /* @__PURE__ */ popoverClasses();\n\nexport type RootProps = BasePopover.Root.Props;\n\n/** Groups a trigger and its popover. */\nexport const Root = BasePopover.Root;\n\nexport interface TriggerProps extends BasePopover.Trigger.Props {}\n\n/** Opens the popover. Usually `render={<Button />}`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function PopoverTrigger({ className, ...props }, ref) {\n return <BasePopover.Trigger ref={ref} {...props} className={withClass('mu-popover-trigger', className)} />;\n});\n\ntype PositionerProps = Pick<\n BasePopover.Positioner.Props,\n 'side' | 'align' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'\n>;\n\nexport interface PopupProps extends BasePopover.Popup.Props, PositionerProps {\n /** Where the popover is portaled to. Default `document.body`. */\n container?: BasePopover.Portal.Props['container'];\n}\n\n/** The panel: a surface with `shadow-pop`, `popover-width` wide. */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function PopoverPopup({ container, className, children, ...props }, ref) {\n const [positioner, rest] = splitPositioner(props);\n return (\n <BasePopover.Portal container={container}>\n <BasePopover.Positioner sideOffset={6} {...positioner} className=\"mu-positioner\">\n <BasePopover.Popup ref={ref} {...rest} className={withClass(classes.popup, className)}>\n {/* The panel is md wherever it is declared: React context crosses the portal, so a sm toolbar's size would leak in. */}\n <SizeContext.Provider value=\"md\">{children}</SizeContext.Provider>\n </BasePopover.Popup>\n </BasePopover.Positioner>\n </BasePopover.Portal>\n );\n});\n\nexport interface TitleProps extends BasePopover.Title.Props {}\n\n/** The popover's heading, an `<h2>`. Names the popup for screen readers. */\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(function PopoverTitle({ className, ...props }, ref) {\n return <BasePopover.Title ref={ref} {...props} className={withClass(classes.title, className)} />;\n});\n\nexport interface DescriptionProps extends BasePopover.Description.Props {}\n\n/** One line under the title, a `<p>`. */\nexport const Description = forwardRef<HTMLParagraphElement, DescriptionProps>(function PopoverDescription({ className, ...props }, ref) {\n return <BasePopover.Description ref={ref} {...props} className={withClass(classes.description, className)} />;\n});\n\nexport interface CloseProps extends BasePopover.Close.Props {}\n\n/** Closes the popover. Usually `render={<Button />}`. */\nexport const Close = forwardRef<HTMLButtonElement, CloseProps>(function PopoverClose({ className, ...props }, ref) {\n return <BasePopover.Close ref={ref} {...props} className={withClass('mu-popover-close', className)} />;\n});\n"],
|
|
5
|
-
"mappings": ";AAAA,OAAS,WAAWA,MAAmB,yBACvC,OAAS,cAAAC,MAAkB,QAC3B,OAAS,aAAAC,MAAiB,+BAC1B,OAAS,mBAAAC,MAAuB,0BAChC,OAAS,eAAAC,MAAmB,yBAC5B,OAAS,kBAAAC,
|
|
6
|
-
"names": ["BasePopover", "forwardRef", "withClass", "splitPositioner", "SizeContext", "popoverClasses", "jsx", "classes", "Root", "Trigger", "className", "props", "ref", "Popup", "container", "children", "positioner", "rest", "Title", "Description", "Close"]
|
|
4
|
+
"sourcesContent": ["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { forwardRef } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { splitPositioner } from '../../internal/popup';\nimport { SizeContext } from '../../internal/size';\nimport { popoverClasses, type PopoverVariant } from './classes';\n\nconst classes = /* @__PURE__ */ popoverClasses();\nconst listClasses = /* @__PURE__ */ popoverClasses({ variant: 'list' });\n\nexport type RootProps = BasePopover.Root.Props;\n\n/** Groups a trigger and its popover. */\nexport const Root = BasePopover.Root;\n\nexport interface TriggerProps extends BasePopover.Trigger.Props {}\n\n/** Opens the popover. Usually `render={<Button />}`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function PopoverTrigger({ className, ...props }, ref) {\n return <BasePopover.Trigger ref={ref} {...props} className={withClass('mu-popover-trigger', className)} />;\n});\n\ntype PositionerProps = Pick<\n BasePopover.Positioner.Props,\n 'side' | 'align' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'\n>;\n\nexport interface PopupProps extends BasePopover.Popup.Props, PositionerProps {\n /** Where the popover is portaled to. Default `document.body`. */\n container?: BasePopover.Portal.Props['container'];\n /**\n * `panel` (default) pads its content `space-4` and stacks it `space-3` apart.\n * `list` holds rows, such as an account menu with a header: a Menu's\n * `space-1` padding and no gap, for rows with `menuClasses().item`.\n */\n variant?: PopoverVariant;\n}\n\n/** The panel: a surface with `shadow-pop`, `popover-width` wide. */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function PopoverPopup({ container, variant = 'panel', className, children, ...props }, ref) {\n const [positioner, rest] = splitPositioner(props);\n return (\n <BasePopover.Portal container={container}>\n <BasePopover.Positioner sideOffset={6} {...positioner} className=\"mu-positioner\">\n <BasePopover.Popup ref={ref} {...rest} className={withClass(variant === 'list' ? listClasses.popup : classes.popup, className)}>\n {/* The panel is md wherever it is declared: React context crosses the portal, so a sm toolbar's size would leak in. */}\n <SizeContext.Provider value=\"md\">{children}</SizeContext.Provider>\n </BasePopover.Popup>\n </BasePopover.Positioner>\n </BasePopover.Portal>\n );\n});\n\nexport interface TitleProps extends BasePopover.Title.Props {}\n\n/** The popover's heading, an `<h2>`. Names the popup for screen readers. */\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(function PopoverTitle({ className, ...props }, ref) {\n return <BasePopover.Title ref={ref} {...props} className={withClass(classes.title, className)} />;\n});\n\nexport interface DescriptionProps extends BasePopover.Description.Props {}\n\n/** One line under the title, a `<p>`. */\nexport const Description = forwardRef<HTMLParagraphElement, DescriptionProps>(function PopoverDescription({ className, ...props }, ref) {\n return <BasePopover.Description ref={ref} {...props} className={withClass(classes.description, className)} />;\n});\n\nexport interface CloseProps extends BasePopover.Close.Props {}\n\n/** Closes the popover. Usually `render={<Button />}`. */\nexport const Close = forwardRef<HTMLButtonElement, CloseProps>(function PopoverClose({ className, ...props }, ref) {\n return <BasePopover.Close ref={ref} {...props} className={withClass('mu-popover-close', className)} />;\n});\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAS,WAAWA,MAAmB,yBACvC,OAAS,cAAAC,MAAkB,QAC3B,OAAS,aAAAC,MAAiB,+BAC1B,OAAS,mBAAAC,MAAuB,0BAChC,OAAS,eAAAC,MAAmB,yBAC5B,OAAS,kBAAAC,MAA2C,eAc3C,cAAAC,MAAA,oBAZT,IAAMC,EAA0BF,EAAe,EACzCG,EAA8BH,EAAe,CAAE,QAAS,MAAO,CAAC,EAKzDI,EAAOT,EAAY,KAKnBU,EAAUT,EAA4C,SAAwB,CAAE,UAAAU,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACvH,OAAOP,EAACN,EAAY,QAAZ,CAAoB,IAAKa,EAAM,GAAGD,EAAO,UAAWV,EAAU,qBAAsBS,CAAS,EAAG,CAC1G,CAAC,EAmBYG,EAAQb,EAAuC,SAAsB,CAAE,UAAAc,EAAW,QAAAC,EAAU,QAAS,UAAAL,EAAW,SAAAM,EAAU,GAAGL,CAAM,EAAGC,EAAK,CACtJ,GAAM,CAACK,EAAYC,CAAI,EAAIhB,EAAgBS,CAAK,EAChD,OACEN,EAACN,EAAY,OAAZ,CAAmB,UAAWe,EAC7B,SAAAT,EAACN,EAAY,WAAZ,CAAuB,WAAY,EAAI,GAAGkB,EAAY,UAAU,gBAC/D,SAAAZ,EAACN,EAAY,MAAZ,CAAkB,IAAKa,EAAM,GAAGM,EAAM,UAAWjB,EAAUc,IAAY,OAASR,EAAY,MAAQD,EAAQ,MAAOI,CAAS,EAE3H,SAAAL,EAACF,EAAY,SAAZ,CAAqB,MAAM,KAAM,SAAAa,EAAS,EAC7C,EACF,EACF,CAEJ,CAAC,EAKYG,EAAQnB,EAA2C,SAAsB,CAAE,UAAAU,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAClH,OAAOP,EAACN,EAAY,MAAZ,CAAkB,IAAKa,EAAM,GAAGD,EAAO,UAAWV,EAAUK,EAAQ,MAAOI,CAAS,EAAG,CACjG,CAAC,EAKYU,EAAcpB,EAAmD,SAA4B,CAAE,UAAAU,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACtI,OAAOP,EAACN,EAAY,YAAZ,CAAwB,IAAKa,EAAM,GAAGD,EAAO,UAAWV,EAAUK,EAAQ,YAAaI,CAAS,EAAG,CAC7G,CAAC,EAKYW,EAAQrB,EAA0C,SAAsB,CAAE,UAAAU,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACjH,OAAOP,EAACN,EAAY,MAAZ,CAAkB,IAAKa,EAAM,GAAGD,EAAO,UAAWV,EAAU,mBAAoBS,CAAS,EAAG,CACtG,CAAC",
|
|
6
|
+
"names": ["BasePopover", "forwardRef", "withClass", "splitPositioner", "SizeContext", "popoverClasses", "jsx", "classes", "listClasses", "Root", "Trigger", "className", "props", "ref", "Popup", "container", "variant", "children", "positioner", "rest", "Title", "Description", "Close"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{Select as t}from"@base-ui/react/select";import{Check as f,ChevronDown as x,ChevronsUpDown as g,ChevronUp as B}from"lucide-react";import{forwardRef as l}from"react";import{withClass as n}from"../../internal/class-name.js";import{splitPositioner as v}from"../../internal/popup.js";import{SizeContext as I,useRowSize as
|
|
2
|
+
import{Select as t}from"@base-ui/react/select";import{Check as f,ChevronDown as x,ChevronsUpDown as g,ChevronUp as B}from"lucide-react";import{forwardRef as l}from"react";import{withClass as n}from"../../internal/class-name.js";import{splitPositioner as v}from"../../internal/popup.js";import{SizeContext as I,useRowSize as m}from"../../internal/size.js";import{buttonClasses as T}from"../button/index.js";import{jsx as e,jsxs as P}from"react/jsx-runtime";function E({size:a,...o}){let r=m(a);return e(I.Provider,{value:r,children:e(t.Root,{...o})})}var V=l(function({variant:o="neutral",className:r,children:s,...i},p){let c=m();return P(t.Trigger,{ref:p,...i,className:n(`mu-select-trigger ${T({variant:o,size:c})}`,r),children:[s,e(t.Icon,{className:"mu-select-icon",children:e(g,{"aria-hidden":!0})})]})}),R=l(function({className:o,...r},s){return e(t.Value,{ref:s,...r,className:n("mu-select-value",o)})}),z=l(function({container:o,className:r,children:s,...i},p){let c=m(),[d,S]=v(i);return e(t.Portal,{container:o,children:e(t.Positioner,{sideOffset:4,...d,className:"mu-positioner mu-select-positioner",children:P(t.Popup,{ref:p,...S,className:n(`mu-select-popup mu-popup mu-popup-motion mu-base mu-s-${c}`,r),children:[e(t.ScrollUpArrow,{className:"mu-select-scroll-arrow",render:u=>e("div",{...u,children:e(B,{"aria-hidden":!0})})}),e(t.List,{className:"mu-select-list",children:s}),e(t.ScrollDownArrow,{className:"mu-select-scroll-arrow",render:u=>e("div",{...u,children:e(x,{"aria-hidden":!0})})})]})})})}),C=l(function({icon:o,className:r,children:s,...i},p){return P(t.Item,{ref:p,...i,className:n("mu-select-item",r),children:[o,e(t.ItemText,{className:"mu-select-item-text",children:s}),e("span",{className:"mu-select-indicator",children:e(t.ItemIndicator,{render:e(f,{"aria-hidden":!0}),children:null})})]})}),D=l(function({className:o,...r},s){return e(t.Group,{ref:s,...r,className:n("mu-select-group",o)})}),y=l(function({className:o,...r},s){return e(t.GroupLabel,{ref:s,...r,className:n("mu-select-group-label mu-label-sm",o)})}),H=l(function({className:o,...r},s){return e(t.Separator,{ref:s,...r,className:n("mu-select-separator",o)})});export{D as Group,y as GroupLabel,C as Item,z as Popup,E as Root,H as Separator,V as Trigger,R as Value};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/select/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Select as BaseSelect } from '@base-ui/react/select';\nimport { Check, ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-react';\nimport { forwardRef, type ReactNode } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { splitPositioner } from '../../internal/popup';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { IconElement, Size } from '../../types';\nimport { buttonClasses } from '../button';\n\nexport type RootProps<Value, Multiple extends boolean | undefined = false> = BaseSelect.Root.Props<Value, Multiple> & {\n size?: Exclude<Size, 'xs'>;\n};\n\n/** Groups the trigger and the list, and holds the value. Pass `items` so `Value` shows labels, not raw values. */\nexport function Root<Value, Multiple extends boolean | undefined = false>({ size, ...props }: RootProps<Value, Multiple>) {\n const resolved = useRowSize(size);\n return (\n <SizeContext.Provider value={resolved}>\n <BaseSelect.Root {...props} />\n </SizeContext.Provider>\n );\n}\n\nexport interface TriggerProps extends BaseSelect.Trigger.Props {}\n\n/** A neutral key that shows the value, with a chevron at the end. Holds `Value`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function SelectTrigger({ className, children, ...props }, ref) {\n const size = useRowSize();\n return (\n <BaseSelect.Trigger ref={ref} {...props} className={withClass(`mu-select-trigger ${buttonClasses({ variant
|
|
5
|
-
"mappings": ";AAAA,OAAS,UAAUA,MAAkB,wBACrC,OAAS,SAAAC,EAAO,eAAAC,EAAa,kBAAAC,EAAgB,aAAAC,MAAiB,eAC9D,OAAS,cAAAC,MAAkC,QAC3C,OAAS,aAAAC,MAAiB,+BAC1B,OAAS,mBAAAC,MAAuB,0BAChC,OAAS,eAAAC,EAAa,cAAAC,MAAkB,yBAExC,OAAS,iBAAAC,MAAqB,qBAWxB,cAAAC,
|
|
6
|
-
"names": ["BaseSelect", "Check", "ChevronDown", "ChevronsUpDown", "ChevronUp", "forwardRef", "withClass", "splitPositioner", "SizeContext", "useRowSize", "buttonClasses", "jsx", "jsxs", "Root", "size", "props", "resolved", "Trigger", "className", "children", "ref", "Value", "Popup", "container", "positioner", "rest", "arrowProps", "Item", "icon", "Group", "GroupLabel", "Separator"]
|
|
4
|
+
"sourcesContent": ["import { Select as BaseSelect } from '@base-ui/react/select';\nimport { Check, ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-react';\nimport { forwardRef, type ReactNode } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { splitPositioner } from '../../internal/popup';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { IconElement, Size } from '../../types';\nimport { buttonClasses } from '../button';\n\nexport type RootProps<Value, Multiple extends boolean | undefined = false> = BaseSelect.Root.Props<Value, Multiple> & {\n size?: Exclude<Size, 'xs'>;\n};\n\n/** Groups the trigger and the list, and holds the value. Pass `items` so `Value` shows labels, not raw values. */\nexport function Root<Value, Multiple extends boolean | undefined = false>({ size, ...props }: RootProps<Value, Multiple>) {\n const resolved = useRowSize(size);\n return (\n <SizeContext.Provider value={resolved}>\n <BaseSelect.Root {...props} />\n </SizeContext.Provider>\n );\n}\n\nexport interface TriggerProps extends BaseSelect.Trigger.Props {\n /**\n * `neutral` (default) is a raised key, for a value in a form. `ghost` is a\n * flat row that fills with `hover`, for a switcher in a sidebar or toolbar.\n */\n variant?: 'neutral' | 'ghost';\n}\n\n/** A neutral key that shows the value, with a chevron at the end. Holds `Value`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function SelectTrigger({ variant = 'neutral', className, children, ...props }, ref) {\n const size = useRowSize();\n return (\n <BaseSelect.Trigger ref={ref} {...props} className={withClass(`mu-select-trigger ${buttonClasses({ variant, size })}`, className)}>\n {children}\n <BaseSelect.Icon className=\"mu-select-icon\">\n <ChevronsUpDown aria-hidden />\n </BaseSelect.Icon>\n </BaseSelect.Trigger>\n );\n});\n\nexport interface ValueProps extends BaseSelect.Value.Props {}\n\n/** The chosen item's label, or `placeholder` in `ink-muted`. */\nexport const Value = forwardRef<HTMLSpanElement, ValueProps>(function SelectValue({ className, ...props }, ref) {\n return <BaseSelect.Value ref={ref} {...props} className={withClass('mu-select-value', className)} />;\n});\n\ntype PositionerProps = Pick<\n BaseSelect.Positioner.Props,\n | 'side'\n | 'align'\n | 'collisionAvoidance'\n | 'collisionBoundary'\n | 'sticky'\n | 'anchor'\n | 'positionMethod'\n | 'disableAnchorTracking'\n | 'alignItemWithTrigger'\n>;\n\nexport interface PopupProps extends BaseSelect.Popup.Props, PositionerProps {\n /** Where the list is portaled to. Default `document.body`. */\n container?: BaseSelect.Portal.Props['container'];\n}\n\n/**\n * The list of items. By default it opens over the trigger with the chosen\n * item on top of the value; `alignItemWithTrigger={false}` opens it below.\n */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function SelectPopup({ container, className, children, ...props }, ref) {\n const size = useRowSize();\n const [positioner, rest] = splitPositioner(props);\n return (\n <BaseSelect.Portal container={container}>\n <BaseSelect.Positioner sideOffset={4} {...positioner} className=\"mu-positioner mu-select-positioner\">\n <BaseSelect.Popup ref={ref} {...rest} className={withClass(`mu-select-popup mu-popup mu-popup-motion mu-base mu-s-${size}`, className)}>\n <BaseSelect.ScrollUpArrow className=\"mu-select-scroll-arrow\" render={(arrowProps) => <div {...arrowProps}><ChevronUp aria-hidden /></div>} />\n <BaseSelect.List className=\"mu-select-list\">{children}</BaseSelect.List>\n <BaseSelect.ScrollDownArrow className=\"mu-select-scroll-arrow\" render={(arrowProps) => <div {...arrowProps}><ChevronDown aria-hidden /></div>} />\n </BaseSelect.Popup>\n </BaseSelect.Positioner>\n </BaseSelect.Portal>\n );\n});\n\nexport interface ItemProps extends BaseSelect.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 SelectItem({ icon, className, children, ...props }, ref) {\n return (\n <BaseSelect.Item ref={ref} {...props} className={withClass('mu-select-item', className)}>\n {icon}\n <BaseSelect.ItemText className=\"mu-select-item-text\">{children}</BaseSelect.ItemText>\n <span className=\"mu-select-indicator\">\n {/* The empty children replace Base UI's default \"\u2714\uFE0F\" text inside the svg. */}\n <BaseSelect.ItemIndicator render={<Check aria-hidden />}>{null}</BaseSelect.ItemIndicator>\n </span>\n </BaseSelect.Item>\n );\n});\n\nexport interface GroupProps extends BaseSelect.Group.Props {}\n\n/** A labeled set of items. */\nexport const Group = forwardRef<HTMLDivElement, GroupProps>(function SelectGroup({ className, ...props }, ref) {\n return <BaseSelect.Group ref={ref} {...props} className={withClass('mu-select-group', className)} />;\n});\n\nexport interface GroupLabelProps extends BaseSelect.GroupLabel.Props {}\n\n/** The name of a Group. */\nexport const GroupLabel = forwardRef<HTMLDivElement, GroupLabelProps>(function SelectGroupLabel({ className, ...props }, ref) {\n return <BaseSelect.GroupLabel ref={ref} {...props} className={withClass('mu-select-group-label mu-label-sm', className)} />;\n});\n\nexport interface SeparatorProps extends BaseSelect.Separator.Props {}\n\n/** A line between groups of items. */\nexport const Separator = forwardRef<HTMLDivElement, SeparatorProps>(function SelectSeparator({ className, ...props }, ref) {\n return <BaseSelect.Separator ref={ref} {...props} className={withClass('mu-select-separator', className)} />;\n});\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAS,UAAUA,MAAkB,wBACrC,OAAS,SAAAC,EAAO,eAAAC,EAAa,kBAAAC,EAAgB,aAAAC,MAAiB,eAC9D,OAAS,cAAAC,MAAkC,QAC3C,OAAS,aAAAC,MAAiB,+BAC1B,OAAS,mBAAAC,MAAuB,0BAChC,OAAS,eAAAC,EAAa,cAAAC,MAAkB,yBAExC,OAAS,iBAAAC,MAAqB,qBAWxB,cAAAC,EAiBF,QAAAC,MAjBE,oBAJC,SAASC,EAA0D,CAAE,KAAAC,EAAM,GAAGC,CAAM,EAA+B,CACxH,IAAMC,EAAWP,EAAWK,CAAI,EAChC,OACEH,EAACH,EAAY,SAAZ,CAAqB,MAAOQ,EAC3B,SAAAL,EAACX,EAAW,KAAX,CAAiB,GAAGe,EAAO,EAC9B,CAEJ,CAWO,IAAME,EAAUZ,EAA4C,SAAuB,CAAE,QAAAa,EAAU,UAAW,UAAAC,EAAW,SAAAC,EAAU,GAAGL,CAAM,EAAGM,EAAK,CACrJ,IAAMP,EAAOL,EAAW,EACxB,OACEG,EAACZ,EAAW,QAAX,CAAmB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,qBAAqBI,EAAc,CAAE,QAAAQ,EAAS,KAAAJ,CAAK,CAAC,CAAC,GAAIK,CAAS,EAC7H,UAAAC,EACDT,EAACX,EAAW,KAAX,CAAgB,UAAU,iBACzB,SAAAW,EAACR,EAAA,CAAe,cAAW,GAAC,EAC9B,GACF,CAEJ,CAAC,EAKYmB,EAAQjB,EAAwC,SAAqB,CAAE,UAAAc,EAAW,GAAGJ,CAAM,EAAGM,EAAK,CAC9G,OAAOV,EAACX,EAAW,MAAX,CAAiB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,kBAAmBa,CAAS,EAAG,CACpG,CAAC,EAwBYI,EAAQlB,EAAuC,SAAqB,CAAE,UAAAmB,EAAW,UAAAL,EAAW,SAAAC,EAAU,GAAGL,CAAM,EAAGM,EAAK,CAClI,IAAMP,EAAOL,EAAW,EAClB,CAACgB,EAAYC,CAAI,EAAInB,EAAgBQ,CAAK,EAChD,OACEJ,EAACX,EAAW,OAAX,CAAkB,UAAWwB,EAC5B,SAAAb,EAACX,EAAW,WAAX,CAAsB,WAAY,EAAI,GAAGyB,EAAY,UAAU,qCAC9D,SAAAb,EAACZ,EAAW,MAAX,CAAiB,IAAKqB,EAAM,GAAGK,EAAM,UAAWpB,EAAU,yDAAyDQ,CAAI,GAAIK,CAAS,EACnI,UAAAR,EAACX,EAAW,cAAX,CAAyB,UAAU,yBAAyB,OAAS2B,GAAehB,EAAC,OAAK,GAAGgB,EAAY,SAAAhB,EAACP,EAAA,CAAU,cAAW,GAAC,EAAE,EAAQ,EAC3IO,EAACX,EAAW,KAAX,CAAgB,UAAU,iBAAkB,SAAAoB,EAAS,EACtDT,EAACX,EAAW,gBAAX,CAA2B,UAAU,yBAAyB,OAAS2B,GAAehB,EAAC,OAAK,GAAGgB,EAAY,SAAAhB,EAACT,EAAA,CAAY,cAAW,GAAC,EAAE,EAAQ,GACjJ,EACF,EACF,CAEJ,CAAC,EASY0B,EAAOvB,EAAsC,SAAoB,CAAE,KAAAwB,EAAM,UAAAV,EAAW,SAAAC,EAAU,GAAGL,CAAM,EAAGM,EAAK,CAC1H,OACET,EAACZ,EAAW,KAAX,CAAgB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,iBAAkBa,CAAS,EACnF,UAAAU,EACDlB,EAACX,EAAW,SAAX,CAAoB,UAAU,sBAAuB,SAAAoB,EAAS,EAC/DT,EAAC,QAAK,UAAU,sBAEd,SAAAA,EAACX,EAAW,cAAX,CAAyB,OAAQW,EAACV,EAAA,CAAM,cAAW,GAAC,EAAK,cAAK,EACjE,GACF,CAEJ,CAAC,EAKY6B,EAAQzB,EAAuC,SAAqB,CAAE,UAAAc,EAAW,GAAGJ,CAAM,EAAGM,EAAK,CAC7G,OAAOV,EAACX,EAAW,MAAX,CAAiB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,kBAAmBa,CAAS,EAAG,CACpG,CAAC,EAKYY,EAAa1B,EAA4C,SAA0B,CAAE,UAAAc,EAAW,GAAGJ,CAAM,EAAGM,EAAK,CAC5H,OAAOV,EAACX,EAAW,WAAX,CAAsB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,oCAAqCa,CAAS,EAAG,CAC3H,CAAC,EAKYa,EAAY3B,EAA2C,SAAyB,CAAE,UAAAc,EAAW,GAAGJ,CAAM,EAAGM,EAAK,CACzH,OAAOV,EAACX,EAAW,UAAX,CAAqB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,sBAAuBa,CAAS,EAAG,CAC5G,CAAC",
|
|
6
|
+
"names": ["BaseSelect", "Check", "ChevronDown", "ChevronsUpDown", "ChevronUp", "forwardRef", "withClass", "splitPositioner", "SizeContext", "useRowSize", "buttonClasses", "jsx", "jsxs", "Root", "size", "props", "resolved", "Trigger", "variant", "className", "children", "ref", "Value", "Popup", "container", "positioner", "rest", "arrowProps", "Item", "icon", "Group", "GroupLabel", "Separator"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{forwardRef as
|
|
2
|
+
import{forwardRef as r}from"react";import{cx as a}from"../../internal/class-name.js";import{SizeContext as i,useRowSize as c}from"../../internal/size.js";import{jsx as n}from"react/jsx-runtime";var u={sm:"mu-caption",md:"mu-body"},x=r(function({size:e,bordered:o=!1,className:t,...l},p){let m=c(e);return n(i.Provider,{value:m,children:n("div",{className:o?"mu-table-scroll mu-table-bordered":"mu-table-scroll",children:n("table",{ref:p,...l,className:a("mu-table mu-base",`mu-s-${m}`,u[m],t)})})})}),P=r(function({className:e,...o},t){return n("thead",{ref:t,...o,className:a("mu-table-header",e)})}),T=r(function({className:e,...o},t){return n("tbody",{ref:t,...o,className:a("mu-table-body",e)})}),C=r(function({className:e,...o},t){return n("tr",{ref:t,...o,className:a("mu-table-row",e)})}),R=r(function({num:e=!1,scope:o="col",className:t,...l},p){return n("th",{ref:p,scope:o,...l,className:a("mu-table-head mu-label-sm",e&&"mu-table-num",t)})}),H=r(function({num:e=!1,muted:o=!1,className:t,...l},p){return n("td",{ref:p,...l,className:a("mu-table-cell",e&&"mu-table-num",o&&"mu-table-muted",t)})}),h=r(function({className:e,...o},t){return n("div",{ref:t,...o,className:a("mu-table-actions",e)})}),y=r(function({className:e,...o},t){return n("caption",{ref:t,...o,className:a("mu-table-caption mu-caption",e)})});export{h as Actions,T as Body,y as Caption,H as Cell,R as Head,P as Header,x as Root,C as Row};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/table/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { forwardRef, type ComponentPropsWithoutRef } from 'react';\nimport { cx } from '../../internal/class-name';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { Size } from '../../types';\n\nconst bodyText: Record<Exclude<Size, 'xs'>, string> = { sm: 'mu-caption', md: 'mu-body' };\n\nexport interface RootProps extends ComponentPropsWithoutRef<'table'> {\n /** `sm` for dense admin lists. Sets row height and cell text. */\n size?: Exclude<Size, 'xs'>;\n}\n\n/**\n * A `<table>` with rows separated by `line`. It sits in a box that scrolls\n * sideways when the table is wider than the screen; the ref and every prop go\n * to the `<table>`.\n */\nexport const Root = forwardRef<HTMLTableElement, RootProps>(function TableRoot({ size, className, ...props }, ref) {\n const resolved = useRowSize(size);\n return (\n <SizeContext.Provider value={resolved}>\n <div className
|
|
5
|
-
"mappings": ";AAAA,OAAS,cAAAA,MAAiD,QAC1D,OAAS,MAAAC,MAAU,+BACnB,OAAS,eAAAC,EAAa,cAAAC,MAAkB,
|
|
6
|
-
"names": ["forwardRef", "cx", "SizeContext", "useRowSize", "jsx", "bodyText", "Root", "size", "className", "props", "ref", "resolved", "Header", "Body", "Row", "Head", "num", "scope", "Cell", "muted", "Caption"]
|
|
4
|
+
"sourcesContent": ["import { forwardRef, type ComponentPropsWithoutRef } from 'react';\nimport { cx } from '../../internal/class-name';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { Size } from '../../types';\n\nconst bodyText: Record<Exclude<Size, 'xs'>, string> = { sm: 'mu-caption', md: 'mu-body' };\n\nexport interface RootProps extends ComponentPropsWithoutRef<'table'> {\n /** `sm` for dense admin lists. Sets row height and cell text. */\n size?: Exclude<Size, 'xs'>;\n /** Draws the table in a box: a `line` edge, `radius-lg` corners and a `surface` fill, as a List. */\n bordered?: boolean;\n}\n\n/**\n * A `<table>` with rows separated by `line`. It sits in a box that scrolls\n * sideways when the table is wider than the screen; the ref and every prop go\n * to the `<table>`.\n */\nexport const Root = forwardRef<HTMLTableElement, RootProps>(function TableRoot({ size, bordered = false, className, ...props }, ref) {\n const resolved = useRowSize(size);\n return (\n <SizeContext.Provider value={resolved}>\n <div className={bordered ? 'mu-table-scroll mu-table-bordered' : 'mu-table-scroll'}>\n <table ref={ref} {...props} className={cx('mu-table mu-base', `mu-s-${resolved}`, bodyText[resolved], className)} />\n </div>\n </SizeContext.Provider>\n );\n});\n\nexport interface HeaderProps extends ComponentPropsWithoutRef<'thead'> {}\n\n/** The `<thead>`, holding one Row of Head cells. */\nexport const Header = forwardRef<HTMLTableSectionElement, HeaderProps>(function TableHeader({ className, ...props }, ref) {\n return <thead ref={ref} {...props} className={cx('mu-table-header', className)} />;\n});\n\nexport interface BodyProps extends ComponentPropsWithoutRef<'tbody'> {}\n\n/** The `<tbody>`, holding the data Rows. */\nexport const Body = forwardRef<HTMLTableSectionElement, BodyProps>(function TableBody({ className, ...props }, ref) {\n return <tbody ref={ref} {...props} className={cx('mu-table-body', className)} />;\n});\n\nexport interface RowProps extends ComponentPropsWithoutRef<'tr'> {}\n\n/** A `<tr>`. Body rows highlight with `hover`. */\nexport const Row = forwardRef<HTMLTableRowElement, RowProps>(function TableRow({ className, ...props }, ref) {\n return <tr ref={ref} {...props} className={cx('mu-table-row', className)} />;\n});\n\nexport interface HeadProps extends ComponentPropsWithoutRef<'th'> {\n /** Right-aligns a column of numbers. Set it on the column's Cells too. */\n num?: boolean;\n}\n\n/** A column header, `<th scope=\"col\">` in 12px `ink-muted`. */\nexport const Head = forwardRef<HTMLTableCellElement, HeadProps>(function TableHead({ num = false, scope = 'col', className, ...props }, ref) {\n return <th ref={ref} scope={scope} {...props} className={cx('mu-table-head mu-label-sm', num && 'mu-table-num', className)} />;\n});\n\nexport interface CellProps extends ComponentPropsWithoutRef<'td'> {\n /** Right-aligns a number. */\n num?: boolean;\n /** Secondary text, such as a date, in `ink-muted`. */\n muted?: boolean;\n}\n\n/** A data cell, `<td>`. */\nexport const Cell = forwardRef<HTMLTableCellElement, CellProps>(function TableCell({ num = false, muted = false, className, ...props }, ref) {\n return <td ref={ref} {...props} className={cx('mu-table-cell', num && 'mu-table-num', muted && 'mu-table-muted', className)} />;\n});\n\nexport interface ActionsProps extends ComponentPropsWithoutRef<'div'> {}\n\n/**\n * Two or more row actions side by side in one Cell, such as Edit and Delete\n * Buttons. Like a single Button in a Cell, the group overlaps the cell's\n * padding, so the row keeps its height.\n */\nexport const Actions = forwardRef<HTMLDivElement, ActionsProps>(function TableActions({ className, ...props }, ref) {\n return <div ref={ref} {...props} className={cx('mu-table-actions', className)} />;\n});\n\nexport interface CaptionProps extends ComponentPropsWithoutRef<'caption'> {}\n\n/** Names the table, under it in `caption` style. Screen readers read it as the table's name. */\nexport const Caption = forwardRef<HTMLTableCaptionElement, CaptionProps>(function TableCaption({ className, ...props }, ref) {\n return <caption ref={ref} {...props} className={cx('mu-table-caption mu-caption', className)} />;\n});\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAS,cAAAA,MAAiD,QAC1D,OAAS,MAAAC,MAAU,+BACnB,OAAS,eAAAC,EAAa,cAAAC,MAAkB,yBAsBhC,cAAAC,MAAA,oBAnBR,IAAMC,EAAgD,CAAE,GAAI,aAAc,GAAI,SAAU,EAc3EC,EAAON,EAAwC,SAAmB,CAAE,KAAAO,EAAM,SAAAC,EAAW,GAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACnI,IAAMC,EAAWT,EAAWI,CAAI,EAChC,OACEH,EAACF,EAAY,SAAZ,CAAqB,MAAOU,EAC3B,SAAAR,EAAC,OAAI,UAAWI,EAAW,oCAAsC,kBAC/D,SAAAJ,EAAC,SAAM,IAAKO,EAAM,GAAGD,EAAO,UAAWT,EAAG,mBAAoB,QAAQW,CAAQ,GAAIP,EAASO,CAAQ,EAAGH,CAAS,EAAG,EACpH,EACF,CAEJ,CAAC,EAKYI,EAASb,EAAiD,SAAqB,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACxH,OAAOP,EAAC,SAAM,IAAKO,EAAM,GAAGD,EAAO,UAAWT,EAAG,kBAAmBQ,CAAS,EAAG,CAClF,CAAC,EAKYK,EAAOd,EAA+C,SAAmB,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAClH,OAAOP,EAAC,SAAM,IAAKO,EAAM,GAAGD,EAAO,UAAWT,EAAG,gBAAiBQ,CAAS,EAAG,CAChF,CAAC,EAKYM,EAAMf,EAA0C,SAAkB,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC3G,OAAOP,EAAC,MAAG,IAAKO,EAAM,GAAGD,EAAO,UAAWT,EAAG,eAAgBQ,CAAS,EAAG,CAC5E,CAAC,EAQYO,EAAOhB,EAA4C,SAAmB,CAAE,IAAAiB,EAAM,GAAO,MAAAC,EAAQ,MAAO,UAAAT,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC3I,OAAOP,EAAC,MAAG,IAAKO,EAAK,MAAOO,EAAQ,GAAGR,EAAO,UAAWT,EAAG,4BAA6BgB,GAAO,eAAgBR,CAAS,EAAG,CAC9H,CAAC,EAUYU,EAAOnB,EAA4C,SAAmB,CAAE,IAAAiB,EAAM,GAAO,MAAAG,EAAQ,GAAO,UAAAX,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC3I,OAAOP,EAAC,MAAG,IAAKO,EAAM,GAAGD,EAAO,UAAWT,EAAG,gBAAiBgB,GAAO,eAAgBG,GAAS,iBAAkBX,CAAS,EAAG,CAC/H,CAAC,EASYY,EAAUrB,EAAyC,SAAsB,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAClH,OAAOP,EAAC,OAAI,IAAKO,EAAM,GAAGD,EAAO,UAAWT,EAAG,mBAAoBQ,CAAS,EAAG,CACjF,CAAC,EAKYa,EAAUtB,EAAkD,SAAsB,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC3H,OAAOP,EAAC,WAAQ,IAAKO,EAAM,GAAGD,EAAO,UAAWT,EAAG,8BAA+BQ,CAAS,EAAG,CAChG,CAAC",
|
|
6
|
+
"names": ["forwardRef", "cx", "SizeContext", "useRowSize", "jsx", "bodyText", "Root", "size", "bordered", "className", "props", "ref", "resolved", "Header", "Body", "Row", "Head", "num", "scope", "Cell", "muted", "Actions", "Caption"]
|
|
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 p,CircleCheck as l,Info as u,TriangleAlert as T,X as d}from"lucide-react";import{forwardRef as f}from"react";import{cx as i,withClass as g}from"../../internal/class-name.js";import{Button as w,buttonClasses as P}from"../button/index.js";import{jsx as o,jsxs as c}from"react/jsx-runtime";var D=t.Provider,L=t.useToastManager,R=t.createToastManager,A=f(function({container:r,closeLabel:s="Close",className:a,...n},m){return o(t.Portal,{container:r,children:o(t.Viewport,{ref:m,...n,className:g("mu-toast-viewport",a),children:o(N,{closeLabel:s})})})}),v={neutral:u,success:l,warning:T,danger:p},B=e=>e==="success"||e==="warning"||e==="danger"?e:"neutral",C=["up","right"];function N({closeLabel:e}){let{toasts:r}=t.useToastManager();return r.map(s=>{let a=B(s.type),n=v[a];return o(t.Root,{toast:s,swipeDirection:C,className:i("mu-toast mu-popup mu-base mu-s-md",`mu-toast-${a}`),children:c(t.Content,{className:"mu-toast-content",children:[o(n,{className:"mu-toast-icon","aria-hidden":!0}),c("div",{className:"mu-toast-text",children:[o(t.Title,{className:"mu-toast-title mu-label"}),o(t.Description,{className:"mu-toast-description mu-caption"})]}),o(t.Action,{className:i("mu-toast-action",P({variant:"neutral",size:"sm"}))}),o(t.Close,{className:"mu-toast-close",render:o(w,{variant:"ghost",size:"sm",icon:o(d,{}),"aria-label":e})})]})},s.id)})}export{D as Provider,A as Viewport,R as createToastManager,L 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:
|
|
5
|
-
"mappings": ";AAAA,OAAS,SAASA,MAAiB,uBACnC,OAAS,eAAAC,EAAa,eAAAC,EAAa,QAAAC,EAAM,iBAAAC,EAAe,KAAAC,MAAS,eACjE,OAAS,cAAAC,MAAkB,QAC3B,OAAS,MAAAC,EAAI,aAAAC,MAAiB,+BAE9B,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,qBA4B9B,cAAAC,
|
|
6
|
-
"names": ["BaseToast", "CircleAlert", "CircleCheck", "Info", "TriangleAlert", "X", "forwardRef", "cx", "withClass", "Button", "buttonClasses", "jsx", "jsxs", "Provider", "useToastManager", "createToastManager", "Viewport", "container", "closeLabel", "className", "props", "ref", "ToastList", "icons", "toneOf", "type", "toasts", "toast", "tone", "Icon"]
|
|
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,+BAE9B,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,qBA4B9B,cAAAC,EAsBE,QAAAC,MAtBF,oBAvBD,IAAMC,EAAWb,EAAU,SAMrBc,EAAkBd,EAAU,gBAG5Be,EAAqBf,EAAU,mBAU/BgB,EAAWV,EAA0C,SAAuB,CAAE,UAAAW,EAAW,WAAAC,EAAa,QAAS,UAAAC,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACtJ,OACEV,EAACX,EAAU,OAAV,CAAiB,UAAWiB,EAC3B,SAAAN,EAACX,EAAU,SAAV,CAAmB,IAAKqB,EAAM,GAAGD,EAAO,UAAWZ,EAAU,oBAAqBW,CAAS,EAC1F,SAAAR,EAACW,EAAA,CAAU,WAAYJ,EAAY,EACrC,EACF,CAEJ,CAAC,EAEKK,EAAQ,CAAE,QAASpB,EAAM,QAASD,EAAa,QAASE,EAAe,OAAQH,CAAY,EAE3FuB,EAAUC,GAAoCA,IAAS,WAAaA,IAAS,WAAaA,IAAS,SAAWA,EAAO,UAGrHC,EAAyD,CAAC,KAAM,OAAO,EAE7E,SAASJ,EAAU,CAAE,WAAAJ,CAAW,EAA2B,CACzD,GAAM,CAAE,OAAAS,CAAO,EAAI3B,EAAU,gBAAgB,EAC7C,OAAO2B,EAAO,IAAKC,GAAU,CAC3B,IAAMC,EAAOL,EAAOI,EAAM,IAAI,EACxBE,EAAOP,EAAMM,CAAI,EACvB,OACElB,EAACX,EAAU,KAAV,CAA8B,MAAO4B,EAAO,eAAgBF,EAAgB,UAAWnB,EAAG,oCAAqC,YAAYsB,CAAI,EAAE,EAChJ,SAAAjB,EAACZ,EAAU,QAAV,CAAkB,UAAU,mBAC3B,UAAAW,EAACmB,EAAA,CAAK,UAAU,gBAAgB,cAAW,GAAC,EAC5ClB,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACX,EAAU,MAAV,CAAgB,UAAU,0BAA0B,EACrDW,EAACX,EAAU,YAAV,CAAsB,UAAU,kCAAkC,GACrE,EACAW,EAACX,EAAU,OAAV,CAAiB,UAAWO,EAAG,kBAAmBG,EAAc,CAAE,QAAS,UAAW,KAAM,IAAK,CAAC,CAAC,EAAG,EACvGC,EAACX,EAAU,MAAV,CAAgB,UAAU,iBAAiB,OAAQW,EAACF,EAAA,CAAO,QAAQ,QAAQ,KAAK,KAAK,KAAME,EAACN,EAAA,EAAE,EAAI,aAAYa,EAAY,EAAI,GACjI,GATmBU,EAAM,EAU3B,CAEJ,CAAC,CACH",
|
|
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"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{ToggleGroup as
|
|
2
|
+
import{ToggleGroup as m}from"@base-ui/react/toggle-group";import{forwardRef as f,useCallback as d,useLayoutEffect as y,useRef as v}from"react";import{cx as T,withClass as b}from"../../internal/class-name.js";import{SizeContext as h,useSize as z}from"../../internal/size.js";import{jsx as a,jsxs as L}from"react/jsx-runtime";var E=f(function({size:l,multiple:e=!1,fullWidth:o=!1,className:n,children:s,...t},r){let i=z(l),p=v(null),g=d(c=>{p.current=c,typeof r=="function"?r(c):r&&(r.current=c)},[r]);return G(p,!e),a(h.Provider,{value:i,children:L(m,{ref:g,multiple:e,...t,className:b(T(e?`mu-toggle-group mu-s-${i}`:`mu-toggle-group mu-segmented mu-base mu-s-${i}`,o&&"mu-toggle-group-full"),n),children:[e?null:a("span",{className:"mu-segmented-key","aria-hidden":!0}),s]})})});function G(u,l){y(()=>{let e=u.current;if(!l||!e)return;let o=()=>{let t=e.querySelector(":scope > .mu-toggle[data-pressed]");t?(e.style.setProperty("--key-left",`${t.offsetLeft}px`),e.style.setProperty("--key-width",`${t.offsetWidth}px`),e.dataset.keyed=""):delete e.dataset.keyed};o();let n=new MutationObserver(o);n.observe(e,{subtree:!0,attributes:!0,attributeFilter:["data-pressed"],childList:!0});let s=new ResizeObserver(o);s.observe(e);for(let t of e.children)s.observe(t);return()=>{n.disconnect(),s.disconnect()}},[u,l])}export{E as ToggleGroup};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/toggle-group/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';\nimport { forwardRef, useCallback, useLayoutEffect, useRef, type ReactNode } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { SizeContext, useSize } from '../../internal/size';\nimport type { Size } from '../../types';\n\nexport interface ToggleGroupProps extends BaseToggleGroup.Props {\n size?: Size;\n children?: ReactNode;\n}\n\n/**\n * A row of Toggles. With `multiple` it is a toolbar of independent on/off\n * toggles. Without it, one choice among peers: a well with one sliding key,\n * the same control as Tabs.\n */\nexport const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(function ToggleGroup({ size, multiple = false, className, children, ...props }, forwardedRef) {\n const resolved = useSize(size);\n const root = useRef<HTMLDivElement | null>(null);\n const setRef = useCallback(\n (node: HTMLDivElement | null) => {\n root.current = node;\n if (typeof forwardedRef === 'function') forwardedRef(node);\n else if (forwardedRef) forwardedRef.current = node;\n },\n [forwardedRef],\n );\n useSlidingKey(root, !multiple);\n return (\n <SizeContext.Provider value={resolved}>\n <BaseToggleGroup\n ref={setRef}\n multiple={multiple}\n {...props}\n className={withClass(multiple ? `mu-toggle-group mu-s-${resolved}` : `mu-toggle-group mu-segmented mu-base mu-s-${resolved}`, className)}\n >\n {multiple ? null : <span className=\"mu-segmented-key\" aria-hidden />}\n {children}\n </BaseToggleGroup>\n </SizeContext.Provider>\n );\n});\n\n/** Measures the pressed toggle and moves the key under it, as Base UI's Tabs.Indicator does for tabs. */\nfunction useSlidingKey(root: { current: HTMLDivElement | null }, enabled: boolean) {\n useLayoutEffect(() => {\n const element = root.current;\n if (!enabled || !element) return;\n const place = () => {\n const pressed = element.querySelector<HTMLElement>(':scope > .mu-toggle[data-pressed]');\n if (pressed) {\n element.style.setProperty('--key-left', `${pressed.offsetLeft}px`);\n element.style.setProperty('--key-width', `${pressed.offsetWidth}px`);\n element.dataset.keyed = '';\n } else {\n delete element.dataset.keyed;\n }\n };\n place();\n const mutations = new MutationObserver(place);\n mutations.observe(element, { subtree: true, attributes: true, attributeFilter: ['data-pressed'], childList: true });\n const resizes = new ResizeObserver(place);\n resizes.observe(element);\n for (const child of element.children) resizes.observe(child);\n return () => {\n mutations.disconnect();\n resizes.disconnect();\n };\n }, [root, enabled]);\n}\n"],
|
|
5
|
-
"mappings": ";AAAA,OAAS,eAAeA,MAAuB,8BAC/C,OAAS,cAAAC,EAAY,eAAAC,EAAa,mBAAAC,EAAiB,UAAAC,MAA8B,QACjF,OAAS,aAAAC,MAAiB,+
|
|
6
|
-
"names": ["BaseToggleGroup", "forwardRef", "useCallback", "useLayoutEffect", "useRef", "withClass", "SizeContext", "useSize", "jsx", "jsxs", "ToggleGroup", "size", "multiple", "className", "children", "props", "forwardedRef", "resolved", "root", "setRef", "node", "useSlidingKey", "enabled", "element", "place", "pressed", "mutations", "resizes", "child"]
|
|
4
|
+
"sourcesContent": ["import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';\nimport { forwardRef, useCallback, useLayoutEffect, useRef, type ReactNode } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport { SizeContext, useSize } from '../../internal/size';\nimport type { Size } from '../../types';\n\nexport interface ToggleGroupProps extends BaseToggleGroup.Props {\n size?: Size;\n /** Fills its container's width and gives every Toggle an equal share. Icon-only Toggles keep their size. */\n fullWidth?: boolean;\n children?: ReactNode;\n}\n\n/**\n * A row of Toggles. With `multiple` it is a toolbar of independent on/off\n * toggles. Without it, one choice among peers: a well with one sliding key,\n * the same control as Tabs.\n */\nexport const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(function ToggleGroup({ size, multiple = false, fullWidth = false, className, children, ...props }, forwardedRef) {\n const resolved = useSize(size);\n const root = useRef<HTMLDivElement | null>(null);\n const setRef = useCallback(\n (node: HTMLDivElement | null) => {\n root.current = node;\n if (typeof forwardedRef === 'function') forwardedRef(node);\n else if (forwardedRef) forwardedRef.current = node;\n },\n [forwardedRef],\n );\n useSlidingKey(root, !multiple);\n return (\n <SizeContext.Provider value={resolved}>\n <BaseToggleGroup\n ref={setRef}\n multiple={multiple}\n {...props}\n className={withClass(\n cx(multiple ? `mu-toggle-group mu-s-${resolved}` : `mu-toggle-group mu-segmented mu-base mu-s-${resolved}`, fullWidth && 'mu-toggle-group-full'),\n className,\n )}\n >\n {multiple ? null : <span className=\"mu-segmented-key\" aria-hidden />}\n {children}\n </BaseToggleGroup>\n </SizeContext.Provider>\n );\n});\n\n/** Measures the pressed toggle and moves the key under it, as Base UI's Tabs.Indicator does for tabs. */\nfunction useSlidingKey(root: { current: HTMLDivElement | null }, enabled: boolean) {\n useLayoutEffect(() => {\n const element = root.current;\n if (!enabled || !element) return;\n const place = () => {\n const pressed = element.querySelector<HTMLElement>(':scope > .mu-toggle[data-pressed]');\n if (pressed) {\n element.style.setProperty('--key-left', `${pressed.offsetLeft}px`);\n element.style.setProperty('--key-width', `${pressed.offsetWidth}px`);\n element.dataset.keyed = '';\n } else {\n delete element.dataset.keyed;\n }\n };\n place();\n const mutations = new MutationObserver(place);\n mutations.observe(element, { subtree: true, attributes: true, attributeFilter: ['data-pressed'], childList: true });\n const resizes = new ResizeObserver(place);\n resizes.observe(element);\n for (const child of element.children) resizes.observe(child);\n return () => {\n mutations.disconnect();\n resizes.disconnect();\n };\n }, [root, enabled]);\n}\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAS,eAAeA,MAAuB,8BAC/C,OAAS,cAAAC,EAAY,eAAAC,EAAa,mBAAAC,EAAiB,UAAAC,MAA8B,QACjF,OAAS,MAAAC,EAAI,aAAAC,MAAiB,+BAC9B,OAAS,eAAAC,EAAa,WAAAC,MAAe,yBA6B/B,OASqB,OAAAC,EATrB,QAAAC,MAAA,oBAdC,IAAMC,EAAcV,EAA6C,SAAqB,CAAE,KAAAW,EAAM,SAAAC,EAAW,GAAO,UAAAC,EAAY,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAM,EAAGC,EAAc,CACvL,IAAMC,EAAWX,EAAQI,CAAI,EACvBQ,EAAOhB,EAA8B,IAAI,EACzCiB,EAASnB,EACZoB,GAAgC,CAC/BF,EAAK,QAAUE,EACX,OAAOJ,GAAiB,WAAYA,EAAaI,CAAI,EAChDJ,IAAcA,EAAa,QAAUI,EAChD,EACA,CAACJ,CAAY,CACf,EACA,OAAAK,EAAcH,EAAM,CAACP,CAAQ,EAE3BJ,EAACF,EAAY,SAAZ,CAAqB,MAAOY,EAC3B,SAAAT,EAACV,EAAA,CACC,IAAKqB,EACL,SAAUR,EACT,GAAGI,EACJ,UAAWX,EACTD,EAAGQ,EAAW,wBAAwBM,CAAQ,GAAK,6CAA6CA,CAAQ,GAAIL,GAAa,sBAAsB,EAC/IC,CACF,EAEC,UAAAF,EAAW,KAAOJ,EAAC,QAAK,UAAU,mBAAmB,cAAW,GAAC,EACjEO,GACH,EACF,CAEJ,CAAC,EAGD,SAASO,EAAcH,EAA0CI,EAAkB,CACjFrB,EAAgB,IAAM,CACpB,IAAMsB,EAAUL,EAAK,QACrB,GAAI,CAACI,GAAW,CAACC,EAAS,OAC1B,IAAMC,EAAQ,IAAM,CAClB,IAAMC,EAAUF,EAAQ,cAA2B,mCAAmC,EAClFE,GACFF,EAAQ,MAAM,YAAY,aAAc,GAAGE,EAAQ,UAAU,IAAI,EACjEF,EAAQ,MAAM,YAAY,cAAe,GAAGE,EAAQ,WAAW,IAAI,EACnEF,EAAQ,QAAQ,MAAQ,IAExB,OAAOA,EAAQ,QAAQ,KAE3B,EACAC,EAAM,EACN,IAAME,EAAY,IAAI,iBAAiBF,CAAK,EAC5CE,EAAU,QAAQH,EAAS,CAAE,QAAS,GAAM,WAAY,GAAM,gBAAiB,CAAC,cAAc,EAAG,UAAW,EAAK,CAAC,EAClH,IAAMI,EAAU,IAAI,eAAeH,CAAK,EACxCG,EAAQ,QAAQJ,CAAO,EACvB,QAAWK,KAASL,EAAQ,SAAUI,EAAQ,QAAQC,CAAK,EAC3D,MAAO,IAAM,CACXF,EAAU,WAAW,EACrBC,EAAQ,WAAW,CACrB,CACF,EAAG,CAACT,EAAMI,CAAO,CAAC,CACpB",
|
|
6
|
+
"names": ["BaseToggleGroup", "forwardRef", "useCallback", "useLayoutEffect", "useRef", "cx", "withClass", "SizeContext", "useSize", "jsx", "jsxs", "ToggleGroup", "size", "multiple", "fullWidth", "className", "children", "props", "forwardedRef", "resolved", "root", "setRef", "node", "useSlidingKey", "enabled", "element", "place", "pressed", "mutations", "resizes", "child"]
|
|
7
7
|
}
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{themeTokens as r}from"./theme-tokens.js";import*as p from"./components/dialog/alert-dialog.js";import*as t from"./components/avatar/index.js";import{Badge as a,badgeClasses as x}from"./components/badge/index.js";import{Button as f,buttonClasses as
|
|
2
|
+
import{themeTokens as r}from"./theme-tokens.js";import*as p from"./components/dialog/alert-dialog.js";import*as t from"./components/avatar/index.js";import{Badge as a,badgeClasses as x}from"./components/badge/index.js";import{Button as f,buttonClasses as n}from"./components/button/index.js";import{Checkbox as y}from"./components/checkbox/index.js";import*as i from"./components/collapsible/index.js";import*as P from"./components/combobox/index.js";import*as C from"./components/dialog/index.js";import*as u from"./components/drawer/index.js";import*as d from"./components/field/index.js";import*as g from"./components/field/fieldset.js";import{Input as b,inputClasses as S}from"./components/input/index.js";import{Kbd as k}from"./components/kbd/index.js";import{Link as v}from"./components/link/index.js";import*as O from"./components/list/index.js";import*as h from"./components/form/index.js";import*as w from"./components/menu/index.js";import{menuClasses as G}from"./components/menu/classes.js";import*as I from"./components/popover/index.js";import{popoverClasses as F}from"./components/popover/classes.js";import{Prose as M}from"./components/prose/index.js";import{Radio as K,RadioGroup as V}from"./components/radio-group/index.js";import*as z from"./components/select/index.js";import{Separator as j}from"./components/separator/index.js";import{Skeleton as H}from"./components/skeleton/index.js";import{Spinner as N}from"./components/spinner/index.js";import{Switch as U}from"./components/switch/index.js";import*as W from"./components/table/index.js";import*as X from"./components/tabs/index.js";import{Textarea as Z,textareaClasses as _}from"./components/textarea/index.js";import*as $ from"./components/toast/index.js";import{Toggle as eo}from"./components/toggle/index.js";import{ToggleGroup as po}from"./components/toggle-group/index.js";import*as to from"./components/tooltip/index.js";export{p as AlertDialog,t as Avatar,a as Badge,f as Button,y as Checkbox,i as Collapsible,P as Combobox,C as Dialog,u as Drawer,d as Field,g as Fieldset,h as Form,b as Input,k as Kbd,v as Link,O as List,w as Menu,I as Popover,M as Prose,K as Radio,V as RadioGroup,z as Select,j as Separator,H as Skeleton,N as Spinner,U as Switch,W as Table,X as Tabs,Z as Textarea,$ as Toast,eo as Toggle,po as ToggleGroup,to as Tooltip,x as badgeClasses,n as buttonClasses,S as inputClasses,G as menuClasses,F as popoverClasses,_ as textareaClasses,r as themeTokens};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export type { IconElement, Size, Tone } from './types';\nexport { themeTokens } from './theme-tokens';\n\nexport * as AlertDialog from './components/dialog/alert-dialog';\nexport * as Avatar from './components/avatar';\nexport { Badge, badgeClasses, type BadgeClassesOptions, type BadgeProps } from './components/badge';\nexport { Button, buttonClasses, type ButtonClassesOptions, type ButtonProps, type ButtonVariant } from './components/button';\nexport { Checkbox, type CheckboxProps } from './components/checkbox';\nexport * as Collapsible from './components/collapsible';\nexport * as Combobox from './components/combobox';\nexport * as Dialog from './components/dialog';\nexport * as Field from './components/field';\nexport * as Fieldset from './components/field/fieldset';\nexport { Input, inputClasses, type InputClassesOptions, type InputProps } from './components/input';\nexport { Kbd, type KbdProps } from './components/kbd';\nexport { Link, type LinkProps } from './components/link';\nexport * as Menu from './components/menu';\nexport { menuClasses, type MenuClasses, type MenuClassesOptions } from './components/menu/classes';\nexport * as Popover from './components/popover';\nexport { popoverClasses, type PopoverClasses } from './components/popover/classes';\nexport { Prose, type ProseProps } from './components/prose';\nexport { Radio, RadioGroup, type RadioGroupProps, type RadioProps } from './components/radio-group';\nexport * as Select from './components/select';\nexport { Separator, type SeparatorProps } from './components/separator';\nexport { Skeleton, type SkeletonProps } from './components/skeleton';\nexport { Spinner, type SpinnerProps } from './components/spinner';\nexport { Switch, type SwitchProps } from './components/switch';\nexport * as Table from './components/table';\nexport * as Tabs from './components/tabs';\nexport { Textarea, textareaClasses, type TextareaClassesOptions, type TextareaProps } from './components/textarea';\nexport * as Toast from './components/toast';\nexport { Toggle, type ToggleProps } from './components/toggle';\nexport { ToggleGroup, type ToggleGroupProps } from './components/toggle-group';\nexport * as Tooltip from './components/tooltip';\n"],
|
|
5
|
-
"mappings": ";AACA,OAAS,eAAAA,MAAmB,oBAE5B,UAAYC,MAAiB,sCAC7B,UAAYC,MAAY,+BACxB,OAAS,SAAAC,EAAO,gBAAAC,MAA+D,8BAC/E,OAAS,UAAAC,EAAQ,iBAAAC,MAAsF,+BACvG,OAAS,YAAAC,MAAoC,iCAC7C,UAAYC,MAAiB,oCAC7B,UAAYC,MAAc,iCAC1B,UAAYC,MAAY,+BACxB,UAAYC,MAAW,8BACvB,UAAYC,MAAc,iCAC1B,OAAS,SAAAC,EAAO,gBAAAC,MAA+D,8BAC/E,OAAS,OAAAC,MAA0B,4BACnC,OAAS,QAAAC,MAA4B,6BACrC,UAAYC,MAAU,6BACtB,OAAS,eAAAC,MAA8D,+BACvE,UAAYC,MAAa,gCACzB,OAAS,kBAAAC,
|
|
6
|
-
"names": ["themeTokens", "AlertDialog", "Avatar", "Badge", "badgeClasses", "Button", "buttonClasses", "Checkbox", "Collapsible", "Combobox", "Dialog", "Field", "Fieldset", "Input", "inputClasses", "Kbd", "Link", "Menu", "menuClasses", "Popover", "popoverClasses", "Prose", "Radio", "RadioGroup", "Select", "Separator", "Skeleton", "Spinner", "Switch", "Table", "Tabs", "Textarea", "textareaClasses", "Toast", "Toggle", "ToggleGroup", "Tooltip"]
|
|
4
|
+
"sourcesContent": ["export type { IconElement, Size, Tone } from './types';\nexport { themeTokens } from './theme-tokens';\n\nexport * as AlertDialog from './components/dialog/alert-dialog';\nexport * as Avatar from './components/avatar';\nexport { Badge, badgeClasses, type BadgeClassesOptions, type BadgeProps } from './components/badge';\nexport { Button, buttonClasses, type ButtonClassesOptions, type ButtonProps, type ButtonVariant } from './components/button';\nexport { Checkbox, type CheckboxProps } from './components/checkbox';\nexport * as Collapsible from './components/collapsible';\nexport * as Combobox from './components/combobox';\nexport * as Dialog from './components/dialog';\nexport * as Drawer from './components/drawer';\nexport type { DrawerSide } from './components/drawer';\nexport * as Field from './components/field';\nexport * as Fieldset from './components/field/fieldset';\nexport { Input, inputClasses, type InputClassesOptions, type InputProps } from './components/input';\nexport { Kbd, type KbdProps } from './components/kbd';\nexport { Link, type LinkProps } from './components/link';\nexport * as List from './components/list';\nexport * as Form from './components/form';\nexport * as Menu from './components/menu';\nexport { menuClasses, type MenuClasses, type MenuClassesOptions } from './components/menu/classes';\nexport * as Popover from './components/popover';\nexport { popoverClasses, type PopoverClasses, type PopoverClassesOptions, type PopoverVariant } from './components/popover/classes';\nexport { Prose, type ProseProps } from './components/prose';\nexport { Radio, RadioGroup, type RadioGroupProps, type RadioProps } from './components/radio-group';\nexport * as Select from './components/select';\nexport { Separator, type SeparatorProps } from './components/separator';\nexport { Skeleton, type SkeletonProps } from './components/skeleton';\nexport { Spinner, type SpinnerProps } from './components/spinner';\nexport { Switch, type SwitchProps } from './components/switch';\nexport * as Table from './components/table';\nexport * as Tabs from './components/tabs';\nexport { Textarea, textareaClasses, type TextareaClassesOptions, type TextareaProps } from './components/textarea';\nexport * as Toast from './components/toast';\nexport { Toggle, type ToggleProps } from './components/toggle';\nexport { ToggleGroup, type ToggleGroupProps } from './components/toggle-group';\nexport * as Tooltip from './components/tooltip';\n"],
|
|
5
|
+
"mappings": ";AACA,OAAS,eAAAA,MAAmB,oBAE5B,UAAYC,MAAiB,sCAC7B,UAAYC,MAAY,+BACxB,OAAS,SAAAC,EAAO,gBAAAC,MAA+D,8BAC/E,OAAS,UAAAC,EAAQ,iBAAAC,MAAsF,+BACvG,OAAS,YAAAC,MAAoC,iCAC7C,UAAYC,MAAiB,oCAC7B,UAAYC,MAAc,iCAC1B,UAAYC,MAAY,+BACxB,UAAYC,MAAY,+BAExB,UAAYC,MAAW,8BACvB,UAAYC,MAAc,iCAC1B,OAAS,SAAAC,EAAO,gBAAAC,MAA+D,8BAC/E,OAAS,OAAAC,MAA0B,4BACnC,OAAS,QAAAC,MAA4B,6BACrC,UAAYC,MAAU,6BACtB,UAAYC,MAAU,6BACtB,UAAYC,MAAU,6BACtB,OAAS,eAAAC,MAA8D,+BACvE,UAAYC,MAAa,gCACzB,OAAS,kBAAAC,MAA4F,kCACrG,OAAS,SAAAC,MAA8B,8BACvC,OAAS,SAAAC,EAAO,cAAAC,MAAyD,oCACzE,UAAYC,MAAY,+BACxB,OAAS,aAAAC,MAAsC,kCAC/C,OAAS,YAAAC,MAAoC,iCAC7C,OAAS,WAAAC,MAAkC,gCAC3C,OAAS,UAAAC,MAAgC,+BACzC,UAAYC,MAAW,8BACvB,UAAYC,MAAU,6BACtB,OAAS,YAAAC,EAAU,mBAAAC,MAAwE,iCAC3F,UAAYC,MAAW,8BACvB,OAAS,UAAAC,OAAgC,+BACzC,OAAS,eAAAC,OAA0C,qCACnD,UAAYC,OAAa",
|
|
6
|
+
"names": ["themeTokens", "AlertDialog", "Avatar", "Badge", "badgeClasses", "Button", "buttonClasses", "Checkbox", "Collapsible", "Combobox", "Dialog", "Drawer", "Field", "Fieldset", "Input", "inputClasses", "Kbd", "Link", "List", "Form", "Menu", "menuClasses", "Popover", "popoverClasses", "Prose", "Radio", "RadioGroup", "Select", "Separator", "Skeleton", "Spinner", "Switch", "Table", "Tabs", "Textarea", "textareaClasses", "Toast", "Toggle", "ToggleGroup", "Tooltip"]
|
|
7
7
|
}
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer mu{.mu-s-xs{--mu-row-height: var(--mu-control-xs);--mu-row-padding: 6px;--mu-row-padding-icon: var(--mu-space-1);--mu-row-font-size: 12px;--mu-row-line-height: 16px;--mu-row-radius: var(--mu-radius-sm);--mu-row-gap: var(--mu-space-1);--mu-row-icon: var(--mu-icon-xs);--mu-row-icon-stroke: 1.25px;--mu-row-check-box: 14px}.mu-s-sm{--mu-row-height: var(--mu-control-sm);--mu-row-padding: var(--mu-space-2);--mu-row-padding-icon: 6px;--mu-row-font-size: 13px;--mu-row-line-height: 18px;--mu-row-radius: var(--mu-radius-sm);--mu-row-gap: var(--mu-space-1);--mu-row-icon: var(--mu-icon-sm);--mu-row-icon-stroke: 1.25px;--mu-row-check-box: 16px}.mu-s-md{--mu-row-height: var(--mu-control-md);--mu-row-padding: var(--mu-space-3);--mu-row-padding-icon: 10px;--mu-row-font-size: 14px;--mu-row-line-height: 20px;--mu-row-radius: var(--mu-radius-md);--mu-row-gap: 6px;--mu-row-icon: var(--mu-icon-md);--mu-row-icon-stroke: 1.5px;--mu-row-check-box: 18px}.mu-recessed{background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-raised{background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),rgba(255,255,255,0) 60%);box-shadow:var(--mu-shadow-raised)}.mu-key{background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),rgba(255,255,255,0) 60%);box-shadow:var(--mu-shadow-key)}.mu-popup{background:var(--mu-surface);box-shadow:var(--mu-shadow-pop);border-radius:var(--mu-radius-xl)}.mu-positioner{z-index:var(--mu-layer-popup);outline:0}.mu-popup-motion{transition:opacity var(--mu-duration-fade) var(--mu-ease-out),translate var(--mu-duration-fade) var(--mu-ease-out)}.mu-popup-motion[data-starting-style],.mu-popup-motion[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}.mu-popup-motion[data-instant]{transition:none}@media(prefers-reduced-motion:reduce){.mu-popup-motion[data-starting-style],.mu-popup-motion[data-ending-style]{translate:none}}.mu-base{font-family:var(--mu-font-sans);font-size:var(--mu-row-font-size, 14px);line-height:var(--mu-row-line-height, 20px);font-weight:500;letter-spacing:0;color:var(--mu-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}.mu-base ::selection,.mu-base::selection{background:var(--mu-selection)}.mu-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.mu-focus:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-offset)}.mu-hit{position:relative}@media(pointer:coarse){.mu-hit:after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--mu-hit-area));height:max(100%,var(--mu-hit-area));transform:translate(-50%,-50%)}}.mu-icon,.mu-base svg.lucide,.mu-prose svg.lucide{width:var(--mu-row-icon, 16px);height:var(--mu-row-icon, 16px);flex:none;display:block;stroke-width:var(--mu-row-icon-stroke, 1.5px)}.mu-icon *,.mu-base svg.lucide *,.mu-prose svg.lucide *{vector-effect:non-scaling-stroke}.mu-label-xs{font-family:var(--mu-font-sans);font-size:12px;line-height:16px;font-weight:500}.mu-caption{font-family:var(--mu-font-sans);font-size:13px;line-height:18px;font-weight:400}.mu-label-sm{font-family:var(--mu-font-sans);font-size:13px;line-height:18px;font-weight:500}.mu-body{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;font-weight:400}.mu-label{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;font-weight:500}.mu-title{font-family:var(--mu-font-display);font-size:16px;line-height:24px;font-weight:500}.mu-heading{font-family:var(--mu-font-display);font-size:20px;line-height:28px;font-weight:500}.mu-display{font-family:var(--mu-font-display);font-size:32px;line-height:40px;font-weight:500;letter-spacing:-.02em}.mu-prose{--prose-fs: 16px;--prose-lh: 24px;--prose-h1: 20px;--prose-h1-lh: 28px;--prose-h2: 16px;--prose-h2-lh: 24px;--prose-head: 13px;--prose-head-lh: 18px}.mu-prose-sm{--prose-fs: 14px;--prose-lh: 22px}}@layer mu{.mu-spinner{display:inline-block;flex:none;box-sizing:border-box;width:var(--mu-row-icon);height:var(--mu-row-icon);border:var(--mu-row-icon-stroke) solid currentColor;border-top-color:transparent;border-radius:var(--mu-radius-full);animation:mu-spin var(--mu-duration-spin) linear infinite}@keyframes mu-spin{to{rotate:1turn}}}@layer mu{.mu-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-raised);white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;transition-property:background-color,box-shadow,color,translate;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-button:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-button.mu-button-icon{width:var(--mu-row-height);padding:0}.mu-button-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@media(hover:hover){.mu-button:hover:not([data-disabled]){background-color:var(--mu-key-hover)}.mu-button-primary:hover:not([data-disabled]){background-color:var(--mu-primary-hover)}.mu-button-danger:hover:not([data-disabled]){background-color:var(--mu-danger-key);filter:brightness(1.08)}.mu-button-ghost:hover:not([data-disabled]){background-color:var(--mu-hover);color:var(--mu-ink)}}.mu-button:active:not([data-disabled]){translate:0 .5px;box-shadow:var(--mu-shadow-pressed)}.mu-button-primary{color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-button-danger{color:var(--mu-on-danger);background-color:var(--mu-danger-key)}.mu-button-ghost{color:var(--mu-ink-muted);background-color:transparent;background-image:none;box-shadow:none}.mu-button-ghost[data-popup-open]{background-color:var(--mu-hover);color:var(--mu-ink)}.mu-button-ghost:active:not([data-disabled]){translate:none;background-color:var(--mu-well);box-shadow:var(--mu-shadow-track)}.mu-button[data-disabled]:not([data-loading]){opacity:.45;cursor:not-allowed}.mu-button[data-loading]{cursor:progress}.mu-button[data-loading]>:not(.mu-spinner){opacity:0}.mu-button>.mu-spinner{position:absolute;inset:0;margin:auto}@media(prefers-reduced-motion:reduce){.mu-button:active:not([data-disabled]){translate:none}}}@layer mu{.mu-kbd{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:var(--mu-control-xs);height:var(--mu-control-xs);padding:0 var(--mu-space-1);border-radius:var(--mu-radius-sm);color:var(--mu-ink-muted);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-raised);white-space:nowrap}}@layer mu{.mu-separator{flex:none;align-self:stretch;margin:0;border:0;background-color:var(--mu-line)}.mu-separator[data-orientation=horizontal]{height:1px}.mu-separator[data-orientation=vertical]{width:1px}}@layer mu{.mu-badge{display:inline-flex;align-items:center;gap:var(--mu-space-1);box-sizing:border-box;height:var(--mu-control-xs);padding:0 var(--mu-row-padding);border-radius:var(--mu-radius-sm);white-space:nowrap;vertical-align:middle}.mu-badge-neutral{color:var(--mu-ink);background-color:var(--mu-well)}.mu-badge-outline{color:var(--mu-ink-muted);box-shadow:inset 0 0 0 1px var(--mu-edge)}.mu-badge-success{color:var(--mu-success);background-color:var(--mu-success-soft)}.mu-badge-warning{color:var(--mu-warning);background-color:var(--mu-warning-soft)}.mu-badge-danger{color:var(--mu-danger);background-color:var(--mu-danger-soft)}}@layer mu{.mu-avatar-root{display:inline-flex;flex:none;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;width:var(--mu-row-height);height:var(--mu-row-height);border-radius:var(--mu-radius-full);color:var(--mu-ink-muted);background-color:var(--mu-well);vertical-align:middle;user-select:none}.mu-avatar-image{width:100%;height:100%;object-fit:cover}.mu-avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%}}@layer mu{.mu-link{color:var(--mu-accent);text-decoration:none;text-underline-offset:.2em;border-radius:var(--mu-radius-xs);cursor:pointer}.mu-link:hover,.mu-link:focus-visible,.mu-link-underline{text-decoration:underline}.mu-link-muted{color:var(--mu-ink-muted)}.mu-link-muted:hover{color:var(--mu-ink)}.mu-link>.mu-icon{display:inline-block;width:.85em;height:.85em;margin-inline-start:.1em;vertical-align:-.05em}}@layer mu{.mu-skeleton{box-sizing:border-box;width:100%;height:var(--mu-row-line-height);border-radius:var(--mu-radius-sm);background-color:var(--mu-well);background-image:linear-gradient(90deg,transparent 0%,var(--mu-hover) 50%,transparent 100%);background-size:200% 100%;background-repeat:no-repeat;animation:mu-shimmer var(--mu-duration-shimmer) ease-in-out infinite}.mu-skeleton-round{width:var(--mu-row-height);height:var(--mu-row-height);border-radius:var(--mu-radius-full)}@keyframes mu-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@media(prefers-reduced-motion:reduce){.mu-skeleton{animation:none;background-image:none}}}@layer mu{.mu-field-root{display:flex;flex-direction:column;gap:var(--mu-space-1);min-width:0}.mu-field-label{color:var(--mu-ink)}.mu-field-item{display:flex}.mu-field-label: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]{opacity:.45;cursor:not-allowed}.mu-field-description{margin:0;color:var(--mu-ink-muted)}.mu-field-root[data-invalid]>.mu-field-description{display:none}.mu-field-error{display:flex;align-items:flex-start;gap:var(--mu-space-1);color:var(--mu-danger)}.mu-field-error>.mu-icon{--mu-row-icon: var(--mu-icon-sm);margin-block:calc((1lh - var(--mu-icon-sm)) / 2)}.mu-fieldset-root{display:flex;flex-direction:column;gap:var(--mu-space-3);min-width:0;margin:0;padding:0;border:0}.mu-fieldset-legend{margin-bottom:var(--mu-space-1);padding:0;color:var(--mu-ink)}}@layer mu{.mu-input-root{display:flex;align-items:center;gap:var(--mu-row-gap);box-sizing:border-box;width:100%;min-width:0;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-surface);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:text;transition:box-shadow var(--mu-duration-fade) var(--mu-ease-out)}.mu-input-root:where(:has(>.mu-input-prefix)){padding-inline-start:var(--mu-row-padding-icon)}.mu-input-root:where(:has(>.mu-input-suffix)){padding-inline-end:var(--mu-row-padding-icon)}@media(hover:hover){.mu-input-root:hover:not([data-disabled],[aria-disabled=true],:has(>[data-disabled]),:focus-within){box-shadow:inset 0 0 0 1px var(--mu-ink-muted),var(--mu-shadow-track)}}.mu-input-root:where(:has(>.mu-input:focus)),.mu-input-root:where(:not(:has(>.mu-input))):focus-within{box-shadow:inset 0 0 0 var(--mu-focus-edge-width) var(--mu-focus-edge),var(--mu-shadow-track);outline:var(--mu-focus-width) solid transparent;outline-offset:calc(-1 * var(--mu-focus-width))}.mu-input-root:is([data-invalid],[aria-invalid=true],:has(>[data-invalid])){box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-input-root:is([data-invalid],[aria-invalid=true],:has(>[data-invalid])):where(:has(>.mu-input:focus),:not(:has(>.mu-input)):focus-within){box-shadow:inset 0 0 0 var(--mu-focus-edge-width) var(--mu-danger),var(--mu-shadow-track)}.mu-input-root:is([data-disabled],[aria-disabled=true],:has(>[data-disabled])){opacity:.45;cursor:not-allowed}.mu-input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;outline:none;color:inherit;background:none;font:inherit;font-weight:400}.mu-input::placeholder{color:var(--mu-ink-muted);opacity:1}.mu-input[data-disabled]{cursor:not-allowed}.mu-input-prefix,.mu-input-suffix{display:flex;flex:none;align-items:center;gap:var(--mu-space-1);color:var(--mu-ink-muted)}}@layer mu{.mu-textarea{display:block;box-sizing:border-box;width:100%;min-height:var(--mu-row-height);margin:0;padding:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2) var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-surface);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);font-weight:400;resize:vertical;transition:box-shadow var(--mu-duration-fade) var(--mu-ease-out)}.mu-textarea::placeholder{color:var(--mu-ink-muted);opacity:1}@media(hover:hover){.mu-textarea:hover:not([data-disabled],[aria-disabled=true],:focus-within){box-shadow:inset 0 0 0 1px var(--mu-ink-muted),var(--mu-shadow-track)}}.mu-textarea:focus-within{box-shadow:inset 0 0 0 var(--mu-focus-edge-width) var(--mu-focus-edge),var(--mu-shadow-track);outline:var(--mu-focus-width) solid transparent;outline-offset:calc(-1 * var(--mu-focus-width))}.mu-textarea:is([data-invalid],[aria-invalid=true]){box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-textarea:is([data-invalid],[aria-invalid=true]):focus-within{box-shadow:inset 0 0 0 var(--mu-focus-edge-width) var(--mu-danger),var(--mu-shadow-track)}.mu-textarea:is([data-disabled],[aria-disabled=true]){opacity:.45;cursor:not-allowed}}@layer mu{.mu-checkbox{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--mu-row-check-box);height:var(--mu-row-check-box);border-radius:var(--mu-radius-sm);color:var(--mu-on-primary);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition-property:background-color,box-shadow,scale;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-checkbox[data-checked],.mu-checkbox[data-indeterminate]{background-color:var(--mu-primary);box-shadow:none}.mu-checkbox[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-checkbox:active:not([data-disabled],[data-readonly]){scale:.94}.mu-checkbox[data-disabled]{opacity:.45;cursor:not-allowed}.mu-checkbox-indicator{display:flex;transition:opacity var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press),scale var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press)}.mu-checkbox-indicator[data-starting-style],.mu-checkbox-indicator[data-ending-style]{opacity:0;scale:.6}.mu-checkbox-indicator>svg{width:calc(var(--mu-row-check-box) - 2 * var(--mu-inset));height:calc(var(--mu-row-check-box) - 2 * var(--mu-inset));stroke-width:2}.mu-checkbox-indicator>svg *{vector-effect:non-scaling-stroke}@media(prefers-reduced-motion:reduce){.mu-checkbox:active:not([data-disabled],[data-readonly]){scale:none}.mu-checkbox-indicator[data-starting-style],.mu-checkbox-indicator[data-ending-style]{scale:none}}}@layer mu{.mu-switch{--switch-h: calc(var(--mu-row-check-box) + var(--mu-inset));--switch-w: calc(var(--switch-h) * 1.7);--knob: calc(var(--switch-h) - 2 * var(--mu-inset));position:relative;display:inline-flex;flex:none;align-items:center;box-sizing:border-box;width:var(--switch-w);height:var(--switch-h);padding:var(--mu-inset);border-radius:var(--mu-radius-full);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition:background-color var(--mu-duration-settle) var(--mu-ease-settle),box-shadow var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch[data-checked]{background-color:var(--mu-primary);box-shadow:inset 0 0 0 1px var(--mu-primary)}.mu-switch[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-switch[data-disabled]{opacity:.45;cursor:not-allowed}.mu-switch-thumb{display:block;width:var(--knob);height:var(--knob);border-radius:var(--mu-radius-full);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-key);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),scale var(--mu-duration-press) var(--mu-ease-out),background-color var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch-thumb[data-checked]{translate:calc(var(--switch-w) - var(--switch-h)) 0;background-color:var(--mu-on-primary)}.mu-switch:active:not([data-disabled],[data-readonly])>.mu-switch-thumb{scale:1.1}@media(prefers-reduced-motion:reduce){.mu-switch-thumb{transition-property:background-color}.mu-switch:active:not([data-disabled],[data-readonly])>.mu-switch-thumb{scale:none}}}@layer mu{.mu-radio-group{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mu-space-3)}.mu-radio-group[data-orientation=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--mu-space-3) var(--mu-space-4)}.mu-radio-group[data-orientation=horizontal]>.mu-fieldset-legend{flex-basis:100%}.mu-radio{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--mu-row-check-box);height:var(--mu-row-check-box);border-radius:var(--mu-radius-full);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition-property:background-color,box-shadow,scale;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-radio[data-checked]{background-color:var(--mu-primary);box-shadow:none}.mu-radio[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-radio:active:not([data-disabled],[data-readonly]){scale:.94}.mu-radio[data-disabled]{opacity:.45;cursor:not-allowed}.mu-radio-indicator{width:calc(var(--mu-row-check-box) / 2.5);height:calc(var(--mu-row-check-box) / 2.5);border-radius:var(--mu-radius-full);background-color:var(--mu-on-primary);transition:opacity var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press),scale var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press)}.mu-radio-indicator[data-starting-style],.mu-radio-indicator[data-ending-style]{opacity:0;scale:.4}@media(prefers-reduced-motion:reduce){.mu-radio:active:not([data-disabled],[data-readonly]){scale:none}.mu-radio-indicator[data-starting-style],.mu-radio-indicator[data-ending-style]{scale:none}}}@layer mu{.mu-toggle{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink-muted);background-color:transparent;white-space:nowrap;cursor:pointer;user-select:none;transition-property:background-color,box-shadow,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-toggle:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-toggle.mu-toggle-icon{width:var(--mu-row-height);padding:0}@media(hover:hover){.mu-toggle:hover:not([data-disabled]){color:var(--mu-ink);background-color:var(--mu-hover)}}.mu-toggle[data-pressed],.mu-toggle:active:not([data-disabled]){color:var(--mu-ink);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-toggle[data-disabled]{opacity:.45;cursor:not-allowed}}@layer mu{.mu-segmented{position:relative;display:inline-flex;align-items:stretch;gap:0;box-sizing:border-box;height:var(--mu-row-height);padding:var(--mu-inset);border-radius:var(--mu-row-radius);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-segmented-key{position:absolute;top:var(--mu-inset);left:0;width:var(--key-width);height:calc(var(--mu-row-height) - 2 * var(--mu-inset));translate:var(--key-left) 0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-key);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),width var(--mu-duration-settle) var(--mu-ease-settle)}.mu-toggle-group.mu-segmented:not([data-keyed])>.mu-segmented-key{display:none}.mu-tabs-indicator{--key-left: var(--active-tab-left);--key-width: var(--active-tab-width)}.mu-segmented-item,.mu-segmented>.mu-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;height:100%;margin:0;padding:0 calc(var(--mu-row-padding) - var(--mu-inset));border:0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));color:var(--mu-ink-muted);background:none;box-shadow:none;font:inherit;white-space:nowrap;cursor:pointer;user-select:none;transition:color var(--mu-duration-fade) var(--mu-ease-out)}.mu-segmented>.mu-toggle.mu-toggle-icon{width:calc(var(--mu-row-height) - 2 * var(--mu-inset));padding:0}@media(hover:hover){.mu-segmented-item:hover:not([data-disabled]),.mu-segmented>.mu-toggle:hover:not([data-disabled]){color:var(--mu-ink);background:none}}.mu-segmented-item[data-active],.mu-segmented>.mu-toggle[data-pressed],.mu-segmented>.mu-toggle:active:not([data-disabled]){color:var(--mu-ink);background:none;box-shadow:none}.mu-segmented-item[data-disabled]{opacity:.45;cursor:not-allowed}.mu-tabs-root{display:flex;flex-direction:column;gap:var(--mu-space-4)}.mu-tabs-list{align-self:flex-start}.mu-tabs-panel{border-radius:var(--mu-radius-sm)}@media(prefers-reduced-motion:reduce){.mu-segmented-key{transition:none}}}@layer mu{.mu-toggle-group{display:inline-flex;align-items:center;gap:var(--mu-inset)}.mu-toggle-group>.mu-separator{align-self:center;height:max(var(--mu-space-2),calc(var(--mu-row-height) - 2 * var(--mu-space-2)));margin-inline:var(--mu-space-1)}}@layer mu{.mu-tooltip-popup{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;max-width:var(--mu-tooltip-width);padding:var(--mu-space-1) var(--mu-space-2);border-radius:var(--mu-radius-md);color:var(--mu-on-primary);background-color:var(--mu-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mu-tooltip-shortcut{opacity:.65}}@layer mu{.mu-popover-popup{display:flex;flex-direction:column;gap:var(--mu-space-3);box-sizing:border-box;width:var(--mu-popover-width);max-width:var(--available-width);padding:var(--mu-space-4);outline:0}.mu-popover-title{margin:0;color:var(--mu-ink)}.mu-popover-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-ink-muted)}}@layer mu{.mu-menu-popup{box-sizing:border-box;min-width:var(--mu-menu-width);max-height:var(--available-height);overflow-y:auto;padding:var(--mu-space-1);outline:0}.mu-menu-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-menu-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-menu-item>svg{color:var(--mu-ink-muted)}.mu-menu-item[data-highlighted],.mu-menu-submenu-trigger[data-popup-open]{background-color:var(--mu-hover)}.mu-menu-item[data-disabled]{opacity:.45}.mu-menu-item-danger,.mu-menu-item-danger>svg{color:var(--mu-danger)}.mu-menu-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-menu-shortcut{margin-inline-start:var(--mu-space-4);color:var(--mu-ink-muted)}.mu-menu-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2)}.mu-menu-indicator>svg{color:var(--mu-ink)}.mu-menu-chevron{margin-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-row-padding));color:var(--mu-ink-muted)}.mu-menu-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-menu-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}}@layer mu{.mu-select-trigger{justify-content:space-between;min-width:0;padding-inline-end:var(--mu-row-padding-icon);text-align:start}.mu-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mu-select-value[data-placeholder]{color:var(--mu-ink-muted);font-weight:400}.mu-select-icon{display:flex;flex:none;color:var(--mu-ink-muted)}.mu-select-trigger[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-key)}.mu-select-positioner{outline:0}.mu-select-popup{box-sizing:border-box;min-width:max(var(--mu-menu-width),var(--anchor-width));max-height:var(--available-height);padding:var(--mu-space-1);outline:0}.mu-select-list{overflow-y:auto;max-height:var(--available-height);scroll-padding-block:var(--mu-space-1);outline:0}.mu-select-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-select-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-select-item>svg{color:var(--mu-ink-muted)}.mu-select-item[data-highlighted]{background-color:var(--mu-hover)}.mu-select-item[data-disabled]{opacity:.45}.mu-select-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-select-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2);color:var(--mu-ink)}.mu-select-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-select-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}.mu-select-scroll-arrow{display:grid;place-items:center;height:var(--mu-space-4);color:var(--mu-ink-muted)}}@layer mu{.mu-dialog-backdrop{position:fixed;inset:0;z-index:var(--mu-layer-overlay);background-color:var(--mu-overlay);transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-dialog-backdrop[data-starting-style],.mu-dialog-backdrop[data-ending-style]{opacity:0}.mu-dialog-viewport{position:fixed;inset:0;z-index:var(--mu-layer-overlay);display:grid;place-items:safe center;box-sizing:border-box;padding:var(--mu-space-6) var(--mu-space-4);overflow-y:auto}.mu-dialog-popup{position:relative;display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;width:var(--mu-dialog-width);max-width:100%;padding:var(--mu-space-5);border-radius:var(--mu-radius-2xl);outline:0;transition:opacity var(--mu-duration-settle) var(--mu-ease-out),translate var(--mu-duration-settle) var(--mu-ease-out)}.mu-dialog-popup[data-starting-style],.mu-dialog-popup[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}.mu-dialog-popup:where(:has(>.mu-dialog-x))>.mu-dialog-title{padding-inline-end:var(--mu-space-6)}.mu-dialog-title{margin:0;color:var(--mu-ink)}.mu-dialog-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-ink-muted)}.mu-dialog-x{position:absolute;top:var(--mu-space-4);right:var(--mu-space-4)}.mu-dialog-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mu-space-2);margin-top:var(--mu-space-2)}@media(max-width:639.98px){.mu-dialog-sheet{place-items:end stretch;padding:var(--mu-space-6) 0 0}.mu-dialog-sheet>.mu-dialog-popup{width:100%;padding-bottom:max(var(--mu-space-5),env(safe-area-inset-bottom));border-end-start-radius:0;border-end-end-radius:0}.mu-dialog-sheet>.mu-dialog-popup[data-starting-style],.mu-dialog-sheet>.mu-dialog-popup[data-ending-style]{translate:0 var(--mu-space-6)}.mu-dialog-sheet .mu-dialog-footer{flex-direction:column-reverse}.mu-dialog-sheet .mu-dialog-footer>*{width:100%}}@media(prefers-reduced-motion:reduce){.mu-dialog-popup[data-starting-style],.mu-dialog-popup[data-ending-style],.mu-dialog-sheet>.mu-dialog-popup[data-starting-style],.mu-dialog-sheet>.mu-dialog-popup[data-ending-style]{translate:none}}}@layer mu{.mu-toast-viewport{position:fixed;right:var(--mu-space-6);bottom:var(--mu-space-6);z-index:var(--mu-layer-toast);width:var(--mu-toast-width);outline:0}@media(max-width:639.98px){.mu-toast-viewport{right:var(--mu-space-4);bottom:var(--mu-space-4);left:var(--mu-space-4);width:auto}}.mu-toast{--mu-row-gap: var(--mu-space-3);--peek: var(--mu-space-2);--scale: max(0, 1 - var(--toast-index) * .05);--shrink: calc(1 - var(--scale));--height: var(--toast-frontmost-height, var(--toast-height));--offset-y: calc(var(--toast-offset-y) * -1 - var(--toast-index) * var(--mu-row-gap) + var(--toast-swipe-movement-y));position:absolute;right:0;bottom:0;z-index:calc(var(--mu-layer-toast) - var(--toast-index));box-sizing:border-box;width:100%;height:var(--height);transform-origin:bottom center;translate:var(--toast-swipe-movement-x) calc(var(--toast-swipe-movement-y) - var(--toast-index) * var(--peek) - var(--shrink) * var(--height));scale:var(--scale);user-select:none;outline:0;transition:translate var(--mu-duration-settle) var(--mu-ease-settle),scale var(--mu-duration-settle) var(--mu-ease-settle),opacity var(--mu-duration-settle) var(--mu-ease-out),height var(--mu-duration-fade) var(--mu-ease-out)}.mu-toast[data-expanded]{height:var(--toast-height);translate:var(--toast-swipe-movement-x) var(--offset-y);scale:1}.mu-toast[data-starting-style],.mu-toast[data-ending-style]{translate:0 150%}.mu-toast[data-ending-style]{opacity:0}.mu-toast[data-ending-style][data-swipe-direction=up]{translate:0 calc(var(--toast-swipe-movement-y) - 150%)}.mu-toast[data-ending-style][data-swipe-direction=down]{translate:0 calc(var(--toast-swipe-movement-y) + 150%)}.mu-toast[data-ending-style][data-swipe-direction=left]{translate:calc(var(--toast-swipe-movement-x) - 150%) var(--offset-y)}.mu-toast[data-ending-style][data-swipe-direction=right]{translate:calc(var(--toast-swipe-movement-x) + 150%) var(--offset-y)}.mu-toast[data-limited]{opacity:0}.mu-toast:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-offset)}.mu-toast:after{content:"";position:absolute;top:100%;left:0;width:100%;height:calc(var(--mu-row-gap) + 1px)}.mu-toast-content{display:flex;align-items:flex-start;gap:var(--mu-space-3);box-sizing:border-box;height:100%;padding:var(--mu-space-3) var(--mu-space-3) var(--mu-space-3) var(--mu-space-4);overflow:hidden;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-content[data-behind]{opacity:0}.mu-toast-content[data-expanded]{opacity:1}.mu-toast-icon{margin-block:calc((var(--mu-row-height) - var(--mu-row-icon)) / 2);color:var(--mu-ink-muted)}.mu-toast-success .mu-toast-icon{color:var(--mu-success)}.mu-toast-warning .mu-toast-icon{color:var(--mu-warning)}.mu-toast-danger .mu-toast-icon{color:var(--mu-danger)}.mu-toast-text{display:flex;flex:1;flex-direction:column;min-width:0;padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2)}.mu-toast-title{margin:0;color:var(--mu-ink)}.mu-toast-description{margin:0;color:var(--mu-ink-muted)}.mu-toast-action,.mu-toast-close{margin-block:calc((var(--mu-control-md) - var(--mu-control-sm)) / 2)}@media(prefers-reduced-motion:reduce){.mu-toast{transition-property:opacity,height}.mu-toast[data-starting-style],.mu-toast[data-ending-style]{translate:var(--toast-swipe-movement-x) var(--offset-y)}}}@layer mu{.mu-input-root.mu-combobox-input-root{padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-space-1))}.mu-combobox-trigger{display:grid;place-items:center;width:calc(var(--mu-row-icon) + var(--mu-space-2));height:calc(var(--mu-row-icon) + var(--mu-space-2));margin:0;padding:0;border:0;border-radius:var(--mu-radius-sm);color:var(--mu-ink-muted);background:none;cursor:pointer}.mu-combobox-trigger:hover:not([data-disabled]){color:var(--mu-ink)}.mu-combobox-trigger[data-disabled]{cursor:not-allowed}.mu-combobox-popup{box-sizing:border-box;width:var(--anchor-width);min-width:var(--mu-menu-width);max-width:var(--available-width);outline:0}.mu-combobox-list{box-sizing:border-box;max-height:min(var(--mu-list-height),var(--available-height));overflow-y:auto;overscroll-behavior:contain;padding:var(--mu-space-1);scroll-padding-block:var(--mu-space-1);outline:0}.mu-combobox-list[data-empty]{padding:0}.mu-combobox-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-combobox-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-combobox-item>svg{color:var(--mu-ink-muted)}.mu-combobox-item[data-highlighted]{background-color:var(--mu-hover)}.mu-combobox-item[data-disabled]{opacity:.45}.mu-combobox-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-combobox-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2);color:var(--mu-ink)}.mu-combobox-empty:not(:empty){padding:var(--mu-space-3) var(--mu-space-4);color:var(--mu-ink-muted)}.mu-combobox-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-combobox-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}}@layer mu{.mu-button.mu-collapsible-trigger{margin-inline-start:calc(-1 * var(--mu-row-padding));padding-inline-end:var(--mu-row-padding-icon)}.mu-collapsible-chevron{color:var(--mu-ink-muted);transition:rotate var(--mu-duration-settle) var(--mu-ease-settle)}.mu-collapsible-trigger[data-panel-open]>.mu-collapsible-chevron{rotate:180deg}.mu-collapsible-panel{transition:opacity var(--mu-duration-fade) var(--mu-ease-out),translate var(--mu-duration-fade) var(--mu-ease-out)}.mu-collapsible-panel[data-starting-style],.mu-collapsible-panel[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}@media(prefers-reduced-motion:reduce){.mu-collapsible-chevron{transition:none}.mu-collapsible-panel[data-starting-style],.mu-collapsible-panel[data-ending-style]{translate:none}}}@layer mu{.mu-table-scroll{overflow-x:auto;max-width:100%}.mu-table{width:100%;border-collapse:collapse;color:var(--mu-ink);font-variant-numeric:tabular-nums;text-align:start}.mu-table-head,.mu-table-cell{padding:0 var(--mu-row-padding);text-align:start;vertical-align:middle}.mu-table-head{height:var(--mu-row-height);color:var(--mu-ink-muted);white-space:nowrap;border-bottom:1px solid var(--mu-line)}.mu-table-cell{padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2 + var(--mu-space-1))}.mu-table-body>.mu-table-row+.mu-table-row>.mu-table-cell{border-top:1px solid var(--mu-line)}.mu-table-body>.mu-table-row:hover>.mu-table-cell{background-color:var(--mu-hover)}.mu-table-cell>.mu-button{margin-block:calc((var(--mu-row-line-height) - var(--mu-row-height)) / 2);vertical-align:top}.mu-table-num{text-align:end}.mu-table-muted{color:var(--mu-ink-muted)}.mu-table-caption{caption-side:bottom;padding:var(--mu-space-2) var(--mu-row-padding) 0;color:var(--mu-ink-muted);text-align:start}}@layer mu{.mu-prose{color:var(--mu-ink);font-family:var(--mu-font-sans);font-size:var(--prose-fs);line-height:var(--prose-lh);font-weight:400;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mu-prose ::selection{background:var(--mu-selection)}.mu-prose :where(p,ul,ol,pre,blockquote,table,figure,img,video,hr){margin:0 0 var(--mu-space-3)}.mu-prose :where(h1,h2,h3,h4,h5,h6){margin:var(--mu-space-5) 0 var(--mu-space-2);font-family:var(--mu-font-display);font-weight:600;letter-spacing:0}.mu-prose>:first-child{margin-top:0}.mu-prose>:last-child{margin-bottom:0}.mu-prose h1{font-size:var(--prose-h1);line-height:var(--prose-h1-lh)}.mu-prose :where(h2,h3,h4,h5,h6){font-size:var(--prose-h2);line-height:var(--prose-h2-lh)}.mu-prose :where(strong,b){font-weight:600}.mu-prose del{color:var(--mu-ink-muted)}.mu-prose a{color:var(--mu-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;border-radius:var(--mu-radius-xs)}.mu-prose a:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-offset)}.mu-prose :where(ul,ol){padding-inline-start:var(--mu-space-6)}.mu-prose li+li{margin-top:var(--mu-space-1)}.mu-prose li>:where(ul,ol){margin:var(--mu-space-1) 0 0}.mu-prose li>p{margin:0}.mu-prose li::marker{color:var(--mu-ink-muted)}.mu-prose li:where(:has(>input[type=checkbox]:first-child)){position:relative;list-style:none}.mu-prose li>input[type=checkbox]:first-child{appearance:none;position:absolute;inset-inline-start:calc(-1 * (var(--mu-space-4) + var(--mu-space-2)));top:calc((var(--prose-lh) - var(--mu-space-4)) / 2);box-sizing:border-box;width:var(--mu-space-4);height:var(--mu-space-4);margin:0;border-radius:var(--mu-radius-sm);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer}.mu-prose li>input[type=checkbox]:first-child:disabled{cursor:default}.mu-prose li>input[type=checkbox]:first-child:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-offset)}.mu-prose li>input[type=checkbox]:first-child:checked{background-color:var(--mu-primary);box-shadow:none}.mu-prose li>input[type=checkbox]:first-child:checked:after{content:"";position:absolute;inset:var(--mu-inset);background-color:var(--mu-on-primary);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat}.mu-prose li:where(:has(>input[type=checkbox]:first-child:checked)){color:var(--mu-ink-muted);text-decoration:line-through}.mu-prose :where(code,kbd,samp,pre){font-family:var(--mu-font-mono);font-size:.875em}.mu-prose :not(pre)>code{padding:.1em .3em;border-radius:var(--mu-radius-xs);background-color:var(--mu-well)}.mu-prose pre{overflow-x:auto;padding:var(--mu-space-3) var(--mu-space-4);border-radius:var(--mu-radius-md);background-color:var(--mu-well);line-height:1.6}.mu-prose pre>code{font-size:inherit}.mu-prose blockquote{margin-inline:0;padding-inline-start:var(--mu-space-4);border-inline-start:var(--mu-inset) solid var(--mu-edge);color:var(--mu-ink-muted)}.mu-prose hr{height:1px;margin-block:var(--mu-space-5);border:0;background-color:var(--mu-line)}.mu-prose :where(img,video){display:block;max-width:100%;height:auto;border-radius:var(--mu-radius-lg)}.mu-prose table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-variant-numeric:tabular-nums}.mu-prose :where(th,td){padding:var(--mu-space-2) var(--mu-space-3);text-align:start;vertical-align:top}.mu-prose th{color:var(--mu-ink-muted);font-size:var(--prose-head);line-height:var(--prose-head-lh);font-weight:500;white-space:nowrap;border-bottom:1px solid var(--mu-line)}.mu-prose tr+tr>td{border-top:1px solid var(--mu-line)}.mu-prose-tag{padding:0 .25em;border-radius:var(--mu-radius-xs);color:var(--mu-ink-muted);background-color:var(--mu-well)}}
|
|
1
|
+
@layer mu{@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: 12px;--mu-row-line-height: 16px;--mu-row-field-font-size: 12px;--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: 1.25px;--mu-row-check-box: 14px}.mu-s-sm{--mu-row-height: var(--mu-control-sm);--mu-row-padding: var(--mu-space-2);--mu-row-padding-icon: 6px;--mu-row-font-size: 13px;--mu-row-line-height: 18px;--mu-row-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: 1.25px;--mu-row-check-box: 16px}.mu-s-md{--mu-row-height: var(--mu-control-md);--mu-row-padding: var(--mu-space-3);--mu-row-padding-icon: 10px;--mu-row-font-size: 14px;--mu-row-line-height: 20px;--mu-row-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: 1.5px;--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-recessed{background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-raised{background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),rgba(255,255,255,0) 60%);box-shadow:var(--mu-shadow-raised)}.mu-key{background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),rgba(255,255,255,0) 60%);box-shadow:var(--mu-shadow-key)}.mu-popup{background:var(--mu-surface);box-shadow:var(--mu-shadow-pop);border-radius:var(--mu-radius-xl)}.mu-positioner{z-index:var(--mu-layer-popup);outline:0}.mu-popup-motion{transition:opacity var(--mu-duration-fade) var(--mu-ease-out),translate var(--mu-duration-fade) var(--mu-ease-out)}.mu-popup-motion[data-starting-style],.mu-popup-motion[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}.mu-popup-motion[data-instant]{transition:none}@media(prefers-reduced-motion:reduce){.mu-popup-motion[data-starting-style],.mu-popup-motion[data-ending-style]{translate:none}}.mu-base{font-family:var(--mu-font-sans);font-size:var(--mu-row-font-size, 14px);line-height:var(--mu-row-line-height, 20px);font-weight:500;letter-spacing:0;color:var(--mu-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}.mu-base ::selection,.mu-base::selection{background:var(--mu-selection)}.mu-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.mu-focus:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-offset)}.mu-hit{position:relative}@media(pointer:coarse){.mu-hit:after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--mu-hit-area));height:max(100%,var(--mu-hit-area));transform:translate(-50%,-50%)}}.mu-icon,.mu-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, 1.5px)}.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: 1.25px}.mu-icon-sm{--mu-row-icon: var(--mu-icon-sm);--mu-row-icon-stroke: 1.25px}.mu-icon-md{--mu-row-icon: var(--mu-icon-md);--mu-row-icon-stroke: 1.5px}.mu-label-xs{font-family:var(--mu-font-sans);font-size:12px;line-height:16px;font-weight:500}.mu-caption{font-family:var(--mu-font-sans);font-size:13px;line-height:18px;font-weight:400}.mu-label-sm{font-family:var(--mu-font-sans);font-size:13px;line-height:18px;font-weight:500}.mu-body{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;font-weight:400}.mu-label{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;font-weight:500}.mu-title{font-family:var(--mu-font-display);font-size:16px;line-height:24px;font-weight:500;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;letter-spacing:-.02em;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 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-raised);white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;transition-property:background-color,box-shadow,color,translate;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-button:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-button:where(:has(>.mu-button-label+svg)){padding-inline-end:var(--mu-row-padding-icon)}.mu-button.mu-button-icon{width:var(--mu-row-height);padding:0}.mu-button-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@media(hover:hover){.mu-button:hover:not([data-disabled]){background-color:var(--mu-key-hover)}.mu-button-primary:hover:not([data-disabled]){background-color:var(--mu-primary-hover)}.mu-button-danger:hover:not([data-disabled]){background-color:var(--mu-danger-key);filter:brightness(1.08)}.mu-button-ghost:hover:not([data-disabled]){background-color:var(--mu-hover);color:var(--mu-ink)}}.mu-button:active:not([data-disabled]){translate:0 .5px;box-shadow:var(--mu-shadow-pressed)}.mu-button-primary{color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-button-danger{color:var(--mu-on-danger);background-color:var(--mu-danger-key)}.mu-button-ghost{color:var(--mu-ink-muted);background-color:transparent;background-image:none;box-shadow:none}.mu-button-ghost[data-popup-open]{background-color:var(--mu-hover);color:var(--mu-ink)}.mu-button-ghost:active:not([data-disabled]){translate:none;background-color:var(--mu-well);box-shadow:var(--mu-shadow-track)}.mu-button[data-disabled]:not([data-loading]){opacity:.45;cursor:not-allowed}.mu-button[data-loading]{cursor:progress}.mu-button[data-loading]>:not(.mu-spinner){opacity:0}.mu-button>.mu-spinner{position:absolute;inset:0;margin:auto}@media(prefers-reduced-motion:reduce){.mu-button:active:not([data-disabled]){translate:none}}}@layer mu{.mu-kbd{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:var(--mu-control-xs);height:var(--mu-control-xs);padding:0 var(--mu-space-1);border-radius:var(--mu-radius-sm);color:var(--mu-ink-muted);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-raised);white-space:nowrap}}@layer mu{.mu-separator{flex:none;align-self:stretch;margin:0;border:0;background-color:var(--mu-line)}.mu-separator[data-orientation=horizontal]{height:1px}.mu-separator[data-orientation=vertical]{width:1px}}@layer mu{.mu-badge{display:inline-flex;align-items:center;gap:var(--mu-space-1);box-sizing:border-box;height:var(--mu-control-xs);padding:0 var(--mu-row-padding);border-radius:var(--mu-radius-sm);white-space:nowrap;vertical-align:middle}.mu-badge-neutral{color:var(--mu-ink);background-color:var(--mu-well)}.mu-badge-primary{color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-badge-outline{color:var(--mu-ink-muted);box-shadow:inset 0 0 0 1px var(--mu-edge)}.mu-badge-success{color:var(--mu-success);background-color:var(--mu-success-soft)}.mu-badge-warning{color:var(--mu-warning);background-color:var(--mu-warning-soft)}.mu-badge-danger{color:var(--mu-danger);background-color:var(--mu-danger-soft)}}@layer mu{.mu-avatar-root{display:inline-flex;flex:none;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;width:var(--mu-row-height);height:var(--mu-row-height);border-radius:var(--mu-radius-full);color:var(--mu-ink-muted);background-color:var(--mu-well);vertical-align:middle;user-select:none}.mu-avatar-image{width:100%;height:100%;object-fit:cover}.mu-avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%}}@layer mu{.mu-link{color:var(--mu-accent);text-decoration:none;text-underline-offset:.2em;border-radius:var(--mu-radius-xs);cursor:pointer}.mu-link:hover,.mu-link:focus-visible,.mu-link-underline{text-decoration:underline}.mu-link-muted{color:var(--mu-ink-muted)}.mu-link-muted:hover{color:var(--mu-ink)}.mu-link>.mu-icon{display:inline-block;width:.85em;height:.85em;margin-inline-start:.1em;vertical-align:-.05em}}@layer mu{.mu-skeleton{box-sizing:border-box;width:100%;height:var(--mu-row-line-height);border-radius:var(--mu-radius-sm);background-color:var(--mu-well);background-image:linear-gradient(90deg,transparent 0%,var(--mu-hover) 50%,transparent 100%);background-size:200% 100%;background-repeat:no-repeat;animation:mu-shimmer var(--mu-duration-shimmer) ease-in-out infinite}.mu-skeleton-round{width:var(--mu-row-height);height:var(--mu-row-height);border-radius:var(--mu-radius-full)}@keyframes mu-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@media(prefers-reduced-motion:reduce){.mu-skeleton{animation:none;background-image:none}}}@layer mu{.mu-field-root{display:flex;flex-direction:column;gap:var(--mu-space-1);min-width:0}.mu-field-label{color:var(--mu-ink)}.mu-field-item{display:flex}.mu-field-label: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]{opacity:.45;cursor:not-allowed}.mu-field-description{margin:0;color:var(--mu-ink-muted)}.mu-field-root[data-invalid]>.mu-field-description{display:none}.mu-field-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:var(--mu-space-1);padding:0;color:var(--mu-ink)}}@layer mu{.mu-input-root{display:flex;align-items:center;gap:var(--mu-row-gap);box-sizing:border-box;width:100%;min-width:0;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-surface);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:text;transition:box-shadow var(--mu-duration-fade) var(--mu-ease-out)}.mu-input-root:where(:has(>.mu-input-prefix)){padding-inline-start:var(--mu-row-padding-icon)}.mu-input-root:where(:has(>.mu-input-suffix)){padding-inline-end:var(--mu-row-padding-icon)}@media(hover:hover){.mu-input-root:hover:not([data-disabled],[aria-disabled=true],:has(>[data-disabled]),:focus-within){box-shadow:inset 0 0 0 1px var(--mu-ink-muted),var(--mu-shadow-track)}}.mu-input-root:where(:has(>.mu-input:focus)),.mu-input-root:where(:not(:has(>.mu-input))):focus-within{box-shadow:inset 0 0 0 var(--mu-focus-edge-width) var(--mu-focus-edge),var(--mu-shadow-track);outline:var(--mu-focus-width) solid transparent;outline-offset:calc(-1 * var(--mu-focus-width))}.mu-input-root:is([data-invalid],[aria-invalid=true],:has(>[data-invalid])){box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-input-root:is([data-invalid],[aria-invalid=true],:has(>[data-invalid])):where(:has(>.mu-input:focus),:not(:has(>.mu-input)):focus-within){box-shadow:inset 0 0 0 var(--mu-focus-edge-width) var(--mu-danger),var(--mu-shadow-track)}.mu-input-root:is([data-disabled],[aria-disabled=true],:has(>[data-disabled])){opacity:.45;cursor:not-allowed}.mu-input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;outline:none;color:inherit;background:none;font:inherit;font-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-ink-muted);opacity:1}.mu-input[data-disabled]{cursor:not-allowed}.mu-input-prefix,.mu-input-suffix{display:flex;flex:none;align-items:center;gap:var(--mu-space-1);color:var(--mu-ink-muted)}}@layer mu{.mu-textarea{display:block;box-sizing:border-box;width:100%;min-height:var(--mu-row-height);margin:0;padding:calc((var(--mu-row-height) - var(--mu-row-field-line-height)) / 2) var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-surface);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);font-size:var(--mu-row-field-font-size);line-height:var(--mu-row-field-line-height);font-weight:400;resize:vertical;transition:box-shadow var(--mu-duration-fade) var(--mu-ease-out)}.mu-textarea::placeholder{color:var(--mu-ink-muted);opacity:1}@media(hover:hover){.mu-textarea:hover:not([data-disabled],[aria-disabled=true],:focus-within){box-shadow:inset 0 0 0 1px var(--mu-ink-muted),var(--mu-shadow-track)}}.mu-textarea:focus-within{box-shadow:inset 0 0 0 var(--mu-focus-edge-width) var(--mu-focus-edge),var(--mu-shadow-track);outline:var(--mu-focus-width) solid transparent;outline-offset:calc(-1 * var(--mu-focus-width))}.mu-textarea:is([data-invalid],[aria-invalid=true]){box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-textarea:is([data-invalid],[aria-invalid=true]):focus-within{box-shadow:inset 0 0 0 var(--mu-focus-edge-width) var(--mu-danger),var(--mu-shadow-track)}.mu-textarea:is([data-disabled],[aria-disabled=true]){opacity:.45;cursor:not-allowed}}@layer mu{.mu-checkbox{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--mu-row-check-box);height:var(--mu-row-check-box);border-radius:var(--mu-radius-sm);color:var(--mu-on-primary);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition-property:background-color,box-shadow,scale;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-checkbox[data-checked],.mu-checkbox[data-indeterminate]{background-color:var(--mu-primary);box-shadow:none}.mu-checkbox[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-checkbox:active:not([data-disabled],[data-readonly]){scale:.94}.mu-checkbox[data-disabled]{opacity:.45;cursor:not-allowed}.mu-checkbox-indicator{display:flex;transition:opacity var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press),scale var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press)}.mu-checkbox-indicator[data-starting-style],.mu-checkbox-indicator[data-ending-style]{opacity:0;scale:.6}.mu-checkbox-indicator>svg{width:calc(var(--mu-row-check-box) - 2 * var(--mu-inset));height:calc(var(--mu-row-check-box) - 2 * var(--mu-inset));stroke-width:2}.mu-checkbox-indicator>svg *{vector-effect:non-scaling-stroke}@media(prefers-reduced-motion:reduce){.mu-checkbox:active:not([data-disabled],[data-readonly]){scale:none}.mu-checkbox-indicator[data-starting-style],.mu-checkbox-indicator[data-ending-style]{scale:none}}}@layer mu{.mu-switch{--switch-h: calc(var(--mu-row-check-box) + var(--mu-inset));--switch-w: calc(var(--switch-h) * 1.7);--knob: calc(var(--switch-h) - 2 * var(--mu-inset));position:relative;display:inline-flex;flex:none;align-items:center;box-sizing:border-box;width:var(--switch-w);height:var(--switch-h);padding:var(--mu-inset);border-radius:var(--mu-radius-full);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition:background-color var(--mu-duration-settle) var(--mu-ease-settle),box-shadow var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch[data-checked]{background-color:var(--mu-primary);box-shadow:inset 0 0 0 1px var(--mu-primary)}.mu-switch[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-switch[data-disabled]{opacity:.45;cursor:not-allowed}.mu-switch-thumb{display:block;width:var(--knob);height:var(--knob);border-radius:var(--mu-radius-full);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-key);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),scale var(--mu-duration-press) var(--mu-ease-out),background-color var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch-thumb[data-checked]{translate:calc(var(--switch-w) - var(--switch-h)) 0;background-color:var(--mu-on-primary)}.mu-switch:active:not([data-disabled],[data-readonly])>.mu-switch-thumb{scale:1.1}@media(prefers-reduced-motion:reduce){.mu-switch-thumb{transition-property:background-color}.mu-switch:active:not([data-disabled],[data-readonly])>.mu-switch-thumb{scale:none}}}@layer mu{.mu-radio-group{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mu-space-3)}.mu-radio-group[data-orientation=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--mu-space-3) var(--mu-space-4)}.mu-radio-group[data-orientation=horizontal]>.mu-fieldset-legend{flex-basis:100%}.mu-radio{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--mu-row-check-box);height:var(--mu-row-check-box);border-radius:var(--mu-radius-full);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition-property:background-color,box-shadow,scale;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-radio[data-checked]{background-color:var(--mu-primary);box-shadow:none}.mu-radio[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-radio:active:not([data-disabled],[data-readonly]){scale:.94}.mu-radio[data-disabled]{opacity:.45;cursor:not-allowed}.mu-radio-indicator{width:calc(var(--mu-row-check-box) / 2.5);height:calc(var(--mu-row-check-box) / 2.5);border-radius:var(--mu-radius-full);background-color:var(--mu-on-primary);transition:opacity var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press),scale var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press)}.mu-radio-indicator[data-starting-style],.mu-radio-indicator[data-ending-style]{opacity:0;scale:.4}@media(prefers-reduced-motion:reduce){.mu-radio:active:not([data-disabled],[data-readonly]){scale:none}.mu-radio-indicator[data-starting-style],.mu-radio-indicator[data-ending-style]{scale:none}}}@layer mu{.mu-toggle{position:relative;display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;min-width:0;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink-muted);background-color:transparent;white-space:nowrap;cursor:pointer;user-select:none;transition-property:background-color,box-shadow,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-toggle:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-toggle.mu-toggle-icon{flex:none;width:var(--mu-row-height);padding:0}.mu-toggle-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-toggle>svg{flex:none}@media(hover:hover){.mu-toggle:hover:not([data-disabled]){color:var(--mu-ink);background-color:var(--mu-hover)}}.mu-toggle[data-pressed],.mu-toggle:active:not([data-disabled]){color:var(--mu-ink);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-toggle[data-disabled]{opacity:.45;cursor:not-allowed}}@layer mu{.mu-segmented{position:relative;display:inline-flex;align-items:stretch;gap:0;box-sizing:border-box;height:var(--mu-row-height);padding:var(--mu-inset);border-radius:var(--mu-row-radius);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-segmented-key{position:absolute;top:var(--mu-inset);left:0;width:var(--key-width);height:calc(var(--mu-row-height) - 2 * var(--mu-inset));translate:var(--key-left) 0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-key);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),width var(--mu-duration-settle) var(--mu-ease-settle)}.mu-toggle-group.mu-segmented:not([data-keyed])>.mu-segmented-key{display:none}.mu-tabs-indicator{--key-left: var(--active-tab-left);--key-width: var(--active-tab-width)}.mu-segmented-item,.mu-segmented>.mu-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;height:100%;margin:0;padding:0 calc(var(--mu-row-padding) - var(--mu-inset));border:0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));color:var(--mu-ink-muted);background:none;box-shadow:none;font:inherit;white-space:nowrap;cursor:pointer;user-select:none;transition:color var(--mu-duration-fade) var(--mu-ease-out)}.mu-segmented>.mu-toggle.mu-toggle-icon{width:calc(var(--mu-row-height) - 2 * var(--mu-inset));padding:0}@media(hover:hover){.mu-segmented-item:hover:not([data-disabled]),.mu-segmented>.mu-toggle:hover:not([data-disabled]){color:var(--mu-ink);background:none}}.mu-segmented-item[data-active],.mu-segmented>.mu-toggle[data-pressed],.mu-segmented>.mu-toggle:active:not([data-disabled]){color:var(--mu-ink);background:none;box-shadow:none}.mu-segmented-item[data-disabled]{opacity:.45;cursor:not-allowed}.mu-tabs-root{display:flex;flex-direction:column;gap:var(--mu-space-4)}.mu-tabs-list{align-self:flex-start}.mu-tabs-panel{border-radius:var(--mu-radius-sm)}@media(prefers-reduced-motion:reduce){.mu-segmented-key{transition:none}}}@layer mu{.mu-toggle-group{display:inline-flex;align-items:center;gap:var(--mu-inset);box-sizing:border-box;min-width:0;max-width:100%}.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 0}}@layer mu{.mu-tooltip-popup{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;max-width:var(--mu-tooltip-width);padding:var(--mu-space-1) var(--mu-space-2);border-radius:var(--mu-radius-md);color:var(--mu-on-primary);background-color:var(--mu-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mu-tooltip-shortcut{opacity:.65}}@layer mu{.mu-popover-popup{display:flex;flex-direction:column;gap:var(--mu-space-3);box-sizing:border-box;width:var(--mu-popover-width);max-width:var(--available-width);padding:var(--mu-space-4);outline:0}.mu-popover-title{margin:0;color:var(--mu-ink)}.mu-popover-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-ink-muted)}.mu-popover-list{gap:0;padding:var(--mu-space-1)}.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:var(--mu-menu-width);max-height:var(--available-height);overflow-y:auto;padding:var(--mu-space-1);outline:0}.mu-menu-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;width:100%;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);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-ink-muted)}.mu-menu-item[data-highlighted],.mu-menu-submenu-trigger[data-popup-open]{background-color:var(--mu-hover)}.mu-menu-item[data-disabled]{opacity:.45}.mu-menu-item-danger,.mu-menu-item-danger>svg{color:var(--mu-danger)}.mu-menu-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-menu-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-ink-muted);white-space:normal}.mu-menu-shortcut{margin-inline-start:var(--mu-space-4);color:var(--mu-ink-muted)}.mu-menu-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2)}.mu-menu-indicator>svg{color:var(--mu-ink)}.mu-menu-chevron{margin-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-row-padding));color:var(--mu-ink-muted)}.mu-menu-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-menu-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}}@layer mu{.mu-select-trigger{justify-content:space-between;min-width:0;padding-inline-end:var(--mu-row-padding-icon);text-align:start}.mu-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mu-select-value[data-placeholder]{color:var(--mu-ink-muted);font-weight:400}.mu-select-icon{display:flex;flex:none;color:var(--mu-ink-muted)}.mu-select-trigger.mu-button-ghost:not([data-disabled]){color:var(--mu-ink)}.mu-select-trigger[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-key)}.mu-select-positioner{outline:0}.mu-select-popup{box-sizing:border-box;min-width:max(var(--mu-menu-width),var(--anchor-width));max-height:var(--available-height);padding:var(--mu-space-1);outline:0}.mu-select-list{overflow-y:auto;max-height:var(--available-height);scroll-padding-block:var(--mu-space-1);outline:0}.mu-select-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-select-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-select-item>svg{color:var(--mu-ink-muted)}.mu-select-item[data-highlighted]{background-color:var(--mu-hover)}.mu-select-item[data-disabled]{opacity:.45}.mu-select-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-select-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2);color:var(--mu-ink)}.mu-select-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-select-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}.mu-select-scroll-arrow{display:grid;place-items:center;height:var(--mu-space-4);color:var(--mu-ink-muted)}}@layer mu{.mu-dialog-backdrop{position:fixed;inset:0;z-index:var(--mu-layer-overlay);background-color:var(--mu-overlay);transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-dialog-backdrop[data-starting-style],.mu-dialog-backdrop[data-ending-style]{opacity:0}.mu-dialog-viewport{position:fixed;inset:0;z-index:var(--mu-layer-overlay);display:grid;place-items:safe center;box-sizing:border-box;padding:var(--mu-space-6) var(--mu-space-4);overflow-y:auto}.mu-dialog-popup{position:relative;display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;width:var(--mu-dialog-width);max-width:100%;padding:var(--mu-space-5);border-radius:var(--mu-radius-2xl);outline:0;transition:opacity var(--mu-duration-settle) var(--mu-ease-out),translate var(--mu-duration-settle) var(--mu-ease-out)}.mu-dialog-popup[data-starting-style],.mu-dialog-popup[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}.mu-dialog-popup: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-radius:0}.mu-dialog-title{margin:0;color:var(--mu-ink)}.mu-dialog-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-ink-muted)}.mu-dialog-x{position:absolute;top:var(--mu-space-4);right:var(--mu-space-4)}.mu-dialog-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mu-space-2);margin-top:var(--mu-space-2)}@media(max-width:639.98px){.mu-dialog-sheet{place-items:end stretch;padding:var(--mu-space-6) 0 0}.mu-dialog-sheet>.mu-dialog-popup{width:100%;padding-bottom:max(var(--mu-space-5),env(safe-area-inset-bottom));border-end-start-radius:0;border-end-end-radius:0}.mu-dialog-sheet>.mu-dialog-popup[data-starting-style],.mu-dialog-sheet>.mu-dialog-popup[data-ending-style]{translate:0 var(--mu-space-6)}.mu-dialog-sheet>.mu-dialog-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(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);box-shadow:var(--mu-shadow-pop);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%}.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-ink)}.mu-drawer-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-ink-muted)}.mu-drawer-x{position:absolute;top:var(--mu-space-4);inset-inline-end:var(--mu-space-4)}@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-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:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-offset)}.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:var(--mu-space-3) var(--mu-space-3) var(--mu-space-3) var(--mu-space-4);overflow:hidden;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-content[data-behind]{opacity:0}.mu-toast-content[data-expanded]{opacity:1}.mu-toast-icon{margin-block:calc((var(--mu-row-height) - var(--mu-row-icon)) / 2);color:var(--mu-ink-muted)}.mu-toast-success .mu-toast-icon{color:var(--mu-success)}.mu-toast-warning .mu-toast-icon{color:var(--mu-warning)}.mu-toast-danger .mu-toast-icon{color:var(--mu-danger)}.mu-toast-text{display:flex;flex:1;flex-direction:column;min-width:0;padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2)}.mu-toast-title{margin:0;color:var(--mu-ink)}.mu-toast-description{margin:0;color:var(--mu-ink-muted)}.mu-toast-action,.mu-toast-close{margin-block:calc((var(--mu-control-md) - var(--mu-control-sm)) / 2)}@media(prefers-reduced-motion:reduce){.mu-toast{transition-property:opacity,height}.mu-toast[data-starting-style],.mu-toast[data-ending-style]{translate:var(--toast-swipe-movement-x) var(--offset-y)}}}@layer mu{.mu-input-root.mu-combobox-input-root{padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-space-1))}.mu-combobox-trigger{display:grid;place-items:center;width:calc(var(--mu-row-icon) + var(--mu-space-2));height:calc(var(--mu-row-icon) + var(--mu-space-2));margin:0;padding:0;border:0;border-radius:var(--mu-radius-sm);color:var(--mu-ink-muted);background:none;cursor:pointer}.mu-combobox-trigger:hover:not([data-disabled]){color:var(--mu-ink)}.mu-combobox-trigger[data-disabled]{cursor:not-allowed}.mu-combobox-popup{box-sizing:border-box;width:var(--anchor-width);min-width:var(--mu-menu-width);max-width:var(--available-width);outline:0}.mu-combobox-list{box-sizing:border-box;max-height:min(var(--mu-list-height),var(--available-height));overflow-y:auto;overscroll-behavior:contain;padding:var(--mu-space-1);scroll-padding-block:var(--mu-space-1);outline:0}.mu-combobox-list[data-empty]{padding:0}.mu-combobox-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-combobox-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-combobox-item>svg{color:var(--mu-ink-muted)}.mu-combobox-item[data-highlighted]{background-color:var(--mu-hover)}.mu-combobox-item[data-disabled]{opacity:.45}.mu-combobox-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-combobox-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2);color:var(--mu-ink)}.mu-combobox-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-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);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-combobox-empty:not(:empty){padding:var(--mu-space-3) var(--mu-space-4);color:var(--mu-ink-muted)}.mu-combobox-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-combobox-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}}@layer mu{.mu-button.mu-collapsible-trigger{margin-inline-start:calc(-1 * var(--mu-row-padding));padding-inline-end:var(--mu-row-padding-icon)}.mu-collapsible-chevron{color:var(--mu-ink-muted);transition:rotate var(--mu-duration-settle) var(--mu-ease-settle)}.mu-collapsible-trigger[data-panel-open]>.mu-collapsible-chevron{rotate:180deg}.mu-collapsible-panel{transition:opacity var(--mu-duration-fade) var(--mu-ease-out),translate var(--mu-duration-fade) var(--mu-ease-out)}.mu-collapsible-panel[data-starting-style],.mu-collapsible-panel[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}@media(prefers-reduced-motion:reduce){.mu-collapsible-chevron{transition:none}.mu-collapsible-panel[data-starting-style],.mu-collapsible-panel[data-ending-style]{translate:none}}}@layer mu{.mu-table-scroll{overflow-x:auto;max-width:100%}.mu-table-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-ink);font-variant-numeric:tabular-nums;text-align:start}.mu-table-head,.mu-table-cell{padding:0 var(--mu-row-padding);text-align:start;vertical-align:middle}.mu-table-head{height:var(--mu-row-height);color:var(--mu-ink-muted);white-space:nowrap;border-bottom:1px solid var(--mu-line)}.mu-table-cell{padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2 + var(--mu-space-1))}.mu-table-body>.mu-table-row+.mu-table-row>.mu-table-cell{border-top:1px solid var(--mu-line)}.mu-table-body>.mu-table-row:hover>.mu-table-cell{background-color:var(--mu-hover)}.mu-table-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-ink-muted)}.mu-table-caption{caption-side:bottom;padding:var(--mu-space-2) var(--mu-row-padding) 0;color:var(--mu-ink-muted);text-align:start}.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-ink);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:var(--list-pad-block) var(--list-pad-inline);border:0;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:active:not(:disabled){background-color:var(--mu-hover)}.mu-list-item-button:disabled{opacity:.45;cursor:not-allowed}@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-ink)}.mu-form-title{margin:0;color:var(--mu-ink)}.mu-form-description{margin:calc(-1 * var(--mu-space-3)) 0 0;color:var(--mu-ink-muted)}.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-ink);font-family:var(--mu-font-sans);font-size:var(--prose-fs);line-height:var(--prose-lh);font-weight:400;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mu-prose ::selection{background:var(--mu-selection)}.mu-prose :where(p,ul,ol,pre,blockquote,table,figure,img,video,hr){margin:0 0 var(--mu-space-3)}.mu-prose :where(h1,h2,h3,h4,h5,h6){margin:var(--mu-space-5) 0 var(--mu-space-2);font-family:var(--mu-font-display);font-weight:600;letter-spacing:0;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-ink-muted)}.mu-prose a{color:var(--mu-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;border-radius:var(--mu-radius-xs)}.mu-prose a:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-offset)}.mu-prose :where(ul,ol){padding-inline-start:var(--mu-space-6)}.mu-prose li+li{margin-top:var(--mu-space-1)}.mu-prose li>:where(ul,ol){margin:var(--mu-space-1) 0 0}.mu-prose li>p{margin:0}.mu-prose li::marker{color:var(--mu-ink-muted)}.mu-prose li:where(:has(>input[type=checkbox]:first-child)){position:relative;list-style:none}.mu-prose li>input[type=checkbox]:first-child{appearance:none;position:absolute;inset-inline-start:calc(-1 * (var(--mu-space-4) + var(--mu-space-2)));top:calc((var(--prose-lh) - var(--mu-space-4)) / 2);box-sizing:border-box;width:var(--mu-space-4);height:var(--mu-space-4);margin:0;border-radius:var(--mu-radius-sm);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer}.mu-prose li>input[type=checkbox]:first-child:disabled{cursor:default}.mu-prose li>input[type=checkbox]:first-child:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-offset)}.mu-prose li>input[type=checkbox]:first-child:checked{background-color:var(--mu-primary);box-shadow:none}.mu-prose li>input[type=checkbox]:first-child:checked:after{content:"";position:absolute;inset:var(--mu-inset);background-color:var(--mu-on-primary);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat}.mu-prose li:where(:has(>input[type=checkbox]:first-child:checked)){color:var(--mu-ink-muted);text-decoration:line-through}.mu-prose :where(code,kbd,samp,pre){font-family:var(--mu-font-mono);font-size:.875em}.mu-prose :not(pre)>code{padding:.1em .3em;border-radius:var(--mu-radius-xs);background-color:var(--mu-well)}.mu-prose pre{overflow-x:auto;padding:var(--mu-space-3) var(--mu-space-4);border-radius:var(--mu-radius-md);background-color:var(--mu-well);line-height:1.6}.mu-prose pre>code{font-size:inherit}.mu-prose blockquote{margin-inline:0;padding-inline-start:var(--mu-space-4);border-inline-start:var(--mu-inset) solid var(--mu-edge);color:var(--mu-ink-muted)}.mu-prose hr{height:1px;margin-block:var(--mu-space-5);border:0;background-color:var(--mu-line)}.mu-prose :where(img,video){display:block;max-width:100%;height:auto;border-radius:var(--mu-radius-lg)}.mu-prose table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-variant-numeric:tabular-nums}.mu-prose :where(th,td){padding:var(--mu-space-2) var(--mu-space-3);text-align:start;vertical-align:top}.mu-prose th{color:var(--mu-ink-muted);font-size:var(--prose-head);line-height:var(--prose-head-lh);font-weight:500;white-space:nowrap;border-bottom:1px solid var(--mu-line)}.mu-prose tr+tr>td{border-top:1px solid var(--mu-line)}.mu-prose-tag{padding:0 .25em;border-radius:var(--mu-radius-xs);color:var(--mu-ink-muted);background-color:var(--mu-well)}}
|
package/dist/tokens.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer mu{:where(:root,:host,.mu-root:not([data-theme] *)),[data-theme=light]{color-scheme:light;--mu-canvas: #fafafa;--mu-surface: #ffffff;--mu-well: #e4e4e4;--mu-hover: #ececec;--mu-key: #ffffff;--mu-key-hover: #fafafa;--mu-key-sheen: rgba(255,255,255,.18);--mu-edge: #d0d0d0;--mu-line: #dedede;--mu-overlay: rgba(0,0,0,.32);--mu-ink: #1a1a1a;--mu-ink-muted: #5e5e5e;--mu-primary: #1a1a1a;--mu-primary-hover: #333333;--mu-on-primary: #ffffff;--mu-accent: oklch(.5 .13 255);--mu-selection: rgba(40,99,171,.18);--mu-success: oklch(.52 .13 150);--mu-success-soft: #e9f4ec;--mu-warning: oklch(.5 .11 70);--mu-warning-soft: #fbf1df;--mu-danger: oklch(.53 .19 27);--mu-danger-key: oklch(.53 .19 27);--mu-danger-soft: #fbeaea;--mu-on-danger: #ffffff;--mu-focus: var(--mu-primary);--mu-focus-edge: var(--mu-ink);--mu-shadow-track: inset 0 1px 2px rgba(0,0,0,.1);--mu-shadow-key: 0 1px 2px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.05);--mu-shadow-raised: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.12);--mu-shadow-pressed: inset 0 1px 3px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.12);--mu-shadow-pop: 0 8px 24px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8)}[data-theme=dark]{--mu-canvas: #0f0f0f;--mu-surface: #1a1a1a;--mu-well: #252525;--mu-hover: #252525;--mu-key: #343434;--mu-key-hover: #3c3c3c;--mu-key-sheen: rgba(255,255,255,.08);--mu-edge: #343434;--mu-line: #252525;--mu-overlay: rgba(0,0,0,.6);--mu-ink: #ededed;--mu-ink-muted: #adadad;--mu-primary: #e6e6e6;--mu-primary-hover: #ffffff;--mu-on-primary: #0f0f0f;--mu-accent: oklch(.78 .11 255);--mu-selection: rgba(135,186,253,.28);--mu-success: oklch(.78 .14 150);--mu-success-soft: #14261a;--mu-warning: oklch(.8 .13 75);--mu-warning-soft: #2a2112;--mu-danger: oklch(.72 .16 25);--mu-danger-key: oklch(.55 .17 25);--mu-danger-soft: #2c1616;--mu-on-danger: #ffffff;--mu-focus: var(--mu-primary);--mu-focus-edge: var(--mu-ink);--mu-shadow-track: inset 0 1px 2px rgba(0,0,0,.55), inset 0 -.5px 0 rgba(255,255,255,.06);--mu-shadow-key: 0 1px 2px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);--mu-shadow-raised: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);--mu-shadow-pressed: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 .5px rgba(0,0,0,.6);--mu-shadow-pop: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.06);color-scheme:dark}:where(:root,:host,.mu-root){--mu-space-1: 4px;--mu-space-2: 8px;--mu-space-3: 12px;--mu-space-4: 16px;--mu-space-5: 20px;--mu-space-6: 24px;--mu-space-8: 32px;--mu-space-12: 48px;--mu-space-16: 64px;--mu-radius-xs: 2px;--mu-radius-sm: 4px;--mu-radius-md: 6px;--mu-radius-lg: 8px;--mu-radius-xl: 12px;--mu-radius-2xl: 16px;--mu-radius-full: 9999px;--mu-control-xs: 20px;--mu-control-sm: 24px;--mu-control-md: 32px;--mu-inset: 2px;--mu-hit-area: 44px;--mu-focus-width: 2px;--mu-focus-offset: 1px;--mu-focus-edge-width: 1.5px;--mu-icon-xs: 12px;--mu-icon-sm: 14px;--mu-icon-md: 16px;--mu-content-width: 720px;--mu-sidebar-width: 240px;--mu-menu-width: 200px;--mu-list-height: 240px;--mu-popover-width: 280px;--mu-tooltip-width: 240px;--mu-toast-width: 360px;--mu-dialog-width: 440px;--mu-layer-popup: 50;--mu-layer-overlay: 50;--mu-layer-toast: 60;--mu-duration-press: 80ms;--mu-duration-settle: .15s;--mu-duration-fade: .1s;--mu-duration-spin: .8s;--mu-duration-shimmer: 1.4s;--mu-ease-settle: cubic-bezier(.2, .9, .3, 1);--mu-ease-out: cubic-bezier(.2, 0, 0, 1);--mu-font-sans:
|
|
1
|
+
@layer mu{:where(:root,:host,.mu-root:not([data-theme] *)),[data-theme=light]{color-scheme:light;--mu-canvas: #fafafa;--mu-surface: #ffffff;--mu-well: #e4e4e4;--mu-hover: #ececec;--mu-key: #ffffff;--mu-key-hover: #fafafa;--mu-key-sheen: rgba(255,255,255,.18);--mu-edge: #d0d0d0;--mu-line: #dedede;--mu-overlay: rgba(0,0,0,.32);--mu-ink: #1a1a1a;--mu-ink-muted: #5e5e5e;--mu-primary: #1a1a1a;--mu-primary-hover: #333333;--mu-on-primary: #ffffff;--mu-accent: oklch(.5 .13 255);--mu-selection: rgba(40,99,171,.18);--mu-success: oklch(.52 .13 150);--mu-success-soft: #e9f4ec;--mu-warning: oklch(.5 .11 70);--mu-warning-soft: #fbf1df;--mu-danger: oklch(.53 .19 27);--mu-danger-key: oklch(.53 .19 27);--mu-danger-soft: #fbeaea;--mu-on-danger: #ffffff;--mu-focus: var(--mu-primary);--mu-focus-edge: var(--mu-ink);--mu-shadow-track: inset 0 1px 2px rgba(0,0,0,.1);--mu-shadow-key: 0 1px 2px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.05);--mu-shadow-raised: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.12);--mu-shadow-pressed: inset 0 1px 3px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.12);--mu-shadow-pop: 0 8px 24px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8)}[data-theme=dark]{--mu-canvas: #0f0f0f;--mu-surface: #1a1a1a;--mu-well: #252525;--mu-hover: #252525;--mu-key: #343434;--mu-key-hover: #3c3c3c;--mu-key-sheen: rgba(255,255,255,.08);--mu-edge: #343434;--mu-line: #252525;--mu-overlay: rgba(0,0,0,.6);--mu-ink: #ededed;--mu-ink-muted: #adadad;--mu-primary: #e6e6e6;--mu-primary-hover: #ffffff;--mu-on-primary: #0f0f0f;--mu-accent: oklch(.78 .11 255);--mu-selection: rgba(135,186,253,.28);--mu-success: oklch(.78 .14 150);--mu-success-soft: #14261a;--mu-warning: oklch(.8 .13 75);--mu-warning-soft: #2a2112;--mu-danger: oklch(.72 .16 25);--mu-danger-key: oklch(.55 .17 25);--mu-danger-soft: #2c1616;--mu-on-danger: #ffffff;--mu-focus: var(--mu-primary);--mu-focus-edge: var(--mu-ink);--mu-shadow-track: inset 0 1px 2px rgba(0,0,0,.55), inset 0 -.5px 0 rgba(255,255,255,.06);--mu-shadow-key: 0 1px 2px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);--mu-shadow-raised: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);--mu-shadow-pressed: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 .5px rgba(0,0,0,.6);--mu-shadow-pop: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.06);color-scheme:dark}:where(:root,:host,.mu-root){--mu-space-1: 4px;--mu-space-2: 8px;--mu-space-3: 12px;--mu-space-4: 16px;--mu-space-5: 20px;--mu-space-6: 24px;--mu-space-8: 32px;--mu-space-12: 48px;--mu-space-16: 64px;--mu-radius-xs: 2px;--mu-radius-sm: 4px;--mu-radius-md: 6px;--mu-radius-lg: 8px;--mu-radius-xl: 12px;--mu-radius-2xl: 16px;--mu-radius-full: 9999px;--mu-control-xs: 20px;--mu-control-sm: 24px;--mu-control-md: 32px;--mu-control-compact: 28px;--mu-inset: 2px;--mu-hit-area: 44px;--mu-focus-width: 2px;--mu-focus-offset: 1px;--mu-focus-edge-width: 1.5px;--mu-icon-xs: 12px;--mu-icon-sm: 14px;--mu-icon-md: 16px;--mu-content-width: 720px;--mu-sidebar-width: 240px;--mu-menu-width: 200px;--mu-list-height: 240px;--mu-popover-width: 280px;--mu-tooltip-width: 240px;--mu-toast-width: 360px;--mu-dialog-width: 440px;--mu-drawer-width: 320px;--mu-layer-popup: 50;--mu-layer-overlay: 50;--mu-layer-toast: 60;--mu-duration-press: 80ms;--mu-duration-settle: .15s;--mu-duration-fade: .1s;--mu-duration-spin: .8s;--mu-duration-shimmer: 1.4s;--mu-ease-settle: cubic-bezier(.2, .9, .3, 1);--mu-ease-out: cubic-bezier(.2, 0, 0, 1);--mu-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI (mu)", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI (mu)", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useRender } from '@base-ui/react/use-render';
|
|
2
2
|
import type { IconElement, Tone } from '../../types.js';
|
|
3
3
|
export interface BadgeProps extends useRender.ComponentProps<'span'> {
|
|
4
|
-
/** A status tone,
|
|
5
|
-
tone?: Tone | 'outline';
|
|
4
|
+
/** A status tone, `outline` for a quiet label such as visibility, or `primary` (ink) for the one label that should stand out, such as New. */
|
|
5
|
+
tone?: Tone | 'outline' | 'primary';
|
|
6
6
|
/** A Lucide element before the text, drawn at 12px. */
|
|
7
7
|
icon?: IconElement;
|
|
8
8
|
}
|