@kiwicom/orbit-components/es/ButtonLink/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import cx from "clsx";
import ButtonPrimitive from "../primitives/ButtonPrimitive";
import { iconOnlyStyles, paddingBothIconsStyles, paddingLeftIconStyles, paddingNoIconsStyles, paddingRightIconStyles, sizeStyles, radiusStyles } from "../primitives/ButtonPrimitive/sizes";
const typeStyles = {
  primary: "bg-button-link-primary-background hover:[@media(hover)_and_(pointer:fine)]:bg-button-link-primary-background-hover active:bg-button-link-primary-background-active focus:bg-button-link-primary-background-focus text-button-link-primary-foreground focus:text-button-link-primary-foreground-focus active:text-button-link-primary-foreground-active hover:[@media(hover)_and_(pointer:fine)]:text-button-link-primary-foreground-hover",
  secondary: "bg-button-link-secondary-background hover:[@media(hover)_and_(pointer:fine)]:bg-button-link-secondary-background-hover active:bg-button-link-secondary-background-active focus:bg-button-link-secondary-background-focus text-button-link-secondary-foreground focus:text-button-link-secondary-foreground-focus active:text-button-link-secondary-foreground-active hover:[@media(hover)_and_(pointer:fine)]:text-button-link-secondary-foreground-hover",
  critical: "bg-button-link-critical-background hover:[@media(hover)_and_(pointer:fine)]:bg-button-link-critical-background-hover active:bg-button-link-critical-background-active focus:bg-button-link-critical-background-focus text-button-link-critical-foreground focus:text-button-link-critical-foreground-focus active:text-button-link-critical-foreground-active hover:[@media(hover)_and_(pointer:fine)]:text-button-link-critical-foreground-hover"
};
const typeCompactStyles = {
  primary: "text-button-link-primary-foreground focus:text-button-link-primary-foreground-focus active:text-button-link-primary-foreground-active hover:[@media(hover)_and_(pointer:fine)]:text-button-link-primary-foreground-hover",
  secondary: "text-button-link-secondary-foreground focus:text-product-normal-hover active:text-product-normal-active hover:[@media(hover)_and_(pointer:fine)]:text-product-normal-hover",
  critical: "text-button-link-critical-foreground focus:text-button-link-critical-foreground-focus active:text-button-link-critical-foreground-active hover:[@media(hover)_and_(pointer:fine)]:text-button-link-critical-foreground-hover"
};
const typeDisabledStyles = {
  primary: "bg-button-link-primary-background text-button-link-primary-foreground",
  secondary: "bg-button-link-secondary-background text-button-link-secondary-foreground",
  critical: "bg-button-link-critical-background text-button-link-critical-foreground"
};
const typeCompactDisabledStyles = {
  primary: "text-button-link-primary-foreground",
  secondary: "text-button-link-secondary-foreground",
  critical: "text-button-link-critical-foreground"
};
const ButtonLink = ({
  type = "primary",
  size = "normal",
  compact,
  disabled,
  children,
  iconLeft,
  iconRight,
  ref,
  ...props
}) => {
  return /*#__PURE__*/React.createElement(ButtonPrimitive, _extends({
    ref: ref,
    iconLeft: iconLeft,
    iconRight: iconRight,
    disabled: disabled,
    borderRadius: radiusStyles[size]
  }, props, {
    className: cx("space-x-200 rtl:space-x-reverse", sizeStyles[size], children == null && iconOnlyStyles[size], compact !== true && disabled !== true && typeStyles[type], compact === true && disabled !== true && typeCompactStyles[type], compact !== true && disabled === true && typeDisabledStyles[type], compact === true && disabled === true && typeCompactDisabledStyles[type], compact !== true && children != null && [iconLeft == null && iconRight == null && paddingNoIconsStyles[size], iconLeft != null && iconRight == null && paddingLeftIconStyles[size], iconLeft == null && iconRight != null && paddingRightIconStyles[size], iconLeft != null && iconRight != null && paddingBothIconsStyles[size]], props.circled === true && "rounded-full")
  }), children);
};
export default ButtonLink;