🚨 Active Supply Chain Attack:node-ipc Package Compromised.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@targetprocess/button

Package Overview
Dependencies
Maintainers
1
Versions
122
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@targetprocess/button - npm Package Compare versions

Comparing version
12.27.4
 to
12.28.0
+4
-1
Button.jsx

@@ -60,2 +60,3 @@ import React, {forwardRef} from 'react'

icon: PropTypes.node,
iconTail: PropTypes.bool,
onClick: PropTypes.func

@@ -146,2 +147,3 @@ }

icon,
iconTail,
...otherProps

@@ -204,2 +206,3 @@ },

>
{children && iconTail && <span>{children}</span>}
{icon && (

@@ -216,3 +219,3 @@ <div className={styles['tau-btn__icon']}>

)}
{children && <span>{children}</span>}
{children && !iconTail && <span>{children}</span>}
</button>

@@ -219,0 +222,0 @@ )

+6
-5
dist/button.es.js

@@ -102,4 +102,4 @@ import React, { forwardRef } from 'react';

var css = "/*********************************************************************\n* © Copyright IBM Corp. 2024\n*********************************************************************/\n@-webkit-keyframes spin__button__12-27-4 {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n\n to {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@keyframes spin__button__12-27-4 {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n\n to {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n.tau-btn__button__12-27-4 {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: block;\n padding: 0 calc(var(--SpaceS, 8px) - 1px);\n margin: 0;\n height: var(--ControlHeightDefault, 24px);\n line-height: var(--ButtonLineHeightDefault, 22px);\n font-family: inherit;\n font-size: var(--FontSizeLabel, 11px);\n font-weight: normal;\n text-decoration: none;\n text-shadow: none;\n white-space: nowrap;\n color: var(--ButtonColorDefault, #000000);\n min-width: 5em;\n border: solid 1px var(--ButtonBorderColorDefault, #E2E3E4);\n border-radius: var(--ControlBorderRadiusDefault, 3px);\n background-color: var(--ButtonBackgroundDefault, #F5F6F6);\n text-align: center;\n cursor: pointer;\n\n /* end region */\n}\n.tau-btn--no-background__button__12-27-4 {\n background-color: transparent;\n border: solid 1px transparent;\n }\n.tau-btn--no-background__button__12-27-4:hover {\n background-color: var(--Second200, #ECECED);\n }\n.tau-btn--no-background__button__12-27-4:active {\n background-color: var(--Second300, #E2E3E4);\n }\n.tau-btn__button__12-27-4::-moz-focus-inner {\n border: none;\n padding: 0;\n }\n.tau-btn__button__12-27-4:hover:not(:disabled) {\n background: var(--ButtonBackgroundHover, #ECECED);\n border-color: var(--ButtonBackgroundHover, #ECECED);\n }\n.tau-btn__button__12-27-4:active:not(:disabled) {\n background: var(--ButtonBackgroundActive, #E2E3E4);\n border-color: var(--ButtonBackgroundActive, #E2E3E4);\n }\n.tau-btn__button__12-27-4:disabled {\n cursor: default;\n opacity: var(--ControlDisabledOpacity, 0.5);\n }\n.tau-btn__button__12-27-4:focus {\n -webkit-box-shadow: var(--ControlBoxShadowFocusDefault, 0 0 0 3px rgba(0, 126, 255, 0.2));\n box-shadow: var(--ControlBoxShadowFocusDefault, 0 0 0 3px rgba(0, 126, 255, 0.2));\n outline: none;\n position: relative; /*to lift up box-shadow in groups*/\n }\n.tau-btn__button__12-27-4.checked {\n color: var(--ButtonColorChecked, #000000);\n border-color: var(--ButtonBorderColorChecked, #E2E3E4);\n }\n.tau-btn__button__12-27-4.checked,\n .tau-btn__button__12-27-4.checked:hover {\n background: var(--ButtonBackgroundChecked, #E2E3E4);\n border-color: var(--ButtonBackgroundChecked, #E2E3E4);\n }\n.tau-btn__button__12-27-4.checked:disabled {\n opacity: var(--ControlDisabledOpacity, 0.5);\n }\n.tau-btn__icon__button__12-27-4 {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n vertical-align: top;\n height: 100%;\n position: relative;\n margin: 0 2px;\n }\n.tau-btn__icon__button__12-27-4:first-child,\n .color-label__button__12-27-4 + .tau-btn__icon__button__12-27-4 {\n margin-left: -4px;\n }\n.tau-btn__icon__button__12-27-4:last-child {\n margin-right: -4px;\n }\n.tau-btn--ellipsis__button__12-27-4 {\n max-width: 100%;\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n }\n.tau-btn--icon__button__12-27-4 {\n min-width: 0;\n }\n.tau-btn--wide__button__12-27-4 {\n width: 100%;\n }\n.tau-btn--loader__button__12-27-4 {\n position: relative;\n cursor: default;\n }\n.tau-btn--loader__button__12-27-4:disabled {\n border-color: var(--ButtonBorderColorDefault, #E2E3E4);\n color: var(--ButtonColorDefault, #000000);\n }\n.tau-btn--loader__button__12-27-4:disabled:before,\n .tau-btn--loader__button__12-27-4:disabled:after {\n opacity: 1;\n }\n.tau-btn--loader__button__12-27-4:before,\n .tau-btn--loader__button__12-27-4:after {\n display: block;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n position: absolute;\n content: '';\n }\n.tau-btn--loader__button__12-27-4:before {\n z-index: 2;\n background: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='var(--Second400, %2366686D)'%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill-rule='evenodd'%3E %3Cpath d='M7.5,0 C7.77614237,0 8,0.229644775 8,0.501464665 L8,2.99853534 C8,3.27548662 7.76806641,3.5 7.5,3.5 L7.5,3.5 C7.22385763,3.5 7,3.27035522 7,2.99853534 L7,0.501464665 C7,0.224513378 7.23193359,0 7.5,0 L7.5,0 L7.5,0 Z' id='Path' opacity='0.200000003'/%3E %3Cpath d='M0,8.5 C0,8.22385763 0.229644775,8 0.501464665,8 L2.99853534,8 C3.27548662,8 3.5,8.23193359 3.5,8.5 L3.5,8.5 C3.5,8.77614237 3.27035522,9 2.99853534,9 L0.501464665,9 C0.224513378,9 0,8.76806641 0,8.5 L0,8.5 L0,8.5 Z' id='Path'/%3E %3Cpath d='M8.5,16 C8.22385763,16 8,15.7703552 8,15.4985353 L8,13.0014647 C8,12.7245134 8.23193359,12.5 8.5,12.5 L8.5,12.5 C8.77614237,12.5 9,12.7296448 9,13.0014647 L9,15.4985353 C9,15.7754866 8.76806641,16 8.5,16 L8.5,16 L8.5,16 Z' id='Path' opacity='0.800000012'/%3E %3Cpath d='M16,7.5 C16,7.77614237 15.7703552,8 15.4985353,8 L13.0014647,8 C12.7245134,8 12.5,7.76806641 12.5,7.5 L12.5,7.5 C12.5,7.22385763 12.7296448,7 13.0014647,7 L15.4985353,7 C15.7754866,7 16,7.23193359 16,7.5 L16,7.5 L16,7.5 Z' id='Path' opacity='0.5'/%3E %3Cpath d='M3.5669873,1.32179677 C3.80613361,1.18372558 4.11482239,1.27067498 4.25073233,1.50607791 L5.49926767,3.66860454 C5.63774331,3.90845139 5.54913962,4.21885248 5.3169873,4.35288568 L5.3169873,4.35288568 C5.07784099,4.49095687 4.76915221,4.40400747 4.63324226,4.16860454 L3.38470693,2.00607791 C3.24623129,1.76623106 3.33483498,1.45582997 3.5669873,1.32179677 L3.5669873,1.32179677 L3.5669873,1.32179677 L3.5669873,1.32179677 Z' id='Path' opacity='0.100000001'/%3E %3Cpath d='M1.32179677,12.4330127 C1.18372558,12.1938664 1.27067498,11.8851776 1.50607791,11.7492677 L3.66860454,10.5007323 C3.90845139,10.3622567 4.21885248,10.4508604 4.35288568,10.6830127 L4.35288568,10.6830127 C4.49095687,10.922159 4.40400747,11.2308478 4.16860454,11.3667577 L2.00607791,12.6152931 C1.76623106,12.7537687 1.45582997,12.665165 1.32179677,12.4330127 L1.32179677,12.4330127 L1.32179677,12.4330127 L1.32179677,12.4330127 Z' id='Path'/%3E %3Cpath d='M12.4330127,14.6782032 C12.1938664,14.8162744 11.8851776,14.729325 11.7492677,14.4939221 L10.5007323,12.3313955 C10.3622567,12.0915486 10.4508604,11.7811475 10.6830127,11.6471143 L10.6830127,11.6471143 C10.922159,11.5090431 11.2308478,11.5959925 11.3667577,11.8313955 L12.6152931,13.9939221 C12.7537687,14.2337689 12.665165,14.54417 12.4330127,14.6782032 L12.4330127,14.6782032 L12.4330127,14.6782032 L12.4330127,14.6782032 Z' id='Path' opacity='0.699999988'/%3E %3Cpath d='M14.6782032,3.5669873 C14.8162744,3.80613361 14.729325,4.11482239 14.4939221,4.25073233 L12.3313955,5.49926767 C12.0915486,5.63774331 11.7811475,5.54913962 11.6471143,5.3169873 L11.6471143,5.3169873 C11.5090431,5.07784099 11.5959925,4.76915221 11.8313955,4.63324226 L13.9939221,3.38470693 C14.2337689,3.24623129 14.54417,3.33483498 14.6782032,3.5669873 L14.6782032,3.5669873 L14.6782032,3.5669873 L14.6782032,3.5669873 Z' id='Path' opacity='0.400000006'/%3E %3Cpath d='M0.82179677,4.4330127 C0.959867957,4.19386639 1.27067498,4.11482239 1.50607791,4.25073233 L3.66860454,5.49926767 C3.90845139,5.63774331 3.98691889,5.95086038 3.85288568,6.1830127 L3.85288568,6.1830127 C3.7148145,6.42215901 3.40400747,6.50120302 3.16860454,6.36529307 L1.00607791,5.11675774 C0.766231058,4.97828209 0.687763567,4.66516502 0.82179677,4.4330127 L0.82179677,4.4330127 L0.82179677,4.4330127 L0.82179677,4.4330127 Z' id='Path' opacity='0.100000001'/%3E %3Cpath d='M4.4330127,15.1782032 C4.19386639,15.040132 4.11482239,14.729325 4.25073233,14.4939221 L5.49926767,12.3313955 C5.63774331,12.0915486 5.95086038,12.0130811 6.1830127,12.1471143 L6.1830127,12.1471143 C6.42215901,12.2851855 6.50120302,12.5959925 6.36529307,12.8313955 L5.11675774,14.9939221 C4.97828209,15.2337689 4.66516502,15.3122364 4.4330127,15.1782032 L4.4330127,15.1782032 L4.4330127,15.1782032 L4.4330127,15.1782032 Z' id='Path' opacity='0.900000036'/%3E %3Cpath d='M15.1782032,11.5669873 C15.040132,11.8061336 14.729325,11.8851776 14.4939221,11.7492677 L12.3313955,10.5007323 C12.0915486,10.3622567 12.0130811,10.0491396 12.1471143,9.8169873 L12.1471143,9.8169873 C12.2851855,9.57784099 12.5959925,9.49879698 12.8313955,9.63470693 L14.9939221,10.8832423 C15.2337689,11.0217179 15.3122364,11.334835 15.1782032,11.5669873 L15.1782032,11.5669873 L15.1782032,11.5669873 L15.1782032,11.5669873 Z' id='Path' opacity='0.600000024'/%3E %3Cpath d='M11.5669873,0.82179677 C11.8061336,0.959867957 11.8851776,1.27067498 11.7492677,1.50607791 L10.5007323,3.66860454 C10.3622567,3.90845139 10.0491396,3.98691889 9.8169873,3.85288568 L9.8169873,3.85288568 C9.57784099,3.7148145 9.49879698,3.40400747 9.63470693,3.16860454 L10.8832423,1.00607791 C11.0217179,0.766231058 11.334835,0.687763567 11.5669873,0.82179677 L11.5669873,0.82179677 L11.5669873,0.82179677 L11.5669873,0.82179677 Z' id='Path' opacity='0.300000012'/%3E %3C/g%3E %3C/svg%3E\") !important;\n width: 16px;\n height: 16px;\n top: 50%;\n left: 50%;\n margin: -8px 0 0 -8px;\n -webkit-animation: spin__button__12-27-4 0.8s steps(12, end) infinite;\n animation: spin__button__12-27-4 0.8s steps(12, end) infinite;\n }\n.tau-btn--loader__button__12-27-4:after {\n min-width: 100%;\n min-height: 100%;\n background: rgba(255, 255, 255, 0.85);\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n border-radius: var(--ControlBorderRadiusDefault, 3px);\n -webkit-box-shadow: inset 0 0 0 1px var(--ButtonBorderColorDefault, #E2E3E4);\n box-shadow: inset 0 0 0 1px var(--ButtonBorderColorDefault, #E2E3E4);\n }\n.tau-btn--loader__button__12-27-4.tau-primary__button__12-27-4:after,\n .tau-btn--loader__button__12-27-4.tau-danger__button__12-27-4:after,\n .tau-btn--loader__button__12-27-4.tau-success__button__12-27-4:after {\n background: rgba(255, 255, 255, 0.7);\n -webkit-box-shadow: none;\n box-shadow: none;\n }\n/* region Sizes */\n.tau-btn__button__12-27-4.tau-btn-large__button__12-27-4 {\n height: var(--ControlHeightXLarge, 40px);\n line-height: 38px;\n padding: 0 20px;\n font-size: 22px;\n }\n.tau-btn__button__12-27-4.tau-btn-large__button__12-27-4 .tau-btn__icon__button__12-27-4 {\n margin: 0 5px;\n }\n.tau-btn__button__12-27-4.tau-btn-large__button__12-27-4 .tau-btn__icon__button__12-27-4:first-child {\n margin-left: -8px;\n }\n.tau-btn__button__12-27-4.tau-btn-large__button__12-27-4 .tau-btn__icon__button__12-27-4:last-child {\n margin-right: -8px;\n }\n.tau-btn__button__12-27-4.tau-btn-big__button__12-27-4 {\n height: var(--ControlHeightLarge, 28px);\n line-height: 26px;\n padding: 0 10px;\n font-size: var(--FontSizeDefault, 13px);\n }\n.tau-btn__button__12-27-4.tau-btn-medium__button__12-27-4 {\n font-size: var(--FontSizeDefault, 13px);\n padding-bottom: 1px;\n }\n.tau-btn__button__12-27-4.tau-btn-small__button__12-27-4 {\n height: 20px;\n line-height: 18px;\n padding: 0 calc(var(--SpaceS, 8px) - 1px);\n font-size: var(--FontSizeDefault, 13px);\n }\n.tau-btn__button__12-27-4.tau-btn-small__button__12-27-4 .tau-btn__icon__button__12-27-4:first-child {\n margin-left: -5px;\n }\n.tau-btn__button__12-27-4.tau-btn-small__button__12-27-4 .tau-btn__icon__button__12-27-4:last-child {\n margin-right: -5px;\n }\n/* region Buttons Types */\n.tau-btn__button__12-27-4.tau-primary__button__12-27-4 {\n color: var(--FontColorWhite, #FFFFFF);\n background-color: var(--Primary, #5FA253);\n border-color: var(--Primary, #5FA253);\n }\n.tau-btn__button__12-27-4.tau-primary__button__12-27-4:hover:not(:disabled) {\n background-color: var(--Primary600, #5A9A4F);\n border-color: var(--Primary600, #5A9A4F);\n }\n.tau-btn__button__12-27-4.tau-primary__button__12-27-4.checked,\n .tau-btn__button__12-27-4.tau-primary__button__12-27-4.checked:hover,\n .tau-btn__button__12-27-4.tau-primary__button__12-27-4:active:not(:disabled) {\n background-color: var(--Primary700, #56924B);\n border-color: var(--Primary700, #56924B);\n }\n/* endregion */\n.tau-btn__button__12-27-4.tau-primary__button__12-27-4.tau-btn--no-background__button__12-27-4 {\n color: var(--Primary, #5FA253);\n background-color: transparent;\n border-color: transparent;\n }\n.tau-btn__button__12-27-4.tau-primary__button__12-27-4.tau-btn--no-background__button__12-27-4:hover:not(:disabled) {\n background-color: var(--Primary100, #E7F1E5);\n border-color: transparent;\n }\n.tau-btn__button__12-27-4.tau-primary__button__12-27-4.tau-btn--no-background__button__12-27-4.checked,\n .tau-btn__button__12-27-4.tau-primary__button__12-27-4.tau-btn--no-background__button__12-27-4.checked:hover,\n .tau-btn__button__12-27-4.tau-primary__button__12-27-4.tau-btn--no-background__button__12-27-4:active:not(:disabled) {\n background-color: var(--Primary200, #B7D5B2);\n border-color: transparent;\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4 {\n color: var(--FontColorWhite, #FFFFFF);\n background-color: var(--Danger, #AE304A);\n border-color: var(--Danger, #AE304A);\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4:hover:not(:disabled) {\n background-color: var(--Danger600, #A52E46);\n border-color: var(--Danger600, #A52E46);\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4:active:not(:disabled),\n .tau-btn__button__12-27-4.tau-danger__button__12-27-4.checked,\n .tau-btn__button__12-27-4.tau-danger__button__12-27-4.checked:hover {\n background-color: var(--Danger700, #9D2B43);\n border-color: var(--Danger700, #9D2B43);\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4:focus {\n -webkit-box-shadow: var(--ControlBoxShadowFocusError, 0 0 0 3px rgba(174, 48, 74, 0.4));\n box-shadow: var(--ControlBoxShadowFocusError, 0 0 0 3px rgba(174, 48, 74, 0.4));\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4.tau-btn--no-background__button__12-27-4 {\n color: var(--Danger, #AE304A);\n background-color: transparent;\n border-color: transparent;\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4.tau-btn--no-background__button__12-27-4:hover:not(:disabled) {\n background-color: var(--Danger100, #F3E0E4);\n border-color: transparent;\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4.tau-btn--no-background__button__12-27-4.checked,\n .tau-btn__button__12-27-4.tau-danger__button__12-27-4.tau-btn--no-background__button__12-27-4.checked:hover,\n .tau-btn__button__12-27-4.tau-danger__button__12-27-4.tau-btn--no-background__button__12-27-4:active:not(:disabled) {\n background-color: var(--Danger200, #DBA2AE);\n border-color: transparent;\n }\n.tau-btn__button__12-27-4.tau-attention__button__12-27-4 {\n color: var(--Danger, #AE304A);\n }\n.tau-btn--active-highlight__button__12-27-4 {\n color: var(--Warning, #E6961E);\n background-color: var(--Active200, #F9E9AE);\n border-color: var(--Active200, #F9E9AE);\n }\n.tau-btn--active-highlight__button__12-27-4:hover:not(:disabled) {\n background-color: var(--Active300, #F7E292);\n border-color: var(--Active300, #F7E292);\n }\n.tau-btn--active-highlight__button__12-27-4.checked,\n .tau-btn--active-highlight__button__12-27-4.checked:hover {\n background-color: var(--Active300, #F7E292);\n border-color: var(--Active300, #F7E292);\n color: var(--Warning, #E6961E);\n }\n.tau-btn--active-highlight__button__12-27-4:active:not(:disabled) {\n background-color: var(--Active300, #F7E292);\n border-color: var(--Third, #007EFF);\n -webkit-box-shadow: none;\n box-shadow: none;\n }\n.tau-btn--active-highlight__button__12-27-4:focus {\n -webkit-box-shadow: var(--ControlHighlightedBoxShadowFocus, 0 0 0 3px rgba(252, 245, 219, 0.2));\n box-shadow: var(--ControlHighlightedBoxShadowFocus, 0 0 0 3px rgba(252, 245, 219, 0.2));\n }\n/* .controls-inline-group TODO: check if we should preserve old class-name or can clean-up something */\n.buttons-inline-group__button__12-27-4 {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4 {\n min-width: 50px;\n }\n.buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-sorter__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .boardsettings-filter__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .context-filter__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-dropdown__button__12-27-4 {\n margin: 0 -1px 0 0;\n border-radius: 0;\n }\n.buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4:first-child, .buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4:first-child, .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4:first-child, .buttons-inline-group__button__12-27-4 > .tau-sorter__button__12-27-4:first-child, .buttons-inline-group__button__12-27-4 > .boardsettings-filter__button__12-27-4:first-child, .buttons-inline-group__button__12-27-4 > .context-filter__button__12-27-4:first-child, .buttons-inline-group__button__12-27-4 > .tau-dropdown__button__12-27-4:first-child {\n border-top-left-radius: var(--BorderRadiusDefault, 3px);\n border-bottom-left-radius: var(--BorderRadiusDefault, 3px);\n }\n.buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4:last-child, .buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4:last-child, .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4:last-child, .buttons-inline-group__button__12-27-4 > .tau-sorter__button__12-27-4:last-child, .buttons-inline-group__button__12-27-4 > .boardsettings-filter__button__12-27-4:last-child, .buttons-inline-group__button__12-27-4 > .context-filter__button__12-27-4:last-child, .buttons-inline-group__button__12-27-4 > .tau-dropdown__button__12-27-4:last-child {\n margin-right: 0;\n border-top-right-radius: var(--BorderRadiusDefault, 3px);\n border-bottom-right-radius: var(--BorderRadiusDefault, 3px);\n }\n.buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4:focus, .buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4:focus, .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4:focus, .buttons-inline-group__button__12-27-4 > .tau-sorter__button__12-27-4:focus, .buttons-inline-group__button__12-27-4 > .boardsettings-filter__button__12-27-4:focus, .buttons-inline-group__button__12-27-4 > .context-filter__button__12-27-4:focus, .buttons-inline-group__button__12-27-4 > .tau-dropdown__button__12-27-4:focus {\n z-index: 2;\n -webkit-box-shadow: none;\n box-shadow: none;\n }\n.buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4.tau-error__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4.tau-error__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4.tau-error__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-sorter__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-sorter__button__12-27-4.tau-error__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .boardsettings-filter__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .boardsettings-filter__button__12-27-4.tau-error__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .context-filter__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .context-filter__button__12-27-4.tau-error__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-dropdown__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-dropdown__button__12-27-4.tau-error__button__12-27-4 {\n z-index: 1;\n }\n.buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n }\n.buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4 {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n }\n.buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4.tau-error__button__12-27-4, .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4.tau-error__button__12-27-4 {\n z-index: 1;\n }\n";
var styles = {"tau-btn":"tau-btn__button__12-27-4","tau-btn--no-background":"tau-btn--no-background__button__12-27-4","tau-btn__icon":"tau-btn__icon__button__12-27-4","color-label":"color-label__button__12-27-4","tau-btn--ellipsis":"tau-btn--ellipsis__button__12-27-4","tau-btn--icon":"tau-btn--icon__button__12-27-4","tau-btn--wide":"tau-btn--wide__button__12-27-4","tau-btn--loader":"tau-btn--loader__button__12-27-4","spin":"spin__button__12-27-4","tau-primary":"tau-primary__button__12-27-4","tau-danger":"tau-danger__button__12-27-4","tau-success":"tau-success__button__12-27-4","tau-btn-large":"tau-btn-large__button__12-27-4","tau-btn-big":"tau-btn-big__button__12-27-4","tau-btn-medium":"tau-btn-medium__button__12-27-4","tau-btn-small":"tau-btn-small__button__12-27-4","tau-attention":"tau-attention__button__12-27-4","tau-btn--active-highlight":"tau-btn--active-highlight__button__12-27-4","buttons-inline-group":"buttons-inline-group__button__12-27-4","tau-in-text":"tau-in-text__button__12-27-4","tau-select":"tau-select__button__12-27-4","tau-sorter":"tau-sorter__button__12-27-4","boardsettings-filter":"boardsettings-filter__button__12-27-4","context-filter":"context-filter__button__12-27-4","tau-dropdown":"tau-dropdown__button__12-27-4","tau-checked":"tau-checked__button__12-27-4","tau-error":"tau-error__button__12-27-4"};
var css = "/*********************************************************************\n* © Copyright IBM Corp. 2024\n*********************************************************************/\n@-webkit-keyframes spin__button__12-28-0 {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n\n to {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@keyframes spin__button__12-28-0 {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n\n to {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n.tau-btn__button__12-28-0 {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: block;\n padding: 0 calc(var(--SpaceS, 8px) - 1px);\n margin: 0;\n height: var(--ControlHeightDefault, 24px);\n line-height: var(--ButtonLineHeightDefault, 22px);\n font-family: inherit;\n font-size: var(--FontSizeLabel, 11px);\n font-weight: normal;\n text-decoration: none;\n text-shadow: none;\n white-space: nowrap;\n color: var(--ButtonColorDefault, #000000);\n min-width: 5em;\n border: solid 1px var(--ButtonBorderColorDefault, #E2E3E4);\n border-radius: var(--ControlBorderRadiusDefault, 3px);\n background-color: var(--ButtonBackgroundDefault, #F5F6F6);\n text-align: center;\n cursor: pointer;\n\n /* end region */\n}\n.tau-btn--no-background__button__12-28-0 {\n background-color: transparent;\n border: solid 1px transparent;\n }\n.tau-btn--no-background__button__12-28-0:hover {\n background-color: var(--Second200, #ECECED);\n }\n.tau-btn--no-background__button__12-28-0:active {\n background-color: var(--Second300, #E2E3E4);\n }\n.tau-btn__button__12-28-0::-moz-focus-inner {\n border: none;\n padding: 0;\n }\n.tau-btn__button__12-28-0:hover:not(:disabled) {\n background: var(--ButtonBackgroundHover, #ECECED);\n border-color: var(--ButtonBackgroundHover, #ECECED);\n }\n.tau-btn__button__12-28-0:active:not(:disabled) {\n background: var(--ButtonBackgroundActive, #E2E3E4);\n border-color: var(--ButtonBackgroundActive, #E2E3E4);\n }\n.tau-btn__button__12-28-0:disabled {\n cursor: default;\n opacity: var(--ControlDisabledOpacity, 0.5);\n }\n.tau-btn__button__12-28-0:focus {\n -webkit-box-shadow: var(--ControlBoxShadowFocusDefault, 0 0 0 3px rgba(0, 126, 255, 0.2));\n box-shadow: var(--ControlBoxShadowFocusDefault, 0 0 0 3px rgba(0, 126, 255, 0.2));\n outline: none;\n position: relative; /*to lift up box-shadow in groups*/\n }\n.tau-btn__button__12-28-0.checked {\n color: var(--ButtonColorChecked, #000000);\n border-color: var(--ButtonBorderColorChecked, #E2E3E4);\n }\n.tau-btn__button__12-28-0.checked,\n .tau-btn__button__12-28-0.checked:hover {\n background: var(--ButtonBackgroundChecked, #E2E3E4);\n border-color: var(--ButtonBackgroundChecked, #E2E3E4);\n }\n.tau-btn__button__12-28-0.checked:disabled {\n opacity: var(--ControlDisabledOpacity, 0.5);\n }\n.tau-btn__icon__button__12-28-0 {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n vertical-align: top;\n height: 100%;\n position: relative;\n margin: 0 2px;\n }\n.tau-btn__icon__button__12-28-0:first-child,\n .color-label__button__12-28-0 + .tau-btn__icon__button__12-28-0 {\n margin-left: -4px;\n }\n.tau-btn__icon__button__12-28-0:last-child {\n margin-right: -4px;\n }\n.tau-btn--ellipsis__button__12-28-0 {\n max-width: 100%;\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n }\n.tau-btn--icon__button__12-28-0 {\n min-width: 0;\n }\n.tau-btn--wide__button__12-28-0 {\n width: 100%;\n }\n.tau-btn--loader__button__12-28-0 {\n position: relative;\n cursor: default;\n }\n.tau-btn--loader__button__12-28-0:disabled {\n border-color: var(--ButtonBorderColorDefault, #E2E3E4);\n color: var(--ButtonColorDefault, #000000);\n }\n.tau-btn--loader__button__12-28-0:disabled:before,\n .tau-btn--loader__button__12-28-0:disabled:after {\n opacity: 1;\n }\n.tau-btn--loader__button__12-28-0:before,\n .tau-btn--loader__button__12-28-0:after {\n display: block;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n position: absolute;\n content: '';\n }\n.tau-btn--loader__button__12-28-0:before {\n z-index: 2;\n background: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='var(--Second400, %2366686D)'%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill-rule='evenodd'%3E %3Cpath d='M7.5,0 C7.77614237,0 8,0.229644775 8,0.501464665 L8,2.99853534 C8,3.27548662 7.76806641,3.5 7.5,3.5 L7.5,3.5 C7.22385763,3.5 7,3.27035522 7,2.99853534 L7,0.501464665 C7,0.224513378 7.23193359,0 7.5,0 L7.5,0 L7.5,0 Z' id='Path' opacity='0.200000003'/%3E %3Cpath d='M0,8.5 C0,8.22385763 0.229644775,8 0.501464665,8 L2.99853534,8 C3.27548662,8 3.5,8.23193359 3.5,8.5 L3.5,8.5 C3.5,8.77614237 3.27035522,9 2.99853534,9 L0.501464665,9 C0.224513378,9 0,8.76806641 0,8.5 L0,8.5 L0,8.5 Z' id='Path'/%3E %3Cpath d='M8.5,16 C8.22385763,16 8,15.7703552 8,15.4985353 L8,13.0014647 C8,12.7245134 8.23193359,12.5 8.5,12.5 L8.5,12.5 C8.77614237,12.5 9,12.7296448 9,13.0014647 L9,15.4985353 C9,15.7754866 8.76806641,16 8.5,16 L8.5,16 L8.5,16 Z' id='Path' opacity='0.800000012'/%3E %3Cpath d='M16,7.5 C16,7.77614237 15.7703552,8 15.4985353,8 L13.0014647,8 C12.7245134,8 12.5,7.76806641 12.5,7.5 L12.5,7.5 C12.5,7.22385763 12.7296448,7 13.0014647,7 L15.4985353,7 C15.7754866,7 16,7.23193359 16,7.5 L16,7.5 L16,7.5 Z' id='Path' opacity='0.5'/%3E %3Cpath d='M3.5669873,1.32179677 C3.80613361,1.18372558 4.11482239,1.27067498 4.25073233,1.50607791 L5.49926767,3.66860454 C5.63774331,3.90845139 5.54913962,4.21885248 5.3169873,4.35288568 L5.3169873,4.35288568 C5.07784099,4.49095687 4.76915221,4.40400747 4.63324226,4.16860454 L3.38470693,2.00607791 C3.24623129,1.76623106 3.33483498,1.45582997 3.5669873,1.32179677 L3.5669873,1.32179677 L3.5669873,1.32179677 L3.5669873,1.32179677 Z' id='Path' opacity='0.100000001'/%3E %3Cpath d='M1.32179677,12.4330127 C1.18372558,12.1938664 1.27067498,11.8851776 1.50607791,11.7492677 L3.66860454,10.5007323 C3.90845139,10.3622567 4.21885248,10.4508604 4.35288568,10.6830127 L4.35288568,10.6830127 C4.49095687,10.922159 4.40400747,11.2308478 4.16860454,11.3667577 L2.00607791,12.6152931 C1.76623106,12.7537687 1.45582997,12.665165 1.32179677,12.4330127 L1.32179677,12.4330127 L1.32179677,12.4330127 L1.32179677,12.4330127 Z' id='Path'/%3E %3Cpath d='M12.4330127,14.6782032 C12.1938664,14.8162744 11.8851776,14.729325 11.7492677,14.4939221 L10.5007323,12.3313955 C10.3622567,12.0915486 10.4508604,11.7811475 10.6830127,11.6471143 L10.6830127,11.6471143 C10.922159,11.5090431 11.2308478,11.5959925 11.3667577,11.8313955 L12.6152931,13.9939221 C12.7537687,14.2337689 12.665165,14.54417 12.4330127,14.6782032 L12.4330127,14.6782032 L12.4330127,14.6782032 L12.4330127,14.6782032 Z' id='Path' opacity='0.699999988'/%3E %3Cpath d='M14.6782032,3.5669873 C14.8162744,3.80613361 14.729325,4.11482239 14.4939221,4.25073233 L12.3313955,5.49926767 C12.0915486,5.63774331 11.7811475,5.54913962 11.6471143,5.3169873 L11.6471143,5.3169873 C11.5090431,5.07784099 11.5959925,4.76915221 11.8313955,4.63324226 L13.9939221,3.38470693 C14.2337689,3.24623129 14.54417,3.33483498 14.6782032,3.5669873 L14.6782032,3.5669873 L14.6782032,3.5669873 L14.6782032,3.5669873 Z' id='Path' opacity='0.400000006'/%3E %3Cpath d='M0.82179677,4.4330127 C0.959867957,4.19386639 1.27067498,4.11482239 1.50607791,4.25073233 L3.66860454,5.49926767 C3.90845139,5.63774331 3.98691889,5.95086038 3.85288568,6.1830127 L3.85288568,6.1830127 C3.7148145,6.42215901 3.40400747,6.50120302 3.16860454,6.36529307 L1.00607791,5.11675774 C0.766231058,4.97828209 0.687763567,4.66516502 0.82179677,4.4330127 L0.82179677,4.4330127 L0.82179677,4.4330127 L0.82179677,4.4330127 Z' id='Path' opacity='0.100000001'/%3E %3Cpath d='M4.4330127,15.1782032 C4.19386639,15.040132 4.11482239,14.729325 4.25073233,14.4939221 L5.49926767,12.3313955 C5.63774331,12.0915486 5.95086038,12.0130811 6.1830127,12.1471143 L6.1830127,12.1471143 C6.42215901,12.2851855 6.50120302,12.5959925 6.36529307,12.8313955 L5.11675774,14.9939221 C4.97828209,15.2337689 4.66516502,15.3122364 4.4330127,15.1782032 L4.4330127,15.1782032 L4.4330127,15.1782032 L4.4330127,15.1782032 Z' id='Path' opacity='0.900000036'/%3E %3Cpath d='M15.1782032,11.5669873 C15.040132,11.8061336 14.729325,11.8851776 14.4939221,11.7492677 L12.3313955,10.5007323 C12.0915486,10.3622567 12.0130811,10.0491396 12.1471143,9.8169873 L12.1471143,9.8169873 C12.2851855,9.57784099 12.5959925,9.49879698 12.8313955,9.63470693 L14.9939221,10.8832423 C15.2337689,11.0217179 15.3122364,11.334835 15.1782032,11.5669873 L15.1782032,11.5669873 L15.1782032,11.5669873 L15.1782032,11.5669873 Z' id='Path' opacity='0.600000024'/%3E %3Cpath d='M11.5669873,0.82179677 C11.8061336,0.959867957 11.8851776,1.27067498 11.7492677,1.50607791 L10.5007323,3.66860454 C10.3622567,3.90845139 10.0491396,3.98691889 9.8169873,3.85288568 L9.8169873,3.85288568 C9.57784099,3.7148145 9.49879698,3.40400747 9.63470693,3.16860454 L10.8832423,1.00607791 C11.0217179,0.766231058 11.334835,0.687763567 11.5669873,0.82179677 L11.5669873,0.82179677 L11.5669873,0.82179677 L11.5669873,0.82179677 Z' id='Path' opacity='0.300000012'/%3E %3C/g%3E %3C/svg%3E\") !important;\n width: 16px;\n height: 16px;\n top: 50%;\n left: 50%;\n margin: -8px 0 0 -8px;\n -webkit-animation: spin__button__12-28-0 0.8s steps(12, end) infinite;\n animation: spin__button__12-28-0 0.8s steps(12, end) infinite;\n }\n.tau-btn--loader__button__12-28-0:after {\n min-width: 100%;\n min-height: 100%;\n background: rgba(255, 255, 255, 0.85);\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n border-radius: var(--ControlBorderRadiusDefault, 3px);\n -webkit-box-shadow: inset 0 0 0 1px var(--ButtonBorderColorDefault, #E2E3E4);\n box-shadow: inset 0 0 0 1px var(--ButtonBorderColorDefault, #E2E3E4);\n }\n.tau-btn--loader__button__12-28-0.tau-primary__button__12-28-0:after,\n .tau-btn--loader__button__12-28-0.tau-danger__button__12-28-0:after,\n .tau-btn--loader__button__12-28-0.tau-success__button__12-28-0:after {\n background: rgba(255, 255, 255, 0.7);\n -webkit-box-shadow: none;\n box-shadow: none;\n }\n/* region Sizes */\n.tau-btn__button__12-28-0.tau-btn-large__button__12-28-0 {\n height: var(--ControlHeightXLarge, 40px);\n line-height: 38px;\n padding: 0 20px;\n font-size: 22px;\n }\n.tau-btn__button__12-28-0.tau-btn-large__button__12-28-0 .tau-btn__icon__button__12-28-0 {\n margin: 0 5px;\n }\n.tau-btn__button__12-28-0.tau-btn-large__button__12-28-0 .tau-btn__icon__button__12-28-0:first-child {\n margin-left: -8px;\n }\n.tau-btn__button__12-28-0.tau-btn-large__button__12-28-0 .tau-btn__icon__button__12-28-0:last-child {\n margin-right: -8px;\n }\n.tau-btn__button__12-28-0.tau-btn-big__button__12-28-0 {\n height: var(--ControlHeightLarge, 28px);\n line-height: 26px;\n padding: 0 10px;\n font-size: var(--FontSizeDefault, 13px);\n }\n.tau-btn__button__12-28-0.tau-btn-medium__button__12-28-0 {\n font-size: var(--FontSizeDefault, 13px);\n padding-bottom: 1px;\n }\n.tau-btn__button__12-28-0.tau-btn-small__button__12-28-0 {\n height: 20px;\n line-height: 18px;\n padding: 0 calc(var(--SpaceS, 8px) - 1px);\n font-size: var(--FontSizeDefault, 13px);\n }\n.tau-btn__button__12-28-0.tau-btn-small__button__12-28-0 .tau-btn__icon__button__12-28-0:first-child {\n margin-left: -5px;\n }\n.tau-btn__button__12-28-0.tau-btn-small__button__12-28-0 .tau-btn__icon__button__12-28-0:last-child {\n margin-right: -5px;\n }\n/* region Buttons Types */\n.tau-btn__button__12-28-0.tau-primary__button__12-28-0 {\n color: var(--FontColorWhite, #FFFFFF);\n background-color: var(--Primary, #5FA253);\n border-color: var(--Primary, #5FA253);\n }\n.tau-btn__button__12-28-0.tau-primary__button__12-28-0:hover:not(:disabled) {\n background-color: var(--Primary600, #5A9A4F);\n border-color: var(--Primary600, #5A9A4F);\n }\n.tau-btn__button__12-28-0.tau-primary__button__12-28-0.checked,\n .tau-btn__button__12-28-0.tau-primary__button__12-28-0.checked:hover,\n .tau-btn__button__12-28-0.tau-primary__button__12-28-0:active:not(:disabled) {\n background-color: var(--Primary700, #56924B);\n border-color: var(--Primary700, #56924B);\n }\n/* endregion */\n.tau-btn__button__12-28-0.tau-primary__button__12-28-0.tau-btn--no-background__button__12-28-0 {\n color: var(--Primary, #5FA253);\n background-color: transparent;\n border-color: transparent;\n }\n.tau-btn__button__12-28-0.tau-primary__button__12-28-0.tau-btn--no-background__button__12-28-0:hover:not(:disabled) {\n background-color: var(--Primary100, #E7F1E5);\n border-color: transparent;\n }\n.tau-btn__button__12-28-0.tau-primary__button__12-28-0.tau-btn--no-background__button__12-28-0.checked,\n .tau-btn__button__12-28-0.tau-primary__button__12-28-0.tau-btn--no-background__button__12-28-0.checked:hover,\n .tau-btn__button__12-28-0.tau-primary__button__12-28-0.tau-btn--no-background__button__12-28-0:active:not(:disabled) {\n background-color: var(--Primary200, #B7D5B2);\n border-color: transparent;\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0 {\n color: var(--FontColorWhite, #FFFFFF);\n background-color: var(--Danger, #AE304A);\n border-color: var(--Danger, #AE304A);\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0:hover:not(:disabled) {\n background-color: var(--Danger600, #A52E46);\n border-color: var(--Danger600, #A52E46);\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0:active:not(:disabled),\n .tau-btn__button__12-28-0.tau-danger__button__12-28-0.checked,\n .tau-btn__button__12-28-0.tau-danger__button__12-28-0.checked:hover {\n background-color: var(--Danger700, #9D2B43);\n border-color: var(--Danger700, #9D2B43);\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0:focus {\n -webkit-box-shadow: var(--ControlBoxShadowFocusError, 0 0 0 3px rgba(174, 48, 74, 0.4));\n box-shadow: var(--ControlBoxShadowFocusError, 0 0 0 3px rgba(174, 48, 74, 0.4));\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0.tau-btn--no-background__button__12-28-0 {\n color: var(--Danger, #AE304A);\n background-color: transparent;\n border-color: transparent;\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0.tau-btn--no-background__button__12-28-0:hover:not(:disabled) {\n background-color: var(--Danger100, #F3E0E4);\n border-color: transparent;\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0.tau-btn--no-background__button__12-28-0.checked,\n .tau-btn__button__12-28-0.tau-danger__button__12-28-0.tau-btn--no-background__button__12-28-0.checked:hover,\n .tau-btn__button__12-28-0.tau-danger__button__12-28-0.tau-btn--no-background__button__12-28-0:active:not(:disabled) {\n background-color: var(--Danger200, #DBA2AE);\n border-color: transparent;\n }\n.tau-btn__button__12-28-0.tau-attention__button__12-28-0 {\n color: var(--Danger, #AE304A);\n }\n.tau-btn--active-highlight__button__12-28-0 {\n color: var(--Warning, #E6961E);\n background-color: var(--Active200, #F9E9AE);\n border-color: var(--Active200, #F9E9AE);\n }\n.tau-btn--active-highlight__button__12-28-0:hover:not(:disabled) {\n background-color: var(--Active300, #F7E292);\n border-color: var(--Active300, #F7E292);\n }\n.tau-btn--active-highlight__button__12-28-0.checked,\n .tau-btn--active-highlight__button__12-28-0.checked:hover {\n background-color: var(--Active300, #F7E292);\n border-color: var(--Active300, #F7E292);\n color: var(--Warning, #E6961E);\n }\n.tau-btn--active-highlight__button__12-28-0:active:not(:disabled) {\n background-color: var(--Active300, #F7E292);\n border-color: var(--Third, #007EFF);\n -webkit-box-shadow: none;\n box-shadow: none;\n }\n.tau-btn--active-highlight__button__12-28-0:focus {\n -webkit-box-shadow: var(--ControlHighlightedBoxShadowFocus, 0 0 0 3px rgba(252, 245, 219, 0.2));\n box-shadow: var(--ControlHighlightedBoxShadowFocus, 0 0 0 3px rgba(252, 245, 219, 0.2));\n }\n/* .controls-inline-group TODO: check if we should preserve old class-name or can clean-up something */\n.buttons-inline-group__button__12-28-0 {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0 {\n min-width: 50px;\n }\n.buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-sorter__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .boardsettings-filter__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .context-filter__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-dropdown__button__12-28-0 {\n margin: 0 -1px 0 0;\n border-radius: 0;\n }\n.buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0:first-child, .buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0:first-child, .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0:first-child, .buttons-inline-group__button__12-28-0 > .tau-sorter__button__12-28-0:first-child, .buttons-inline-group__button__12-28-0 > .boardsettings-filter__button__12-28-0:first-child, .buttons-inline-group__button__12-28-0 > .context-filter__button__12-28-0:first-child, .buttons-inline-group__button__12-28-0 > .tau-dropdown__button__12-28-0:first-child {\n border-top-left-radius: var(--BorderRadiusDefault, 3px);\n border-bottom-left-radius: var(--BorderRadiusDefault, 3px);\n }\n.buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0:last-child, .buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0:last-child, .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0:last-child, .buttons-inline-group__button__12-28-0 > .tau-sorter__button__12-28-0:last-child, .buttons-inline-group__button__12-28-0 > .boardsettings-filter__button__12-28-0:last-child, .buttons-inline-group__button__12-28-0 > .context-filter__button__12-28-0:last-child, .buttons-inline-group__button__12-28-0 > .tau-dropdown__button__12-28-0:last-child {\n margin-right: 0;\n border-top-right-radius: var(--BorderRadiusDefault, 3px);\n border-bottom-right-radius: var(--BorderRadiusDefault, 3px);\n }\n.buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0:focus, .buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0:focus, .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0:focus, .buttons-inline-group__button__12-28-0 > .tau-sorter__button__12-28-0:focus, .buttons-inline-group__button__12-28-0 > .boardsettings-filter__button__12-28-0:focus, .buttons-inline-group__button__12-28-0 > .context-filter__button__12-28-0:focus, .buttons-inline-group__button__12-28-0 > .tau-dropdown__button__12-28-0:focus {\n z-index: 2;\n -webkit-box-shadow: none;\n box-shadow: none;\n }\n.buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0.tau-error__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0.tau-error__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0.tau-error__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-sorter__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-sorter__button__12-28-0.tau-error__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .boardsettings-filter__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .boardsettings-filter__button__12-28-0.tau-error__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .context-filter__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .context-filter__button__12-28-0.tau-error__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-dropdown__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-dropdown__button__12-28-0.tau-error__button__12-28-0 {\n z-index: 1;\n }\n.buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n }\n.buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0 {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n }\n.buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0.tau-error__button__12-28-0, .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0.tau-error__button__12-28-0 {\n z-index: 1;\n }\n";
var styles = {"tau-btn":"tau-btn__button__12-28-0","tau-btn--no-background":"tau-btn--no-background__button__12-28-0","tau-btn__icon":"tau-btn__icon__button__12-28-0","color-label":"color-label__button__12-28-0","tau-btn--ellipsis":"tau-btn--ellipsis__button__12-28-0","tau-btn--icon":"tau-btn--icon__button__12-28-0","tau-btn--wide":"tau-btn--wide__button__12-28-0","tau-btn--loader":"tau-btn--loader__button__12-28-0","spin":"spin__button__12-28-0","tau-primary":"tau-primary__button__12-28-0","tau-danger":"tau-danger__button__12-28-0","tau-success":"tau-success__button__12-28-0","tau-btn-large":"tau-btn-large__button__12-28-0","tau-btn-big":"tau-btn-big__button__12-28-0","tau-btn-medium":"tau-btn-medium__button__12-28-0","tau-btn-small":"tau-btn-small__button__12-28-0","tau-attention":"tau-attention__button__12-28-0","tau-btn--active-highlight":"tau-btn--active-highlight__button__12-28-0","buttons-inline-group":"buttons-inline-group__button__12-28-0","tau-in-text":"tau-in-text__button__12-28-0","tau-select":"tau-select__button__12-28-0","tau-sorter":"tau-sorter__button__12-28-0","boardsettings-filter":"boardsettings-filter__button__12-28-0","context-filter":"context-filter__button__12-28-0","tau-dropdown":"tau-dropdown__button__12-28-0","tau-checked":"tau-checked__button__12-28-0","tau-error":"tau-error__button__12-28-0"};
styleInject(css);

