@fy-/fws-vue 0.3.0 → 0.3.1

package/presets/Wind/splitbutton/index.js

@@ -1,1078 +0,0 @@
-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,
-          "px-2 py-1": parent.props.size === "small",
-          "px-3 py-2": parent.props.size === "large",
-        },
-        {
-          "min-w-8 p-0 py-1.5":
-            parent.props.label == null && parent.props.icon !== 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 dark:text-surface-900":
-            !parent.props.link &&
-            parent.props.severity === null &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-primary-500 dark:bg-primary-400":
-            !parent.props.link &&
-            parent.props.severity === null &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-primary-500 dark:ring-primary-400":
-            !parent.props.link &&
-            parent.props.severity === null &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Primary Text Button
-        {
-          "text-primary-500 dark:text-primary-400":
-            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 dark:text-surface-900":
-            parent.props.severity === "secondary" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-surface-500 dark:bg-surface-400":
-            parent.props.severity === "secondary" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-surface-500 dark:ring-surface-400":
-            parent.props.severity === "secondary" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Secondary Text Button
-        {
-          "text-surface-500 dark:text-surface-400":
-            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 dark:text-surface-900":
-            parent.props.severity === "success" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-green-500 dark:bg-green-400":
-            parent.props.severity === "success" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-green-500 dark:ring-green-400":
-            parent.props.severity === "success" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Success Text Button
-        {
-          "text-surface-500 dark:text-surface-400":
-            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 dark:text-surface-900":
-            parent.props.severity === "info" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-blue-500 dark:bg-blue-400":
-            parent.props.severity === "info" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-blue-500 dark:ring-blue-400":
-            parent.props.severity === "info" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Info Text Button
-        {
-          "text-blue-500 dark:text-blue-400":
-            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 dark:text-surface-900":
-            parent.props.severity === "warning" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-orange-500 dark:bg-orange-400":
-            parent.props.severity === "warning" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-orange-500 dark:ring-orange-400":
-            parent.props.severity === "warning" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Warning Text Button
-        {
-          "text-orange-500 dark:text-orange-400":
-            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 dark:text-surface-900":
-            parent.props.severity === "help" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-purple-500 dark:bg-purple-400":
-            parent.props.severity === "help" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-purple-500 dark:ring-purple-400":
-            parent.props.severity === "help" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Help Text Button
-        {
-          "text-purple-500 dark:text-purple-400":
-            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 dark:text-surface-900":
-            parent.props.severity === "danger" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-red-500 dark:bg-red-400":
-            parent.props.severity === "danger" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-red-500 dark:ring-red-400":
-            parent.props.severity === "danger" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Danger Text Button
-        {
-          "text-red-500 dark:text-red-400":
-            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 dark:focus:ring-primary-400":
-            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 dark:hover:bg-primary-300 hover:ring-primary-600 dark:hover:ring-primary-300":
-            !parent.props.link &&
-            parent.props.severity === null &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-primary-500 dark:focus:ring-primary-400":
-            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 dark:hover:bg-surface-300 hover:ring-surface-600 dark:hover:ring-surface-300":
-            parent.props.severity === "secondary" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-surface-500 dark:focus:ring-surface-400":
-            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 dark:hover:bg-green-300 hover:ring-green-600 dark:hover:ring-green-300":
-            parent.props.severity === "success" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-green-500 dark:focus:ring-green-400":
-            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 dark:hover:bg-blue-300 hover:ring-blue-600 dark:hover:ring-blue-300":
-            parent.props.severity === "info" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-blue-500 dark:focus:ring-blue-400":
-            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 dark:hover:bg-orange-300 hover:ring-orange-600 dark:hover:ring-orange-300":
-            parent.props.severity === "warning" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-orange-500 dark:focus:ring-orange-400":
-            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 dark:hover:bg-purple-300 hover:ring-purple-600 dark:hover:ring-purple-300":
-            parent.props.severity === "help" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-purple-500 dark:focus:ring-purple-400":
-            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 dark:hover:bg-red-300 hover:ring-red-600 dark:hover:ring-red-300":
-            parent.props.severity === "danger" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-red-500 dark:focus:ring-red-400":
-            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,
-          "px-2 py-1": parent.props.size === "small",
-          "px-3 py-2": parent.props.size === "large",
-        },
-        {
-          "min-w-8 p-0 py-1.5":
-            parent.props.label == null && parent.props.icon !== null,
-        },
-        "ml-px",
-
-        // 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 dark:text-surface-900":
-            !parent.props.link &&
-            parent.props.severity === null &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-primary-500 dark:bg-primary-400":
-            !parent.props.link &&
-            parent.props.severity === null &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-primary-500 dark:ring-primary-400":
-            !parent.props.link &&
-            parent.props.severity === null &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Primary Text Button
-        {
-          "text-primary-500 dark:text-primary-400":
-            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 dark:text-surface-900":
-            parent.props.severity === "secondary" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-surface-500 dark:bg-surface-400":
-            parent.props.severity === "secondary" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-surface-500 dark:ring-surface-400":
-            parent.props.severity === "secondary" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Secondary Text Button
-        {
-          "text-surface-500 dark:text-surface-400":
-            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 dark:text-surface-900":
-            parent.props.severity === "success" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-green-500 dark:bg-green-400":
-            parent.props.severity === "success" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-green-500 dark:ring-green-400":
-            parent.props.severity === "success" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Success Text Button
-        {
-          "text-surface-500 dark:text-surface-400":
-            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 dark:text-surface-900":
-            parent.props.severity === "info" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-blue-500 dark:bg-blue-400":
-            parent.props.severity === "info" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-blue-500 dark:ring-blue-400":
-            parent.props.severity === "info" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Info Text Button
-        {
-          "text-blue-500 dark:text-blue-400":
-            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 dark:text-surface-900":
-            parent.props.severity === "warning" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-orange-500 dark:bg-orange-400":
-            parent.props.severity === "warning" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-orange-500 dark:ring-orange-400":
-            parent.props.severity === "warning" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Warning Text Button
-        {
-          "text-orange-500 dark:text-orange-400":
-            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 dark:text-surface-900":
-            parent.props.severity === "help" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-purple-500 dark:bg-purple-400":
-            parent.props.severity === "help" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-purple-500 dark:ring-purple-400":
-            parent.props.severity === "help" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Help Text Button
-        {
-          "text-purple-500 dark:text-purple-400":
-            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 dark:text-surface-900":
-            parent.props.severity === "danger" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "bg-red-500 dark:bg-red-400":
-            parent.props.severity === "danger" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-          "ring-1 ring-red-500 dark:ring-red-400":
-            parent.props.severity === "danger" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        // Danger Text Button
-        {
-          "text-red-500 dark:text-red-400":
-            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 dark:focus:ring-primary-400":
-            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 dark:hover:bg-primary-300 hover:ring-primary-600 dark:hover:ring-primary-300":
-            !parent.props.link &&
-            parent.props.severity === null &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-primary-500 dark:focus:ring-primary-400":
-            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 dark:hover:bg-surface-300 hover:ring-surface-600 dark:hover:ring-surface-300":
-            parent.props.severity === "secondary" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-surface-500 dark:focus:ring-surface-400":
-            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 dark:hover:bg-green-300 hover:ring-green-600 dark:hover:ring-green-300":
-            parent.props.severity === "success" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-green-500 dark:focus:ring-green-400":
-            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 dark:hover:bg-blue-300 hover:ring-blue-600 dark:hover:ring-blue-300":
-            parent.props.severity === "info" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-blue-500 dark:focus:ring-blue-400":
-            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 dark:hover:bg-orange-300 hover:ring-orange-600 dark:hover:ring-orange-300":
-            parent.props.severity === "warning" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-orange-500 dark:focus:ring-orange-400":
-            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 dark:hover:bg-purple-300 hover:ring-purple-600 dark:hover:ring-purple-300":
-            parent.props.severity === "help" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-purple-500 dark:focus:ring-purple-400":
-            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 dark:hover:bg-red-300 hover:ring-red-600 dark:hover:ring-red-300":
-            parent.props.severity === "danger" &&
-            !parent.props.text &&
-            !parent.props.outlined &&
-            !parent.props.plain,
-        },
-        {
-          "focus:ring-red-500 dark:focus:ring-red-400":
-            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"],
-    },
-  },
-  menu: {
-    root: {
-      class: [
-        // Shape
-        "rounded-md",
-
-        // Size
-        "min-w-[12rem]",
-        "p-1.5",
-
-        // Colors
-        "bg-surface-0 dark:bg-surface-700",
-        "ring-1 ring-surface-200 dark:ring-surface-700",
-      ],
-    },
-    menu: {
-      class: [
-        // Spacings and Shape
-        "list-none",
-        "m-0",
-        "p-0",
-        "outline-none",
-      ],
-    },
-    menuitem: {
-      class: ["relative first:mt-0 mt-1"],
-    },
-    content: ({ context }) => ({
-      class: [
-        //Shape
-        "rounded-md",
-
-        //  Colors
-        {
-          "text-surface-500 dark:text-white/70":
-            !context.focused && !context.active,
-          "text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-black/70":
-            context.focused && !context.active,
-          "text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70":
-            context.focused && context.active,
-          "text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70":
-            !context.focused && context.active,
-        },
-
-        // Hover States
-        {
-          "hover:bg-surface-50 dark:hover:bg-surface-800": !context.active,
-          "hover:bg-surface-100 dark:hover:bg-black/40 text-surface-900 dark:text-surface-0/80":
-            context.active,
-        },
-
-        // Transitions
-        "transition-shadow",
-        "duration-200",
-      ],
-    }),
-    action: {
-      class: [
-        "relative",
-
-        // Font
-        "font-semibold",
-
-        // Flexbox
-        "flex",
-        "items-center",
-
-        // Spacing
-        "py-2",
-        "px-3",
-
-        // Misc
-        "no-underline",
-        "overflow-hidden",
-        "cursor-pointer",
-        "select-none",
-      ],
-    },
-    icon: {
-      class: [
-        // Spacing
-        "mr-2",
-        "leading-6",
-        "text-sm",
-      ],
-    },
-    label: {
-      class: ["leading-none", "text-sm"],
-    },
-    submenuicon: {
-      class: [
-        // Position
-        "ml-auto",
-      ],
-    },
-    submenu: {
-      class: [
-        // Size
-        "w-full sm:w-48",
-
-        // Spacing
-        "p-1.5",
-        "m-0 mx-1.5",
-        "list-none",
-
-        // Shape
-        "shadow-none sm:shadow-md",
-        "border-0",
-
-        // Position
-        "static sm:absolute",
-        "z-10",
-
-        // Color
-        "bg-surface-0 dark:bg-surface-700",
-      ],
-    },
-    separator: {
-      class: "border-t border-surface-200 dark:border-surface-600 my-1",
-    },
-  },
-};