@asphalt-react/button - npm Package Compare versions

Comparing version 1.17.0 to 1.19.0

dist/cjs/index.js

@@ -87,5 +87,5 @@ 'use strict';
 
-var css_248z = ".Button__dtxrx {\n  /* default custom properties */\n  --button-border-radius: var(--roundness-1, 2px);\n  --button-primary-fill-color: var(\n    --interactive-fill-brand-default,\n    hsla(127, 100%, 33%, 1)\n  );\n  --button-secondary-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-outline-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-nude-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n\n  --button-primary-active-color: var(\n    --interactive-fill-brand-active,\n    hsla(127, 100%, 27%, 1)\n  );\n  --button-primary-hover-color: var(\n    --interactive-fill-brand-hover,\n    hsla(127, 57%, 47%, 1)\n  );\n  --button-disabled-color: var(--interactive-disabled, hsla(0, 0%, 86%, 1));\n\n  --button-secondary-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-secondary-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n  --button-danger-hover-color: var(\n    --support-danger-hover,\n    hsla(12, 76%, 56%, 1)\n  );\n\n  --button-outline-active-color: var(\n    --interactive-fill-selected-active,\n    hsla(219, 42%, 24%, 1)\n  );\n  --button-outline-hover-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n\n  --button-nude-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-nude-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-primary-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-secondary-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-danger-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-outline-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-outline-hover-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  --button-border-focus: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n  --button-outline-border-inactive: var(\n    --interactive-border-action,\n    hsla(219, 42%, 31%, 1)\n  );\n  --button-outline-border-danger: var(\n    --interactive-border-support,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --button-border-width: var(--border-width, 1px);\n\n  --button-text-disabled: var(--text-disabled, hsla(0, 0%, 62%, 1));\n\n  --button-l-fontsize: var(--label-l, 1.13rem);\n  --button-m-fontsize: var(--label-m, 1rem);\n  --button-s-fontsize: var(--label-s, 0.88rem);\n  --nude-button-s-fontsize: var(--label-l, 1.13rem);\n  --nude-button-xs-fontsize: var(--label-m, 1rem);\n  --nude-button-xxs-fontsize: var(--label-s, 0.88rem);\n\n  --button-inverse-icon-color: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n  --button-primary-icon-color: var(--icon-primary, hsla(220, 42%, 24%, 1));\n\n  --icon-disabled-color: var(--icon-disabled, hsla(0, 0%, 62%, 1));\n\n  /* custom support nude buttons */\n  --nude-info-fill-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n  --nude-info-hover-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n  --nude-info-active-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n\n  --nude-success-fill-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n  --nude-success-hover-color: var(\n    --support-success-hover,\n    hsla(159, 51%, 41%, 1)\n  );\n  --nude-success-active-color: var(\n    --support-success-active,\n    hsla(159, 98%, 21%, 1)\n  );\n\n  --nude-warning-fill-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n  --nude-warning-hover-color: var(\n    --support-warning-hover,\n    hsla(33, 100%, 65%, 1)\n  );\n  --nude-warning-active-color: var(\n    --support-warning-active,\n    hsla(33, 79%, 45%, 1)\n  );\n\n  --nude-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n  --nude-danger-hover-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n  --nude-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --nude-support-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  /* toggle button css variables */\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n  --toggle-button-font-color: var(--text-secondary, hsla(219, 42%, 24%, 1));\n\n  display: inline-flex;\n  justify-content: center;\n  white-space: nowrap;\n  text-align: center;\n  align-items: center;\n  border-color: transparent;\n  border-width: var(--button-border-width);\n  font-weight: 600;\n  line-height: initial;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  outline: none !important;\n  outline-style: none;\n}\n.Button__dtxrx.stretch__iy1gZ {\n  width: 100%;\n}\n\n/*  \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.IconButton__EeuLT svg {\n  pointer-events: none;\n}\n\n/* primary styles */\n.primary__7r4wq {\n  background-color: var(--button-primary-fill-color);\n  color: var(--button-primary-font);\n}\n\n.primary__7r4wq svg path {\n  fill: var(--button-inverse-icon-color);\n}\n\n.primary__7r4wq:hover {\n  background-color: var(--button-primary-hover-color);\n}\n\n.primary__7r4wq:focus {\n  background-color: var(--button-primary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq:active {\n  background-color: var(--button-primary-active-color);\n}\n\n/* secondary styles */\n.secondary__twuXR {\n  background-color: var(--button-secondary-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.secondary__twuXR svg path,\n.outline__YB3Un svg path {\n  fill: var(--button-primary-icon-color);\n}\n\n.secondary__twuXR:hover {\n  background-color: var(--button-secondary-hover-color);\n}\n\n.secondary__twuXR:focus {\n  background-color: var(--button-secondary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.secondary__twuXR:active {\n  background-color: var(--button-secondary-active-color);\n}\n\n/* outline styles */\n.outline__YB3Un {\n  background-color: var(--button-outline-fill-color);\n  border: 1px solid var(--button-outline-border-inactive);\n  color: var(--button-outline-font);\n}\n\n.outline__YB3Un:hover {\n  background-color: var(--button-outline-hover-color);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:focus {\n  background-color: var(--button-outline-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:active {\n  background-color: var(--button-outline-active-color);\n}\n\n/* nude styles */\n.nude__gwht8 {\n  background: var(--button-nude-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.nude__gwht8:hover {\n  background-color: var(--button-nude-hover-color);\n}\n\n.nude__gwht8:focus {\n  background-color: var(--button-nude-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.nude__gwht8:active {\n  background-color: var(--button-nude-active-color);\n}\n\n/* danger styles */\n.primary__7r4wq.danger__NVFDo,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8) {\n  background-color: var(--button-danger-fill-color);\n  color: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo svg path,\n.IconButton__EeuLT.danger__NVFDo svg path {\n  fill: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:hover,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):hover:enabled \n/* enabled applies when disabled exists. \nIt applies styles only when in enabled state   */ {\n  background-color: var(--button-danger-hover-color);\n}\n\n.primary__7r4wq.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:focus,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):focus {\n  background-color: var(--button-danger-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq.danger__NVFDo:active,\n.outline__YB3Un.danger__NVFDo:active,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):active {\n  background-color: var(--button-danger-active-color);\n}\n\n.secondary__twuXR.danger__NVFDo,\n.nude__gwht8.danger__NVFDo,\n.outline__YB3Un.danger__NVFDo {\n  color: var(--button-danger-fill-color);\n}\n\n.secondary__twuXR.danger__NVFDo svg path,\n.nude__gwht8.danger__NVFDo svg path,\n.IconButton__EeuLT.nude__gwht8.danger__NVFDo svg path {\n  fill: var(--button-danger-fill-color);\n}\n\n.outline__YB3Un.danger__NVFDo {\n  border-color: var(--button-outline-border-danger);\n}\n\n.outline__YB3Un.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:active {\n  color: var(--button-outline-hover-font);\n}\n\n/* disabled styles */\n.primary__7r4wq:disabled,\n.secondary__twuXR:disabled,\n.outline__YB3Un:disabled,\n.primary__7r4wq.danger__NVFDo:disabled,\n.outline__YB3Un.danger__NVFDo:disabled,\n.nude__gwht8:disabled {\n  background-color: var(--button-disabled-color);\n  color: var(--button-text-disabled);\n  cursor: not-allowed;\n  border-color: transparent;\n}\n\n.nude__gwht8:disabled {\n  background-color: transparent;\n}\n\n.primary__7r4wq:disabled svg path,\n.secondary__twuXR:disabled svg path,\n.nude__gwht8:disabled svg path,\n.danger__NVFDo:disabled svg path,\n.IconButton__EeuLT.nude__gwht8:disabled svg path {\n  fill: var(--icon-disabled-color);\n}\n\n/* \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.qualifierContainer__xaGgg {\n  display: flex;\n  pointer-events: none;\n}\n\n.qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n}\n\n.end__keOvV {\n  flex-direction: row-reverse;\n}\n\n.end__keOvV > .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n/* sizes */\n.l__ija4T {\n  padding: 0.75rem 1.25rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.l__ija4T.qualifier__7Po6D {\n  padding: 0.75rem;\n}\n\n.m__72G7g {\n  padding: 0.5rem 1rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.m__72G7g.qualifier__7Po6D {\n  padding: 0.5rem;\n}\n\n.s__hxReC {\n  padding: 0.25rem 0.75rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.s__hxReC.qualifier__7Po6D {\n  padding: 0.25rem;\n}\n\n.outline__YB3Un.l__ija4T,\n.nude__gwht8.l__ija4T {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.outline__YB3Un.m__72G7g,\n.nude__gwht8.m__72G7g {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.outline__YB3Un.s__hxReC,\n.nude__gwht8.s__hxReC {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.IconButton__EeuLT.l__ija4T {\n  padding: 1rem;\n}\n\n.IconButton__EeuLT.m__72G7g {\n  padding: 0.75rem 1rem;\n}\n\n.IconButton__EeuLT.s__hxReC {\n  padding: 0.5rem 1rem;\n}\n\n.IconButton__EeuLT.nude__gwht8 {\n  padding: 0.25rem;\n}\n\n/* support nude button styles for Flag component */\n.nude__gwht8.support__hlgwX {\n  color: var(--nude-support-font-color);\n}\n\n/* danger */\n.nude__gwht8.support__hlgwX.supportDanger__vubrl {\n  background-color: var(--nude-danger-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:hover {\n  background-color: var(--nude-danger-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:active {\n  background-color: var(--nude-danger-active-color);\n}\n\n/* warning */\n.nude__gwht8.support__hlgwX.supportWarning__--1ul {\n  background-color: var(--nude-warning-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:hover {\n  background-color: var(--nude-warning-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:active {\n  background-color: var(--nude-warning-active-color);\n}\n\n/* success */\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3 {\n  background-color: var(--nude-success-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:hover {\n  background-color: var(--nude-success-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:active {\n  background-color: var(--nude-success-active-color);\n}\n\n/* info */\n.nude__gwht8.support__hlgwX.supportInfo__63yXY {\n  background-color: var(--nude-info-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:hover {\n  background-color: var(--nude-info-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:active {\n  background-color: var(--nude-info-active-color);\n}\n\n/* toggle button styles */\n.toggleButton__gAz3- {\n  background-color: var(--toggle-button-background-color);\n  color: var(--toggle-button-font-color);\n  padding: 0.5px 1.67rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.smallToggle__OKiE- {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__Ct2e7 {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__MBu7B {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__MIVZB {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__5ewyQ {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__gAz3-:hover,\n.toggleButton__gAz3-:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__gAz3-:focus {\n  border-color: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n}\n\n.on__GqssJ {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-default,\n    hsla(219, 42%, 31%, 1)\n  );\n  --toggle-button-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ:hover,\n.on__GqssJ:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__gAz3-:disabled,\n.on__GqssJ:disabled {\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n}\n\n.on__GqssJ:disabled {\n  --toggle-button-background-color: var(\n    --interactive-disabled,\n    hsla(0, 0%, 86%, 1)\n  );\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n}\n\n.link__x1aOq {\n  border-style: solid;\n  text-decoration: underline;\n}\n\n/* rtl styles */\n*[dir=\"rtl\"] .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .end__keOvV > .qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n  margin-left: 0;\n}\n";
-var styles = {"Button":"Button__dtxrx","stretch":"stretch__iy1gZ","IconButton":"IconButton__EeuLT","primary":"primary__7r4wq","secondary":"secondary__twuXR","outline":"outline__YB3Un","nude":"nude__gwht8","danger":"danger__NVFDo","qualifierContainer":"qualifierContainer__xaGgg","end":"end__keOvV","l":"l__ija4T","qualifier":"qualifier__7Po6D","m":"m__72G7g","s":"s__hxReC","support":"support__hlgwX","supportDanger":"supportDanger__vubrl","supportWarning":"supportWarning__--1ul","supportSuccess":"supportSuccess__MyDs3","supportInfo":"supportInfo__63yXY","toggleButton":"toggleButton__gAz3-","smallToggle":"smallToggle__OKiE-","largeToggle":"largeToggle__Ct2e7","iconToggle":"iconToggle__MBu7B","smallIconToggle":"smallIconToggle__MIVZB","largeIconToggle":"largeIconToggle__5ewyQ","on":"on__GqssJ","link":"link__x1aOq"};
-var stylesheet=".Button__dtxrx {\n  /* default custom properties */\n  --button-border-radius: var(--roundness-1, 2px);\n  --button-primary-fill-color: var(\n    --interactive-fill-brand-default,\n    hsla(127, 100%, 33%, 1)\n  );\n  --button-secondary-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-outline-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-nude-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n\n  --button-primary-active-color: var(\n    --interactive-fill-brand-active,\n    hsla(127, 100%, 27%, 1)\n  );\n  --button-primary-hover-color: var(\n    --interactive-fill-brand-hover,\n    hsla(127, 57%, 47%, 1)\n  );\n  --button-disabled-color: var(--interactive-disabled, hsla(0, 0%, 86%, 1));\n\n  --button-secondary-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-secondary-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n  --button-danger-hover-color: var(\n    --support-danger-hover,\n    hsla(12, 76%, 56%, 1)\n  );\n\n  --button-outline-active-color: var(\n    --interactive-fill-selected-active,\n    hsla(219, 42%, 24%, 1)\n  );\n  --button-outline-hover-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n\n  --button-nude-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-nude-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-primary-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-secondary-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-danger-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-outline-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-outline-hover-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  --button-border-focus: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n  --button-outline-border-inactive: var(\n    --interactive-border-action,\n    hsla(219, 42%, 31%, 1)\n  );\n  --button-outline-border-danger: var(\n    --interactive-border-support,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --button-border-width: var(--border-width, 1px);\n\n  --button-text-disabled: var(--text-disabled, hsla(0, 0%, 62%, 1));\n\n  --button-l-fontsize: var(--label-l, 1.13rem);\n  --button-m-fontsize: var(--label-m, 1rem);\n  --button-s-fontsize: var(--label-s, 0.88rem);\n  --nude-button-s-fontsize: var(--label-l, 1.13rem);\n  --nude-button-xs-fontsize: var(--label-m, 1rem);\n  --nude-button-xxs-fontsize: var(--label-s, 0.88rem);\n\n  --button-inverse-icon-color: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n  --button-primary-icon-color: var(--icon-primary, hsla(220, 42%, 24%, 1));\n\n  --icon-disabled-color: var(--icon-disabled, hsla(0, 0%, 62%, 1));\n\n  /* custom support nude buttons */\n  --nude-info-fill-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n  --nude-info-hover-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n  --nude-info-active-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n\n  --nude-success-fill-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n  --nude-success-hover-color: var(\n    --support-success-hover,\n    hsla(159, 51%, 41%, 1)\n  );\n  --nude-success-active-color: var(\n    --support-success-active,\n    hsla(159, 98%, 21%, 1)\n  );\n\n  --nude-warning-fill-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n  --nude-warning-hover-color: var(\n    --support-warning-hover,\n    hsla(33, 100%, 65%, 1)\n  );\n  --nude-warning-active-color: var(\n    --support-warning-active,\n    hsla(33, 79%, 45%, 1)\n  );\n\n  --nude-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n  --nude-danger-hover-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n  --nude-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --nude-support-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  /* toggle button css variables */\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n  --toggle-button-font-color: var(--text-secondary, hsla(219, 42%, 24%, 1));\n\n  display: inline-flex;\n  justify-content: center;\n  white-space: nowrap;\n  text-align: center;\n  align-items: center;\n  border-color: transparent;\n  border-width: var(--button-border-width);\n  font-weight: 600;\n  line-height: initial;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  outline: none !important;\n  outline-style: none;\n}\n.Button__dtxrx.stretch__iy1gZ {\n  width: 100%;\n}\n\n/*  \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.IconButton__EeuLT svg {\n  pointer-events: none;\n}\n\n/* primary styles */\n.primary__7r4wq {\n  background-color: var(--button-primary-fill-color);\n  color: var(--button-primary-font);\n}\n\n.primary__7r4wq svg path {\n  fill: var(--button-inverse-icon-color);\n}\n\n.primary__7r4wq:hover {\n  background-color: var(--button-primary-hover-color);\n}\n\n.primary__7r4wq:focus {\n  background-color: var(--button-primary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq:active {\n  background-color: var(--button-primary-active-color);\n}\n\n/* secondary styles */\n.secondary__twuXR {\n  background-color: var(--button-secondary-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.secondary__twuXR svg path,\n.outline__YB3Un svg path {\n  fill: var(--button-primary-icon-color);\n}\n\n.secondary__twuXR:hover {\n  background-color: var(--button-secondary-hover-color);\n}\n\n.secondary__twuXR:focus {\n  background-color: var(--button-secondary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.secondary__twuXR:active {\n  background-color: var(--button-secondary-active-color);\n}\n\n/* outline styles */\n.outline__YB3Un {\n  background-color: var(--button-outline-fill-color);\n  border: 1px solid var(--button-outline-border-inactive);\n  color: var(--button-outline-font);\n}\n\n.outline__YB3Un:hover {\n  background-color: var(--button-outline-hover-color);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:focus {\n  background-color: var(--button-outline-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:active {\n  background-color: var(--button-outline-active-color);\n}\n\n/* nude styles */\n.nude__gwht8 {\n  background: var(--button-nude-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.nude__gwht8:hover {\n  background-color: var(--button-nude-hover-color);\n}\n\n.nude__gwht8:focus {\n  background-color: var(--button-nude-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.nude__gwht8:active {\n  background-color: var(--button-nude-active-color);\n}\n\n/* danger styles */\n.primary__7r4wq.danger__NVFDo,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8) {\n  background-color: var(--button-danger-fill-color);\n  color: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo svg path,\n.IconButton__EeuLT.danger__NVFDo svg path {\n  fill: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:hover,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):hover:enabled \n/* enabled applies when disabled exists. \nIt applies styles only when in enabled state   */ {\n  background-color: var(--button-danger-hover-color);\n}\n\n.primary__7r4wq.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:focus,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):focus {\n  background-color: var(--button-danger-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq.danger__NVFDo:active,\n.outline__YB3Un.danger__NVFDo:active,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):active {\n  background-color: var(--button-danger-active-color);\n}\n\n.secondary__twuXR.danger__NVFDo,\n.nude__gwht8.danger__NVFDo,\n.outline__YB3Un.danger__NVFDo {\n  color: var(--button-danger-fill-color);\n}\n\n.secondary__twuXR.danger__NVFDo svg path,\n.nude__gwht8.danger__NVFDo svg path,\n.IconButton__EeuLT.nude__gwht8.danger__NVFDo svg path {\n  fill: var(--button-danger-fill-color);\n}\n\n.outline__YB3Un.danger__NVFDo {\n  border-color: var(--button-outline-border-danger);\n}\n\n.outline__YB3Un.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:active {\n  color: var(--button-outline-hover-font);\n}\n\n/* disabled styles */\n.primary__7r4wq:disabled,\n.secondary__twuXR:disabled,\n.outline__YB3Un:disabled,\n.primary__7r4wq.danger__NVFDo:disabled,\n.outline__YB3Un.danger__NVFDo:disabled,\n.nude__gwht8:disabled {\n  background-color: var(--button-disabled-color);\n  color: var(--button-text-disabled);\n  cursor: not-allowed;\n  border-color: transparent;\n}\n\n.nude__gwht8:disabled {\n  background-color: transparent;\n}\n\n.primary__7r4wq:disabled svg path,\n.secondary__twuXR:disabled svg path,\n.nude__gwht8:disabled svg path,\n.danger__NVFDo:disabled svg path,\n.IconButton__EeuLT.nude__gwht8:disabled svg path {\n  fill: var(--icon-disabled-color);\n}\n\n/* \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.qualifierContainer__xaGgg {\n  display: flex;\n  pointer-events: none;\n}\n\n.qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n}\n\n.end__keOvV {\n  flex-direction: row-reverse;\n}\n\n.end__keOvV > .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n/* sizes */\n.l__ija4T {\n  padding: 0.75rem 1.25rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.l__ija4T.qualifier__7Po6D {\n  padding: 0.75rem;\n}\n\n.m__72G7g {\n  padding: 0.5rem 1rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.m__72G7g.qualifier__7Po6D {\n  padding: 0.5rem;\n}\n\n.s__hxReC {\n  padding: 0.25rem 0.75rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.s__hxReC.qualifier__7Po6D {\n  padding: 0.25rem;\n}\n\n.outline__YB3Un.l__ija4T,\n.nude__gwht8.l__ija4T {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.outline__YB3Un.m__72G7g,\n.nude__gwht8.m__72G7g {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.outline__YB3Un.s__hxReC,\n.nude__gwht8.s__hxReC {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.IconButton__EeuLT.l__ija4T {\n  padding: 1rem;\n}\n\n.IconButton__EeuLT.m__72G7g {\n  padding: 0.75rem 1rem;\n}\n\n.IconButton__EeuLT.s__hxReC {\n  padding: 0.5rem 1rem;\n}\n\n.IconButton__EeuLT.nude__gwht8 {\n  padding: 0.25rem;\n}\n\n/* support nude button styles for Flag component */\n.nude__gwht8.support__hlgwX {\n  color: var(--nude-support-font-color);\n}\n\n/* danger */\n.nude__gwht8.support__hlgwX.supportDanger__vubrl {\n  background-color: var(--nude-danger-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:hover {\n  background-color: var(--nude-danger-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:active {\n  background-color: var(--nude-danger-active-color);\n}\n\n/* warning */\n.nude__gwht8.support__hlgwX.supportWarning__--1ul {\n  background-color: var(--nude-warning-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:hover {\n  background-color: var(--nude-warning-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:active {\n  background-color: var(--nude-warning-active-color);\n}\n\n/* success */\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3 {\n  background-color: var(--nude-success-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:hover {\n  background-color: var(--nude-success-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:active {\n  background-color: var(--nude-success-active-color);\n}\n\n/* info */\n.nude__gwht8.support__hlgwX.supportInfo__63yXY {\n  background-color: var(--nude-info-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:hover {\n  background-color: var(--nude-info-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:active {\n  background-color: var(--nude-info-active-color);\n}\n\n/* toggle button styles */\n.toggleButton__gAz3- {\n  background-color: var(--toggle-button-background-color);\n  color: var(--toggle-button-font-color);\n  padding: 0.5px 1.67rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.smallToggle__OKiE- {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__Ct2e7 {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__MBu7B {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__MIVZB {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__5ewyQ {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__gAz3-:hover,\n.toggleButton__gAz3-:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__gAz3-:focus {\n  border-color: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n}\n\n.on__GqssJ {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-default,\n    hsla(219, 42%, 31%, 1)\n  );\n  --toggle-button-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ:hover,\n.on__GqssJ:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__gAz3-:disabled,\n.on__GqssJ:disabled {\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n}\n\n.on__GqssJ:disabled {\n  --toggle-button-background-color: var(\n    --interactive-disabled,\n    hsla(0, 0%, 86%, 1)\n  );\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n}\n\n.link__x1aOq {\n  border-style: solid;\n  text-decoration: underline;\n}\n\n/* rtl styles */\n*[dir=\"rtl\"] .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .end__keOvV > .qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n  margin-left: 0;\n}\n";
+var css_248z = ".Button__dtxrx {\n  /* default custom properties */\n  --button-border-radius: var(--roundness-1, 2px);\n  --button-primary-fill-color: var(\n    --interactive-fill-brand-default,\n    hsla(127, 100%, 33%, 1)\n  );\n  --button-secondary-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-outline-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-nude-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n\n  --button-primary-active-color: var(\n    --interactive-fill-brand-active,\n    hsla(127, 100%, 27%, 1)\n  );\n  --button-primary-hover-color: var(\n    --interactive-fill-brand-hover,\n    hsla(127, 57%, 47%, 1)\n  );\n  --button-disabled-color: var(--interactive-disabled, hsla(0, 0%, 86%, 1));\n\n  --button-secondary-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-secondary-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n  --button-danger-hover-color: var(\n    --support-danger-hover,\n    hsla(12, 76%, 56%, 1)\n  );\n\n  --button-outline-active-color: var(\n    --interactive-fill-selected-active,\n    hsla(219, 42%, 24%, 1)\n  );\n  --button-outline-hover-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n\n  --button-nude-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-nude-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-primary-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-secondary-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-danger-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-outline-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-outline-hover-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  --button-border-focus: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n  --button-outline-border-inactive: var(\n    --interactive-border-action,\n    hsla(219, 42%, 31%, 1)\n  );\n  --button-outline-border-danger: var(\n    --interactive-border-support,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --button-border-width: var(--border-width, 1px);\n\n  --button-text-disabled: var(--text-disabled, hsla(0, 0%, 62%, 1));\n\n  --button-l-fontsize: var(--label-l, 1.13rem);\n  --button-m-fontsize: var(--label-m, 1rem);\n  --button-s-fontsize: var(--label-s, 0.88rem);\n  --nude-button-s-fontsize: var(--label-l, 1.13rem);\n  --nude-button-xs-fontsize: var(--label-m, 1rem);\n  --nude-button-xxs-fontsize: var(--label-s, 0.88rem);\n\n  --button-inverse-icon-color: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n  --button-primary-icon-color: var(--icon-primary, hsla(220, 42%, 24%, 1));\n\n  --icon-disabled-color: var(--icon-disabled, hsla(0, 0%, 62%, 1));\n\n  /* custom support nude buttons */\n  --nude-info-fill-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n  --nude-info-hover-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n  --nude-info-active-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n\n  --nude-success-fill-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n  --nude-success-hover-color: var(\n    --support-success-hover,\n    hsla(159, 51%, 41%, 1)\n  );\n  --nude-success-active-color: var(\n    --support-success-active,\n    hsla(159, 98%, 21%, 1)\n  );\n\n  --nude-warning-fill-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n  --nude-warning-hover-color: var(\n    --support-warning-hover,\n    hsla(33, 100%, 65%, 1)\n  );\n  --nude-warning-active-color: var(\n    --support-warning-active,\n    hsla(33, 79%, 45%, 1)\n  );\n\n  --nude-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n  --nude-danger-hover-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n  --nude-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --nude-support-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  /* toggle button css variables */\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n  --toggle-button-font-color: var(--text-secondary, hsla(219, 42%, 24%, 1));\n\n  display: inline-flex;\n  justify-content: center;\n  white-space: nowrap;\n  text-align: center;\n  align-items: center;\n  border-color: transparent;\n  border-width: var(--button-border-width);\n  font-weight: 600;\n  line-height: initial;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  outline: none !important;\n  outline-style: none;\n}\n.Button__dtxrx.stretch__iy1gZ {\n  width: 100%;\n}\n\n/*  \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.IconButton__EeuLT svg {\n  pointer-events: none;\n}\n\n/* primary styles */\n.primary__7r4wq {\n  background-color: var(--button-primary-fill-color);\n  color: var(--button-primary-font);\n}\n\n.primary__7r4wq svg path {\n  fill: var(--button-inverse-icon-color);\n}\n\n.primary__7r4wq:hover {\n  background-color: var(--button-primary-hover-color);\n}\n\n.primary__7r4wq:focus {\n  background-color: var(--button-primary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq:active {\n  background-color: var(--button-primary-active-color);\n}\n\n/* secondary styles */\n.secondary__twuXR {\n  background-color: var(--button-secondary-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.secondary__twuXR svg path,\n.outline__YB3Un svg path {\n  fill: var(--button-primary-icon-color);\n}\n\n.iconInheritsColor__qUH9n svg path {\n  fill: currentColor;\n}\n\n.secondary__twuXR:hover {\n  background-color: var(--button-secondary-hover-color);\n}\n\n.secondary__twuXR:focus {\n  background-color: var(--button-secondary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.secondary__twuXR:active {\n  background-color: var(--button-secondary-active-color);\n}\n\n/* outline styles */\n.outline__YB3Un {\n  background-color: var(--button-outline-fill-color);\n  border: 1px solid var(--button-outline-border-inactive);\n  color: var(--button-outline-font);\n}\n\n.outline__YB3Un:hover {\n  background-color: var(--button-outline-hover-color);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:focus {\n  background-color: var(--button-outline-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:active {\n  background-color: var(--button-outline-active-color);\n}\n\n/* nude styles */\n.nude__gwht8 {\n  background: var(--button-nude-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.nude__gwht8:hover {\n  background-color: var(--button-nude-hover-color);\n}\n\n.nude__gwht8:focus {\n  background-color: var(--button-nude-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.nude__gwht8:active {\n  background-color: var(--button-nude-active-color);\n}\n\n/* danger styles */\n.primary__7r4wq.danger__NVFDo,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8) {\n  background-color: var(--button-danger-fill-color);\n  color: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo svg path,\n.IconButton__EeuLT.danger__NVFDo svg path {\n  fill: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:hover,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):hover:enabled \n/* enabled applies when disabled exists. \nIt applies styles only when in enabled state   */ {\n  background-color: var(--button-danger-hover-color);\n}\n\n.primary__7r4wq.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:focus,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):focus {\n  background-color: var(--button-danger-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq.danger__NVFDo:active,\n.outline__YB3Un.danger__NVFDo:active,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):active {\n  background-color: var(--button-danger-active-color);\n}\n\n.secondary__twuXR.danger__NVFDo,\n.nude__gwht8.danger__NVFDo,\n.outline__YB3Un.danger__NVFDo {\n  color: var(--button-danger-fill-color);\n}\n\n.secondary__twuXR.danger__NVFDo svg path,\n.nude__gwht8.danger__NVFDo svg path,\n.IconButton__EeuLT.nude__gwht8.danger__NVFDo svg path {\n  fill: var(--button-danger-fill-color);\n}\n\n.outline__YB3Un.danger__NVFDo {\n  border-color: var(--button-outline-border-danger);\n}\n\n.outline__YB3Un.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:active {\n  color: var(--button-outline-hover-font);\n}\n\n/* disabled styles */\n.primary__7r4wq:disabled,\n.secondary__twuXR:disabled,\n.outline__YB3Un:disabled,\n.primary__7r4wq.danger__NVFDo:disabled,\n.outline__YB3Un.danger__NVFDo:disabled,\n.nude__gwht8:disabled {\n  background-color: var(--button-disabled-color);\n  color: var(--button-text-disabled);\n  cursor: not-allowed;\n  border-color: transparent;\n}\n\n.nude__gwht8:disabled {\n  background-color: transparent;\n}\n\n.primary__7r4wq:disabled svg path,\n.secondary__twuXR:disabled svg path,\n.nude__gwht8:disabled svg path,\n.danger__NVFDo:disabled svg path,\n.IconButton__EeuLT.nude__gwht8:disabled svg path {\n  fill: var(--icon-disabled-color);\n}\n\n/* \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.qualifierContainer__xaGgg {\n  display: flex;\n  pointer-events: none;\n}\n\n.qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n}\n\n.end__keOvV {\n  flex-direction: row-reverse;\n}\n\n.end__keOvV > .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n/* sizes */\n.l__ija4T {\n  padding: 0.75rem 1.25rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.l__ija4T.qualifier__7Po6D {\n  padding: 0.75rem;\n}\n\n.m__72G7g {\n  padding: 0.5rem 1rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.m__72G7g.qualifier__7Po6D {\n  padding: 0.5rem;\n}\n\n.s__hxReC {\n  padding: 0.25rem 0.75rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.s__hxReC.qualifier__7Po6D {\n  padding: 0.25rem;\n}\n\n.outline__YB3Un.l__ija4T,\n.nude__gwht8.l__ija4T {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.outline__YB3Un.m__72G7g,\n.nude__gwht8.m__72G7g {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.outline__YB3Un.s__hxReC,\n.nude__gwht8.s__hxReC {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.IconButton__EeuLT.l__ija4T {\n  padding: 1rem;\n}\n\n.IconButton__EeuLT.m__72G7g {\n  padding: 0.75rem 1rem;\n}\n\n.IconButton__EeuLT.s__hxReC {\n  padding: 0.5rem 1rem;\n}\n\n.IconButton__EeuLT.nude__gwht8 {\n  padding: 0.25rem;\n}\n\n/* support nude button styles for Flag component */\n.nude__gwht8.support__hlgwX {\n  color: var(--nude-support-font-color);\n}\n\n/* danger */\n.nude__gwht8.support__hlgwX.supportDanger__vubrl {\n  background-color: var(--nude-danger-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:hover {\n  background-color: var(--nude-danger-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:active {\n  background-color: var(--nude-danger-active-color);\n}\n\n/* warning */\n.nude__gwht8.support__hlgwX.supportWarning__--1ul {\n  background-color: var(--nude-warning-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:hover {\n  background-color: var(--nude-warning-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:active {\n  background-color: var(--nude-warning-active-color);\n}\n\n/* success */\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3 {\n  background-color: var(--nude-success-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:hover {\n  background-color: var(--nude-success-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:active {\n  background-color: var(--nude-success-active-color);\n}\n\n/* info */\n.nude__gwht8.support__hlgwX.supportInfo__63yXY {\n  background-color: var(--nude-info-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:hover {\n  background-color: var(--nude-info-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:active {\n  background-color: var(--nude-info-active-color);\n}\n\n/* toggle button styles */\n.toggleButton__gAz3- {\n  background-color: var(--toggle-button-background-color);\n  color: var(--toggle-button-font-color);\n  padding: 0.5px 1.67rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.smallToggle__OKiE- {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__Ct2e7 {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__MBu7B {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__MIVZB {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__5ewyQ {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__gAz3-:hover,\n.toggleButton__gAz3-:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__gAz3-:focus {\n  border-color: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n}\n\n.on__GqssJ {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-default,\n    hsla(219, 42%, 31%, 1)\n  );\n  --toggle-button-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ:hover,\n.on__GqssJ:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__gAz3-:disabled,\n.on__GqssJ:disabled {\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n}\n\n.on__GqssJ:disabled {\n  --toggle-button-background-color: var(\n    --interactive-disabled,\n    hsla(0, 0%, 86%, 1)\n  );\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n}\n\n.link__x1aOq {\n  border-style: solid;\n  text-decoration: underline;\n}\n\n/* rtl styles */\n*[dir=\"rtl\"] .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .end__keOvV > .qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n  margin-left: 0;\n}\n";
+var styles = {"Button":"Button__dtxrx","stretch":"stretch__iy1gZ","IconButton":"IconButton__EeuLT","primary":"primary__7r4wq","secondary":"secondary__twuXR","outline":"outline__YB3Un","iconInheritsColor":"iconInheritsColor__qUH9n","nude":"nude__gwht8","danger":"danger__NVFDo","qualifierContainer":"qualifierContainer__xaGgg","end":"end__keOvV","l":"l__ija4T","qualifier":"qualifier__7Po6D","m":"m__72G7g","s":"s__hxReC","support":"support__hlgwX","supportDanger":"supportDanger__vubrl","supportWarning":"supportWarning__--1ul","supportSuccess":"supportSuccess__MyDs3","supportInfo":"supportInfo__63yXY","toggleButton":"toggleButton__gAz3-","smallToggle":"smallToggle__OKiE-","largeToggle":"largeToggle__Ct2e7","iconToggle":"iconToggle__MBu7B","smallIconToggle":"smallIconToggle__MIVZB","largeIconToggle":"largeIconToggle__5ewyQ","on":"on__GqssJ","link":"link__x1aOq"};
+var stylesheet=".Button__dtxrx {\n  /* default custom properties */\n  --button-border-radius: var(--roundness-1, 2px);\n  --button-primary-fill-color: var(\n    --interactive-fill-brand-default,\n    hsla(127, 100%, 33%, 1)\n  );\n  --button-secondary-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-outline-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-nude-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n\n  --button-primary-active-color: var(\n    --interactive-fill-brand-active,\n    hsla(127, 100%, 27%, 1)\n  );\n  --button-primary-hover-color: var(\n    --interactive-fill-brand-hover,\n    hsla(127, 57%, 47%, 1)\n  );\n  --button-disabled-color: var(--interactive-disabled, hsla(0, 0%, 86%, 1));\n\n  --button-secondary-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-secondary-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n  --button-danger-hover-color: var(\n    --support-danger-hover,\n    hsla(12, 76%, 56%, 1)\n  );\n\n  --button-outline-active-color: var(\n    --interactive-fill-selected-active,\n    hsla(219, 42%, 24%, 1)\n  );\n  --button-outline-hover-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n\n  --button-nude-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-nude-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-primary-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-secondary-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-danger-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-outline-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-outline-hover-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  --button-border-focus: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n  --button-outline-border-inactive: var(\n    --interactive-border-action,\n    hsla(219, 42%, 31%, 1)\n  );\n  --button-outline-border-danger: var(\n    --interactive-border-support,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --button-border-width: var(--border-width, 1px);\n\n  --button-text-disabled: var(--text-disabled, hsla(0, 0%, 62%, 1));\n\n  --button-l-fontsize: var(--label-l, 1.13rem);\n  --button-m-fontsize: var(--label-m, 1rem);\n  --button-s-fontsize: var(--label-s, 0.88rem);\n  --nude-button-s-fontsize: var(--label-l, 1.13rem);\n  --nude-button-xs-fontsize: var(--label-m, 1rem);\n  --nude-button-xxs-fontsize: var(--label-s, 0.88rem);\n\n  --button-inverse-icon-color: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n  --button-primary-icon-color: var(--icon-primary, hsla(220, 42%, 24%, 1));\n\n  --icon-disabled-color: var(--icon-disabled, hsla(0, 0%, 62%, 1));\n\n  /* custom support nude buttons */\n  --nude-info-fill-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n  --nude-info-hover-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n  --nude-info-active-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n\n  --nude-success-fill-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n  --nude-success-hover-color: var(\n    --support-success-hover,\n    hsla(159, 51%, 41%, 1)\n  );\n  --nude-success-active-color: var(\n    --support-success-active,\n    hsla(159, 98%, 21%, 1)\n  );\n\n  --nude-warning-fill-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n  --nude-warning-hover-color: var(\n    --support-warning-hover,\n    hsla(33, 100%, 65%, 1)\n  );\n  --nude-warning-active-color: var(\n    --support-warning-active,\n    hsla(33, 79%, 45%, 1)\n  );\n\n  --nude-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n  --nude-danger-hover-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n  --nude-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --nude-support-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  /* toggle button css variables */\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n  --toggle-button-font-color: var(--text-secondary, hsla(219, 42%, 24%, 1));\n\n  display: inline-flex;\n  justify-content: center;\n  white-space: nowrap;\n  text-align: center;\n  align-items: center;\n  border-color: transparent;\n  border-width: var(--button-border-width);\n  font-weight: 600;\n  line-height: initial;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  outline: none !important;\n  outline-style: none;\n}\n.Button__dtxrx.stretch__iy1gZ {\n  width: 100%;\n}\n\n/*  \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.IconButton__EeuLT svg {\n  pointer-events: none;\n}\n\n/* primary styles */\n.primary__7r4wq {\n  background-color: var(--button-primary-fill-color);\n  color: var(--button-primary-font);\n}\n\n.primary__7r4wq svg path {\n  fill: var(--button-inverse-icon-color);\n}\n\n.primary__7r4wq:hover {\n  background-color: var(--button-primary-hover-color);\n}\n\n.primary__7r4wq:focus {\n  background-color: var(--button-primary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq:active {\n  background-color: var(--button-primary-active-color);\n}\n\n/* secondary styles */\n.secondary__twuXR {\n  background-color: var(--button-secondary-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.secondary__twuXR svg path,\n.outline__YB3Un svg path {\n  fill: var(--button-primary-icon-color);\n}\n\n.iconInheritsColor__qUH9n svg path {\n  fill: currentColor;\n}\n\n.secondary__twuXR:hover {\n  background-color: var(--button-secondary-hover-color);\n}\n\n.secondary__twuXR:focus {\n  background-color: var(--button-secondary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.secondary__twuXR:active {\n  background-color: var(--button-secondary-active-color);\n}\n\n/* outline styles */\n.outline__YB3Un {\n  background-color: var(--button-outline-fill-color);\n  border: 1px solid var(--button-outline-border-inactive);\n  color: var(--button-outline-font);\n}\n\n.outline__YB3Un:hover {\n  background-color: var(--button-outline-hover-color);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:focus {\n  background-color: var(--button-outline-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:active {\n  background-color: var(--button-outline-active-color);\n}\n\n/* nude styles */\n.nude__gwht8 {\n  background: var(--button-nude-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.nude__gwht8:hover {\n  background-color: var(--button-nude-hover-color);\n}\n\n.nude__gwht8:focus {\n  background-color: var(--button-nude-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.nude__gwht8:active {\n  background-color: var(--button-nude-active-color);\n}\n\n/* danger styles */\n.primary__7r4wq.danger__NVFDo,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8) {\n  background-color: var(--button-danger-fill-color);\n  color: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo svg path,\n.IconButton__EeuLT.danger__NVFDo svg path {\n  fill: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:hover,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):hover:enabled \n/* enabled applies when disabled exists. \nIt applies styles only when in enabled state   */ {\n  background-color: var(--button-danger-hover-color);\n}\n\n.primary__7r4wq.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:focus,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):focus {\n  background-color: var(--button-danger-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq.danger__NVFDo:active,\n.outline__YB3Un.danger__NVFDo:active,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):active {\n  background-color: var(--button-danger-active-color);\n}\n\n.secondary__twuXR.danger__NVFDo,\n.nude__gwht8.danger__NVFDo,\n.outline__YB3Un.danger__NVFDo {\n  color: var(--button-danger-fill-color);\n}\n\n.secondary__twuXR.danger__NVFDo svg path,\n.nude__gwht8.danger__NVFDo svg path,\n.IconButton__EeuLT.nude__gwht8.danger__NVFDo svg path {\n  fill: var(--button-danger-fill-color);\n}\n\n.outline__YB3Un.danger__NVFDo {\n  border-color: var(--button-outline-border-danger);\n}\n\n.outline__YB3Un.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:active {\n  color: var(--button-outline-hover-font);\n}\n\n/* disabled styles */\n.primary__7r4wq:disabled,\n.secondary__twuXR:disabled,\n.outline__YB3Un:disabled,\n.primary__7r4wq.danger__NVFDo:disabled,\n.outline__YB3Un.danger__NVFDo:disabled,\n.nude__gwht8:disabled {\n  background-color: var(--button-disabled-color);\n  color: var(--button-text-disabled);\n  cursor: not-allowed;\n  border-color: transparent;\n}\n\n.nude__gwht8:disabled {\n  background-color: transparent;\n}\n\n.primary__7r4wq:disabled svg path,\n.secondary__twuXR:disabled svg path,\n.nude__gwht8:disabled svg path,\n.danger__NVFDo:disabled svg path,\n.IconButton__EeuLT.nude__gwht8:disabled svg path {\n  fill: var(--icon-disabled-color);\n}\n\n/* \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.qualifierContainer__xaGgg {\n  display: flex;\n  pointer-events: none;\n}\n\n.qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n}\n\n.end__keOvV {\n  flex-direction: row-reverse;\n}\n\n.end__keOvV > .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n/* sizes */\n.l__ija4T {\n  padding: 0.75rem 1.25rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.l__ija4T.qualifier__7Po6D {\n  padding: 0.75rem;\n}\n\n.m__72G7g {\n  padding: 0.5rem 1rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.m__72G7g.qualifier__7Po6D {\n  padding: 0.5rem;\n}\n\n.s__hxReC {\n  padding: 0.25rem 0.75rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.s__hxReC.qualifier__7Po6D {\n  padding: 0.25rem;\n}\n\n.outline__YB3Un.l__ija4T,\n.nude__gwht8.l__ija4T {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.outline__YB3Un.m__72G7g,\n.nude__gwht8.m__72G7g {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.outline__YB3Un.s__hxReC,\n.nude__gwht8.s__hxReC {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.IconButton__EeuLT.l__ija4T {\n  padding: 1rem;\n}\n\n.IconButton__EeuLT.m__72G7g {\n  padding: 0.75rem 1rem;\n}\n\n.IconButton__EeuLT.s__hxReC {\n  padding: 0.5rem 1rem;\n}\n\n.IconButton__EeuLT.nude__gwht8 {\n  padding: 0.25rem;\n}\n\n/* support nude button styles for Flag component */\n.nude__gwht8.support__hlgwX {\n  color: var(--nude-support-font-color);\n}\n\n/* danger */\n.nude__gwht8.support__hlgwX.supportDanger__vubrl {\n  background-color: var(--nude-danger-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:hover {\n  background-color: var(--nude-danger-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:active {\n  background-color: var(--nude-danger-active-color);\n}\n\n/* warning */\n.nude__gwht8.support__hlgwX.supportWarning__--1ul {\n  background-color: var(--nude-warning-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:hover {\n  background-color: var(--nude-warning-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:active {\n  background-color: var(--nude-warning-active-color);\n}\n\n/* success */\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3 {\n  background-color: var(--nude-success-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:hover {\n  background-color: var(--nude-success-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:active {\n  background-color: var(--nude-success-active-color);\n}\n\n/* info */\n.nude__gwht8.support__hlgwX.supportInfo__63yXY {\n  background-color: var(--nude-info-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:hover {\n  background-color: var(--nude-info-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:active {\n  background-color: var(--nude-info-active-color);\n}\n\n/* toggle button styles */\n.toggleButton__gAz3- {\n  background-color: var(--toggle-button-background-color);\n  color: var(--toggle-button-font-color);\n  padding: 0.5px 1.67rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.smallToggle__OKiE- {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__Ct2e7 {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__MBu7B {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__MIVZB {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__5ewyQ {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__gAz3-:hover,\n.toggleButton__gAz3-:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__gAz3-:focus {\n  border-color: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n}\n\n.on__GqssJ {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-default,\n    hsla(219, 42%, 31%, 1)\n  );\n  --toggle-button-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ:hover,\n.on__GqssJ:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__gAz3-:disabled,\n.on__GqssJ:disabled {\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n}\n\n.on__GqssJ:disabled {\n  --toggle-button-background-color: var(\n    --interactive-disabled,\n    hsla(0, 0%, 86%, 1)\n  );\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n}\n\n.link__x1aOq {\n  border-style: solid;\n  text-decoration: underline;\n}\n\n/* rtl styles */\n*[dir=\"rtl\"] .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .end__keOvV > .qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n  margin-left: 0;\n}\n";
 styleInject(css_248z);