@@ -220,3 +220,4 @@

icon = _ref.icon,
otherProps = _objectWithoutProperties(_ref, ["children", "className", "checked", "disabled", "isLoading", "isHighlighted", "isWide", "noBackground", "size", "kind", "icon"]);
iconTail = _ref.iconTail,
otherProps = _objectWithoutProperties(_ref, ["children", "className", "checked", "disabled", "isLoading", "isHighlighted", "isWide", "noBackground", "size", "kind", "icon", "iconTail"]);
var childrenArray = React.Children.toArray(children);

@@ -253,3 +254,3 @@ var noChildren = childrenArray.length === 0 || childrenArray.length === 1 && !Boolean(childrenArray[0]);

}
}), icon && React.createElement("div", {
}), children && iconTail && React.createElement("span", null, children), icon && React.createElement("div", {
className: styles['tau-btn__icon']

@@ -259,3 +260,3 @@ }, recolorIcon(icon,

// eslint-disable-next-line security/detect-object-injection
kinds.hasOwnProperty(kind) ? kinds[kind] : undefined, shouldHaveNoBackground)), children && React.createElement("span", null, children));
kinds.hasOwnProperty(kind) ? kinds[kind] : undefined, shouldHaveNoBackground)), children && !iconTail && React.createElement("span", null, children));
});

