@sertec/button/dist/index.cjs.map

Sfera Button Component

{"version":3,"file":"index.cjs","sources":["../src/constants.tsx","../src/button.tsx","../src/icon-button.tsx","../src/useShortcut.ts","../src/context.tsx"],"sourcesContent":["import { Border, StringBoolean, Rotate } from '@sertec/types';\nimport { ReactNode } from 'react';\n\nexport function getBorderEnabled(border: Border, find: string): boolean {\n  const borderSplit = border.split('-');\n  let borderTop: StringBoolean = 'false';\n  if (border === 'full') {\n    borderTop = 'true';\n  } else if (borderSplit.find((b) => b === find)) {\n    borderTop = 'true';\n  }\n  return borderTop === 'true';\n}\nexport const rotate = (element: ReactNode, degrees: Rotate) => {\n  if (!element) return element;\n  switch (degrees) {\n    case '45':\n      return <span className=\"rotate-45 !inline-flex !origin-center !h-fit !w-fit\">{element}</span>;\n    case '90':\n      return <span className=\"rotate-90 !inline-flex !origin-center !h-fit !w-fit\">{element}</span>;\n    case '135':\n      return (\n        <span className=\"rotate-135 !inline-flex !origin-center !h-fit !w-fit\">{element}</span>\n      );\n    case '180':\n      return (\n        <span className=\"rotate-180 !inline-flex !origin-center !h-fit !w-fit\">{element}</span>\n      );\n    case '225':\n      return (\n        <span className=\"rotate-225 !inline-flex !origin-center !h-fit !w-fit\">{element}</span>\n      );\n    case '270':\n      return (\n        <span className=\"rotate-270 !inline-flex !origin-center !h-fit !w-fit\">{element}</span>\n      );\n    case '315':\n      return (\n        <span className=\"rotate-315 !inline-flex !origin-center !h-fit !w-fit\">{element}</span>\n      );\n    default:\n      return element;\n  }\n};\nexport const COMMON_CLASSNAMES = [\n  'data-[font-variant=primary]:!text-primary',\n  'data-[font-variant=secondary]:!text-secondary',\n  'data-[font-variant=tertiary]:!text-tertiary',\n  'data-[font-variant=base]:!text-base',\n  'data-[font-variant=contrast]:!text-contrast',\n  'data-[font-variant=success]:!text-success',\n  'data-[font-variant=warning]:!text-warning',\n  'data-[font-variant=error]:!text-error',\n  'data-[font-variant=transparent]:!text-transparent',\n  'data-[font-variant=tab-not-active]:!text-base',\n]\n  .filter(Boolean)\n  .join(' ');\nconst NOT_OUTLINE_COMMON_CLASSNAMES = 'data-[menu-button=true]:!text-base';\nconst OUTLINE_COMMON_CLASSNAMES = [\n  '!border',\n  'bg-transparent',\n  'disabled:data-[disabledcss-disabled=false]:!text-disabled',\n  'disabled:data-[border-top=true]:!border-t-disabled',\n  'disabled:data-[border-right=true]:!border-r-disabled',\n  'disabled:data-[border-bottom=true]:!border-b-disabled',\n  'disabled:data-[border-left=true]:!border-l-disabled',\n  'disabled:data-[disabledcss-disabled=false]:data-[border-top=true]:!border-t-disabled',\n  'disabled:data-[disabledcss-disabled=false]:data-[border-right=true]:!border-r-disabled',\n  'disabled:data-[disabledcss-disabled=false]:data-[border-bottom=true]:!border-b-disabled',\n  'disabled:data-[disabledcss-disabled=false]:data-[border-left=true]:!border-l-disabled',\n  'hover:disabled:data-[disabledcss-disabled=false]:!bg-transparent',\n  'hover:disabled:data-[disabledcss-disabled=false]:data-[border-top=true]:!border-t-disabled',\n  'hover:disabled:data-[disabledcss-disabled=false]:data-[border-right=true]:!border-r-disabled',\n  'hover:disabled:data-[disabledcss-disabled=false]:data-[border-bottom=true]:!border-b-disabled',\n  'hover:disabled:data-[disabledcss-disabled=false]:data-[border-left=true]:!border-l-disabled',\n]\n  .filter(Boolean)\n  .join(' ');\nconst COMMON_CLASSES = [\n  '!border',\n  'disabled:data-[disabledcss-disabled=false]:data-[font-variant=none]:data-[disabledcss-disabled=false]:!text-contrast',\n  'disabled:data-[disabledcss-disabled=false]:data-[disabledcss-disabled=false]:!bg-disabled',\n  'disabled:data-[disabledcss-disabled=false]:data-[border-top=true]:!border-t-disabled',\n  'disabled:data-[disabledcss-disabled=false]:data-[border-right=true]:!border-r-disabled',\n  'disabled:data-[disabledcss-disabled=false]:data-[border-bottom=true]:!border-b-disabled',\n  'disabled:data-[disabledcss-disabled=false]:data-[border-left=true]:!border-l-disabled',\n  'disabled:data-[disabledcss-disabled=false]:data-[border-top=true]:!border-t-disabled',\n  'disabled:data-[disabledcss-disabled=false]:data-[border-right=true]:!border-r-disabled',\n  'disabled:data-[disabledcss-disabled=false]:data-[border-bottom=true]:!border-b-disabled',\n  'disabled:data-[disabledcss-disabled=false]:data-[border-left=true]:!border-l-disabled',\n  'disabled:data-[disabledcss-disabled=false]:hover:data-[hover-disabled=false]:!bg-disabled',\n  'hover:data-[disabledcss-disabled=false]:data-[hover-disabled=false]:disabled:data-[border-top=true]:!border-t-disabled',\n  'hover:data-[disabledcss-disabled=false]:data-[hover-disabled=false]:disabled:data-[border-right=true]:!border-r-disabled',\n  'hover:data-[disabledcss-disabled=false]:data-[hover-disabled=false]:disabled:data-[border-bottom=true]:!border-b-disabled',\n  'hover:data-[disabledcss-disabled=false]:data-[hover-disabled=false]:disabled:data-[border-left=true]:!border-l-disabled',\n]\n  .filter(Boolean)\n  .join(' ');\nexport const OUTLINE = [\n  {\n    outline: true,\n    variant: 'primary',\n    className: [\n      OUTLINE_COMMON_CLASSNAMES,\n      'data-[font-variant=none]:text-primary',\n      'data-[border-top=true]:border-t-primary',\n      'data-[border-right=true]:border-r-primary',\n      'data-[border-bottom=true]:border-b-primary',\n      'data-[border-left=true]:border-l-primary',\n      'focus:data-[focus-disabled=false]:text-primary-hover',\n      'focus:data-[focus-disabled=false]:bg-primary-hover/10',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-primary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-primary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-primary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-primary-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-primary-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-primary-hover/10',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-primary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-primary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-primary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-primary-hover',\n      'active:data-[active-disabled=false]:!text-primary-active',\n      'active:data-[active-disabled=false]:!bg-primary-active/10',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-primary-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-primary-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-primary-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-primary-active',\n      NOT_OUTLINE_COMMON_CLASSNAMES,\n      'data-[menu-button=true]:focus:!text-primary',\n      'data-[menu-button=true]:hover:!text-primary',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: false,\n    variant: 'primary',\n    className: [\n      COMMON_CLASSES,\n      'bg-primary',\n      'data-[font-variant=none]:text-contrast',\n      'data-[border-top=true]:border-t-primary',\n      'data-[border-right=true]:border-r-primary',\n      'data-[border-bottom=true]:border-b-primary',\n      'data-[border-left=true]:border-l-primary',\n      'focus:data-[focus-disabled=false]:bg-primary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-primary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-primary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-primary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-primary-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-primary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-primary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-primary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-primary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-primary-hover',\n      'active:data-[active-disabled=false]:!bg-primary-active',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-primary-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-primary-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-primary-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-primary-active',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: true,\n    variant: 'secondary',\n    className: [\n      OUTLINE_COMMON_CLASSNAMES,\n      'data-[font-variant=none]:text-secondary',\n      'data-[border-top=true]:border-t-secondary',\n      'data-[border-right=true]:border-r-secondary',\n      'data-[border-bottom=true]:border-b-secondary',\n      'data-[border-left=true]:border-l-secondary',\n      'focus:data-[focus-disabled=false]:text-secondary-hover',\n      'focus:data-[focus-disabled=false]:bg-secondary-hover/10',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-secondary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-secondary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-secondary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-secondary-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-secondary-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-secondary-hover/10',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-secondary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-secondary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-secondary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-secondary-hover',\n      'active:data-[active-disabled=false]:!text-secondary-active',\n      'active:data-[active-disabled=false]:!bg-secondary-active/10',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-secondary-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-secondary-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-secondary-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-secondary-active',\n      NOT_OUTLINE_COMMON_CLASSNAMES,\n      'data-[menu-button=true]:focus:!text-secondary',\n      'data-[menu-button=true]:hover:!text-secondary',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: false,\n    variant: 'secondary',\n    className: [\n      COMMON_CLASSES,\n      'bg-secondary',\n      'data-[font-variant=none]:text-contrast',\n      'data-[border-top=true]:border-t-secondary',\n      'data-[border-right=true]:border-r-secondary',\n      'data-[border-bottom=true]:border-b-secondary',\n      'data-[border-left=true]:border-l-secondary',\n      'focus:data-[focus-disabled=false]:bg-secondary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-secondary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-secondary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-secondary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-secondary-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-secondary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-secondary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-secondary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-secondary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-secondary-hover',\n      'active:data-[active-disabled=false]:!bg-secondary-active',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-secondary-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-secondary-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-secondary-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-secondary-active',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: true,\n    variant: 'tertiary',\n    className: [\n      OUTLINE_COMMON_CLASSNAMES,\n      'data-[font-variant=none]:text-tertiary',\n      'data-[border-top=true]:border-t-tertiary',\n      'data-[border-right=true]:border-r-tertiary',\n      'data-[border-bottom=true]:border-b-tertiary',\n      'data-[border-left=true]:border-l-tertiary',\n      'focus:data-[focus-disabled=false]:text-tertiary-hover',\n      'focus:data-[focus-disabled=false]:bg-tertiary-hover/10',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-tertiary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-tertiary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-tertiary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-tertiary-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-tertiary-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-tertiary-hover/10',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-tertiary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-tertiary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-tertiary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-tertiary-hover',\n      'active:data-[active-disabled=false]:!text-tertiary-active',\n      'active:data-[active-disabled=false]:!bg-tertiary-active/10',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-tertiary-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-tertiary-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-tertiary-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-tertiary-active',\n      NOT_OUTLINE_COMMON_CLASSNAMES,\n      'data-[menu-button=true]:focus:!text-tertiary',\n      'data-[menu-button=true]:hover:!text-tertiary',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: false,\n    variant: 'tertiary',\n    className: [\n      COMMON_CLASSES,\n      'bg-tertiary',\n      'data-[font-variant=none]:text-contrast',\n      'data-[border-top=true]:border-t-tertiary',\n      'data-[border-right=true]:border-r-tertiary',\n      'data-[border-bottom=true]:border-b-tertiary',\n      'data-[border-left=true]:border-l-tertiary',\n      'focus:data-[focus-disabled=false]:bg-tertiary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-tertiary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-tertiary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-tertiary-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-tertiary-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-tertiary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-tertiary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-tertiary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-tertiary-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-tertiary-hover',\n      'active:data-[active-disabled=false]:!bg-tertiary-active',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-tertiary-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-tertiary-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-tertiary-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-tertiary-active',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: true,\n    variant: 'base',\n    className: [\n      OUTLINE_COMMON_CLASSNAMES,\n      'data-[font-variant=none]:text-base',\n      'data-[border-top=true]:border-t-base',\n      'data-[border-right=true]:border-r-base',\n      'data-[border-bottom=true]:border-b-base',\n      'data-[border-left=true]:border-l-base',\n      'focus:data-[focus-disabled=false]:text-base-hover',\n      'focus:data-[focus-disabled=false]:bg-base-hover/10',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-base-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-base-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-base-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-base-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-base-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-base-hover/10',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-base-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-base-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-base-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-base-hover',\n      'active:data-[active-disabled=false]:!text-base-active',\n      'active:data-[active-disabled=false]:!bg-base-active/10',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-base-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-base-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-base-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-base-active',\n      NOT_OUTLINE_COMMON_CLASSNAMES,\n      'data-[menu-button=true]:focus:!text-base',\n      'data-[menu-button=true]:hover:!text-base',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: false,\n    variant: 'base',\n    className: [\n      COMMON_CLASSES,\n      'bg-base',\n      'data-[font-variant=none]:text-contrast',\n      'data-[border-top=true]:border-t-base',\n      'data-[border-right=true]:border-r-base',\n      'data-[border-bottom=true]:border-b-base',\n      'data-[border-left=true]:border-l-base',\n      'focus:data-[focus-disabled=false]:bg-base-hover',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-base-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-base-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-base-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-base-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-base-hover',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-base-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-base-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-base-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-base-hover',\n      'active:data-[active-disabled=false]:!bg-base-active',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-base-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-base-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-base-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-base-active',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: true,\n    variant: 'contrast',\n    className: [\n      OUTLINE_COMMON_CLASSNAMES,\n      'data-[font-variant=none]:text-contrast',\n      'data-[border-top=true]:border-t-contrast',\n      'data-[border-right=true]:border-r-contrast',\n      'data-[border-bottom=true]:border-b-contrast',\n      'data-[border-left=true]:border-l-contrast',\n      'focus:data-[focus-disabled=false]:text-contrast-hover',\n      'focus:data-[focus-disabled=false]:bg-contrast-hover/10',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-contrast-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-contrast-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-contrast-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-contrast-hover/10',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-contrast-hover',\n      'active:data-[active-disabled=false]:!text-contrast-active',\n      'active:data-[active-disabled=false]:!bg-contrast-active/10',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-contrast-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-contrast-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-contrast-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-contrast-active',\n      NOT_OUTLINE_COMMON_CLASSNAMES,\n      'data-[menu-button=true]:focus:!text-secondary',\n      'data-[menu-button=true]:hover:!text-secondary',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: false,\n    variant: 'contrast',\n    className: [\n      COMMON_CLASSES,\n      'bg-contrast',\n      'data-[font-variant=none]:text-base',\n      'data-[border-top=true]:border-t-contrast',\n      'data-[border-right=true]:border-r-contrast',\n      'data-[border-bottom=true]:border-b-contrast',\n      'data-[border-left=true]:border-l-contrast',\n      'focus:data-[focus-disabled=false]:bg-contrast-hover',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-contrast-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-contrast-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-contrast-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-contrast-hover',\n      'active:data-[active-disabled=false]:!bg-contrast-active',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-contrast-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-contrast-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-contrast-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-contrast-active',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: true,\n    variant: 'success',\n    className: [\n      OUTLINE_COMMON_CLASSNAMES,\n      'data-[font-variant=none]:text-success',\n      'data-[border-top=true]:border-t-success',\n      'data-[border-right=true]:border-r-success',\n      'data-[border-bottom=true]:border-b-success',\n      'data-[border-left=true]:border-l-success',\n      'focus:data-[focus-disabled=false]:text-success-hover',\n      'focus:data-[focus-disabled=false]:bg-success-hover/10',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-success-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-success-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-success-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-success-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-success-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-success-hover/10',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-success-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-success-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-success-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-success-hover',\n      'active:data-[active-disabled=false]:!text-success-active',\n      'active:data-[active-disabled=false]:!bg-success-active/10',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-success-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-success-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-success-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-success-active',\n      NOT_OUTLINE_COMMON_CLASSNAMES,\n      'data-[menu-button=true]:hover:!text-success',\n      'data-[menu-button=true]:hover:!text-success',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: false,\n    variant: 'success',\n    className: [\n      COMMON_CLASSES,\n      'bg-success',\n      'data-[font-variant=none]:text-contrast',\n      'data-[border-top=true]:border-t-success',\n      'data-[border-right=true]:border-r-success',\n      'data-[border-bottom=true]:border-b-success',\n      'data-[border-left=true]:border-l-success',\n      'focus:data-[focus-disabled=false]:bg-success-hover',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-success-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-success-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-success-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-success-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-success-hover',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-success-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-success-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-success-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-success-hover',\n      'active:data-[active-disabled=false]:!bg-success-active',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-success-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-success-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-success-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-success-active',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: true,\n    variant: 'warning',\n    className: [\n      OUTLINE_COMMON_CLASSNAMES,\n      'data-[font-variant=none]:text-warning',\n      'data-[border-top=true]:border-t-warning',\n      'data-[border-right=true]:border-r-warning',\n      'data-[border-bottom=true]:border-b-warning',\n      'data-[border-left=true]:border-l-warning',\n      'focus:data-[focus-disabled=false]:text-warning-hover',\n      'focus:data-[focus-disabled=false]:bg-warning-hover/10',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-warning-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-warning-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-warning-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-warning-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-warning-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-warning-hover/10',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-warning-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-warning-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-warning-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-warning-hover',\n      'active:data-[active-disabled=false]:!text-warning-active',\n      'active:data-[active-disabled=false]:!bg-warning-active/10',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-warning-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-warning-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-warning-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-warning-active',\n      NOT_OUTLINE_COMMON_CLASSNAMES,\n      'data-[menu-button=true]:hover:!text-warning',\n      'data-[menu-button=true]:hover:!text-warning',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: false,\n    variant: 'warning',\n    className: [\n      COMMON_CLASSES,\n      'bg-warning',\n      'data-[font-variant=none]:text-contrast',\n      'data-[border-top=true]:border-t-warning',\n      'data-[border-right=true]:border-r-warning',\n      'data-[border-bottom=true]:border-b-warning',\n      'data-[border-left=true]:border-l-warning',\n      'focus:data-[focus-disabled=false]:bg-warning-hover',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-warning-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-warning-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-warning-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-warning-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-warning-hover',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-warning-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-warning-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-warning-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-warning-hover',\n      'active:data-[active-disabled=false]:!bg-warning-active',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-warning-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-warning-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-warning-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-warning-active',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: true,\n    variant: 'error',\n    className: [\n      OUTLINE_COMMON_CLASSNAMES,\n      'data-[font-variant=none]:text-error',\n      'data-[border-top=true]:border-t-error',\n      'data-[border-right=true]:border-r-error',\n      'data-[border-bottom=true]:border-b-error',\n      'data-[border-left=true]:border-l-error',\n      'focus:data-[focus-disabled=false]:text-error-hover',\n      'focus:data-[focus-disabled=false]:bg-error-hover/10',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-error-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-error-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-error-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-error-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-error-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-error-hover/10',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-error-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-error-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-error-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-error-hover',\n      'active:data-[active-disabled=false]:!text-error-active',\n      'active:data-[active-disabled=false]:!bg-error-active/10',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-error-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-error-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-error-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-error-active',\n      NOT_OUTLINE_COMMON_CLASSNAMES,\n      'data-[menu-button=true]:hover:!text-error',\n      'data-[menu-button=true]:hover:!text-error',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: false,\n    variant: 'error',\n    className: [\n      COMMON_CLASSES,\n      'bg-error',\n      'data-[font-variant=none]:text-contrast',\n      'data-[border-top=true]:border-t-error',\n      'data-[border-right=true]:border-r-error',\n      'data-[border-bottom=true]:border-b-error',\n      'data-[border-left=true]:border-l-error',\n      'focus:data-[focus-disabled=false]:bg-error-hover',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-error-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-error-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-error-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-error-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-error-hover',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-error-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-error-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-error-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-error-hover',\n      'active:data-[active-disabled=false]:!bg-error-active',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-error-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-error-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-error-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-error-active',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: true,\n    variant: 'transparent',\n    className: [\n      OUTLINE_COMMON_CLASSNAMES,\n      'data-[font-variant=none]:text-contrast',\n      'data-[border-top=true]:border-t-contrast',\n      'data-[border-right=true]:border-r-contrast',\n      'data-[border-bottom=true]:border-b-contrast',\n      'data-[border-left=true]:border-l-contrast',\n      'focus:data-[focus-disabled=false]:text-contrast-hover',\n      'focus:data-[focus-disabled=false]:bg-transparent',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-contrast-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-contrast-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-contrast-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-contrast-hover/10',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-contrast-hover',\n      'active:data-[active-disabled=false]:!text-contrast-active',\n      'active:data-[active-disabled=false]:!bg-contrast-active/10',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-contrast-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-contrast-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-contrast-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-contrast-active',\n      NOT_OUTLINE_COMMON_CLASSNAMES,\n      'data-[menu-button=true]:focus:!text-contrast',\n      'data-[menu-button=true]:hover:!text-contrast',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: false,\n    variant: 'transparent',\n    className: [\n      'border',\n      'disabled:data-[disabledcss-disabled=false]:data-[font-variant=none]:data-[disabledcss-disabled=false]:!text-disabled',\n      'disabled:data-[disabledcss-disabled=false]:data-[disabledcss-disabled=false]:!bg-transparent',\n      'disabled:data-[disabledcss-disabled=false]:data-[border-top=true]:!border-t-disabled',\n      'disabled:data-[disabledcss-disabled=false]:data-[border-right=true]:!border-r-disabled',\n      'disabled:data-[disabledcss-disabled=false]:data-[border-bottom=true]:!border-b-disabled',\n      'disabled:data-[disabledcss-disabled=false]:data-[border-left=true]:!border-l-disabled',\n      'disabled:data-[disabledcss-disabled=false]:data-[border-top=true]:!border-t-disabled',\n      'disabled:data-[disabledcss-disabled=false]:data-[border-right=true]:!border-r-disabled',\n      'disabled:data-[disabledcss-disabled=false]:data-[border-bottom=true]:!border-b-disabled',\n      'disabled:data-[disabledcss-disabled=false]:data-[border-left=true]:!border-l-disabled',\n      'disabled:data-[disabledcss-disabled=false]:hover:data-[hover-disabled=false]:!bg-transparent',\n      'disabled:data-[disabledcss-disabled=false]:data-[font-variant=none]:data-[disabledcss-disabled=false]:!text-disabled',\n      'bg-transparent',\n      'data-[font-variant=none]:text-base',\n      'data-[border-top=true]:border-t-transparent',\n      'data-[border-right=true]:border-r-transparent',\n      'data-[border-bottom=true]:border-b-transparent',\n      'data-[border-left=true]:border-l-transparent',\n      'focus:data-[focus-disabled=false]:text-contrast-hover',\n      'focus:data-[focus-disabled=false]:bg-transparent',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-transparent',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-transparent',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-transparent',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-transparent',\n      'hover:data-[hover-disabled=false]:text-contrast-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-transparent',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-transparent',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-transparent',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-transparent',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-transparent',\n      'active:data-[active-disabled=false]:!text-contrast-active',\n      'active:data-[active-disabled=false]:!bg-transparent',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-transparent',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-transparent',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-transparent',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-transparent',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: true,\n    variant: 'tab-not-active',\n    className: [\n      OUTLINE_COMMON_CLASSNAMES,\n      'data-[font-variant=none]:text-tab-not-active',\n      'data-[border-top=true]:border-t-tab-not-active',\n      'data-[border-right=true]:border-r-tab-not-active',\n      'data-[border-bottom=true]:border-b-tab-not-active',\n      'data-[border-left=true]:border-l-tab-not-active',\n      'focus:data-[focus-disabled=false]:text-tab-not-active-hover',\n      'focus:data-[focus-disabled=false]:bg-tab-not-active-hover/10',\n      'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-tab-not-active-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-tab-not-active-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-tab-not-active-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-tab-not-active-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-tab-not-active-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-tab-not-active-hover/10',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-tab-not-active-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-tab-not-active-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-tab-not-active-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-tab-not-active-hover',\n      'active:data-[active-disabled=false]:!text-tab-not-active-active',\n      'active:data-[active-disabled=false]:!bg-tab-not-active-active/10',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-tab-not-active-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-tab-not-active-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-tab-not-active-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-tab-not-active-active',\n      NOT_OUTLINE_COMMON_CLASSNAMES,\n      'data-[menu-button=true]:focus:!text-tab-not-active',\n      'data-[menu-button=true]:hover:!text-tab-not-active',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n  {\n    outline: false,\n    variant: 'tab-not-active',\n    className: [\n      COMMON_CLASSES,\n      'bg-tab-not-active',\n      'data-[font-variant=none]:text-base',\n      'data-[border-top=true]:border-t-tab-not-active',\n      'data-[border-right=true]:border-r-tab-not-active',\n      'data-[border-bottom=true]:border-b-tab-not-active',\n      'data-[border-left=true]:border-l-tab-not-active',\n      'focus:data-[focus-disabled=false]:bg-tab-not-active-hover',\n      'focus:data-[focus-disabled=false]:border-t-tab-not-active-hover',\n      'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-tab-not-active-hover',\n      'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-tab-not-active-hover',\n      'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-tab-not-active-hover',\n      'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-tab-not-active-hover',\n      'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-tab-not-active-hover',\n      'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-tab-not-active-hover',\n      'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-tab-not-active-hover',\n      'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-tab-not-active-hover',\n      'active:data-[active-disabled=false]:!bg-tab-not-active-active',\n      'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-tab-not-active-active',\n      'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-tab-not-active-active',\n      'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-tab-not-active-active',\n      'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-tab-not-active-active',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  },\n];\n","import { COMMON_CLASSNAMES, getBorderEnabled, OUTLINE } from './constants.js';\nimport { ButtonProps } from './types.js';\n\nexport function Button({\n  variant = 'primary',\n  size = 'md',\n  outline = false,\n  className,\n  'data-justify': justify = 'center',\n  'data-rounded': rounded = 'full',\n  'data-border': border = 'full',\n  'data-font-weight': weight = 'semibold',\n  'data-font-variant': fontVariant = 'none',\n  'data-menu-button': menuButton = 'false',\n  'data-footer-button': footerButton = 'false',\n  'data-active-disabled': activeDisabled = 'false',\n  'data-focus-disabled': focusDisabled = 'false',\n  'data-hover-disabled': hoverDisabled = 'false',\n  'data-hover-bg-disabled': hoverBgDisabled = 'false',\n  'data-padding-x-disabled': paddingXDisabled = 'false',\n  'data-padding-y-disabled': paddingYDisabled = 'false',\n  'data-disabledcss-disabled': disabledCssDisabled = 'false',\n  ...props\n}: ButtonProps) {\n  const outlineClass =\n    OUTLINE.find((i) => i.variant === variant && i.outline === outline)?.className ||\n    OUTLINE.find((i) => i.variant === 'primary' && i.outline === outline)?.className;\n\n  return (\n    <button\n      {...props}\n      className={[\n        COMMON_CLASSNAMES,\n        variant,\n        outlineClass?.split(' ').filter(Boolean).join(' '),\n        'cursor-pointer',\n        'data-[font-weight=semibold]:font-semibold data-[font-weight=bold]:font-bold data-[font-weight=normal]:font-normal',\n        'data-[padding-x-disabled=false]:px-4',\n        'focus:outline-none focus:ring-0 active:outline-none',\n        '!truncate',\n        'data-[border-top=false]:!border-t-transparent',\n        'data-[border-right=false]:!border-r-transparent',\n        'data-[border-bottom=false]:!border-b-transparent',\n        'data-[border-left=false]:!border-l-transparent',\n        'data-[rounded=full]:rounded-lg',\n        'data-[rounded=none]:!rounded-0',\n        'data-[rounded=top]:!rounded-t-lg data-[rounded=top]:!border-b-transparent',\n        'data-[rounded=bottom]:!rounded-b-lg data-[rounded=bottom]:!border-t-transparent',\n        'data-[rounded=x]:!rounded-x-lg data-[rounded=x]:!border-y-transparent',\n        'data-[rounded=y]:!rounded-y-lg data-[rounded=y]:!border-x-transparent',\n        'data-[rounded=left-top]:!rounded-tl-lg',\n        'data-[rounded=left]:!rounded-l-lg',\n        'data-[rounded=right-top]:!rounded-tr-lg',\n        'data-[rounded=right]:!rounded-r-lg',\n        'data-[justify=left]:text-left',\n        'data-[justify=right]:text-right',\n        'data-[justify=center]:text-center',\n        'data-[size=xs]:!text-button-xs',\n        'data-[padding-y-disabled=false]:data-[size=xs]:py-2',\n        'data-[size=sm]:!text-button-sm',\n        'data-[padding-y-disabled=false]:data-[size=sm]:py-2',\n        'data-[size=md]:!text-button-md',\n        'data-[padding-y-disabled=false]:data-[size=md]:py-2',\n        'data-[size=lg]:!text-button-lg',\n        'data-[padding-y-disabled=false]:data-[size=lg]:py-4',\n        'data-[size=xl]:!text-button-xl',\n        'data-[padding-y-disabled=false]:data-[size=xl]:py-4',\n        'data-[size=2xl]:!text-button-2xl',\n        'data-[padding-y-disabled=false]:data-[size=2xl]:py-4',\n        'data-[size=3xl]:!text-button-3xl',\n        'data-[padding-y-disabled=false]:data-[size=3xl]:py-4',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      data-variant={variant}\n      data-justify={justify}\n      data-rounded={rounded}\n      data-size={size}\n      data-border={border}\n      data-border-top={getBorderEnabled(border, 'top')}\n      data-border-right={getBorderEnabled(border, 'right')}\n      data-border-bottom={getBorderEnabled(border, 'bottom')}\n      data-border-left={getBorderEnabled(border, 'left')}\n      data-font-weight={weight}\n      data-font-variant={fontVariant}\n      data-menu-button={menuButton}\n      data-footer-button={footerButton}\n      data-active-disabled={activeDisabled}\n      data-focus-disabled={focusDisabled}\n      data-hover-disabled={hoverDisabled}\n      data-hover-bg-disabled={hoverBgDisabled}\n      data-padding-x-disabled={paddingXDisabled}\n      data-padding-y-disabled={paddingYDisabled}\n      data-d