@a-type/ui 2.7.6 → 2.8.1

package/dist/cjs/components/actions/ActionBar.js

@@ -21,7 +21,7 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
 function ActionBar(_a) {
     var { children, className, wrap, disableShadow } = _a, rest = __rest(_a, ["children", "className", "wrap", "disableShadow"]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, clsx_1.default)('layer-components:flex layer-components:flex-row layer-components:items-center layer-components:justify-start layer-components:w-full layer-components:overflow-hidden layer-components:relative layer-components:h-[max-content] layer-components:transition-[height] layer-components:springy', 'layer-components:[&:empty]:height-0', !disableShadow &&
-                'after:content-[""] after:absolute after:right-0 after:top-0 after:bottom-0 after:w-50px after:z-1 after:bg-gradient-to-l after:from-[color:var(--v-bg,var(--color-wash))] after:from-20% after:to-transparent after:pointer-events-none', className) }, rest, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('layer-components:flex layer-components:flex-row layer-components:items-center layer-components:justify-start layer-components:w-full layer-components:overflow-y-hidden layer-components:overflow-x-overlay layer-components:pr-80px layer-components:relative layer-components:h-full layer-components:[&::-webkit-scrollbar]:hidden', wrap && 'layer-variants:flex-wrap'), children: children }) })) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, clsx_1.default)('layer-components:(flex flex-row items-center justify-start w-full overflow-hidden relative h-[max-content] transition-[height] springy)', 'layer-components:[&:empty]:height-0', !disableShadow &&
+                'after:(content-[""] absolute right-0 top-0 bottom-0 w-50px z-1 bg-gradient-to-l from-[color:var(--v-bg,var(--color-wash))] from-20% to-transparent pointer-events-none)', className) }, rest, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('layer-components:(flex flex-row items-center justify-start w-full overflow-y-hidden overflow-x-overlay pr-80px relative h-full) layer-components:[&::-webkit-scrollbar]:hidden', wrap && 'layer-variants:flex-wrap'), children: children }) })) }));
 }
 //# sourceMappingURL=ActionBar.js.map

package/dist/cjs/components/actions/ActionButton.js

@@ -44,6 +44,6 @@ function ActionButton(_a) {
     if (!render && !visible) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(index_js_1.CollapsibleRoot, { open: !visible ? false : render, children: (0, jsx_runtime_1.jsx)(index_js_1.CollapsibleContent, { "data-horizontal": true, children: (0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({ size: "small", disableIconMode: true, className: (0, clsx_1.default)('layer-variants:border-gray-dark layer-variants:font-normal layer-variants:whitespace-nowrap layer-variants:m-2 layer-variants:flex layer-variants:flex-row layer-variants:gap-2 layer-variants:items-center layer-variants:py-0.25 layer-variants:rounded-md layer-variants:mx-1 layer-variants:min-h-7.5', className), asChild: asChild }, rest, { children: children })) }) }));
+    return ((0, jsx_runtime_1.jsx)(index_js_1.CollapsibleRoot, { open: !visible ? false : render, children: (0, jsx_runtime_1.jsx)(index_js_1.CollapsibleContent, { "data-horizontal": true, children: (0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({ size: "small", disableIconMode: true, className: (0, clsx_1.default)('layer-variants:(border-gray-dark font-normal whitespace-nowrap m-2 flex flex-row gap-2 items-center py-0.25 rounded-md mx-1 min-h-7.5)', className), asChild: asChild }, rest, { children: children })) }) }));
 }
 //# sourceMappingURL=ActionButton.js.map

package/dist/cjs/components/avatar/Avatar.js

