@aivenio/aquarium 4.9.0 → 5.0.0

package/dist/src/atoms/Banner/Banner.js

@@ -10,33 +10,60 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { clsx } from 'clsx';
+import { tv } from 'tailwind-variants';
 import { Box } from '../../../src/molecules/Box/Box';
 import { Typography } from '../../../src/atoms/Typography/Typography';
+const bannerStyles = tv({
+    slots: {
+        base: 'rounded flex justify-between gap-7 flex-nowrap p-6',
+        title: '',
+        description: '',
+        contentContainer: 'flex w-full',
+        actions: 'flex gap-4',
+        dismissContainer: '',
+    },
+    variants: {
+        layout: {
+            horizontal: {
+                base: 'items-center',
+                contentContainer: 'flex-row flex-nowrap gap-7 items-center',
+                dismissContainer: 'self-center',
+            },
+            vertical: {
+                title: 'mb-3',
+                contentContainer: 'flex-col',
+                actions: 'mt-5',
+                dismissContainer: 'self-start',
+            },
+        },
+        variant: {
+            default: { base: 'bg-muted' },
+            outlined: { base: 'bg-body border border-muted' },
+        },
+        flexGrow: {
+            true: { description: 'flex-grow' },
+        },
+    },
+});
 export const Banner = (_a) => {
     var { children, className, layout, variant } = _a, rest = __rest(_a, ["children", "className", "layout", "variant"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: clsx(className, `rounded flex justify-between gap-7 flex-nowrap p-6`, {
-            'items-center': layout === 'horizontal',
-            'bg-muted': variant === 'default',
-            'bg-body border border-muted': variant === 'outlined',
-        }) }), children));
+    const { base } = bannerStyles({ layout, variant });
+    return (React.createElement("div", Object.assign({}, rest, { className: base({ className }) }), children));
 };
 Banner.Title = (_a) => {
     var { children, className, layout } = _a, rest = __rest(_a, ["children", "className", "layout"]);
-    return (React.createElement(Typography, Object.assign({}, rest, { variant: "subheading", color: "intense", className: clsx(className, {
-            'mb-3': layout === 'vertical',
-        }) }), children));
+    const { title } = bannerStyles({ layout });
+    return (React.createElement(Typography, Object.assign({}, rest, { variant: "subheading", color: "intense", className: title({ className }) }), children));
 };
 Banner.Description = (_a) => {
-    var { flexGrow, children, className } = _a, rest = __rest(_a, ["flexGrow", "children", "className"]);
-    return (React.createElement(Typography, Object.assign({}, rest, { variant: "default", className: clsx(className, { 'flex-grow': flexGrow }) }), children));
+    var { flexGrow = false, children, className } = _a, rest = __rest(_a, ["flexGrow", "children", "className"]);
+    const { description } = bannerStyles({ flexGrow });
+    return (React.createElement(Typography, Object.assign({}, rest, { variant: "default", className: description({ className }) }), children));
 };
 Banner.ContentContainer = (_a) => {
     var { layout, children, className } = _a, rest = __rest(_a, ["layout", "children", "className"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: clsx(className, 'flex w-full', {
-            'flex-col': layout === 'vertical',
-            'flex-row flex-nowrap gap-7 items-center': layout === 'horizontal',
-        }) }), children));
+    const { contentContainer } = bannerStyles({ layout });
+    return (React.createElement("div", Object.assign({}, rest, { className: contentContainer({ className }) }), children));
 };
 Banner.ImageContainer = (_a) => {
     var { children } = _a, rest = __rest(_a, ["children"]);
@@ -44,10 +71,12 @@ Banner.ImageContainer = (_a) => {
 };
 Banner.Actions = (_a) => {
     var { children, className, layout } = _a, rest = __rest(_a, ["children", "className", "layout"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: clsx(className, 'flex gap-4', { 'mt-5': layout === 'vertical' }) }), children));
+    const { actions } = bannerStyles({ layout });
+    return (React.createElement("div", Object.assign({}, rest, { className: actions({ className }) }), children));
 };
 Banner.DismissContainer = (_a) => {
     var { layout, children, className } = _a, rest = __rest(_a, ["layout", "children", "className"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: clsx(className, { 'self-start': layout === 'vertical', 'self-center': layout === 'horizontal' }) }), children));