@@ -262,0 +263,0 @@ 

+6
-5
dist/button.js

@@ -109,4 +109,4 @@ 'use strict';

var css = "/*********************************************************************\n* © Copyright IBM Corp. 2024\n*********************************************************************/\n@-webkit-keyframes spin__button__12-27-4 {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n\n to {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@keyframes spin__button__12-27-4 {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n\n to {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n.tau-btn__button__12-27-4 {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: block;\n padding: 0 calc(var(--SpaceS, 8px) - 1px);\n margin: 0;\n height: var(--ControlHeightDefault, 24px);\n line-height: var(--ButtonLineHeightDefault, 22px);\n font-family: inherit;\n font-size: var(--FontSizeLabel, 11px);\n font-weight: normal;\n text-decoration: none;\n text-shadow: none;\n white-space: nowrap;\n color: var(--ButtonColorDefault, #000000);\n min-width: 5em;\n border: solid 1px var(--ButtonBorderColorDefault, #E2E3E4);\n border-radius: var(--ControlBorderRadiusDefault, 3px);\n background-color: var(--ButtonBackgroundDefault, #F5F6F6);\n text-align: center;\n cursor: pointer;\n\n /* end region */\n}\n.tau-btn--no-background__button__12-27-4 {\n background-color: transparent;\n border: solid 1px transparent;\n }\n.tau-btn--no-background__button__12-27-4:hover {\n background-color: var(--Second200, #ECECED);\n }\n.tau-btn--no-background__button__12-27-4:active {\n background-color: var(--Second300, #E2E3E4);\n }\n.tau-btn__button__12-27-4::-moz-focus-inner {\n border: none;\n padding: 0;\n }\n.tau-btn__button__12-27-4:hover:not(:disabled) {\n background: var(--ButtonBackgroundHover, #ECECED);\n border-color: var(--ButtonBackgroundHover, #ECECED);\n }\n.tau-btn__button__12-27-4:active:not(:disabled) {\n background: var(--ButtonBackgroundActive, #E2E3E4);\n border-color: var(--ButtonBackgroundActive, #E2E3E4);\n }\n.tau-btn__button__12-27-4:disabled {\n cursor: default;\n opacity: var(--ControlDisabledOpacity, 0.5);\n }\n.tau-btn__button__12-27-4:focus {\n -webkit-box-shadow: var(--ControlBoxShadowFocusDefault, 0 0 0 3px rgba(0, 126, 255, 0.2));\n box-shadow: var(--ControlBoxShadowFocusDefault, 0 0 0 3px rgba(0, 126, 255, 0.2));\n outline: none;\n position: relative; /*to lift up box-shadow in groups*/\n }\n.tau-btn__button__12-27-4.checked {\n color: var(--ButtonColorChecked, #000000);\n border-color: var(--ButtonBorderColorChecked, #E2E3E4);\n }\n.tau-btn__button__12-27-4.checked,\n .tau-btn__button__12-27-4.checked:hover {\n background: var(--ButtonBackgroundChecked, #E2E3E4);\n border-color: var(--ButtonBackgroundChecked, #E2E3E4);\n }\n.tau-btn__button__12-27-4.checked:disabled {\n opacity: var(--ControlDisabledOpacity, 0.5);\n }\n.tau-btn__icon__button__12-27-4 {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n vertical-align: top;\n height: 100%;\n position: relative;\n margin: 0 2px;\n }\n.tau-btn__icon__button__12-27-4:first-child,\n .color-label__button__12-27-4 + .tau-btn__icon__button__12-27-4 {\n margin-left: -4px;\n }\n.tau-btn__icon__button__12-27-4:last-child {\n margin-right: -4px;\n }\n.tau-btn--ellipsis__button__12-27-4 {\n max-width: 100%;\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n }\n.tau-btn--icon__button__12-27-4 {\n min-width: 0;\n }\n.tau-btn--wide__button__12-27-4 {\n width: 100%;\n }\n.tau-btn--loader__button__12-27-4 {\n position: relative;\n cursor: default;\n }\n.tau-btn--loader__button__12-27-4:disabled {\n border-color: var(--ButtonBorderColorDefault, #E2E3E4);\n color: var(--ButtonColorDefault, #000000);\n }\n.tau-btn--loader__button__12-27-4:disabled:before,\n .tau-btn--loader__button__12-27-4:disabled:after {\n opacity: 1;\n }\n.tau-btn--loader__button__12-27-4:before,\n .tau-btn--loader__button__12-27-4:after {\n display: block;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n position: absolute;\n content: '';\n }\n.tau-btn--loader__button__12-27-4:before {\n z-index: 2;\n background: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='var(--Second400, %2366686D)'%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill-rule='evenodd'%3E %3Cpath d='M7.5,0 C7.77614237,0 8,0.229644775 8,0.501464665 L8,2.99853534 C8,3.27548662 7.76806641,3.5 7.5,3.5 L7.5,3.5 C7.22385763,3.5 7,3.27035522 7,2.99853534 L7,0.501464665 C7,0.224513378 7.23193359,0 7.5,0 L7.5,0 L7.5,0 Z' id='Path' opacity='0.200000003'/%3E %3Cpath d='M0,8.5 C0,8.22385763 0.229644775,8 0.501464665,8 L2.99853534,8 C3.27548662,8 3.5,8.23193359 3.5,8.5 L3.5,8.5 C3.5,8.77614237 3.27035522,9 2.99853534,9 L0.501464665,9 C0.224513378,9 0,8.76806641 0,8.5 L0,8.5 L0,8.5 Z' id='Path'/%3E %3Cpath d='M8.5,16 C8.22385763,16 8,15.7703552 8,15.4985353 L8,13.0014647 C8,12.7245134 8.23193359,12.5 8.5,12.5 L8.5,12.5 C8.77614237,12.5 9,12.7296448 9,13.0014647 L9,15.4985353 C9,15.7754866 8.76806641,16 8.5,16 L8.5,16 L8.5,16 Z' id='Path' opacity='0.800000012'/%3E %3Cpath d='M16,7.5 C16,7.77614237 15.7703552,8 15.4985353,8 L13.0014647,8 C12.7245134,8 12.5,7.76806641 12.5,7.5 L12.5,7.5 C12.5,7.22385763 12.7296448,7 13.0014647,7 L15.4985353,7 C15.7754866,7 16,7.23193359 16,7.5 L16,7.5 L16,7.5 Z' id='Path' opacity='0.5'/%3E %3Cpath d='M3.5669873,1.32179677 C3.80613361,1.18372558 4.11482239,1.27067498 4.25073233,1.50607791 L5.49926767,3.66860454 C5.63774331,3.90845139 5.54913962,4.21885248 5.3169873,4.35288568 L5.3169873,4.35288568 C5.07784099,4.49095687 4.76915221,4.40400747 4.63324226,4.16860454 L3.38470693,2.00607791 C3.24623129,1.76623106 3.33483498,1.45582997 3.5669873,1.32179677 L3.5669873,1.32179677 L3.5669873,1.32179677 L3.5669873,1.32179677 Z' id='Path' opacity='0.100000001'/%3E %3Cpath d='M1.32179677,12.4330127 C1.18372558,12.1938664 1.27067498,11.8851776 1.50607791,11.7492677 L3.66860454,10.5007323 C3.90845139,10.3622567 4.21885248,10.4508604 4.35288568,10.6830127 L4.35288568,10.6830127 C4.49095687,10.922159 4.40400747,11.2308478 4.16860454,11.3667577 L2.00607791,12.6152931 C1.76623106,12.7537687 1.45582997,12.665165 1.32179677,12.4330127 L1.32179677,12.4330127 L1.32179677,12.4330127 L1.32179677,12.4330127 Z' id='Path'/%3E %3Cpath d='M12.4330127,14.6782032 C12.1938664,14.8162744 11.8851776,14.729325 11.7492677,14.4939221 L10.5007323,12.3313955 C10.3622567,12.0915486 10.4508604,11.7811475 10.6830127,11.6471143 L10.6830127,11.6471143 C10.922159,11.5090431 11.2308478,11.5959925 11.3667577,11.8313955 L12.6152931,13.9939221 C12.7537687,14.2337689 12.665165,14.54417 12.4330127,14.6782032 L12.4330127,14.6782032 L12.4330127,14.6782032 L12.4330127,14.6782032 Z' id='Path' opacity='0.699999988'/%3E %3Cpath d='M14.6782032,3.5669873 C14.8162744,3.80613361 14.729325,4.11482239 14.4939221,4.25073233 L12.3313955,5.49926767 C12.0915486,5.63774331 11.7811475,5.54913962 11.6471143,5.3169873 L11.6471143,5.3169873 C11.5090431,5.07784099 11.5959925,4.76915221 11.8313955,4.63324226 L13.9939221,3.38470693 C14.2337689,3.24623129 14.54417,3.33483498 14.6782032,3.5669873 L14.6782032,3.5669873 L14.6782032,3.5669873 L14.6782032,3.5669873 Z' id='Path' opacity='0.400000006'/%3E %3Cpath d='M0.82179677,4.4330127 C0.959867957,4.19386639 1.27067498,4.11482239 1.50607791,4.25073233 L3.66860454,5.49926767 C3.90845139,5.63774331 3.98691889,5.95086038 3.85288568,6.1830127 L3.85288568,6.1830127 C3.7148145,6.42215901 3.40400747,6.50120302 3.16860454,6.36529307 L1.00607791,5.11675774 C0.766231058,4.97828209 0.687763567,4.66516502 0.82179677,4.4330127 L0.82179677,4.4330127 L0.82179677,4.4330127 L0.82179677,4.4330127 Z' id='Path' opacity='0.100000001'/%3E %3Cpath d='M4.4330127,15.1782032 C4.19386639,15.040132 4.11482239,14.729325 4.25073233,14.4939221 L5.49926767,12.3313955 C5.63774331,12.0915486 5.95086038,12.0130811 6.1830127,12.1471143 L6.1830127,12.1471143 C6.42215901,12.2851855 6.50120302,12.5959925 6.36529307,12.8313955 L5.11675774,14.9939221 C4.97828209,15.2337689 4.66516502,15.3122364 4.4330127,15.1782032 L4.4330127,15.1782032 L4.4330127,15.1782032 L4.4330127,15.1782032 Z' id='Path' opacity='0.900000036'/%3E %3Cpath d='M15.1782032,11.5669873 C15.040132,11.8061336 14.729325,11.8851776 14.4939221,11.7492677 L12.3313955,10.5007323 C12.0915486,10.3622567 12.0130811,10.0491396 12.1471143,9.8169873 L12.1471143,9.8169873 C12.2851855,9.57784099 12.5959925,9.49879698 12.8313955,9.63470693 L14.9939221,10.8832423 C15.2337689,11.0217179 15.3122364,11.334835 15.1782032,11.5669873 L15.1782032,11.5669873 L15.1782032,11.5669873 L15.1782032,11.5669873 Z' id='Path' opacity='0.600000024'/%3E %3Cpath d='M11.5669873,0.82179677 C11.8061336,0.959867957 11.8851776,1.27067498 11.7492677,1.50607791 L10.5007323,3.66860454 C10.3622567,3.90845139 10.0491396,3.98691889 9.8169873,3.85288568 L9.8169873,3.85288568 C9.57784099,3.7148145 9.49879698,3.40400747 9.63470693,3.16860454 L10.8832423,1.00607791 C11.0217179,0.766231058 11.334835,0.687763567 11.5669873,0.82179677 L11.5669873,0.82179677 L11.5669873,0.82179677 L11.5669873,0.82179677 Z' id='Path' opacity='0.300000012'/%3E %3C/g%3E %3C/svg%3E\") !important;\n width: 16px;\n height: 16px;\n top: 50%;\n left: 50%;\n margin: -8px 0 0 -8px;\n -webkit-animation: spin__button__12-27-4 0.8s steps(12, end) infinite;\n animation: spin__button__12-27-4 0.8s steps(12, end) infinite;\n }\n.tau-btn--loader__button__12-27-4:after {\n min-width: 100%;\n min-height: 100%;\n background: rgba(255, 255, 255, 0.85);\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n border-radius: var(--ControlBorderRadiusDefault, 3px);\n -webkit-box-shadow: inset 0 0 0 1px var(--ButtonBorderColorDefault, #E2E3E4);\n box-shadow: inset 0 0 0 1px var(--ButtonBorderColorDefault, #E2E3E4);\n }\n.tau-btn--loader__button__12-27-4.tau-primary__button__12-27-4:after,\n .tau-btn--loader__button__12-27-4.tau-danger__button__12-27-4:after,\n .tau-btn--loader__button__12-27-4.tau-success__button__12-27-4:after {\n background: rgba(255, 255, 255, 0.7);\n -webkit-box-shadow: none;\n box-shadow: none;\n }\n/* region Sizes */\n.tau-btn__button__12-27-4.tau-btn-large__button__12-27-4 {\n height: var(--ControlHeightXLarge, 40px);\n line-height: 38px;\n padding: 0 20px;\n font-size: 22px;\n }\n.tau-btn__button__12-27-4.tau-btn-large__button__12-27-4 .tau-btn__icon__button__12-27-4 {\n margin: 0 5px;\n }\n.tau-btn__button__12-27-4.tau-btn-large__button__12-27-4 .tau-btn__icon__button__12-27-4:first-child {\n margin-left: -8px;\n }\n.tau-btn__button__12-27-4.tau-btn-large__button__12-27-4 .tau-btn__icon__button__12-27-4:last-child {\n margin-right: -8px;\n }\n.tau-btn__button__12-27-4.tau-btn-big__button__12-27-4 {\n height: var(--ControlHeightLarge, 28px);\n line-height: 26px;\n padding: 0 10px;\n font-size: var(--FontSizeDefault, 13px);\n }\n.tau-btn__button__12-27-4.tau-btn-medium__button__12-27-4 {\n font-size: var(--FontSizeDefault, 13px);\n padding-bottom: 1px;\n }\n.tau-btn__button__12-27-4.tau-btn-small__button__12-27-4 {\n height: 20px;\n line-height: 18px;\n padding: 0 calc(var(--SpaceS, 8px) - 1px);\n font-size: var(--FontSizeDefault, 13px);\n }\n.tau-btn__button__12-27-4.tau-btn-small__button__12-27-4 .tau-btn__icon__button__12-27-4:first-child {\n margin-left: -5px;\n }\n.tau-btn__button__12-27-4.tau-btn-small__button__12-27-4 .tau-btn__icon__button__12-27-4:last-child {\n margin-right: -5px;\n }\n/* region Buttons Types */\n.tau-btn__button__12-27-4.tau-primary__button__12-27-4 {\n color: var(--FontColorWhite, #FFFFFF);\n background-color: var(--Primary, #5FA253);\n border-color: var(--Primary, #5FA253);\n }\n.tau-btn__button__12-27-4.tau-primary__button__12-27-4:hover:not(:disabled) {\n background-color: var(--Primary600, #5A9A4F);\n border-color: var(--Primary600, #5A9A4F);\n }\n.tau-btn__button__12-27-4.tau-primary__button__12-27-4.checked,\n .tau-btn__button__12-27-4.tau-primary__button__12-27-4.checked:hover,\n .tau-btn__button__12-27-4.tau-primary__button__12-27-4:active:not(:disabled) {\n background-color: var(--Primary700, #56924B);\n border-color: var(--Primary700, #56924B);\n }\n/* endregion */\n.tau-btn__button__12-27-4.tau-primary__button__12-27-4.tau-btn--no-background__button__12-27-4 {\n color: var(--Primary, #5FA253);\n background-color: transparent;\n border-color: transparent;\n }\n.tau-btn__button__12-27-4.tau-primary__button__12-27-4.tau-btn--no-background__button__12-27-4:hover:not(:disabled) {\n background-color: var(--Primary100, #E7F1E5);\n border-color: transparent;\n }\n.tau-btn__button__12-27-4.tau-primary__button__12-27-4.tau-btn--no-background__button__12-27-4.checked,\n .tau-btn__button__12-27-4.tau-primary__button__12-27-4.tau-btn--no-background__button__12-27-4.checked:hover,\n .tau-btn__button__12-27-4.tau-primary__button__12-27-4.tau-btn--no-background__button__12-27-4:active:not(:disabled) {\n background-color: var(--Primary200, #B7D5B2);\n border-color: transparent;\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4 {\n color: var(--FontColorWhite, #FFFFFF);\n background-color: var(--Danger, #AE304A);\n border-color: var(--Danger, #AE304A);\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4:hover:not(:disabled) {\n background-color: var(--Danger600, #A52E46);\n border-color: var(--Danger600, #A52E46);\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4:active:not(:disabled),\n .tau-btn__button__12-27-4.tau-danger__button__12-27-4.checked,\n .tau-btn__button__12-27-4.tau-danger__button__12-27-4.checked:hover {\n background-color: var(--Danger700, #9D2B43);\n border-color: var(--Danger700, #9D2B43);\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4:focus {\n -webkit-box-shadow: var(--ControlBoxShadowFocusError, 0 0 0 3px rgba(174, 48, 74, 0.4));\n box-shadow: var(--ControlBoxShadowFocusError, 0 0 0 3px rgba(174, 48, 74, 0.4));\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4.tau-btn--no-background__button__12-27-4 {\n color: var(--Danger, #AE304A);\n background-color: transparent;\n border-color: transparent;\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4.tau-btn--no-background__button__12-27-4:hover:not(:disabled) {\n background-color: var(--Danger100, #F3E0E4);\n border-color: transparent;\n }\n.tau-btn__button__12-27-4.tau-danger__button__12-27-4.tau-btn--no-background__button__12-27-4.checked,\n .tau-btn__button__12-27-4.tau-danger__button__12-27-4.tau-btn--no-background__button__12-27-4.checked:hover,\n .tau-btn__button__12-27-4.tau-danger__button__12-27-4.tau-btn--no-background__button__12-27-4:active:not(:disabled) {\n background-color: var(--Danger200, #DBA2AE);\n border-color: transparent;\n }\n.tau-btn__button__12-27-4.tau-attention__button__12-27-4 {\n color: var(--Danger, #AE304A);\n }\n.tau-btn--active-highlight__button__12-27-4 {\n color: var(--Warning, #E6961E);\n background-color: var(--Active200, #F9E9AE);\n border-color: var(--Active200, #F9E9AE);\n }\n.tau-btn--active-highlight__button__12-27-4:hover:not(:disabled) {\n background-color: var(--Active300, #F7E292);\n border-color: var(--Active300, #F7E292);\n }\n.tau-btn--active-highlight__button__12-27-4.checked,\n .tau-btn--active-highlight__button__12-27-4.checked:hover {\n background-color: var(--Active300, #F7E292);\n border-color: var(--Active300, #F7E292);\n color: var(--Warning, #E6961E);\n }\n.tau-btn--active-highlight__button__12-27-4:active:not(:disabled) {\n background-color: var(--Active300, #F7E292);\n border-color: var(--Third, #007EFF);\n -webkit-box-shadow: none;\n box-shadow: none;\n }\n.tau-btn--active-highlight__button__12-27-4:focus {\n -webkit-box-shadow: var(--ControlHighlightedBoxShadowFocus, 0 0 0 3px rgba(252, 245, 219, 0.2));\n box-shadow: var(--ControlHighlightedBoxShadowFocus, 0 0 0 3px rgba(252, 245, 219, 0.2));\n }\n/* .controls-inline-group TODO: check if we should preserve old class-name or can clean-up something */\n.buttons-inline-group__button__12-27-4 {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4 {\n min-width: 50px;\n }\n.buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-sorter__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .boardsettings-filter__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .context-filter__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-dropdown__button__12-27-4 {\n margin: 0 -1px 0 0;\n border-radius: 0;\n }\n.buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4:first-child, .buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4:first-child, .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4:first-child, .buttons-inline-group__button__12-27-4 > .tau-sorter__button__12-27-4:first-child, .buttons-inline-group__button__12-27-4 > .boardsettings-filter__button__12-27-4:first-child, .buttons-inline-group__button__12-27-4 > .context-filter__button__12-27-4:first-child, .buttons-inline-group__button__12-27-4 > .tau-dropdown__button__12-27-4:first-child {\n border-top-left-radius: var(--BorderRadiusDefault, 3px);\n border-bottom-left-radius: var(--BorderRadiusDefault, 3px);\n }\n.buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4:last-child, .buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4:last-child, .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4:last-child, .buttons-inline-group__button__12-27-4 > .tau-sorter__button__12-27-4:last-child, .buttons-inline-group__button__12-27-4 > .boardsettings-filter__button__12-27-4:last-child, .buttons-inline-group__button__12-27-4 > .context-filter__button__12-27-4:last-child, .buttons-inline-group__button__12-27-4 > .tau-dropdown__button__12-27-4:last-child {\n margin-right: 0;\n border-top-right-radius: var(--BorderRadiusDefault, 3px);\n border-bottom-right-radius: var(--BorderRadiusDefault, 3px);\n }\n.buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4:focus, .buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4:focus, .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4:focus, .buttons-inline-group__button__12-27-4 > .tau-sorter__button__12-27-4:focus, .buttons-inline-group__button__12-27-4 > .boardsettings-filter__button__12-27-4:focus, .buttons-inline-group__button__12-27-4 > .context-filter__button__12-27-4:focus, .buttons-inline-group__button__12-27-4 > .tau-dropdown__button__12-27-4:focus {\n z-index: 2;\n -webkit-box-shadow: none;\n box-shadow: none;\n }\n.buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4.tau-error__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4.tau-error__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4.tau-error__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-sorter__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-sorter__button__12-27-4.tau-error__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .boardsettings-filter__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .boardsettings-filter__button__12-27-4.tau-error__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .context-filter__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .context-filter__button__12-27-4.tau-error__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-dropdown__button__12-27-4.tau-checked__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-dropdown__button__12-27-4.tau-error__button__12-27-4 {\n z-index: 1;\n }\n.buttons-inline-group__button__12-27-4 > .tau-btn__button__12-27-4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n }\n.buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4,\n .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4 {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n }\n.buttons-inline-group__button__12-27-4 > .tau-in-text__button__12-27-4.tau-error__button__12-27-4, .buttons-inline-group__button__12-27-4 > .tau-select__button__12-27-4.tau-error__button__12-27-4 {\n z-index: 1;\n }\n";
var styles = {"tau-btn":"tau-btn__button__12-27-4","tau-btn--no-background":"tau-btn--no-background__button__12-27-4","tau-btn__icon":"tau-btn__icon__button__12-27-4","color-label":"color-label__button__12-27-4","tau-btn--ellipsis":"tau-btn--ellipsis__button__12-27-4","tau-btn--icon":"tau-btn--icon__button__12-27-4","tau-btn--wide":"tau-btn--wide__button__12-27-4","tau-btn--loader":"tau-btn--loader__button__12-27-4","spin":"spin__button__12-27-4","tau-primary":"tau-primary__button__12-27-4","tau-danger":"tau-danger__button__12-27-4","tau-success":"tau-success__button__12-27-4","tau-btn-large":"tau-btn-large__button__12-27-4","tau-btn-big":"tau-btn-big__button__12-27-4","tau-btn-medium":"tau-btn-medium__button__12-27-4","tau-btn-small":"tau-btn-small__button__12-27-4","tau-attention":"tau-attention__button__12-27-4","tau-btn--active-highlight":"tau-btn--active-highlight__button__12-27-4","buttons-inline-group":"buttons-inline-group__button__12-27-4","tau-in-text":"tau-in-text__button__12-27-4","tau-select":"tau-select__button__12-27-4","tau-sorter":"tau-sorter__button__12-27-4","boardsettings-filter":"boardsettings-filter__button__12-27-4","context-filter":"context-filter__button__12-27-4","tau-dropdown":"tau-dropdown__button__12-27-4","tau-checked":"tau-checked__button__12-27-4","tau-error":"tau-error__button__12-27-4"};
var css = "/*********************************************************************\n* © Copyright IBM Corp. 2024\n*********************************************************************/\n@-webkit-keyframes spin__button__12-28-0 {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n\n to {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@keyframes spin__button__12-28-0 {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n\n to {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n.tau-btn__button__12-28-0 {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: block;\n padding: 0 calc(var(--SpaceS, 8px) - 1px);\n margin: 0;\n height: var(--ControlHeightDefault, 24px);\n line-height: var(--ButtonLineHeightDefault, 22px);\n font-family: inherit;\n font-size: var(--FontSizeLabel, 11px);\n font-weight: normal;\n text-decoration: none;\n text-shadow: none;\n white-space: nowrap;\n color: var(--ButtonColorDefault, #000000);\n min-width: 5em;\n border: solid 1px var(--ButtonBorderColorDefault, #E2E3E4);\n border-radius: var(--ControlBorderRadiusDefault, 3px);\n background-color: var(--ButtonBackgroundDefault, #F5F6F6);\n text-align: center;\n cursor: pointer;\n\n /* end region */\n}\n.tau-btn--no-background__button__12-28-0 {\n background-color: transparent;\n border: solid 1px transparent;\n }\n.tau-btn--no-background__button__12-28-0:hover {\n background-color: var(--Second200, #ECECED);\n }\n.tau-btn--no-background__button__12-28-0:active {\n background-color: var(--Second300, #E2E3E4);\n }\n.tau-btn__button__12-28-0::-moz-focus-inner {\n border: none;\n padding: 0;\n }\n.tau-btn__button__12-28-0:hover:not(:disabled) {\n background: var(--ButtonBackgroundHover, #ECECED);\n border-color: var(--ButtonBackgroundHover, #ECECED);\n }\n.tau-btn__button__12-28-0:active:not(:disabled) {\n background: var(--ButtonBackgroundActive, #E2E3E4);\n border-color: var(--ButtonBackgroundActive, #E2E3E4);\n }\n.tau-btn__button__12-28-0:disabled {\n cursor: default;\n opacity: var(--ControlDisabledOpacity, 0.5);\n }\n.tau-btn__button__12-28-0:focus {\n -webkit-box-shadow: var(--ControlBoxShadowFocusDefault, 0 0 0 3px rgba(0, 126, 255, 0.2));\n box-shadow: var(--ControlBoxShadowFocusDefault, 0 0 0 3px rgba(0, 126, 255, 0.2));\n outline: none;\n position: relative; /*to lift up box-shadow in groups*/\n }\n.tau-btn__button__12-28-0.checked {\n color: var(--ButtonColorChecked, #000000);\n border-color: var(--ButtonBorderColorChecked, #E2E3E4);\n }\n.tau-btn__button__12-28-0.checked,\n .tau-btn__button__12-28-0.checked:hover {\n background: var(--ButtonBackgroundChecked, #E2E3E4);\n border-color: var(--ButtonBackgroundChecked, #E2E3E4);\n }\n.tau-btn__button__12-28-0.checked:disabled {\n opacity: var(--ControlDisabledOpacity, 0.5);\n }\n.tau-btn__icon__button__12-28-0 {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n vertical-align: top;\n height: 100%;\n position: relative;\n margin: 0 2px;\n }\n.tau-btn__icon__button__12-28-0:first-child,\n .color-label__button__12-28-0 + .tau-btn__icon__button__12-28-0 {\n margin-left: -4px;\n }\n.tau-btn__icon__button__12-28-0:last-child {\n margin-right: -4px;\n }\n.tau-btn--ellipsis__button__12-28-0 {\n max-width: 100%;\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n }\n.tau-btn--icon__button__12-28-0 {\n min-width: 0;\n }\n.tau-btn--wide__button__12-28-0 {\n width: 100%;\n }\n.tau-btn--loader__button__12-28-0 {\n position: relative;\n cursor: default;\n }\n.tau-btn--loader__button__12-28-0:disabled {\n border-color: var(--ButtonBorderColorDefault, #E2E3E4);\n color: var(--ButtonColorDefault, #000000);\n }\n.tau-btn--loader__button__12-28-0:disabled:before,\n .tau-btn--loader__button__12-28-0:disabled:after {\n opacity: 1;\n }\n.tau-btn--loader__button__12-28-0:before,\n .tau-btn--loader__button__12-28-0:after {\n display: block;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n position: absolute;\n content: '';\n }\n.tau-btn--loader__button__12-28-0:before {\n z-index: 2;\n background: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='var(--Second400, %2366686D)'%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill-rule='evenodd'%3E %3Cpath d='M7.5,0 C7.77614237,0 8,0.229644775 8,0.501464665 L8,2.99853534 C8,3.27548662 7.76806641,3.5 7.5,3.5 L7.5,3.5 C7.22385763,3.5 7,3.27035522 7,2.99853534 L7,0.501464665 C7,0.224513378 7.23193359,0 7.5,0 L7.5,0 L7.5,0 Z' id='Path' opacity='0.200000003'/%3E %3Cpath d='M0,8.5 C0,8.22385763 0.229644775,8 0.501464665,8 L2.99853534,8 C3.27548662,8 3.5,8.23193359 3.5,8.5 L3.5,8.5 C3.5,8.77614237 3.27035522,9 2.99853534,9 L0.501464665,9 C0.224513378,9 0,8.76806641 0,8.5 L0,8.5 L0,8.5 Z' id='Path'/%3E %3Cpath d='M8.5,16 C8.22385763,16 8,15.7703552 8,15.4985353 L8,13.0014647 C8,12.7245134 8.23193359,12.5 8.5,12.5 L8.5,12.5 C8.77614237,12.5 9,12.7296448 9,13.0014647 L9,15.4985353 C9,15.7754866 8.76806641,16 8.5,16 L8.5,16 L8.5,16 Z' id='Path' opacity='0.800000012'/%3E %3Cpath d='M16,7.5 C16,7.77614237 15.7703552,8 15.4985353,8 L13.0014647,8 C12.7245134,8 12.5,7.76806641 12.5,7.5 L12.5,7.5 C12.5,7.22385763 12.7296448,7 13.0014647,7 L15.4985353,7 C15.7754866,7 16,7.23193359 16,7.5 L16,7.5 L16,7.5 Z' id='Path' opacity='0.5'/%3E %3Cpath d='M3.5669873,1.32179677 C3.80613361,1.18372558 4.11482239,1.27067498 4.25073233,1.50607791 L5.49926767,3.66860454 C5.63774331,3.90845139 5.54913962,4.21885248 5.3169873,4.35288568 L5.3169873,4.35288568 C5.07784099,4.49095687 4.76915221,4.40400747 4.63324226,4.16860454 L3.38470693,2.00607791 C3.24623129,1.76623106 3.33483498,1.45582997 3.5669873,1.32179677 L3.5669873,1.32179677 L3.5669873,1.32179677 L3.5669873,1.32179677 Z' id='Path' opacity='0.100000001'/%3E %3Cpath d='M1.32179677,12.4330127 C1.18372558,12.1938664 1.27067498,11.8851776 1.50607791,11.7492677 L3.66860454,10.5007323 C3.90845139,10.3622567 4.21885248,10.4508604 4.35288568,10.6830127 L4.35288568,10.6830127 C4.49095687,10.922159 4.40400747,11.2308478 4.16860454,11.3667577 L2.00607791,12.6152931 C1.76623106,12.7537687 1.45582997,12.665165 1.32179677,12.4330127 L1.32179677,12.4330127 L1.32179677,12.4330127 L1.32179677,12.4330127 Z' id='Path'/%3E %3Cpath d='M12.4330127,14.6782032 C12.1938664,14.8162744 11.8851776,14.729325 11.7492677,14.4939221 L10.5007323,12.3313955 C10.3622567,12.0915486 10.4508604,11.7811475 10.6830127,11.6471143 L10.6830127,11.6471143 C10.922159,11.5090431 11.2308478,11.5959925 11.3667577,11.8313955 L12.6152931,13.9939221 C12.7537687,14.2337689 12.665165,14.54417 12.4330127,14.6782032 L12.4330127,14.6782032 L12.4330127,14.6782032 L12.4330127,14.6782032 Z' id='Path' opacity='0.699999988'/%3E %3Cpath d='M14.6782032,3.5669873 C14.8162744,3.80613361 14.729325,4.11482239 14.4939221,4.25073233 L12.3313955,5.49926767 C12.0915486,5.63774331 11.7811475,5.54913962 11.6471143,5.3169873 L11.6471143,5.3169873 C11.5090431,5.07784099 11.5959925,4.76915221 11.8313955,4.63324226 L13.9939221,3.38470693 C14.2337689,3.24623129 14.54417,3.33483498 14.6782032,3.5669873 L14.6782032,3.5669873 L14.6782032,3.5669873 L14.6782032,3.5669873 Z' id='Path' opacity='0.400000006'/%3E %3Cpath d='M0.82179677,4.4330127 C0.959867957,4.19386639 1.27067498,4.11482239 1.50607791,4.25073233 L3.66860454,5.49926767 C3.90845139,5.63774331 3.98691889,5.95086038 3.85288568,6.1830127 L3.85288568,6.1830127 C3.7148145,6.42215901 3.40400747,6.50120302 3.16860454,6.36529307 L1.00607791,5.11675774 C0.766231058,4.97828209 0.687763567,4.66516502 0.82179677,4.4330127 L0.82179677,4.4330127 L0.82179677,4.4330127 L0.82179677,4.4330127 Z' id='Path' opacity='0.100000001'/%3E %3Cpath d='M4.4330127,15.1782032 C4.19386639,15.040132 4.11482239,14.729325 4.25073233,14.4939221 L5.49926767,12.3313955 C5.63774331,12.0915486 5.95086038,12.0130811 6.1830127,12.1471143 L6.1830127,12.1471143 C6.42215901,12.2851855 6.50120302,12.5959925 6.36529307,12.8313955 L5.11675774,14.9939221 C4.97828209,15.2337689 4.66516502,15.3122364 4.4330127,15.1782032 L4.4330127,15.1782032 L4.4330127,15.1782032 L4.4330127,15.1782032 Z' id='Path' opacity='0.900000036'/%3E %3Cpath d='M15.1782032,11.5669873 C15.040132,11.8061336 14.729325,11.8851776 14.4939221,11.7492677 L12.3313955,10.5007323 C12.0915486,10.3622567 12.0130811,10.0491396 12.1471143,9.8169873 L12.1471143,9.8169873 C12.2851855,9.57784099 12.5959925,9.49879698 12.8313955,9.63470693 L14.9939221,10.8832423 C15.2337689,11.0217179 15.3122364,11.334835 15.1782032,11.5669873 L15.1782032,11.5669873 L15.1782032,11.5669873 L15.1782032,11.5669873 Z' id='Path' opacity='0.600000024'/%3E %3Cpath d='M11.5669873,0.82179677 C11.8061336,0.959867957 11.8851776,1.27067498 11.7492677,1.50607791 L10.5007323,3.66860454 C10.3622567,3.90845139 10.0491396,3.98691889 9.8169873,3.85288568 L9.8169873,3.85288568 C9.57784099,3.7148145 9.49879698,3.40400747 9.63470693,3.16860454 L10.8832423,1.00607791 C11.0217179,0.766231058 11.334835,0.687763567 11.5669873,0.82179677 L11.5669873,0.82179677 L11.5669873,0.82179677 L11.5669873,0.82179677 Z' id='Path' opacity='0.300000012'/%3E %3C/g%3E %3C/svg%3E\") !important;\n width: 16px;\n height: 16px;\n top: 50%;\n left: 50%;\n margin: -8px 0 0 -8px;\n -webkit-animation: spin__button__12-28-0 0.8s steps(12, end) infinite;\n animation: spin__button__12-28-0 0.8s steps(12, end) infinite;\n }\n.tau-btn--loader__button__12-28-0:after {\n min-width: 100%;\n min-height: 100%;\n background: rgba(255, 255, 255, 0.85);\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n border-radius: var(--ControlBorderRadiusDefault, 3px);\n -webkit-box-shadow: inset 0 0 0 1px var(--ButtonBorderColorDefault, #E2E3E4);\n box-shadow: inset 0 0 0 1px var(--ButtonBorderColorDefault, #E2E3E4);\n }\n.tau-btn--loader__button__12-28-0.tau-primary__button__12-28-0:after,\n .tau-btn--loader__button__12-28-0.tau-danger__button__12-28-0:after,\n .tau-btn--loader__button__12-28-0.tau-success__button__12-28-0:after {\n background: rgba(255, 255, 255, 0.7);\n -webkit-box-shadow: none;\n box-shadow: none;\n }\n/* region Sizes */\n.tau-btn__button__12-28-0.tau-btn-large__button__12-28-0 {\n height: var(--ControlHeightXLarge, 40px);\n line-height: 38px;\n padding: 0 20px;\n font-size: 22px;\n }\n.tau-btn__button__12-28-0.tau-btn-large__button__12-28-0 .tau-btn__icon__button__12-28-0 {\n margin: 0 5px;\n }\n.tau-btn__button__12-28-0.tau-btn-large__button__12-28-0 .tau-btn__icon__button__12-28-0:first-child {\n margin-left: -8px;\n }\n.tau-btn__button__12-28-0.tau-btn-large__button__12-28-0 .tau-btn__icon__button__12-28-0:last-child {\n margin-right: -8px;\n }\n.tau-btn__button__12-28-0.tau-btn-big__button__12-28-0 {\n height: var(--ControlHeightLarge, 28px);\n line-height: 26px;\n padding: 0 10px;\n font-size: var(--FontSizeDefault, 13px);\n }\n.tau-btn__button__12-28-0.tau-btn-medium__button__12-28-0 {\n font-size: var(--FontSizeDefault, 13px);\n padding-bottom: 1px;\n }\n.tau-btn__button__12-28-0.tau-btn-small__button__12-28-0 {\n height: 20px;\n line-height: 18px;\n padding: 0 calc(var(--SpaceS, 8px) - 1px);\n font-size: var(--FontSizeDefault, 13px);\n }\n.tau-btn__button__12-28-0.tau-btn-small__button__12-28-0 .tau-btn__icon__button__12-28-0:first-child {\n margin-left: -5px;\n }\n.tau-btn__button__12-28-0.tau-btn-small__button__12-28-0 .tau-btn__icon__button__12-28-0:last-child {\n margin-right: -5px;\n }\n/* region Buttons Types */\n.tau-btn__button__12-28-0.tau-primary__button__12-28-0 {\n color: var(--FontColorWhite, #FFFFFF);\n background-color: var(--Primary, #5FA253);\n border-color: var(--Primary, #5FA253);\n }\n.tau-btn__button__12-28-0.tau-primary__button__12-28-0:hover:not(:disabled) {\n background-color: var(--Primary600, #5A9A4F);\n border-color: var(--Primary600, #5A9A4F);\n }\n.tau-btn__button__12-28-0.tau-primary__button__12-28-0.checked,\n .tau-btn__button__12-28-0.tau-primary__button__12-28-0.checked:hover,\n .tau-btn__button__12-28-0.tau-primary__button__12-28-0:active:not(:disabled) {\n background-color: var(--Primary700, #56924B);\n border-color: var(--Primary700, #56924B);\n }\n/* endregion */\n.tau-btn__button__12-28-0.tau-primary__button__12-28-0.tau-btn--no-background__button__12-28-0 {\n color: var(--Primary, #5FA253);\n background-color: transparent;\n border-color: transparent;\n }\n.tau-btn__button__12-28-0.tau-primary__button__12-28-0.tau-btn--no-background__button__12-28-0:hover:not(:disabled) {\n background-color: var(--Primary100, #E7F1E5);\n border-color: transparent;\n }\n.tau-btn__button__12-28-0.tau-primary__button__12-28-0.tau-btn--no-background__button__12-28-0.checked,\n .tau-btn__button__12-28-0.tau-primary__button__12-28-0.tau-btn--no-background__button__12-28-0.checked:hover,\n .tau-btn__button__12-28-0.tau-primary__button__12-28-0.tau-btn--no-background__button__12-28-0:active:not(:disabled) {\n background-color: var(--Primary200, #B7D5B2);\n border-color: transparent;\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0 {\n color: var(--FontColorWhite, #FFFFFF);\n background-color: var(--Danger, #AE304A);\n border-color: var(--Danger, #AE304A);\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0:hover:not(:disabled) {\n background-color: var(--Danger600, #A52E46);\n border-color: var(--Danger600, #A52E46);\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0:active:not(:disabled),\n .tau-btn__button__12-28-0.tau-danger__button__12-28-0.checked,\n .tau-btn__button__12-28-0.tau-danger__button__12-28-0.checked:hover {\n background-color: var(--Danger700, #9D2B43);\n border-color: var(--Danger700, #9D2B43);\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0:focus {\n -webkit-box-shadow: var(--ControlBoxShadowFocusError, 0 0 0 3px rgba(174, 48, 74, 0.4));\n box-shadow: var(--ControlBoxShadowFocusError, 0 0 0 3px rgba(174, 48, 74, 0.4));\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0.tau-btn--no-background__button__12-28-0 {\n color: var(--Danger, #AE304A);\n background-color: transparent;\n border-color: transparent;\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0.tau-btn--no-background__button__12-28-0:hover:not(:disabled) {\n background-color: var(--Danger100, #F3E0E4);\n border-color: transparent;\n }\n.tau-btn__button__12-28-0.tau-danger__button__12-28-0.tau-btn--no-background__button__12-28-0.checked,\n .tau-btn__button__12-28-0.tau-danger__button__12-28-0.tau-btn--no-background__button__12-28-0.checked:hover,\n .tau-btn__button__12-28-0.tau-danger__button__12-28-0.tau-btn--no-background__button__12-28-0:active:not(:disabled) {\n background-color: var(--Danger200, #DBA2AE);\n border-color: transparent;\n }\n.tau-btn__button__12-28-0.tau-attention__button__12-28-0 {\n color: var(--Danger, #AE304A);\n }\n.tau-btn--active-highlight__button__12-28-0 {\n color: var(--Warning, #E6961E);\n background-color: var(--Active200, #F9E9AE);\n border-color: var(--Active200, #F9E9AE);\n }\n.tau-btn--active-highlight__button__12-28-0:hover:not(:disabled) {\n background-color: var(--Active300, #F7E292);\n border-color: var(--Active300, #F7E292);\n }\n.tau-btn--active-highlight__button__12-28-0.checked,\n .tau-btn--active-highlight__button__12-28-0.checked:hover {\n background-color: var(--Active300, #F7E292);\n border-color: var(--Active300, #F7E292);\n color: var(--Warning, #E6961E);\n }\n.tau-btn--active-highlight__button__12-28-0:active:not(:disabled) {\n background-color: var(--Active300, #F7E292);\n border-color: var(--Third, #007EFF);\n -webkit-box-shadow: none;\n box-shadow: none;\n }\n.tau-btn--active-highlight__button__12-28-0:focus {\n -webkit-box-shadow: var(--ControlHighlightedBoxShadowFocus, 0 0 0 3px rgba(252, 245, 219, 0.2));\n box-shadow: var(--ControlHighlightedBoxShadowFocus, 0 0 0 3px rgba(252, 245, 219, 0.2));\n }\n/* .controls-inline-group TODO: check if we should preserve old class-name or can clean-up something */\n.buttons-inline-group__button__12-28-0 {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0 {\n min-width: 50px;\n }\n.buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-sorter__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .boardsettings-filter__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .context-filter__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-dropdown__button__12-28-0 {\n margin: 0 -1px 0 0;\n border-radius: 0;\n }\n.buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0:first-child, .buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0:first-child, .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0:first-child, .buttons-inline-group__button__12-28-0 > .tau-sorter__button__12-28-0:first-child, .buttons-inline-group__button__12-28-0 > .boardsettings-filter__button__12-28-0:first-child, .buttons-inline-group__button__12-28-0 > .context-filter__button__12-28-0:first-child, .buttons-inline-group__button__12-28-0 > .tau-dropdown__button__12-28-0:first-child {\n border-top-left-radius: var(--BorderRadiusDefault, 3px);\n border-bottom-left-radius: var(--BorderRadiusDefault, 3px);\n }\n.buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0:last-child, .buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0:last-child, .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0:last-child, .buttons-inline-group__button__12-28-0 > .tau-sorter__button__12-28-0:last-child, .buttons-inline-group__button__12-28-0 > .boardsettings-filter__button__12-28-0:last-child, .buttons-inline-group__button__12-28-0 > .context-filter__button__12-28-0:last-child, .buttons-inline-group__button__12-28-0 > .tau-dropdown__button__12-28-0:last-child {\n margin-right: 0;\n border-top-right-radius: var(--BorderRadiusDefault, 3px);\n border-bottom-right-radius: var(--BorderRadiusDefault, 3px);\n }\n.buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0:focus, .buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0:focus, .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0:focus, .buttons-inline-group__button__12-28-0 > .tau-sorter__button__12-28-0:focus, .buttons-inline-group__button__12-28-0 > .boardsettings-filter__button__12-28-0:focus, .buttons-inline-group__button__12-28-0 > .context-filter__button__12-28-0:focus, .buttons-inline-group__button__12-28-0 > .tau-dropdown__button__12-28-0:focus {\n z-index: 2;\n -webkit-box-shadow: none;\n box-shadow: none;\n }\n.buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0.tau-error__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0.tau-error__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0.tau-error__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-sorter__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-sorter__button__12-28-0.tau-error__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .boardsettings-filter__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .boardsettings-filter__button__12-28-0.tau-error__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .context-filter__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .context-filter__button__12-28-0.tau-error__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-dropdown__button__12-28-0.tau-checked__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-dropdown__button__12-28-0.tau-error__button__12-28-0 {\n z-index: 1;\n }\n.buttons-inline-group__button__12-28-0 > .tau-btn__button__12-28-0 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n }\n.buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0,\n .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0 {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n }\n.buttons-inline-group__button__12-28-0 > .tau-in-text__button__12-28-0.tau-error__button__12-28-0, .buttons-inline-group__button__12-28-0 > .tau-select__button__12-28-0.tau-error__button__12-28-0 {\n z-index: 1;\n }\n";
var styles = {"tau-btn":"tau-btn__button__12-28-0","tau-btn--no-background":"tau-btn--no-background__button__12-28-0","tau-btn__icon":"tau-btn__icon__button__12-28-0","color-label":"color-label__button__12-28-0","tau-btn--ellipsis":"tau-btn--ellipsis__button__12-28-0","tau-btn--icon":"tau-btn--icon__button__12-28-0","tau-btn--wide":"tau-btn--wide__button__12-28-0","tau-btn--loader":"tau-btn--loader__button__12-28-0","spin":"spin__button__12-28-0","tau-primary":"tau-primary__button__12-28-0","tau-danger":"tau-danger__button__12-28-0","tau-success":"tau-success__button__12-28-0","tau-btn-large":"tau-btn-large__button__12-28-0","tau-btn-big":"tau-btn-big__button__12-28-0","tau-btn-medium":"tau-btn-medium__button__12-28-0","tau-btn-small":"tau-btn-small__button__12-28-0","tau-attention":"tau-attention__button__12-28-0","tau-btn--active-highlight":"tau-btn--active-highlight__button__12-28-0","buttons-inline-group":"buttons-inline-group__button__12-28-0","tau-in-text":"tau-in-text__button__12-28-0","tau-select":"tau-select__button__12-28-0","tau-sorter":"tau-sorter__button__12-28-0","boardsettings-filter":"boardsettings-filter__button__12-28-0","context-filter":"context-filter__button__12-28-0","tau-dropdown":"tau-dropdown__button__12-28-0","tau-checked":"tau-checked__button__12-28-0","tau-error":"tau-error__button__12-28-0"};
styleInject(css);

