@asphalt-react/button - npm Package Compare versions

Comparing version 1.16.0 to 1.17.0

dist/cjs/index.js

@@ -21,3 +21,3 @@ 'use strict';
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -35,3 +35,2 @@ var source = arguments[i];
   };
-
   return _extends.apply(this, arguments);
@@ -90,5 +89,5 @@ }
 
-var css_248z = ".Button__2uJ7L {\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__2uJ7L.stretch__3PMNL {\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__2P43U svg {\n  pointer-events: none;\n}\n\n/* primary styles */\n.primary__2TJ3j {\n  background-color: var(--button-primary-fill-color);\n  color: var(--button-primary-font);\n}\n\n.primary__2TJ3j svg path {\n  fill: var(--button-inverse-icon-color);\n}\n\n.primary__2TJ3j:hover {\n  background-color: var(--button-primary-hover-color);\n}\n\n.primary__2TJ3j: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__2TJ3j:active {\n  background-color: var(--button-primary-active-color);\n}\n\n/* secondary styles */\n.secondary__1uNCG {\n  background-color: var(--button-secondary-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.secondary__1uNCG svg path,\n.outline__1mgE1 svg path {\n  fill: var(--button-primary-icon-color);\n}\n\n.secondary__1uNCG:hover {\n  background-color: var(--button-secondary-hover-color);\n}\n\n.secondary__1uNCG: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__1uNCG:active {\n  background-color: var(--button-secondary-active-color);\n}\n\n/* outline styles */\n.outline__1mgE1 {\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__1mgE1:hover {\n  background-color: var(--button-outline-hover-color);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__1mgE1: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__1mgE1:active {\n  background-color: var(--button-outline-active-color);\n}\n\n/* nude styles */\n.nude__146BB {\n  background: var(--button-nude-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.nude__146BB:hover {\n  background-color: var(--button-nude-hover-color);\n}\n\n.nude__146BB: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__146BB:active {\n  background-color: var(--button-nude-active-color);\n}\n\n/* danger styles */\n.primary__2TJ3j.danger__10-YO,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB) {\n  background-color: var(--button-danger-fill-color);\n  color: var(--button-danger-font);\n}\n\n.primary__2TJ3j.danger__10-YO svg path,\n.IconButton__2P43U.danger__10-YO svg path {\n  fill: var(--button-danger-font);\n}\n\n.primary__2TJ3j.danger__10-YO:hover,\n.outline__1mgE1.danger__10-YO:hover,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB):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__2TJ3j.danger__10-YO:focus,\n.outline__1mgE1.danger__10-YO:focus,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB):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__2TJ3j.danger__10-YO:active,\n.outline__1mgE1.danger__10-YO:active,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB):active {\n  background-color: var(--button-danger-active-color);\n}\n\n.secondary__1uNCG.danger__10-YO,\n.nude__146BB.danger__10-YO,\n.outline__1mgE1.danger__10-YO {\n  color: var(--button-danger-fill-color);\n}\n\n.secondary__1uNCG.danger__10-YO svg path,\n.nude__146BB.danger__10-YO svg path,\n.IconButton__2P43U.nude__146BB.danger__10-YO svg path {\n  fill: var(--button-danger-fill-color);\n}\n\n.outline__1mgE1.danger__10-YO {\n  border-color: var(--button-outline-border-danger);\n}\n\n.outline__1mgE1.danger__10-YO:hover,\n.outline__1mgE1.danger__10-YO:focus,\n.outline__1mgE1.danger__10-YO:active {\n  color: var(--button-outline-hover-font);\n}\n\n/* disabled styles */\n.primary__2TJ3j:disabled,\n.secondary__1uNCG:disabled,\n.outline__1mgE1:disabled,\n.primary__2TJ3j.danger__10-YO:disabled,\n.outline__1mgE1.danger__10-YO:disabled,\n.nude__146BB: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__146BB:disabled {\n  background-color: transparent;\n}\n\n.primary__2TJ3j:disabled svg path,\n.secondary__1uNCG:disabled svg path,\n.nude__146BB:disabled svg path,\n.danger__10-YO:disabled svg path,\n.IconButton__2P43U.nude__146BB: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__aq5oB {\n  display: flex;\n  pointer-events: none;\n}\n\n.qualifierContainer__aq5oB {\n  margin-right: 0.5rem;\n}\n\n.end__3SxYf {\n  flex-direction: row-reverse;\n}\n\n.end__3SxYf > .qualifierContainer__aq5oB {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n/* sizes */\n.l__19nHj {\n  padding: 0.75rem 1.25rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.l__19nHj.qualifier__2hZAj {\n  padding: 0.75rem;\n}\n\n.m__2A91K {\n  padding: 0.5rem 1rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.m__2A91K.qualifier__2hZAj {\n  padding: 0.5rem;\n}\n\n.s__zAvWh {\n  padding: 0.25rem 0.75rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.s__zAvWh.qualifier__2hZAj {\n  padding: 0.25rem;\n}\n\n.outline__1mgE1.l__19nHj,\n.nude__146BB.l__19nHj {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.outline__1mgE1.m__2A91K,\n.nude__146BB.m__2A91K {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.outline__1mgE1.s__zAvWh,\n.nude__146BB.s__zAvWh {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.IconButton__2P43U.l__19nHj {\n  padding: 1rem;\n}\n\n.IconButton__2P43U.m__2A91K {\n  padding: 0.75rem 1rem;\n}\n\n.IconButton__2P43U.s__zAvWh {\n  padding: 0.5rem 1rem;\n}\n\n.IconButton__2P43U.nude__146BB {\n  padding: 0.25rem;\n}\n\n/* support nude button styles for Flag component */\n.nude__146BB.support__1L2sX {\n  color: var(--nude-support-font-color);\n}\n\n/* danger */\n.nude__146BB.support__1L2sX.supportDanger__3MtRH {\n  background-color: var(--nude-danger-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportDanger__3MtRH:hover {\n  background-color: var(--nude-danger-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportDanger__3MtRH:active {\n  background-color: var(--nude-danger-active-color);\n}\n\n/* warning */\n.nude__146BB.support__1L2sX.supportWarning__17bkH {\n  background-color: var(--nude-warning-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportWarning__17bkH:hover {\n  background-color: var(--nude-warning-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportWarning__17bkH:active {\n  background-color: var(--nude-warning-active-color);\n}\n\n/* success */\n.nude__146BB.support__1L2sX.supportSuccess__1CcDh {\n  background-color: var(--nude-success-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportSuccess__1CcDh:hover {\n  background-color: var(--nude-success-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportSuccess__1CcDh:active {\n  background-color: var(--nude-success-active-color);\n}\n\n/* info */\n.nude__146BB.support__1L2sX.supportInfo__ljRjm {\n  background-color: var(--nude-info-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportInfo__ljRjm:hover {\n  background-color: var(--nude-info-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportInfo__ljRjm:active {\n  background-color: var(--nude-info-active-color);\n}\n\n/* toggle button styles */\n.toggleButton__32Rqa {\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__2NVfj {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__1dRyk {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__2K8ML {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__upZeZ {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__n3aPv {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__32Rqa:hover,\n.toggleButton__32Rqa:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__32Rqa:focus {\n  border-color: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n}\n\n.on__3bRDr {\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__3bRDr svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__3bRDr:hover,\n.on__3bRDr:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__32Rqa:disabled,\n.on__3bRDr: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__3bRDr: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__1lTQr {\n  border-style: solid;\n  text-decoration: underline;\n}\n\n/* rtl styles */\n*[dir=\"rtl\"] .qualifierContainer__aq5oB {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .end__3SxYf > .qualifierContainer__aq5oB {\n  margin-right: 0.5rem;\n  margin-left: 0;\n}\n";
-var styles = {"Button":"Button__2uJ7L","stretch":"stretch__3PMNL","IconButton":"IconButton__2P43U","primary":"primary__2TJ3j","secondary":"secondary__1uNCG","outline":"outline__1mgE1","nude":"nude__146BB","danger":"danger__10-YO","qualifierContainer":"qualifierContainer__aq5oB","end":"end__3SxYf","l":"l__19nHj","qualifier":"qualifier__2hZAj","m":"m__2A91K","s":"s__zAvWh","support":"support__1L2sX","supportDanger":"supportDanger__3MtRH","supportWarning":"supportWarning__17bkH","supportSuccess":"supportSuccess__1CcDh","supportInfo":"supportInfo__ljRjm","toggleButton":"toggleButton__32Rqa","smallToggle":"smallToggle__2NVfj","largeToggle":"largeToggle__1dRyk","iconToggle":"iconToggle__2K8ML","smallIconToggle":"smallIconToggle__upZeZ","largeIconToggle":"largeIconToggle__n3aPv","on":"on__3bRDr","link":"link__1lTQr"};
-var stylesheet=".Button__2uJ7L {\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__2uJ7L.stretch__3PMNL {\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__2P43U svg {\n  pointer-events: none;\n}\n\n/* primary styles */\n.primary__2TJ3j {\n  background-color: var(--button-primary-fill-color);\n  color: var(--button-primary-font);\n}\n\n.primary__2TJ3j svg path {\n  fill: var(--button-inverse-icon-color);\n}\n\n.primary__2TJ3j:hover {\n  background-color: var(--button-primary-hover-color);\n}\n\n.primary__2TJ3j: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__2TJ3j:active {\n  background-color: var(--button-primary-active-color);\n}\n\n/* secondary styles */\n.secondary__1uNCG {\n  background-color: var(--button-secondary-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.secondary__1uNCG svg path,\n.outline__1mgE1 svg path {\n  fill: var(--button-primary-icon-color);\n}\n\n.secondary__1uNCG:hover {\n  background-color: var(--button-secondary-hover-color);\n}\n\n.secondary__1uNCG: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__1uNCG:active {\n  background-color: var(--button-secondary-active-color);\n}\n\n/* outline styles */\n.outline__1mgE1 {\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__1mgE1:hover {\n  background-color: var(--button-outline-hover-color);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__1mgE1: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__1mgE1:active {\n  background-color: var(--button-outline-active-color);\n}\n\n/* nude styles */\n.nude__146BB {\n  background: var(--button-nude-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.nude__146BB:hover {\n  background-color: var(--button-nude-hover-color);\n}\n\n.nude__146BB: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__146BB:active {\n  background-color: var(--button-nude-active-color);\n}\n\n/* danger styles */\n.primary__2TJ3j.danger__10-YO,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB) {\n  background-color: var(--button-danger-fill-color);\n  color: var(--button-danger-font);\n}\n\n.primary__2TJ3j.danger__10-YO svg path,\n.IconButton__2P43U.danger__10-YO svg path {\n  fill: var(--button-danger-font);\n}\n\n.primary__2TJ3j.danger__10-YO:hover,\n.outline__1mgE1.danger__10-YO:hover,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB):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__2TJ3j.danger__10-YO:focus,\n.outline__1mgE1.danger__10-YO:focus,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB):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__2TJ3j.danger__10-YO:active,\n.outline__1mgE1.danger__10-YO:active,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB):active {\n  background-color: var(--button-danger-active-color);\n}\n\n.secondary__1uNCG.danger__10-YO,\n.nude__146BB.danger__10-YO,\n.outline__1mgE1.danger__10-YO {\n  color: var(--button-danger-fill-color);\n}\n\n.secondary__1uNCG.danger__10-YO svg path,\n.nude__146BB.danger__10-YO svg path,\n.IconButton__2P43U.nude__146BB.danger__10-YO svg path {\n  fill: var(--button-danger-fill-color);\n}\n\n.outline__1mgE1.danger__10-YO {\n  border-color: var(--button-outline-border-danger);\n}\n\n.outline__1mgE1.danger__10-YO:hover,\n.outline__1mgE1.danger__10-YO:focus,\n.outline__1mgE1.danger__10-YO:active {\n  color: var(--button-outline-hover-font);\n}\n\n/* disabled styles */\n.primary__2TJ3j:disabled,\n.secondary__1uNCG:disabled,\n.outline__1mgE1:disabled,\n.primary__2TJ3j.danger__10-YO:disabled,\n.outline__1mgE1.danger__10-YO:disabled,\n.nude__146BB: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__146BB:disabled {\n  background-color: transparent;\n}\n\n.primary__2TJ3j:disabled svg path,\n.secondary__1uNCG:disabled svg path,\n.nude__146BB:disabled svg path,\n.danger__10-YO:disabled svg path,\n.IconButton__2P43U.nude__146BB: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__aq5oB {\n  display: flex;\n  pointer-events: none;\n}\n\n.qualifierContainer__aq5oB {\n  margin-right: 0.5rem;\n}\n\n.end__3SxYf {\n  flex-direction: row-reverse;\n}\n\n.end__3SxYf > .qualifierContainer__aq5oB {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n/* sizes */\n.l__19nHj {\n  padding: 0.75rem 1.25rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.l__19nHj.qualifier__2hZAj {\n  padding: 0.75rem;\n}\n\n.m__2A91K {\n  padding: 0.5rem 1rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.m__2A91K.qualifier__2hZAj {\n  padding: 0.5rem;\n}\n\n.s__zAvWh {\n  padding: 0.25rem 0.75rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.s__zAvWh.qualifier__2hZAj {\n  padding: 0.25rem;\n}\n\n.outline__1mgE1.l__19nHj,\n.nude__146BB.l__19nHj {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.outline__1mgE1.m__2A91K,\n.nude__146BB.m__2A91K {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.outline__1mgE1.s__zAvWh,\n.nude__146BB.s__zAvWh {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.IconButton__2P43U.l__19nHj {\n  padding: 1rem;\n}\n\n.IconButton__2P43U.m__2A91K {\n  padding: 0.75rem 1rem;\n}\n\n.IconButton__2P43U.s__zAvWh {\n  padding: 0.5rem 1rem;\n}\n\n.IconButton__2P43U.nude__146BB {\n  padding: 0.25rem;\n}\n\n/* support nude button styles for Flag component */\n.nude__146BB.support__1L2sX {\n  color: var(--nude-support-font-color);\n}\n\n/* danger */\n.nude__146BB.support__1L2sX.supportDanger__3MtRH {\n  background-color: var(--nude-danger-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportDanger__3MtRH:hover {\n  background-color: var(--nude-danger-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportDanger__3MtRH:active {\n  background-color: var(--nude-danger-active-color);\n}\n\n/* warning */\n.nude__146BB.support__1L2sX.supportWarning__17bkH {\n  background-color: var(--nude-warning-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportWarning__17bkH:hover {\n  background-color: var(--nude-warning-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportWarning__17bkH:active {\n  background-color: var(--nude-warning-active-color);\n}\n\n/* success */\n.nude__146BB.support__1L2sX.supportSuccess__1CcDh {\n  background-color: var(--nude-success-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportSuccess__1CcDh:hover {\n  background-color: var(--nude-success-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportSuccess__1CcDh:active {\n  background-color: var(--nude-success-active-color);\n}\n\n/* info */\n.nude__146BB.support__1L2sX.supportInfo__ljRjm {\n  background-color: var(--nude-info-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportInfo__ljRjm:hover {\n  background-color: var(--nude-info-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportInfo__ljRjm:active {\n  background-color: var(--nude-info-active-color);\n}\n\n/* toggle button styles */\n.toggleButton__32Rqa {\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__2NVfj {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__1dRyk {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__2K8ML {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__upZeZ {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__n3aPv {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__32Rqa:hover,\n.toggleButton__32Rqa:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__32Rqa:focus {\n  border-color: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n}\n\n.on__3bRDr {\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__3bRDr svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__3bRDr:hover,\n.on__3bRDr:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__32Rqa:disabled,\n.on__3bRDr: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__3bRDr: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__1lTQr {\n  border-style: solid;\n  text-decoration: underline;\n}\n\n/* rtl styles */\n*[dir=\"rtl\"] .qualifierContainer__aq5oB {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .end__3SxYf > .qualifierContainer__aq5oB {\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.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";
 styleInject(css_248z);