+    const { dismissContainer } = bannerStyles({ layout });
+    return (React.createElement("div", Object.assign({}, rest, { className: dismissContainer({ className }) }), children));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFubmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2F0b21zL0Jhbm5lci9CYW5uZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFFNUIsT0FBTyxFQUFFLEdBQUcsRUFBaUIsTUFBTSx1QkFBdUIsQ0FBQztBQUUzRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUF5QjdELE1BQU0sQ0FBQyxNQUFNLE1BQU0sR0FBc0YsQ0FBQyxFQU16RyxFQUFFLEVBQUU7UUFOcUcsRUFDeEcsUUFBUSxFQUNSLFNBQVMsRUFDVCxNQUFNLEVBQ04sT0FBTyxPQUVSLEVBREksSUFBSSxjQUxpRyw4Q0FNekcsQ0FEUTtJQUNILE9BQUEsQ0FDSiw2Q0FDTSxJQUFJLElBQ1IsU0FBUyxFQUFFLElBQUksQ0FBQyxTQUFTLEVBQUUsb0RBQW9ELEVBQUU7WUFDL0UsY0FBYyxFQUFFLE1BQU0sS0FBSyxZQUFZO1lBQ3ZDLFVBQVUsRUFBRSxPQUFPLEtBQUssU0FBUztZQUNqQyw2QkFBNkIsRUFBRSxPQUFPLEtBQUssVUFBVTtTQUN0RCxDQUFDLEtBRUQsUUFBUSxDQUNMLENBQ1AsQ0FBQTtDQUFBLENBQUM7QUFFRixNQUFNLENBQUMsS0FBSyxHQUFHLENBQUMsRUFBd0MsRUFBRSxFQUFFO1FBQTVDLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxNQUFNLE9BQVcsRUFBTixJQUFJLGNBQXRDLG1DQUF3QyxDQUFGO0lBQU8sT0FBQSxDQUMzRCxvQkFBQyxVQUFVLG9CQUNMLElBQUksSUFDUixPQUFPLEVBQUMsWUFBWSxFQUNwQixLQUFLLEVBQUMsU0FBUyxFQUNmLFNBQVMsRUFBRSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ3pCLE1BQU0sRUFBRSxNQUFNLEtBQUssVUFBVTtTQUM5QixDQUFDLEtBRUQsUUFBUSxDQUNFLENBQ2QsQ0FBQTtDQUFBLENBQUM7QUFFRixNQUFNLENBQUMsV0FBVyxHQUFHLENBQUMsRUFBMEMsRUFBRSxFQUFFO1FBQTlDLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxTQUFTLE9BQVcsRUFBTixJQUFJLGNBQXhDLHFDQUEwQyxDQUFGO0lBQU8sT0FBQSxDQUNuRSxvQkFBQyxVQUFVLG9CQUFLLElBQUksSUFBRSxPQUFPLEVBQUMsU0FBUyxFQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsU0FBUyxFQUFFLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxDQUFDLEtBQzFGLFFBQVEsQ0FDRSxDQUNkLENBQUE7Q0FBQSxDQUFDO0FBRUYsTUFBTSxDQUFDLGdCQUFnQixHQUFHLENBQUMsRUFBd0MsRUFBRSxFQUFFO1FBQTVDLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxTQUFTLE9BQVcsRUFBTixJQUFJLGNBQXRDLG1DQUF3QyxDQUFGO0lBQU8sT0FBQSxDQUN0RSw2Q0FDTSxJQUFJLElBQ1IsU0FBUyxFQUFFLElBQUksQ0FBQyxTQUFTLEVBQUUsYUFBYSxFQUFFO1lBQ3hDLFVBQVUsRUFBRSxNQUFNLEtBQUssVUFBVTtZQUNqQyx5Q0FBeUMsRUFBRSxNQUFNLEtBQUssWUFBWTtTQUNuRSxDQUFDLEtBRUQsUUFBUSxDQUNMLENBQ1AsQ0FBQTtDQUFBLENBQUM7QUFFRixNQUFNLENBQUMsY0FBYyxHQUFHLENBQUMsRUFBcUIsRUFBRSxFQUFFO1FBQXpCLEVBQUUsUUFBUSxPQUFXLEVBQU4sSUFBSSxjQUFuQixZQUFxQixDQUFGO0lBQU8sT0FBQSxDQUNqRCxvQkFBQyxHQUFHLG9CQUFLLElBQUksSUFBRSxPQUFPLEVBQUMsYUFBYSxFQUFDLFVBQVUsRUFBQyxRQUFRLEVBQUMsTUFBTSxFQUFDLElBQUksRUFBQyxVQUFVLEVBQUMsR0FBRyxLQUNoRixRQUFRLENBQ0wsQ0FDUCxDQUFBO0NBQUEsQ0FBQztBQUVGLE1BQU0sQ0FBQyxPQUFPLEdBQUcsQ0FBQyxFQUF3QyxFQUFFLEVBQUU7UUFBNUMsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sT0FBVyxFQUFOLElBQUksY0FBdEMsbUNBQXdDLENBQUY7SUFBTyxPQUFBLENBQzdELDZDQUFTLElBQUksSUFBRSxTQUFTLEVBQUUsSUFBSSxDQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsRUFBRSxNQUFNLEVBQUUsTUFBTSxLQUFLLFVBQVUsRUFBRSxDQUFDLEtBQ3ZGLFFBQVEsQ0FDTCxDQUNQLENBQUE7Q0FBQSxDQUFDO0FBRUYsTUFBTSxDQUFDLGdCQUFnQixHQUFHLENBQUMsRUFBd0MsRUFBRSxFQUFFO1FBQTVDLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxTQUFTLE9BQVcsRUFBTixJQUFJLGNBQXRDLG1DQUF3QyxDQUFGO0lBQU8sT0FBQSxDQUN0RSw2Q0FDTSxJQUFJLElBQ1IsU0FBUyxFQUFFLElBQUksQ0FBQyxTQUFTLEVBQUUsRUFBRSxZQUFZLEVBQUUsTUFBTSxLQUFLLFVBQVUsRUFBRSxhQUFhLEVBQUUsTUFBTSxLQUFLLFlBQVksRUFBRSxDQUFDLEtBRTFHLFFBQVEsQ0FDTCxDQUNQLENBQUE7Q0FBQSxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFubmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2F0b21zL0Jhbm5lci9CYW5uZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxPQUFPLEVBQUUsR0FBRyxFQUFpQixNQUFNLHVCQUF1QixDQUFDO0FBRTNELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQXlCN0QsTUFBTSxZQUFZLEdBQUcsRUFBRSxDQUFDO0lBQ3RCLEtBQUssRUFBRTtRQUNMLElBQUksRUFBRSxvREFBb0Q7UUFDMUQsS0FBSyxFQUFFLEVBQUU7UUFDVCxXQUFXLEVBQUUsRUFBRTtRQUNmLGdCQUFnQixFQUFFLGFBQWE7UUFDL0IsT0FBTyxFQUFFLFlBQVk7UUFDckIsZ0JBQWdCLEVBQUUsRUFBRTtLQUNyQjtJQUNELFFBQVEsRUFBRTtRQUNSLE1BQU0sRUFBRTtZQUNOLFVBQVUsRUFBRTtnQkFDVixJQUFJLEVBQUUsY0FBYztnQkFDcEIsZ0JBQWdCLEVBQUUseUNBQXlDO2dCQUMzRCxnQkFBZ0IsRUFBRSxhQUFhO2FBQ2hDO1lBQ0QsUUFBUSxFQUFFO2dCQUNSLEtBQUssRUFBRSxNQUFNO2dCQUNiLGdCQUFnQixFQUFFLFVBQVU7Z0JBQzVCLE9BQU8sRUFBRSxNQUFNO2dCQUNmLGdCQUFnQixFQUFFLFlBQVk7YUFDL0I7U0FDRjtRQUNELE9BQU8sRUFBRTtZQUNQLE9BQU8sRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUU7WUFDN0IsUUFBUSxFQUFFLEVBQUUsSUFBSSxFQUFFLDZCQUE2QixFQUFFO1NBQ2xEO1FBQ0QsUUFBUSxFQUFFO1lBQ1IsSUFBSSxFQUFFLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRTtTQUNuQztLQUNGO0NBQ0YsQ0FBQyxDQUFD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

package/dist/src/atoms/Button/Button.d.ts

