@aivenio/aquarium 4.9.0 → 5.0.0

package/dist/src/atoms/Stepper/Stepper.js

@@ -10,52 +10,114 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { clsx } from 'clsx';
+import { tv } from 'tailwind-variants';
 import { InlineIcon } from '../../../src/molecules/Icon/Icon';
 import tick from '../../../src/icons/tick';
+const connectorStyles = tv({
+    slots: {
+        container: 'absolute w-full -left-1/2',
+        connector: 'w-full',
+    },
+    variants: {
+        completed: {
+            true: { connector: 'bg-success-default' },
+            false: { connector: 'bg-intense' },
+        },
+        dense: {
+            true: {
+                container: 'top-[3px] px-[14px]',
+                connector: 'h-[3px]',
+            },
+            false: {
+                container: 'top-[14px] px-[20px]',
+                connector: 'h-[2px]',
+            },
+        },
+    },
+});
+const stepStyles = tv({
+    slots: {
+        step: 'flex flex-col items-center relative text-center',
+        indicator: 'Aquarium-Stepper-Indicator rounded-full flex justify-center items-center mx-2 mb-3',
+    },
+    variants: {
+        state: {
+            active: { step: 'text-intense' },
+            completed: { step: 'text-intense' },
+            inactive: { step: 'text-inactive' },
+        },
+        dense: {
+            true: { indicator: 'h-[8px] w-[8px]' },
+            false: { indicator: 'h-[32px] w-[32px]' },
+        },
+    },
+    compoundSlots: [
+        // Non-dense variants
+        {
+            slots: ['indicator'],
+            dense: false,
+            state: 'active',
+            class: 'border-2 border-intense',
+        },
+        {
+            slots: ['indicator'],
+            dense: false,
+            state: 'inactive',
+            class: 'border-2 border-default',
+        },
+        {
+            slots: ['indicator'],
+            dense: false,
+            state: 'completed',
+            class: 'border-2 text-white bg-success-default border-success-intense',
+        },
+        // Dense variants
+        {
+            slots: ['indicator'],
+            dense: true,
+            state: 'active',
+            class: 'bg-body-intense',
+        },
+        {
+            slots: ['indicator'],
+            dense: true,
+            state: 'inactive',
+            class: 'bg-intense',
+        },
+        {
+            slots: ['indicator'],
+            dense: true,
+            state: 'completed',
+            class: 'text-success-default',
+        },
+    ],
+});
 export const Stepper = (_a) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
     return React.createElement("div", Object.assign({}, rest, { className: className }));
 };
 const ConnectorContainer = (_a) => {
-    var { className, completed, dense } = _a, rest = __rest(_a, ["className", "completed", "dense"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: clsx('absolute w-full -left-1/2', {
-            'top-[3px] px-[14px]': Boolean(dense),
-            'top-[14px] px-[20px]': !dense,
-        }, className) })));
+    var { className, dense = false } = _a, rest = __rest(_a, ["className", "dense"]);
+    const { container } = connectorStyles({ dense });
+    return React.createElement("div", Object.assign({}, rest, { className: container({ className }) }));
 };
 const Connector = (_a) => {
-    var { children, className, completed, dense } = _a, rest = __rest(_a, ["children", "className", "completed", "dense"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: clsx('w-full', {
-            'bg-intense': !completed,
-            'bg-success-default': Boolean(completed),
-            'h-[2px]': !dense,
-            'h-[3px]': Boolean(dense),
-        }, className) })));
+    var { children, className, completed = false, dense = false } = _a, rest = __rest(_a, ["children", "className", "completed", "dense"]);
+    const { connector } = connectorStyles({ completed, dense });
+    return React.createElement("div", Object.assign({}, rest, { className: connector({ className }) }));
 };
 const Step = (_a) => {
     var { className, state } = _a, rest = __rest(_a, ["className", "state"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: clsx('flex flex-col items-center relative text-center', {
-            'text-intense': state !== 'inactive',
-            'text-inactive': state === 'inactive',
-        }, className) })));
+    const { step } = stepStyles({ state });
+    return React.createElement("div", Object.assign({}, rest, { className: step({ className }) }));
 };
