@a-type/ui 2.7.6 → 2.8.0

package/dist/cjs/components/dialog/Dialog.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
@@ -65,11 +64,11 @@ const Icon_js_1 = require("../icon/Icon.js");
 const index_js_2 = require("../particles/index.js");
 const Provider_js_1 = require("../provider/Provider.js");
 const index_js_3 = require("../select/index.js");
-const StyledOverlay = (0, withClassName_js_1.withClassName)(DialogPrimitive.Overlay, 'layer-components:fixed layer-components:inset-0 layer-components:z-dialog-backdrop layer-components:animate-fade-in layer-components:animate-duration-200 layer-components:bg-overlay layer-components:[box-shadow:inset_0_30px_60px_0px_var(--color-overlay)] layer-components:border-top-1 layer-components:border-top-solid layer-components:border-top-gray', 'layer-components:[&[data-state=closed]]:animate-fade-out', 'motion-reduce:animate-none');
-const StyledContent = (0, withClassName_js_1.withClassName)(DialogPrimitive.Content, 'layer-components:z-dialog layer-components:fixed layer-components:shadow-xl layer-components:shadow-up layer-components:bg-white layer-components:overflow-y-auto layer-components:border layer-components:border-gray layer-components:flex layer-components:flex-col layer-components:border layer-components:border-gray-dark', 'layer-components:sm:shadow-down', 'transform-gpu !motion-reduce:animate-none', 'layer-components:left-50% layer-components:top-50% layer-components:translate-[-50%] layer-components:w-90vw layer-components:max-w-450px layer-components:max-h-85vh layer-components:p-6 layer-components:pt-8 layer-components:rounded-lg layer-components:border-b-1 layer-components:pt-6', 'layer-components:animate-dialog-in layer-components:[&[data-state=closed]]:animate-dialog-out layer-components:motion-reduce:animate-none');
-const sheetClassNames = (0, clsx_1.default)('layer-variants:lt-sm:translate-0 layer-variants:lt-sm:left-0 layer-variants:lt-sm:right-0 layer-variants:lt-sm:top-auto layer-variants:lt-sm:h-min-content layer-variants:lt-sm:rounded-tl-xl layer-variants:lt-sm:rounded-tr-xl layer-variants:lt-sm:rounded-b-0 layer-variants:lt-sm:p-6 layer-variants:lt-sm:pt-8 layer-variants:lt-sm:w-full layer-variants:lt-sm:max-w-none layer-variants:lt-sm:pb-[calc(3rem+env(safe-area-inset-bottom,0px))] layer-variants:lt-sm:border-b-0', 'layer-variants:lt-sm:animate-ease-in layer-variants:lt-sm:animate-fade-in-up layer-variants:lt-sm:[&[data-state=closed]]:animate-fade-out-down');
-const sheetClassNameWithOverlayKeyboard = (0, clsx_1.default)('layer-variants:lt-sm:bottom-[calc(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px))+var(--gesture-y,0px))] layer-variants:lt-sm:max-h-[calc(95vh-var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px)))]');
-const sheetClassNameWithDisplaceKeyboard = (0, clsx_1.default)('layer-variants:lt-sm:bottom-[calc(var(--viewport-bottom-offset,0px)+var(--gesture-y,0px))] layer-variants:lt-sm:max-h-[calc(0.85*var(--viewport-height,100vh))]');
+const StyledOverlay = (0, withClassName_js_1.withClassName)(DialogPrimitive.Overlay, 'layer-components:(fixed inset-0 z-dialog-backdrop animate-fade-in animate-duration-200 bg-overlay [box-shadow:inset_0_30px_60px_0px_var(--color-overlay)] border-top-1 border-top-solid border-top-gray)', 'layer-components:[&[data-state=closed]]:animate-fade-out', 'motion-reduce:animate-none');
+const StyledContent = (0, withClassName_js_1.withClassName)(DialogPrimitive.Content, 'layer-components:(z-dialog fixed shadow-xl shadow-up bg-white overflow-y-auto border border-gray flex flex-col border border-gray-dark)', 'layer-components:sm:(shadow-down)', 'transform-gpu !motion-reduce:animate-none', 'layer-components:(left-50% top-50% translate-[-50%] w-90vw max-w-450px max-h-85vh p-6 pt-8 rounded-lg border-b-1 pt-6)', 'layer-components:(animate-dialog-in [&[data-state=closed]]:animate-dialog-out motion-reduce:animate-none)');
+const sheetClassNames = (0, clsx_1.default)('layer-variants:lt-sm:(translate-0 left-0 right-0 top-auto h-min-content rounded-tl-xl rounded-tr-xl rounded-b-0 p-6 pt-8 w-full max-w-none pb-[calc(3rem+env(safe-area-inset-bottom,0px))] border-b-0)', 'layer-variants:lt-sm:(animate-ease-in animate-fade-in-up [&[data-state=closed]]:animate-fade-out-down)');
+const sheetClassNameWithOverlayKeyboard = (0, clsx_1.default)('layer-variants:lt-sm:(bottom-[calc(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px))+var(--gesture-y,0px))] max-h-[calc(95vh-var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px)))])');
+const sheetClassNameWithDisplaceKeyboard = (0, clsx_1.default)('layer-variants:lt-sm:(bottom-[calc(var(--viewport-bottom-offset,0px)+var(--gesture-y,0px))] max-h-[calc(0.85*var(--viewport-height,100vh))])');
 function sheetCloseGestureLogic(swipeY, dy, vy, last, close, content) {
     const contentHeight = content.clientHeight;
     const shouldClose = last && (swipeY === 1 || dy > contentHeight / 2);
@@ -163,7 +162,7 @@ const DialogSwipeHandle = function DialogSwipeHandle(_a) {
         axis: 'y',
     });
     const finalRef = (0, useMergedRef_js_1.default)(ref, innerRef);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: finalRef }, props, { className: (0, clsx_1.default)('layer-components:absolute layer-components:top-0 layer-components:left-50% layer-components:transform-gpu layer-components:-translate-x-1/2 layer-components:w-20% layer-components:py-2 layer-components:rounded-lg layer-components:cursor-grab layer-components:sm:hidden layer-components:touch-none', className), children: (0, jsx_runtime_1.jsx)("div", { className: "layer-components:w-full layer-components:h-[4px] layer-components:bg-gray layer-components:rounded-lg" }) })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: finalRef }, props, { className: (0, clsx_1.default)('layer-components:(absolute top-0 left-50% transform-gpu -translate-x-1/2 w-20% py-2 rounded-lg cursor-grab sm:hidden touch-none)', className), children: (0, jsx_runtime_1.jsx)("div", { className: "layer-components:(w-full h-[4px] bg-gray rounded-lg)" }) })));
 };
 exports.DialogSwipeHandle = DialogSwipeHandle;
 function findParentDialogContent(element) {
@@ -174,8 +173,8 @@ function findParentDialogContent(element) {
     return findParentDialogContent(element.parentElement);
 }
 const DialogCloseContext = (0, react_2.createContext)(() => { });
-const StyledTitle = (0, withClassName_js_1.withClassName)(DialogPrimitive.Title, 'layer-components:font-title layer-components:color-black layer-components:text-3xl layer-components:mb-4 layer-components:mt-0');
-const StyledDescription = (0, withClassName_js_1.withClassName)(DialogPrimitive.Description, 'layer-components:mt-3 layer-components:mb-6 layer-components:color-gray-dark layer-components:text-md layer-components:leading-6');
+const StyledTitle = (0, withClassName_js_1.withClassName)(DialogPrimitive.Title, 'layer-components:(font-title color-black text-3xl mb-4 mt-0)');
+const StyledDescription = (0, withClassName_js_1.withClassName)(DialogPrimitive.Description, 'layer-components:(mt-3 mb-6 color-gray-dark text-md leading-6)');
 // Exports
 const DialogRoot = (props) => {
     var _a;
@@ -200,14 +199,14 @@ const DialogClose = function DialogClose(_a) {
     return ((0, jsx_runtime_1.jsx)(DialogPrimitive.DialogClose, Object.assign({ asChild: true, ref: ref }, props, { children: asChild === true ? children : (0, jsx_runtime_1.jsx)(index_js_1.Button, { children: children !== null && children !== void 0 ? children : 'Close' }) })));
 };
 exports.DialogClose = DialogClose;
-exports.DialogActions = (0, withClassName_js_1.withClassName)('div', 'layer-components:flex layer-components:justify-end layer-components:sticky layer-components:w-full layer-components:gap-3 layer-components:items-center layer-components:bg-inherit layer-components:py-4 layer-components:translate-y-6 layer-components:flex-wrap', 'layer-components:bottom--6', 'layer-components:sm:bottom-0');
+exports.DialogActions = (0, withClassName_js_1.withClassName)('div', 'layer-components:(flex justify-end sticky w-full gap-3 items-center bg-inherit py-4 translate-y-6 flex-wrap)', 'layer-components:bottom--6', 'layer-components:sm:(bottom-0)');
 const DialogSelectTrigger = function DialogSelectTrigger(_a) {
     var { ref, children, className } = _a, props = __rest(_a, ["ref", "children", "className"]);
     return ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Trigger, Object.assign({ className: (0, clsx_1.default)(index_js_3.selectTriggerClassName, className) }, props, { children: [(0, jsx_runtime_1.jsx)("span", { children: children }), (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "chevron" })] })));
 };
 exports.DialogSelectTrigger = DialogSelectTrigger;
