@a-type/ui 0.5.3 → 0.6.1

package/README.md

@@ -4,19 +4,16 @@ My personal UI component library. This exists mostly to reduce the startup cost
 
 ## How to use
 
-Install `@a-type/ui unocss @unocss/transformer-variant-group`
+Install `@a-type/ui unocss`
 
 In your `uno.config.ts`:
 
 ```ts
 import { defineConfig } from 'unocss';
-import variantGroup from '@unocss/transformer-variant-group';
 import atype from '@a-type/ui/uno-preset';
 
 export default defineConfig({
 	presets: [atype()],
-	// required to support styling in this library
-	transformers: [variantGroup()],
 });
 ```
 
@@ -31,6 +28,10 @@ optimizeDeps: {
 
 Then, styles from library components should be properly added to your CSS.
 
+### Alternative: import full compiled CSS
+
+Rather than configuring your build pipeline to include this library's source files, you can opt to import the entire CSS needed to style it from `@a-type/ui/css`. However, this will be less efficient; when integrating with your build pipeline, components which aren't used won't have CSS included in your final build.
+
 ### Customizing theme colors
 
 To customize colors, either override the base palettes or the theme colors using CSS custom property declarations in a preflight. Base palettes are used by theme colors to compose 'semantic' colors like "primary."

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

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

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

@@ -44,6 +44,6 @@ exports.ActionButton = (0, react_1.forwardRef)(function ActionButton(_a, ref) {
     if (!render && !visible) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(collapsible_js_1.CollapsibleRoot, Object.assign({ open: !visible ? false : render }, { children: (0, jsx_runtime_1.jsx)(collapsible_js_1.CollapsibleContent, Object.assign({ "data-horizontal": true }, { children: (0, jsx_runtime_1.jsxs)(Button_js_1.Button, Object.assign({ ref: ref, size: "small", className: (0, classnames_1.default)('important:(border-gray7 font-normal whitespace-nowrap m-2 flex flex-row gap-2 items-center h-30px rounded-15px mx-1)', 'hover:bg-gray2', className) }, rest, { children: [icon, children] })) })) })));
+    return ((0, jsx_runtime_1.jsx)(collapsible_js_1.CollapsibleRoot, Object.assign({ open: !visible ? false : render }, { children: (0, jsx_runtime_1.jsx)(collapsible_js_1.CollapsibleContent, Object.assign({ "data-horizontal": true }, { children: (0, jsx_runtime_1.jsxs)(Button_js_1.Button, Object.assign({ ref: ref, size: "small", className: (0, classnames_1.default)('important:border-gray7 important:font-normal important:whitespace-nowrap important:m-2 important:flex important:flex-row important:gap-2 important:items-center important:h-30px important:rounded-15px important:mx-1', 'hover:bg-gray2', className) }, rest, { children: [icon, children] })) })) })));
 });
 //# sourceMappingURL=ActionButton.js.map

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