-const getClassNames = (state) => clsx('h-[32px] w-[32px] border-2', {
-    'border-intense': state === 'active',
-    'border-default': state === 'inactive',
-    'text-white bg-success-default border-success-intense': state === 'completed',
-});
-const getDenseClassNames = (state) => clsx('h-[8px] w-[8px]', {
-    'bg-body-intense': state === 'active',
-    'bg-intense': state === 'inactive',
-    'text-success-default': state === 'completed',
-});
 const Indicator = (_a) => {
-    var { children, className, state, dense } = _a, rest = __rest(_a, ["children", "className", "state", "dense"]);
-    return (React.createElement("div", Object.assign({}, rest, { className: clsx('Aquarium-Stepper-Indicator', 'rounded-full flex justify-center items-center mx-2 mb-3', dense ? getDenseClassNames(state) : getClassNames(state), className) }), state === 'completed' ? React.createElement(InlineIcon, { icon: tick }) : dense ? null : children));
+    var { children, className, state, dense = false } = _a, rest = __rest(_a, ["children", "className", "state", "dense"]);
+    const { indicator } = stepStyles({ state, dense });
+    return (React.createElement("div", Object.assign({}, rest, { className: indicator({ className }) }), state === 'completed' ? React.createElement(InlineIcon, { icon: tick }) : dense ? null : children));
 };
 Step.Indicator = Indicator;
 Stepper.Step = Step;
 ConnectorContainer.Connector = Connector;
 Stepper.ConnectorContainer = ConnectorContainer;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9TdGVwcGVyL1N0ZXBwZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFFNUIsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRXJELE9BQU8sSUFBSSxNQUFNLGdCQUFnQixDQUFDO0FBV2xDLE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBeUIsQ0FBQyxFQUFzQixFQUFFLEVBQUU7UUFBMUIsRUFBRSxTQUFTLE9BQVcsRUFBTixJQUFJLGNBQXBCLGFBQXNCLENBQUY7SUFBTyxPQUFBLDZDQUFTLElBQUksSUFBRSxTQUFTLEVBQUUsU0FBUyxJQUFJLENBQUE7Q0FBQSxDQUFDO0FBT2pILE1BQU0sa0JBQWtCLEdBQXdFLENBQUMsRUFLaEcsRUFBRSxFQUFFO1FBTDRGLEVBQy9GLFNBQVMsRUFDVCxTQUFTLEVBQ1QsS0FBSyxPQUVOLEVBREksSUFBSSxjQUp3RixtQ0FLaEcsQ0FEUTtJQUNILE9BQUEsQ0FDSiw2Q0FDTSxJQUFJLElBQ1IsU0FBUyxFQUFFLElBQUksQ0FDYiwyQkFBMkIsRUFDM0I7WUFDRSxxQkFBcUIsRUFBRSxPQUFPLENBQUMsS0FBSyxDQUFDO1lBQ3JDLHNCQUFzQixFQUFFLENBQUMsS0FBSztTQUMvQixFQUNELFNBQVMsQ0FDVixJQUNELENBQ0gsQ0FBQTtDQUFBLENBQUM7QUFPRixNQUFNLFNBQVMsR0FBNkIsQ0FBQyxFQUFrRCxFQUFFLEVBQUU7UUFBdEQsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxLQUFLLE9BQVcsRUFBTixJQUFJLGNBQWhELCtDQUFrRCxDQUFGO0lBQU8sT0FBQSxDQUNsRyw2Q0FDTSxJQUFJLElBQ1IsU0FBUyxFQUFFLElBQUksQ0FDYixRQUFRLEVBQ1I7WUFDRSxZQUFZLEVBQUUsQ0FBQyxTQUFTO1lBQ3hCLG9CQUFvQixFQUFFLE9BQU8sQ0FBQyxTQUFTLENBQUM7WUFDeEMsU0FBUyxFQUFFLENBQUMsS0FBSztZQUNqQixTQUFTLEVBQUUsT0FBTyxDQUFDLEtBQUssQ0FBQztTQUMxQixFQUNELFNBQVMsQ0FDVixJQUNELENBQ0gsQ0FBQTtDQUFBLENBQUM7QUFNRixNQUFNLElBQUksR0FBMEQsQ0FBQyxFQUE2QixFQUFFLEVBQUU7UUFBakMsRUFBRSxTQUFTLEVBQUUsS0FBSyxPQUFXLEVBQU4sSUFBSSxjQUEzQixzQkFBNkIsQ0FBRjtJQUFPLE9BQUEsQ0FDckcsNkNBQ00sSUFBSSxJQUNSLFNBQVMsRUFBRSxJQUFJLENBQ2IsaURBQWlELEVBQ2pEO1lBQ0UsY0FBYyxFQUFFLEtBQUssS0FBSyxVQUFVO1lBQ3BDLGVBQWUsRUFBRSxLQUFLLEtBQUssVUFBVTtTQUN0QyxFQUNELFNBQVMsQ0FDVixJQUNELENBQ0gsQ0FBQTtDQUFBLENBQUM7QUFRRixNQUFNLGFBQWEsR0FBRyxDQUFDLEtBQVksRUFBRSxFQUFFLENBQ3JDLElBQUksQ0FBQyw0QkFBNEIsRUFBRTtJQUNqQyxnQkFBZ0IsRUFBRSxLQUFLLEtBQUssUUFBUTtJQUNwQyxnQkFBZ0IsRUFBRSxLQUFLLEtBQUssVUFBVTtJQUN0QyxzREFBc0QsRUFBRSxLQUFLLEtBQUssV0FBVztDQUM5RSxDQUFDLENBQUM7QUFFTCxNQUFNLGtCQUFrQixHQUFHLENBQUMsS0FBWSxFQUFFLEVBQUUsQ0FDMUMsSUFBSSxDQUFDLGlCQUFpQixFQUFFO0lBQ3RCLGlCQUFpQixFQUFFLEtBQUssS0FBSyxRQUFRO0lBQ3JDLFlBQVksRUFBRSxLQUFLLEtBQUssVUFBVTtJQUNsQyxzQkFBc0IsRUFBRSxLQUFLLEtBQUssV0FBVztDQUM5QyxDQUFDLENBQUM7QUFFTCxNQUFNLFNBQVMsR0FBNkIsQ0FBQyxFQUE4QyxFQUFFLEVBQUU7UUFBbEQsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxLQUFLLE9BQVcsRUFBTixJQUFJLGNBQTVDLDJDQUE4QyxDQUFGO0lBQU8sT0FBQSxDQUM5Riw2Q0FDTSxJQUFJLElBQ1IsU0FBUyxFQUFFLElBQUksQ0FDYiw0QkFBNEIsRUFDNUIseURBQXlELEVBQ3pELEtBQUssQ0FBQyxDQUFDLENBQUMsa0JBQWtCLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsRUFDeEQsU0FBUyxDQUNWLEtBRUEsS0FBSyxLQUFLLFdBQVcsQ0FBQyxDQUFDLENBQUMsb0JBQUMsVUFBVSxJQUFDLElBQUksRUFBRSxJQUFJLEdBQUksQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FDekUsQ0FDUCxDQUFBO0NBQUEsQ0FBQztBQUVGLElBQUksQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDO0FBQzNCLE9BQU8sQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO0FBQ3BCLGtCQUFrQixDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUM7QUFDekMsT0FBTyxDQUFDLGtCQUFrQixHQUFHLGtCQUFrQixDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9TdGVwcGVyL1N0ZXBwZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFFckQsT0FBTyxJQUFJLE1BQU0sZ0JBQWdCLENBQUM7QUFXbEMsTUFBTSxlQUFlLEdBQUcsRUFBRSxDQUFDO0lBQ3pCLEtBQUssRUFBRTtRQUNMLFNBQVMsRUFBRSwyQkFBMkI7UUFDdEMsU0FBUyxFQUFFLFFBQVE7S0FDcEI7SUFDRCxRQUFRLEVBQUU7UUFDUixTQUFTLEVBQUU7WUFDVCxJQUFJLEVBQUUsRUFBRSxTQUFTLEVBQUUsb0JBQW9CLEVBQUU7WUFDekMsS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRTtTQUNuQztRQUNELEtBQUssRUFBRTtZQUNMLElBQUksRUFBRTtnQkFDSixTQUFTLEVBQUUscUJBQXFCO2dCQUNoQyxTQUFTLEVBQUUsU0FBUzthQUNyQjtZQUNELEtBQUssRUFBRTtnQkFDTCxTQUFTLEVBQUUsc0JBQXNCO2dCQUNqQyxTQUFTLEVBQUUsU0FBUzthQUNyQjtTQUNGO0tBQ0Y7Q0FDRixDQUFDLENBQUM7QUFFSCxNQUFNLFVBQVUsR0FBRyxFQUFFLENBQUM7SUFDcEIsS0FBSyxFQUFFO1FBQ0wsSUFBSSxFQUFFLGlEQUFpRDtRQUN2RCxTQUFTLEVBQUUsb0ZBQW9GO0tBQ2hHO0lBQ0QsUUFBUSxFQUFFO1FBQ1IsS0FBSyxFQUFFO1lBQ0wsTUFBTSxFQUFFLEVBQUUsSUFBSSxFQUFFLGNBQWMsRUFBRTtZQUNoQyxTQUFTLEVBQUUsRUFBRSxJQUFJLEVBQUUsY0FBYyxFQUFFO1lBQ25DLFFBQVEsRUFBRSxF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