@@ -23,8 +23,8 @@ const index_js_1 = require("../icon/index.js");
 function Avatar(_a) {
     var { className, popIn = false, imageSrc, name, crossOrigin } = _a, rest = __rest(_a, ["className", "popIn", "imageSrc", "name", "crossOrigin"]);
     const empty = !name && !imageSrc;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-pop": popIn, className: (0, clsx_1.default)('layer-components:flex layer-components:items-center layer-components:justify-center layer-components:rounded-lg layer-components:border-default layer-components:overflow-hidden layer-components:w-24px layer-components:aspect-1 layer-components:select-none layer-components:relative layer-components:bg-white layer-components:flex-shrink-0', popIn &&
-            'layer-variants:animate-pop-in-from-half layer-variants:animate-ease-springy layer-variants:animate-duration-200', empty && 'layer-components(border-dashed bg-gray-light)', className) }, rest, { children: [!empty && ((0, jsx_runtime_1.jsx)(AvatarContent, { name: name, imageSrc: imageSrc, crossOrigin: crossOrigin })), empty && (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "profile" })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-pop": popIn, className: (0, clsx_1.default)('layer-components:(flex items-center justify-center rounded-lg border-default overflow-hidden w-24px aspect-1 select-none relative bg-white flex-shrink-0)', popIn &&
+            'layer-variants:(animate-pop-in-from-half animate-ease-springy animate-duration-200)', empty && 'layer-components(border-dashed bg-gray-light)', className) }, rest, { children: [!empty && ((0, jsx_runtime_1.jsx)(AvatarContent, { name: name, imageSrc: imageSrc, crossOrigin: crossOrigin })), empty && (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "profile" })] })));
 }
 function AvatarContent({ name, imageSrc, crossOrigin = 'anonymous', }) {
     const [fallback, setFallback] = (0, react_1.useState)(false);

package/dist/cjs/components/avatar/AvatarList.js

@@ -28,7 +28,7 @@ const AvatarListContext = (0, react_1.createContext)({
 });
 function AvatarListRoot({ children, count, size = 24, className, }) {
     const width = count > 0 ? size + (count - 1) * ((size * 2) / 3) : 0;
-    return ((0, jsx_runtime_1.jsx)(AvatarListContext.Provider, { value: { size }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('layer-components:relative layer-components:flex-basis-auto', className), style: { width, minWidth: width, height: size }, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(AvatarListContext.Provider, { value: { size }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('layer-components:(relative flex-basis-auto)', className), style: { width, minWidth: width, height: size }, children: children }) }));
 }
 function AvatarListItemRoot({ index, children, className, }) {
     const { size } = (0, react_1.useContext)(AvatarListContext);

package/dist/cjs/components/box/Box.js

@@ -91,18 +91,18 @@ function Box(_a) {
             'layer-components:lg:p-lg': isResponsive(p) && p.lg === 'lg',
             'layer-components:lg:p-xl': isResponsive(p) && p.lg === 'xl',
             'layer-components:rounded-lg': !!surface,
-            'layer-components:bg-white layer-components:border-gray-ink': surface === true || surface === 'default',
-            'layer-components:bg-wash layer-components:border-gray-ink': surface === 'wash',
-            'layer-components:bg-primary-wash layer-components:border-primary-dark layer-components:color-primary-ink': surface === 'primary',
-            'layer-components:bg-accent-wash layer-components:border-accent-dark layer-components:color-accent-ink': surface === 'accent',
-            'layer-components:bg-attention-wash layer-components:border-attention-dark layer-components:color-attention-ink': surface === 'attention',
-            'layer-components:border layer-components:border-solid layer-components:rounded-lg': border,
+            'layer-components:(bg-white border-gray-ink)': surface === true || surface === 'default',
+            'layer-components:(bg-wash border-gray-ink)': surface === 'wash',
+            'layer-components:(bg-primary-wash border-primary-dark color-primary-ink)': surface === 'primary',
+            'layer-components:(bg-accent-wash border-accent-dark color-accent-ink)': surface === 'accent',
+            'layer-components:(bg-attention-wash border-attention-dark color-attention-ink)': surface === 'attention',
+            'layer-components:(border border-solid rounded-lg)': border,
             'layer-components:w-full': full === true || full === 'width',
             'layer-components:h-full': full === true || full === 'height',
             'layer-components:overflow-hidden': overflow === 'hidden',
             'layer-components:overflow-auto': overflow === 'auto',
-            'layer-components:overflow-x-auto layer-components:overflow-y-hidden': overflow === 'auto-x',
-            'layer-components:overflow-y-auto layer-components:overflow-x-hidden': overflow === 'auto-y',
+            'layer-components:(overflow-x-auto overflow-y-hidden)': overflow === 'auto-x',
+            'layer-components:(overflow-y-auto overflow-x-hidden)': overflow === 'auto-y',
             'layer-components:flex-grow': grow,
             'layer-components:@container': container === true,
             'layer-components:shadow-sm': elevated === null || elevated === void 0 ? void 0 : elevated.includes('sm'),
@@ -110,7 +110,7 @@ function Box(_a) {
             'layer-components:shadow-lg': elevated === null || elevated === void 0 ? void 0 : elevated.includes('lg'),
             'layer-components:shadow-xl': elevated === null || elevated === void 0 ? void 0 : elevated.includes('xl'),
             'layer-components:shadow-inset': elevated === null || elevated === void 0 ? void 0 : elevated.startsWith('-'),
-            'layer-components:shadow-up': elevated === null || elevated === void 0 ? void 0 : elevated.endsWith('-up'),
+            'layer-components:(shadow-up)': elevated === null || elevated === void 0 ? void 0 : elevated.endsWith('-up'),
         }, theme && `theme-${theme}`, className) })));
     if (container || p) {
         return ((0, jsx_runtime_1.jsx)(exports.BoxContext.Provider, { value: {

package/dist/cjs/components/button/classes.js

@@ -15,33 +15,33 @@ const sizeMap = {
 };
 function getButtonClassName({ color, size: rawSize, toggleable, align, disableIconMode, }) {
     const size = sizeMap[rawSize !== null && rawSize !== void 0 ? rawSize : 'default'];
-    return (0, clsx_1.default)('layer-components:px-4 layer-components:py-2 layer-components:bg-[var(--bg-neutral,var(--bg))] layer-components:[--webkit-tap-highlight-color:transparent] layer-components:[line-height:1] layer-components:text-size-md layer-components:font-inherit layer-components:border-solid layer-components:border-thin layer-components:border-transparent layer-components:rounded-lg layer-components:cursor-pointer layer-components:font-bold layer-components:flex layer-components:flex-row layer-components:gap-sm layer-components:items-center layer-components:relative layer-components:overflow-visible layer-components:select-none layer-components:all:transition layer-components:duration-200 layer-components:whitespace-nowrap layer-components:ring-bg', 'layer-components:hover:bg-[var(--bg)] layer-components:hover:bg-darken-1 layer-components:hover:ring-4', 'layer-components:focus:outline-off', 'layer-components:focus-visible:bg-[var(--bg)] layer-components:focus-visible:outline-off layer-components:focus-visible:bg-darken-1 layer-components:focus-visible:ring-6', 'layer-components:[&[data-focus=true]]:bg-[var(--bg)] layer-components:[&[data-focus=true]]:ring-6 layer-components:[&[data-focus=true]]:bg-darken-1', 'layer-components:active:bg-[var(--bg)] layer-components:active:bg-darken-1 layer-components:active:ring-8', 'layer-components:disabled:opacity-50 layer-components:disabled:cursor-default layer-components:disabled:bg-[var(--bg)] layer-components:disabled:shadow-none layer-components:disabled:ring-none', 'layer-components:[&[data-disabled=true]]:opacity-50 layer-components:[&[data-disabled=true]]:cursor-default layer-components:[&[data-disabled=true]]:bg-[var(--bg)] layer-components:[&[data-disabled=true]]:shadow-none', colors[color !== null && color !== void 0 ? color : 'default'], `btn-color-${color !== null && color !== void 0 ? color : 'default'}`, sizes[size !== null && size !== void 0 ? size : 'default'], disableIconMode ? '' : iconModeSizes[size !== null && size !== void 0 ? size : 'default'], `size-${size !== null && size !== void 0 ? size : 'default'}`, toggleable && toggledClass, align && aligns[align], 
+    return (0, clsx_1.default)('layer-components:(px-4 py-2 bg-[var(--bg-neutral,var(--bg))] [--webkit-tap-highlight-color:transparent] [line-height:1] text-size-md font-inherit border-solid border-thin border-transparent rounded-lg cursor-pointer font-bold flex flex-row gap-sm items-center relative overflow-visible select-none all:transition duration-200 whitespace-nowrap ring-bg)', 'layer-components:hover:(bg-[var(--bg)] bg-darken-1 ring-4)', 'layer-components:focus:outline-off', 'layer-components:focus-visible:(bg-[var(--bg)] outline-off bg-darken-1 ring-6)', 'layer-components:[&[data-focus=true]]:(bg-[var(--bg)] ring-6 bg-darken-1)', 'layer-components:active:(bg-[var(--bg)] bg-darken-1 ring-8)', 'layer-components:disabled:(opacity-50 cursor-default bg-[var(--bg)] shadow-none ring-none)', 'layer-components:[&[data-disabled=true]]:(opacity-50 cursor-default bg-[var(--bg)] shadow-none)', colors[color !== null && color !== void 0 ? color : 'default'], `btn-color-${color !== null && color !== void 0 ? color : 'default'}`, sizes[size !== null && size !== void 0 ? size : 'default'], disableIconMode ? '' : iconModeSizes[size !== null && size !== void 0 ? size : 'default'], `size-${size !== null && size !== void 0 ? size : 'default'}`, toggleable && toggledClass, align && aligns[align], 
     // compound variants
     color === 'ghost' &&
         toggleable &&
         'layer-variants:[aria-pressed="true"]:[--bg:var(--color-primary-wash)]');
 }
 const colors = {
-    primary: `layer-variants:[&.btn-color-primary]:[--bg:var(--color-primary)] layer-variants:[&.btn-color-primary]:shadow-sm layer-variants:[&.btn-color-primary]:color-black layer-variants:[&.btn-color-primary]:border-primary-dark`,
-    accent: `layer-variants:[&.btn-color-accent]:[--bg-neutral:var(--color-accent-wash)] layer-variants:[&.btn-color-accent]:[--bg:var(--color-accent-light)] layer-variants:[&.btn-color-accent]:shadow-sm layer-variants:[&.btn-color-accent]:color-black layer-variants:[&.btn-color-accent]:border-accent-dark`,
-    default: `layer-variants:[&.btn-color-default]:[--bg-neutral:var(--color-white)] layer-variants:[&.btn-color-default]:[--bg:var(--color-gray)] layer-variants:[&.btn-color-default]:bg-lighten-1 layer-variants:[&.btn-color-default]:shadow-sm layer-variants:[&.btn-color-default]:color-black layer-variants:[&.btn-color-default]:border-gray-dark layer-variants:[&.btn-color-default]:focus-visible:bg-lighten-1 layer-variants:[&.btn-color-default]:hover:bg-lighten-1`,
-    ghost: `layer-variants:[&.btn-color-ghost]:[--bg-neutral:transparent] layer-variants:[&.btn-color-ghost]:[--bg:oklch(from_var(--color-gray)_l_c_h/50%)] layer-variants:[&.btn-color-ghost]:color-dark-blend`,
-    destructive: `layer-variants:[&.btn-color-destructive]:[--bg:var(--color-attention)] layer-variants:[&.btn-color-destructive]:shadow-sm layer-variants:[&.btn-color-destructive]:border-attention-dark layer-variants:[&.btn-color-destructive]:color-black`,
-    ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:[--bg-neutral:transparent] layer-variants:[&.btn-color-ghostDestructive]:[--bg:var(--color-attention-light)] layer-variants:[&.btn-color-ghostDestructive]:color-attention-dark layer-variants:[&.btn-color-ghostDestructive]:hover:color-black layer-variants:[&.btn-color-ghostDestructive]:focus-visible:color-black`,
-    ghostAccent: `layer-variants:[&.btn-color-ghostAccent]:[--bg-neutral:transparent] layer-variants:[&.btn-color-ghostAccent]:[--bg:var(--color-accent-light)] layer-variants:[&.btn-color-ghostAccent]:color-accent-dark layer-variants:[&.btn-color-ghostAccent]:hover:color-black layer-variants:[&.btn-color-ghostAccent]:focus-visible:color-black`,
-    contrast: `layer-variants:[&.btn-color-contrast]:[--bg:var(--color-black)] layer-variants:[&.btn-color-contrast]:color-white layer-variants:[&.btn-color-contrast]:border-black layer-variants:[&.btn-color-contrast]:hover:bg-lighten-1 layer-variants:[&.btn-color-contrast]:focus-visible:bg-lighten-1 layer-variants:[&.btn-color-contrast]:active:bg-lighten-1`,
-    unstyled: `layer-variants:bg-transparent layer-variants:hover:bg-transparent layer-variants:focus:bg-transparent layer-variants:active:bg-transparent layer-variants:color-inherit layer-variants:border-transparent layer-variants:shadow-none layer-variants:hover:shadow-none layer-variants:focus:shadow-none layer-variants:active:shadow-none layer-variants:p-0 layer-variants:items-start layer-variants:font-inherit layer-variants:font-normal layer-variants:rounded-none layer-variants:text-size-inherit layer-variants:transition-none`,
+    primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary)] shadow-sm color-black border-primary-dark)`,
+    accent: `layer-variants:[&.btn-color-accent]:([--bg-neutral:var(--color-accent-wash)] [--bg:var(--color-accent-light)] shadow-sm color-black border-accent-dark)`,
+    default: `layer-variants:[&.btn-color-default]:([--bg-neutral:var(--color-white)] [--bg:var(--color-gray)] bg-lighten-1 shadow-sm color-black border-gray-dark focus-visible:bg-lighten-1 hover:bg-lighten-1)`,
+    ghost: `layer-variants:[&.btn-color-ghost]:([--bg-neutral:transparent] [--bg:oklch(from_var(--color-gray)_l_c_h/50%)] color-dark-blend)`,
+    destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention)] shadow-sm border-attention-dark color-black)`,
+    ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:([--bg-neutral:transparent] [--bg:var(--color-attention-light)] color-attention-dark hover:(color-black) focus-visible:(color-black))`,
+    ghostAccent: `layer-variants:[&.btn-color-ghostAccent]:([--bg-neutral:transparent] [--bg:var(--color-accent-light)] color-accent-dark hover:color-black focus-visible:color-black)`,
+    contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] color-white border-black hover:bg-lighten-1 focus-visible:bg-lighten-1 active:bg-lighten-1)`,
+    unstyled: `layer-variants:(bg-transparent hover:(bg-transparent) focus:(bg-transparent) active:(bg-transparent) color-inherit border-transparent shadow-none hover:(shadow-none) focus:(shadow-none) active:(shadow-none) p-0 items-start font-inherit font-normal rounded-none text-size-inherit transition-none)`,
 };
 exports.buttonColorClasses = colors;
 const sizes = {
     default: '',
-    small: 'layer-variants:[&.size-small]:px-4 layer-variants:[&.size-small]:py-1 layer-variants:[&.size-small]:text-sm layer-variants:[&.size-small]:rounded-md',
+    small: 'layer-variants:[&.size-small]:(px-4 py-1 text-sm rounded-md)',
 };
 const iconModeSizes = {
-    default: 'layer-variants:[&[data-has-icon=true][data-has-label=false]]:p-2.35 layer-variants:[&[data-has-icon=true][data-has-label=false]]:text-sm layer-variants:[&[data-has-icon=true][data-has-label=false]]:rounded-lg',
-    small: 'layer-variants:[&.size-small[data-has-icon=true][data-has-label=false]]:p-2 layer-variants:[&.size-small[data-has-icon=true][data-has-label=false]]:text-xs layer-variants:[&.size-small[data-has-icon=true][data-has-label=false]]:rounded-lg layer-variants:[&.size-small[data-has-icon=true][data-has-label=false]]:-m-y-0.5',
+    default: 'layer-variants:[&[data-has-icon=true][data-has-label=false]]:(p-2.35 text-sm rounded-lg)',
+    small: 'layer-variants:[&.size-small[data-has-icon=true][data-has-label=false]]:(p-2 text-xs rounded-lg -m-y-0.5)',
 };
-const toggledClass = 'layer-variants:bg-transparent layer-variants:aria-pressed:bg-[var(--bg)] layer-variants:hover:(filter-brightness-[1.1])';
+const toggledClass = 'layer-variants:(bg-transparent aria-pressed:bg-[var(--bg)] hover:(filter-brightness-[1.1]))';
 const aligns = {
     start: 'self-start',
     stretch: 'self-stretch',

package/dist/cjs/components/camera/Camera.js

@@ -131,7 +131,7 @@ function CameraRoot(_a) {
             selectDeviceId: setSelectedDeviceId,
             setFullscreen,
             fullscreen,
-        }, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: (0, clsx_1.default)('override-light', 'layer-components:[font-family:inherit] layer-components:color-white layer-components:bg-black layer-components:rounded-lg layer-components:overflow-hidden layer-components:min-w-4 layer-components:min-h-4 layer-components:relative', fullscreen && 'fixed inset-0 w-full h-full z-1000 rounded-none', className) }, rest, { children: [(0, jsx_runtime_1.jsx)("video", { ref: videoRef, className: "w-full h-full object-cover", autoPlay: true, muted: true, playsInline: true }), children] })) }));
+        }, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: (0, clsx_1.default)('override-light', 'layer-components:([font-family:inherit] color-white bg-black rounded-lg overflow-hidden min-w-4 min-h-4 relative)', fullscreen && 'fixed inset-0 w-full h-full z-1000 rounded-none', className) }, rest, { children: [(0, jsx_runtime_1.jsx)("video", { ref: videoRef, className: "w-full h-full object-cover", autoPlay: true, muted: true, playsInline: true }), children] })) }));
 }
 function CameraShutterButton(_a) {
     var { asChild, onClick, ref } = _a, rest = __rest(_a, ["asChild", "onClick", "ref"]);

package/dist/cjs/components/card/Card.js

@@ -25,24 +25,24 @@ const hooks_js_1 = require("../../hooks.js");
 const Box_js_1 = require("../box/Box.js");
 const masonry_js_1 = require("../masonry/masonry.js");
 const SlotDiv_js_1 = require("../utility/SlotDiv.js");
-exports.CardRoot = (0, hooks_js_1.withClassName)((0, hooks_js_1.withProps)(Box_js_1.Box, { container: 'reset' }), 'layer-components:flex layer-components:flex-col layer-components:border-light layer-components:rounded-lg layer-components:text-lg layer-components:overflow-hidden layer-components:h-max-content layer-components:relative layer-components:bg-wash layer-components:bg-darken-1 layer-components:color-black layer-components:shadow-sm', 'layer-variants:[&[data-borderless=true]]:border-none layer-variants:[&[data-borderless=true]]:shadow-md');
+exports.CardRoot = (0, hooks_js_1.withClassName)((0, hooks_js_1.withProps)(Box_js_1.Box, { container: 'reset' }), 'layer-components:(flex flex-col border-light rounded-lg text-lg overflow-hidden h-max-content relative bg-wash bg-darken-1 color-black shadow-sm)', 'layer-variants:[&[data-borderless=true]]:(border-none shadow-md)');
 function CardMain(_a) {
     var { asChild, className, compact, nonInteractive, ref } = _a, rest = __rest(_a, ["asChild", "className", "compact", "nonInteractive", "ref"]);
     const isInteractive = !nonInteractive && (!!asChild || !!rest.onClick);
     const Comp = asChild ? react_slot_1.Slot : isInteractive ? 'button' : 'div';
-    return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ ref: ref, className: (0, clsx_1.default)('layer-components:flex layer-components:flex-col layer-components:items-start layer-components:gap-1 layer-components:transition layer-components:pb-2 layer-components:flex-1 layer-components:min-h-40px layer-components:bg-transparent layer-components:border-none layer-components:text-start layer-components:text-inherit layer-components:text-sm layer-components:relative layer-components:z-1 layer-components:p-0 layer-components:font-inherit layer-components:outline-none layer-components:rounded-t-lg', !!compact && 'layer-variants:pb-0', isInteractive &&
-            (0, clsx_1.default)('layer-components:cursor-pointer layer-components:hover:bg-gray-blend layer-components:hover:color-black layer-components:hover:shadow-sm-inset layer-components:focus:outline-none', 'layer-components:focus-visible:outline-none layer-components:focus-visible:ring-inset layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-gray', 'layer-components:[&[data-visually-focused=true]]:ring-inset layer-components:[&[data-visually-focused=true]]:ring-4 layer-components:[&[data-visually-focused=true]]:ring-gray', 'layer-components:[&[data-visually-disabled=true]]:cursor-default layer-components:disabled:cursor-default'), className), "data-compact": compact, "data-visually-focused": rest.visuallyFocused, "data-visually-disabled": rest.visuallyDisabled, "data-interactive": isInteractive }, rest)));
+    return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ ref: ref, className: (0, clsx_1.default)('layer-components:(flex flex-col items-start gap-1 transition pb-2 flex-1 min-h-40px bg-transparent border-none text-start text-inherit text-sm relative z-1 p-0 font-inherit outline-none rounded-t-lg)', !!compact && 'layer-variants:(pb-0)', isInteractive &&
+            (0, clsx_1.default)('layer-components:cursor-pointer layer-components:hover:(bg-gray-blend color-black shadow-sm-inset) layer-components:focus:outline-none', 'layer-components:focus-visible:(outline-none ring-inset ring-4 ring-gray)', 'layer-components:[&[data-visually-focused=true]]:(ring-inset ring-4 ring-gray)', 'layer-components:[&[data-visually-disabled=true]]:(cursor-default) layer-components:disabled:(cursor-default)'), className), "data-compact": compact, "data-visually-focused": rest.visuallyFocused, "data-visually-disabled": rest.visuallyDisabled, "data-interactive": isInteractive }, rest)));
 }
-exports.CardTitle = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:mt-0 layer-components:bg-white layer-components:py-2 layer-components:px-3 layer-components:rounded-lg layer-components:rounded-bl-none layer-components:rounded-tr-none layer-components:w-auto layer-components:mr-auto layer-components:border layer-components:border-solid layer-components:border-gray-dark-blend layer-components:text-md layer-components:max-h-80px layer-components:overflow-hidden layer-components:text-ellipsis layer-components:max-w-full layer-components:text-inherit layer-components:font-semibold layer-components:relative layer-components:z-1 layer-components:transition-colors', 'layer-components:[[data-compact=true]_&]:py-1 layer-components:[[data-compact=true]_&]:text-sm', 'layer-components:[[data-interactive=true]:hover>&]:bg-darken-2');
-const CardContentRoot = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:px-2 layer-components:py-1 layer-components:bg-light-blend layer-components:color-black layer-components:rounded-md layer-components:mx-2 layer-components:my-0.5 layer-components:border layer-components:border-solid layer-components:border-gray-dark-blend layer-components:text-xs layer-components:relative layer-components:z-1', 'layer-variants:[[data-compact=true]_&]:py-0 layer-variants:[[data-compact=true]_&]:px-1 layer-variants:[[data-compact=true]_&]:my-0 layer-variants:[[data-compact=true]_&]:text-xs', 'layer-variants:[&[data-unstyled=true]]:p-0 layer-variants:[&[data-unstyled=true]]:[background:unset] layer-variants:[&[data-unstyled=true]]:border-none');
+exports.CardTitle = (0, hooks_js_1.withClassName)('div', 'layer-components:(flex flex-col gap-1 mt-0 bg-white py-2 px-3 rounded-lg rounded-bl-none rounded-tr-none w-auto mr-auto border border-solid border-gray-dark-blend text-md max-h-80px overflow-hidden text-ellipsis max-w-full text-inherit font-semibold relative z-1 transition-colors)', 'layer-components:[[data-compact=true]_&]:(py-1 text-sm)', 'layer-components:[[data-interactive=true]:hover>&]:(bg-darken-2)');
+const CardContentRoot = (0, hooks_js_1.withClassName)('div', 'layer-components:(flex flex-col gap-1 px-2 py-1 bg-light-blend color-black rounded-md mx-2 my-0.5 border border-solid border-gray-dark-blend text-xs relative z-1)', 'layer-variants:[[data-compact=true]_&]:(py-0 px-1 my-0 text-xs)', 'layer-variants:[&[data-unstyled=true]]:(p-0 [background:unset] border-none)');
 function CardContent(_a) {
     var { unstyled, ref } = _a, rest = __rest(_a, ["unstyled", "ref"]);
     return (0, jsx_runtime_1.jsx)(CardContentRoot, Object.assign({ ref: ref, "data-unstyled": unstyled }, rest));
 }
-exports.CardImage = (0, hooks_js_1.withClassName)(SlotDiv_js_1.SlotDiv, 'layer-components:absolute layer-components:z-0 layer-components:right-0 layer-components:top-0 layer-components:bottom-0 layer-components:w-full layer-components:h-full layer-components:object-cover layer-components:bg-cover layer-components:bg-center');
-exports.CardFooter = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-row layer-components:flex-shrink-0 layer-components:p-1 layer-components:relative layer-components:z-1');
-exports.CardActions = (0, hooks_js_1.withClassName)('div', 'layer-components:ml-0 layer-components:mr-auto layer-components:flex layer-components:flex-row layer-components:gap-2 layer-components:items-center layer-components:bg-white layer-components:rounded-lg layer-components:p-0 layer-components:border layer-components:border-solid layer-components:border-gray-dark-blend');
-exports.CardMenu = (0, hooks_js_1.withClassName)('div', 'layer-components:mr-0 layer-components:ml-auto layer-components:my-auto layer-components:flex layer-components:flex-row layer-components:gap-1 layer-components:items-center layer-components:bg-overlay layer-components:py-0.5 layer-components:rounded-lg layer-components:p-0');
+exports.CardImage = (0, hooks_js_1.withClassName)(SlotDiv_js_1.SlotDiv, 'layer-components:(absolute z-0 right-0 top-0 bottom-0 w-full h-full object-cover bg-cover bg-center)');
+exports.CardFooter = (0, hooks_js_1.withClassName)('div', 'layer-components:(flex flex-row flex-shrink-0 p-1 relative z-1)');
+exports.CardActions = (0, hooks_js_1.withClassName)('div', 'layer-components:(ml-0 mr-auto flex flex-row gap-2 items-center bg-white rounded-lg p-0 border border-solid border-gray-dark-blend)');
+exports.CardMenu = (0, hooks_js_1.withClassName)('div', 'layer-components:(mr-0 ml-auto my-auto flex flex-row gap-1 items-center bg-overlay py-0.5 rounded-lg p-0)');
 exports.cardGridColumns = {
     default: (size) => (size < 480 ? 1 : size < 800 ? 2 : 3),
     small: (size) => size < 320 ? 1 : size < 480 ? 2 : size < 800 ? 3 : 4,

package/dist/cjs/components/checkbox/Checkbox.js

@@ -58,9 +58,9 @@ const clsx_1 = __importDefault(require("clsx"));
 const Icon_js_1 = require("../icon/Icon.js");
 function CheckboxRoot(_a) {
     var { className, checkedMode = 'prominent' } = _a, props = __rest(_a, ["className", "checkedMode"]);
-    return ((0, jsx_runtime_1.jsx)(CheckboxPrimitive.Root, Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:w-28px layer-components:h-28px layer-components:flex-shrink-0 layer-components:relative layer-components:bg-white layer-components:border-default layer-components:transition layer-components:rounded-lg layer-components:shadow-sm', 'layer-components:focus-visible:outline-off layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-primary', checkedMode === 'faded'
-            ? 'layer-components:[&[data-state=checked]]:bg-primary layer-components:[&[data-state=checked]]:animate-checkbox-fade layer-components:[&[data-state=checked]]:animate-forwards'
-            : 'layer-components:[&[data-state=checked]]:bg-primary layer-components:[&[data-state=checked]]:border-primary-dark', 'layer-components:[&:hover:not(:disabled)]:shadow-[0_0_0_1px_var(--color-black)]', 'layer-components:[&:disabled]:bg-transparent layer-components:[&:disabled]:border-gray-light layer-components:[&:disabled]:shadow-none', className) })));
+    return ((0, jsx_runtime_1.jsx)(CheckboxPrimitive.Root, Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:(w-28px h-28px flex-shrink-0 relative bg-white border-default transition rounded-lg shadow-sm)', 'layer-components:focus-visible:(outline-off ring-4 ring-primary)', checkedMode === 'faded'
+            ? 'layer-components:[&[data-state=checked]]:(bg-primary animate-checkbox-fade animate-forwards)'
+            : 'layer-components:[&[data-state=checked]]:(bg-primary border-primary-dark)', 'layer-components:[&:hover:not(:disabled)]:shadow-[0_0_0_1px_var(--color-black)]', 'layer-components:[&:disabled]:(bg-transparent border-gray-light shadow-none)', className) })));
 }
 function CheckboxIndicator(_a) {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);

package/dist/cjs/components/chip/Chip.js

@@ -22,7 +22,7 @@ const clsx_1 = __importDefault(require("clsx"));
 function Chip(_a) {
     var { className, color = 'neutral', asChild, ref } = _a, rest = __rest(_a, ["className", "color", "asChild", "ref"]);
     const Component = asChild ? react_slot_1.Slot : 'div';
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: (0, clsx_1.default)('layer-components:inline-flex layer-components:flex-row layer-components:gap-1 layer-components:items-center layer-components:whitespace-nowrap layer-components:border-light layer-components:border-solid layer-components:border layer-components:rounded-lg layer-components:px-2 layer-components:py-1 layer-components:clor-black', {
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: (0, clsx_1.default)('layer-components:(inline-flex flex-row gap-1 items-center whitespace-nowrap border-light border-solid border rounded-lg px-2 py-1 clor-black)', {
             'layer-variants:bg-primary-wash': color === 'primary',
             'layer-variants:bg-accent-wash': color === 'accent',
         }, className) }, rest)));

package/dist/cjs/components/collapsible/Collapsible.js

@@ -51,7 +51,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const CollapsiblePrimitive = __importStar(require("@radix-ui/react-collapsible"));
 const withClassName_js_1 = require("../../hooks/withClassName.js");
 exports.CollapsibleRoot = CollapsiblePrimitive.Root;
-const CollapsibleContentBase = (0, withClassName_js_1.withClassName)(CollapsiblePrimitive.Content, 'overflow-hidden', 'layer-components:[&[data-state=open]]:animate-radix-collapsible-open-vertical layer-components:[&[data-state=open]]:animate-duration-300 layer-components:[&[data-state=open]]:animate-ease-springy layer-components:[&[data-state=closed]]:animate-radix-collapsible-close-vertical layer-components:[&[data-state=closed]]:animate-duration-300 layer-components:[&[data-state=closed]]:animate-ease-springy', 'layer-variants:[&[data-horizontal][data-state=open]]:animate-radix-collapsible-open-horizontal layer-variants:[&[data-horizontal][data-state=open]]:animate-duration-300 layer-variants:[&[data-horizontal][data-state=open]]:animate-ease-springy layer-variants:[&[data-horizontal][data-state=closed]]:animate-radix-collapsible-close-horizontal layer-variants:[&[data-horizontal][data-state=closed]]:animate-duration-300 layer-variants:[&[data-horizontal][data-state=closed]]:animate-ease-springy', 'layer-variants:[&[data-both][data-state=open]]:animate-radix-collapsible-open-both layer-variants:[&[data-both][data-state=open]]:animate-duration-300 layer-variants:[&[data-both][data-state=open]]:animate-ease-springy layer-variants:[&[data-both][data-state=closed]]:animate-radix-collapsible-close-both layer-variants:[&[data-both][data-state=closed]]:animate-duration-300 layer-variants:[&[data-both][data-state=closed]]:animate-ease-springy');
+const CollapsibleContentBase = (0, withClassName_js_1.withClassName)(CollapsiblePrimitive.Content, 'overflow-hidden', 'layer-components:[&[data-state=open]]:(animate-radix-collapsible-open-vertical animate-duration-300 animate-ease-springy) layer-components:[&[data-state=closed]]:(animate-radix-collapsible-close-vertical animate-duration-300 animate-ease-springy)', 'layer-variants:[&[data-horizontal][data-state=open]]:(animate-radix-collapsible-open-horizontal animate-duration-300 animate-ease-springy) layer-variants:[&[data-horizontal][data-state=closed]]:(animate-radix-collapsible-close-horizontal animate-duration-300 animate-ease-springy)', 'layer-variants:[&[data-both][data-state=open]]:(animate-radix-collapsible-open-both animate-duration-300 animate-ease-springy) layer-variants:[&[data-both][data-state=closed]]:(animate-radix-collapsible-close-both animate-duration-300 animate-ease-springy)');
 // specifically removing className... it's causing problems?
 const CollapsibleContent = function CollapsibleContent(_a) {
     var { ref, horizontal, both } = _a, props = __rest(_a, ["ref", "horizontal", "both"]);

package/dist/cjs/components/contextMenu/contextMenu.js

@@ -57,14 +57,14 @@ const Box_js_1 = require("../box/Box.js");
 exports.ContextMenuRoot = ContextMenuPrimitive.Root;
 const ContextMenuContent = function Content(_a) {
     var { ref, className, onClick } = _a, props = __rest(_a, ["ref", "className", "onClick"]);
-    return ((0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: (0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Content, Object.assign({ className: (0, clsx_1.default)('layer-components:min-w-120px layer-components:bg-white layer-components:rounded-md layer-components:overflow-hidden layer-components:border-gray-dark layer-components:border layer-components:shadow-md layer-components:z-menu', 'layer-components:transform-origin-[var(--radix-context-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-context-menu-content-available-height)] layer-components:overflow-y-auto', 'important:motion-reduce:animate-none', className), onClick: (ev) => {
+    return ((0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: (0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Content, Object.assign({ className: (0, clsx_1.default)('layer-components:(min-w-120px bg-white rounded-md overflow-hidden border-gray-dark border shadow-md z-menu)', 'layer-components:transform-origin-[var(--radix-context-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-context-menu-content-available-height)] overflow-y-auto)', 'important:motion-reduce:animate-none', className), onClick: (ev) => {
                     ev.stopPropagation();
                     onClick === null || onClick === void 0 ? void 0 : onClick(ev);
                 }, ref: ref, alignOffset: -10 }, props)) }) }));
 };
 exports.ContextMenuContent = ContextMenuContent;
-exports.ContextMenuArrow = (0, withClassName_js_1.withClassName)(ContextMenuPrimitive.Arrow, 'layer-components:arrow');
-exports.ContextMenuItem = (0, withClassName_js_1.withClassName)(ContextMenuPrimitive.Item, 'layer-components:flex layer-components:items-center layer-components:py-1 layer-components:px-2 layer-components:relative layer-components:pl-25px layer-components:select-none layer-components:outline-none layer-components:cursor-pointer', 'layer-components:hover:bg-gray layer-components:hover:bg-lighten-3 layer-components:[&[data-highlighted=true]]:bg-gray layer-components:[&[data-highlighted=true]]:bg-lighten-3 layer-components:[&[data-disabled=true]]:opacity-50 layer-components:[&[data-disabled=true]]:cursor-default layer-components:disabled:opacity-50 layer-components:disabled:cursor-default');
+exports.ContextMenuArrow = (0, withClassName_js_1.withClassName)(ContextMenuPrimitive.Arrow, 'layer-components:(arrow)');
+exports.ContextMenuItem = (0, withClassName_js_1.withClassName)(ContextMenuPrimitive.Item, 'layer-components:(flex items-center py-1 px-2 relative pl-25px select-none outline-none cursor-pointer)', 'layer-components:(hover:(bg-gray bg-lighten-3) [&[data-highlighted=true]]:(bg-gray bg-lighten-3) [&[data-disabled=true]]:(opacity-50 cursor-default) disabled:(opacity-50 cursor-default))');
 exports.ContextMenuTrigger = (0, withClassName_js_1.withClassName)(ContextMenuPrimitive.Trigger, '');
 exports.ContextMenu = Object.assign(exports.ContextMenuRoot, {
     Content: exports.ContextMenuContent,

package/dist/cjs/components/datePicker/DatePicker.js

@@ -88,11 +88,11 @@ const MonthRow = (0, hooks_js_1.withClassName)('div', 'flex flex-row justify-bet
 const MonthLabel = (0, hooks_js_1.withClassName)('span', 'text-sm font-bold min-w-0 overflow-hidden text-center text-ellipsis', 'self-center');
 const MonthButton = (0, hooks_js_1.withClassName)(index_js_1.Button, 'self-center');
 const CalendarGrid = (0, hooks_js_1.withClassName)('div', 'grid grid-cols-[repeat(7,var(--day-size,32px))] [grid-auto-rows:var(--day-size,32px)]', 'height-[calc(var(--day-size,32px)*7)] rounded overflow-hidden p-2');
-const CalendarDay = (0, hooks_js_1.withClassName)(calendar_blocks_1.CalendarDay, 'border border-solid border-transparent bg-white mr--1px mb--1px relative color-black', 'flex items-center justify-center transition cursor-pointer', '[&[data-highlighted]]:z-1 [&[data-highlighted]]:outline-accent', 'hover:z-1 hover:outline-accent', 'active:bg-accent-light active:rounded', '[&[data-selected]]:bg-accent [&[data-selected]]:z-2 [&[data-selected]]:rounded', '[&[data-in-range]]:bg-accent-wash [&[data-in-range]]:bg-darken-2 [&[data-in-range]]:rounded-none [&[data-in-range]]:z-1', '[&[data-range-start]]:bg-accent [&[data-range-start]]:rounded-l [&[data-range-start]]:rounded-r-none [&[data-range-start]]:z-1', '[&[data-range-end]]:bg-accent [&[data-range-end]]:rounded-r [&[data-range-end]]:rounded-l-none [&[data-range-end]]:z-1', 'disabled:opacity-50 disabled:cursor-default', 
+const CalendarDay = (0, hooks_js_1.withClassName)(calendar_blocks_1.CalendarDay, 'border border-solid border-transparent bg-white mr--1px mb--1px relative color-black', 'flex items-center justify-center transition cursor-pointer', '[&[data-highlighted]]:(z-1 outline-accent)', 'hover:(z-1 outline-accent)', 'active:(bg-accent-light rounded)', '[&[data-selected]]:(bg-accent z-2 rounded)', '[&[data-in-range]]:(bg-accent-wash bg-darken-2 rounded-none z-1)', '[&[data-range-start]]:(bg-accent rounded-l rounded-r-none z-1)', '[&[data-range-end]]:(bg-accent rounded-r rounded-l-none z-1)', 'disabled:(opacity-50 cursor-default)', 
 // today dot
-"[&[data-today]]:before:content-[''] [&[data-today]]:before:absolute [&[data-today]]:before:left-[2px] [&[data-today]]:before:top-[2px] [&[data-today]]:before:w-[6px] [&[data-today]]:before:h-[6px] [&[data-today]]:before:rounded-lg [&[data-today]]:before:bg-primary", 
+"[&[data-today]]:before:(content-[''] absolute left-[2px] top-[2px] w-[6px] h-[6px] rounded-lg bg-primary)", 
 // calendar edges
-'[&[data-top-edge]]:border-t-gray', '[&[data-bottom-edge]]:border-b-gray', '[&[data-first-column]]:border-l-gray', '[&[data-last-column]]:border-r-gray', '[&[data-day-first]]:border-l-gray [&[data-day-first]]:rounded-tl', '[&[data-day-last]]:border-r-gray [&[data-day-last]]:rounded-br', '[&[data-first-column][data-bottom-edge]]:rounded-bl', '[&[data-last-column][data-bottom-edge]]:rounded-br', '[&[data-first-column][data-top-edge]]:rounded-tl', '[&[data-last-column][data-top-edge]]:rounded-tr', '[&[data-different-month]]:[visibility:hidden]');
+'[&[data-top-edge]]:(border-t-gray)', '[&[data-bottom-edge]]:(border-b-gray)', '[&[data-first-column]]:(border-l-gray)', '[&[data-last-column]]:(border-r-gray)', '[&[data-day-first]]:(border-l-gray rounded-tl)', '[&[data-day-last]]:(border-r-gray rounded-br)', '[&[data-first-column][data-bottom-edge]]:rounded-bl', '[&[data-last-column][data-bottom-edge]]:rounded-br', '[&[data-first-column][data-top-edge]]:rounded-tl', '[&[data-last-column][data-top-edge]]:rounded-tr', '[&[data-different-month]]:[visibility:hidden]');
 const DayLabel = (0, hooks_js_1.withClassName)('div', 'flex items-center justify-center text-sm color-gray-dark');
 const DayLabels = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DayLabel, { children: "S" }), (0, jsx_runtime_1.jsx)(DayLabel, { children: "M" }), (0, jsx_runtime_1.jsx)(DayLabel, { children: "T" }), (0, jsx_runtime_1.jsx)(DayLabel, { children: "W" }), (0, jsx_runtime_1.jsx)(DayLabel, { children: "T" }), (0, jsx_runtime_1.jsx)(DayLabel, { children: "F" }), (0, jsx_runtime_1.jsx)(DayLabel, { children: "S" })] }));
 const RangeLayout = (0, hooks_js_1.withClassName)('div', 'grid [grid-template-areas:"prevMonth_leftMonth_nextMonth""leftGrid_leftGrid_leftGrid"] [grid-template-columns:auto_1fr_auto]', '[grid-template-rows:auto_1fr] gap-2', 'sm:grid-areas-[prevMonth_leftMonth_rightMonth_nextMonth]-[leftGrid_leftGrid_rightGrid_rightGrid] sm:[grid-template-columns:auto_1fr_1fr_auto]');

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

@@ -65,11 +65,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 +163,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 +174,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 +200,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/dropdownMenu/DropdownMenu.js

@@ -54,20 +54,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/editableText/EditableText.js

@@ -51,6 +51,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/emojiPicker/EmojiPicker.js

@@ -25,22 +25,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 +48,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/forms/CheckboxField.js

@@ -26,6 +26,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/NumberStepperField.js

@@ -27,6 +27,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/horizontalList/HorizontalList.js

@@ -120,7 +120,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/imageUploader/ImageUploader.js

@@ -183,18 +183,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/input/Input.js

@@ -21,7 +21,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/layouts/PageContent.js

@@ -35,6 +35,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

@@ -20,6 +20,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