@@ -22,8 +22,8 @@ const icon_js_1 = require("../icon.js");
 function Avatar(_a) {
     var { className, popIn = true, imageSrc, name } = _a, rest = __rest(_a, ["className", "popIn", "imageSrc", "name"]);
     const empty = !name && !imageSrc;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-pop": popIn, className: (0, classnames_1.default)('layer-components:(flex items-center justify-center rounded-full border-default p-2px overflow-hidden w-24px h-24px 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-gray2)', className) }, rest, { children: [!empty && (0, jsx_runtime_1.jsx)(AvatarContent, { name: name, imageSrc: imageSrc }), empty && (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "profile" })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-pop": popIn, className: (0, classnames_1.default)('layer-components:flex layer-components:items-center layer-components:justify-center layer-components:rounded-full layer-components:border-default layer-components:p-2px layer-components:overflow-hidden layer-components:w-24px layer-components:h-24px 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-gray2)', className) }, rest, { children: [!empty && (0, jsx_runtime_1.jsx)(AvatarContent, { name: name, imageSrc: imageSrc }), empty && (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "profile" })] })));
 }
 exports.Avatar = Avatar;
 function AvatarContent({ name, imageSrc, }) {

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

@@ -7,26 +7,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getButtonClassName = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 function getButtonClassName({ color, size, toggled, align, }) {
-    return (0, classnames_1.default)('layer-components:(px-4 py-2 bg-[var(--bg)] [--webkit-tap-highlight-color:transparent] [line-height:1] text-size-md font-sans border border-solid border-transparent rounded-full cursor-pointer font-bold flex flex-row gap-1 items-center relative overflow-visible select-none all:transition duration-200 shadow-none whitespace-nowrap)', 'layer-components:hover:(bg-[var(--hover)] shadow-[0_0_0_6px_var(--hover)])', 'layer-components:focus:outline-off', 'layer-components:focus-visible:(outline-off shadow-[0_0_0_6px_var(--focus,var(--hover))])', 'layer-components:active:(shadow-[0_0_0_6px_var(--active)] bg-[var(--active)])', 'important:disabled:(opacity-50 cursor-default bg-[var(--bg)] shadow-none)', 'important:[&[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'], `size-${size !== null && size !== void 0 ? size : 'default'}`, toggled && toggledClass, align && aligns[align], 
+    return (0, classnames_1.default)('layer-components:px-4 layer-components:py-2 layer-components:bg-[var(--bg)] layer-components:[--webkit-tap-highlight-color:transparent] layer-components:[line-height:1] layer-components:text-size-md layer-components:font-sans layer-components:border layer-components:border-solid layer-components:border-transparent layer-components:rounded-full layer-components:cursor-pointer layer-components:font-bold layer-components:flex layer-components:flex-row layer-components:gap-1 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:shadow-none layer-components:whitespace-nowrap', 'layer-components:hover:bg-[var(--hover)] layer-components:hover:shadow-[0_0_0_6px_var(--hover)]', 'layer-components:focus:outline-off', 'layer-components:focus-visible:outline-off layer-components:focus-visible:shadow-[0_0_0_6px_var(--focus,var(--hover))]', 'layer-components:active:shadow-[0_0_0_6px_var(--active)] layer-components:active:bg-[var(--active)]', 'important:disabled:opacity-50 important:disabled:cursor-default important:disabled:bg-[var(--bg)] important:disabled:shadow-none', 'important:[&[data-disabled=true]]:opacity-50 important:[&[data-disabled=true]]:cursor-default important:[&[data-disabled=true]]:bg-[var(--bg)] important:[&[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'], `size-${size !== null && size !== void 0 ? size : 'default'}`, toggled && toggledClass, align && aligns[align], 
     // compound variants
     color === 'ghost' && toggled && 'layer-variants:bg-primary-wash');
 }
 exports.getButtonClassName = getButtonClassName;
 const colors = {
-    primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary-light)] [--hover:var(--color-primary)] [--focus:var(--color-primary)] [--active:var(--color-primary)] color-black border-black focus-visible:([--bg:var(--color-primary)]))`,
-    accent: `layer-variants:[&.btn-color-accent]:([--bg:var(--color-accent-wash)] [--hover:var(--color-accent-light)] [--focus:var(--color-accent-light)] [--active:var(--color-accent-light)] color-black border-black focus-visible:([--bg:var(--color-accent-light)]))`,
-    default: `layer-variants:[&.btn-color-default]:([--bg:var(--color-white)] [--hover:var(--color-gray-2)] [--focus:var(--color-gray-7)] [--active:var(--color-gray-3)] color-black border-black)`,
-    ghost: `layer-variants:[&.btn-color-ghost]:([--bg:transparent] [--hover:var(--color-gray-blend)] [--focus:var(--color-gray-7)] [--active:var(--color-gray-dark-blend)] color-dark-blend hover:([--bg:var(--color-gray-blend)]) focus-visible:([--bg:var(--color-gray-blend)] [--hover:var(--color-gray-7)]))`,
-    destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention-light)] [--hover:var(--color-attention-light)] [--focus:var(--color-attention-light)] [--active:var(--color-attention-light)] border-black color-black hover:([--bg:var(--colors-attention)]))`,
-    ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:([--bg:transparent] [--hover:var(--color-attention-light)] [--focus:var(--color-attention-light)] [--active:var(-color-attention-light)] color-attention-dark)`,
-    contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] [--hover:var(--color-gray-7)] [--focus:var(--color-gray-7)] [--active:var(--color-gray-6)] color-white border-black)`,
+    primary: `layer-variants:[&.btn-color-primary]:[--bg:var(--color-primary-light)] layer-variants:[&.btn-color-primary]:[--hover:var(--color-primary)] layer-variants:[&.btn-color-primary]:[--focus:var(--color-primary)] layer-variants:[&.btn-color-primary]:[--active:var(--color-primary)] layer-variants:[&.btn-color-primary]:color-black layer-variants:[&.btn-color-primary]:border-black layer-variants:[&.btn-color-primary]:focus-visible:([--bg:var(--color-primary)])`,
+    accent: `layer-variants:[&.btn-color-accent]:[--bg:var(--color-accent-wash)] layer-variants:[&.btn-color-accent]:[--hover:var(--color-accent-light)] layer-variants:[&.btn-color-accent]:[--focus:var(--color-accent-light)] layer-variants:[&.btn-color-accent]:[--active:var(--color-accent-light)] layer-variants:[&.btn-color-accent]:color-black layer-variants:[&.btn-color-accent]:border-black layer-variants:[&.btn-color-accent]:focus-visible:([--bg:var(--color-accent-light)])`,
+    default: `layer-variants:[&.btn-color-default]:[--bg:var(--color-white)] layer-variants:[&.btn-color-default]:[--hover:var(--color-gray-2)] layer-variants:[&.btn-color-default]:[--focus:var(--color-gray-7)] layer-variants:[&.btn-color-default]:[--active:var(--color-gray-3)] layer-variants:[&.btn-color-default]:color-black layer-variants:[&.btn-color-default]:border-black`,
+    ghost: `layer-variants:[&.btn-color-ghost]:[--bg:transparent] layer-variants:[&.btn-color-ghost]:[--hover:var(--color-gray-blend)] layer-variants:[&.btn-color-ghost]:[--focus:var(--color-gray-7)] layer-variants:[&.btn-color-ghost]:[--active:var(--color-gray-dark-blend)] layer-variants:[&.btn-color-ghost]:color-dark-blend layer-variants:[&.btn-color-ghost]:hover:([--bg:var(--color-gray-blend)] focus-visible:[--bg:var(--color-gray-blend)] focus-visible:[--hover:var(--color-gray-7)])`,
+    destructive: `layer-variants:[&.btn-color-destructive]:[--bg:var(--color-attention-light)] layer-variants:[&.btn-color-destructive]:[--hover:var(--color-attention-light)] layer-variants:[&.btn-color-destructive]:[--focus:var(--color-attention-light)] layer-variants:[&.btn-color-destructive]:[--active:var(--color-attention-light)] layer-variants:[&.btn-color-destructive]:border-black layer-variants:[&.btn-color-destructive]:color-black layer-variants:[&.btn-color-destructive]:hover:([--bg:var(--colors-attention)])`,
+    ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:[--bg:transparent] layer-variants:[&.btn-color-ghostDestructive]:[--hover:var(--color-attention-light)] layer-variants:[&.btn-color-ghostDestructive]:[--focus:var(--color-attention-light)] layer-variants:[&.btn-color-ghostDestructive]:[--active:var(-color-attention-light)] layer-variants:[&.btn-color-ghostDestructive]:color-attention-dark`,
+    contrast: `layer-variants:[&.btn-color-contrast]:[--bg:var(--color-black)] layer-variants:[&.btn-color-contrast]:[--hover:var(--color-gray-7)] layer-variants:[&.btn-color-contrast]:[--focus:var(--color-gray-7)] layer-variants:[&.btn-color-contrast]:[--active:var(--color-gray-6)] layer-variants:[&.btn-color-contrast]:color-white layer-variants:[&.btn-color-contrast]:border-black`,
 };
 const sizes = {
     default: '',
-    small: 'layer-variants:[&.size-small]:(px-4 py-1 text-sm rounded-full)',
-    icon: 'layer-variants:[&.size-icon]:(p-2 text-sm rounded-full) layer-variants:focus-visible:shadow-[0_0_0_2px_var(--focus,var(--hover))]',
+    small: 'layer-variants:[&.size-small]:px-4 layer-variants:[&.size-small]:py-1 layer-variants:[&.size-small]:text-sm layer-variants:[&.size-small]:rounded-full',
+    icon: 'layer-variants:[&.size-icon]:p-2 layer-variants:[&.size-icon]:text-sm layer-variants:[&.size-icon]:rounded-full layer-variants:focus-visible:shadow-[0_0_0_2px_var(--focus,var(--hover))]',
 };
-const toggledClass = 'hover:(filter-brightness-[1.1])';
+const toggledClass = 'hover:filter-brightness-[1.1]';
 const aligns = {
     start: 'self-start',
     stretch: 'self-stretch',

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

@@ -96,7 +96,7 @@ exports.CameraRoot = (0, react_1.forwardRef)(function Camera(_a, ref) {
             triggerCapture,
             selectedDeviceId,
             selectDeviceId: setSelectedDeviceId,
-        } }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: (0, classnames_1.default)('layer-components:([font-family:inherit] text-white bg-black rounded-lg overflow-hidden min-w-4 min-h-4 relative)', 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, classnames_1.default)('layer-components:[font-family:inherit] layer-components:text-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', 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] })) })));
 });
 exports.CameraShutterButton = (0, react_1.forwardRef)(function CameraShutterButton(_a, ref) {
     var { asChild, onClick } = _a, rest = __rest(_a, ["asChild", "onClick"]);

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

@@ -21,16 +21,16 @@ const react_1 = require("react");
 const hooks_js_1 = require("../../hooks.js");
 const react_slot_1 = require("@radix-ui/react-slot");
 const classnames_1 = __importDefault(require("classnames"));
-exports.CardRoot = (0, hooks_js_1.withClassName)('div', 'layer-components:(flex flex-col border-light rounded-lg text-lg overflow-hidden h-max-content relative bg-gray-1 text-black)');
+exports.CardRoot = (0, hooks_js_1.withClassName)('div', '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-gray-1 layer-components:text-black');
 exports.CardMain = (0, react_1.forwardRef)(function CardMain(_a, ref) {
     var { asChild, className, compact } = _a, rest = __rest(_a, ["asChild", "className", "compact"]);
     const Comp = asChild ? react_slot_1.Slot : 'button';
-    return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ ref: ref, className: (0, classnames_1.default)('layer-components:(flex flex-col gap-1 cursor-pointer transition p-4 pb-2 flex-1 relative z-1 bg-transparent border-none text-start text-inherit)', 'layer-components:hover:(bg-lightBlend color-black)', 'layer-components:md:pt-4', compact && 'layer-variants:(p-1 bg-white gap-0)', className), "data-compact": compact }, rest)));
+    return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ ref: ref, className: (0, classnames_1.default)('layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:cursor-pointer layer-components:transition layer-components:p-4 layer-components:pb-2 layer-components:flex-1 layer-components:relative layer-components:z-1 layer-components:bg-transparent layer-components:border-none layer-components:text-start layer-components:text-inherit', 'layer-components:hover:bg-lightBlend layer-components:hover:color-black', 'layer-components:md:pt-4', compact && 'layer-variants:p-1 layer-variants:bg-white layer-variants:gap-0', className), "data-compact": compact }, rest)));
 });
-exports.CardTitle = (0, hooks_js_1.withClassName)('div', 'layer-components:(flex flex-col gap-1 mt-auto bg-white p-2 rounded-lg w-auto mr-auto border border-solid border-grayDarkBlend text-md max-h-80px overflow-hidden text-ellipsis max-w-full text-inherit)', '[data-compact=true]>&:(bg-transparent border-none p-2 whitespace-nowrap text-ellipsis overflow-hidden)');
-exports.CardImage = (0, hooks_js_1.withClassName)('div', 'layer-components:(absolute z-0 right-0 top-0 bottom-0 w-full h-full)');
-exports.CardFooter = (0, hooks_js_1.withClassName)('div', 'layer-components:(flex flex-row p-2 bg-white relative z-1 border-0 border-t border-t-grayDarkBlend border-solid)');
-exports.CardActions = (0, hooks_js_1.withClassName)('div', 'layer-components:(ml-0 mr-auto flex flex-row gap-1 items-center)');
-exports.CardMenu = (0, hooks_js_1.withClassName)('div', 'layer-components:(mr-0 ml-auto flex flex-row gap-1 items-center)');
-exports.CardGrid = (0, hooks_js_1.withClassName)('div', 'layer-components:(grid grid-cols-[1fr] [grid-auto-rows:auto] gap-4 p-0 m-0)', 'layer-components:md:(grid-cols-[repeat(2,1fr)] [grid-auto-rows:1fr] items-end)');
+exports.CardTitle = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:mt-auto layer-components:bg-white layer-components:p-2 layer-components:rounded-lg layer-components:w-auto layer-components:mr-auto layer-components:border layer-components:border-solid layer-components:border-grayDarkBlend 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', '[data-compact=true]>&:(bg-transparent border-none p-2 whitespace-nowrap text-ellipsis overflow-hidden)');
+exports.CardImage = (0, hooks_js_1.withClassName)('div', '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');
+exports.CardFooter = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-row layer-components:p-2 layer-components:bg-white layer-components:relative layer-components:z-1 layer-components:border-0 layer-components:border-t layer-components:border-t-grayDarkBlend layer-components:border-solid');
+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-1 layer-components:items-center');
+exports.CardMenu = (0, hooks_js_1.withClassName)('div', 'layer-components:mr-0 layer-components:ml-auto layer-components:flex layer-components:flex-row layer-components:gap-1 layer-components:items-center');
+exports.CardGrid = (0, hooks_js_1.withClassName)('div', 'layer-components:grid layer-components:grid-cols-[1fr] layer-components:[grid-auto-rows:auto] layer-components:gap-4 layer-components:p-0 layer-components:m-0', 'layer-components:md:grid-cols-[repeat(2,1fr)] layer-components:md:[grid-auto-rows:1fr] layer-components:md:items-end');
 //# sourceMappingURL=Card.js.map

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

@@ -46,7 +46,7 @@ const react_1 = require("react");
 const react_icons_1 = require("@radix-ui/react-icons");
 const classnames_1 = __importDefault(require("classnames"));
 const withClassName_js_1 = require("../../hooks/withClassName.js");
-exports.CheckboxRoot = (0, withClassName_js_1.withClassName)(CheckboxPrimitive.Root, (0, classnames_1.default)('layer-components:(w-28px h-28px flex-shrink-0 relative bg-white border-default transition rounded-full)', 'layer-components:focus-visible:(outline-off shadow-focus)', 'layer-components:[&[data-state=checked]]:(bg-primary-light border-primary-dark)', 'layer-components:[&:hover:not(:disabled)]:shadow-[0_0_0_1px_var(--color-black)]'));
+exports.CheckboxRoot = (0, withClassName_js_1.withClassName)(CheckboxPrimitive.Root, (0, classnames_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-full', 'layer-components:focus-visible:outline-off layer-components:focus-visible:shadow-focus', 'layer-components:[&[data-state=checked]]:bg-primary-light layer-components:[&[data-state=checked]]:border-primary-dark', 'layer-components:[&:hover:not(:disabled)]:shadow-[0_0_0_1px_var(--color-black)]'));
 function CheckboxIndicator(_a) {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     return ((0, jsx_runtime_1.jsx)(CheckboxPrimitive.Indicator, Object.assign({ className: (0, classnames_1.default)('absolute center translate-[-50%] color-black', className) }, props, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(react_icons_1.CheckIcon, { width: 18, height: 18 }) })));

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

@@ -42,7 +42,7 @@ const react_1 = require("react");
 const withClassName_js_1 = require("../../hooks/withClassName.js");
 const CollapsiblePrimitive = __importStar(require("@radix-ui/react-collapsible"));
 exports.CollapsibleRoot = CollapsiblePrimitive.Root;
-const CollapsibleContentBase = (0, withClassName_js_1.withClassName)(CollapsiblePrimitive.Content, 'overflow-hidden animate-forwards', '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)');
+const CollapsibleContentBase = (0, withClassName_js_1.withClassName)(CollapsiblePrimitive.Content, 'overflow-hidden animate-forwards', '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');
 // specifically removing className... it's causing problems?
 exports.CollapsibleContent = (0, react_1.forwardRef)(function CollapsibleContent(_a, ref) {
     var { horizontal, both } = _a, props = __rest(_a, ["horizontal", "both"]);

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

@@ -47,12 +47,12 @@ const classnames_1 = __importDefault(require("classnames"));
 exports.ContextMenuRoot = ContextMenu.Root;
 exports.ContextMenuContent = (0, react_1.forwardRef)(function Content(_a, ref) {
     var { className, onClick } = _a, props = __rest(_a, ["className", "onClick"]);
-    return ((0, jsx_runtime_1.jsx)(ContextMenu.Portal, { children: (0, jsx_runtime_1.jsx)(ContextMenu.Content, Object.assign({ className: (0, classnames_1.default)('layer-components:(min-w-120px bg-white rounded-md border-default overflow-hidden p-2 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) => {
+    return ((0, jsx_runtime_1.jsx)(ContextMenu.Portal, { children: (0, jsx_runtime_1.jsx)(ContextMenu.Content, Object.assign({ className: (0, classnames_1.default)('layer-components:min-w-120px layer-components:bg-white layer-components:rounded-md layer-components:border-default layer-components:overflow-hidden layer-components:p-2 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) => {
                 ev.stopPropagation();
                 onClick === null || onClick === void 0 ? void 0 : onClick(ev);
             }, ref: ref }, props)) }));
 });
 exports.ContextMenuArrow = (0, withClassName_js_1.withClassName)(ContextMenu.Arrow, 'fill-white');
-exports.ContextMenuItem = (0, withClassName_js_1.withClassName)(ContextMenu.Item, 'flex items-center py-1 px-2 relative pl-25px select-none outline-none cursor-pointer', 'hover:bg-gray2 [&[data-highlighted=true]]:bg-gray2 [&[data-disabled=true]]:(opacity-50 cursor-default) disabled:(opacity-50 cursor-default)');
+exports.ContextMenuItem = (0, withClassName_js_1.withClassName)(ContextMenu.Item, 'flex items-center py-1 px-2 relative pl-25px select-none outline-none cursor-pointer', 'hover:bg-gray2 [&[data-highlighted=true]]:bg-gray2 [&[data-disabled=true]]:opacity-50 [&[data-disabled=true]]:cursor-default disabled:opacity-50 disabled:cursor-default');
 exports.ContextMenuTrigger = (0, withClassName_js_1.withClassName)(ContextMenu.Trigger, '');
 //# sourceMappingURL=contextMenu.js.map

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

@@ -89,10 +89,10 @@ 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)(button_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', 'flex items-center justify-center transition cursor-pointer', '[&[data-highlighted]]:(z-1 outline-accent)', 'hover:(z-1 outline-accent)', 'active:(bg-accent-wash rounded)', '[&[data-selected]]:(bg-accent-light z-2 rounded)', '[&[data-in-range]]:(bg-accent-wash rounded-none z-1)', '[&[data-range-start]]:(bg-accent-light rounded-l rounded-r-none z-1)', '[&[data-range-end]]:(bg-accent-light rounded-r rounded-l-none z-1)', 'disabled:(opacity-50 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', '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-wash active:rounded', '[&[data-selected]]:bg-accent-light [&[data-selected]]:z-2 [&[data-selected]]:rounded', '[&[data-in-range]]:bg-accent-wash [&[data-in-range]]:rounded-none [&[data-in-range]]:z-1', '[&[data-range-start]]:bg-accent-light [&[data-range-start]]:rounded-l [&[data-range-start]]:rounded-r-none [&[data-range-start]]:z-1', '[&[data-range-end]]:bg-accent-light [&[data-range-end]]:rounded-r [&[data-range-end]]:rounded-l-none [&[data-range-end]]:z-1', 'disabled:opacity-50 disabled:cursor-default', 
 // today dot
-'[&[data-today]]:before:(content-[""] absolute left-[2px] top-[2px] w-[6px] h-[6px] rounded-full bg-primary)', '[&[data-top-edge]]:(border-t-gray-5)', '[&[data-bottom-edge]]:(border-b-gray-5)', '[&[data-first-column]]:(border-l-gray-5)', '[&[data-last-column]]:(border-r-gray-5)', '[&[data-day-first]]:(border-l-gray-5 rounded-tl)', '[&[data-day-last]]:(border-r-gray-5 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-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-full [&[data-today]]:before:bg-primary', '[&[data-top-edge]]:border-t-gray-5', '[&[data-bottom-edge]]:border-b-gray-5', '[&[data-first-column]]:border-l-gray-5', '[&[data-last-column]]:border-r-gray-5', '[&[data-day-first]]:border-l-gray-5 [&[data-day-first]]:rounded-tl', '[&[data-day-last]]:border-r-gray-5 [&[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]');
 const DayLabel = (0, hooks_js_1.withClassName)('div', 'flex items-center justify-center text-sm text-gray-6');
 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-template-areas:"prevMonth_leftMonth_rightMonth_nextMonth""leftGrid_leftGrid_rightGrid_rightGrid"] [grid-template-columns:auto_1fr_1fr_auto])');
+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-template-areas:"prevMonth_leftMonth_rightMonth_nextMonth""leftGrid_leftGrid_rightGrid_rightGrid"] sm:[grid-template-columns:auto_1fr_1fr_auto]');
 //# sourceMappingURL=DatePicker.js.map

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

@@ -52,7 +52,7 @@ const react_icons_1 = require("@radix-ui/react-icons");
 const select_js_1 = require("../select.js");
 const react_2 = require("@use-gesture/react");
 const StyledOverlay = (0, withClassName_js_1.withClassName)(DialogPrimitive.Overlay, 'layer-components(bg-overlay fixed inset-0 z-dialog-backdrop animate-fade-in animate-duration-200)', 'layer-components:[&[data-state=closed]]:animate-fade-out', 'motion-reduce:animate-none');
-const StyledContent = (0, withClassName_js_1.withClassName)(DialogPrimitive.Content, 'layer-components:(translate-0 z-dialog fixed bottom-[calc(var(--viewport-bottom-offset,0px)+var(--gesture-y,0px))] left-0 right-0 h-min-content max-h-[calc(0.85*var(--viewport-height,100vh))])', 'transform-gpu', 'animate-ease-out', 'layer-components:(shadow-xl bg-white rounded-tl-xl rounded-tr-xl p-6 pt-8 border-default border-b-0 overflow-y-auto flex flex-col pb-[calc(3rem+env(safe-area-inset-bottom,0px))])', 'animate-fade-in-up-big animate-duration-200 [&[data-state=closed]]:animate-fade-out-down-big animate-ease-in motion-reduce:animate-none', 'layer-components:sm:(left-50% top-50% translate-[-50%] w-90vw max-w-450px max-h-85vh pb-6 rounded-lg border-b-1 pt-6)', 'sm:(animate-dialog-in [&[data-state=closed]]:animate-dialog-out motion-reduce:animate-none)');
+const StyledContent = (0, withClassName_js_1.withClassName)(DialogPrimitive.Content, 'layer-components:translate-0 layer-components:z-dialog layer-components:fixed layer-components:bottom-[calc(var(--viewport-bottom-offset,0px)+var(--gesture-y,0px))] layer-components:left-0 layer-components:right-0 layer-components:h-min-content layer-components:max-h-[calc(0.85*var(--viewport-height,100vh))]', 'transform-gpu', 'animate-ease-out', 'layer-components:shadow-xl layer-components:bg-white layer-components:rounded-tl-xl layer-components:rounded-tr-xl layer-components:p-6 layer-components:pt-8 layer-components:border-default layer-components:border-b-0 layer-components:overflow-y-auto layer-components:flex layer-components:flex-col layer-components:pb-[calc(3rem+env(safe-area-inset-bottom,0px))]', 'animate-fade-in-up-big animate-duration-200 [&[data-state=closed]]:animate-fade-out-down-big animate-ease-in motion-reduce:animate-none', 'layer-components:sm:left-50% layer-components:sm:top-50% layer-components:sm:translate-[-50%] layer-components:sm:w-90vw layer-components:sm:max-w-450px layer-components:sm:max-h-85vh layer-components:sm:pb-6 layer-components:sm:rounded-lg layer-components:sm:border-b-1 layer-components:sm:pt-6', 'sm:animate-dialog-in sm:[&[data-state=closed]]:animate-dialog-out sm:motion-reduce:animate-none');
 exports.Content = (0, react_1.forwardRef)(function Content(_a, ref) {
     var { children, width, outerClassName, className } = _a, props = __rest(_a, ["children", "width", "outerClassName", "className"]);
     const particles = (0, particles_js_1.useParticles)();
@@ -159,13 +159,13 @@ exports.DialogContent = exports.Content;
 exports.DialogTitle = StyledTitle;
 exports.DialogDescription = StyledDescription;
 exports.DialogClose = DialogPrimitive.Close;
-exports.DialogActions = (0, withClassName_js_1.withClassName)('div', 'flex justify-end sticky w-full gap-3 items-center bg-white py-3 translate-y-6 flex-wrap', 'bottom--6', 'sm:(bottom-0)');
+exports.DialogActions = (0, withClassName_js_1.withClassName)('div', 'flex justify-end sticky w-full gap-3 items-center bg-white py-3 translate-y-6 flex-wrap', 'bottom--6', 'sm:bottom-0');
 exports.DialogSelectTrigger = (0, react_1.forwardRef)(function DialogSelectTrigger(_a, ref) {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     return ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Trigger, Object.assign({ className: (0, classnames_1.default)(select_js_1.selectTriggerClassName, className) }, props, { children: [(0, jsx_runtime_1.jsx)("span", { children: children }), (0, jsx_runtime_1.jsx)(react_icons_1.ChevronDownIcon, {})] })));
 });
 exports.DialogSelectList = (0, withClassName_js_1.withClassName)(RadioGroupPrimitive.Root, 'flex flex-col gap-2 overflow-y-auto p-2');
-exports.DialogSelectItemRoot = (0, withClassName_js_1.withClassName)(RadioGroupPrimitive.Item, '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', '[&[data-state=checked]]:(bg-primary-wash text-primary-dark)');
+exports.DialogSelectItemRoot = (0, withClassName_js_1.withClassName)(RadioGroupPrimitive.Item, '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', '[&[data-state=checked]]:bg-primary-wash [&[data-state=checked]]:text-primary-dark');
 exports.DialogSelectItem = (0, react_1.forwardRef)(function DialogSelectItem(_a, ref) {
     var { children } = _a, props = __rest(_a, ["children"]);
     return ((0, jsx_runtime_1.jsxs)(exports.DialogSelectItemRoot, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex-1" }, { children: children })), (0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Indicator, Object.assign({ className: "flex-0-0-auto" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.CheckIcon, {}) }))] })));

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

@@ -44,8 +44,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const DropdownMenuPrimitive = __importStar(require("@radix-ui/react-dropdown-menu"));
 const withClassName_js_1 = require("../../hooks/withClassName.js");
 const classnames_1 = __importDefault(require("classnames"));
-const StyledContent = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Content, 'min-w-220px bg-white z-menu shadow-lg rounded-xl border-default', '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, classnames_1.default)('text-md leading-4 color-black rounded-sm flex items-center pr-4 pl-8 py-3 relative text-left select-none cursor-pointer', '[&[data-disabled]]:(color-gray9 pointer-events-none)', 'focus-visible:(bg-gray2 color-gray9)', 'focus:outline-none');
+const StyledContent = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Content, 'min-w-220px bg-white z-menu shadow-lg rounded-xl border-default', '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, classnames_1.default)('text-md leading-4 color-black rounded-sm flex items-center pr-4 pl-8 py-3 relative text-left select-none cursor-pointer', '[&[data-disabled]]:color-gray9 [&[data-disabled]]:pointer-events-none', 'focus-visible:bg-gray2 focus-visible:color-gray9', 'focus:outline-none');
 const StyledItem = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Item, itemClassName);
 const StyledCheckboxItem = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.CheckboxItem, itemClassName);
 const StyledRadioItem = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.RadioItem, itemClassName);

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

@@ -19,7 +19,7 @@ exports.Input = exports.inputClassName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
-exports.inputClassName = (0, classnames_1.default)('layer-components:(px-4 py-2 text-md font-sans rounded-lg bg-gray-blend select-auto min-w-60px color-black border-default)', 'layer-components:focus:(outline-none bg-gray2)', 'layer-components:focus-visible:(outline-none shadow-focus)', 'layer-components:md:(min-w-120px)');
+exports.inputClassName = (0, classnames_1.default)('layer-components:px-4 layer-components:py-2 layer-components:text-md layer-components:font-sans layer-components:rounded-lg layer-components:bg-gray-blend layer-components:select-auto layer-components:min-w-60px layer-components:color-black layer-components:border-default', 'layer-components:focus:outline-none layer-components:focus:bg-gray2', 'layer-components:focus-visible:outline-none layer-components:focus-visible:shadow-focus', 'layer-components:md:min-w-120px');
 exports.Input = (0, react_1.forwardRef)(function Input(_a, ref) {
     var { className, variant = 'default' } = _a, props = __rest(_a, ["className", "variant"]);
     return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, props, { className: (0, classnames_1.default)(exports.inputClassName, {

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

@@ -29,9 +29,9 @@ function PageContent(_a) {
         height: '--content-height',
         ready: '--content-ready',
     });
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('[grid-area:content] max-w-full min-w-0 w-full flex flex-col items-start relative flex-1 gap-3', className) }, rest, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, innerProps, { className: (0, classnames_1.default)('w-full min-w-0 flex flex-col mb-120px px-4 py-4', 'sm:(max-w-700px w-full)', {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('[grid-area:content] max-w-full min-w-0 w-full flex flex-col items-start relative flex-1 gap-3', className) }, rest, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, innerProps, { className: (0, classnames_1.default)('w-full min-w-0 flex flex-col mb-120px px-4 py-4', 'sm:max-w-700px sm:w-full', {
                 'flex-1': fullHeight,
-                'important:(p-0 sm:p-4)': noPadding,
+                'important:p-0 important:sm:p-4': noPadding,
             }, innerProps === null || innerProps === void 0 ? void 0 : innerProps.className), ref: innerRef }, { children: children })) })));
 }
 exports.PageContent = PageContent;

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

@@ -20,7 +20,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 function PageFixedArea(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, classnames_1.default)('layer-components:(sticky top-0 z-nav bg-wash w-full items-stretch gap-2 flex flex-col)', className) })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, classnames_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) })));
 }
 exports.PageFixedArea = PageFixedArea;
 //# sourceMappingURL=PageFixedArea.js.map

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

@@ -21,7 +21,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 function PageNav(_a) {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, classnames_1.default)('[grid-area:nav] relative z-nav', 'sm:([grid-area:nav] sticky top-0 h-auto bottom-auto left-auto right-auto)', className) }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, classnames_1.default)('[grid-area:nav] relative z-nav', 'sm:[grid-area:nav] sm:sticky sm:top-0 sm:h-auto sm:bottom-auto sm:left-auto sm:right-auto', className) }, { children: children })));
 }
 exports.PageNav = PageNav;
 //# sourceMappingURL=PageNav.js.map

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

@@ -21,9 +21,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 function PageNowPlaying(_a) {
     var { className, unstyled } = _a, props = __rest(_a, ["className", "unstyled"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, classnames_1.default)('fixed bottom-[var(--now-playing-bottom,60px)] left-0 right-0 z-now-playing flex flex-col gap-2 items-end', 'sm:(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
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, classnames_1.default)('fixed bottom-[var(--now-playing-bottom,60px)] left-0 right-0 z-now-playing flex flex-col gap-2 items-end', 'sm:fixed sm:bottom-3 sm:left-[var(--content-left,20%)] sm:transition-opacity sm:top-auto sm:items-end sm:w-[var(--content-width,100%)] sm:max-w-80vw sm:p-0 sm:opacity-[var(--content-ready,0)]', unstyled
             ? 'p-2'
-            : 'layer-components:(bg-wash p-2px rounded-xl border-light shadow-md min-w-32px items-center justify-center m-2 w-auto)', className) })));
+            : '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', className) })));
 }
 exports.PageNowPlaying = PageNowPlaying;
 //# sourceMappingURL=PageNowPlaying.js.map

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

@@ -21,7 +21,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 exports.PageRoot = (0, react_1.forwardRef)(function PageRoot(_a, ref) {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, className: (0, classnames_1.default)('flex-grow-1 flex-shrink-1 flex-basis-0 min-h-0 h-full', 'grid grid-areas-[content]-[nav] grid-cols-[1fr] grid-rows-[1fr] items-start justify-center', 'sm:(grid-areas-[gutter1_nav_content_gutter2] grid-cols-[1fr_auto_min(800px,60vw)_1fr] min-h-auto)', {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, className: (0, classnames_1.default)('flex-grow-1 flex-shrink-1 flex-basis-0 min-h-0 h-full', 'grid grid-areas-[content]-[nav] grid-cols-[1fr] grid-rows-[1fr] items-start justify-center', 'sm:grid-areas-[gutter1_nav_content_gutter2] sm:grid-cols-[1fr_auto_min(800px,60vw)_1fr] sm:min-h-auto', {
             'bg-[var(--palette-yellow-70)]': props.color === 'lemon',
         }, className) }, props, { children: children })));
 });

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

@@ -21,15 +21,15 @@ const classnames_1 = __importDefault(require("classnames"));
 const hooks_js_1 = require("../../hooks.js");
 const react_1 = require("react");
 const react_slot_1 = require("@radix-ui/react-slot");
-exports.navBarItemClass = (0, classnames_1.default)('layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-md border-none cursor-pointer text-sm transition-colors h-full gap-6px relative text-inherit)', 'layer-components:sm:(flex-row-reverse h-auto justify-start gap-2 overflow-visible)', 'layer-components:hover:bg-primaryWash', 'layer-components:focus-visible:(outline-none bg-primaryWash)', 'layer-components:active:bg-primaryWash');
+exports.navBarItemClass = (0, classnames_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-md 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:text-inherit', 'layer-components:sm:flex-row-reverse layer-components:sm:h-auto layer-components:sm:justify-start layer-components:sm:gap-2 layer-components:sm:overflow-visible', 'layer-components:hover:bg-primaryWash', 'layer-components:focus-visible:outline-none layer-components:focus-visible:bg-primaryWash', 'layer-components:active:bg-primaryWash');
 exports.NavBarItem = (0, react_1.forwardRef)(function NavBarItem(_a, ref) {
     var { asChild, className } = _a, rest = __rest(_a, ["asChild", "className"]);
     const Comp = asChild ? react_slot_1.Slot : 'div';
     return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ ref: ref, className: (0, classnames_1.default)(exports.navBarItemClass, className) }, rest)));
 });
-exports.NavBarItemIconWrapper = (0, hooks_js_1.withClassName)('div', 'relative flex sm:(p-6px rounded-full bg-lightBlend)');
-exports.NavBarItemText = (0, hooks_js_1.withClassName)('span', 'overflow-hidden pl-1 inline-block text-xxs whitespace-nowrap text-ellipsis sm:(text-md leading-normal)');
+exports.NavBarItemIconWrapper = (0, hooks_js_1.withClassName)('div', 'relative flex sm:p-6px sm:rounded-full sm:bg-lightBlend');
+exports.NavBarItemText = (0, hooks_js_1.withClassName)('span', 'overflow-hidden pl-1 inline-block text-xxs whitespace-nowrap text-ellipsis sm:text-md sm:leading-normal');
 exports.NavBarItemIcon = (0, hooks_js_1.withClassName)('div', 'relative z-1 [a[data-active=true]_&]:fill-primary-light');
 exports.NavBarItemPip = (0, hooks_js_1.withClassName)('div', 'absolute top-6px right-6px w-6px h-6px rounded-full bg-attention shadow-sm');
-exports.NavBarRoot = (0, hooks_js_1.withClassName)('div', 'flex flex-row items-stretch justify-around w-full rounded-0 rounded-t-lg shadow-lg overflow-hidden z-50 bg-wash border-t border-t-solid border-gray5 p-1 h-auto', 'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]', 'sm:(bg-transparent flex flex-col rounded-0 border-none border-transparent shadow-none h-min-content overflow-y-auto overflow-x-hidden justify-start items-stretch gap-2 pb-10)');
+exports.NavBarRoot = (0, hooks_js_1.withClassName)('div', 'flex flex-row items-stretch justify-around w-full rounded-0 rounded-t-lg shadow-lg overflow-hidden z-50 bg-wash border-t border-t-solid border-gray5 p-1 h-auto', 'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]', 'sm:bg-transparent sm:flex sm:flex-col sm:rounded-0 sm:border-none sm:border-transparent sm:shadow-none sm:h-min-content sm:overflow-y-auto sm:overflow-x-hidden sm:justify-start sm:items-stretch sm:gap-2 sm:pb-10');
 //# sourceMappingURL=NavBar.js.map

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

@@ -20,7 +20,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 function Note(_a) {
     var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('pr-20px', className) }, rest, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-col p-2 border border-solid border-primary-dark bg-primary-wash color-black relative text-sm italic border-r-0" }, { children: [children, (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-20px h-[calc(100%-18px)] absolute bottom--0.5px right--20px border-0 border-solid border-primary-dark border-r border-b bg-primary-wash" }, { children: (0, jsx_runtime_1.jsx)("div", { className: `absolute top--20px left-0 border-10px border-0 border-solid border-transparent border-b-primary-dark border-l-primary-dark after:(content-[""] absolute top--7px left--9px border-8px border-solid border-transparent border-b-primary-wash border-l-primary-wash)` }) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('pr-20px', className) }, rest, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-col p-2 border border-solid border-primary-dark bg-primary-wash color-black relative text-sm italic border-r-0" }, { children: [children, (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-20px h-[calc(100%-18px)] absolute bottom--0.5px right--20px border-0 border-solid border-primary-dark border-r border-b bg-primary-wash" }, { children: (0, jsx_runtime_1.jsx)("div", { className: `absolute top--20px left-0 border-10px border-0 border-solid border-transparent border-b-primary-dark border-l-primary-dark after:content-[""] after:absolute after:top--7px after:left--9px after:border-8px after:border-solid after:border-transparent after:border-b-primary-wash after:border-l-primary-wash` }) }))] })) })));
 }
 exports.Note = Note;
 //# sourceMappingURL=Note.js.map

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

@@ -27,7 +27,7 @@ function Peek({ peekHeight = 120, children, className }) {
         }
     }, [peekHeight]);
     const id = (0, react_1.useId)();
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('relative animate-ease-default animate-forwards overflow-hidden [&[data-state=closed]]:(animate-keyframes-peek-close animate-duration-300 max-h-[var(--peek-height,120px)]) [&[data-state=open]]:(animate-keyframes-peek-open animate-duration-600)', className), ref: containerRef, "data-state": isPeekable ? (open ? 'open' : 'closed') : undefined }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: contentRef, id: id }, { children: children })), isPeekable && ((0, jsx_runtime_1.jsx)("button", { "data-state": open ? 'open' : 'closed', className: (0, classnames_1.default)('h-80px absolute bottom-0 z-1 bg-transparent border-none w-full cursor-pointer border-b border-solid border-white', 'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-solid border-primary', 'after:(content-["-_tap_to_expand_-"] p-3 color-gray9 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 }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('relative animate-ease-default animate-forwards overflow-hidden [&[data-state=closed]]:animate-keyframes-peek-close [&[data-state=closed]]:animate-duration-300 [&[data-state=closed]]:max-h-[var(--peek-height,120px)] [&[data-state=open]]:animate-keyframes-peek-open [&[data-state=open]]:animate-duration-600', className), ref: containerRef, "data-state": isPeekable ? (open ? 'open' : 'closed') : undefined }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: contentRef, id: id }, { children: children })), isPeekable && ((0, jsx_runtime_1.jsx)("button", { "data-state": open ? 'open' : 'closed', className: (0, classnames_1.default)('h-80px absolute bottom-0 z-1 bg-transparent border-none w-full cursor-pointer border-b border-solid border-white', 'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-solid border-primary', 'after:content-["-_tap_to_expand_-"] after:p-3 after:color-gray9 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 }))] })));
 }
 exports.Peek = Peek;
 //# sourceMappingURL=Peek.js.map

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

@@ -45,7 +45,7 @@ const PopoverPrimitive = __importStar(require("@radix-ui/react-popover"));
 const react_1 = require("react");
 const withClassName_js_1 = require("../../hooks/withClassName.js");
 const classnames_1 = __importDefault(require("classnames"));
-const StyledContent = (0, withClassName_js_1.withClassName)(PopoverPrimitive.Content, 'layer-components:(rounded-xl min-w-120px bg-white z-menu shadow-lg border-default op-0 hidden max-w-90vw)', '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)] overflow-y-auto)', 'layer-components:[&[data-state=open]]:(opacity-100 flex flex-col)', 'layer-components:[&[data-state=closed]]:pointer-events-none');
+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:border-default layer-components:op-0 layer-components:hidden layer-components:max-w-90vw', '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:overflow-y-auto', '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, 'fill-white stroke-black');
 const StyledClose = (0, withClassName_js_1.withClassName)(PopoverPrimitive.Close, '[all:unset] [font-family:inherit] rounded-full h-25px w-25px inline-flex items-center justify-center color-dark-blend absolute top-5px right-5px hover:bg-light-blend focus:shadow-focus');
 // Exports

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

@@ -26,7 +26,7 @@ exports.RichEditor = (0, react_1.forwardRef)(function RichEditor(_a, ref) {
     if (typeof ref === 'string') {
         throw new Error('String ref not supported!');
     }
-    return ((0, jsx_runtime_1.jsx)(EditorContent, Object.assign({ ref: ref, className: (0, classnames_1.default)('layer-components:(w-full rounded-lg)', !rest.readOnly &&
-            'bg-gray-blend [&_.ProseMirror:focus]:(outline-none bg-gray-1 shadow-focus)', '[&_.ProseMirror_h1,h2,h3,p]:mt-0', '[&_.ProseMirror_h1]:(text-xl font-medium)', '[&_.ProseMirror_h2]:(text-lg font-medium mt-4 mb-2)', '[&_.ProseMirror_h3]:(text-md font-extrabold)', '[&_.ProseMirror_a]:underline', className) }, rest)));
+    return ((0, jsx_runtime_1.jsx)(EditorContent, Object.assign({ ref: ref, className: (0, classnames_1.default)('layer-components:w-full layer-components:rounded-lg', !rest.readOnly &&
+            'bg-gray-blend [&_.ProseMirror:focus]:outline-none [&_.ProseMirror:focus]:bg-gray-1 [&_.ProseMirror:focus]:shadow-focus', '[&_.ProseMirror_h1,h2,h3,p]:mt-0', '[&_.ProseMirror_h1]:text-xl [&_.ProseMirror_h1]:font-medium', '[&_.ProseMirror_h2]:text-lg [&_.ProseMirror_h2]:font-medium [&_.ProseMirror_h2]:mt-4 [&_.ProseMirror_h2]:mb-2', '[&_.ProseMirror_h3]:text-md [&_.ProseMirror_h3]:font-extrabold', '[&_.ProseMirror_a]:underline', className) }, rest)));
 });
 //# sourceMappingURL=RichEditor.js.map

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

@@ -54,7 +54,7 @@ exports.SelectItem = (0, react_1.forwardRef)((_a, forwardedRef) => {
     }
     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.SelectItemRoot = (0, withClassName_js_1.withClassName)(SelectPrimitive.Item, 'text-md leading-4 color-black rounded-sm flex items-center flex-row h-36px pr-4 pl-35px relative select-none', '[&[data-disabled]]:(color-gray5 pointer-events-none) [&[data-highlighted]]:(outline-none bg-primary-wash color-black)');
+exports.SelectItemRoot = (0, withClassName_js_1.withClassName)(SelectPrimitive.Item, 'text-md leading-4 color-black rounded-sm flex items-center flex-row h-36px pr-4 pl-35px relative select-none', '[&[data-disabled]]:color-gray5 [&[data-disabled]]:pointer-events-none [&[data-highlighted]]:outline-none [&[data-highlighted]]:bg-primary-wash [&[data-highlighted]]: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)(react_icons_1.CheckIcon, {}) }))));
 exports.SelectItemText = (0, withClassName_js_1.withClassName)(SelectPrimitive.ItemText, '');
@@ -67,7 +67,7 @@ const SelectGroup = (props) => {
 };
 exports.SelectGroup = SelectGroup;
 exports.SelectRoot = SelectPrimitive.Root;
-exports.selectTriggerClassName = 'layer-components:([all:unset] inline-flex items-center justify-center rounded-full px-3 py-1 text-sm gap-2 color-black border-solid border border-gray5 hover:border-gray7 focus:shadow-focus [&[data-placeholder]]:color-gray8) select-none';
+exports.selectTriggerClassName = 'layer-components:[all:unset] layer-components:inline-flex layer-components:items-center layer-components:justify-center layer-components:rounded-full layer-components:px-3 layer-components:py-1 layer-components:text-sm layer-components:gap-2 layer-components:color-black layer-components:border-solid layer-components:border layer-components:border-gray5 layer-components:hover:border-gray7 layer-components:focus:shadow-focus layer-components:[&[data-placeholder]]:color-gray8 select-none';
 exports.SelectTrigger = withNoNativeRender((0, withClassName_js_1.withClassName)(SelectPrimitive.Trigger, exports.selectTriggerClassName));
 exports.UnstyledSelectTrigger = withNoNativeRender(SelectPrimitive.Trigger);
 exports.SelectValue = withNoNativeRender((0, withClassName_js_1.withClassName)(SelectPrimitive.Value, 'flex flex-row'));
@@ -80,7 +80,7 @@ exports.SelectIcon = withNoNativeRender((0, react_1.forwardRef)((_a, forwardedRe
 const zIndex = { zIndex: 1001 };
 exports.SelectContent = withPassthroughNativeRender((0, react_1.forwardRef)((_a, forwardedRef) => {
     var { children, inDialog, className } = _a, props = __rest(_a, ["children", "inDialog", "className"]);
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, Object.assign({ className: className, style: zIndex }, { children: (0, jsx_runtime_1.jsxs)(SelectPrimitive.Content, Object.assign({ className: (0, classnames_1.default)('layer-components:(overflow-hidden bg-white rounded-lg border border-solid border-1 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)]') }, props, { ref: forwardedRef }, { children: [(0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, Object.assign({ className: "flex items-center justify-center h-25px bg-white color-primary-dark cursor-default" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ChevronUpIcon, {}) })), (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, Object.assign({ className: "p-1" }, { children: children })), (0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, Object.assign({ className: "flex items-center justify-center h-25px bg-white color-primary-dark cursor-default" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ChevronDownIcon, {}) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, Object.assign({ className: className, style: zIndex }, { children: (0, jsx_runtime_1.jsxs)(SelectPrimitive.Content, Object.assign({ className: (0, classnames_1.default)('layer-components:overflow-hidden layer-components:bg-white layer-components:rounded-lg layer-components:border layer-components:border-solid layer-components:border-1 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)]') }, props, { ref: forwardedRef }, { children: [(0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, Object.assign({ className: "flex items-center justify-center h-25px bg-white color-primary-dark cursor-default" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ChevronUpIcon, {}) })), (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, Object.assign({ className: "p-1" }, { children: children })), (0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, Object.assign({ className: "flex items-center justify-center h-25px bg-white color-primary-dark cursor-default" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ChevronDownIcon, {}) }))] })) })));
 }));
 exports.NativeSelect = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { className } = _a, props = __rest(_a, ["className"]);

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

@@ -29,6 +29,6 @@ const Tabs = __importStar(require("@radix-ui/react-tabs"));
 const withClassName_js_1 = require("../../hooks/withClassName.js");
 exports.TabsRoot = (0, withClassName_js_1.withClassName)(Tabs.Root, '');
 exports.TabsList = (0, withClassName_js_1.withClassName)(Tabs.List, 'flex flex-row py-2 px-2 justify-center');
-exports.TabsTrigger = (0, withClassName_js_1.withClassName)(Tabs.Trigger, 'flex flex-row items-center justify-center gap-2 color-black py-1 px-4 bg-wash text-md font-bold min-w-100px border border-solid border-gray-4', 'hover:bg-gray-3 focus-visible:(shadow-focus outline-off) [&[data-state=active]]:(bg-primary-wash border-primary hover:bg-primary-wash relative z-1)', 'first:rounded-l-full last:rounded-r-full');
+exports.TabsTrigger = (0, withClassName_js_1.withClassName)(Tabs.Trigger, 'flex flex-row items-center justify-center gap-2 color-black py-1 px-4 bg-wash text-md font-bold min-w-100px border border-solid border-gray-4', 'hover:bg-gray-3 focus-visible:shadow-focus focus-visible:outline-off [&[data-state=active]]:bg-primary-wash [&[data-state=active]]:border-primary [&[data-state=active]]:hover:bg-primary-wash [&[data-state=active]]:relative [&[data-state=active]]:z-1', 'first:rounded-l-full last:rounded-r-full');
 exports.TabsContent = (0, withClassName_js_1.withClassName)(Tabs.Content, '');
 //# sourceMappingURL=tabs.js.map

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

@@ -42,7 +42,7 @@ exports.TextArea = (0, react_1.forwardRef)(function TextArea(_a, ref) {
             valueWasEmpty = element.value === '';
         }
     }, [autoSize, padBottomPixels, rest.value]);
-    return ((0, jsx_runtime_1.jsx)("textarea", Object.assign({ ref: finalRef, className: (0, classnames_1.default)(input_js_1.inputClassName, 'layer-components:([font-family:inherit] text-inherit overflow-hidden)', {
+    return ((0, jsx_runtime_1.jsx)("textarea", Object.assign({ ref: finalRef, className: (0, classnames_1.default)(input_js_1.inputClassName, 'layer-components:[font-family:inherit] layer-components:text-inherit layer-components:overflow-hidden', {
             'layer-components:[resize:vertical]': !autoSize,
         }, className), rows: autoSize ? 1 : rows }, rest)));
 });

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

@@ -28,5 +28,5 @@ exports.ToggleGroupItem = exports.ToggleGroupRoot = void 0;
 const ToggleGroup = __importStar(require("@radix-ui/react-toggle-group"));
 const withClassName_js_1 = require("../../hooks/withClassName.js");
 exports.ToggleGroupRoot = (0, withClassName_js_1.withClassName)(ToggleGroup.Root, 'inline-flex bg-gray1 rounded-lg gap-1');
-exports.ToggleGroupItem = (0, withClassName_js_1.withClassName)(ToggleGroup.Item, 'rounded-xl bg-gray2 py-1 px-2 flex items-center justify-center cursor-pointer hover:bg-gray3 active:bg-gray4 focus-visible:(shadow-focus outline-off) [&[data-state=on]]:(bg-primary-light border-black)');
+exports.ToggleGroupItem = (0, withClassName_js_1.withClassName)(ToggleGroup.Item, 'rounded-xl bg-gray2 py-1 px-2 flex items-center justify-center cursor-pointer hover:bg-gray3 active:bg-gray4 focus-visible:shadow-focus focus-visible:outline-off [&[data-state=on]]:bg-primary-light [&[data-state=on]]:border-black');
 //# sourceMappingURL=toggleGroup.js.map

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

@@ -45,7 +45,7 @@ const TooltipPrimitive = __importStar(require("@radix-ui/react-tooltip"));
 const classnames_1 = __importDefault(require("classnames"));
 function Content(_a) {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Portal, { children: (0, jsx_runtime_1.jsxs)(TooltipPrimitive.Content, Object.assign({ className: (0, classnames_1.default)('layer-components:(relative rounded-lg py-2 px-3 border-default text-sm leading-tight color-inherit bg-white shadow-sm select-none hidden z-tooltip sm:display-initial)', '[&[data-state=delayed-open]]:display-initial', '[&[data-state=instant-open]]:display-initial', 'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]', 'layer-components:[&[data-state=delayed-open]]:animate-popover-in', className) }, props, { children: [children, (0, jsx_runtime_1.jsx)(TooltipPrimitive.Arrow, { className: "fill-white stroke-black stroke-1" })] })) }));
+    return ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Portal, { children: (0, jsx_runtime_1.jsxs)(TooltipPrimitive.Content, Object.assign({ className: (0, classnames_1.default)('layer-components:relative layer-components:rounded-lg layer-components:py-2 layer-components:px-3 layer-components:border-default layer-components:text-sm layer-components:leading-tight layer-components:color-inherit layer-components:bg-white layer-components:shadow-sm layer-components:select-none layer-components:hidden layer-components:z-tooltip layer-components:sm:display-initial', '[&[data-state=delayed-open]]:display-initial', '[&[data-state=instant-open]]:display-initial', 'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]', 'layer-components:[&[data-state=delayed-open]]:animate-popover-in', className) }, props, { children: [children, (0, jsx_runtime_1.jsx)(TooltipPrimitive.Arrow, { className: "fill-white stroke-black stroke-1" })] })) }));
 }
 // Exports
 exports.TooltipProvider = TooltipPrimitive.Provider;