package/dist/src/atoms/Switch/Switch.js

@@ -10,18 +10,32 @@ 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 ban from '../../../src/icons/ban';
+const switchStyles = tv({
+    slots: {
+        wrapper: 'relative inline-flex justify-center items-center self-center group',
+        input: 'appearance-none peer/switch rounded-full inline-block w-[34px] h-[20px] transition duration-300 outline-none focusable cursor-pointer disabled:cursor-not-allowed',
+        thumb: 'pointer-events-none rounded-full absolute inline-flex justify-center items-center transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5 bg-white left-2 peer-checked/switch:left-1 text-inactive peer-checked/switch:text-primary-muted',
+    },
+    variants: {
+        disabled: {
+            true: {
+                input: 'bg-default checked:opacity-50 checked:bg-primary-muted',
+            },
+            false: {
+                input: 'bg-intense hover:bg-intense checked:bg-primary-default hover:checked:bg-primary-intense',
+                thumb: 'shadow-4dp',
+            },
+        },
+    },
+});
 export const Switch = React.forwardRef((_a, ref) => {
     var { id, children, name, disabled = false, readOnly = false } = _a, props = __rest(_a, ["id", "children", "name", "disabled", "readOnly"]);
-    return (React.createElement("span", { className: "relative inline-flex justify-center items-center self-center group" },
-        React.createElement("input", Object.assign({ id: id, ref: ref, type: "checkbox", name: name }, props, { className: clsx('appearance-none peer/switch rounded-full inline-block w-[34px] h-[20px] transition duration-300', 'outline-none focusable bg-intense', 'cursor-pointer disabled:cursor-not-allowed', {
-                'hover:bg-intense checked:bg-primary-default hover:checked:bg-primary-intense': !disabled,
-                'bg-default checked:opacity-50 checked:bg-primary-muted': disabled,
-            }), readOnly: readOnly, disabled: disabled })),
-        React.createElement("span", { className: clsx('pointer-events-none rounded-full absolute inline-flex justify-center items-center transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5', 'bg-white left-2 peer-checked/switch:left-1 text-inactive peer-checked/switch:text-primary-muted', {
-                'shadow-4dp': !disabled,
-            }) }, disabled && React.createElement(Icon, { icon: ban, width: "10px", height: "10px" }))));
+    const { wrapper, input, thumb } = switchStyles({ 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("span", { className: thumb() }, disabled && React.createElement(Icon, { icon: ban, width: "10px", height: "10px" }))));
 });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3dpdGNoLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2F0b21zL1N3aXRjaC9Td2l0Y2gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFFNUIsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRS9DLE9BQU8sR0FBRyxNQUFNLGVBQWUsQ0FBQztBQVdoQyxNQUFNLENBQUMsTUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDcEMsQ0FBQyxFQUFvRSxFQUFFLEdBQUcsRUFBRSxFQUFFO1FBQTdFLEVBQUUsRUFBRSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsUUFBUSxHQUFHLEtBQUssRUFBRSxRQUFRLEdBQUcsS0FBSyxPQUFZLEVBQVAsS0FBSyxjQUFsRSxrREFBb0UsQ0FBRjtJQUFZLE9BQUEsQ0FDN0UsOEJBQU0sU0FBUyxFQUFDLG9FQUFvRTtRQUNsRiw2Q0FDRSxFQUFFLEVBQUUsRUFBRSxFQUNOLEdBQUcsRUFBRSxHQUFHLEVBQ1IsSUFBSSxFQUFDLFVBQVUsRUFDZixJQUFJLEVBQUUsSUFBSSxJQUNOLEtBQUssSUFDVCxTQUFTLEVBQUUsSUFBSSxDQUNiLGlHQUFpRyxFQUNqRyxtQ0FBbUMsRUFDbkMsNENBQTRDLEVBQzVDO2dCQUNFLDhFQUE4RSxFQUFFLENBQUMsUUFBUTtnQkFDekYsd0RBQXdELEVBQUUsUUFBUTthQUNuRSxDQUNGLEVBQ0QsUUFBUSxFQUFFLFFBQVEsRUFDbEIsUUFBUSxFQUFFLFFBQVEsSUFDbEI7UUFFRiw4QkFDRSxTQUFTLEVBQUUsSUFBSSxDQUNiLCtKQUErSixFQUMvSixpR0FBaUcsRUFDakc7Z0JBQ0UsWUFBWSxFQUFFLENBQUMsUUFBUTthQUN4QixDQUNGLElBRUEsUUFBUSxJQUFJLG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBQyxNQUFNLEVBQUMsTUFBTSxFQUFDLE1BQU0sR0FBRyxDQUN0RCxDQUNGLENBQ1IsQ0FBQTtDQUFBLENBQ0YsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3dpdGNoLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2F0b21zL1N3aXRjaC9Td2l0Y2gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFFL0MsT0FBTyxHQUFHLE1BQU0sZUFBZSxDQUFDO0FBV2hDLE1BQU0sWUFBWSxHQUFHLEVBQUUsQ0FBQztJQUN0QixLQUFLLEVBQUU7UUFDTCxPQUFPLEVBQUUsb0VBQW9FO1FBQzdFLEtBQUssRUFDSCxtS0FBbUs7UUFDckssS0FBSyxFQUNILCtQQUErUDtLQUNsUTtJQUNELFFBQVEsRUFBRTtRQUNSLFFBQVEsRUFBRTtZQUNSLElBQUksRUFBRTtnQkFDSixLQUFLLEVBQUUsd0RBQXdEO2FBQ2hFO1lBQ0QsS0FBSyxFQUFFO2dCQUNMLEtBQUssRUFBRSx5RkFBeUY7Z0JBQ2hHLEtBQUssRUFBRSxZQUFZO2FBQ3BCO1NBQ0Y7S0FDRjtDQUNGLENBQUMsQ0FBQztBQUVILE1BQU0sQ0FBQyxNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNwQyxDQUFDLEVBQW9FLEVBQUUsR0FBRyxFQUFFLEVBQUU7UUFBN0UsRUFBRSxFQUFFLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxRQUFRLEdBQUcsS0FBSyxFQUFFLFFBQVEsR0FBRyxLQUFLLE9BQVksRUFBUCxLQUFLLGNBQWxFLGtEQUFvRSxDQUFGO0lBQ2pFLE1BQU0sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxHQUFHLFlBQVksQ0FBQyxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUM7SUFDN0QsT0FBTyxDQUNMLDhCQUFNLFNBQVMsRUFBRSxPQUFPLEVBQUU7UUFDeEIsNkNBQ0UsRUFBRSxFQUFFLEVBQUUsRUFDTixHQUFHLEVBQUUsR0FBRyxFQUNSLElBQUksRUFBQyxVQUFVLEVBQ2YsSUFBSSxFQUFFLElBQUksSUFDTixLQUFLLElBQ1QsU0FBUyxFQUFFLEtBQUssRUFBRSxFQUNsQixRQUFRLEVBQUUsUUFBUSxFQUNsQixRQUFRLEVBQUUsUUFBUSxJQUNsQjtRQUVGLDhCQUFNLFNBQVMsRUFBRSxLQUFLLEVBQUUsSUFBRyxRQUFRLElBQUksb0JBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFDLE1BQU0sRUFBQyxNQUFNLEVBQUMsTUFBTSxHQUFHLENBQVEsQ0FDeEYsQ0FDUixDQUFDO0FBQ0osQ0FBQyxDQUNGLENBQUMifQ==

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

