@a-type/ui 2.7.6 → 2.8.0

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

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

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

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -15,7 +14,7 @@ import { Slot } from '@radix-ui/react-slot';
 import classNames from 'clsx';
 import { useCallback, } from 'react';
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
-export const inputClassName = classNames('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');
+export const inputClassName = classNames('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)');
 export 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 = useCallback((ev) => {

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

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';

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

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './Input.js';
 //# sourceMappingURL=index.js.map

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

@@ -1,4 +1,3 @@
-// @unocss-include
 'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -29,6 +28,6 @@ export function PageContent(_a) {
     return (_jsx(Box, Object.assign({ col: true, layout: "stretch start", full: "width", p: p || {
             default: 'md',
             sm: 'lg',
-        }, gap: "md", container: "reset", className: classNames('[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: classNames('[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/esm/components/layouts/PageFixedArea.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -14,6 +13,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'clsx';
 export function PageFixedArea(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({}, props, { className: classNames('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 (_jsx("div", Object.assign({}, props, { className: classNames('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/esm/components/layouts/PageNav.js

@@ -1,4 +1,3 @@
-// @unocss-include
 'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -27,6 +26,6 @@ export function PageNav(_a) {
         height: '--nav-height',
         ready: '--nav-ready',
     });
-    return (_jsx(HideWhileKeyboardOpen, Object.assign({}, props, { className: classNames('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: _jsx(BoxContext.Provider, { value: { spacingScale: 1 }, children: children }) })));
+    return (_jsx(HideWhileKeyboardOpen, Object.assign({}, props, { className: classNames('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: _jsx(BoxContext.Provider, { value: { spacingScale: 1 }, children: children }) })));
 }
 //# sourceMappingURL=PageNav.js.map

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

@@ -1,4 +1,3 @@
-// @unocss-include
 'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -18,12 +17,12 @@ import { useConfig } from '../provider/Provider.js';
 export function PageNowPlaying(_a) {
     var { className, unstyled, keepAboveKeyboard } = _a, props = __rest(_a, ["className", "unstyled", "keepAboveKeyboard"]);
     const { virtualKeyboardBehavior } = useConfig();
-    return (_jsx(BoxContext.Provider, { value: { spacingScale: 1 }, children: _jsx("div", Object.assign({}, props, { className: classNames('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 (_jsx(BoxContext.Provider, { value: { spacingScale: 1 }, children: _jsx("div", Object.assign({}, props, { className: classNames('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/esm/components/layouts/PageRoot.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { withClassName } from '../../hooks.js';
-export const PageRoot = 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]');
+export const PageRoot = 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/esm/components/layouts/PageSection.js

@@ -1,5 +1,4 @@
-// @unocss-include
 import { withClassName } from '../../hooks/withClassName.js';
-export const PageSection = 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');
-export const PageSectionGrid = withClassName('div', 'layer-components:grid layer-components:grid-cols-[repeat(auto-fit,minmax(300px,1fr))] layer-components:gap-4 layer-components:items-start');
+export const PageSection = withClassName('div', 'layer-components:(bg-white rounded-lg border-default p-4 w-full max-w-80vw md:min-w-0)');
+export const PageSectionGrid = withClassName('div', 'layer-components:(grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-4 items-start)');
 //# sourceMappingURL=PageSection.js.map

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

@@ -1,4 +1,3 @@
-// @unocss-include
 export * from './PageRoot.js';
 export * from './PageContent.js';
 export * from './PageFixedArea.js';

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

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Button } from '../button/index.js';

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

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

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

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './LiveUpdateTextField.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/marquee/marquee.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { SlotDiv } from '../utility/SlotDiv.js';

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

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Marquee } from './marquee.js';
 const meta = {

package/dist/esm/components/masonry/masonry.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx } from "react/jsx-runtime";
 import { debounce } from '@a-type/utils';
 import clsx from 'clsx';

package/dist/esm/components/masonry/masonry.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box } from '../box/Box.js';

package/dist/esm/components/navBar/NavBar.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -15,25 +14,25 @@ import { Slot } from '@radix-ui/react-slot';
 import classNames, { clsx } from 'clsx';
 import { withClassName } from '../../hooks.js';
 import { Icon } from '../icon/index.js';
-export const navBarItemClass = classNames('layer-components:flex layer-components:flex-col layer-components:items-center layer-components:justify-center layer-components:whitespace-nowrap layer-components:py-1 layer-components:px-3 layer-components:bg-transparent layer-components:rounded-sm layer-components:border-none layer-components:cursor-pointer layer-components:text-sm layer-components:transition-colors layer-components:h-full layer-components:gap-6px layer-components:relative layer-components:color-black layer-components:select-none', 'layer-components:active:bg-darken-2', 'layer-components:hover:bg-darken-1', 'layer-components:focus-visible:outline-none layer-components:focus-visible:bg-darken-2 layer-components:focus-visible:ring-1 layer-components:focus-visible:ring-primary', 'layer-components:[&[data-active=true]]:bg-primary-light/50 layer-components:[&[data-active=true]]:color-lighten-2 layer-components:[&[data-active=true]]:color-black', 'layer-components:[--fill:var(--color-primary)]', 'layer-responsive:md:flex-row-reverse layer-responsive:md:h-auto layer-responsive:md:justify-start layer-responsive:md:gap-2 layer-responsive:md:overflow-visible layer-responsive:md:active:bg-darken-2');
+export const navBarItemClass = classNames('layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-sm border-none cursor-pointer text-sm transition-colors h-full gap-6px relative color-black select-none)', 'layer-components:active:bg-darken-2', 'layer-components:hover:bg-darken-1', 'layer-components:focus-visible:(outline-none bg-darken-2 ring-1 ring-primary)', 'layer-components:[&[data-active=true]]:(bg-primary-light/50 color-lighten-2 color-black)', 'layer-components:([--fill:var(--color-primary)])', 'layer-responsive:md:(flex-row-reverse h-auto justify-start gap-2 overflow-visible active:bg-darken-2)');
 export const NavBarItem = function NavBarItem(_a) {
     var { ref, asChild, className, active, color } = _a, rest = __rest(_a, ["ref", "asChild", "className", "active", "color"]);
     const Comp = asChild ? Slot : 'button';
     return (_jsx(Comp, Object.assign({ ref: ref, className: classNames(navBarItemClass, color === 'neutral' && [
-            'layer-variants:[&[data-active=true]]:bg-gray/30 layer-variants:[&[data-active=true]]:color-black',
-            'layer-variants:[--fill:var(--color-gray)]',
+            'layer-variants:[&[data-active=true]]:(bg-gray/30 color-black)',
+            'layer-variants:([--fill:var(--color-gray)])',
             'layer-variants:focus-visible:ring-gray',
         ], className), "data-active": active }, rest)));
 };
-export const NavBarItemIconWrapper = withClassName('div', 'layer-components:relative layer-components:flex layer-components:md:p-6px layer-components:md:rounded-lg layer-components:md:bg-gray-blend', 'layer-variants:md:[*[data-active=true]_&]:bg-[var(--bg)]');
-export const NavBarItemText = withClassName('span', 'layer-components:overflow-hidden layer-components:inline-block layer-components:text-xxs layer-components:whitespace-nowrap layer-components:text-ellipsis layer-components:md:text-md layer-components:md:leading-normal');
+export const NavBarItemIconWrapper = withClassName('div', 'layer-components:(relative flex) layer-components:md:(p-6px rounded-lg bg-gray-blend)', 'layer-variants:md:[*[data-active=true]_&]:bg-[var(--bg)]');
+export const NavBarItemText = withClassName('span', 'layer-components:(overflow-hidden inline-block text-xxs whitespace-nowrap text-ellipsis) layer-components:md:(text-md leading-normal)');
 export const NavBarItemIcon = function NavBarItemIcon(_a) {
     var { ref, children, asChild, className, name = 'placeholder' } = _a, rest = __rest(_a, ["ref", "children", "asChild", "className", "name"]);
     const Comp = asChild ? Slot : Icon;
-    return (_jsx(Comp, Object.assign({ name: name, className: clsx('layer-components:relative layer-components:z-1 layer-components:flex layer-components:fill-none layer-components:color-inherit', 'layer-variants:[*[data-active=true]_&]:fill-[var(--fill)]', className) }, rest, { ref: ref, children: children })));
+    return (_jsx(Comp, Object.assign({ name: name, className: clsx('layer-components:(relative z-1 flex fill-none color-inherit)', 'layer-variants:[*[data-active=true]_&]:fill-[var(--fill)]', className) }, rest, { ref: ref, children: children })));
 };
-export const NavBarItemPip = withClassName('div', 'layer-components:absolute layer-components:top-6px layer-components:right-6px layer-components:w-6px layer-components:h-6px layer-components:rounded-lg layer-components:bg-attention layer-components:shadow-sm');
-export const NavBarRoot = withClassName('div', 'layer-components:grid layer-components:[grid-auto-columns:1fr] layer-components:[grid-auto-flow:column] layer-components:justify-items-center layer-components:w-full layer-components:rounded-none layer-components:overflow-hidden layer-components:z-50 layer-components:p-1 layer-components:h-auto', 'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]', 'layer-components:md:bg-transparent layer-components:md:flex layer-components:md:flex-col layer-components:md:rounded-none layer-components:md:border-none layer-components:md:border-transparent layer-components:md:shadow-none layer-components:md:h-min-content layer-components:md:overflow-y-auto layer-components:md:overflow-x-hidden layer-components:md:justify-start layer-components:md:items-stretch layer-components:md:gap-2 layer-components:md:pb-10');
+export const NavBarItemPip = withClassName('div', 'layer-components:(absolute top-6px right-6px w-6px h-6px rounded-lg bg-attention shadow-sm)');
+export const NavBarRoot = withClassName('div', 'layer-components:(grid [grid-auto-columns:1fr] [grid-auto-flow:column] justify-items-center w-full rounded-none overflow-hidden z-50 p-1 h-auto)', 'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]', 'layer-components:md:(bg-transparent flex flex-col rounded-none border-none border-transparent shadow-none h-min-content overflow-y-auto overflow-x-hidden justify-start items-stretch gap-2 pb-10)');
 export const NavBar = Object.assign(NavBarRoot, {
     Item: NavBarItem,
     ItemIcon: NavBarItemIcon,

package/dist/esm/components/navBar/index.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './NavBar.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/note/Note.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -14,6 +13,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'clsx';
 export function Note(_a) {
     var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
-    return (_jsx("div", Object.assign({ className: classNames(className) }, rest, { children: _jsxs("div", { className: "layer-components:flex layer-components:flex-row", children: [_jsx("div", { className: "layer-components:flex-1 layer-components:p-2 layer-components:border layer-components:border-solid layer-components:border-primary-dark layer-components:bg-primary-wash layer-components:color-black layer-components:relative layer-components:text-sm layer-components:italic layer-variants:border-r-0", children: children }), _jsxs("div", { className: "layer-components:flex layer-components:flex-col layer-components:items-stretch layer-components:justify-stretch layer-components:flex-[0_0_20px]", "aria-hidden": true, children: [_jsxs("div", { className: "layer-components:border-0 layer-components:border-solid layer-components:border-primary-dark layer-components:flex-[0_0_20px] layer-components:w-[20px] layer-components:h-[20px] layer-components:relative layer-variants:border-b-1px layer-variants:border-l-1px", children: [_jsx("div", { className: "layer-components:absolute layer-components:w-0.5px layer-components:bg-primary-dark layer-components:h-27px layer-components:rotate--45 layer-components:left-9px layer-components:top--3px layer-components:transform-origin-cc" }), _jsx("div", { className: `layer-components:border-solid layer-components:box-content layer-components:border-transparent layer-components:border-r-primary-wash layer-components:border-13px layer-components:w-0 layer-components:h-0 layer-components:rotate--45 layer-components:translate--7px layer-components:transform-origin-br` })] }), _jsx("div", { className: "layer-components:bg-primary-wash layer-components:flex-1 layer-components:border-0 layer-components:border-solid layer-components:border-primary-dark layer-variants:border-r-1px layer-variants:border-b-1px" })] })] }) })));
+    return (_jsx("div", Object.assign({ className: classNames(className) }, rest, { children: _jsxs("div", { className: "layer-components:(flex flex-row)", children: [_jsx("div", { className: "layer-components:(flex-1 p-2 border border-solid border-primary-dark bg-primary-wash color-black relative text-sm italic) layer-variants:border-r-0", children: children }), _jsxs("div", { className: "layer-components:(flex flex-col items-stretch justify-stretch flex-[0_0_20px])", "aria-hidden": true, children: [_jsxs("div", { className: "layer-components:(border-0 border-solid border-primary-dark flex-[0_0_20px] w-[20px] h-[20px] relative) layer-variants:(border-b-1px border-l-1px)", children: [_jsx("div", { className: "layer-components:(absolute w-0.5px bg-primary-dark h-27px rotate--45 left-9px top--3px transform-origin-cc)" }), _jsx("div", { className: `layer-components:(border-solid box-content border-transparent border-r-primary-wash border-13px w-0 h-0 rotate--45 translate--7px transform-origin-br)` })] }), _jsx("div", { className: "layer-components:(bg-primary-wash flex-1 border-0 border-solid border-primary-dark) layer-variants:(border-r-1px border-b-1px)" })] })] }) })));
 }
 //# sourceMappingURL=Note.js.map

package/dist/esm/components/note/Note.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { Note } from './Note.js';
 const meta = {
     title: 'Components/Note',

package/dist/esm/components/note/index.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './Note.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/numberStepper/NumberStepper.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -47,9 +46,9 @@ export function NumberStepper(_a) {
     const canDecrement = !disabled &&
         (steps ? index > 0 : true) &&
         (min === undefined || value > min);
-    return (_jsxs("div", Object.assign({ className: classNames('layer-components:flex layer-components:items-center layer-components:border-solid layer-components:border layer-components:border-gray-dark layer-components:rounded-lg layer-components:overflow-hidden layer-components:w-min-content layer-components:flex-shrink-0 layer-components:bg-white layer-components:shadow-sm', disabled &&
-            'layer-variants:border-gray-dark-blend layer-variants:bg-transparent layer-variants:shadow-none', {
-            'layer-variants:bg-accent-wash layer-variants:color-black': !!highlightChange && value !== 1,
+    return (_jsxs("div", Object.assign({ className: classNames('layer-components:(flex items-center border-solid border border-gray-dark rounded-lg overflow-hidden w-min-content flex-shrink-0 bg-white shadow-sm)', disabled &&
+            'layer-variants:(border-gray-dark-blend bg-transparent shadow-none)', {
+            'layer-variants:(bg-accent-wash color-black)': !!highlightChange && value !== 1,
         }, className) }, rest, { children: [_jsx(Button, { color: "ghost", onClick: decrement, disabled: !canDecrement, "aria-label": "Decrement value", children: _jsx(Icon, { name: "minus" }) }), _jsx("div", { className: "w-80px text-center", children: renderValue(value) }), _jsx(Button, { color: "ghost", onClick: increment, disabled: !canIncrement, "aria-label": "Increment value", children: _jsx(Icon, { name: "plus" }) })] })));
 }
 //# sourceMappingURL=NumberStepper.js.map

package/dist/esm/components/numberStepper/NumberStepper.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { NumberStepper } from './NumberStepper.js';
 const meta = {
     title: 'Components/NumberStepper',

package/dist/esm/components/numberStepper/index.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './NumberStepper.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/particles/ParticleContext.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { createContext, useContext } from 'react';
 const ParticleContext = createContext(null);
 export function useParticles() {

package/dist/esm/components/particles/ParticleLayer.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { createPortal } from 'react-dom';

package/dist/esm/components/particles/ParticleLayer.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { Button } from '../button/index.js';

package/dist/esm/components/particles/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 export { ParticleLayer } from './ParticleLayer.js';
 export { useParticles } from './ParticleContext.js';
 export { createCircleParticles, elementExplosion as circleParticleExplosion, createElementBorderInitializer, } from './particlesState.js';

package/dist/esm/components/particles/particlesState.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/dist/esm/components/peek/Peek.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { debounce } from '@a-type/utils';
 import classNames from 'clsx';
@@ -27,9 +26,9 @@ export function Peek({ peekHeight = 120, children, className }) {
     }, [peekHeight]);
     const id = useId();
     return (_jsxs("div", { className: classNames('relative', '[&[data-state=closed]]:max-h-[var(--peek-height,120px)] overflow-hidden', hasInteracted.current &&
-            'animate-ease-default animate-forwards [&[data-state=closed]]:animate-keyframes-peek-close [&[data-state=closed]]:animate-duration-300 [&[data-state=open]]:animate-keyframes-peek-open [&[data-state=open]]:animate-duration-600 [&[data-state=open]]:animate-forwards', className), ref: containerRef, "data-state": isPeekable ? (open ? 'open' : 'closed') : 'closed', style: {
+            'animate-ease-default animate-forwards [&[data-state=closed]]:(animate-keyframes-peek-close animate-duration-300) [&[data-state=open]]:(animate-keyframes-peek-open animate-duration-600 animate-forwards)', className), ref: containerRef, "data-state": isPeekable ? (open ? 'open' : 'closed') : 'closed', style: {
             '--peek-height': `${peekHeight}px`,
             '--collapsible-height': '0px',
-        }, children: [_jsx("div", { ref: contentRef, id: id, children: children }), isPeekable && (_jsx("button", { "data-state": open ? 'open' : 'closed', className: classNames('h-80px absolute bottom-0 z-1 bg-transparent border-none w-full cursor-pointer border-b border-b-solid border-white', 'animate-fade-in', 'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-b-solid border-primary', 'after:content-["-_tap_to_expand_-"] after:p-3 after:color-gray-dark after:text-xs after:flex after:flex-col after:justify-end after:items-center after:absolute after:inset-0 after:top-auto after:h-80px after:bg-gradient-to-b after:from-transparent after:to-white', 'after:[&[data-state=open]]:content-["-_tap_to_collapse_-"]'), onClick: toggle, "aria-label": "Toggle show description", "aria-expanded": open, "aria-controls": id }))] }));
+        }, children: [_jsx("div", { ref: contentRef, id: id, children: children }), isPeekable && (_jsx("button", { "data-state": open ? 'open' : 'closed', className: classNames('h-80px absolute bottom-0 z-1 bg-transparent border-none w-full cursor-pointer border-b border-b-solid border-white', 'animate-fade-in', 'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-b-solid border-primary', 'after:(content-["-_tap_to_expand_-"] p-3 color-gray-dark text-xs flex flex-col justify-end items-center absolute inset-0 top-auto h-80px bg-gradient-to-b from-transparent to-white)', 'after:[&[data-state=open]]:content-["-_tap_to_collapse_-"]'), onClick: toggle, "aria-label": "Toggle show description", "aria-expanded": open, "aria-controls": id }))] }));
 }
 //# sourceMappingURL=Peek.js.map

package/dist/esm/components/peek/Peek.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../box/Box.js';
 import { P } from '../typography/typography.js';

package/dist/esm/components/peek/index.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './Peek.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/popover/Popover.js

@@ -1,4 +1,3 @@
-// @unocss-include
 'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -16,9 +15,9 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import classNames from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
 import { BoxContext } from '../box/Box.js';
-const StyledContent = withClassName(PopoverPrimitive.Content, 'layer-components:rounded-xl layer-components:min-w-120px layer-components:bg-white layer-components:z-menu layer-components:shadow-lg layer-components:op-0 layer-components:hidden layer-components:max-w-90vw layer-components:border layer-components:border-gray-dark', 'will-change-transform', 'layer-components:transform-origin-[var(--radix-popover-transform-origin)]', 'layer-components:[&[data-state=open]]:animate-popover-in', 'layer-components:[&[data-state=closed]]:animate-popover-out', 'important:motion-reduce:animate-none', 'layer-components:max-h-[var(--radix-popover-content-available-height)]', 'layer-components:[&[data-state=open]]:opacity-100 layer-components:[&[data-state=open]]:flex layer-components:[&[data-state=open]]:flex-col', 'layer-components:[&[data-state=closed]]:pointer-events-none');
-const StyledArrow = withClassName(PopoverPrimitive.Arrow, 'layer-components:arrow');
-const StyledClose = withClassName(PopoverPrimitive.Close, 'layer-components:[all:unset] layer-components:[font-family:inherit] layer-components:rounded-lg layer-components:h-25px layer-components:w-25px layer-components:inline-flex layer-components:items-center layer-components:justify-center layer-components:color-dark-blend layer-components:absolute layer-components:top-5px layer-components:right-5px layer-components:hover:bg-lightBlend layer-components:focus:shadow-focus');
+const StyledContent = withClassName(PopoverPrimitive.Content, 'layer-components:(rounded-xl min-w-120px bg-white z-menu shadow-lg op-0 hidden max-w-90vw border border-gray-dark)', 'will-change-transform', 'layer-components:transform-origin-[var(--radix-popover-transform-origin)]', 'layer-components:[&[data-state=open]]:animate-popover-in', 'layer-components:[&[data-state=closed]]:animate-popover-out', 'important:motion-reduce:animate-none', 'layer-components:(max-h-[var(--radix-popover-content-available-height)])', 'layer-components:[&[data-state=open]]:(opacity-100 flex flex-col)', 'layer-components:[&[data-state=closed]]:pointer-events-none');
+const StyledArrow = withClassName(PopoverPrimitive.Arrow, 'layer-components:(arrow)');
+const StyledClose = withClassName(PopoverPrimitive.Close, 'layer-components:([all:unset] [font-family:inherit] rounded-lg h-25px w-25px inline-flex items-center justify-center color-dark-blend absolute top-5px right-5px hover:bg-lightBlend focus:shadow-focus)');
 // Exports
 export const PopoverRoot = PopoverPrimitive.Root;
 export const PopoverTrigger = PopoverPrimitive.Trigger;

package/dist/esm/components/popover/Popover.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../button/Button.js';
 import { Popover } from './Popover.js';

package/dist/esm/components/popover/index.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './Popover.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/progress/Progress.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -13,8 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { withClassName } from '../../hooks.js';
-export const ProgressRoot = withClassName(ProgressPrimitive.Root, 'layer-components:w-full layer-components:relative layer-components:overflow-hidden layer-components:border layer-components:border-default layer-components:rounded-lg');
-export const ProgressIndicator = withClassName(ProgressPrimitive.Indicator, 'layer-components:bg-primary layer-components:w-full layer-components:h-6px layer-components:translate-x-[calc(-100%*(1-var(--value)))] layer-components:rounded-lg layer-components:transition-transform', 'layer-components:[&[data-state=complete]]:bg-accent', 'layer-variants:[&[data-color=accent]]:bg-accent');
+export const ProgressRoot = withClassName(ProgressPrimitive.Root, 'layer-components:(w-full relative overflow-hidden border border-default rounded-lg)');
+export const ProgressIndicator = withClassName(ProgressPrimitive.Indicator, 'layer-components:(bg-primary w-full h-6px translate-x-[calc(-100%*(1-var(--value)))] rounded-lg transition-transform)', 'layer-components:[&[data-state=complete]]:(bg-accent)', 'layer-variants:[&[data-color=accent]]:(bg-accent)');
 const ProgressBase = function ProgressBase(_a) {
     var { ref, children, color, max = 100, value } = _a, props = __rest(_a, ["ref", "children", "color", "max", "value"]);
     return (_jsx(ProgressRoot, Object.assign({}, props, { value: value, max: max, ref: ref, children: _jsx(ProgressIndicator, { "data-color": color, 

package/dist/esm/components/progress/Progress.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Progress } from './Progress.js';
 const meta = {

package/dist/esm/components/provider/Provider.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 import { Toaster } from 'react-hot-toast';

package/dist/esm/components/relativeTime/RelativeTime.js

@@ -1,4 +1,3 @@
-// @unocss-include
 'use client';
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { shortenTimeUnits } from '@a-type/utils';

package/dist/esm/components/relativeTime/RelativeTime.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { RelativeTime } from './RelativeTime.js';
 const meta = {
     title: 'Components/RelativeTime',

package/dist/esm/components/relativeTime/index.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './RelativeTime.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/richEditor/index.js

@@ -1,5 +1,4 @@
-// @unocss-include
 import clsx from 'clsx';
-export const tipTapClassName = clsx('layer-components:w-full layer-components:leading-relaxed', 'layer-components:[&_.ProseMirror:focus]:outline-none layer-components:[&_.ProseMirror:focus]:shadow-focus', 'layer-components:[&_h1,h2,h3,p]:mt-0', 'layer-components:[&_h1]:text-2xl layer-components:[&_h1]:font-semibold layer-components:[&_h1]:mb-md layer-components:[&_h1]:[&:not:first-child]:mt-xl', 'layer-components:[&_h2]:text-lg layer-components:[&_h2]:font-bold layer-components:[&_h2]:color-gray-dark layer-components:[&_h2]:color-darken-3 layer-components:[&_h2]:mb-md layer-components:[&_h2]:[&:not:first-child]:mt-lg', 'layer-components:[&_h3]:text-md layer-components:[&_h3]:font-500 layer-components:[&_h3]:color-gray-dark layer-components:[&_h3]:color-darken-2 layer-components:[&_h3]:mb-sm layer-components:[&_h3]:[&:not:first-child]:mt-md', 'layer-components:[&_h4]:text-xs layer-components:[&_h4]:color-gray-dark layer-components:[&_h4]:color-darken-1 layer-components:[&_h4]:mb-sm layer-components:[&_h4]:[&:not:first-child]:mt-md layer-components:[&_h4]:uppercase', 'layer-components:[&_p]:mb-md layer-components:[&_p]:mt-0', 'layer-components:[&_a]:underline', 'layer-components:[&_blockquote]:border-l-4 layer-components:[&_blockquote]:border-l-solid layer-components:[&_blockquote]:border-gray layer-components:[&_blockquote]:pl-4 layer-components:[&_blockquote]:mb-md layer-components:[&_blockquote]:mt-md layer-components:[&_blockquote]:ml-md', 'layer-components:[&_ul]:list-disc layer-components:[&_ul]:pl-6 layer-components:[&_ul]:mb-md layer-components:[&_ul]:mt-md', 'layer-components:[&_ol]:list-decimal layer-components:[&_ol]:pl-6 layer-components:[&_ol]:mb-md layer-components:[&_ol]:mt-md', 'layer-components:[&_li]:mb-sm', 'layer-components:[&_mark]:bg-primary-wash layer-components:[&_mark]:bg-darken-2', 'layer-components:[&_strong]:font-semibold', 'layer-components:[&_em]:italic', 'layer-components:[&_hr]:my-lg layer-components:[&_hr]:border-gray', 'layer-components:[&_a]:underline', 'layer-components:[&_a:hover]:underline', 'layer-components:[&_a:focus]:outline-none layer-components:[&_a:focus]:shadow-focus', 'layer-components:[&_a:focus-visible]:outline-none layer-components:[&_a:focus-visible]:ring-inset layer-components:[&_a:focus-visible]:ring-4 layer-components:[&_a:focus-visible]:ring-gray', 'layer-components:[&_.ProseMirror]:bg-white layer-components:[&_.ProseMirror]:rounded-[20px] layer-components:[&_.ProseMirror]:px-4 layer-components:[&_.ProseMirror]:py-2 layer-components:[&_.ProseMirror]:shadow-sm-inset layer-components:[&_.ProseMirror]:border-gray-dark layer-components:[&_.ProseMirror]:border-solid layer-components:[&_.ProseMirror]:border-1');
-export const tipTapReadonlyClassName = clsx('[&_.ProseMirror]:bg-transparent [&_.ProseMirror]:border-none [&_.ProseMirror]:shadow-none', '[&_.ProseMirror:focus]:outline-none [&_.ProseMirror:focus]:shadow-none [&_.ProseMirror:focus]:bg-transparent');
+export const tipTapClassName = clsx('layer-components:(w-full leading-relaxed)', 'layer-components:[&_.ProseMirror:focus]:(outline-none shadow-focus)', 'layer-components:[&_h1,h2,h3,p]:mt-0', 'layer-components:[&_h1]:(text-2xl font-semibold mb-md [&:not:first-child]:mt-xl)', 'layer-components:[&_h2]:(text-lg font-bold color-gray-dark color-darken-3 mb-md [&:not:first-child]:mt-lg)', 'layer-components:[&_h3]:(text-md font-500 color-gray-dark color-darken-2 mb-sm [&:not:first-child]:mt-md)', 'layer-components:[&_h4]:(text-xs color-gray-dark color-darken-1 mb-sm [&:not:first-child]:mt-md uppercase)', 'layer-components:[&_p]:(mb-md mt-0)', 'layer-components:[&_a]:underline', 'layer-components:[&_blockquote]:(border-l-4 border-l-solid border-gray pl-4 mb-md mt-md ml-md)', 'layer-components:[&_ul]:(list-disc pl-6 mb-md mt-md)', 'layer-components:[&_ol]:(list-decimal pl-6 mb-md mt-md)', 'layer-components:[&_li]:(mb-sm)', 'layer-components:[&_mark]:(bg-primary-wash bg-darken-2)', 'layer-components:[&_strong]:(font-semibold)', 'layer-components:[&_em]:(italic)', 'layer-components:[&_hr]:(my-lg border-gray)', 'layer-components:[&_a]:(underline)', 'layer-components:[&_a:hover]:(underline)', 'layer-components:[&_a:focus]:(outline-none shadow-focus)', 'layer-components:[&_a:focus-visible]:(outline-none ring-inset ring-4 ring-gray)', 'layer-components:[&_.ProseMirror]:(bg-white rounded-[20px] px-4 py-2 shadow-sm-inset border-gray-dark border-solid border-1)');
+export const tipTapReadonlyClassName = clsx('[&_.ProseMirror]:(bg-transparent border-none shadow-none)', '[&_.ProseMirror:focus]:(outline-none shadow-none bg-transparent)');
 //# sourceMappingURL=index.js.map

package/dist/esm/components/richEditor/richEditor.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { tipTapClassName, tipTapReadonlyClassName } from './index.js';

package/dist/esm/components/scrollArea/ScrollArea.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -20,8 +19,8 @@ export const ScrollAreaRoot = function ScrollAreaRoot(_a) {
     return _jsx(ScrollAreaRootImpl, Object.assign({ ref: ref }, props));
 };
 export const ScrollAreaViewport = withClassName(Primitive.Viewport, 'h-full w-full rounded-inherit', '[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-repeat:no-repeat] ![background-size:100%_40px,100%_40px,100%_14px,100%_14px]', '![background-attachment:local,local,scroll,scroll]');
-export const ScrollAreaScrollbarRoot = withClassName(Primitive.Scrollbar, 'layer-components:flex layer-components:select-none layer-components:touch-none layer-components:p-0.5 layer-components:bg-inherit layer-components:bg-lighten-2 layer-components:transition-colors layer-components:duration-160ms layer-components:ease-out', 'layer-components:[&[data-orientation=vertical]]:w-2.5', 'layer-components:[&[data-orientation=horizontal]]:flex-col layer-components:[&[data-orientation=horizontal]]:h-2.5');
-export const ScrollAreaThumb = withClassName(Primitive.Thumb, 'layer-components:flex-1 layer-components:rounded-lg layer-components:relative layer-components:bg-inherit layer-components:bg-darken-2', 'before:content-[""] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:min-w-44px before:min-h-44px');
+export const ScrollAreaScrollbarRoot = withClassName(Primitive.Scrollbar, 'layer-components:(flex select-none touch-none p-0.5 bg-inherit bg-lighten-2 transition-colors duration-160ms ease-out)', 'layer-components:[&[data-orientation=vertical]]:w-2.5', 'layer-components:[&[data-orientation=horizontal]]:(flex-col h-2.5)');
+export const ScrollAreaThumb = withClassName(Primitive.Thumb, 'layer-components:(flex-1 rounded-lg relative bg-inherit bg-darken-2)', 'before:(content-[""] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full min-w-44px min-h-44px)');
 export const ScrollAreaScrollbar = function ScrollAreaScrollbar(_a) {
     var { ref } = _a, props = __rest(_a, ["ref"]);
     return (_jsx(ScrollAreaScrollbarRoot, Object.assign({}, props, { ref: ref, children: _jsx(ScrollAreaThumb, {}) })));

package/dist/esm/components/scrollArea/ScrollArea.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ScrollArea } from './ScrollArea.js';

package/dist/esm/components/select/Select.js

@@ -1,4 +1,3 @@
-// @unocss-include
 'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -28,7 +27,7 @@ export const SelectItem = (_a) => {
     }
     return (_jsxs(SelectItemRoot, Object.assign({ className: className }, props, { ref: forwardedRef, children: [_jsx(SelectPrimitive.ItemText, { children: children }), _jsx(SelectItemIndicator, {})] })));
 };
-export const SelectItemRoot = withClassName(SelectPrimitive.Item, 'layer-components:text-md layer-components:leading-4 layer-components:color-black layer-components:flex layer-components:items-center layer-components:flex-row layer-components:h-36px layer-components:pr-4 layer-components:pl-35px layer-components:relative layer-components:select-none', 'layer-components:[&[data-disabled]]:color-gray layer-components:[&[data-disabled]]:pointer-events-none [&[data-highlighted]]:outline-none [&[data-highlighted]]:bg-gray [&[data-highlighted]]:bg-lighten-3 [&[data-highlighted]]:color-black');
+export const SelectItemRoot = withClassName(SelectPrimitive.Item, 'layer-components:(text-md leading-4 color-black flex items-center flex-row h-36px pr-4 pl-35px relative select-none)', 'layer-components:[&[data-disabled]]:(color-gray pointer-events-none) [&[data-highlighted]]:(outline-none bg-gray bg-lighten-3 color-black)');
 export const SelectItemIndicatorRoot = withClassName(SelectPrimitive.ItemIndicator, 'absolute left-0 w-25px inline-flex items-center justify-center');
 export const SelectItemIndicator = withNoNativeRender((props) => (_jsx(SelectItemIndicatorRoot, Object.assign({}, props, { children: _jsx(Icon, { name: "check" }) }))));
 export const SelectItemText = withClassName(SelectPrimitive.ItemText, '');
@@ -40,7 +39,7 @@ export const SelectGroup = (props) => {
     return _jsx(SelectPrimitive.Group, Object.assign({}, props));
 };
 export const SelectRoot = SelectPrimitive.Root;
-export const selectTriggerClassName = classNames(getButtonClassName({ color: 'default' }), 'layer-components:[all:unset] layer-components:inline-flex layer-components:[&[data-placeholder]]:color-gray-dark');
+export const selectTriggerClassName = classNames(getButtonClassName({ color: 'default' }), 'layer-components:([all:unset] inline-flex [&[data-placeholder]]:color-gray-dark)');
 export const SelectTriggerBase = withNoNativeRender(withClassName(SelectPrimitive.Trigger, selectTriggerClassName));
 export const UnstyledSelectTrigger = withNoNativeRender(SelectPrimitive.Trigger);
 export const SelectTrigger = function SelectTrigger(_a) {
@@ -61,7 +60,7 @@ const contentStyle = {
 const viewportStyle = { '--local-corner-scale': '0.9' };
 export const SelectContent = withPassthroughNativeRender((_a) => {
     var { ref: forwardedRef, children, inDialog, className } = _a, props = __rest(_a, ["ref", "children", "inDialog", "className"]);
-    return (_jsx(SelectPrimitive.Portal, { children: _jsx(BoxContext.Provider, { value: { spacingScale: 1 }, children: _jsxs(SelectPrimitive.Content, Object.assign({ className: classNames('layer-components:overflow-hidden layer-components:bg-white layer-components:rounded-md layer-components:border layer-components:border-solid layer-components:border layer-components:border-black layer-components:z-menu layer-components:shadow-lg', 'layer-components:transform-origin-[var(--radix-select-content-transform-origin)]', 'layer-components:[&[data-state=open]]:animate-popover-in', 'layer-components:[&[data-state=closed]]:animate-popover-out', 'layer-components:min-w-[var(--radix-select-trigger-width)] layer-components:max-h-[var(--radix-select-content-available-height)]', inDialog && 'z-[calc(var(--z-dialog)+1)]', className), style: contentStyle }, props, { ref: forwardedRef, children: [_jsx(SelectPrimitive.ScrollUpButton, { className: "flex items-center justify-center h-25px bg-white color-primary-dark cursor-default", children: _jsx(Icon, { name: "chevron", className: "rotate-180" }) }), _jsx(SelectPrimitive.Viewport, { style: viewportStyle, children: children }), _jsx(SelectPrimitive.ScrollDownButton, { className: "flex items-center justify-center h-25px bg-white color-primary-dark cursor-default", children: _jsx(Icon, { name: "chevron" }) })] })) }) }));
+    return (_jsx(SelectPrimitive.Portal, { children: _jsx(BoxContext.Provider, { value: { spacingScale: 1 }, children: _jsxs(SelectPrimitive.Content, Object.assign({ className: classNames('layer-components:(overflow-hidden bg-white rounded-md border border-solid border border-black z-menu shadow-lg)', 'layer-components:transform-origin-[var(--radix-select-content-transform-origin)]', 'layer-components:[&[data-state=open]]:animate-popover-in', 'layer-components:[&[data-state=closed]]:animate-popover-out', 'layer-components:(min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)])', inDialog && 'z-[calc(var(--z-dialog)+1)]', className), style: contentStyle }, props, { ref: forwardedRef, children: [_jsx(SelectPrimitive.ScrollUpButton, { className: "flex items-center justify-center h-25px bg-white color-primary-dark cursor-default", children: _jsx(Icon, { name: "chevron", className: "rotate-180" }) }), _jsx(SelectPrimitive.Viewport, { style: viewportStyle, children: children }), _jsx(SelectPrimitive.ScrollDownButton, { className: "flex items-center justify-center h-25px bg-white color-primary-dark cursor-default", children: _jsx(Icon, { name: "chevron" }) })] })) }) }));
 });
 export const NativeSelect = (_a) => {
     var { ref: forwardedRef, className } = _a, props = __rest(_a, ["ref", "className"]);

package/dist/esm/components/select/Select.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../button/index.js';
 import { Select, SelectContent, SelectItem, SelectTrigger } from './Select.js';

package/dist/esm/components/select/index.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './Select.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/skeletons/TextSkeleton.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../index.js';
 import { TextSkeleton } from './skeletons.js';

package/dist/esm/components/skeletons/skeletons.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'clsx';
 import { useState } from 'react';

package/dist/esm/components/slider/Slider.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -13,10 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { withClassName } from '../../hooks.js';
-export const SliderRoot = withClassName(SliderPrimitive.Root, 'layer-components:relative layer-components:flex layer-components:items-center layer-components:select-none layer-components:touch-none layer-components:w-full layer-components:h-30px layer-components:translate-z-0');
-export const SliderTrack = withClassName(SliderPrimitive.Track, 'layer-components:bg-transparent layer-components:relative layer-components:grow layer-components:rounded-lg layer-components:h-9px layer-components:border layer-components:borderpx layer-components:border-solid layer-components:border-black');
-export const SliderRange = withClassName(SliderPrimitive.Range, 'layer-components:absolute layer-components:bg-accent layer-components:rounded-lg layer-components:h-full', 'layer-variants:[&[data-color=primary]]:bg-primary');
-export const SliderThumb = withClassName(SliderPrimitive.Thumb, 'layer-components:block layer-components:w-5 layer-components:h-5 layer-components:bg-white layer-components:shadow-sm layer-components:rounded-lg layer-components:ring-2 layer-components:ring-black layer-components:touch-none layer-components:transition-all', 'layer-components:hover:shadow-md', 'layer-components:active:shadow-lg layer-components:active:ring-4 layer-components:active:ring-accent-dark layer-components:active:ring-opacity-50 layer-components:active:bg-accent-light', 'layer-components:focus-visible:shadow-lg layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-accent-dark layer-components:focus-visible:ring-opacity-50 layer-components:focus-visible:outline-none layer-components:focus-visible:bg-accent-light', 'layer-components:focus:outline-none', 'layer-components:disabled:opacity-50', 'layer-variants:[&[data-color=primary]]:active:bg-primary layer-variants:[&[data-color=primary]]:active:ring-primary-dark', 'layer-variants:[&[data-color=primary]]:focus-visible:bg-primary layer-variants:[&[data-color=primary]]:focus-visible:ring-primary-dark');
+export const SliderRoot = withClassName(SliderPrimitive.Root, 'layer-components:(relative flex items-center select-none touch-none w-full h-30px translate-z-0)');
+export const SliderTrack = withClassName(SliderPrimitive.Track, 'layer-components:(bg-transparent relative grow rounded-lg h-9px border borderpx border-solid border-black)');
+export const SliderRange = withClassName(SliderPrimitive.Range, 'layer-components:(absolute bg-accent rounded-lg h-full)', 'layer-variants:[&[data-color=primary]]:bg-primary');
+export const SliderThumb = withClassName(SliderPrimitive.Thumb, 'layer-components:(block w-5 h-5 bg-white shadow-sm rounded-lg ring-2 ring-black touch-none transition-all)', 'layer-components:hover:(shadow-md)', 'layer-components:active:(shadow-lg ring-4 ring-accent-dark ring-opacity-50 bg-accent-light)', 'layer-components:focus-visible:(shadow-lg ring-4 ring-accent-dark ring-opacity-50 outline-none bg-accent-light)', 'layer-components:focus:(outline-none)', 'layer-components:disabled:(opacity-50)', 'layer-variants:[&[data-color=primary]]:active:(bg-primary ring-primary-dark)', 'layer-variants:[&[data-color=primary]]:focus-visible:(bg-primary ring-primary-dark)');
 export const Slider = Object.assign(function Slider(_a) {
     var { ref, label, color } = _a, props = __rest(_a, ["ref", "label", "color"]);
     return (_jsxs(SliderRoot, Object.assign({ ref: ref }, props, { children: [_jsx(SliderTrack, { children: _jsx(SliderRange, { "data-color": color }) }), _jsx(SliderThumb, { "aria-label": label, "data-color": color })] })));