@a-type/ui 3.0.31 → 3.0.32
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/forms/EmojiField.js +5 -1
- package/dist/cjs/components/forms/EmojiField.js.map +1 -1
- package/dist/cjs/uno/preflights/fonts.d.ts +2 -2
- package/dist/cjs/uno/preflights/fonts.js +1 -3
- package/dist/cjs/uno/preflights/fonts.js.map +1 -1
- package/dist/css/main.css +1 -1
- package/dist/esm/components/forms/EmojiField.js +5 -1
- package/dist/esm/components/forms/EmojiField.js.map +1 -1
- package/dist/esm/uno/preflights/fonts.d.ts +2 -2
- package/dist/esm/uno/preflights/fonts.js +1 -3
- package/dist/esm/uno/preflights/fonts.js.map +1 -1
- package/package.json +1 -1
- package/src/components/forms/EmojiField.tsx +5 -1
- package/src/uno/preflights/fonts.ts +4 -7
|
@@ -19,6 +19,7 @@ exports.EmojiField = EmojiField;
|
|
|
19
19
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
20
20
|
const clsx_1 = __importDefault(require("clsx"));
|
|
21
21
|
const formik_1 = require("formik");
|
|
22
|
+
const react_1 = require("react");
|
|
22
23
|
const useIdOrGenerated_js_1 = require("../../hooks/useIdOrGenerated.js");
|
|
23
24
|
const Box_js_1 = require("../box/Box.js");
|
|
24
25
|
const Button_js_1 = require("../button/Button.js");
|
|
@@ -30,12 +31,15 @@ function EmojiField(_a) {
|
|
|
30
31
|
var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
|
|
31
32
|
const [props, _, tools] = (0, formik_1.useField)({ name });
|
|
32
33
|
const id = (0, useIdOrGenerated_js_1.useIdOrGenerated)(providedId);
|
|
33
|
-
|
|
34
|
+
const [open, setOpen] = (0, react_1.useState)(false);
|
|
35
|
+
return ((0, jsx_runtime_1.jsxs)(Box_js_1.Box, { gap: "sm", className: className, children: [(0, jsx_runtime_1.jsxs)(Popover_js_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(Popover_js_1.Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({ id: id, "aria-label": "Select emoji", size: "small", className: (0, clsx_1.default)('p-0 transition-color', className) }, rest, { children: (0, jsx_runtime_1.jsx)(Button_js_1.Button.Icon, { className: "text-[19px] w-touch h-touch flex items-center justify-center", children: props.value || (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "smile" }) }) })) }), (0, jsx_runtime_1.jsx)(Popover_js_1.Popover.Content, { children: (0, jsx_runtime_1.jsx)(EmojiPicker_js_1.EmojiPicker, { onValueChange: (v) => {
|
|
34
36
|
tools.setValue(v);
|
|
37
|
+
setOpen(false);
|
|
35
38
|
}, onClear: required
|
|
36
39
|
? undefined
|
|
37
40
|
: () => {
|
|
38
41
|
tools.setValue('');
|
|
42
|
+
setOpen(false);
|
|
39
43
|
}, id: id }) })] }), label && ((0, jsx_runtime_1.jsx)(FieldLabel_js_1.HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
|
|
40
44
|
}
|
|
41
45
|
//# sourceMappingURL=EmojiField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiBA,gCAkDC;;AAnED,gDAAwB;AACxB,mCAAkC;AAClC,iCAAiC;AACjC,yEAAmE;AACnE,0CAAoC;AACpC,mDAA0D;AAC1D,kEAA4D;AAC5D,6CAAuC;AACvC,sDAAgD;AAChD,mDAAuD;AAQvD,SAAgB,UAAU,CAAC,EAOT;QAPS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEG,EADd,IAAI,cANmB,gDAO1B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,IAAA,iBAAQ,EAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,IAAA,sCAAgB,EAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACN,wBAAC,YAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,wBAAC,oBAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACzC,uBAAC,oBAAO,CAAC,OAAO,IAAC,OAAO,kBACvB,uBAAC,kBAAM,kBACN,EAAE,EAAE,EAAE,gBACK,cAAc,EACzB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAsB,EAAE,SAAS,CAAC,IAC9C,IAAI,cAER,uBAAC,kBAAM,CAAC,IAAI,IAAC,SAAS,EAAC,8DAA8D,YACnF,KAAK,CAAC,KAAK,IAAI,uBAAC,cAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACxB,IACN,GACQ,EAClB,uBAAC,oBAAO,CAAC,OAAO,cACf,uBAAC,4BAAW,IACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;gCACpB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,OAAO,CAAC,KAAK,CAAC,CAAC;4BAChB,CAAC,EACD,OAAO,EACN,QAAQ;gCACP,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,GAAG,EAAE;oCACL,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACnB,OAAO,CAAC,KAAK,CAAC,CAAC;gCACf,CAAC,EAEL,EAAE,EAAE,EAAE,GACL,GACe,IACT,EACT,KAAK,IAAI,CACT,uBAAC,oCAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export interface FontsPreflightOptions {
|
|
2
|
-
interFontLocation
|
|
2
|
+
interFontLocation?: string;
|
|
3
3
|
}
|
|
4
|
-
export declare const fontsPreflight: ({ interFontLocation }?: FontsPreflightOptions) => import("unocss/index.js").Preflight<object>;
|
|
4
|
+
export declare const fontsPreflight: ({ interFontLocation, }?: FontsPreflightOptions) => import("unocss/index.js").Preflight<object>;
|
|
@@ -3,9 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.fontsPreflight = void 0;
|
|
5
5
|
const _util_js_1 = require("./_util.js");
|
|
6
|
-
const fontsPreflight = ({ interFontLocation } = {
|
|
7
|
-
interFontLocation: 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf',
|
|
8
|
-
}) => (0, _util_js_1.preflight)({
|
|
6
|
+
const fontsPreflight = ({ interFontLocation = 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf', } = {}) => (0, _util_js_1.preflight)({
|
|
9
7
|
getCSS: () => `
|
|
10
8
|
@font-face {
|
|
11
9
|
font-family: "Inter";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../../../../src/uno/preflights/fonts.ts"],"names":[],"mappings":";;;AAAA,yCAAuC;AAMhC,MAAM,cAAc,GAAG,
|
|
1
|
+
{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../../../../src/uno/preflights/fonts.ts"],"names":[],"mappings":";;;AAAA,yCAAuC;AAMhC,MAAM,cAAc,GAAG,CAAC,EAC9B,iBAAiB,GAAG,wEAAwE,MAClE,EAAE,EAAE,EAAE,CAChC,IAAA,oBAAS,EAAC;IACT,MAAM,EAAE,GAAG,EAAE,CAAC;;;eAGD,iBAAiB;;;;;EAK9B;CACA,CAAC,CAAC;AAbS,QAAA,cAAc,kBAavB"}
|
package/dist/css/main.css
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
:root { --p-lemon-hue: 90.8; --p-leek-hue: 165.88; --p-tomato-hue: 10.51; --p-blueberry-hue: 248.14; --p-eggplant-hue: 280.21; --p-attention-hue: 30; --p-success-hue: 140; } .theme-lemon, .theme-override-lemon.theme-override-lemon { --p-primary-hue: var(--p-lemon-hue); --p-accent-hue: var(--p-leek-hue); --l-main-hue: var(--p-primary-hue); --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)))); color: var(--v-color); --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)))); background-color: var(--v-bg); } .theme-leek, .theme-override-leek.theme-override-leek { --p-primary-hue: var(--p-leek-hue); --p-accent-hue: var(--p-lemon-hue); --l-main-hue: var(--p-primary-hue); --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)))); color: var(--v-color); --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)))); background-color: var(--v-bg); } .theme-tomato, .theme-override-tomato.theme-override-tomato { --p-primary-hue: var(--p-tomato-hue); --p-accent-hue: var(--p-leek-hue); --l-main-hue: var(--p-primary-hue); --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)))); color: var(--v-color); --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)))); background-color: var(--v-bg); } .theme-blueberry, .theme-override-blueberry.theme-override-blueberry { --p-primary-hue: var(--p-blueberry-hue); --p-accent-hue: var(--p-leek-hue); --l-main-hue: var(--p-primary-hue); --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)))); color: var(--v-color); --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)))); background-color: var(--v-bg); } .theme-eggplant, .theme-override-eggplant.theme-override-eggplant { --p-primary-hue: var(--p-eggplant-hue); --p-accent-hue: var(--p-leek-hue); --l-main-hue: var(--p-primary-hue); --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)))); color: var(--v-color); --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)))); background-color: var(--v-bg); } .theme-gray, .theme-salt, .theme-override-gray.theme-override-gray { --l-saturation: 0.15; --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)))); color: var(--v-color); --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)))); background-color: var(--v-bg); } .theme-high-contrast, .theme-override-high-contrast.theme-override-high-contrast { --l-saturation: 0.04; --l-lightness-spread: 10; --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)))); color: var(--v-color); --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)))); background-color: var(--v-bg); } .palette-primary { --l-main-hue: var(--p-primary-hue); --l-saturation: 1; } .palette-accent { --l-main-hue: var(--p-accent-hue); --l-saturation: 1; } .palette-attention { --l-main-hue: var(--p-attention-hue); --l-saturation: 1; } .palette-success { --l-main-hue: var(--p-success-hue); --l-saturation: 1; } .palette-lemon { --l-main-hue: var(--p-lemon-hue); --l-saturation: 1; } .palette-leek { --l-main-hue: var(--p-leek-hue); --l-saturation: 1; } .palette-tomato { --l-main-hue: var(--p-tomato-hue); --l-saturation: 1; } .palette-blueberry { --l-main-hue: var(--p-blueberry-hue); --l-saturation: 1; } .palette-eggplant { --l-main-hue: var(--p-eggplant-hue); --l-saturation: 1; } .palette-gray { --l-saturation: 0.15; } .palette-high-contrast { --l-saturation: 0.04; --l-lightness-spread: 10; } body { --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)))); color: var(--v-color); --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)))); background-color: var(--v-bg); --l-main-hue: var(--p-primary-hue); } @property --v-bg-altered { syntax: "*"; inherits: false; } @property --v-color-altered { syntax: "*"; inherits: false; } @property --v-border-altered { syntax: "*"; inherits: false; } @property --v-ring-altered { syntax: "*"; inherits: false; } @property --v-bg-opacity { syntax: "<percentage>"; inherits: false; } @property --v-color-opacity { syntax: "<percentage>"; inherits: false; } @property --v-border-opacity { syntax: "<percentage>"; inherits: false; } @property --v-ring-opacity { syntax: "<percentage>"; inherits: false; }
|
|
5
5
|
@layer preflightBase { html { --mode-mult: 1; --mode-l-neutral: 90%; --mode-l-range-up: 10%; --mode-l-range-down: 70%; --mode-s-neutral: 75%; --mode-s-range-up: -55%; --mode-s-range-down: 20%; --mode-white: #ffffff; --mode-black: #000000; } @media (prefers-color-scheme: dark) { html { --mode-mult: -1; --mode-l-neutral: 60%; --mode-l-range-up: 38%; --mode-l-range-down: 70%; --mode-s-neutral: 80%; --mode-s-range-up: 40%; --mode-s-range-down: -30%; --mode-white: #000000; --mode-black: #ffffff; } } } @layer preflightVariants { .override-light { --mode-mult: 1; --mode-l-neutral: 90%; --mode-l-range-up: 10%; --mode-l-range-down: 70%; --mode-s-neutral: 75%; --mode-s-range-up: -55%; --mode-s-range-down: 20%; --mode-white: #ffffff; --mode-black: #000000; } .override-dark { --mode-mult: -1; --mode-l-neutral: 60%; --mode-l-range-up: 38%; --mode-l-range-down: 70%; --mode-s-neutral: 80%; --mode-s-range-up: 40%; --mode-s-range-down: -30%; --mode-white: #000000; --mode-black: #ffffff; } }
|
|
6
6
|
@layer preflightBase { :root { --global-saturation: 0.5; --global-corner-scale: 1; --global-spacing-scale: 1; --global-border-scale: 1; --global-shadow-spread: 1; --p-primary-hue: 90.8; --p-accent-hue: 165.88; } } @property --local-corner-scale { syntax: "*"; inherits: false; }
|
|
7
|
-
@font-face { font-family: "Inter"; src: url("
|
|
7
|
+
@font-face { font-family: "Inter"; src: url("https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype-variations"); font-weight: 1 999; font-style: oblique 0deg 5deg; font-display: block; }
|
|
8
8
|
.outline-off{outline:none;}.unset{all:unset;}.container{width:100%;}.hidden-input{pointer-events:none;position:absolute;z-index:-1;opacity:0;}.bottom-keyboard{bottom:var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px));}.center{left:50%;top:50%;--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));--un-translate-y:-50%;}.center-x{left:50%;--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));}.center-y{top: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));}.hidden-input::webkit-file-upload-button{display:none;}.body{min-height:100vh;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%;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%;}.flex-0-0-auto{flex-shrink:0;flex-grow:0;flex-basis:auto;}.flex-1-0-0{flex-shrink:0;flex-grow:1;flex-basis:0;}.border{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;}.border-default{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;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-light{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;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%;--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);}@layer components{.layer-components\:\[\&\[data-focus\=true\]\]\:outline-off[data-focus=true]{outline:none;}.layer-components\:unset{all:unset;}.layer-components\:focus\:outline-off:focus{outline:none;}.layer-components\:focus-visible\:outline-off:focus-visible{outline:none;}.col{display:flex;flex-direction:column;align-items:center;gap:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.row{display:flex;flex-direction:row;align-items:center;gap:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:border{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;}.layer-components\:\[\&\[data-state\=on\]\]\:border-default[data-state=on],.layer-components\:border-default{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;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%;}.layer-components\:border-light{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;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%;--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);}.layer-components\:\[\&\[data-state\=on\]\]\:hover\:border-default:hover[data-state=on]{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;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%;}.layer-components\:focus-visible\:border:focus-visible{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;}}@layer composed{.layer-composed\:border{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;}.layer-composed\:border-light{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;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%;--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);}}@media (min-width: 640px){.container{max-width:640px;}}@media (min-width: 768px){.container{max-width:768px;}}@media (min-width: 1024px){.container{max-width:1024px;}}@media (min-width: 1280px){.container{max-width:1280px;}}@media (min-width: 1536px){.container{max-width:1536px;}}.\!\[background-attachment\:local\,local\,scroll\,scroll\]{background-attachment:local,local,scroll,scroll !important;}.\!\[background-repeat\:no-repeat\]{background-repeat:no-repeat !important;}.\!\[background-size\:100\%_40px\,100\%_40px\,100\%_14px\,100\%_14px\]{background-size:100% 40px,100% 40px,100% 14px,100% 14px !important;}.\[--l-saturation\:0\]{--l-saturation:0;}.\[\&\[data-different-month\]\]\:\[visibility\:hidden\][data-different-month]{visibility:hidden;}.\[all\:unset\]{all:unset;}.\[background-size\:400\%_400\%\]{background-size:400% 400%;}.\[background\:linear-gradient\(var\(--v-bg\)_30\%\,rgba\(255\,255\,255\,0\)\)_center_top\,linear-gradient\(rgba\(255\,255\,255\,0\)\,var\(--v-bg\)_70\%\)_center_bottom\,radial-gradient\(farthest-side_at_50\%_0\,oklch\(from_var\(--v-bg\)_calc\(l\*0\.9\)_c_h\)\,rgba\(0\,0\,0\,0\)\)_center_top\,radial-gradient\(farthest-side_at_50\%_100\%\,oklch\(from_var\(--v-bg\)_calc\(l\*0\.9\)_c_h\)\,rgba\(0\,0\,0\,0\)\)_center_bottom\]{background:linear-gradient(var(--v-bg) 30%,rgba(255,255,255,0)) center top,linear-gradient(rgba(255,255,255,0),var(--v-bg) 70%) center bottom,radial-gradient(farthest-side at 50% 0,oklch(from var(--v-bg) calc(l*0.9) c h),rgba(0,0,0,0)) center top,radial-gradient(farthest-side at 50% 100%,oklch(from var(--v-bg) calc(l*0.9) c h),rgba(0,0,0,0)) center bottom;}.\[grid-area\:content\]{grid-area:content;}.\[grid-area\:leftGrid\]{grid-area:leftGrid;}.\[grid-area\:leftMonth\]{grid-area:leftMonth;}.\[grid-area\:nextMonth\]{grid-area:nextMonth;}.\[grid-area\:prevMonth\]{grid-area:prevMonth;}.\[grid-area\:rightGrid\]{grid-area:rightGrid;}.\[grid-area\:rightMonth\]{grid-area:rightMonth;}.\[grid-auto-rows\:var\(--day-size\,32px\)\]{grid-auto-rows:var(--day-size,32px);}.\[grid-template-areas\:\"prevMonth_leftMonth_nextMonth\"\"leftGrid_leftGrid_leftGrid\"\]{grid-template-areas:"prevMonth leftMonth nextMonth""leftGrid leftGrid leftGrid";}.\[grid-template-columns\:auto_1fr_auto\]{grid-template-columns:auto 1fr auto;}.\[grid-template-rows\:auto_1fr\]{grid-template-rows:auto 1fr;}.\[outline\:none\]{outline:none;}.\[stroke-dasharray\:80_200\]{stroke-dasharray:80 200;}.\[stroke-dashoffset\:0\]{stroke-dashoffset:0;}.contain-strict{contain:strict;}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}.pointer-events-auto{pointer-events:auto;}.\!pointer-events-none{pointer-events:none !important;}.pointer-events-none{pointer-events:none;}.after\:pointer-events-none::after{pointer-events:none;}.\!visible{visibility:visible !important;}.visible{visibility:visible;}.\[\&\[data-state\=active\]\]\:relative[data-state=active],.relative{position:relative;}.absolute{position:absolute;}.fixed{position:fixed;}.sticky{position:sticky;}.\[\&\[data-today\]\]\:before\:absolute[data-today]::before{position:absolute;}.before\:absolute::before{position:absolute;}.after\:absolute::after{position:absolute;}.static{position:static;}.inset-0{inset:0;}.after\:inset-0::after{inset:0;}.bottom-\[anchor\(bottom\)\]{bottom:anchor(bottom);}.bottom-\[var\(--mock-virtual-keyboard-height\,env\(keyboard-inset-height\,0px\)\)\]{bottom:var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px));}.bottom-0,.bottom-0px{bottom:0;}.bottom-2{bottom:0.5rem;}.bottom-3{bottom:0.75rem;}.left-\[anchor\(right\)\]{left:anchor(right);}.left-0{left:0;}.left-1\/2{left:50%;}.left-2{left:0.5rem;}.right-\[anchor\(right\)\]{right:anchor(right);}.right-0{right:0;}.right-1{right:0.25rem;}.right-2{right:0.5rem;}.right-md{right:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.top-\[anchor\(bottom\)\]{top:anchor(bottom);}.top-0{top:0;}.top-1\/2,.top-50\%{top:50%;}.top-1px{top:1px;}.top-2{top:0.5rem;}.top-auto{top:auto;}.top-md{top:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.top-sm{top:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.\[\&\[data-today\]\]\:before\:left-\[1px\][data-today]::before{left:1px;}.\[\&\[data-today\]\]\:before\:top-\[1px\][data-today]::before{top:1px;}.before\:left-1\/2::before{left:50%;}.before\:top-1\/2::before{top:50%;}.after\:bottom-0::after{bottom:0;}.after\:right-0::after{right:0;}.after\:top-0::after{top:0;}.after\:top-auto::after{top:auto;}.\[\&\[data-highlighted\]\]\:z-1[data-highlighted],.\[\&\[data-in-range\]\]\:z-1[data-in-range],.\[\&\[data-range-end\]\]\:z-1[data-range-end],.\[\&\[data-range-start\]\]\:z-1[data-range-start],.\[\&\[data-state\=active\]\]\:z-1[data-state=active],.z-1{z-index:1;}.\[\&\[data-selected\]\]\:z-2[data-selected]{z-index:2;}.z--1{z-index:-1;}.z-\[100000\]{z-index:100000;}.z-\[calc\(var\(--z-dialog\)\+1\)\]{z-index:calc(var(--z-dialog) + 1);}.z-1000{z-index:1000;}.z-10000{z-index:10000;}.z-10001{z-index:10001;}.hover\:z-1:hover{z-index:1;}.after\:z-1::after{z-index:1;}.grid{display:grid;}.grid-col-span-2{grid-column:span 2/span 2;}.grid-cols-\[repeat\(7\,var\(--day-size\,32px\)\)\]{grid-template-columns:repeat(7,var(--day-size,32px));}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}.m-0{margin:0;}.m-1{margin:0.25rem;}.m-2{margin:0.5rem;}.m-auto{margin:auto;}.m\[k\]{margin:k;}.m5\.87{margin:1.4675rem;}.my-4{margin-top:1rem;margin-bottom:1rem;}.my-auto{margin-top:auto;margin-bottom:auto;}.mb--1px{margin-bottom:-1px;}.mb-1{margin-bottom:0.25rem;}.mb-sm{margin-bottom:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.me{margin-inline-end:1rem;}.ml--1{margin-left:-0.25rem;}.ml-auto{margin-left:auto;}.ml-md{margin-left:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.ml-sm{margin-left:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.mr--1px{margin-right:-1px;}.mr-1{margin-right:0.25rem;}.mr-auto{margin-right:auto;}.mt-2px{margin-top:2px;}.mt-auto{margin-top:auto;}.block{display:block;}.inline-block{display:inline-block;}.\!hidden{display:none !important;}.\[\&\:\:webkit-file-upload-button\]\:hidden::webkit-file-upload-button,.hidden,[data-has-icon=true] .\[\[data-has-icon\=true\]_\&\]\:hidden{display:none;}.aspect-\[9\/16\]{aspect-ratio:9/16;}.\[\&\[data-state\=closed\]\]\:max-h-\[var\(--peek-height\,120px\)\][data-state=closed]{max-height:var(--peek-height,120px);}.h-\[100vh\]{height:100vh;}.h-\[12px\]{height:12px;}.h-\[var\(--mock-virtual-keyboard-height\,0\)\]{height:var(--mock-virtual-keyboard-height,0);}.h-10{height:2.5rem;}.h-100px{height:100px;}.h-16{height:4rem;}.h-16px{height:16px;}.h-1em{height:1em;}.h-1px{height:1px;}.h-200px{height:200px;}.h-240px{height:240px;}.h-24px{height:24px;}.h-25px{height:25px;}.h-32{height:8rem;}.h-4,.h4{height:1rem;}.h-600px{height:600px;}.h-64{height:16rem;}.h-80px{height:80px;}.h-full{height:100%;}.h-touch{height:30px;}.h1{height:0.25rem;}.h2{height:0.5rem;}.h3{height:0.75rem;}.h5{height:1.25rem;}.max-h-200px{max-height:200px;}.max-h-20vh{max-height:20vh;}.max-h-full{max-height:100%;}.max-w-300px{max-width:300px;}.max-w-400px{max-width:400px;}.max-w-full{max-width:100%;}.min-h-0{min-height:0;}.min-h-18px{min-height:18px;}.min-h-20vh{min-height:20vh;}.min-h-32px{min-height:32px;}.min-h-80px{min-height:80px;}.min-h-screen{min-height:100vh;}.min-w-0{min-width:0;}.min-w-32px{min-width:32px;}.min-w-80px{min-width:80px;}.w-\[12px\]{width:12px;}.w-0{width:0;}.w-16{width:4rem;}.w-16px{width:16px;}.w-1em{width:1em;}.w-24px{width:24px;}.w-300px{width:300px;}.w-4{width:1rem;}.w-400px{width:400px;}.w-64{width:16rem;}.w-80px{width:80px;}.w-full{width:100%;}.w-max-content{width:max-content;}.w-touch{width:30px;}.\[\&\[data-today\]\]\:before\:h-\[6px\][data-today]::before{height:6px;}.\[\&\[data-today\]\]\:before\:w-\[6px\][data-today]::before{width:6px;}.before\:min-h-44px::before{min-height:44px;}.before\:min-w-44px::before{min-width:44px;}.before\:w-full::before{width:100%;}.after\:h-80px::after{height:80px;}.after\:w-50px::after{width:50px;}.\[\&\[data-state\=delayed-open\]\]\:flex[data-state=delayed-open],.\[\&\[data-state\=instant-open\]\]\:flex[data-state=instant-open],.flex{display:flex;}.after\:flex::after{display:flex;}.inline-flex{display:inline-flex;}.flex-1{flex:1 1 0%;}.flex-shrink-0,.shrink-0{flex-shrink:0;}.flex-grow-0{flex-grow:0;}.flex-grow-1,.grow{flex-grow:1;}.flex-basis-0{flex-basis:0;}.flex-basis-auto{flex-basis:auto;}.flex-row{flex-direction:row;}.flex-col{flex-direction:column;}.after\:flex-col::after{flex-direction:column;}.flex-wrap{flex-wrap:wrap;}.table{display:table;}.transform-origin-\[50\%_50\%\]{transform-origin:50% 50%;}.-translate-x-1\/2,.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));}.translate-y--1\/2,.translate-y-\[-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));}.before\:-translate-x-1\/2::before{--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));}.before\:-translate-y-1\/2::before{--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));}.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));}.rotate-90{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:90deg;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));}.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));}.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));}@keyframes peek-close{
|
|
9
9
|
from { height: calc(var(--collapsible-height) + 80px); max-height: none; }
|
|
10
10
|
to { height: min(var(--peek-height, 120px), var(--collapsible-height)); max-height: var(--peek-height, 120px); }
|
|
@@ -13,6 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
14
|
import clsx from 'clsx';
|
|
15
15
|
import { useField } from 'formik';
|
|
16
|
+
import { useState } from 'react';
|
|
16
17
|
import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
|
|
17
18
|
import { Box } from '../box/Box.js';
|
|
18
19
|
import { Button } from '../button/Button.js';
|
|
@@ -24,12 +25,15 @@ export function EmojiField(_a) {
|
|
|
24
25
|
var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
|
|
25
26
|
const [props, _, tools] = useField({ name });
|
|
26
27
|
const id = useIdOrGenerated(providedId);
|
|
27
|
-
|
|
28
|
+
const [open, setOpen] = useState(false);
|
|
29
|
+
return (_jsxs(Box, { gap: "sm", className: className, children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, Object.assign({ id: id, "aria-label": "Select emoji", size: "small", className: clsx('p-0 transition-color', className) }, rest, { children: _jsx(Button.Icon, { className: "text-[19px] w-touch h-touch flex items-center justify-center", children: props.value || _jsx(Icon, { name: "smile" }) }) })) }), _jsx(Popover.Content, { children: _jsx(EmojiPicker, { onValueChange: (v) => {
|
|
28
30
|
tools.setValue(v);
|
|
31
|
+
setOpen(false);
|
|
29
32
|
}, onClear: required
|
|
30
33
|
? undefined
|
|
31
34
|
: () => {
|
|
32
35
|
tools.setValue('');
|
|
36
|
+
setOpen(false);
|
|
33
37
|
}, id: id }) })] }), label && (_jsx(HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
|
|
34
38
|
}
|
|
35
39
|
//# sourceMappingURL=EmojiField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAQvD,MAAM,UAAU,UAAU,CAAC,EAOT;QAPS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEG,EADd,IAAI,cANmB,gDAO1B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,MAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAQvD,MAAM,UAAU,UAAU,CAAC,EAOT;QAPS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEG,EADd,IAAI,cANmB,gDAO1B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACzC,KAAC,OAAO,CAAC,OAAO,IAAC,OAAO,kBACvB,KAAC,MAAM,kBACN,EAAE,EAAE,EAAE,gBACK,cAAc,EACzB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAC9C,IAAI,cAER,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAC,8DAA8D,YACnF,KAAK,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACxB,IACN,GACQ,EAClB,KAAC,OAAO,CAAC,OAAO,cACf,KAAC,WAAW,IACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;gCACpB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,OAAO,CAAC,KAAK,CAAC,CAAC;4BAChB,CAAC,EACD,OAAO,EACN,QAAQ;gCACP,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,GAAG,EAAE;oCACL,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACnB,OAAO,CAAC,KAAK,CAAC,CAAC;gCACf,CAAC,EAEL,EAAE,EAAE,EAAE,GACL,GACe,IACT,EACT,KAAK,IAAI,CACT,KAAC,oBAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export interface FontsPreflightOptions {
|
|
2
|
-
interFontLocation
|
|
2
|
+
interFontLocation?: string;
|
|
3
3
|
}
|
|
4
|
-
export declare const fontsPreflight: ({ interFontLocation }?: FontsPreflightOptions) => import("unocss").Preflight<object>;
|
|
4
|
+
export declare const fontsPreflight: ({ interFontLocation, }?: FontsPreflightOptions) => import("unocss").Preflight<object>;
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
import { preflight } from './_util.js';
|
|
3
|
-
export const fontsPreflight = ({ interFontLocation } = {
|
|
4
|
-
interFontLocation: 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf',
|
|
5
|
-
}) => preflight({
|
|
3
|
+
export const fontsPreflight = ({ interFontLocation = 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf', } = {}) => preflight({
|
|
6
4
|
getCSS: () => `
|
|
7
5
|
@font-face {
|
|
8
6
|
font-family: "Inter";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../../../../src/uno/preflights/fonts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAMvC,MAAM,CAAC,MAAM,cAAc,GAAG,
|
|
1
|
+
{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../../../../src/uno/preflights/fonts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAMvC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC9B,iBAAiB,GAAG,wEAAwE,MAClE,EAAE,EAAE,EAAE,CAChC,SAAS,CAAC;IACT,MAAM,EAAE,GAAG,EAAE,CAAC;;;eAGD,iBAAiB;;;;;EAK9B;CACA,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
2
|
import { useField } from 'formik';
|
|
3
|
+
import { useState } from 'react';
|
|
3
4
|
import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
|
|
4
5
|
import { Box } from '../box/Box.js';
|
|
5
6
|
import { Button, ButtonProps } from '../button/Button.js';
|
|
@@ -24,9 +25,10 @@ export function EmojiField({
|
|
|
24
25
|
}: EmojiFieldProps) {
|
|
25
26
|
const [props, _, tools] = useField({ name });
|
|
26
27
|
const id = useIdOrGenerated(providedId);
|
|
28
|
+
const [open, setOpen] = useState(false);
|
|
27
29
|
return (
|
|
28
30
|
<Box gap="sm" className={className}>
|
|
29
|
-
<Popover>
|
|
31
|
+
<Popover open={open} onOpenChange={setOpen}>
|
|
30
32
|
<Popover.Trigger asChild>
|
|
31
33
|
<Button
|
|
32
34
|
id={id}
|
|
@@ -44,12 +46,14 @@ export function EmojiField({
|
|
|
44
46
|
<EmojiPicker
|
|
45
47
|
onValueChange={(v) => {
|
|
46
48
|
tools.setValue(v);
|
|
49
|
+
setOpen(false);
|
|
47
50
|
}}
|
|
48
51
|
onClear={
|
|
49
52
|
required
|
|
50
53
|
? undefined
|
|
51
54
|
: () => {
|
|
52
55
|
tools.setValue('');
|
|
56
|
+
setOpen(false);
|
|
53
57
|
}
|
|
54
58
|
}
|
|
55
59
|
id={id}
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
import { preflight } from './_util.js';
|
|
2
2
|
|
|
3
3
|
export interface FontsPreflightOptions {
|
|
4
|
-
interFontLocation
|
|
4
|
+
interFontLocation?: string;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
export const fontsPreflight = (
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf',
|
|
11
|
-
},
|
|
12
|
-
) =>
|
|
7
|
+
export const fontsPreflight = ({
|
|
8
|
+
interFontLocation = 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf',
|
|
9
|
+
}: FontsPreflightOptions = {}) =>
|
|
13
10
|
preflight({
|
|
14
11
|
getCSS: () => `
|
|
15
12
|
@font-face {
|