reshaped 4.2.0 → 4.3.0-canary.1

package/dist/tests/themes.stories.js

@@ -1,61 +1,22 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.onColors = exports.generation = exports.base = exports.Test = void 0;
-const react_1 = require("react");
-const theming_1 = require("@reshaped/theming");
-const Actionable_1 = __importDefault(require("../components/Actionable"));
-const Alert_1 = __importDefault(require("../components/Alert"));
-const Avatar_1 = __importDefault(require("../components/Avatar"));
-const Badge_1 = __importDefault(require("../components/Badge"));
-const Button_1 = __importDefault(require("../components/Button"));
-const Card_1 = __importDefault(require("../components/Card"));
-const DropdownMenu_1 = __importDefault(require("../components/DropdownMenu"));
-const Link_1 = __importDefault(require("../components/Link"));
-const Switch_1 = __importDefault(require("../components/Switch"));
-const Text_1 = __importDefault(require("../components/Text"));
-const TextField_1 = __importDefault(require("../components/TextField"));
-const Theme_1 = __importStar(require("../components/Theme"));
-const View_1 = __importDefault(require("../components/View"));
-const storybook_1 = require("../utilities/storybook");
-const Mic_1 = __importDefault(require("../icons/Mic"));
-const ThemesPlayground_1 = __importDefault(require("./ThemesPlayground"));
-exports.default = {
+import { useLayoutEffect, useState } from "react";
+import { baseThemeDefinition, generateThemeColors, getThemeCSS } from "@reshaped/theming";
+import Actionable from "../components/Actionable/index.js";
+import Alert from "../components/Alert/index.js";
+import Avatar from "../components/Avatar/index.js";
+import Badge from "../components/Badge/index.js";
+import Button from "../components/Button/index.js";
+import Card from "../components/Card/index.js";
+import DropdownMenu from "../components/DropdownMenu/index.js";
+import Link from "../components/Link/index.js";
+import Switch from "../components/Switch/index.js";
+import Text from "../components/Text/index.js";
+import TextField from "../components/TextField/index.js";
+import Theme, { useTheme } from "../components/Theme/index.js";
+import View from "../components/View/index.js";
+import { Example } from "../utilities/storybook/index.js";
+import IconZap from "../icons/Mic.js";
+import ThemePlayground from "./ThemesPlayground.js";
+export default {
     title: "Internal/Themes",
     parameters: {
         iframe: { url: "https://reshaped.so/docs/tokens/theming/runtime-theming" },
@@ -76,14 +37,14 @@ const colors = [
     "#ff2056",
     "#000000",
 ];
-const Test = () => {
-    const { colorMode } = (0, Theme_1.useTheme)();
-    const [activeColor, setColor] = (0, react_1.useState)(colors[0]);
-    const [theme, setTheme] = (0, react_1.useState)("");
-    const [algo, setAlgo] = (0, react_1.useState)("wcag");
-    (0, react_1.useLayoutEffect)(() => {
-        setTheme((0, theming_1.getThemeCSS)("test", {
-            color: (0, theming_1.generateThemeColors)({
+export const Test = () => {
+    const { colorMode } = useTheme();
+    const [activeColor, setColor] = useState(colors[0]);
+    const [theme, setTheme] = useState("");
+    const [algo, setAlgo] = useState("wcag");
+    useLayoutEffect(() => {
+        setTheme(getThemeCSS("test", {
+            color: generateThemeColors({
                 primary: activeColor === colors[0] ? undefined : activeColor,
             }),
         }, {
@@ -92,13 +53,13 @@ const Test = () => {
     }, [activeColor, algo]);
     return (<>
 			<style>{theme}</style>
-			<Theme_1.default name="test">
-				<View_1.default gap={4}>
-					<View_1.default direction="row" align="center" gap={4}>
+			<Theme name="test">
+				<View gap={4}>
+					<View direction="row" align="center" gap={4}>
 						{colors.map((color) => {
             const hex = colorMode === "dark" && color === "#000000" ? "#ffffff" : color;
-            return (<Actionable_1.default key={color} onClick={() => setColor(color)} borderRadius="inherit">
-									<View_1.default width={5} height={5} borderRadius="circular" attributes={{
+            return (<Actionable key={color} onClick={() => setColor(color)} borderRadius="inherit">
+									<View width={5} height={5} borderRadius="circular" attributes={{
                     style: {
                         transition: `box-shadow var(--rs-duration-fast) var(--rs-easing-standard)`,
                         background: hex,
@@ -107,220 +68,217 @@ const Test = () => {
                             : undefined,
                     },
                 }}/>
-								</Actionable_1.default>);
+								</Actionable>);
         })}
-						<View_1.default.Item gapBefore="auto">
-							<Switch_1.default name="algo" onChange={(args) => setAlgo(args.checked ? "apca" : "wcag")}>
+						<View.Item gapBefore="auto">
+							<Switch name="algo" onChange={(args) => setAlgo(args.checked ? "apca" : "wcag")}>
 								Use APCA
-							</Switch_1.default>
-						</View_1.default.Item>
-					</View_1.default>
+							</Switch>
+						</View.Item>
+					</View>
 
-					<ThemesPlayground_1.default />
-				</View_1.default>
-			</Theme_1.default>
+					<ThemePlayground />
+				</View>
+			</Theme>
 		</>);
 };
-exports.Test = Test;
-const css = (0, theming_1.getThemeCSS)("green", {
+const css = getThemeCSS("green", {
     color: {
         backgroundPrimary: { hex: "#1abc9c", hexDark: "#00E5C4" },
         backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#00E5C4" },
     },
 });
-const css2 = (0, theming_1.getThemeCSS)("peach", {
+const css2 = getThemeCSS("peach", {
     color: {
         backgroundPrimary: { hex: "#ffbe76" },
         backgroundPrimaryHighlighted: { hex: "#ffbe76" },
     },
 });
-const cssGenerated = (0, theming_1.getThemeCSS)("generated", {
-    ...theming_1.baseThemeDefinition,
-    color: (0, theming_1.generateThemeColors)({
+const cssGenerated = getThemeCSS("generated", {
+    ...baseThemeDefinition,
+    color: generateThemeColors({
         primary: "#0369a1" /*"#5a58f2"*/ /* "#2563eb" */,
     }),
 });
-const componentExamples = (<View_1.default gap={4} padding={6} backgroundColor="page">
-		<Text_1.default variant="featured-5">Hello world</Text_1.default>
-		<Text_1.default color="neutral-faded" variant="featured-5">
+const componentExamples = (<View gap={4} padding={6} backgroundColor="page">
+		<Text variant="featured-5">Hello world</Text>
+		<Text color="neutral-faded" variant="featured-5">
 			Hello world faded
-		</Text_1.default>
-		<Text_1.default color="disabled" variant="featured-5">
+		</Text>
+		<Text color="disabled" variant="featured-5">
 			Hello world disabled
-		</Text_1.default>
+		</Text>
 
-		<View_1.default gap={2} direction="row">
-			<Button_1.default color="primary" onClick={() => { }}>
+		<View gap={2} direction="row">
+			<Button color="primary" onClick={() => { }}>
 				Primary button
-			</Button_1.default>
-			<Button_1.default color="critical" onClick={() => { }}>
+			</Button>
+			<Button color="critical" onClick={() => { }}>
 				Critical button
-			</Button_1.default>
-			<Button_1.default color="positive" onClick={() => { }}>
+			</Button>
+			<Button color="positive" onClick={() => { }}>
 				Positive button
-			</Button_1.default>
-			<View_1.default height={9} width={20} borderRadius="small" backgroundColor="warning"/>
-			<Button_1.default color="neutral" onClick={() => { }}>
+			</Button>
+			<View height={9} width={20} borderRadius="small" backgroundColor="warning"/>
+			<Button color="neutral" onClick={() => { }}>
 				Neutral button
-			</Button_1.default>
-			<Button_1.default color="neutral" disabled onClick={() => { }}>
+			</Button>
+			<Button color="neutral" disabled onClick={() => { }}>
 				Disabled button
-			</Button_1.default>
-		</View_1.default>
-		<View_1.default gap={2} direction="row">
-			<Button_1.default color="primary" variant="outline" onClick={() => { }}>
+			</Button>
+		</View>
+		<View gap={2} direction="row">
+			<Button color="primary" variant="outline" onClick={() => { }}>
 				Primary button
-			</Button_1.default>
-			<Button_1.default color="critical" variant="outline" onClick={() => { }}>
+			</Button>
+			<Button color="critical" variant="outline" onClick={() => { }}>
 				Critical button
-			</Button_1.default>
-			<Button_1.default color="positive" variant="outline" onClick={() => { }}>
+			</Button>
+			<Button color="positive" variant="outline" onClick={() => { }}>
 				Positive button
-			</Button_1.default>
-			<Button_1.default color="neutral" variant="outline" onClick={() => { }}>
+			</Button>
+			<Button color="neutral" variant="outline" onClick={() => { }}>
 				Neutral button
-			</Button_1.default>
-		</View_1.default>
-		<View_1.default direction="row" gap={4}>
-			<View_1.default.Item columns={6}>
-				<Alert_1.default color="primary" title="Hello" icon={Mic_1.default} actionsSlot={<Link_1.default color="primary">Action</Link_1.default>}>
+			</Button>
+		</View>
+		<View direction="row" gap={4}>
+			<View.Item columns={6}>
+				<Alert color="primary" title="Hello" icon={IconZap} actionsSlot={<Link color="primary">Action</Link>}>
 					Primary
-				</Alert_1.default>
-			</View_1.default.Item>
-			<View_1.default.Item columns={6}>
-				<Alert_1.default color="critical" title="Hello" icon={Mic_1.default} actionsSlot={<Link_1.default color="critical">Action</Link_1.default>}>
+				</Alert>
+			</View.Item>
+			<View.Item columns={6}>
+				<Alert color="critical" title="Hello" icon={IconZap} actionsSlot={<Link color="critical">Action</Link>}>
 					Critical
-				</Alert_1.default>
-			</View_1.default.Item>
-			<View_1.default.Item columns={6}>
-				<Alert_1.default color="warning" title="Hello" icon={Mic_1.default} actionsSlot={<Text_1.default color="warning">
-							<Link_1.default color="inherit">Action</Link_1.default>
-						</Text_1.default>}>
+				</Alert>
+			</View.Item>
+			<View.Item columns={6}>
+				<Alert color="warning" title="Hello" icon={IconZap} actionsSlot={<Text color="warning">
+							<Link color="inherit">Action</Link>
+						</Text>}>
 					Warning
-				</Alert_1.default>
-			</View_1.default.Item>
-			<View_1.default.Item columns={6}>
-				<Alert_1.default color="positive" title="Hello" icon={Mic_1.default} actionsSlot={<Link_1.default color="positive">Action</Link_1.default>}>
+				</Alert>
+			</View.Item>
+			<View.Item columns={6}>
+				<Alert color="positive" title="Hello" icon={IconZap} actionsSlot={<Link color="positive">Action</Link>}>
 					Positive
-				</Alert_1.default>
-			</View_1.default.Item>
-			<View_1.default.Item columns={6}>
-				<Alert_1.default color="neutral" title="Hello" icon={Mic_1.default} actionsSlot={<Link_1.default color="primary">Action</Link_1.default>}>
+				</Alert>
+			</View.Item>
+			<View.Item columns={6}>
+				<Alert color="neutral" title="Hello" icon={IconZap} actionsSlot={<Link color="primary">Action</Link>}>
 					Neutral
-				</Alert_1.default>
-			</View_1.default.Item>
-			<View_1.default.Item columns={12}>
-				<View_1.default direction="row" gap={2}>
-					<View_1.default backgroundColor="neutral" width={10} height={10}/>
-					<View_1.default backgroundColor="neutral-faded" width={10} height={10}/>
-					<View_1.default backgroundColor="primary" width={10} height={10}/>
-					<View_1.default backgroundColor="primary-faded" width={10} height={10}/>
-					<View_1.default backgroundColor="critical" width={10} height={10}/>
-					<View_1.default backgroundColor="critical-faded" width={10} height={10}/>
-					<View_1.default backgroundColor="warning" width={10} height={10}/>
-					<View_1.default backgroundColor="warning-faded" width={10} height={10}/>
-					<View_1.default backgroundColor="positive" width={10} height={10}/>
-					<View_1.default backgroundColor="positive-faded" width={10} height={10}/>
-				</View_1.default>
-			</View_1.default.Item>
-			<View_1.default.Item columns={12}>
-				<View_1.default direction="row" gap={2}>
-					<Avatar_1.default initials="RS" color="warning" variant="faded"/>
-					<Badge_1.default color="warning">Warning</Badge_1.default>
-				</View_1.default>
-			</View_1.default.Item>
-			<View_1.default.Item columns={12}>
-				<View_1.default direction="row">
-					<View_1.default padding={4} gap={4} backgroundColor="page">
+				</Alert>
+			</View.Item>
+			<View.Item columns={12}>
+				<View direction="row" gap={2}>
+					<View backgroundColor="neutral" width={10} height={10}/>
+					<View backgroundColor="neutral-faded" width={10} height={10}/>
+					<View backgroundColor="primary" width={10} height={10}/>
+					<View backgroundColor="primary-faded" width={10} height={10}/>
+					<View backgroundColor="critical" width={10} height={10}/>
+					<View backgroundColor="critical-faded" width={10} height={10}/>
+					<View backgroundColor="warning" width={10} height={10}/>
+					<View backgroundColor="warning-faded" width={10} height={10}/>
+					<View backgroundColor="positive" width={10} height={10}/>
+					<View backgroundColor="positive-faded" width={10} height={10}/>
+				</View>
+			</View.Item>
+			<View.Item columns={12}>
+				<View direction="row" gap={2}>
+					<Avatar initials="RS" color="warning" variant="faded"/>
+					<Badge color="warning">Warning</Badge>
+				</View>
+			</View.Item>
+			<View.Item columns={12}>
+				<View direction="row">
+					<View padding={4} gap={4} backgroundColor="page">
 						Page
-						<View_1.default backgroundColor="neutral" padding={4}>
+						<View backgroundColor="neutral" padding={4}>
 							Neutral
-						</View_1.default>
-						<View_1.default backgroundColor="neutral-faded" padding={4}>
+						</View>
+						<View backgroundColor="neutral-faded" padding={4}>
 							Neutral faded
-						</View_1.default>
-					</View_1.default>
+						</View>
+					</View>
 
-					<View_1.default padding={4} gap={4} backgroundColor="page-faded">
+					<View padding={4} gap={4} backgroundColor="page-faded">
 						Page faded
-						<View_1.default backgroundColor="neutral" padding={4}>
+						<View backgroundColor="neutral" padding={4}>
 							Neutral
-						</View_1.default>
-						<View_1.default backgroundColor="neutral-faded" padding={4}>
+						</View>
+						<View backgroundColor="neutral-faded" padding={4}>
 							Neutral faded
-						</View_1.default>
-					</View_1.default>
-				</View_1.default>
-			</View_1.default.Item>
-			<View_1.default.Item columns={6}>
-				<Card_1.default>
-					<View_1.default gap={2} align="start">
-						<Badge_1.default variant="faded" color="primary">
+						</View>
+					</View>
+				</View>
+			</View.Item>
+			<View.Item columns={6}>
+				<Card>
+					<View gap={2} align="start">
+						<Badge variant="faded" color="primary">
 							Badge
-						</Badge_1.default>
-						<View_1.default gap={2} direction="row">
-							<DropdownMenu_1.default>
-								<DropdownMenu_1.default.Trigger>
-									{(attributes) => (<Button_1.default variant="outline" attributes={attributes}>
+						</Badge>
+						<View gap={2} direction="row">
+							<DropdownMenu>
+								<DropdownMenu.Trigger>
+									{(attributes) => (<Button variant="outline" attributes={attributes}>
 											Menu
-										</Button_1.default>)}
-								</DropdownMenu_1.default.Trigger>
-								<DropdownMenu_1.default.Content>
-									<DropdownMenu_1.default.Item>Item 1</DropdownMenu_1.default.Item>
-									<DropdownMenu_1.default.Item>Item 1</DropdownMenu_1.default.Item>
+										</Button>)}
+								</DropdownMenu.Trigger>
+								<DropdownMenu.Content>
+									<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+									<DropdownMenu.Item>Item 1</DropdownMenu.Item>
 									<br />
-									<View_1.default backgroundColor="neutral-faded" padding={4}>
+									<View backgroundColor="neutral-faded" padding={4}>
 										Hello
-									</View_1.default>
-								</DropdownMenu_1.default.Content>
-							</DropdownMenu_1.default>
-							<Button_1.default variant="outline">Button</Button_1.default>
-						</View_1.default>
+									</View>
+								</DropdownMenu.Content>
+							</DropdownMenu>
+							<Button variant="outline">Button</Button>
+						</View>
 
-						<TextField_1.default name="h" placeholder="hello" disabled/>
-						<TextField_1.default name="h" placeholder="hello" value="2323"/>
-					</View_1.default>
-				</Card_1.default>
-			</View_1.default.Item>
-			<View_1.default.Item columns={6}>
-				<Card_1.default raised>
-					<View_1.default gap={2} align="start">
-						<Badge_1.default variant="faded" color="primary">
+						<TextField name="h" placeholder="hello" disabled/>
+						<TextField name="h" placeholder="hello" value="2323"/>
+					</View>
+				</Card>
+			</View.Item>
+			<View.Item columns={6}>
+				<Card raised>
+					<View gap={2} align="start">
+						<Badge variant="faded" color="primary">
 							Badge
-						</Badge_1.default>
+						</Badge>
 
-						<TextField_1.default name="h" placeholder="hello" value="2323" disabled/>
-						<TextField_1.default name="h" placeholder="hello" value="2323"/>
+						<TextField name="h" placeholder="hello" value="2323" disabled/>
+						<TextField name="h" placeholder="hello" value="2323"/>
 
-						<Button_1.default color="neutral" disabled onClick={() => { }}>
+						<Button color="neutral" disabled onClick={() => { }}>
 							Disabled button
-						</Button_1.default>
-					</View_1.default>
-				</Card_1.default>
-			</View_1.default.Item>
-		</View_1.default>
-	</View_1.default>);
-const base = () => (<storybook_1.Example>
-		<storybook_1.Example.Item title="custom runtime theme">
+						</Button>
+					</View>
+				</Card>
+			</View.Item>
+		</View>
+	</View>);
+export const base = () => (<Example>
+		<Example.Item title="custom runtime theme">
 			<style>{css}</style>
-			<Theme_1.default name="green">
-				<Button_1.default color="primary">Primary button</Button_1.default>
-			</Theme_1.default>
-		</storybook_1.Example.Item>
-		<storybook_1.Example.Item title="on colors generation">
+			<Theme name="green">
+				<Button color="primary">Primary button</Button>
+			</Theme>
+		</Example.Item>
+		<Example.Item title="on colors generation">
 			<style>{css2}</style>
-			<Theme_1.default name="peach">
-				<Button_1.default color="primary">Primary button</Button_1.default>
-			</Theme_1.default>
-		</storybook_1.Example.Item>
-	</storybook_1.Example>);
-exports.base = base;
-const generation = () => (<div>
+			<Theme name="peach">
+				<Button color="primary">Primary button</Button>
+			</Theme>
+		</Example.Item>
+	</Example>);
+export const generation = () => (<div>
 		<style>{cssGenerated}</style>
-		<Theme_1.default name="generated">{componentExamples}</Theme_1.default>
+		<Theme name="generated">{componentExamples}</Theme>
 	</div>);
-exports.generation = generation;
-const onColorsCss = (0, theming_1.getThemeCSS)("on-color", {
+const onColorsCss = getThemeCSS("on-color", {
     color: {
         backgroundPrimary: { hex: "#1abc9c", hexDark: "#16a085" },
         backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#1abc9c" },
@@ -333,7 +291,7 @@ const onColorsCss = (0, theming_1.getThemeCSS)("on-color", {
         },
     },
 });
-const onColorsCssApca = (0, theming_1.getThemeCSS)("on-color-apca", {
+const onColorsCssApca = getThemeCSS("on-color-apca", {
     color: {
         backgroundPrimary: { hex: "#1abc9c", hexDark: "#16a085" },
         backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#1abc9c" },
@@ -347,24 +305,23 @@ const onColorsCssApca = (0, theming_1.getThemeCSS)("on-color-apca", {
         },
     },
 });
-const onColors = () => (<storybook_1.Example>
-		<storybook_1.Example.Item title="custom on color values">
+export const onColors = () => (<Example>
+		<Example.Item title="custom on color values">
 			<style>{onColorsCss}</style>
-			<Theme_1.default name="on-color">
-				<View_1.default gap={2} direction="row">
-					<Button_1.default color="primary">Primary button</Button_1.default>
-					<Button_1.default color="critical">Critical button</Button_1.default>
-				</View_1.default>
-			</Theme_1.default>
-		</storybook_1.Example.Item>
-		<storybook_1.Example.Item title="custom on color values, apca">
+			<Theme name="on-color">
+				<View gap={2} direction="row">
+					<Button color="primary">Primary button</Button>
+					<Button color="critical">Critical button</Button>
+				</View>
+			</Theme>
+		</Example.Item>
+		<Example.Item title="custom on color values, apca">
 			<style>{onColorsCssApca}</style>
-			<Theme_1.default name="on-color-apca">
-				<View_1.default gap={2} direction="row">
-					<Button_1.default color="primary">Primary button</Button_1.default>
-					<Button_1.default color="critical">Critical button</Button_1.default>
-				</View_1.default>
-			</Theme_1.default>
-		</storybook_1.Example.Item>
-	</storybook_1.Example>);
-exports.onColors = onColors;
+			<Theme name="on-color-apca">
+				<View gap={2} direction="row">
+					<Button color="primary">Primary button</Button>
+					<Button color="critical">Critical button</Button>
+				</View>
+			</Theme>
+		</Example.Item>
+	</Example>);

package/dist/themes/slate/theme.css

@@ -1 +1 @@
-[data-rs-theme~=slate]{--rs-color-brand:oklch(0.55 0.24 262.67);--rs-color-white:oklch(1 0 0);--rs-color-black:oklch(0 0 0);--rs-color-on-background-primary:oklch(1 0 0);--rs-color-on-background-critical:oklch(1 0 0);--rs-color-on-background-warning:oklch(0 0 0);--rs-color-on-background-positive:oklch(1 0 0);--rs-color-on-brand:oklch(1 0 0);--rs-font-family-headline:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-monospace:Geist Mono,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-headline-1:5rem;--rs-line-height-headline-1:5.25rem;--rs-font-family-headline-1:var(--rs-font-family-headline);--rs-font-weight-headline-1:var(--rs-font-weight-bold);--rs-letter-spacing-headline-1:normal;--rs-font-size-headline-2:4rem;--rs-line-height-headline-2:4.25rem;--rs-font-family-headline-2:var(--rs-font-family-headline);--rs-font-weight-headline-2:var(--rs-font-weight-bold);--rs-letter-spacing-headline-2:normal;--rs-font-size-headline-3:3rem;--rs-line-height-headline-3:3.25rem;--rs-font-family-headline-3:var(--rs-font-family-headline);--rs-font-weight-headline-3:var(--rs-font-weight-bold);--rs-letter-spacing-headline-3:normal;--rs-font-size-featured-1:2.5rem;--rs-line-height-featured-1:2.75rem;--rs-font-family-featured-1:var(--rs-font-family-title);--rs-font-weight-featured-1:var(--rs-font-weight-semibold);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:2rem;--rs-line-height-featured-2:2.25rem;--rs-font-family-featured-2:var(--rs-font-family-title);--rs-font-weight-featured-2:var(--rs-font-weight-semibold);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.75rem;--rs-line-height-featured-3:2rem;--rs-font-family-featured-3:var(--rs-font-family-title);--rs-font-weight-featured-3:var(--rs-font-weight-semibold);--rs-letter-spacing-featured-3:normal;--rs-font-size-featured-4:1.5rem;--rs-line-height-featured-4:2rem;--rs-font-family-featured-4:var(--rs-font-family-title);--rs-font-weight-featured-4:var(--rs-font-weight-semibold);--rs-letter-spacing-featured-4:normal;--rs-font-size-featured-5:1.25rem;--rs-line-height-featured-5:1.75rem;--rs-font-family-featured-5:var(--rs-font-family-title);--rs-font-weight-featured-5:var(--rs-font-weight-semibold);--rs-letter-spacing-featured-5:normal;--rs-font-size-featured-6:1.125rem;--rs-line-height-featured-6:1.5rem;--rs-font-family-featured-6:var(--rs-font-family-title);--rs-font-weight-featured-6:var(--rs-font-weight-semibold);--rs-letter-spacing-featured-6:normal;--rs-font-size-body-1:1rem;--rs-line-height-body-1:1.5rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-font-weight-body-1:var(--rs-font-weight-regular);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:0.875rem;--rs-line-height-body-2:1.25rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-font-weight-body-2:var(--rs-font-weight-regular);--rs-letter-spacing-body-2:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-font-weight-caption-1:var(--rs-font-weight-regular);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-font-weight-caption-2:var(--rs-font-weight-regular);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-unit-x0-5:2px;--rs-unit-x1-5:6px;--rs-radius-small:4px;--rs-radius-medium:6px;--rs-radius-large:10px;--rs-duration-rapid:100ms;--rs-duration-fast:150ms;--rs-duration-medium:250ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.2,0,0,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280;--rs-z-index-relative:10;--rs-z-index-absolute:100;--rs-z-index-fixed:200}[data-rs-theme~=slate][data-rs-color-mode=light]{--rs-color-background-primary:oklch(0.55 0.24 262.67);--rs-color-background-primary-faded:oklch(0.98 0.02 262.67);--rs-color-background-primary-highlighted:oklch(0.495 0.24 262.67);--rs-color-background-primary-highlighted-faded:oklch(0.55 0.24 262.67/0.06);--rs-color-border-primary:oklch(0.51 0.24 262.67);--rs-color-border-primary-faded:oklch(0.94 0.02 262.67);--rs-color-foreground-primary:oklch(0.52 0.24 262.67);--rs-color-background-critical:oklch(0.59 0.205 20.28);--rs-color-background-critical-faded:oklch(0.98 0.02 20.28);--rs-color-background-critical-highlighted:oklch(0.531 0.205 20.28);--rs-color-background-critical-highlighted-faded:oklch(0.59 0.205 20.28/0.06);--rs-color-border-critical:oklch(0.55 0.205 20.28);--rs-color-border-critical-faded:oklch(0.94 0.02 20.28);--rs-color-foreground-critical:oklch(0.52 0.205 20.28);--rs-color-background-warning:oklch(0.82 0.22 80);--rs-color-background-warning-faded:oklch(0.98 0.04 80);--rs-color-background-warning-highlighted:oklch(0.738 0.22 80);--rs-color-background-warning-highlighted-faded:oklch(0.82 0.22 80/0.06);--rs-color-border-warning:oklch(0.78 0.22 80);--rs-color-border-warning-faded:oklch(0.94 0.04 80);--rs-color-foreground-warning:oklch(0.52 0.22 80);--rs-color-background-positive:oklch(0.55 0.13 151.8);--rs-color-background-positive-faded:oklch(0.98 0.02 151.8);--rs-color-background-positive-highlighted:oklch(0.495 0.13 151.8);--rs-color-background-positive-highlighted-faded:oklch(0.55 0.13 151.8/0.06);--rs-color-border-positive:oklch(0.51 0.13 151.8);--rs-color-border-positive-faded:oklch(0.94 0.02 151.8);--rs-color-foreground-positive:oklch(0.52 0.13 151.8);--rs-color-background-neutral:oklch(0.94 0 89.88);--rs-color-background-neutral-faded:oklch(0 0 89.88/0.03);--rs-color-background-neutral-highlighted:oklch(0.9118 0 89.88);--rs-color-background-neutral-highlighted-faded:oklch(0 0 0/0.03);--rs-color-border-neutral:oklch(0 0 89.88/0.12);--rs-color-border-neutral-faded:oklch(0 0 89.88/0.08);--rs-color-foreground-neutral:oklch(0.24 0 89.88);--rs-color-foreground-neutral-faded:oklch(0.54 0 89.88);--rs-color-background-disabled:oklch(0.95 0 89.88);--rs-color-background-disabled-faded:oklch(0.98 0 89.88);--rs-color-border-disabled:oklch(0 0 89.88/0.06);--rs-color-foreground-disabled:oklch(0.65 0 89.88);--rs-color-background-elevation-base:oklch(1 0 89.88);--rs-color-background-elevation-raised:oklch(1 0 89.88);--rs-color-background-elevation-overlay:oklch(1 0 89.88);--rs-color-background-page:oklch(1 0 89.88);--rs-color-background-page-faded:oklch(0.98 0 89.88);--rs-color-on-background-neutral:oklch(0 0 0);--rs-shadow-outline:0px 1px 2px -0.5px rgba(0,0,0,.06),0px 2px 3px -1px rgba(0,0,0,.06);--rs-shadow-outline-intense:0px 1px 2px -0.5px rgba(0,0,0,.12),0px 2px 3px -1px rgba(0,0,0,.12);--rs-shadow-raised:0px 8px 12px -4px rgba(0,0,0,.08),0px 1px 2px 0px rgba(0,0,0,.1);--rs-shadow-raised-intense:0px 8px 12px -4px rgba(0,0,0,.16),0px 1px 2px 0px rgba(0,0,0,.2);--rs-shadow-overlay:0px 16px 24px -4px rgba(0,0,0,.06),0px 8px 12px -4px rgba(0,0,0,.06),0px 4px 6px -2px rgba(0,0,0,.06);--rs-shadow-overlay-intense:0px 16px 24px -4px rgba(0,0,0,.12),0px 8px 12px -4px rgba(0,0,0,.12),0px 4px 6px -2px rgba(0,0,0,.12)}[data-rs-theme~=slate][data-rs-color-mode=dark]{--rs-color-background-primary:oklch(0.5498 0.192 262.67);--rs-color-background-primary-faded:oklch(0.24 0.0196 262.67);--rs-color-background-primary-highlighted:oklch(0.5949 0.192 262.67);--rs-color-background-primary-highlighted-faded:oklch(0.5498 0.192 262.67/0.08);--rs-color-border-primary:oklch(0.6498 0.192 262.67);--rs-color-border-primary-faded:oklch(0.3 0.0196 262.67);--rs-color-foreground-primary:oklch(0.75 0.204 262.67);--rs-color-background-critical:oklch(0.5842 0.164 20.28);--rs-color-background-critical-faded:oklch(0.24 0.0167 20.28);--rs-color-background-critical-highlighted:oklch(0.6258 0.164 20.28);--rs-color-background-critical-highlighted-faded:oklch(0.5842 0.164 20.28/0.08);--rs-color-border-critical:oklch(0.6842 0.164 20.28);--rs-color-border-critical-faded:oklch(0.3 0.0167 20.28);--rs-color-foreground-critical:oklch(0.75 0.1742 20.28);--rs-color-background-warning:oklch(0.8108 0.176 80);--rs-color-background-warning-faded:oklch(0.24 0.018 80);--rs-color-background-warning-highlighted:oklch(0.7297 0.176 80);--rs-color-background-warning-highlighted-faded:oklch(0.8108 0.176 80/0.08);--rs-color-border-warning:oklch(0.9108 0.176 80);--rs-color-border-warning-faded:oklch(0.3 0.018 80);--rs-color-foreground-warning:oklch(0.75 0.187 80);--rs-color-background-positive:oklch(0.527 0.104 151.8);--rs-color-background-positive-faded:oklch(0.24 0.0106 151.8);--rs-color-background-positive-highlighted:oklch(0.5743 0.104 151.8);--rs-color-background-positive-highlighted-faded:oklch(0.527 0.104 151.8/0.08);--rs-color-border-positive:oklch(0.627 0.104 151.8);--rs-color-border-positive-faded:oklch(0.3 0.0106 151.8);--rs-color-foreground-positive:oklch(0.75 0.1105 151.8);--rs-color-background-neutral:oklch(0.32 0 89.88);--rs-color-background-neutral-faded:oklch(1 0 89.88/0.04);--rs-color-background-neutral-highlighted:oklch(0.3608 0 89.88);--rs-color-background-neutral-highlighted-faded:oklch(1 0 0/0.05);--rs-color-border-neutral:oklch(1 0 89.88/0.12);--rs-color-border-neutral-faded:oklch(1 0 89.88/0.08);--rs-color-foreground-neutral:oklch(0.96 0 89.88);--rs-color-foreground-neutral-faded:oklch(0.74 0 89.88);--rs-color-background-disabled:oklch(0.28 0 89.88);--rs-color-background-disabled-faded:oklch(0.225 0 89.88);--rs-color-border-disabled:oklch(1 0 89.88/0.06);--rs-color-foreground-disabled:oklch(0.45 0 89.88);--rs-color-background-elevation-base:oklch(0.2 0 89.88);--rs-color-background-elevation-raised:oklch(0.22 0 89.88);--rs-color-background-elevation-overlay:oklch(0.24 0 89.88);--rs-color-background-page:oklch(0.16 0 89.88);--rs-color-background-page-faded:oklch(0.18 0 89.88);--rs-color-on-background-neutral:oklch(1 0 0);--rs-shadow-outline:0px -1px 2px -0.5px hsla(0,0%,100%,.06),0px -1px 3px -1px hsla(0,0%,100%,.05);--rs-shadow-outline-intense:0px -1px 2px -0.5px hsla(0,0%,100%,.12),0px -1px 3px -1px hsla(0,0%,100%,.1);--rs-shadow-raised:0px 8px 12px -4px rgba(0,0,0,.08),0px -1.5px 2px -1px hsla(0,0%,100%,.1);--rs-shadow-raised-intense:0px 8px 12px -4px rgba(0,0,0,.16),0px -1.5px 2px -1px hsla(0,0%,100%,.2);--rs-shadow-overlay:0px 16px 24px -4px rgba(0,0,0,.06),0px 8px 12px -4px rgba(0,0,0,.06),0px 8px 6px -4px rgba(0,0,0,.06);--rs-shadow-overlay-intense:0px 16px 24px -4px rgba(0,0,0,.12),0px 8px 12px -4px rgba(0,0,0,.12),0px 8px 6px -4px rgba(0,0,0,.12)}
+[data-rs-theme~=slate]{--rs-color-brand:oklch(0.55 0.24 262.67);--rs-color-white:oklch(1 0 0);--rs-color-black:oklch(0 0 0);--rs-color-on-background-primary:oklch(1 0 0);--rs-color-on-background-critical:oklch(1 0 0);--rs-color-on-background-warning:oklch(0 0 0);--rs-color-on-background-positive:oklch(1 0 0);--rs-color-on-brand:oklch(1 0 0);--rs-font-family-headline:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-monospace:Geist Mono,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-headline-1:5rem;--rs-line-height-headline-1:5.25rem;--rs-font-family-headline-1:var(--rs-font-family-headline);--rs-font-weight-headline-1:var(--rs-font-weight-bold);--rs-letter-spacing-headline-1:normal;--rs-font-size-headline-2:4rem;--rs-line-height-headline-2:4.25rem;--rs-font-family-headline-2:var(--rs-font-family-headline);--rs-font-weight-headline-2:var(--rs-font-weight-bold);--rs-letter-spacing-headline-2:normal;--rs-font-size-headline-3:3rem;--rs-line-height-headline-3:3.25rem;--rs-font-family-headline-3:var(--rs-font-family-headline);--rs-font-weight-headline-3:var(--rs-font-weight-bold);--rs-letter-spacing-headline-3:normal;--rs-font-size-featured-1:2.5rem;--rs-line-height-featured-1:2.75rem;--rs-font-family-featured-1:var(--rs-font-family-title);--rs-font-weight-featured-1:var(--rs-font-weight-semibold);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:2rem;--rs-line-height-featured-2:2.25rem;--rs-font-family-featured-2:var(--rs-font-family-title);--rs-font-weight-featured-2:var(--rs-font-weight-semibold);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.75rem;--rs-line-height-featured-3:2rem;--rs-font-family-featured-3:var(--rs-font-family-title);--rs-font-weight-featured-3:var(--rs-font-weight-semibold);--rs-letter-spacing-featured-3:normal;--rs-font-size-featured-4:1.5rem;--rs-line-height-featured-4:2rem;--rs-font-family-featured-4:var(--rs-font-family-title);--rs-font-weight-featured-4:var(--rs-font-weight-semibold);--rs-letter-spacing-featured-4:normal;--rs-font-size-featured-5:1.25rem;--rs-line-height-featured-5:1.75rem;--rs-font-family-featured-5:var(--rs-font-family-title);--rs-font-weight-featured-5:var(--rs-font-weight-semibold);--rs-letter-spacing-featured-5:normal;--rs-font-size-featured-6:1.125rem;--rs-line-height-featured-6:1.5rem;--rs-font-family-featured-6:var(--rs-font-family-title);--rs-font-weight-featured-6:var(--rs-font-weight-semibold);--rs-letter-spacing-featured-6:normal;--rs-font-size-body-1:1rem;--rs-line-height-body-1:1.5rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-font-weight-body-1:var(--rs-font-weight-regular);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:0.875rem;--rs-line-height-body-2:1.25rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-font-weight-body-2:var(--rs-font-weight-regular);--rs-letter-spacing-body-2:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-font-weight-caption-1:var(--rs-font-weight-regular);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-font-weight-caption-2:var(--rs-font-weight-regular);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-unit-x0-5:2px;--rs-unit-x1-5:6px;--rs-radius-small:4px;--rs-radius-medium:6px;--rs-radius-large:10px;--rs-duration-rapid:100ms;--rs-duration-fast:150ms;--rs-duration-medium:250ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.2,0,0,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280;--rs-z-index-relative:10;--rs-z-index-absolute:100;--rs-z-index-fixed:200}[data-rs-theme~=slate][data-rs-color-mode=light]{--rs-color-background-primary:oklch(0.55 0.24 262.67);--rs-color-background-primary-faded:oklch(0.98 0.02 262.67);--rs-color-background-primary-highlighted:oklch(0.495 0.24 262.67);--rs-color-background-primary-highlighted-faded:oklch(0.55 0.24 262.67/0.06);--rs-color-border-primary:oklch(0.51 0.24 262.67);--rs-color-border-primary-faded:oklch(0.94 0.02 262.67);--rs-color-foreground-primary:oklch(0.52 0.24 262.67);--rs-color-background-critical:oklch(0.59 0.205 20.28);--rs-color-background-critical-faded:oklch(0.98 0.02 20.28);--rs-color-background-critical-highlighted:oklch(0.531 0.205 20.28);--rs-color-background-critical-highlighted-faded:oklch(0.59 0.205 20.28/0.06);--rs-color-border-critical:oklch(0.55 0.205 20.28);--rs-color-border-critical-faded:oklch(0.94 0.02 20.28);--rs-color-foreground-critical:oklch(0.52 0.205 20.28);--rs-color-background-warning:oklch(0.82 0.22 80);--rs-color-background-warning-faded:oklch(0.98 0.04 80);--rs-color-background-warning-highlighted:oklch(0.738 0.22 80);--rs-color-background-warning-highlighted-faded:oklch(0.82 0.22 80/0.06);--rs-color-border-warning:oklch(0.78 0.22 80);--rs-color-border-warning-faded:oklch(0.94 0.04 80);--rs-color-foreground-warning:oklch(0.52 0.22 80);--rs-color-background-positive:oklch(0.55 0.13 151.8);--rs-color-background-positive-faded:oklch(0.98 0.02 151.8);--rs-color-background-positive-highlighted:oklch(0.495 0.13 151.8);--rs-color-background-positive-highlighted-faded:oklch(0.55 0.13 151.8/0.06);--rs-color-border-positive:oklch(0.51 0.13 151.8);--rs-color-border-positive-faded:oklch(0.94 0.02 151.8);--rs-color-foreground-positive:oklch(0.52 0.13 151.8);--rs-color-background-neutral:oklch(0.94 0 89.88);--rs-color-background-neutral-faded:oklch(0 0 89.88/0.03);--rs-color-background-neutral-highlighted:oklch(0.9118 0 89.88);--rs-color-background-neutral-highlighted-faded:oklch(0 0 0/0.03);--rs-color-border-neutral:oklch(0 0 89.88/0.12);--rs-color-border-neutral-faded:oklch(0 0 89.88/0.08);--rs-color-foreground-neutral:oklch(0.24 0 89.88);--rs-color-foreground-neutral-faded:oklch(0.54 0 89.88);--rs-color-background-disabled:oklch(0.95 0 89.88);--rs-color-background-disabled-faded:oklch(0.98 0 89.88);--rs-color-border-disabled:oklch(0 0 89.88/0.06);--rs-color-foreground-disabled:oklch(0.65 0 89.88);--rs-color-background-elevation-base:oklch(1 0 89.88);--rs-color-background-elevation-raised:oklch(1 0 89.88);--rs-color-background-elevation-overlay:oklch(1 0 89.88);--rs-color-background-page:oklch(1 0 89.88);--rs-color-background-page-faded:oklch(0.98 0 89.88);--rs-color-on-background-neutral:oklch(0 0 0);--rs-shadow-outline:0px 1px 2px -0.5px rgba(0,0,0,.06),0px 2px 3px -1px rgba(0,0,0,.06);--rs-shadow-outline-intense:0px 1px 2px -0.5px rgba(0,0,0,.12),0px 2px 3px -1px rgba(0,0,0,.12);--rs-shadow-raised:0px 8px 12px -4px rgba(0,0,0,.08),0px 1px 2px 0px rgba(0,0,0,.1);--rs-shadow-raised-intense:0px 8px 12px -4px rgba(0,0,0,.16),0px 1px 2px 0px rgba(0,0,0,.2);--rs-shadow-overlay:0px 16px 24px -4px rgba(0,0,0,.06),0px 8px 12px -4px rgba(0,0,0,.06),0px 4px 6px -2px rgba(0,0,0,.06);--rs-shadow-overlay-intense:0px 16px 24px -4px rgba(0,0,0,.12),0px 8px 12px -4px rgba(0,0,0,.12),0px 4px 6px -2px rgba(0,0,0,.12)}[data-rs-theme~=slate][data-rs-color-mode=dark]{--rs-color-background-primary:oklch(0.5498 0.192 262.67);--rs-color-background-primary-faded:oklch(0.24 0.0196 262.67);--rs-color-background-primary-highlighted:oklch(0.5949 0.192 262.67);--rs-color-background-primary-highlighted-faded:oklch(0.5498 0.192 262.67/0.08);--rs-color-border-primary:oklch(0.6498 0.192 262.67);--rs-color-border-primary-faded:oklch(0.3 0.0196 262.67);--rs-color-foreground-primary:oklch(0.75 0.204 262.67);--rs-color-background-critical:oklch(0.5842 0.164 20.28);--rs-color-background-critical-faded:oklch(0.24 0.0167 20.28);--rs-color-background-critical-highlighted:oklch(0.6258 0.164 20.28);--rs-color-background-critical-highlighted-faded:oklch(0.5842 0.164 20.28/0.08);--rs-color-border-critical:oklch(0.6842 0.164 20.28);--rs-color-border-critical-faded:oklch(0.3 0.0167 20.28);--rs-color-foreground-critical:oklch(0.75 0.1742 20.28);--rs-color-background-warning:oklch(0.8108 0.176 80);--rs-color-background-warning-faded:oklch(0.24 0.018 80);--rs-color-background-warning-highlighted:oklch(0.7297 0.176 80);--rs-color-background-warning-highlighted-faded:oklch(0.8108 0.176 80/0.08);--rs-color-border-warning:oklch(0.9108 0.176 80);--rs-color-border-warning-faded:oklch(0.3 0.018 80);--rs-color-foreground-warning:oklch(0.75 0.187 80);--rs-color-background-positive:oklch(0.527 0.104 151.8);--rs-color-background-positive-faded:oklch(0.24 0.0106 151.8);--rs-color-background-positive-highlighted:oklch(0.5743 0.104 151.8);--rs-color-background-positive-highlighted-faded:oklch(0.527 0.104 151.8/0.08);--rs-color-border-positive:oklch(0.627 0.104 151.8);--rs-color-border-positive-faded:oklch(0.3 0.0106 151.8);--rs-color-foreground-positive:oklch(0.75 0.1105 151.8);--rs-color-background-neutral:oklch(0.32 0 89.88);--rs-color-background-neutral-faded:oklch(1 0 89.88/0.04);--rs-color-background-neutral-highlighted:oklch(0.3608 0 89.88);--rs-color-background-neutral-highlighted-faded:oklch(1 0 0/0.05);--rs-color-border-neutral:oklch(1 0 89.88/0.12);--rs-color-border-neutral-faded:oklch(1 0 89.88/0.08);--rs-color-foreground-neutral:oklch(0.96 0 89.88);--rs-color-foreground-neutral-faded:oklch(0.74 0 89.88);--rs-color-background-disabled:oklch(0.28 0 89.88);--rs-color-background-disabled-faded:oklch(0.225 0 89.88);--rs-color-border-disabled:oklch(1 0 89.88/0.06);--rs-color-foreground-disabled:oklch(0.45 0 89.88);--rs-color-background-elevation-base:oklch(0.2 0 89.88);--rs-color-background-elevation-raised:oklch(0.215 0 89.88);--rs-color-background-elevation-overlay:oklch(0.23 0 89.88);--rs-color-background-page:oklch(0.16 0 89.88);--rs-color-background-page-faded:oklch(0.18 0 89.88);--rs-color-on-background-neutral:oklch(1 0 0);--rs-shadow-outline:0px -1px 2px -0.5px hsla(0,0%,100%,.06),0px -1px 3px -1px hsla(0,0%,100%,.05);--rs-shadow-outline-intense:0px -1px 2px -0.5px hsla(0,0%,100%,.12),0px -1px 3px -1px hsla(0,0%,100%,.1);--rs-shadow-raised:0px 8px 12px -4px rgba(0,0,0,.08),0px -1.5px 2px -1px hsla(0,0%,100%,.1);--rs-shadow-raised-intense:0px 8px 12px -4px rgba(0,0,0,.16),0px -1.5px 2px -1px hsla(0,0%,100%,.2);--rs-shadow-overlay:0px 16px 24px -4px rgba(0,0,0,.06),0px 8px 12px -4px rgba(0,0,0,.06),0px 8px 6px -4px rgba(0,0,0,.06);--rs-shadow-overlay-intense:0px 16px 24px -4px rgba(0,0,0,.12),0px 8px 12px -4px rgba(0,0,0,.12),0px 8px 6px -4px rgba(0,0,0,.12)}

package/dist/utilities/animation.d.ts

@@ -2,3 +2,20 @@ export declare const onNextFrame: (cb: () => void) => void;
 export declare const disableTransitions: () => void;
 export declare const enableTransitions: () => void;
 export declare const checkTransitions: () => boolean;
+/**
+ * Resolves a critically damped spring into a css transition duration and a linear() easing,
+ * so the release animation continues from the current velocity of the gesture instead of restarting from zero.
+ * Browsers without linear() easing support fall back to a decelerating transition scaled by the velocity.
+ *
+ * @param displacement - current position relative to the target position, in px
+ * @param velocity - current velocity in px/ms, measured on the same axis as the displacement
+ * and positive when moving away from the target position
+ * @returns transition duration in ms and its timing function
+ */
+export declare const resolveSpringTransition: (args: {
+    displacement: number;
+    velocity: number;
+}) => {
+    duration: number;
+    easing: string;
+};