-exports.DialogSelectList = (0, withClassName_js_1.withClassName)(RadioGroupPrimitive.Root, 'layer-components:flex layer-components:flex-col layer-components:gap-2 layer-components:overflow-y-auto layer-components:p-2');
-exports.DialogSelectItemRoot = (0, withClassName_js_1.withClassName)(RadioGroupPrimitive.Item, 'layer-components:flex layer-components:items-center layer-components:gap-3 layer-components:w-full layer-components:py-3 layer-components:px-4 layer-components:text-left layer-components:border-none layer-components:rounded-lg layer-components:font-normal layer-components:bg-transparent layer-components:[&:nth-child(2n+1)]:bg-gray-blend layer-components:cursor-pointer layer-components:transition-all', 'layer-components:[&[data-state=checked]]:bg-primary-wash layer-components:[&[data-state=checked]]:color-primary-dark');
+exports.DialogSelectList = (0, withClassName_js_1.withClassName)(RadioGroupPrimitive.Root, 'layer-components:(flex flex-col gap-2 overflow-y-auto p-2)');
+exports.DialogSelectItemRoot = (0, withClassName_js_1.withClassName)(RadioGroupPrimitive.Item, 'layer-components:(flex items-center gap-3 w-full py-3 px-4 text-left border-none rounded-lg font-normal bg-transparent [&:nth-child(2n+1)]:bg-gray-blend cursor-pointer transition-all)', 'layer-components:[&[data-state=checked]]:(bg-primary-wash color-primary-dark)');
 const DialogSelectItem = function DialogSelectItem(_a) {
     var { ref, children } = _a, props = __rest(_a, ["ref", "children"]);
     return ((0, jsx_runtime_1.jsxs)(exports.DialogSelectItemRoot, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)("span", { className: "flex-1", children: children }), (0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Indicator, { className: "flex-0-0-auto", children: (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "check" }) })] })));