@@ -193,2 +193,3 @@
   stretch,
+  iconInheritsColor,
   ...props
@@ -276,2 +277,4 @@ }, ref) => {
     [styles.end]: qualifier$1 && qualifierEnd
+  }, {
+    [styles.iconInheritsColor]: iconInheritsColor
   });
@@ -355,3 +358,8 @@ return qualifier$1 ? /*#__PURE__*/React__default["default"].createElement("button", _extends({}, rest, {
    */
-  qualifierEnd: PropTypes__default["default"].bool
+  qualifierEnd: PropTypes__default["default"].bool,
+
+  /**
+   * Icons inherits Button’s `color` property. Use it to override the icon’s default color with the Button’s caption color.
+   */
+  iconInheritsColor: PropTypes__default["default"].bool
 };
@@ -364,3 +372,4 @@ Button.defaultProps = {
   qualifierStart: true,
-  qualifierEnd: false
+  qualifierEnd: false,
+  iconInheritsColor: false
 };
@@ -367,0 +376,0 @@

dist/index.js

@@ -76,5 +76,5 @@ import React, { forwardRef } from 'react';
 
-var css_248z = ".Button__dtxrx {\n  /* default custom properties */\n  --button-border-radius: var(--roundness-1, 2px);\n  --button-primary-fill-color: var(\n    --interactive-fill-brand-default,\n    hsla(127, 100%, 33%, 1)\n  );\n  --button-secondary-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-outline-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-nude-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n\n  --button-primary-active-color: var(\n    --interactive-fill-brand-active,\n    hsla(127, 100%, 27%, 1)\n  );\n  --button-primary-hover-color: var(\n    --interactive-fill-brand-hover,\n    hsla(127, 57%, 47%, 1)\n  );\n  --button-disabled-color: var(--interactive-disabled, hsla(0, 0%, 86%, 1));\n\n  --button-secondary-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-secondary-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n  --button-danger-hover-color: var(\n    --support-danger-hover,\n    hsla(12, 76%, 56%, 1)\n  );\n\n  --button-outline-active-color: var(\n    --interactive-fill-selected-active,\n    hsla(219, 42%, 24%, 1)\n  );\n  --button-outline-hover-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n\n  --button-nude-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-nude-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-primary-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-secondary-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-danger-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-outline-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-outline-hover-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  --button-border-focus: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n  --button-outline-border-inactive: var(\n    --interactive-border-action,\n    hsla(219, 42%, 31%, 1)\n  );\n  --button-outline-border-danger: var(\n    --interactive-border-support,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --button-border-width: var(--border-width, 1px);\n\n  --button-text-disabled: var(--text-disabled, hsla(0, 0%, 62%, 1));\n\n  --button-l-fontsize: var(--label-l, 1.13rem);\n  --button-m-fontsize: var(--label-m, 1rem);\n  --button-s-fontsize: var(--label-s, 0.88rem);\n  --nude-button-s-fontsize: var(--label-l, 1.13rem);\n  --nude-button-xs-fontsize: var(--label-m, 1rem);\n  --nude-button-xxs-fontsize: var(--label-s, 0.88rem);\n\n  --button-inverse-icon-color: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n  --button-primary-icon-color: var(--icon-primary, hsla(220, 42%, 24%, 1));\n\n  --icon-disabled-color: var(--icon-disabled, hsla(0, 0%, 62%, 1));\n\n  /* custom support nude buttons */\n  --nude-info-fill-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n  --nude-info-hover-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n  --nude-info-active-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n\n  --nude-success-fill-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n  --nude-success-hover-color: var(\n    --support-success-hover,\n    hsla(159, 51%, 41%, 1)\n  );\n  --nude-success-active-color: var(\n    --support-success-active,\n    hsla(159, 98%, 21%, 1)\n  );\n\n  --nude-warning-fill-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n  --nude-warning-hover-color: var(\n    --support-warning-hover,\n    hsla(33, 100%, 65%, 1)\n  );\n  --nude-warning-active-color: var(\n    --support-warning-active,\n    hsla(33, 79%, 45%, 1)\n  );\n\n  --nude-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n  --nude-danger-hover-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n  --nude-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --nude-support-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  /* toggle button css variables */\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n  --toggle-button-font-color: var(--text-secondary, hsla(219, 42%, 24%, 1));\n\n  display: inline-flex;\n  justify-content: center;\n  white-space: nowrap;\n  text-align: center;\n  align-items: center;\n  border-color: transparent;\n  border-width: var(--button-border-width);\n  font-weight: 600;\n  line-height: initial;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  outline: none !important;\n  outline-style: none;\n}\n.Button__dtxrx.stretch__iy1gZ {\n  width: 100%;\n}\n\n/*  \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.IconButton__EeuLT svg {\n  pointer-events: none;\n}\n\n/* primary styles */\n.primary__7r4wq {\n  background-color: var(--button-primary-fill-color);\n  color: var(--button-primary-font);\n}\n\n.primary__7r4wq svg path {\n  fill: var(--button-inverse-icon-color);\n}\n\n.primary__7r4wq:hover {\n  background-color: var(--button-primary-hover-color);\n}\n\n.primary__7r4wq:focus {\n  background-color: var(--button-primary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq:active {\n  background-color: var(--button-primary-active-color);\n}\n\n/* secondary styles */\n.secondary__twuXR {\n  background-color: var(--button-secondary-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.secondary__twuXR svg path,\n.outline__YB3Un svg path {\n  fill: var(--button-primary-icon-color);\n}\n\n.secondary__twuXR:hover {\n  background-color: var(--button-secondary-hover-color);\n}\n\n.secondary__twuXR:focus {\n  background-color: var(--button-secondary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.secondary__twuXR:active {\n  background-color: var(--button-secondary-active-color);\n}\n\n/* outline styles */\n.outline__YB3Un {\n  background-color: var(--button-outline-fill-color);\n  border: 1px solid var(--button-outline-border-inactive);\n  color: var(--button-outline-font);\n}\n\n.outline__YB3Un:hover {\n  background-color: var(--button-outline-hover-color);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:focus {\n  background-color: var(--button-outline-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:active {\n  background-color: var(--button-outline-active-color);\n}\n\n/* nude styles */\n.nude__gwht8 {\n  background: var(--button-nude-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.nude__gwht8:hover {\n  background-color: var(--button-nude-hover-color);\n}\n\n.nude__gwht8:focus {\n  background-color: var(--button-nude-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.nude__gwht8:active {\n  background-color: var(--button-nude-active-color);\n}\n\n/* danger styles */\n.primary__7r4wq.danger__NVFDo,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8) {\n  background-color: var(--button-danger-fill-color);\n  color: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo svg path,\n.IconButton__EeuLT.danger__NVFDo svg path {\n  fill: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:hover,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):hover:enabled \n/* enabled applies when disabled exists. \nIt applies styles only when in enabled state   */ {\n  background-color: var(--button-danger-hover-color);\n}\n\n.primary__7r4wq.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:focus,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):focus {\n  background-color: var(--button-danger-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq.danger__NVFDo:active,\n.outline__YB3Un.danger__NVFDo:active,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):active {\n  background-color: var(--button-danger-active-color);\n}\n\n.secondary__twuXR.danger__NVFDo,\n.nude__gwht8.danger__NVFDo,\n.outline__YB3Un.danger__NVFDo {\n  color: var(--button-danger-fill-color);\n}\n\n.secondary__twuXR.danger__NVFDo svg path,\n.nude__gwht8.danger__NVFDo svg path,\n.IconButton__EeuLT.nude__gwht8.danger__NVFDo svg path {\n  fill: var(--button-danger-fill-color);\n}\n\n.outline__YB3Un.danger__NVFDo {\n  border-color: var(--button-outline-border-danger);\n}\n\n.outline__YB3Un.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:active {\n  color: var(--button-outline-hover-font);\n}\n\n/* disabled styles */\n.primary__7r4wq:disabled,\n.secondary__twuXR:disabled,\n.outline__YB3Un:disabled,\n.primary__7r4wq.danger__NVFDo:disabled,\n.outline__YB3Un.danger__NVFDo:disabled,\n.nude__gwht8:disabled {\n  background-color: var(--button-disabled-color);\n  color: var(--button-text-disabled);\n  cursor: not-allowed;\n  border-color: transparent;\n}\n\n.nude__gwht8:disabled {\n  background-color: transparent;\n}\n\n.primary__7r4wq:disabled svg path,\n.secondary__twuXR:disabled svg path,\n.nude__gwht8:disabled svg path,\n.danger__NVFDo:disabled svg path,\n.IconButton__EeuLT.nude__gwht8:disabled svg path {\n  fill: var(--icon-disabled-color);\n}\n\n/* \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.qualifierContainer__xaGgg {\n  display: flex;\n  pointer-events: none;\n}\n\n.qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n}\n\n.end__keOvV {\n  flex-direction: row-reverse;\n}\n\n.end__keOvV > .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n/* sizes */\n.l__ija4T {\n  padding: 0.75rem 1.25rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.l__ija4T.qualifier__7Po6D {\n  padding: 0.75rem;\n}\n\n.m__72G7g {\n  padding: 0.5rem 1rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.m__72G7g.qualifier__7Po6D {\n  padding: 0.5rem;\n}\n\n.s__hxReC {\n  padding: 0.25rem 0.75rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.s__hxReC.qualifier__7Po6D {\n  padding: 0.25rem;\n}\n\n.outline__YB3Un.l__ija4T,\n.nude__gwht8.l__ija4T {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.outline__YB3Un.m__72G7g,\n.nude__gwht8.m__72G7g {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.outline__YB3Un.s__hxReC,\n.nude__gwht8.s__hxReC {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.IconButton__EeuLT.l__ija4T {\n  padding: 1rem;\n}\n\n.IconButton__EeuLT.m__72G7g {\n  padding: 0.75rem 1rem;\n}\n\n.IconButton__EeuLT.s__hxReC {\n  padding: 0.5rem 1rem;\n}\n\n.IconButton__EeuLT.nude__gwht8 {\n  padding: 0.25rem;\n}\n\n/* support nude button styles for Flag component */\n.nude__gwht8.support__hlgwX {\n  color: var(--nude-support-font-color);\n}\n\n/* danger */\n.nude__gwht8.support__hlgwX.supportDanger__vubrl {\n  background-color: var(--nude-danger-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:hover {\n  background-color: var(--nude-danger-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:active {\n  background-color: var(--nude-danger-active-color);\n}\n\n/* warning */\n.nude__gwht8.support__hlgwX.supportWarning__--1ul {\n  background-color: var(--nude-warning-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:hover {\n  background-color: var(--nude-warning-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:active {\n  background-color: var(--nude-warning-active-color);\n}\n\n/* success */\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3 {\n  background-color: var(--nude-success-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:hover {\n  background-color: var(--nude-success-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:active {\n  background-color: var(--nude-success-active-color);\n}\n\n/* info */\n.nude__gwht8.support__hlgwX.supportInfo__63yXY {\n  background-color: var(--nude-info-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:hover {\n  background-color: var(--nude-info-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:active {\n  background-color: var(--nude-info-active-color);\n}\n\n/* toggle button styles */\n.toggleButton__gAz3- {\n  background-color: var(--toggle-button-background-color);\n  color: var(--toggle-button-font-color);\n  padding: 0.5px 1.67rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.smallToggle__OKiE- {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__Ct2e7 {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__MBu7B {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__MIVZB {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__5ewyQ {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__gAz3-:hover,\n.toggleButton__gAz3-:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__gAz3-:focus {\n  border-color: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n}\n\n.on__GqssJ {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-default,\n    hsla(219, 42%, 31%, 1)\n  );\n  --toggle-button-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ:hover,\n.on__GqssJ:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__gAz3-:disabled,\n.on__GqssJ:disabled {\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n}\n\n.on__GqssJ:disabled {\n  --toggle-button-background-color: var(\n    --interactive-disabled,\n    hsla(0, 0%, 86%, 1)\n  );\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n}\n\n.link__x1aOq {\n  border-style: solid;\n  text-decoration: underline;\n}\n\n/* rtl styles */\n*[dir=\"rtl\"] .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .end__keOvV > .qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n  margin-left: 0;\n}\n";
-var styles = {"Button":"Button__dtxrx","stretch":"stretch__iy1gZ","IconButton":"IconButton__EeuLT","primary":"primary__7r4wq","secondary":"secondary__twuXR","outline":"outline__YB3Un","nude":"nude__gwht8","danger":"danger__NVFDo","qualifierContainer":"qualifierContainer__xaGgg","end":"end__keOvV","l":"l__ija4T","qualifier":"qualifier__7Po6D","m":"m__72G7g","s":"s__hxReC","support":"support__hlgwX","supportDanger":"supportDanger__vubrl","supportWarning":"supportWarning__--1ul","supportSuccess":"supportSuccess__MyDs3","supportInfo":"supportInfo__63yXY","toggleButton":"toggleButton__gAz3-","smallToggle":"smallToggle__OKiE-","largeToggle":"largeToggle__Ct2e7","iconToggle":"iconToggle__MBu7B","smallIconToggle":"smallIconToggle__MIVZB","largeIconToggle":"largeIconToggle__5ewyQ","on":"on__GqssJ","link":"link__x1aOq"};
-var stylesheet=".Button__dtxrx {\n  /* default custom properties */\n  --button-border-radius: var(--roundness-1, 2px);\n  --button-primary-fill-color: var(\n    --interactive-fill-brand-default,\n    hsla(127, 100%, 33%, 1)\n  );\n  --button-secondary-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-outline-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-nude-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n\n  --button-primary-active-color: var(\n    --interactive-fill-brand-active,\n    hsla(127, 100%, 27%, 1)\n  );\n  --button-primary-hover-color: var(\n    --interactive-fill-brand-hover,\n    hsla(127, 57%, 47%, 1)\n  );\n  --button-disabled-color: var(--interactive-disabled, hsla(0, 0%, 86%, 1));\n\n  --button-secondary-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-secondary-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n  --button-danger-hover-color: var(\n    --support-danger-hover,\n    hsla(12, 76%, 56%, 1)\n  );\n\n  --button-outline-active-color: var(\n    --interactive-fill-selected-active,\n    hsla(219, 42%, 24%, 1)\n  );\n  --button-outline-hover-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n\n  --button-nude-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-nude-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-primary-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-secondary-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-danger-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-outline-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-outline-hover-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  --button-border-focus: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n  --button-outline-border-inactive: var(\n    --interactive-border-action,\n    hsla(219, 42%, 31%, 1)\n  );\n  --button-outline-border-danger: var(\n    --interactive-border-support,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --button-border-width: var(--border-width, 1px);\n\n  --button-text-disabled: var(--text-disabled, hsla(0, 0%, 62%, 1));\n\n  --button-l-fontsize: var(--label-l, 1.13rem);\n  --button-m-fontsize: var(--label-m, 1rem);\n  --button-s-fontsize: var(--label-s, 0.88rem);\n  --nude-button-s-fontsize: var(--label-l, 1.13rem);\n  --nude-button-xs-fontsize: var(--label-m, 1rem);\n  --nude-button-xxs-fontsize: var(--label-s, 0.88rem);\n\n  --button-inverse-icon-color: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n  --button-primary-icon-color: var(--icon-primary, hsla(220, 42%, 24%, 1));\n\n  --icon-disabled-color: var(--icon-disabled, hsla(0, 0%, 62%, 1));\n\n  /* custom support nude buttons */\n  --nude-info-fill-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n  --nude-info-hover-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n  --nude-info-active-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n\n  --nude-success-fill-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n  --nude-success-hover-color: var(\n    --support-success-hover,\n    hsla(159, 51%, 41%, 1)\n  );\n  --nude-success-active-color: var(\n    --support-success-active,\n    hsla(159, 98%, 21%, 1)\n  );\n\n  --nude-warning-fill-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n  --nude-warning-hover-color: var(\n    --support-warning-hover,\n    hsla(33, 100%, 65%, 1)\n  );\n  --nude-warning-active-color: var(\n    --support-warning-active,\n    hsla(33, 79%, 45%, 1)\n  );\n\n  --nude-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n  --nude-danger-hover-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n  --nude-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --nude-support-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  /* toggle button css variables */\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n  --toggle-button-font-color: var(--text-secondary, hsla(219, 42%, 24%, 1));\n\n  display: inline-flex;\n  justify-content: center;\n  white-space: nowrap;\n  text-align: center;\n  align-items: center;\n  border-color: transparent;\n  border-width: var(--button-border-width);\n  font-weight: 600;\n  line-height: initial;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  outline: none !important;\n  outline-style: none;\n}\n.Button__dtxrx.stretch__iy1gZ {\n  width: 100%;\n}\n\n/*  \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.IconButton__EeuLT svg {\n  pointer-events: none;\n}\n\n/* primary styles */\n.primary__7r4wq {\n  background-color: var(--button-primary-fill-color);\n  color: var(--button-primary-font);\n}\n\n.primary__7r4wq svg path {\n  fill: var(--button-inverse-icon-color);\n}\n\n.primary__7r4wq:hover {\n  background-color: var(--button-primary-hover-color);\n}\n\n.primary__7r4wq:focus {\n  background-color: var(--button-primary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq:active {\n  background-color: var(--button-primary-active-color);\n}\n\n/* secondary styles */\n.secondary__twuXR {\n  background-color: var(--button-secondary-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.secondary__twuXR svg path,\n.outline__YB3Un svg path {\n  fill: var(--button-primary-icon-color);\n}\n\n.secondary__twuXR:hover {\n  background-color: var(--button-secondary-hover-color);\n}\n\n.secondary__twuXR:focus {\n  background-color: var(--button-secondary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.secondary__twuXR:active {\n  background-color: var(--button-secondary-active-color);\n}\n\n/* outline styles */\n.outline__YB3Un {\n  background-color: var(--button-outline-fill-color);\n  border: 1px solid var(--button-outline-border-inactive);\n  color: var(--button-outline-font);\n}\n\n.outline__YB3Un:hover {\n  background-color: var(--button-outline-hover-color);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:focus {\n  background-color: var(--button-outline-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:active {\n  background-color: var(--button-outline-active-color);\n}\n\n/* nude styles */\n.nude__gwht8 {\n  background: var(--button-nude-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.nude__gwht8:hover {\n  background-color: var(--button-nude-hover-color);\n}\n\n.nude__gwht8:focus {\n  background-color: var(--button-nude-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.nude__gwht8:active {\n  background-color: var(--button-nude-active-color);\n}\n\n/* danger styles */\n.primary__7r4wq.danger__NVFDo,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8) {\n  background-color: var(--button-danger-fill-color);\n  color: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo svg path,\n.IconButton__EeuLT.danger__NVFDo svg path {\n  fill: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:hover,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):hover:enabled \n/* enabled applies when disabled exists. \nIt applies styles only when in enabled state   */ {\n  background-color: var(--button-danger-hover-color);\n}\n\n.primary__7r4wq.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:focus,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):focus {\n  background-color: var(--button-danger-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq.danger__NVFDo:active,\n.outline__YB3Un.danger__NVFDo:active,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):active {\n  background-color: var(--button-danger-active-color);\n}\n\n.secondary__twuXR.danger__NVFDo,\n.nude__gwht8.danger__NVFDo,\n.outline__YB3Un.danger__NVFDo {\n  color: var(--button-danger-fill-color);\n}\n\n.secondary__twuXR.danger__NVFDo svg path,\n.nude__gwht8.danger__NVFDo svg path,\n.IconButton__EeuLT.nude__gwht8.danger__NVFDo svg path {\n  fill: var(--button-danger-fill-color);\n}\n\n.outline__YB3Un.danger__NVFDo {\n  border-color: var(--button-outline-border-danger);\n}\n\n.outline__YB3Un.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:active {\n  color: var(--button-outline-hover-font);\n}\n\n/* disabled styles */\n.primary__7r4wq:disabled,\n.secondary__twuXR:disabled,\n.outline__YB3Un:disabled,\n.primary__7r4wq.danger__NVFDo:disabled,\n.outline__YB3Un.danger__NVFDo:disabled,\n.nude__gwht8:disabled {\n  background-color: var(--button-disabled-color);\n  color: var(--button-text-disabled);\n  cursor: not-allowed;\n  border-color: transparent;\n}\n\n.nude__gwht8:disabled {\n  background-color: transparent;\n}\n\n.primary__7r4wq:disabled svg path,\n.secondary__twuXR:disabled svg path,\n.nude__gwht8:disabled svg path,\n.danger__NVFDo:disabled svg path,\n.IconButton__EeuLT.nude__gwht8:disabled svg path {\n  fill: var(--icon-disabled-color);\n}\n\n/* \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.qualifierContainer__xaGgg {\n  display: flex;\n  pointer-events: none;\n}\n\n.qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n}\n\n.end__keOvV {\n  flex-direction: row-reverse;\n}\n\n.end__keOvV > .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n/* sizes */\n.l__ija4T {\n  padding: 0.75rem 1.25rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.l__ija4T.qualifier__7Po6D {\n  padding: 0.75rem;\n}\n\n.m__72G7g {\n  padding: 0.5rem 1rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.m__72G7g.qualifier__7Po6D {\n  padding: 0.5rem;\n}\n\n.s__hxReC {\n  padding: 0.25rem 0.75rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.s__hxReC.qualifier__7Po6D {\n  padding: 0.25rem;\n}\n\n.outline__YB3Un.l__ija4T,\n.nude__gwht8.l__ija4T {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.outline__YB3Un.m__72G7g,\n.nude__gwht8.m__72G7g {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.outline__YB3Un.s__hxReC,\n.nude__gwht8.s__hxReC {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.IconButton__EeuLT.l__ija4T {\n  padding: 1rem;\n}\n\n.IconButton__EeuLT.m__72G7g {\n  padding: 0.75rem 1rem;\n}\n\n.IconButton__EeuLT.s__hxReC {\n  padding: 0.5rem 1rem;\n}\n\n.IconButton__EeuLT.nude__gwht8 {\n  padding: 0.25rem;\n}\n\n/* support nude button styles for Flag component */\n.nude__gwht8.support__hlgwX {\n  color: var(--nude-support-font-color);\n}\n\n/* danger */\n.nude__gwht8.support__hlgwX.supportDanger__vubrl {\n  background-color: var(--nude-danger-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:hover {\n  background-color: var(--nude-danger-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:active {\n  background-color: var(--nude-danger-active-color);\n}\n\n/* warning */\n.nude__gwht8.support__hlgwX.supportWarning__--1ul {\n  background-color: var(--nude-warning-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:hover {\n  background-color: var(--nude-warning-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:active {\n  background-color: var(--nude-warning-active-color);\n}\n\n/* success */\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3 {\n  background-color: var(--nude-success-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:hover {\n  background-color: var(--nude-success-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:active {\n  background-color: var(--nude-success-active-color);\n}\n\n/* info */\n.nude__gwht8.support__hlgwX.supportInfo__63yXY {\n  background-color: var(--nude-info-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:hover {\n  background-color: var(--nude-info-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:active {\n  background-color: var(--nude-info-active-color);\n}\n\n/* toggle button styles */\n.toggleButton__gAz3- {\n  background-color: var(--toggle-button-background-color);\n  color: var(--toggle-button-font-color);\n  padding: 0.5px 1.67rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.smallToggle__OKiE- {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__Ct2e7 {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__MBu7B {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__MIVZB {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__5ewyQ {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__gAz3-:hover,\n.toggleButton__gAz3-:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__gAz3-:focus {\n  border-color: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n}\n\n.on__GqssJ {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-default,\n    hsla(219, 42%, 31%, 1)\n  );\n  --toggle-button-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ:hover,\n.on__GqssJ:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__gAz3-:disabled,\n.on__GqssJ:disabled {\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n}\n\n.on__GqssJ:disabled {\n  --toggle-button-background-color: var(\n    --interactive-disabled,\n    hsla(0, 0%, 86%, 1)\n  );\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n}\n\n.link__x1aOq {\n  border-style: solid;\n  text-decoration: underline;\n}\n\n/* rtl styles */\n*[dir=\"rtl\"] .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .end__keOvV > .qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n  margin-left: 0;\n}\n";
+var css_248z = ".Button__dtxrx {\n  /* default custom properties */\n  --button-border-radius: var(--roundness-1, 2px);\n  --button-primary-fill-color: var(\n    --interactive-fill-brand-default,\n    hsla(127, 100%, 33%, 1)\n  );\n  --button-secondary-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-outline-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-nude-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n\n  --button-primary-active-color: var(\n    --interactive-fill-brand-active,\n    hsla(127, 100%, 27%, 1)\n  );\n  --button-primary-hover-color: var(\n    --interactive-fill-brand-hover,\n    hsla(127, 57%, 47%, 1)\n  );\n  --button-disabled-color: var(--interactive-disabled, hsla(0, 0%, 86%, 1));\n\n  --button-secondary-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-secondary-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n  --button-danger-hover-color: var(\n    --support-danger-hover,\n    hsla(12, 76%, 56%, 1)\n  );\n\n  --button-outline-active-color: var(\n    --interactive-fill-selected-active,\n    hsla(219, 42%, 24%, 1)\n  );\n  --button-outline-hover-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n\n  --button-nude-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-nude-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-primary-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-secondary-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-danger-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-outline-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-outline-hover-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  --button-border-focus: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n  --button-outline-border-inactive: var(\n    --interactive-border-action,\n    hsla(219, 42%, 31%, 1)\n  );\n  --button-outline-border-danger: var(\n    --interactive-border-support,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --button-border-width: var(--border-width, 1px);\n\n  --button-text-disabled: var(--text-disabled, hsla(0, 0%, 62%, 1));\n\n  --button-l-fontsize: var(--label-l, 1.13rem);\n  --button-m-fontsize: var(--label-m, 1rem);\n  --button-s-fontsize: var(--label-s, 0.88rem);\n  --nude-button-s-fontsize: var(--label-l, 1.13rem);\n  --nude-button-xs-fontsize: var(--label-m, 1rem);\n  --nude-button-xxs-fontsize: var(--label-s, 0.88rem);\n\n  --button-inverse-icon-color: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n  --button-primary-icon-color: var(--icon-primary, hsla(220, 42%, 24%, 1));\n\n  --icon-disabled-color: var(--icon-disabled, hsla(0, 0%, 62%, 1));\n\n  /* custom support nude buttons */\n  --nude-info-fill-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n  --nude-info-hover-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n  --nude-info-active-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n\n  --nude-success-fill-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n  --nude-success-hover-color: var(\n    --support-success-hover,\n    hsla(159, 51%, 41%, 1)\n  );\n  --nude-success-active-color: var(\n    --support-success-active,\n    hsla(159, 98%, 21%, 1)\n  );\n\n  --nude-warning-fill-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n  --nude-warning-hover-color: var(\n    --support-warning-hover,\n    hsla(33, 100%, 65%, 1)\n  );\n  --nude-warning-active-color: var(\n    --support-warning-active,\n    hsla(33, 79%, 45%, 1)\n  );\n\n  --nude-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n  --nude-danger-hover-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n  --nude-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --nude-support-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  /* toggle button css variables */\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n  --toggle-button-font-color: var(--text-secondary, hsla(219, 42%, 24%, 1));\n\n  display: inline-flex;\n  justify-content: center;\n  white-space: nowrap;\n  text-align: center;\n  align-items: center;\n  border-color: transparent;\n  border-width: var(--button-border-width);\n  font-weight: 600;\n  line-height: initial;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  outline: none !important;\n  outline-style: none;\n}\n.Button__dtxrx.stretch__iy1gZ {\n  width: 100%;\n}\n\n/*  \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.IconButton__EeuLT svg {\n  pointer-events: none;\n}\n\n/* primary styles */\n.primary__7r4wq {\n  background-color: var(--button-primary-fill-color);\n  color: var(--button-primary-font);\n}\n\n.primary__7r4wq svg path {\n  fill: var(--button-inverse-icon-color);\n}\n\n.primary__7r4wq:hover {\n  background-color: var(--button-primary-hover-color);\n}\n\n.primary__7r4wq:focus {\n  background-color: var(--button-primary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq:active {\n  background-color: var(--button-primary-active-color);\n}\n\n/* secondary styles */\n.secondary__twuXR {\n  background-color: var(--button-secondary-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.secondary__twuXR svg path,\n.outline__YB3Un svg path {\n  fill: var(--button-primary-icon-color);\n}\n\n.iconInheritsColor__qUH9n svg path {\n  fill: currentColor;\n}\n\n.secondary__twuXR:hover {\n  background-color: var(--button-secondary-hover-color);\n}\n\n.secondary__twuXR:focus {\n  background-color: var(--button-secondary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.secondary__twuXR:active {\n  background-color: var(--button-secondary-active-color);\n}\n\n/* outline styles */\n.outline__YB3Un {\n  background-color: var(--button-outline-fill-color);\n  border: 1px solid var(--button-outline-border-inactive);\n  color: var(--button-outline-font);\n}\n\n.outline__YB3Un:hover {\n  background-color: var(--button-outline-hover-color);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:focus {\n  background-color: var(--button-outline-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:active {\n  background-color: var(--button-outline-active-color);\n}\n\n/* nude styles */\n.nude__gwht8 {\n  background: var(--button-nude-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.nude__gwht8:hover {\n  background-color: var(--button-nude-hover-color);\n}\n\n.nude__gwht8:focus {\n  background-color: var(--button-nude-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.nude__gwht8:active {\n  background-color: var(--button-nude-active-color);\n}\n\n/* danger styles */\n.primary__7r4wq.danger__NVFDo,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8) {\n  background-color: var(--button-danger-fill-color);\n  color: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo svg path,\n.IconButton__EeuLT.danger__NVFDo svg path {\n  fill: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:hover,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):hover:enabled \n/* enabled applies when disabled exists. \nIt applies styles only when in enabled state   */ {\n  background-color: var(--button-danger-hover-color);\n}\n\n.primary__7r4wq.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:focus,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):focus {\n  background-color: var(--button-danger-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq.danger__NVFDo:active,\n.outline__YB3Un.danger__NVFDo:active,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):active {\n  background-color: var(--button-danger-active-color);\n}\n\n.secondary__twuXR.danger__NVFDo,\n.nude__gwht8.danger__NVFDo,\n.outline__YB3Un.danger__NVFDo {\n  color: var(--button-danger-fill-color);\n}\n\n.secondary__twuXR.danger__NVFDo svg path,\n.nude__gwht8.danger__NVFDo svg path,\n.IconButton__EeuLT.nude__gwht8.danger__NVFDo svg path {\n  fill: var(--button-danger-fill-color);\n}\n\n.outline__YB3Un.danger__NVFDo {\n  border-color: var(--button-outline-border-danger);\n}\n\n.outline__YB3Un.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:active {\n  color: var(--button-outline-hover-font);\n}\n\n/* disabled styles */\n.primary__7r4wq:disabled,\n.secondary__twuXR:disabled,\n.outline__YB3Un:disabled,\n.primary__7r4wq.danger__NVFDo:disabled,\n.outline__YB3Un.danger__NVFDo:disabled,\n.nude__gwht8:disabled {\n  background-color: var(--button-disabled-color);\n  color: var(--button-text-disabled);\n  cursor: not-allowed;\n  border-color: transparent;\n}\n\n.nude__gwht8:disabled {\n  background-color: transparent;\n}\n\n.primary__7r4wq:disabled svg path,\n.secondary__twuXR:disabled svg path,\n.nude__gwht8:disabled svg path,\n.danger__NVFDo:disabled svg path,\n.IconButton__EeuLT.nude__gwht8:disabled svg path {\n  fill: var(--icon-disabled-color);\n}\n\n/* \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.qualifierContainer__xaGgg {\n  display: flex;\n  pointer-events: none;\n}\n\n.qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n}\n\n.end__keOvV {\n  flex-direction: row-reverse;\n}\n\n.end__keOvV > .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n/* sizes */\n.l__ija4T {\n  padding: 0.75rem 1.25rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.l__ija4T.qualifier__7Po6D {\n  padding: 0.75rem;\n}\n\n.m__72G7g {\n  padding: 0.5rem 1rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.m__72G7g.qualifier__7Po6D {\n  padding: 0.5rem;\n}\n\n.s__hxReC {\n  padding: 0.25rem 0.75rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.s__hxReC.qualifier__7Po6D {\n  padding: 0.25rem;\n}\n\n.outline__YB3Un.l__ija4T,\n.nude__gwht8.l__ija4T {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.outline__YB3Un.m__72G7g,\n.nude__gwht8.m__72G7g {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.outline__YB3Un.s__hxReC,\n.nude__gwht8.s__hxReC {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.IconButton__EeuLT.l__ija4T {\n  padding: 1rem;\n}\n\n.IconButton__EeuLT.m__72G7g {\n  padding: 0.75rem 1rem;\n}\n\n.IconButton__EeuLT.s__hxReC {\n  padding: 0.5rem 1rem;\n}\n\n.IconButton__EeuLT.nude__gwht8 {\n  padding: 0.25rem;\n}\n\n/* support nude button styles for Flag component */\n.nude__gwht8.support__hlgwX {\n  color: var(--nude-support-font-color);\n}\n\n/* danger */\n.nude__gwht8.support__hlgwX.supportDanger__vubrl {\n  background-color: var(--nude-danger-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:hover {\n  background-color: var(--nude-danger-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:active {\n  background-color: var(--nude-danger-active-color);\n}\n\n/* warning */\n.nude__gwht8.support__hlgwX.supportWarning__--1ul {\n  background-color: var(--nude-warning-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:hover {\n  background-color: var(--nude-warning-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:active {\n  background-color: var(--nude-warning-active-color);\n}\n\n/* success */\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3 {\n  background-color: var(--nude-success-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:hover {\n  background-color: var(--nude-success-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:active {\n  background-color: var(--nude-success-active-color);\n}\n\n/* info */\n.nude__gwht8.support__hlgwX.supportInfo__63yXY {\n  background-color: var(--nude-info-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:hover {\n  background-color: var(--nude-info-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:active {\n  background-color: var(--nude-info-active-color);\n}\n\n/* toggle button styles */\n.toggleButton__gAz3- {\n  background-color: var(--toggle-button-background-color);\n  color: var(--toggle-button-font-color);\n  padding: 0.5px 1.67rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.smallToggle__OKiE- {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__Ct2e7 {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__MBu7B {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__MIVZB {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__5ewyQ {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__gAz3-:hover,\n.toggleButton__gAz3-:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__gAz3-:focus {\n  border-color: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n}\n\n.on__GqssJ {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-default,\n    hsla(219, 42%, 31%, 1)\n  );\n  --toggle-button-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ:hover,\n.on__GqssJ:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__gAz3-:disabled,\n.on__GqssJ:disabled {\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n}\n\n.on__GqssJ:disabled {\n  --toggle-button-background-color: var(\n    --interactive-disabled,\n    hsla(0, 0%, 86%, 1)\n  );\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n}\n\n.link__x1aOq {\n  border-style: solid;\n  text-decoration: underline;\n}\n\n/* rtl styles */\n*[dir=\"rtl\"] .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .end__keOvV > .qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n  margin-left: 0;\n}\n";
+var styles = {"Button":"Button__dtxrx","stretch":"stretch__iy1gZ","IconButton":"IconButton__EeuLT","primary":"primary__7r4wq","secondary":"secondary__twuXR","outline":"outline__YB3Un","iconInheritsColor":"iconInheritsColor__qUH9n","nude":"nude__gwht8","danger":"danger__NVFDo","qualifierContainer":"qualifierContainer__xaGgg","end":"end__keOvV","l":"l__ija4T","qualifier":"qualifier__7Po6D","m":"m__72G7g","s":"s__hxReC","support":"support__hlgwX","supportDanger":"supportDanger__vubrl","supportWarning":"supportWarning__--1ul","supportSuccess":"supportSuccess__MyDs3","supportInfo":"supportInfo__63yXY","toggleButton":"toggleButton__gAz3-","smallToggle":"smallToggle__OKiE-","largeToggle":"largeToggle__Ct2e7","iconToggle":"iconToggle__MBu7B","smallIconToggle":"smallIconToggle__MIVZB","largeIconToggle":"largeIconToggle__5ewyQ","on":"on__GqssJ","link":"link__x1aOq"};
+var stylesheet=".Button__dtxrx {\n  /* default custom properties */\n  --button-border-radius: var(--roundness-1, 2px);\n  --button-primary-fill-color: var(\n    --interactive-fill-brand-default,\n    hsla(127, 100%, 33%, 1)\n  );\n  --button-secondary-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-outline-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-nude-fill-color: var(--interactive-fill-alternate, transparent);\n  --button-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n\n  --button-primary-active-color: var(\n    --interactive-fill-brand-active,\n    hsla(127, 100%, 27%, 1)\n  );\n  --button-primary-hover-color: var(\n    --interactive-fill-brand-hover,\n    hsla(127, 57%, 47%, 1)\n  );\n  --button-disabled-color: var(--interactive-disabled, hsla(0, 0%, 86%, 1));\n\n  --button-secondary-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-secondary-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n  --button-danger-hover-color: var(\n    --support-danger-hover,\n    hsla(12, 76%, 56%, 1)\n  );\n\n  --button-outline-active-color: var(\n    --interactive-fill-selected-active,\n    hsla(219, 42%, 24%, 1)\n  );\n  --button-outline-hover-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n\n  --button-nude-active-color: var(\n    --interactive-fill-active,\n    hsla(220, 17%, 93%, 1)\n  );\n  --button-nude-hover-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n\n  --button-primary-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-secondary-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-danger-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n  --button-outline-font: var(--text-secondary, hsla(219, 42%, 24%, 1));\n  --button-outline-hover-font: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  --button-border-focus: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n  --button-outline-border-inactive: var(\n    --interactive-border-action,\n    hsla(219, 42%, 31%, 1)\n  );\n  --button-outline-border-danger: var(\n    --interactive-border-support,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --button-border-width: var(--border-width, 1px);\n\n  --button-text-disabled: var(--text-disabled, hsla(0, 0%, 62%, 1));\n\n  --button-l-fontsize: var(--label-l, 1.13rem);\n  --button-m-fontsize: var(--label-m, 1rem);\n  --button-s-fontsize: var(--label-s, 0.88rem);\n  --nude-button-s-fontsize: var(--label-l, 1.13rem);\n  --nude-button-xs-fontsize: var(--label-m, 1rem);\n  --nude-button-xxs-fontsize: var(--label-s, 0.88rem);\n\n  --button-inverse-icon-color: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n  --button-primary-icon-color: var(--icon-primary, hsla(220, 42%, 24%, 1));\n\n  --icon-disabled-color: var(--icon-disabled, hsla(0, 0%, 62%, 1));\n\n  /* custom support nude buttons */\n  --nude-info-fill-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n  --nude-info-hover-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n  --nude-info-active-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n\n  --nude-success-fill-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n  --nude-success-hover-color: var(\n    --support-success-hover,\n    hsla(159, 51%, 41%, 1)\n  );\n  --nude-success-active-color: var(\n    --support-success-active,\n    hsla(159, 98%, 21%, 1)\n  );\n\n  --nude-warning-fill-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n  --nude-warning-hover-color: var(\n    --support-warning-hover,\n    hsla(33, 100%, 65%, 1)\n  );\n  --nude-warning-active-color: var(\n    --support-warning-active,\n    hsla(33, 79%, 45%, 1)\n  );\n\n  --nude-danger-fill-color: var(\n    --support-danger-default,\n    hsla(12, 92%, 45%, 1)\n  );\n  --nude-danger-hover-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n  --nude-danger-active-color: var(\n    --support-danger-active,\n    hsla(12, 92%, 36%, 1)\n  );\n\n  --nude-support-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n\n  /* toggle button css variables */\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n  --toggle-button-font-color: var(--text-secondary, hsla(219, 42%, 24%, 1));\n\n  display: inline-flex;\n  justify-content: center;\n  white-space: nowrap;\n  text-align: center;\n  align-items: center;\n  border-color: transparent;\n  border-width: var(--button-border-width);\n  font-weight: 600;\n  line-height: initial;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  outline: none !important;\n  outline-style: none;\n}\n.Button__dtxrx.stretch__iy1gZ {\n  width: 100%;\n}\n\n/*  \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.IconButton__EeuLT svg {\n  pointer-events: none;\n}\n\n/* primary styles */\n.primary__7r4wq {\n  background-color: var(--button-primary-fill-color);\n  color: var(--button-primary-font);\n}\n\n.primary__7r4wq svg path {\n  fill: var(--button-inverse-icon-color);\n}\n\n.primary__7r4wq:hover {\n  background-color: var(--button-primary-hover-color);\n}\n\n.primary__7r4wq:focus {\n  background-color: var(--button-primary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq:active {\n  background-color: var(--button-primary-active-color);\n}\n\n/* secondary styles */\n.secondary__twuXR {\n  background-color: var(--button-secondary-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.secondary__twuXR svg path,\n.outline__YB3Un svg path {\n  fill: var(--button-primary-icon-color);\n}\n\n.iconInheritsColor__qUH9n svg path {\n  fill: currentColor;\n}\n\n.secondary__twuXR:hover {\n  background-color: var(--button-secondary-hover-color);\n}\n\n.secondary__twuXR:focus {\n  background-color: var(--button-secondary-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.secondary__twuXR:active {\n  background-color: var(--button-secondary-active-color);\n}\n\n/* outline styles */\n.outline__YB3Un {\n  background-color: var(--button-outline-fill-color);\n  border: 1px solid var(--button-outline-border-inactive);\n  color: var(--button-outline-font);\n}\n\n.outline__YB3Un:hover {\n  background-color: var(--button-outline-hover-color);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:focus {\n  background-color: var(--button-outline-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__YB3Un:active {\n  background-color: var(--button-outline-active-color);\n}\n\n/* nude styles */\n.nude__gwht8 {\n  background: var(--button-nude-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.nude__gwht8:hover {\n  background-color: var(--button-nude-hover-color);\n}\n\n.nude__gwht8:focus {\n  background-color: var(--button-nude-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.nude__gwht8:active {\n  background-color: var(--button-nude-active-color);\n}\n\n/* danger styles */\n.primary__7r4wq.danger__NVFDo,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8) {\n  background-color: var(--button-danger-fill-color);\n  color: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo svg path,\n.IconButton__EeuLT.danger__NVFDo svg path {\n  fill: var(--button-danger-font);\n}\n\n.primary__7r4wq.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:hover,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):hover:enabled \n/* enabled applies when disabled exists. \nIt applies styles only when in enabled state   */ {\n  background-color: var(--button-danger-hover-color);\n}\n\n.primary__7r4wq.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:focus,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):focus {\n  background-color: var(--button-danger-hover-color);\n  border-width: var(--button-border-width);\n  border-color: var(--button-border-focus);\n}\n\n.primary__7r4wq.danger__NVFDo:active,\n.outline__YB3Un.danger__NVFDo:active,\n.IconButton__EeuLT.danger__NVFDo:not(.nude__gwht8):active {\n  background-color: var(--button-danger-active-color);\n}\n\n.secondary__twuXR.danger__NVFDo,\n.nude__gwht8.danger__NVFDo,\n.outline__YB3Un.danger__NVFDo {\n  color: var(--button-danger-fill-color);\n}\n\n.secondary__twuXR.danger__NVFDo svg path,\n.nude__gwht8.danger__NVFDo svg path,\n.IconButton__EeuLT.nude__gwht8.danger__NVFDo svg path {\n  fill: var(--button-danger-fill-color);\n}\n\n.outline__YB3Un.danger__NVFDo {\n  border-color: var(--button-outline-border-danger);\n}\n\n.outline__YB3Un.danger__NVFDo:hover,\n.outline__YB3Un.danger__NVFDo:focus,\n.outline__YB3Un.danger__NVFDo:active {\n  color: var(--button-outline-hover-font);\n}\n\n/* disabled styles */\n.primary__7r4wq:disabled,\n.secondary__twuXR:disabled,\n.outline__YB3Un:disabled,\n.primary__7r4wq.danger__NVFDo:disabled,\n.outline__YB3Un.danger__NVFDo:disabled,\n.nude__gwht8:disabled {\n  background-color: var(--button-disabled-color);\n  color: var(--button-text-disabled);\n  cursor: not-allowed;\n  border-color: transparent;\n}\n\n.nude__gwht8:disabled {\n  background-color: transparent;\n}\n\n.primary__7r4wq:disabled svg path,\n.secondary__twuXR:disabled svg path,\n.nude__gwht8:disabled svg path,\n.danger__NVFDo:disabled svg path,\n.IconButton__EeuLT.nude__gwht8:disabled svg path {\n  fill: var(--icon-disabled-color);\n}\n\n/* \n* Pointer events none is added to stop event propagation from svg (or path) back to the user \n*/\n\n.qualifierContainer__xaGgg {\n  display: flex;\n  pointer-events: none;\n}\n\n.qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n}\n\n.end__keOvV {\n  flex-direction: row-reverse;\n}\n\n.end__keOvV > .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n/* sizes */\n.l__ija4T {\n  padding: 0.75rem 1.25rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.l__ija4T.qualifier__7Po6D {\n  padding: 0.75rem;\n}\n\n.m__72G7g {\n  padding: 0.5rem 1rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.m__72G7g.qualifier__7Po6D {\n  padding: 0.5rem;\n}\n\n.s__hxReC {\n  padding: 0.25rem 0.75rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.s__hxReC.qualifier__7Po6D {\n  padding: 0.25rem;\n}\n\n.outline__YB3Un.l__ija4T,\n.nude__gwht8.l__ija4T {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.outline__YB3Un.m__72G7g,\n.nude__gwht8.m__72G7g {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.outline__YB3Un.s__hxReC,\n.nude__gwht8.s__hxReC {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.IconButton__EeuLT.l__ija4T {\n  padding: 1rem;\n}\n\n.IconButton__EeuLT.m__72G7g {\n  padding: 0.75rem 1rem;\n}\n\n.IconButton__EeuLT.s__hxReC {\n  padding: 0.5rem 1rem;\n}\n\n.IconButton__EeuLT.nude__gwht8 {\n  padding: 0.25rem;\n}\n\n/* support nude button styles for Flag component */\n.nude__gwht8.support__hlgwX {\n  color: var(--nude-support-font-color);\n}\n\n/* danger */\n.nude__gwht8.support__hlgwX.supportDanger__vubrl {\n  background-color: var(--nude-danger-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:hover {\n  background-color: var(--nude-danger-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportDanger__vubrl:active {\n  background-color: var(--nude-danger-active-color);\n}\n\n/* warning */\n.nude__gwht8.support__hlgwX.supportWarning__--1ul {\n  background-color: var(--nude-warning-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:hover {\n  background-color: var(--nude-warning-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportWarning__--1ul:active {\n  background-color: var(--nude-warning-active-color);\n}\n\n/* success */\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3 {\n  background-color: var(--nude-success-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:hover {\n  background-color: var(--nude-success-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportSuccess__MyDs3:active {\n  background-color: var(--nude-success-active-color);\n}\n\n/* info */\n.nude__gwht8.support__hlgwX.supportInfo__63yXY {\n  background-color: var(--nude-info-fill-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:hover {\n  background-color: var(--nude-info-hover-color);\n}\n\n.nude__gwht8.support__hlgwX.supportInfo__63yXY:active {\n  background-color: var(--nude-info-active-color);\n}\n\n/* toggle button styles */\n.toggleButton__gAz3- {\n  background-color: var(--toggle-button-background-color);\n  color: var(--toggle-button-font-color);\n  padding: 0.5px 1.67rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.smallToggle__OKiE- {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__Ct2e7 {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__MBu7B {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__MIVZB {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__5ewyQ {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__gAz3-:hover,\n.toggleButton__gAz3-:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__gAz3-:focus {\n  border-color: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n}\n\n.on__GqssJ {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-default,\n    hsla(219, 42%, 31%, 1)\n  );\n  --toggle-button-font-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__GqssJ:hover,\n.on__GqssJ:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__gAz3-:disabled,\n.on__GqssJ:disabled {\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n  --toggle-button-background-color: var(\n    --interactive-fill-alternate,\n    transparent\n  );\n}\n\n.on__GqssJ:disabled {\n  --toggle-button-background-color: var(\n    --interactive-disabled,\n    hsla(0, 0%, 86%, 1)\n  );\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n}\n\n.link__x1aOq {\n  border-style: solid;\n  text-decoration: underline;\n}\n\n/* rtl styles */\n*[dir=\"rtl\"] .qualifierContainer__xaGgg {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .end__keOvV > .qualifierContainer__xaGgg {\n  margin-right: 0.5rem;\n  margin-left: 0;\n}\n";
 styleInject(css_248z);
@@ -182,2 +182,3 @@
   stretch,
+  iconInheritsColor,
   ...props
@@ -265,2 +266,4 @@ }, ref) => {
     [styles.end]: qualifier && qualifierEnd
+  }, {
+    [styles.iconInheritsColor]: iconInheritsColor
   });
