@fvc/button 1.2.5 → 2.0.0-feature-button-loading-prop-f26fa88aaa5020d226e616dd4ef46f8cd2462873
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Button.scss';
|
|
3
3
|
import type { ButtonProps } from './types';
|
|
4
|
-
export declare const Button: ({ type, danger, className, testId, block, ...props }: ButtonProps) => React.JSX.Element;
|
|
4
|
+
export declare const Button: ({ type, danger, className, testId, block, is, ...props }: ButtonProps) => React.JSX.Element;
|
package/dist/lib/index.js
CHANGED
|
@@ -3,4 +3,4 @@ import{Button as n}from"antd";import t from"react";function o(n){return n&&n.__e
|
|
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
|
4
4
|
Licensed under the MIT License (MIT), see
|
|
5
5
|
http://jedwatson.github.io/classnames
|
|
6
|
-
*/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 r,{type:e,danger:a,className:c,testId:v,block:u=!1}=o,i=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 s=a?"dangerous":e,g="danger"===e||a?"danger":i.color,f=l[null!==(r=i.size)&&void 0!==r?r:"middle"],h=b(d,{[`${d}-${s}`]:s,[`${d}-${i.shape}`]:i.shape,[`${d}-${f}`]:f,[`${d}-background-${i.bg}`]:i.bg,[`${d}-block`]:u},c);return t.createElement(n,Object.assign({prefixCls:d,className:h,color:g,disabled:"disabled"===e||i.disabled,"data-testid":v},i))};export{c as Button};
|
|
6
|
+
*/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 r,{type:e,danger:a,className:c,testId:v,block:u=!1,is:i="button"}=o,s=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","is"]);const g=a?"dangerous":e,f="danger"===e||a?"danger":s.color,h=l[null!==(r=s.size)&&void 0!==r?r:"middle"],p=b(d,{[`${d}-${g}`]:g,[`${d}-${s.shape}`]:s.shape,[`${d}-${h}`]:h,[`${d}-background-${s.bg}`]:s.bg,[`${d}-block`]:u},c);return t.createElement(n,Object.assign({prefixCls:d,className:p,color:f,disabled:"disabled"===e||s.disabled,"data-testid":v},s))};export{c as Button};
|