package/dist/cjs/components/dialog/Dialog.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiNested = exports.VirtualKeyboard = exports.Positioned = exports.NoSheet = exports.Small = exports.Default = void 0;

package/dist/cjs/components/dialog/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;

package/dist/cjs/components/divider/Divider.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};

package/dist/cjs/components/divider/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;

package/dist/cjs/components/dropdownMenu/DropdownMenu.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
@@ -54,20 +53,20 @@ const withClassName_js_1 = require("../../hooks/withClassName.js");
 const Box_js_1 = require("../box/Box.js");
 const StyledContent = (0, withClassName_js_1.withClassName)(function DropdownMenuContent(props) {
     return ((0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, Object.assign({}, props)) }));
-}, 'layer-components:min-w-220px layer-components:bg-white layer-components:z-menu layer-components:shadow-lg layer-components:rounded-md layer-components:border layer-components:border-gray-dark', 'layer-components:transform-origin-[var(--radix-dropdown-menu-transform-origin)]', 'layer-components:[&[data-state=open]]:animate-popover-in', 'layer-components:[&[data-state=closed]]:animate-popover-out', 'layer-components:max-h-[var(--radix-dropdown-menu-content-available-height)]', 'important:motion-reduce:animate-none', 'will-change-transform');
-const itemClassName = (0, clsx_1.default)('layer-components:text-md layer-components:leading-4 layer-components:color-black layer-components:flex layer-components:items-center layer-components:pr-4 layer-components:pl-8 layer-components:py-2 layer-components:relative layer-components:text-left layer-components:select-none layer-components:cursor-pointer', 'layer-components:[&[data-disabled]]:color-gray-dark layer-components:[&[data-disabled]]:pointer-events-none', 'layer-components:focus-visible:bg-gray layer-components:focus-visible:bg-lighten-3 layer-components:focus-visible:color-black', 'layer-components:hover:bg-gray layer-components:hover:bg-lighten-3 layer-components:hover:color-black', 'layer-components:focus:outline-none');
+}, 'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-md border border-gray-dark)', 'layer-components:transform-origin-[var(--radix-dropdown-menu-transform-origin)]', 'layer-components:[&[data-state=open]]:animate-popover-in', 'layer-components:[&[data-state=closed]]:animate-popover-out', 'layer-components:(max-h-[var(--radix-dropdown-menu-content-available-height)])', 'important:motion-reduce:animate-none', 'will-change-transform');
+const itemClassName = (0, clsx_1.default)('layer-components:(text-md leading-4 color-black flex items-center pr-4 pl-8 py-2 relative text-left select-none cursor-pointer)', 'layer-components:[&[data-disabled]]:(color-gray-dark pointer-events-none)', 'layer-components:focus-visible:(bg-gray bg-lighten-3 color-black)', 'layer-components:hover:(bg-gray bg-lighten-3 color-black)', 'layer-components:focus:outline-none');
 const StyledItemBase = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Item, itemClassName);
 const StyledItem = (_a) => {
     var { ref: forwardedRef, className, color } = _a, props = __rest(_a, ["ref", "className", "color"]);
     return ((0, jsx_runtime_1.jsx)(StyledItemBase, Object.assign({}, props, { className: (0, clsx_1.clsx)(color === 'destructive' &&
-            'layer-variants:color-attention-dark layer-variants:hover:bg-attention-light layer-variants:focus-visible:bg-attention-light', className), ref: forwardedRef })));
+            'layer-variants:(color-attention-dark hover:bg-attention-light focus-visible:bg-attention-light)', className), ref: forwardedRef })));
 };
 const StyledCheckboxItem = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.CheckboxItem, itemClassName);
 const StyledRadioItem = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.RadioItem, itemClassName);
-const StyledLabel = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Label, 'layer-components:pl-3 layer-components:py-1 layer-components:font-bold layer-components:text-sm layer-components:leading-6');
-const StyledSeparator = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Separator, 'layer-components:h-1px layer-components:bg-gray layer-components:m-5px');
-const StyledItemIndicator = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.ItemIndicator, 'layer-components:absolute layer-components:left-0 layer-components:w-25px layer-components:inline-flex layer-components:items-center layer-components:justify-center');
-const StyledArrow = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Arrow, 'layer-components:arrow');
+const StyledLabel = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Label, 'layer-components:(pl-3 py-1 font-bold text-sm leading-6)');
+const StyledSeparator = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Separator, 'layer-components:(h-1px bg-gray m-5px)');
+const StyledItemIndicator = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.ItemIndicator, 'layer-components:(absolute left-0 w-25px inline-flex items-center justify-center)');
+const StyledArrow = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Arrow, 'layer-components:(arrow)');
 const StyledTrigger = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Trigger, 'select-none');
 const StyledPortal = DropdownMenuPrimitive.Portal;
 // Exports

package/dist/cjs/components/dropdownMenu/DropdownMenu.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;

package/dist/cjs/components/dropdownMenu/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;

