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

package/fixedasset/splitbutton/index.js

@@ -1,957 +1,786 @@
-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'],
-    },
-  },
-};
+"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'],
+        },
+    },
+};