@@ -344,3 +347,8 @@ return qualifier ? /*#__PURE__*/React.createElement("button", _extends({}, rest, {
    */
-  qualifierEnd: PropTypes.bool
+  qualifierEnd: PropTypes.bool,
+
+  /**
+   * Icons inherits Button’s `color` property. Use it to override the icon’s default color with the Button’s caption color.
+   */
+  iconInheritsColor: PropTypes.bool
 };
@@ -353,3 +361,4 @@ Button.defaultProps = {
   qualifierStart: true,
-  qualifierEnd: false
+  qualifierEnd: false,
+  iconInheritsColor: false
 };
@@ -356,0 +365,0 @@

lib/button.css

@@ -205,2 +205,6 @@ .Button {
 
+.iconInheritsColor svg path {
+  fill: currentColor;
+}
+
 .secondary:hover {
@@ -207,0 +211,0 @@ background-color: var(--button-secondary-hover-color);

lib/button.js

@@ -33,2 +33,3 @@ import React, { forwardRef } from "react"
       stretch,
+      iconInheritsColor,
       ...props
@@ -108,3 +109,4 @@ },
       { [styles.qualifier]: qualifier },
-      { [styles.end]: qualifier && qualifierEnd }
+      { [styles.end]: qualifier && qualifierEnd },
+      { [styles.iconInheritsColor]: iconInheritsColor }
     )
@@ -188,2 +190,6 @@
   qualifierEnd: PropTypes.bool,
+  /**
+   * Icons inherits Button’s `color` property. Use it to override the icon’s default color with the Button’s caption color.
+   */
+  iconInheritsColor: PropTypes.bool,
 }
@@ -198,2 +204,3 @@
   qualifierEnd: false,
+  iconInheritsColor: false,
 }

package.json

 {
   "name": "@asphalt-react/button",
-  "version": "1.17.0",
+  "version": "1.19.0",
   "description": "Button",
@@ -48,3 +48,3 @@ "keywords": [
   },
-  "gitHead": "34f490aa96b747372b4a4f06ecd1407a13f7c0d1"
+  "gitHead": "83220fcfb85837f5e4ca935d36b296e356ce1653"
 }

README.md

@@ -139,2 +139,10 @@ # Button
 
+### iconInheritsColor
+
+Icons inherits Button’s `color` property. Use it to override the icon’s default color with the Button’s caption color.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
 # IconButton
@@ -141,0 +149,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

143452

1.08%

Lines of code

2756

1.1%

Number of lines in readme file

404

2.02%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes