@fewangsit/wangsvue-presets 1.0.80 → 1.0.81-alpha.1

package/wangsvue/splitbutton/index.js

@@ -1,786 +1,957 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Flexbox and Position
-                'inline-flex',
-                'relative',
-                // Shape
-                'rounded-md',
-                { 'shadow-lg': props.raised },
-            ],
-        });
-    },
-    button: {
-        root: function (_a) {
-            var parent = _a.parent;
-            return ({
-                class: [
-                    'relative',
-                    // Alignments
-                    'items-center inline-flex text-center align-bottom justify-center',
-                    // Sizes & Spacing
-                    'text-sm',
-                    {
-                        'px-2.5 py-1.5 min-w-[2rem]': parent.props.size === null && parent.props.label !== null,
-                        'px-2 py-1': parent.props.size === 'small',
-                        'px-3 py-2': parent.props.size === 'large',
-                    },
-                    {
-                        'h-8 w-8 p-0': parent.props.label == null,
-                    },
-                    // Shape
-                    'rounded-r-none',
-                    'border-r-0',
-                    { 'rounded-l-full': parent.props.rounded },
-                    {
-                        'rounded-md': !parent.props.rounded,
-                        'rounded-full': parent.props.rounded,
-                    },
-                    // Link Button
-                    {
-                        'text-primary-600 bg-transparent ring-transparent': parent.props.link,
-                    },
-                    // Plain Button
-                    {
-                        'text-white bg-gray-500 ring-1 ring-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text,
-                    },
-                    // Plain Text Button
-                    { 'text-surface-500': parent.props.plain && parent.props.text },
-                    // Plain Outlined Button
-                    {
-                        'text-surface-500 ring-1 ring-gray-500': parent.props.plain && parent.props.outlined,
-                    },
-                    // Text Button
-                    {
-                        'bg-transparent ring-transparent': parent.props.text && !parent.props.plain,
-                    },
-                    // Outlined Button
-                    { 'bg-transparent': parent.props.outlined && !parent.props.plain },
-                    // --- Severity Buttons ---
-                    // Primary Button
-                    {
-                        'text-white': !parent.props.link &&
-                            parent.props.severity === null &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-primary-500': !parent.props.link &&
-                            parent.props.severity === null &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-primary-500': !parent.props.link &&
-                            parent.props.severity === null &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Primary Text Button
-                    {
-                        'text-primary-500': parent.props.text &&
-                            parent.props.severity === null &&
-                            !parent.props.plain,
-                    },
-                    // Primary Outlined Button
-                    {
-                        'text-primary-500 ring-1 ring-primary-500 hover:bg-primary-300/20': parent.props.outlined &&
-                            parent.props.severity === null &&
-                            !parent.props.plain,
-                    },
-                    // Secondary Button
-                    {
-                        'text-white': parent.props.severity === 'secondary' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-surface-500': parent.props.severity === 'secondary' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-surface-500': parent.props.severity === 'secondary' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Secondary Text Button
-                    {
-                        'text-surface-500': parent.props.text &&
-                            parent.props.severity === 'secondary' &&
-                            !parent.props.plain,
-                    },
-                    // Secondary Outlined Button
-                    {
-                        'text-surface-500 ring-1 ring-surface-500 hover:bg-surface-300/20': parent.props.outlined &&
-                            parent.props.severity === 'secondary' &&
-                            !parent.props.plain,
-                    },
-                    // Success Button
-                    {
-                        'text-white': parent.props.severity === 'success' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-green-500': parent.props.severity === 'success' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-green-500': parent.props.severity === 'success' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Success Text Button
-                    {
-                        'text-surface-500': parent.props.text &&
-                            parent.props.severity === 'secondary' &&
-                            !parent.props.plain,
-                    },
-                    // Success Outlined Button
-                    {
-                        'text-green-500 ring-1 ring-green-500 hover:bg-green-300/20': parent.props.outlined &&
-                            parent.props.severity === 'success' &&
-                            !parent.props.plain,
-                    },
-                    // Info Button
-                    {
-                        'text-white': parent.props.severity === 'info' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-blue-500': parent.props.severity === 'info' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-blue-500': parent.props.severity === 'info' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Info Text Button
-                    {
-                        'text-blue-500': parent.props.text &&
-                            parent.props.severity === 'info' &&
-                            !parent.props.plain,
-                    },
-                    // Info Outlined Button
-                    {
-                        'text-blue-500 ring-1 ring-blue-500 hover:bg-blue-300/20 ': parent.props.outlined &&
-                            parent.props.severity === 'info' &&
-                            !parent.props.plain,
-                    },
-                    // Warning Button
-                    {
-                        'text-white': parent.props.severity === 'warning' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-orange-500': parent.props.severity === 'warning' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-orange-500': parent.props.severity === 'warning' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Warning Text Button
-                    {
-                        'text-orange-500': parent.props.text &&
-                            parent.props.severity === 'warning' &&
-                            !parent.props.plain,
-                    },
-                    // Warning Outlined Button
-                    {
-                        'text-orange-500 ring-1 ring-orange-500 hover:bg-orange-300/20': parent.props.outlined &&
-                            parent.props.severity === 'warning' &&
-                            !parent.props.plain,
-                    },
-                    // Help Button
-                    {
-                        'text-white': parent.props.severity === 'help' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-purple-500': parent.props.severity === 'help' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-purple-500': parent.props.severity === 'help' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Help Text Button
-                    {
-                        'text-purple-500': parent.props.text &&
-                            parent.props.severity === 'help' &&
-                            !parent.props.plain,
-                    },
-                    // Help Outlined Button
-                    {
-                        'text-purple-500 ring-1 ring-purple-500 hover:bg-purple-300/20': parent.props.outlined &&
-                            parent.props.severity === 'help' &&
-                            !parent.props.plain,
-                    },
-                    // Danger Button
-                    {
-                        'text-white': parent.props.severity === 'danger' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-red-500': parent.props.severity === 'danger' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-red-500': parent.props.severity === 'danger' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Danger Text Button
-                    {
-                        'text-red-500': parent.props.text &&
-                            parent.props.severity === 'danger' &&
-                            !parent.props.plain,
-                    },
-                    // Danger Outlined Button
-                    {
-                        'text-red-500 ring-1 ring-red-500 hover:bg-red-300/20': parent.props.outlined &&
-                            parent.props.severity === 'danger' &&
-                            !parent.props.plain,
-                    },
-                    // --- Severity Button States ---
-                    'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-current',
-                    {
-                        'focus:ring-offset-2': !parent.props.link &&
-                            !parent.props.plain &&
-                            !parent.props.outlined &&
-                            !parent.props.text,
-                    },
-                    // Link
-                    {
-                        'focus:ring-primary-500': parent.props.link,
-                    },
-                    // Plain
-                    {
-                        'hover:bg-gray-600 hover:ring-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text,
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-surface-300/20': parent.props.plain && (parent.props.text || parent.props.outlined),
-                    },
-                    // Primary
-                    {
-                        'hover:bg-primary-600 hover:ring-primary-600': !parent.props.link &&
-                            parent.props.severity === null &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-primary-500': parent.props.severity === null,
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-primary-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === null &&
-                            !parent.props.plain,
-                    },
-                    // Secondary
-                    {
-                        'hover:bg-surface-600 hover:ring-surface-600': parent.props.severity === 'secondary' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-surface-500': parent.props.severity === 'secondary',
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-surface-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === 'secondary' &&
-                            !parent.props.plain,
-                    },
-                    // Success
-                    {
-                        'hover:bg-green-600 hover:ring-green-600': parent.props.severity === 'success' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-green-500': parent.props.severity === 'success',
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-green-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === 'success' &&
-                            !parent.props.plain,
-                    },
-                    // Info
-                    {
-                        'hover:bg-blue-600 hover:ring-blue-600': parent.props.severity === 'info' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-blue-500': parent.props.severity === 'info',
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-blue-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === 'info' &&
-                            !parent.props.plain,
-                    },
-                    // Warning
-                    {
-                        'hover:bg-orange-600 hover:ring-orange-600': parent.props.severity === 'warning' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-orange-500': parent.props.severity === 'warning',
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-orange-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === 'warning' &&
-                            !parent.props.plain,
-                    },
-                    // Help
-                    {
-                        'hover:bg-purple-600 hover:ring-purple-600': parent.props.severity === 'help' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-purple-500': parent.props.severity === 'help',
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-purple-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === 'help' &&
-                            !parent.props.plain,
-                    },
-                    // Warning
-                    {
-                        'hover:bg-red-600 hover:ring-red-600': parent.props.severity === 'danger' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-red-500': parent.props.severity === 'danger',
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-red-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === 'danger' &&
-                            !parent.props.plain,
-                    },
-                    // Transitions
-                    'transition duration-200 ease-in-out',
-                    // Misc
-                    'cursor-pointer overflow-hidden select-none',
-                ],
-            });
-        },
-        icon: {
-            class: [
-                // Margins
-                'mr-2',
-            ],
-        },
-    },
-    menubutton: {
-        root: function (_a) {
-            var parent = _a.parent;
-            return ({
-                class: [
-                    'relative',
-                    // Alignments
-                    'items-center inline-flex text-center align-bottom justify-center',
-                    // Sizes & Spacing
-                    'text-sm',
-                    {
-                        'px-2.5 py-1.5 min-w-[2rem]': parent.props.size === null && parent.props.label !== null,
-                        'px-2 py-1': parent.props.size === 'small',
-                        'px-3 py-2': parent.props.size === 'large',
-                    },
-                    {
-                        'h-8 w-8 p-0': parent.props.label == null,
-                    },
-                    'ml-[1px]',
-                    // Shape
-                    'rounded-l-none',
-                    { 'rounded-l-full': parent.props.rounded },
-                    {
-                        'rounded-md': !parent.props.rounded,
-                        'rounded-full': parent.props.rounded,
-                    },
-                    // Link Button
-                    {
-                        'text-primary-600 bg-transparent ring-transparent': parent.props.link,
-                    },
-                    // Plain Button
-                    {
-                        'text-white bg-gray-500 ring-1 ring-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text,
-                    },
-                    // Plain Text Button
-                    { 'text-surface-500': parent.props.plain && parent.props.text },
-                    // Plain Outlined Button
-                    {
-                        'text-surface-500 ring-1 ring-gray-500': parent.props.plain && parent.props.outlined,
-                    },
-                    // Text Button
-                    {
-                        'bg-transparent ring-transparent': parent.props.text && !parent.props.plain,
-                    },
-                    // Outlined Button
-                    { 'bg-transparent': parent.props.outlined && !parent.props.plain },
-                    // --- Severity Buttons ---
-                    // Primary Button
-                    {
-                        'text-white': !parent.props.link &&
-                            parent.props.severity === null &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-primary-500': !parent.props.link &&
-                            parent.props.severity === null &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-primary-500': !parent.props.link &&
-                            parent.props.severity === null &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Primary Text Button
-                    {
-                        'text-primary-500': parent.props.text &&
-                            parent.props.severity === null &&
-                            !parent.props.plain,
-                    },
-                    // Primary Outlined Button
-                    {
-                        'text-primary-500 ring-1 ring-primary-500 hover:bg-primary-300/20': parent.props.outlined &&
-                            parent.props.severity === null &&
-                            !parent.props.plain,
-                    },
-                    // Secondary Button
-                    {
-                        'text-white': parent.props.severity === 'secondary' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-surface-500': parent.props.severity === 'secondary' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-surface-500': parent.props.severity === 'secondary' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Secondary Text Button
-                    {
-                        'text-surface-500': parent.props.text &&
-                            parent.props.severity === 'secondary' &&
-                            !parent.props.plain,
-                    },
-                    // Secondary Outlined Button
-                    {
-                        'text-surface-500 ring-1 ring-surface-500 hover:bg-surface-300/20': parent.props.outlined &&
-                            parent.props.severity === 'secondary' &&
-                            !parent.props.plain,
-                    },
-                    // Success Button
-                    {
-                        'text-white': parent.props.severity === 'success' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-green-500': parent.props.severity === 'success' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-green-500': parent.props.severity === 'success' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Success Text Button
-                    {
-                        'text-surface-500': parent.props.text &&
-                            parent.props.severity === 'secondary' &&
-                            !parent.props.plain,
-                    },
-                    // Success Outlined Button
-                    {
-                        'text-green-500 ring-1 ring-green-500 hover:bg-green-300/20': parent.props.outlined &&
-                            parent.props.severity === 'success' &&
-                            !parent.props.plain,
-                    },
-                    // Info Button
-                    {
-                        'text-white': parent.props.severity === 'info' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-blue-500': parent.props.severity === 'info' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-blue-500': parent.props.severity === 'info' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Info Text Button
-                    {
-                        'text-blue-500': parent.props.text &&
-                            parent.props.severity === 'info' &&
-                            !parent.props.plain,
-                    },
-                    // Info Outlined Button
-                    {
-                        'text-blue-500 ring-1 ring-blue-500 hover:bg-blue-300/20 ': parent.props.outlined &&
-                            parent.props.severity === 'info' &&
-                            !parent.props.plain,
-                    },
-                    // Warning Button
-                    {
-                        'text-white': parent.props.severity === 'warning' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-orange-500': parent.props.severity === 'warning' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-orange-500': parent.props.severity === 'warning' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Warning Text Button
-                    {
-                        'text-orange-500': parent.props.text &&
-                            parent.props.severity === 'warning' &&
-                            !parent.props.plain,
-                    },
-                    // Warning Outlined Button
-                    {
-                        'text-orange-500 ring-1 ring-orange-500 hover:bg-orange-300/20': parent.props.outlined &&
-                            parent.props.severity === 'warning' &&
-                            !parent.props.plain,
-                    },
-                    // Help Button
-                    {
-                        'text-white': parent.props.severity === 'help' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-purple-500': parent.props.severity === 'help' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-purple-500': parent.props.severity === 'help' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Help Text Button
-                    {
-                        'text-purple-500': parent.props.text &&
-                            parent.props.severity === 'help' &&
-                            !parent.props.plain,
-                    },
-                    // Help Outlined Button
-                    {
-                        'text-purple-500 ring-1 ring-purple-500 hover:bg-purple-300/20': parent.props.outlined &&
-                            parent.props.severity === 'help' &&
-                            !parent.props.plain,
-                    },
-                    // Danger Button
-                    {
-                        'text-white': parent.props.severity === 'danger' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'bg-red-500': parent.props.severity === 'danger' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                        'ring-1 ring-red-500': parent.props.severity === 'danger' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    // Danger Text Button
-                    {
-                        'text-red-500': parent.props.text &&
-                            parent.props.severity === 'danger' &&
-                            !parent.props.plain,
-                    },
-                    // Danger Outlined Button
-                    {
-                        'text-red-500 ring-1 ring-red-500 hover:bg-red-300/20': parent.props.outlined &&
-                            parent.props.severity === 'danger' &&
-                            !parent.props.plain,
-                    },
-                    // --- Severity Button States ---
-                    'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-current',
-                    {
-                        'focus:ring-offset-2': !parent.props.link &&
-                            !parent.props.plain &&
-                            !parent.props.outlined &&
-                            !parent.props.text,
-                    },
-                    // Link
-                    {
-                        'focus:ring-primary-500': parent.props.link,
-                    },
-                    // Plain
-                    {
-                        'hover:bg-gray-600 hover:ring-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text,
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-surface-300/20': parent.props.plain && (parent.props.text || parent.props.outlined),
-                    },
-                    // Primary
-                    {
-                        'hover:bg-primary-600 hover:ring-primary-600': !parent.props.link &&
-                            parent.props.severity === null &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-primary-500': parent.props.severity === null,
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-primary-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === null &&
-                            !parent.props.plain,
-                    },
-                    // Secondary
-                    {
-                        'hover:bg-surface-600 hover:ring-surface-600': parent.props.severity === 'secondary' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-surface-500': parent.props.severity === 'secondary',
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-surface-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === 'secondary' &&
-                            !parent.props.plain,
-                    },
-                    // Success
-                    {
-                        'hover:bg-green-600 hover:ring-green-600': parent.props.severity === 'success' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-green-500': parent.props.severity === 'success',
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-green-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === 'success' &&
-                            !parent.props.plain,
-                    },
-                    // Info
-                    {
-                        'hover:bg-blue-600 hover:ring-blue-600': parent.props.severity === 'info' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-blue-500': parent.props.severity === 'info',
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-blue-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === 'info' &&
-                            !parent.props.plain,
-                    },
-                    // Warning
-                    {
-                        'hover:bg-orange-600 hover:ring-orange-600': parent.props.severity === 'warning' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-orange-500': parent.props.severity === 'warning',
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-orange-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === 'warning' &&
-                            !parent.props.plain,
-                    },
-                    // Help
-                    {
-                        'hover:bg-purple-600 hover:ring-purple-600': parent.props.severity === 'help' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-purple-500': parent.props.severity === 'help',
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-purple-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === 'help' &&
-                            !parent.props.plain,
-                    },
-                    // Warning
-                    {
-                        'hover:bg-red-600 hover:ring-red-600': parent.props.severity === 'danger' &&
-                            !parent.props.text &&
-                            !parent.props.outlined &&
-                            !parent.props.plain,
-                    },
-                    {
-                        'focus:ring-red-500': parent.props.severity === 'danger',
-                    },
-                    // Text & Outlined Button
-                    {
-                        'hover:bg-red-300/20': (parent.props.text || parent.props.outlined) &&
-                            parent.props.severity === 'danger' &&
-                            !parent.props.plain,
-                    },
-                    // Transitions
-                    'transition duration-200 ease-in-out',
-                    // Misc
-                    'cursor-pointer overflow-hidden select-none',
-                ],
-            });
-        },
-        label: {
-            class: ['hidden'],
-        },
-    },
-};
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Flexbox and Position
+      'inline-flex',
+      'relative',
+
+      // Shape
+      'rounded-md',
+      { 'shadow-lg': props.raised },
+    ],
+  }),
+  button: {
+    root: ({ parent }) => ({
+      class: [
+        'relative',
+        // Alignments
+        'items-center inline-flex text-center align-bottom justify-center',
+
+        // Sizes & Spacing
+        'text-sm',
+        {
+          'px-2.5 py-1.5 min-w-[2rem]':
+            parent.props.size === null && parent.props.label !== null,
+          'px-2 py-1': parent.props.size === 'small',
+          'px-3 py-2': parent.props.size === 'large',
+        },
+        {
+          'h-8 w-8 p-0': parent.props.label == null,
+        },
+
+        // Shape
+        'rounded-r-none',
+        'border-r-0',
+        { 'rounded-l-full': parent.props.rounded },
+        {
+          'rounded-md': !parent.props.rounded,
+          'rounded-full': parent.props.rounded,
+        },
+
+        // Link Button
+        {
+          'text-primary-600 bg-transparent ring-transparent': parent.props.link,
+        },
+
+        // Plain Button
+        {
+          'text-white bg-gray-500 ring-1 ring-gray-500':
+            parent.props.plain && !parent.props.outlined && !parent.props.text,
+        },
+        // Plain Text Button
+        { 'text-surface-500': parent.props.plain && parent.props.text },
+        // Plain Outlined Button
+        {
+          'text-surface-500 ring-1 ring-gray-500':
+            parent.props.plain && parent.props.outlined,
+        },
+
+        // Text Button
+        {
+          'bg-transparent ring-transparent':
+            parent.props.text && !parent.props.plain,
+        },
+
+        // Outlined Button
+        { 'bg-transparent': parent.props.outlined && !parent.props.plain },
+
+        // --- Severity Buttons ---
+
+        // Primary Button
+        {
+          'text-white':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-primary-500':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-primary-500':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Primary Text Button
+        {
+          'text-primary-500':
+            parent.props.text &&
+            parent.props.severity === null &&
+            !parent.props.plain,
+        },
+        // Primary Outlined Button
+        {
+          'text-primary-500 ring-1 ring-primary-500 hover:bg-primary-300/20':
+            parent.props.outlined &&
+            parent.props.severity === null &&
+            !parent.props.plain,
+        },
+
+        // Secondary Button
+        {
+          'text-white':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-surface-500':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-surface-500':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Secondary Text Button
+        {
+          'text-surface-500':
+            parent.props.text &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+        // Secondary Outlined Button
+        {
+          'text-surface-500 ring-1 ring-surface-500 hover:bg-surface-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+
+        // Success Button
+        {
+          'text-white':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-green-500':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-green-500':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Success Text Button
+        {
+          'text-surface-500':
+            parent.props.text &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+        // Success Outlined Button
+        {
+          'text-green-500 ring-1 ring-green-500 hover:bg-green-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'success' &&
+            !parent.props.plain,
+        },
+
+        // Info Button
+        {
+          'text-white':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-blue-500':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-blue-500':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Info Text Button
+        {
+          'text-blue-500':
+            parent.props.text &&
+            parent.props.severity === 'info' &&
+            !parent.props.plain,
+        },
+        // Info Outlined Button
+        {
+          'text-blue-500 ring-1 ring-blue-500 hover:bg-blue-300/20 ':
+            parent.props.outlined &&
+            parent.props.severity === 'info' &&
+            !parent.props.plain,
+        },
+
+        // Warning Button
+        {
+          'text-white':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-orange-500':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-orange-500':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Warning Text Button
+        {
+          'text-orange-500':
+            parent.props.text &&
+            parent.props.severity === 'warning' &&
+            !parent.props.plain,
+        },
+        // Warning Outlined Button
+        {
+          'text-orange-500 ring-1 ring-orange-500 hover:bg-orange-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'warning' &&
+            !parent.props.plain,
+        },
+
+        // Help Button
+        {
+          'text-white':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-purple-500':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-purple-500':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Help Text Button
+        {
+          'text-purple-500':
+            parent.props.text &&
+            parent.props.severity === 'help' &&
+            !parent.props.plain,
+        },
+        // Help Outlined Button
+        {
+          'text-purple-500 ring-1 ring-purple-500 hover:bg-purple-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'help' &&
+            !parent.props.plain,
+        },
+
+        // Danger Button
+        {
+          'text-white':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-red-500':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-red-500':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Danger Text Button
+        {
+          'text-red-500':
+            parent.props.text &&
+            parent.props.severity === 'danger' &&
+            !parent.props.plain,
+        },
+        // Danger Outlined Button
+        {
+          'text-red-500 ring-1 ring-red-500 hover:bg-red-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'danger' &&
+            !parent.props.plain,
+        },
+
+        // --- Severity Button States ---
+        'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-current',
+        {
+          'focus:ring-offset-2':
+            !parent.props.link &&
+            !parent.props.plain &&
+            !parent.props.outlined &&
+            !parent.props.text,
+        },
+
+        // Link
+        {
+          'focus:ring-primary-500':
+            parent.props.link,
+        },
+
+        // Plain
+        {
+          'hover:bg-gray-600 hover:ring-gray-600':
+            parent.props.plain && !parent.props.outlined && !parent.props.text,
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-surface-300/20':
+            parent.props.plain && (parent.props.text || parent.props.outlined),
+        },
+
+        // Primary
+        {
+          'hover:bg-primary-600 hover:ring-primary-600':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-primary-500':
+            parent.props.severity === null,
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-primary-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === null &&
+            !parent.props.plain,
+        },
+
+        // Secondary
+        {
+          'hover:bg-surface-600 hover:ring-surface-600':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-surface-500':
+            parent.props.severity === 'secondary',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-surface-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+
+        // Success
+        {
+          'hover:bg-green-600 hover:ring-green-600':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-green-500':
+            parent.props.severity === 'success',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-green-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'success' &&
+            !parent.props.plain,
+        },
+
+        // Info
+        {
+          'hover:bg-blue-600 hover:ring-blue-600':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-blue-500':
+            parent.props.severity === 'info',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-blue-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'info' &&
+            !parent.props.plain,
+        },
+
+        // Warning
+        {
+          'hover:bg-orange-600 hover:ring-orange-600':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-orange-500':
+            parent.props.severity === 'warning',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-orange-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'warning' &&
+            !parent.props.plain,
+        },
+
+        // Help
+        {
+          'hover:bg-purple-600 hover:ring-purple-600':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-purple-500':
+            parent.props.severity === 'help',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-purple-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'help' &&
+            !parent.props.plain,
+        },
+
+        // Warning
+        {
+          'hover:bg-red-600 hover:ring-red-600':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-red-500':
+            parent.props.severity === 'danger',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-red-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'danger' &&
+            !parent.props.plain,
+        },
+
+        // Transitions
+        'transition duration-200 ease-in-out',
+
+        // Misc
+        'cursor-pointer overflow-hidden select-none',
+      ],
+    }),
+    icon: {
+      class: [
+        // Margins
+        'mr-2',
+      ],
+    },
+  },
+  menubutton: {
+    root: ({ parent }) => ({
+      class: [
+        'relative',
+
+        // Alignments
+        'items-center inline-flex text-center align-bottom justify-center',
+
+        // Sizes & Spacing
+        'text-sm',
+        {
+          'px-2.5 py-1.5 min-w-[2rem]':
+            parent.props.size === null && parent.props.label !== null,
+          'px-2 py-1': parent.props.size === 'small',
+          'px-3 py-2': parent.props.size === 'large',
+        },
+        {
+          'h-8 w-8 p-0': parent.props.label == null,
+        },
+        'ml-[1px]',
+
+        // Shape
+        'rounded-l-none',
+        { 'rounded-l-full': parent.props.rounded },
+        {
+          'rounded-md': !parent.props.rounded,
+          'rounded-full': parent.props.rounded,
+        },
+
+        // Link Button
+        {
+          'text-primary-600 bg-transparent ring-transparent': parent.props.link,
+        },
+
+        // Plain Button
+        {
+          'text-white bg-gray-500 ring-1 ring-gray-500':
+            parent.props.plain && !parent.props.outlined && !parent.props.text,
+        },
+        // Plain Text Button
+        { 'text-surface-500': parent.props.plain && parent.props.text },
+        // Plain Outlined Button
+        {
+          'text-surface-500 ring-1 ring-gray-500':
+            parent.props.plain && parent.props.outlined,
+        },
+
+        // Text Button
+        {
+          'bg-transparent ring-transparent':
+            parent.props.text && !parent.props.plain,
+        },
+
+        // Outlined Button
+        { 'bg-transparent': parent.props.outlined && !parent.props.plain },
+
+        // --- Severity Buttons ---
+
+        // Primary Button
+        {
+          'text-white':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-primary-500':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-primary-500':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Primary Text Button
+        {
+          'text-primary-500':
+            parent.props.text &&
+            parent.props.severity === null &&
+            !parent.props.plain,
+        },
+        // Primary Outlined Button
+        {
+          'text-primary-500 ring-1 ring-primary-500 hover:bg-primary-300/20':
+            parent.props.outlined &&
+            parent.props.severity === null &&
+            !parent.props.plain,
+        },
+
+        // Secondary Button
+        {
+          'text-white':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-surface-500':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-surface-500':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Secondary Text Button
+        {
+          'text-surface-500':
+            parent.props.text &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+        // Secondary Outlined Button
+        {
+          'text-surface-500 ring-1 ring-surface-500 hover:bg-surface-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+
+        // Success Button
+        {
+          'text-white':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-green-500':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-green-500':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Success Text Button
+        {
+          'text-surface-500':
+            parent.props.text &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+        // Success Outlined Button
+        {
+          'text-green-500 ring-1 ring-green-500 hover:bg-green-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'success' &&
+            !parent.props.plain,
+        },
+
+        // Info Button
+        {
+          'text-white':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-blue-500':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-blue-500':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Info Text Button
+        {
+          'text-blue-500':
+            parent.props.text &&
+            parent.props.severity === 'info' &&
+            !parent.props.plain,
+        },
+        // Info Outlined Button
+        {
+          'text-blue-500 ring-1 ring-blue-500 hover:bg-blue-300/20 ':
+            parent.props.outlined &&
+            parent.props.severity === 'info' &&
+            !parent.props.plain,
+        },
+
+        // Warning Button
+        {
+          'text-white':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-orange-500':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-orange-500':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Warning Text Button
+        {
+          'text-orange-500':
+            parent.props.text &&
+            parent.props.severity === 'warning' &&
+            !parent.props.plain,
+        },
+        // Warning Outlined Button
+        {
+          'text-orange-500 ring-1 ring-orange-500 hover:bg-orange-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'warning' &&
+            !parent.props.plain,
+        },
+
+        // Help Button
+        {
+          'text-white':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-purple-500':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-purple-500':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Help Text Button
+        {
+          'text-purple-500':
+            parent.props.text &&
+            parent.props.severity === 'help' &&
+            !parent.props.plain,
+        },
+        // Help Outlined Button
+        {
+          'text-purple-500 ring-1 ring-purple-500 hover:bg-purple-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'help' &&
+            !parent.props.plain,
+        },
+
+        // Danger Button
+        {
+          'text-white':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-red-500':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-red-500':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Danger Text Button
+        {
+          'text-red-500':
+            parent.props.text &&
+            parent.props.severity === 'danger' &&
+            !parent.props.plain,
+        },
+        // Danger Outlined Button
+        {
+          'text-red-500 ring-1 ring-red-500 hover:bg-red-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'danger' &&
+            !parent.props.plain,
+        },
+
+        // --- Severity Button States ---
+        'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-current',
+        {
+          'focus:ring-offset-2':
+            !parent.props.link &&
+            !parent.props.plain &&
+            !parent.props.outlined &&
+            !parent.props.text,
+        },
+
+        // Link
+        {
+          'focus:ring-primary-500':
+            parent.props.link,
+        },
+
+        // Plain
+        {
+          'hover:bg-gray-600 hover:ring-gray-600':
+            parent.props.plain && !parent.props.outlined && !parent.props.text,
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-surface-300/20':
+            parent.props.plain && (parent.props.text || parent.props.outlined),
+        },
+
+        // Primary
+        {
+          'hover:bg-primary-600 hover:ring-primary-600':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-primary-500':
+            parent.props.severity === null,
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-primary-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === null &&
+            !parent.props.plain,
+        },
+
+        // Secondary
+        {
+          'hover:bg-surface-600 hover:ring-surface-600':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-surface-500':
+            parent.props.severity === 'secondary',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-surface-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+
+        // Success
+        {
+          'hover:bg-green-600 hover:ring-green-600':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-green-500':
+            parent.props.severity === 'success',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-green-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'success' &&
+            !parent.props.plain,
+        },
+
+        // Info
+        {
+          'hover:bg-blue-600 hover:ring-blue-600':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-blue-500':
+            parent.props.severity === 'info',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-blue-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'info' &&
+            !parent.props.plain,
+        },
+
+        // Warning
+        {
+          'hover:bg-orange-600 hover:ring-orange-600':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-orange-500':
+            parent.props.severity === 'warning',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-orange-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'warning' &&
+            !parent.props.plain,
+        },
+
+        // Help
+        {
+          'hover:bg-purple-600 hover:ring-purple-600':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-purple-500':
+            parent.props.severity === 'help',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-purple-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'help' &&
+            !parent.props.plain,
+        },
+
+        // Warning
+        {
+          'hover:bg-red-600 hover:ring-red-600':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-red-500':
+            parent.props.severity === 'danger',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-red-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'danger' &&
+            !parent.props.plain,
+        },
+
+        // Transitions
+        'transition duration-200 ease-in-out',
+
+        // Misc
+        'cursor-pointer overflow-hidden select-none',
+      ],
+    }),
+    label: {
+      class: ['hidden'],
+    },
+  },
+};