@asphalt-react/button - npm Package Compare versions

Comparing version 2.0.0-alpha.2 to 2.0.0-alpha.3

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+# [2.0.0-alpha.3](https://source.golabs.io/asphalt/asphalt-react/compare/v2.0.0-alpha.2...v2.0.0-alpha.3) (2022-05-19)
+
+**Note:** Version bump only for package @asphalt-react/button
+
+
+
+
+
 # [2.0.0-alpha.2](https://source.golabs.io/asphalt/asphalt-react/compare/v2.0.0-alpha.1...v2.0.0-alpha.2) (2022-04-14)
@@ -8,0 +16,0 @@

dist/index.cjs

@@ -39,5 +39,5 @@ 'use strict';
 
-const{createPropOccurValidator}=helper.propsUtil;const svgSize=(sizeObj,size)=>{switch(size){case"xs":return sizeObj.xs;case"s":return sizeObj.sm;case"m":return sizeObj.md;case"l":return sizeObj.lg;default:return sizeObj.md;}};const isLarge=(sizes,size)=>size===sizes.l;const isSmall=(sizes,size)=>size===sizes.s;const opensInNewTab=target=>target&&!(target==="_self"||target==="_top"||target==="_parent");const getRelAttributes=target=>opensInNewTab(target)?{rel:"noreferrer"}:{};const resolveStyleForProps=(types,propObj,defaultValue)=>{const validateBtnProp=createPropOccurValidator(types);const singleOccur=validateBtnProp({...propObj});if(!singleOccur){console.warn(`Prop collision detected, falling back to ${defaultValue}`);return defaultValue}const found=Object.keys(propObj).find(variant=>propObj[variant]);return found?found:defaultValue};const getSupportClass=supportType=>{switch(supportType){case helper.DANGER:return "supportDanger";case helper.WARNING:return "supportWarning";case helper.SUCCESS:return "supportSuccess";case helper.INFO:return "supportInfo";default:return null;}};const resolveSizeProp=size=>{const supportedSizes=["xs","s","m","l"];return supportedSizes.includes(size)?size:"m"};
+const{createPropOccurValidator}=helper.propsUtil;const svgSize=(sizeObj,size)=>{switch(size){case"xs":return sizeObj.xs;case"s":return sizeObj.sm;case"m":return sizeObj.md;case"l":return sizeObj.lg;default:return sizeObj.md;}};const opensInNewTab=target=>target&&!(target==="_self"||target==="_top"||target==="_parent");const getRelAttributes=target=>opensInNewTab(target)?{rel:"noreferrer"}:{};const resolveStyleForProps=(types,propObj,defaultValue)=>{const validateBtnProp=createPropOccurValidator(types);const singleOccur=validateBtnProp({...propObj});if(!singleOccur){console.warn(`Prop collision detected, falling back to ${defaultValue}`);return defaultValue}const found=Object.keys(propObj).find(variant=>propObj[variant]);return found?found:defaultValue};const getSupportClass=supportType=>{switch(supportType){case helper.DANGER:return "supportDanger";case helper.WARNING:return "supportWarning";case helper.SUCCESS:return "supportSuccess";case helper.INFO:return "supportInfo";default:return null;}};const resolveSizeProp=size=>{const supportedSizes=["xs","s","m","l"];return supportedSizes.includes(size)?size:"m"};
 
-const sizes={xs:"xs",s:"s",m:"m",l:"l"};const qualifierSVGSizes={xs:{height:"14",width:"14"},sm:{height:"14",width:"14"},md:{height:"16",width:"16"},lg:{height:"16",width:"16"}};const iconSVGSizes={xs:{height:"14",width:"14"},sm:{height:"16",width:"16"},md:{height:"18",width:"18"},lg:{height:"20",width:"20"}};
+const qualifierSVGSizes={xs:{height:"14",width:"14"},sm:{height:"14",width:"14"},md:{height:"16",width:"16"},lg:{height:"16",width:"16"}};const iconSVGSizes={xs:{height:"14",width:"14"},sm:{height:"16",width:"16"},md:{height:"18",width:"18"},lg:{height:"20",width:"20"}};
 
