@itwin/itwinui-react
Advanced tools
Comparing version
import * as React from "react"; | ||
import type { PopoverStore } from "@ariakit/react/popover"; | ||
/** | ||
* SSR-safe wrapper over `React.useLayoutEffect`. | ||
* | ||
* @see https://fb.me/react-uselayouteffect-ssr | ||
* | ||
* @private | ||
*/ | ||
export declare const useLayoutEffect: typeof React.useLayoutEffect; | ||
/** | ||
* Wrapper over `useState` that always gives preference to the | ||
@@ -5,0 +13,0 @@ * controlled state (which often comes from a prop). |
import * as React from "react"; | ||
import { useStoreState } from "@ariakit/react/store"; | ||
import { supportsPopover } from "./~utils.js"; | ||
import { isBrowser, supportsPopover } from "./~utils.js"; | ||
const useLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect; | ||
function useControlledState(initialValue, controlledState, setControlledState) { | ||
@@ -92,2 +93,3 @@ const [uncontrolledState, setUncontrolledState] = React.useState(initialValue); | ||
useLatestRef, | ||
useLayoutEffect, | ||
useMergedRefs, | ||
@@ -94,0 +96,0 @@ usePopoverApi, |
@@ -6,2 +6,8 @@ import * as React from "react"; | ||
export declare const supportsPopover: boolean; | ||
export declare function isDocument(node?: Node): node is Document; | ||
export declare function getOwnerDocument(node?: Node | null): Document | null; | ||
/** "Parses" a string of HTML into a DocumentFragment. */ | ||
export declare function parseDOM(htmlString: string, { ownerDocument }: { | ||
ownerDocument: Document; | ||
}): DocumentFragment; | ||
/** | ||
@@ -34,2 +40,4 @@ * Wrapper over `React.forwardRef` which allows refs to be loosely typed as `HTMLElement`. | ||
export type AnyString = string & {}; | ||
/** Returns the value unchanged. */ | ||
export declare const identity: <T>(value: T) => T; | ||
export {}; |
import * as React from "react"; | ||
const isBrowser = typeof document !== "undefined"; | ||
const supportsPopover = isBrowser && "popover" in HTMLElement.prototype; | ||
function isDocument(node) { | ||
return node?.nodeType === Node.DOCUMENT_NODE; | ||
} | ||
function getOwnerDocument(node) { | ||
if (!node) return null; | ||
return (isDocument(node) ? node : node.ownerDocument) || null; | ||
} | ||
function parseDOM(htmlString, { ownerDocument }) { | ||
const template = ownerDocument.createElement("template"); | ||
template.innerHTML = htmlString; | ||
return template.content; | ||
} | ||
const forwardRef = React.forwardRef; | ||
const identity = (value) => value; | ||
export { | ||
forwardRef, | ||
getOwnerDocument, | ||
identity, | ||
isBrowser, | ||
isDocument, | ||
parseDOM, | ||
supportsPopover | ||
}; |
@@ -11,3 +11,3 @@ import { type BaseProps } from "./~utils.js"; | ||
*/ | ||
tone?: "neutral" | "info" | "positive" | "attention" | "critical"; | ||
tone?: "neutral" | "info" | "positive" | "attention" | "critical" | "accent"; | ||
/** | ||
@@ -14,0 +14,0 @@ * The variant style of the badge. |
@@ -47,3 +47,3 @@ import { jsx, jsxs } from "react/jsx-runtime"; | ||
{ | ||
portal: popover.portal, | ||
portal: true, | ||
unmountOnHide: true, | ||
@@ -50,0 +50,0 @@ ...props, |
@@ -8,2 +8,7 @@ import * as React from "react"; | ||
* Should be a URL to an `.svg` file from `@itwin/itwinui-icons`. | ||
* | ||
* Note: The `.svg` must be an external HTTP resource for it to be processed by | ||
* the `<use>` element. As a fallback, JS will be used to `fetch` the SVG from | ||
* non-supported URLs; the fetched SVG content will be sanitized using the | ||
* `unstable_htmlSanitizer` function passed to `<Root>`. | ||
*/ | ||
@@ -31,3 +36,3 @@ href?: string; | ||
* Icon component that provides fill and sizing to the SVGs from `@itwin/itwinui-icons`. | ||
* It uses an external symbol sprite to render the icon based on the specified `size`. | ||
* It renders the correct symbol sprite based on the specified `size`. | ||
* | ||
@@ -68,2 +73,5 @@ * ```tsx | ||
export declare const Dismiss: React.ForwardRefExoticComponent<DismissProps & React.RefAttributes<HTMLElement | SVGSVGElement>>; | ||
interface StatusWarningProps extends Omit<BaseProps<"svg">, "children"> { | ||
} | ||
export declare const StatusWarning: React.ForwardRefExoticComponent<StatusWarningProps & React.RefAttributes<HTMLElement | SVGSVGElement>>; | ||
export {}; |
@@ -5,6 +5,17 @@ import { jsx } from "react/jsx-runtime"; | ||
import { Role } from "@ariakit/react/role"; | ||
import { forwardRef } from "./~utils.js"; | ||
import { | ||
forwardRef, | ||
getOwnerDocument, | ||
parseDOM | ||
} from "./~utils.js"; | ||
import { | ||
HtmlSanitizerContext, | ||
spriteSheetId, | ||
useRootNode | ||
} from "./Root.internal.js"; | ||
import { useLatestRef, useSafeContext } from "./~hooks.js"; | ||
const Icon = forwardRef((props, forwardedRef) => { | ||
const { href, size, alt, ...rest } = props; | ||
const { href: hrefProp, size, alt, ...rest } = props; | ||
const isDecorative = !alt; | ||
const hrefBase = useNormalizedHrefBase(hrefProp); | ||
return /* @__PURE__ */ jsx( | ||
@@ -20,10 +31,10 @@ Role.svg, | ||
ref: forwardedRef, | ||
children: href ? /* @__PURE__ */ jsx("use", { href: toIconHref(href, size) }) : null | ||
children: hrefBase ? /* @__PURE__ */ jsx("use", { href: toIconHref(hrefBase, size) }) : null | ||
} | ||
); | ||
}); | ||
function toIconHref(href, size) { | ||
const separator = href.includes("#") ? "--" : "#"; | ||
function toIconHref(hrefBase, size) { | ||
const separator = hrefBase.includes("#") ? "--" : "#"; | ||
const suffix = toIconId(size); | ||
return `${href}${separator}${suffix}`; | ||
return `${hrefBase}${separator}${suffix}`; | ||
} | ||
@@ -34,2 +45,64 @@ function toIconId(size) { | ||
} | ||
function useNormalizedHrefBase(rawHref) { | ||
const generatedId = React.useId(); | ||
const sanitizeHtml = useLatestRef(useSafeContext(HtmlSanitizerContext)); | ||
const rootNode = useRootNode(); | ||
const inlineHref = React.useRef(void 0); | ||
const getClientSnapshot = () => { | ||
const ownerDocument = getOwnerDocument(rootNode); | ||
if (!rawHref || !ownerDocument) return void 0; | ||
if (isHttpProtocol(rawHref, ownerDocument)) return rawHref; | ||
return inlineHref.current; | ||
}; | ||
const subscribe = React.useCallback( | ||
(notify) => { | ||
const ownerDocument = getOwnerDocument(rootNode); | ||
const spriteSheet = ownerDocument?.getElementById(spriteSheetId); | ||
if (!rawHref || !ownerDocument || !spriteSheet) return () => { | ||
}; | ||
if (isHttpProtocol(rawHref, ownerDocument)) return () => { | ||
}; | ||
const cache = spriteSheet[Symbol.for("\u{1F95D}")]?.icons; | ||
if (!cache) return () => { | ||
}; | ||
const prefix = `\u{1F95D}${generatedId}`; | ||
if (cache.has(rawHref)) { | ||
inlineHref.current = cache.get(rawHref); | ||
notify(); | ||
return () => { | ||
}; | ||
} | ||
const abortController = new AbortController(); | ||
const { signal } = abortController; | ||
(async () => { | ||
const response = await fetch(rawHref, { signal }); | ||
if (!response.ok) throw new Error(`Failed to fetch ${rawHref}`); | ||
const fetchedSvgString = sanitizeHtml.current(await response.text()); | ||
const parsedSvgContent = parseDOM(fetchedSvgString, { | ||
ownerDocument | ||
}); | ||
const symbols = parsedSvgContent.querySelectorAll("symbol"); | ||
for (const symbol of symbols) { | ||
symbol.id = `${prefix}--${symbol.id}`; | ||
if (ownerDocument.getElementById(symbol.id)) continue; | ||
spriteSheet.appendChild(symbol.cloneNode(true)); | ||
} | ||
inlineHref.current = `#${prefix}`; | ||
cache.set(rawHref, inlineHref.current); | ||
if (!signal.aborted) notify(); | ||
})(); | ||
return () => abortController.abort(); | ||
}, | ||
[rawHref, rootNode, sanitizeHtml, generatedId] | ||
); | ||
return React.useSyncExternalStore( | ||
subscribe, | ||
getClientSnapshot, | ||
() => rawHref | ||
); | ||
} | ||
function isHttpProtocol(url, ownerDocument) { | ||
const { protocol } = new URL(url, ownerDocument.baseURI); | ||
return ["http:", "https:"].includes(protocol); | ||
} | ||
const DisclosureArrow = forwardRef( | ||
@@ -118,2 +191,32 @@ (props, forwardedRef) => { | ||
); | ||
const StatusWarning = forwardRef( | ||
(props, forwardedRef) => { | ||
return /* @__PURE__ */ jsx( | ||
Icon, | ||
{ | ||
...props, | ||
render: /* @__PURE__ */ jsx( | ||
Role.svg, | ||
{ | ||
width: "16", | ||
height: "16", | ||
fill: "currentColor", | ||
viewBox: "0 0 16 16", | ||
render: props.render, | ||
children: /* @__PURE__ */ jsx( | ||
"path", | ||
{ | ||
fill: "currentColor", | ||
fillRule: "evenodd", | ||
d: "M8.354 2.06a.5.5 0 0 0-.708 0L2.061 7.647a.5.5 0 0 0 0 .707l5.585 5.586a.5.5 0 0 0 .708 0l5.585-5.586a.5.5 0 0 0 0-.707L8.354 2.061Zm-1.415-.707a1.5 1.5 0 0 1 2.122 0l5.585 5.586a1.5 1.5 0 0 1 0 2.122l-5.585 5.585a1.5 1.5 0 0 1-2.122 0L1.354 9.061a1.5 1.5 0 0 1 0-2.122l5.585-5.586ZM8.75 10.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8.5 8.5v-3a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0Z", | ||
clipRule: "evenodd" | ||
} | ||
) | ||
} | ||
), | ||
ref: forwardedRef | ||
} | ||
); | ||
} | ||
); | ||
export { | ||
@@ -123,3 +226,4 @@ Checkmark, | ||
Dismiss, | ||
Icon | ||
Icon, | ||
StatusWarning | ||
}; |
@@ -20,2 +20,14 @@ import * as React from "react"; | ||
density: "dense"; | ||
/** | ||
* An HTML sanitizer function that will be used across all components wherever DOM elements | ||
* are created from HTML strings. | ||
* | ||
* When this prop is not passed, sanitization will be skipped. | ||
* | ||
* Example: | ||
* ```tsx | ||
* unstablized_htmlSanitizer={DOMPurify.sanitize} | ||
* ``` | ||
*/ | ||
unstable_htmlSanitizer?: (html: string) => string; | ||
} | ||
@@ -22,0 +34,0 @@ /** |
@@ -9,7 +9,24 @@ import { jsx, jsxs } from "react/jsx-runtime"; | ||
import bricksCss from "./styles.css.js"; | ||
import { forwardRef, isBrowser } from "./~utils.js"; | ||
import { useIsClient, useMergedRefs } from "./~hooks.js"; | ||
import { | ||
forwardRef, | ||
getOwnerDocument, | ||
identity, | ||
isBrowser, | ||
isDocument | ||
} from "./~utils.js"; | ||
import { useLayoutEffect, useMergedRefs } from "./~hooks.js"; | ||
import { | ||
HtmlSanitizerContext, | ||
RootNodeContext, | ||
spriteSheetId, | ||
useRootNode | ||
} from "./Root.internal.js"; | ||
const css = foundationsCss + bricksCss; | ||
const Root = forwardRef((props, forwardedRef) => { | ||
const { children, synchronizeColorScheme = false, ...rest } = props; | ||
const { | ||
children, | ||
synchronizeColorScheme = false, | ||
unstable_htmlSanitizer = identity, | ||
...rest | ||
} = props; | ||
const [portalContainer, setPortalContainer] = React.useState(null); | ||
@@ -19,2 +36,3 @@ return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [ | ||
/* @__PURE__ */ jsx(Fonts, {}), | ||
/* @__PURE__ */ jsx(InlineSpriteSheet, {}), | ||
synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null, | ||
@@ -29,9 +47,5 @@ /* @__PURE__ */ jsx( | ||
), | ||
/* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children }) | ||
/* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children: /* @__PURE__ */ jsx(HtmlSanitizerContext.Provider, { value: unstable_htmlSanitizer, children }) }) | ||
] }); | ||
}); | ||
const RootNodeContext = React.createContext(null); | ||
function useRootNode() { | ||
return React.useContext(RootNodeContext); | ||
} | ||
const RootInternal = forwardRef( | ||
@@ -77,6 +91,5 @@ (props, forwardedRef) => { | ||
const PortalContainer = forwardRef((props, forwardedRef) => { | ||
const isClient = useIsClient(); | ||
const rootNode = useRootNode(); | ||
if (!isClient) return null; | ||
const destination = rootNode && isDocument(rootNode) ? rootNode.body : rootNode; | ||
if (!rootNode) return null; | ||
const destination = isDocument(rootNode) ? rootNode.body : rootNode; | ||
if (!destination) return null; | ||
@@ -101,8 +114,13 @@ return ReactDOM.createPortal( | ||
if (!rootNode) return; | ||
loadStyles(rootNode, { css }); | ||
const { cleanup } = loadStyles(rootNode, { css }); | ||
return cleanup; | ||
}, [rootNode]); | ||
return null; | ||
} | ||
const styleSheets = /* @__PURE__ */ new WeakMap(); | ||
function loadStyles(rootNode, { css: css2 }) { | ||
const styleSheets = new Map( | ||
Object.entries({ default: /* @__PURE__ */ new WeakMap() }) | ||
); | ||
function loadStyles(rootNode, { css: css2, key = "default" }) { | ||
let cleanup = () => { | ||
}; | ||
const loaded = (() => { | ||
@@ -113,12 +131,13 @@ if (!isBrowser) return false; | ||
if (!ownerDocument || !_window) return false; | ||
if (!supportsAdoptedStylesheets && !rootNode.querySelector("style[data-kiwi]")) { | ||
if (!supportsAdoptedStylesheets && !rootNode.querySelector(`style[data-kiwi="${key}"]`)) { | ||
const styleElement = ownerDocument.createElement("style"); | ||
styleElement.dataset.kiwi = "true"; | ||
styleElement.dataset.kiwi = key; | ||
styleElement.textContent = css2; | ||
(rootNode.head || rootNode).appendChild(styleElement); | ||
cleanup = () => styleElement.remove(); | ||
return true; | ||
} | ||
const styleSheet = styleSheets.get(_window) || new _window.CSSStyleSheet(); | ||
if (!styleSheets.has(_window)) { | ||
styleSheets.set(_window, styleSheet); | ||
const styleSheet = styleSheets.get(key)?.get(_window) || new _window.CSSStyleSheet(); | ||
if (!styleSheets.get(key)?.has(_window)) { | ||
styleSheets.get(key)?.set(_window, styleSheet); | ||
} | ||
@@ -128,6 +147,11 @@ styleSheet.replaceSync(css2); | ||
rootNode.adoptedStyleSheets.push(styleSheet); | ||
cleanup = () => { | ||
rootNode.adoptedStyleSheets = rootNode.adoptedStyleSheets.filter( | ||
(sheet) => sheet !== styleSheet | ||
); | ||
}; | ||
} | ||
return true; | ||
})(); | ||
return { loaded }; | ||
return { loaded, cleanup }; | ||
} | ||
@@ -142,2 +166,31 @@ function Fonts() { | ||
} | ||
function InlineSpriteSheet() { | ||
const rootNode = useRootNode(); | ||
React.useEffect( | ||
function maybeCreateSpriteSheet() { | ||
const ownerDocument = getOwnerDocument(rootNode); | ||
if (!ownerDocument) return; | ||
const spriteSheet = ownerDocument?.getElementById(spriteSheetId); | ||
if (spriteSheet) return; | ||
const svg = ownerDocument.createElementNS( | ||
"http://www.w3.org/2000/svg", | ||
"svg" | ||
); | ||
svg.id = spriteSheetId; | ||
svg.style.display = "none"; | ||
Object.defineProperty(svg, Symbol.for("\u{1F95D}"), { | ||
value: { icons: /* @__PURE__ */ new Map() } | ||
// Map of icon URLs that have already been inlined. | ||
}); | ||
ownerDocument.body.appendChild(svg); | ||
return () => { | ||
if (svg.isConnected) { | ||
ownerDocument.body.removeChild(svg); | ||
} | ||
}; | ||
}, | ||
[rootNode] | ||
); | ||
return null; | ||
} | ||
function loadFonts(rootNode) { | ||
@@ -171,8 +224,2 @@ const ownerWindow = getWindow(rootNode); | ||
} | ||
function isDocument(node) { | ||
return node?.nodeType === Node.DOCUMENT_NODE; | ||
} | ||
function getOwnerDocument(node) { | ||
return (isDocument(node) ? node : node.ownerDocument) || null; | ||
} | ||
function getWindow(node) { | ||
@@ -182,5 +229,4 @@ const ownerDocument = getOwnerDocument(node); | ||
} | ||
const useLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect; | ||
export { | ||
Root | ||
}; |
@@ -20,13 +20,28 @@ import { jsx, jsxs } from "react/jsx-runtime"; | ||
"data-kiwi-tone": tone, | ||
"data-kiwi-variant": "indeterminate", | ||
className: cx("\u{1F95D}-spinner", props.className), | ||
ref: forwardedRef, | ||
children: [ | ||
/* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "\u{1F95D}-spinner-svg", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx( | ||
"path", | ||
{ | ||
stroke: "currentColor", | ||
strokeLinecap: "round", | ||
d: "M9.5 1.674a6.503 6.503 0 0 1 0 12.652m-3-12.652a6.503 6.503 0 0 0 0 12.652" | ||
} | ||
) }), | ||
/* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className: "\u{1F95D}-spinner-svg", viewBox: "0 0 16 16", children: [ | ||
/* @__PURE__ */ jsx( | ||
"circle", | ||
{ | ||
pathLength: "100", | ||
className: "\u{1F95D}-spinner-svg-track", | ||
cx: "8", | ||
cy: "8", | ||
r: "6.5" | ||
} | ||
), | ||
/* @__PURE__ */ jsx( | ||
"circle", | ||
{ | ||
pathLength: "100", | ||
className: "\u{1F95D}-spinner-svg-fill", | ||
cx: "8", | ||
cy: "8", | ||
r: "6.5" | ||
} | ||
) | ||
] }), | ||
/* @__PURE__ */ jsx(VisuallyHidden, { children: alt }) | ||
@@ -33,0 +48,0 @@ ] |
// inline-css:/home/runner/work/design-system/design-system/packages/kiwi-react/src/bricks/styles.css | ||
var styles_default = String.raw`@layer itwinui.components.base,itwinui.components.modifiers,itwinui.components.states;@layer itwinui.components{@layer base{.🥝-icon{width:var(--🥝icon-size,1rem);height:var(--🥝icon-size,1rem);color:var(--🥝icon-color);flex-shrink:0;transition:color .15s ease-out}}@layer modifiers{.🥝-icon:where([data-kiwi-size=regular]){--🥝icon-size:1rem}.🥝-icon:where([data-kiwi-size=large]){--🥝icon-size:1.5rem}}@layer base{.🥝-disclosure-arrow{rotate:var(--🥝disclosure-arrow-rotate);margin-inline-end:-8px}@media (prefers-reduced-motion:no-preference){.🥝-disclosure-arrow{transition:rotate .15s ease-in-out}}}@layer base{.🥝-ghost-aligner:where([data-kiwi-ghost-align=inline]){margin-inline:calc(-1*var(--🥝ghost-inline-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=inline-start]){margin-inline-start:calc(-1*var(--🥝ghost-inline-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=inline-end]){margin-inline-end:calc(-1*var(--🥝ghost-inline-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=block]){margin-block:calc(-1*var(--🥝ghost-block-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=block-start]){margin-block-start:calc(-1*var(--🥝ghost-block-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=block-end]){margin-block-end:calc(-1*var(--🥝ghost-block-offset))}}@layer base{.🥝-list-item{cursor:pointer;line-height:1.2;font-size:var(--ids-font-size-12);min-block-size:var(--🥝list-item-height,1.75rem);background-color:var(--🥝list-item-background-color);--🥝list-item-background-color:var(--🌀list-item-state--default,transparent)var(--🌀list-item-state--hover,var(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-bg-glow-on-surface-neutral-pressed))var(--🌀list-item-state--active,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--active-hover,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--disabled,transparent);color:var(--🌀list-item-state--default,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--hover,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--pressed,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--active,var(--ids-color-text-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-text-accent-strong))var(--🌀list-item-state--disabled,var(--ids-color-text-neutral-disabled));--🥝icon-color:var(--🌀list-item-state--default,var(--ids-color-icon-neutral-base))var(--🌀list-item-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--active,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--disabled,var(--ids-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;padding-inline:.5rem;display:grid}}@layer states{@media (any-hover:hover){.🥝-list-item:where(:hover){--🌀list-item-state:var(--🌀list-item-state--hover)}}.🥝-list-item:where(:active){--🌀list-item-state:var(--🌀list-item-state--pressed)}.🥝-list-item:where([disabled],:disabled,[aria-disabled=true]){--🌀list-item-state:var(--🌀list-item-state--disabled);cursor:not-allowed}@media (forced-colors:active){.🥝-list-item:where([disabled],:disabled,[aria-disabled=true]){color:graytext;--🥝icon-color:GrayText}}}@layer modifiers{.🥝-list-item:where(:has(>:nth-child(2 of .🥝-list-item-content))){--🥝list-item-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝-list-item{--🌀list-item-state:var(--🌀list-item-state--default);--🌀list-item-state--default:var(--🌀list-item-state, );--🌀list-item-state--hover:var(--🌀list-item-state, );--🌀list-item-state--pressed:var(--🌀list-item-state, );--🌀list-item-state--active:var(--🌀list-item-state, );--🌀list-item-state--active-hover:var(--🌀list-item-state, );--🌀list-item-state--disabled:var(--🌀list-item-state, )}}@layer base{.🥝-list-item-content{grid-column:content}}@layer base{.🥝-list-item-decoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:.25rem;display:flex}:where(.🥝-list-item-content)~.🥝-list-item-decoration{grid-column:decoration-after;margin-inline:.25rem 0}}@layer base{.🥝-anchor{cursor:pointer;font-size:var(--ids-font-size-12);text-underline-offset:var(--🌀anchor-state--default,2px)var(--🌀anchor-state--hover,3px)var(--🌀anchor-state--pressed,3px);-webkit-text-decoration-color:var(--🌀anchor-state--default,currentColor)var(--🌀anchor-state--hover,currentColor)var(--🌀anchor-state--pressed,transparent);text-decoration-color:var(--🌀anchor-state--default,currentColor)var(--🌀anchor-state--hover,currentColor)var(--🌀anchor-state--pressed,transparent);color:var(--🥝anchor-color,var(--ids-color-text-neutral-primary));border-radius:4px;font-weight:500;transition:color .15s ease-out,text-decoration-color .15s ease-out,text-underline-offset .15s ease-out}.🥝-anchor:where(button){background:0 0;border:none}}@layer modifiers{.🥝-anchor:where([data-kiwi-tone=accent]){--🥝anchor-color:var(--🌀anchor-state--default,var(--ids-color-text-accent-strong))var(--🌀anchor-state--hover,color-mix(in oklch,var(--ids-color-text-accent-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-hover-\%)))var(--🌀anchor-state--pressed,color-mix(in oklch,var(--ids-color-text-accent-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-pressed-\%)))}.🥝-anchor:where([data-kiwi-tone=critical]){--🥝anchor-color:var(--🌀anchor-state--default,var(--ids-color-text-critical-base))var(--🌀anchor-state--hover,color-mix(in oklch,var(--ids-color-text-critical-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-hover-\%)))var(--🌀anchor-state--pressed,color-mix(in oklch,var(--ids-color-text-critical-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-pressed-\%)))}}@layer states{@media (any-hover:hover){.🥝-anchor:where(:hover){--🌀anchor-state:var(--🌀anchor-state--hover)}}.🥝-anchor:where(:active){--🌀anchor-state:var(--🌀anchor-state--pressed)}.🥝-anchor:where(:focus-visible){outline-offset:2px}.🥝-anchor:where([disabled],:disabled,[aria-disabled=true]){--🥝anchor-color:var(--ids-color-text-neutral-disabled);cursor:not-allowed;text-decoration:none}}@layer base.🌀{.🥝-anchor{--🌀anchor-state:var(--🌀anchor-state--default);--🌀anchor-state--default:var(--🌀anchor-state, );--🌀anchor-state--hover:var(--🌀anchor-state, );--🌀anchor-state--pressed:var(--🌀anchor-state, )}}@layer base{.🥝-avatar{--🥝avatar-background-color:var(--ids-color-bg-mono-base);block-size:var(--🥝avatar-size);inline-size:var(--🥝avatar-size);background-color:var(--🥝avatar-background-color);color:var(--ids-color-text-neutral-emphasis);-webkit-user-select:none;user-select:none;border-radius:50%;place-items:center;display:inline-grid;position:relative;overflow:hidden}@media (forced-colors:active){.🥝-avatar{border:1px solid canvastext}}.🥝-avatar:after{content:"";border-radius:inherit;box-shadow:0px 0px 0px 1px var(--ids-color-border-glow-strong-default)inset;position:absolute;inset:0}.🥝-avatar>img{background-color:inherit;block-size:inherit;inline-size:inherit;object-fit:cover;object-position:center}}@layer modifiers{.🥝-avatar:where([data-kiwi-size=small]){--🥝avatar-size:1rem;--🥝avatar-font-size:var(--ids-font-size-8);--🥝icon-size:.75rem}.🥝-avatar:where([data-kiwi-size=medium]){--🥝avatar-size:1.5rem;--🥝avatar-font-size:var(--ids-font-size-10);--🥝icon-size:1rem}.🥝-avatar:where([data-kiwi-size=large]){--🥝avatar-size:2rem;--🥝avatar-font-size:var(--ids-font-size-12);--🥝icon-size:1rem}.🥝-avatar:where([data-kiwi-size=xlarge]){--🥝avatar-size:3rem;--🥝avatar-font-size:var(--ids-font-size-16);--🥝icon-size:1.5rem}}@layer base{.🥝-avatar-initials{font-size:var(--🥝avatar-font-size);text-align:center;text-transform:uppercase;font-weight:600}}@layer base{.🥝-badge{white-space:nowrap;box-shadow:0px 0px 0px 1px var(--🥝badge-border-color)inset;background-color:var(--🥝badge-background-color);color:var(--🥝badge-text-color);block-size:1.25rem;font-weight:500;font-size:var(--ids-font-size-12);border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;padding-inline:8px;line-height:1.3333;display:inline-flex}@media (forced-colors:active){.🥝-badge{border:1px solid}}}@layer modifiers{.🥝-badge:where([data-kiwi-variant=solid]){--🥝badge-border-color:var(--ids-color-border-glow-strong-default);--🥝badge-text-color:var(--ids-color-text-neutral-emphasis)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=neutral]){--🥝badge-background-color:var(--ids-color-bg-mono-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=info]){--🥝badge-background-color:var(--ids-color-bg-info-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=positive]){--🥝badge-background-color:var(--ids-color-bg-positive-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=attention]){--🥝badge-background-color:var(--ids-color-bg-attention-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=critical]){--🥝badge-background-color:var(--ids-color-bg-critical-base)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=neutral]){--🥝badge-background-color:var(--ids-color-bg-mono-muted);--🥝badge-border-color:var(--ids-color-border-mono-muted);--🥝badge-text-color:var(--ids-color-text-mono-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=info]){--🥝badge-background-color:var(--ids-color-bg-info-muted);--🥝badge-border-color:var(--ids-color-border-info-muted);--🥝badge-text-color:var(--ids-color-text-info-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=positive]){--🥝badge-background-color:var(--ids-color-bg-positive-muted);--🥝badge-border-color:var(--ids-color-border-positive-muted);--🥝badge-text-color:var(--ids-color-text-positive-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=attention]){--🥝badge-background-color:var(--ids-color-bg-attention-muted);--🥝badge-border-color:var(--ids-color-border-attention-muted);--🥝badge-text-color:var(--ids-color-text-attention-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=critical]){--🥝badge-background-color:var(--ids-color-bg-critical-muted);--🥝badge-border-color:var(--ids-color-border-critical-muted);--🥝badge-text-color:var(--ids-color-text-critical-faded)}.🥝-badge:where([data-kiwi-variant=outline]){--🥝badge-background-color:transparent}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=neutral]){--🥝badge-text-color:var(--ids-color-text-mono-base);--🥝badge-border-color:var(--ids-color-border-mono-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=info]){--🥝badge-text-color:var(--ids-color-text-info-base);--🥝badge-border-color:var(--ids-color-border-info-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=positive]){--🥝badge-text-color:var(--ids-color-text-positive-base);--🥝badge-border-color:var(--ids-color-border-positive-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=attention]){--🥝badge-text-color:var(--ids-color-text-attention-base);--🥝badge-border-color:var(--ids-color-border-attention-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=critical]){--🥝badge-text-color:var(--ids-color-text-critical-base);--🥝badge-border-color:var(--ids-color-border-critical-base)}}@layer base{.🥝-button{white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;line-height:1.2;font-size:var(--ids-font-size-12);block-size:1.5rem;padding-inline:var(--🥝button-padding-inline,12px);--🥝ghost-inline-offset:12px;--🥝ghost-block-offset:4px;background-color:var(--🥝button-background-color);color:var(--🥝button-color,var(--ids-color-text-neutral-primary));-webkit-tap-highlight-color:color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%));--🥝icon-color:var(--🌀button-state--default,var(--ids-color-icon-neutral-base))var(--🌀button-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀button-state--pressed,var(--ids-color-icon-neutral-hover))var(--🌀button-state--active,var(--ids-color-icon-accent-strong))var(--🌀button-state--disabled,var(--ids-color-icon-neutral-disabled));border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding-block:4px;font-weight:500;text-decoration:none;transition:background-color .15s ease-out;display:inline-flex;position:relative}@media (forced-colors:active){.🥝-button{color:buttontext;--🥝icon-color:ButtonText;background-color:buttonface;border:1px solid buttonborder}}}@layer modifiers{.🥝-button:where([data-kiwi-variant=solid]){--🥝button-background-color:var(--🌀button-state--default,var(--🥝button-bg--solid-default))var(--🌀button-state--hover,color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀button-state--disabled,var(--ids-color-bg-glow-on-surface-disabled));box-shadow:var(--🌀button-state--default,var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--🥝button-border-color)inset,var(--ids-shadow-button-base-drop))var(--🌀button-state--hover,var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--🥝button-border-color)inset,var(--ids-shadow-button-base-drop))var(--🌀button-state--pressed,0px 0px 0px 1px var(--🥝button-border-color)inset)var(--🌀button-state--disabled,none)}.🥝-button:where([data-kiwi-variant=solid]):where([data-kiwi-tone=neutral]){--🥝button-bg--solid-default:var(--ids-color-bg-neutral-base);--🥝button-border-color:var(--🌀button-state--default,var(--ids-color-border-shadow-base))var(--🌀button-state--hover,color-mix(in oklch,var(--ids-color-border-shadow-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--ids-color-border-shadow-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀button-state--disabled,transparent)}.🥝-button:where([data-kiwi-variant=solid]):where([data-kiwi-tone=accent]){--🥝button-bg--solid-default:var(--ids-color-bg-accent-base);--🥝button-border-color:var(--🌀button-state--default,var(--ids-color-border-shadow-strong))var(--🌀button-state--hover,color-mix(in oklch,var(--ids-color-border-shadow-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--ids-color-border-shadow-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-pressed-\%)))var(--🌀button-state--disabled,transparent);--🥝button-color:var(--ids-color-text-neutral-emphasis);--🥝icon-color:var(--🌀button-state--default,var(--ids-color-icon-neutral-emphasis))var(--🌀button-state--hover,var(--ids-color-icon-strong-hover))var(--🌀button-state--pressed,var(--ids-color-icon-neutral-hover))var(--🌀button-state--disabled,var(--ids-color-icon-neutral-disabled))}@media (forced-colors:active){.🥝-button:where([data-kiwi-variant=solid]):where([data-kiwi-tone=accent]){--🥝icon-color:ButtonText}}.🥝-button:where([data-kiwi-variant=outline]){--🥝button-background-color:var(--🌀button-state--default,transparent)var(--🌀button-state--hover,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀button-state--disabled,transparent);--🥝button-border-color:var(--🌀button-state--default,var(--ids-color-border-neutral-base))var(--🌀button-state--hover,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀button-state--disabled,var(--ids-color-border-glow-on-surface-disabled));box-shadow:0px 0px 0px 1px var(--🥝button-border-color)inset}.🥝-button:where([data-kiwi-variant=ghost]){--🥝button-background-color:var(--🌀button-state--default,transparent)var(--🌀button-state--hover,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀button-state--active,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀button-state--disabled,transparent)}}@layer states{@media (any-hover:hover){.🥝-button:where(:hover){--🌀button-state:var(--🌀button-state--hover)}}.🥝-button:where(:active){--🌀button-state:var(--🌀button-state--pressed)}.🥝-button:where([data-kiwi-variant=ghost][aria-pressed=true]){--🌀button-state:var(--🌀button-state--active)}@media (forced-colors:active){.🥝-button:where([data-kiwi-variant=ghost][aria-pressed=true]){color:selecteditemtext;--🥝icon-color:SelectedItemText;background-color:selecteditem}}.🥝-button:where([disabled],:disabled,[aria-disabled=true]){--🌀button-state:var(--🌀button-state--disabled);color:var(--ids-color-text-neutral-disabled);cursor:not-allowed}@media (forced-colors:active){.🥝-button:where([disabled],:disabled,[aria-disabled=true]){color:graytext;--🥝icon-color:GrayText;border-color:graytext}}}@layer base.🌀{.🥝-button{--🌀button-state:var(--🌀button-state--default);--🌀button-state--default:var(--🌀button-state, );--🌀button-state--hover:var(--🌀button-state, );--🌀button-state--pressed:var(--🌀button-state, );--🌀button-state--active:var(--🌀button-state, );--🌀button-state--disabled:var(--🌀button-state, )}}@layer base{.🥝-checkbox{--🥝checkbox-color-svg:var(--ids-color-icon-neutral-emphasis);--🥝checkbox-border-radius:4px;--🥝checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--🥝checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M11.2 5.6 6.8 10l-2-2\"/></svg>");--🥝checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M5 8h6.5\"/></svg>");appearance:none;cursor:pointer;background-color:var(--🌀checkbox-visual-state--default,var(--ids-color-bg-neutral-base))var(--🌀checkbox-visual-state--hover,color-mix(in oklch,var(--ids-color-bg-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀checkbox-visual-state--checked,var(--ids-color-bg-accent-base))var(--🌀checkbox-visual-state--checked-hover,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀checkbox-visual-state--disabled,var(--ids-color-bg-glow-on-surface-disabled));border-radius:var(--🥝checkbox-border-radius);block-size:1rem;inline-size:1rem;color:var(--🌀checkbox-aria-state--unchecked,transparent)var(--🌀checkbox-aria-state--checked,var(--🥝checkbox-color-svg))var(--🌀checkbox-aria-state--indeterminate,var(--🥝checkbox-color-svg));box-shadow:var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--🥝checkbox-border-color)inset,var(--ids-shadow-button-base-drop);--🥝checkbox-border-color:var(--🌀checkbox-visual-state--default,var(--ids-color-border-shadow-base))var(--🌀checkbox-visual-state--hover,color-mix(in oklch,var(--ids-color-border-shadow-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀checkbox-visual-state--checked,var(--ids-color-border-shadow-strong))var(--🌀checkbox-visual-state--checked-hover,color-mix(in oklch,var(--ids-color-border-shadow-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀checkbox-visual-state--disabled,transparent);--🥝checkbox-mask-image:var(--🌀checkbox-aria-state--unchecked,var(--🥝checkbox-unchecked-svg))var(--🌀checkbox-aria-state--checked,var(--🥝checkbox-checkmark-svg))var(--🌀checkbox-aria-state--indeterminate,var(--🥝checkbox-indeterminate-svg));transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out,--🥝checkbox-border-color .15s ease-out;position:relative}.🥝-checkbox:before,.🥝-checkbox:after{content:"";position:absolute;inset:0}.🥝-checkbox:before{inset:calc(.5rem - 12px)}.🥝-checkbox:after{-webkit-mask-image:var(--🥝checkbox-mask-image,initial);mask-image:var(--🥝checkbox-mask-image,initial);background-color:currentColor;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@media (forced-colors:active){.🥝-checkbox:after{background-color:canvastext}}}@layer states{@media (forced-colors:active){.🥝-checkbox{border:1px solid canvastext}}@media (any-hover:hover){.🥝-checkbox:where(:hover){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--hover)}}.🥝-checkbox:where(:checked,[aria-checked=true]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked);--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--checked)}@media (any-hover:hover){.🥝-checkbox:where(:checked,[aria-checked=true]):where(:hover){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked-hover)}}.🥝-checkbox:where(:indeterminate,[aria-checked=mixed]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked);--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--indeterminate)}.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--disabled);--🥝checkbox-color-svg:var(--ids-color-icon-neutral-disabled);cursor:not-allowed;box-shadow:none}@media (forced-colors:active){.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]){border-color:graytext}.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]):after{background-color:graytext}}}@layer base.🌀{.🥝-checkbox{--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--default);--🌀checkbox-visual-state--default:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--hover:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--checked:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--checked-hover:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--disabled:var(--🌀checkbox-visual-state, );--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--unchecked);--🌀checkbox-aria-state--unchecked:var(--🌀checkbox-aria-state, );--🌀checkbox-aria-state--checked:var(--🌀checkbox-aria-state, );--🌀checkbox-aria-state--indeterminate:var(--🌀checkbox-aria-state, )}}@layer base{.🥝-chip{isolation:isolate;--🥝chip-padding-inline:.5rem;padding-inline:var(--🥝chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝-chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--ids-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝-chip:where([data-kiwi-variant=solid]){background-color:var(--ids-color-bg-neutral-base)}.🥝-chip:where([data-kiwi-variant=outline]){background-color:var(--ids-color-bg-page-base)}}@layer base{.🥝-chip-dismiss-button.🥝-icon-button{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝chip-padding-inline));position:relative}}@layer modifiers{.🥝-description.🥝-text:where([data-kiwi-tone=neutral]){color:var(--ids-color-text-neutral-tertiary)}.🥝-description.🥝-text:where([data-kiwi-tone=critical]){color:var(--ids-color-text-critical-base)}}.🥝-divider{background-color:var(--ids-color-border-neutral-muted);flex:none;align-self:stretch}@media (forced-colors:active){.🥝-divider{background-color:canvastext}}.🥝-divider:is(hr){border:none;margin:0}.🥝-divider:not([aria-orientation=vertical],[data-kiwi-orientation=vertical]){block-size:1px}.🥝-divider:is([aria-orientation=vertical],[data-kiwi-orientation=vertical]){min-block-size:100%;inline-size:1px}@layer base{.🥝-dropdown-menu{background-color:var(--ids-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);box-shadow:var(--ids-shadow-surface-xl);border-radius:8px;flex-direction:column;padding:4px;display:flex}@media (forced-colors:active){.🥝-dropdown-menu{border:1px solid canvastext}}}@layer states{.🥝-dropdown-menu-button:where([aria-expanded=true]){--🥝disclosure-arrow-rotate:.5turn}}@layer base{.🥝-dropdown-menu-item.🥝-list-item{border-radius:4px}}@layer states{.🥝-dropdown-menu-item.🥝-list-item:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝dropdown-menu-checkmark-visibility:hidden}}@layer base{.🥝-dropdown-menu-checkmark{visibility:var(--🥝dropdown-menu-checkmark-visibility)}}@layer base{.🥝-dropdown-menu-item-shortcuts{margin-inline-start:.5rem}}@layer base{.🥝-icon-button.🥝-button{aspect-ratio:1;--🥝button-padding-inline:4px;--🥝ghost-inline-offset:4px}}@layer modifiers{.🥝-icon-button.🥝-button:where([data-kiwi-dot=true]):after{content:"";background-color:var(--ids-color-icon-accent-strong);border-radius:9999px;block-size:4px;inline-size:4px;display:inline-block;position:absolute;inset-block-start:2px;inset-inline-end:2px}@media (forced-colors:active){.🥝-icon-button.🥝-button:where([data-kiwi-dot=true]):after{background-color:canvastext}}@media (forced-colors:active){.🥝-icon-button.🥝-button:where([data-kiwi-dot=true][aria-pressed=true]):after{background-color:selecteditemtext}}}@layer base{.🥝-kbd{color:var(--ids-color-text-neutral-secondary);min-block-size:16px;font-family:inherit;font-weight:500;font-size:var(--ids-font-size-12);flex-shrink:0;justify-content:center;align-items:center;line-height:1.3333;display:inline-flex}}@layer modifiers{.🥝-kbd:where([data-kiwi-variant=solid],[data-kiwi-variant=muted]){background-color:var(--ids-color-bg-neutral-base);border-radius:4px;padding-inline:4px}.🥝-kbd:where([data-kiwi-variant=solid]){box-shadow:var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--ids-color-border-shadow-base)inset,var(--ids-shadow-button-base-drop)}.🥝-kbd:where([data-kiwi-variant=ghost]){color:var(--ids-color-text-neutral-tertiary)}}@layer base{.🥝-label{color:var(--ids-color-text-neutral-secondary);cursor:default;font-size:var(--ids-font-size-12)}.🥝-label:is(label){cursor:pointer}}@layer states{.🥝-label:has(+:where(:disabled,[disabled],[aria-disabled=true])){color:var(--ids-color-text-neutral-disabled)}.🥝-label:has(+:where(:disabled,[disabled],[aria-disabled=true])):is(label){cursor:not-allowed}}@layer base{.🥝-progress-bar{block-size:var(--🥝progress-bar-size);contain:strict;background-color:var(--🥝progress-bar-track-color);border-radius:9999px;inline-size:100%;display:grid}.🥝-progress-bar:before{content:"";block-size:inherit;inline-size:var(--🥝progress-bar-fill-size);border-radius:inherit;background-color:var(--🥝progress-bar-fill-color);animation:var(--🥝progress-bar-animation)}}@layer modifiers{.🥝-progress-bar:where([data-kiwi-tone=neutral]){--🥝progress-bar-fill-color:var(--ids-color-icon-neutral-base);--🥝progress-bar-track-color:var(--ids-color-border-page-base)}.🥝-progress-bar:where([data-kiwi-tone=accent]){--🥝progress-bar-fill-color:var(--ids-color-icon-accent-strong);--🥝progress-bar-track-color:var(--ids-color-bg-accent-muted)}.🥝-progress-bar:where([data-kiwi-size=small]){--🥝progress-bar-size:.063rem}.🥝-progress-bar:where([data-kiwi-size=medium]){--🥝progress-bar-size:.125rem}.🥝-progress-bar:where([data-kiwi-size=large]){--🥝progress-bar-size:.25rem}.🥝-progress-bar:where([data-kiwi-variant=indeterminate]){--🥝progress-bar-animation:calc(4*1.5s)--🥝progress-bar-animation-indeterminate steps(4,end)infinite;--🥝progress-bar-fill-size:25%}@media (prefers-reduced-motion:no-preference){.🥝-progress-bar:where([data-kiwi-variant=indeterminate]){--🥝progress-bar-animation:1.5s --🥝progress-bar-animation-indeterminate cubic-bezier(.5,0,.5,1)4,calc(1.5s*2)--🥝progress-bar-animation-indeterminate-slow cubic-bezier(.5,0,.5,1)calc(4*1.5s)infinite}}@media (forced-colors:active){.🥝-progress-bar{--🥝progress-bar-fill-color:CanvasText;--🥝progress-bar-track-color:Canvas}}}@keyframes --🥝progress-bar-animation-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}@keyframes --🥝progress-bar-animation-indeterminate-slow{0%{transform:translate(-100%)}50%{transform:translate(-95%)}to{transform:translate(400%)}}.🥝-radio.🥝-checkbox{--🥝checkbox-border-radius:9999px;--🥝checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" ><circle cx=\"8\" cy=\"8\" r=\"4\" /></svg>");--🥝checkbox-indeterminate-svg:var(--🥝checkbox-unchecked-svg)}@layer states{.🥝-radio.🥝-checkbox:where(:indeterminate){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--default)}}@layer base{.🥝-spinner{color:var(--🥝spinner-color);block-size:var(--🥝spinner-size);inline-size:var(--🥝spinner-size);display:inline-block}}@layer modifiers{.🥝-spinner:where([data-kiwi-tone=neutral]){--🥝spinner-color:var(--ids-color-icon-neutral-base)}.🥝-spinner:where([data-kiwi-tone=accent]){--🥝spinner-color:var(--ids-color-icon-accent-strong)}.🥝-spinner:where([data-kiwi-size=small]){--🥝spinner-size:1rem}.🥝-spinner:where([data-kiwi-size=medium]){--🥝spinner-size:1.5rem}.🥝-spinner:where([data-kiwi-size=large]){--🥝spinner-size:2rem}.🥝-spinner:where([data-kiwi-size=xlarge]){--🥝spinner-size:3rem}}@layer base{.🥝-spinner-svg{block-size:inherit;inline-size:inherit;fill:none;animation:1s linear infinite both --🥝spinner-spin}@media (prefers-reduced-motion){.🥝-spinner-svg{animation-duration:4s;animation-timing-function:steps(4,end)}}}@keyframes --🥝spinner-spin{to{rotate:360deg}}@layer base{.🥝-select-root:where(:has(select.🥝-select),[data-kiwi-has-select=true]){isolation:isolate;align-items:center;display:inline-grid}.🥝-select-root:where(:has(select.🥝-select),[data-kiwi-has-select=true])>*{grid-area:1/1/-1/-1}}@layer base{.🥝-select.🥝-button:where(select:not([multiple])){appearance:none;--🥝button-padding-inline:8px calc(4px + 16px + 4px);--🥝ghost-inline-offset:8px}}@layer base{.🥝-select-arrow.🥝-disclosure-arrow{pointer-events:none;z-index:1;--🥝icon-color:var(--🌀select-arrow-state--default,var(--ids-color-icon-neutral-base))var(--🌀select-arrow-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀select-arrow-state--disabled,var(--ids-color-icon-neutral-disabled));justify-self:end;margin-inline-end:4px}}@layer states{@media (any-hover:hover){:where(.🥝-select:hover)+.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--hover)}}:where(.🥝-select:disabled)+.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--disabled)}}@layer base.🌀{.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--default);--🌀select-arrow-state--default:var(--🌀select-arrow-state, );--🌀select-arrow-state--hover:var(--🌀select-arrow-state, );--🌀select-arrow-state--disabled:var(--🌀select-arrow-state, )}}@layer base{.🥝-skeleton{background-color:var(--ids-color-bg-glow-on-surface-disabled);border-radius:var(--🥝skeleton-border-radius);block-size:var(--🥝skeleton-height);inline-size:var(--🥝skeleton-width)}@media (forced-colors:active){.🥝-skeleton{background-color:#0000;border:1px solid canvastext}}}@layer modifiers{.🥝-skeleton:where([data-kiwi-variant=text]){--🥝skeleton-width:100%}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=xsmall]){--🥝skeleton-height:.75rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=small]){--🥝skeleton-height:.875rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=medium]){--🥝skeleton-height:1rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=large]){--🥝skeleton-height:1.25rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=xlarge]){--🥝skeleton-height:1.5rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=xsmall]){--🥝skeleton-border-radius:2px;--🥝skeleton-height:.75rem;--🥝skeleton-width:.75rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=small]){--🥝skeleton-border-radius:2px;--🥝skeleton-height:1rem;--🥝skeleton-width:1rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=medium]){--🥝skeleton-border-radius:4px;--🥝skeleton-height:1.5rem;--🥝skeleton-width:1.5rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=large]){--🥝skeleton-border-radius:4px;--🥝skeleton-height:2rem;--🥝skeleton-width:2rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=xlarge]){--🥝skeleton-border-radius:4px;--🥝skeleton-height:3rem;--🥝skeleton-width:3rem}}@layer base{.🥝-switch{appearance:none;cursor:pointer;background-color:var(--🌀switch-state--default,var(--ids-color-bg-page-base))var(--🌀switch-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀switch-state--pressed,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀switch-state--checked,var(--ids-color-bg-accent-base))var(--🌀switch-state--checked-hover,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-strong-hover-\%)))var(--🌀switch-state--disabled,var(--ids-color-bg-page-base));border:1px solid #0000;border-color:var(--🌀switch-state--default,var(--ids-color-border-neutral-base))var(--🌀switch-state--hover,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀switch-state--pressed,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀switch-state--checked,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-hover-\%)))var(--🌀switch-state--checked-hover,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-hover-\%)))var(--🌀switch-state--disabled,var(--ids-color-border-glow-on-surface-disabled));border-radius:9999px;align-items:center;inline-size:2rem;transition:background-color .15s ease-out,border-color .15s ease-out;display:inline-grid;position:relative}.🥝-switch:before,.🥝-switch:after{content:"";grid-area:1/1/-1/-1;display:block}.🥝-switch:before{block-size:24px;inline-size:2rem;margin:-1px;position:absolute}.🥝-switch:after{aspect-ratio:var(--🥝switch-thumb-aspect-ratio);background-color:var(--🥝switch-thumb-color);block-size:1rem;box-shadow:var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--ids-color-border-shadow-base)inset,var(--ids-shadow-button-base-drop);justify-self:var(--🥝switch-thumb-placement);border-radius:9999px;margin:calc(.125rem - 1px)}@media (prefers-reduced-motion:no-preference){.🥝-switch:after{will-change:aspect-ratio;transition:aspect-ratio .15s ease-out}}@media (forced-colors:active){.🥝-switch:after{background-color:canvastext}}}@layer states{.🥝-switch{--🥝switch-thumb-color:var(--ids-color-bg-neutral-inverse);--🥝switch-thumb-placement:start;--🥝switch-thumb-aspect-ratio:1/1}@media (any-hover:hover){.🥝-switch:where(:hover){--🌀switch-state:var(--🌀switch-state--hover)}}.🥝-switch:where(:checked,[aria-checked=true]){--🌀switch-state:var(--🌀switch-state--checked);--🥝switch-thumb-placement:end}@media (any-hover:hover){.🥝-switch:where(:checked,[aria-checked=true]):where(:hover){--🌀switch-state:var(--🌀switch-state--checked-hover)}}.🥝-switch:where(:active){--🌀switch-state:var(--🌀switch-state--pressed);--🥝switch-thumb-aspect-ratio:1.75}.🥝-switch:where([disabled],:disabled,[aria-disabled=true]){--🌀switch-state:var(--🌀switch-state--disabled);--🥝switch-thumb-color:var(--ids-color-icon-neutral-disabled);cursor:not-allowed}.🥝-switch:where([disabled],:disabled,[aria-disabled=true]):after{box-shadow:none}}@layer base.🌀{.🥝-switch{--🌀switch-state:var(--🌀switch-state--default);--🌀switch-state--default:var(--🌀switch-state, );--🌀switch-state--hover:var(--🌀switch-state, );--🌀switch-state--pressed:var(--🌀switch-state, );--🌀switch-state--checked:var(--🌀switch-state, );--🌀switch-state--checked-hover:var(--🌀switch-state, );--🌀switch-state--disabled:var(--🌀switch-state, )}}@layer base{.🥝-table{flex-direction:column;display:flex}}@layer base{.🥝-table-header{color:var(--ids-color-text-neutral-secondary)}}@layer base{.🥝-table-body{flex-direction:column;display:flex}}@layer base{.🥝-table-row{border-block-end:1px solid var(--ids-color-border-neutral-muted);display:flex}}@layer base{:is(.🥝-table-caption,.🥝-table-cell){word-break:break-word;-webkit-hyphens:auto;hyphens:auto;align-items:center;column-gap:.5rem;min-block-size:3rem;padding:.5rem;display:flex}}@layer base{.🥝-table-cell{background-color:var(--🌀table-cell-state--default,var(--ids-color-bg-page-base))var(--🌀table-cell-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)));flex-grow:1;flex-basis:4rem;min-inline-size:4rem}}@layer states{@media (any-hover:hover){.🥝-table-cell:where(:hover){--🌀table-cell-state:var(--🌀table-cell-state--hover)}:where(.🥝-table-row:hover) .🥝-table-cell:where(:not([role=columnheader])){--🌀table-cell-state:var(--🌀table-cell-state--hover)}}}@layer base.🌀{.🥝-table-cell{--🌀table-cell-state:var(--🌀table-cell-state--default);--🌀table-cell-state--default:var(--🌀table-cell-state, );--🌀table-cell-state--hover:var(--🌀table-cell-state, )}}@layer base{.🥝-tab-list{--🥝tab-active-stripe-gap:6px;gap:8px;display:flex}}@layer modifiers{.🥝-tab-list[aria-orientation=horizontal]{padding-block-end:var(--🥝tab-active-stripe-gap)}}@layer base{.🥝-tab{font-size:var(--ids-font-size-12);color:var(--🥝tab-color);background-color:var(--🥝tab-bg);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;border:none;border-radius:4px;block-size:1.25rem;padding-inline:4px;transition:background-color .15s ease-out,color .15s ease-out;position:relative}@media (forced-colors:active){.🥝-tab{color:buttontext}}.🥝-tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝-tab-list[data-kiwi-tone=neutral]) .🥝-tab{--🥝tab-active-stripe-color:var(--ids-color-border-neutral-inverse);--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-neutral-primary))var(--🌀tab-state--selected,var(--ids-color-text-neutral-primary))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-color-bg-glow-on-surface-neutral-hover)}:where(.🥝-tab-list[data-kiwi-tone=accent]) .🥝-tab{--🥝tab-active-stripe-color:var(--ids-color-border-accent-strong);--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--ids-color-bg-glow-on-surface-accent-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-accent-strong))var(--🌀tab-state--selected,var(--ids-color-text-accent-strong))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-color-bg-glow-on-surface-accent-hover)}}@layer states{.🥝-tab:where([aria-selected=true]){--🌀tab-state:var(--🌀tab-state--selected)}.🥝-tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝tab-active-stripe-color);block-size:2px;inset-inline:4px;inset-block:auto calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}@media (prefers-reduced-motion:no-preference){.🥝-tab:where([aria-selected=true]):after{view-transition-name:var(--🥝tab-active-stripe-view-transition-name)}}@media (forced-colors:active){.🥝-tab:where([aria-selected=true]):after{background-color:selecteditem}}@media (any-hover:hover){.🥝-tab:where(:hover){--🌀tab-state:var(--🌀tab-state--hover)}}.🥝-tab:where([disabled],:disabled,[aria-disabled=true]){--🌀tab-state:var(--🌀tab-state--disabled);--🥝tab-active-stripe-color:var(--ids-color-border-neutral-disabled);cursor:not-allowed}@media (forced-colors:active){.🥝-tab:where([disabled],:disabled,[aria-disabled=true]){color:graytext}.🥝-tab:where([disabled],:disabled,[aria-disabled=true]):after{background-color:graytext}}}@layer base.🌀{.🥝-tab{--🌀tab-state:var(--🌀tab-state--default);--🌀tab-state--default:var(--🌀tab-state, );--🌀tab-state--hover:var(--🌀tab-state, );--🌀tab-state--selected:var(--🌀tab-state, );--🌀tab-state--disabled:var(--🌀tab-state, )}}@layer base{.🥝-tab-panel{outline-offset:-2px}.🥝-tab-panel:not([data-open]){display:none!important}}@layer modifiers{.🥝-text:where([data-kiwi-text-variant=display-lg]){font-size:var(--ids-font-size-48);line-height:1.1667}.🥝-text:where([data-kiwi-text-variant=display-md]){font-size:var(--ids-font-size-40);line-height:1.2}.🥝-text:where([data-kiwi-text-variant=display-sm]){font-size:var(--ids-font-size-32);line-height:1.25}.🥝-text:where([data-kiwi-text-variant=headline-lg]){font-size:var(--ids-font-size-28);line-height:1.2857}.🥝-text:where([data-kiwi-text-variant=headline-md]){font-size:var(--ids-font-size-24);line-height:1.3333}.🥝-text:where([data-kiwi-text-variant=headline-sm]){font-size:var(--ids-font-size-20);line-height:1.4}.🥝-text:where([data-kiwi-text-variant=body-lg]){font-size:var(--ids-font-size-16);line-height:1.5}.🥝-text:where([data-kiwi-text-variant=body-md]){font-size:var(--ids-font-size-14);line-height:1.4286}.🥝-text:where([data-kiwi-text-variant=body-sm]){font-size:var(--ids-font-size-12);line-height:1.3333}.🥝-text:where([data-kiwi-text-variant=caption-lg]){font-size:var(--ids-font-size-11);line-height:1.4545}.🥝-text:where([data-kiwi-text-variant=caption-md]){font-size:var(--ids-font-size-10);line-height:1.2}.🥝-text:where([data-kiwi-text-variant=caption-sm]){font-size:var(--ids-font-size-8);line-height:1.5}.🥝-text:where([data-kiwi-text-variant=mono-sm]){font-family:var(--ids-font-family-mono);font-size:var(--ids-font-size-12);line-height:1.3333}}@layer base{.🥝-text-box{cursor:var(--🥝text-box-cursor);font-size:var(--ids-font-size-12);background-color:var(--🥝text-box-background-color);min-block-size:1.5rem;min-inline-size:0;box-shadow:var(--ids-shadow-input-base);color:var(--ids-color-text-neutral-primary);--🥝text-box-cursor:text;--🥝text-box-background-color:var(--🌀text-box-state--default,var(--ids-color-bg-page-base))var(--🌀text-box-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀text-box-state--disabled,var(--ids-color-bg-elevation-control));--🥝text-box-border-color:var(--🌀text-box-state--default,var(--ids-color-border-neutral-base))var(--🌀text-box-state--hover,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀text-box-state--disabled,var(--ids-color-border-glow-on-surface-disabled));border-radius:4px;padding-inline:8px;transition:background-color .15s ease-out,border-color .15s ease-out}.🥝-text-box:where(:not(input,textarea)){align-items:center;gap:4px;display:inline-flex;position:relative}.🥝-text-box:where(:not(input,textarea)):before{content:"";border-radius:inherit;pointer-events:none;border:1px solid var(--🥝text-box-border-color);transition:border-color .15s ease-out;position:absolute;inset:0}.🥝-text-box:where(input,textarea),.🥝-text-box :where(input,textarea){appearance:none;border:1px solid var(--🥝text-box-border-color);min-inline-size:0;cursor:var(--🥝text-box-cursor);padding-block:max(0px,.75rem - 1px - .5lh);line-height:1.3}:is(.🥝-text-box:where(input,textarea),.🥝-text-box :where(input,textarea))::placeholder{color:var(--ids-color-text-neutral-secondary);opacity:1;-webkit-user-select:none;user-select:none}.🥝-text-box:where(textarea),.🥝-text-box :where(textarea){resize:vertical;resize:block}.🥝-text-box :where(input,textarea){background-color:var(--🥝text-box-background-color);outline:unset;border:none;flex:999;align-self:stretch;transition:background-color .15s ease-out}}@layer states{@media (any-hover:hover){.🥝-text-box:where(:hover){--🌀text-box-state:var(--🌀text-box-state--hover)}}.🥝-text-box:where(:has(:is(input,textarea):focus-visible),:is(input,textarea):focus-visible){outline:2px solid var(--ids-color-border-accent-base);outline-offset:1px;--🥝text-box-border-color:var(--ids-color-border-accent-strong);--🥝icon-color:var(--ids-color-icon-accent-strong)}@supports not selector(:has(+ *)){.🥝-text-box:where(:not(input,textarea):focus-within){outline:2px solid var(--ids-color-border-accent-base);outline-offset:1px;--🥝text-box-border-color:var(--ids-color-border-accent-strong);--🥝icon-color:var(--ids-color-icon-accent-strong)}}.🥝-text-box:where([disabled],:disabled,[aria-disabled=true],[data-kiwi-disabled=true],:has(:is(input,textarea):disabled)){--🌀text-box-state:var(--🌀text-box-state--disabled);box-shadow:none;color:var(--ids-color-text-neutral-disabled);--🥝text-box-cursor:not-allowed}}@layer base.🌀{.🥝-text-box{--🌀text-box-state:var(--🌀text-box-state--default);--🌀text-box-state--default:var(--🌀text-box-state, );--🌀text-box-state--hover:var(--🌀text-box-state, );--🌀text-box-state--disabled:var(--🌀text-box-state, )}}@layer base{.🥝-text-box-decoration{flex-shrink:0}}@layer base{.🥝-tooltip{background-color:var(--ids-color-bg-elevation-emphasis);box-shadow:var(--ids-shadow-tooltip-base);color:var(--ids-color-text-neutral-emphasis);border:1px solid var(--ids-color-border-elevation-base);min-block-size:1rem;max-inline-size:12.25rem;font-size:var(--ids-font-size-12);border-radius:.25rem;justify-content:center;gap:.25rem;padding-block:calc(.25rem - 1px);padding-inline:calc(.625rem - 1px);line-height:1.3333;display:flex}}@layer base{.🥝-tree{background-color:var(--ids-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝-tree-item{min-inline-size:max-content;position:relative}}@layer states{.🥝-tree-item:focus-visible{isolation:isolate;outline:none}.🥝-tree-item:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:2px solid var(--ids-color-border-accent-strong);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝-tree-item:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝tree-item-all-actions-visibility:hidden}@supports not selector(:has(+ *)){.🥝-tree-item{--🥝tree-item-all-actions-visibility:visible}}}}@layer base{.🥝-tree-item-node.🥝-list-item{isolation:isolate;padding-inline-start:calc(8px + 6px*(var(--🥝tree-item-level) - 1));padding-inline-end:0;position:relative}}@layer states{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active)}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-expanded=false]){--🥝tree-chevron-rotate:-.25turn}.🥝-tree-item-node.🥝-list-item:where(:not([data-kiwi-expanded])){--🥝tree-item-expander-visibility:hidden}}@layer base{.🥝-tree-item-content.🥝-list-item-content{white-space:nowrap}}@layer base{.🥝-tree-item-description.🥝-list-item-content{color:var(--🌀list-item-state--default,var(--ids-color-text-neutral-secondary))}}@layer base{.🥝-tree-item-actions.🥝-list-item-decoration{background-color:var(--ids-color-bg-page-base);visibility:var(--🥝tree-item-all-actions-visibility,var(--🥝tree-item-action-visibility));align-self:stretch;padding-inline-end:4px;transition:visibility 16ms;display:inline-flex;position:sticky;inset-inline-end:0}.🥝-tree-item-actions.🥝-list-item-decoration:before{content:"";background-color:var(--🥝list-item-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝-tree-item-actions.🥝-list-item-decoration:where(:has(.🥝-tree-item-action[data-kiwi-visible=true])){--🥝tree-item-all-actions-visibility:visible}}@layer base{.🥝-tree-item-action.🥝-icon-button{visibility:var(--🥝tree-item-action-visibility)}}@layer modifiers{.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=false]){--🥝tree-item-action-visibility:hidden}.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=true]){--🥝tree-item-action-visibility:visible}}@layer base{.🥝-tree-item-expander.🥝-icon-button{visibility:var(--🥝tree-item-expander-visibility);z-index:1}}@layer base{.🥝-tree-chevron{rotate:var(--🥝tree-chevron-rotate)}@media (prefers-reduced-motion:no-preference){.🥝-tree-chevron{transition:rotate .15s ease-in-out}}}@layer base{.🥝-tree-item-decoration{align-items:center;gap:.25rem;display:flex}}@layer base{.🥝-field{--🥝field-description-column:label-start/label-end;grid-template-columns:[label-start]auto[label-end control-start]auto[control-end];justify-content:start;align-items:center;gap:4px;display:grid}.🥝-field:where([data-kiwi-control-type=checkable][data-kiwi-label-placement=after]){grid-template-columns:[control-start]auto[control-end label-start]auto[label-end]}.🥝-field:where([data-kiwi-control-type=textlike]){--🥝field-description-column:control-start/control-end;align-items:baseline}.🥝-field:where([data-kiwi-control-type=textlike]):where(:not([data-kiwi-layout=inline])){grid-template-columns:[label-start control-start]auto[label-end control-end]}.🥝-field :where(.🥝-description){grid-column:var(--🥝field-description-column)}}}`; | ||
var styles_default = String.raw`@layer itwinui.components.base,itwinui.components.modifiers,itwinui.components.states;@layer itwinui.components{@layer base{.🥝-icon{width:var(--🥝icon-size,1rem);height:var(--🥝icon-size,1rem);color:var(--🥝icon-color);flex-shrink:0;transition:color .15s ease-out}}@layer modifiers{.🥝-icon:where([data-kiwi-size=regular]){--🥝icon-size:1rem}.🥝-icon:where([data-kiwi-size=large]){--🥝icon-size:1.5rem}}@layer base{.🥝-disclosure-arrow{rotate:var(--🥝disclosure-arrow-rotate);margin-inline-end:-8px}@media (prefers-reduced-motion:no-preference){.🥝-disclosure-arrow{transition:rotate .15s ease-in-out}}}@layer base{.🥝-ghost-aligner:where([data-kiwi-ghost-align=inline]){margin-inline:calc(-1*var(--🥝ghost-inline-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=inline-start]){margin-inline-start:calc(-1*var(--🥝ghost-inline-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=inline-end]){margin-inline-end:calc(-1*var(--🥝ghost-inline-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=block]){margin-block:calc(-1*var(--🥝ghost-block-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=block-start]){margin-block-start:calc(-1*var(--🥝ghost-block-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=block-end]){margin-block-end:calc(-1*var(--🥝ghost-block-offset))}}@layer base{.🥝-list-item{cursor:pointer;line-height:1.2;font-size:var(--ids-font-size-12);min-block-size:var(--🥝list-item-height,1.75rem);background-color:var(--🥝list-item-background-color);--🥝list-item-background-color:var(--🌀list-item-state--default,transparent)var(--🌀list-item-state--hover,var(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-bg-glow-on-surface-neutral-pressed))var(--🌀list-item-state--active,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--active-hover,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--disabled,transparent);color:var(--🥝list-item-color,var(--🌀list-item-state--default,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--hover,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--pressed,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--active,var(--ids-color-text-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-text-accent-strong))var(--🌀list-item-state--disabled,var(--ids-color-text-neutral-disabled)));--🥝icon-color:var(--🌀list-item-state--default,var(--ids-color-icon-neutral-base))var(--🌀list-item-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--active,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--disabled,var(--ids-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;padding-inline:.5rem;display:grid}}@layer states{@media (any-hover:hover){.🥝-list-item:where(:hover){--🌀list-item-state:var(--🌀list-item-state--hover)}}.🥝-list-item:where(:active){--🌀list-item-state:var(--🌀list-item-state--pressed)}.🥝-list-item:where([disabled],:disabled,[aria-disabled=true]){--🌀list-item-state:var(--🌀list-item-state--disabled);cursor:not-allowed}@media (forced-colors:active){.🥝-list-item:where([disabled],:disabled,[aria-disabled=true]){color:graytext;--🥝icon-color:GrayText}}}@layer modifiers{.🥝-list-item:where(:has(>:nth-child(2 of .🥝-list-item-content))){--🥝list-item-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝-list-item{--🌀list-item-state:var(--🌀list-item-state--default);--🌀list-item-state--default:var(--🌀list-item-state, );--🌀list-item-state--hover:var(--🌀list-item-state, );--🌀list-item-state--pressed:var(--🌀list-item-state, );--🌀list-item-state--active:var(--🌀list-item-state, );--🌀list-item-state--active-hover:var(--🌀list-item-state, );--🌀list-item-state--disabled:var(--🌀list-item-state, )}}@layer base{.🥝-list-item-content{grid-column:content}}@layer base{.🥝-list-item-decoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:.25rem;display:flex}:where(.🥝-list-item-content)~.🥝-list-item-decoration{grid-column:decoration-after;margin-inline:.25rem 0}}@layer base{.🥝-anchor{cursor:pointer;font-size:var(--ids-font-size-12);text-underline-offset:var(--🌀anchor-state--default,2px)var(--🌀anchor-state--hover,3px)var(--🌀anchor-state--pressed,3px);-webkit-text-decoration-color:var(--🌀anchor-state--default,currentColor)var(--🌀anchor-state--hover,currentColor)var(--🌀anchor-state--pressed,transparent);text-decoration-color:var(--🌀anchor-state--default,currentColor)var(--🌀anchor-state--hover,currentColor)var(--🌀anchor-state--pressed,transparent);color:var(--🥝anchor-color,var(--ids-color-text-neutral-primary));border-radius:4px;font-weight:500;text-decoration-line:underline;transition:color .15s ease-out,text-decoration-color .15s ease-out,text-underline-offset .15s ease-out}.🥝-anchor:where(button){background:0 0;border:none}}@layer modifiers{.🥝-anchor:where([data-kiwi-tone=accent]){--🥝anchor-color:var(--🌀anchor-state--default,var(--ids-color-text-accent-strong))var(--🌀anchor-state--hover,color-mix(in oklch,var(--ids-color-text-accent-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-hover-\%)))var(--🌀anchor-state--pressed,color-mix(in oklch,var(--ids-color-text-accent-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-pressed-\%)))}.🥝-anchor:where([data-kiwi-tone=critical]){--🥝anchor-color:var(--🌀anchor-state--default,var(--ids-color-text-critical-base))var(--🌀anchor-state--hover,color-mix(in oklch,var(--ids-color-text-critical-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-hover-\%)))var(--🌀anchor-state--pressed,color-mix(in oklch,var(--ids-color-text-critical-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-pressed-\%)))}}@layer states{@media (any-hover:hover){.🥝-anchor:where(:hover){--🌀anchor-state:var(--🌀anchor-state--hover)}}.🥝-anchor:where(:active){--🌀anchor-state:var(--🌀anchor-state--pressed)}.🥝-anchor:where(:focus-visible){outline-offset:2px}.🥝-anchor:where([disabled],:disabled,[aria-disabled=true]){--🥝anchor-color:var(--ids-color-text-neutral-disabled);cursor:not-allowed;text-decoration:none}}@layer base.🌀{.🥝-anchor{--🌀anchor-state:var(--🌀anchor-state--default);--🌀anchor-state--default:var(--🌀anchor-state, );--🌀anchor-state--hover:var(--🌀anchor-state, );--🌀anchor-state--pressed:var(--🌀anchor-state, )}}@layer base{.🥝-avatar{--🥝avatar-background-color:var(--ids-color-bg-mono-base);block-size:var(--🥝avatar-size);inline-size:var(--🥝avatar-size);background-color:var(--🥝avatar-background-color);color:var(--ids-color-text-neutral-emphasis);-webkit-user-select:none;user-select:none;border-radius:50%;place-items:center;display:inline-grid;position:relative;overflow:hidden}@media (forced-colors:active){.🥝-avatar{border:1px solid canvastext}}.🥝-avatar:after{content:"";border-radius:inherit;box-shadow:0px 0px 0px 1px var(--ids-color-border-glow-strong-default)inset;position:absolute;inset:0}.🥝-avatar>img{background-color:inherit;block-size:inherit;inline-size:inherit;object-fit:cover;object-position:center}}@layer modifiers{.🥝-avatar:where([data-kiwi-size=small]){--🥝avatar-size:1rem;--🥝avatar-font-size:var(--ids-font-size-8);--🥝icon-size:.75rem}.🥝-avatar:where([data-kiwi-size=medium]){--🥝avatar-size:1.5rem;--🥝avatar-font-size:var(--ids-font-size-10);--🥝icon-size:1rem}.🥝-avatar:where([data-kiwi-size=large]){--🥝avatar-size:2rem;--🥝avatar-font-size:var(--ids-font-size-12);--🥝icon-size:1rem}.🥝-avatar:where([data-kiwi-size=xlarge]){--🥝avatar-size:3rem;--🥝avatar-font-size:var(--ids-font-size-16);--🥝icon-size:1.5rem}}@layer base{.🥝-avatar-initials{font-size:var(--🥝avatar-font-size);text-align:center;text-transform:uppercase;font-weight:600}}@layer base{.🥝-badge{white-space:nowrap;box-shadow:0px 0px 0px 1px var(--🥝badge-border-color)inset;background-color:var(--🥝badge-background-color);color:var(--🥝badge-text-color);block-size:1.25rem;font-weight:500;font-size:var(--ids-font-size-12);border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;padding-inline:8px;line-height:1.3333;display:inline-flex}@media (forced-colors:active){.🥝-badge{border:1px solid}}}@layer modifiers{.🥝-badge:where([data-kiwi-variant=solid]){--🥝badge-border-color:var(--ids-color-border-glow-strong-default);--🥝badge-text-color:var(--ids-color-text-neutral-emphasis)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=neutral]){--🥝badge-background-color:var(--ids-color-bg-mono-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=info]){--🥝badge-background-color:var(--ids-color-bg-info-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=positive]){--🥝badge-background-color:var(--ids-color-bg-positive-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=attention]){--🥝badge-background-color:var(--ids-color-bg-attention-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=critical]){--🥝badge-background-color:var(--ids-color-bg-critical-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=accent]){--🥝badge-background-color:var(--ids-color-bg-accent-base)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=neutral]){--🥝badge-background-color:var(--ids-color-bg-mono-muted);--🥝badge-border-color:var(--ids-color-border-mono-muted);--🥝badge-text-color:var(--ids-color-text-mono-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=info]){--🥝badge-background-color:var(--ids-color-bg-info-muted);--🥝badge-border-color:var(--ids-color-border-info-muted);--🥝badge-text-color:var(--ids-color-text-info-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=positive]){--🥝badge-background-color:var(--ids-color-bg-positive-muted);--🥝badge-border-color:var(--ids-color-border-positive-muted);--🥝badge-text-color:var(--ids-color-text-positive-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=attention]){--🥝badge-background-color:var(--ids-color-bg-attention-muted);--🥝badge-border-color:var(--ids-color-border-attention-muted);--🥝badge-text-color:var(--ids-color-text-attention-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=critical]){--🥝badge-background-color:var(--ids-color-bg-critical-muted);--🥝badge-border-color:var(--ids-color-border-critical-muted);--🥝badge-text-color:var(--ids-color-text-critical-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=accent]){--🥝badge-background-color:var(--ids-color-bg-accent-muted);--🥝badge-border-color:var(--ids-color-border-accent-muted);--🥝badge-text-color:var(--ids-color-text-accent-faded)}.🥝-badge:where([data-kiwi-variant=outline]){--🥝badge-background-color:transparent}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=neutral]){--🥝badge-text-color:var(--ids-color-text-mono-base);--🥝badge-border-color:var(--ids-color-border-mono-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=info]){--🥝badge-text-color:var(--ids-color-text-info-base);--🥝badge-border-color:var(--ids-color-border-info-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=positive]){--🥝badge-text-color:var(--ids-color-text-positive-base);--🥝badge-border-color:var(--ids-color-border-positive-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=attention]){--🥝badge-text-color:var(--ids-color-text-attention-base);--🥝badge-border-color:var(--ids-color-border-attention-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=critical]){--🥝badge-text-color:var(--ids-color-text-critical-base);--🥝badge-border-color:var(--ids-color-border-critical-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=accent]){--🥝badge-text-color:var(--ids-color-text-accent-base);--🥝badge-border-color:var(--ids-color-border-accent-base)}}@layer base{.🥝-button{white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;line-height:1.2;font-size:var(--ids-font-size-12);block-size:1.5rem;padding-inline:var(--🥝button-padding-inline,12px);--🥝ghost-inline-offset:12px;--🥝ghost-block-offset:4px;background-color:var(--🥝button-background-color);color:var(--🥝button-color,var(--ids-color-text-neutral-primary));-webkit-tap-highlight-color:color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%));--🥝icon-color:var(--🌀button-state--default,var(--ids-color-icon-neutral-base))var(--🌀button-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀button-state--pressed,var(--ids-color-icon-neutral-hover))var(--🌀button-state--active,var(--ids-color-icon-accent-strong))var(--🌀button-state--disabled,var(--ids-color-icon-neutral-disabled));border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding-block:4px;font-weight:500;text-decoration:none;transition:background-color .15s ease-out;display:inline-flex;position:relative}@media (forced-colors:active){.🥝-button{color:buttontext;--🥝icon-color:ButtonText;background-color:buttonface;border:1px solid buttonborder}}}@layer modifiers{.🥝-button:where([data-kiwi-variant=solid]){--🥝button-background-color:var(--🌀button-state--default,var(--🥝button-bg--solid-default))var(--🌀button-state--hover,color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀button-state--disabled,var(--ids-color-bg-glow-on-surface-disabled));box-shadow:var(--🌀button-state--default,var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--🥝button-border-color)inset,var(--ids-shadow-button-base-drop))var(--🌀button-state--hover,var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--🥝button-border-color)inset,var(--ids-shadow-button-base-drop))var(--🌀button-state--pressed,0px 0px 0px 1px var(--🥝button-border-color)inset)var(--🌀button-state--disabled,none)}.🥝-button:where([data-kiwi-variant=solid]):where([data-kiwi-tone=neutral]){--🥝button-bg--solid-default:var(--ids-color-bg-neutral-base);--🥝button-border-color:var(--🌀button-state--default,var(--ids-color-border-shadow-base))var(--🌀button-state--hover,color-mix(in oklch,var(--ids-color-border-shadow-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--ids-color-border-shadow-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀button-state--disabled,transparent)}.🥝-button:where([data-kiwi-variant=solid]):where([data-kiwi-tone=accent]){--🥝button-bg--solid-default:var(--ids-color-bg-accent-base);--🥝button-border-color:var(--🌀button-state--default,var(--ids-color-border-shadow-strong))var(--🌀button-state--hover,color-mix(in oklch,var(--ids-color-border-shadow-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--ids-color-border-shadow-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-pressed-\%)))var(--🌀button-state--disabled,transparent);--🥝button-color:var(--ids-color-text-neutral-emphasis);--🥝icon-color:var(--🌀button-state--default,var(--ids-color-icon-neutral-emphasis))var(--🌀button-state--hover,var(--ids-color-icon-neutral-emphasis))var(--🌀button-state--pressed,var(--ids-color-icon-neutral-emphasis))var(--🌀button-state--disabled,var(--ids-color-icon-neutral-disabled))}@media (forced-colors:active){.🥝-button:where([data-kiwi-variant=solid]):where([data-kiwi-tone=accent]){--🥝icon-color:ButtonText}}.🥝-button:where([data-kiwi-variant=outline]){--🥝button-background-color:var(--🌀button-state--default,transparent)var(--🌀button-state--hover,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀button-state--disabled,transparent);--🥝button-border-color:var(--🌀button-state--default,var(--ids-color-border-neutral-base))var(--🌀button-state--hover,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀button-state--disabled,var(--ids-color-border-glow-on-surface-disabled));box-shadow:0px 0px 0px 1px var(--🥝button-border-color)inset}.🥝-button:where([data-kiwi-variant=ghost]){--🥝button-background-color:var(--🌀button-state--default,transparent)var(--🌀button-state--hover,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀button-state--active,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀button-state--disabled,transparent)}}@layer states{@media (any-hover:hover){.🥝-button:where(:hover){--🌀button-state:var(--🌀button-state--hover)}}.🥝-button:where(:active){--🌀button-state:var(--🌀button-state--pressed)}.🥝-button:where([data-kiwi-variant=ghost][aria-pressed=true]){--🌀button-state:var(--🌀button-state--active)}@media (forced-colors:active){.🥝-button:where([data-kiwi-variant=ghost][aria-pressed=true]){color:selecteditemtext;--🥝icon-color:SelectedItemText;background-color:selecteditem}}.🥝-button:where([disabled],:disabled,[aria-disabled=true]){--🌀button-state:var(--🌀button-state--disabled);color:var(--ids-color-text-neutral-disabled);cursor:not-allowed}@media (forced-colors:active){.🥝-button:where([disabled],:disabled,[aria-disabled=true]){color:graytext;--🥝icon-color:GrayText;border-color:graytext}}}@layer base.🌀{.🥝-button{--🌀button-state:var(--🌀button-state--default);--🌀button-state--default:var(--🌀button-state, );--🌀button-state--hover:var(--🌀button-state, );--🌀button-state--pressed:var(--🌀button-state, );--🌀button-state--active:var(--🌀button-state, );--🌀button-state--disabled:var(--🌀button-state, )}}@layer base{.🥝-checkbox{--🥝checkbox-color-svg:var(--ids-color-icon-neutral-emphasis);--🥝checkbox-border-radius:4px;--🥝checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--🥝checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M11.2 5.6 6.8 10l-2-2\"/></svg>");--🥝checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M5 8h6.5\"/></svg>");appearance:none;cursor:pointer;background-color:var(--🌀checkbox-visual-state--default,var(--ids-color-bg-neutral-base))var(--🌀checkbox-visual-state--hover,color-mix(in oklch,var(--ids-color-bg-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀checkbox-visual-state--checked,var(--ids-color-bg-accent-base))var(--🌀checkbox-visual-state--checked-hover,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀checkbox-visual-state--disabled,var(--ids-color-bg-glow-on-surface-disabled));border-radius:var(--🥝checkbox-border-radius);block-size:1rem;inline-size:1rem;color:var(--🌀checkbox-aria-state--unchecked,transparent)var(--🌀checkbox-aria-state--checked,var(--🥝checkbox-color-svg))var(--🌀checkbox-aria-state--indeterminate,var(--🥝checkbox-color-svg));box-shadow:var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--🥝checkbox-border-color)inset,var(--ids-shadow-button-base-drop);--🥝checkbox-border-color:var(--🌀checkbox-visual-state--default,var(--ids-color-border-shadow-base))var(--🌀checkbox-visual-state--hover,color-mix(in oklch,var(--ids-color-border-shadow-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀checkbox-visual-state--checked,var(--ids-color-border-shadow-strong))var(--🌀checkbox-visual-state--checked-hover,color-mix(in oklch,var(--ids-color-border-shadow-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀checkbox-visual-state--disabled,transparent);--🥝checkbox-mask-image:var(--🌀checkbox-aria-state--unchecked,var(--🥝checkbox-unchecked-svg))var(--🌀checkbox-aria-state--checked,var(--🥝checkbox-checkmark-svg))var(--🌀checkbox-aria-state--indeterminate,var(--🥝checkbox-indeterminate-svg));transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out,--🥝checkbox-border-color .15s ease-out;position:relative}.🥝-checkbox:before,.🥝-checkbox:after{content:"";position:absolute;inset:0}.🥝-checkbox:before{inset:calc(.5rem - 12px)}.🥝-checkbox:after{-webkit-mask-image:var(--🥝checkbox-mask-image,initial);mask-image:var(--🥝checkbox-mask-image,initial);background-color:currentColor;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@media (forced-colors:active){.🥝-checkbox:after{background-color:canvastext}}}@layer states{@media (forced-colors:active){.🥝-checkbox{border:1px solid canvastext}}@media (any-hover:hover){.🥝-checkbox:where(:hover){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--hover)}}.🥝-checkbox:where(:checked,[aria-checked=true]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked);--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--checked)}@media (any-hover:hover){.🥝-checkbox:where(:checked,[aria-checked=true]):where(:hover){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked-hover)}}.🥝-checkbox:where(:indeterminate,[aria-checked=mixed]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked);--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--indeterminate)}.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--disabled);--🥝checkbox-color-svg:var(--ids-color-icon-neutral-disabled);cursor:not-allowed;box-shadow:none}@media (forced-colors:active){.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]){border-color:graytext}.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]):after{background-color:graytext}}}@layer base.🌀{.🥝-checkbox{--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--default);--🌀checkbox-visual-state--default:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--hover:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--checked:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--checked-hover:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--disabled:var(--🌀checkbox-visual-state, );--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--unchecked);--🌀checkbox-aria-state--unchecked:var(--🌀checkbox-aria-state, );--🌀checkbox-aria-state--checked:var(--🌀checkbox-aria-state, );--🌀checkbox-aria-state--indeterminate:var(--🌀checkbox-aria-state, )}}@layer base{.🥝-chip{isolation:isolate;--🥝chip-padding-inline:.5rem;padding-inline:var(--🥝chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝-chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--ids-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝-chip:where([data-kiwi-variant=solid]){background-color:var(--ids-color-bg-neutral-base)}.🥝-chip:where([data-kiwi-variant=outline]){background-color:var(--ids-color-bg-page-base)}}@layer base{.🥝-chip-dismiss-button.🥝-icon-button{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝chip-padding-inline));position:relative}}@layer modifiers{.🥝-description.🥝-text:where([data-kiwi-tone=neutral]){color:var(--ids-color-text-neutral-tertiary)}.🥝-description.🥝-text:where([data-kiwi-tone=critical]){color:var(--ids-color-text-critical-base)}}.🥝-divider{background-color:var(--ids-color-border-neutral-muted);flex:none;align-self:stretch}@media (forced-colors:active){.🥝-divider{background-color:canvastext}}.🥝-divider:is(hr){border:none;margin:0}.🥝-divider:not([aria-orientation=vertical],[data-kiwi-orientation=vertical]){block-size:1px}.🥝-divider:is([aria-orientation=vertical],[data-kiwi-orientation=vertical]){min-block-size:100%;inline-size:1px}@layer base{.🥝-dropdown-menu{background-color:var(--ids-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);box-shadow:var(--ids-shadow-surface-xl);border-radius:8px;flex-direction:column;padding:4px;display:flex}@media (forced-colors:active){.🥝-dropdown-menu{border:1px solid canvastext}}}@layer states{.🥝-dropdown-menu-button:where([aria-expanded=true]){--🥝disclosure-arrow-rotate:.5turn}}@layer base{.🥝-dropdown-menu-item.🥝-list-item{border-radius:4px}}@layer states{.🥝-dropdown-menu-item.🥝-list-item:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝dropdown-menu-checkmark-visibility:hidden}}@layer base{.🥝-dropdown-menu-checkmark{visibility:var(--🥝dropdown-menu-checkmark-visibility)}}@layer base{.🥝-dropdown-menu-item-shortcuts{margin-inline-start:.5rem}}@layer base{.🥝-icon-button.🥝-button{aspect-ratio:1;--🥝button-padding-inline:4px;--🥝ghost-inline-offset:4px}}@layer modifiers{.🥝-icon-button.🥝-button:where([data-kiwi-dot=true]):after{content:"";background-color:var(--ids-color-icon-accent-strong);border-radius:9999px;block-size:4px;inline-size:4px;display:inline-block;position:absolute;inset-block-start:2px;inset-inline-end:2px}@media (forced-colors:active){.🥝-icon-button.🥝-button:where([data-kiwi-dot=true]):after{background-color:canvastext}}@media (forced-colors:active){.🥝-icon-button.🥝-button:where([data-kiwi-dot=true][aria-pressed=true]):after{background-color:selecteditemtext}}}@layer base{.🥝-kbd{color:var(--ids-color-text-neutral-secondary);min-block-size:16px;font-family:inherit;font-weight:500;font-size:var(--ids-font-size-12);flex-shrink:0;justify-content:center;align-items:center;line-height:1.3333;display:inline-flex}}@layer modifiers{.🥝-kbd:where([data-kiwi-variant=solid],[data-kiwi-variant=muted]){background-color:var(--ids-color-bg-neutral-base);border-radius:4px;padding-inline:4px}.🥝-kbd:where([data-kiwi-variant=solid]){box-shadow:var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--ids-color-border-shadow-base)inset,var(--ids-shadow-button-base-drop)}.🥝-kbd:where([data-kiwi-variant=ghost]){color:var(--ids-color-text-neutral-tertiary)}}@layer base{.🥝-label{color:var(--ids-color-text-neutral-secondary);cursor:default;font-size:var(--ids-font-size-12)}.🥝-label:is(label){cursor:pointer}}@layer states{.🥝-label:has(+:where(:disabled,[disabled],[aria-disabled=true])){color:var(--ids-color-text-neutral-disabled)}.🥝-label:has(+:where(:disabled,[disabled],[aria-disabled=true])):is(label){cursor:not-allowed}}@layer base{.🥝-progress-bar{block-size:var(--🥝progress-bar-size);contain:strict;background-color:var(--🥝progress-bar-track-color);border-radius:9999px;inline-size:100%;display:grid}.🥝-progress-bar:before{content:"";block-size:inherit;inline-size:var(--🥝progress-bar-fill-size);border-radius:inherit;background-color:var(--🥝progress-bar-fill-color);animation:var(--🥝progress-bar-animation)}}@layer modifiers{.🥝-progress-bar:where([data-kiwi-tone=neutral]){--🥝progress-bar-fill-color:var(--ids-color-icon-neutral-base);--🥝progress-bar-track-color:var(--ids-color-border-page-base)}.🥝-progress-bar:where([data-kiwi-tone=accent]){--🥝progress-bar-fill-color:var(--ids-color-icon-accent-strong);--🥝progress-bar-track-color:var(--ids-color-bg-accent-muted)}.🥝-progress-bar:where([data-kiwi-size=small]){--🥝progress-bar-size:.063rem}.🥝-progress-bar:where([data-kiwi-size=medium]){--🥝progress-bar-size:.125rem}.🥝-progress-bar:where([data-kiwi-size=large]){--🥝progress-bar-size:.25rem}.🥝-progress-bar:where([data-kiwi-variant=indeterminate]){--🥝progress-bar-animation:calc(4*1.5s)--🥝progress-bar-animation-indeterminate steps(4,end)infinite;--🥝progress-bar-fill-size:25%}@media (prefers-reduced-motion:no-preference){.🥝-progress-bar:where([data-kiwi-variant=indeterminate]){--🥝progress-bar-animation:1.5s --🥝progress-bar-animation-indeterminate cubic-bezier(.5,0,.5,1)4,calc(1.5s*2)--🥝progress-bar-animation-indeterminate-slow cubic-bezier(.5,0,.5,1)calc(4*1.5s)infinite}}@media (forced-colors:active){.🥝-progress-bar{--🥝progress-bar-fill-color:CanvasText;--🥝progress-bar-track-color:Canvas}}}@keyframes --🥝progress-bar-animation-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}@keyframes --🥝progress-bar-animation-indeterminate-slow{0%{transform:translate(-100%)}50%{transform:translate(-95%)}to{transform:translate(400%)}}.🥝-radio.🥝-checkbox{--🥝checkbox-border-radius:9999px;--🥝checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" ><circle cx=\"8\" cy=\"8\" r=\"4\" /></svg>");--🥝checkbox-indeterminate-svg:var(--🥝checkbox-unchecked-svg)}@layer states{.🥝-radio.🥝-checkbox:where(:indeterminate){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--default)}}@layer base{.🥝-spinner{block-size:var(--🥝spinner-size);inline-size:var(--🥝spinner-size);display:inline-block}}@layer modifiers{.🥝-spinner:where([data-kiwi-tone=neutral]){--🥝spinner-fill-color:var(--ids-color-icon-neutral-base);--🥝spinner-track-color:var(--ids-color-border-page-base)}.🥝-spinner:where([data-kiwi-tone=accent]){--🥝spinner-fill-color:var(--ids-color-icon-accent-strong);--🥝spinner-track-color:var(--ids-color-bg-accent-muted)}.🥝-spinner:where([data-kiwi-size=small]){--🥝spinner-size:1rem}.🥝-spinner:where([data-kiwi-size=medium]){--🥝spinner-size:1.5rem}.🥝-spinner:where([data-kiwi-size=large]){--🥝spinner-size:2rem}.🥝-spinner:where([data-kiwi-size=xlarge]){--🥝spinner-size:3rem}.🥝-spinner:where([data-kiwi-variant=indeterminate]){--🥝spinner-animation:calc(4*1s)--🥝spinner-animation-indeterminate steps(4,end)infinite;--🥝spinner-dash-array:25 75}@media (prefers-reduced-motion:no-preference){.🥝-spinner:where([data-kiwi-variant=indeterminate]){--🥝spinner-animation:1s --🥝spinner-animation-indeterminate linear 4,calc(1s*2)--🥝spinner-animation-indeterminate-slow linear calc(4*1s)infinite}}@media (forced-colors:active){.🥝-spinner{--🥝spinner-fill-color:CanvasText;--🥝spinner-track-color:Canvas}}}@layer base{.🥝-spinner-svg{block-size:inherit;inline-size:inherit;fill:none}}.🥝-spinner-svg-track{stroke:var(--🥝spinner-track-color)}.🥝-spinner-svg-fill{animation:var(--🥝spinner-animation);stroke:var(--🥝spinner-fill-color);stroke-dasharray:var(--🥝spinner-dash-array);stroke-dashoffset:25px;stroke-linecap:round;transform-box:fill-box;transform-origin:50%}@keyframes --🥝spinner-animation-indeterminate{to{rotate:360deg}}@keyframes --🥝spinner-animation-indeterminate-slow{50%{rotate:30deg}to{rotate:360deg}}@layer base{.🥝-select-root:where(:has(select.🥝-select),[data-kiwi-has-select=true]){isolation:isolate;align-items:center;display:inline-grid}.🥝-select-root:where(:has(select.🥝-select),[data-kiwi-has-select=true])>*{grid-area:1/1/-1/-1}}@layer base{.🥝-select.🥝-button:where(select:not([multiple])){appearance:none;--🥝button-padding-inline:8px calc(4px + 16px + 4px);--🥝ghost-inline-offset:8px}}@layer base{.🥝-select-arrow.🥝-disclosure-arrow{pointer-events:none;z-index:1;--🥝icon-color:var(--🌀select-arrow-state--default,var(--ids-color-icon-neutral-base))var(--🌀select-arrow-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀select-arrow-state--disabled,var(--ids-color-icon-neutral-disabled));justify-self:end;margin-inline-end:4px}}@layer states{@media (any-hover:hover){:where(.🥝-select:hover)+.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--hover)}}:where(.🥝-select:disabled)+.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--disabled)}}@layer base.🌀{.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--default);--🌀select-arrow-state--default:var(--🌀select-arrow-state, );--🌀select-arrow-state--hover:var(--🌀select-arrow-state, );--🌀select-arrow-state--disabled:var(--🌀select-arrow-state, )}}@layer base{.🥝-skeleton{background-color:var(--ids-color-bg-glow-on-surface-disabled);border-radius:var(--🥝skeleton-border-radius);block-size:var(--🥝skeleton-height);inline-size:var(--🥝skeleton-width)}@media (prefers-reduced-motion:no-preference){.🥝-skeleton{background:linear-gradient(to right,oklch(from var(--ids-color-glow-hue)l c h/.04)40.0%,oklch(from var(--ids-color-glow-hue)l c h/.08)50.0%,oklch(from var(--ids-color-glow-hue)l c h/.04)60%);background-position-x:100%;background-size:300%;background-attachment:fixed;animation:1.6s cubic-bezier(.32,1,.64,1) infinite --🥝skeleton-shimmer}}@media (forced-colors:active){.🥝-skeleton{background-color:#0000;border:1px solid canvastext}}}@layer modifiers{.🥝-skeleton:where([data-kiwi-variant=text]){--🥝skeleton-width:100%}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=xsmall]){--🥝skeleton-height:.75rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=small]){--🥝skeleton-height:.875rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=medium]){--🥝skeleton-height:1rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=large]){--🥝skeleton-height:1.25rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=xlarge]){--🥝skeleton-height:1.5rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=xsmall]){--🥝skeleton-border-radius:2px;--🥝skeleton-height:.75rem;--🥝skeleton-width:.75rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=small]){--🥝skeleton-border-radius:2px;--🥝skeleton-height:1rem;--🥝skeleton-width:1rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=medium]){--🥝skeleton-border-radius:4px;--🥝skeleton-height:1.5rem;--🥝skeleton-width:1.5rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=large]){--🥝skeleton-border-radius:4px;--🥝skeleton-height:2rem;--🥝skeleton-width:2rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=xlarge]){--🥝skeleton-border-radius:4px;--🥝skeleton-height:3rem;--🥝skeleton-width:3rem}}@keyframes --🥝skeleton-shimmer{to{background-position-x:0%}}@layer base{.🥝-switch{appearance:none;cursor:pointer;background-color:var(--🌀switch-state--default,var(--ids-color-bg-page-base))var(--🌀switch-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀switch-state--pressed,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀switch-state--checked,var(--ids-color-bg-accent-base))var(--🌀switch-state--checked-hover,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-strong-hover-\%)))var(--🌀switch-state--disabled,var(--ids-color-bg-page-base));border:1px solid #0000;border-color:var(--🌀switch-state--default,var(--ids-color-border-neutral-base))var(--🌀switch-state--hover,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀switch-state--pressed,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀switch-state--checked,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-hover-\%)))var(--🌀switch-state--checked-hover,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-hover-\%)))var(--🌀switch-state--disabled,var(--ids-color-border-glow-on-surface-disabled));border-radius:9999px;align-items:center;inline-size:2rem;transition:background-color .15s ease-out,border-color .15s ease-out;display:inline-grid;position:relative}.🥝-switch:before,.🥝-switch:after{content:"";grid-area:1/1/-1/-1;display:block}.🥝-switch:before{block-size:24px;inline-size:2rem;margin:-1px;position:absolute}.🥝-switch:after{aspect-ratio:var(--🥝switch-thumb-aspect-ratio);background-color:var(--🥝switch-thumb-color);block-size:1rem;box-shadow:var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--ids-color-border-shadow-base)inset,var(--ids-shadow-button-base-drop);justify-self:var(--🥝switch-thumb-placement);border-radius:9999px;margin:calc(.125rem - 1px)}@media (prefers-reduced-motion:no-preference){.🥝-switch:after{will-change:aspect-ratio;transition:aspect-ratio .15s ease-out}}@media (forced-colors:active){.🥝-switch:after{background-color:canvastext}}}@layer states{.🥝-switch{--🥝switch-thumb-color:var(--ids-color-bg-neutral-inverse);--🥝switch-thumb-placement:start;--🥝switch-thumb-aspect-ratio:1/1}@media (any-hover:hover){.🥝-switch:where(:hover){--🌀switch-state:var(--🌀switch-state--hover)}}.🥝-switch:where(:checked,[aria-checked=true]){--🌀switch-state:var(--🌀switch-state--checked);--🥝switch-thumb-placement:end}@media (any-hover:hover){.🥝-switch:where(:checked,[aria-checked=true]):where(:hover){--🌀switch-state:var(--🌀switch-state--checked-hover)}}.🥝-switch:where(:active){--🌀switch-state:var(--🌀switch-state--pressed);--🥝switch-thumb-aspect-ratio:1.75}.🥝-switch:where([disabled],:disabled,[aria-disabled=true]){--🌀switch-state:var(--🌀switch-state--disabled);--🥝switch-thumb-color:var(--ids-color-icon-neutral-disabled);cursor:not-allowed}.🥝-switch:where([disabled],:disabled,[aria-disabled=true]):after{box-shadow:none}}@layer base.🌀{.🥝-switch{--🌀switch-state:var(--🌀switch-state--default);--🌀switch-state--default:var(--🌀switch-state, );--🌀switch-state--hover:var(--🌀switch-state, );--🌀switch-state--pressed:var(--🌀switch-state, );--🌀switch-state--checked:var(--🌀switch-state, );--🌀switch-state--checked-hover:var(--🌀switch-state, );--🌀switch-state--disabled:var(--🌀switch-state, )}}@layer base{.🥝-table{flex-direction:column;display:flex}}@layer base{.🥝-table-header{color:var(--ids-color-text-neutral-secondary)}}@layer base{.🥝-table-body{flex-direction:column;display:flex}}@layer base{.🥝-table-row{border-block-end:1px solid var(--ids-color-border-neutral-muted);display:flex}}@layer base{:is(.🥝-table-caption,.🥝-table-cell){word-break:break-word;-webkit-hyphens:auto;hyphens:auto;align-items:center;column-gap:.5rem;min-block-size:3rem;padding:.5rem;display:flex}}@layer base{.🥝-table-cell{background-color:var(--🌀table-cell-state--default,var(--ids-color-bg-page-base))var(--🌀table-cell-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)));flex-grow:1;flex-basis:4rem;min-inline-size:4rem}}@layer states{@media (any-hover:hover){.🥝-table-cell:where(:hover){--🌀table-cell-state:var(--🌀table-cell-state--hover)}:where(.🥝-table-row:hover) .🥝-table-cell:where(:not([role=columnheader])){--🌀table-cell-state:var(--🌀table-cell-state--hover)}}}@layer base.🌀{.🥝-table-cell{--🌀table-cell-state:var(--🌀table-cell-state--default);--🌀table-cell-state--default:var(--🌀table-cell-state, );--🌀table-cell-state--hover:var(--🌀table-cell-state, )}}@layer base{.🥝-tab-list{--🥝tab-active-stripe-gap:8px;--🥝tab-active-stripe-size:2px;--🥝tab-padding-inline:4px;gap:8px;display:flex;position:relative}@supports (position-anchor:--foo){.🥝-tab-list:after{content:"";position-anchor:--🥝active-tab;inset-inline:calc(anchor(start) + var(--🥝tab-padding-inline))calc(anchor(end) + var(--🥝tab-padding-inline));block-size:var(--🥝tab-active-stripe-size);background-color:var(--🥝tab-active-stripe-color);position:absolute;inset-block-end:calc(anchor(end) - var(--🥝tab-active-stripe-gap))}@media (prefers-reduced-motion:no-preference){.🥝-tab-list:after{transition:inset-inline .15s ease-in-out}}@media (forced-colors:active){.🥝-tab-list:after{background-color:selecteditem}}}}@layer modifiers{.🥝-tab-list[aria-orientation=horizontal]{padding-block-end:var(--🥝tab-active-stripe-gap)}.🥝-tab-list:where([data-kiwi-tone=neutral]){--🥝tab-active-stripe-color:var(--ids-color-border-neutral-inverse)}.🥝-tab-list:where([data-kiwi-tone=accent]){--🥝tab-active-stripe-color:var(--ids-color-border-accent-strong)}}@layer base{.🥝-tab{font-size:var(--ids-font-size-12);color:var(--🥝tab-color);background-color:var(--🥝tab-bg);block-size:1.25rem;padding-inline:var(--🥝tab-padding-inline);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;border:none;border-radius:4px;transition:background-color .15s ease-out,color .15s ease-out;position:relative}@media (forced-colors:active){.🥝-tab{color:buttontext}}.🥝-tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝-tab-list[data-kiwi-tone=neutral]) .🥝-tab{--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-neutral-primary))var(--🌀tab-state--selected,var(--ids-color-text-neutral-primary))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-color-bg-glow-on-surface-neutral-hover)}:where(.🥝-tab-list[data-kiwi-tone=accent]) .🥝-tab{--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--ids-color-bg-glow-on-surface-accent-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-accent-strong))var(--🌀tab-state--selected,var(--ids-color-text-accent-strong))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-color-bg-glow-on-surface-accent-hover)}}@layer states{.🥝-tab:where([aria-selected=true]){--🌀tab-state:var(--🌀tab-state--selected);anchor-name:--🥝active-tab}@supports not (anchor-name:--foo){.🥝-tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝tab-active-stripe-color);block-size:var(--🥝tab-active-stripe-size);inset-inline:var(--🥝tab-padding-inline);inset-block:auto calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}@media (forced-colors:active){.🥝-tab:where([aria-selected=true]):after{background-color:selecteditem}}}@media (any-hover:hover){.🥝-tab:where(:hover){--🌀tab-state:var(--🌀tab-state--hover)}}.🥝-tab:where([disabled],:disabled,[aria-disabled=true]){--🌀tab-state:var(--🌀tab-state--disabled);--🥝tab-active-stripe-color:var(--ids-color-border-neutral-disabled);cursor:not-allowed}@media (forced-colors:active){.🥝-tab:where([disabled],:disabled,[aria-disabled=true]){color:graytext}}}@layer base.🌀{.🥝-tab{--🌀tab-state:var(--🌀tab-state--default);--🌀tab-state--default:var(--🌀tab-state, );--🌀tab-state--hover:var(--🌀tab-state, );--🌀tab-state--selected:var(--🌀tab-state, );--🌀tab-state--disabled:var(--🌀tab-state, )}}@layer base{.🥝-tab-panel{outline-offset:-2px}.🥝-tab-panel:not([data-open]){display:none!important}}@layer modifiers{.🥝-text:where([data-kiwi-text-variant=display-lg]){font-size:var(--ids-font-size-48);line-height:1.1667}.🥝-text:where([data-kiwi-text-variant=display-md]){font-size:var(--ids-font-size-40);line-height:1.2}.🥝-text:where([data-kiwi-text-variant=display-sm]){font-size:var(--ids-font-size-32);line-height:1.25}.🥝-text:where([data-kiwi-text-variant=headline-lg]){font-size:var(--ids-font-size-28);line-height:1.2857}.🥝-text:where([data-kiwi-text-variant=headline-md]){font-size:var(--ids-font-size-24);line-height:1.3333}.🥝-text:where([data-kiwi-text-variant=headline-sm]){font-size:var(--ids-font-size-20);line-height:1.4}.🥝-text:where([data-kiwi-text-variant=body-lg]){font-size:var(--ids-font-size-16);line-height:1.5}.🥝-text:where([data-kiwi-text-variant=body-md]){font-size:var(--ids-font-size-14);line-height:1.4286}.🥝-text:where([data-kiwi-text-variant=body-sm]){font-size:var(--ids-font-size-12);line-height:1.3333}.🥝-text:where([data-kiwi-text-variant=caption-lg]){font-size:var(--ids-font-size-11);line-height:1.4545}.🥝-text:where([data-kiwi-text-variant=caption-md]){font-size:var(--ids-font-size-10);line-height:1.2}.🥝-text:where([data-kiwi-text-variant=caption-sm]){font-size:var(--ids-font-size-8);line-height:1.5}.🥝-text:where([data-kiwi-text-variant=mono-sm]){font-family:var(--ids-font-family-mono);font-size:var(--ids-font-size-12);line-height:1.3333}}@layer base{.🥝-text-box{cursor:var(--🥝text-box-cursor);font-size:var(--ids-font-size-12);background-color:var(--🥝text-box-background-color);min-block-size:1.5rem;min-inline-size:0;box-shadow:var(--ids-shadow-input-base);color:var(--ids-color-text-neutral-primary);--🥝text-box-cursor:text;--🥝text-box-background-color:var(--🌀text-box-state--default,var(--ids-color-bg-page-base))var(--🌀text-box-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀text-box-state--disabled,var(--ids-color-bg-elevation-control));--🥝text-box-border-color:var(--🌀text-box-state--default,var(--ids-color-border-neutral-base))var(--🌀text-box-state--hover,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀text-box-state--disabled,var(--ids-color-border-glow-on-surface-disabled));border-radius:4px;padding-inline:8px;transition:background-color .15s ease-out,border-color .15s ease-out}.🥝-text-box:where(:not(input,textarea)){align-items:center;gap:4px;display:inline-flex;position:relative}.🥝-text-box:where(:not(input,textarea)):before{content:"";border-radius:inherit;pointer-events:none;border:1px solid var(--🥝text-box-border-color);transition:border-color .15s ease-out;position:absolute;inset:0}.🥝-text-box:where(input,textarea),.🥝-text-box :where(input,textarea){appearance:none;border:1px solid var(--🥝text-box-border-color);min-inline-size:0;cursor:var(--🥝text-box-cursor);padding-block:max(0px,.75rem - 1px - .5lh);line-height:1.3}:is(.🥝-text-box:where(input,textarea),.🥝-text-box :where(input,textarea))::placeholder{color:var(--ids-color-text-neutral-secondary);opacity:1;-webkit-user-select:none;user-select:none}.🥝-text-box:where(textarea),.🥝-text-box :where(textarea){resize:vertical;resize:block}.🥝-text-box :where(input,textarea){background-color:var(--🥝text-box-background-color);outline:unset;border:none;flex:999;align-self:stretch;transition:background-color .15s ease-out}}@layer states{@media (any-hover:hover){.🥝-text-box:where(:hover){--🌀text-box-state:var(--🌀text-box-state--hover)}}.🥝-text-box:where(:has(:is(input,textarea):focus-visible),:is(input,textarea):focus-visible){outline:2px solid var(--ids-color-border-accent-base);outline-offset:1px;--🥝text-box-border-color:var(--ids-color-border-accent-strong);--🥝icon-color:var(--ids-color-icon-accent-strong)}@supports not selector(:has(+ *)){.🥝-text-box:where(:not(input,textarea):focus-within){outline:2px solid var(--ids-color-border-accent-base);outline-offset:1px;--🥝text-box-border-color:var(--ids-color-border-accent-strong);--🥝icon-color:var(--ids-color-icon-accent-strong)}}.🥝-text-box:where([disabled],:disabled,[aria-disabled=true],[data-kiwi-disabled=true],:has(:is(input,textarea):disabled)){--🌀text-box-state:var(--🌀text-box-state--disabled);box-shadow:none;color:var(--ids-color-text-neutral-disabled);--🥝text-box-cursor:not-allowed}}@layer base.🌀{.🥝-text-box{--🌀text-box-state:var(--🌀text-box-state--default);--🌀text-box-state--default:var(--🌀text-box-state, );--🌀text-box-state--hover:var(--🌀text-box-state, );--🌀text-box-state--disabled:var(--🌀text-box-state, )}}@layer base{.🥝-text-box-decoration{flex-shrink:0}}@layer base{.🥝-tooltip{background-color:var(--ids-color-bg-elevation-emphasis);box-shadow:var(--ids-shadow-tooltip-base);color:var(--ids-color-text-neutral-emphasis);border:1px solid var(--ids-color-border-elevation-base);min-block-size:1rem;max-inline-size:12.25rem;font-size:var(--ids-font-size-12);border-radius:.25rem;justify-content:center;gap:.25rem;padding-block:calc(.25rem - 1px);padding-inline:calc(.625rem - 1px);line-height:1.3333;display:flex}}@layer base{.🥝-tree{background-color:var(--ids-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝-tree-item{min-inline-size:max-content;position:relative}}@layer states{.🥝-tree-item:focus-visible{isolation:isolate;outline:none}.🥝-tree-item:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:2px solid var(--ids-color-border-accent-strong);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝-tree-item:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝tree-item-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝-tree-item{--🥝tree-item-action-visibility:visible}}}}@layer base{.🥝-tree-item-node.🥝-list-item{isolation:isolate;--🥝list-item-color:var(--🥝tree-item-color);padding-inline-start:calc(8px + 6px*(var(--🥝tree-item-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]){--🥝icon-color:var(--ids-color-icon-attention-base);--🥝tree-item-color:var(--ids-color-text-attention-base)}}@layer states{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active)}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-expanded=false]){--🥝tree-chevron-rotate:-.25turn}.🥝-tree-item-node.🥝-list-item:where(:not([data-kiwi-expanded])){--🥝tree-item-expander-visibility:hidden}}@layer base{.🥝-tree-item-content.🥝-list-item-content{white-space:nowrap}}@layer base{.🥝-tree-item-description.🥝-list-item-content{color:var(--🥝tree-item-color,var(--🌀list-item-state--default,var(--ids-color-text-neutral-secondary)))}}@layer base{.🥝-tree-item-actions-container.🥝-list-item-decoration{background-color:var(--ids-color-bg-page-base);visibility:var(--🥝tree-item-actions-container-visibility,var(--🥝tree-item-action-visibility));align-self:stretch;padding-inline-end:4px;display:inline-flex;position:sticky;inset-inline-end:0}.🥝-tree-item-actions-container.🥝-list-item-decoration:before{content:"";background-color:var(--🥝list-item-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝-tree-item-actions-container.🥝-list-item-decoration:where(:has(.🥝-tree-item-action[data-kiwi-visible=true])){--🥝tree-item-actions-container-visibility:visible}}@layer base{.🥝-tree-item-action.🥝-icon-button{visibility:var(--🥝tree-item-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=false]){--🥝tree-item-action-visibility:hidden}.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=true]){--🥝tree-item-action-visibility:visible}}@layer base{.🥝-tree-item-expander.🥝-icon-button{visibility:var(--🥝tree-item-expander-visibility);z-index:1}}@layer base{.🥝-tree-chevron{rotate:var(--🥝tree-chevron-rotate)}@media (prefers-reduced-motion:no-preference){.🥝-tree-chevron{transition:rotate .15s ease-in-out}}}@layer base{.🥝-tree-item-decoration{align-items:center;gap:.25rem;display:flex}}@layer base{.🥝-field{--🥝field-description-column:label-start/label-end;grid-template-columns:[label-start]auto[label-end control-start]auto[control-end];justify-content:start;align-items:center;gap:4px;display:grid}.🥝-field:where([data-kiwi-control-type=checkable][data-kiwi-label-placement=after]){grid-template-columns:[control-start]auto[control-end label-start]auto[label-end]}.🥝-field:where([data-kiwi-control-type=textlike]){--🥝field-description-column:control-start/control-end;align-items:baseline}.🥝-field:where([data-kiwi-control-type=textlike]):where(:not([data-kiwi-layout=inline])){grid-template-columns:[label-start control-start]auto[label-end control-end]}.🥝-field :where(.🥝-description){grid-column:var(--🥝field-description-column)}}}`; | ||
@@ -4,0 +4,0 @@ // src/bricks/styles.css.ts |
@@ -46,2 +46,3 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime"; | ||
"aria-hidden": "true", | ||
portal: true, | ||
...rest, | ||
@@ -57,3 +58,2 @@ unmountOnHide, | ||
wrapperProps: popover.wrapperProps, | ||
portal: popover.portal, | ||
children: content | ||
@@ -60,0 +60,0 @@ } |
@@ -31,3 +31,3 @@ import * as React from "react"; | ||
* @default undefined | ||
* */ | ||
*/ | ||
expanded?: boolean; | ||
@@ -77,2 +77,8 @@ /** | ||
actions?: React.ReactNode[]; | ||
/** | ||
* Specifies if the tree item is in an error state. | ||
* | ||
* @default false | ||
*/ | ||
error?: boolean; | ||
} | ||
@@ -79,0 +85,0 @@ /** |
@@ -11,3 +11,3 @@ import { jsx, jsxs } from "react/jsx-runtime"; | ||
import { IconButton } from "./IconButton.js"; | ||
import { Icon } from "./Icon.js"; | ||
import { Icon, StatusWarning } from "./Icon.js"; | ||
import { forwardRef } from "./~utils.js"; | ||
@@ -23,3 +23,3 @@ import { useEventHandlers } from "./~hooks.js"; | ||
expanded, | ||
icon, | ||
icon: iconProp, | ||
unstable_decorations, | ||
@@ -29,2 +29,3 @@ label, | ||
actions, | ||
error, | ||
onSelectedChange, | ||
@@ -54,2 +55,3 @@ onExpandedChange, | ||
const decorationId = React.useId(); | ||
const icon = error ? /* @__PURE__ */ jsx(StatusWarning, {}) : iconProp; | ||
const describedBy = React.useMemo(() => { | ||
@@ -97,2 +99,3 @@ const idRefs = []; | ||
"data-kiwi-selected": selected, | ||
"data-kiwi-error": error ? true : void 0, | ||
className: "\u{1F95D}-tree-item-node", | ||
@@ -153,3 +156,3 @@ style: { "--\u{1F95D}tree-item-level": level }, | ||
onKeyDown: useEventHandlers(props.onKeyDown, (e) => e.stopPropagation()), | ||
className: cx("\u{1F95D}-tree-item-actions", props.className), | ||
className: cx("\u{1F95D}-tree-item-actions-container", props.className), | ||
ref: forwardedRef, | ||
@@ -156,0 +159,0 @@ children: props.children |
import * as React from "react"; | ||
import { useStoreState } from "@ariakit/react/store"; | ||
import { supportsPopover } from "./~utils.js"; | ||
import { isBrowser, supportsPopover } from "./~utils.js"; | ||
const useLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect; | ||
function useControlledState(initialValue, controlledState, setControlledState) { | ||
@@ -92,2 +93,3 @@ const [uncontrolledState, setUncontrolledState] = React.useState(initialValue); | ||
useLatestRef, | ||
useLayoutEffect, | ||
useMergedRefs, | ||
@@ -94,0 +96,0 @@ usePopoverApi, |
import * as React from "react"; | ||
const isBrowser = typeof document !== "undefined"; | ||
const supportsPopover = isBrowser && "popover" in HTMLElement.prototype; | ||
function isDocument(node) { | ||
return node?.nodeType === Node.DOCUMENT_NODE; | ||
} | ||
function getOwnerDocument(node) { | ||
if (!node) return null; | ||
return (isDocument(node) ? node : node.ownerDocument) || null; | ||
} | ||
function parseDOM(htmlString, { ownerDocument }) { | ||
const template = ownerDocument.createElement("template"); | ||
template.innerHTML = htmlString; | ||
return template.content; | ||
} | ||
const forwardRef = React.forwardRef; | ||
const identity = (value) => value; | ||
export { | ||
forwardRef, | ||
getOwnerDocument, | ||
identity, | ||
isBrowser, | ||
isDocument, | ||
parseDOM, | ||
supportsPopover | ||
}; |
@@ -48,3 +48,3 @@ import { jsx, jsxs } from "react/jsx-runtime"; | ||
{ | ||
portal: popover.portal, | ||
portal: true, | ||
unmountOnHide: true, | ||
@@ -51,0 +51,0 @@ ...props, |
@@ -5,6 +5,17 @@ import { jsx } from "react/jsx-runtime"; | ||
import { Role } from "@ariakit/react/role"; | ||
import { forwardRef } from "./~utils.js"; | ||
import { | ||
forwardRef, | ||
getOwnerDocument, | ||
parseDOM | ||
} from "./~utils.js"; | ||
import { | ||
HtmlSanitizerContext, | ||
spriteSheetId, | ||
useRootNode | ||
} from "./Root.internal.js"; | ||
import { useLatestRef, useSafeContext } from "./~hooks.js"; | ||
const Icon = forwardRef((props, forwardedRef) => { | ||
const { href, size, alt, ...rest } = props; | ||
const { href: hrefProp, size, alt, ...rest } = props; | ||
const isDecorative = !alt; | ||
const hrefBase = useNormalizedHrefBase(hrefProp); | ||
return /* @__PURE__ */ jsx( | ||
@@ -20,3 +31,3 @@ Role.svg, | ||
ref: forwardedRef, | ||
children: href ? /* @__PURE__ */ jsx("use", { href: toIconHref(href, size) }) : null | ||
children: hrefBase ? /* @__PURE__ */ jsx("use", { href: toIconHref(hrefBase, size) }) : null | ||
} | ||
@@ -26,6 +37,6 @@ ); | ||
DEV: Icon.displayName = "Icon"; | ||
function toIconHref(href, size) { | ||
const separator = href.includes("#") ? "--" : "#"; | ||
function toIconHref(hrefBase, size) { | ||
const separator = hrefBase.includes("#") ? "--" : "#"; | ||
const suffix = toIconId(size); | ||
return `${href}${separator}${suffix}`; | ||
return `${hrefBase}${separator}${suffix}`; | ||
} | ||
@@ -36,2 +47,64 @@ function toIconId(size) { | ||
} | ||
function useNormalizedHrefBase(rawHref) { | ||
const generatedId = React.useId(); | ||
const sanitizeHtml = useLatestRef(useSafeContext(HtmlSanitizerContext)); | ||
const rootNode = useRootNode(); | ||
const inlineHref = React.useRef(void 0); | ||
const getClientSnapshot = () => { | ||
const ownerDocument = getOwnerDocument(rootNode); | ||
if (!rawHref || !ownerDocument) return void 0; | ||
if (isHttpProtocol(rawHref, ownerDocument)) return rawHref; | ||
return inlineHref.current; | ||
}; | ||
const subscribe = React.useCallback( | ||
(notify) => { | ||
const ownerDocument = getOwnerDocument(rootNode); | ||
const spriteSheet = ownerDocument?.getElementById(spriteSheetId); | ||
if (!rawHref || !ownerDocument || !spriteSheet) return () => { | ||
}; | ||
if (isHttpProtocol(rawHref, ownerDocument)) return () => { | ||
}; | ||
const cache = spriteSheet[Symbol.for("\u{1F95D}")]?.icons; | ||
if (!cache) return () => { | ||
}; | ||
const prefix = `\u{1F95D}${generatedId}`; | ||
if (cache.has(rawHref)) { | ||
inlineHref.current = cache.get(rawHref); | ||
notify(); | ||
return () => { | ||
}; | ||
} | ||
const abortController = new AbortController(); | ||
const { signal } = abortController; | ||
(async () => { | ||
const response = await fetch(rawHref, { signal }); | ||
if (!response.ok) throw new Error(`Failed to fetch ${rawHref}`); | ||
const fetchedSvgString = sanitizeHtml.current(await response.text()); | ||
const parsedSvgContent = parseDOM(fetchedSvgString, { | ||
ownerDocument | ||
}); | ||
const symbols = parsedSvgContent.querySelectorAll("symbol"); | ||
for (const symbol of symbols) { | ||
symbol.id = `${prefix}--${symbol.id}`; | ||
if (ownerDocument.getElementById(symbol.id)) continue; | ||
spriteSheet.appendChild(symbol.cloneNode(true)); | ||
} | ||
inlineHref.current = `#${prefix}`; | ||
cache.set(rawHref, inlineHref.current); | ||
if (!signal.aborted) notify(); | ||
})(); | ||
return () => abortController.abort(); | ||
}, | ||
[rawHref, rootNode, sanitizeHtml, generatedId] | ||
); | ||
return React.useSyncExternalStore( | ||
subscribe, | ||
getClientSnapshot, | ||
() => rawHref | ||
); | ||
} | ||
function isHttpProtocol(url, ownerDocument) { | ||
const { protocol } = new URL(url, ownerDocument.baseURI); | ||
return ["http:", "https:"].includes(protocol); | ||
} | ||
const DisclosureArrow = forwardRef( | ||
@@ -123,2 +196,33 @@ (props, forwardedRef) => { | ||
DEV: Dismiss.displayName = "Dismiss"; | ||
const StatusWarning = forwardRef( | ||
(props, forwardedRef) => { | ||
return /* @__PURE__ */ jsx( | ||
Icon, | ||
{ | ||
...props, | ||
render: /* @__PURE__ */ jsx( | ||
Role.svg, | ||
{ | ||
width: "16", | ||
height: "16", | ||
fill: "currentColor", | ||
viewBox: "0 0 16 16", | ||
render: props.render, | ||
children: /* @__PURE__ */ jsx( | ||
"path", | ||
{ | ||
fill: "currentColor", | ||
fillRule: "evenodd", | ||
d: "M8.354 2.06a.5.5 0 0 0-.708 0L2.061 7.647a.5.5 0 0 0 0 .707l5.585 5.586a.5.5 0 0 0 .708 0l5.585-5.586a.5.5 0 0 0 0-.707L8.354 2.061Zm-1.415-.707a1.5 1.5 0 0 1 2.122 0l5.585 5.586a1.5 1.5 0 0 1 0 2.122l-5.585 5.585a1.5 1.5 0 0 1-2.122 0L1.354 9.061a1.5 1.5 0 0 1 0-2.122l5.585-5.586ZM8.75 10.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8.5 8.5v-3a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0Z", | ||
clipRule: "evenodd" | ||
} | ||
) | ||
} | ||
), | ||
ref: forwardedRef | ||
} | ||
); | ||
} | ||
); | ||
DEV: StatusWarning.displayName = "StatusWarning"; | ||
export { | ||
@@ -128,3 +232,4 @@ Checkmark, | ||
Dismiss, | ||
Icon | ||
Icon, | ||
StatusWarning | ||
}; |
@@ -9,7 +9,24 @@ import { jsx, jsxs } from "react/jsx-runtime"; | ||
import bricksCss from "./styles.css.js"; | ||
import { forwardRef, isBrowser } from "./~utils.js"; | ||
import { useIsClient, useMergedRefs } from "./~hooks.js"; | ||
import { | ||
forwardRef, | ||
getOwnerDocument, | ||
identity, | ||
isBrowser, | ||
isDocument | ||
} from "./~utils.js"; | ||
import { useLayoutEffect, useMergedRefs } from "./~hooks.js"; | ||
import { | ||
HtmlSanitizerContext, | ||
RootNodeContext, | ||
spriteSheetId, | ||
useRootNode | ||
} from "./Root.internal.js"; | ||
const css = foundationsCss + bricksCss; | ||
const Root = forwardRef((props, forwardedRef) => { | ||
const { children, synchronizeColorScheme = false, ...rest } = props; | ||
const { | ||
children, | ||
synchronizeColorScheme = false, | ||
unstable_htmlSanitizer = identity, | ||
...rest | ||
} = props; | ||
const [portalContainer, setPortalContainer] = React.useState(null); | ||
@@ -19,2 +36,3 @@ return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [ | ||
/* @__PURE__ */ jsx(Fonts, {}), | ||
/* @__PURE__ */ jsx(InlineSpriteSheet, {}), | ||
synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null, | ||
@@ -29,10 +47,6 @@ /* @__PURE__ */ jsx( | ||
), | ||
/* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children }) | ||
/* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children: /* @__PURE__ */ jsx(HtmlSanitizerContext.Provider, { value: unstable_htmlSanitizer, children }) }) | ||
] }); | ||
}); | ||
DEV: Root.displayName = "Root"; | ||
const RootNodeContext = React.createContext(null); | ||
function useRootNode() { | ||
return React.useContext(RootNodeContext); | ||
} | ||
const RootInternal = forwardRef( | ||
@@ -78,6 +92,5 @@ (props, forwardedRef) => { | ||
const PortalContainer = forwardRef((props, forwardedRef) => { | ||
const isClient = useIsClient(); | ||
const rootNode = useRootNode(); | ||
if (!isClient) return null; | ||
const destination = rootNode && isDocument(rootNode) ? rootNode.body : rootNode; | ||
if (!rootNode) return null; | ||
const destination = isDocument(rootNode) ? rootNode.body : rootNode; | ||
if (!destination) return null; | ||
@@ -102,8 +115,13 @@ return ReactDOM.createPortal( | ||
if (!rootNode) return; | ||
loadStyles(rootNode, { css }); | ||
const { cleanup } = loadStyles(rootNode, { css }); | ||
return cleanup; | ||
}, [rootNode]); | ||
return null; | ||
} | ||
const styleSheets = /* @__PURE__ */ new WeakMap(); | ||
function loadStyles(rootNode, { css: css2 }) { | ||
const styleSheets = new Map( | ||
Object.entries({ default: /* @__PURE__ */ new WeakMap() }) | ||
); | ||
function loadStyles(rootNode, { css: css2, key = "default" }) { | ||
let cleanup = () => { | ||
}; | ||
const loaded = (() => { | ||
@@ -114,12 +132,13 @@ if (!isBrowser) return false; | ||
if (!ownerDocument || !_window) return false; | ||
if (!supportsAdoptedStylesheets && !rootNode.querySelector("style[data-kiwi]")) { | ||
if (!supportsAdoptedStylesheets && !rootNode.querySelector(`style[data-kiwi="${key}"]`)) { | ||
const styleElement = ownerDocument.createElement("style"); | ||
styleElement.dataset.kiwi = "true"; | ||
styleElement.dataset.kiwi = key; | ||
styleElement.textContent = css2; | ||
(rootNode.head || rootNode).appendChild(styleElement); | ||
cleanup = () => styleElement.remove(); | ||
return true; | ||
} | ||
const styleSheet = styleSheets.get(_window) || new _window.CSSStyleSheet(); | ||
if (!styleSheets.has(_window)) { | ||
styleSheets.set(_window, styleSheet); | ||
const styleSheet = styleSheets.get(key)?.get(_window) || new _window.CSSStyleSheet(); | ||
if (!styleSheets.get(key)?.has(_window)) { | ||
styleSheets.get(key)?.set(_window, styleSheet); | ||
} | ||
@@ -129,6 +148,11 @@ styleSheet.replaceSync(css2); | ||
rootNode.adoptedStyleSheets.push(styleSheet); | ||
cleanup = () => { | ||
rootNode.adoptedStyleSheets = rootNode.adoptedStyleSheets.filter( | ||
(sheet) => sheet !== styleSheet | ||
); | ||
}; | ||
} | ||
return true; | ||
})(); | ||
return { loaded }; | ||
return { loaded, cleanup }; | ||
} | ||
@@ -143,2 +167,31 @@ function Fonts() { | ||
} | ||
function InlineSpriteSheet() { | ||
const rootNode = useRootNode(); | ||
React.useEffect( | ||
function maybeCreateSpriteSheet() { | ||
const ownerDocument = getOwnerDocument(rootNode); | ||
if (!ownerDocument) return; | ||
const spriteSheet = ownerDocument?.getElementById(spriteSheetId); | ||
if (spriteSheet) return; | ||
const svg = ownerDocument.createElementNS( | ||
"http://www.w3.org/2000/svg", | ||
"svg" | ||
); | ||
svg.id = spriteSheetId; | ||
svg.style.display = "none"; | ||
Object.defineProperty(svg, Symbol.for("\u{1F95D}"), { | ||
value: { icons: /* @__PURE__ */ new Map() } | ||
// Map of icon URLs that have already been inlined. | ||
}); | ||
ownerDocument.body.appendChild(svg); | ||
return () => { | ||
if (svg.isConnected) { | ||
ownerDocument.body.removeChild(svg); | ||
} | ||
}; | ||
}, | ||
[rootNode] | ||
); | ||
return null; | ||
} | ||
function loadFonts(rootNode) { | ||
@@ -172,8 +225,2 @@ const ownerWindow = getWindow(rootNode); | ||
} | ||
function isDocument(node) { | ||
return node?.nodeType === Node.DOCUMENT_NODE; | ||
} | ||
function getOwnerDocument(node) { | ||
return (isDocument(node) ? node : node.ownerDocument) || null; | ||
} | ||
function getWindow(node) { | ||
@@ -183,5 +230,4 @@ const ownerDocument = getOwnerDocument(node); | ||
} | ||
const useLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect; | ||
export { | ||
Root | ||
}; |
@@ -20,13 +20,28 @@ import { jsx, jsxs } from "react/jsx-runtime"; | ||
"data-kiwi-tone": tone, | ||
"data-kiwi-variant": "indeterminate", | ||
className: cx("\u{1F95D}-spinner", props.className), | ||
ref: forwardedRef, | ||
children: [ | ||
/* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "\u{1F95D}-spinner-svg", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx( | ||
"path", | ||
{ | ||
stroke: "currentColor", | ||
strokeLinecap: "round", | ||
d: "M9.5 1.674a6.503 6.503 0 0 1 0 12.652m-3-12.652a6.503 6.503 0 0 0 0 12.652" | ||
} | ||
) }), | ||
/* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className: "\u{1F95D}-spinner-svg", viewBox: "0 0 16 16", children: [ | ||
/* @__PURE__ */ jsx( | ||
"circle", | ||
{ | ||
pathLength: "100", | ||
className: "\u{1F95D}-spinner-svg-track", | ||
cx: "8", | ||
cy: "8", | ||
r: "6.5" | ||
} | ||
), | ||
/* @__PURE__ */ jsx( | ||
"circle", | ||
{ | ||
pathLength: "100", | ||
className: "\u{1F95D}-spinner-svg-fill", | ||
cx: "8", | ||
cy: "8", | ||
r: "6.5" | ||
} | ||
) | ||
] }), | ||
/* @__PURE__ */ jsx(VisuallyHidden, { children: alt }) | ||
@@ -33,0 +48,0 @@ ] |
// inline-css:/home/runner/work/design-system/design-system/packages/kiwi-react/src/bricks/styles.css | ||
var styles_default = String.raw`@layer itwinui.components.base,itwinui.components.modifiers,itwinui.components.states;@layer itwinui.components{@layer base{.🥝-icon{width:var(--🥝icon-size,1rem);height:var(--🥝icon-size,1rem);color:var(--🥝icon-color);flex-shrink:0;transition:color .15s ease-out}}@layer modifiers{.🥝-icon:where([data-kiwi-size=regular]){--🥝icon-size:1rem}.🥝-icon:where([data-kiwi-size=large]){--🥝icon-size:1.5rem}}@layer base{.🥝-disclosure-arrow{rotate:var(--🥝disclosure-arrow-rotate);margin-inline-end:-8px}@media (prefers-reduced-motion:no-preference){.🥝-disclosure-arrow{transition:rotate .15s ease-in-out}}}@layer base{.🥝-ghost-aligner:where([data-kiwi-ghost-align=inline]){margin-inline:calc(-1*var(--🥝ghost-inline-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=inline-start]){margin-inline-start:calc(-1*var(--🥝ghost-inline-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=inline-end]){margin-inline-end:calc(-1*var(--🥝ghost-inline-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=block]){margin-block:calc(-1*var(--🥝ghost-block-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=block-start]){margin-block-start:calc(-1*var(--🥝ghost-block-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=block-end]){margin-block-end:calc(-1*var(--🥝ghost-block-offset))}}@layer base{.🥝-list-item{cursor:pointer;line-height:1.2;font-size:var(--ids-font-size-12);min-block-size:var(--🥝list-item-height,1.75rem);background-color:var(--🥝list-item-background-color);--🥝list-item-background-color:var(--🌀list-item-state--default,transparent)var(--🌀list-item-state--hover,var(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-bg-glow-on-surface-neutral-pressed))var(--🌀list-item-state--active,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--active-hover,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--disabled,transparent);color:var(--🌀list-item-state--default,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--hover,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--pressed,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--active,var(--ids-color-text-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-text-accent-strong))var(--🌀list-item-state--disabled,var(--ids-color-text-neutral-disabled));--🥝icon-color:var(--🌀list-item-state--default,var(--ids-color-icon-neutral-base))var(--🌀list-item-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--active,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--disabled,var(--ids-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;padding-inline:.5rem;display:grid}}@layer states{@media (any-hover:hover){.🥝-list-item:where(:hover){--🌀list-item-state:var(--🌀list-item-state--hover)}}.🥝-list-item:where(:active){--🌀list-item-state:var(--🌀list-item-state--pressed)}.🥝-list-item:where([disabled],:disabled,[aria-disabled=true]){--🌀list-item-state:var(--🌀list-item-state--disabled);cursor:not-allowed}@media (forced-colors:active){.🥝-list-item:where([disabled],:disabled,[aria-disabled=true]){color:graytext;--🥝icon-color:GrayText}}}@layer modifiers{.🥝-list-item:where(:has(>:nth-child(2 of .🥝-list-item-content))){--🥝list-item-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝-list-item{--🌀list-item-state:var(--🌀list-item-state--default);--🌀list-item-state--default:var(--🌀list-item-state, );--🌀list-item-state--hover:var(--🌀list-item-state, );--🌀list-item-state--pressed:var(--🌀list-item-state, );--🌀list-item-state--active:var(--🌀list-item-state, );--🌀list-item-state--active-hover:var(--🌀list-item-state, );--🌀list-item-state--disabled:var(--🌀list-item-state, )}}@layer base{.🥝-list-item-content{grid-column:content}}@layer base{.🥝-list-item-decoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:.25rem;display:flex}:where(.🥝-list-item-content)~.🥝-list-item-decoration{grid-column:decoration-after;margin-inline:.25rem 0}}@layer base{.🥝-anchor{cursor:pointer;font-size:var(--ids-font-size-12);text-underline-offset:var(--🌀anchor-state--default,2px)var(--🌀anchor-state--hover,3px)var(--🌀anchor-state--pressed,3px);-webkit-text-decoration-color:var(--🌀anchor-state--default,currentColor)var(--🌀anchor-state--hover,currentColor)var(--🌀anchor-state--pressed,transparent);text-decoration-color:var(--🌀anchor-state--default,currentColor)var(--🌀anchor-state--hover,currentColor)var(--🌀anchor-state--pressed,transparent);color:var(--🥝anchor-color,var(--ids-color-text-neutral-primary));border-radius:4px;font-weight:500;transition:color .15s ease-out,text-decoration-color .15s ease-out,text-underline-offset .15s ease-out}.🥝-anchor:where(button){background:0 0;border:none}}@layer modifiers{.🥝-anchor:where([data-kiwi-tone=accent]){--🥝anchor-color:var(--🌀anchor-state--default,var(--ids-color-text-accent-strong))var(--🌀anchor-state--hover,color-mix(in oklch,var(--ids-color-text-accent-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-hover-\%)))var(--🌀anchor-state--pressed,color-mix(in oklch,var(--ids-color-text-accent-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-pressed-\%)))}.🥝-anchor:where([data-kiwi-tone=critical]){--🥝anchor-color:var(--🌀anchor-state--default,var(--ids-color-text-critical-base))var(--🌀anchor-state--hover,color-mix(in oklch,var(--ids-color-text-critical-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-hover-\%)))var(--🌀anchor-state--pressed,color-mix(in oklch,var(--ids-color-text-critical-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-pressed-\%)))}}@layer states{@media (any-hover:hover){.🥝-anchor:where(:hover){--🌀anchor-state:var(--🌀anchor-state--hover)}}.🥝-anchor:where(:active){--🌀anchor-state:var(--🌀anchor-state--pressed)}.🥝-anchor:where(:focus-visible){outline-offset:2px}.🥝-anchor:where([disabled],:disabled,[aria-disabled=true]){--🥝anchor-color:var(--ids-color-text-neutral-disabled);cursor:not-allowed;text-decoration:none}}@layer base.🌀{.🥝-anchor{--🌀anchor-state:var(--🌀anchor-state--default);--🌀anchor-state--default:var(--🌀anchor-state, );--🌀anchor-state--hover:var(--🌀anchor-state, );--🌀anchor-state--pressed:var(--🌀anchor-state, )}}@layer base{.🥝-avatar{--🥝avatar-background-color:var(--ids-color-bg-mono-base);block-size:var(--🥝avatar-size);inline-size:var(--🥝avatar-size);background-color:var(--🥝avatar-background-color);color:var(--ids-color-text-neutral-emphasis);-webkit-user-select:none;user-select:none;border-radius:50%;place-items:center;display:inline-grid;position:relative;overflow:hidden}@media (forced-colors:active){.🥝-avatar{border:1px solid canvastext}}.🥝-avatar:after{content:"";border-radius:inherit;box-shadow:0px 0px 0px 1px var(--ids-color-border-glow-strong-default)inset;position:absolute;inset:0}.🥝-avatar>img{background-color:inherit;block-size:inherit;inline-size:inherit;object-fit:cover;object-position:center}}@layer modifiers{.🥝-avatar:where([data-kiwi-size=small]){--🥝avatar-size:1rem;--🥝avatar-font-size:var(--ids-font-size-8);--🥝icon-size:.75rem}.🥝-avatar:where([data-kiwi-size=medium]){--🥝avatar-size:1.5rem;--🥝avatar-font-size:var(--ids-font-size-10);--🥝icon-size:1rem}.🥝-avatar:where([data-kiwi-size=large]){--🥝avatar-size:2rem;--🥝avatar-font-size:var(--ids-font-size-12);--🥝icon-size:1rem}.🥝-avatar:where([data-kiwi-size=xlarge]){--🥝avatar-size:3rem;--🥝avatar-font-size:var(--ids-font-size-16);--🥝icon-size:1.5rem}}@layer base{.🥝-avatar-initials{font-size:var(--🥝avatar-font-size);text-align:center;text-transform:uppercase;font-weight:600}}@layer base{.🥝-badge{white-space:nowrap;box-shadow:0px 0px 0px 1px var(--🥝badge-border-color)inset;background-color:var(--🥝badge-background-color);color:var(--🥝badge-text-color);block-size:1.25rem;font-weight:500;font-size:var(--ids-font-size-12);border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;padding-inline:8px;line-height:1.3333;display:inline-flex}@media (forced-colors:active){.🥝-badge{border:1px solid}}}@layer modifiers{.🥝-badge:where([data-kiwi-variant=solid]){--🥝badge-border-color:var(--ids-color-border-glow-strong-default);--🥝badge-text-color:var(--ids-color-text-neutral-emphasis)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=neutral]){--🥝badge-background-color:var(--ids-color-bg-mono-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=info]){--🥝badge-background-color:var(--ids-color-bg-info-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=positive]){--🥝badge-background-color:var(--ids-color-bg-positive-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=attention]){--🥝badge-background-color:var(--ids-color-bg-attention-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=critical]){--🥝badge-background-color:var(--ids-color-bg-critical-base)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=neutral]){--🥝badge-background-color:var(--ids-color-bg-mono-muted);--🥝badge-border-color:var(--ids-color-border-mono-muted);--🥝badge-text-color:var(--ids-color-text-mono-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=info]){--🥝badge-background-color:var(--ids-color-bg-info-muted);--🥝badge-border-color:var(--ids-color-border-info-muted);--🥝badge-text-color:var(--ids-color-text-info-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=positive]){--🥝badge-background-color:var(--ids-color-bg-positive-muted);--🥝badge-border-color:var(--ids-color-border-positive-muted);--🥝badge-text-color:var(--ids-color-text-positive-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=attention]){--🥝badge-background-color:var(--ids-color-bg-attention-muted);--🥝badge-border-color:var(--ids-color-border-attention-muted);--🥝badge-text-color:var(--ids-color-text-attention-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=critical]){--🥝badge-background-color:var(--ids-color-bg-critical-muted);--🥝badge-border-color:var(--ids-color-border-critical-muted);--🥝badge-text-color:var(--ids-color-text-critical-faded)}.🥝-badge:where([data-kiwi-variant=outline]){--🥝badge-background-color:transparent}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=neutral]){--🥝badge-text-color:var(--ids-color-text-mono-base);--🥝badge-border-color:var(--ids-color-border-mono-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=info]){--🥝badge-text-color:var(--ids-color-text-info-base);--🥝badge-border-color:var(--ids-color-border-info-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=positive]){--🥝badge-text-color:var(--ids-color-text-positive-base);--🥝badge-border-color:var(--ids-color-border-positive-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=attention]){--🥝badge-text-color:var(--ids-color-text-attention-base);--🥝badge-border-color:var(--ids-color-border-attention-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=critical]){--🥝badge-text-color:var(--ids-color-text-critical-base);--🥝badge-border-color:var(--ids-color-border-critical-base)}}@layer base{.🥝-button{white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;line-height:1.2;font-size:var(--ids-font-size-12);block-size:1.5rem;padding-inline:var(--🥝button-padding-inline,12px);--🥝ghost-inline-offset:12px;--🥝ghost-block-offset:4px;background-color:var(--🥝button-background-color);color:var(--🥝button-color,var(--ids-color-text-neutral-primary));-webkit-tap-highlight-color:color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%));--🥝icon-color:var(--🌀button-state--default,var(--ids-color-icon-neutral-base))var(--🌀button-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀button-state--pressed,var(--ids-color-icon-neutral-hover))var(--🌀button-state--active,var(--ids-color-icon-accent-strong))var(--🌀button-state--disabled,var(--ids-color-icon-neutral-disabled));border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding-block:4px;font-weight:500;text-decoration:none;transition:background-color .15s ease-out;display:inline-flex;position:relative}@media (forced-colors:active){.🥝-button{color:buttontext;--🥝icon-color:ButtonText;background-color:buttonface;border:1px solid buttonborder}}}@layer modifiers{.🥝-button:where([data-kiwi-variant=solid]){--🥝button-background-color:var(--🌀button-state--default,var(--🥝button-bg--solid-default))var(--🌀button-state--hover,color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀button-state--disabled,var(--ids-color-bg-glow-on-surface-disabled));box-shadow:var(--🌀button-state--default,var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--🥝button-border-color)inset,var(--ids-shadow-button-base-drop))var(--🌀button-state--hover,var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--🥝button-border-color)inset,var(--ids-shadow-button-base-drop))var(--🌀button-state--pressed,0px 0px 0px 1px var(--🥝button-border-color)inset)var(--🌀button-state--disabled,none)}.🥝-button:where([data-kiwi-variant=solid]):where([data-kiwi-tone=neutral]){--🥝button-bg--solid-default:var(--ids-color-bg-neutral-base);--🥝button-border-color:var(--🌀button-state--default,var(--ids-color-border-shadow-base))var(--🌀button-state--hover,color-mix(in oklch,var(--ids-color-border-shadow-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--ids-color-border-shadow-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀button-state--disabled,transparent)}.🥝-button:where([data-kiwi-variant=solid]):where([data-kiwi-tone=accent]){--🥝button-bg--solid-default:var(--ids-color-bg-accent-base);--🥝button-border-color:var(--🌀button-state--default,var(--ids-color-border-shadow-strong))var(--🌀button-state--hover,color-mix(in oklch,var(--ids-color-border-shadow-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--ids-color-border-shadow-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-pressed-\%)))var(--🌀button-state--disabled,transparent);--🥝button-color:var(--ids-color-text-neutral-emphasis);--🥝icon-color:var(--🌀button-state--default,var(--ids-color-icon-neutral-emphasis))var(--🌀button-state--hover,var(--ids-color-icon-strong-hover))var(--🌀button-state--pressed,var(--ids-color-icon-neutral-hover))var(--🌀button-state--disabled,var(--ids-color-icon-neutral-disabled))}@media (forced-colors:active){.🥝-button:where([data-kiwi-variant=solid]):where([data-kiwi-tone=accent]){--🥝icon-color:ButtonText}}.🥝-button:where([data-kiwi-variant=outline]){--🥝button-background-color:var(--🌀button-state--default,transparent)var(--🌀button-state--hover,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀button-state--disabled,transparent);--🥝button-border-color:var(--🌀button-state--default,var(--ids-color-border-neutral-base))var(--🌀button-state--hover,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀button-state--disabled,var(--ids-color-border-glow-on-surface-disabled));box-shadow:0px 0px 0px 1px var(--🥝button-border-color)inset}.🥝-button:where([data-kiwi-variant=ghost]){--🥝button-background-color:var(--🌀button-state--default,transparent)var(--🌀button-state--hover,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀button-state--active,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀button-state--disabled,transparent)}}@layer states{@media (any-hover:hover){.🥝-button:where(:hover){--🌀button-state:var(--🌀button-state--hover)}}.🥝-button:where(:active){--🌀button-state:var(--🌀button-state--pressed)}.🥝-button:where([data-kiwi-variant=ghost][aria-pressed=true]){--🌀button-state:var(--🌀button-state--active)}@media (forced-colors:active){.🥝-button:where([data-kiwi-variant=ghost][aria-pressed=true]){color:selecteditemtext;--🥝icon-color:SelectedItemText;background-color:selecteditem}}.🥝-button:where([disabled],:disabled,[aria-disabled=true]){--🌀button-state:var(--🌀button-state--disabled);color:var(--ids-color-text-neutral-disabled);cursor:not-allowed}@media (forced-colors:active){.🥝-button:where([disabled],:disabled,[aria-disabled=true]){color:graytext;--🥝icon-color:GrayText;border-color:graytext}}}@layer base.🌀{.🥝-button{--🌀button-state:var(--🌀button-state--default);--🌀button-state--default:var(--🌀button-state, );--🌀button-state--hover:var(--🌀button-state, );--🌀button-state--pressed:var(--🌀button-state, );--🌀button-state--active:var(--🌀button-state, );--🌀button-state--disabled:var(--🌀button-state, )}}@layer base{.🥝-checkbox{--🥝checkbox-color-svg:var(--ids-color-icon-neutral-emphasis);--🥝checkbox-border-radius:4px;--🥝checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--🥝checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M11.2 5.6 6.8 10l-2-2\"/></svg>");--🥝checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M5 8h6.5\"/></svg>");appearance:none;cursor:pointer;background-color:var(--🌀checkbox-visual-state--default,var(--ids-color-bg-neutral-base))var(--🌀checkbox-visual-state--hover,color-mix(in oklch,var(--ids-color-bg-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀checkbox-visual-state--checked,var(--ids-color-bg-accent-base))var(--🌀checkbox-visual-state--checked-hover,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀checkbox-visual-state--disabled,var(--ids-color-bg-glow-on-surface-disabled));border-radius:var(--🥝checkbox-border-radius);block-size:1rem;inline-size:1rem;color:var(--🌀checkbox-aria-state--unchecked,transparent)var(--🌀checkbox-aria-state--checked,var(--🥝checkbox-color-svg))var(--🌀checkbox-aria-state--indeterminate,var(--🥝checkbox-color-svg));box-shadow:var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--🥝checkbox-border-color)inset,var(--ids-shadow-button-base-drop);--🥝checkbox-border-color:var(--🌀checkbox-visual-state--default,var(--ids-color-border-shadow-base))var(--🌀checkbox-visual-state--hover,color-mix(in oklch,var(--ids-color-border-shadow-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀checkbox-visual-state--checked,var(--ids-color-border-shadow-strong))var(--🌀checkbox-visual-state--checked-hover,color-mix(in oklch,var(--ids-color-border-shadow-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀checkbox-visual-state--disabled,transparent);--🥝checkbox-mask-image:var(--🌀checkbox-aria-state--unchecked,var(--🥝checkbox-unchecked-svg))var(--🌀checkbox-aria-state--checked,var(--🥝checkbox-checkmark-svg))var(--🌀checkbox-aria-state--indeterminate,var(--🥝checkbox-indeterminate-svg));transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out,--🥝checkbox-border-color .15s ease-out;position:relative}.🥝-checkbox:before,.🥝-checkbox:after{content:"";position:absolute;inset:0}.🥝-checkbox:before{inset:calc(.5rem - 12px)}.🥝-checkbox:after{-webkit-mask-image:var(--🥝checkbox-mask-image,initial);mask-image:var(--🥝checkbox-mask-image,initial);background-color:currentColor;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@media (forced-colors:active){.🥝-checkbox:after{background-color:canvastext}}}@layer states{@media (forced-colors:active){.🥝-checkbox{border:1px solid canvastext}}@media (any-hover:hover){.🥝-checkbox:where(:hover){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--hover)}}.🥝-checkbox:where(:checked,[aria-checked=true]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked);--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--checked)}@media (any-hover:hover){.🥝-checkbox:where(:checked,[aria-checked=true]):where(:hover){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked-hover)}}.🥝-checkbox:where(:indeterminate,[aria-checked=mixed]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked);--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--indeterminate)}.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--disabled);--🥝checkbox-color-svg:var(--ids-color-icon-neutral-disabled);cursor:not-allowed;box-shadow:none}@media (forced-colors:active){.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]){border-color:graytext}.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]):after{background-color:graytext}}}@layer base.🌀{.🥝-checkbox{--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--default);--🌀checkbox-visual-state--default:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--hover:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--checked:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--checked-hover:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--disabled:var(--🌀checkbox-visual-state, );--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--unchecked);--🌀checkbox-aria-state--unchecked:var(--🌀checkbox-aria-state, );--🌀checkbox-aria-state--checked:var(--🌀checkbox-aria-state, );--🌀checkbox-aria-state--indeterminate:var(--🌀checkbox-aria-state, )}}@layer base{.🥝-chip{isolation:isolate;--🥝chip-padding-inline:.5rem;padding-inline:var(--🥝chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝-chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--ids-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝-chip:where([data-kiwi-variant=solid]){background-color:var(--ids-color-bg-neutral-base)}.🥝-chip:where([data-kiwi-variant=outline]){background-color:var(--ids-color-bg-page-base)}}@layer base{.🥝-chip-dismiss-button.🥝-icon-button{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝chip-padding-inline));position:relative}}@layer modifiers{.🥝-description.🥝-text:where([data-kiwi-tone=neutral]){color:var(--ids-color-text-neutral-tertiary)}.🥝-description.🥝-text:where([data-kiwi-tone=critical]){color:var(--ids-color-text-critical-base)}}.🥝-divider{background-color:var(--ids-color-border-neutral-muted);flex:none;align-self:stretch}@media (forced-colors:active){.🥝-divider{background-color:canvastext}}.🥝-divider:is(hr){border:none;margin:0}.🥝-divider:not([aria-orientation=vertical],[data-kiwi-orientation=vertical]){block-size:1px}.🥝-divider:is([aria-orientation=vertical],[data-kiwi-orientation=vertical]){min-block-size:100%;inline-size:1px}@layer base{.🥝-dropdown-menu{background-color:var(--ids-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);box-shadow:var(--ids-shadow-surface-xl);border-radius:8px;flex-direction:column;padding:4px;display:flex}@media (forced-colors:active){.🥝-dropdown-menu{border:1px solid canvastext}}}@layer states{.🥝-dropdown-menu-button:where([aria-expanded=true]){--🥝disclosure-arrow-rotate:.5turn}}@layer base{.🥝-dropdown-menu-item.🥝-list-item{border-radius:4px}}@layer states{.🥝-dropdown-menu-item.🥝-list-item:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝dropdown-menu-checkmark-visibility:hidden}}@layer base{.🥝-dropdown-menu-checkmark{visibility:var(--🥝dropdown-menu-checkmark-visibility)}}@layer base{.🥝-dropdown-menu-item-shortcuts{margin-inline-start:.5rem}}@layer base{.🥝-icon-button.🥝-button{aspect-ratio:1;--🥝button-padding-inline:4px;--🥝ghost-inline-offset:4px}}@layer modifiers{.🥝-icon-button.🥝-button:where([data-kiwi-dot=true]):after{content:"";background-color:var(--ids-color-icon-accent-strong);border-radius:9999px;block-size:4px;inline-size:4px;display:inline-block;position:absolute;inset-block-start:2px;inset-inline-end:2px}@media (forced-colors:active){.🥝-icon-button.🥝-button:where([data-kiwi-dot=true]):after{background-color:canvastext}}@media (forced-colors:active){.🥝-icon-button.🥝-button:where([data-kiwi-dot=true][aria-pressed=true]):after{background-color:selecteditemtext}}}@layer base{.🥝-kbd{color:var(--ids-color-text-neutral-secondary);min-block-size:16px;font-family:inherit;font-weight:500;font-size:var(--ids-font-size-12);flex-shrink:0;justify-content:center;align-items:center;line-height:1.3333;display:inline-flex}}@layer modifiers{.🥝-kbd:where([data-kiwi-variant=solid],[data-kiwi-variant=muted]){background-color:var(--ids-color-bg-neutral-base);border-radius:4px;padding-inline:4px}.🥝-kbd:where([data-kiwi-variant=solid]){box-shadow:var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--ids-color-border-shadow-base)inset,var(--ids-shadow-button-base-drop)}.🥝-kbd:where([data-kiwi-variant=ghost]){color:var(--ids-color-text-neutral-tertiary)}}@layer base{.🥝-label{color:var(--ids-color-text-neutral-secondary);cursor:default;font-size:var(--ids-font-size-12)}.🥝-label:is(label){cursor:pointer}}@layer states{.🥝-label:has(+:where(:disabled,[disabled],[aria-disabled=true])){color:var(--ids-color-text-neutral-disabled)}.🥝-label:has(+:where(:disabled,[disabled],[aria-disabled=true])):is(label){cursor:not-allowed}}@layer base{.🥝-progress-bar{block-size:var(--🥝progress-bar-size);contain:strict;background-color:var(--🥝progress-bar-track-color);border-radius:9999px;inline-size:100%;display:grid}.🥝-progress-bar:before{content:"";block-size:inherit;inline-size:var(--🥝progress-bar-fill-size);border-radius:inherit;background-color:var(--🥝progress-bar-fill-color);animation:var(--🥝progress-bar-animation)}}@layer modifiers{.🥝-progress-bar:where([data-kiwi-tone=neutral]){--🥝progress-bar-fill-color:var(--ids-color-icon-neutral-base);--🥝progress-bar-track-color:var(--ids-color-border-page-base)}.🥝-progress-bar:where([data-kiwi-tone=accent]){--🥝progress-bar-fill-color:var(--ids-color-icon-accent-strong);--🥝progress-bar-track-color:var(--ids-color-bg-accent-muted)}.🥝-progress-bar:where([data-kiwi-size=small]){--🥝progress-bar-size:.063rem}.🥝-progress-bar:where([data-kiwi-size=medium]){--🥝progress-bar-size:.125rem}.🥝-progress-bar:where([data-kiwi-size=large]){--🥝progress-bar-size:.25rem}.🥝-progress-bar:where([data-kiwi-variant=indeterminate]){--🥝progress-bar-animation:calc(4*1.5s)--🥝progress-bar-animation-indeterminate steps(4,end)infinite;--🥝progress-bar-fill-size:25%}@media (prefers-reduced-motion:no-preference){.🥝-progress-bar:where([data-kiwi-variant=indeterminate]){--🥝progress-bar-animation:1.5s --🥝progress-bar-animation-indeterminate cubic-bezier(.5,0,.5,1)4,calc(1.5s*2)--🥝progress-bar-animation-indeterminate-slow cubic-bezier(.5,0,.5,1)calc(4*1.5s)infinite}}@media (forced-colors:active){.🥝-progress-bar{--🥝progress-bar-fill-color:CanvasText;--🥝progress-bar-track-color:Canvas}}}@keyframes --🥝progress-bar-animation-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}@keyframes --🥝progress-bar-animation-indeterminate-slow{0%{transform:translate(-100%)}50%{transform:translate(-95%)}to{transform:translate(400%)}}.🥝-radio.🥝-checkbox{--🥝checkbox-border-radius:9999px;--🥝checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" ><circle cx=\"8\" cy=\"8\" r=\"4\" /></svg>");--🥝checkbox-indeterminate-svg:var(--🥝checkbox-unchecked-svg)}@layer states{.🥝-radio.🥝-checkbox:where(:indeterminate){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--default)}}@layer base{.🥝-spinner{color:var(--🥝spinner-color);block-size:var(--🥝spinner-size);inline-size:var(--🥝spinner-size);display:inline-block}}@layer modifiers{.🥝-spinner:where([data-kiwi-tone=neutral]){--🥝spinner-color:var(--ids-color-icon-neutral-base)}.🥝-spinner:where([data-kiwi-tone=accent]){--🥝spinner-color:var(--ids-color-icon-accent-strong)}.🥝-spinner:where([data-kiwi-size=small]){--🥝spinner-size:1rem}.🥝-spinner:where([data-kiwi-size=medium]){--🥝spinner-size:1.5rem}.🥝-spinner:where([data-kiwi-size=large]){--🥝spinner-size:2rem}.🥝-spinner:where([data-kiwi-size=xlarge]){--🥝spinner-size:3rem}}@layer base{.🥝-spinner-svg{block-size:inherit;inline-size:inherit;fill:none;animation:1s linear infinite both --🥝spinner-spin}@media (prefers-reduced-motion){.🥝-spinner-svg{animation-duration:4s;animation-timing-function:steps(4,end)}}}@keyframes --🥝spinner-spin{to{rotate:360deg}}@layer base{.🥝-select-root:where(:has(select.🥝-select),[data-kiwi-has-select=true]){isolation:isolate;align-items:center;display:inline-grid}.🥝-select-root:where(:has(select.🥝-select),[data-kiwi-has-select=true])>*{grid-area:1/1/-1/-1}}@layer base{.🥝-select.🥝-button:where(select:not([multiple])){appearance:none;--🥝button-padding-inline:8px calc(4px + 16px + 4px);--🥝ghost-inline-offset:8px}}@layer base{.🥝-select-arrow.🥝-disclosure-arrow{pointer-events:none;z-index:1;--🥝icon-color:var(--🌀select-arrow-state--default,var(--ids-color-icon-neutral-base))var(--🌀select-arrow-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀select-arrow-state--disabled,var(--ids-color-icon-neutral-disabled));justify-self:end;margin-inline-end:4px}}@layer states{@media (any-hover:hover){:where(.🥝-select:hover)+.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--hover)}}:where(.🥝-select:disabled)+.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--disabled)}}@layer base.🌀{.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--default);--🌀select-arrow-state--default:var(--🌀select-arrow-state, );--🌀select-arrow-state--hover:var(--🌀select-arrow-state, );--🌀select-arrow-state--disabled:var(--🌀select-arrow-state, )}}@layer base{.🥝-skeleton{background-color:var(--ids-color-bg-glow-on-surface-disabled);border-radius:var(--🥝skeleton-border-radius);block-size:var(--🥝skeleton-height);inline-size:var(--🥝skeleton-width)}@media (forced-colors:active){.🥝-skeleton{background-color:#0000;border:1px solid canvastext}}}@layer modifiers{.🥝-skeleton:where([data-kiwi-variant=text]){--🥝skeleton-width:100%}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=xsmall]){--🥝skeleton-height:.75rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=small]){--🥝skeleton-height:.875rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=medium]){--🥝skeleton-height:1rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=large]){--🥝skeleton-height:1.25rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=xlarge]){--🥝skeleton-height:1.5rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=xsmall]){--🥝skeleton-border-radius:2px;--🥝skeleton-height:.75rem;--🥝skeleton-width:.75rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=small]){--🥝skeleton-border-radius:2px;--🥝skeleton-height:1rem;--🥝skeleton-width:1rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=medium]){--🥝skeleton-border-radius:4px;--🥝skeleton-height:1.5rem;--🥝skeleton-width:1.5rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=large]){--🥝skeleton-border-radius:4px;--🥝skeleton-height:2rem;--🥝skeleton-width:2rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=xlarge]){--🥝skeleton-border-radius:4px;--🥝skeleton-height:3rem;--🥝skeleton-width:3rem}}@layer base{.🥝-switch{appearance:none;cursor:pointer;background-color:var(--🌀switch-state--default,var(--ids-color-bg-page-base))var(--🌀switch-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀switch-state--pressed,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀switch-state--checked,var(--ids-color-bg-accent-base))var(--🌀switch-state--checked-hover,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-strong-hover-\%)))var(--🌀switch-state--disabled,var(--ids-color-bg-page-base));border:1px solid #0000;border-color:var(--🌀switch-state--default,var(--ids-color-border-neutral-base))var(--🌀switch-state--hover,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀switch-state--pressed,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀switch-state--checked,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-hover-\%)))var(--🌀switch-state--checked-hover,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-hover-\%)))var(--🌀switch-state--disabled,var(--ids-color-border-glow-on-surface-disabled));border-radius:9999px;align-items:center;inline-size:2rem;transition:background-color .15s ease-out,border-color .15s ease-out;display:inline-grid;position:relative}.🥝-switch:before,.🥝-switch:after{content:"";grid-area:1/1/-1/-1;display:block}.🥝-switch:before{block-size:24px;inline-size:2rem;margin:-1px;position:absolute}.🥝-switch:after{aspect-ratio:var(--🥝switch-thumb-aspect-ratio);background-color:var(--🥝switch-thumb-color);block-size:1rem;box-shadow:var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--ids-color-border-shadow-base)inset,var(--ids-shadow-button-base-drop);justify-self:var(--🥝switch-thumb-placement);border-radius:9999px;margin:calc(.125rem - 1px)}@media (prefers-reduced-motion:no-preference){.🥝-switch:after{will-change:aspect-ratio;transition:aspect-ratio .15s ease-out}}@media (forced-colors:active){.🥝-switch:after{background-color:canvastext}}}@layer states{.🥝-switch{--🥝switch-thumb-color:var(--ids-color-bg-neutral-inverse);--🥝switch-thumb-placement:start;--🥝switch-thumb-aspect-ratio:1/1}@media (any-hover:hover){.🥝-switch:where(:hover){--🌀switch-state:var(--🌀switch-state--hover)}}.🥝-switch:where(:checked,[aria-checked=true]){--🌀switch-state:var(--🌀switch-state--checked);--🥝switch-thumb-placement:end}@media (any-hover:hover){.🥝-switch:where(:checked,[aria-checked=true]):where(:hover){--🌀switch-state:var(--🌀switch-state--checked-hover)}}.🥝-switch:where(:active){--🌀switch-state:var(--🌀switch-state--pressed);--🥝switch-thumb-aspect-ratio:1.75}.🥝-switch:where([disabled],:disabled,[aria-disabled=true]){--🌀switch-state:var(--🌀switch-state--disabled);--🥝switch-thumb-color:var(--ids-color-icon-neutral-disabled);cursor:not-allowed}.🥝-switch:where([disabled],:disabled,[aria-disabled=true]):after{box-shadow:none}}@layer base.🌀{.🥝-switch{--🌀switch-state:var(--🌀switch-state--default);--🌀switch-state--default:var(--🌀switch-state, );--🌀switch-state--hover:var(--🌀switch-state, );--🌀switch-state--pressed:var(--🌀switch-state, );--🌀switch-state--checked:var(--🌀switch-state, );--🌀switch-state--checked-hover:var(--🌀switch-state, );--🌀switch-state--disabled:var(--🌀switch-state, )}}@layer base{.🥝-table{flex-direction:column;display:flex}}@layer base{.🥝-table-header{color:var(--ids-color-text-neutral-secondary)}}@layer base{.🥝-table-body{flex-direction:column;display:flex}}@layer base{.🥝-table-row{border-block-end:1px solid var(--ids-color-border-neutral-muted);display:flex}}@layer base{:is(.🥝-table-caption,.🥝-table-cell){word-break:break-word;-webkit-hyphens:auto;hyphens:auto;align-items:center;column-gap:.5rem;min-block-size:3rem;padding:.5rem;display:flex}}@layer base{.🥝-table-cell{background-color:var(--🌀table-cell-state--default,var(--ids-color-bg-page-base))var(--🌀table-cell-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)));flex-grow:1;flex-basis:4rem;min-inline-size:4rem}}@layer states{@media (any-hover:hover){.🥝-table-cell:where(:hover){--🌀table-cell-state:var(--🌀table-cell-state--hover)}:where(.🥝-table-row:hover) .🥝-table-cell:where(:not([role=columnheader])){--🌀table-cell-state:var(--🌀table-cell-state--hover)}}}@layer base.🌀{.🥝-table-cell{--🌀table-cell-state:var(--🌀table-cell-state--default);--🌀table-cell-state--default:var(--🌀table-cell-state, );--🌀table-cell-state--hover:var(--🌀table-cell-state, )}}@layer base{.🥝-tab-list{--🥝tab-active-stripe-gap:6px;gap:8px;display:flex}}@layer modifiers{.🥝-tab-list[aria-orientation=horizontal]{padding-block-end:var(--🥝tab-active-stripe-gap)}}@layer base{.🥝-tab{font-size:var(--ids-font-size-12);color:var(--🥝tab-color);background-color:var(--🥝tab-bg);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;border:none;border-radius:4px;block-size:1.25rem;padding-inline:4px;transition:background-color .15s ease-out,color .15s ease-out;position:relative}@media (forced-colors:active){.🥝-tab{color:buttontext}}.🥝-tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝-tab-list[data-kiwi-tone=neutral]) .🥝-tab{--🥝tab-active-stripe-color:var(--ids-color-border-neutral-inverse);--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-neutral-primary))var(--🌀tab-state--selected,var(--ids-color-text-neutral-primary))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-color-bg-glow-on-surface-neutral-hover)}:where(.🥝-tab-list[data-kiwi-tone=accent]) .🥝-tab{--🥝tab-active-stripe-color:var(--ids-color-border-accent-strong);--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--ids-color-bg-glow-on-surface-accent-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-accent-strong))var(--🌀tab-state--selected,var(--ids-color-text-accent-strong))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-color-bg-glow-on-surface-accent-hover)}}@layer states{.🥝-tab:where([aria-selected=true]){--🌀tab-state:var(--🌀tab-state--selected)}.🥝-tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝tab-active-stripe-color);block-size:2px;inset-inline:4px;inset-block:auto calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}@media (prefers-reduced-motion:no-preference){.🥝-tab:where([aria-selected=true]):after{view-transition-name:var(--🥝tab-active-stripe-view-transition-name)}}@media (forced-colors:active){.🥝-tab:where([aria-selected=true]):after{background-color:selecteditem}}@media (any-hover:hover){.🥝-tab:where(:hover){--🌀tab-state:var(--🌀tab-state--hover)}}.🥝-tab:where([disabled],:disabled,[aria-disabled=true]){--🌀tab-state:var(--🌀tab-state--disabled);--🥝tab-active-stripe-color:var(--ids-color-border-neutral-disabled);cursor:not-allowed}@media (forced-colors:active){.🥝-tab:where([disabled],:disabled,[aria-disabled=true]){color:graytext}.🥝-tab:where([disabled],:disabled,[aria-disabled=true]):after{background-color:graytext}}}@layer base.🌀{.🥝-tab{--🌀tab-state:var(--🌀tab-state--default);--🌀tab-state--default:var(--🌀tab-state, );--🌀tab-state--hover:var(--🌀tab-state, );--🌀tab-state--selected:var(--🌀tab-state, );--🌀tab-state--disabled:var(--🌀tab-state, )}}@layer base{.🥝-tab-panel{outline-offset:-2px}.🥝-tab-panel:not([data-open]){display:none!important}}@layer modifiers{.🥝-text:where([data-kiwi-text-variant=display-lg]){font-size:var(--ids-font-size-48);line-height:1.1667}.🥝-text:where([data-kiwi-text-variant=display-md]){font-size:var(--ids-font-size-40);line-height:1.2}.🥝-text:where([data-kiwi-text-variant=display-sm]){font-size:var(--ids-font-size-32);line-height:1.25}.🥝-text:where([data-kiwi-text-variant=headline-lg]){font-size:var(--ids-font-size-28);line-height:1.2857}.🥝-text:where([data-kiwi-text-variant=headline-md]){font-size:var(--ids-font-size-24);line-height:1.3333}.🥝-text:where([data-kiwi-text-variant=headline-sm]){font-size:var(--ids-font-size-20);line-height:1.4}.🥝-text:where([data-kiwi-text-variant=body-lg]){font-size:var(--ids-font-size-16);line-height:1.5}.🥝-text:where([data-kiwi-text-variant=body-md]){font-size:var(--ids-font-size-14);line-height:1.4286}.🥝-text:where([data-kiwi-text-variant=body-sm]){font-size:var(--ids-font-size-12);line-height:1.3333}.🥝-text:where([data-kiwi-text-variant=caption-lg]){font-size:var(--ids-font-size-11);line-height:1.4545}.🥝-text:where([data-kiwi-text-variant=caption-md]){font-size:var(--ids-font-size-10);line-height:1.2}.🥝-text:where([data-kiwi-text-variant=caption-sm]){font-size:var(--ids-font-size-8);line-height:1.5}.🥝-text:where([data-kiwi-text-variant=mono-sm]){font-family:var(--ids-font-family-mono);font-size:var(--ids-font-size-12);line-height:1.3333}}@layer base{.🥝-text-box{cursor:var(--🥝text-box-cursor);font-size:var(--ids-font-size-12);background-color:var(--🥝text-box-background-color);min-block-size:1.5rem;min-inline-size:0;box-shadow:var(--ids-shadow-input-base);color:var(--ids-color-text-neutral-primary);--🥝text-box-cursor:text;--🥝text-box-background-color:var(--🌀text-box-state--default,var(--ids-color-bg-page-base))var(--🌀text-box-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀text-box-state--disabled,var(--ids-color-bg-elevation-control));--🥝text-box-border-color:var(--🌀text-box-state--default,var(--ids-color-border-neutral-base))var(--🌀text-box-state--hover,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀text-box-state--disabled,var(--ids-color-border-glow-on-surface-disabled));border-radius:4px;padding-inline:8px;transition:background-color .15s ease-out,border-color .15s ease-out}.🥝-text-box:where(:not(input,textarea)){align-items:center;gap:4px;display:inline-flex;position:relative}.🥝-text-box:where(:not(input,textarea)):before{content:"";border-radius:inherit;pointer-events:none;border:1px solid var(--🥝text-box-border-color);transition:border-color .15s ease-out;position:absolute;inset:0}.🥝-text-box:where(input,textarea),.🥝-text-box :where(input,textarea){appearance:none;border:1px solid var(--🥝text-box-border-color);min-inline-size:0;cursor:var(--🥝text-box-cursor);padding-block:max(0px,.75rem - 1px - .5lh);line-height:1.3}:is(.🥝-text-box:where(input,textarea),.🥝-text-box :where(input,textarea))::placeholder{color:var(--ids-color-text-neutral-secondary);opacity:1;-webkit-user-select:none;user-select:none}.🥝-text-box:where(textarea),.🥝-text-box :where(textarea){resize:vertical;resize:block}.🥝-text-box :where(input,textarea){background-color:var(--🥝text-box-background-color);outline:unset;border:none;flex:999;align-self:stretch;transition:background-color .15s ease-out}}@layer states{@media (any-hover:hover){.🥝-text-box:where(:hover){--🌀text-box-state:var(--🌀text-box-state--hover)}}.🥝-text-box:where(:has(:is(input,textarea):focus-visible),:is(input,textarea):focus-visible){outline:2px solid var(--ids-color-border-accent-base);outline-offset:1px;--🥝text-box-border-color:var(--ids-color-border-accent-strong);--🥝icon-color:var(--ids-color-icon-accent-strong)}@supports not selector(:has(+ *)){.🥝-text-box:where(:not(input,textarea):focus-within){outline:2px solid var(--ids-color-border-accent-base);outline-offset:1px;--🥝text-box-border-color:var(--ids-color-border-accent-strong);--🥝icon-color:var(--ids-color-icon-accent-strong)}}.🥝-text-box:where([disabled],:disabled,[aria-disabled=true],[data-kiwi-disabled=true],:has(:is(input,textarea):disabled)){--🌀text-box-state:var(--🌀text-box-state--disabled);box-shadow:none;color:var(--ids-color-text-neutral-disabled);--🥝text-box-cursor:not-allowed}}@layer base.🌀{.🥝-text-box{--🌀text-box-state:var(--🌀text-box-state--default);--🌀text-box-state--default:var(--🌀text-box-state, );--🌀text-box-state--hover:var(--🌀text-box-state, );--🌀text-box-state--disabled:var(--🌀text-box-state, )}}@layer base{.🥝-text-box-decoration{flex-shrink:0}}@layer base{.🥝-tooltip{background-color:var(--ids-color-bg-elevation-emphasis);box-shadow:var(--ids-shadow-tooltip-base);color:var(--ids-color-text-neutral-emphasis);border:1px solid var(--ids-color-border-elevation-base);min-block-size:1rem;max-inline-size:12.25rem;font-size:var(--ids-font-size-12);border-radius:.25rem;justify-content:center;gap:.25rem;padding-block:calc(.25rem - 1px);padding-inline:calc(.625rem - 1px);line-height:1.3333;display:flex}}@layer base{.🥝-tree{background-color:var(--ids-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝-tree-item{min-inline-size:max-content;position:relative}}@layer states{.🥝-tree-item:focus-visible{isolation:isolate;outline:none}.🥝-tree-item:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:2px solid var(--ids-color-border-accent-strong);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝-tree-item:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝tree-item-all-actions-visibility:hidden}@supports not selector(:has(+ *)){.🥝-tree-item{--🥝tree-item-all-actions-visibility:visible}}}}@layer base{.🥝-tree-item-node.🥝-list-item{isolation:isolate;padding-inline-start:calc(8px + 6px*(var(--🥝tree-item-level) - 1));padding-inline-end:0;position:relative}}@layer states{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active)}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-expanded=false]){--🥝tree-chevron-rotate:-.25turn}.🥝-tree-item-node.🥝-list-item:where(:not([data-kiwi-expanded])){--🥝tree-item-expander-visibility:hidden}}@layer base{.🥝-tree-item-content.🥝-list-item-content{white-space:nowrap}}@layer base{.🥝-tree-item-description.🥝-list-item-content{color:var(--🌀list-item-state--default,var(--ids-color-text-neutral-secondary))}}@layer base{.🥝-tree-item-actions.🥝-list-item-decoration{background-color:var(--ids-color-bg-page-base);visibility:var(--🥝tree-item-all-actions-visibility,var(--🥝tree-item-action-visibility));align-self:stretch;padding-inline-end:4px;transition:visibility 16ms;display:inline-flex;position:sticky;inset-inline-end:0}.🥝-tree-item-actions.🥝-list-item-decoration:before{content:"";background-color:var(--🥝list-item-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝-tree-item-actions.🥝-list-item-decoration:where(:has(.🥝-tree-item-action[data-kiwi-visible=true])){--🥝tree-item-all-actions-visibility:visible}}@layer base{.🥝-tree-item-action.🥝-icon-button{visibility:var(--🥝tree-item-action-visibility)}}@layer modifiers{.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=false]){--🥝tree-item-action-visibility:hidden}.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=true]){--🥝tree-item-action-visibility:visible}}@layer base{.🥝-tree-item-expander.🥝-icon-button{visibility:var(--🥝tree-item-expander-visibility);z-index:1}}@layer base{.🥝-tree-chevron{rotate:var(--🥝tree-chevron-rotate)}@media (prefers-reduced-motion:no-preference){.🥝-tree-chevron{transition:rotate .15s ease-in-out}}}@layer base{.🥝-tree-item-decoration{align-items:center;gap:.25rem;display:flex}}@layer base{.🥝-field{--🥝field-description-column:label-start/label-end;grid-template-columns:[label-start]auto[label-end control-start]auto[control-end];justify-content:start;align-items:center;gap:4px;display:grid}.🥝-field:where([data-kiwi-control-type=checkable][data-kiwi-label-placement=after]){grid-template-columns:[control-start]auto[control-end label-start]auto[label-end]}.🥝-field:where([data-kiwi-control-type=textlike]){--🥝field-description-column:control-start/control-end;align-items:baseline}.🥝-field:where([data-kiwi-control-type=textlike]):where(:not([data-kiwi-layout=inline])){grid-template-columns:[label-start control-start]auto[label-end control-end]}.🥝-field :where(.🥝-description){grid-column:var(--🥝field-description-column)}}}`; | ||
var styles_default = String.raw`@layer itwinui.components.base,itwinui.components.modifiers,itwinui.components.states;@layer itwinui.components{@layer base{.🥝-icon{width:var(--🥝icon-size,1rem);height:var(--🥝icon-size,1rem);color:var(--🥝icon-color);flex-shrink:0;transition:color .15s ease-out}}@layer modifiers{.🥝-icon:where([data-kiwi-size=regular]){--🥝icon-size:1rem}.🥝-icon:where([data-kiwi-size=large]){--🥝icon-size:1.5rem}}@layer base{.🥝-disclosure-arrow{rotate:var(--🥝disclosure-arrow-rotate);margin-inline-end:-8px}@media (prefers-reduced-motion:no-preference){.🥝-disclosure-arrow{transition:rotate .15s ease-in-out}}}@layer base{.🥝-ghost-aligner:where([data-kiwi-ghost-align=inline]){margin-inline:calc(-1*var(--🥝ghost-inline-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=inline-start]){margin-inline-start:calc(-1*var(--🥝ghost-inline-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=inline-end]){margin-inline-end:calc(-1*var(--🥝ghost-inline-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=block]){margin-block:calc(-1*var(--🥝ghost-block-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=block-start]){margin-block-start:calc(-1*var(--🥝ghost-block-offset))}.🥝-ghost-aligner:where([data-kiwi-ghost-align=block-end]){margin-block-end:calc(-1*var(--🥝ghost-block-offset))}}@layer base{.🥝-list-item{cursor:pointer;line-height:1.2;font-size:var(--ids-font-size-12);min-block-size:var(--🥝list-item-height,1.75rem);background-color:var(--🥝list-item-background-color);--🥝list-item-background-color:var(--🌀list-item-state--default,transparent)var(--🌀list-item-state--hover,var(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-bg-glow-on-surface-neutral-pressed))var(--🌀list-item-state--active,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--active-hover,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--disabled,transparent);color:var(--🥝list-item-color,var(--🌀list-item-state--default,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--hover,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--pressed,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--active,var(--ids-color-text-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-text-accent-strong))var(--🌀list-item-state--disabled,var(--ids-color-text-neutral-disabled)));--🥝icon-color:var(--🌀list-item-state--default,var(--ids-color-icon-neutral-base))var(--🌀list-item-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--active,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--disabled,var(--ids-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;padding-inline:.5rem;display:grid}}@layer states{@media (any-hover:hover){.🥝-list-item:where(:hover){--🌀list-item-state:var(--🌀list-item-state--hover)}}.🥝-list-item:where(:active){--🌀list-item-state:var(--🌀list-item-state--pressed)}.🥝-list-item:where([disabled],:disabled,[aria-disabled=true]){--🌀list-item-state:var(--🌀list-item-state--disabled);cursor:not-allowed}@media (forced-colors:active){.🥝-list-item:where([disabled],:disabled,[aria-disabled=true]){color:graytext;--🥝icon-color:GrayText}}}@layer modifiers{.🥝-list-item:where(:has(>:nth-child(2 of .🥝-list-item-content))){--🥝list-item-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝-list-item{--🌀list-item-state:var(--🌀list-item-state--default);--🌀list-item-state--default:var(--🌀list-item-state, );--🌀list-item-state--hover:var(--🌀list-item-state, );--🌀list-item-state--pressed:var(--🌀list-item-state, );--🌀list-item-state--active:var(--🌀list-item-state, );--🌀list-item-state--active-hover:var(--🌀list-item-state, );--🌀list-item-state--disabled:var(--🌀list-item-state, )}}@layer base{.🥝-list-item-content{grid-column:content}}@layer base{.🥝-list-item-decoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:.25rem;display:flex}:where(.🥝-list-item-content)~.🥝-list-item-decoration{grid-column:decoration-after;margin-inline:.25rem 0}}@layer base{.🥝-anchor{cursor:pointer;font-size:var(--ids-font-size-12);text-underline-offset:var(--🌀anchor-state--default,2px)var(--🌀anchor-state--hover,3px)var(--🌀anchor-state--pressed,3px);-webkit-text-decoration-color:var(--🌀anchor-state--default,currentColor)var(--🌀anchor-state--hover,currentColor)var(--🌀anchor-state--pressed,transparent);text-decoration-color:var(--🌀anchor-state--default,currentColor)var(--🌀anchor-state--hover,currentColor)var(--🌀anchor-state--pressed,transparent);color:var(--🥝anchor-color,var(--ids-color-text-neutral-primary));border-radius:4px;font-weight:500;text-decoration-line:underline;transition:color .15s ease-out,text-decoration-color .15s ease-out,text-underline-offset .15s ease-out}.🥝-anchor:where(button){background:0 0;border:none}}@layer modifiers{.🥝-anchor:where([data-kiwi-tone=accent]){--🥝anchor-color:var(--🌀anchor-state--default,var(--ids-color-text-accent-strong))var(--🌀anchor-state--hover,color-mix(in oklch,var(--ids-color-text-accent-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-hover-\%)))var(--🌀anchor-state--pressed,color-mix(in oklch,var(--ids-color-text-accent-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-pressed-\%)))}.🥝-anchor:where([data-kiwi-tone=critical]){--🥝anchor-color:var(--🌀anchor-state--default,var(--ids-color-text-critical-base))var(--🌀anchor-state--hover,color-mix(in oklch,var(--ids-color-text-critical-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-hover-\%)))var(--🌀anchor-state--pressed,color-mix(in oklch,var(--ids-color-text-critical-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-text-glow-strong-pressed-\%)))}}@layer states{@media (any-hover:hover){.🥝-anchor:where(:hover){--🌀anchor-state:var(--🌀anchor-state--hover)}}.🥝-anchor:where(:active){--🌀anchor-state:var(--🌀anchor-state--pressed)}.🥝-anchor:where(:focus-visible){outline-offset:2px}.🥝-anchor:where([disabled],:disabled,[aria-disabled=true]){--🥝anchor-color:var(--ids-color-text-neutral-disabled);cursor:not-allowed;text-decoration:none}}@layer base.🌀{.🥝-anchor{--🌀anchor-state:var(--🌀anchor-state--default);--🌀anchor-state--default:var(--🌀anchor-state, );--🌀anchor-state--hover:var(--🌀anchor-state, );--🌀anchor-state--pressed:var(--🌀anchor-state, )}}@layer base{.🥝-avatar{--🥝avatar-background-color:var(--ids-color-bg-mono-base);block-size:var(--🥝avatar-size);inline-size:var(--🥝avatar-size);background-color:var(--🥝avatar-background-color);color:var(--ids-color-text-neutral-emphasis);-webkit-user-select:none;user-select:none;border-radius:50%;place-items:center;display:inline-grid;position:relative;overflow:hidden}@media (forced-colors:active){.🥝-avatar{border:1px solid canvastext}}.🥝-avatar:after{content:"";border-radius:inherit;box-shadow:0px 0px 0px 1px var(--ids-color-border-glow-strong-default)inset;position:absolute;inset:0}.🥝-avatar>img{background-color:inherit;block-size:inherit;inline-size:inherit;object-fit:cover;object-position:center}}@layer modifiers{.🥝-avatar:where([data-kiwi-size=small]){--🥝avatar-size:1rem;--🥝avatar-font-size:var(--ids-font-size-8);--🥝icon-size:.75rem}.🥝-avatar:where([data-kiwi-size=medium]){--🥝avatar-size:1.5rem;--🥝avatar-font-size:var(--ids-font-size-10);--🥝icon-size:1rem}.🥝-avatar:where([data-kiwi-size=large]){--🥝avatar-size:2rem;--🥝avatar-font-size:var(--ids-font-size-12);--🥝icon-size:1rem}.🥝-avatar:where([data-kiwi-size=xlarge]){--🥝avatar-size:3rem;--🥝avatar-font-size:var(--ids-font-size-16);--🥝icon-size:1.5rem}}@layer base{.🥝-avatar-initials{font-size:var(--🥝avatar-font-size);text-align:center;text-transform:uppercase;font-weight:600}}@layer base{.🥝-badge{white-space:nowrap;box-shadow:0px 0px 0px 1px var(--🥝badge-border-color)inset;background-color:var(--🥝badge-background-color);color:var(--🥝badge-text-color);block-size:1.25rem;font-weight:500;font-size:var(--ids-font-size-12);border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;padding-inline:8px;line-height:1.3333;display:inline-flex}@media (forced-colors:active){.🥝-badge{border:1px solid}}}@layer modifiers{.🥝-badge:where([data-kiwi-variant=solid]){--🥝badge-border-color:var(--ids-color-border-glow-strong-default);--🥝badge-text-color:var(--ids-color-text-neutral-emphasis)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=neutral]){--🥝badge-background-color:var(--ids-color-bg-mono-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=info]){--🥝badge-background-color:var(--ids-color-bg-info-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=positive]){--🥝badge-background-color:var(--ids-color-bg-positive-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=attention]){--🥝badge-background-color:var(--ids-color-bg-attention-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=critical]){--🥝badge-background-color:var(--ids-color-bg-critical-base)}.🥝-badge:where([data-kiwi-variant=solid]):where([data-kiwi-tone=accent]){--🥝badge-background-color:var(--ids-color-bg-accent-base)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=neutral]){--🥝badge-background-color:var(--ids-color-bg-mono-muted);--🥝badge-border-color:var(--ids-color-border-mono-muted);--🥝badge-text-color:var(--ids-color-text-mono-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=info]){--🥝badge-background-color:var(--ids-color-bg-info-muted);--🥝badge-border-color:var(--ids-color-border-info-muted);--🥝badge-text-color:var(--ids-color-text-info-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=positive]){--🥝badge-background-color:var(--ids-color-bg-positive-muted);--🥝badge-border-color:var(--ids-color-border-positive-muted);--🥝badge-text-color:var(--ids-color-text-positive-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=attention]){--🥝badge-background-color:var(--ids-color-bg-attention-muted);--🥝badge-border-color:var(--ids-color-border-attention-muted);--🥝badge-text-color:var(--ids-color-text-attention-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=critical]){--🥝badge-background-color:var(--ids-color-bg-critical-muted);--🥝badge-border-color:var(--ids-color-border-critical-muted);--🥝badge-text-color:var(--ids-color-text-critical-faded)}.🥝-badge:where([data-kiwi-variant=muted]):where([data-kiwi-tone=accent]){--🥝badge-background-color:var(--ids-color-bg-accent-muted);--🥝badge-border-color:var(--ids-color-border-accent-muted);--🥝badge-text-color:var(--ids-color-text-accent-faded)}.🥝-badge:where([data-kiwi-variant=outline]){--🥝badge-background-color:transparent}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=neutral]){--🥝badge-text-color:var(--ids-color-text-mono-base);--🥝badge-border-color:var(--ids-color-border-mono-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=info]){--🥝badge-text-color:var(--ids-color-text-info-base);--🥝badge-border-color:var(--ids-color-border-info-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=positive]){--🥝badge-text-color:var(--ids-color-text-positive-base);--🥝badge-border-color:var(--ids-color-border-positive-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=attention]){--🥝badge-text-color:var(--ids-color-text-attention-base);--🥝badge-border-color:var(--ids-color-border-attention-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=critical]){--🥝badge-text-color:var(--ids-color-text-critical-base);--🥝badge-border-color:var(--ids-color-border-critical-base)}.🥝-badge:where([data-kiwi-variant=outline]):where([data-kiwi-tone=accent]){--🥝badge-text-color:var(--ids-color-text-accent-base);--🥝badge-border-color:var(--ids-color-border-accent-base)}}@layer base{.🥝-button{white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;line-height:1.2;font-size:var(--ids-font-size-12);block-size:1.5rem;padding-inline:var(--🥝button-padding-inline,12px);--🥝ghost-inline-offset:12px;--🥝ghost-block-offset:4px;background-color:var(--🥝button-background-color);color:var(--🥝button-color,var(--ids-color-text-neutral-primary));-webkit-tap-highlight-color:color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%));--🥝icon-color:var(--🌀button-state--default,var(--ids-color-icon-neutral-base))var(--🌀button-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀button-state--pressed,var(--ids-color-icon-neutral-hover))var(--🌀button-state--active,var(--ids-color-icon-accent-strong))var(--🌀button-state--disabled,var(--ids-color-icon-neutral-disabled));border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding-block:4px;font-weight:500;text-decoration:none;transition:background-color .15s ease-out;display:inline-flex;position:relative}@media (forced-colors:active){.🥝-button{color:buttontext;--🥝icon-color:ButtonText;background-color:buttonface;border:1px solid buttonborder}}}@layer modifiers{.🥝-button:where([data-kiwi-variant=solid]){--🥝button-background-color:var(--🌀button-state--default,var(--🥝button-bg--solid-default))var(--🌀button-state--hover,color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀button-state--disabled,var(--ids-color-bg-glow-on-surface-disabled));box-shadow:var(--🌀button-state--default,var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--🥝button-border-color)inset,var(--ids-shadow-button-base-drop))var(--🌀button-state--hover,var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--🥝button-border-color)inset,var(--ids-shadow-button-base-drop))var(--🌀button-state--pressed,0px 0px 0px 1px var(--🥝button-border-color)inset)var(--🌀button-state--disabled,none)}.🥝-button:where([data-kiwi-variant=solid]):where([data-kiwi-tone=neutral]){--🥝button-bg--solid-default:var(--ids-color-bg-neutral-base);--🥝button-border-color:var(--🌀button-state--default,var(--ids-color-border-shadow-base))var(--🌀button-state--hover,color-mix(in oklch,var(--ids-color-border-shadow-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--ids-color-border-shadow-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀button-state--disabled,transparent)}.🥝-button:where([data-kiwi-variant=solid]):where([data-kiwi-tone=accent]){--🥝button-bg--solid-default:var(--ids-color-bg-accent-base);--🥝button-border-color:var(--🌀button-state--default,var(--ids-color-border-shadow-strong))var(--🌀button-state--hover,color-mix(in oklch,var(--ids-color-border-shadow-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--ids-color-border-shadow-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-pressed-\%)))var(--🌀button-state--disabled,transparent);--🥝button-color:var(--ids-color-text-neutral-emphasis);--🥝icon-color:var(--🌀button-state--default,var(--ids-color-icon-neutral-emphasis))var(--🌀button-state--hover,var(--ids-color-icon-neutral-emphasis))var(--🌀button-state--pressed,var(--ids-color-icon-neutral-emphasis))var(--🌀button-state--disabled,var(--ids-color-icon-neutral-disabled))}@media (forced-colors:active){.🥝-button:where([data-kiwi-variant=solid]):where([data-kiwi-tone=accent]){--🥝icon-color:ButtonText}}.🥝-button:where([data-kiwi-variant=outline]){--🥝button-background-color:var(--🌀button-state--default,transparent)var(--🌀button-state--hover,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀button-state--disabled,transparent);--🥝button-border-color:var(--🌀button-state--default,var(--ids-color-border-neutral-base))var(--🌀button-state--hover,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀button-state--disabled,var(--ids-color-border-glow-on-surface-disabled));box-shadow:0px 0px 0px 1px var(--🥝button-border-color)inset}.🥝-button:where([data-kiwi-variant=ghost]){--🥝button-background-color:var(--🌀button-state--default,transparent)var(--🌀button-state--hover,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,transparent 100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀button-state--active,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀button-state--disabled,transparent)}}@layer states{@media (any-hover:hover){.🥝-button:where(:hover){--🌀button-state:var(--🌀button-state--hover)}}.🥝-button:where(:active){--🌀button-state:var(--🌀button-state--pressed)}.🥝-button:where([data-kiwi-variant=ghost][aria-pressed=true]){--🌀button-state:var(--🌀button-state--active)}@media (forced-colors:active){.🥝-button:where([data-kiwi-variant=ghost][aria-pressed=true]){color:selecteditemtext;--🥝icon-color:SelectedItemText;background-color:selecteditem}}.🥝-button:where([disabled],:disabled,[aria-disabled=true]){--🌀button-state:var(--🌀button-state--disabled);color:var(--ids-color-text-neutral-disabled);cursor:not-allowed}@media (forced-colors:active){.🥝-button:where([disabled],:disabled,[aria-disabled=true]){color:graytext;--🥝icon-color:GrayText;border-color:graytext}}}@layer base.🌀{.🥝-button{--🌀button-state:var(--🌀button-state--default);--🌀button-state--default:var(--🌀button-state, );--🌀button-state--hover:var(--🌀button-state, );--🌀button-state--pressed:var(--🌀button-state, );--🌀button-state--active:var(--🌀button-state, );--🌀button-state--disabled:var(--🌀button-state, )}}@layer base{.🥝-checkbox{--🥝checkbox-color-svg:var(--ids-color-icon-neutral-emphasis);--🥝checkbox-border-radius:4px;--🥝checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--🥝checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M11.2 5.6 6.8 10l-2-2\"/></svg>");--🥝checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M5 8h6.5\"/></svg>");appearance:none;cursor:pointer;background-color:var(--🌀checkbox-visual-state--default,var(--ids-color-bg-neutral-base))var(--🌀checkbox-visual-state--hover,color-mix(in oklch,var(--ids-color-bg-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀checkbox-visual-state--checked,var(--ids-color-bg-accent-base))var(--🌀checkbox-visual-state--checked-hover,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-pressed-\%)))var(--🌀checkbox-visual-state--disabled,var(--ids-color-bg-glow-on-surface-disabled));border-radius:var(--🥝checkbox-border-radius);block-size:1rem;inline-size:1rem;color:var(--🌀checkbox-aria-state--unchecked,transparent)var(--🌀checkbox-aria-state--checked,var(--🥝checkbox-color-svg))var(--🌀checkbox-aria-state--indeterminate,var(--🥝checkbox-color-svg));box-shadow:var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--🥝checkbox-border-color)inset,var(--ids-shadow-button-base-drop);--🥝checkbox-border-color:var(--🌀checkbox-visual-state--default,var(--ids-color-border-shadow-base))var(--🌀checkbox-visual-state--hover,color-mix(in oklch,var(--ids-color-border-shadow-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀checkbox-visual-state--checked,var(--ids-color-border-shadow-strong))var(--🌀checkbox-visual-state--checked-hover,color-mix(in oklch,var(--ids-color-border-shadow-strong)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀checkbox-visual-state--disabled,transparent);--🥝checkbox-mask-image:var(--🌀checkbox-aria-state--unchecked,var(--🥝checkbox-unchecked-svg))var(--🌀checkbox-aria-state--checked,var(--🥝checkbox-checkmark-svg))var(--🌀checkbox-aria-state--indeterminate,var(--🥝checkbox-indeterminate-svg));transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out,--🥝checkbox-border-color .15s ease-out;position:relative}.🥝-checkbox:before,.🥝-checkbox:after{content:"";position:absolute;inset:0}.🥝-checkbox:before{inset:calc(.5rem - 12px)}.🥝-checkbox:after{-webkit-mask-image:var(--🥝checkbox-mask-image,initial);mask-image:var(--🥝checkbox-mask-image,initial);background-color:currentColor;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@media (forced-colors:active){.🥝-checkbox:after{background-color:canvastext}}}@layer states{@media (forced-colors:active){.🥝-checkbox{border:1px solid canvastext}}@media (any-hover:hover){.🥝-checkbox:where(:hover){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--hover)}}.🥝-checkbox:where(:checked,[aria-checked=true]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked);--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--checked)}@media (any-hover:hover){.🥝-checkbox:where(:checked,[aria-checked=true]):where(:hover){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked-hover)}}.🥝-checkbox:where(:indeterminate,[aria-checked=mixed]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked);--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--indeterminate)}.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--disabled);--🥝checkbox-color-svg:var(--ids-color-icon-neutral-disabled);cursor:not-allowed;box-shadow:none}@media (forced-colors:active){.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]){border-color:graytext}.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]):after{background-color:graytext}}}@layer base.🌀{.🥝-checkbox{--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--default);--🌀checkbox-visual-state--default:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--hover:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--checked:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--checked-hover:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--disabled:var(--🌀checkbox-visual-state, );--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--unchecked);--🌀checkbox-aria-state--unchecked:var(--🌀checkbox-aria-state, );--🌀checkbox-aria-state--checked:var(--🌀checkbox-aria-state, );--🌀checkbox-aria-state--indeterminate:var(--🌀checkbox-aria-state, )}}@layer base{.🥝-chip{isolation:isolate;--🥝chip-padding-inline:.5rem;padding-inline:var(--🥝chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝-chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--ids-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝-chip:where([data-kiwi-variant=solid]){background-color:var(--ids-color-bg-neutral-base)}.🥝-chip:where([data-kiwi-variant=outline]){background-color:var(--ids-color-bg-page-base)}}@layer base{.🥝-chip-dismiss-button.🥝-icon-button{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝chip-padding-inline));position:relative}}@layer modifiers{.🥝-description.🥝-text:where([data-kiwi-tone=neutral]){color:var(--ids-color-text-neutral-tertiary)}.🥝-description.🥝-text:where([data-kiwi-tone=critical]){color:var(--ids-color-text-critical-base)}}.🥝-divider{background-color:var(--ids-color-border-neutral-muted);flex:none;align-self:stretch}@media (forced-colors:active){.🥝-divider{background-color:canvastext}}.🥝-divider:is(hr){border:none;margin:0}.🥝-divider:not([aria-orientation=vertical],[data-kiwi-orientation=vertical]){block-size:1px}.🥝-divider:is([aria-orientation=vertical],[data-kiwi-orientation=vertical]){min-block-size:100%;inline-size:1px}@layer base{.🥝-dropdown-menu{background-color:var(--ids-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);box-shadow:var(--ids-shadow-surface-xl);border-radius:8px;flex-direction:column;padding:4px;display:flex}@media (forced-colors:active){.🥝-dropdown-menu{border:1px solid canvastext}}}@layer states{.🥝-dropdown-menu-button:where([aria-expanded=true]){--🥝disclosure-arrow-rotate:.5turn}}@layer base{.🥝-dropdown-menu-item.🥝-list-item{border-radius:4px}}@layer states{.🥝-dropdown-menu-item.🥝-list-item:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝dropdown-menu-checkmark-visibility:hidden}}@layer base{.🥝-dropdown-menu-checkmark{visibility:var(--🥝dropdown-menu-checkmark-visibility)}}@layer base{.🥝-dropdown-menu-item-shortcuts{margin-inline-start:.5rem}}@layer base{.🥝-icon-button.🥝-button{aspect-ratio:1;--🥝button-padding-inline:4px;--🥝ghost-inline-offset:4px}}@layer modifiers{.🥝-icon-button.🥝-button:where([data-kiwi-dot=true]):after{content:"";background-color:var(--ids-color-icon-accent-strong);border-radius:9999px;block-size:4px;inline-size:4px;display:inline-block;position:absolute;inset-block-start:2px;inset-inline-end:2px}@media (forced-colors:active){.🥝-icon-button.🥝-button:where([data-kiwi-dot=true]):after{background-color:canvastext}}@media (forced-colors:active){.🥝-icon-button.🥝-button:where([data-kiwi-dot=true][aria-pressed=true]):after{background-color:selecteditemtext}}}@layer base{.🥝-kbd{color:var(--ids-color-text-neutral-secondary);min-block-size:16px;font-family:inherit;font-weight:500;font-size:var(--ids-font-size-12);flex-shrink:0;justify-content:center;align-items:center;line-height:1.3333;display:inline-flex}}@layer modifiers{.🥝-kbd:where([data-kiwi-variant=solid],[data-kiwi-variant=muted]){background-color:var(--ids-color-bg-neutral-base);border-radius:4px;padding-inline:4px}.🥝-kbd:where([data-kiwi-variant=solid]){box-shadow:var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--ids-color-border-shadow-base)inset,var(--ids-shadow-button-base-drop)}.🥝-kbd:where([data-kiwi-variant=ghost]){color:var(--ids-color-text-neutral-tertiary)}}@layer base{.🥝-label{color:var(--ids-color-text-neutral-secondary);cursor:default;font-size:var(--ids-font-size-12)}.🥝-label:is(label){cursor:pointer}}@layer states{.🥝-label:has(+:where(:disabled,[disabled],[aria-disabled=true])){color:var(--ids-color-text-neutral-disabled)}.🥝-label:has(+:where(:disabled,[disabled],[aria-disabled=true])):is(label){cursor:not-allowed}}@layer base{.🥝-progress-bar{block-size:var(--🥝progress-bar-size);contain:strict;background-color:var(--🥝progress-bar-track-color);border-radius:9999px;inline-size:100%;display:grid}.🥝-progress-bar:before{content:"";block-size:inherit;inline-size:var(--🥝progress-bar-fill-size);border-radius:inherit;background-color:var(--🥝progress-bar-fill-color);animation:var(--🥝progress-bar-animation)}}@layer modifiers{.🥝-progress-bar:where([data-kiwi-tone=neutral]){--🥝progress-bar-fill-color:var(--ids-color-icon-neutral-base);--🥝progress-bar-track-color:var(--ids-color-border-page-base)}.🥝-progress-bar:where([data-kiwi-tone=accent]){--🥝progress-bar-fill-color:var(--ids-color-icon-accent-strong);--🥝progress-bar-track-color:var(--ids-color-bg-accent-muted)}.🥝-progress-bar:where([data-kiwi-size=small]){--🥝progress-bar-size:.063rem}.🥝-progress-bar:where([data-kiwi-size=medium]){--🥝progress-bar-size:.125rem}.🥝-progress-bar:where([data-kiwi-size=large]){--🥝progress-bar-size:.25rem}.🥝-progress-bar:where([data-kiwi-variant=indeterminate]){--🥝progress-bar-animation:calc(4*1.5s)--🥝progress-bar-animation-indeterminate steps(4,end)infinite;--🥝progress-bar-fill-size:25%}@media (prefers-reduced-motion:no-preference){.🥝-progress-bar:where([data-kiwi-variant=indeterminate]){--🥝progress-bar-animation:1.5s --🥝progress-bar-animation-indeterminate cubic-bezier(.5,0,.5,1)4,calc(1.5s*2)--🥝progress-bar-animation-indeterminate-slow cubic-bezier(.5,0,.5,1)calc(4*1.5s)infinite}}@media (forced-colors:active){.🥝-progress-bar{--🥝progress-bar-fill-color:CanvasText;--🥝progress-bar-track-color:Canvas}}}@keyframes --🥝progress-bar-animation-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}@keyframes --🥝progress-bar-animation-indeterminate-slow{0%{transform:translate(-100%)}50%{transform:translate(-95%)}to{transform:translate(400%)}}.🥝-radio.🥝-checkbox{--🥝checkbox-border-radius:9999px;--🥝checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" ><circle cx=\"8\" cy=\"8\" r=\"4\" /></svg>");--🥝checkbox-indeterminate-svg:var(--🥝checkbox-unchecked-svg)}@layer states{.🥝-radio.🥝-checkbox:where(:indeterminate){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--default)}}@layer base{.🥝-spinner{block-size:var(--🥝spinner-size);inline-size:var(--🥝spinner-size);display:inline-block}}@layer modifiers{.🥝-spinner:where([data-kiwi-tone=neutral]){--🥝spinner-fill-color:var(--ids-color-icon-neutral-base);--🥝spinner-track-color:var(--ids-color-border-page-base)}.🥝-spinner:where([data-kiwi-tone=accent]){--🥝spinner-fill-color:var(--ids-color-icon-accent-strong);--🥝spinner-track-color:var(--ids-color-bg-accent-muted)}.🥝-spinner:where([data-kiwi-size=small]){--🥝spinner-size:1rem}.🥝-spinner:where([data-kiwi-size=medium]){--🥝spinner-size:1.5rem}.🥝-spinner:where([data-kiwi-size=large]){--🥝spinner-size:2rem}.🥝-spinner:where([data-kiwi-size=xlarge]){--🥝spinner-size:3rem}.🥝-spinner:where([data-kiwi-variant=indeterminate]){--🥝spinner-animation:calc(4*1s)--🥝spinner-animation-indeterminate steps(4,end)infinite;--🥝spinner-dash-array:25 75}@media (prefers-reduced-motion:no-preference){.🥝-spinner:where([data-kiwi-variant=indeterminate]){--🥝spinner-animation:1s --🥝spinner-animation-indeterminate linear 4,calc(1s*2)--🥝spinner-animation-indeterminate-slow linear calc(4*1s)infinite}}@media (forced-colors:active){.🥝-spinner{--🥝spinner-fill-color:CanvasText;--🥝spinner-track-color:Canvas}}}@layer base{.🥝-spinner-svg{block-size:inherit;inline-size:inherit;fill:none}}.🥝-spinner-svg-track{stroke:var(--🥝spinner-track-color)}.🥝-spinner-svg-fill{animation:var(--🥝spinner-animation);stroke:var(--🥝spinner-fill-color);stroke-dasharray:var(--🥝spinner-dash-array);stroke-dashoffset:25px;stroke-linecap:round;transform-box:fill-box;transform-origin:50%}@keyframes --🥝spinner-animation-indeterminate{to{rotate:360deg}}@keyframes --🥝spinner-animation-indeterminate-slow{50%{rotate:30deg}to{rotate:360deg}}@layer base{.🥝-select-root:where(:has(select.🥝-select),[data-kiwi-has-select=true]){isolation:isolate;align-items:center;display:inline-grid}.🥝-select-root:where(:has(select.🥝-select),[data-kiwi-has-select=true])>*{grid-area:1/1/-1/-1}}@layer base{.🥝-select.🥝-button:where(select:not([multiple])){appearance:none;--🥝button-padding-inline:8px calc(4px + 16px + 4px);--🥝ghost-inline-offset:8px}}@layer base{.🥝-select-arrow.🥝-disclosure-arrow{pointer-events:none;z-index:1;--🥝icon-color:var(--🌀select-arrow-state--default,var(--ids-color-icon-neutral-base))var(--🌀select-arrow-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀select-arrow-state--disabled,var(--ids-color-icon-neutral-disabled));justify-self:end;margin-inline-end:4px}}@layer states{@media (any-hover:hover){:where(.🥝-select:hover)+.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--hover)}}:where(.🥝-select:disabled)+.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--disabled)}}@layer base.🌀{.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--default);--🌀select-arrow-state--default:var(--🌀select-arrow-state, );--🌀select-arrow-state--hover:var(--🌀select-arrow-state, );--🌀select-arrow-state--disabled:var(--🌀select-arrow-state, )}}@layer base{.🥝-skeleton{background-color:var(--ids-color-bg-glow-on-surface-disabled);border-radius:var(--🥝skeleton-border-radius);block-size:var(--🥝skeleton-height);inline-size:var(--🥝skeleton-width)}@media (prefers-reduced-motion:no-preference){.🥝-skeleton{background:linear-gradient(to right,oklch(from var(--ids-color-glow-hue)l c h/.04)40.0%,oklch(from var(--ids-color-glow-hue)l c h/.08)50.0%,oklch(from var(--ids-color-glow-hue)l c h/.04)60%);background-position-x:100%;background-size:300%;background-attachment:fixed;animation:1.6s cubic-bezier(.32,1,.64,1) infinite --🥝skeleton-shimmer}}@media (forced-colors:active){.🥝-skeleton{background-color:#0000;border:1px solid canvastext}}}@layer modifiers{.🥝-skeleton:where([data-kiwi-variant=text]){--🥝skeleton-width:100%}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=xsmall]){--🥝skeleton-height:.75rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=small]){--🥝skeleton-height:.875rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=medium]){--🥝skeleton-height:1rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=large]){--🥝skeleton-height:1.25rem}.🥝-skeleton:where([data-kiwi-variant=text]):where([data-kiwi-size=xlarge]){--🥝skeleton-height:1.5rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=xsmall]){--🥝skeleton-border-radius:2px;--🥝skeleton-height:.75rem;--🥝skeleton-width:.75rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=small]){--🥝skeleton-border-radius:2px;--🥝skeleton-height:1rem;--🥝skeleton-width:1rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=medium]){--🥝skeleton-border-radius:4px;--🥝skeleton-height:1.5rem;--🥝skeleton-width:1.5rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=large]){--🥝skeleton-border-radius:4px;--🥝skeleton-height:2rem;--🥝skeleton-width:2rem}.🥝-skeleton:where([data-kiwi-variant=object]):where([data-kiwi-size=xlarge]){--🥝skeleton-border-radius:4px;--🥝skeleton-height:3rem;--🥝skeleton-width:3rem}}@keyframes --🥝skeleton-shimmer{to{background-position-x:0%}}@layer base{.🥝-switch{appearance:none;cursor:pointer;background-color:var(--🌀switch-state--default,var(--ids-color-bg-page-base))var(--🌀switch-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀switch-state--pressed,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀switch-state--checked,var(--ids-color-bg-accent-base))var(--🌀switch-state--checked-hover,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-strong-hover-\%)))var(--🌀switch-state--disabled,var(--ids-color-bg-page-base));border:1px solid #0000;border-color:var(--🌀switch-state--default,var(--ids-color-border-neutral-base))var(--🌀switch-state--hover,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀switch-state--pressed,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-pressed-\%)))var(--🌀switch-state--checked,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-hover-\%)))var(--🌀switch-state--checked-hover,color-mix(in oklch,var(--ids-color-bg-accent-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-strong-hover-\%)))var(--🌀switch-state--disabled,var(--ids-color-border-glow-on-surface-disabled));border-radius:9999px;align-items:center;inline-size:2rem;transition:background-color .15s ease-out,border-color .15s ease-out;display:inline-grid;position:relative}.🥝-switch:before,.🥝-switch:after{content:"";grid-area:1/1/-1/-1;display:block}.🥝-switch:before{block-size:24px;inline-size:2rem;margin:-1px;position:absolute}.🥝-switch:after{aspect-ratio:var(--🥝switch-thumb-aspect-ratio);background-color:var(--🥝switch-thumb-color);block-size:1rem;box-shadow:var(--ids-shadow-button-base-inset),0px 0px 0px 1px var(--ids-color-border-shadow-base)inset,var(--ids-shadow-button-base-drop);justify-self:var(--🥝switch-thumb-placement);border-radius:9999px;margin:calc(.125rem - 1px)}@media (prefers-reduced-motion:no-preference){.🥝-switch:after{will-change:aspect-ratio;transition:aspect-ratio .15s ease-out}}@media (forced-colors:active){.🥝-switch:after{background-color:canvastext}}}@layer states{.🥝-switch{--🥝switch-thumb-color:var(--ids-color-bg-neutral-inverse);--🥝switch-thumb-placement:start;--🥝switch-thumb-aspect-ratio:1/1}@media (any-hover:hover){.🥝-switch:where(:hover){--🌀switch-state:var(--🌀switch-state--hover)}}.🥝-switch:where(:checked,[aria-checked=true]){--🌀switch-state:var(--🌀switch-state--checked);--🥝switch-thumb-placement:end}@media (any-hover:hover){.🥝-switch:where(:checked,[aria-checked=true]):where(:hover){--🌀switch-state:var(--🌀switch-state--checked-hover)}}.🥝-switch:where(:active){--🌀switch-state:var(--🌀switch-state--pressed);--🥝switch-thumb-aspect-ratio:1.75}.🥝-switch:where([disabled],:disabled,[aria-disabled=true]){--🌀switch-state:var(--🌀switch-state--disabled);--🥝switch-thumb-color:var(--ids-color-icon-neutral-disabled);cursor:not-allowed}.🥝-switch:where([disabled],:disabled,[aria-disabled=true]):after{box-shadow:none}}@layer base.🌀{.🥝-switch{--🌀switch-state:var(--🌀switch-state--default);--🌀switch-state--default:var(--🌀switch-state, );--🌀switch-state--hover:var(--🌀switch-state, );--🌀switch-state--pressed:var(--🌀switch-state, );--🌀switch-state--checked:var(--🌀switch-state, );--🌀switch-state--checked-hover:var(--🌀switch-state, );--🌀switch-state--disabled:var(--🌀switch-state, )}}@layer base{.🥝-table{flex-direction:column;display:flex}}@layer base{.🥝-table-header{color:var(--ids-color-text-neutral-secondary)}}@layer base{.🥝-table-body{flex-direction:column;display:flex}}@layer base{.🥝-table-row{border-block-end:1px solid var(--ids-color-border-neutral-muted);display:flex}}@layer base{:is(.🥝-table-caption,.🥝-table-cell){word-break:break-word;-webkit-hyphens:auto;hyphens:auto;align-items:center;column-gap:.5rem;min-block-size:3rem;padding:.5rem;display:flex}}@layer base{.🥝-table-cell{background-color:var(--🌀table-cell-state--default,var(--ids-color-bg-page-base))var(--🌀table-cell-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)));flex-grow:1;flex-basis:4rem;min-inline-size:4rem}}@layer states{@media (any-hover:hover){.🥝-table-cell:where(:hover){--🌀table-cell-state:var(--🌀table-cell-state--hover)}:where(.🥝-table-row:hover) .🥝-table-cell:where(:not([role=columnheader])){--🌀table-cell-state:var(--🌀table-cell-state--hover)}}}@layer base.🌀{.🥝-table-cell{--🌀table-cell-state:var(--🌀table-cell-state--default);--🌀table-cell-state--default:var(--🌀table-cell-state, );--🌀table-cell-state--hover:var(--🌀table-cell-state, )}}@layer base{.🥝-tab-list{--🥝tab-active-stripe-gap:8px;--🥝tab-active-stripe-size:2px;--🥝tab-padding-inline:4px;gap:8px;display:flex;position:relative}@supports (position-anchor:--foo){.🥝-tab-list:after{content:"";position-anchor:--🥝active-tab;inset-inline:calc(anchor(start) + var(--🥝tab-padding-inline))calc(anchor(end) + var(--🥝tab-padding-inline));block-size:var(--🥝tab-active-stripe-size);background-color:var(--🥝tab-active-stripe-color);position:absolute;inset-block-end:calc(anchor(end) - var(--🥝tab-active-stripe-gap))}@media (prefers-reduced-motion:no-preference){.🥝-tab-list:after{transition:inset-inline .15s ease-in-out}}@media (forced-colors:active){.🥝-tab-list:after{background-color:selecteditem}}}}@layer modifiers{.🥝-tab-list[aria-orientation=horizontal]{padding-block-end:var(--🥝tab-active-stripe-gap)}.🥝-tab-list:where([data-kiwi-tone=neutral]){--🥝tab-active-stripe-color:var(--ids-color-border-neutral-inverse)}.🥝-tab-list:where([data-kiwi-tone=accent]){--🥝tab-active-stripe-color:var(--ids-color-border-accent-strong)}}@layer base{.🥝-tab{font-size:var(--ids-font-size-12);color:var(--🥝tab-color);background-color:var(--🥝tab-bg);block-size:1.25rem;padding-inline:var(--🥝tab-padding-inline);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;border:none;border-radius:4px;transition:background-color .15s ease-out,color .15s ease-out;position:relative}@media (forced-colors:active){.🥝-tab{color:buttontext}}.🥝-tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝-tab-list[data-kiwi-tone=neutral]) .🥝-tab{--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-neutral-primary))var(--🌀tab-state--selected,var(--ids-color-text-neutral-primary))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-color-bg-glow-on-surface-neutral-hover)}:where(.🥝-tab-list[data-kiwi-tone=accent]) .🥝-tab{--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--ids-color-bg-glow-on-surface-accent-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-accent-strong))var(--🌀tab-state--selected,var(--ids-color-text-accent-strong))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-color-bg-glow-on-surface-accent-hover)}}@layer states{.🥝-tab:where([aria-selected=true]){--🌀tab-state:var(--🌀tab-state--selected);anchor-name:--🥝active-tab}@supports not (anchor-name:--foo){.🥝-tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝tab-active-stripe-color);block-size:var(--🥝tab-active-stripe-size);inset-inline:var(--🥝tab-padding-inline);inset-block:auto calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}@media (forced-colors:active){.🥝-tab:where([aria-selected=true]):after{background-color:selecteditem}}}@media (any-hover:hover){.🥝-tab:where(:hover){--🌀tab-state:var(--🌀tab-state--hover)}}.🥝-tab:where([disabled],:disabled,[aria-disabled=true]){--🌀tab-state:var(--🌀tab-state--disabled);--🥝tab-active-stripe-color:var(--ids-color-border-neutral-disabled);cursor:not-allowed}@media (forced-colors:active){.🥝-tab:where([disabled],:disabled,[aria-disabled=true]){color:graytext}}}@layer base.🌀{.🥝-tab{--🌀tab-state:var(--🌀tab-state--default);--🌀tab-state--default:var(--🌀tab-state, );--🌀tab-state--hover:var(--🌀tab-state, );--🌀tab-state--selected:var(--🌀tab-state, );--🌀tab-state--disabled:var(--🌀tab-state, )}}@layer base{.🥝-tab-panel{outline-offset:-2px}.🥝-tab-panel:not([data-open]){display:none!important}}@layer modifiers{.🥝-text:where([data-kiwi-text-variant=display-lg]){font-size:var(--ids-font-size-48);line-height:1.1667}.🥝-text:where([data-kiwi-text-variant=display-md]){font-size:var(--ids-font-size-40);line-height:1.2}.🥝-text:where([data-kiwi-text-variant=display-sm]){font-size:var(--ids-font-size-32);line-height:1.25}.🥝-text:where([data-kiwi-text-variant=headline-lg]){font-size:var(--ids-font-size-28);line-height:1.2857}.🥝-text:where([data-kiwi-text-variant=headline-md]){font-size:var(--ids-font-size-24);line-height:1.3333}.🥝-text:where([data-kiwi-text-variant=headline-sm]){font-size:var(--ids-font-size-20);line-height:1.4}.🥝-text:where([data-kiwi-text-variant=body-lg]){font-size:var(--ids-font-size-16);line-height:1.5}.🥝-text:where([data-kiwi-text-variant=body-md]){font-size:var(--ids-font-size-14);line-height:1.4286}.🥝-text:where([data-kiwi-text-variant=body-sm]){font-size:var(--ids-font-size-12);line-height:1.3333}.🥝-text:where([data-kiwi-text-variant=caption-lg]){font-size:var(--ids-font-size-11);line-height:1.4545}.🥝-text:where([data-kiwi-text-variant=caption-md]){font-size:var(--ids-font-size-10);line-height:1.2}.🥝-text:where([data-kiwi-text-variant=caption-sm]){font-size:var(--ids-font-size-8);line-height:1.5}.🥝-text:where([data-kiwi-text-variant=mono-sm]){font-family:var(--ids-font-family-mono);font-size:var(--ids-font-size-12);line-height:1.3333}}@layer base{.🥝-text-box{cursor:var(--🥝text-box-cursor);font-size:var(--ids-font-size-12);background-color:var(--🥝text-box-background-color);min-block-size:1.5rem;min-inline-size:0;box-shadow:var(--ids-shadow-input-base);color:var(--ids-color-text-neutral-primary);--🥝text-box-cursor:text;--🥝text-box-background-color:var(--🌀text-box-state--default,var(--ids-color-bg-page-base))var(--🌀text-box-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)))var(--🌀text-box-state--disabled,var(--ids-color-bg-elevation-control));--🥝text-box-border-color:var(--🌀text-box-state--default,var(--ids-color-border-neutral-base))var(--🌀text-box-state--hover,color-mix(in oklch,var(--ids-color-border-neutral-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-border-glow-base-hover-\%)))var(--🌀text-box-state--disabled,var(--ids-color-border-glow-on-surface-disabled));border-radius:4px;padding-inline:8px;transition:background-color .15s ease-out,border-color .15s ease-out}.🥝-text-box:where(:not(input,textarea)){align-items:center;gap:4px;display:inline-flex;position:relative}.🥝-text-box:where(:not(input,textarea)):before{content:"";border-radius:inherit;pointer-events:none;border:1px solid var(--🥝text-box-border-color);transition:border-color .15s ease-out;position:absolute;inset:0}.🥝-text-box:where(input,textarea),.🥝-text-box :where(input,textarea){appearance:none;border:1px solid var(--🥝text-box-border-color);min-inline-size:0;cursor:var(--🥝text-box-cursor);padding-block:max(0px,.75rem - 1px - .5lh);line-height:1.3}:is(.🥝-text-box:where(input,textarea),.🥝-text-box :where(input,textarea))::placeholder{color:var(--ids-color-text-neutral-secondary);opacity:1;-webkit-user-select:none;user-select:none}.🥝-text-box:where(textarea),.🥝-text-box :where(textarea){resize:vertical;resize:block}.🥝-text-box :where(input,textarea){background-color:var(--🥝text-box-background-color);outline:unset;border:none;flex:999;align-self:stretch;transition:background-color .15s ease-out}}@layer states{@media (any-hover:hover){.🥝-text-box:where(:hover){--🌀text-box-state:var(--🌀text-box-state--hover)}}.🥝-text-box:where(:has(:is(input,textarea):focus-visible),:is(input,textarea):focus-visible){outline:2px solid var(--ids-color-border-accent-base);outline-offset:1px;--🥝text-box-border-color:var(--ids-color-border-accent-strong);--🥝icon-color:var(--ids-color-icon-accent-strong)}@supports not selector(:has(+ *)){.🥝-text-box:where(:not(input,textarea):focus-within){outline:2px solid var(--ids-color-border-accent-base);outline-offset:1px;--🥝text-box-border-color:var(--ids-color-border-accent-strong);--🥝icon-color:var(--ids-color-icon-accent-strong)}}.🥝-text-box:where([disabled],:disabled,[aria-disabled=true],[data-kiwi-disabled=true],:has(:is(input,textarea):disabled)){--🌀text-box-state:var(--🌀text-box-state--disabled);box-shadow:none;color:var(--ids-color-text-neutral-disabled);--🥝text-box-cursor:not-allowed}}@layer base.🌀{.🥝-text-box{--🌀text-box-state:var(--🌀text-box-state--default);--🌀text-box-state--default:var(--🌀text-box-state, );--🌀text-box-state--hover:var(--🌀text-box-state, );--🌀text-box-state--disabled:var(--🌀text-box-state, )}}@layer base{.🥝-text-box-decoration{flex-shrink:0}}@layer base{.🥝-tooltip{background-color:var(--ids-color-bg-elevation-emphasis);box-shadow:var(--ids-shadow-tooltip-base);color:var(--ids-color-text-neutral-emphasis);border:1px solid var(--ids-color-border-elevation-base);min-block-size:1rem;max-inline-size:12.25rem;font-size:var(--ids-font-size-12);border-radius:.25rem;justify-content:center;gap:.25rem;padding-block:calc(.25rem - 1px);padding-inline:calc(.625rem - 1px);line-height:1.3333;display:flex}}@layer base{.🥝-tree{background-color:var(--ids-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝-tree-item{min-inline-size:max-content;position:relative}}@layer states{.🥝-tree-item:focus-visible{isolation:isolate;outline:none}.🥝-tree-item:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:2px solid var(--ids-color-border-accent-strong);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝-tree-item:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝tree-item-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝-tree-item{--🥝tree-item-action-visibility:visible}}}}@layer base{.🥝-tree-item-node.🥝-list-item{isolation:isolate;--🥝list-item-color:var(--🥝tree-item-color);padding-inline-start:calc(8px + 6px*(var(--🥝tree-item-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]){--🥝icon-color:var(--ids-color-icon-attention-base);--🥝tree-item-color:var(--ids-color-text-attention-base)}}@layer states{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active)}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-expanded=false]){--🥝tree-chevron-rotate:-.25turn}.🥝-tree-item-node.🥝-list-item:where(:not([data-kiwi-expanded])){--🥝tree-item-expander-visibility:hidden}}@layer base{.🥝-tree-item-content.🥝-list-item-content{white-space:nowrap}}@layer base{.🥝-tree-item-description.🥝-list-item-content{color:var(--🥝tree-item-color,var(--🌀list-item-state--default,var(--ids-color-text-neutral-secondary)))}}@layer base{.🥝-tree-item-actions-container.🥝-list-item-decoration{background-color:var(--ids-color-bg-page-base);visibility:var(--🥝tree-item-actions-container-visibility,var(--🥝tree-item-action-visibility));align-self:stretch;padding-inline-end:4px;display:inline-flex;position:sticky;inset-inline-end:0}.🥝-tree-item-actions-container.🥝-list-item-decoration:before{content:"";background-color:var(--🥝list-item-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝-tree-item-actions-container.🥝-list-item-decoration:where(:has(.🥝-tree-item-action[data-kiwi-visible=true])){--🥝tree-item-actions-container-visibility:visible}}@layer base{.🥝-tree-item-action.🥝-icon-button{visibility:var(--🥝tree-item-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=false]){--🥝tree-item-action-visibility:hidden}.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=true]){--🥝tree-item-action-visibility:visible}}@layer base{.🥝-tree-item-expander.🥝-icon-button{visibility:var(--🥝tree-item-expander-visibility);z-index:1}}@layer base{.🥝-tree-chevron{rotate:var(--🥝tree-chevron-rotate)}@media (prefers-reduced-motion:no-preference){.🥝-tree-chevron{transition:rotate .15s ease-in-out}}}@layer base{.🥝-tree-item-decoration{align-items:center;gap:.25rem;display:flex}}@layer base{.🥝-field{--🥝field-description-column:label-start/label-end;grid-template-columns:[label-start]auto[label-end control-start]auto[control-end];justify-content:start;align-items:center;gap:4px;display:grid}.🥝-field:where([data-kiwi-control-type=checkable][data-kiwi-label-placement=after]){grid-template-columns:[control-start]auto[control-end label-start]auto[label-end]}.🥝-field:where([data-kiwi-control-type=textlike]){--🥝field-description-column:control-start/control-end;align-items:baseline}.🥝-field:where([data-kiwi-control-type=textlike]):where(:not([data-kiwi-layout=inline])){grid-template-columns:[label-start control-start]auto[label-end control-end]}.🥝-field :where(.🥝-description){grid-column:var(--🥝field-description-column)}}}`; | ||
@@ -4,0 +4,0 @@ // src/bricks/styles.css.ts |
@@ -46,2 +46,3 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime"; | ||
"aria-hidden": "true", | ||
portal: true, | ||
...rest, | ||
@@ -57,3 +58,2 @@ unmountOnHide, | ||
wrapperProps: popover.wrapperProps, | ||
portal: popover.portal, | ||
children: content | ||
@@ -60,0 +60,0 @@ } |
@@ -11,3 +11,3 @@ import { jsx, jsxs } from "react/jsx-runtime"; | ||
import { IconButton } from "./IconButton.js"; | ||
import { Icon } from "./Icon.js"; | ||
import { Icon, StatusWarning } from "./Icon.js"; | ||
import { forwardRef } from "./~utils.js"; | ||
@@ -23,3 +23,3 @@ import { useEventHandlers } from "./~hooks.js"; | ||
expanded, | ||
icon, | ||
icon: iconProp, | ||
unstable_decorations, | ||
@@ -29,2 +29,3 @@ label, | ||
actions, | ||
error, | ||
onSelectedChange, | ||
@@ -54,2 +55,3 @@ onExpandedChange, | ||
const decorationId = React.useId(); | ||
const icon = error ? /* @__PURE__ */ jsx(StatusWarning, {}) : iconProp; | ||
const describedBy = React.useMemo(() => { | ||
@@ -97,2 +99,3 @@ const idRefs = []; | ||
"data-kiwi-selected": selected, | ||
"data-kiwi-error": error ? true : void 0, | ||
className: "\u{1F95D}-tree-item-node", | ||
@@ -154,3 +157,3 @@ style: { "--\u{1F95D}tree-item-level": level }, | ||
onKeyDown: useEventHandlers(props.onKeyDown, (e) => e.stopPropagation()), | ||
className: cx("\u{1F95D}-tree-item-actions", props.className), | ||
className: cx("\u{1F95D}-tree-item-actions-container", props.className), | ||
ref: forwardedRef, | ||
@@ -157,0 +160,0 @@ children: props.children |
{ | ||
"name": "@itwin/itwinui-react", | ||
"type": "module", | ||
"version": "5.0.0-alpha.10", | ||
"version": "5.0.0-alpha.11", | ||
"license": "MIT", | ||
@@ -6,0 +6,0 @@ "sideEffects": false, |
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
384207
7.61%118
3.51%6878
7.52%1
Infinity%