@a-type/ui 2.7.6 → 2.8.1

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

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

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

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

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

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

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

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

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

@@ -51,27 +51,27 @@ const react_slot_1 = require("@radix-ui/react-slot");
 const clsx_1 = __importStar(require("clsx"));
 const hooks_js_1 = require("../../hooks.js");
 const index_js_1 = require("../icon/index.js");
-exports.navBarItemClass = (0, clsx_1.default)('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');
+exports.navBarItemClass = (0, clsx_1.default)('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)');
 const NavBarItem = function NavBarItem(_a) {
     var { ref, asChild, className, active, color } = _a, rest = __rest(_a, ["ref", "asChild", "className", "active", "color"]);
     const Comp = asChild ? react_slot_1.Slot : 'button';
     return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ ref: ref, className: (0, clsx_1.default)(exports.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)));
 };
 exports.NavBarItem = NavBarItem;
-exports.NavBarItemIconWrapper = (0, hooks_js_1.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)]');
-exports.NavBarItemText = (0, hooks_js_1.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');
+exports.NavBarItemIconWrapper = (0, hooks_js_1.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)]');
+exports.NavBarItemText = (0, hooks_js_1.withClassName)('span', 'layer-components:(overflow-hidden inline-block text-xxs whitespace-nowrap text-ellipsis) layer-components:md:(text-md leading-normal)');
 const NavBarItemIcon = function NavBarItemIcon(_a) {
     var { ref, children, asChild, className, name = 'placeholder' } = _a, rest = __rest(_a, ["ref", "children", "asChild", "className", "name"]);
     const Comp = asChild ? react_slot_1.Slot : index_js_1.Icon;
-    return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ name: name, className: (0, clsx_1.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 ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ name: name, className: (0, clsx_1.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 })));
 };
 exports.NavBarItemIcon = NavBarItemIcon;
-exports.NavBarItemPip = (0, hooks_js_1.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');
-exports.NavBarRoot = (0, hooks_js_1.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');
+exports.NavBarItemPip = (0, hooks_js_1.withClassName)('div', 'layer-components:(absolute top-6px right-6px w-6px h-6px rounded-lg bg-attention shadow-sm)');
+exports.NavBarRoot = (0, hooks_js_1.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)');
 exports.NavBar = Object.assign(exports.NavBarRoot, {
     Item: exports.NavBarItem,
     ItemIcon: exports.NavBarItemIcon,

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

@@ -20,6 +20,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 function Note(_a) {
     var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, clsx_1.default)(className) }, rest, { children: (0, jsx_runtime_1.jsxs)("div", { className: "layer-components:flex layer-components:flex-row", children: [(0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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` })] }), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, clsx_1.default)(className) }, rest, { children: (0, jsx_runtime_1.jsxs)("div", { className: "layer-components:(flex flex-row)", children: [(0, jsx_runtime_1.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 }), (0, jsx_runtime_1.jsxs)("div", { className: "layer-components:(flex flex-col items-stretch justify-stretch flex-[0_0_20px])", "aria-hidden": true, children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { className: "layer-components:(absolute w-0.5px bg-primary-dark h-27px rotate--45 left-9px top--3px transform-origin-cc)" }), (0, jsx_runtime_1.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)` })] }), (0, jsx_runtime_1.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/cjs/components/numberStepper/NumberStepper.js

@@ -53,9 +53,9 @@ function NumberStepper(_a) {
     const canDecrement = !disabled &&
         (steps ? index > 0 : true) &&
         (min === undefined || value > min);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('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 ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('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: [(0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "ghost", onClick: decrement, disabled: !canDecrement, "aria-label": "Decrement value", children: (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "minus" }) }), (0, jsx_runtime_1.jsx)("div", { className: "w-80px text-center", children: renderValue(value) }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "ghost", onClick: increment, disabled: !canIncrement, "aria-label": "Increment value", children: (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "plus" }) })] })));
 }
 //# sourceMappingURL=NumberStepper.js.map

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