@@ -15,7 +15,7 @@ export declare const buttonClasses: import("tailwind-variants").TVReturnType<{
     fullWidth: {
         true: string;
     };
-}, undefined, string[], import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "Aquarium-Button whitespace-nowrap transition text-center text-primary-intense rounded-sm relative px-4 py-3 inline-flex gap-3 items-center justify-center", import("tailwind-variants/dist/config").TVConfig<{
     kind: {
         primary: string;
         secondary: string;
@@ -71,7 +71,7 @@ export declare const buttonClasses: import("tailwind-variants").TVReturnType<{
     loading: {
         true: string;
     };
-}, undefined, string[], import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "active:text-primary-active disabled:text-primary-inactive disabled:bg-body", import("tailwind-variants/dist/config").TVConfig<{
     kind: {
         primary: string[];
         secondary: string[];

package/dist/src/atoms/Button/Button.js

@@ -17,7 +17,7 @@ import { loading as loadingIcon } from '../../../src/icons';
 import { focusRingStyle, interactiveTextStyles } from '../../../src/utils/constants';
 const buttonStateClasses = tv({
     extend: focusRingStyle,
-    base: ['active:text-primary-active', 'disabled:text-primary-inactive disabled:bg-body'],
+    base: 'active:text-primary-active disabled:text-primary-inactive disabled:bg-body',
     variants: {
         kind: {
             primary: [
@@ -44,16 +44,7 @@ const buttonStateClasses = tv({
 });
 export const buttonClasses = tv({
     extend: buttonStateClasses,
-    base: [
-        'Aquarium-Button',
-        'whitespace-nowrap',
-        'transition',
-        'text-center text-primary-intense',
-        'rounded-sm',
-        'relative',
-        'px-4 py-3',
-        'inline-flex gap-3 items-center justify-center',
-    ],
+    base: 'Aquarium-Button whitespace-nowrap transition text-center text-primary-intense rounded-sm relative px-4 py-3 inline-flex gap-3 items-center justify-center',
     variants: {
         kind: {
             primary: 'Aquarium-Button.Primary text-white bg-primary-default icon-stroke-2',
@@ -114,4 +105,4 @@ export const Icon = (_a) => {
     var { dense = false } = _a, props = __rest(_a, ["dense"]);
     return (React.createElement(_Icon, Object.assign({}, props, { width: iconSize(dense), height: iconSize(dense) })));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2F0b21zL0J1dHRvbi9CdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxJQUFJLElBQUksS0FBSyxFQUFrQixVQUFVLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzVCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxPQUFPLEVBQUUsT0FBTyxJQUFJLFdBQVcsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNuRCxPQUFPLEVBQUUsY0FBYyxFQUFFLHFCQUFxQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFJNUUsTUFBTSxrQkFBa0IsR0FBRyxFQUFFLENBQUM7SUFDNUIsTUFBTSxFQUFFLGNBQWM7SUFDdEIsSUFBSSxFQUFFLENBQUMsNEJBQTRCLEVBQUUsaURBQWlELENBQUM7SUFDdkYsUUFBUSxFQUFFO1FBQ1IsSUFBSSxFQUFFO1lBQ0osT0FBTyxFQUFFO2dCQUNQLDRDQUE0QztnQkFDNUMsMEJBQTBCO2dCQUMxQiwrQ0FBK0M7YUFDaEQ7WUFDRCxTQUFTLEVBQUU7Z0JBQ1QscURBQXFEO2dCQUNyRCx3QkFBd0I7Z0JBQ3hCLHNDQUFzQzthQUN2QztZQUNELEtBQUssRUFBRSxDQUFDLDJCQUEyQixDQUFDO1lBQ3BDLElBQUksRUFBRSxxQkFBcUIsRUFBRTtZQUM3QixJQUFJLEVBQUUsQ0FBQyw0QkFBNEIsRUFBRSx3QkFBd0IsQ0FBQztTQUMvRDtRQUNELFFBQVEsRUFBRTtZQUNSLElBQUksRUFBRSxvQkFBb0I7U0FDM0I7UUFDRCxPQUFPLEVBQUU7WUFDUCxJQUFJLEVBQUUsYUFBYTtTQUNwQjtLQUNGO0NBQ0YsQ0FBQyxDQUFDO0FBRUgsTUFBTSxD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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2F0b21zL0J1dHRvbi9CdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxJQUFJLElBQUksS0FBSyxFQUFrQixVQUFVLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzVCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxPQUFPLEVBQUUsT0FBTyxJQUFJLFdBQVcsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNuRCxPQUFPLEVBQUUsY0FBYyxFQUFFLHFCQUFxQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFJNUUsTUFBTSxrQkFBa0IsR0FBRyxFQUFFLENBQUM7SUFDNUIsTUFBTSxFQUFFLGNBQWM7SUFDdEIsSUFBSSxFQUFFLDRFQUE0RTtJQUNsRixRQUFRLEVBQUU7UUFDUixJQUFJLEVBQUU7WUFDSixPQUFPLEVBQUU7Z0JBQ1AsNENBQTRDO2dCQUM1QywwQkFBMEI7Z0JBQzFCLCtDQUErQzthQUNoRDtZQUNELFNBQVMsRUFBRTtnQkFDVCxxREFBcUQ7Z0JBQ3JELHdCQUF3QjtnQkFDeEIsc0NBQXNDO2FBQ3ZDO1lBQ0QsS0FBSyxFQUFFLENBQUMsMkJBQTJCLENBQUM7WUFDcEMsSUFBSSxFQUFFLHFCQUFxQixFQUFFO1lBQzdCLElBQUksRUFBRSxDQUFDLDRCQUE0QixFQUFFLHdCQUF3QixDQUFDO1NBQy9EO1FBQ0QsUUFBUSxFQUFFO1lBQ1IsSUFBSSxFQUFFLG9CQUFvQjtTQUMzQjtRQUNELE9BQU8sRUFBRTtZQUNQLElBQUksRUFBRSxhQUFhO1NBQ3BCO0tBQ0Y7Q0FDRixDQUFDLENBQUM7QUFFSCxNQUFNLENBQUMsTUFBTSxhQUFhLEdBQUcsRUFB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

package/dist/src/atoms/Card/Card.js

@@ -10,56 +10,156 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { clsx } from 'clsx';
 import { isNumber } from 'lodash-es';
+import { tv } from 'tailwind-variants';
 import { Box } from '../../../src/molecules/Box/Box';
 import { Typography } from '../../../src/molecules/Typography/Typography';
 import { LineClamp } from '../../../src/atoms/LineClamp/LineClamp';
-const getCommonCardStyles = ({ fullWidth = false, enableMinWidth = true, disabled = false, }) => clsx('border-[2px] border-muted rounded-[2px] relative p-5 flex flex-col gap-5 bg-body outline-none transition-all', {
-    'w-[280px]': !fullWidth,
-    'w-full': fullWidth,
-    'min-w-[280px]': fullWidth && enableMinWidth,
-    'bg-muted cursor-not-allowed focus:border-transparent opacity-50': disabled,
+const commonCardClasses = tv({
+    base: 'border-[2px] border-muted rounded-[2px] relative p-5 flex flex-col gap-5 bg-body outline-none transition-all',
+    variants: {
+        fullWidth: {
+            true: 'w-full',
+            false: 'w-[280px]',
+        },
+        enableMinWidth: {
+            true: '',
+            false: '',
+        },
+        disabled: {
+            true: 'bg-muted cursor-not-allowed focus:border-transparent opacity-50',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        {
+            fullWidth: true,
+            enableMinWidth: true,
+            class: 'min-w-[280px]',
+        },
+    ],
+});
+const cardClasses = tv({
+    extend: commonCardClasses,
+    variants: {
+        clickable: {
+            true: 'cursor-pointer hover:bg-primary-hover active:bg-body',
+            false: '',
+        },
+        modality: {
+            keyboard: '',
+            pointer: '',
+            undefined: '',
+        },
+    },
+    compoundVariants: [
+        {
+            clickable: true,
+            modality: 'keyboard',
+            class: 'focusable',
+        },
+    ],
+});
+const cardContentClasses = tv({
+    slots: {
+        colorHighlight: 'h-1 w-full absolute top-0 left-0 right-0',
+        imageContainer: '-mx-4',
+        image: 'w-full bg-cover object-cover',
+        content: 'flex flex-col flex-auto',
+        actions: 'flex gap-3 items-center',
+    },
+    variants: {
+        imageSize: {
+            full: {
+                imageContainer: '-mt-4',
+                image: 'h-[225px]',
+            },
+            normal: {
+                image: 'h-[174px]',
+            },
+            custom: {},
+        },
+        dense: {
+            true: {},
+            false: {
+                content: 'gap-4',
+                actions: 'pt-3',
+            },
+        },
+    },
 });
 export const Card = React.forwardRef((props, ref) => {
     const { disabled = false, clickable: _clickable, className, children, role = _clickable ? 'button' : undefined, modality, enableMinWidth, fullWidth } = props, rest = __rest(props, ["disabled", "clickable", "className", "children", "role", "modality", "enableMinWidth", "fullWidth"]);
     const clickable = Boolean(role !== undefined && !disabled);
-    return (React.createElement("div", Object.assign({ ref: ref, role: role }, rest, { className: clsx(getCommonCardStyles(props), {
-            'cursor-pointer hover:bg-primary-hover active:bg-body': clickable && !disabled,
-            'focusable': clickable && modality === 'keyboard',
-        }, className) }), children));
+    return (React.createElement("div", Object.assign({ ref: ref, role: role }, rest, { className: cardClasses({
+            fullWidth,
+            enableMinWidth,
+            disabled,
+            clickable: clickable && !disabled,
+            modality,
+            className,
+        }) }), children));
+});
+const labelCardClasses = tv({
+    extend: commonCardClasses,
+    variants: {
+        checked: {
+            true: 'border-primary-default',
+            false: '',
+        },
+        modality: {
+            keyboard: '',
+            pointer: '',
+            undefined: '',
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            class: 'cursor-pointer hover:bg-primary-hover active:bg-body',
+        },
+        {
+            modality: 'keyboard',
+            class: 'focusable',
+        },
+    ],
 });
 const Label = (props) => {
-    const { className, checked = false, children, modality, enableMinWidth, fullWidth, disabled } = props, rest = __rest(props, ["className", "checked", "children", "modality", "enableMinWidth", "fullWidth", "disabled"]);
-    return (React.createElement("label", Object.assign({}, rest, { className: clsx(getCommonCardStyles(props), {
-            'cursor-pointer hover:bg-primary-hover active:bg-body': !disabled,
-            'border-primary-default': checked,
-            'focusable': modality === 'keyboard',
-        }, className) }), children));
+    const { className, checked = false, children, modality, enableMinWidth = true, fullWidth = false, disabled = false } = props, rest = __rest(props, ["className", "checked", "children", "modality", "enableMinWidth", "fullWidth", "disabled"]);
+    return (React.createElement("label", Object.assign({}, rest, { className: labelCardClasses({
+            fullWidth,
+            enableMinWidth,
+            disabled,
+            checked,
+            modality,
+            className,
+        }) }), children));
 };
 const ColorHighlight = (_a) => {
     var { color, className } = _a, rest = __rest(_a, ["color", "className"]);
-    return React.createElement(Box, Object.assign({}, rest, { backgroundColor: color, className: clsx('h-1 w-full absolute top-0 left-0 right-0', className) }));
+    const { colorHighlight } = cardContentClasses();
+    return React.createElement(Box, Object.assign({}, rest, { backgroundColor: color, className: colorHighlight({ className }) }));
 };
 const ImageContainer = (_a) => {
     var { className, fullSize } = _a, rest = __rest(_a, ["className", "fullSize"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: clsx('-mx-4', {
-            '-mt-4': Boolean(fullSize),
-        }, className) })));
+    const { imageContainer } = cardContentClasses({ imageSize: fullSize ? 'full' : 'normal' });
+    return React.createElement("div", Object.assign({}, rest, { className: imageContainer({ className }) }));
+};
+const Image = ({ image: imageSrc, imageAlt, fullSize = false, imageHeight }) => {
+    const imageSize = imageHeight ? 'custom' : fullSize ? 'full' : 'normal';
+    const { image } = cardContentClasses({ imageSize });
+    return (React.createElement("img", { src: imageSrc, alt: imageAlt, className: image(), style: imageHeight ? { height: isNumber(imageHeight) ? `${imageHeight}px` : imageHeight } : undefined }));
 };
-const classes = 'w-full bg-cover object-cover';
-const Image = ({ image, imageAlt, fullSize = false, imageHeight }) => (React.createElement("img", { src: image, alt: imageAlt, className: clsx(classes, {
-        'h-[174px]': !imageHeight && !fullSize,
-        'h-[225px]': !imageHeight && fullSize,
-    }), style: { height: isNumber(imageHeight) ? `${imageHeight}px` : imageHeight } }));
 const Title = (props) => (React.createElement(Box.Flex, Object.assign({ component: "div", alignItems: "center", gap: "2" }, props)));
 const Content = (_a) => {
-    var { className, dense } = _a, rest = __rest(_a, ["className", "dense"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: clsx('flex flex-col flex-auto', { 'gap-4': !dense }, className) })));
+    var { className, dense = false } = _a, rest = __rest(_a, ["className", "dense"]);
+    const { content } = cardContentClasses({ dense });
+    return React.createElement("div", Object.assign({}, rest, { className: content({ className }) }));
 };
 const Actions = (_a) => {
-    var { className, dense } = _a, rest = __rest(_a, ["className", "dense"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: clsx(className, 'flex gap-3 items-center', { 'pt-3': !dense }) })));
+    var { className, dense = false } = _a, rest = __rest(_a, ["className", "dense"]);
+    const { actions } = cardContentClasses({ dense });
+    return React.createElement("div", Object.assign({}, rest, { className: actions({ className }) }));
 };
 Card.Label = Label;
 Card.Title = Title;
@@ -81,4 +181,4 @@ export const getTitleContent = ({ title, clampTitle, dense = false, }) => {
     }
     return titleContent;
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FyZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9DYXJkL0NhcmQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDNUIsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUVyQyxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDNUMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBRWpFLE9BQU8sRUFBRSxTQUFTLEVBQWMsTUFBTSwrQkFBK0IsQ0FBQztBQStCdEUsTUFBTSxtQkFBbUIsR0FBRyxDQUFDLEVBQzNCLFNBQVMsR0FBRyxLQUFLLEVBQ2pCLGNBQWMsR0FBRyxJQUFJLEVBQ3JCLFFBQVEsR0FBRyxLQUFLLEdBQzZDLEVBQUUsRUFBRSxDQUNqRSxJQUFJLENBQUMsOEdBQThHLEVBQUU7SUFDbkgsV0FBVyxFQUFFLENBQUMsU0FBUztJQUN2QixRQUFRLEVBQUUsU0FBUztJQUNuQixlQUFlLEVBQUUsU0FBUyxJQUFJLGNBQWM7SUFDNUMsaUVBQWlFLEVBQUUsUUFBUTtDQUM1RSxDQUFDLENBQUM7QUFFTCxNQUFNLENBQUMsTUFBTSxJQUFJLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBdUMsQ0FBQyxLQUFLLEVBQUUsR0FBRyxFQUFFLEVBQUU7SUFDeEYsTUFBTSxFQUNKLFFBQVEsR0FBRyxLQUFLLEVBQ2hCLFNBQVMsRUFBRSxVQUFVLEVBQ3JCLFNBQVMsRUFDVCxRQUFRLEVBQ1IsSUFBSSxHQUFHLFVBQVUsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQ3hDLFFBQVEsRUFDUixjQUFjLEVBQ2QsU0FBUyxLQUVQLEtBQUssRUFESixJQUFJLFVBQ0wsS0FBSyxF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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FyZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9DYXJkL0NhcmQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDckMsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBRXZDLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUM1QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFFakUsT0FBTyxFQUFFLFNBQVMsRUFBYyxNQUFNLCtCQUErQixDQUFDO0FBK0J0RSxNQUFNLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztJQUMzQixJQUFJLEVBQUUsOEdBQThHO0lBQ3BILFFBQVEsRUFBRTtRQUNSLFNBQVMsRUFBRTtZQUNULElBQUksRUFBRSxRQUFRO1lBQ2QsS0FBSyxFQUFFLFdBQVc7U0FDbkI7UUFDRCxjQUFjLEVBQUU7WUFDZCxJQUFJLEVBQUUsRUFBRTtZQUNSLEtBQUssRUFBRSxFQUFFO1NBQ1Y7UUFDRCxRQUFRLEVBQUU7WUFDUixJQUFJLEVBQUUsaUVBQWlFO1lBQ3ZFLEtBQUssRUFBRSxFQUFFO1NBQ1Y7S0FDRjtJQUNELGdCQUFnQixFQUFFO1FBQ2hCO1lBQ0UsU0FBUyxFQUFFLElBQUk7WUFDZixjQUFjLEVBQUUsSUFBSTtZQUNwQixLQUFLLEVBQUUsZUFBZTtTQUN2QjtLQUNGO0NBQ0YsQ0FBQyxDQUFDO0FBRUgsTUFBTSxXQUFXLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLE1BQU0sRUFBRSxpQkFBaUI7SUFDekIsUUFBUSxFQUFFO1FBQ1IsU0FBUyxFQUFFO1lBQ1QsSUFBSSxFQUFFLHNEQUFzRDtZQUM1RCxLQUFLLEVBQUUsRUFBRTtTQUNWO1FBQ0QsUUFBUSxFQUFFO1lBQ1IsUUFB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

package/dist/src/atoms/Checkbox/Checkbox.js

@@ -10,25 +10,36 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { clsx } from 'clsx';
+import { tv } from 'tailwind-variants';
 import { Icon } from '../../../src/molecules/Icon/Icon';
 import minus from '../../../src/icons/minus';
 import tick from '../../../src/icons/tick';
+const checkboxClasses = tv({
+    slots: {
+        wrapper: 'inline-flex justify-center items-center self-center relative',
+        input: 'peer appearance-none outline-none w-5 h-5 rounded-sm border border-transparent',
+        icon: 'absolute top-0 right-0 pointer-events-none p-[2px] w-5 h-5 text-transparent [&>path]:stroke-transparent [&>path]:stroke-[3px] rounded-sm border border-default peer-focus:border-info-default',
+    },
+    variants: {
+        disabled: {
+            true: {
+                wrapper: 'border-muted',
+                input: 'cursor-not-allowed bg-muted checked:bg-primary-muted',
+                icon: 'border-muted peer-checked:text-primary-default peer-checked:[&>path]:stroke-primary-70 peer-checked:border-transparent',
+            },
+            false: {
+                wrapper: 'hover:border-intense peer-checked:border-primary-default',
+                input: 'cursor-pointer checked:bg-primary-default',
+                icon: 'border-default peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-default',
+            },
+        },
+    },
+});
 export const Checkbox = React.forwardRef((_a, ref) => {
     var { id, children, name, disabled = false, readOnly = false, indeterminate = false } = _a, props = __rest(_a, ["id", "children", "name", "disabled", "readOnly", "indeterminate"]);
-    return (React.createElement("span", { className: clsx('inline-flex justify-center items-center self-center relative', {
-            'hover:border-intense peer-checked:border-primary-default': !disabled,
-            'border-muted': disabled,
-        }) },
-        React.createElement("input", Object.assign({ id: id, ref: ref, type: "checkbox", name: name }, props, { className: clsx('peer appearance-none outline-none w-5 h-5 rounded-sm border border-transparent', {
-                'cursor-pointer checked:bg-primary-default': !disabled,
-                'cursor-not-allowed bg-muted checked:bg-primary-muted': disabled,
-            }), readOnly: readOnly, disabled: disabled })),
-        React.createElement(Icon, { icon: indeterminate ? minus : tick, strokeWidth: "3px", className: clsx('absolute top-0 right-0', 'pointer-events-none p-[2px] w-5 h-5', 'text-transparent [&>path]:stroke-transparent [&>path]:stroke-[3px]', 'rounded-sm border border-default peer-focus:border-info-default', 
-            // It seems that we can't combine peer selectors and use 'peer-checked:peer-disabled:bg-muted' style instead.
-            {
-                'border-default peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-default': !disabled,
-                'border-muted peer-checked:text-primary-default peer-checked:[&>path]:stroke-primary-70 peer-checked:border-transparent': disabled,
-            }) })));
+    const { wrapper, input, icon } = checkboxClasses({ disabled });
+    return (React.createElement("span", { className: wrapper() },
+        React.createElement("input", Object.assign({ id: id, ref: ref, type: "checkbox", name: name }, props, { className: input(), readOnly: readOnly, disabled: disabled })),
+        React.createElement(Icon, { icon: indeterminate ? minus : tick, strokeWidth: "3px", className: icon() })));
 });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hlY2tib3guanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvYXRvbXMvQ2hlY2tib3gvQ2hlY2tib3gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFFNUIsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRS9DLE9BQU8sS0FBSyxNQUFNLGlCQUFpQixDQUFDO0FBQ3BDLE9BQU8sSUFBSSxNQUFNLGdCQUFnQixDQUFDO0FBWWxDLE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUN0QyxDQUFDLEVBQTJGLEVBQUUsR0FBRyxFQUFFLEVBQUU7UUFBcEcsRUFBRSxFQUFFLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxRQUFRLEdBQUcsS0FBSyxFQUFFLFFBQVEsR0FBRyxLQUFLLEVBQUUsYUFBYSxHQUFHLEtBQUssT0FBWSxFQUFQLEtBQUssY0FBekYsbUVBQTJGLENBQUY7SUFBWSxPQUFBLENBQ3BHLDhCQUNFLFNBQVMsRUFBRSxJQUFJLENBQUMsOERBQThELEVBQUU7WUFDOUUsMERBQTBELEVBQUUsQ0FBQyxRQUFRO1lBQ3JFLGNBQWMsRUFBRSxRQUFRO1NBQ3pCLENBQUM7UUFFRiw2Q0FDRSxFQUFFLEVBQUUsRUFBRSxFQUNOLEdBQUcsRUFBRSxHQUFHLEVBQ1IsSUFBSSxFQUFDLFVBQVUsRUFDZixJQUFJLEVBQUUsSUFBSSxJQUNOLEtBQUssSUFDVCxTQUFTLEVBQUUsSUFBSSxDQUFDLGdGQUFnRixFQUFFO2dCQUNoRywyQ0FBMkMsRUFBRSxDQUFDLFFBQVE7Z0JBQ3RELHNEQUFzRCxFQUFFLFFBQVE7YUFDakUsQ0FBQyxFQUNGLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLFFBQVEsRUFBRSxRQUFRLElBQ2xCO1FBRUYsb0JBQUMsSUFBSSxJQUNILElBQUksRUFBRSxhQUFhLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSSxFQUNsQyxXQUFXLEVBQUMsS0FBSyxFQUNqQixTQUFTLEVBQUUsSUFBSSxDQUNiLHdCQUF3QixFQUN4QixxQ0FBcUMsRUFDckMsb0VBQW9FLEVBQ3BFLGlFQUFpRTtZQUNqRSw2R0FBNkc7WUFDN0c7Z0JBQ0UseUlBQXlJLEVBQ3ZJLENBQUMsUUFBUTtnQkFDWCx3SEFBd0gsRUFDdEgsUUFBUTthQUNYLENBQ0YsR0FDRCxDQUNHLENBQ1IsQ0FBQTtDQUFBLENBQ0YsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hlY2tib3guanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvYXRvbXMvQ2hlY2tib3gvQ2hlY2tib3gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFFL0MsT0FBTyxLQUFLLE1BQU0saUJBQWlCLENBQUM7QUFDcEMsT0FBTyxJQUFJLE1BQU0sZ0JBQWdCLENBQUM7QUFZbEMsTUFBTSxlQUFlLEdBQUcsRUFBRSxDQUFDO0lBQ3pCLEtBQUssRUFBRTtRQUNMLE9BQU8sRUFBRSw4REFBOEQ7UUFDdkUsS0FBSyxFQUFFLGdGQUFnRjtRQUN2RixJQUFJLEVBQUUsK0xBQStMO0tBQ3RNO0lBQ0QsUUFBUSxFQUFFO1FBQ1IsUUFBUSxFQUFFO1lBQ1IsSUFBSSxFQUFFO2dCQUNKLE9BQU8sRUFBRSxjQUFjO2dCQUN2QixLQUFLLEVBQUUsc0RBQXNEO2dCQUM3RCxJQUFJLEVBQUUsd0hBQXdIO2FBQy9IO1lBQ0QsS0FBSyxFQUFFO2dCQUNMLE9BQU8sRUFBRSwwREFBMEQ7Z0JBQ25FLEtBQUssRUFBRSwyQ0FBMkM7Z0JBQ2xELElBQUksRUFBRSx5SUFBeUk7YUFDaEo7U0FDRjtLQUNGO0NBQ0YsQ0FBQyxDQUFDO0FBRUgsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ3RDLENBQUMsRUFBMkYsRUFBRSxHQUFHLEVBQUUsRUFBRTtRQUFwRyxFQUFFLEVBQUUsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLFFBQVEsR0FBRyxLQUFLLEVBQUUsUUFBUSxHQUFHLEtBQUssRUFBRSxhQUFhLEdBQUcsS0FBSyxPQUFZLEVBQVAsS0FBSyxjQUF6RixtRUFBMkYsQ0FBRjtJQUN4RixNQUFNLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsR0FBRyxlQUFlLENBQUMsRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDO0lBQy9ELE9BQU8sQ0FDTCw4QkFBTSxTQUFTLEVBQUUsT0FBTyxFQUFFO1FBQ3hCLDZDQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sR0FBRyxFQUFFLEdBQUcsRUFDUixJQUFJLEVBQUMsVUFBVSxFQUNmLElBQUksRUFBRSxJQUFJLElBQ04sS0FBSyxJQUNULFNBQVMsRUFBRSxLQUFLLEVBQUUsRUFDbEIsUUFBUSxFQUFFLFFBQVEsRUFDbEIsUUFBUSxFQUFFLFFBQVEsSUFDbEI7UUFFRixvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLGFBQWEsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLEVBQUUsV0FBVyxFQUFDLEtBQUssRUFBQyxTQUFTLEVBQUUsSUFBSSxFQUFFLEdBQUksQ0FDNUUsQ0FDUixDQUFDO0FBQ0osQ0FBQyxDQUNGLENBQUMifQ==

package/dist/src/atoms/Chip/Chip.js

@@ -10,15 +10,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { clsx } from 'clsx';
+import { tv } from 'tailwind-variants';
+const chipContainerClasses = tv({
+    base: 'inline-flex items-center rounded-sm transition whitespace-nowrap',
+    variants: {
+        dense: {
+            true: 'typography-caption py-1 px-2 gap-x-2',
+            false: 'typography-small py-2 px-3 gap-x-3 leading-tight',
+        },
+    },
+});
 const Container = React.forwardRef((_a, ref) => {
     var { dense = false, className, children } = _a, rest = __rest(_a, ["dense", "className", "children"]);
-    return (React.createElement("span", Object.assign({ ref: ref, className: clsx('inline-flex items-center rounded-sm transition whitespace-nowrap', {
-            'typography-small py-2 px-3 gap-x-3 leading-tight': !dense,
-            'typography-caption py-1 px-2 gap-x-2': dense,
-        }, className) }, rest), children));
+    return (React.createElement("span", Object.assign({ ref: ref, className: chipContainerClasses({ dense, className }) }, rest), children));
 });
 export const Chip = {
     Container,
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9DaGlwL0NoaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFTNUIsTUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDaEMsQ0FBQyxFQUErQyxFQUFFLEdBQUcsRUFBRSxFQUFFO1FBQXhELEVBQUUsS0FBSyxHQUFHLEtBQUssRUFBRSxTQUFTLEVBQUUsUUFBUSxPQUFXLEVBQU4sSUFBSSxjQUE3QyxrQ0FBK0MsQ0FBRjtJQUFZLE9BQUEsQ0FDeEQsNENBQ0UsR0FBRyxFQUFFLEdBQUcsRUFDUixTQUFTLEVBQUUsSUFBSSxDQUNiLGtFQUFrRSxFQUNsRTtZQUNFLGtEQUFrRCxFQUFFLENBQUMsS0FBSztZQUMxRCxzQ0FBc0MsRUFBRSxLQUFLO1NBQzlDLEVBQ0QsU0FBUyxDQUNWLElBQ0csSUFBSSxHQUVQLFFBQVEsQ0FDSixDQUNSLENBQUE7Q0FBQSxDQUNGLENBQUM7QUFNRixNQUFNLENBQUMsTUFBTSxJQUFJLEdBQXNCO0lBQ3JDLFNBQVM7Q0FDVixDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9DaGlwL0NoaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQVN2QyxNQUFNLG9CQUFvQixHQUFHLEVBQUUsQ0FBQztJQUM5QixJQUFJLEVBQUUsa0VBQWtFO0lBQ3hFLFFBQVEsRUFBRTtRQUNSLEtBQUssRUFBRTtZQUNMLElBQUksRUFBRSxzQ0FBc0M7WUFDNUMsS0FBSyxFQUFFLGtEQUFrRDtTQUMxRDtLQUNGO0NBQ0YsQ0FBQyxDQUFDO0FBRUgsTUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDaEMsQ0FBQyxFQUErQyxFQUFFLEdBQUcsRUFBRSxFQUFFO1FBQXhELEVBQUUsS0FBSyxHQUFHLEtBQUssRUFBRSxTQUFTLEVBQUUsUUFBUSxPQUFXLEVBQU4sSUFBSSxjQUE3QyxrQ0FBK0MsQ0FBRjtJQUFZLE9BQUEsQ0FDeEQsNENBQU0sR0FBRyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsb0JBQW9CLENBQUMsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLENBQUMsSUFBTSxJQUFJLEdBQzVFLFFBQVEsQ0FDSixDQUNSLENBQUE7Q0FBQSxDQUNGLENBQUM7QUFNRixNQUFNLENBQUMsTUFBTSxJQUFJLEdBQXNCO0lBQ3JDLFNBQVM7Q0FDVixDQUFDIn0=

package/dist/src/atoms/ChoiceChip/ChoiceChip.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+export type SelectionMode = 'checkbox' | 'radio';
+type BaseChoiceChipProps = {
+    /**
+     * Content for the choice chip.
+     */
+    children: React.ReactNode;
+    /**
+     * If true, dense version of the component will be rendered.
+     */
+    dense?: boolean;
+    /**
+     * Controlled checked state. If provided, the component operates in controlled mode.
+     */
+    checked?: boolean;
+    /**
+     * Default checked state for uncontrolled mode.
+     */
+    defaultChecked?: boolean;
+    /**
+     * onChange() callback will be called when choice chip checked state updates.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * The name attribute for the input element. Required for form submission and radio groups.
+     */
+    name?: string;
+    /**
+     * If true, the choice chip will be disabled.
+     */
+    disabled?: boolean;
+};
+type CheckboxModeProps = BaseChoiceChipProps & {
+    /**
+     * The selection mode determines the input type.
+     * - 'checkbox': Can be toggled on/off independently (default)
+     */
+    selectionMode?: 'checkbox';
+    /**
+     * Optional identifier value for the chip (used in groups).
+     */
+    value?: string;
+};
+type RadioModeProps = BaseChoiceChipProps & {
+    /**
+     * The selection mode determines the input type.
+     * - 'radio': Typically used in a group where only one can be selected
+     */
+    selectionMode: 'radio';
+    /**
+     * Identifier value for the chip (required for radio mode).
+     */
+    value: string;
+};
+export type ChoiceChipProps = CheckboxModeProps | RadioModeProps;
+export declare const ChoiceChip: React.FC<ChoiceChipProps>;
+export {};

package/dist/src/atoms/ChoiceChip/ChoiceChip.js

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useControlledState } from '@react-stately/utils';
+import { tv } from 'tailwind-variants';
+const choiceChipClasses = tv({
+    slots: {
+        label: 'Aquarium-ChoiceChip inline-flex cursor-pointer',
+        input: 'peer appearance-none',
+        chip: [
+            'inline-flex items-center border rounded-full transition whitespace-nowrap hover:bg-primary-hover',
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-info-default peer-focus-visible:ring-offset-1',
+            'peer-disabled:cursor-not-allowed peer-disabled:text-inactive peer-disabled:bg-muted peer-disabled:hover:bg-muted',
+        ],
+    },
+    variants: {
+        selected: {
+            true: { chip: 'text-default border-primary-default border-2' },
+            false: { chip: 'text-muted border-default m-[1px]' },
+        },
+        dense: {
+            true: { chip: 'typography-caption py-2 px-3 gap-x-2' },
+            false: { chip: 'typography-small py-3 px-5 gap-x-3' },
+        },
+    },
+    defaultVariants: {
+        selected: false,
+        dense: false,
+    },
+});
+export const ChoiceChip = (_a) => {
+    var { children, dense, selectionMode = 'checkbox', defaultChecked = false, checked, onChange, name, value, disabled } = _a, rest = __rest(_a, ["children", "dense", "selectionMode", "defaultChecked", "checked", "onChange", "name", "value", "disabled"]);
+    const [selected, setSelected] = useControlledState(checked, defaultChecked, onChange);
+    const { label, input, chip } = choiceChipClasses({ selected, dense });
+    const handleChange = () => {
+        setSelected(!selected);
+    };
+    return (React.createElement("label", Object.assign({ className: label() }, rest),
+        React.createElement("input", { type: selectionMode, name: name, value: value, className: input(), checked: selected, onChange: handleChange, disabled: disabled }),
+        React.createElement("span", { className: chip() }, children)));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hvaWNlQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9DaG9pY2VDaGlwL0Nob2ljZUNoaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQzFELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxNQUFNLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztJQUMzQixLQUFLLEVBQUU7UUFDTCxLQUFLLEVBQUUsZ0RBQWdEO1FBQ3ZELEtBQUssRUFBRSxzQkFBc0I7UUFDN0IsSUFBSSxFQUFFO1lBQ0osa0dBQWtHO1lBQ2xHLGlHQUFpRztZQUNqRyxrSEFBa0g7U0FDbkg7S0FDRjtJQUNELFFBQVEsRUFBRTtRQUNSLFFBQVEsRUFBRTtZQUNSLElBQUksRUFBRSxFQUFFLElBQUksRUFBRSw4Q0FBOEMsRUFBRTtZQUM5RCxLQUFLLEVBQUUsRUFBRSxJQUFJLEVBQUUsbUNBQW1DLEVBQUU7U0FDckQ7UUFDRCxLQUFLLEVBQUU7WUFDTCxJQUFJLEVBQUUsRUFBRSxJQUFJLEVBQUUsc0NBQXNDLEVBQUU7WUFDdEQsS0FBSyxFQUFFLEVBQUUsSUFBSSxFQUFFLG9DQUFvQyxFQUFFO1NBQ3REO0tBQ0Y7SUFDRCxlQUFlLEVBQUU7UUFDZixRQUFRLEVBQUUsS0FBSztRQUNmLEtBQUssRUFBRSxLQUFLO0tBQ2I7Q0FDRixDQUFDLENBQUM7QUFxRUgsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUE4QixDQUFDLEVBV3JELEVBQUUsRUFBRTtRQVhpRCxFQUNwRCxRQUFRLEVBQ1IsS0FBSyxFQUNMLGFBQWEsR0FBRyxVQUFVLEVBQzFCLGNBQWMsR0FBRyxLQUFLLEVBQ3RCLE9BQU8sRUFDUCxRQUFRLEVBQ1IsSUFBSSxFQUNKLEtBQUssRUFDTCxRQUFRLE9BRVQsRUFESSxJQUFJLGNBVjZDLDRHQVdyRCxDQURRO0lBRVAsTUFBTSxDQUFDLFFBQVEsRUFBRSxXQUFXLENBQUMsR0FBRyxrQkFBa0IsQ0FBQyxPQUFPLEVBQUUsY0FBYyxFQUFFLFFBQVEsQ0FBQyxDQUFDO0lBQ3RGLE1BQU0sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxHQUFHLGlCQUFpQixDQUFDLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7SUFFdEUsTUFBTSxZQUFZLEdBQUcsR0FBRyxFQUFFO1FBQ3hCLFdBQVcsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3pCLENBQUMsQ0FBQztJQUVGLE9BQU8sQ0FDTCw2Q0FBTyxTQUFTLEVBQUUsS0FBSyxFQUFFLElBQU0sSUFBSTtRQUNqQywrQkFDRSxJQUFJLEVBQUUsYUFBYSxFQUNuQixJQUFJLEVBQUUsSUFBSSxFQUNWLEtBQUssRUFBRSxLQUFLLEVBQ1osU0FBUyxFQUFFLEtBQUssRUFBRSxFQUNsQixPQUFPLEVBQUUsUUFBUSxFQUNqQixRQUFRLEVBQUUsWUFBWSxFQUN0QixRQUFRLEVBQUUsUUFBUSxHQUNsQjtRQUNGLDhCQUFNLFNBQVMsRUFBRSxJQUFJLEVBQUUsSUFBRyxRQUFRLENBQVEsQ0FDcEMsQ0FDVCxDQUFDO0FBQ0osQ0FBQyxDQUFDIn0=