@@ -122,3 +121,3 @@
 }) => {
-  return cn__default['default'](styles.Button, sizeClass(size));
+  return cn__default["default"](styles.Button, sizeClass(size));
 };
@@ -269,3 +268,3 @@ const svgSize = size => {
   } = props;
-  const btnclasses = cn__default['default'](createBtnClasses({
+  const btnclasses = cn__default["default"](createBtnClasses({
     size
@@ -281,16 +280,16 @@ }), selectBtnTypeClass(), {
   });
-  return qualifier$1 ? /*#__PURE__*/React__default['default'].createElement("button", _extends({}, rest, {
+  return qualifier$1 ? /*#__PURE__*/React__default["default"].createElement("button", _extends({}, rest, {
     className: btnclasses,
     ref: ref
-  }), /*#__PURE__*/React__default['default'].createElement("span", {
-    className: cn__default['default'](styles.qualifierContainer)
-  }, /*#__PURE__*/React__default['default'].createElement(qualifier.Qualifier, {
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: cn__default["default"](styles.qualifierContainer)
+  }, /*#__PURE__*/React__default["default"].createElement(qualifier.Qualifier, {
     iconSize: svgSize(size)
-  }, qualifier$1)), children) : /*#__PURE__*/React__default['default'].createElement(context.Consumer, null, ({
+  }, qualifier$1)), children) : /*#__PURE__*/React__default["default"].createElement(context.Consumer, null, ({
     supportType
   }) => {
-    const supportClasses = cn__default['default'](btnclasses, {
+    const supportClasses = cn__default["default"](btnclasses, {
       [styles.support]: Boolean(supportType)
     }, getSupportClass(supportType));
-    return /*#__PURE__*/React__default['default'].createElement("button", _extends({}, rest, {
+    return /*#__PURE__*/React__default["default"].createElement("button", _extends({}, rest, {
       className: supportClasses,
@@ -306,3 +305,3 @@ ref: ref
    */
-  children: PropTypes__default['default'].node.isRequired,
+  children: PropTypes__default["default"].node.isRequired,
 
@@ -312,3 +311,3 @@ /**
    */
-  size: PropTypes__default['default'].oneOf(["s", "m", "l"]),
+  size: PropTypes__default["default"].oneOf(["s", "m", "l"]),
 
@@ -318,3 +317,3 @@ /**
    */
-  stretch: PropTypes__default['default'].bool,
+  stretch: PropTypes__default["default"].bool,
 
@@ -324,3 +323,3 @@ /**
    */
-  nude: PropTypes__default['default'].bool,
+  nude: PropTypes__default["default"].bool,
 
@@ -330,3 +329,3 @@ /**
    */
-  primary: PropTypes__default['default'].bool,
+  primary: PropTypes__default["default"].bool,
 
@@ -336,3 +335,3 @@ /**
    */
-  secondary: PropTypes__default['default'].bool,
+  secondary: PropTypes__default["default"].bool,
 
@@ -342,3 +341,3 @@ /**
    */
-  outline: PropTypes__default['default'].bool,
+  outline: PropTypes__default["default"].bool,
 
@@ -348,3 +347,3 @@ /**
    */
-  danger: PropTypes__default['default'].bool,
+  danger: PropTypes__default["default"].bool,
 
@@ -357,3 +356,3 @@ /**
    */
-  qualifier: PropTypes__default['default'].oneOfType([PropTypes__default['default'].element, PropTypes__default['default'].string]),
+  qualifier: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].string]),
 
@@ -363,3 +362,3 @@ /**
    */
-  qualifierStart: PropTypes__default['default'].bool,
+  qualifierStart: PropTypes__default["default"].bool,
 
@@ -369,3 +368,3 @@ /**
    */
-  qualifierEnd: PropTypes__default['default'].bool
+  qualifierEnd: PropTypes__default["default"].bool
 };
@@ -429,3 +428,3 @@ Button.defaultProps = {
   } = props;
-  const btnclasses = cn__default['default'](createBtnClasses({
+  const btnclasses = cn__default["default"](createBtnClasses({
     size
@@ -435,6 +434,6 @@ }), selectBtnTypeClass(), styles.IconButton, {
   });
-  return /*#__PURE__*/React__default['default'].createElement("button", _extends({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement("button", _extends({}, rest, {
     className: btnclasses,
     ref: ref
-  }), /*#__PURE__*/React__default['default'].createElement(SvgNormalizer__default['default'], {
+  }), /*#__PURE__*/React__default["default"].createElement(SvgNormalizer__default["default"], {
     size: svgSize(size)
@@ -448,3 +447,3 @@ }, icon));
    */
-  icon: PropTypes__default['default'].element.isRequired,
+  icon: PropTypes__default["default"].element.isRequired,
 
@@ -454,3 +453,3 @@ /**
    */
-  primary: PropTypes__default['default'].bool,
+  primary: PropTypes__default["default"].bool,
 
@@ -460,3 +459,3 @@ /**
    */
-  danger: PropTypes__default['default'].bool,
+  danger: PropTypes__default["default"].bool,
 
@@ -466,3 +465,3 @@ /**
    */
-  nude: PropTypes__default['default'].bool,
+  nude: PropTypes__default["default"].bool,
 
@@ -472,3 +471,3 @@ /**
    */
-  size: PropTypes__default['default'].oneOf(["s", "m", "l"])
+  size: PropTypes__default["default"].oneOf(["s", "m", "l"])
 };
@@ -523,7 +522,7 @@ IconButton.defaultProps = {
 
-  return /*#__PURE__*/React__default['default'].createElement("button", _extends({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement("button", _extends({}, rest, {
     type: "button",
     role: "switch",
     "aria-checked": on,
-    className: cn__default['default'](styles.Button, styles.toggleButton, {
+    className: cn__default["default"](styles.Button, styles.toggleButton, {
       [styles.iconToggle]: icon
@@ -533,3 +532,3 @@ }, {
     }, sizeClass())
-  }), icon ? /*#__PURE__*/React__default['default'].createElement(SvgNormalizer__default['default'], {
+  }), icon ? /*#__PURE__*/React__default["default"].createElement(SvgNormalizer__default["default"], {
     size: svgSize(size)
@@ -542,3 +541,3 @@ }, icon) : text || children);
    */
-  text: PropTypes__default['default'].string,
+  text: PropTypes__default["default"].string,
 
@@ -550,3 +549,3 @@ /**
    */
-  icon: PropTypes__default['default'].node,
+  icon: PropTypes__default["default"].node,
 
@@ -558,3 +557,3 @@ /**
    */
-  children: PropTypes__default['default'].node,
+  children: PropTypes__default["default"].node,
 
@@ -564,3 +563,3 @@ /**
    */
-  on: PropTypes__default['default'].bool,
+  on: PropTypes__default["default"].bool,
 
@@ -570,3 +569,3 @@ /**
    */
-  size: PropTypes__default['default'].oneOf(["s", "m", "l"])
+  size: PropTypes__default["default"].oneOf(["s", "m", "l"])
 };
@@ -578,3 +577,3 @@ ToggleButton.defaultProps = {
 
-const NewTab = () => /*#__PURE__*/React__default['default'].createElement("svg", {
+const NewTab = () => /*#__PURE__*/React__default["default"].createElement("svg", {
   height: "16",
@@ -586,7 +585,7 @@ width: "16",
   "data-testid": "new-tab-icon"
-}, /*#__PURE__*/React__default['default'].createElement("path", {
+}, /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M2.77772 13.2222L2.77772 2.55556L8.04509 2.55556C8.28084 2.55556 8.50693 2.46191 8.67363 2.29521C9.23116 1.73767 8.84043 0.786085 8.05538 0.777832H1.88889C1.4 0.777832 1 1.17783 1 1.66672V14.1112C1 14.3585 1.10235 14.583 1.26677 14.7446C1.4274 14.9023 1.64727 15 1.88883 15L14.3333 15C14.8222 15 15.2222 14.6 15.2222 14.1111V7.94459C15.2139 7.15956 14.2623 6.76884 13.7048 7.32637C13.5381 7.49307 13.4444 7.71916 13.4444 7.95491V13.2223H2.77778V13.2222H2.77772Z",
   fill: "#000",
   fillRule: "evenodd"
-}), /*#__PURE__*/React__default['default'].createElement("path", {
+}), /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M15.1023 0H11.5467C11.0578 0 10.6578 0.39975 10.6578 0.888334C10.6578 1.37692 11.0578 1.77667 11.5467 1.77667H12.9601L10.0356 4.69929C9.87561 4.85919 9.77783 5.08127 9.77783 5.33C9.77783 5.81859 10.1778 6.21834 10.6667 6.21834C10.9156 6.21834 11.1378 6.12062 11.2978 5.96072L14.2223 3.0381V4.45055C14.2223 4.93914 14.6223 5.33889 15.1112 5.33889C15.6001 5.33889 16.0001 4.93914 16.0001 4.45055V0.897217C15.9912 0.39975 15.5912 0 15.1023 0Z",
@@ -618,3 +617,3 @@ fill: "#000",
   if (opensInNewTab(tagProps === null || tagProps === void 0 ? void 0 : tagProps.target) && !qualifier$1) {
-    qualifier$1 = /*#__PURE__*/React__default['default'].createElement(NewTab, null);
+    qualifier$1 = /*#__PURE__*/React__default["default"].createElement(NewTab, null);
   } // filtering out `style` prop from `tagProps`
@@ -655,3 +654,3 @@
 
-  const btnclasses = cn__default['default'](createBtnClasses({
+  const btnclasses = cn__default["default"](createBtnClasses({
     size
@@ -663,8 +662,8 @@ }), selectBtnTypeClass(), styles.link, {
   });
-  return /*#__PURE__*/React__default['default'].createElement(Link, _extends({}, getRelAttributes(tagProps === null || tagProps === void 0 ? void 0 : tagProps.target), restTagProps, {
+  return /*#__PURE__*/React__default["default"].createElement(Link, _extends({}, getRelAttributes(tagProps === null || tagProps === void 0 ? void 0 : tagProps.target), restTagProps, {
     className: btnclasses,
     ref: ref
-  }), qualifier$1 && /*#__PURE__*/React__default['default'].createElement("span", {
-    className: cn__default['default'](styles.qualifierContainer)
-  }, /*#__PURE__*/React__default['default'].createElement(qualifier.Qualifier, {
+  }), qualifier$1 && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: cn__default["default"](styles.qualifierContainer)
+  }, /*#__PURE__*/React__default["default"].createElement(qualifier.Qualifier, {
     iconSize: svgSize(size)
@@ -678,3 +677,3 @@ }, qualifier$1)), children && children);
    */
-  children: PropTypes__default['default'].node.isRequired,
+  children: PropTypes__default["default"].node.isRequired,
 
@@ -684,3 +683,3 @@ /**
    */
-  tagProps: PropTypes__default['default'].object.isRequired,
+  tagProps: PropTypes__default["default"].object.isRequired,
 
@@ -690,3 +689,3 @@ /**
    */
-  as: PropTypes__default['default'].elementType,
+  as: PropTypes__default["default"].elementType,
 
@@ -696,3 +695,3 @@ /**
    */
-  size: PropTypes__default['default'].oneOf(["s", "m", "l"]),
+  size: PropTypes__default["default"].oneOf(["s", "m", "l"]),
 
@@ -702,3 +701,3 @@ /**
    */
-  primary: PropTypes__default['default'].bool,
+  primary: PropTypes__default["default"].bool,
 
@@ -708,3 +707,3 @@ /**
    */
-  secondary: PropTypes__default['default'].bool,
+  secondary: PropTypes__default["default"].bool,
 
@@ -717,3 +716,3 @@ /**
    */
-  qualifier: PropTypes__default['default'].oneOfType([PropTypes__default['default'].element, PropTypes__default['default'].string]),
+  qualifier: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].string]),
 
@@ -723,3 +722,3 @@ /**
    */
-  qualifierEnd: PropTypes__default['default'].bool
+  qualifierEnd: PropTypes__default["default"].bool
 };
@@ -778,3 +777,3 @@ ButtonLink.defaultProps = {
 
-  const btnclasses = cn__default['default'](createBtnClasses({
+  const btnclasses = cn__default["default"](createBtnClasses({
     size
@@ -788,6 +787,6 @@ }), selectBtnTypeClass(), styles.IconButton, styles.link); // show warning if icon is not an SVG
 
-  return /*#__PURE__*/React__default['default'].createElement(Link, _extends({}, getRelAttributes(tagProps === null || tagProps === void 0 ? void 0 : tagProps.target), restTagProps, {
+  return /*#__PURE__*/React__default["default"].createElement(Link, _extends({}, getRelAttributes(tagProps === null || tagProps === void 0 ? void 0 : tagProps.target), restTagProps, {
     className: btnclasses,
     ref: ref
-  }), icon && /*#__PURE__*/React__default['default'].createElement(SvgNormalizer__default['default'], {
+  }), icon && /*#__PURE__*/React__default["default"].createElement(SvgNormalizer__default["default"], {
     size: svgSize(size)
@@ -803,3 +802,3 @@ }, icon));
    */
-  icon: PropTypes__default['default'].element.isRequired,
+  icon: PropTypes__default["default"].element.isRequired,
 
@@ -809,3 +808,3 @@ /**
    */
-  tagProps: PropTypes__default['default'].object.isRequired,
+  tagProps: PropTypes__default["default"].object.isRequired,
 
@@ -815,3 +814,3 @@ /**
    */
-  as: PropTypes__default['default'].elementType,
+  as: PropTypes__default["default"].elementType,
 
@@ -821,3 +820,3 @@ /**
    */
-  primary: PropTypes__default['default'].bool,
+  primary: PropTypes__default["default"].bool,
 
@@ -827,3 +826,3 @@ /**
    */
-  nude: PropTypes__default['default'].bool,
+  nude: PropTypes__default["default"].bool,
 
@@ -833,3 +832,3 @@ /**
    */
-  size: PropTypes__default['default'].oneOf(["s", "m", "l"])
+  size: PropTypes__default["default"].oneOf(["s", "m", "l"])
 };
@@ -845,2 +844,2 @@ IconButtonLink.defaultProps = {
 exports.ToggleButton = ToggleButton;
-exports.default = Button;
+exports["default"] = Button;

dist/index.js

@@ -10,3 +10,3 @@ import React, { forwardRef } from 'react';
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -24,3 +24,2 @@ var source = arguments[i];
   };
-
   return _extends.apply(this, arguments);
@@ -79,5 +78,5 @@ }
 
-var css_248z = ".Button__2uJ7L {\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__2uJ7L.stretch__3PMNL {\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__2P43U svg {\n  pointer-events: none;\n}\n\n/* primary styles */\n.primary__2TJ3j {\n  background-color: var(--button-primary-fill-color);\n  color: var(--button-primary-font);\n}\n\n.primary__2TJ3j svg path {\n  fill: var(--button-inverse-icon-color);\n}\n\n.primary__2TJ3j:hover {\n  background-color: var(--button-primary-hover-color);\n}\n\n.primary__2TJ3j: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__2TJ3j:active {\n  background-color: var(--button-primary-active-color);\n}\n\n/* secondary styles */\n.secondary__1uNCG {\n  background-color: var(--button-secondary-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.secondary__1uNCG svg path,\n.outline__1mgE1 svg path {\n  fill: var(--button-primary-icon-color);\n}\n\n.secondary__1uNCG:hover {\n  background-color: var(--button-secondary-hover-color);\n}\n\n.secondary__1uNCG: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__1uNCG:active {\n  background-color: var(--button-secondary-active-color);\n}\n\n/* outline styles */\n.outline__1mgE1 {\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__1mgE1:hover {\n  background-color: var(--button-outline-hover-color);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__1mgE1: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__1mgE1:active {\n  background-color: var(--button-outline-active-color);\n}\n\n/* nude styles */\n.nude__146BB {\n  background: var(--button-nude-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.nude__146BB:hover {\n  background-color: var(--button-nude-hover-color);\n}\n\n.nude__146BB: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__146BB:active {\n  background-color: var(--button-nude-active-color);\n}\n\n/* danger styles */\n.primary__2TJ3j.danger__10-YO,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB) {\n  background-color: var(--button-danger-fill-color);\n  color: var(--button-danger-font);\n}\n\n.primary__2TJ3j.danger__10-YO svg path,\n.IconButton__2P43U.danger__10-YO svg path {\n  fill: var(--button-danger-font);\n}\n\n.primary__2TJ3j.danger__10-YO:hover,\n.outline__1mgE1.danger__10-YO:hover,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB):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__2TJ3j.danger__10-YO:focus,\n.outline__1mgE1.danger__10-YO:focus,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB):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__2TJ3j.danger__10-YO:active,\n.outline__1mgE1.danger__10-YO:active,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB):active {\n  background-color: var(--button-danger-active-color);\n}\n\n.secondary__1uNCG.danger__10-YO,\n.nude__146BB.danger__10-YO,\n.outline__1mgE1.danger__10-YO {\n  color: var(--button-danger-fill-color);\n}\n\n.secondary__1uNCG.danger__10-YO svg path,\n.nude__146BB.danger__10-YO svg path,\n.IconButton__2P43U.nude__146BB.danger__10-YO svg path {\n  fill: var(--button-danger-fill-color);\n}\n\n.outline__1mgE1.danger__10-YO {\n  border-color: var(--button-outline-border-danger);\n}\n\n.outline__1mgE1.danger__10-YO:hover,\n.outline__1mgE1.danger__10-YO:focus,\n.outline__1mgE1.danger__10-YO:active {\n  color: var(--button-outline-hover-font);\n}\n\n/* disabled styles */\n.primary__2TJ3j:disabled,\n.secondary__1uNCG:disabled,\n.outline__1mgE1:disabled,\n.primary__2TJ3j.danger__10-YO:disabled,\n.outline__1mgE1.danger__10-YO:disabled,\n.nude__146BB: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__146BB:disabled {\n  background-color: transparent;\n}\n\n.primary__2TJ3j:disabled svg path,\n.secondary__1uNCG:disabled svg path,\n.nude__146BB:disabled svg path,\n.danger__10-YO:disabled svg path,\n.IconButton__2P43U.nude__146BB: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__aq5oB {\n  display: flex;\n  pointer-events: none;\n}\n\n.qualifierContainer__aq5oB {\n  margin-right: 0.5rem;\n}\n\n.end__3SxYf {\n  flex-direction: row-reverse;\n}\n\n.end__3SxYf > .qualifierContainer__aq5oB {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n/* sizes */\n.l__19nHj {\n  padding: 0.75rem 1.25rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.l__19nHj.qualifier__2hZAj {\n  padding: 0.75rem;\n}\n\n.m__2A91K {\n  padding: 0.5rem 1rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.m__2A91K.qualifier__2hZAj {\n  padding: 0.5rem;\n}\n\n.s__zAvWh {\n  padding: 0.25rem 0.75rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.s__zAvWh.qualifier__2hZAj {\n  padding: 0.25rem;\n}\n\n.outline__1mgE1.l__19nHj,\n.nude__146BB.l__19nHj {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.outline__1mgE1.m__2A91K,\n.nude__146BB.m__2A91K {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.outline__1mgE1.s__zAvWh,\n.nude__146BB.s__zAvWh {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.IconButton__2P43U.l__19nHj {\n  padding: 1rem;\n}\n\n.IconButton__2P43U.m__2A91K {\n  padding: 0.75rem 1rem;\n}\n\n.IconButton__2P43U.s__zAvWh {\n  padding: 0.5rem 1rem;\n}\n\n.IconButton__2P43U.nude__146BB {\n  padding: 0.25rem;\n}\n\n/* support nude button styles for Flag component */\n.nude__146BB.support__1L2sX {\n  color: var(--nude-support-font-color);\n}\n\n/* danger */\n.nude__146BB.support__1L2sX.supportDanger__3MtRH {\n  background-color: var(--nude-danger-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportDanger__3MtRH:hover {\n  background-color: var(--nude-danger-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportDanger__3MtRH:active {\n  background-color: var(--nude-danger-active-color);\n}\n\n/* warning */\n.nude__146BB.support__1L2sX.supportWarning__17bkH {\n  background-color: var(--nude-warning-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportWarning__17bkH:hover {\n  background-color: var(--nude-warning-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportWarning__17bkH:active {\n  background-color: var(--nude-warning-active-color);\n}\n\n/* success */\n.nude__146BB.support__1L2sX.supportSuccess__1CcDh {\n  background-color: var(--nude-success-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportSuccess__1CcDh:hover {\n  background-color: var(--nude-success-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportSuccess__1CcDh:active {\n  background-color: var(--nude-success-active-color);\n}\n\n/* info */\n.nude__146BB.support__1L2sX.supportInfo__ljRjm {\n  background-color: var(--nude-info-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportInfo__ljRjm:hover {\n  background-color: var(--nude-info-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportInfo__ljRjm:active {\n  background-color: var(--nude-info-active-color);\n}\n\n/* toggle button styles */\n.toggleButton__32Rqa {\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__2NVfj {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__1dRyk {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__2K8ML {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__upZeZ {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__n3aPv {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__32Rqa:hover,\n.toggleButton__32Rqa:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__32Rqa:focus {\n  border-color: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n}\n\n.on__3bRDr {\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__3bRDr svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__3bRDr:hover,\n.on__3bRDr:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__32Rqa:disabled,\n.on__3bRDr: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__3bRDr: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__1lTQr {\n  border-style: solid;\n  text-decoration: underline;\n}\n\n/* rtl styles */\n*[dir=\"rtl\"] .qualifierContainer__aq5oB {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .end__3SxYf > .qualifierContainer__aq5oB {\n  margin-right: 0.5rem;\n  margin-left: 0;\n}\n";
-var styles = {"Button":"Button__2uJ7L","stretch":"stretch__3PMNL","IconButton":"IconButton__2P43U","primary":"primary__2TJ3j","secondary":"secondary__1uNCG","outline":"outline__1mgE1","nude":"nude__146BB","danger":"danger__10-YO","qualifierContainer":"qualifierContainer__aq5oB","end":"end__3SxYf","l":"l__19nHj","qualifier":"qualifier__2hZAj","m":"m__2A91K","s":"s__zAvWh","support":"support__1L2sX","supportDanger":"supportDanger__3MtRH","supportWarning":"supportWarning__17bkH","supportSuccess":"supportSuccess__1CcDh","supportInfo":"supportInfo__ljRjm","toggleButton":"toggleButton__32Rqa","smallToggle":"smallToggle__2NVfj","largeToggle":"largeToggle__1dRyk","iconToggle":"iconToggle__2K8ML","smallIconToggle":"smallIconToggle__upZeZ","largeIconToggle":"largeIconToggle__n3aPv","on":"on__3bRDr","link":"link__1lTQr"};
-var stylesheet=".Button__2uJ7L {\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__2uJ7L.stretch__3PMNL {\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__2P43U svg {\n  pointer-events: none;\n}\n\n/* primary styles */\n.primary__2TJ3j {\n  background-color: var(--button-primary-fill-color);\n  color: var(--button-primary-font);\n}\n\n.primary__2TJ3j svg path {\n  fill: var(--button-inverse-icon-color);\n}\n\n.primary__2TJ3j:hover {\n  background-color: var(--button-primary-hover-color);\n}\n\n.primary__2TJ3j: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__2TJ3j:active {\n  background-color: var(--button-primary-active-color);\n}\n\n/* secondary styles */\n.secondary__1uNCG {\n  background-color: var(--button-secondary-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.secondary__1uNCG svg path,\n.outline__1mgE1 svg path {\n  fill: var(--button-primary-icon-color);\n}\n\n.secondary__1uNCG:hover {\n  background-color: var(--button-secondary-hover-color);\n}\n\n.secondary__1uNCG: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__1uNCG:active {\n  background-color: var(--button-secondary-active-color);\n}\n\n/* outline styles */\n.outline__1mgE1 {\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__1mgE1:hover {\n  background-color: var(--button-outline-hover-color);\n  color: var(--button-outline-hover-font);\n}\n\n.outline__1mgE1: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__1mgE1:active {\n  background-color: var(--button-outline-active-color);\n}\n\n/* nude styles */\n.nude__146BB {\n  background: var(--button-nude-fill-color);\n  color: var(--button-secondary-font);\n}\n\n.nude__146BB:hover {\n  background-color: var(--button-nude-hover-color);\n}\n\n.nude__146BB: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__146BB:active {\n  background-color: var(--button-nude-active-color);\n}\n\n/* danger styles */\n.primary__2TJ3j.danger__10-YO,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB) {\n  background-color: var(--button-danger-fill-color);\n  color: var(--button-danger-font);\n}\n\n.primary__2TJ3j.danger__10-YO svg path,\n.IconButton__2P43U.danger__10-YO svg path {\n  fill: var(--button-danger-font);\n}\n\n.primary__2TJ3j.danger__10-YO:hover,\n.outline__1mgE1.danger__10-YO:hover,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB):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__2TJ3j.danger__10-YO:focus,\n.outline__1mgE1.danger__10-YO:focus,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB):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__2TJ3j.danger__10-YO:active,\n.outline__1mgE1.danger__10-YO:active,\n.IconButton__2P43U.danger__10-YO:not(.nude__146BB):active {\n  background-color: var(--button-danger-active-color);\n}\n\n.secondary__1uNCG.danger__10-YO,\n.nude__146BB.danger__10-YO,\n.outline__1mgE1.danger__10-YO {\n  color: var(--button-danger-fill-color);\n}\n\n.secondary__1uNCG.danger__10-YO svg path,\n.nude__146BB.danger__10-YO svg path,\n.IconButton__2P43U.nude__146BB.danger__10-YO svg path {\n  fill: var(--button-danger-fill-color);\n}\n\n.outline__1mgE1.danger__10-YO {\n  border-color: var(--button-outline-border-danger);\n}\n\n.outline__1mgE1.danger__10-YO:hover,\n.outline__1mgE1.danger__10-YO:focus,\n.outline__1mgE1.danger__10-YO:active {\n  color: var(--button-outline-hover-font);\n}\n\n/* disabled styles */\n.primary__2TJ3j:disabled,\n.secondary__1uNCG:disabled,\n.outline__1mgE1:disabled,\n.primary__2TJ3j.danger__10-YO:disabled,\n.outline__1mgE1.danger__10-YO:disabled,\n.nude__146BB: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__146BB:disabled {\n  background-color: transparent;\n}\n\n.primary__2TJ3j:disabled svg path,\n.secondary__1uNCG:disabled svg path,\n.nude__146BB:disabled svg path,\n.danger__10-YO:disabled svg path,\n.IconButton__2P43U.nude__146BB: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__aq5oB {\n  display: flex;\n  pointer-events: none;\n}\n\n.qualifierContainer__aq5oB {\n  margin-right: 0.5rem;\n}\n\n.end__3SxYf {\n  flex-direction: row-reverse;\n}\n\n.end__3SxYf > .qualifierContainer__aq5oB {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n/* sizes */\n.l__19nHj {\n  padding: 0.75rem 1.25rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.l__19nHj.qualifier__2hZAj {\n  padding: 0.75rem;\n}\n\n.m__2A91K {\n  padding: 0.5rem 1rem;\n  font-size: var(--button-m-fontsize);\n}\n\n.m__2A91K.qualifier__2hZAj {\n  padding: 0.5rem;\n}\n\n.s__zAvWh {\n  padding: 0.25rem 0.75rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.s__zAvWh.qualifier__2hZAj {\n  padding: 0.25rem;\n}\n\n.outline__1mgE1.l__19nHj,\n.nude__146BB.l__19nHj {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.outline__1mgE1.m__2A91K,\n.nude__146BB.m__2A91K {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.outline__1mgE1.s__zAvWh,\n.nude__146BB.s__zAvWh {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.IconButton__2P43U.l__19nHj {\n  padding: 1rem;\n}\n\n.IconButton__2P43U.m__2A91K {\n  padding: 0.75rem 1rem;\n}\n\n.IconButton__2P43U.s__zAvWh {\n  padding: 0.5rem 1rem;\n}\n\n.IconButton__2P43U.nude__146BB {\n  padding: 0.25rem;\n}\n\n/* support nude button styles for Flag component */\n.nude__146BB.support__1L2sX {\n  color: var(--nude-support-font-color);\n}\n\n/* danger */\n.nude__146BB.support__1L2sX.supportDanger__3MtRH {\n  background-color: var(--nude-danger-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportDanger__3MtRH:hover {\n  background-color: var(--nude-danger-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportDanger__3MtRH:active {\n  background-color: var(--nude-danger-active-color);\n}\n\n/* warning */\n.nude__146BB.support__1L2sX.supportWarning__17bkH {\n  background-color: var(--nude-warning-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportWarning__17bkH:hover {\n  background-color: var(--nude-warning-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportWarning__17bkH:active {\n  background-color: var(--nude-warning-active-color);\n}\n\n/* success */\n.nude__146BB.support__1L2sX.supportSuccess__1CcDh {\n  background-color: var(--nude-success-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportSuccess__1CcDh:hover {\n  background-color: var(--nude-success-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportSuccess__1CcDh:active {\n  background-color: var(--nude-success-active-color);\n}\n\n/* info */\n.nude__146BB.support__1L2sX.supportInfo__ljRjm {\n  background-color: var(--nude-info-fill-color);\n}\n\n.nude__146BB.support__1L2sX.supportInfo__ljRjm:hover {\n  background-color: var(--nude-info-hover-color);\n}\n\n.nude__146BB.support__1L2sX.supportInfo__ljRjm:active {\n  background-color: var(--nude-info-active-color);\n}\n\n/* toggle button styles */\n.toggleButton__32Rqa {\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__2NVfj {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__1dRyk {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__2K8ML {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__upZeZ {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__n3aPv {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__32Rqa:hover,\n.toggleButton__32Rqa:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__32Rqa:focus {\n  border-color: var(--interactive-focus, hsla(219, 42%, 18%, 1));\n}\n\n.on__3bRDr {\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__3bRDr svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__3bRDr:hover,\n.on__3bRDr:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__32Rqa:disabled,\n.on__3bRDr: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__3bRDr: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__1lTQr {\n  border-style: solid;\n  text-decoration: underline;\n}\n\n/* rtl styles */\n*[dir=\"rtl\"] .qualifierContainer__aq5oB {\n  margin-left: 0.5rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .end__3SxYf > .qualifierContainer__aq5oB {\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.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";
 styleInject(css_248z);
@@ -781,3 +780,2 @@
 
-export default Button;
-export { ButtonLink, IconButton, IconButtonLink, ToggleButton };
+export { ButtonLink, IconButton, IconButtonLink, ToggleButton, Button as default };

package.json

 {
   "name": "@asphalt-react/button",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "Button",
@@ -42,9 +42,9 @@ "keywords": [
     "@asphalt-react/context": "^1.16.0",
-    "@asphalt-react/helper": "^1.14.1",
-    "@asphalt-react/qualifier": "^1.16.0",
-    "@asphalt-react/svg-normalizer": "^1.14.1",
+    "@asphalt-react/helper": "^1.17.0",
+    "@asphalt-react/qualifier": "^1.17.0",
+    "@asphalt-react/svg-normalizer": "^1.17.0",
     "classnames": "^2.3.1",
     "prop-types": "^15.7.2"
   },
-  "gitHead": "8c0c23a0e60b0f8240dac1532c03a03545e0aaba"
+  "gitHead": "34f490aa96b747372b4a4f06ecd1407a13f7c0d1"
 }

CHANGELOG.md

-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.16.0](https://source.golabs.io/asphalt/asphalt-react/compare/v1.15.0...v1.16.0) (2022-07-26)
-
-
-### Features
-
-* **button:** add support for text qulifiers ([e049f14](https://source.golabs.io/asphalt/asphalt-react/commits/e049f149679eaf9ae72c86e476db619014e51fff))
-
-
-
-
-## [1.14.1](https://source.golabs.io/asphalt/asphalt-react/compare/v1.14.0...v1.14.1) (2022-05-12)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-
-
-
-
-# [1.13.0](https://source.golabs.io/asphalt/asphalt-react/compare/v1.12.2...v1.13.0) (2022-03-30)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-
-
-
-
-## [1.12.2](https://source.golabs.io/asphalt/asphalt-react/compare/v1.12.1...v1.12.2) (2022-02-07)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-
-
-
-
-## [1.12.1](https://source.golabs.io/asphalt/asphalt-react/compare/v1.12.0...v1.12.1) (2022-01-12)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-
-
-
-
-## [1.11.1](https://source.golabs.io/asphalt/asphalt-react/compare/v1.11.0...v1.11.1) (2021-12-03)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-
-
-
-
-## [1.10.2](https://source.golabs.io/asphalt/asphalt-react/compare/v1.10.1...v1.10.2) (2021-10-29)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-
-
-
-
-## [1.10.1](https://source.golabs.io/asphalt/asphalt-react/compare/v1.10.0...v1.10.1) (2021-08-17)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-
-
-
-
-# [1.10.0](https://source.golabs.io/asphalt/asphalt-react/compare/v1.9.0...v1.10.0) (2021-06-30)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-
-
-
-
-# [1.9.0](https://source.golabs.io/asphalt/asphalt-react/compare/v1.8.1...v1.9.0) (2021-06-03)
-
-
-### Bug Fixes
-
-* remove duplicate size related warnings for all components ([0c011ec](https://source.golabs.io/asphalt/asphalt-react/commits/0c011ecf48f8a168a8ee3c4baf3e72f6c132911e)), closes [#1199877773455601](https://app.asana.com/0/1170955946111597/1199877773455601)
-
-
-### Features
-
-* **button:** add button-link component ([f7746f7](https://source.golabs.io/asphalt/asphalt-react/commits/f7746f7aaafc3f30db53faaa1e60fbaf1aff6056)), closes [#1174467504955567](https://app.asana.com/0/1170955946111597/1174467504955567)
-
-
-
-
-## [1.8.1](https://source.golabs.io/asphalt/asphalt-react/compare/v1.8.0...v1.8.1) (2021-04-08)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-
-
-
-
-# [1.7.0](https://source.golabs.io/asphalt/asphalt-react/compare/v1.6.1...v1.7.0) (2021-02-16)
-
-### Features
-
-- **button:** add ToggleButton component ([cb0ae5b](https://source.golabs.io/asphalt/asphalt-react/commits/cb0ae5b6b1b310c7cef9f260e9ff6f676e1ca42a)), closes [#1199598451993521](https://app.asana.com/0/1170955946111597/1199598451993521)
-
-## [1.6.1](https://source.golabs.io/asphalt/asphalt-react/compare/v1.6.0...v1.6.1) (2021-02-02)
-
-### Bug Fixes
-
-- **button:** add missing outline button border color ([dac23af](https://source.golabs.io/asphalt/asphalt-react/commits/dac23af34ce66f81da36b8b1820da6c35cc2f4d8)), closes [#1199645087093261](https://app.asana.com/0/1170955946111597/1199645087093261)
-
-# [1.6.0](https://source.golabs.io/asphalt/asphalt-react/compare/v1.5.0...v1.6.0) (2021-01-15)
-
-### Features
-
-- **ssr:** add styling support for components on server environment ([14577a3](https://source.golabs.io/asphalt/asphalt-react/commits/14577a3beb868f3318e4293c96b85f77e3303dc8))
-
-# [1.5.0](https://source.golabs.io/asphalt/asphalt-react/compare/v1.4.0...v1.5.0) (2020-12-04)
-
-### Bug Fixes
-
-- **button:** update react peerDependency version ([0ebd392](https://source.golabs.io/asphalt/asphalt-react/commits/0ebd3929baded7780c48d678430d04755b306bc5)), closes [#1199522688507727](https://app.asana.com/0/1170955946111597/1199522688507727)
-
-# [1.4.0](https://source.golabs.io/asphalt/asphalt-react/compare/v1.3.3...v1.4.0) (2020-11-25)
-
-### Features
-
-- **toggle-switch:** add new component ([417a190](https://source.golabs.io/asphalt/asphalt-react/commits/417a190655eb64fe6fec0e9aacbf65f11043c89d)), closes [#1199358425197126](https://app.asana.com/0/1170955946111597/1199358425197126)
-
-## [1.3.2](https://source.golabs.io/asphalt/asphalt-react/compare/v1.3.0...v1.3.2) (2020-10-29)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-## [1.3.1](https://source.golabs.io/asphalt/asphalt-react/compare/v1.3.0...v1.3.1) (2020-09-11)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-# [1.3.0](https://source.golabs.io/asphalt/asphalt-react/compare/v1.2.1...v1.3.0) (2020-08-27)
-
-### Bug Fixes
-
-- **button:** styles for disabled state ([c2a8eb4](https://source.golabs.io/asphalt/asphalt-react/commits/c2a8eb48d78b87c5556b6caa822339b5a76fb3ab)), closes [#1189007721622873](https://app.asana.com/0/1170955946111597/1189007721622873)
-- **buttton:** size propType is string instead of enum ([44c6382](https://source.golabs.io/asphalt/asphalt-react/commits/44c6382529be623db9a8d1eed8a2d62d8998ffdb)), closes [#1187639090907201](https://app.asana.com/0/1170955946111597/1187639090907201)
-
-## [1.2.1](https://source.golabs.io/asphalt/asphalt-react/compare/v1.2.0...v1.2.1) (2020-07-24)
-
-### Bug Fixes
-
-- **button:** stop event propagation of iconbutton and qualifier svgs ([a96665b](https://source.golabs.io/asphalt/asphalt-react/commits/a96665b35b43b0593882d9f208cdb67483c6561d)), closes [#1185219486662625](https://app.asana.com/0/1170955946111597/1185219486662625)
-
-# [1.2.0](https://source.golabs.io/asphalt/asphalt-react/compare/v1.1.3...v1.2.0) (2020-07-03)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-## [1.1.3](https://source.golabs.io/asphalt/asphalt-react/compare/v1.1.2...v1.1.3) (2020-05-29)
-
-### Bug Fixes
-
-- **button:** caption now has Maison Neue Demi font ([2794fa4](https://source.golabs.io/asphalt/asphalt-react/commits/2794fa48b5531a119007e1a8df8d2961729a64f7)), closes [#1177384994147569](https://app.asana.com/0/1170955946111597/1177384994147569)
-
-# [1.1.0](https://source.golabs.io/asphalt/asphalt-react/compare/v1.0.1...v1.1.0) (2020-05-04)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-# [1.0.0](https://source.golabs.io/asphalt/asphalt-react/compare/v0.9.0...v1.0.0) (2020-04-01)
-
-- refactor(popover)!: make PopoverLite private ([3fe0f54](https://source.golabs.io/asphalt/asphalt-react/commits/3fe0f545ffa7057a0b9553ac05f7dc2444407b5e)), closes [#211](https://source.golabs.io/asphalt/asphalt-react/issues/211)
-- refactor(button)!: rename `inline` prop ([18d6174](https://source.golabs.io/asphalt/asphalt-react/commits/18d6174d544375d538e1d250d22659ddd03ecd90)), closes [#210](https://source.golabs.io/asphalt/asphalt-react/issues/210)
-
-### BREAKING CHANGES
-
-- make PopoverLite private
-- rename `inline` prop
-
-* rename `inline` prop to `nude` in Button and IconButton
-
-# [0.9.0](https://source.golabs.io/asphalt/asphalt-react/compare/v0.8.1...v0.9.0) (2020-03-27)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-# [0.8.0](https://source.golabs.io/asphalt/asphalt-react/compare/v0.7.1...v0.8.0) (2020-03-13)
-
-### Features
-
-- **popover:** add basic implementation ([2b34be5](https://source.golabs.io/asphalt/asphalt-react/commits/2b34be5c22000b9c9c0a1f7539f6dab02fdfd699))
-
-## [0.7.1](https://source.golabs.io/asphalt/asphalt-react/compare/v0.7.0...v0.7.1) (2020-02-21)
-
-### Bug Fixes
-
-- **button:** fix ref forwarding issue ([af3e669](https://source.golabs.io/asphalt/asphalt-react/commits/af3e669fe0da868f5ae868d84f9e07c7a25a6580)), closes [#133](https://source.golabs.io/asphalt/asphalt-react/issues/133)
-
-# [0.7.0](https://source.golabs.io/asphalt/asphalt-react/compare/v0.6.0...v0.7.0) (2020-02-05)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-# [0.6.0](https://source.golabs.io/asphalt/asphalt-react/compare/v0.5.0...v0.6.0) (2020-01-20)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-# [0.5.0](https://source.golabs.io/asphalt/asphalt-react/compare/v0.4.2...v0.5.0) (2020-01-03)
-
-### Bug Fixes
-
-- **button:** update tokens in button.css ([fdf3b1e](https://source.golabs.io/asphalt/asphalt-react/commits/fdf3b1e)), closes [#121](https://source.golabs.io/asphalt/asphalt-react/issues/121)
-
-## [0.4.2](https://source.golabs.io/asphalt/asphalt-react/compare/v0.4.1...v0.4.2) (2019-12-16)
-
-### Bug Fixes
-
-- **button:** remove prop ([00db40e](https://source.golabs.io/asphalt/asphalt-react/commits/00db40e)), closes [#119](https://source.golabs.io/asphalt/asphalt-react/issues/119)
-
-# [0.4.0](https://source.golabs.io/asphalt/asphalt-react/compare/v0.3.0...v0.4.0) (2019-11-28)
-
-### Bug Fixes
-
-- **button:** update prop names ([8a019f8](https://source.golabs.io/asphalt/asphalt-react/commits/8a019f8))
-
-# [0.3.0](https://source.golabs.io/asphalt/asphalt-react/compare/v0.2.1-alpha.6...v0.3.0) (2019-10-16)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-## [0.2.1-alpha.5](https://source.golabs.io/asphalt/asphalt-react/compare/v0.2.1-alpha.4...v0.2.1-alpha.5) (2019-08-28)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-## [0.2.1-alpha.2](https://source.golabs.io/asphalt/asphalt-react/compare/v0.2.1-alpha.1...v0.2.1-alpha.2) (2019-08-20)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-## [0.2.1-alpha.1](https://source.golabs.io/asphalt/asphalt-react/compare/v0.2.1-alpha.0...v0.2.1-alpha.1) (2019-08-20)
-
-### Bug Fixes
-
-- **button:** support for svg as react components ([91f6319](https://source.golabs.io/asphalt/asphalt-react/commits/91f6319)), closes [#37](https://source.golabs.io/asphalt/asphalt-react/issues/37)
-- **helper:** extract helper to its own pkg ([293f7dc](https://source.golabs.io/asphalt/asphalt-react/commits/293f7dc))
-
-## [0.2.1-alpha.0](https://source.golabs.io/asphalt/asphalt-react/compare/v0.2.0...v0.2.1-alpha.0) (2019-08-09)
-
-**Note:** Version bump only for package @asphalt-react/button
-
-# 0.2.0 (2019-08-09)
-
-### Features
-
-- **button:** add @asphalt-react/button ([356b5ed](https://source.golabs.io/asphalt/asphalt-react/commits/356b5ed))
-- **helper:** added helper package ([33a7881](https://source.golabs.io/asphalt/asphalt-react/commits/33a7881))

New 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

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

Worsened metrics

Total package byte prevSize

141918

-6.7%

Number of package files

13

-7.14%

Lines of code

2726

-0.04%

Dependency changes

• Updated

  @asphalt-react/helper@^1.17.0

• Updated

  @asphalt-react/qualifier@^1.17.0

• Updated

  @asphalt-react/svg-normalizer@^1.17.0