package/dist/cjs/components/editableText/EditableText.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -51,6 +50,6 @@ function EditableText(_a) {
     if (editingFinal) {
         return ((0, jsx_runtime_1.jsx)(index_js_2.Input, Object.assign({ ref: inputRef, value: value, onChange: handleChange, onBlur: handleBlur, className: (0, clsx_1.default)('layer-variants:font-size-inherit', className), id: id, autoSelect: autoSelect, onKeyDown: handleKeyDown }, rest)));
     }
-    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ onClick: () => setEditingFinal(true), className: (0, clsx_1.default)(index_js_2.inputClassName, 'layer-variants:border-transparent layer-variants:bg-transparent layer-variants:w-auto layer-variants:inline-flex layer-variants:items-center layer-variants:gap-2 layer-variants:font-size-inherit layer-variants:color-inherit layer-variants:shadow-none layer-variants:text-left', 'layer-variants:hover:bg-gray-blend', 'layer-variants:focus-visible:outline-none layer-variants:focus-visible:bg-gray-dark-blend', 'cursor-pointer', className), id: id }, rest, { children: [value, (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "pencil", className: "stroke-gray-blend opacity-50" })] })));
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ onClick: () => setEditingFinal(true), className: (0, clsx_1.default)(index_js_2.inputClassName, 'layer-variants:(border-transparent bg-transparent w-auto inline-flex items-center gap-2 font-size-inherit color-inherit shadow-none text-left)', 'layer-variants:hover:(bg-gray-blend)', 'layer-variants:focus-visible:(outline-none bg-gray-dark-blend)', 'cursor-pointer', className), id: id }, rest, { children: [value, (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "pencil", className: "stroke-gray-blend opacity-50" })] })));
 }
 //# sourceMappingURL=EditableText.js.map

package/dist/cjs/components/editableText/EditableText.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Title = exports.Default = void 0;

package/dist/cjs/components/emojiPicker/EmojiPicker.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -25,22 +24,22 @@ const Box_js_1 = require("../box/Box.js");
 const Button_js_1 = require("../button/Button.js");
 const Input_js_1 = require("../input/Input.js");
 const Spinner_js_1 = require("../spinner/Spinner.js");
-exports.EmojiPickerRoot = (0, hooks_js_1.withClassName)(frimousse_1.EmojiPicker.Root, 'layer-components:isolate layer-components:flex layer-components:flex-col layer-components:w-fit layer-components:h-368px layer-components:gap-sm');
-exports.EmojiPickerSearch = (0, hooks_js_1.withClassName)(frimousse_1.EmojiPicker.Search, 'layer-components:z-10', Input_js_1.inputClassName);
+exports.EmojiPickerRoot = (0, hooks_js_1.withClassName)(frimousse_1.EmojiPicker.Root, 'layer-components:(isolate flex flex-col w-fit h-368px gap-sm)');
+exports.EmojiPickerSearch = (0, hooks_js_1.withClassName)(frimousse_1.EmojiPicker.Search, 'layer-components:(z-10)', Input_js_1.inputClassName);
 const EmojiPickerViewport = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return ((0, jsx_runtime_1.jsx)(Box_js_1.Box, { className: "flex-1 min-h-0 overflow-hidden rounded-md bg-white", children: (0, jsx_runtime_1.jsx)(frimousse_1.EmojiPicker.Viewport, Object.assign({ className: "layer-components:relative layer-components:outline-hidden" }, props)) }));
+    return ((0, jsx_runtime_1.jsx)(Box_js_1.Box, { className: "flex-1 min-h-0 overflow-hidden rounded-md bg-white", children: (0, jsx_runtime_1.jsx)(frimousse_1.EmojiPicker.Viewport, Object.assign({ className: "layer-components:(relative outline-hidden)" }, props)) }));
 };
 exports.EmojiPickerViewport = EmojiPickerViewport;
 exports.EmojiPickerLoading = (0, hooks_js_1.withClassName)((0, hooks_js_1.withProps)(frimousse_1.EmojiPicker.Loading, {
     children: (0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, {}),
-}), 'layer-compoennts:absolute layer-compoennts:inset-0 layer-compoennts:flex layer-compoennts:items-center layer-compoennts:justify-center layer-compoennts:bg-inherit');
+}), 'layer-compoennts:(absolute inset-0 flex items-center justify-center bg-inherit)');
 exports.EmojiPickerEmpty = (0, hooks_js_1.withClassName)((0, hooks_js_1.withProps)(frimousse_1.EmojiPicker.Empty, {
     children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "No emoji found" }),
-}), 'layer-components:absolute layer-components:inset-0 layer-components:flex layer-components:items-center layer-components:justify-center layer-components:bg-inherit layer-components:color-gray-dark layer-components:text-xs');
-const EmojiPickerCategoryHeader = (props) => ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('layer-components:bg-inherit layer-components:px-md layer-components:py-sm layer-components:text-xs layer-components:font-semibold layer-components:text-gray-dark layer-components:sticky layer-components:top-0', props.className), children: props.category.label }));
+}), 'layer-components:(absolute inset-0 flex items-center justify-center bg-inherit color-gray-dark text-xs)');
+const EmojiPickerCategoryHeader = (props) => ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('layer-components:(bg-inherit px-md py-sm text-xs font-semibold text-gray-dark sticky top-0)', props.className), children: props.category.label }));
 exports.EmojiPickerCategoryHeader = EmojiPickerCategoryHeader;
