{"version":3,"file":"OzContainedButton-61646fd7.js","sources":["../../../app/javascript/library/v4/components/OzContainedButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * @file It's named \"contained button\" following Material UI's terminology: https://material.io/components/buttons .\n *\n *\n * This component applies three types of styles:\n *\n * 1. Shape/size\n * 2. Colors\n * 3. Text truncation\n *\n *\n * To make customization easy, it's built so that you can (re)use each group of styles independently,\n * i.e. each type of style is optional. Notice that if you set `:color-scheme=\"null\"`, `:size-preset=\"null\"`\n * and use the default slot, it reduces to `OzBaseButton`.\n *\n */\nimport OzBaseButton, { OzBaseButtonHrefMode } from '@@/library/v4/components/OzBaseButton.vue'\nimport type { VueCssClass } from '@@/types'\n\nwithDefaults(\n  defineProps<{\n    darkMode?: boolean | 'auto'\n    disabled?: boolean\n    href?: string\n    hrefMode?: OzBaseButtonHrefMode\n    colorScheme?: OzContainedButtonColorScheme\n    /**\n     * Applies preset sizes/shapes.\n     * They are named with pixel values for developer ergonomics -- those are the values you see in the mockups.\n     * Technically, the pixel value could vary depending on the size of `rem`.\n     */\n    sizePreset?: OzContainedButtonSizePreset\n    text?: string\n    /**\n     * Title. If not defined, text will be used instead.\n     */\n    title?: string\n    /**\n     * Adds extra padding to center the text if there's an icon.\n     */\n    centerText?: boolean\n    /**\n     * Defines whether the button text should be truncated or not.\n     * Use case:\n     *\n     * 1. `true` - truncate the button text if it exceeds the button's width\n     * 2. `false` - do not truncate the button text, allowing it to stretch the button's height\n     */\n    shouldTruncateText?: boolean\n    /**\n     * Defines whether the button's height should be fixed or adjusted by its content.\n     */\n    autoHeight?: boolean\n    /**\n     * Tailwind uses box shadows for focus rings.\n     * Didn't find a straightforward way to implement truly transparent offset color.\n     * If the gap color is too different from the backdrop, customize it here.\n     */\n    ringOffsetColorClasses?: VueCssClass\n    textAlign?: 'start' | 'center' | 'end'\n  }>(),\n  {\n    darkMode: 'auto',\n    disabled: false,\n    href: undefined,\n    hrefMode: OzBaseButtonHrefMode.Default,\n    colorScheme: OzContainedButtonColorScheme.Primary,\n    sizePreset: OzContainedButtonSizePreset.H40px,\n    text: undefined,\n    title: undefined,\n    centerText: false,\n    shouldTruncateText: true,\n    autoHeight: false,\n    ringOffsetColorClasses: undefined,\n    textAlign: 'center',\n  },\n)\n\ndefineEmits<{\n  (name: 'click', event: MouseEvent): void\n  (name: 'mouseenter', event: MouseEvent): void\n  (name: 'mouseleave', event: MouseEvent): void\n  (name: 'mousedown', event: MouseEvent): void\n  (name: 'focus', event: FocusEvent): void\n  (name: 'blur', event: FocusEvent): void\n  (name: 'pointerdown', event: PointerEvent): void\n}>()\n</script>\n\n<script lang=\"ts\">\nexport enum OzContainedButtonColorScheme {\n  Bare = 'Bare',\n  Primary = 'Primary',\n  PrimaryPulsing = 'PrimaryPulsing',\n  Secondary = 'Secondary',\n  SecondaryActive = 'SecondaryActive',\n  SecondaryContrast = 'SecondaryContrast',\n  SecondaryClear = 'SecondaryClear',\n  SecondaryClearDark = 'SecondaryClearDark',\n  SecondaryClearText = 'SecondaryClearText',\n  SecondaryDestructive = 'SecondaryDestructive',\n  SecondaryClearActive = 'SecondaryClearActive',\n  SecondaryLightHover = 'SecondaryLightHover',\n  Alternative = 'Alternative',\n  AlternativeSecondary = 'AlternativeSecondary', // Alternative2 in Figma\n  AlternativeHeavy = 'AlternativeHeavy',\n  Green = 'Green',\n  Orange = 'Orange',\n  Destructive = 'Destructive',\n  DestructiveClear = 'DestructiveClear',\n  Active = 'Active',\n  Transparent = 'Transparent',\n  Grey = 'Grey',\n  Purple = 'Purple',\n  Blue = 'Blue',\n  BlueClear = 'BlueClear',\n  GreenClear = 'GreenClear',\n}\n\nexport enum OzContainedButtonSizePreset {\n  Bare = 'Bare',\n  H80px = 'H80px',\n  H64px = 'H64px',\n  H56px = 'H56px',\n  H40px = 'H40px',\n  H32px = 'H32px',\n  H24px = 'H24px',\n  H28px = 'H28px',\n  H32pxW56px = 'H32pxW56px',\n  H40W124px = 'H40W124px',\n}\n\nexport { OzBaseButtonHrefMode as OzContainedButtonHrefMode } from '@@/library/v4/components/OzBaseButton.vue'\nexport default {}\n</script>\n\n<template>\n  <OzBaseButton\n    :disabled=\"disabled\"\n    :href=\"href\"\n    :href-mode=\"hrefMode\"\n    :title=\"title || text\"\n    :class=\"[\n      /**\n       * SIZE/SHAPE PRESETS\n       */\n\n      // Common styles\n      sizePreset && [\n        // Remove the default focus ring since we're rounding the corners\n        'focus:outline-none',\n\n        // Centralize button content\n        'flex',\n        'items-center',\n        'justify-center',\n\n        // Text-alignment\n        textAlign === 'start' && 'text-start',\n        textAlign === 'center' && 'text-center',\n        textAlign === 'end' && 'text-end',\n      ],\n\n      // Vertical padding presets\n      sizePreset && {\n        // Reset user agent styles\n        // Don't set px-0 here so we won't have specificity issues\n        'py-0': sizePreset !== OzContainedButtonSizePreset.H80px,\n        'py-4': sizePreset === OzContainedButtonSizePreset.H80px,\n      },\n\n      // Presets\n      sizePreset === OzContainedButtonSizePreset.H80px && [\n        autoHeight ? 'min-h-20' : 'h-20',\n        'box-border',\n        'px-7',\n        'rounded-3xl',\n        'text-heading-4',\n        'font-semibold',\n        'focus-visible:ring',\n\n        'ring-offset-1',\n        // no icon design provided at the time of creating this OzContainedButtonSizePreset. to be added when there is a use case\n      ],\n      sizePreset === OzContainedButtonSizePreset.H64px && [\n        autoHeight ? 'min-h-16' : 'h-16',\n        'rounded-[26px]',\n        'text-heading-2-large',\n        'font-semibold',\n        'focus-visible:ring-[3px]',\n\n        // No ring offset when only icon. Offset is present otherwise.\n        !$slots.icon && [\n          // Needs to be on a new line for the JIT to work -_-\n          'ring-offset-[3px]',\n        ],\n\n        // Expect at most one of the icon slots to be filled.\n        $slots.icon && ['w-16'],\n        $slots.leftIcon && !centerText && ['pe-5', 'ps-4', 'gap-2'],\n        $slots.leftIcon && centerText && ['pe-11', 'ps-4', 'gap-2'], // pe-11 = ps-4 + 20px + gap-2\n        $slots.rightIcon && !centerText && ['pe-2', 'ps-5', 'gap-1'],\n        $slots.rightIcon && centerText && ['pe-2', 'ps-8', 'gap-1'], // ps-8 = pe-2 + 20px + gap-1\n        !$slots.icon && !$slots.leftIcon && !$slots.rightIcon && ['px-8'],\n      ],\n      sizePreset === OzContainedButtonSizePreset.H56px && [\n        autoHeight ? 'min-h-14' : 'h-14',\n        'rounded-[22px]',\n        'text-heading-2',\n        'font-semibold',\n        'focus-visible:ring-[3px]',\n\n        // No ring offset when only icon. Offset is present otherwise.\n        !$slots.icon && [\n          // Needs to be on a new line for the JIT to work -_-\n          'ring-offset-2',\n        ],\n\n        // Expect at most one of the icon slots to be filled.\n        $slots.icon && ['w-14'],\n        $slots.leftIcon && !centerText && ['pe-5', 'ps-4', 'gap-2'],\n        $slots.leftIcon && centerText && ['pe-11', 'ps-4', 'gap-2'], // pe-11 = ps-4 + 20px + gap-2\n        $slots.rightIcon && !centerText && ['pe-2', 'ps-5', 'gap-1'],\n        $slots.rightIcon && centerText && ['pe-2', 'ps-8', 'gap-1'], // ps-8 = pe-2 + 20px + gap-1\n        !$slots.icon && !$slots.leftIcon && !$slots.rightIcon && ['px-7'],\n      ],\n      sizePreset === OzContainedButtonSizePreset.H40px && [\n        autoHeight ? 'min-h-10' : 'h-10',\n        'rounded-2xl',\n        'text-heading-4',\n        'font-semibold',\n        'focus-visible:ring-[2.5px]',\n\n        // No ring offset when only icon. Offset is present otherwise.\n        !$slots.icon && [\n          // Needs to be on a new line for the JIT to work -_-\n          'ring-offset-[1.5px]',\n        ],\n\n        // Expect at most one of the icon slots to be filled.\n        $slots.icon && ['w-10'],\n        $slots.leftIcon && !centerText && ['pe-5', 'ps-4', 'gap-2'],\n        $slots.leftIcon && centerText && ['pe-11', 'ps-4', 'gap-2'], // pe-11 = ps-4 + 20px + gap-2\n        $slots.rightIcon && !centerText && ['pe-2', 'ps-5', 'gap-1'],\n        $slots.rightIcon && centerText && ['pe-2', 'ps-8', 'gap-1'], // ps-8 = pe-2 + 20px + gap-1\n        !$slots.icon && !$slots.leftIcon && !$slots.rightIcon && ['px-5'],\n      ],\n      sizePreset === OzContainedButtonSizePreset.H32px && [\n        autoHeight ? 'min-h-8' : 'h-8',\n        'rounded-xl',\n        'text-body-small',\n        'font-semibold',\n        'ring-offset-1',\n        'focus-visible:ring-2',\n        // Only have one icon at a time.\n        // And if there's text, there'll only be a left or right icon.\n        $slots.icon && 'h-8 w-8',\n        !$slots.icon && 'px-3',\n      ],\n      sizePreset === OzContainedButtonSizePreset.H24px && [\n        autoHeight ? 'min-h-6' : 'h-6',\n        'rounded-lg',\n        'text-body-extra-small',\n        'font-semibold',\n        'ring-offset-1',\n        'focus-visible:ring-2',\n        $slots.icon && 'h-6 w-6',\n        !$slots.icon && 'px-3',\n      ],\n      sizePreset === OzContainedButtonSizePreset.H28px && [\n        autoHeight ? 'min-h-7' : 'h-7',\n        'rounded-[10px]',\n        'text-body-small',\n        'font-semibold',\n        'ring-offset-1',\n        'focus-visible:ring-2',\n        $slots.icon && 'h-7 w-7',\n        !$slots.icon && 'px-3',\n      ],\n      sizePreset === OzContainedButtonSizePreset.H32pxW56px && [\n        autoHeight ? 'min-h-8 min-w-14' : 'h-8 w-14',\n        'rounded-2xl',\n        'text-heading-4',\n        'font-semibold',\n        'focus-visible:ring-[2.5px]',\n\n        // No ring offset when only icon. Offset is present otherwise.\n        !$slots.icon && [\n          // Needs to be on a new line for the JIT to work -_-\n          'ring-offset-[1.5px]',\n        ],\n\n        // Expect at most one of the icon slots to be filled.\n        $slots.icon && ['w-14'],\n        $slots.leftIcon && !centerText && ['pe-5', 'ps-4', 'gap-2'],\n        $slots.leftIcon && centerText && ['pe-11', 'ps-4', 'gap-2'], // pe-11 = ps-4 + 20px + gap-2\n        $slots.rightIcon && !centerText && ['pe-2', 'ps-5', 'gap-1'],\n        $slots.rightIcon && centerText && ['pe-2', 'ps-8', 'gap-1'], // ps-8 = pe-2 + 20px + gap-1\n        !$slots.icon && !$slots.leftIcon && !$slots.rightIcon && ['px-5'],\n      ],\n      sizePreset === OzContainedButtonSizePreset.H40W124px && [\n        autoHeight ? 'min-h-10' : 'h-10',\n        'rounded-2xl',\n        'text-heading-4',\n        'font-semibold',\n        'focus-visible:ring-[2.5px]',\n        'w-31',\n\n        // No ring offset when only icon. Offset is present otherwise.\n        !$slots.icon && [\n          // Needs to be on a new line for the JIT to work -_-\n          'ring-offset-[1.5px]',\n        ],\n\n        // Expect at most one of the icon slots to be filled.\n        $slots.icon && ['w-10'],\n        $slots.leftIcon && !centerText && ['pe-5', 'ps-4', 'gap-2'],\n        $slots.leftIcon && centerText && ['pe-11', 'ps-4', 'gap-2'], // pe-11 = ps-4 + 20px + gap-2\n        $slots.rightIcon && !centerText && ['pe-2', 'ps-5', 'gap-1'],\n        $slots.rightIcon && centerText && ['pe-2', 'ps-8', 'gap-1'], // ps-8 = pe-2 + 20px + gap-1\n        !$slots.icon && !$slots.leftIcon && !$slots.rightIcon && ['px-5'],\n      ],\n\n      /**\n       * COLOR SCHEMES\n       */\n\n      // Common\n      colorScheme && [\n        // Focus ring\n        {\n          'ring-grape-500': darkMode === false,\n          'ring-canary-500': darkMode === true,\n          'ring-grape-500 dark:ring-canary-500': darkMode === 'auto',\n        },\n        ringOffsetColorClasses || {\n          // Tailwind uses box shadows for focus rings.\n          // We'll have to deviate from TW paradigm if we want truly transparent ring-offset color.\n          'ring-offset-white': darkMode === false,\n          'ring-offset-grey-900': darkMode === true,\n          'dark:ring-offset-grey-900 ring-offset-white': darkMode === 'auto',\n        },\n        // Disabled - Base\n        {\n          'aria-disabled:bg-button-disabled-light': darkMode === false,\n          'aria-disabled:bg-button-disabled-dark': darkMode === true,\n          'aria-disabled:bg-button-disabled-light dark:aria-disabled:bg-button-disabled-dark': darkMode === 'auto',\n        },\n        {\n          'aria-disabled:text-dark-text-400': darkMode === false,\n          'aria-disabled:text-light-text-400': darkMode === true,\n          'aria-disabled:text-dark-text-400 dark:aria-disabled:text-light-text-400': darkMode === 'auto',\n        },\n        // Disabled - Hover\n        {\n          'hover-hover:aria-disabled:bg-button-disabled-light': darkMode === false,\n          'hover-hover:aria-disabled:bg-button-disabled-dark': darkMode === true,\n          'hover-hover:aria-disabled:bg-button-disabled-light hover-hover:dark:aria-disabled:bg-button-disabled-dark':\n            darkMode === 'auto',\n        },\n        {\n          'hover-hover:aria-disabled:text-dark-text-400': darkMode === false,\n          'hover-hover:aria-disabled:text-light-text-400': darkMode === true,\n          'hover-hover:aria-disabled:text-dark-text-400 hover-hover:dark:aria-disabled:text-light-text-400 ':\n            darkMode === 'auto',\n        },\n        // Active\n        colorScheme !== OzContainedButtonColorScheme.SecondaryLightHover &&\n          colorScheme !== OzContainedButtonColorScheme.SecondaryClearDark && [\n            {\n              'hover-hover:active:bg-grape-500': darkMode === false,\n              'hover-hover:active:bg-canary-500': darkMode === true,\n              'hover-hover:active:bg-grape-500 hover-hover:dark:active:bg-canary-500': darkMode === 'auto',\n            },\n            {\n              'hover-hover:active:text-light-text-100': darkMode === false,\n              'hover-hover:active:text-dark-text-100': darkMode === true,\n              'hover-hover:active:text-light-text-100 hover-hover:dark:active:text-dark-text-100': darkMode === 'auto',\n            },\n          ],\n        colorScheme === OzContainedButtonColorScheme.SecondaryLightHover && [\n          {\n            'hover-hover:active:bg-grey-200': darkMode === false,\n            'hover-hover:active:bg-grey-600': darkMode === true,\n            'hover-hover:active:bg-grey-200 hover-hover:dark:active:bg-grey-600': darkMode === 'auto',\n          },\n          {\n            'hover-hover:active:text-dark-text-200': darkMode === false,\n            'hover-hover:active:text-light-text-200': darkMode === true,\n            'hover-hover:active:text-dark-text-200 hover-hover:dark:active:text-light-text-200': darkMode === 'auto',\n          },\n        ],\n        colorScheme === OzContainedButtonColorScheme.SecondaryClearDark && 'hover-hover:active:bg-transparent',\n        colorScheme === OzContainedButtonColorScheme.Purple && [\n          {\n            'hover-hover:active:bg-grape-500': darkMode === false,\n            'hover-hover:active:bg-canary-500': darkMode === true,\n            'hover-hover:active:bg-grape-500 hover-hover:dark:active:bg-canary-500': darkMode === 'auto',\n          },\n          {\n            'hover-hover:active:text-light-text-100': darkMode === false,\n            'hover-hover:active:text-dark-text-100': darkMode === true,\n            'hover-hover:active:text-light-text-100 hover-hover:dark:active:text-dark-text-100': darkMode === 'auto',\n          },\n        ],\n      ],\n\n      // Schemes\n      colorScheme === OzContainedButtonColorScheme.Primary && [\n        // Base\n        'bg-padlet-pink',\n        'text-light-text-100',\n        // Hovered\n        'hover-hover:hover:bg-padlet-pink-600',\n      ],\n      colorScheme === OzContainedButtonColorScheme.PrimaryPulsing && [\n        // Base\n        'bg-padlet-pink',\n        'text-light-text-100',\n\n        // Hovered\n        'hover-hover:hover:animate-pulse-bg-color',\n        'pulse-bg-from-padlet-pink-500',\n        {\n          'pulse-bg-to-grape-500': darkMode === false,\n          'pulse-bg-to-canary-500': darkMode === true,\n          'pulse-bg-to-grape-500 dark:pulse-bg-to-canary-500': darkMode === 'auto',\n        },\n\n        // Disabled - Hover\n        'hover-hover:aria-disabled:hover:animate-none',\n      ],\n      colorScheme === OzContainedButtonColorScheme.Secondary && [\n        // Base\n        {\n          'bg-grey-100': darkMode === false,\n          'bg-grey-700': darkMode === true,\n          'bg-grey-100 dark:bg-grey-700': darkMode === 'auto',\n        },\n        {\n          'text-dark-text-200': darkMode === false,\n          'text-light-text-200': darkMode === true,\n          'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n        },\n        // Hovered\n        {\n          'hover-hover:hover:bg-grey-200': darkMode === false,\n          'hover-hover:hover:bg-grey-600': darkMode === true,\n          'hover-hover:hover:bg-grey-200 hover-hover:dark:hover:bg-grey-600': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.SecondaryActive && [\n        // Base\n        {\n          'bg-grey-100': darkMode === false,\n          'bg-grey-700': darkMode === true,\n          'bg-grey-100 dark:bg-grey-700': darkMode === 'auto',\n        },\n        {\n          'text-grape-500': darkMode === false,\n          'text-canary-500': darkMode === true,\n          'text-grape-500 dark:text-canary-500': darkMode === 'auto',\n        },\n        // Hovered\n        {\n          'hover-hover:hover:bg-grey-200': darkMode === false,\n          'hover-hover:hover:bg-grey-600': darkMode === true,\n          'hover-hover:hover:bg-grey-200 hover-hover:dark:hover:bg-grey-600': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.SecondaryContrast && [\n        // Base\n        {\n          'bg-grey-100': darkMode === false,\n          'bg-grey-700': darkMode === true,\n          'bg-grey-100 dark:bg-grey-700': darkMode === 'auto',\n        },\n        {\n          'text-dark-text-100': darkMode === false,\n          'text-light-text-100': darkMode === true,\n          'text-dark-text-100 dark:text-light-text-100': darkMode === 'auto',\n        },\n        // Hovered\n        {\n          'hover-hover:hover:bg-grey-200': darkMode === false,\n          'hover-hover:hover:bg-grey-600': darkMode === true,\n          'hover-hover:hover:bg-grey-200 hover-hover:dark:hover:bg-grey-600': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.SecondaryDestructive && [\n        // Disabled - Base\n        'aria-disabled:text-danger-50',\n        // Disabled - Hover\n        'hover-hover:aria-disabled:text-danger-50',\n        // Base\n        {\n          'bg-grey-100': darkMode === false,\n          'bg-grey-700': darkMode === true,\n          'bg-grey-100 dark:bg-grey-700': darkMode === 'auto',\n        },\n        'text-danger-100',\n        // Hovered\n        {\n          'hover-hover:hover:bg-grey-200': darkMode === false,\n          'hover-hover:hover:bg-grey-600': darkMode === true,\n          'hover-hover:hover:bg-grey-200 hover-hover:dark:hover:bg-grey-600': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.SecondaryClear && [\n        // Base\n        'bg-transparent',\n        {\n          'text-dark-text-200': darkMode === false,\n          'text-light-text-200': darkMode === true,\n          'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n        },\n        // Hovered\n        'hover-hover:hover:bg-opacity-10',\n        {\n          'hover-hover:hover:bg-overlay-text-bg-light-mode-light-hover': darkMode === false || darkMode === 'auto',\n          'hover-hover:hover:bg-overlay-text-bg-dark-mode-dark-hover': darkMode === true,\n          'hover-hover:dark:hover:bg-overlay-text-bg-dark-mode-dark-hover': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.SecondaryClearDark && [\n        // Disabled - Base\n        'aria-disabled:bg-transparent',\n        // Disabled - Hover\n        'hover-hover:aria-disabled:bg-transparent',\n        // Base\n        'bg-transparent',\n        {\n          'text-dark-text-200': darkMode === false,\n          'text-light-text-200': darkMode === true,\n          'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n        },\n        // Hovered\n        'hover-hover:hover:bg-opacity-100',\n        !disabled && {\n          'hover-hover:hover:bg-light-text-300': darkMode === false || darkMode === 'auto',\n          'hover-hover:hover:bg-dark-text-300': darkMode === true,\n          'hover-hover:dark:hover:bg-dark-text-300': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.SecondaryClearText && [\n        // Base\n        'bg-transparent',\n        {\n          'text-dark-text-200': darkMode === false,\n          'text-light-text-200': darkMode === true,\n          'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n        },\n        // Hovered\n        {\n          'hover-hover:hover:text-dark-text-100': darkMode === false,\n          'hover-hover:hover:text-light-text-100': darkMode === true,\n          'hover-hover:hover:text-dark-text-100 hover-hover:dark:hover:text-light-text-100': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.SecondaryClearActive && [\n        // Base\n        'bg-transparent',\n        {\n          'text-grape-500': darkMode === false,\n          'text-canary-500': darkMode === true,\n          'text-grape-500 dark:text-canary-500': darkMode === 'auto',\n        },\n        // Hovered\n        'hover-hover:hover:bg-opacity-10',\n        {\n          'hover-hover:hover:bg-overlay-text-bg-light-mode-light-hover': darkMode === false || darkMode === 'auto',\n          'hover-hover:hover:bg-overlay-text-bg-dark-mode-dark-hover': darkMode === true,\n          'hover-hover:dark:hover:bg-overlay-text-bg-dark-mode-dark-hover': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.Alternative && [\n        // Base\n        {\n          'bg-grey-900': darkMode === false,\n          'bg-grey-0': darkMode === true,\n          'bg-grey-900 dark:bg-grey-0': darkMode === 'auto',\n        },\n        {\n          'text-light-text-100': darkMode === false,\n          'text-dark-text-100': darkMode === true,\n          'text-light-text-100 dark:text-dark-text-100': darkMode === 'auto',\n        },\n        // Hovered\n        {\n          'hover-hover:hover:bg-grey-800': darkMode === false,\n          'hover-hover:hover:bg-grey-100': darkMode === true,\n          'hover-hover:hover:bg-grey-800 hover-hover:dark:hover:bg-grey-100': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.AlternativeSecondary && [\n        // Base\n        'bg-grey-0',\n        'text-dark-text-100',\n        // Hovered\n        {\n          'hhover:bg-grey-50': darkMode === false,\n          'hhover:bg-grey-100': darkMode === true,\n          'hhover:bg-grey-50 dark:hhover:bg-grey-100': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.AlternativeHeavy && [\n        // Base\n        {\n          'bg-grey-900': darkMode === false,\n          'bg-grey-0': darkMode === true,\n          'bg-grey-900 dark:bg-grey-0': darkMode === 'auto',\n        },\n        {\n          'text-light-text-100': darkMode === false,\n          'text-dark-text-100': darkMode === true,\n          'text-light-text-100 dark:text-dark-text-100': darkMode === 'auto',\n        },\n        // Hovered\n        {\n          'hover-hover:hover:bg-grey-800': darkMode === false,\n          'hover-hover:hover:bg-grey-100': darkMode === true,\n          'hover-hover:hover:bg-grey-800 hover-hover:dark:hover:bg-grey-100': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.Transparent && [\n        // Disabled - Base\n        'aria-disabled:bg-transparent',\n        // Disabled - Hover\n        'hover-hover:aria-disabled:bg-transparent',\n        // Base\n        {\n          'bg-transparent-button-light': darkMode === false,\n          'bg-transparent-button-dark': darkMode === true,\n          'bg-transparent-button-light dark:bg-transparent-button-dark': darkMode === 'auto',\n        },\n        {\n          'text-dark-text-200': darkMode === false,\n          'text-light-text-200': darkMode === true,\n          'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n        },\n        // Hovered\n        {\n          'hover-hover:hover:bg-transparent-button-hover-light': darkMode === false,\n          'hover-hover:hover:bg-transparent-button-hover-dark': darkMode === true,\n          'hover-hover:hover:bg-transparent-button-hover-light hover-hover:dark:hover:bg-transparent-button-hover-dark':\n            darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.Orange && [\n        // Base\n        'bg-tangerine-500',\n        'text-light-text-100',\n        // Hovered\n        'hover-hover:hover:bg-tangerine-600',\n      ],\n      colorScheme === OzContainedButtonColorScheme.Destructive && [\n        // Base\n        'bg-danger-100',\n        'text-light-text-100',\n        // Hovered\n        'hover-hover:hover:bg-scarlet-600',\n      ],\n      colorScheme === OzContainedButtonColorScheme.DestructiveClear && [\n        // Disabled - Base\n        'aria-disabled:bg-transparent',\n        'aria-disabled:text-danger-50',\n        // Disabled - Hover\n        'hover-hover:aria-disabled:bg-transparent',\n        'hover-hover:aria-disabled:text-danger-50',\n        // Base\n        'bg-transparent',\n        'text-danger-100',\n        // Hovered\n        {\n          'hover-hover:hover:bg-scarlet-100': darkMode === false,\n          'hover-hover:hover:bg-scarlet-1000': darkMode === true,\n          'hover-hover:hover:bg-scarlet-100 hover-hover:dark:hover:bg-scarlet-1000': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.Green && [\n        // Base\n        'bg-park-500',\n        'text-light-text-100',\n        // Hovered\n        'hover-hover:hover:bg-park-600',\n      ],\n      colorScheme === OzContainedButtonColorScheme.Grey && [\n        // Base\n        {\n          'bg-grey-50': darkMode === false,\n          'bg-grey-800': darkMode === true,\n          'bg-grey-50 dark:bg-grey-800': darkMode === 'auto',\n        },\n        {\n          'text-dark-text-200': darkMode === false,\n          'text-light-text-200': darkMode === true,\n          'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n        },\n        // Hovered\n        {\n          'hover-hover:hover:bg-grey-100': darkMode === false,\n          'hover-hover:hover:bg-grey-700': darkMode === true,\n          'hover-hover:hover:bg-grey-100 hover-hover:dark:hover:bg-grey-700': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.Active && [\n        // Base\n        {\n          'bg-grape-500': darkMode === false,\n          'bg-canary-500': darkMode === true,\n          'bg-grape-500 dark:bg-canary-500': darkMode === 'auto',\n        },\n        {\n          'text-light-text-100': darkMode === false,\n          'text-dark-text-100': darkMode === true,\n          'text-light-text-100 dark:text-dark-text-100': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.Purple && [\n        // Base\n        'bg-grape-500',\n        'text-light-text-100',\n        // Hovered\n        'hover-hover:hover:bg-grape-600',\n      ],\n      colorScheme === OzContainedButtonColorScheme.Blue && [\n        // Base\n        'bg-oceanic-500',\n        'text-light-text-100',\n        // Hovered\n        'hover-hover:hover:bg-oceanic-600',\n      ],\n      colorScheme === OzContainedButtonColorScheme.BlueClear && [\n        // Base\n        'bg-transparent',\n        'text-oceanic-500',\n        {\n          'hover-hover:hover:bg-transparent-button-hover-light': darkMode === false,\n          'hover-hover:hover:bg-transparent-button-hover-dark': darkMode === true,\n          'hover-hover:hover:bg-transparent-button-hover-light hover-hover:dark:hover:bg-transparent-button-hover-dark':\n            darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzContainedButtonColorScheme.GreenClear && [\n        // Base\n        'bg-transparent',\n        'text-park-500',\n        {\n          'hover-hover:hover:bg-transparent-button-hover-light': darkMode === false,\n          'hover-hover:hover:bg-transparent-button-hover-dark': darkMode === true,\n          'hover-hover:hover:bg-transparent-button-hover-light hover-hover:dark:hover:bg-transparent-button-hover-dark':\n            darkMode === 'auto',\n        },\n      ],\n    ]\"\n    @mouseenter=\"$emit('mouseenter', $event)\"\n    @mouseleave=\"$emit('mouseleave', $event)\"\n    @mousedown=\"$emit('mousedown', $event)\"\n    @focus=\"$emit('focus', $event)\"\n    @blur=\"$emit('blur', $event)\"\n    @click=\"$emit('click', $event)\"\n    @pointerdown=\"$emit('pointerdown', $event)\"\n  >\n    <!-- @slot Left icon. -->\n    <slot name=\"leftIcon\"></slot>\n\n    <!-- @slot Text. -->\n    <span v-if=\"text\" :class=\"['flex-1', shouldTruncateText && 'truncate']\">{{ text }}</span>\n\n    <!-- @slot Right icon. -->\n    <slot name=\"rightIcon\"></slot>\n\n    <!-- @slot Only icon. -->\n    <slot name=\"icon\"></slot>\n\n    <!-- @slot For customization. -->\n    <slot></slot>\n  </OzBaseButton>\n</template>\n"],"names":["OzContainedButtonColorScheme","OzContainedButtonSizePreset","__default__"],"mappings":"obA2FYA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,eAAiB,iBACjBA,EAAA,UAAY,YACZA,EAAA,gBAAkB,kBAClBA,EAAA,kBAAoB,oBACpBA,EAAA,eAAiB,iBACjBA,EAAA,mBAAqB,qBACrBA,EAAA,mBAAqB,qBACrBA,EAAA,qBAAuB,uBACvBA,EAAA,qBAAuB,uBACvBA,EAAA,oBAAsB,sBACtBA,EAAA,YAAc,cACdA,EAAA,qBAAuB,uBACvBA,EAAA,iBAAmB,mBACnBA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,iBAAmB,mBACnBA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,KAAO,OACPA,EAAA,UAAY,YACZA,EAAA,WAAa,aA1BHA,IAAAA,GAAA,CAAA,CAAA,EA6BAC,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QACRA,EAAA,WAAa,aACbA,EAAA,UAAY,YAVFA,IAAAA,GAAA,CAAA,CAAA,EAcZ,MAAAC,EAAe,CAAA"}