@@ -41,6 +41,300 @@ export type TableSortCellProps = TableCellProps & {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     direction: SortDirection;
 };
+export declare const rowClassNames: string;
+export declare const cellClassNames: string;
+export declare const bodyCellClasses: import("tailwind-variants").TVReturnType<{
+    table: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}, undefined, "text-default py-3", import("tailwind-variants/dist/config").TVConfig<{
+    table: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}, {
+    table: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}>, {
+    table: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    table: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}, undefined, "text-default py-3", import("tailwind-variants/dist/config").TVConfig<{
+    table: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}, {
+    table: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const alignClasses: import("tailwind-variants").TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}, undefined, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}, {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}>, {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}, undefined, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}, {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const headCellClasses: import("tailwind-variants").TVReturnType<{
+    sticky: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}, undefined, "py-[14px] text-left border-intense text-muted font-semibold whitespace-nowrap", import("tailwind-variants/dist/config").TVConfig<{
+    sticky: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}, {
+    sticky: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}>, {
+    sticky: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    sticky: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}, undefined, "py-[14px] text-left border-intense text-muted font-semibold whitespace-nowrap", import("tailwind-variants/dist/config").TVConfig<{
+    sticky: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}, {
+    sticky: {
+        true: string;
+        false: string;
+    };
+    stickyColumn: {
+        left: string;
+        right: string;
+        undefined: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const sortCellButtonClasses: import("tailwind-variants").TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}, undefined, "group flex items-center gap-x-4 text-muted", import("tailwind-variants/dist/config").TVConfig<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}, {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}>, {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}, undefined, "group flex items-center gap-x-4 text-muted", import("tailwind-variants/dist/config").TVConfig<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}, {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+        stretch: string;
+        undefined: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const sortCellIconClasses: import("tailwind-variants").TVReturnType<{
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, "text-[9px]", import("tailwind-variants/dist/config").TVConfig<{
+    active: {
+        true: string;
+        false: string;
+    };
+}, {
+    active: {
+        true: string;
+        false: string;
+    };
+}>, {
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, "text-[9px]", import("tailwind-variants/dist/config").TVConfig<{
+    active: {
+        true: string;
+        false: string;
+    };
+}, {
+    active: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
 export declare const Table: React.FC<TableProps> & {
     Head: React.FC<TableHeadProps>;
     Body: React.FC<TableBodyProps>;
@@ -52,8 +346,6 @@ export declare const Table: React.FC<TableProps> & {
     SortCell: React.ForwardRefExoticComponent<React.RefAttributes<HTMLTableCellElement> & TableSortCellProps>;
     Caption: React.FC<React.ComponentProps<typeof Caption>>;
 };
-export declare const rowClassNames = "children:border-default group children:last:border-b-0 hover:bg-muted";
-export declare const cellClassNames = "px-4 border-b typography-small leading-[18px]";
 export declare const getBodyCellClassNames: (table?: boolean, stickyColumn?: StickyColumn) => string;
 export declare const getAlignClassNames: (align?: TextAlign) => string;
 export declare const getHeadCellClassNames: (sticky?: boolean, stickyColumn?: StickyColumn) => string;