-exports.EmojiPickerRow = (0, hooks_js_1.withClassName)('div', 'layer-components:scroll-my-xs layer-components:px-xs');
+exports.EmojiPickerRow = (0, hooks_js_1.withClassName)('div', 'layer-components:(scroll-my-xs px-xs)');
 exports.EmojiPickerEmoji = (0, hooks_js_1.withClassName)((p) => ((0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({}, p, { color: "ghost", toggled: p.emoji.isActive, toggleMode: "color", size: "small", "aria-label": p.emoji.label, className: "text-lg p-xs", children: (0, jsx_runtime_1.jsx)(Button_js_1.Button.Icon, { children: p.emoji.emoji }) }))), '');
 const defaultListComponents = {
     CategoryHeader: exports.EmojiPickerCategoryHeader,
@@ -48,7 +47,7 @@ const defaultListComponents = {
     Emoji: exports.EmojiPickerEmoji,
 };
 const EmojiPickerList = ({ className, components, }) => {
-    return ((0, jsx_runtime_1.jsx)(frimousse_1.EmojiPicker.List, { className: (0, clsx_1.default)('layer-components:select-none layer-components:pb-md', className), components: components
+    return ((0, jsx_runtime_1.jsx)(frimousse_1.EmojiPicker.List, { className: (0, clsx_1.default)('layer-components:(select-none pb-md)', className), components: components
             ? Object.assign(Object.assign({}, defaultListComponents), components) : defaultListComponents }));
 };
 exports.EmojiPickerList = EmojiPickerList;

package/dist/cjs/components/emojiPicker/EmojiPicker.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;

package/dist/cjs/components/errorBoundary/ErrorBoundary.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/errorBoundary/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;

package/dist/cjs/components/forms/CheckboxField.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -26,6 +25,6 @@ function CheckboxField(_a) {
                     tools.setValue(!!v);
                 } }, rest)), label && (0, jsx_runtime_1.jsx)(FieldLabel, { htmlFor: id, children: label })] }));
 }
-const FieldRoot = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-row layer-components:gap-2');
-const FieldLabel = (0, hooks_js_1.withClassName)('label', 'layer-components:inline-flex layer-components:flex-col layer-components:gap-1 layer-components:text-md layer-components:font-normal layer-components:color-dark-blend layer-components:mt-2px');
+const FieldRoot = (0, hooks_js_1.withClassName)('div', 'layer-components:(flex flex-row gap-2)');
+const FieldLabel = (0, hooks_js_1.withClassName)('label', 'layer-components:(inline-flex flex-col gap-1 text-md font-normal color-dark-blend mt-2px)');
 //# sourceMappingURL=CheckboxField.js.map

package/dist/cjs/components/forms/Form.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/forms/FormikForm.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};

package/dist/cjs/components/forms/FormikForm.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};

package/dist/cjs/components/forms/NumberStepperField.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -27,6 +26,6 @@ function NumberStepperField(_a) {
                     onChange === null || onChange === void 0 ? void 0 : onChange(v);
                 }, id: id }, rest))] }));
 }
-const FieldRoot = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-col layer-components:gap-2');
-const FieldLabel = (0, hooks_js_1.withClassName)('label', 'layer-components:block layer-components:flex-col layer-components:gap-1 layer-components:text-md layer-components:font-normal layer-components:color-dark-blend layer-components:mt-2px');
+const FieldRoot = (0, hooks_js_1.withClassName)('div', 'layer-components:(flex flex-col gap-2)');
+const FieldLabel = (0, hooks_js_1.withClassName)('label', 'layer-components:(block flex-col gap-1 text-md font-normal color-dark-blend mt-2px)');
 //# sourceMappingURL=NumberStepperField.js.map

package/dist/cjs/components/forms/SubmitButton.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubmitButton = SubmitButton;

package/dist/cjs/components/forms/TextField.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 'use client';
 var __rest = (this && this.__rest) || function (s, e) {

package/dist/cjs/components/forms/hooks.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useField = void 0;

package/dist/cjs/components/forms/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;

package/dist/cjs/components/horizontalList/HorizontalList.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -120,7 +119,7 @@ function HorizontalList(_a) {
         };
     }, [contentRef, containerRef, open]);
     const chevronFlip = openDirection === 'down' ? open : !open;
