@fvc/button 1.2.2 → 1.2.4

package/dist/lib/button/src/Button.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { ButtonProps } from './types';
 import './Button.scss';
+import type { ButtonProps } from './types';
 export declare const Button: ({ type, danger, className, testId, block, ...props }: ButtonProps) => React.JSX.Element;

package/dist/lib/button/src/types/Button.types.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
 import { type ButtonProps as DefaultButtonProps } from 'antd';
+import type { ReactNode } from 'react';
 export type ButtonType = 'default' | 'primary' | 'secondary' | 'white' | 'disabled' | 'dashed' | 'link' | 'text' | 'text-black' | 'danger' | 'danger-light' | 'transparent' | 'dropdown-button';
 export type ButtonShape = 'round' | 'circle';
 export type ButtonBgType = 'transparent';

package/dist/lib/index.js

@@ -1,6 +1,6 @@
-import n from"react";import{Button as t}from"antd";var o=function(){return o=Object.assign||function(n){for(var t,o=1,r=arguments.length;o<r;o++)for(var e in t=arguments[o])Object.prototype.hasOwnProperty.call(t,e)&&(n[e]=t[e]);return n},o.apply(this,arguments)};function r(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}"function"==typeof SuppressedError&&SuppressedError;var e,a={exports:{}};
+import{Button as n}from"antd";import t from"react";function o(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}"function"==typeof SuppressedError&&SuppressedError;var r,e={exports:{}};
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
-*/var d,b=r((e||(e=1,d=a,function(){var n={}.hasOwnProperty;function t(){for(var n="",t=0;t<arguments.length;t++){var e=arguments[t];e&&(n=r(n,o(e)))}return n}function o(o){if("string"==typeof o||"number"==typeof o)return o;if("object"!=typeof o)return"";if(Array.isArray(o))return t.apply(null,o);if(o.toString!==Object.prototype.toString&&!o.toString.toString().includes("[native code]"))return o.toString();var e="";for(var a in o)n.call(o,a)&&o[a]&&(e=r(e,a));return e}function r(n,t){return t?n?n+" "+t:n+t:n}d.exports?(t.default=t,d.exports=t):window.classNames=t}()),a.exports));!function(n,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===o&&r.firstChild?r.insertBefore(e,r.firstChild):r.appendChild(e),e.styleSheet?e.styleSheet.cssText=n:e.appendChild(document.createTextNode(n))}}(":root {\n  /* Button Background */\n  --button-disabled-secondary-color-300: #93c3b04d; /* Used as a stroke color for Secondary button. */\n  --button-hover-secondary-color-300: #93c3b080; /* Used as a background color for Secondary button. */\n  --button-pressed-secondary-color-300: #93c3b0; /* Used as a background color for Secondary button */\n  --button-enable-color-600: #268661; /* Used as a background color for Primary button */\n  --button-hover-color-700: #176647; /* Used as a background color for Primary button */\n  --button-disabled-color-800: #396f65; /* Used as a background color for Primary button */\n  --button-enable-second-on-dark-bg-color-0: #ffffff; /* Used as a stroke color for Secondary button. (on Dark bg) */\n  --button-hover-second-on-dark-bg-color-20: #ffffff33; /* Used as a background color for Secondary button. (on Dark bg) */\n  --button-pressed-second-on-dark-bg-color-40: #ffffff66; /* Used as a background color for Secondary button. (on Dark bg) */\n  --button-disabled-second-on-dark-bg-color-50: #f2f2f2; /* Used as a stroke color for Secondary button. (on Dark bg) */\n  --button-enable-second-error-color-800: #800020; /* Used as a stroke color for Secondary button */\n  --button-hover-second-error-color-300: #f9c801; /* Used as a background color for Secondary button */\n  --button-pressed-second-error-color-400: #ff9da9; /* Used as a background color for Secondary button */\n  --button-disabled-second-error-color-400: #ff9d49; /* Used as a stroke color for Secondary button. */\n  --button-hover-second-error-on-dark-bg-color-300-40: #f9c80166; /* Used as a background color for Secondary button, (on Dark bg) */\n  --button-pressed-second-error-on-dark-bg-color-300-60: #f9cbd199; /* Used as a background color for Secondary button, (on Dark bg) */\n  --button-disabled-second-error-on-dark-bg-color-300: #f9c801; /* Used as a stroke color for Secondary button. (on Dark bg) */\n  /* New Button Variables */\n  --button-primary-text: var(--white-text-color-0);\n  --button-secondary-text: var(--button-enable-color-600);\n  --button-danger-text: var(--red-800);\n  --button-danger-light-text: var(--red-300);\n  --button-disabled-text: rgba(0, 0, 0, 0.25);\n  --button-default-bg: var(--white-text-color-0);\n  --button-primary-bg: var(--button-enable-color-600);\n  --button-transparent-bg: transparent;\n  --button-hover-transparent-bg: rgba(0, 0, 0, 0.02);\n  --button-default-border: var(--gray-300);\n  --button-primary-border: var(--button-enable-color-600);\n  --button-transparent-border: rgba(0, 0, 0, 0);\n  --button-primary-hover: var(--button-hover-color-700);\n  --button-accent-hover: #419471;\n  --button-text-hover: var(--blue-400);\n  --button-light-hover: var(--white-text-color-0);\n  --button-neutral-hover: var(--gray-300);\n  --button-default-shadow: 0 2px rgba(0, 0, 0, 0.016);\n  --button-primary-shadow: 0 4px 13px rgba(0, 255, 146, 0.2);\n  --button-text-shadow: 0 -1px rgba(0, 0, 0, 0.12);\n  --button-primary-disabled: var(--gray-400);\n  --button-secondary-disabled: var(--green-300);\n  --button-danger-disabled: var(--red-400);\n  --button-white-disabled: var(--white-text-color-0);\n  --button-default-radius: 2px;\n  --button-round-radius: 40px;\n  --button-dropdown-radius: 16px;\n  /* Button Component Specific */\n  --button-base-text: var(--blue-200);\n  --button-link-text: var(--blue-400);\n  --button-dropdown-text: var(--blue-gray-300);\n  --button-danger-bg: var(--red-300);\n  --button-danger-disabled-bg: var(--red-400);\n  --button-secondary-border: var(--gray-400);\n  --button-dark-text: rgba(0, 0, 0, 0.85);\n  --button-emphasis-text: var(--black-1000);\n  --button-dropdown-accent: #648bb3;\n  --button-active-accent: #166147;\n  --button-warning-text: var(--warning-text-on-dark-bg-color-400);\n  /* Button Sizing */\n  --button-height-sm: 24px;\n  --button-height-md: 32px;\n  --button-height-lg: 48px;\n  --button-height-default: 40px;\n  --button-height-dropdown: 34px;\n  --button-height-circle: 40px;\n  --button-padding-sm: 0 7px;\n  --button-padding-md: 4px 16px;\n  --button-padding-lg: 10.4px 15px;\n  --button-padding-default: 8px 16px;\n  --button-padding-round: 8px 20px;\n  --button-padding-dropdown: 16px;\n  --button-padding-circle: 0;\n  --button-font-size-default: 14px;\n  --button-font-size-lg: 16px;\n  --button-font-weight-default: 700;\n  --button-font-weight-text: 400;\n  --button-line-height: 1.5715;\n  --button-min-width-circle: 40px;\n}\n\n.fvc-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  user-select: none;\n  cursor: pointer;\n  text-align: center;\n  white-space: nowrap;\n  font: var(--button-font-weight-default) var(--button-font-size-default)/var(--button-line-height) Roboto, Arial, sans-serif;\n  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n  position: relative;\n  box-shadow: var(--button-default-shadow);\n  border: 1px solid var(--button-default-border);\n  padding: var(--button-padding-default);\n  gap: 0;\n  background: var(--button-default-bg);\n  color: var(--button-base-text);\n}\n.fvc-btn span:has(svg) {\n  align-self: center;\n  align-items: center;\n  padding-right: 4px;\n  display: inline-flex;\n}\n.fvc-btn:not(:disabled):hover {\n  text-decoration: none;\n}\n.fvc-btn:disabled {\n  color: var(--button-disabled-text);\n  background: var(--button-default-bg);\n  border-color: var(--button-secondary-border);\n  box-shadow: none;\n  text-shadow: none;\n}\n.fvc-btn-primary {\n  color: var(--button-primary-text);\n  background: var(--button-primary-bg);\n  border-color: var(--button-primary-border);\n  box-shadow: var(--button-primary-shadow);\n  text-shadow: var(--button-text-shadow);\n}\n.fvc-btn-primary:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-primary:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-primary:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-primary-text);\n  background: var(--button-primary-hover);\n  border-color: var(--button-primary-hover);\n}\n.fvc-btn-primary:disabled,\n.fvc-btn-primary .fvc-btn-disabled {\n  color: var(--button-primary-disabled);\n  background: var(--button-disabled-color-800);\n  border-color: var(--button-disabled-color-800);\n}\n.fvc-btn-secondary {\n  color: var(--button-secondary-text);\n  background: var(--button-transparent-bg);\n  border-color: var(--button-primary-border);\n}\n.fvc-btn-secondary:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-secondary:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-secondary:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-secondary-text);\n  background: var(--button-hover-secondary-color-300);\n  border-color: var(--button-primary-border);\n}\n.fvc-btn-secondary:disabled,\n.fvc-btn-secondary .fvc-btn-disabled {\n  color: var(--button-secondary-disabled);\n  background: var(--button-default-bg);\n  border-color: var(--button-disabled-secondary-color-300);\n}\n.fvc-btn-danger {\n  color: var(--button-danger-text);\n  background: var(--button-transparent-bg);\n  border-color: var(--button-danger-text);\n}\n.fvc-btn-danger:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-danger:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-danger:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-danger-text);\n  background: var(--button-danger-bg);\n  border-color: var(--button-danger-text);\n}\n.fvc-btn-danger:disabled,\n.fvc-btn-danger .fvc-btn-disabled {\n  color: var(--button-danger-text);\n  background: var(--button-danger-disabled-bg);\n  border-color: var(--button-danger-text);\n}\n.fvc-btn-dangerous {\n  color: var(--button-danger-text);\n  background: var(--button-default-bg);\n  border-color: var(--button-danger-text);\n}\n.fvc-btn-dangerous:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-dangerous:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-dangerous:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-danger-light-text);\n  background: var(--button-default-bg);\n  border-color: var(--button-danger-light-text);\n}\n.fvc-btn-dangerous:disabled,\n.fvc-btn-dangerous .fvc-btn-disabled {\n  color: var(--button-danger-disabled);\n  background: var(--button-pressed-second-error-on-dark-bg-color-300-60);\n  border-color: var(--button-danger-disabled);\n}\n.fvc-btn-white {\n  color: var(--button-primary-text);\n  background: none;\n  border-color: var(--button-primary-text);\n}\n.fvc-btn-white:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-white:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-white:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-neutral-hover);\n  background: var(--button-hover-second-on-dark-bg-color-20);\n  border-color: var(--button-neutral-hover);\n}\n.fvc-btn-white:disabled,\n.fvc-btn-white .fvc-btn-disabled {\n  color: var(--button-white-disabled);\n  background: var(--button-pressed-second-on-dark-bg-color-40);\n}\n.fvc-btn-dashed {\n  color: var(--button-base-text);\n  background: var(--button-default-bg);\n  border-color: var(--button-default-border);\n  border-style: dashed;\n}\n.fvc-btn-dashed:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-dashed:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-dashed:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-accent-hover);\n  background: var(--button-default-bg);\n  border-color: var(--button-accent-hover);\n}\n.fvc-btn-link {\n  color: var(--button-link-text);\n  background: none;\n  border-color: var(--button-transparent-border);\n  box-shadow: none;\n}\n.fvc-btn-link:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-link:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-link:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-link-text);\n  background: none;\n  border-color: var(--button-transparent-border);\n}\n.fvc-btn-link:disabled,\n.fvc-btn-link .fvc-btn-disabled {\n  background: none;\n  border-color: transparent;\n}\n.fvc-btn-text, .fvc-btn-text-black {\n  color: var(--button-dark-text);\n  background: none;\n  border-color: var(--button-transparent-border);\n  box-shadow: none;\n}\n.fvc-btn-text:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-text:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-text:not(:disabled):not(.fvc-btn-disabled):active, .fvc-btn-text-black:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-text-black:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-text-black:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-text-hover);\n  background: var(--button-hover-transparent-bg);\n  border-color: var(--button-transparent-border);\n}\n.fvc-btn-text:disabled,\n.fvc-btn-text .fvc-btn-disabled, .fvc-btn-text-black:disabled,\n.fvc-btn-text-black .fvc-btn-disabled {\n  background: none;\n  border-color: transparent;\n}\n.fvc-btn-text-black, .fvc-btn-text-black-black {\n  color: var(--button-emphasis-text);\n  font: var(--button-font-weight-text) var(--button-font-size-default)/16px Roboto;\n}\n.fvc-btn-danger-light {\n  color: var(--button-warning-text);\n  background: none;\n  border-color: var(--button-warning-text);\n}\n.fvc-btn-danger-light:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-danger-light:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-danger-light:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-light-hover);\n  background: var(--button-warning-text);\n  border-color: var(--button-warning-text);\n}\n.fvc-btn-danger-light:disabled,\n.fvc-btn-danger-light .fvc-btn-disabled {\n  color: var(--button-danger-disabled);\n  background: var(--button-pressed-second-error-on-dark-bg-color-300-60);\n  border-color: var(--button-danger-disabled);\n}\n.fvc-btn-transparent {\n  color: var(--button-primary-text);\n  background: none;\n  border-color: var(--button-default-border);\n}\n.fvc-btn-transparent:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-transparent:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-transparent:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-accent-hover);\n  background: none;\n  border-color: var(--button-accent-hover);\n}\n.fvc-btn-dropdown-button {\n  height: var(--button-height-dropdown);\n  padding: var(--button-padding-dropdown);\n  color: var(--button-dropdown-text);\n  border: 1px solid var(--button-secondary-border);\n  border-radius: var(--button-dropdown-radius);\n  display: flex;\n}\n.fvc-btn-dropdown-button:hover {\n  color: var(--button-dropdown-text) !important;\n  border-color: var(--button-dropdown-accent) !important;\n}\n.fvc-btn-circle {\n  text-align: center;\n  border-radius: 50%;\n  min-width: var(--button-min-width-circle);\n  padding: var(--button-padding-circle);\n}\n.fvc-btn-circle:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-circle:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-circle:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-accent-hover);\n  background: var(--button-default-bg);\n  border-color: var(--button-accent-hover);\n}\n.fvc-btn-round {\n  height: var(--button-height-default);\n  padding: var(--button-padding-round);\n  border-radius: var(--button-round-radius);\n}\n.fvc-btn-round:not(:disabled):not(.fvc-btn-disabled):active {\n  box-shadow: none;\n  outline: 0;\n}\n.fvc-btn-background-transparent {\n  background: none;\n}\n.fvc-btn-background-transparent:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-background-transparent:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-background-transparent:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-accent-hover);\n  border-color: var(--button-accent-hover);\n}\n.fvc-btn-background-transparent:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-active-accent);\n  border-color: var(--button-active-accent);\n}\n.fvc-btn-sm {\n  height: var(--button-height-sm);\n  padding: var(--button-padding-sm);\n}\n.fvc-btn-md {\n  height: var(--button-height-md);\n  padding: var(--button-padding-md);\n}\n.fvc-btn-lg {\n  height: var(--button-height-lg);\n  padding: var(--button-padding-lg);\n}\n.fvc-btn-block {\n  width: 100%;\n  justify-content: center;\n}");var c="fvc-btn",l={small:"sm",middle:"md",large:"lg"},i=function(r){var e,a=r.type,d=r.danger,i=r.className,s=r.testId,u=r.block,v=void 0!==u&&u,f=function(n,t){var o={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&t.indexOf(r)<0&&(o[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var e=0;for(r=Object.getOwnPropertySymbols(n);e<r.length;e++)t.indexOf(r[e])<0&&Object.prototype.propertyIsEnumerable.call(n,r[e])&&(o[r[e]]=n[r[e]])}return o}(r,["type","danger","className","testId","block"]),g=d?"dangerous":a,p="danger"===a||d?"danger":f.color,h=l[f.size||"middle"],x=b(c,((e={})["".concat(c,"-").concat(g)]=g,e["".concat(c,"-").concat(f.shape)]=f.shape,e["".concat(c,"-").concat(h)]=h,e["".concat(c,"-background-").concat(f.bg)]=f.bg,e["".concat(c,"-block")]=v,e),i);return n.createElement(t,o({prefixCls:c,className:x,color:p,disabled:"disabled"===a||f.disabled,"data-testid":s},f))};export{i as Button};
+*/var a,b=o((r||(r=1,a=e,function(){var n={}.hasOwnProperty;function t(){for(var n="",t=0;t<arguments.length;t++){var e=arguments[t];e&&(n=r(n,o(e)))}return n}function o(o){if("string"==typeof o||"number"==typeof o)return o;if("object"!=typeof o)return"";if(Array.isArray(o))return t.apply(null,o);if(o.toString!==Object.prototype.toString&&!o.toString.toString().includes("[native code]"))return o.toString();var e="";for(var a in o)n.call(o,a)&&o[a]&&(e=r(e,a));return e}function r(n,t){return t?n?n+" "+t:n+t:n}a.exports?(t.default=t,a.exports=t):window.classNames=t}()),e.exports));!function(n,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===o&&r.firstChild?r.insertBefore(e,r.firstChild):r.appendChild(e),e.styleSheet?e.styleSheet.cssText=n:e.appendChild(document.createTextNode(n))}}(":root {\n  /* Button Component Variations */\n  /* Default button */\n  --button-default-text-color: var(--blue-200);\n  --button-default-bg-color: var(--neutral-0);\n  --button-default-border-color: var(--gray-300);\n  --button-default-disabled-text-color: rgba(0, 0, 0, 0.25);\n  --button-default-disabled-bg-color: var(--neutral-0);\n  --button-default-disabled-border-color: var(--gray-400);\n  /* Primary button */\n  --button-primary-text-color: var(--neutral-0);\n  --button-primary-bg-color: var(--green-600);\n  --button-primary-border-color: var(--green-600);\n  --button-primary-hover-text-color: var(--neutral-0);\n  --button-primary-hover-bg-color: var(--green-700);\n  --button-primary-hover-border-color: var(--green-700);\n  --button-primary-disabled-text-color: var(--gray-400);\n  --button-primary-disabled-bg-color: var(--green-800);\n  --button-primary-disabled-border-color: var(--green-800);\n  --button-primary-shadow: 0 4px 13px rgba(0, 255, 146, 0.2);\n  /* Secondary button */\n  --button-secondary-text-color: var(--green-600);\n  --button-secondary-bg-color: transparent;\n  --button-secondary-border-color: var(--green-600);\n  --button-secondary-hover-text-color: var(--green-600);\n  --button-secondary-hover-bg-color: var(--green-300-50);\n  --button-secondary-hover-border-color: var(--green-600);\n  --button-secondary-disabled-text-color: var(--green-300);\n  --button-secondary-disabled-bg-color: var(--gray-100);\n  --button-secondary-disabled-border-color: var(--green-300-30);\n  /* Danger button */\n  --button-danger-text-color: var(--red-800);\n  --button-danger-bg-color: transparent;\n  --button-danger-border-color: var(--red-800);\n  --button-danger-hover-text-color: var(--red-800);\n  --button-danger-hover-bg-color: var(--red-300);\n  --button-danger-hover-border-color: var(--red-800);\n  --button-danger-disabled-text-color: var(--red-800);\n  --button-danger-disabled-bg-color: var(--red-400);\n  --button-danger-disabled-border-color: var(--red-800);\n  /* Dangerous button */\n  --button-dangerous-text-color: var(--red-800);\n  --button-dangerous-bg-color: var(--neutral-0);\n  --button-dangerous-border-color: var(--red-800);\n  --button-dangerous-hover-text-color: var(--red-300);\n  --button-dangerous-hover-bg-color: var(--neutral-0);\n  --button-dangerous-hover-border-color: var(--red-300);\n  --button-dangerous-disabled-text-color: var(--red-400);\n  --button-dangerous-disabled-bg-color: var(--red-300-60);\n  --button-dangerous-disabled-border-color: var(--red-400);\n  /* White button */\n  --button-white-text-color: var(--neutral-0);\n  --button-white-bg-color: transparent;\n  --button-white-border-color: var(--neutral-0);\n  --button-white-hover-text-color: var(--gray-300);\n  --button-white-hover-bg-color: var(--neutral-0-20);\n  --button-white-hover-border-color: var(--gray-300);\n  --button-white-disabled-text-color: var(--neutral-0);\n  --button-white-disabled-bg-color: var(--neutral-0-40);\n  --button-white-disabled-border-color: var(--neutral-0);\n  /* Dashed button */\n  --button-dashed-text-color: var(--blue-200);\n  --button-dashed-bg-color: var(--neutral-0);\n  --button-dashed-border-color: var(--gray-300);\n  --button-dashed-hover-text-color: #419471;\n  --button-dashed-hover-bg-color: var(--neutral-0);\n  --button-dashed-hover-border-color: #419471;\n  /* Link button */\n  --button-link-text-color: var(--blue-400);\n  --button-link-bg-color: transparent;\n  --button-link-border-color: transparent;\n  --button-link-hover-text-color: var(--blue-400);\n  --button-link-hover-bg-color: transparent;\n  --button-link-hover-border-color: transparent;\n  --button-link-disabled-bg-color: transparent;\n  --button-link-disabled-border-color: transparent;\n  /* Text button */\n  --button-text-text-color: rgba(0, 0, 0, 0.85);\n  --button-text-bg-color: transparent;\n  --button-text-border-color: transparent;\n  --button-text-hover-text-color: var(--blue-400);\n  --button-text-hover-bg-color: rgba(0, 0, 0, 0.02);\n  --button-text-hover-border-color: transparent;\n  --button-text-disabled-bg-color: transparent;\n  --button-text-disabled-border-color: transparent;\n  --button-text-black-text-color: var(--black-1000);\n  /* Danger-light button */\n  --button-danger-light-text-color: var(--red-400);\n  --button-danger-light-bg-color: transparent;\n  --button-danger-light-border-color: var(--red-400);\n  --button-danger-light-hover-text-color: var(--neutral-0);\n  --button-danger-light-hover-bg-color: var(--red-400);\n  --button-danger-light-hover-border-color: var(--red-400);\n  --button-danger-light-disabled-text-color: var(--red-400);\n  --button-danger-light-disabled-bg-color: var(--red-300-60);\n  --button-danger-light-disabled-border-color: var(--red-400);\n  /* Transparent button */\n  --button-transparent-text-color: var(--neutral-0);\n  --button-transparent-bg-color: transparent;\n  --button-transparent-border-color: var(--gray-300);\n  --button-transparent-hover-text-color: #419471;\n  --button-transparent-hover-bg-color: transparent;\n  --button-transparent-hover-border-color: #419471;\n  /* Dropdown button */\n  --button-dropdown-text-color: var(--blue-gray-300);\n  --button-dropdown-border-color: var(--gray-400);\n  --button-dropdown-hover-border-color: #648bb3;\n  /* Background-transparent button */\n  --button-bg-transparent-hover-text-color: #419471;\n  --button-bg-transparent-hover-border-color: #419471;\n  --button-bg-transparent-active-text-color: #166147;\n  --button-bg-transparent-active-border-color: #166147;\n  /* Common */\n  --button-default-shadow: 0 2px rgba(0, 0, 0, 0.016);\n  --button-text-shadow: 0 -1px rgba(0, 0, 0, 0.12);\n  /* Button Sizing */\n  --button-height-sm: 24px;\n  --button-height-md: 32px;\n  --button-height-lg: 48px;\n  --button-height-default: 40px;\n  --button-height-dropdown: 34px;\n  --button-height-circle: 40px;\n  --button-padding-sm: 0 7px;\n  --button-padding-md: 4px 16px;\n  --button-padding-lg: 10.4px 15px;\n  --button-padding-default: 8px 16px;\n  --button-padding-round: 8px 20px;\n  --button-padding-dropdown: 16px;\n  --button-padding-circle: 0;\n  --button-font-size-default: 14px;\n  --button-font-size-lg: 16px;\n  --button-font-weight-default: 700;\n  --button-font-weight-text: 400;\n  --button-line-height: 1.5715;\n  --button-min-width-circle: 40px;\n}\n\n.fvc-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  user-select: none;\n  cursor: pointer;\n  text-align: center;\n  white-space: nowrap;\n  font: var(--button-font-weight-default) var(--button-font-size-default)/var(--button-line-height) Roboto, Arial, sans-serif;\n  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n  position: relative;\n  box-shadow: var(--button-default-shadow);\n  border: 1px solid var(--button-default-border-color);\n  padding: var(--button-padding-default);\n  gap: 0;\n  background: var(--button-default-bg-color);\n  color: var(--button-default-text-color);\n}\n\n.fvc-btn span:has(svg) {\n  align-self: center;\n  align-items: center;\n  padding-right: 4px;\n  display: inline-flex;\n}\n\n.fvc-btn:not(:disabled):hover {\n  text-decoration: none;\n}\n\n.fvc-btn:disabled {\n  color: var(--button-default-disabled-text-color);\n  background: var(--button-default-disabled-bg-color);\n  border-color: var(--button-default-disabled-border-color);\n  box-shadow: none;\n  text-shadow: none;\n}\n\n.fvc-btn-primary {\n  color: var(--button-primary-text-color);\n  background: var(--button-primary-bg-color);\n  border-color: var(--button-primary-border-color);\n}\n\n.fvc-btn-primary:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-primary:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-primary:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-primary-hover-text-color);\n  background: var(--button-primary-hover-bg-color);\n  border-color: var(--button-primary-hover-border-color);\n}\n\n.fvc-btn-primary:disabled,\n.fvc-btn-primary .fvc-btn-disabled {\n  color: var(--button-primary-disabled-text-color);\n  background: var(--button-primary-disabled-bg-color);\n  border-color: var(--button-primary-disabled-border-color);\n}\n\n.fvc-btn-primary {\n  box-shadow: var(--button-primary-shadow);\n  text-shadow: var(--button-text-shadow);\n}\n\n.fvc-btn-secondary {\n  color: var(--button-secondary-text-color);\n  background: var(--button-secondary-bg-color);\n  border-color: var(--button-secondary-border-color);\n}\n\n.fvc-btn-secondary:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-secondary:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-secondary:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-secondary-hover-text-color);\n  background: var(--button-secondary-hover-bg-color);\n  border-color: var(--button-secondary-hover-border-color);\n}\n\n.fvc-btn-secondary:disabled,\n.fvc-btn-secondary .fvc-btn-disabled {\n  color: var(--button-secondary-disabled-text-color);\n  background: var(--button-secondary-disabled-bg-color);\n  border-color: var(--button-secondary-disabled-border-color);\n}\n\n.fvc-btn-danger {\n  color: var(--button-danger-text-color);\n  background: var(--button-danger-bg-color);\n  border-color: var(--button-danger-border-color);\n}\n\n.fvc-btn-danger:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-danger:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-danger:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-danger-hover-text-color);\n  background: var(--button-danger-hover-bg-color);\n  border-color: var(--button-danger-hover-border-color);\n}\n\n.fvc-btn-danger:disabled,\n.fvc-btn-danger .fvc-btn-disabled {\n  color: var(--button-danger-disabled-text-color);\n  background: var(--button-danger-disabled-bg-color);\n  border-color: var(--button-danger-disabled-border-color);\n}\n\n.fvc-btn-dangerous {\n  color: var(--button-dangerous-text-color);\n  background: var(--button-dangerous-bg-color);\n  border-color: var(--button-dangerous-border-color);\n}\n\n.fvc-btn-dangerous:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-dangerous:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-dangerous:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-dangerous-hover-text-color);\n  background: var(--button-dangerous-hover-bg-color);\n  border-color: var(--button-dangerous-hover-border-color);\n}\n\n.fvc-btn-dangerous:disabled,\n.fvc-btn-dangerous .fvc-btn-disabled {\n  color: var(--button-dangerous-disabled-text-color);\n  background: var(--button-dangerous-disabled-bg-color);\n  border-color: var(--button-dangerous-disabled-border-color);\n}\n\n.fvc-btn-white {\n  color: var(--button-white-text-color);\n  background: var(--button-white-bg-color);\n  border-color: var(--button-white-border-color);\n}\n\n.fvc-btn-white:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-white:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-white:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-white-hover-text-color);\n  background: var(--button-white-hover-bg-color);\n  border-color: var(--button-white-hover-border-color);\n}\n\n.fvc-btn-white:disabled,\n.fvc-btn-white .fvc-btn-disabled {\n  color: var(--button-white-disabled-text-color);\n  background: var(--button-white-disabled-bg-color);\n  border-color: var(--button-white-disabled-border-color);\n}\n\n.fvc-btn-dashed {\n  color: var(--button-dashed-text-color);\n  background: var(--button-dashed-bg-color);\n  border-color: var(--button-dashed-border-color);\n}\n\n.fvc-btn-dashed:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-dashed:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-dashed:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-dashed-hover-text-color);\n  background: var(--button-dashed-hover-bg-color);\n  border-color: var(--button-dashed-hover-border-color);\n}\n\n.fvc-btn-dashed {\n  border-style: dashed;\n}\n\n.fvc-btn-link {\n  color: var(--button-link-text-color);\n  background: var(--button-link-bg-color);\n  border-color: var(--button-link-border-color);\n}\n\n.fvc-btn-link:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-link:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-link:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-link-hover-text-color);\n  background: var(--button-link-hover-bg-color);\n  border-color: var(--button-link-hover-border-color);\n}\n\n.fvc-btn-link:disabled,\n.fvc-btn-link .fvc-btn-disabled {\n  background: var(--button-link-disabled-bg-color);\n  border-color: var(--button-link-disabled-border-color);\n}\n\n.fvc-btn-link {\n  box-shadow: none;\n}\n\n.fvc-btn-text, .fvc-btn-text-black {\n  color: var(--button-text-text-color);\n  background: var(--button-text-bg-color);\n  border-color: var(--button-text-border-color);\n}\n\n.fvc-btn-text:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-text:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-text:not(:disabled):not(.fvc-btn-disabled):active, .fvc-btn-text-black:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-text-black:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-text-black:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-text-hover-text-color);\n  background: var(--button-text-hover-bg-color);\n  border-color: var(--button-text-hover-border-color);\n}\n\n.fvc-btn-text:disabled,\n.fvc-btn-text .fvc-btn-disabled, .fvc-btn-text-black:disabled,\n.fvc-btn-text-black .fvc-btn-disabled {\n  background: var(--button-text-disabled-bg-color);\n  border-color: var(--button-text-disabled-border-color);\n}\n\n.fvc-btn-text, .fvc-btn-text-black {\n  box-shadow: none;\n}\n\n.fvc-btn-text-black, .fvc-btn-text-black-black {\n  color: var(--button-text-black-text-color);\n  font: var(--button-font-weight-text) var(--button-font-size-default)/16px Roboto;\n}\n\n.fvc-btn-danger-light {\n  color: var(--button-danger-light-text-color);\n  background: var(--button-danger-light-bg-color);\n  border-color: var(--button-danger-light-border-color);\n}\n\n.fvc-btn-danger-light:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-danger-light:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-danger-light:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-danger-light-hover-text-color);\n  background: var(--button-danger-light-hover-bg-color);\n  border-color: var(--button-danger-light-hover-border-color);\n}\n\n.fvc-btn-danger-light:disabled,\n.fvc-btn-danger-light .fvc-btn-disabled {\n  color: var(--button-danger-light-disabled-text-color);\n  background: var(--button-danger-light-disabled-bg-color);\n  border-color: var(--button-danger-light-disabled-border-color);\n}\n\n.fvc-btn-transparent {\n  color: var(--button-transparent-text-color);\n  background: var(--button-transparent-bg-color);\n  border-color: var(--button-transparent-border-color);\n}\n\n.fvc-btn-transparent:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-transparent:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-transparent:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-transparent-hover-text-color);\n  background: var(--button-transparent-hover-bg-color);\n  border-color: var(--button-transparent-hover-border-color);\n}\n\n.fvc-btn-dropdown-button {\n  height: var(--button-height-dropdown);\n  padding: var(--button-padding-dropdown);\n  color: var(--button-dropdown-text-color);\n  border: 1px solid var(--button-dropdown-border-color);\n  border-radius: var(--button-dropdown-radius);\n  display: flex;\n}\n\n.fvc-btn-dropdown-button:hover {\n  color: var(--button-dropdown-text-color) !important;\n  border-color: var(--button-dropdown-hover-border-color) !important;\n}\n\n.fvc-btn-circle {\n  text-align: center;\n  border-radius: 50%;\n  min-width: var(--button-min-width-circle);\n  padding: var(--button-padding-circle);\n}\n\n.fvc-btn-circle:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-circle:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-circle:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-bg-transparent-hover-text-color);\n  background: var(--button-default-bg-color);\n  border-color: var(--button-bg-transparent-hover-border-color);\n}\n\n.fvc-btn-round {\n  height: var(--button-height-default);\n  padding: var(--button-padding-round);\n  border-radius: var(--button-round-radius);\n}\n\n.fvc-btn-round:not(:disabled):not(.fvc-btn-disabled):active {\n  box-shadow: none;\n  outline: 0;\n}\n\n.fvc-btn-background-transparent {\n  background: none;\n}\n\n.fvc-btn-background-transparent:not(:disabled):not(.fvc-btn-disabled):hover, .fvc-btn-background-transparent:not(:disabled):not(.fvc-btn-disabled):focus, .fvc-btn-background-transparent:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-bg-transparent-hover-text-color);\n  border-color: var(--button-bg-transparent-hover-border-color);\n}\n\n.fvc-btn-background-transparent:not(:disabled):not(.fvc-btn-disabled):active {\n  color: var(--button-bg-transparent-active-text-color);\n  border-color: var(--button-bg-transparent-active-border-color);\n}\n\n.fvc-btn-sm {\n  height: var(--button-height-sm);\n  padding: var(--button-padding-sm);\n}\n\n.fvc-btn-md {\n  height: var(--button-height-md);\n  padding: var(--button-padding-md);\n}\n\n.fvc-btn-lg {\n  height: var(--button-height-lg);\n  padding: var(--button-padding-lg);\n}\n\n.fvc-btn-block {\n  width: 100%;\n  justify-content: center;\n}");const d="fvc-btn",l={small:"sm",middle:"md",large:"lg"},c=o=>{var{type:r,danger:e,className:a,testId:c,block:v=!1}=o,u=function(n,t){var o={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&t.indexOf(r)<0&&(o[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var e=0;for(r=Object.getOwnPropertySymbols(n);e<r.length;e++)t.indexOf(r[e])<0&&Object.prototype.propertyIsEnumerable.call(n,r[e])&&(o[r[e]]=n[r[e]])}return o}(o,["type","danger","className","testId","block"]);const i=e?"dangerous":r,s="danger"===r||e?"danger":u.color,g=l[u.size||"middle"],f=b(d,{[`${d}-${i}`]:i,[`${d}-${u.shape}`]:u.shape,[`${d}-${g}`]:g,[`${d}-background-${u.bg}`]:u.bg,[`${d}-block`]:v},a);return t.createElement(n,Object.assign({prefixCls:d,className:f,color:s,disabled:"disabled"===r||u.disabled,"data-testid":c},u))};export{c as Button};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fvc/button",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "main": "./dist/lib/index.js",
   "types": "./dist/lib/button/src/index.d.ts",
   "files": [
@@ -18,15 +18,17 @@
     }
   },
   "scripts": {
-    "build": "rm -rf dist && rm -rf .rollup.cache && eslint --config ../../eslint.config.js . && bunx tsc --noEmit && rollup -c ./rollup.config.mjs"
-  },
-  "dependencies": {
-    "react": "^18.0.0",
-    "antd": "^5.0.0"
+    "build": "rollup -c ./rollup.config.mjs",
+    "clean": "rm -rf dist && rm -rf .rollup.cache && rm -rf .turbo",
+    "lint": "eslint --config ../../eslint.config.js \"src/**/*.{ts,tsx}\"",
+    "lint:fix": "eslint --config ../../eslint.config.js \"src/**/*.{ts,tsx}\" --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "type-check": "tsc --noEmit",
+    "test": "bun test --preload ../../tests/happydom.ts --preload ../../tests/testing-library.tsx"
   },
   "peerDependencies": {
     "@fvc/icons": "*",
     "react": "^18.0.0",
     "antd": "^5.0.0"
   }
-}
+}