@@ -33,9 +33,9 @@ function Peek({ peekHeight = 120, children, className }) {
     }, [peekHeight]);
     const id = (0, react_1.useId)();
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('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: [(0, jsx_runtime_1.jsx)("div", { ref: contentRef, id: id, children: children }), isPeekable && ((0, jsx_runtime_1.jsx)("button", { "data-state": open ? 'open' : 'closed', className: (0, clsx_1.default)('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: [(0, jsx_runtime_1.jsx)("div", { ref: contentRef, id: id, children: children }), isPeekable && ((0, jsx_runtime_1.jsx)("button", { "data-state": open ? 'open' : 'closed', className: (0, clsx_1.default)('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/cjs/components/popover/Popover.js

@@ -55,9 +55,9 @@ const PopoverPrimitive = __importStar(require("@radix-ui/react-popover"));
 const clsx_1 = __importDefault(require("clsx"));
 const withClassName_js_1 = require("../../hooks/withClassName.js");
 const Box_js_1 = require("../box/Box.js");
-const StyledContent = (0, withClassName_js_1.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 = (0, withClassName_js_1.withClassName)(PopoverPrimitive.Arrow, 'layer-components:arrow');
-const StyledClose = (0, withClassName_js_1.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 = (0, withClassName_js_1.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 = (0, withClassName_js_1.withClassName)(PopoverPrimitive.Arrow, 'layer-components:(arrow)');
+const StyledClose = (0, withClassName_js_1.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
 exports.PopoverRoot = PopoverPrimitive.Root;
 exports.PopoverTrigger = PopoverPrimitive.Trigger;

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

@@ -49,8 +49,8 @@ exports.Progress = exports.ProgressIndicator = exports.ProgressRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ProgressPrimitive = __importStar(require("@radix-ui/react-progress"));
 const hooks_js_1 = require("../../hooks.js");
-exports.ProgressRoot = (0, hooks_js_1.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');
-exports.ProgressIndicator = (0, hooks_js_1.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');
+exports.ProgressRoot = (0, hooks_js_1.withClassName)(ProgressPrimitive.Root, 'layer-components:(w-full relative overflow-hidden border border-default rounded-lg)');
+exports.ProgressIndicator = (0, hooks_js_1.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 ((0, jsx_runtime_1.jsx)(exports.ProgressRoot, Object.assign({}, props, { value: value, max: max, ref: ref, children: (0, jsx_runtime_1.jsx)(exports.ProgressIndicator, { "data-color": color, 

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

@@ -6,6 +6,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tipTapReadonlyClassName = exports.tipTapClassName = void 0;
 const clsx_1 = __importDefault(require("clsx"));
-exports.tipTapClassName = (0, clsx_1.default)('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');
-exports.tipTapReadonlyClassName = (0, clsx_1.default)('[&_.ProseMirror]:bg-transparent [&_.ProseMirror]:border-none [&_.ProseMirror]:shadow-none', '[&_.ProseMirror:focus]:outline-none [&_.ProseMirror:focus]:shadow-none [&_.ProseMirror:focus]:bg-transparent');
+exports.tipTapClassName = (0, clsx_1.default)('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)');
+exports.tipTapReadonlyClassName = (0, clsx_1.default)('[&_.ProseMirror]:(bg-transparent border-none shadow-none)', '[&_.ProseMirror:focus]:(outline-none shadow-none bg-transparent)');
 //# sourceMappingURL=index.js.map

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

@@ -57,8 +57,8 @@ const ScrollAreaRoot = function ScrollAreaRoot(_a) {
 };
 exports.ScrollAreaRoot = ScrollAreaRoot;
 exports.ScrollAreaViewport = (0, hooks_js_1.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]');
-exports.ScrollAreaScrollbarRoot = (0, hooks_js_1.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');
-exports.ScrollAreaThumb = (0, hooks_js_1.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');
+exports.ScrollAreaScrollbarRoot = (0, hooks_js_1.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)');
+exports.ScrollAreaThumb = (0, hooks_js_1.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)');
 const ScrollAreaScrollbar = function ScrollAreaScrollbar(_a) {
     var { ref } = _a, props = __rest(_a, ["ref"]);
     return ((0, jsx_runtime_1.jsx)(exports.ScrollAreaScrollbarRoot, Object.assign({}, props, { ref: ref, children: (0, jsx_runtime_1.jsx)(exports.ScrollAreaThumb, {}) })));

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

@@ -68,7 +68,7 @@ const SelectItem = (_a) => {
     return ((0, jsx_runtime_1.jsxs)(exports.SelectItemRoot, Object.assign({ className: className }, props, { ref: forwardedRef, children: [(0, jsx_runtime_1.jsx)(SelectPrimitive.ItemText, { children: children }), (0, jsx_runtime_1.jsx)(exports.SelectItemIndicator, {})] })));
 };
 exports.SelectItem = SelectItem;
-exports.SelectItemRoot = (0, withClassName_js_1.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');
+exports.SelectItemRoot = (0, withClassName_js_1.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)');
 exports.SelectItemIndicatorRoot = (0, withClassName_js_1.withClassName)(SelectPrimitive.ItemIndicator, 'absolute left-0 w-25px inline-flex items-center justify-center');
 exports.SelectItemIndicator = withNoNativeRender((props) => ((0, jsx_runtime_1.jsx)(exports.SelectItemIndicatorRoot, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "check" }) }))));
 exports.SelectItemText = (0, withClassName_js_1.withClassName)(SelectPrimitive.ItemText, '');
@@ -81,7 +81,7 @@ const SelectGroup = (props) => {
 };
 exports.SelectGroup = SelectGroup;
 exports.SelectRoot = SelectPrimitive.Root;
-exports.selectTriggerClassName = (0, clsx_1.default)((0, classes_js_1.getButtonClassName)({ color: 'default' }), 'layer-components:[all:unset] layer-components:inline-flex layer-components:[&[data-placeholder]]:color-gray-dark');
+exports.selectTriggerClassName = (0, clsx_1.default)((0, classes_js_1.getButtonClassName)({ color: 'default' }), 'layer-components:([all:unset] inline-flex [&[data-placeholder]]:color-gray-dark)');
 exports.SelectTriggerBase = withNoNativeRender((0, withClassName_js_1.withClassName)(SelectPrimitive.Trigger, exports.selectTriggerClassName));
 exports.UnstyledSelectTrigger = withNoNativeRender(SelectPrimitive.Trigger);
 const SelectTrigger = function SelectTrigger(_a) {
@@ -103,7 +103,7 @@ const contentStyle = {
 const viewportStyle = { '--local-corner-scale': '0.9' };
 exports.SelectContent = withPassthroughNativeRender((_a) => {
     var { ref: forwardedRef, children, inDialog, className } = _a, props = __rest(_a, ["ref", "children", "inDialog", "className"]);
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: (0, jsx_runtime_1.jsxs)(SelectPrimitive.Content, Object.assign({ className: (0, clsx_1.default)('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: [(0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { className: "flex items-center justify-center h-25px bg-white color-primary-dark cursor-default", children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron", className: "rotate-180" }) }), (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, { style: viewportStyle, children: children }), (0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, { className: "flex items-center justify-center h-25px bg-white color-primary-dark cursor-default", children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron" }) })] })) }) }));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: (0, jsx_runtime_1.jsxs)(SelectPrimitive.Content, Object.assign({ className: (0, clsx_1.default)('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: [(0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { className: "flex items-center justify-center h-25px bg-white color-primary-dark cursor-default", children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron", className: "rotate-180" }) }), (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, { style: viewportStyle, children: children }), (0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, { className: "flex items-center justify-center h-25px bg-white color-primary-dark cursor-default", children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron" }) })] })) }) }));
 });
 const NativeSelect = (_a) => {
     var { ref: forwardedRef, className } = _a, props = __rest(_a, ["ref", "className"]);

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

@@ -49,10 +49,10 @@ exports.Slider = exports.SliderThumb = exports.SliderRange = exports.SliderTrack
 const jsx_runtime_1 = require("react/jsx-runtime");
 const SliderPrimitive = __importStar(require("@radix-ui/react-slider"));
 const hooks_js_1 = require("../../hooks.js");
-exports.SliderRoot = (0, hooks_js_1.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');
-exports.SliderTrack = (0, hooks_js_1.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');
-exports.SliderRange = (0, hooks_js_1.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');
-exports.SliderThumb = (0, hooks_js_1.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');
+exports.SliderRoot = (0, hooks_js_1.withClassName)(SliderPrimitive.Root, 'layer-components:(relative flex items-center select-none touch-none w-full h-30px translate-z-0)');
+exports.SliderTrack = (0, hooks_js_1.withClassName)(SliderPrimitive.Track, 'layer-components:(bg-transparent relative grow rounded-lg h-9px border borderpx border-solid border-black)');
+exports.SliderRange = (0, hooks_js_1.withClassName)(SliderPrimitive.Range, 'layer-components:(absolute bg-accent rounded-lg h-full)', 'layer-variants:[&[data-color=primary]]:bg-primary');
+exports.SliderThumb = (0, hooks_js_1.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)');
 exports.Slider = Object.assign(function Slider(_a) {
     var { ref, label, color } = _a, props = __rest(_a, ["ref", "label", "color"]);
     return ((0, jsx_runtime_1.jsxs)(exports.SliderRoot, Object.assign({ ref: ref }, props, { children: [(0, jsx_runtime_1.jsx)(exports.SliderTrack, { children: (0, jsx_runtime_1.jsx)(exports.SliderRange, { "data-color": color }) }), (0, jsx_runtime_1.jsx)(exports.SliderThumb, { "aria-label": label, "data-color": color })] })));

package/dist/cjs/components/tabs/tabs.js

@@ -55,17 +55,17 @@ const clsx_1 = __importDefault(require("clsx"));
 const withClassName_js_1 = require("../../hooks/withClassName.js");
 exports.TabsRoot = (0, withClassName_js_1.withClassName)(TabsPrimitive.Root, '');
 exports.TabsList = (0, withClassName_js_1.withClassName)(TabsPrimitive.List, 'flex flex-row flex-wrap py-2 px-2 items-start gap-2');
-exports.TabsTriggerBase = (0, withClassName_js_1.withClassName)(TabsPrimitive.Trigger, 'layer-components:flex layer-components:flex-row layer-components:items-center layer-components:cursor-pointer layer-components:justify-center layer-components:gap-2 layer-components:color-black layer-components:py-1 layer-components:px-5 layer-components:bg-wash layer-components:text-md layer-components:min-w-100px layer-components:rounded-lg layer-components:border-default layer-components:font-semibold layer-components:color-gray-ink layer-components:border-gray-dark layer-components:transition-all layer-components:cursor-pointer layer-components:select-none layer-components:font-inherit layer-components:flex-shrink-0 layer-components:shadow-sm', 'layer-components:hover:bg-darken-1 layer-components:hover:ring-4 layer-components:hover:ring-bg', 'layer-components:focus-visible:bg-darken-1 layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-bg layer-components:focus-visible:outline-off', '[&[data-state=active]]:bg-[var(--bg)] [&[data-state=active]]:font-semibold [&[data-state=active]]:color-black [&[data-state=active]]:cursor-default [&[data-state=active]]:hover:bg-darken-1 [&[data-state=active]]:relative [&[data-state=active]]:z-1');
+exports.TabsTriggerBase = (0, withClassName_js_1.withClassName)(TabsPrimitive.Trigger, 'layer-components:(flex flex-row items-center cursor-pointer justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border-default font-semibold color-gray-ink border-gray-dark transition-all cursor-pointer select-none font-inherit flex-shrink-0 shadow-sm)', 'layer-components:hover:(bg-darken-1 ring-4 ring-bg)', 'layer-components:focus-visible:(bg-darken-1 ring-4 ring-bg outline-off)', '[&[data-state=active]]:(bg-[var(--bg)] font-semibold color-black cursor-default hover:bg-darken-1 relative z-1)');
 const colorClasses = {
-    default: 'layer-variants:[--bg:var(--color-white)]',
-    primary: 'layer-variants:[--bg:var(--color-primary)]',
+    default: 'layer-variants:([--bg:var(--color-white)])',
+    primary: 'layer-variants:([--bg:var(--color-primary)])',
 };
 const TabsTrigger = (_a) => {
     var { className, color = 'primary' } = _a, props = __rest(_a, ["className", "color"]);
     return ((0, jsx_runtime_1.jsx)(exports.TabsTriggerBase, Object.assign({ className: (0, clsx_1.default)(colorClasses[color], `btn-color-${color}`, className) }, props)));
 };
 exports.TabsTrigger = TabsTrigger;
-exports.TabsContent = (0, withClassName_js_1.withClassName)(TabsPrimitive.Content, 'layer-components:focus:outline-none layer-components:focus-visible:outline-none layer-components:focus-visible:ring-inset layer-components:focus-visible:ring-2 layer-components:focus-visible:ring-gray');
+exports.TabsContent = (0, withClassName_js_1.withClassName)(TabsPrimitive.Content, 'layer-components:(focus:outline-none focus-visible:(outline-none ring-inset ring-2 ring-gray))');
 exports.Tabs = Object.assign(exports.TabsRoot, {
     List: exports.TabsList,
     Trigger: exports.TabsTrigger,

package/dist/cjs/components/textArea/TextArea.js

@@ -61,7 +61,7 @@ const TextArea = function TextArea(_a) {
         }
     }, [autoSelect, onFocus]);
     const randomPlaceholder = (0, useRotatingShuffledValue_js_1.useRotatingShuffledValue)(placeholders !== null && placeholders !== void 0 ? placeholders : [], placeholdersIntervalMs);
-    return ((0, jsx_runtime_1.jsx)("textarea", Object.assign({ ref: finalRef, className: (0, clsx_1.default)(index_js_1.inputClassName, 'layer-components:[font-family:inherit] layer-components:color-inherit layer-components:overflow-hidden layer-components:resize-none', 'layer-variants:rounded-lg layer-variants:px-4 layer-variants:py-4', {
+    return ((0, jsx_runtime_1.jsx)("textarea", Object.assign({ ref: finalRef, className: (0, clsx_1.default)(index_js_1.inputClassName, 'layer-components:([font-family:inherit] color-inherit overflow-hidden resize-none)', 'layer-variants:(rounded-lg px-4 py-4)', {
             'layer-components:[resize:vertical]': !autoSize,
             'layer-components:[resize:none]': autoSize,
         }, className), rows: autoSize ? 1 : rows, onChange: handleChange, onFocus: handleFocus, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : randomPlaceholder }, rest)));

package/dist/cjs/components/toggleGroup/toggleGroup.js

@@ -37,8 +37,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleGroup = exports.ToggleGroupItem = exports.ToggleGroupRoot = void 0;
 const ToggleGroupPrimitive = __importStar(require("@radix-ui/react-toggle-group"));
 const withClassName_js_1 = require("../../hooks/withClassName.js");
-exports.ToggleGroupRoot = (0, withClassName_js_1.withClassName)(ToggleGroupPrimitive.Root, 'layer-components:inline-flex layer-components:bg-gray-wash layer-components:bg-darken-1 layer-components:rounded-lg layer-components:gap-sm');
-exports.ToggleGroupItem = (0, withClassName_js_1.withClassName)(ToggleGroupPrimitive.Item, 'layer-components:rounded-full layer-components:color-black layer-components:bg-gray layer-components:bg-lighten-3 layer-components:py-sm layer-components:px-md layer-components:flex layer-components:items-center layer-components:border-transparent layer-components:border-1 layer-components:border-solid layer-components:justify-center layer-components:cursor-pointer', 'layer-components:hover:bg-lighten-2 layer-components:active:bg-lighten-2 layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-primary layer-components:focus-visible:outline-off', 'layer-components:[&[data-state=on]]:bg-primary-light layer-components:[&[data-state=on]]:border-default');
+exports.ToggleGroupRoot = (0, withClassName_js_1.withClassName)(ToggleGroupPrimitive.Root, 'layer-components:(inline-flex bg-gray-wash bg-darken-1 rounded-lg gap-sm)');
+exports.ToggleGroupItem = (0, withClassName_js_1.withClassName)(ToggleGroupPrimitive.Item, 'layer-components:(rounded-full color-black bg-gray bg-lighten-3 py-sm px-md flex items-center border-transparent border-1 border-solid justify-center cursor-pointer)', 'layer-components:(hover:bg-lighten-2 active:bg-lighten-2 focus-visible:(ring-4 ring-primary outline-off))', 'layer-components:[&[data-state=on]]:(bg-primary-light border-default)');
 exports.ToggleGroup = Object.assign(exports.ToggleGroupRoot, {
     Item: exports.ToggleGroupItem,
 });

package/dist/cjs/components/tooltip/Tooltip.js

@@ -56,10 +56,10 @@ const clsx_1 = __importDefault(require("clsx"));
 const Box_js_1 = require("../box/Box.js");
 function Content(_a) {
     var { children, className, color = 'contrast' } = _a, props = __rest(_a, ["children", "className", "color"]);
-    return ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: (0, jsx_runtime_1.jsxs)(TooltipPrimitive.Content, Object.assign({ className: (0, clsx_1.default)('layer-components:relative layer-components:rounded-sm layer-components:py-2 layer-components:px-3 layer-components:text-sm layer-components:leading-tight layer-components:shadow-sm layer-components:select-none layer-components:hidden layer-components:z-tooltip', '[&[data-state=delayed-open]]:flex', '[&[data-state=instant-open]]:flex', 'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]', 'layer-components:[&[data-state=delayed-open]]:animate-popover-in', {
-                    'layer-variants:bg-black layer-variants:color-white': color === 'contrast',
-                    'layer-variants:bg-white layer-variants:color-black': color === 'white' || color === 'neutral',
-                    'layer-variants:bg-attention-ink layer-variants:color-white': color === 'attention',
+    return ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: (0, jsx_runtime_1.jsxs)(TooltipPrimitive.Content, Object.assign({ className: (0, clsx_1.default)('layer-components:(relative rounded-sm py-2 px-3 text-sm leading-tight shadow-sm select-none hidden z-tooltip)', '[&[data-state=delayed-open]]:flex', '[&[data-state=instant-open]]:flex', 'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]', 'layer-components:[&[data-state=delayed-open]]:animate-popover-in', {
+                    'layer-variants:(bg-black color-white)': color === 'contrast',
+                    'layer-variants:(bg-white color-black)': color === 'white' || color === 'neutral',
+                    'layer-variants:(bg-attention-ink color-white)': color === 'attention',
                 }, className) }, props, { children: [children, (0, jsx_runtime_1.jsx)(TooltipPrimitive.Arrow, { className: "layer-components:arrow" })] })) }) }));
 }
 exports.TooltipProvider = TooltipPrimitive.Provider;

package/dist/cjs/components/typography/typography.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.P = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;
 const withClassName_js_1 = require("../../hooks/withClassName.js");
 const baseHeadingClass = 'layer-components:my-0';
-exports.H1 = (0, withClassName_js_1.withClassName)('h1', baseHeadingClass, 'layer-components:font-title layer-components:text-2xl layer-components:font-semibold layer-components:color-inherit layer-components:color-darken-1');
-exports.H2 = (0, withClassName_js_1.withClassName)('h2', baseHeadingClass, 'layer-components:text-lg layer-components:font-title layer-components:font-bold layer-components:color-inherit layer-components:color-lighten-1');
-exports.H3 = (0, withClassName_js_1.withClassName)('h3', baseHeadingClass, 'layer-components:font-title layer-components:text-md layer-components:font-500 layer-components:color-inherit layer-components:color-lighten-2');
-exports.H4 = (0, withClassName_js_1.withClassName)('h4', baseHeadingClass, 'layer-components:text-xs layer-components:uppercase layer-components:color-inherit layer-components:color-lighten-2');
+exports.H1 = (0, withClassName_js_1.withClassName)('h1', baseHeadingClass, 'layer-components:(font-title text-2xl font-semibold color-inherit color-darken-1)');
+exports.H2 = (0, withClassName_js_1.withClassName)('h2', baseHeadingClass, 'layer-components:(text-lg font-title font-bold color-inherit color-lighten-1)');
+exports.H3 = (0, withClassName_js_1.withClassName)('h3', baseHeadingClass, 'layer-components:(font-title text-md font-500 color-inherit color-lighten-2)');
+exports.H4 = (0, withClassName_js_1.withClassName)('h4', baseHeadingClass, 'layer-components:(text-xs uppercase color-inherit color-lighten-2)');
 exports.H5 = (0, withClassName_js_1.withClassName)('h5', baseHeadingClass);
-exports.P = (0, withClassName_js_1.withClassName)('p', 'layer-components:my-0 layer-components:leading-normal');
+exports.P = (0, withClassName_js_1.withClassName)('p', 'layer-components:(my-0 leading-normal)');
 //# sourceMappingURL=typography.js.map