-    return ((0, jsx_runtime_1.jsxs)(ScrollArea_js_1.ScrollAreaRoot, Object.assign({ className: (0, clsx_1.default)('flex flex-col', 'layer-components:max-h-300px', className), background: background, "data-state": open ? 'open' : 'closed' }, rest, { children: [(0, jsx_runtime_1.jsx)(ScrollArea_js_1.ScrollAreaViewport, { ref: containerRef, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('layer-components:px-3 layer-components:pt-3 layer-components:pb-4 layer-components:gap-2', 'flex flex-row items-center gap-2 flex-shrink-0 w-max-content w-auto)', contentClassName), ref: contentRef, children: [(0, jsx_runtime_1.jsx)(Collapsible_js_1.CollapsibleSimple, { horizontal: true, open: internalCanOpen && !disableInternalOpenToggle, children: (0, jsx_runtime_1.jsx)(index_js_1.Button, { onClick: toggleOpen, color: "ghost", className: (0, clsx_1.default)('flex-shrink-0 bg-[var(--scroll-bg)] sticky left-0 top-2 z-1', !open &&
+    return ((0, jsx_runtime_1.jsxs)(ScrollArea_js_1.ScrollAreaRoot, Object.assign({ className: (0, clsx_1.default)('flex flex-col', 'layer-components:max-h-300px', className), background: background, "data-state": open ? 'open' : 'closed' }, rest, { children: [(0, jsx_runtime_1.jsx)(ScrollArea_js_1.ScrollAreaViewport, { ref: containerRef, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('layer-components:(px-3 pt-3 pb-4 gap-2)', 'flex flex-row items-center gap-2 flex-shrink-0 w-max-content w-auto)', contentClassName), ref: contentRef, children: [(0, jsx_runtime_1.jsx)(Collapsible_js_1.CollapsibleSimple, { horizontal: true, open: internalCanOpen && !disableInternalOpenToggle, children: (0, jsx_runtime_1.jsx)(index_js_1.Button, { onClick: toggleOpen, color: "ghost", className: (0, clsx_1.default)('flex-shrink-0 bg-[var(--scroll-bg)] sticky left-0 top-2 z-1', !open &&
                                     'rounded-none h-full border-r border-r-solid border-r-gray'), children: (0, jsx_runtime_1.jsx)(index_js_2.Icon, { name: "chevron", className: (0, clsx_1.default)('transition-transform', chevronFlip && 'rotate-180') }) }) }), children] }) }), (0, jsx_runtime_1.jsx)(ScrollArea_js_1.ScrollAreaScrollbar, {}), (0, jsx_runtime_1.jsx)(ScrollArea_js_1.ScrollAreaScrollbar, { orientation: "horizontal" })] })));
 }
 //# sourceMappingURL=HorizontalList.js.map

package/dist/cjs/components/horizontalList/HorizontalList.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CantOpen = exports.Default = void 0;

package/dist/cjs/components/icon/Icon.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};

package/dist/cjs/components/icon/IconLoadingContext.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconLoadingProvider = void 0;

package/dist/cjs/components/icon/generated/IconSpritesheet.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconSpritesheet = void 0;

package/dist/cjs/components/icon/generated/iconNames.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iconNames = void 0;

package/dist/cjs/components/icon/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;

package/dist/cjs/components/imageUploader/ImageUploader.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
@@ -183,18 +182,18 @@ function ImageUploaderRemoveButton(_a) {
     const { value, onChange } = useUploaderContext();
     if (!value)
         return null;
-    return ((0, jsx_runtime_1.jsx)(index_js_1.Button, Object.assign({ color: "ghost", className: (0, clsx_1.clsx)('layer-variants:absolute layer-variants:top-2 layer-variants:right-2 layer-variants:w-32px layer-variants:h-32px layer-variants:border-none layer-variants:p-2 layer-variants:cursor-pointer layer-variants:bg-white layer-variants:color-black layer-variants:rounded-lg layer-variants:transition-colors layer-variants:shadow-sm layer-variants:z-10', className), onClick: () => onChange(null) }, rest, { children: (0, jsx_runtime_1.jsx)(index_js_3.Icon, { name: "x" }) })));
+    return ((0, jsx_runtime_1.jsx)(index_js_1.Button, Object.assign({ color: "ghost", className: (0, clsx_1.clsx)('layer-variants:(absolute top-2 right-2 w-32px h-32px border-none p-2 cursor-pointer bg-white color-black rounded-lg transition-colors shadow-sm z-10)', className), onClick: () => onChange(null) }, rest, { children: (0, jsx_runtime_1.jsx)(index_js_3.Icon, { name: "x" }) })));
 }
 function ImageUploaderDisplay(_a) {
     var { className } = _a, rest = __rest(_a, ["className"]);
     const { value } = useUploaderContext();
-    return value ? ((0, jsx_runtime_1.jsx)("img", Object.assign({ src: value, className: (0, clsx_1.clsx)('layer-components:w-full layer-components:h-full layer-components:object-cover layer-components:object-center layer-components:rounded-lg', className) }, rest))) : null;
+    return value ? ((0, jsx_runtime_1.jsx)("img", Object.assign({ src: value, className: (0, clsx_1.clsx)('layer-components:(w-full h-full object-cover object-center rounded-lg)', className) }, rest))) : null;
 }
 function ImageUploaderEmptyControls({ children, className, }) {
     const { value, draggingOver } = useUploaderContext();
     if (value)
         return null;
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('layer-components:absolute layer-components:inset-0 layer-components:flex layer-components:flex-col layer-components:items-center layer-components:justify-center layer-components:gap-3 layer-components:rounded-lg', {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('layer-components:(absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg)', {
             'layer-components:bg-[rgba(0,0,0,0.05)]': !draggingOver,
             'layer-components:bg-[rgba(0,0,0,0.1)]': draggingOver,
         }, className), children: children }));

package/dist/cjs/components/imageUploader/ImageUploader.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;

package/dist/cjs/components/imageUploader/UploadIcon.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UploadIcon = UploadIcon;

package/dist/cjs/components/imageUploader/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;

package/dist/cjs/components/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;

package/dist/cjs/components/infiniteLoadTrigger/InfiniteLoadTrigger.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};

package/dist/cjs/components/input/Input.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -21,7 +20,7 @@ const react_slot_1 = require("@radix-ui/react-slot");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
 const useRotatingShuffledValue_js_1 = require("../../hooks/useRotatingShuffledValue.js");
-exports.inputClassName = (0, clsx_1.default)('layer-components:px-5 layer-components:py-1.25 layer-components:text-md layer-components:font-inherit layer-components:rounded-lg layer-components:bg-white layer-components:select-auto layer-components:min-w-60px layer-components:color-black layer-components:border-solid layer-components:border-width-thin layer-components:border-gray-dark layer-components:shadow-sm-inset layer-components:transition-shadow', 'layer-components:focus:outline-none layer-components:focus:bg-lighten-3 layer-components:focus:ring-4 layer-components:focus:ring-white', 'layer-components:focus-visible:outline-none layer-components:focus-visible:ring-gray', 'layer-components:disabled:bg-transparent layer-components:disabled:border-gray layer-components:disabled:placeholder-gray-dark layer-components:disabled:shadow-none', 'layer-components:md:min-w-120px', 'layer-variants:[&[data-size="small"]]:px-md layer-variants:[&[data-size="small"]]:py-xs layer-variants:[&[data-size="small"]]:text-sm layer-variants:[&[data-size="small"]]:rounded-md layer-variants:[&[data-size="small"]]:min-w-40px');
+exports.inputClassName = (0, clsx_1.default)('layer-components:(px-5 py-1.25 text-md font-inherit rounded-lg bg-white select-auto min-w-60px color-black border-solid border-width-thin border-gray-dark shadow-sm-inset transition-shadow)', 'layer-components:focus:(outline-none bg-lighten-3 ring-4	ring-white)', 'layer-components:focus-visible:(outline-none ring-gray)', 'layer-components:disabled:(bg-transparent border-gray placeholder-gray-dark shadow-none)', 'layer-components:md:(min-w-120px)', 'layer-variants:[&[data-size="small"]]:(px-md py-xs text-sm rounded-md min-w-40px)');
 const Input = function Input(_a) {
     var { className, autoSelect, onFocus, onChange, onValueChange, asChild, placeholders, placeholder, placeholdersIntervalMs = 5000, sizeVariant } = _a, props = __rest(_a, ["className", "autoSelect", "onFocus", "onChange", "onValueChange", "asChild", "placeholders", "placeholder", "placeholdersIntervalMs", "sizeVariant"]);
     const handleFocus = (0, react_1.useCallback)((ev) => {

package/dist/cjs/components/input/Input.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonAndInput = exports.Default = void 0;

package/dist/cjs/components/input/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;

package/dist/cjs/components/layouts/PageContent.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 'use client';
 var __rest = (this && this.__rest) || function (s, e) {
@@ -35,6 +34,6 @@ function PageContent(_a) {
     return ((0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({ col: true, layout: "stretch start", full: "width", p: p || {
             default: 'md',
             sm: 'lg',
-        }, gap: "md", container: "reset", className: (0, clsx_1.default)('[grid-area:content]', 'layer-components:max-w-full layer-components:min-w-0 layer-components:flex-1-0-auto layer-components:mx-auto', className), ref: finalRef }, rest, { children: children })));
+        }, gap: "md", container: "reset", className: (0, clsx_1.default)('[grid-area:content]', 'layer-components:(max-w-full min-w-0 flex-1-0-auto mx-auto)', className), ref: finalRef }, rest, { children: children })));
 }
 //# sourceMappingURL=PageContent.js.map

package/dist/cjs/components/layouts/PageFixedArea.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -20,6 +19,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 function PageFixedArea(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:sticky layer-components:top-0 layer-components:z-nav layer-components:bg-wash layer-components:w-full layer-components:items-stretch layer-components:gap-2 layer-components:flex layer-components:flex-col', className) })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:(sticky top-0 z-nav bg-wash w-full items-stretch gap-2 flex flex-col)', className) })));
 }
 //# sourceMappingURL=PageFixedArea.js.map

package/dist/cjs/components/layouts/PageNav.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 'use client';
 var __rest = (this && this.__rest) || function (s, e) {
@@ -33,6 +32,6 @@ function PageNav(_a) {
         height: '--nav-height',
         ready: '--nav-ready',
     });
-    return ((0, jsx_runtime_1.jsx)(HideWhileKeyboardOpen_js_1.HideWhileKeyboardOpen, Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:[grid-area:nav] layer-components:sticky layer-components:bottom-0 layer-components:bg-inherit layer-components:z-[var(--z-nav)] layer-components:pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]', 'layer-components:before:content-[""] layer-components:before:absolute layer-components:before:inset-x-4 layer-components:before:top-0 layer-components:before:h-px layer-components:before:bg-dark-blend', 'layer-components:md:[grid-area:nav] layer-components:md:sticky layer-components:md:top-lg layer-components:md:h-auto layer-components:md:bottom-auto layer-components:md:left-auto layer-components:md:right-auto layer-components:md:before:hidden', className), ref: ref, children: (0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: children }) })));
+    return ((0, jsx_runtime_1.jsx)(HideWhileKeyboardOpen_js_1.HideWhileKeyboardOpen, Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:([grid-area:nav] sticky bottom-0 bg-inherit z-[var(--z-nav)] pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))])', 'layer-components:before:(content-[""] absolute inset-x-4 top-0 h-px bg-dark-blend)', 'layer-components:md:([grid-area:nav] sticky top-lg h-auto bottom-auto left-auto right-auto) layer-components:md:before:(hidden)', className), ref: ref, children: (0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: children }) })));
 }
 //# sourceMappingURL=PageNav.js.map

package/dist/cjs/components/layouts/PageNowPlaying.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 'use client';
 var __rest = (this && this.__rest) || function (s, e) {
@@ -24,12 +23,12 @@ const Provider_js_1 = require("../provider/Provider.js");
 function PageNowPlaying(_a) {
     var { className, unstyled, keepAboveKeyboard } = _a, props = __rest(_a, ["className", "unstyled", "keepAboveKeyboard"]);
     const { virtualKeyboardBehavior } = (0, Provider_js_1.useConfig)();
-    return ((0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:fixed layer-components:left-0 layer-components:right-0 layer-components:z-[var(--z-nowPlaying)] layer-components:flex layer-components:flex-col layer-components:gap-2 layer-components:items-end', 
+    return ((0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:(fixed left-0 right-0 z-[var(--z-nowPlaying)] flex flex-col gap-2 items-end)', 
             // on mobile, this must be positioned above any nav bar that's present,
             // or at minimum in the safe area
-            'layer-components:bottom-[var(--nav-height,env(safe-area-inset-bottom,0px))]', 'layer-components:transition-bottom', 'layer-components:md:fixed layer-components:md:bottom-3 layer-components:md:left-[var(--content-left,20%)] layer-components:md:transition-opacity layer-components:md:top-auto layer-components:md:items-end layer-components:md:w-[var(--content-width,100%)] layer-components:md:max-w-80vw layer-components:md:p-0 layer-components:md:opacity-[var(--content-ready,0)]', unstyled
+            'layer-components:bottom-[var(--nav-height,env(safe-area-inset-bottom,0px))]', 'layer-components:transition-bottom', 'layer-components:md:(fixed bottom-3 left-[var(--content-left,20%)] transition-opacity top-auto items-end w-[var(--content-width,100%)] max-w-80vw p-0 opacity-[var(--content-ready,0)])', unstyled
                 ? 'layer-variants:p-2'
-                : 'layer-components:bg-wash layer-components:p-2px layer-components:rounded-xl layer-components:border-light layer-components:shadow-md layer-components:min-w-32px layer-components:items-center layer-components:justify-center layer-components:m-2 layer-components:w-auto', keepAboveKeyboard &&
+                : 'layer-components:(bg-wash p-2px rounded-xl border-light shadow-md min-w-32px items-center justify-center m-2 w-auto)', keepAboveKeyboard &&
                 virtualKeyboardBehavior === 'overlay' &&
                 'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px),var(--nav-height,env(safe-area-inset-bottom,0px))))]', keepAboveKeyboard &&
                 virtualKeyboardBehavior === 'displace' &&

package/dist/cjs/components/layouts/PageRoot.js

@@ -1,7 +1,6 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageRoot = void 0;
 const hooks_js_1 = require("../../hooks.js");
-exports.PageRoot = (0, hooks_js_1.withClassName)('div', 'layer-components:flex-grow-1 layer-components:flex-shrink-1 layer-components:flex-basis-0 layer-components:min-h-100dvh layer-components:bg-wash', 'layer-components:grid layer-components:grid-areas-[content]-[nav] layer-components:grid-cols-[1fr] layer-components:grid-rows-[1fr_auto] layer-components:items-start layer-components:justify-center', 'md:layer-responsive:grid-areas-[gutter1_nav_content_gutter2] md:layer-responsive:grid-cols-[1fr_auto_20fr_1fr] md:layer-responsive:min-h-auto md:layer-responsive:h-auto md:layer-responsive:bg-wash', 'lg:layer-responsive:grid-cols-[1fr_auto_min(800px,70vw)_1fr]');
+exports.PageRoot = (0, hooks_js_1.withClassName)('div', 'layer-components:(flex-grow-1 flex-shrink-1 flex-basis-0 min-h-100dvh bg-wash)', 'layer-components:(grid grid-areas-[content]-[nav] grid-cols-[1fr] grid-rows-[1fr_auto] items-start justify-center)', 'md:layer-responsive:(grid-areas-[gutter1_nav_content_gutter2] grid-cols-[1fr_auto_20fr_1fr] min-h-auto h-auto bg-wash)', 'lg:layer-responsive:(grid-cols-[1fr_auto_min(800px,70vw)_1fr])');
 //# sourceMappingURL=PageRoot.js.map

package/dist/cjs/components/layouts/PageSection.js

@@ -1,8 +1,7 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageSectionGrid = exports.PageSection = void 0;
 const withClassName_js_1 = require("../../hooks/withClassName.js");
-exports.PageSection = (0, withClassName_js_1.withClassName)('div', 'layer-components:bg-white layer-components:rounded-lg layer-components:border-default layer-components:p-4 layer-components:w-full layer-components:max-w-80vw layer-components:md:min-w-0');
-exports.PageSectionGrid = (0, withClassName_js_1.withClassName)('div', 'layer-components:grid layer-components:grid-cols-[repeat(auto-fit,minmax(300px,1fr))] layer-components:gap-4 layer-components:items-start');
+exports.PageSection = (0, withClassName_js_1.withClassName)('div', 'layer-components:(bg-white rounded-lg border-default p-4 w-full max-w-80vw md:min-w-0)');
+exports.PageSectionGrid = (0, withClassName_js_1.withClassName)('div', 'layer-components:(grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-4 items-start)');
 //# sourceMappingURL=PageSection.js.map

package/dist/cjs/components/layouts/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;

package/dist/cjs/components/layouts/layouts.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WithVirtualKeyboard = exports.WithoutNav = exports.ManualWidth = exports.Default = void 0;

package/dist/cjs/components/liveUpdateTextField/LiveUpdateTextField.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 'use client';
 var __rest = (this && this.__rest) || function (s, e) {

package/dist/cjs/components/liveUpdateTextField/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;

package/dist/cjs/components/marquee/marquee.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Marquee = Marquee;

package/dist/cjs/components/marquee/marquee.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;