@@ -71,17 +71,9 @@ function styleInject(css, ref) {
 
-var css_248z$1 = ".Button__1PEi0 {\n  /** Border properties */\n  --button-border-focus: var(--interactive-focus, #86afff);\n  --button-border-inactive: var(--interactive-default, #cbcfd7);\n  --button-border-radius: var(--roundness-dynamic-type-1, 0.375rem);\n  --button-compact-icon-border-radius: var(--roundness-defined-type-1, 0.25rem);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  border: 2px solid transparent;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  background-color: var(--button-surface-color);\n  color: var(--button-content-color);\n  font: var(--button-font);\n}\n\n.Button__1PEi0:focus {\n  /* Provide a fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.Button__1PEi0:focus:not(:focus-visible) {\n  /* Remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.Button__1PEi0:focus-visible {\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__2_puO {\n  width: 100%;\n}\n\n/* primary styles */\n.primary__1Ky3d {\n  --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__1bKnj {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-default,\n    #00aa13\n  );\n}\n\n.primaryBrand__1bKnj:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-hover,\n    #33bb42\n  );\n}\n\n.primaryBrand__1bKnj:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-active,\n    #067817\n  );\n}\n\n.primaryDanger__CakS_ {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-default,\n    #f3536b\n  );\n}\n\n.primaryDanger__CakS_:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-hover,\n    #f3637a\n  );\n}\n\n.primaryDanger__CakS_:active {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-active,\n    #c32e52\n  );\n}\n\n.primarySystem__12EXX {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-default,\n    #383942\n  );\n}\n\n.primarySystem__12EXX:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-hover,\n    #444651\n  );\n}\n\n.primarySystem__12EXX:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-active,\n    #0a0d1d\n  );\n}\n\n/* secondary styles */\n.secondary__2ghmX {\n  --button-surface-color: transparent;\n  border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__2ru9o {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__2ru9o:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n}\n\n.secondaryBrand__2ru9o:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.secondaryDanger__2N-gr {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__2N-gr:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.secondaryDanger__2N-gr:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.secondarySystem__1jE71 {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__1jE71:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.secondarySystem__1jE71:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* tertiary styles */\n.tertiaryBrand__11mfz {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.tertiaryBrand__11mfz:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.tertiaryBrand__11mfz:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.tertiaryDanger__2orTD {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-default,\n    #fee1e7\n  );\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.tertiaryDanger__2orTD:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.tertiaryDanger__2orTD:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.tertiarySystem__2oz_s {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-default,\n    #eff2f6\n  );\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__2oz_s:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.tertiarySystem__2oz_s:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude styles */\n.nude__21SMY {\n  --button-surface-color: transparent;\n}\n\n.nudeBrand__2QzmY {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__2QzmY:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.nudeBrand__2QzmY:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.nudeDanger__3M2Ga {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__3M2Ga:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.nudeDanger__3M2Ga:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.nudeSystem__2jOjI {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__2jOjI:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.nudeSystem__2jOjI:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude icon compact styles */\n.compactIcon__2-4zz {\n  --button-content-color: var(--content-primary, #2d2e34);\n  border-radius: var(--button-compact-icon-border-radius);\n}\n\n.compactIcon__2-4zz:hover {\n  --button-surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.compactIcon__2-4zz:active {\n  --button-surface-color: var(--interactive-surface-primary-active, #e6eaf1);\n}\n\n/* disabled styles */\n.primary__1Ky3d:disabled,\n.secondary__2ghmX:disabled,\n.tertiary__348a6:disabled,\n.nude__21SMY:disabled {\n  --button-surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --button-content-color: var(--content-disabled, #9a9eaa);\n  border-color: transparent;\n  cursor: not-allowed;\n}\n\n.qualifier__1MyGo {\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n.qualifierStart__tFnQy {\n  margin-left: 0;\n  margin-right: 0.625rem;\n}\n\n.qualifierEnd__3sHyC {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__tFnQy {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__3sHyC {\n  margin-right: 0.625rem;\n  margin-left: 0;\n}\n\n/* sizes */\n.buttonL__2Fq1f {\n  padding: 1.0625rem 2rem;\n  --button-font: var(--label-L, 600 1.125rem/1.33 Maison Neue);\n  line-height: 1;\n}\n\n.buttonM__1yoCw {\n  padding: 0.875rem 2rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonS__3WdUq {\n  padding: 0.625rem 1.5rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonXs__fE1g7 {\n  padding: 0.5625rem 1rem;\n  --button-font: var(--label-S, 600 0.875rem/1.43 Maison Neue);\n  line-height: 1;\n}\n\n.iconL__1OCnp {\n  padding: 1rem;\n}\n\n.iconM__u4Jq2 {\n  padding: 0.8125rem;\n}\n\n.iconS__3Wj8x {\n  padding: 0.625rem;\n}\n\n.iconXs__3zKG2 {\n  padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__n27nK {\n  padding: 0.5rem;\n}\n\n.compactM__3h2v3 {\n  padding: 0.3125rem;\n}\n\n.compactS__6nilZ {\n  padding: 0.125rem;\n}\n\n.compactXs__274mB {\n  padding: 0.0625rem;\n}\n\n/** link style */\n.link__FEvFh {\n  text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__25ulR {\n  --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__2F9X8 {\n  --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__2F9X8:hover {\n  --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__2F9X8:active {\n  --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__1_mr3 {\n  --button-surface-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n}\n\n.supportWarning__1_mr3:hover {\n  --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__1_mr3:active {\n  --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__3x2ij {\n  --button-surface-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n}\n\n.supportSuccess__3x2ij:hover {\n  --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__3x2ij:active {\n  --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__1l-uQ {\n  --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__1l-uQ:hover {\n  --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__1l-uQ:active {\n  --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n";
-var styles$1 = {"Button":"Button__1PEi0","stretch":"stretch__2_puO","primary":"primary__1Ky3d","primaryBrand":"primaryBrand__1bKnj","primaryDanger":"primaryDanger__CakS_","primarySystem":"primarySystem__12EXX","secondary":"secondary__2ghmX","secondaryBrand":"secondaryBrand__2ru9o","secondaryDanger":"secondaryDanger__2N-gr","secondarySystem":"secondarySystem__1jE71","tertiaryBrand":"tertiaryBrand__11mfz","tertiaryDanger":"tertiaryDanger__2orTD","tertiarySystem":"tertiarySystem__2oz_s","nude":"nude__21SMY","nudeBrand":"nudeBrand__2QzmY","nudeDanger":"nudeDanger__3M2Ga","nudeSystem":"nudeSystem__2jOjI","compactIcon":"compactIcon__2-4zz","tertiary":"tertiary__348a6","qualifier":"qualifier__1MyGo","qualifierStart":"qualifierStart__tFnQy","qualifierEnd":"qualifierEnd__3sHyC","buttonL":"buttonL__2Fq1f","buttonM":"buttonM__1yoCw","buttonS":"buttonS__3WdUq","buttonXs":"buttonXs__fE1g7","iconL":"iconL__1OCnp","iconM":"iconM__u4Jq2","iconS":"iconS__3Wj8x","iconXs":"iconXs__3zKG2","compactL":"compactL__n27nK","compactM":"compactM__3h2v3","compactS":"compactS__6nilZ","compactXs":"compactXs__274mB","link":"link__FEvFh","support":"support__25ulR","supportDanger":"supportDanger__2F9X8","supportWarning":"supportWarning__1_mr3","supportSuccess":"supportSuccess__3x2ij","supportInfo":"supportInfo__1l-uQ"};
-var stylesheet$1=".Button__1PEi0 {\n  /** Border properties */\n  --button-border-focus: var(--interactive-focus, #86afff);\n  --button-border-inactive: var(--interactive-default, #cbcfd7);\n  --button-border-radius: var(--roundness-dynamic-type-1, 0.375rem);\n  --button-compact-icon-border-radius: var(--roundness-defined-type-1, 0.25rem);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  border: 2px solid transparent;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  background-color: var(--button-surface-color);\n  color: var(--button-content-color);\n  font: var(--button-font);\n}\n\n.Button__1PEi0:focus {\n  /* Provide a fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.Button__1PEi0:focus:not(:focus-visible) {\n  /* Remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.Button__1PEi0:focus-visible {\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__2_puO {\n  width: 100%;\n}\n\n/* primary styles */\n.primary__1Ky3d {\n  --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__1bKnj {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-default,\n    #00aa13\n  );\n}\n\n.primaryBrand__1bKnj:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-hover,\n    #33bb42\n  );\n}\n\n.primaryBrand__1bKnj:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-active,\n    #067817\n  );\n}\n\n.primaryDanger__CakS_ {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-default,\n    #f3536b\n  );\n}\n\n.primaryDanger__CakS_:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-hover,\n    #f3637a\n  );\n}\n\n.primaryDanger__CakS_:active {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-active,\n    #c32e52\n  );\n}\n\n.primarySystem__12EXX {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-default,\n    #383942\n  );\n}\n\n.primarySystem__12EXX:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-hover,\n    #444651\n  );\n}\n\n.primarySystem__12EXX:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-active,\n    #0a0d1d\n  );\n}\n\n/* secondary styles */\n.secondary__2ghmX {\n  --button-surface-color: transparent;\n  border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__2ru9o {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__2ru9o:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n}\n\n.secondaryBrand__2ru9o:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.secondaryDanger__2N-gr {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__2N-gr:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.secondaryDanger__2N-gr:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.secondarySystem__1jE71 {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__1jE71:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.secondarySystem__1jE71:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* tertiary styles */\n.tertiaryBrand__11mfz {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.tertiaryBrand__11mfz:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.tertiaryBrand__11mfz:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.tertiaryDanger__2orTD {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-default,\n    #fee1e7\n  );\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.tertiaryDanger__2orTD:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.tertiaryDanger__2orTD:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.tertiarySystem__2oz_s {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-default,\n    #eff2f6\n  );\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__2oz_s:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.tertiarySystem__2oz_s:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude styles */\n.nude__21SMY {\n  --button-surface-color: transparent;\n}\n\n.nudeBrand__2QzmY {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__2QzmY:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.nudeBrand__2QzmY:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.nudeDanger__3M2Ga {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__3M2Ga:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.nudeDanger__3M2Ga:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.nudeSystem__2jOjI {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__2jOjI:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.nudeSystem__2jOjI:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude icon compact styles */\n.compactIcon__2-4zz {\n  --button-content-color: var(--content-primary, #2d2e34);\n  border-radius: var(--button-compact-icon-border-radius);\n}\n\n.compactIcon__2-4zz:hover {\n  --button-surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.compactIcon__2-4zz:active {\n  --button-surface-color: var(--interactive-surface-primary-active, #e6eaf1);\n}\n\n/* disabled styles */\n.primary__1Ky3d:disabled,\n.secondary__2ghmX:disabled,\n.tertiary__348a6:disabled,\n.nude__21SMY:disabled {\n  --button-surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --button-content-color: var(--content-disabled, #9a9eaa);\n  border-color: transparent;\n  cursor: not-allowed;\n}\n\n.qualifier__1MyGo {\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n.qualifierStart__tFnQy {\n  margin-left: 0;\n  margin-right: 0.625rem;\n}\n\n.qualifierEnd__3sHyC {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__tFnQy {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__3sHyC {\n  margin-right: 0.625rem;\n  margin-left: 0;\n}\n\n/* sizes */\n.buttonL__2Fq1f {\n  padding: 1.0625rem 2rem;\n  --button-font: var(--label-L, 600 1.125rem/1.33 Maison Neue);\n  line-height: 1;\n}\n\n.buttonM__1yoCw {\n  padding: 0.875rem 2rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonS__3WdUq {\n  padding: 0.625rem 1.5rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonXs__fE1g7 {\n  padding: 0.5625rem 1rem;\n  --button-font: var(--label-S, 600 0.875rem/1.43 Maison Neue);\n  line-height: 1;\n}\n\n.iconL__1OCnp {\n  padding: 1rem;\n}\n\n.iconM__u4Jq2 {\n  padding: 0.8125rem;\n}\n\n.iconS__3Wj8x {\n  padding: 0.625rem;\n}\n\n.iconXs__3zKG2 {\n  padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__n27nK {\n  padding: 0.5rem;\n}\n\n.compactM__3h2v3 {\n  padding: 0.3125rem;\n}\n\n.compactS__6nilZ {\n  padding: 0.125rem;\n}\n\n.compactXs__274mB {\n  padding: 0.0625rem;\n}\n\n/** link style */\n.link__FEvFh {\n  text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__25ulR {\n  --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__2F9X8 {\n  --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__2F9X8:hover {\n  --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__2F9X8:active {\n  --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__1_mr3 {\n  --button-surface-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n}\n\n.supportWarning__1_mr3:hover {\n  --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__1_mr3:active {\n  --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__3x2ij {\n  --button-surface-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n}\n\n.supportSuccess__3x2ij:hover {\n  --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__3x2ij:active {\n  --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__1l-uQ {\n  --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__1l-uQ:hover {\n  --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__1l-uQ:active {\n  --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n";
-styleInject(css_248z$1);
-
-const{isSVG}=helper.svgUtil;const{concatClasses}=helper.propsUtil;const Button=React.forwardRef(({children,size,primary,secondary,tertiary,nude,brand,danger,system,qualifier,qualifierEnd,stretch,icon,compact,link,as:Link,asProps,...props},ref)=>{context.sendStyles(stylesheet$1);const getVariantClass=()=>{return resolveStyleForProps(["primary","secondary","tertiary","nude"],{primary,secondary,tertiary,nude},"primary")};const getIntentClass=()=>{return resolveStyleForProps(["brand","danger","system"],{brand,danger,system},"brand")};const{style,className,...rest}=props;const iconOnly=icon&&!compact;const isCompactIcon=nude&&icon&&compact;const compactClass=cn__default['default'](styles$1.compactIcon,styles$1[`${concatClasses("compact",resolveSizeProp(size))}`]);const btnclasses=cn__default['default'](styles$1.Button,styles$1[`${getVariantClass()}`],styles$1[`${concatClasses(getVariantClass(),getIntentClass())}`],{[styles$1[`${concatClasses("button",resolveSizeProp(size))}`]]:!icon},{[styles$1[`${concatClasses("icon",resolveSizeProp(size))}`]]:iconOnly},{[compactClass]:isCompactIcon},{[styles$1.link]:link},{[styles$1.stretch]:stretch});const getSupportClasses=supportType=>{return cn__default['default'](btnclasses,{[styles$1.support]:Boolean(supportType)},{[styles$1[`${getSupportClass(supportType)}`]]:nude&&Boolean(supportType)})};if(link&&opensInNewTab(asProps===null||asProps===void 0?void 0:asProps.target)&&!qualifier){qualifier=React__default['default'].createElement(NewTab,null);}const getQualifier=()=>React__default['default'].createElement("span",{"data-testid":"qualifier",className:cn__default['default'](styles$1.qualifier,qualifierEnd?styles$1.qualifierEnd:styles$1.qualifierStart)},React__default['default'].createElement(SvgNormalizer__default['default'],{size:svgSize(qualifierSVGSizes,size)},qualifier));const getIcon=()=>{if(icon&&!isSVG(children)){console.warn("Icon can only be SVG");children="";}return React__default['default'].createElement(SvgNormalizer__default['default'],{size:svgSize(iconSVGSizes,size)},children)};const getQualifierWithChildren=()=>{if(qualifier&&!isSVG(qualifier)){console.warn("Qualifier can only be SVG");qualifier=false;}return React__default['default'].createElement(React__default['default'].Fragment,null,qualifier&&!qualifierEnd&&getQualifier(),children,qualifier&&qualifierEnd&&getQualifier())};if(link){const{style,...restAsProps}=asProps||{};return React__default['default'].createElement(Link,_extends({},getRelAttributes(asProps===null||asProps===void 0?void 0:asProps.target),restAsProps,{className:btnclasses,ref:ref}),icon?getIcon():getQualifierWithChildren())}if(icon){return React__default['default'].createElement("button",_extends({type:"button"},rest,{className:btnclasses,ref:ref}),getIcon())}return React__default['default'].createElement(context.Consumer,null,({supportType})=>{return React__default['default'].createElement("button",_extends({type:"button"},rest,{className:getSupportClasses(supportType),ref:ref}),getQualifierWithChildren())})});Button.displayName="Button";Button.propTypes={children:PropTypes__default['default'].node.isRequired,primary:PropTypes__default['default'].bool,secondary:PropTypes__default['default'].bool,tertiary:PropTypes__default['default'].bool,nude:PropTypes__default['default'].bool,brand:PropTypes__default['default'].bool,danger:PropTypes__default['default'].bool,system:PropTypes__default['default'].bool,link:PropTypes__default['default'].bool,as:PropTypes__default['default'].elementType,asProps:PropTypes__default['default'].object,icon:PropTypes__default['default'].bool,compact:PropTypes__default['default'].bool,qualifier:PropTypes__default['default'].element,qualifierEnd:PropTypes__default['default'].bool,size:PropTypes__default['default'].oneOf(["xs","s","m","l"]),stretch:PropTypes__default['default'].bool};Button.defaultProps={size:"m",stretch:false,primary:false,secondary:false,tertiary:false,nude:false,brand:false,danger:false,system:false,qualifier:null,qualifierEnd:false,icon:false,compact:false,link:false,as:"a",asProps:{href:"."}};
-
-var css_248z = ".ToggleButton__3st07 {\n  /* default custom properties */\n  --button-border-radius: 6px;\n  --button-l-fontsize: 18px;\n  --button-m-fontsize: 16px;\n  --button-s-fontsize: 16px;\n  --button-xs-fontsize: 14px;\n\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: none;\n  font-weight: 600;\n  line-height: 1;\n  border: 2px solid transparent;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n}\n\n.toggleButton__1Co6e {\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__3p6rG {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__3vmfB {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__1j08g {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__S3uT- {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__2owrb {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__1Co6e:hover,\n.toggleButton__1Co6e:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__1Co6e:focus {\n  border-color: var(--interactive-focus, #86afff);\n}\n\n.on__3v7eU {\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__3v7eU svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__3v7eU:hover,\n.on__3v7eU:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__1Co6e:disabled,\n.on__3v7eU: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__3v7eU:disabled {\n  --toggle-button-background-color: var(--interactive-disabled, #eaecf0);\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n}\n";
-var styles = {"ToggleButton":"ToggleButton__3st07","toggleButton":"toggleButton__1Co6e","smallToggle":"smallToggle__3p6rG","largeToggle":"largeToggle__3vmfB","iconToggle":"iconToggle__1j08g","smallIconToggle":"smallIconToggle__S3uT-","largeIconToggle":"largeIconToggle__2owrb","on":"on__3v7eU"};
-var stylesheet=".ToggleButton__3st07 {\n  /* default custom properties */\n  --button-border-radius: 6px;\n  --button-l-fontsize: 18px;\n  --button-m-fontsize: 16px;\n  --button-s-fontsize: 16px;\n  --button-xs-fontsize: 14px;\n\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: none;\n  font-weight: 600;\n  line-height: 1;\n  border: 2px solid transparent;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n}\n\n.toggleButton__1Co6e {\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__3p6rG {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__3vmfB {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__1j08g {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__S3uT- {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__2owrb {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__1Co6e:hover,\n.toggleButton__1Co6e:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__1Co6e:focus {\n  border-color: var(--interactive-focus, #86afff);\n}\n\n.on__3v7eU {\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__3v7eU svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__3v7eU:hover,\n.on__3v7eU:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__1Co6e:disabled,\n.on__3v7eU: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__3v7eU:disabled {\n  --toggle-button-background-color: var(--interactive-disabled, #eaecf0);\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n}\n";
+var css_248z = ".Button__1PEi0 {\n  /** Border properties */\n  --button-border-focus: var(--interactive-focus, #86afff);\n  --button-border-inactive: var(--interactive-default, #cbcfd7);\n  --button-border-radius: var(--roundness-dynamic-type-1, 0.375rem);\n  --button-compact-icon-border-radius: var(--roundness-defined-type-1, 0.25rem);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  border: 2px solid transparent;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  background-color: var(--button-surface-color);\n  color: var(--button-content-color);\n  font: var(--button-font);\n}\n\n.Button__1PEi0:focus {\n  /* Provide a fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.Button__1PEi0:focus:not(:focus-visible) {\n  /* Remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.Button__1PEi0:focus-visible {\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__2_puO {\n  width: 100%;\n}\n\n/* primary styles */\n.primary__1Ky3d {\n  --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__1bKnj {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-default,\n    #00aa13\n  );\n}\n\n.primaryBrand__1bKnj:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-hover,\n    #33bb42\n  );\n}\n\n.primaryBrand__1bKnj:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-active,\n    #067817\n  );\n}\n\n.primaryDanger__CakS_ {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-default,\n    #f3536b\n  );\n}\n\n.primaryDanger__CakS_:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-hover,\n    #f3637a\n  );\n}\n\n.primaryDanger__CakS_:active {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-active,\n    #c32e52\n  );\n}\n\n.primarySystem__12EXX {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-default,\n    #383942\n  );\n}\n\n.primarySystem__12EXX:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-hover,\n    #444651\n  );\n}\n\n.primarySystem__12EXX:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-active,\n    #0a0d1d\n  );\n}\n\n/* secondary styles */\n.secondary__2ghmX {\n  --button-surface-color: transparent;\n  border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__2ru9o {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__2ru9o:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n}\n\n.secondaryBrand__2ru9o:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.secondaryDanger__2N-gr {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__2N-gr:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.secondaryDanger__2N-gr:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.secondarySystem__1jE71 {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__1jE71:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.secondarySystem__1jE71:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* tertiary styles */\n.tertiaryBrand__11mfz {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.tertiaryBrand__11mfz:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.tertiaryBrand__11mfz:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.tertiaryDanger__2orTD {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-default,\n    #fee1e7\n  );\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.tertiaryDanger__2orTD:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.tertiaryDanger__2orTD:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.tertiarySystem__2oz_s {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-default,\n    #eff2f6\n  );\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__2oz_s:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.tertiarySystem__2oz_s:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude styles */\n.nude__21SMY {\n  --button-surface-color: transparent;\n}\n\n.nudeBrand__2QzmY {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__2QzmY:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.nudeBrand__2QzmY:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.nudeDanger__3M2Ga {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__3M2Ga:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.nudeDanger__3M2Ga:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.nudeSystem__2jOjI {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__2jOjI:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.nudeSystem__2jOjI:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude icon compact styles */\n.compactIcon__2-4zz {\n  --button-content-color: var(--content-primary, #2d2e34);\n  border-radius: var(--button-compact-icon-border-radius);\n}\n\n.compactIcon__2-4zz:hover {\n  --button-surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.compactIcon__2-4zz:active {\n  --button-surface-color: var(--interactive-surface-primary-active, #e6eaf1);\n}\n\n/* disabled styles */\n.primary__1Ky3d:disabled,\n.secondary__2ghmX:disabled,\n.tertiary__348a6:disabled,\n.nude__21SMY:disabled {\n  --button-surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --button-content-color: var(--content-disabled, #9a9eaa);\n  border-color: transparent;\n  cursor: not-allowed;\n}\n\n.qualifier__1MyGo {\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n.qualifierStart__tFnQy {\n  margin-left: 0;\n  margin-right: 0.625rem;\n}\n\n.qualifierEnd__3sHyC {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__tFnQy {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__3sHyC {\n  margin-right: 0.625rem;\n  margin-left: 0;\n}\n\n/* sizes */\n.buttonL__2Fq1f {\n  padding: 1.0625rem 2rem;\n  --button-font: var(--label-L, 600 1.125rem/1.33 Maison Neue);\n  line-height: 1;\n}\n\n.buttonM__1yoCw {\n  padding: 0.875rem 2rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonS__3WdUq {\n  padding: 0.625rem 1.5rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonXs__fE1g7 {\n  padding: 0.5625rem 1rem;\n  --button-font: var(--label-S, 600 0.875rem/1.43 Maison Neue);\n  line-height: 1;\n}\n\n.iconL__1OCnp {\n  padding: 1rem;\n}\n\n.iconM__u4Jq2 {\n  padding: 0.8125rem;\n}\n\n.iconS__3Wj8x {\n  padding: 0.625rem;\n}\n\n.iconXs__3zKG2 {\n  padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__n27nK {\n  padding: 0.5rem;\n}\n\n.compactM__3h2v3 {\n  padding: 0.3125rem;\n}\n\n.compactS__6nilZ {\n  padding: 0.125rem;\n}\n\n.compactXs__274mB {\n  padding: 0.0625rem;\n}\n\n/** link style */\n.link__FEvFh {\n  text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__25ulR {\n  --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__2F9X8 {\n  --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__2F9X8:hover {\n  --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__2F9X8:active {\n  --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__1_mr3 {\n  --button-surface-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n}\n\n.supportWarning__1_mr3:hover {\n  --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__1_mr3:active {\n  --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__3x2ij {\n  --button-surface-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n}\n\n.supportSuccess__3x2ij:hover {\n  --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__3x2ij:active {\n  --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__1l-uQ {\n  --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__1l-uQ:hover {\n  --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__1l-uQ:active {\n  --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n";
+var styles = {"Button":"Button__1PEi0","stretch":"stretch__2_puO","primary":"primary__1Ky3d","primaryBrand":"primaryBrand__1bKnj","primaryDanger":"primaryDanger__CakS_","primarySystem":"primarySystem__12EXX","secondary":"secondary__2ghmX","secondaryBrand":"secondaryBrand__2ru9o","secondaryDanger":"secondaryDanger__2N-gr","secondarySystem":"secondarySystem__1jE71","tertiaryBrand":"tertiaryBrand__11mfz","tertiaryDanger":"tertiaryDanger__2orTD","tertiarySystem":"tertiarySystem__2oz_s","nude":"nude__21SMY","nudeBrand":"nudeBrand__2QzmY","nudeDanger":"nudeDanger__3M2Ga","nudeSystem":"nudeSystem__2jOjI","compactIcon":"compactIcon__2-4zz","tertiary":"tertiary__348a6","qualifier":"qualifier__1MyGo","qualifierStart":"qualifierStart__tFnQy","qualifierEnd":"qualifierEnd__3sHyC","buttonL":"buttonL__2Fq1f","buttonM":"buttonM__1yoCw","buttonS":"buttonS__3WdUq","buttonXs":"buttonXs__fE1g7","iconL":"iconL__1OCnp","iconM":"iconM__u4Jq2","iconS":"iconS__3Wj8x","iconXs":"iconXs__3zKG2","compactL":"compactL__n27nK","compactM":"compactM__3h2v3","compactS":"compactS__6nilZ","compactXs":"compactXs__274mB","link":"link__FEvFh","support":"support__25ulR","supportDanger":"supportDanger__2F9X8","supportWarning":"supportWarning__1_mr3","supportSuccess":"supportSuccess__3x2ij","supportInfo":"supportInfo__1l-uQ"};
+var stylesheet=".Button__1PEi0 {\n  /** Border properties */\n  --button-border-focus: var(--interactive-focus, #86afff);\n  --button-border-inactive: var(--interactive-default, #cbcfd7);\n  --button-border-radius: var(--roundness-dynamic-type-1, 0.375rem);\n  --button-compact-icon-border-radius: var(--roundness-defined-type-1, 0.25rem);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  border: 2px solid transparent;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  background-color: var(--button-surface-color);\n  color: var(--button-content-color);\n  font: var(--button-font);\n}\n\n.Button__1PEi0:focus {\n  /* Provide a fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.Button__1PEi0:focus:not(:focus-visible) {\n  /* Remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.Button__1PEi0:focus-visible {\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__2_puO {\n  width: 100%;\n}\n\n/* primary styles */\n.primary__1Ky3d {\n  --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__1bKnj {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-default,\n    #00aa13\n  );\n}\n\n.primaryBrand__1bKnj:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-hover,\n    #33bb42\n  );\n}\n\n.primaryBrand__1bKnj:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-active,\n    #067817\n  );\n}\n\n.primaryDanger__CakS_ {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-default,\n    #f3536b\n  );\n}\n\n.primaryDanger__CakS_:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-hover,\n    #f3637a\n  );\n}\n\n.primaryDanger__CakS_:active {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-active,\n    #c32e52\n  );\n}\n\n.primarySystem__12EXX {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-default,\n    #383942\n  );\n}\n\n.primarySystem__12EXX:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-hover,\n    #444651\n  );\n}\n\n.primarySystem__12EXX:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-active,\n    #0a0d1d\n  );\n}\n\n/* secondary styles */\n.secondary__2ghmX {\n  --button-surface-color: transparent;\n  border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__2ru9o {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__2ru9o:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n}\n\n.secondaryBrand__2ru9o:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.secondaryDanger__2N-gr {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__2N-gr:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.secondaryDanger__2N-gr:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.secondarySystem__1jE71 {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__1jE71:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.secondarySystem__1jE71:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* tertiary styles */\n.tertiaryBrand__11mfz {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.tertiaryBrand__11mfz:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.tertiaryBrand__11mfz:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.tertiaryDanger__2orTD {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-default,\n    #fee1e7\n  );\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.tertiaryDanger__2orTD:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.tertiaryDanger__2orTD:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.tertiarySystem__2oz_s {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-default,\n    #eff2f6\n  );\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__2oz_s:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.tertiarySystem__2oz_s:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude styles */\n.nude__21SMY {\n  --button-surface-color: transparent;\n}\n\n.nudeBrand__2QzmY {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__2QzmY:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.nudeBrand__2QzmY:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.nudeDanger__3M2Ga {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__3M2Ga:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.nudeDanger__3M2Ga:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.nudeSystem__2jOjI {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__2jOjI:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.nudeSystem__2jOjI:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude icon compact styles */\n.compactIcon__2-4zz {\n  --button-content-color: var(--content-primary, #2d2e34);\n  border-radius: var(--button-compact-icon-border-radius);\n}\n\n.compactIcon__2-4zz:hover {\n  --button-surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.compactIcon__2-4zz:active {\n  --button-surface-color: var(--interactive-surface-primary-active, #e6eaf1);\n}\n\n/* disabled styles */\n.primary__1Ky3d:disabled,\n.secondary__2ghmX:disabled,\n.tertiary__348a6:disabled,\n.nude__21SMY:disabled {\n  --button-surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --button-content-color: var(--content-disabled, #9a9eaa);\n  border-color: transparent;\n  cursor: not-allowed;\n}\n\n.qualifier__1MyGo {\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n.qualifierStart__tFnQy {\n  margin-left: 0;\n  margin-right: 0.625rem;\n}\n\n.qualifierEnd__3sHyC {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__tFnQy {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__3sHyC {\n  margin-right: 0.625rem;\n  margin-left: 0;\n}\n\n/* sizes */\n.buttonL__2Fq1f {\n  padding: 1.0625rem 2rem;\n  --button-font: var(--label-L, 600 1.125rem/1.33 Maison Neue);\n  line-height: 1;\n}\n\n.buttonM__1yoCw {\n  padding: 0.875rem 2rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonS__3WdUq {\n  padding: 0.625rem 1.5rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonXs__fE1g7 {\n  padding: 0.5625rem 1rem;\n  --button-font: var(--label-S, 600 0.875rem/1.43 Maison Neue);\n  line-height: 1;\n}\n\n.iconL__1OCnp {\n  padding: 1rem;\n}\n\n.iconM__u4Jq2 {\n  padding: 0.8125rem;\n}\n\n.iconS__3Wj8x {\n  padding: 0.625rem;\n}\n\n.iconXs__3zKG2 {\n  padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__n27nK {\n  padding: 0.5rem;\n}\n\n.compactM__3h2v3 {\n  padding: 0.3125rem;\n}\n\n.compactS__6nilZ {\n  padding: 0.125rem;\n}\n\n.compactXs__274mB {\n  padding: 0.0625rem;\n}\n\n/** link style */\n.link__FEvFh {\n  text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__25ulR {\n  --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__2F9X8 {\n  --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__2F9X8:hover {\n  --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__2F9X8:active {\n  --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__1_mr3 {\n  --button-surface-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n}\n\n.supportWarning__1_mr3:hover {\n  --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__1_mr3:active {\n  --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__3x2ij {\n  --button-surface-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n}\n\n.supportSuccess__3x2ij:hover {\n  --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__3x2ij:active {\n  --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__1l-uQ {\n  --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__1l-uQ:hover {\n  --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__1l-uQ:active {\n  --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n";
 styleInject(css_248z);
 
-const ToggleButton=({text,children,icon,size,on,...props})=>{context.sendStyles(stylesheet);const{style,className,...rest}=props;const sizeClass=()=>{const small=isSmall(sizes,size);const large=isLarge(sizes,size);if(icon){return [{[styles.smallIconToggle]:small},{[styles.largeIconToggle]:large}]}return [{[styles.smallToggle]:small},{[styles.largeToggle]:large}]};if(icon&&!helper.svgUtil.isSVG(icon)){console.error("ToggleButton: Icon can only be an SVG or an SVG wrapped React component");return null}return React__default['default'].createElement("button",_extends({},rest,{type:"button",role:"switch","aria-checked":on,className:cn__default['default'](styles.ToggleButton,styles.toggleButton,{[styles.iconToggle]:icon},{[styles.on]:on},sizeClass())}),icon?React__default['default'].createElement(SvgNormalizer__default['default'],{size:svgSize(iconSVGSizes,size)},icon):text||children)};ToggleButton.propTypes={text:PropTypes__default['default'].string,icon:PropTypes__default['default'].node,children:PropTypes__default['default'].node,on:PropTypes__default['default'].bool,size:PropTypes__default['default'].oneOf(["s","m","l"])};ToggleButton.defaultProps={on:false,size:"m"};
+const{isSVG}=helper.svgUtil;const{concatClasses}=helper.propsUtil;const Button=React.forwardRef(({children,size,primary,secondary,tertiary,nude,brand,danger,system,qualifier,qualifierEnd,stretch,icon,compact,link,as:Link,asProps,...props},ref)=>{context.sendStyles(stylesheet);const getVariantClass=()=>{return resolveStyleForProps(["primary","secondary","tertiary","nude"],{primary,secondary,tertiary,nude},"primary")};const getIntentClass=()=>{return resolveStyleForProps(["brand","danger","system"],{brand,danger,system},"brand")};const{style,className,...rest}=props;const iconOnly=icon&&!compact;const isCompactIcon=nude&&icon&&compact;const compactClass=cn__default['default'](styles.compactIcon,styles[`${concatClasses("compact",resolveSizeProp(size))}`]);const btnclasses=cn__default['default'](styles.Button,styles[`${getVariantClass()}`],styles[`${concatClasses(getVariantClass(),getIntentClass())}`],{[styles[`${concatClasses("button",resolveSizeProp(size))}`]]:!icon},{[styles[`${concatClasses("icon",resolveSizeProp(size))}`]]:iconOnly},{[compactClass]:isCompactIcon},{[styles.link]:link},{[styles.stretch]:stretch});const getSupportClasses=supportType=>{return cn__default['default'](btnclasses,{[styles.support]:Boolean(supportType)},{[styles[`${getSupportClass(supportType)}`]]:nude&&Boolean(supportType)})};if(link&&opensInNewTab(asProps===null||asProps===void 0?void 0:asProps.target)&&!qualifier){qualifier=React__default['default'].createElement(NewTab,null);}const getQualifier=()=>React__default['default'].createElement("span",{"data-testid":"qualifier",className:cn__default['default'](styles.qualifier,qualifierEnd?styles.qualifierEnd:styles.qualifierStart)},React__default['default'].createElement(SvgNormalizer__default['default'],{size:svgSize(qualifierSVGSizes,size)},qualifier));const getIcon=()=>{if(icon&&!isSVG(children)){console.warn("Icon can only be SVG");children="";}return React__default['default'].createElement(SvgNormalizer__default['default'],{size:svgSize(iconSVGSizes,size)},children)};const getQualifierWithChildren=()=>{if(qualifier&&!isSVG(qualifier)){console.warn("Qualifier can only be SVG");qualifier=false;}return React__default['default'].createElement(React__default['default'].Fragment,null,qualifier&&!qualifierEnd&&getQualifier(),children,qualifier&&qualifierEnd&&getQualifier())};if(link){const{style,...restAsProps}=asProps||{};return React__default['default'].createElement(Link,_extends({},getRelAttributes(asProps===null||asProps===void 0?void 0:asProps.target),restAsProps,{className:btnclasses,ref:ref}),icon?getIcon():getQualifierWithChildren())}if(icon){return React__default['default'].createElement("button",_extends({type:"button"},rest,{className:btnclasses,ref:ref}),getIcon())}return React__default['default'].createElement(context.Consumer,null,({supportType})=>{return React__default['default'].createElement("button",_extends({type:"button"},rest,{className:getSupportClasses(supportType),ref:ref}),getQualifierWithChildren())})});Button.displayName="Button";Button.propTypes={children:PropTypes__default['default'].node.isRequired,primary:PropTypes__default['default'].bool,secondary:PropTypes__default['default'].bool,tertiary:PropTypes__default['default'].bool,nude:PropTypes__default['default'].bool,brand:PropTypes__default['default'].bool,danger:PropTypes__default['default'].bool,system:PropTypes__default['default'].bool,link:PropTypes__default['default'].bool,as:PropTypes__default['default'].elementType,asProps:PropTypes__default['default'].object,icon:PropTypes__default['default'].bool,compact:PropTypes__default['default'].bool,qualifier:PropTypes__default['default'].element,qualifierEnd:PropTypes__default['default'].bool,size:PropTypes__default['default'].oneOf(["xs","s","m","l"]),stretch:PropTypes__default['default'].bool};Button.defaultProps={size:"m",stretch:false,primary:false,secondary:false,tertiary:false,nude:false,brand:false,danger:false,system:false,qualifier:null,qualifierEnd:false,icon:false,compact:false,link:false,as:"a",asProps:{href:"."}};
 
 exports.Button = Button;
-exports.ToggleButton = ToggleButton;

dist/index.js

@@ -28,5 +28,5 @@ import React, { forwardRef } from 'react';
 
-const{createPropOccurValidator}=propsUtil;const svgSize=(sizeObj,size)=>{switch(size){case"xs":return sizeObj.xs;case"s":return sizeObj.sm;case"m":return sizeObj.md;case"l":return sizeObj.lg;default:return sizeObj.md;}};const isLarge=(sizes,size)=>size===sizes.l;const isSmall=(sizes,size)=>size===sizes.s;const opensInNewTab=target=>target&&!(target==="_self"||target==="_top"||target==="_parent");const getRelAttributes=target=>opensInNewTab(target)?{rel:"noreferrer"}:{};const resolveStyleForProps=(types,propObj,defaultValue)=>{const validateBtnProp=createPropOccurValidator(types);const singleOccur=validateBtnProp({...propObj});if(!singleOccur){console.warn(`Prop collision detected, falling back to ${defaultValue}`);return defaultValue}const found=Object.keys(propObj).find(variant=>propObj[variant]);return found?found:defaultValue};const getSupportClass=supportType=>{switch(supportType){case DANGER:return "supportDanger";case WARNING:return "supportWarning";case SUCCESS:return "supportSuccess";case INFO:return "supportInfo";default:return null;}};const resolveSizeProp=size=>{const supportedSizes=["xs","s","m","l"];return supportedSizes.includes(size)?size:"m"};
+const{createPropOccurValidator}=propsUtil;const svgSize=(sizeObj,size)=>{switch(size){case"xs":return sizeObj.xs;case"s":return sizeObj.sm;case"m":return sizeObj.md;case"l":return sizeObj.lg;default:return sizeObj.md;}};const opensInNewTab=target=>target&&!(target==="_self"||target==="_top"||target==="_parent");const getRelAttributes=target=>opensInNewTab(target)?{rel:"noreferrer"}:{};const resolveStyleForProps=(types,propObj,defaultValue)=>{const validateBtnProp=createPropOccurValidator(types);const singleOccur=validateBtnProp({...propObj});if(!singleOccur){console.warn(`Prop collision detected, falling back to ${defaultValue}`);return defaultValue}const found=Object.keys(propObj).find(variant=>propObj[variant]);return found?found:defaultValue};const getSupportClass=supportType=>{switch(supportType){case DANGER:return "supportDanger";case WARNING:return "supportWarning";case SUCCESS:return "supportSuccess";case INFO:return "supportInfo";default:return null;}};const resolveSizeProp=size=>{const supportedSizes=["xs","s","m","l"];return supportedSizes.includes(size)?size:"m"};
 
-const sizes={xs:"xs",s:"s",m:"m",l:"l"};const qualifierSVGSizes={xs:{height:"14",width:"14"},sm:{height:"14",width:"14"},md:{height:"16",width:"16"},lg:{height:"16",width:"16"}};const iconSVGSizes={xs:{height:"14",width:"14"},sm:{height:"16",width:"16"},md:{height:"18",width:"18"},lg:{height:"20",width:"20"}};
+const qualifierSVGSizes={xs:{height:"14",width:"14"},sm:{height:"14",width:"14"},md:{height:"16",width:"16"},lg:{height:"16",width:"16"}};const iconSVGSizes={xs:{height:"14",width:"14"},sm:{height:"16",width:"16"},md:{height:"18",width:"18"},lg:{height:"20",width:"20"}};
 
@@ -60,16 +60,9 @@ function styleInject(css, ref) {
 
-var css_248z$1 = ".Button__1PEi0 {\n  /** Border properties */\n  --button-border-focus: var(--interactive-focus, #86afff);\n  --button-border-inactive: var(--interactive-default, #cbcfd7);\n  --button-border-radius: var(--roundness-dynamic-type-1, 0.375rem);\n  --button-compact-icon-border-radius: var(--roundness-defined-type-1, 0.25rem);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  border: 2px solid transparent;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  background-color: var(--button-surface-color);\n  color: var(--button-content-color);\n  font: var(--button-font);\n}\n\n.Button__1PEi0:focus {\n  /* Provide a fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.Button__1PEi0:focus:not(:focus-visible) {\n  /* Remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.Button__1PEi0:focus-visible {\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__2_puO {\n  width: 100%;\n}\n\n/* primary styles */\n.primary__1Ky3d {\n  --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__1bKnj {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-default,\n    #00aa13\n  );\n}\n\n.primaryBrand__1bKnj:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-hover,\n    #33bb42\n  );\n}\n\n.primaryBrand__1bKnj:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-active,\n    #067817\n  );\n}\n\n.primaryDanger__CakS_ {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-default,\n    #f3536b\n  );\n}\n\n.primaryDanger__CakS_:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-hover,\n    #f3637a\n  );\n}\n\n.primaryDanger__CakS_:active {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-active,\n    #c32e52\n  );\n}\n\n.primarySystem__12EXX {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-default,\n    #383942\n  );\n}\n\n.primarySystem__12EXX:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-hover,\n    #444651\n  );\n}\n\n.primarySystem__12EXX:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-active,\n    #0a0d1d\n  );\n}\n\n/* secondary styles */\n.secondary__2ghmX {\n  --button-surface-color: transparent;\n  border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__2ru9o {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__2ru9o:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n}\n\n.secondaryBrand__2ru9o:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.secondaryDanger__2N-gr {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__2N-gr:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.secondaryDanger__2N-gr:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.secondarySystem__1jE71 {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__1jE71:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.secondarySystem__1jE71:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* tertiary styles */\n.tertiaryBrand__11mfz {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.tertiaryBrand__11mfz:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.tertiaryBrand__11mfz:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.tertiaryDanger__2orTD {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-default,\n    #fee1e7\n  );\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.tertiaryDanger__2orTD:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.tertiaryDanger__2orTD:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.tertiarySystem__2oz_s {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-default,\n    #eff2f6\n  );\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__2oz_s:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.tertiarySystem__2oz_s:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude styles */\n.nude__21SMY {\n  --button-surface-color: transparent;\n}\n\n.nudeBrand__2QzmY {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__2QzmY:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.nudeBrand__2QzmY:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.nudeDanger__3M2Ga {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__3M2Ga:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.nudeDanger__3M2Ga:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.nudeSystem__2jOjI {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__2jOjI:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.nudeSystem__2jOjI:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude icon compact styles */\n.compactIcon__2-4zz {\n  --button-content-color: var(--content-primary, #2d2e34);\n  border-radius: var(--button-compact-icon-border-radius);\n}\n\n.compactIcon__2-4zz:hover {\n  --button-surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.compactIcon__2-4zz:active {\n  --button-surface-color: var(--interactive-surface-primary-active, #e6eaf1);\n}\n\n/* disabled styles */\n.primary__1Ky3d:disabled,\n.secondary__2ghmX:disabled,\n.tertiary__348a6:disabled,\n.nude__21SMY:disabled {\n  --button-surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --button-content-color: var(--content-disabled, #9a9eaa);\n  border-color: transparent;\n  cursor: not-allowed;\n}\n\n.qualifier__1MyGo {\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n.qualifierStart__tFnQy {\n  margin-left: 0;\n  margin-right: 0.625rem;\n}\n\n.qualifierEnd__3sHyC {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__tFnQy {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__3sHyC {\n  margin-right: 0.625rem;\n  margin-left: 0;\n}\n\n/* sizes */\n.buttonL__2Fq1f {\n  padding: 1.0625rem 2rem;\n  --button-font: var(--label-L, 600 1.125rem/1.33 Maison Neue);\n  line-height: 1;\n}\n\n.buttonM__1yoCw {\n  padding: 0.875rem 2rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonS__3WdUq {\n  padding: 0.625rem 1.5rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonXs__fE1g7 {\n  padding: 0.5625rem 1rem;\n  --button-font: var(--label-S, 600 0.875rem/1.43 Maison Neue);\n  line-height: 1;\n}\n\n.iconL__1OCnp {\n  padding: 1rem;\n}\n\n.iconM__u4Jq2 {\n  padding: 0.8125rem;\n}\n\n.iconS__3Wj8x {\n  padding: 0.625rem;\n}\n\n.iconXs__3zKG2 {\n  padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__n27nK {\n  padding: 0.5rem;\n}\n\n.compactM__3h2v3 {\n  padding: 0.3125rem;\n}\n\n.compactS__6nilZ {\n  padding: 0.125rem;\n}\n\n.compactXs__274mB {\n  padding: 0.0625rem;\n}\n\n/** link style */\n.link__FEvFh {\n  text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__25ulR {\n  --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__2F9X8 {\n  --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__2F9X8:hover {\n  --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__2F9X8:active {\n  --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__1_mr3 {\n  --button-surface-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n}\n\n.supportWarning__1_mr3:hover {\n  --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__1_mr3:active {\n  --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__3x2ij {\n  --button-surface-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n}\n\n.supportSuccess__3x2ij:hover {\n  --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__3x2ij:active {\n  --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__1l-uQ {\n  --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__1l-uQ:hover {\n  --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__1l-uQ:active {\n  --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n";
-var styles$1 = {"Button":"Button__1PEi0","stretch":"stretch__2_puO","primary":"primary__1Ky3d","primaryBrand":"primaryBrand__1bKnj","primaryDanger":"primaryDanger__CakS_","primarySystem":"primarySystem__12EXX","secondary":"secondary__2ghmX","secondaryBrand":"secondaryBrand__2ru9o","secondaryDanger":"secondaryDanger__2N-gr","secondarySystem":"secondarySystem__1jE71","tertiaryBrand":"tertiaryBrand__11mfz","tertiaryDanger":"tertiaryDanger__2orTD","tertiarySystem":"tertiarySystem__2oz_s","nude":"nude__21SMY","nudeBrand":"nudeBrand__2QzmY","nudeDanger":"nudeDanger__3M2Ga","nudeSystem":"nudeSystem__2jOjI","compactIcon":"compactIcon__2-4zz","tertiary":"tertiary__348a6","qualifier":"qualifier__1MyGo","qualifierStart":"qualifierStart__tFnQy","qualifierEnd":"qualifierEnd__3sHyC","buttonL":"buttonL__2Fq1f","buttonM":"buttonM__1yoCw","buttonS":"buttonS__3WdUq","buttonXs":"buttonXs__fE1g7","iconL":"iconL__1OCnp","iconM":"iconM__u4Jq2","iconS":"iconS__3Wj8x","iconXs":"iconXs__3zKG2","compactL":"compactL__n27nK","compactM":"compactM__3h2v3","compactS":"compactS__6nilZ","compactXs":"compactXs__274mB","link":"link__FEvFh","support":"support__25ulR","supportDanger":"supportDanger__2F9X8","supportWarning":"supportWarning__1_mr3","supportSuccess":"supportSuccess__3x2ij","supportInfo":"supportInfo__1l-uQ"};
-var stylesheet$1=".Button__1PEi0 {\n  /** Border properties */\n  --button-border-focus: var(--interactive-focus, #86afff);\n  --button-border-inactive: var(--interactive-default, #cbcfd7);\n  --button-border-radius: var(--roundness-dynamic-type-1, 0.375rem);\n  --button-compact-icon-border-radius: var(--roundness-defined-type-1, 0.25rem);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  border: 2px solid transparent;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  background-color: var(--button-surface-color);\n  color: var(--button-content-color);\n  font: var(--button-font);\n}\n\n.Button__1PEi0:focus {\n  /* Provide a fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.Button__1PEi0:focus:not(:focus-visible) {\n  /* Remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.Button__1PEi0:focus-visible {\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__2_puO {\n  width: 100%;\n}\n\n/* primary styles */\n.primary__1Ky3d {\n  --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__1bKnj {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-default,\n    #00aa13\n  );\n}\n\n.primaryBrand__1bKnj:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-hover,\n    #33bb42\n  );\n}\n\n.primaryBrand__1bKnj:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-active,\n    #067817\n  );\n}\n\n.primaryDanger__CakS_ {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-default,\n    #f3536b\n  );\n}\n\n.primaryDanger__CakS_:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-hover,\n    #f3637a\n  );\n}\n\n.primaryDanger__CakS_:active {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-active,\n    #c32e52\n  );\n}\n\n.primarySystem__12EXX {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-default,\n    #383942\n  );\n}\n\n.primarySystem__12EXX:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-hover,\n    #444651\n  );\n}\n\n.primarySystem__12EXX:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-active,\n    #0a0d1d\n  );\n}\n\n/* secondary styles */\n.secondary__2ghmX {\n  --button-surface-color: transparent;\n  border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__2ru9o {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__2ru9o:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n}\n\n.secondaryBrand__2ru9o:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.secondaryDanger__2N-gr {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__2N-gr:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.secondaryDanger__2N-gr:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.secondarySystem__1jE71 {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__1jE71:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.secondarySystem__1jE71:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* tertiary styles */\n.tertiaryBrand__11mfz {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.tertiaryBrand__11mfz:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.tertiaryBrand__11mfz:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.tertiaryDanger__2orTD {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-default,\n    #fee1e7\n  );\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.tertiaryDanger__2orTD:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.tertiaryDanger__2orTD:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.tertiarySystem__2oz_s {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-default,\n    #eff2f6\n  );\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__2oz_s:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.tertiarySystem__2oz_s:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude styles */\n.nude__21SMY {\n  --button-surface-color: transparent;\n}\n\n.nudeBrand__2QzmY {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__2QzmY:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.nudeBrand__2QzmY:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.nudeDanger__3M2Ga {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__3M2Ga:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.nudeDanger__3M2Ga:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.nudeSystem__2jOjI {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__2jOjI:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.nudeSystem__2jOjI:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude icon compact styles */\n.compactIcon__2-4zz {\n  --button-content-color: var(--content-primary, #2d2e34);\n  border-radius: var(--button-compact-icon-border-radius);\n}\n\n.compactIcon__2-4zz:hover {\n  --button-surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.compactIcon__2-4zz:active {\n  --button-surface-color: var(--interactive-surface-primary-active, #e6eaf1);\n}\n\n/* disabled styles */\n.primary__1Ky3d:disabled,\n.secondary__2ghmX:disabled,\n.tertiary__348a6:disabled,\n.nude__21SMY:disabled {\n  --button-surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --button-content-color: var(--content-disabled, #9a9eaa);\n  border-color: transparent;\n  cursor: not-allowed;\n}\n\n.qualifier__1MyGo {\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n.qualifierStart__tFnQy {\n  margin-left: 0;\n  margin-right: 0.625rem;\n}\n\n.qualifierEnd__3sHyC {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__tFnQy {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__3sHyC {\n  margin-right: 0.625rem;\n  margin-left: 0;\n}\n\n/* sizes */\n.buttonL__2Fq1f {\n  padding: 1.0625rem 2rem;\n  --button-font: var(--label-L, 600 1.125rem/1.33 Maison Neue);\n  line-height: 1;\n}\n\n.buttonM__1yoCw {\n  padding: 0.875rem 2rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonS__3WdUq {\n  padding: 0.625rem 1.5rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonXs__fE1g7 {\n  padding: 0.5625rem 1rem;\n  --button-font: var(--label-S, 600 0.875rem/1.43 Maison Neue);\n  line-height: 1;\n}\n\n.iconL__1OCnp {\n  padding: 1rem;\n}\n\n.iconM__u4Jq2 {\n  padding: 0.8125rem;\n}\n\n.iconS__3Wj8x {\n  padding: 0.625rem;\n}\n\n.iconXs__3zKG2 {\n  padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__n27nK {\n  padding: 0.5rem;\n}\n\n.compactM__3h2v3 {\n  padding: 0.3125rem;\n}\n\n.compactS__6nilZ {\n  padding: 0.125rem;\n}\n\n.compactXs__274mB {\n  padding: 0.0625rem;\n}\n\n/** link style */\n.link__FEvFh {\n  text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__25ulR {\n  --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__2F9X8 {\n  --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__2F9X8:hover {\n  --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__2F9X8:active {\n  --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__1_mr3 {\n  --button-surface-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n}\n\n.supportWarning__1_mr3:hover {\n  --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__1_mr3:active {\n  --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__3x2ij {\n  --button-surface-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n}\n\n.supportSuccess__3x2ij:hover {\n  --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__3x2ij:active {\n  --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__1l-uQ {\n  --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__1l-uQ:hover {\n  --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__1l-uQ:active {\n  --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n";
-styleInject(css_248z$1);
-
-const{isSVG}=svgUtil;const{concatClasses}=propsUtil;const Button=forwardRef(({children,size,primary,secondary,tertiary,nude,brand,danger,system,qualifier,qualifierEnd,stretch,icon,compact,link,as:Link,asProps,...props},ref)=>{sendStyles(stylesheet$1);const getVariantClass=()=>{return resolveStyleForProps(["primary","secondary","tertiary","nude"],{primary,secondary,tertiary,nude},"primary")};const getIntentClass=()=>{return resolveStyleForProps(["brand","danger","system"],{brand,danger,system},"brand")};const{style,className,...rest}=props;const iconOnly=icon&&!compact;const isCompactIcon=nude&&icon&&compact;const compactClass=cn(styles$1.compactIcon,styles$1[`${concatClasses("compact",resolveSizeProp(size))}`]);const btnclasses=cn(styles$1.Button,styles$1[`${getVariantClass()}`],styles$1[`${concatClasses(getVariantClass(),getIntentClass())}`],{[styles$1[`${concatClasses("button",resolveSizeProp(size))}`]]:!icon},{[styles$1[`${concatClasses("icon",resolveSizeProp(size))}`]]:iconOnly},{[compactClass]:isCompactIcon},{[styles$1.link]:link},{[styles$1.stretch]:stretch});const getSupportClasses=supportType=>{return cn(btnclasses,{[styles$1.support]:Boolean(supportType)},{[styles$1[`${getSupportClass(supportType)}`]]:nude&&Boolean(supportType)})};if(link&&opensInNewTab(asProps===null||asProps===void 0?void 0:asProps.target)&&!qualifier){qualifier=React.createElement(NewTab,null);}const getQualifier=()=>React.createElement("span",{"data-testid":"qualifier",className:cn(styles$1.qualifier,qualifierEnd?styles$1.qualifierEnd:styles$1.qualifierStart)},React.createElement(SvgNormalizer,{size:svgSize(qualifierSVGSizes,size)},qualifier));const getIcon=()=>{if(icon&&!isSVG(children)){console.warn("Icon can only be SVG");children="";}return React.createElement(SvgNormalizer,{size:svgSize(iconSVGSizes,size)},children)};const getQualifierWithChildren=()=>{if(qualifier&&!isSVG(qualifier)){console.warn("Qualifier can only be SVG");qualifier=false;}return React.createElement(React.Fragment,null,qualifier&&!qualifierEnd&&getQualifier(),children,qualifier&&qualifierEnd&&getQualifier())};if(link){const{style,...restAsProps}=asProps||{};return React.createElement(Link,_extends({},getRelAttributes(asProps===null||asProps===void 0?void 0:asProps.target),restAsProps,{className:btnclasses,ref:ref}),icon?getIcon():getQualifierWithChildren())}if(icon){return React.createElement("button",_extends({type:"button"},rest,{className:btnclasses,ref:ref}),getIcon())}return React.createElement(Consumer,null,({supportType})=>{return React.createElement("button",_extends({type:"button"},rest,{className:getSupportClasses(supportType),ref:ref}),getQualifierWithChildren())})});Button.displayName="Button";Button.propTypes={children:PropTypes.node.isRequired,primary:PropTypes.bool,secondary:PropTypes.bool,tertiary:PropTypes.bool,nude:PropTypes.bool,brand:PropTypes.bool,danger:PropTypes.bool,system:PropTypes.bool,link:PropTypes.bool,as:PropTypes.elementType,asProps:PropTypes.object,icon:PropTypes.bool,compact:PropTypes.bool,qualifier:PropTypes.element,qualifierEnd:PropTypes.bool,size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool};Button.defaultProps={size:"m",stretch:false,primary:false,secondary:false,tertiary:false,nude:false,brand:false,danger:false,system:false,qualifier:null,qualifierEnd:false,icon:false,compact:false,link:false,as:"a",asProps:{href:"."}};
-
-var css_248z = ".ToggleButton__3st07 {\n  /* default custom properties */\n  --button-border-radius: 6px;\n  --button-l-fontsize: 18px;\n  --button-m-fontsize: 16px;\n  --button-s-fontsize: 16px;\n  --button-xs-fontsize: 14px;\n\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: none;\n  font-weight: 600;\n  line-height: 1;\n  border: 2px solid transparent;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n}\n\n.toggleButton__1Co6e {\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__3p6rG {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__3vmfB {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__1j08g {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__S3uT- {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__2owrb {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__1Co6e:hover,\n.toggleButton__1Co6e:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__1Co6e:focus {\n  border-color: var(--interactive-focus, #86afff);\n}\n\n.on__3v7eU {\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__3v7eU svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__3v7eU:hover,\n.on__3v7eU:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__1Co6e:disabled,\n.on__3v7eU: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__3v7eU:disabled {\n  --toggle-button-background-color: var(--interactive-disabled, #eaecf0);\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n}\n";
-var styles = {"ToggleButton":"ToggleButton__3st07","toggleButton":"toggleButton__1Co6e","smallToggle":"smallToggle__3p6rG","largeToggle":"largeToggle__3vmfB","iconToggle":"iconToggle__1j08g","smallIconToggle":"smallIconToggle__S3uT-","largeIconToggle":"largeIconToggle__2owrb","on":"on__3v7eU"};
-var stylesheet=".ToggleButton__3st07 {\n  /* default custom properties */\n  --button-border-radius: 6px;\n  --button-l-fontsize: 18px;\n  --button-m-fontsize: 16px;\n  --button-s-fontsize: 16px;\n  --button-xs-fontsize: 14px;\n\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: none;\n  font-weight: 600;\n  line-height: 1;\n  border: 2px solid transparent;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n}\n\n.toggleButton__1Co6e {\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__3p6rG {\n  padding: 0 1.47rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeToggle__3vmfB {\n  padding: 0.065rem 1.92rem;\n  font-size: var(--button-l-fontsize);\n}\n\n.iconToggle__1j08g {\n  padding: 0.188rem;\n}\n\n.smallIconToggle__S3uT- {\n  padding: 0.125rem;\n  font-size: var(--button-s-fontsize);\n}\n\n.largeIconToggle__2owrb {\n  font-size: var(--button-l-fontsize);\n}\n\n.toggleButton__1Co6e:hover,\n.toggleButton__1Co6e:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-hover,\n    hsla(216, 24%, 96%, 1)\n  );\n}\n\n.toggleButton__1Co6e:focus {\n  border-color: var(--interactive-focus, #86afff);\n}\n\n.on__3v7eU {\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__3v7eU svg path {\n  fill: var(--icon-inverse, hsla(0, 0%, 100%, 1));\n}\n\n.on__3v7eU:hover,\n.on__3v7eU:focus {\n  --toggle-button-background-color: var(\n    --interactive-fill-selected-hover,\n    hsla(219, 23%, 44%, 1)\n  );\n}\n\n.toggleButton__1Co6e:disabled,\n.on__3v7eU: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__3v7eU:disabled {\n  --toggle-button-background-color: var(--interactive-disabled, #eaecf0);\n  --toggle-button-font-color: var(--text-disabled, hsla(0, 0%, 62%, 1));\n}\n";
+var css_248z = ".Button__1PEi0 {\n  /** Border properties */\n  --button-border-focus: var(--interactive-focus, #86afff);\n  --button-border-inactive: var(--interactive-default, #cbcfd7);\n  --button-border-radius: var(--roundness-dynamic-type-1, 0.375rem);\n  --button-compact-icon-border-radius: var(--roundness-defined-type-1, 0.25rem);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  border: 2px solid transparent;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  background-color: var(--button-surface-color);\n  color: var(--button-content-color);\n  font: var(--button-font);\n}\n\n.Button__1PEi0:focus {\n  /* Provide a fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.Button__1PEi0:focus:not(:focus-visible) {\n  /* Remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.Button__1PEi0:focus-visible {\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__2_puO {\n  width: 100%;\n}\n\n/* primary styles */\n.primary__1Ky3d {\n  --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__1bKnj {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-default,\n    #00aa13\n  );\n}\n\n.primaryBrand__1bKnj:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-hover,\n    #33bb42\n  );\n}\n\n.primaryBrand__1bKnj:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-active,\n    #067817\n  );\n}\n\n.primaryDanger__CakS_ {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-default,\n    #f3536b\n  );\n}\n\n.primaryDanger__CakS_:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-hover,\n    #f3637a\n  );\n}\n\n.primaryDanger__CakS_:active {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-active,\n    #c32e52\n  );\n}\n\n.primarySystem__12EXX {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-default,\n    #383942\n  );\n}\n\n.primarySystem__12EXX:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-hover,\n    #444651\n  );\n}\n\n.primarySystem__12EXX:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-active,\n    #0a0d1d\n  );\n}\n\n/* secondary styles */\n.secondary__2ghmX {\n  --button-surface-color: transparent;\n  border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__2ru9o {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__2ru9o:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n}\n\n.secondaryBrand__2ru9o:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.secondaryDanger__2N-gr {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__2N-gr:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.secondaryDanger__2N-gr:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.secondarySystem__1jE71 {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__1jE71:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.secondarySystem__1jE71:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* tertiary styles */\n.tertiaryBrand__11mfz {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.tertiaryBrand__11mfz:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.tertiaryBrand__11mfz:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.tertiaryDanger__2orTD {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-default,\n    #fee1e7\n  );\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.tertiaryDanger__2orTD:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.tertiaryDanger__2orTD:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.tertiarySystem__2oz_s {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-default,\n    #eff2f6\n  );\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__2oz_s:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.tertiarySystem__2oz_s:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude styles */\n.nude__21SMY {\n  --button-surface-color: transparent;\n}\n\n.nudeBrand__2QzmY {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__2QzmY:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.nudeBrand__2QzmY:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.nudeDanger__3M2Ga {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__3M2Ga:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.nudeDanger__3M2Ga:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.nudeSystem__2jOjI {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__2jOjI:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.nudeSystem__2jOjI:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude icon compact styles */\n.compactIcon__2-4zz {\n  --button-content-color: var(--content-primary, #2d2e34);\n  border-radius: var(--button-compact-icon-border-radius);\n}\n\n.compactIcon__2-4zz:hover {\n  --button-surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.compactIcon__2-4zz:active {\n  --button-surface-color: var(--interactive-surface-primary-active, #e6eaf1);\n}\n\n/* disabled styles */\n.primary__1Ky3d:disabled,\n.secondary__2ghmX:disabled,\n.tertiary__348a6:disabled,\n.nude__21SMY:disabled {\n  --button-surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --button-content-color: var(--content-disabled, #9a9eaa);\n  border-color: transparent;\n  cursor: not-allowed;\n}\n\n.qualifier__1MyGo {\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n.qualifierStart__tFnQy {\n  margin-left: 0;\n  margin-right: 0.625rem;\n}\n\n.qualifierEnd__3sHyC {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__tFnQy {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__3sHyC {\n  margin-right: 0.625rem;\n  margin-left: 0;\n}\n\n/* sizes */\n.buttonL__2Fq1f {\n  padding: 1.0625rem 2rem;\n  --button-font: var(--label-L, 600 1.125rem/1.33 Maison Neue);\n  line-height: 1;\n}\n\n.buttonM__1yoCw {\n  padding: 0.875rem 2rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonS__3WdUq {\n  padding: 0.625rem 1.5rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonXs__fE1g7 {\n  padding: 0.5625rem 1rem;\n  --button-font: var(--label-S, 600 0.875rem/1.43 Maison Neue);\n  line-height: 1;\n}\n\n.iconL__1OCnp {\n  padding: 1rem;\n}\n\n.iconM__u4Jq2 {\n  padding: 0.8125rem;\n}\n\n.iconS__3Wj8x {\n  padding: 0.625rem;\n}\n\n.iconXs__3zKG2 {\n  padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__n27nK {\n  padding: 0.5rem;\n}\n\n.compactM__3h2v3 {\n  padding: 0.3125rem;\n}\n\n.compactS__6nilZ {\n  padding: 0.125rem;\n}\n\n.compactXs__274mB {\n  padding: 0.0625rem;\n}\n\n/** link style */\n.link__FEvFh {\n  text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__25ulR {\n  --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__2F9X8 {\n  --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__2F9X8:hover {\n  --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__2F9X8:active {\n  --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__1_mr3 {\n  --button-surface-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n}\n\n.supportWarning__1_mr3:hover {\n  --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__1_mr3:active {\n  --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__3x2ij {\n  --button-surface-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n}\n\n.supportSuccess__3x2ij:hover {\n  --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__3x2ij:active {\n  --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__1l-uQ {\n  --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__1l-uQ:hover {\n  --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__1l-uQ:active {\n  --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n";
+var styles = {"Button":"Button__1PEi0","stretch":"stretch__2_puO","primary":"primary__1Ky3d","primaryBrand":"primaryBrand__1bKnj","primaryDanger":"primaryDanger__CakS_","primarySystem":"primarySystem__12EXX","secondary":"secondary__2ghmX","secondaryBrand":"secondaryBrand__2ru9o","secondaryDanger":"secondaryDanger__2N-gr","secondarySystem":"secondarySystem__1jE71","tertiaryBrand":"tertiaryBrand__11mfz","tertiaryDanger":"tertiaryDanger__2orTD","tertiarySystem":"tertiarySystem__2oz_s","nude":"nude__21SMY","nudeBrand":"nudeBrand__2QzmY","nudeDanger":"nudeDanger__3M2Ga","nudeSystem":"nudeSystem__2jOjI","compactIcon":"compactIcon__2-4zz","tertiary":"tertiary__348a6","qualifier":"qualifier__1MyGo","qualifierStart":"qualifierStart__tFnQy","qualifierEnd":"qualifierEnd__3sHyC","buttonL":"buttonL__2Fq1f","buttonM":"buttonM__1yoCw","buttonS":"buttonS__3WdUq","buttonXs":"buttonXs__fE1g7","iconL":"iconL__1OCnp","iconM":"iconM__u4Jq2","iconS":"iconS__3Wj8x","iconXs":"iconXs__3zKG2","compactL":"compactL__n27nK","compactM":"compactM__3h2v3","compactS":"compactS__6nilZ","compactXs":"compactXs__274mB","link":"link__FEvFh","support":"support__25ulR","supportDanger":"supportDanger__2F9X8","supportWarning":"supportWarning__1_mr3","supportSuccess":"supportSuccess__3x2ij","supportInfo":"supportInfo__1l-uQ"};
+var stylesheet=".Button__1PEi0 {\n  /** Border properties */\n  --button-border-focus: var(--interactive-focus, #86afff);\n  --button-border-inactive: var(--interactive-default, #cbcfd7);\n  --button-border-radius: var(--roundness-dynamic-type-1, 0.375rem);\n  --button-compact-icon-border-radius: var(--roundness-defined-type-1, 0.25rem);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  border: 2px solid transparent;\n  border-radius: var(--button-border-radius);\n  box-sizing: border-box;\n  background-color: var(--button-surface-color);\n  color: var(--button-content-color);\n  font: var(--button-font);\n}\n\n.Button__1PEi0:focus {\n  /* Provide a fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.Button__1PEi0:focus:not(:focus-visible) {\n  /* Remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.Button__1PEi0:focus-visible {\n  outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__2_puO {\n  width: 100%;\n}\n\n/* primary styles */\n.primary__1Ky3d {\n  --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__1bKnj {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-default,\n    #00aa13\n  );\n}\n\n.primaryBrand__1bKnj:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-hover,\n    #33bb42\n  );\n}\n\n.primaryBrand__1bKnj:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-primary-active,\n    #067817\n  );\n}\n\n.primaryDanger__CakS_ {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-default,\n    #f3536b\n  );\n}\n\n.primaryDanger__CakS_:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-hover,\n    #f3637a\n  );\n}\n\n.primaryDanger__CakS_:active {\n  --button-surface-color: var(\n    --interactive-support-danger-primary-active,\n    #c32e52\n  );\n}\n\n.primarySystem__12EXX {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-default,\n    #383942\n  );\n}\n\n.primarySystem__12EXX:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-hover,\n    #444651\n  );\n}\n\n.primarySystem__12EXX:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-primary-active,\n    #0a0d1d\n  );\n}\n\n/* secondary styles */\n.secondary__2ghmX {\n  --button-surface-color: transparent;\n  border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__2ru9o {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__2ru9o:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n}\n\n.secondaryBrand__2ru9o:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.secondaryDanger__2N-gr {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__2N-gr:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.secondaryDanger__2N-gr:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.secondarySystem__1jE71 {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__1jE71:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.secondarySystem__1jE71:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* tertiary styles */\n.tertiaryBrand__11mfz {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-default,\n    #dff6e0\n  );\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.tertiaryBrand__11mfz:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.tertiaryBrand__11mfz:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.tertiaryDanger__2orTD {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-default,\n    #fee1e7\n  );\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.tertiaryDanger__2orTD:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.tertiaryDanger__2orTD:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.tertiarySystem__2oz_s {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-default,\n    #eff2f6\n  );\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__2oz_s:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.tertiarySystem__2oz_s:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude styles */\n.nude__21SMY {\n  --button-surface-color: transparent;\n}\n\n.nudeBrand__2QzmY {\n  --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__2QzmY:hover {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-hover,\n    #eff8f0\n  );\n}\n\n.nudeBrand__2QzmY:active {\n  --button-surface-color: var(\n    --interactive-surface-brand-secondary-active,\n    #bdecc6\n  );\n}\n\n.nudeDanger__3M2Ga {\n  --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__3M2Ga:hover {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-hover,\n    #fff1f4\n  );\n}\n\n.nudeDanger__3M2Ga:active {\n  --button-surface-color: var(\n    --interactive-support-danger-secondary-active,\n    #ffc6d0\n  );\n}\n\n.nudeSystem__2jOjI {\n  --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__2jOjI:hover {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-hover,\n    #f5f7fa\n  );\n}\n\n.nudeSystem__2jOjI:active {\n  --button-surface-color: var(\n    --interactive-surface-inverse-secondary-active,\n    #dde1e8\n  );\n}\n\n/* nude icon compact styles */\n.compactIcon__2-4zz {\n  --button-content-color: var(--content-primary, #2d2e34);\n  border-radius: var(--button-compact-icon-border-radius);\n}\n\n.compactIcon__2-4zz:hover {\n  --button-surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.compactIcon__2-4zz:active {\n  --button-surface-color: var(--interactive-surface-primary-active, #e6eaf1);\n}\n\n/* disabled styles */\n.primary__1Ky3d:disabled,\n.secondary__2ghmX:disabled,\n.tertiary__348a6:disabled,\n.nude__21SMY:disabled {\n  --button-surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --button-content-color: var(--content-disabled, #9a9eaa);\n  border-color: transparent;\n  cursor: not-allowed;\n}\n\n.qualifier__1MyGo {\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n.qualifierStart__tFnQy {\n  margin-left: 0;\n  margin-right: 0.625rem;\n}\n\n.qualifierEnd__3sHyC {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__tFnQy {\n  margin-left: 0.625rem;\n  margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__3sHyC {\n  margin-right: 0.625rem;\n  margin-left: 0;\n}\n\n/* sizes */\n.buttonL__2Fq1f {\n  padding: 1.0625rem 2rem;\n  --button-font: var(--label-L, 600 1.125rem/1.33 Maison Neue);\n  line-height: 1;\n}\n\n.buttonM__1yoCw {\n  padding: 0.875rem 2rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonS__3WdUq {\n  padding: 0.625rem 1.5rem;\n  --button-font: var(--label-M, 600 1rem/1.5 Maison Neue);\n  line-height: 1;\n}\n\n.buttonXs__fE1g7 {\n  padding: 0.5625rem 1rem;\n  --button-font: var(--label-S, 600 0.875rem/1.43 Maison Neue);\n  line-height: 1;\n}\n\n.iconL__1OCnp {\n  padding: 1rem;\n}\n\n.iconM__u4Jq2 {\n  padding: 0.8125rem;\n}\n\n.iconS__3Wj8x {\n  padding: 0.625rem;\n}\n\n.iconXs__3zKG2 {\n  padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__n27nK {\n  padding: 0.5rem;\n}\n\n.compactM__3h2v3 {\n  padding: 0.3125rem;\n}\n\n.compactS__6nilZ {\n  padding: 0.125rem;\n}\n\n.compactXs__274mB {\n  padding: 0.0625rem;\n}\n\n/** link style */\n.link__FEvFh {\n  text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__25ulR {\n  --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__2F9X8 {\n  --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__2F9X8:hover {\n  --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__2F9X8:active {\n  --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__1_mr3 {\n  --button-surface-color: var(\n    --support-warning-default,\n    hsla(33, 100%, 56%, 1)\n  );\n}\n\n.supportWarning__1_mr3:hover {\n  --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__1_mr3:active {\n  --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__3x2ij {\n  --button-surface-color: var(\n    --support-success-default,\n    hsla(159, 97%, 27%, 1)\n  );\n}\n\n.supportSuccess__3x2ij:hover {\n  --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__3x2ij:active {\n  --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__1l-uQ {\n  --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__1l-uQ:hover {\n  --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__1l-uQ:active {\n  --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n";
 styleInject(css_248z);
 
-const ToggleButton=({text,children,icon,size,on,...props})=>{sendStyles(stylesheet);const{style,className,...rest}=props;const sizeClass=()=>{const small=isSmall(sizes,size);const large=isLarge(sizes,size);if(icon){return [{[styles.smallIconToggle]:small},{[styles.largeIconToggle]:large}]}return [{[styles.smallToggle]:small},{[styles.largeToggle]:large}]};if(icon&&!svgUtil.isSVG(icon)){console.error("ToggleButton: Icon can only be an SVG or an SVG wrapped React component");return null}return React.createElement("button",_extends({},rest,{type:"button",role:"switch","aria-checked":on,className:cn(styles.ToggleButton,styles.toggleButton,{[styles.iconToggle]:icon},{[styles.on]:on},sizeClass())}),icon?React.createElement(SvgNormalizer,{size:svgSize(iconSVGSizes,size)},icon):text||children)};ToggleButton.propTypes={text:PropTypes.string,icon:PropTypes.node,children:PropTypes.node,on:PropTypes.bool,size:PropTypes.oneOf(["s","m","l"])};ToggleButton.defaultProps={on:false,size:"m"};
+const{isSVG}=svgUtil;const{concatClasses}=propsUtil;const Button=forwardRef(({children,size,primary,secondary,tertiary,nude,brand,danger,system,qualifier,qualifierEnd,stretch,icon,compact,link,as:Link,asProps,...props},ref)=>{sendStyles(stylesheet);const getVariantClass=()=>{return resolveStyleForProps(["primary","secondary","tertiary","nude"],{primary,secondary,tertiary,nude},"primary")};const getIntentClass=()=>{return resolveStyleForProps(["brand","danger","system"],{brand,danger,system},"brand")};const{style,className,...rest}=props;const iconOnly=icon&&!compact;const isCompactIcon=nude&&icon&&compact;const compactClass=cn(styles.compactIcon,styles[`${concatClasses("compact",resolveSizeProp(size))}`]);const btnclasses=cn(styles.Button,styles[`${getVariantClass()}`],styles[`${concatClasses(getVariantClass(),getIntentClass())}`],{[styles[`${concatClasses("button",resolveSizeProp(size))}`]]:!icon},{[styles[`${concatClasses("icon",resolveSizeProp(size))}`]]:iconOnly},{[compactClass]:isCompactIcon},{[styles.link]:link},{[styles.stretch]:stretch});const getSupportClasses=supportType=>{return cn(btnclasses,{[styles.support]:Boolean(supportType)},{[styles[`${getSupportClass(supportType)}`]]:nude&&Boolean(supportType)})};if(link&&opensInNewTab(asProps===null||asProps===void 0?void 0:asProps.target)&&!qualifier){qualifier=React.createElement(NewTab,null);}const getQualifier=()=>React.createElement("span",{"data-testid":"qualifier",className:cn(styles.qualifier,qualifierEnd?styles.qualifierEnd:styles.qualifierStart)},React.createElement(SvgNormalizer,{size:svgSize(qualifierSVGSizes,size)},qualifier));const getIcon=()=>{if(icon&&!isSVG(children)){console.warn("Icon can only be SVG");children="";}return React.createElement(SvgNormalizer,{size:svgSize(iconSVGSizes,size)},children)};const getQualifierWithChildren=()=>{if(qualifier&&!isSVG(qualifier)){console.warn("Qualifier can only be SVG");qualifier=false;}return React.createElement(React.Fragment,null,qualifier&&!qualifierEnd&&getQualifier(),children,qualifier&&qualifierEnd&&getQualifier())};if(link){const{style,...restAsProps}=asProps||{};return React.createElement(Link,_extends({},getRelAttributes(asProps===null||asProps===void 0?void 0:asProps.target),restAsProps,{className:btnclasses,ref:ref}),icon?getIcon():getQualifierWithChildren())}if(icon){return React.createElement("button",_extends({type:"button"},rest,{className:btnclasses,ref:ref}),getIcon())}return React.createElement(Consumer,null,({supportType})=>{return React.createElement("button",_extends({type:"button"},rest,{className:getSupportClasses(supportType),ref:ref}),getQualifierWithChildren())})});Button.displayName="Button";Button.propTypes={children:PropTypes.node.isRequired,primary:PropTypes.bool,secondary:PropTypes.bool,tertiary:PropTypes.bool,nude:PropTypes.bool,brand:PropTypes.bool,danger:PropTypes.bool,system:PropTypes.bool,link:PropTypes.bool,as:PropTypes.elementType,asProps:PropTypes.object,icon:PropTypes.bool,compact:PropTypes.bool,qualifier:PropTypes.element,qualifierEnd:PropTypes.bool,size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool};Button.defaultProps={size:"m",stretch:false,primary:false,secondary:false,tertiary:false,nude:false,brand:false,danger:false,system:false,qualifier:null,qualifierEnd:false,icon:false,compact:false,link:false,as:"a",asProps:{href:"."}};
 
-export { Button, ToggleButton };
+export { Button };

package.json

 {
   "name": "@asphalt-react/button",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "description": "Button",
@@ -37,3 +37,3 @@ "keywords": [
   "peerDependencies": {
-    "react": ">= 16.8.2 < 18.0.0"
+    "react": ">= 16.8.2"
   },
@@ -46,9 +46,9 @@ "devDependencies": {
   "dependencies": {
-    "@asphalt-react/context": "^2.0.0-alpha.2",
+    "@asphalt-react/context": "^2.0.0-alpha.3",
     "@asphalt-react/helper": "^2.0.0-alpha.1",
-    "@asphalt-react/svg-normalizer": "^2.0.0-alpha.1",
+    "@asphalt-react/svg-normalizer": "^2.0.0-alpha.3",
     "classnames": "^2.3.1",
     "prop-types": "^15.7.2"
   },
-  "gitHead": "7f5d1fc485ae21a4e1dab5e9cca89b597895b5ff"
+  "gitHead": "2e902268af8dd739eaa79fd2b2cafc54db1d2890"
 }

README.md

@@ -22,4 +22,2 @@ # Button
 
-Button package exports a named [ToggleButton](#togglebutton) component as well. A ToggleButton is a digital switch to turn an option on or off.
-
 Buttons support 4 sizes:
@@ -38,12 +36,10 @@ \- extra small (xs)
 1. All buttons are focusable and keyboard navigable; <kbd>tab</kbd> (or <kbd>shift</kbd>+<kbd>tab</kbd> when tabbing backwards).
-2. <kbd>space</kbd> and <kbd>enter</kbd> keys trigger the buttons when in focus; toggles the state of ToggleButton.
-3. ToggleButton has a role of “[switch](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role)”.
-4. The on/off state of ToggleButton determines the value of `aria-checked` attribute.
-5. <kbd>enter</kbd> key triggers the link buttons when in focus.
-6. All buttons accept the aria-\* attributes [button role](https://www.w3.org/TR/wai-aria-1.1/#button).
-7. Link buttons accept the aria-\* attributes for the [link role](https://www.w3.org/TR/wai-aria-1.1/#link).
+2. <kbd>space</kbd> and <kbd>enter</kbd> keys trigger the buttons when in focus.
+3. <kbd>enter</kbd> key triggers the link buttons when in focus.
+4. All buttons accept the aria-\* attributes [button role](https://www.w3.org/TR/wai-aria-1.1/#button).
+5. Link buttons accept the aria-\* attributes for the [link role](https://www.w3.org/TR/wai-aria-1.1/#link).
 
 ### Accessibility must-haves
 
-1. Add `aria-label` or `aria-labelledby` in Icon Button & icon-only variant of ToggleButton to help assitive technologies.
+1. Add `aria-label` or `aria-labelledby` in Icon Button to help assitive technologies.
 
@@ -201,76 +197,1 @@ ## Usage
 | bool | false    | false   |
-
-# ToggleButton
-
-A ToggleButton is a digital switch to turn an option on or off. Switching between the states — as a result of direct user action or a programmatic event — should produce an immediate result. The caption should always reflect the current logical state of the button.
-
-There are two variants:
-
-1. text-only
-2. icon-only
-
-#### ToggleButton vs Checkbox
-
-Similar to ToggleSwitches, ToggleButtons are not an alternative to Checkboxes. They are not form controls and should not appear inside a form. ToggleButtons should only manipulate local UI states, i.e. they should not directly or indirectly initiate a remote API call to change database states.
-
-#### ToggleButton vs ToggleSwitch
-
-Both of them provide options to toggle between states. Consider the following points to choose between them:
-
-1. Prefer ToggleSwitches to toggle states on mobile; they support swipe gestures
-2. ToggleButtons fit better in designs with space constraints
-3. Use ToggleButtons to programmatically toggle the state. For example, you can bind a keyboard shortcut to a *mute* button in a video player.
-
-## Usage
-
-```
-import  { ToggleButton } from '@asphalt-react/button'
-
-<ToggleButton text="mute" on />
-```
-
-## Props
-
-### text
-
-Label for text-only variant
-
-| type   | required | default |
-| ------ | -------- | ------- |
-| string | false    | N/A     |
-
-### icon
-
-Icon for icon-only variant. Accepts SVG or SVG wrapped React component
-
-**Note:** `icon` prop overrides `text` prop
-
-| type | required | default |
-| ---- | -------- | ------- |
-| node | false    | N/A     |
-
-### children
-
-React node for caption
-
-**Note:** Both `icon` and `text` props override `children`
-
-| type | required | default |
-| ---- | -------- | ------- |
-| node | false    | N/A     |
-
-### on
-
-Sets the state of button
-
-| type | required | default |
-| ---- | -------- | ------- |
-| bool | false    | false   |
-
-### size
-
-Sets the size of button. Possible values are `"s", "m", "l"` for small, medium & large respectively
-
-| type | required | default |
-| ---- | -------- | ------- |
-| enum | false    | "m"     |

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

8

-33.33%

Worsened metrics

Total package byte prevSize

76435

-16.63%

Lines of code

304

-14.85%

Number of lines in readme file

195

-28.83%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  react@19.2.4
  (transitive)

• - Removed

  react@17.0.2
  (transitive)

• Updated

  @asphalt-react/context@^2.0.0-alpha.3

• Updated

  @asphalt-react/svg-normalizer@^2.0.0-alpha.3