@@ -227,3 +227,4 @@

icon = _ref.icon,
otherProps = _objectWithoutProperties(_ref, ["children", "className", "checked", "disabled", "isLoading", "isHighlighted", "isWide", "noBackground", "size", "kind", "icon"]);
iconTail = _ref.iconTail,
otherProps = _objectWithoutProperties(_ref, ["children", "className", "checked", "disabled", "isLoading", "isHighlighted", "isWide", "noBackground", "size", "kind", "icon", "iconTail"]);
var childrenArray = React__default.Children.toArray(children);

@@ -260,3 +261,3 @@ var noChildren = childrenArray.length === 0 || childrenArray.length === 1 && !Boolean(childrenArray[0]);

}
}), icon && React__default.createElement("div", {
}), children && iconTail && React__default.createElement("span", null, children), icon && React__default.createElement("div", {
className: styles['tau-btn__icon']

@@ -266,3 +267,3 @@ }, recolorIcon(icon,

// eslint-disable-next-line security/detect-object-injection
kinds.hasOwnProperty(kind) ? kinds[kind] : undefined, shouldHaveNoBackground)), children && React__default.createElement("span", null, children));
kinds.hasOwnProperty(kind) ? kinds[kind] : undefined, shouldHaveNoBackground)), children && !iconTail && React__default.createElement("span", null, children));
});

@@ -269,0 +270,0 @@ 

+3
-3
package.json
{
"name": "@targetprocess/button",
"version": "12.27.4",
"version": "12.28.0",
"description": "",

@@ -13,3 +13,3 @@ "main": "dist/button.js",

"dependencies": {
"@targetprocess/css-variables": "^12.27.4",
"@targetprocess/css-variables": "^12.25.4",
"classnames": "^2.2.5",

@@ -23,3 +23,3 @@ "prop-types": "^15.6.0",

"sideEffects": false,
"gitHead": "d651f7c71f39fec22aa1b55b180d62ccdb8a1b21"
"gitHead": "dcac07e0b38f166a45df5244bbc1161af4d9d1e3"
}