@a-type/ui 4.0.5 → 4.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/liveUpdateTextField/LiveUpdateTextField.js +5 -5
- package/dist/cjs/components/liveUpdateTextField/LiveUpdateTextField.js.map +1 -1
- package/dist/cjs/components/liveUpdateTextField/LiveUpdateTextField.stories.d.ts +15 -0
- package/dist/cjs/components/liveUpdateTextField/LiveUpdateTextField.stories.js +23 -0
- package/dist/cjs/components/liveUpdateTextField/LiveUpdateTextField.stories.js.map +1 -0
- package/dist/cjs/components/switch/Switch.js +2 -2
- package/dist/cjs/components/switch/Switch.js.map +1 -1
- package/dist/cjs/components/textArea/TextArea.d.ts +1 -1
- package/dist/cjs/components/textArea/TextArea.js +2 -2
- package/dist/cjs/components/textArea/TextArea.js.map +1 -1
- package/dist/cjs/components/textArea/TextArea.stories.d.ts +3 -1
- package/dist/cjs/components/textArea/TextArea.stories.js +17 -1
- package/dist/cjs/components/textArea/TextArea.stories.js.map +1 -1
- package/dist/css/main.css +1 -1
- package/dist/esm/components/liveUpdateTextField/LiveUpdateTextField.js +5 -5
- package/dist/esm/components/liveUpdateTextField/LiveUpdateTextField.js.map +1 -1
- package/dist/esm/components/liveUpdateTextField/LiveUpdateTextField.stories.d.ts +15 -0
- package/dist/esm/components/liveUpdateTextField/LiveUpdateTextField.stories.js +20 -0
- package/dist/esm/components/liveUpdateTextField/LiveUpdateTextField.stories.js.map +1 -0
- package/dist/esm/components/switch/Switch.js +2 -2
- package/dist/esm/components/switch/Switch.js.map +1 -1
- package/dist/esm/components/textArea/TextArea.d.ts +1 -1
- package/dist/esm/components/textArea/TextArea.js +2 -2
- package/dist/esm/components/textArea/TextArea.js.map +1 -1
- package/dist/esm/components/textArea/TextArea.stories.d.ts +3 -1
- package/dist/esm/components/textArea/TextArea.stories.js +16 -0
- package/dist/esm/components/textArea/TextArea.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/liveUpdateTextField/LiveUpdateTextField.stories.tsx +23 -0
- package/src/components/liveUpdateTextField/LiveUpdateTextField.tsx +6 -7
- package/src/components/switch/Switch.tsx +2 -2
- package/src/components/textArea/TextArea.stories.tsx +23 -0
- package/src/components/textArea/TextArea.tsx +1 -2
|
@@ -57,16 +57,16 @@ const LiveUpdateTextField = function LiveUpdateTextField(_a) {
|
|
|
57
57
|
// every once in a while, send an update to parent
|
|
58
58
|
const debouncedOnChange = (0, react_1.useMemo)(() => (0, utils_1.debounce)(onChange || (() => { }), debounceMs), [onChange, debounceMs]);
|
|
59
59
|
// update local state instantly and parent eventually
|
|
60
|
-
const
|
|
61
|
-
setDisplayValue(
|
|
62
|
-
debouncedOnChange(
|
|
60
|
+
const handleValueChange = (0, react_1.useCallback)((value) => {
|
|
61
|
+
setDisplayValue(value);
|
|
62
|
+
debouncedOnChange(value);
|
|
63
63
|
didChange.current = true;
|
|
64
64
|
}, [debouncedOnChange]);
|
|
65
65
|
if (textArea) {
|
|
66
|
-
return ((0, jsx_runtime_1.jsx)(TextArea_js_1.TextArea, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue,
|
|
66
|
+
return ((0, jsx_runtime_1.jsx)(TextArea_js_1.TextArea, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue, onValueChange: handleValueChange, autoSize: true }, rest)));
|
|
67
67
|
}
|
|
68
68
|
else {
|
|
69
|
-
return ((0, jsx_runtime_1.jsx)(Input_js_1.Input, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue,
|
|
69
|
+
return ((0, jsx_runtime_1.jsx)(Input_js_1.Input, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue, onValueChange: handleValueChange, type: type }, rest)));
|
|
70
70
|
}
|
|
71
71
|
};
|
|
72
72
|
exports.LiveUpdateTextField = LiveUpdateTextField;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LiveUpdateTextField.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/LiveUpdateTextField.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;AAEb,yCAAyC;AACzC,
|
|
1
|
+
{"version":3,"file":"LiveUpdateTextField.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/LiveUpdateTextField.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;AAEb,yCAAyC;AACzC,iCAUe;AACf,gDAAsD;AACtD,yDAAmD;AAuBnD;;;;;;GAMG;AACI,MAAM,mBAAmB,GAAG,SAAS,mBAAmB,CAAC,EAUrC;QAVqC,EAC/D,GAAG,EACH,KAAK,EACL,QAAQ,EACR,UAAU,GAAG,GAAG,EAChB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,OAEsB,EADvB,IAAI,cATwD,mFAU/D,CADO;IAEP,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC9D,MAAM,aAAa,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IACpC,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAEhC,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC9B,CAAC,EAAsD,EAAE,EAAE;QAC1D,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,CAAC,CAAC;QACd,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;IAC9B,CAAC,EACD,CAAC,OAAO,CAAC,CACT,CAAC;IAEF,MAAM,UAAU,GAAG,IAAA,mBAAW,EAC7B,CAAC,EAAsD,EAAE,EAAE;QAC1D,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,EAAE,CAAC,CAAC;QACb,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;QAC9B,sDAAsD;QACtD,yCAAyC;QACzC,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACvB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,YAAY,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACP,eAAe,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;QAC9B,CAAC;QACD,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;IAC3B,CAAC,EACD,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,CAAC,CACvC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;YAC3B,OAAO;QACR,CAAC;QACD,eAAe,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,kDAAkD;IAClD,MAAM,iBAAiB,GAAG,IAAA,eAAO,EAChC,GAAG,EAAE,CAAC,IAAA,gBAAQ,EAAC,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAAE,UAAU,CAAC,EAClD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACtB,CAAC;IAEF,qDAAqD;IACrD,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACpC,CAAC,KAAa,EAAE,EAAE;QACjB,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,iBAAiB,CAAC,KAAK,CAAC,CAAC;QACzB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;IAC1B,CAAC,EACD,CAAC,iBAAiB,CAAC,CACnB,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACd,OAAO,CACN,uBAAC,sBAAQ,kBACR,GAAG,EAAE,GAAU,EACf,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,YAAY,EACnB,aAAa,EAAE,iBAAiB,EAChC,QAAQ,UACJ,IAAI,EACP,CACF,CAAC;IACH,CAAC;SAAM,CAAC;QACP,OAAO,CACN,uBAAC,gBAAK,kBACL,GAAG,EAAE,GAAU,EACf,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,YAAY,EACnB,aAAa,EAAE,iBAAiB,EAChC,IAAI,EAAE,IAAI,IACN,IAAI,EACP,CACF,CAAC;IACH,CAAC;AACF,CAAC,CAAC;AAvFW,QAAA,mBAAmB,uBAuF9B"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { LiveUpdateTextField } from './LiveUpdateTextField.js';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: ({ ref, value, onChange, debounceMs, onFocus, onBlur, textArea, type, ...rest }: import("./LiveUpdateTextField.js").LiveUpdateTextFieldProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
6
|
+
argTypes: {};
|
|
7
|
+
parameters: {
|
|
8
|
+
controls: {
|
|
9
|
+
expanded: boolean;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export default meta;
|
|
14
|
+
type Story = StoryObj<typeof LiveUpdateTextField>;
|
|
15
|
+
export declare const Default: Story;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// @unocss-include
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Default = void 0;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const LiveUpdateTextField_js_1 = require("./LiveUpdateTextField.js");
|
|
8
|
+
const meta = {
|
|
9
|
+
title: 'Components/LiveUpdateTextField',
|
|
10
|
+
component: LiveUpdateTextField_js_1.LiveUpdateTextField,
|
|
11
|
+
argTypes: {},
|
|
12
|
+
parameters: {
|
|
13
|
+
controls: { expanded: true },
|
|
14
|
+
},
|
|
15
|
+
};
|
|
16
|
+
exports.default = meta;
|
|
17
|
+
exports.Default = {
|
|
18
|
+
render(args) {
|
|
19
|
+
const [value, setValue] = (0, react_1.useState)('Initial value');
|
|
20
|
+
return (0, jsx_runtime_1.jsx)(LiveUpdateTextField_js_1.LiveUpdateTextField, Object.assign({}, args, { value: value, onChange: setValue }));
|
|
21
|
+
},
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=LiveUpdateTextField.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LiveUpdateTextField.stories.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/LiveUpdateTextField.stories.tsx"],"names":[],"mappings":";;;;AACA,iCAAiC;AACjC,qEAA+D;AAE/D,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,4CAAmB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC0C,CAAC;AAE7C,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,eAAe,CAAC,CAAC;QACpD,OAAO,uBAAC,4CAAmB,oBAAK,IAAI,IAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAI,CAAC;IAC5E,CAAC;CACD,CAAC"}
|
|
@@ -16,8 +16,8 @@ exports.Switch = void 0;
|
|
|
16
16
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
17
17
|
const switch_1 = require("@base-ui/react/switch");
|
|
18
18
|
const withClassName_js_1 = require("../../hooks/withClassName.js");
|
|
19
|
-
const SwitchRoot = (0, withClassName_js_1.withClassName)(switch_1.Switch.Root, 'layer-components:unset layer-components:appearance-none layer-components:flex layer-components:transition-all layer-components:cursor-pointer layer-components:w-42px layer-components:h-25px layer-components:p-
|
|
20
|
-
const SwitchThumb = (0, withClassName_js_1.withClassName)(switch_1.Switch.Thumb, 'layer-components:block layer-components:aspect-1 layer-components:h-full layer-components:bg-white layer-components:rounded-lg layer-components:border-default layer-components:transition-transform layer-components:will-change-transform', 'layer-components:data-[checked]:translate-x-1rem', 'layer-components:data-[checked]:before:content-["✓"] layer-components:data-[checked]:before:flex layer-components:data-[checked]:before:items-center layer-components:data-[checked]:before:justify-center layer-components:data-[checked]:before:absolute layer-components:data-[checked]:before:top-0 layer-components:data-[checked]:before:left-0 layer-components:data-[checked]:before:w-full layer-components:data-[checked]:before:h-full layer-components:data-[checked]:before:text-xs layer-components:data-[checked]:before:text-main-ink');
|
|
19
|
+
const SwitchRoot = (0, withClassName_js_1.withClassName)(switch_1.Switch.Root, 'layer-components:unset layer-components:appearance-none layer-components:flex layer-components:transition-all layer-components:cursor-pointer layer-components:w-42px layer-components:h-25px layer-components:p-3px layer-components:bg-gray-light layer-components:rounded-lg layer-components:relative layer-components:border-default layer-components:flex-shrink-0 layer-components:shadow-sm layer-components:shadow-inset', 'layer-components:data-[checked]:bg-main', 'layer-components:hover:[&:not(:disabled)]:bg-lighten-2 layer-components:hover:[&:not(:disabled)]:ring-2 layer-components:hover:[&:not(:disabled)]:ring-bg', 'layer-components:active:[&:not(:disabled)]:bg-darken-1 layer-components:active:[&:not(:disabled)]:ring-4', 'layer-components:focus:outline-none', 'layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-accent layer-components:focus-visible:outline-off');
|
|
20
|
+
const SwitchThumb = (0, withClassName_js_1.withClassName)(switch_1.Switch.Thumb, 'layer-components:block layer-components:aspect-1 layer-components:h-full layer-components:bg-white layer-components:rounded-lg layer-components:border-default layer-components:transition-transform layer-components:will-change-transform layer-components:shadow-sm', 'layer-components:data-[checked]:translate-x-1rem', 'layer-components:data-[checked]:before:content-["✓"] layer-components:data-[checked]:before:flex layer-components:data-[checked]:before:items-center layer-components:data-[checked]:before:justify-center layer-components:data-[checked]:before:absolute layer-components:data-[checked]:before:top-0 layer-components:data-[checked]:before:left-0 layer-components:data-[checked]:before:w-full layer-components:data-[checked]:before:h-full layer-components:data-[checked]:before:text-xs layer-components:data-[checked]:before:text-main-ink');
|
|
21
21
|
exports.Switch = Object.assign(function Switch(_a) {
|
|
22
22
|
var { ref } = _a, props = __rest(_a, ["ref"]);
|
|
23
23
|
return ((0, jsx_runtime_1.jsx)(SwitchRoot, Object.assign({}, props, { ref: ref, children: (0, jsx_runtime_1.jsx)(SwitchThumb, {}) })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,kDAA8E;AAC9E,mEAA6D;AAE7D,MAAM,UAAU,GAAG,IAAA,gCAAa,EAC/B,eAAU,CAAC,IAAI,EACf,
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,kDAA8E;AAC9E,mEAA6D;AAE7D,MAAM,UAAU,GAAG,IAAA,gCAAa,EAC/B,eAAU,CAAC,IAAI,EACf,uLAAuL,EACvL,yCAAyC,EACzC,yEAAyE,EACzE,iEAAiE,EACjE,qCAAqC,EACrC,iEAAiE,CACjE,CAAC;AAEF,MAAM,WAAW,GAAG,IAAA,gCAAa,EAChC,eAAU,CAAC,KAAK,EAChB,kIAAkI,EAClI,oDAAoD,EACpD,mJAAmJ,CACnJ,CAAC;AAEW,QAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAClC,SAAS,MAAM,CAAC,EAKf;QALe,EACf,GAAG,OAIH,EAHG,KAAK,cAFO,OAGf,CADQ;IAIR,OAAO,CACN,uBAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,YAC9B,uBAAC,WAAW,KAAG,IACH,CACb,CAAC;AACH,CAAC,EACD;IACC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,WAAW;CAClB,CACD,CAAC"}
|
|
@@ -8,6 +8,6 @@ export interface TextAreaProps extends InputProps {
|
|
|
8
8
|
placeholdersIntervalMs?: number;
|
|
9
9
|
rows?: number;
|
|
10
10
|
}
|
|
11
|
-
export declare const TextArea: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels,
|
|
11
|
+
export declare const TextArea: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels, placeholder, placeholders, placeholdersIntervalMs, onValueChange, ...rest }: TextAreaProps & {
|
|
12
12
|
ref?: React.Ref<any>;
|
|
13
13
|
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
@@ -26,7 +26,7 @@ const useRotatingShuffledValue_js_1 = require("../../hooks/useRotatingShuffledVa
|
|
|
26
26
|
const index_js_1 = require("../input/index.js");
|
|
27
27
|
const TextArea = function TextArea(_a) {
|
|
28
28
|
var _b;
|
|
29
|
-
var { ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels = 0,
|
|
29
|
+
var { ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels = 0, placeholder, placeholders, placeholdersIntervalMs = 5000, onValueChange } = _a, rest = __rest(_a, ["ref", "autoSize", "autoSelect", "onFocus", "className", "rows", "padBottomPixels", "placeholder", "placeholders", "placeholdersIntervalMs", "onValueChange"]);
|
|
30
30
|
const innerRef = (0, react_1.useRef)(null);
|
|
31
31
|
const finalRef = (0, useMergedRef_js_1.default)(innerRef, ref);
|
|
32
32
|
const [innerValue, setInnerValue] = (0, react_1.useState)('');
|
|
@@ -49,7 +49,7 @@ const TextArea = function TextArea(_a) {
|
|
|
49
49
|
if (onValueChange) {
|
|
50
50
|
onValueChange(value, eventDetails);
|
|
51
51
|
}
|
|
52
|
-
}, [
|
|
52
|
+
}, [onValueChange]);
|
|
53
53
|
const handleFocus = (0, react_1.useCallback)((e) => {
|
|
54
54
|
if (autoSelect) {
|
|
55
55
|
e.target.select();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,gDAAyD;AACzD,gDAA8B;AAC9B,iCAAuE;AACvE,kFAAuD;AACvD,yFAAmF;AACnF,gDAAmD;AAe5C,MAAM,QAAQ,GAAG,SAAS,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,gDAAyD;AACzD,gDAA8B;AAC9B,iCAAuE;AACvE,kFAAuD;AACvD,yFAAmF;AACnF,gDAAmD;AAe5C,MAAM,QAAQ,GAAG,SAAS,QAAQ,CAAC,EAezC;;QAfyC,EACzC,GAAG,EACH,QAAQ,EACR,UAAU,EACV,OAAO,EACP,SAAS,EACT,IAAI,EACJ,eAAe,GAAG,CAAC,EACnB,WAAW,EACX,YAAY,EACZ,sBAAsB,GAAG,IAAI,EAC7B,aAAa,OAIb,EAHG,IAAI,cAZkC,8JAazC,CADO;IAIP,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAM,IAAI,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,IAAA,yBAAY,EAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,UAAU,CAAC;IAE5C,gFAAgF;IAChF,IAAA,uBAAe,EAAC,GAAG,EAAE;QACpB,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACjC,IAAI,OAAO,EAAE,CAAC;YACb,IAAI,OAAO,CAAC,KAAK,KAAK,EAAE,IAAI,eAAe,EAAE,CAAC;gBAC7C,OAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;gBAC/B,MAAM,UAAU,GAAG,OAAO,CAAC,YAAY,CAAC;gBACxC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC;YAC5D,CAAC;QACF,CAAC;IACF,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5C,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACpC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;QACvB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,aAAa,EAAE,CAAC;YACnB,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;QACpC,CAAC;IACF,CAAC,EACD,CAAC,aAAa,CAAC,CACf,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC9B,CAAC,CAAC,EAAE,EAAE;QACL,IAAI,UAAU,EAAE,CAAC;YAChB,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACnB,CAAC;QACD,IAAI,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,CAAC,CAAC,CAAC;QACZ,CAAC;IACF,CAAC,EACD,CAAC,UAAU,EAAE,OAAO,CAAC,CACrB,CAAC;IAEF,MAAM,iBAAiB,GAAG,IAAA,sDAAwB,EACjD,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,EAClB,sBAAsB,CACtB,CAAC;IAEF,OAAO,CACN,uBAAC,aAAK,kBACL,MAAM,EAAE,qCAAU,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAI,EAC/C,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,cAAU,EACpB,yBAAc,EACd,oFAAoF,EACpF,uCAAuC,EACvC;YACC,oCAAoC,EAAE,CAAC,QAAQ;YAC/C,gCAAgC,EAAE,QAAQ;SAC1C,EACD,SAAS,CACT,EACD,aAAa,EAAE,iBAAiB,EAChC,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,iBAAiB,IACzC,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC;AAlFW,QAAA,QAAQ,YAkFnB"}
|
|
@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
|
|
|
2
2
|
import { TextArea } from './TextArea.js';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels,
|
|
5
|
+
component: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels, placeholder, placeholders, placeholdersIntervalMs, onValueChange, ...rest }: import("./TextArea.js").TextAreaProps & {
|
|
6
6
|
ref?: React.Ref<any>;
|
|
7
7
|
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
8
8
|
argTypes: {};
|
|
@@ -16,3 +16,5 @@ export default meta;
|
|
|
16
16
|
type Story = StoryObj<typeof TextArea>;
|
|
17
17
|
export declare const Default: Story;
|
|
18
18
|
export declare const Tall: Story;
|
|
19
|
+
export declare const Controlled: Story;
|
|
20
|
+
export declare const ControlledFromOnChange: Story;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.Tall = exports.Default = void 0;
|
|
4
|
+
exports.ControlledFromOnChange = exports.Controlled = exports.Tall = exports.Default = void 0;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const react_1 = require("react");
|
|
5
7
|
const TextArea_js_1 = require("./TextArea.js");
|
|
6
8
|
const meta = {
|
|
7
9
|
title: 'Components/TextArea',
|
|
@@ -23,4 +25,18 @@ exports.Tall = {
|
|
|
23
25
|
autoSize: true,
|
|
24
26
|
},
|
|
25
27
|
};
|
|
28
|
+
exports.Controlled = {
|
|
29
|
+
render() {
|
|
30
|
+
const [value, setValue] = (0, react_1.useState)('Initial value');
|
|
31
|
+
return (0, jsx_runtime_1.jsx)(TextArea_js_1.TextArea, { value: value, onValueChange: setValue, autoSize: true });
|
|
32
|
+
},
|
|
33
|
+
};
|
|
34
|
+
exports.ControlledFromOnChange = {
|
|
35
|
+
render() {
|
|
36
|
+
const [value, setValue] = (0, react_1.useState)('Initial value');
|
|
37
|
+
return ((0, jsx_runtime_1.jsx)(TextArea_js_1.TextArea, { value: value, onChange: (ev) => {
|
|
38
|
+
setValue(ev.target.value);
|
|
39
|
+
}, autoSize: true }));
|
|
40
|
+
},
|
|
41
|
+
};
|
|
26
42
|
//# sourceMappingURL=TextArea.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.stories.tsx"],"names":[],"mappings":";;;;AACA,iCAAiC;AACjC,+CAAyC;AAEzC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,sBAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,IAAI;KACd;CACD,CAAC;AAEW,QAAA,IAAI,GAAU;IAC1B,IAAI,EAAE;QACL,KAAK,EACJ,mFAAmF;QACpF,QAAQ,EAAE,IAAI;KACd;CACD,CAAC;AAEW,QAAA,UAAU,GAAU;IAChC,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,eAAe,CAAC,CAAC;QACpD,OAAO,uBAAC,sBAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,SAAG,CAAC;IACrE,CAAC;CACD,CAAC;AAEW,QAAA,sBAAsB,GAAU;IAC5C,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,eAAe,CAAC,CAAC;QACpD,OAAO,CACN,uBAAC,sBAAQ,IACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;gBAChB,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC,EACD,QAAQ,SACP,CACF,CAAC;IACH,CAAC;CACD,CAAC"}
|
package/dist/css/main.css
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
50% { stroke-dasharray: 100, 200; stroke-dashoffset: -15; }
|
|
26
26
|
100% { stroke-dasharray: 100, 200; stroke-dashoffset: -125; }
|
|
27
27
|
}.animate-fade-in{animation:fade-in 200ms cubic-bezier(0.64, -0.25, 0.1, 1.4) 1;}.animate-skeleton{animation:skeleton 1s linear 1;}.animate-spin{animation:spin 1s linear infinite;}.animate-spinner-stroke{animation:spinner-stroke 1s linear 1;}.\[\&\[data-state\=closed\]\]\:animate-duration-300[data-state=closed]{animation-duration:300ms;}.\[\&\[data-state\=open\]\]\:animate-duration-600[data-state=open]{animation-duration:600ms;}.animate-duration-1200{animation-duration:1200ms;}.animate-duration-1400{animation-duration:1400ms;}.animate-ease-default{animation-timing-function:ease;}.animate-ease-in-out{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}.animate-ease-linear{animation-timing-function:linear;}.\[\&\[data-state\=open\]\]\:animate-forwards[data-state=open],.animate-forwards{animation-fill-mode:forwards;}.animate-alternate{animation-direction:alternate;}.animate-iteration-infinite{animation-iteration-count:infinite;}.data-\[active\]\:cursor-default[data-active]{cursor:default;}.cursor-pointer{cursor:pointer;}.touch-none{touch-action:none;}.select-none{-webkit-user-select:none;user-select:none;}.resize{resize:both;}.list-decimal{list-style-type:decimal;}.list-disc{list-style-type:disc;}.list-inside{list-style-position:inside;}.items-start{align-items:flex-start;}.items-center{align-items:center;}.after\:items-center::after{align-items:center;}.items-stretch{align-items:stretch;}.self-end{align-self:flex-end;}.self-center{align-self:center;}.self-stretch{align-self:stretch;}.justify-end{justify-content:flex-end;}.after\:justify-end::after{justify-content:flex-end;}.justify-center{justify-content:center;}.gap-10px{gap:10px;}.gap-2{gap:0.5rem;}.gap-2px{gap:2px;}.gap-4{gap:1rem;}.gap-lg{gap:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.gap-md{gap:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.gap-sm{gap:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.gap-xl{gap:calc(3rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.gap-xs{gap:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.gap-xxs{column-gap:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.overflow-clip{overflow:clip;}.overflow-hidden{overflow:hidden;}.b,.border-width-thin{border-width:calc(1px * var(--global-border-scale,1));}.border-2{border-width:2px;}.border-b{border-bottom-width:calc(1px * var(--global-border-scale,1));}.border-t{border-top-width:calc(1px * var(--global-border-scale,1));}.rounded{border-radius:0.25rem;}.rounded-full{border-radius:calc(99999px * var(--global-corner-scale,1));}.rounded-lg{border-radius:calc(1.25rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.rounded-md{border-radius:calc(1rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.rounded-none{border-radius:0;}.rounded-sm{border-radius:calc(0.5rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.rounded-xs{border-radius:calc(0.25rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.\[\&_\.ProseMirror\]\:border-none .ProseMirror,.border-none{border-style:none;}.border-solid{border-style:solid;}.border-b-solid{border-bottom-style:solid;}.border-t-solid{border-top-style:solid;}.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}.after\:from-transparent::after{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}.via-fg{--un-gradient-via-position:50%;--un-gradient-to:rgb(255 255 255 / 0);--un-gradient-stops:var(--un-gradient-from), var(--v-color-altered, var(--v-color, var(--mode-black))) var(--un-gradient-via-position), var(--un-gradient-to);}.to-primary-wash{--un-gradient-to-position:100%;--un-gradient-to:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)) / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}.to-transparent{--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);}.after\:to-white::after{--un-gradient-to-position:100%;--un-gradient-to:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))) / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}.bg-gradient-to-b{--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}.bg-gradient-to-r{--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}.after\:bg-gradient-to-b::after{--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}.stroke-current{stroke:currentColor /* currentColor */;}.stroke-main-dark{--un-stroke-opacity:1;stroke:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))) / var(--un-stroke-opacity)) /* oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))) */;}.object-cover{object-fit:cover;}.object-contain{object-fit:contain;}.p-0{padding:0;}.p-10{padding:2.5rem;}.p-4{padding:1rem;}.p-md{padding:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.p-xs{padding:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.after\:p-3::after{padding:0.75rem;}.px{padding-left:1rem;padding-right:1rem;}.px-25px{padding-left:25px;padding-right:25px;}.pb-\[calc\(0\.25rem\+env\(safe-area-inset-bottom\,0px\)\)\]{padding-bottom:calc(0.25rem + env(safe-area-inset-bottom,0px));}.pl-md{padding-left:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.text-center{text-align:center;}.v-middle{vertical-align:middle;}.text-\[19px\]{font-size:19px;}.text-2xl{font-size:1.75rem;line-height:2.25rem;}.text-3xl{font-size:2rem;line-height:2.5rem;}.text-lg{font-size:1.25rem;line-height:1.75rem;}.text-md{font-size:1.125rem;line-height:1.5rem;}.text-sm{font-size:1rem;line-height:1.25rem;}.text-xs{font-size:0.75rem;line-height:1rem;}.after\:text-xs::after{font-size:0.75rem;line-height:1rem;}.text-size-\[calc\(0\.5px\*var\(--avatar-size\,24px\)\)\]{font-size:calc(0.5px * var(--avatar-size,24px));}.font-bold{font-weight:700;}.font-normal{font-weight:400;}.leading-6{line-height:1.5rem;}.leading-tight{line-height:1.25;}.italic{font-style:italic;}.oblique{font-style:oblique;}.underline{text-decoration-line:underline;}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.\[\&\[data-ending-style\]\:not\(\[data-limited\]\)\:not\(\[data-swipe-direction\]\)\]\:opacity-50[data-ending-style]:not([data-limited]):not([data-swipe-direction]),.opacity-50{opacity:0.5;}.data-\[ending-style\]\:opacity-0[data-ending-style],.data-\[limited\]\:opacity-0[data-limited],.data-\[starting-style\]\:opacity-0[data-starting-style],.op-0,[data-behind]:not([data-expanded]) .\[\[data-behind\]\:not\(\[data-expanded\]\)_\&\]\:opacity-0{opacity:0;}.opacity-30{opacity:0.3;}.opacity-80{opacity:0.8;}.opacity1{opacity:0.01;}.opacity2{opacity:0.02;}.opacity3{opacity:0.03;}[data-expanded] .\[\[data-expanded\]_\&\]\:opacity-100{opacity:1;}.hover\:opacity-100:hover{opacity:1;}.focus\:opacity-100:focus{opacity:1;}.\[\&_\.ProseMirror\:focus\]\:shadow-none .ProseMirror:focus,.\[\&_\.ProseMirror\]\:shadow-none .ProseMirror{--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-sm{--un-shadow:var(--un-shadow-inset) 0 calc(0px * var(--v-shadow-y-mult,1)) calc(1px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * 2 * (1 + var(--dyn-source-mode-adjust, 0)))),
|
|
28
|
-
var(--un-shadow-inset) 0 calc(1px * var(--v-shadow-y-mult,1)) calc(2px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * 2 * (1 + var(--dyn-source-mode-adjust, 0))));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-op-0{--un-shadow-opacity:0;}.shadow-op-10{--un-shadow-opacity:0.1;}.shadow-op-100{--un-shadow-opacity:1;}.shadow-op-20{--un-shadow-opacity:0.2;}.shadow-op-30{--un-shadow-opacity:0.3;}.shadow-op-40{--un-shadow-opacity:0.4;}.shadow-op-50{--un-shadow-opacity:0.5;}.shadow-op-60{--un-shadow-opacity:0.6;}.shadow-op-70{--un-shadow-opacity:0.7;}.shadow-op-80{--un-shadow-opacity:0.8;}.shadow-op-90{--un-shadow-opacity:0.9;}.\[\&_\.ProseMirror\:focus\]\:outline-none .ProseMirror:focus,.\[\&\[data-highlighted\]\]\:outline-none[data-highlighted]{outline:2px solid transparent;outline-offset:2px;}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px;}.ring{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.ring-2{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.focus-visible\:ring:focus-visible{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-color{transition-property:color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-height{transition-property:height;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-width{transition-property:width;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.ease{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);}.will-change-transform{will-change:transform;}.after\:\[\&\[data-state\=open\]\]\:content-\[\"-_tap_to_collapse_-\"\][data-state=open]::after{content:"- tap to collapse -";}.after\:content-\[\"-_tap_to_expand_-\"\]::after{content:"- tap to expand -";}.after\:content-empty::after{content:"";}.anchor-container{anchor-name:--container;}.anchor-demo{anchor-name:--demo;}.anchor-name{anchor-name:--name;}.anchor-to-container{position-anchor:--container;}.anchor-to-demo{position-anchor:--demo;}.\[\&\[data-highlighted\]\]\:color-black[data-highlighted],.color-black{color:var(--v-color-altered,var(--v-color));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-color-opacity:100%;}.color-bg{color:var(--v-color-altered,var(--v-color));--v-color:var(--v-bg-altered, var(--v-bg, transparent));--v-color-opacity:100%;}.color-contrast{color:var(--v-color-altered,var(--v-color));--v-color:color(from var(--l-contrast-bg,var(--v-bg-altered,var(--v-bg,var(--mode-white)))) xyz-d65 clamp(0, (0.36 / y - 1) * infinity, 1) clamp(0, (0.36 / y - 1) * infinity, 1) clamp(0, (0.36 / y - 1) * infinity, 1));--v-color-opacity:100%;}.color-gray-ink{color:var(--v-color-altered,var(--v-color));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-color-opacity:100%;}.color-inherit{color:var(--v-color-altered,var(--v-color));--v-color:unset;}.color-primary-dark{color:var(--v-color-altered,var(--v-color));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:100%;}.color-primary-dark\/10{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:10%;}.color-primary-dark\/100{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:100%;}.color-primary-dark\/20{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:20%;}.color-primary-dark\/30{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:30%;}.color-primary-dark\/40{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:40%;}.color-primary-dark\/50{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:50%;}.color-primary-dark\/60{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:60%;}.color-primary-dark\/70{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:70%;}.color-primary-dark\/80{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:80%;}.color-primary-dark\/90{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:90%;}.color-white{color:var(--v-color-altered,var(--v-color));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-color-opacity:100%;}.after\:color-gray-dark::after{color:var(--v-color-altered,var(--v-color));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-color-opacity:100%;}.color-darken-5{--v-color-altered:oklch(from var(--v-color,currentColor) calc(l * (1 + 5 / 30 * -1 * var(--mode-mult, 1))) calc(c * (1 - (5 * 0.1 * -1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.\[\&_\.ProseMirror\:focus\]\:bg-transparent .ProseMirror:focus,.\[\&_\.ProseMirror\]\:bg-transparent .ProseMirror,.bg-transparent{background-color:transparent;--v-bg:unset;}.\[\&\[data-highlighted\]\]\:bg-gray-light[data-highlighted],.bg-gray-light{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-\$colors{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:var(--colors);--v-bg-opacity:100%;}.bg-attention{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-attention-hue,30)));--v-bg-opacity:100%;}.bg-attention-light{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-attention-hue,30)));--v-bg-opacity:100%;}.bg-black{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-gray{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-gray-dark{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-gray-ink{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-gray-wash,.bg-wash{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-main{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-main-dark{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-main-ink{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-main-light{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-main-wash{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-primary-wash{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:100%;}.bg-primary\/10{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:10%;}.bg-primary\/100{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:100%;}.bg-primary\/20{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:20%;}.bg-primary\/30{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:30%;}.bg-primary\/40{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:40%;}.bg-primary\/50{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:50%;}.bg-primary\/60{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:60%;}.bg-primary\/70{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:70%;}.bg-primary\/80{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:80%;}.bg-primary\/90{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:90%;}.bg-success{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-success-hue,140)));--v-bg-opacity:100%;}.bg-success-light{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-success-hue,140)));--v-bg-opacity:100%;}.bg-white{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.hover\:bg-gray-wash:hover{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-lighten-1{--v-bg-altered:oklch(from var(--v-bg,var(--mode-white)) calc(l * (1 + 1 / 30 * 1 * var(--mode-mult, 1))) calc(c * (1 - (1 * 0.1 * 1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.bg-lighten-2{--v-bg-altered:oklch(from var(--v-bg,var(--mode-white)) calc(l * (1 + 2 / 30 * 1 * var(--mode-mult, 1))) calc(c * (1 - (2 * 0.1 * 1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.focus-visible\:bg-lighten-1:focus-visible{--v-bg-altered:oklch(from var(--v-bg,var(--mode-white)) calc(l * (1 + 1 / 30 * 1 * var(--mode-mult, 1))) calc(c * (1 - (1 * 0.1 * 1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.bg-darken-1{--v-bg-altered:oklch(from var(--v-bg,var(--mode-white)) calc(l * (1 + 1 / 30 * -1 * var(--mode-mult, 1))) calc(c * (1 - (1 * 0.1 * -1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.bg-darken-2,[data-behind]:not([data-expanded]) .\[\[data-behind\]\:not\(\[data-expanded\]\)_\&\]\:bg-darken-2{--v-bg-altered:oklch(from var(--v-bg,var(--mode-white)) calc(l * (1 + 2 / 30 * -1 * var(--mode-mult, 1))) calc(c * (1 - (2 * 0.1 * -1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.border-bg{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:var(--v-bg-altered, var(--v-bg, transparent));--v-border-opacity:100%;}.border-black{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.border-black\/10{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:10%;}.border-black\/100{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.border-black\/20{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:20%;}.border-black\/30{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:30%;}.border-black\/40{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:40%;}.border-black\/50{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:50%;}.border-black\/60{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:60%;}.border-black\/70{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:70%;}.border-black\/80{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:80%;}.border-black\/90{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:90%;}.border-color{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:var(--v-color-altered, var(--v-color, var(--mode-black)));--v-border-opacity:100%;}.border-gray{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.border-gray-light{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.border-main{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.border-white{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.border-darken-3{--v-border-altered:oklch(from var(--v-border,currentColor) calc(l * (1 + 3 / 30 * -1 * var(--mode-mult, 1))) calc(c * (1 - (3 * 0.1 * -1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.border-darken-5{--v-border-altered:oklch(from var(--v-border,currentColor) calc(l * (1 + 5 / 30 * -1 * var(--mode-mult, 1))) calc(c * (1 - (5 * 0.1 * -1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.border-t-black{border-top-color:var(--v-border-t-altered,var(--v-border-t));--v-border-t:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-t-opacity:100%;}.ring-primary-light\/10{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:10%;}.ring-primary-light\/100{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:100%;}.ring-primary-light\/20{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:20%;}.ring-primary-light\/30{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:30%;}.ring-primary-light\/40{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:40%;}.ring-primary-light\/50{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:50%;}.ring-primary-light\/60{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:60%;}.ring-primary-light\/70{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:70%;}.ring-primary-light\/80{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:80%;}.ring-primary-light\/90{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:90%;}.ring-white{--un-ring-color:var(--v-ring-altered,var(--v-ring));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-ring-opacity:100%;}.focus\:ring-accent:focus{--un-ring-color:var(--v-ring-altered,var(--v-ring));--v-ring:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-accent-hue,160.88)));--v-ring-opacity:100%;}.focus-visible\:ring-accent:focus-visible{--un-ring-color:var(--v-ring-altered,var(--v-ring));--v-ring:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-accent-hue,160.88)));--v-ring-opacity:100%;}.overflow-stable{scrollbar-gutter:stable;scrollbar-color:hsl(from var(--v-color-altered,var(--v-color,var(--mode-black))) h calc(s * 0.2) calc(l * 4)) transparent;}.overflow-auto{overflow:auto;scrollbar-gutter:stable;scrollbar-color:hsl(from var(--v-color-altered,var(--v-color,var(--mode-black))) h calc(s * 0.2) calc(l * 4)) transparent;}.overflow-y-auto{overflow-y:auto;scrollbar-gutter:stable;scrollbar-color:hsl(from var(--v-color-altered,var(--v-color,var(--mode-black))) h calc(s * 0.2) calc(l * 4)) transparent;}.overflow-x-auto{overflow-x:auto;scrollbar-gutter:stable;scrollbar-color:hsl(from var(--v-color-altered,var(--v-color,var(--mode-black))) h calc(s * 0.2) calc(l * 4)) transparent;}.overflow-unstable{scrollbar-gutter:auto;}@layer components{.layer-components\:\[--global-shadow-spread\:1\]{--global-shadow-spread:1;}.layer-components\:\[--scroll-area-overflow-x-end\:inherit\]{--scroll-area-overflow-x-end:inherit;}.layer-components\:\[--scroll-area-overflow-x-start\:inherit\]{--scroll-area-overflow-x-start:inherit;}.layer-components\:\[--scroll-area-overflow-y-end\:inherit\]{--scroll-area-overflow-y-end:inherit;}.layer-components\:\[--scroll-area-overflow-y-start\:inherit\]{--scroll-area-overflow-y-start:inherit;}.layer-components\:\[\&\[data-different-month\]\]\:\[visibility\:hidden\][data-different-month]{visibility:hidden;}.layer-components\:\[all\:unset\]{all:unset;}.layer-components\:\[font-family\:inherit\],.layer-components\:font-inherit{font-family:inherit;}.layer-components\:\[grid-area\:nav\]{grid-area:nav;}.layer-components\:\[grid-auto-columns\:1fr\]{grid-auto-columns:1fr;}.layer-components\:\[grid-auto-flow\:column\]{grid-auto-flow:column;}.layer-components\:\[grid-auto-rows\:var\(--day-size\,32px\)\]{grid-auto-rows:var(--day-size,32px);}.layer-components\:\[grid-template-columns\:auto_1fr_auto\]{grid-template-columns:auto 1fr auto;}.layer-components\:\[grid-template-rows\:auto_1fr\]{grid-template-rows:auto 1fr;}.layer-components\:\[justify-content\:safe_center\]{justify-content:safe center;}.layer-components\:\[resize\:none\],.layer-components\:resize-none{resize:none;}.layer-components\:\[resize\:vertical\]{resize:vertical;}.layer-components\:\[transition-property\:transform\,width\,color\]{transition-property:transform,width,color;}.layer-components\:before\:\[--scroll-area-overflow-x-start\:inherit\]::before{--scroll-area-overflow-x-start:inherit;}.layer-components\:before\:\[--scroll-area-overflow-y-start\:inherit\]::before{--scroll-area-overflow-y-start:inherit;}.layer-components\:after\:\[--scroll-area-overflow-x-end\:inherit\]::after{--scroll-area-overflow-x-end:inherit;}.layer-components\:after\:\[--scroll-area-overflow-y-end\:inherit\]::after{--scroll-area-overflow-y-end:inherit;}.layer-components\:\[\&\>\*\]\:pointer-events-auto>*,.layer-components\:data-\[hovering\]\:pointer-events-auto[data-hovering],.layer-components\:pointer-events-auto{pointer-events:auto;}.layer-components\:\[\&\[data-disabled\]\]\:pointer-events-none[data-disabled],.layer-components\:pointer-events-none{pointer-events:none;}.layer-components\:absolute{position:absolute;}.layer-components\:fixed{position:fixed;}.layer-components\:relative{position:relative;}.layer-components\:sticky{position:sticky;}.layer-components\:\[\&\[data-today\]\]\:before\:absolute[data-today]::before{position:absolute;}.layer-components\:before\:absolute::before{position:absolute;}.layer-components\:data-\[checked\]\:before\:absolute[data-checked]::before{position:absolute;}.layer-components\:after\:absolute::after{position:absolute;}.layer-components\:inset-0{inset:0;}.layer-components\:before\:inset-x-4::before{left:1rem;right:1rem;}.layer-components\:bottom-\[var\(--nav-height\,env\(safe-area-inset-bottom\,0px\)\)\]{bottom:var(--nav-height,env(safe-area-inset-bottom,0px));}.layer-components\:bottom-0,.layer-components\:data-\[direction\=down\]\:bottom-0[data-direction=down]{bottom:0;}.layer-components\:bottom-md{bottom:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:bottom-sm{bottom:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:left-0{left:0;}.layer-components\:left-50\%{left:50%;}.layer-components\:left-9px{left:9px;}.layer-components\:left-sm{left:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:right-0{right:0;}.layer-components\:right-5px{right:5px;}.layer-components\:right-6px{right:6px;}.layer-components\:right-sm{right:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:top--3px{top:-3px;}.layer-components\:top-0{top:0;}.layer-components\:top-1\/2,.layer-components\:top-50\%{top:50%;}.layer-components\:top-5px{top:5px;}.layer-components\:top-6px{top:6px;}.layer-components\:top-sm{top:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&\[data-today\]\]\:before\:left-\[1px\][data-today]::before{left:1px;}.layer-components\:\[\&\[data-today\]\]\:before\:top-\[1px\][data-today]::before{top:1px;}.layer-components\:before\:left-0::before{left:0;}.layer-components\:before\:top-0::before{top:0;}.layer-components\:data-\[checked\]\:before\:left-0[data-checked]::before{left:0;}.layer-components\:data-\[checked\]\:before\:top-0[data-checked]::before{top:0;}.layer-components\:data-\[direction\=down\]\:data-\[side\=none\]\:before\:-bottom-full[data-side=none][data-direction=down]::before{bottom:-100%;}.layer-components\:data-\[direction\=up\]\:data-\[side\=none\]\:before\:-top-full[data-side=none][data-direction=up]::before{top:-100%;}.layer-components\:after\:bottom-0::after{bottom:0;}.layer-components\:after\:left-0::after{left:0;}.layer-components\:after\:right-0::after{right:0;}.layer-components\:after\:top-0::after{top:0;}.layer-components\:isolate{isolation:isolate;}.layer-components\:\[\&\[data-highlighted\]\]\:z-1[data-highlighted],.layer-components\:\[\&\[data-in-range\]\]\:z-1[data-in-range],.layer-components\:\[\&\[data-range-end\]\]\:z-1[data-range-end],.layer-components\:\[\&\[data-range-start\]\]\:z-1[data-range-start],.layer-components\:z-1{z-index:1;}.layer-components\:\[\&\[data-selected\]\]\:z-2[data-selected]{z-index:2;}.layer-components\:z-\[var\(--z-nav\)\],.layer-components\:z-nav{z-index:var(--z-nav);}.layer-components\:z-\[var\(--z-now-playing\)\]{z-index:var(--z-now-playing);}.layer-components\:z-0{z-index:0;}.layer-components\:z-10{z-index:10;}.layer-components\:z-100{z-index:100;}.layer-components\:z-50{z-index:50;}.layer-components\:z-backdrop{z-index:var(--z-backdrop);}.layer-components\:z-dialog{z-index:var(--z-dialog);}.layer-components\:z-menu{z-index:var(--z-menu);}.layer-components\:hover\:z-1:hover{z-index:1;}.layer-components\:grid{display:grid;}.layer-components\:col-start-1{grid-column-start:1;}.layer-components\:col-start-2{grid-column-start:2;}.layer-components\:row-start-1{grid-row-start:1;}.layer-components\:grid-cols-\[1fr\]{grid-template-columns:1fr;}.layer-components\:grid-cols-\[repeat\(7\,var\(--day-size\,32px\)\)\]{grid-template-columns:repeat(7,var(--day-size,32px));}.layer-components\:grid-cols-\[repeat\(auto-fit\,minmax\(300px\,1fr\)\)\]{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}.layer-components\:grid-rows-\[1fr_auto\]{grid-template-rows:1fr auto;}.layer-components\:grid-areas-\[content\]-\[nav\]{grid-template-areas:"content" "nav";}.layer-components\:m-0{margin:0;}.layer-components\:m-2{margin:0.5rem;}.layer-components\:m-5px{margin:5px;}.layer-components\:\[\&_hr\]\:my-lg hr{margin-top:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));margin-bottom:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&\[data-has-icon\=true\]\[data-has-label\=false\]\]\:-m-y-0\.5[data-has-icon=true][data-has-label=false]{margin-top:-0.125rem;margin-bottom:-0.125rem;}.layer-components\:m-xxs,.layer-components\:mx-xs{margin-left:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));margin-right:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:mx-2{margin-left:0.5rem;margin-right:0.5rem;}.layer-components\:mx-auto{margin-left:auto;margin-right:auto;}.layer-components\:my-0{margin-top:0;margin-bottom:0;}.layer-components\:my-0\.5{margin-top:0.125rem;margin-bottom:0.125rem;}.layer-components\:my-auto{margin-top:auto;margin-bottom:auto;}.layer-components\:my-xs{margin-top:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));margin-bottom:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_blockquote\]\:mb-md blockquote,.layer-components\:\[\&_h1\]\:mb-md h1,.layer-components\:\[\&_h2\]\:mb-md h2,.layer-components\:\[\&_ol\]\:mb-md ol,.layer-components\:\[\&_p\]\:mb-md p,.layer-components\:\[\&_ul\]\:mb-md ul{margin-bottom:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_blockquote\]\:ml-md blockquote{margin-left:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_blockquote\]\:mt-md blockquote,.layer-components\:\[\&_h3\]\:\[\&\:not\(\:first-child\)\]\:mt-md:not(:first-child) h3,.layer-components\:\[\&_h4\]\:\[\&\:not\(\:first-child\)\]\:mt-md:not(:first-child) h4,.layer-components\:\[\&_ol\]\:mt-md ol,.layer-components\:\[\&_ul\]\:mt-md ul,.layer-components\:mt-md{margin-top:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_h1\,h2\,h3\,p\]\:mt-0 h1,h2,h3,p,.layer-components\:\[\&_p\]\:mt-0 p,.layer-components\:mt-0{margin-top:0;}.layer-components\:\[\&_h1\]\:\[\&\:not\(\:first-child\)\]\:mt-xl:not(:first-child) h1{margin-top:calc(3rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_h2\]\:\[\&\:not\(\:first-child\)\]\:mt-lg:not(:first-child) h2{margin-top:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_h3\]\:mb-sm h3,.layer-components\:\[\&_h4\]\:mb-sm h4,.layer-components\:\[\&_li\]\:mb-sm li,.layer-components\:mb-sm{margin-bottom:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:mb--1px{margin-bottom:-1px;}.layer-components\:mb-4{margin-bottom:1rem;}.layer-components\:mb-6{margin-bottom:1.5rem;}.layer-components\:ml-0{margin-left:0;}.layer-components\:ml-auto{margin-left:auto;}.layer-components\:mr--1px{margin-right:-1px;}.layer-components\:mr-0{margin-right:0;}.layer-components\:mr-auto{margin-right:auto;}.layer-components\:mt-3{margin-top:0.75rem;}.layer-components\:box-border{box-sizing:border-box;}.layer-components\:box-content{box-sizing:content-box;}.layer-components\:block{display:block;}.layer-components\:before\:block::before{display:block;}.layer-components\:after\:block::after{display:block;}.layer-components\:inline-block{display:inline-block;}.layer-components\:aspect-1{aspect-ratio:1;}.layer-components\:data-\[orientation\=horizontal\]\:h-0\.25rem[data-orientation=horizontal]{height:0.25rem;}.layer-components\:data-\[orientation\=horizontal\]\:h-full[data-orientation=horizontal],.layer-components\:h-full{height:100%;}.layer-components\:data-\[orientation\=vertical\]\:w-0\.25rem[data-orientation=vertical]{width:0.25rem;}.layer-components\:data-\[orientation\=vertical\]\:w-full[data-orientation=vertical],.layer-components\:w-full{width:100%;}.layer-components\:data-\[side\=none\]\:min-w-\[calc\(var\(--anchor-width\)\+2rem\)\][data-side=none]{min-width:calc(var(--anchor-width) + 2rem);}.layer-components\:h-\[20px\]{height:20px;}.layer-components\:h-\[4px\]{height:4px;}.layer-components\:h-\[max-content\],.layer-components\:h-max-content{height:max-content;}.layer-components\:h-0{height:0;}.layer-components\:h-1px{height:1px;}.layer-components\:h-1rem{height:1rem;}.layer-components\:h-25px{height:25px;}.layer-components\:h-27px{height:27px;}.layer-components\:h-28px{height:28px;}.layer-components\:h-30px{height:30px;}.layer-components\:h-368px{height:368px;}.layer-components\:h-36px{height:36px;}.layer-components\:h-5{height:1.25rem;}.layer-components\:h-6px{height:6px;}.layer-components\:h-7px{height:7px;}.layer-components\:h-auto{height:auto;}.layer-components\:max-h-\[--available-height\],.layer-components\:max-h-\[var\(--available-height\)\]{max-height:var(--available-height);}.layer-components\:max-h-300px{max-height:300px;}.layer-components\:max-h-80px{max-height:80px;}.layer-components\:max-h-85vh{max-height:85vh;}.layer-components\:max-h-full{max-height:100%;}.layer-components\:max-w-\[--available-width\]{max-width:var(--available-width);}.layer-components\:max-w-450px{max-width:450px;}.layer-components\:max-w-80vw{max-width:80vw;}.layer-components\:max-w-90vw{max-width:90vw;}.layer-components\:max-w-full{max-width:100%;}.layer-components\:min-h-0{min-height:0;}.layer-components\:min-h-100dvh{min-height:100dvh;}.layer-components\:min-h-4{min-height:1rem;}.layer-components\:min-h-40px,.layer-components\:min-h-touch-large{min-height:40px;}.layer-components\:min-h-touch{min-height:30px;}.layer-components\:min-w-\[var\(--anchor-width\)\]{min-width:var(--anchor-width);}.layer-components\:min-w-0{min-width:0;}.layer-components\:min-w-100px{min-width:100px;}.layer-components\:min-w-120px{min-width:120px;}.layer-components\:min-w-220px{min-width:220px;}.layer-components\:min-w-32px{min-width:32px;}.layer-components\:min-w-4{min-width:1rem;}.layer-components\:min-w-60px{min-width:60px;}.layer-components\:min-w-80px{min-width:80px;}.layer-components\:w-\[--active-tab-width\]{width:var(--active-tab-width);}.layer-components\:w-\[20px\]{width:20px;}.layer-components\:w-\[calc\(var\(--day-size\,32px\)\*7\)\]{width:calc(var(--day-size,32px) * 7);}.layer-components\:w-0{width:0;}.layer-components\:w-0\.5px{width:0.5px;}.layer-components\:w-20\%{width:20%;}.layer-components\:w-24px{width:24px;}.layer-components\:w-25px{width:25px;}.layer-components\:w-28px{width:28px;}.layer-components\:w-42px{width:42px;}.layer-components\:w-5{width:1.25rem;}.layer-components\:w-6px{width:6px;}.layer-components\:w-90vw{width:90vw;}.layer-components\:w-auto{width:auto;}.layer-components\:w-fit{width:fit-content;}.layer-components\:w-max-content{width:max-content;}.layer-components\:w-min-content{width:min-content;}[data-scroll-direction=horizontal]>.layer-components\:\[\[data-scroll-direction\=horizontal\]\>\&\,\[data-scroll-direction\=both\]\>\&\]\:min-w-min-content,[data-scroll-direction=both]>.layer-components\:\[\[data-scroll-direction\=horizontal\]\>\&\,\[data-scroll-direction\=both\]\>\&\]\:min-w-min-content{min-width:min-content;}.layer-components\:data-\[orientation\=horizontal\]\:hover\:h-0\.5rem:hover[data-orientation=horizontal]{height:0.5rem;}.layer-components\:data-\[orientation\=vertical\]\:hover\:w-0\.5rem:hover[data-orientation=vertical]{width:0.5rem;}.layer-components\:\[\&\[data-today\]\]\:before\:h-\[6px\][data-today]::before{height:6px;}.layer-components\:\[\&\[data-today\]\]\:before\:w-\[6px\][data-today]::before{width:6px;}.layer-components\:before\:h-\[min\(40px\,var\(--scroll-area-overflow-y-start\,40px\)\)\]::before{height:min(40px,var(--scroll-area-overflow-y-start,40px));}.layer-components\:before\:h-full::before{height:100%;}.layer-components\:before\:h-px::before{height:1px;}.layer-components\:before\:w-\[min\(40px\,var\(--scroll-area-overflow-x-start\,40px\)\)\]::before{width:min(40px,var(--scroll-area-overflow-x-start,40px));}.layer-components\:before\:w-full::before{width:100%;}.layer-components\:data-\[checked\]\:before\:h-full[data-checked]::before{height:100%;}.layer-components\:data-\[checked\]\:before\:w-full[data-checked]::before{width:100%;}.layer-components\:data-\[orientation\=horizontal\]\:before\:h-1\.25rem[data-orientation=horizontal]::before{height:1.25rem;}.layer-components\:data-\[orientation\=horizontal\]\:before\:w-full[data-orientation=horizontal]::before{width:100%;}.layer-components\:data-\[orientation\=vertical\]\:before\:h-full[data-orientation=vertical]::before{height:100%;}.layer-components\:data-\[orientation\=vertical\]\:before\:w-1\.25rem[data-orientation=vertical]::before{width:1.25rem;}.layer-components\:after\:h-\[min\(40px\,var\(--scroll-area-overflow-y-end\,40px\)\)\]::after{height:min(40px,var(--scroll-area-overflow-y-end,40px));}.layer-components\:after\:h-full::after{height:100%;}.layer-components\:after\:w-\[min\(40px\,var\(--scroll-area-overflow-x-end\,40px\)\)\]::after{width:min(40px,var(--scroll-area-overflow-x-end,40px));}.layer-components\:after\:w-full::after{width:100%;}.layer-components\:flex{display:flex;}.layer-components\:data-\[checked\]\:before\:flex[data-checked]::before{display:flex;}.layer-components\:inline-flex{display:inline-flex;}.layer-components\:flex-\[0_0_20px\]{flex:0 0 20px;}.layer-components\:flex-1{flex:1 1 0%;}.layer-components\:flex-shrink-0{flex-shrink:0;}.layer-components\:flex-shrink-1{flex-shrink:1;}.layer-components\:flex-grow,.layer-components\:flex-grow-1,.layer-components\:grow{flex-grow:1;}.layer-components\:flex-basis-0{flex-basis:0;}.layer-components\:flex-basis-auto{flex-basis:auto;}.layer-components\:flex-row{flex-direction:row;}.layer-components\:flex-row-reverse{flex-direction:row-reverse;}.layer-components\:flex-col{flex-direction:column;}.layer-components\:flex-col-reverse{flex-direction:column-reverse;}.layer-components\:flex-wrap{flex-wrap:wrap;}.layer-components\:transform-origin-\[--transform-origin\],.layer-components\:transform-origin-\[var\(--transform-origin\)\]{transform-origin:var(--transform-origin);}.layer-components\:transform-origin-br{transform-origin:bottom right;}.layer-components\:transform-origin-cc{transform-origin:center center;}.layer-components\:transform-origin-center{transform-origin:center;}.layer-components\:translate--7px{--un-translate-x:-7px;--un-translate-y:-7px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:translate-\[-50\%\]{--un-translate-x:-50%;--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:-translate-x-1\/2{--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:-translate-y-1\/2{--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[checked\]\:translate-x-1rem[data-checked]{--un-translate-x:1rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[ending-style\]\:data-\[side\=bottom\]\:translate-y-4px[data-side=bottom][data-ending-style],.layer-components\:data-\[ending-style\]\:translate-y-4px[data-ending-style],.layer-components\:data-\[starting-style\]\:data-\[side\=bottom\]\:translate-y-4px[data-side=bottom][data-starting-style],.layer-components\:data-\[starting-style\]\:translate-y-4px[data-starting-style]{--un-translate-y:4px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[ending-style\]\:data-\[side\=left\]\:translate-x-0[data-side=left][data-ending-style],.layer-components\:data-\[ending-style\]\:data-\[side\=right\]\:translate-x-0[data-side=right][data-ending-style]{--un-translate-x:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[ending-style\]\:data-\[side\=top\]\:translate-y-0[data-side=top][data-ending-style],.layer-components\:data-\[side\=none\]\:translate-y-0px[data-side=none]{--un-translate-y:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[starting-style\]\:data-\[side\=left\]\:translate-x--4px[data-side=left][data-starting-style]{--un-translate-x:-4px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[starting-style\]\:data-\[side\=right\]\:translate-x-4px[data-side=right][data-starting-style]{--un-translate-x:4px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[starting-style\]\:data-\[side\=top\]\:translate-y--4px[data-side=top][data-starting-style]{--un-translate-y:-4px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:translate-x-\[--active-tab-left\]{--un-translate-x:var(--active-tab-left);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:translate-z-0{--un-translate-z:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:rotate--45{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:-45deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}[data-panel-open] .layer-components\:\[\[data-panel-open\]_\&\]\:rotate-180,[data-popup-open]>.layer-components\:\[\[data-popup-open\]\>\&\]\:rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[ending-style\]\:layer-components\:scale-95[data-ending-style],.data-\[starting-style\]\:layer-components\:scale-95[data-starting-style],.layer-components\:data-\[ending-style\]\:scale-95[data-ending-style],.layer-components\:data-\[starting-style\]\:scale-95[data-starting-style]{--un-scale-x:0.95;--un-scale-y:0.95;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[closed\]\:scale-0[data-closed]{--un-scale-x:0;--un-scale-y:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[open\]\:scale-100[data-open]{--un-scale-x:1;--un-scale-y:1;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:transform-gpu{transform:translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:\[\&\[data-state\=closed\]\]\:animate-fade-out[data-state=closed]{animation:fade-out 200ms cubic-bezier(0.64, -0.25, 0.1, 1.4) 1;}.layer-components\:animate-fade-in{animation:fade-in 200ms cubic-bezier(0.64, -0.25, 0.1, 1.4) 1;}.layer-components\:data-\[checked\]\:animate-checkbox-fade[data-checked]{animation:checkbox-fade 5000ms cubic-bezier(0.64, -0.25, 0.1, 1.4) 1;}.layer-components\:animate-duration-200{animation-duration:200ms;}.layer-components\:data-\[checked\]\:animate-forwards[data-checked]{animation-fill-mode:forwards;}.layer-components\:\[\&\[data-disabled\=true\]\]\:cursor-default[data-disabled=true],.layer-components\:cursor-default,.layer-components\:data-\[visually-disabled\]\:cursor-default[data-visually-disabled]{cursor:default;}.layer-components\:disabled\:cursor-default:disabled{cursor:default;}.layer-components\:cursor-pointer{cursor:pointer;}.layer-components\:\[\&\[data-disabled\=true\]\]\:cursor-not-allowed[data-disabled=true]{cursor:not-allowed;}.layer-components\:cursor-grab{cursor:grab;}.layer-components\:touch-none{touch-action:none;}.layer-components\:select-auto{-webkit-user-select:auto;user-select:auto;}.layer-components\:select-none{-webkit-user-select:none;user-select:none;}.layer-components\:scroll-my-xs{scroll-margin-top:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));scroll-margin-bottom:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_ol\]\:list-decimal ol{list-style-type:decimal;}.layer-components\:\[\&_ul\]\:list-disc ul{list-style-type:disc;}.layer-components\:appearance-none{-webkit-appearance:none;appearance:none;}.layer-components\:items-start{align-items:flex-start;}.layer-components\:items-end{align-items:flex-end;}.layer-components\:data-\[orientation\=horizontal\]\:items-center[data-orientation=horizontal],.layer-components\:items-center{align-items:center;}.layer-components\:data-\[checked\]\:before\:items-center[data-checked]::before{align-items:center;}.layer-components\:items-stretch{align-items:stretch;}.layer-components\:self-start{align-self:flex-start;}.layer-components\:self-end{align-self:flex-end;}.layer-components\:self-center{align-self:center;}.layer-components\:self-stretch{align-self:stretch;}.layer-components\:justify-start{justify-content:flex-start;}.layer-components\:justify-end{justify-content:flex-end;}.layer-components\:data-\[orientation\=vertical\]\:justify-center[data-orientation=vertical],.layer-components\:justify-center{justify-content:center;}.layer-components\:data-\[checked\]\:before\:justify-center[data-checked]::before{justify-content:center;}.layer-components\:justify-between{justify-content:space-between;}.layer-components\:justify-around{justify-content:space-around;}.layer-components\:justify-stretch{justify-content:stretch;}.layer-components\:justify-items-center{justify-items:center;}.layer-components\:justify-self-end{justify-self:end;}.layer-components\:gap-1{gap:0.25rem;}.layer-components\:gap-2{gap:0.5rem;}.layer-components\:gap-3{gap:0.75rem;}.layer-components\:gap-4{gap:1rem;}.layer-components\:gap-6px{gap:6px;}.layer-components\:gap-lg{gap:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:gap-md{gap:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:gap-sm{gap:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:gap-xl{gap:calc(3rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:gap-xs{gap:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:gap-col-md{column-gap:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:gap-row-xs{row-gap:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:overflow-hidden{overflow:hidden;}.layer-components\:overflow-visible{overflow:visible;}.layer-components\:overflow-x-hidden{overflow-x:hidden;}.layer-components\:overflow-y-clip{overflow-y:clip;}.layer-components\:overflow-y-hidden{overflow-y:hidden;}.layer-components\:overscroll-none{overscroll-behavior:none;}.layer-components\:text-ellipsis{text-overflow:ellipsis;}.layer-components\:whitespace-nowrap{white-space:nowrap;}.layer-components\:\[\&_\.ProseMirror\]\:border-1 .ProseMirror,.layer-components\:b-1,.layer-components\:border-1{border-width:1px;}.layer-components\:border-0{border-width:0px;}.layer-components\:border-13px{border-width:13px;}.layer-components\:border-thin,.layer-components\:border-width-thin{border-width:calc(1px * var(--global-border-scale,1));}.layer-components\:\[\&\[data-today\]\]\:before\:border-1[data-today]::before{border-width:1px;}.layer-components\:\[\&_blockquote\]\:border-l-4 blockquote{border-left-width:4px;}.layer-components\:border-b-1{border-bottom-width:1px;}.layer-components\:b-black{--un-border-opacity:1;border-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))) / var(--un-border-opacity));}.layer-components\:b-gray-dark{--un-border-opacity:1;border-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))) / var(--un-border-opacity));}.layer-components\:\[\&_\.ProseMirror\]\:rounded-\[20px\] .ProseMirror{border-radius:20px;}.layer-components\:\[\&\[data-has-icon\=true\]\[data-has-label\=false\]\]\:rounded-lg[data-has-icon=true][data-has-label=false],.layer-components\:rounded-lg{border-radius:calc(1.25rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.layer-components\:\[\&\[data-in-range\]\]\:rounded-none[data-in-range],.layer-components\:rounded-none{border-radius:0;}.layer-components\:\[\&\[data-selected\]\]\:rounded[data-selected],.layer-components\:rounded{border-radius:0.25rem;}.layer-components\:rounded-full{border-radius:calc(99999px * var(--global-corner-scale,1));}.layer-components\:rounded-inherit{border-radius:inherit;}.layer-components\:rounded-md{border-radius:calc(1rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.layer-components\:rounded-sm{border-radius:calc(0.5rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.layer-components\:rounded-xl{border-radius:calc(1.5rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.layer-components\:active\:rounded:active{border-radius:0.25rem;}.layer-components\:\[\&\[data-today\]\]\:before\:rounded-lg[data-today]::before{border-radius:calc(1.25rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.layer-components\:\[\&\[data-range-end\]\]\:rounded-l-none[data-range-end]{border-top-left-radius:0;border-bottom-left-radius:0;}.layer-components\:\[\&\[data-range-end\]\]\:rounded-r[data-range-end]{border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;}.layer-components\:\[\&\[data-range-start\]\]\:rounded-l[data-range-start]{border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem;}.layer-components\:\[\&\[data-range-start\]\]\:rounded-r-none[data-range-start]{border-top-right-radius:0;border-bottom-right-radius:0;}.layer-components\:rounded-t-md{border-top-left-radius:calc(1rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));border-top-right-radius:calc(1rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.layer-components\:\[\&\[data-day-first\]\]\:rounded-tl[data-day-first],.layer-components\:\[\&\[data-first-column\]\[data-top-edge\]\]\:rounded-tl[data-first-column][data-top-edge]{border-top-left-radius:0.25rem;}.layer-components\:\[\&\[data-day-last\]\]\:rounded-br[data-day-last],.layer-components\:\[\&\[data-last-column\]\[data-bottom-edge\]\]\:rounded-br[data-last-column][data-bottom-edge]{border-bottom-right-radius:0.25rem;}.layer-components\:\[\&\[data-first-column\]\[data-bottom-edge\]\]\:rounded-bl[data-first-column][data-bottom-edge]{border-bottom-left-radius:0.25rem;}.layer-components\:\[\&\[data-last-column\]\[data-top-edge\]\]\:rounded-tr[data-last-column][data-top-edge]{border-top-right-radius:0.25rem;}.layer-components\:\[\&_\.ProseMirror\]\:border-solid .ProseMirror,.layer-components\:b-solid,.layer-components\:border-solid{border-style:solid;}.layer-components\:border-dashed{border-style:dashed;}.layer-components\:border-none{border-style:none;}.layer-components\:\[\&\[data-today\]\]\:before\:border-solid[data-today]::before{border-style:solid;}.layer-components\:\[\&_blockquote\]\:border-l-solid blockquote{border-left-style:solid;}.layer-components\:before\:bg-gradient-from-bg::before{--un-gradient-from-position:0%;--un-gradient-from:var(--v-bg-altered, var(--v-bg, transparent)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}.layer-components\:after\:bg-gradient-from-bg::after{--un-gradient-from-position:0%;--un-gradient-from:var(--v-bg-altered, var(--v-bg, transparent)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}.layer-components\:before\:bg-gradient-to-transparent::before{--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);}.layer-components\:after\:bg-gradient-to-transparent::after{--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);}.layer-components\:before\:bg-gradient-to-b::before{--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}.layer-components\:before\:bg-gradient-to-r::before{--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}.layer-components\:after\:bg-gradient-to-l::after{--un-gradient-shape:to left in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}.layer-components\:after\:bg-gradient-to-t::after{--un-gradient-shape:to top in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}.layer-components\:bg-none{background-image:none;}.layer-components\:bg-cover{background-size:cover;}.layer-components\:bg-clip-padding{-webkit-background-clip:padding-box;background-clip:padding-box;}.layer-components\:bg-center{background-position:center;}.layer-components\:fill-none{fill:none;}.layer-components\:object-cover{object-fit:cover;}.layer-components\:object-center{object-position:center;}.layer-components\:\[\&\[data-has-icon\=true\]\[data-has-label\=false\]\]\:p-2[data-has-icon=true][data-has-label=false],.layer-components\:p-2{padding:0.5rem;}.layer-components\:\[\&\[data-has-icon\=true\]\[data-has-label\=false\]\]\:p-2\.35[data-has-icon=true][data-has-label=false]{padding:0.5875rem;}.layer-components\:p-0{padding:0;}.layer-components\:p-1{padding:0.25rem;}.layer-components\:p-2px{padding:2px;}.layer-components\:p-4{padding:1rem;}.layer-components\:p-lg{padding:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:p-md{padding:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:p-sm{padding:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:p-xl{padding:calc(3rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:p-xs{padding:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_\.ProseMirror\]\:px-4 .ProseMirror,.layer-components\:px-4{padding-left:1rem;padding-right:1rem;}.layer-components\:\[\&_\.ProseMirror\]\:py-2 .ProseMirror,.layer-components\:py-2{padding-top:0.5rem;padding-bottom:0.5rem;}.layer-components\:px-2{padding-left:0.5rem;padding-right:0.5rem;}.layer-components\:px-3{padding-left:0.75rem;padding-right:0.75rem;}.layer-components\:px-5{padding-left:1.25rem;padding-right:1.25rem;}.layer-components\:px-lg{padding-left:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));padding-right:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:px-md{padding-left:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));padding-right:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:px-sm{padding-left:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));padding-right:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:px-xs{padding-left:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));padding-right:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:py-0\.25{padding-top:0.0625rem;padding-bottom:0.0625rem;}.layer-components\:py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}.layer-components\:py-1{padding-top:0.25rem;padding-bottom:0.25rem;}.layer-components\:py-1\.25{padding-top:0.3125rem;padding-bottom:0.3125rem;}.layer-components\:py-3{padding-top:0.75rem;padding-bottom:0.75rem;}.layer-components\:py-sm{padding-top:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));padding-bottom:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:py-xs{padding-top:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));padding-bottom:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_blockquote\]\:pl-4 blockquote{padding-left:1rem;}.layer-components\:\[\&_ol\]\:pl-6 ol,.layer-components\:\[\&_ul\]\:pl-6 ul{padding-left:1.5rem;}.layer-components\:pb-\[calc\(0\.25rem\+env\(safe-area-inset-bottom\,0px\)\)\]{padding-bottom:calc(0.25rem + env(safe-area-inset-bottom,0px));}.layer-components\:pb-1px{padding-bottom:1px;}.layer-components\:pb-4{padding-bottom:1rem;}.layer-components\:pb-md{padding-bottom:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:pb-xs{padding-bottom:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:pl-25px{padding-left:25px;}.layer-components\:pl-3{padding-left:0.75rem;}.layer-components\:pl-35px{padding-left:35px;}.layer-components\:pl-8{padding-left:2rem;}.layer-components\:pl-md{padding-left:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:pr-4{padding-right:1rem;}.layer-components\:pr-sm{padding-right:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:pt-3{padding-top:0.75rem;}.layer-components\:text-center{text-align:center;}.layer-components\:text-left{text-align:left;}.layer-components\:text-start{text-align:start;}.layer-components\:text-nowrap{text-wrap:nowrap;}.layer-components\:\[\&_h1\]\:text-2xl h1,.layer-components\:text-2xl{font-size:1.75rem;line-height:2.25rem;}.layer-components\:\[\&_h2\]\:text-lg h2,.layer-components\:text-lg{font-size:1.25rem;line-height:1.75rem;}.layer-components\:\[\&_h3\]\:text-md h3,.layer-components\:text-md{font-size:1.125rem;line-height:1.5rem;}.layer-components\:\[\&_h4\]\:text-xs h4,.layer-components\:\[\&\[data-has-icon\=true\]\[data-has-label\=false\]\]\:text-xs[data-has-icon=true][data-has-label=false],.layer-components\:text-xs{font-size:0.75rem;line-height:1rem;}.layer-components\:\[\&\[data-has-icon\=true\]\[data-has-label\=false\]\]\:text-sm[data-has-icon=true][data-has-label=false],.layer-components\:text-sm,[data-compact] .layer-components\:\[\[data-compact\]_\&\]\:text-sm{font-size:1rem;line-height:1.25rem;}.layer-components\:text-3xl{font-size:2rem;line-height:2.5rem;}.layer-components\:text-xxs{font-size:0.625rem;line-height:0.75rem;}.layer-components\:data-\[checked\]\:before\:text-xs[data-checked]::before{font-size:0.75rem;line-height:1rem;}.layer-components\:font-size-xs{font-size:0.75rem;}.layer-components\:text-gray-dark{--un-text-opacity:1;color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))) / var(--un-text-opacity)) /* oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))) */;}.layer-components\:data-\[checked\]\:before\:text-main-ink[data-checked]::before{--un-text-opacity:1;color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))) / var(--un-text-opacity)) /* oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))) */;}.layer-components\:text-inherit{color:inherit;}.layer-components\:\[\&_h1\]\:font-semibold h1,.layer-components\:\[\&_strong\]\:font-semibold strong,.layer-components\:font-semibold{font-weight:600;}.layer-components\:\[\&_h2\]\:font-bold h2,.layer-components\:font-bold{font-weight:700;}.layer-components\:\[\&_h3\]\:font-500 h3,.layer-components\:font-500{font-weight:500;}.layer-components\:font-normal{font-weight:400;}.layer-components\:leading-1{line-height:0.25rem;}.layer-components\:leading-4{line-height:1rem;}.layer-components\:leading-6{line-height:1.5rem;}.layer-components\:leading-none{line-height:1;}.layer-components\:leading-normal{line-height:1.5;}.layer-components\:leading-relaxed{line-height:1.625;}.layer-components\:leading-tight{line-height:1.25;}.layer-components\:font-title{font-family:var(--font-title, var(--font-default));}.layer-components\:\[\&_h4\]\:uppercase h4,.layer-components\:uppercase{text-transform:uppercase;}.layer-components\:\[\&_em\]\:italic em,.layer-components\:italic{font-style:italic;}.layer-components\:\[\&_a\:hover\]\:underline a:hover,.layer-components\:\[\&_a\]\:underline a{text-decoration-line:underline;}.data-\[ending-style\]\:layer-components\:opacity-0[data-ending-style],.data-\[starting-style\]\:layer-components\:opacity-0[data-starting-style],.layer-components\:data-\[closed\]\:opacity-0[data-closed],.layer-components\:data-\[ending-style\]\:data-\[side\=bottom\]\:opacity-0[data-side=bottom][data-ending-style],.layer-components\:data-\[ending-style\]\:data-\[side\=left\]\:opacity-0[data-side=left][data-ending-style],.layer-components\:data-\[ending-style\]\:data-\[side\=right\]\:opacity-0[data-side=right][data-ending-style],.layer-components\:data-\[ending-style\]\:data-\[side\=top\]\:opacity-0[data-side=top][data-ending-style],.layer-components\:data-\[ending-style\]\:opacity-0[data-ending-style],.layer-components\:data-\[starting-style\]\:data-\[side\=bottom\]\:opacity-0[data-side=bottom][data-starting-style],.layer-components\:data-\[starting-style\]\:data-\[side\=left\]\:opacity-0[data-side=left][data-starting-style],.layer-components\:data-\[starting-style\]\:data-\[side\=right\]\:opacity-0[data-side=right][data-starting-style],.layer-components\:data-\[starting-style\]\:data-\[side\=top\]\:opacity-0[data-side=top][data-starting-style],.layer-components\:data-\[starting-style\]\:opacity-0[data-starting-style],.layer-components\:opacity-0{opacity:0;}.layer-components\:\[\&\[data-disabled\=true\]\]\:opacity-50[data-disabled=true]{opacity:0.5;}.layer-components\:data-\[hovering\]\:opacity-100[data-hovering],.layer-components\:data-\[open\]\:opacity-100[data-open]{opacity:1;}.layer-components\:disabled\:opacity-50:disabled{opacity:0.5;}.layer-components\:\[\&\:disabled\]\:shadow-none:disabled,.layer-components\:\[\&\[data-disabled\=true\]\]\:shadow-none[data-disabled=true]{--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.layer-components\:data-\[pressed\]\:shadow-sm[data-pressed],.layer-components\:shadow-sm{--un-shadow:var(--un-shadow-inset) 0 calc(0px * var(--v-shadow-y-mult,1)) calc(1px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * 2 * (1 + var(--dyn-source-mode-adjust, 0)))),
|
|
28
|
+
var(--un-shadow-inset) 0 calc(1px * var(--v-shadow-y-mult,1)) calc(2px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * 2 * (1 + var(--dyn-source-mode-adjust, 0))));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-op-0{--un-shadow-opacity:0;}.shadow-op-10{--un-shadow-opacity:0.1;}.shadow-op-100{--un-shadow-opacity:1;}.shadow-op-20{--un-shadow-opacity:0.2;}.shadow-op-30{--un-shadow-opacity:0.3;}.shadow-op-40{--un-shadow-opacity:0.4;}.shadow-op-50{--un-shadow-opacity:0.5;}.shadow-op-60{--un-shadow-opacity:0.6;}.shadow-op-70{--un-shadow-opacity:0.7;}.shadow-op-80{--un-shadow-opacity:0.8;}.shadow-op-90{--un-shadow-opacity:0.9;}.\[\&_\.ProseMirror\:focus\]\:outline-none .ProseMirror:focus,.\[\&\[data-highlighted\]\]\:outline-none[data-highlighted]{outline:2px solid transparent;outline-offset:2px;}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px;}.ring{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.ring-2{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.focus-visible\:ring:focus-visible{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-color{transition-property:color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-height{transition-property:height;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-width{transition-property:width;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.ease{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);}.will-change-transform{will-change:transform;}.after\:\[\&\[data-state\=open\]\]\:content-\[\"-_tap_to_collapse_-\"\][data-state=open]::after{content:"- tap to collapse -";}.after\:content-\[\"-_tap_to_expand_-\"\]::after{content:"- tap to expand -";}.after\:content-empty::after{content:"";}.anchor-container{anchor-name:--container;}.anchor-demo{anchor-name:--demo;}.anchor-name{anchor-name:--name;}.anchor-to-container{position-anchor:--container;}.anchor-to-demo{position-anchor:--demo;}.\[\&\[data-highlighted\]\]\:color-black[data-highlighted],.color-black{color:var(--v-color-altered,var(--v-color));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-color-opacity:100%;}.color-bg{color:var(--v-color-altered,var(--v-color));--v-color:var(--v-bg-altered, var(--v-bg, transparent));--v-color-opacity:100%;}.color-contrast{color:var(--v-color-altered,var(--v-color));--v-color:color(from var(--l-contrast-bg,var(--v-bg-altered,var(--v-bg,var(--mode-white)))) xyz-d65 clamp(0, (0.36 / y - 1) * infinity, 1) clamp(0, (0.36 / y - 1) * infinity, 1) clamp(0, (0.36 / y - 1) * infinity, 1));--v-color-opacity:100%;}.color-gray-ink{color:var(--v-color-altered,var(--v-color));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-color-opacity:100%;}.color-inherit{color:var(--v-color-altered,var(--v-color));--v-color:unset;}.color-primary-dark{color:var(--v-color-altered,var(--v-color));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:100%;}.color-primary-dark\/10{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:10%;}.color-primary-dark\/100{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:100%;}.color-primary-dark\/20{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:20%;}.color-primary-dark\/30{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:30%;}.color-primary-dark\/40{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:40%;}.color-primary-dark\/50{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:50%;}.color-primary-dark\/60{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:60%;}.color-primary-dark\/70{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:70%;}.color-primary-dark\/80{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:80%;}.color-primary-dark\/90{color:rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-color-opacity:90%;}.color-white{color:var(--v-color-altered,var(--v-color));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-color-opacity:100%;}.after\:color-gray-dark::after{color:var(--v-color-altered,var(--v-color));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-color-opacity:100%;}.color-darken-5{--v-color-altered:oklch(from var(--v-color,currentColor) calc(l * (1 + 5 / 30 * -1 * var(--mode-mult, 1))) calc(c * (1 - (5 * 0.1 * -1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.\[\&_\.ProseMirror\:focus\]\:bg-transparent .ProseMirror:focus,.\[\&_\.ProseMirror\]\:bg-transparent .ProseMirror,.bg-transparent{background-color:transparent;--v-bg:unset;}.\[\&\[data-highlighted\]\]\:bg-gray-light[data-highlighted],.bg-gray-light{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-\$colors{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:var(--colors);--v-bg-opacity:100%;}.bg-attention{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-attention-hue,30)));--v-bg-opacity:100%;}.bg-attention-light{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-attention-hue,30)));--v-bg-opacity:100%;}.bg-black{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-gray{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-gray-dark{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-gray-ink{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-gray-wash,.bg-wash{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-main{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-main-dark{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-main-ink{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-main-light{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-main-wash{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-primary-wash{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:100%;}.bg-primary\/10{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:10%;}.bg-primary\/100{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:100%;}.bg-primary\/20{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:20%;}.bg-primary\/30{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:30%;}.bg-primary\/40{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:40%;}.bg-primary\/50{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:50%;}.bg-primary\/60{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:60%;}.bg-primary\/70{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:70%;}.bg-primary\/80{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:80%;}.bg-primary\/90{background-color:rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-primary-hue,91.8)));--v-bg-opacity:90%;}.bg-success{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-success-hue,140)));--v-bg-opacity:100%;}.bg-success-light{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-success-hue,140)));--v-bg-opacity:100%;}.bg-white{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.hover\:bg-gray-wash:hover{background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.bg-lighten-1{--v-bg-altered:oklch(from var(--v-bg,var(--mode-white)) calc(l * (1 + 1 / 30 * 1 * var(--mode-mult, 1))) calc(c * (1 - (1 * 0.1 * 1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.bg-lighten-2{--v-bg-altered:oklch(from var(--v-bg,var(--mode-white)) calc(l * (1 + 2 / 30 * 1 * var(--mode-mult, 1))) calc(c * (1 - (2 * 0.1 * 1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.focus-visible\:bg-lighten-1:focus-visible{--v-bg-altered:oklch(from var(--v-bg,var(--mode-white)) calc(l * (1 + 1 / 30 * 1 * var(--mode-mult, 1))) calc(c * (1 - (1 * 0.1 * 1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.bg-darken-1{--v-bg-altered:oklch(from var(--v-bg,var(--mode-white)) calc(l * (1 + 1 / 30 * -1 * var(--mode-mult, 1))) calc(c * (1 - (1 * 0.1 * -1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.bg-darken-2,[data-behind]:not([data-expanded]) .\[\[data-behind\]\:not\(\[data-expanded\]\)_\&\]\:bg-darken-2{--v-bg-altered:oklch(from var(--v-bg,var(--mode-white)) calc(l * (1 + 2 / 30 * -1 * var(--mode-mult, 1))) calc(c * (1 - (2 * 0.1 * -1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.border-bg{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:var(--v-bg-altered, var(--v-bg, transparent));--v-border-opacity:100%;}.border-black{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.border-black\/10{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:10%;}.border-black\/100{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.border-black\/20{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:20%;}.border-black\/30{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:30%;}.border-black\/40{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:40%;}.border-black\/50{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:50%;}.border-black\/60{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:60%;}.border-black\/70{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:70%;}.border-black\/80{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:80%;}.border-black\/90{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:90%;}.border-color{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:var(--v-color-altered, var(--v-color, var(--mode-black)));--v-border-opacity:100%;}.border-gray{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.border-gray-light{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.border-main{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.border-white{border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.border-darken-3{--v-border-altered:oklch(from var(--v-border,currentColor) calc(l * (1 + 3 / 30 * -1 * var(--mode-mult, 1))) calc(c * (1 - (3 * 0.1 * -1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.border-darken-5{--v-border-altered:oklch(from var(--v-border,currentColor) calc(l * (1 + 5 / 30 * -1 * var(--mode-mult, 1))) calc(c * (1 - (5 * 0.1 * -1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.border-t-black{border-top-color:var(--v-border-t-altered,var(--v-border-t));--v-border-t:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-t-opacity:100%;}.ring-primary-light\/10{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:10%;}.ring-primary-light\/100{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:100%;}.ring-primary-light\/20{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:20%;}.ring-primary-light\/30{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:30%;}.ring-primary-light\/40{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:40%;}.ring-primary-light\/50{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:50%;}.ring-primary-light\/60{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:60%;}.ring-primary-light\/70{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:70%;}.ring-primary-light\/80{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:80%;}.ring-primary-light\/90{--un-ring-color:rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult, 1)))), 100%)) calc(var(--p-primary-hue,91.8)));--v-ring-opacity:90%;}.ring-white{--un-ring-color:var(--v-ring-altered,var(--v-ring));--v-ring:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-ring-opacity:100%;}.focus\:ring-accent:focus{--un-ring-color:var(--v-ring-altered,var(--v-ring));--v-ring:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-accent-hue,160.88)));--v-ring-opacity:100%;}.focus-visible\:ring-accent:focus-visible{--un-ring-color:var(--v-ring-altered,var(--v-ring));--v-ring:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--p-accent-hue,160.88)));--v-ring-opacity:100%;}.overflow-stable{scrollbar-gutter:stable;scrollbar-color:hsl(from var(--v-color-altered,var(--v-color,var(--mode-black))) h calc(s * 0.2) calc(l * 4)) transparent;}.overflow-auto{overflow:auto;scrollbar-gutter:stable;scrollbar-color:hsl(from var(--v-color-altered,var(--v-color,var(--mode-black))) h calc(s * 0.2) calc(l * 4)) transparent;}.overflow-y-auto{overflow-y:auto;scrollbar-gutter:stable;scrollbar-color:hsl(from var(--v-color-altered,var(--v-color,var(--mode-black))) h calc(s * 0.2) calc(l * 4)) transparent;}.overflow-x-auto{overflow-x:auto;scrollbar-gutter:stable;scrollbar-color:hsl(from var(--v-color-altered,var(--v-color,var(--mode-black))) h calc(s * 0.2) calc(l * 4)) transparent;}.overflow-unstable{scrollbar-gutter:auto;}@layer components{.layer-components\:\[--global-shadow-spread\:1\]{--global-shadow-spread:1;}.layer-components\:\[--scroll-area-overflow-x-end\:inherit\]{--scroll-area-overflow-x-end:inherit;}.layer-components\:\[--scroll-area-overflow-x-start\:inherit\]{--scroll-area-overflow-x-start:inherit;}.layer-components\:\[--scroll-area-overflow-y-end\:inherit\]{--scroll-area-overflow-y-end:inherit;}.layer-components\:\[--scroll-area-overflow-y-start\:inherit\]{--scroll-area-overflow-y-start:inherit;}.layer-components\:\[\&\[data-different-month\]\]\:\[visibility\:hidden\][data-different-month]{visibility:hidden;}.layer-components\:\[all\:unset\]{all:unset;}.layer-components\:\[font-family\:inherit\],.layer-components\:font-inherit{font-family:inherit;}.layer-components\:\[grid-area\:nav\]{grid-area:nav;}.layer-components\:\[grid-auto-columns\:1fr\]{grid-auto-columns:1fr;}.layer-components\:\[grid-auto-flow\:column\]{grid-auto-flow:column;}.layer-components\:\[grid-auto-rows\:var\(--day-size\,32px\)\]{grid-auto-rows:var(--day-size,32px);}.layer-components\:\[grid-template-columns\:auto_1fr_auto\]{grid-template-columns:auto 1fr auto;}.layer-components\:\[grid-template-rows\:auto_1fr\]{grid-template-rows:auto 1fr;}.layer-components\:\[justify-content\:safe_center\]{justify-content:safe center;}.layer-components\:\[resize\:none\],.layer-components\:resize-none{resize:none;}.layer-components\:\[resize\:vertical\]{resize:vertical;}.layer-components\:\[transition-property\:transform\,width\,color\]{transition-property:transform,width,color;}.layer-components\:before\:\[--scroll-area-overflow-x-start\:inherit\]::before{--scroll-area-overflow-x-start:inherit;}.layer-components\:before\:\[--scroll-area-overflow-y-start\:inherit\]::before{--scroll-area-overflow-y-start:inherit;}.layer-components\:after\:\[--scroll-area-overflow-x-end\:inherit\]::after{--scroll-area-overflow-x-end:inherit;}.layer-components\:after\:\[--scroll-area-overflow-y-end\:inherit\]::after{--scroll-area-overflow-y-end:inherit;}.layer-components\:\[\&\>\*\]\:pointer-events-auto>*,.layer-components\:data-\[hovering\]\:pointer-events-auto[data-hovering],.layer-components\:pointer-events-auto{pointer-events:auto;}.layer-components\:\[\&\[data-disabled\]\]\:pointer-events-none[data-disabled],.layer-components\:pointer-events-none{pointer-events:none;}.layer-components\:absolute{position:absolute;}.layer-components\:fixed{position:fixed;}.layer-components\:relative{position:relative;}.layer-components\:sticky{position:sticky;}.layer-components\:\[\&\[data-today\]\]\:before\:absolute[data-today]::before{position:absolute;}.layer-components\:before\:absolute::before{position:absolute;}.layer-components\:data-\[checked\]\:before\:absolute[data-checked]::before{position:absolute;}.layer-components\:after\:absolute::after{position:absolute;}.layer-components\:inset-0{inset:0;}.layer-components\:before\:inset-x-4::before{left:1rem;right:1rem;}.layer-components\:bottom-\[var\(--nav-height\,env\(safe-area-inset-bottom\,0px\)\)\]{bottom:var(--nav-height,env(safe-area-inset-bottom,0px));}.layer-components\:bottom-0,.layer-components\:data-\[direction\=down\]\:bottom-0[data-direction=down]{bottom:0;}.layer-components\:bottom-md{bottom:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:bottom-sm{bottom:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:left-0{left:0;}.layer-components\:left-50\%{left:50%;}.layer-components\:left-9px{left:9px;}.layer-components\:left-sm{left:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:right-0{right:0;}.layer-components\:right-5px{right:5px;}.layer-components\:right-6px{right:6px;}.layer-components\:right-sm{right:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:top--3px{top:-3px;}.layer-components\:top-0{top:0;}.layer-components\:top-1\/2,.layer-components\:top-50\%{top:50%;}.layer-components\:top-5px{top:5px;}.layer-components\:top-6px{top:6px;}.layer-components\:top-sm{top:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&\[data-today\]\]\:before\:left-\[1px\][data-today]::before{left:1px;}.layer-components\:\[\&\[data-today\]\]\:before\:top-\[1px\][data-today]::before{top:1px;}.layer-components\:before\:left-0::before{left:0;}.layer-components\:before\:top-0::before{top:0;}.layer-components\:data-\[checked\]\:before\:left-0[data-checked]::before{left:0;}.layer-components\:data-\[checked\]\:before\:top-0[data-checked]::before{top:0;}.layer-components\:data-\[direction\=down\]\:data-\[side\=none\]\:before\:-bottom-full[data-side=none][data-direction=down]::before{bottom:-100%;}.layer-components\:data-\[direction\=up\]\:data-\[side\=none\]\:before\:-top-full[data-side=none][data-direction=up]::before{top:-100%;}.layer-components\:after\:bottom-0::after{bottom:0;}.layer-components\:after\:left-0::after{left:0;}.layer-components\:after\:right-0::after{right:0;}.layer-components\:after\:top-0::after{top:0;}.layer-components\:isolate{isolation:isolate;}.layer-components\:\[\&\[data-highlighted\]\]\:z-1[data-highlighted],.layer-components\:\[\&\[data-in-range\]\]\:z-1[data-in-range],.layer-components\:\[\&\[data-range-end\]\]\:z-1[data-range-end],.layer-components\:\[\&\[data-range-start\]\]\:z-1[data-range-start],.layer-components\:z-1{z-index:1;}.layer-components\:\[\&\[data-selected\]\]\:z-2[data-selected]{z-index:2;}.layer-components\:z-\[var\(--z-nav\)\],.layer-components\:z-nav{z-index:var(--z-nav);}.layer-components\:z-\[var\(--z-now-playing\)\]{z-index:var(--z-now-playing);}.layer-components\:z-0{z-index:0;}.layer-components\:z-10{z-index:10;}.layer-components\:z-100{z-index:100;}.layer-components\:z-50{z-index:50;}.layer-components\:z-backdrop{z-index:var(--z-backdrop);}.layer-components\:z-dialog{z-index:var(--z-dialog);}.layer-components\:z-menu{z-index:var(--z-menu);}.layer-components\:hover\:z-1:hover{z-index:1;}.layer-components\:grid{display:grid;}.layer-components\:col-start-1{grid-column-start:1;}.layer-components\:col-start-2{grid-column-start:2;}.layer-components\:row-start-1{grid-row-start:1;}.layer-components\:grid-cols-\[1fr\]{grid-template-columns:1fr;}.layer-components\:grid-cols-\[repeat\(7\,var\(--day-size\,32px\)\)\]{grid-template-columns:repeat(7,var(--day-size,32px));}.layer-components\:grid-cols-\[repeat\(auto-fit\,minmax\(300px\,1fr\)\)\]{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}.layer-components\:grid-rows-\[1fr_auto\]{grid-template-rows:1fr auto;}.layer-components\:grid-areas-\[content\]-\[nav\]{grid-template-areas:"content" "nav";}.layer-components\:m-0{margin:0;}.layer-components\:m-2{margin:0.5rem;}.layer-components\:m-5px{margin:5px;}.layer-components\:\[\&_hr\]\:my-lg hr{margin-top:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));margin-bottom:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&\[data-has-icon\=true\]\[data-has-label\=false\]\]\:-m-y-0\.5[data-has-icon=true][data-has-label=false]{margin-top:-0.125rem;margin-bottom:-0.125rem;}.layer-components\:m-xxs,.layer-components\:mx-xs{margin-left:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));margin-right:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:mx-2{margin-left:0.5rem;margin-right:0.5rem;}.layer-components\:mx-auto{margin-left:auto;margin-right:auto;}.layer-components\:my-0{margin-top:0;margin-bottom:0;}.layer-components\:my-0\.5{margin-top:0.125rem;margin-bottom:0.125rem;}.layer-components\:my-auto{margin-top:auto;margin-bottom:auto;}.layer-components\:my-xs{margin-top:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));margin-bottom:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_blockquote\]\:mb-md blockquote,.layer-components\:\[\&_h1\]\:mb-md h1,.layer-components\:\[\&_h2\]\:mb-md h2,.layer-components\:\[\&_ol\]\:mb-md ol,.layer-components\:\[\&_p\]\:mb-md p,.layer-components\:\[\&_ul\]\:mb-md ul{margin-bottom:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_blockquote\]\:ml-md blockquote{margin-left:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_blockquote\]\:mt-md blockquote,.layer-components\:\[\&_h3\]\:\[\&\:not\(\:first-child\)\]\:mt-md:not(:first-child) h3,.layer-components\:\[\&_h4\]\:\[\&\:not\(\:first-child\)\]\:mt-md:not(:first-child) h4,.layer-components\:\[\&_ol\]\:mt-md ol,.layer-components\:\[\&_ul\]\:mt-md ul,.layer-components\:mt-md{margin-top:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_h1\,h2\,h3\,p\]\:mt-0 h1,h2,h3,p,.layer-components\:\[\&_p\]\:mt-0 p,.layer-components\:mt-0{margin-top:0;}.layer-components\:\[\&_h1\]\:\[\&\:not\(\:first-child\)\]\:mt-xl:not(:first-child) h1{margin-top:calc(3rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_h2\]\:\[\&\:not\(\:first-child\)\]\:mt-lg:not(:first-child) h2{margin-top:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_h3\]\:mb-sm h3,.layer-components\:\[\&_h4\]\:mb-sm h4,.layer-components\:\[\&_li\]\:mb-sm li,.layer-components\:mb-sm{margin-bottom:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:mb--1px{margin-bottom:-1px;}.layer-components\:mb-4{margin-bottom:1rem;}.layer-components\:mb-6{margin-bottom:1.5rem;}.layer-components\:ml-0{margin-left:0;}.layer-components\:ml-auto{margin-left:auto;}.layer-components\:mr--1px{margin-right:-1px;}.layer-components\:mr-0{margin-right:0;}.layer-components\:mr-auto{margin-right:auto;}.layer-components\:mt-3{margin-top:0.75rem;}.layer-components\:box-border{box-sizing:border-box;}.layer-components\:box-content{box-sizing:content-box;}.layer-components\:block{display:block;}.layer-components\:before\:block::before{display:block;}.layer-components\:after\:block::after{display:block;}.layer-components\:inline-block{display:inline-block;}.layer-components\:aspect-1{aspect-ratio:1;}.layer-components\:data-\[orientation\=horizontal\]\:h-0\.25rem[data-orientation=horizontal]{height:0.25rem;}.layer-components\:data-\[orientation\=horizontal\]\:h-full[data-orientation=horizontal],.layer-components\:h-full{height:100%;}.layer-components\:data-\[orientation\=vertical\]\:w-0\.25rem[data-orientation=vertical]{width:0.25rem;}.layer-components\:data-\[orientation\=vertical\]\:w-full[data-orientation=vertical],.layer-components\:w-full{width:100%;}.layer-components\:data-\[side\=none\]\:min-w-\[calc\(var\(--anchor-width\)\+2rem\)\][data-side=none]{min-width:calc(var(--anchor-width) + 2rem);}.layer-components\:h-\[20px\]{height:20px;}.layer-components\:h-\[4px\]{height:4px;}.layer-components\:h-\[max-content\],.layer-components\:h-max-content{height:max-content;}.layer-components\:h-0{height:0;}.layer-components\:h-1px{height:1px;}.layer-components\:h-1rem{height:1rem;}.layer-components\:h-25px{height:25px;}.layer-components\:h-27px{height:27px;}.layer-components\:h-28px{height:28px;}.layer-components\:h-30px{height:30px;}.layer-components\:h-368px{height:368px;}.layer-components\:h-36px{height:36px;}.layer-components\:h-5{height:1.25rem;}.layer-components\:h-6px{height:6px;}.layer-components\:h-7px{height:7px;}.layer-components\:h-auto{height:auto;}.layer-components\:max-h-\[--available-height\],.layer-components\:max-h-\[var\(--available-height\)\]{max-height:var(--available-height);}.layer-components\:max-h-300px{max-height:300px;}.layer-components\:max-h-80px{max-height:80px;}.layer-components\:max-h-85vh{max-height:85vh;}.layer-components\:max-h-full{max-height:100%;}.layer-components\:max-w-\[--available-width\]{max-width:var(--available-width);}.layer-components\:max-w-450px{max-width:450px;}.layer-components\:max-w-80vw{max-width:80vw;}.layer-components\:max-w-90vw{max-width:90vw;}.layer-components\:max-w-full{max-width:100%;}.layer-components\:min-h-0{min-height:0;}.layer-components\:min-h-100dvh{min-height:100dvh;}.layer-components\:min-h-4{min-height:1rem;}.layer-components\:min-h-40px,.layer-components\:min-h-touch-large{min-height:40px;}.layer-components\:min-h-touch{min-height:30px;}.layer-components\:min-w-\[var\(--anchor-width\)\]{min-width:var(--anchor-width);}.layer-components\:min-w-0{min-width:0;}.layer-components\:min-w-100px{min-width:100px;}.layer-components\:min-w-120px{min-width:120px;}.layer-components\:min-w-220px{min-width:220px;}.layer-components\:min-w-32px{min-width:32px;}.layer-components\:min-w-4{min-width:1rem;}.layer-components\:min-w-60px{min-width:60px;}.layer-components\:min-w-80px{min-width:80px;}.layer-components\:w-\[--active-tab-width\]{width:var(--active-tab-width);}.layer-components\:w-\[20px\]{width:20px;}.layer-components\:w-\[calc\(var\(--day-size\,32px\)\*7\)\]{width:calc(var(--day-size,32px) * 7);}.layer-components\:w-0{width:0;}.layer-components\:w-0\.5px{width:0.5px;}.layer-components\:w-20\%{width:20%;}.layer-components\:w-24px{width:24px;}.layer-components\:w-25px{width:25px;}.layer-components\:w-28px{width:28px;}.layer-components\:w-42px{width:42px;}.layer-components\:w-5{width:1.25rem;}.layer-components\:w-6px{width:6px;}.layer-components\:w-90vw{width:90vw;}.layer-components\:w-auto{width:auto;}.layer-components\:w-fit{width:fit-content;}.layer-components\:w-max-content{width:max-content;}.layer-components\:w-min-content{width:min-content;}[data-scroll-direction=horizontal]>.layer-components\:\[\[data-scroll-direction\=horizontal\]\>\&\,\[data-scroll-direction\=both\]\>\&\]\:min-w-min-content,[data-scroll-direction=both]>.layer-components\:\[\[data-scroll-direction\=horizontal\]\>\&\,\[data-scroll-direction\=both\]\>\&\]\:min-w-min-content{min-width:min-content;}.layer-components\:data-\[orientation\=horizontal\]\:hover\:h-0\.5rem:hover[data-orientation=horizontal]{height:0.5rem;}.layer-components\:data-\[orientation\=vertical\]\:hover\:w-0\.5rem:hover[data-orientation=vertical]{width:0.5rem;}.layer-components\:\[\&\[data-today\]\]\:before\:h-\[6px\][data-today]::before{height:6px;}.layer-components\:\[\&\[data-today\]\]\:before\:w-\[6px\][data-today]::before{width:6px;}.layer-components\:before\:h-\[min\(40px\,var\(--scroll-area-overflow-y-start\,40px\)\)\]::before{height:min(40px,var(--scroll-area-overflow-y-start,40px));}.layer-components\:before\:h-full::before{height:100%;}.layer-components\:before\:h-px::before{height:1px;}.layer-components\:before\:w-\[min\(40px\,var\(--scroll-area-overflow-x-start\,40px\)\)\]::before{width:min(40px,var(--scroll-area-overflow-x-start,40px));}.layer-components\:before\:w-full::before{width:100%;}.layer-components\:data-\[checked\]\:before\:h-full[data-checked]::before{height:100%;}.layer-components\:data-\[checked\]\:before\:w-full[data-checked]::before{width:100%;}.layer-components\:data-\[orientation\=horizontal\]\:before\:h-1\.25rem[data-orientation=horizontal]::before{height:1.25rem;}.layer-components\:data-\[orientation\=horizontal\]\:before\:w-full[data-orientation=horizontal]::before{width:100%;}.layer-components\:data-\[orientation\=vertical\]\:before\:h-full[data-orientation=vertical]::before{height:100%;}.layer-components\:data-\[orientation\=vertical\]\:before\:w-1\.25rem[data-orientation=vertical]::before{width:1.25rem;}.layer-components\:after\:h-\[min\(40px\,var\(--scroll-area-overflow-y-end\,40px\)\)\]::after{height:min(40px,var(--scroll-area-overflow-y-end,40px));}.layer-components\:after\:h-full::after{height:100%;}.layer-components\:after\:w-\[min\(40px\,var\(--scroll-area-overflow-x-end\,40px\)\)\]::after{width:min(40px,var(--scroll-area-overflow-x-end,40px));}.layer-components\:after\:w-full::after{width:100%;}.layer-components\:flex{display:flex;}.layer-components\:data-\[checked\]\:before\:flex[data-checked]::before{display:flex;}.layer-components\:inline-flex{display:inline-flex;}.layer-components\:flex-\[0_0_20px\]{flex:0 0 20px;}.layer-components\:flex-1{flex:1 1 0%;}.layer-components\:flex-shrink-0{flex-shrink:0;}.layer-components\:flex-shrink-1{flex-shrink:1;}.layer-components\:flex-grow,.layer-components\:flex-grow-1,.layer-components\:grow{flex-grow:1;}.layer-components\:flex-basis-0{flex-basis:0;}.layer-components\:flex-basis-auto{flex-basis:auto;}.layer-components\:flex-row{flex-direction:row;}.layer-components\:flex-row-reverse{flex-direction:row-reverse;}.layer-components\:flex-col{flex-direction:column;}.layer-components\:flex-col-reverse{flex-direction:column-reverse;}.layer-components\:flex-wrap{flex-wrap:wrap;}.layer-components\:transform-origin-\[--transform-origin\],.layer-components\:transform-origin-\[var\(--transform-origin\)\]{transform-origin:var(--transform-origin);}.layer-components\:transform-origin-br{transform-origin:bottom right;}.layer-components\:transform-origin-cc{transform-origin:center center;}.layer-components\:transform-origin-center{transform-origin:center;}.layer-components\:translate--7px{--un-translate-x:-7px;--un-translate-y:-7px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:translate-\[-50\%\]{--un-translate-x:-50%;--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:-translate-x-1\/2{--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:-translate-y-1\/2{--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[checked\]\:translate-x-1rem[data-checked]{--un-translate-x:1rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[ending-style\]\:data-\[side\=bottom\]\:translate-y-4px[data-side=bottom][data-ending-style],.layer-components\:data-\[ending-style\]\:translate-y-4px[data-ending-style],.layer-components\:data-\[starting-style\]\:data-\[side\=bottom\]\:translate-y-4px[data-side=bottom][data-starting-style],.layer-components\:data-\[starting-style\]\:translate-y-4px[data-starting-style]{--un-translate-y:4px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[ending-style\]\:data-\[side\=left\]\:translate-x-0[data-side=left][data-ending-style],.layer-components\:data-\[ending-style\]\:data-\[side\=right\]\:translate-x-0[data-side=right][data-ending-style]{--un-translate-x:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[ending-style\]\:data-\[side\=top\]\:translate-y-0[data-side=top][data-ending-style],.layer-components\:data-\[side\=none\]\:translate-y-0px[data-side=none]{--un-translate-y:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[starting-style\]\:data-\[side\=left\]\:translate-x--4px[data-side=left][data-starting-style]{--un-translate-x:-4px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[starting-style\]\:data-\[side\=right\]\:translate-x-4px[data-side=right][data-starting-style]{--un-translate-x:4px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[starting-style\]\:data-\[side\=top\]\:translate-y--4px[data-side=top][data-starting-style]{--un-translate-y:-4px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:translate-x-\[--active-tab-left\]{--un-translate-x:var(--active-tab-left);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:translate-z-0{--un-translate-z:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:rotate--45{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:-45deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}[data-panel-open] .layer-components\:\[\[data-panel-open\]_\&\]\:rotate-180,[data-popup-open]>.layer-components\:\[\[data-popup-open\]\>\&\]\:rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[ending-style\]\:layer-components\:scale-95[data-ending-style],.data-\[starting-style\]\:layer-components\:scale-95[data-starting-style],.layer-components\:data-\[ending-style\]\:scale-95[data-ending-style],.layer-components\:data-\[starting-style\]\:scale-95[data-starting-style]{--un-scale-x:0.95;--un-scale-y:0.95;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[closed\]\:scale-0[data-closed]{--un-scale-x:0;--un-scale-y:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:data-\[open\]\:scale-100[data-open]{--un-scale-x:1;--un-scale-y:1;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:transform-gpu{transform:translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.layer-components\:\[\&\[data-state\=closed\]\]\:animate-fade-out[data-state=closed]{animation:fade-out 200ms cubic-bezier(0.64, -0.25, 0.1, 1.4) 1;}.layer-components\:animate-fade-in{animation:fade-in 200ms cubic-bezier(0.64, -0.25, 0.1, 1.4) 1;}.layer-components\:data-\[checked\]\:animate-checkbox-fade[data-checked]{animation:checkbox-fade 5000ms cubic-bezier(0.64, -0.25, 0.1, 1.4) 1;}.layer-components\:animate-duration-200{animation-duration:200ms;}.layer-components\:data-\[checked\]\:animate-forwards[data-checked]{animation-fill-mode:forwards;}.layer-components\:\[\&\[data-disabled\=true\]\]\:cursor-default[data-disabled=true],.layer-components\:cursor-default,.layer-components\:data-\[visually-disabled\]\:cursor-default[data-visually-disabled]{cursor:default;}.layer-components\:disabled\:cursor-default:disabled{cursor:default;}.layer-components\:cursor-pointer{cursor:pointer;}.layer-components\:\[\&\[data-disabled\=true\]\]\:cursor-not-allowed[data-disabled=true]{cursor:not-allowed;}.layer-components\:cursor-grab{cursor:grab;}.layer-components\:touch-none{touch-action:none;}.layer-components\:select-auto{-webkit-user-select:auto;user-select:auto;}.layer-components\:select-none{-webkit-user-select:none;user-select:none;}.layer-components\:scroll-my-xs{scroll-margin-top:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));scroll-margin-bottom:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_ol\]\:list-decimal ol{list-style-type:decimal;}.layer-components\:\[\&_ul\]\:list-disc ul{list-style-type:disc;}.layer-components\:appearance-none{-webkit-appearance:none;appearance:none;}.layer-components\:items-start{align-items:flex-start;}.layer-components\:items-end{align-items:flex-end;}.layer-components\:data-\[orientation\=horizontal\]\:items-center[data-orientation=horizontal],.layer-components\:items-center{align-items:center;}.layer-components\:data-\[checked\]\:before\:items-center[data-checked]::before{align-items:center;}.layer-components\:items-stretch{align-items:stretch;}.layer-components\:self-start{align-self:flex-start;}.layer-components\:self-end{align-self:flex-end;}.layer-components\:self-center{align-self:center;}.layer-components\:self-stretch{align-self:stretch;}.layer-components\:justify-start{justify-content:flex-start;}.layer-components\:justify-end{justify-content:flex-end;}.layer-components\:data-\[orientation\=vertical\]\:justify-center[data-orientation=vertical],.layer-components\:justify-center{justify-content:center;}.layer-components\:data-\[checked\]\:before\:justify-center[data-checked]::before{justify-content:center;}.layer-components\:justify-between{justify-content:space-between;}.layer-components\:justify-around{justify-content:space-around;}.layer-components\:justify-stretch{justify-content:stretch;}.layer-components\:justify-items-center{justify-items:center;}.layer-components\:justify-self-end{justify-self:end;}.layer-components\:gap-1{gap:0.25rem;}.layer-components\:gap-2{gap:0.5rem;}.layer-components\:gap-3{gap:0.75rem;}.layer-components\:gap-4{gap:1rem;}.layer-components\:gap-6px{gap:6px;}.layer-components\:gap-lg{gap:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:gap-md{gap:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:gap-sm{gap:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:gap-xl{gap:calc(3rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:gap-xs{gap:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:gap-col-md{column-gap:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:gap-row-xs{row-gap:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:overflow-hidden{overflow:hidden;}.layer-components\:overflow-visible{overflow:visible;}.layer-components\:overflow-x-hidden{overflow-x:hidden;}.layer-components\:overflow-y-clip{overflow-y:clip;}.layer-components\:overflow-y-hidden{overflow-y:hidden;}.layer-components\:overscroll-none{overscroll-behavior:none;}.layer-components\:text-ellipsis{text-overflow:ellipsis;}.layer-components\:whitespace-nowrap{white-space:nowrap;}.layer-components\:\[\&_\.ProseMirror\]\:border-1 .ProseMirror,.layer-components\:b-1,.layer-components\:border-1{border-width:1px;}.layer-components\:border-0{border-width:0px;}.layer-components\:border-13px{border-width:13px;}.layer-components\:border-thin,.layer-components\:border-width-thin{border-width:calc(1px * var(--global-border-scale,1));}.layer-components\:\[\&\[data-today\]\]\:before\:border-1[data-today]::before{border-width:1px;}.layer-components\:\[\&_blockquote\]\:border-l-4 blockquote{border-left-width:4px;}.layer-components\:border-b-1{border-bottom-width:1px;}.layer-components\:b-black{--un-border-opacity:1;border-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))) / var(--un-border-opacity));}.layer-components\:b-gray-dark{--un-border-opacity:1;border-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))) / var(--un-border-opacity));}.layer-components\:\[\&_\.ProseMirror\]\:rounded-\[20px\] .ProseMirror{border-radius:20px;}.layer-components\:\[\&\[data-has-icon\=true\]\[data-has-label\=false\]\]\:rounded-lg[data-has-icon=true][data-has-label=false],.layer-components\:rounded-lg{border-radius:calc(1.25rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.layer-components\:\[\&\[data-in-range\]\]\:rounded-none[data-in-range],.layer-components\:rounded-none{border-radius:0;}.layer-components\:\[\&\[data-selected\]\]\:rounded[data-selected],.layer-components\:rounded{border-radius:0.25rem;}.layer-components\:rounded-full{border-radius:calc(99999px * var(--global-corner-scale,1));}.layer-components\:rounded-inherit{border-radius:inherit;}.layer-components\:rounded-md{border-radius:calc(1rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.layer-components\:rounded-sm{border-radius:calc(0.5rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.layer-components\:rounded-xl{border-radius:calc(1.5rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.layer-components\:active\:rounded:active{border-radius:0.25rem;}.layer-components\:\[\&\[data-today\]\]\:before\:rounded-lg[data-today]::before{border-radius:calc(1.25rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.layer-components\:\[\&\[data-range-end\]\]\:rounded-l-none[data-range-end]{border-top-left-radius:0;border-bottom-left-radius:0;}.layer-components\:\[\&\[data-range-end\]\]\:rounded-r[data-range-end]{border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;}.layer-components\:\[\&\[data-range-start\]\]\:rounded-l[data-range-start]{border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem;}.layer-components\:\[\&\[data-range-start\]\]\:rounded-r-none[data-range-start]{border-top-right-radius:0;border-bottom-right-radius:0;}.layer-components\:rounded-t-md{border-top-left-radius:calc(1rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));border-top-right-radius:calc(1rem * var(--local-corner-scale,1) * var(--global-corner-scale,1));}.layer-components\:\[\&\[data-day-first\]\]\:rounded-tl[data-day-first],.layer-components\:\[\&\[data-first-column\]\[data-top-edge\]\]\:rounded-tl[data-first-column][data-top-edge]{border-top-left-radius:0.25rem;}.layer-components\:\[\&\[data-day-last\]\]\:rounded-br[data-day-last],.layer-components\:\[\&\[data-last-column\]\[data-bottom-edge\]\]\:rounded-br[data-last-column][data-bottom-edge]{border-bottom-right-radius:0.25rem;}.layer-components\:\[\&\[data-first-column\]\[data-bottom-edge\]\]\:rounded-bl[data-first-column][data-bottom-edge]{border-bottom-left-radius:0.25rem;}.layer-components\:\[\&\[data-last-column\]\[data-top-edge\]\]\:rounded-tr[data-last-column][data-top-edge]{border-top-right-radius:0.25rem;}.layer-components\:\[\&_\.ProseMirror\]\:border-solid .ProseMirror,.layer-components\:b-solid,.layer-components\:border-solid{border-style:solid;}.layer-components\:border-dashed{border-style:dashed;}.layer-components\:border-none{border-style:none;}.layer-components\:\[\&\[data-today\]\]\:before\:border-solid[data-today]::before{border-style:solid;}.layer-components\:\[\&_blockquote\]\:border-l-solid blockquote{border-left-style:solid;}.layer-components\:before\:bg-gradient-from-bg::before{--un-gradient-from-position:0%;--un-gradient-from:var(--v-bg-altered, var(--v-bg, transparent)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}.layer-components\:after\:bg-gradient-from-bg::after{--un-gradient-from-position:0%;--un-gradient-from:var(--v-bg-altered, var(--v-bg, transparent)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}.layer-components\:before\:bg-gradient-to-transparent::before{--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);}.layer-components\:after\:bg-gradient-to-transparent::after{--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);}.layer-components\:before\:bg-gradient-to-b::before{--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}.layer-components\:before\:bg-gradient-to-r::before{--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}.layer-components\:after\:bg-gradient-to-l::after{--un-gradient-shape:to left in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}.layer-components\:after\:bg-gradient-to-t::after{--un-gradient-shape:to top in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}.layer-components\:bg-none{background-image:none;}.layer-components\:bg-cover{background-size:cover;}.layer-components\:bg-clip-padding{-webkit-background-clip:padding-box;background-clip:padding-box;}.layer-components\:bg-center{background-position:center;}.layer-components\:fill-none{fill:none;}.layer-components\:object-cover{object-fit:cover;}.layer-components\:object-center{object-position:center;}.layer-components\:\[\&\[data-has-icon\=true\]\[data-has-label\=false\]\]\:p-2[data-has-icon=true][data-has-label=false],.layer-components\:p-2{padding:0.5rem;}.layer-components\:\[\&\[data-has-icon\=true\]\[data-has-label\=false\]\]\:p-2\.35[data-has-icon=true][data-has-label=false]{padding:0.5875rem;}.layer-components\:p-0{padding:0;}.layer-components\:p-1{padding:0.25rem;}.layer-components\:p-2px{padding:2px;}.layer-components\:p-3px{padding:3px;}.layer-components\:p-4{padding:1rem;}.layer-components\:p-lg{padding:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:p-md{padding:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:p-sm{padding:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:p-xl{padding:calc(3rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:p-xs{padding:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_\.ProseMirror\]\:px-4 .ProseMirror,.layer-components\:px-4{padding-left:1rem;padding-right:1rem;}.layer-components\:\[\&_\.ProseMirror\]\:py-2 .ProseMirror,.layer-components\:py-2{padding-top:0.5rem;padding-bottom:0.5rem;}.layer-components\:px-2{padding-left:0.5rem;padding-right:0.5rem;}.layer-components\:px-3{padding-left:0.75rem;padding-right:0.75rem;}.layer-components\:px-5{padding-left:1.25rem;padding-right:1.25rem;}.layer-components\:px-lg{padding-left:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));padding-right:calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:px-md{padding-left:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));padding-right:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:px-sm{padding-left:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));padding-right:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:px-xs{padding-left:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));padding-right:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:py-0\.25{padding-top:0.0625rem;padding-bottom:0.0625rem;}.layer-components\:py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}.layer-components\:py-1{padding-top:0.25rem;padding-bottom:0.25rem;}.layer-components\:py-1\.25{padding-top:0.3125rem;padding-bottom:0.3125rem;}.layer-components\:py-3{padding-top:0.75rem;padding-bottom:0.75rem;}.layer-components\:py-sm{padding-top:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));padding-bottom:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:py-xs{padding-top:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));padding-bottom:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:\[\&_blockquote\]\:pl-4 blockquote{padding-left:1rem;}.layer-components\:\[\&_ol\]\:pl-6 ol,.layer-components\:\[\&_ul\]\:pl-6 ul{padding-left:1.5rem;}.layer-components\:pb-\[calc\(0\.25rem\+env\(safe-area-inset-bottom\,0px\)\)\]{padding-bottom:calc(0.25rem + env(safe-area-inset-bottom,0px));}.layer-components\:pb-1px{padding-bottom:1px;}.layer-components\:pb-4{padding-bottom:1rem;}.layer-components\:pb-md{padding-bottom:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:pb-xs{padding-bottom:calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:pl-25px{padding-left:25px;}.layer-components\:pl-3{padding-left:0.75rem;}.layer-components\:pl-35px{padding-left:35px;}.layer-components\:pl-8{padding-left:2rem;}.layer-components\:pl-md{padding-left:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:pr-4{padding-right:1rem;}.layer-components\:pr-sm{padding-right:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:pt-3{padding-top:0.75rem;}.layer-components\:text-center{text-align:center;}.layer-components\:text-left{text-align:left;}.layer-components\:text-start{text-align:start;}.layer-components\:text-nowrap{text-wrap:nowrap;}.layer-components\:\[\&_h1\]\:text-2xl h1,.layer-components\:text-2xl{font-size:1.75rem;line-height:2.25rem;}.layer-components\:\[\&_h2\]\:text-lg h2,.layer-components\:text-lg{font-size:1.25rem;line-height:1.75rem;}.layer-components\:\[\&_h3\]\:text-md h3,.layer-components\:text-md{font-size:1.125rem;line-height:1.5rem;}.layer-components\:\[\&_h4\]\:text-xs h4,.layer-components\:\[\&\[data-has-icon\=true\]\[data-has-label\=false\]\]\:text-xs[data-has-icon=true][data-has-label=false],.layer-components\:text-xs{font-size:0.75rem;line-height:1rem;}.layer-components\:\[\&\[data-has-icon\=true\]\[data-has-label\=false\]\]\:text-sm[data-has-icon=true][data-has-label=false],.layer-components\:text-sm,[data-compact] .layer-components\:\[\[data-compact\]_\&\]\:text-sm{font-size:1rem;line-height:1.25rem;}.layer-components\:text-3xl{font-size:2rem;line-height:2.5rem;}.layer-components\:text-xxs{font-size:0.625rem;line-height:0.75rem;}.layer-components\:data-\[checked\]\:before\:text-xs[data-checked]::before{font-size:0.75rem;line-height:1rem;}.layer-components\:font-size-xs{font-size:0.75rem;}.layer-components\:text-gray-dark{--un-text-opacity:1;color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))) / var(--un-text-opacity)) /* oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))) */;}.layer-components\:data-\[checked\]\:before\:text-main-ink[data-checked]::before{--un-text-opacity:1;color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))) / var(--un-text-opacity)) /* oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))) */;}.layer-components\:text-inherit{color:inherit;}.layer-components\:\[\&_h1\]\:font-semibold h1,.layer-components\:\[\&_strong\]\:font-semibold strong,.layer-components\:font-semibold{font-weight:600;}.layer-components\:\[\&_h2\]\:font-bold h2,.layer-components\:font-bold{font-weight:700;}.layer-components\:\[\&_h3\]\:font-500 h3,.layer-components\:font-500{font-weight:500;}.layer-components\:font-normal{font-weight:400;}.layer-components\:leading-1{line-height:0.25rem;}.layer-components\:leading-4{line-height:1rem;}.layer-components\:leading-6{line-height:1.5rem;}.layer-components\:leading-none{line-height:1;}.layer-components\:leading-normal{line-height:1.5;}.layer-components\:leading-relaxed{line-height:1.625;}.layer-components\:leading-tight{line-height:1.25;}.layer-components\:font-title{font-family:var(--font-title, var(--font-default));}.layer-components\:\[\&_h4\]\:uppercase h4,.layer-components\:uppercase{text-transform:uppercase;}.layer-components\:\[\&_em\]\:italic em,.layer-components\:italic{font-style:italic;}.layer-components\:\[\&_a\:hover\]\:underline a:hover,.layer-components\:\[\&_a\]\:underline a{text-decoration-line:underline;}.data-\[ending-style\]\:layer-components\:opacity-0[data-ending-style],.data-\[starting-style\]\:layer-components\:opacity-0[data-starting-style],.layer-components\:data-\[closed\]\:opacity-0[data-closed],.layer-components\:data-\[ending-style\]\:data-\[side\=bottom\]\:opacity-0[data-side=bottom][data-ending-style],.layer-components\:data-\[ending-style\]\:data-\[side\=left\]\:opacity-0[data-side=left][data-ending-style],.layer-components\:data-\[ending-style\]\:data-\[side\=right\]\:opacity-0[data-side=right][data-ending-style],.layer-components\:data-\[ending-style\]\:data-\[side\=top\]\:opacity-0[data-side=top][data-ending-style],.layer-components\:data-\[ending-style\]\:opacity-0[data-ending-style],.layer-components\:data-\[starting-style\]\:data-\[side\=bottom\]\:opacity-0[data-side=bottom][data-starting-style],.layer-components\:data-\[starting-style\]\:data-\[side\=left\]\:opacity-0[data-side=left][data-starting-style],.layer-components\:data-\[starting-style\]\:data-\[side\=right\]\:opacity-0[data-side=right][data-starting-style],.layer-components\:data-\[starting-style\]\:data-\[side\=top\]\:opacity-0[data-side=top][data-starting-style],.layer-components\:data-\[starting-style\]\:opacity-0[data-starting-style],.layer-components\:opacity-0{opacity:0;}.layer-components\:\[\&\[data-disabled\=true\]\]\:opacity-50[data-disabled=true]{opacity:0.5;}.layer-components\:data-\[hovering\]\:opacity-100[data-hovering],.layer-components\:data-\[open\]\:opacity-100[data-open]{opacity:1;}.layer-components\:disabled\:opacity-50:disabled{opacity:0.5;}.layer-components\:\[\&\:disabled\]\:shadow-none:disabled,.layer-components\:\[\&\[data-disabled\=true\]\]\:shadow-none[data-disabled=true]{--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.layer-components\:data-\[pressed\]\:shadow-sm[data-pressed],.layer-components\:shadow-sm{--un-shadow:var(--un-shadow-inset) 0 calc(0px * var(--v-shadow-y-mult,1)) calc(1px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * 2 * (1 + var(--dyn-source-mode-adjust, 0)))),
|
|
29
29
|
var(--un-shadow-inset) 0 calc(1px * var(--v-shadow-y-mult,1)) calc(2px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * 2 * (1 + var(--dyn-source-mode-adjust, 0))));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.layer-components\:shadow-\[0_30px_60px_0px\]{--un-shadow:0 30px 60px 0px var(--un-shadow-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.layer-components\:shadow-black\/20{--un-shadow-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))) / 0.2) /* oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))) */;}.layer-components\:shadow-lg{--un-shadow:var(--un-shadow-inset) 0 calc(8px * var(--v-shadow-y-mult,1)) calc(16px * var(--global-shadow-spread,1)) 0px rgb(from var(--un-shadow-color) r g b / calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * (1 + var(--dyn-source-mode-adjust, 0)))),
|
|
30
30
|
var(--un-shadow-inset) 0 calc(5px * var(--v-shadow-y-mult,1)) calc(10px * var(--global-shadow-spread,1)) 0px rgb(from var(--un-shadow-color) r g b / calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * (1 + var(--dyn-source-mode-adjust, 0))));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.layer-components\:shadow-md{--un-shadow:var(--un-shadow-inset) 0 calc(4px * var(--v-shadow-y-mult,1)) calc(8px * var(--global-shadow-spread,1)) -1px rgb(from var(--un-shadow-color) r g b / calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * (1 + var(--dyn-source-mode-adjust, 0)))),
|
|
31
31
|
var(--un-shadow-inset) 0 calc(2px * var(--v-shadow-y-mult,1)) calc(4px * var(--global-shadow-spread,1)) -1px rgb(from var(--un-shadow-color) r g b / calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * 2 * (1 + var(--dyn-source-mode-adjust, 0))));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.layer-components\:shadow-white{--un-shadow-opacity:1;--un-shadow-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))) / var(--un-shadow-opacity)) /* oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))) */;}.layer-components\:shadow-xl{--un-shadow:var(--un-shadow-inset) 0 calc(20px * var(--v-shadow-y-mult,1)) calc(40px * (0.1 + var(--global-shadow-spread,1))) -0px rgb(from var(--un-shadow-color) r g b / calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * (1 + var(--dyn-source-mode-adjust, 0)))),
|
|
@@ -54,16 +54,16 @@ export const LiveUpdateTextField = function LiveUpdateTextField(_a) {
|
|
|
54
54
|
// every once in a while, send an update to parent
|
|
55
55
|
const debouncedOnChange = useMemo(() => debounce(onChange || (() => { }), debounceMs), [onChange, debounceMs]);
|
|
56
56
|
// update local state instantly and parent eventually
|
|
57
|
-
const
|
|
58
|
-
setDisplayValue(
|
|
59
|
-
debouncedOnChange(
|
|
57
|
+
const handleValueChange = useCallback((value) => {
|
|
58
|
+
setDisplayValue(value);
|
|
59
|
+
debouncedOnChange(value);
|
|
60
60
|
didChange.current = true;
|
|
61
61
|
}, [debouncedOnChange]);
|
|
62
62
|
if (textArea) {
|
|
63
|
-
return (_jsx(TextArea, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue,
|
|
63
|
+
return (_jsx(TextArea, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue, onValueChange: handleValueChange, autoSize: true }, rest)));
|
|
64
64
|
}
|
|
65
65
|
else {
|
|
66
|
-
return (_jsx(Input, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue,
|
|
66
|
+
return (_jsx(Input, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue, onValueChange: handleValueChange, type: type }, rest)));
|
|
67
67
|
}
|
|
68
68
|
};
|
|
69
69
|
//# sourceMappingURL=LiveUpdateTextField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LiveUpdateTextField.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/LiveUpdateTextField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,
|
|
1
|
+
{"version":3,"file":"LiveUpdateTextField.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/LiveUpdateTextField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAKN,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,EAAc,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAuBnD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,mBAAmB,CAAC,EAUrC;QAVqC,EAC/D,GAAG,EACH,KAAK,EACL,QAAQ,EACR,UAAU,GAAG,GAAG,EAChB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,OAEsB,EADvB,IAAI,cATwD,mFAU/D,CADO;IAEP,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC9D,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEhC,MAAM,WAAW,GAAG,WAAW,CAC9B,CAAC,EAAsD,EAAE,EAAE;QAC1D,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,CAAC,CAAC;QACd,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;IAC9B,CAAC,EACD,CAAC,OAAO,CAAC,CACT,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC7B,CAAC,EAAsD,EAAE,EAAE;QAC1D,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,EAAE,CAAC,CAAC;QACb,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;QAC9B,sDAAsD;QACtD,yCAAyC;QACzC,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACvB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,YAAY,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACP,eAAe,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;QAC9B,CAAC;QACD,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;IAC3B,CAAC,EACD,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,CAAC,CACvC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;YAC3B,OAAO;QACR,CAAC;QACD,eAAe,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,kDAAkD;IAClD,MAAM,iBAAiB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAAE,UAAU,CAAC,EAClD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACtB,CAAC;IAEF,qDAAqD;IACrD,MAAM,iBAAiB,GAAG,WAAW,CACpC,CAAC,KAAa,EAAE,EAAE;QACjB,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,iBAAiB,CAAC,KAAK,CAAC,CAAC;QACzB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;IAC1B,CAAC,EACD,CAAC,iBAAiB,CAAC,CACnB,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACd,OAAO,CACN,KAAC,QAAQ,kBACR,GAAG,EAAE,GAAU,EACf,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,YAAY,EACnB,aAAa,EAAE,iBAAiB,EAChC,QAAQ,UACJ,IAAI,EACP,CACF,CAAC;IACH,CAAC;SAAM,CAAC;QACP,OAAO,CACN,KAAC,KAAK,kBACL,GAAG,EAAE,GAAU,EACf,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,YAAY,EACnB,aAAa,EAAE,iBAAiB,EAChC,IAAI,EAAE,IAAI,IACN,IAAI,EACP,CACF,CAAC;IACH,CAAC;AACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { LiveUpdateTextField } from './LiveUpdateTextField.js';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: ({ ref, value, onChange, debounceMs, onFocus, onBlur, textArea, type, ...rest }: import("./LiveUpdateTextField.js").LiveUpdateTextFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
argTypes: {};
|
|
7
|
+
parameters: {
|
|
8
|
+
controls: {
|
|
9
|
+
expanded: boolean;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export default meta;
|
|
14
|
+
type Story = StoryObj<typeof LiveUpdateTextField>;
|
|
15
|
+
export declare const Default: Story;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// @unocss-include
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { LiveUpdateTextField } from './LiveUpdateTextField.js';
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'Components/LiveUpdateTextField',
|
|
7
|
+
component: LiveUpdateTextField,
|
|
8
|
+
argTypes: {},
|
|
9
|
+
parameters: {
|
|
10
|
+
controls: { expanded: true },
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
export default meta;
|
|
14
|
+
export const Default = {
|
|
15
|
+
render(args) {
|
|
16
|
+
const [value, setValue] = useState('Initial value');
|
|
17
|
+
return _jsx(LiveUpdateTextField, Object.assign({}, args, { value: value, onChange: setValue }));
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=LiveUpdateTextField.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LiveUpdateTextField.stories.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/LiveUpdateTextField.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC0C,CAAC;AAE7C,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;QACpD,OAAO,KAAC,mBAAmB,oBAAK,IAAI,IAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAI,CAAC;IAC5E,CAAC;CACD,CAAC"}
|
|
@@ -13,8 +13,8 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import { Switch as BaseSwitch } from '@base-ui/react/switch';
|
|
15
15
|
import { withClassName } from '../../hooks/withClassName.js';
|
|
16
|
-
const SwitchRoot = withClassName(BaseSwitch.Root, 'layer-components:unset layer-components:appearance-none layer-components:flex layer-components:transition-all layer-components:cursor-pointer layer-components:w-42px layer-components:h-25px layer-components:p-
|
|
17
|
-
const SwitchThumb = withClassName(BaseSwitch.Thumb, 'layer-components:block layer-components:aspect-1 layer-components:h-full layer-components:bg-white layer-components:rounded-lg layer-components:border-default layer-components:transition-transform layer-components:will-change-transform', 'layer-components:data-[checked]:translate-x-1rem', 'layer-components:data-[checked]:before:content-["✓"] layer-components:data-[checked]:before:flex layer-components:data-[checked]:before:items-center layer-components:data-[checked]:before:justify-center layer-components:data-[checked]:before:absolute layer-components:data-[checked]:before:top-0 layer-components:data-[checked]:before:left-0 layer-components:data-[checked]:before:w-full layer-components:data-[checked]:before:h-full layer-components:data-[checked]:before:text-xs layer-components:data-[checked]:before:text-main-ink');
|
|
16
|
+
const SwitchRoot = withClassName(BaseSwitch.Root, 'layer-components:unset layer-components:appearance-none layer-components:flex layer-components:transition-all layer-components:cursor-pointer layer-components:w-42px layer-components:h-25px layer-components:p-3px layer-components:bg-gray-light layer-components:rounded-lg layer-components:relative layer-components:border-default layer-components:flex-shrink-0 layer-components:shadow-sm layer-components:shadow-inset', 'layer-components:data-[checked]:bg-main', 'layer-components:hover:[&:not(:disabled)]:bg-lighten-2 layer-components:hover:[&:not(:disabled)]:ring-2 layer-components:hover:[&:not(:disabled)]:ring-bg', 'layer-components:active:[&:not(:disabled)]:bg-darken-1 layer-components:active:[&:not(:disabled)]:ring-4', 'layer-components:focus:outline-none', 'layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-accent layer-components:focus-visible:outline-off');
|
|
17
|
+
const SwitchThumb = withClassName(BaseSwitch.Thumb, 'layer-components:block layer-components:aspect-1 layer-components:h-full layer-components:bg-white layer-components:rounded-lg layer-components:border-default layer-components:transition-transform layer-components:will-change-transform layer-components:shadow-sm', 'layer-components:data-[checked]:translate-x-1rem', 'layer-components:data-[checked]:before:content-["✓"] layer-components:data-[checked]:before:flex layer-components:data-[checked]:before:items-center layer-components:data-[checked]:before:justify-center layer-components:data-[checked]:before:absolute layer-components:data-[checked]:before:top-0 layer-components:data-[checked]:before:left-0 layer-components:data-[checked]:before:w-full layer-components:data-[checked]:before:h-full layer-components:data-[checked]:before:text-xs layer-components:data-[checked]:before:text-main-ink');
|
|
18
18
|
export const Switch = Object.assign(function Switch(_a) {
|
|
19
19
|
var { ref } = _a, props = __rest(_a, ["ref"]);
|
|
20
20
|
return (_jsx(SwitchRoot, Object.assign({}, props, { ref: ref, children: _jsx(SwitchThumb, {}) })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAmB,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,UAAU,GAAG,aAAa,CAC/B,UAAU,CAAC,IAAI,EACf,
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAmB,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,UAAU,GAAG,aAAa,CAC/B,UAAU,CAAC,IAAI,EACf,uLAAuL,EACvL,yCAAyC,EACzC,yEAAyE,EACzE,iEAAiE,EACjE,qCAAqC,EACrC,iEAAiE,CACjE,CAAC;AAEF,MAAM,WAAW,GAAG,aAAa,CAChC,UAAU,CAAC,KAAK,EAChB,kIAAkI,EAClI,oDAAoD,EACpD,mJAAmJ,CACnJ,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAClC,SAAS,MAAM,CAAC,EAKf;QALe,EACf,GAAG,OAIH,EAHG,KAAK,cAFO,OAGf,CADQ;IAIR,OAAO,CACN,KAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,YAC9B,KAAC,WAAW,KAAG,IACH,CACb,CAAC;AACH,CAAC,EACD;IACC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,WAAW;CAClB,CACD,CAAC"}
|
|
@@ -8,6 +8,6 @@ export interface TextAreaProps extends InputProps {
|
|
|
8
8
|
placeholdersIntervalMs?: number;
|
|
9
9
|
rows?: number;
|
|
10
10
|
}
|
|
11
|
-
export declare const TextArea: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels,
|
|
11
|
+
export declare const TextArea: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels, placeholder, placeholders, placeholdersIntervalMs, onValueChange, ...rest }: TextAreaProps & {
|
|
12
12
|
ref?: React.Ref<any>;
|
|
13
13
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -20,7 +20,7 @@ import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.j
|
|
|
20
20
|
import { inputClassName } from '../input/index.js';
|
|
21
21
|
export const TextArea = function TextArea(_a) {
|
|
22
22
|
var _b;
|
|
23
|
-
var { ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels = 0,
|
|
23
|
+
var { ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels = 0, placeholder, placeholders, placeholdersIntervalMs = 5000, onValueChange } = _a, rest = __rest(_a, ["ref", "autoSize", "autoSelect", "onFocus", "className", "rows", "padBottomPixels", "placeholder", "placeholders", "placeholdersIntervalMs", "onValueChange"]);
|
|
24
24
|
const innerRef = useRef(null);
|
|
25
25
|
const finalRef = useMergedRef(innerRef, ref);
|
|
26
26
|
const [innerValue, setInnerValue] = useState('');
|
|
@@ -43,7 +43,7 @@ export const TextArea = function TextArea(_a) {
|
|
|
43
43
|
if (onValueChange) {
|
|
44
44
|
onValueChange(value, eventDetails);
|
|
45
45
|
}
|
|
46
|
-
}, [
|
|
46
|
+
}, [onValueChange]);
|
|
47
47
|
const handleFocus = useCallback((e) => {
|
|
48
48
|
if (autoSelect) {
|
|
49
49
|
e.target.select();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,EAAE,KAAK,EAAc,MAAM,sBAAsB,CAAC;AACzD,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAenD,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,EAAE,KAAK,EAAc,MAAM,sBAAsB,CAAC;AACzD,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAenD,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,QAAQ,CAAC,EAezC;;QAfyC,EACzC,GAAG,EACH,QAAQ,EACR,UAAU,EACV,OAAO,EACP,SAAS,EACT,IAAI,EACJ,eAAe,GAAG,CAAC,EACnB,WAAW,EACX,YAAY,EACZ,sBAAsB,GAAG,IAAI,EAC7B,aAAa,OAIb,EAHG,IAAI,cAZkC,8JAazC,CADO;IAIP,MAAM,QAAQ,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,UAAU,CAAC;IAE5C,gFAAgF;IAChF,eAAe,CAAC,GAAG,EAAE;QACpB,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACjC,IAAI,OAAO,EAAE,CAAC;YACb,IAAI,OAAO,CAAC,KAAK,KAAK,EAAE,IAAI,eAAe,EAAE,CAAC;gBAC7C,OAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;gBAC/B,MAAM,UAAU,GAAG,OAAO,CAAC,YAAY,CAAC;gBACxC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC;YAC5D,CAAC;QACF,CAAC;IACF,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5C,MAAM,iBAAiB,GAAG,WAAW,CACpC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;QACvB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,aAAa,EAAE,CAAC;YACnB,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;QACpC,CAAC;IACF,CAAC,EACD,CAAC,aAAa,CAAC,CACf,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC9B,CAAC,CAAC,EAAE,EAAE;QACL,IAAI,UAAU,EAAE,CAAC;YAChB,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACnB,CAAC;QACD,IAAI,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,CAAC,CAAC,CAAC;QACZ,CAAC;IACF,CAAC,EACD,CAAC,UAAU,EAAE,OAAO,CAAC,CACrB,CAAC;IAEF,MAAM,iBAAiB,GAAG,wBAAwB,CACjD,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,EAClB,sBAAsB,CACtB,CAAC;IAEF,OAAO,CACN,KAAC,KAAK,kBACL,MAAM,EAAE,mBAAU,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAI,EAC/C,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,UAAU,CACpB,cAAc,EACd,oFAAoF,EACpF,uCAAuC,EACvC;YACC,oCAAoC,EAAE,CAAC,QAAQ;YAC/C,gCAAgC,EAAE,QAAQ;SAC1C,EACD,SAAS,CACT,EACD,aAAa,EAAE,iBAAiB,EAChC,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,iBAAiB,IACzC,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
|
|
|
2
2
|
import { TextArea } from './TextArea.js';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels,
|
|
5
|
+
component: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels, placeholder, placeholders, placeholdersIntervalMs, onValueChange, ...rest }: import("./TextArea.js").TextAreaProps & {
|
|
6
6
|
ref?: React.Ref<any>;
|
|
7
7
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
argTypes: {};
|
|
@@ -16,3 +16,5 @@ export default meta;
|
|
|
16
16
|
type Story = StoryObj<typeof TextArea>;
|
|
17
17
|
export declare const Default: Story;
|
|
18
18
|
export declare const Tall: Story;
|
|
19
|
+
export declare const Controlled: Story;
|
|
20
|
+
export declare const ControlledFromOnChange: Story;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useState } from 'react';
|
|
2
4
|
import { TextArea } from './TextArea.js';
|
|
3
5
|
const meta = {
|
|
4
6
|
title: 'Components/TextArea',
|
|
@@ -20,4 +22,18 @@ export const Tall = {
|
|
|
20
22
|
autoSize: true,
|
|
21
23
|
},
|
|
22
24
|
};
|
|
25
|
+
export const Controlled = {
|
|
26
|
+
render() {
|
|
27
|
+
const [value, setValue] = useState('Initial value');
|
|
28
|
+
return _jsx(TextArea, { value: value, onValueChange: setValue, autoSize: true });
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
export const ControlledFromOnChange = {
|
|
32
|
+
render() {
|
|
33
|
+
const [value, setValue] = useState('Initial value');
|
|
34
|
+
return (_jsx(TextArea, { value: value, onChange: (ev) => {
|
|
35
|
+
setValue(ev.target.value);
|
|
36
|
+
}, autoSize: true }));
|
|
37
|
+
},
|
|
38
|
+
};
|
|
23
39
|
//# sourceMappingURL=TextArea.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,IAAI;KACd;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IAC1B,IAAI,EAAE;QACL,KAAK,EACJ,mFAAmF;QACpF,QAAQ,EAAE,IAAI;KACd;CACD,CAAC"}
|
|
1
|
+
{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,IAAI;KACd;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IAC1B,IAAI,EAAE;QACL,KAAK,EACJ,mFAAmF;QACpF,QAAQ,EAAE,IAAI;KACd;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAChC,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;QACpD,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,SAAG,CAAC;IACrE,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAU;IAC5C,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;QACpD,OAAO,CACN,KAAC,QAAQ,IACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;gBAChB,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC,EACD,QAAQ,SACP,CACF,CAAC;IACH,CAAC;CACD,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { LiveUpdateTextField } from './LiveUpdateTextField.js';
|
|
4
|
+
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'Components/LiveUpdateTextField',
|
|
7
|
+
component: LiveUpdateTextField,
|
|
8
|
+
argTypes: {},
|
|
9
|
+
parameters: {
|
|
10
|
+
controls: { expanded: true },
|
|
11
|
+
},
|
|
12
|
+
} satisfies Meta<typeof LiveUpdateTextField>;
|
|
13
|
+
|
|
14
|
+
export default meta;
|
|
15
|
+
|
|
16
|
+
type Story = StoryObj<typeof LiveUpdateTextField>;
|
|
17
|
+
|
|
18
|
+
export const Default: Story = {
|
|
19
|
+
render(args) {
|
|
20
|
+
const [value, setValue] = useState('Initial value');
|
|
21
|
+
return <LiveUpdateTextField {...args} value={value} onChange={setValue} />;
|
|
22
|
+
},
|
|
23
|
+
};
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
import { debounce } from '@a-type/utils';
|
|
4
4
|
import {
|
|
5
|
-
ChangeEvent,
|
|
6
5
|
FocusEvent,
|
|
7
6
|
KeyboardEventHandler,
|
|
8
7
|
MouseEventHandler,
|
|
@@ -97,10 +96,10 @@ export const LiveUpdateTextField = function LiveUpdateTextField({
|
|
|
97
96
|
);
|
|
98
97
|
|
|
99
98
|
// update local state instantly and parent eventually
|
|
100
|
-
const
|
|
101
|
-
(
|
|
102
|
-
setDisplayValue(
|
|
103
|
-
debouncedOnChange(
|
|
99
|
+
const handleValueChange = useCallback(
|
|
100
|
+
(value: string) => {
|
|
101
|
+
setDisplayValue(value);
|
|
102
|
+
debouncedOnChange(value);
|
|
104
103
|
didChange.current = true;
|
|
105
104
|
},
|
|
106
105
|
[debouncedOnChange],
|
|
@@ -113,7 +112,7 @@ export const LiveUpdateTextField = function LiveUpdateTextField({
|
|
|
113
112
|
onFocus={handleFocus}
|
|
114
113
|
onBlur={handleBlur}
|
|
115
114
|
value={displayValue}
|
|
116
|
-
|
|
115
|
+
onValueChange={handleValueChange}
|
|
117
116
|
autoSize
|
|
118
117
|
{...rest}
|
|
119
118
|
/>
|
|
@@ -125,7 +124,7 @@ export const LiveUpdateTextField = function LiveUpdateTextField({
|
|
|
125
124
|
onFocus={handleFocus}
|
|
126
125
|
onBlur={handleBlur}
|
|
127
126
|
value={displayValue}
|
|
128
|
-
|
|
127
|
+
onValueChange={handleValueChange}
|
|
129
128
|
type={type}
|
|
130
129
|
{...rest}
|
|
131
130
|
/>
|
|
@@ -3,7 +3,7 @@ import { withClassName } from '../../hooks/withClassName.js';
|
|
|
3
3
|
|
|
4
4
|
const SwitchRoot = withClassName(
|
|
5
5
|
BaseSwitch.Root,
|
|
6
|
-
'layer-components:(unset appearance-none flex transition-all cursor-pointer w-42px h-25px p-
|
|
6
|
+
'layer-components:(unset appearance-none flex transition-all cursor-pointer w-42px h-25px p-3px bg-gray-light rounded-lg relative border-default flex-shrink-0 shadow-sm shadow-inset)',
|
|
7
7
|
'layer-components:data-[checked]:bg-main',
|
|
8
8
|
'layer-components:hover:[&:not(:disabled)]:(bg-lighten-2 ring-2 ring-bg)',
|
|
9
9
|
'layer-components:active:[&:not(:disabled)]:(bg-darken-1 ring-4)',
|
|
@@ -13,7 +13,7 @@ const SwitchRoot = withClassName(
|
|
|
13
13
|
|
|
14
14
|
const SwitchThumb = withClassName(
|
|
15
15
|
BaseSwitch.Thumb,
|
|
16
|
-
'layer-components:(block aspect-1 h-full bg-white rounded-lg border-default transition-transform will-change-transform)',
|
|
16
|
+
'layer-components:(block aspect-1 h-full bg-white rounded-lg border-default transition-transform will-change-transform shadow-sm)',
|
|
17
17
|
'layer-components:data-[checked]:(translate-x-1rem)',
|
|
18
18
|
'layer-components:data-[checked]:before:(content-["✓"] flex items-center justify-center absolute top-0 left-0 w-full h-full text-xs text-main-ink)',
|
|
19
19
|
);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { TextArea } from './TextArea.js';
|
|
3
4
|
|
|
4
5
|
const meta = {
|
|
@@ -27,3 +28,25 @@ export const Tall: Story = {
|
|
|
27
28
|
autoSize: true,
|
|
28
29
|
},
|
|
29
30
|
};
|
|
31
|
+
|
|
32
|
+
export const Controlled: Story = {
|
|
33
|
+
render() {
|
|
34
|
+
const [value, setValue] = useState('Initial value');
|
|
35
|
+
return <TextArea value={value} onValueChange={setValue} autoSize />;
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export const ControlledFromOnChange: Story = {
|
|
40
|
+
render() {
|
|
41
|
+
const [value, setValue] = useState('Initial value');
|
|
42
|
+
return (
|
|
43
|
+
<TextArea
|
|
44
|
+
value={value}
|
|
45
|
+
onChange={(ev) => {
|
|
46
|
+
setValue(ev.target.value);
|
|
47
|
+
}}
|
|
48
|
+
autoSize
|
|
49
|
+
/>
|
|
50
|
+
);
|
|
51
|
+
},
|
|
52
|
+
};
|
|
@@ -28,7 +28,6 @@ export const TextArea = function TextArea({
|
|
|
28
28
|
className,
|
|
29
29
|
rows,
|
|
30
30
|
padBottomPixels = 0,
|
|
31
|
-
onChange,
|
|
32
31
|
placeholder,
|
|
33
32
|
placeholders,
|
|
34
33
|
placeholdersIntervalMs = 5000,
|
|
@@ -63,7 +62,7 @@ export const TextArea = function TextArea({
|
|
|
63
62
|
onValueChange(value, eventDetails);
|
|
64
63
|
}
|
|
65
64
|
},
|
|
66
|
-
[
|
|
65
|
+
[onValueChange],
|
|
67
66
|
);
|
|
68
67
|
|
|
69
68
|
const handleFocus = useCallback<Exclude<InputProps['onFocus'], undefined>>(
|