@asphalt-react/button
Advanced tools
+4
-4
@@ -61,9 +61,9 @@ 'use strict'; | ||
| var css_248z = ".Button__yXAkD {\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 /* WebKit browsers add margin around the buttons, which hinders the use case of grouping the buttons */\n margin: 0;\n}\n\n.Button__yXAkD: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__yXAkD: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__yXAkD:focus-visible {\n outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__3qC8p {\n width: 100%;\n}\n\n/* primary styles */\n.primary__VOpsr {\n --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__Krr2l {\n --button-surface-color: var(\n --interactive-surface-brand-primary-default,\n #00aa13\n );\n}\n\n.primaryBrand__Krr2l:hover {\n --button-surface-color: var(\n --interactive-surface-brand-primary-hover,\n #33bb42\n );\n}\n\n.primaryBrand__Krr2l:active {\n --button-surface-color: var(\n --interactive-surface-brand-primary-active,\n #067817\n );\n}\n\n.primaryDanger__NfS2o {\n --button-surface-color: var(\n --interactive-support-danger-primary-default,\n #f3536b\n );\n}\n\n.primaryDanger__NfS2o:hover {\n --button-surface-color: var(\n --interactive-support-danger-primary-hover,\n #f3637a\n );\n}\n\n.primaryDanger__NfS2o:active {\n --button-surface-color: var(\n --interactive-support-danger-primary-active,\n #c32e52\n );\n}\n\n.primarySystem__zsZ-u {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-default,\n #383942\n );\n}\n\n.primarySystem__zsZ-u:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-hover,\n #444651\n );\n}\n\n.primarySystem__zsZ-u:active {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-active,\n #0a0d1d\n );\n}\n\n/* secondary styles */\n.secondary__zealy {\n --button-surface-color: transparent;\n border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__jfdxk {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__jfdxk:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-default,\n #dff6e0\n );\n}\n\n.secondaryBrand__jfdxk:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.secondaryDanger__-U1QE {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__-U1QE:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.secondaryDanger__-U1QE:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.secondarySystem__PJ4Xx {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__PJ4Xx:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.secondarySystem__PJ4Xx:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* tertiary styles */\n.tertiaryBrand__1-455 {\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__1-455:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.tertiaryBrand__1-455:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.tertiaryDanger__tqihQ {\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__tqihQ:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.tertiaryDanger__tqihQ:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.tertiarySystem__-S7oN {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-default,\n #d9dfe8\n );\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__-S7oN:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.tertiarySystem__-S7oN:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* nude styles */\n.nude__SJHsv {\n --button-surface-color: transparent;\n}\n\n.nudeBrand__aDE26 {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__aDE26:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.nudeBrand__aDE26:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.nudeDanger__zOqPK {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__zOqPK:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.nudeDanger__zOqPK:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.nudeSystem__PdH9G {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__PdH9G:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.nudeSystem__PdH9G:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* compact icon styles */\n.compactIcon__8D7Nl {\n border-radius: var(--button-compact-icon-border-radius);\n}\n\n/* disabled styles */\n.primary__VOpsr:disabled,\n.secondary__zealy:disabled,\n.tertiary__pRmHg:disabled,\n.nude__SJHsv: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__JJPaq {\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n\n.qualifierStart__6o51Y {\n margin-left: 0;\n margin-right: 0.625rem;\n}\n\n.qualifierEnd__Yb2zt {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__6o51Y {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__Yb2zt {\n margin-right: 0.625rem;\n margin-left: 0;\n}\n\n/* sizes */\n.buttonL__dT9zq {\n padding: 1.0625rem 2rem;\n --button-font: var(\n --label-L,\n 600 1.125rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonM__jmSYx {\n padding: 0.875rem 2rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonS__MrlZh {\n padding: 0.625rem 1.5rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonXs__r9M7f {\n padding: 0.5625rem 1rem;\n --button-font: var(\n --label-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.iconL__9Ee56 {\n padding: 1rem;\n}\n\n.iconM__7SUOV {\n padding: 0.8125rem;\n}\n\n.iconS__ItZGm {\n padding: 0.625rem;\n}\n\n.iconXs__5mF1K {\n padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__lisV7 {\n padding: 0.5rem;\n}\n\n.compactM__hqnWo {\n padding: 0.3125rem;\n}\n\n.compactS__nuYcM {\n padding: 0.125rem;\n}\n\n.compactXs__AywxT {\n padding: 0.0625rem;\n}\n\n/** link style */\n.link__OB7N- {\n text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__rVLCU {\n --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__A92zV {\n --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__A92zV:hover {\n --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__A92zV:active {\n --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__2P5Di {\n --button-surface-color: var(\n --support-warning-default,\n hsla(33, 100%, 56%, 1)\n );\n}\n\n.supportWarning__2P5Di:hover {\n --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__2P5Di:active {\n --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__f-jtZ {\n --button-surface-color: var(\n --support-success-default,\n hsla(159, 97%, 27%, 1)\n );\n}\n\n.supportSuccess__f-jtZ:hover {\n --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__f-jtZ:active {\n --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__mgorv {\n --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__mgorv:hover {\n --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__mgorv:active {\n --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n\n.qualifierWrapper__QSvCa {\n display: inline-flex;\n pointer-events: none;\n}\n\n.iconWrapper__avueo {\n display: inline-flex;\n pointer-events: none;\n}\n\n.stickStart__XljCt {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.stickEnd__KBlxz {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.stickStart__XljCt:focus-visible {\n position: relative;\n}\n\n.stickEnd__KBlxz:focus-visible {\n position: relative;\n}\n\n@supports not selector(:focus-visible) {\n .stickStart__XljCt:focus {\n position: relative;\n }\n\n .stickEnd__KBlxz:focus {\n position: relative;\n }\n}\n\n.stickPrimary__5OgXf {\n margin-left: 1px;\n}\n\n.stickSecondary__mt79y {\n border-left: 0;\n}\n\n.stickTertiary__pRNFE {\n margin-left: 1px;\n}\n\n.stickNude__ppKxQ {\n margin-left: 1px;\n}\n"; | ||
| var styles = {"Button":"Button__yXAkD","stretch":"stretch__3qC8p","primary":"primary__VOpsr","primaryBrand":"primaryBrand__Krr2l","primaryDanger":"primaryDanger__NfS2o","primarySystem":"primarySystem__zsZ-u","secondary":"secondary__zealy","secondaryBrand":"secondaryBrand__jfdxk","secondaryDanger":"secondaryDanger__-U1QE","secondarySystem":"secondarySystem__PJ4Xx","tertiaryBrand":"tertiaryBrand__1-455","tertiaryDanger":"tertiaryDanger__tqihQ","tertiarySystem":"tertiarySystem__-S7oN","nude":"nude__SJHsv","nudeBrand":"nudeBrand__aDE26","nudeDanger":"nudeDanger__zOqPK","nudeSystem":"nudeSystem__PdH9G","compactIcon":"compactIcon__8D7Nl","tertiary":"tertiary__pRmHg","qualifier":"qualifier__JJPaq","qualifierStart":"qualifierStart__6o51Y","qualifierEnd":"qualifierEnd__Yb2zt","buttonL":"buttonL__dT9zq","buttonM":"buttonM__jmSYx","buttonS":"buttonS__MrlZh","buttonXs":"buttonXs__r9M7f","iconL":"iconL__9Ee56","iconM":"iconM__7SUOV","iconS":"iconS__ItZGm","iconXs":"iconXs__5mF1K","compactL":"compactL__lisV7","compactM":"compactM__hqnWo","compactS":"compactS__nuYcM","compactXs":"compactXs__AywxT","link":"link__OB7N-","support":"support__rVLCU","supportDanger":"supportDanger__A92zV","supportWarning":"supportWarning__2P5Di","supportSuccess":"supportSuccess__f-jtZ","supportInfo":"supportInfo__mgorv","qualifierWrapper":"qualifierWrapper__QSvCa","iconWrapper":"iconWrapper__avueo","stickStart":"stickStart__XljCt","stickEnd":"stickEnd__KBlxz","stickPrimary":"stickPrimary__5OgXf","stickSecondary":"stickSecondary__mt79y","stickTertiary":"stickTertiary__pRNFE","stickNude":"stickNude__ppKxQ"}; | ||
| var stylesheet=".Button__yXAkD {\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 /* WebKit browsers add margin around the buttons, which hinders the use case of grouping the buttons */\n margin: 0;\n}\n\n.Button__yXAkD: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__yXAkD: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__yXAkD:focus-visible {\n outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__3qC8p {\n width: 100%;\n}\n\n/* primary styles */\n.primary__VOpsr {\n --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__Krr2l {\n --button-surface-color: var(\n --interactive-surface-brand-primary-default,\n #00aa13\n );\n}\n\n.primaryBrand__Krr2l:hover {\n --button-surface-color: var(\n --interactive-surface-brand-primary-hover,\n #33bb42\n );\n}\n\n.primaryBrand__Krr2l:active {\n --button-surface-color: var(\n --interactive-surface-brand-primary-active,\n #067817\n );\n}\n\n.primaryDanger__NfS2o {\n --button-surface-color: var(\n --interactive-support-danger-primary-default,\n #f3536b\n );\n}\n\n.primaryDanger__NfS2o:hover {\n --button-surface-color: var(\n --interactive-support-danger-primary-hover,\n #f3637a\n );\n}\n\n.primaryDanger__NfS2o:active {\n --button-surface-color: var(\n --interactive-support-danger-primary-active,\n #c32e52\n );\n}\n\n.primarySystem__zsZ-u {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-default,\n #383942\n );\n}\n\n.primarySystem__zsZ-u:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-hover,\n #444651\n );\n}\n\n.primarySystem__zsZ-u:active {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-active,\n #0a0d1d\n );\n}\n\n/* secondary styles */\n.secondary__zealy {\n --button-surface-color: transparent;\n border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__jfdxk {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__jfdxk:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-default,\n #dff6e0\n );\n}\n\n.secondaryBrand__jfdxk:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.secondaryDanger__-U1QE {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__-U1QE:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.secondaryDanger__-U1QE:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.secondarySystem__PJ4Xx {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__PJ4Xx:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.secondarySystem__PJ4Xx:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* tertiary styles */\n.tertiaryBrand__1-455 {\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__1-455:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.tertiaryBrand__1-455:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.tertiaryDanger__tqihQ {\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__tqihQ:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.tertiaryDanger__tqihQ:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.tertiarySystem__-S7oN {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-default,\n #d9dfe8\n );\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__-S7oN:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.tertiarySystem__-S7oN:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* nude styles */\n.nude__SJHsv {\n --button-surface-color: transparent;\n}\n\n.nudeBrand__aDE26 {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__aDE26:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.nudeBrand__aDE26:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.nudeDanger__zOqPK {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__zOqPK:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.nudeDanger__zOqPK:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.nudeSystem__PdH9G {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__PdH9G:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.nudeSystem__PdH9G:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* compact icon styles */\n.compactIcon__8D7Nl {\n border-radius: var(--button-compact-icon-border-radius);\n}\n\n/* disabled styles */\n.primary__VOpsr:disabled,\n.secondary__zealy:disabled,\n.tertiary__pRmHg:disabled,\n.nude__SJHsv: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__JJPaq {\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n\n.qualifierStart__6o51Y {\n margin-left: 0;\n margin-right: 0.625rem;\n}\n\n.qualifierEnd__Yb2zt {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__6o51Y {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__Yb2zt {\n margin-right: 0.625rem;\n margin-left: 0;\n}\n\n/* sizes */\n.buttonL__dT9zq {\n padding: 1.0625rem 2rem;\n --button-font: var(\n --label-L,\n 600 1.125rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonM__jmSYx {\n padding: 0.875rem 2rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonS__MrlZh {\n padding: 0.625rem 1.5rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonXs__r9M7f {\n padding: 0.5625rem 1rem;\n --button-font: var(\n --label-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.iconL__9Ee56 {\n padding: 1rem;\n}\n\n.iconM__7SUOV {\n padding: 0.8125rem;\n}\n\n.iconS__ItZGm {\n padding: 0.625rem;\n}\n\n.iconXs__5mF1K {\n padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__lisV7 {\n padding: 0.5rem;\n}\n\n.compactM__hqnWo {\n padding: 0.3125rem;\n}\n\n.compactS__nuYcM {\n padding: 0.125rem;\n}\n\n.compactXs__AywxT {\n padding: 0.0625rem;\n}\n\n/** link style */\n.link__OB7N- {\n text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__rVLCU {\n --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__A92zV {\n --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__A92zV:hover {\n --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__A92zV:active {\n --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__2P5Di {\n --button-surface-color: var(\n --support-warning-default,\n hsla(33, 100%, 56%, 1)\n );\n}\n\n.supportWarning__2P5Di:hover {\n --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__2P5Di:active {\n --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__f-jtZ {\n --button-surface-color: var(\n --support-success-default,\n hsla(159, 97%, 27%, 1)\n );\n}\n\n.supportSuccess__f-jtZ:hover {\n --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__f-jtZ:active {\n --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__mgorv {\n --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__mgorv:hover {\n --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__mgorv:active {\n --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n\n.qualifierWrapper__QSvCa {\n display: inline-flex;\n pointer-events: none;\n}\n\n.iconWrapper__avueo {\n display: inline-flex;\n pointer-events: none;\n}\n\n.stickStart__XljCt {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.stickEnd__KBlxz {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.stickStart__XljCt:focus-visible {\n position: relative;\n}\n\n.stickEnd__KBlxz:focus-visible {\n position: relative;\n}\n\n@supports not selector(:focus-visible) {\n .stickStart__XljCt:focus {\n position: relative;\n }\n\n .stickEnd__KBlxz:focus {\n position: relative;\n }\n}\n\n.stickPrimary__5OgXf {\n margin-left: 1px;\n}\n\n.stickSecondary__mt79y {\n border-left: 0;\n}\n\n.stickTertiary__pRNFE {\n margin-left: 1px;\n}\n\n.stickNude__ppKxQ {\n margin-left: 1px;\n}\n"; | ||
| var css_248z = ".Button__yXAkD {\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 /* WebKit browsers add margin around the buttons, which hinders the use case of grouping the buttons */\n margin: 0;\n}\n\n.Button__yXAkD: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__yXAkD: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__yXAkD:focus-visible {\n outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__3qC8p {\n width: 100%;\n}\n\n/* primary styles */\n.primary__VOpsr {\n --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__Krr2l {\n --button-surface-color: var(\n --interactive-surface-brand-primary-default,\n #00aa13\n );\n}\n\n.primaryBrand__Krr2l:hover {\n --button-surface-color: var(\n --interactive-surface-brand-primary-hover,\n #33bb42\n );\n}\n\n.primaryBrand__Krr2l:active {\n --button-surface-color: var(\n --interactive-surface-brand-primary-active,\n #067817\n );\n}\n\n.primaryDanger__NfS2o {\n --button-surface-color: var(\n --interactive-support-danger-primary-default,\n #f3536b\n );\n}\n\n.primaryDanger__NfS2o:hover {\n --button-surface-color: var(\n --interactive-support-danger-primary-hover,\n #f3637a\n );\n}\n\n.primaryDanger__NfS2o:active {\n --button-surface-color: var(\n --interactive-support-danger-primary-active,\n #c32e52\n );\n}\n\n.primarySystem__zsZ-u {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-default,\n #383942\n );\n}\n\n.primarySystem__zsZ-u:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-hover,\n #444651\n );\n}\n\n.primarySystem__zsZ-u:active {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-active,\n #0a0d1d\n );\n}\n\n/* secondary styles */\n.secondary__zealy {\n --button-surface-color: transparent;\n border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__jfdxk {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__jfdxk:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-default,\n #dff6e0\n );\n}\n\n.secondaryBrand__jfdxk:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.secondaryDanger__-U1QE {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__-U1QE:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.secondaryDanger__-U1QE:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.secondarySystem__PJ4Xx {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__PJ4Xx:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.secondarySystem__PJ4Xx:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* tertiary styles */\n.tertiaryBrand__1-455 {\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__1-455:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.tertiaryBrand__1-455:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.tertiaryDanger__tqihQ {\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__tqihQ:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.tertiaryDanger__tqihQ:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.tertiarySystem__-S7oN {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-default,\n #d9dfe8\n );\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__-S7oN:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.tertiarySystem__-S7oN:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* nude styles */\n.nude__SJHsv {\n --button-surface-color: transparent;\n}\n\n.nudeBrand__aDE26 {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__aDE26:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.nudeBrand__aDE26:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.nudeDanger__zOqPK {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__zOqPK:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.nudeDanger__zOqPK:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.nudeSystem__PdH9G {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__PdH9G:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.nudeSystem__PdH9G:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* compact icon styles */\n.compactIcon__8D7Nl {\n border-radius: var(--button-compact-icon-border-radius);\n}\n\n/* disabled styles */\n.primary__VOpsr:disabled,\n.secondary__zealy:disabled,\n.tertiary__pRmHg:disabled,\n.nude__SJHsv: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__JJPaq {\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n\n.qualifierStart__6o51Y {\n margin-left: 0;\n margin-right: 0.625rem;\n}\n\n.qualifierEnd__Yb2zt {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__6o51Y {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__Yb2zt {\n margin-right: 0.625rem;\n margin-left: 0;\n}\n\n/* sizes */\n.buttonL__dT9zq {\n padding: 1.0625rem 2rem;\n --button-font: var(\n --label-L,\n 600 1.125rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonM__jmSYx {\n padding: 0.875rem 2rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonS__MrlZh {\n padding: 0.625rem 1.5rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonXs__r9M7f {\n padding: 0.5625rem 1rem;\n --button-font: var(\n --label-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.iconL__9Ee56 {\n padding: 1rem;\n}\n\n.iconM__7SUOV {\n padding: 0.8125rem;\n}\n\n.iconS__ItZGm {\n padding: 0.625rem;\n}\n\n.iconXs__5mF1K {\n padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__lisV7 {\n padding: 0.5rem;\n}\n\n.compactM__hqnWo {\n padding: 0.3125rem;\n}\n\n.compactS__nuYcM {\n padding: 0.125rem;\n}\n\n.compactXs__AywxT {\n padding: 0.0625rem;\n}\n\n/** link style */\n.link__OB7N- {\n text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__rVLCU {\n --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__A92zV {\n --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__A92zV:hover {\n --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__A92zV:active {\n --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__2P5Di {\n --button-surface-color: var(\n --support-warning-default,\n hsla(33, 100%, 56%, 1)\n );\n}\n\n.supportWarning__2P5Di:hover {\n --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__2P5Di:active {\n --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__f-jtZ {\n --button-surface-color: var(\n --support-success-default,\n hsla(159, 97%, 27%, 1)\n );\n}\n\n.supportSuccess__f-jtZ:hover {\n --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__f-jtZ:active {\n --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__mgorv {\n --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__mgorv:hover {\n --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__mgorv:active {\n --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n\n.qualifierWrapper__QSvCa {\n display: inline-flex;\n pointer-events: none;\n}\n\n.iconWrapper__avueo {\n display: inline-flex;\n pointer-events: none;\n}\n\n.stickStart__XljCt {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.stickEnd__KBlxz {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.stickStart__XljCt:focus-visible {\n position: relative;\n}\n\n.stickEnd__KBlxz:focus-visible {\n position: relative;\n}\n\n@supports not selector(:focus-visible) {\n .stickStart__XljCt:focus {\n position: relative;\n }\n\n .stickEnd__KBlxz:focus {\n position: relative;\n }\n}\n\n.stickPrimary__5OgXf {\n margin-left: 1px;\n}\n\n.stickSecondary__mt79y {\n border-left: 0;\n}\n\n.stickTertiary__pRNFE {\n margin-left: 1px;\n}\n\n.stickNude__ppKxQ {\n margin-left: 1px;\n}\n\n.noUnderline__4ntOt {\n text-decoration: none;\n}\n"; | ||
| var styles = {"Button":"Button__yXAkD","stretch":"stretch__3qC8p","primary":"primary__VOpsr","primaryBrand":"primaryBrand__Krr2l","primaryDanger":"primaryDanger__NfS2o","primarySystem":"primarySystem__zsZ-u","secondary":"secondary__zealy","secondaryBrand":"secondaryBrand__jfdxk","secondaryDanger":"secondaryDanger__-U1QE","secondarySystem":"secondarySystem__PJ4Xx","tertiaryBrand":"tertiaryBrand__1-455","tertiaryDanger":"tertiaryDanger__tqihQ","tertiarySystem":"tertiarySystem__-S7oN","nude":"nude__SJHsv","nudeBrand":"nudeBrand__aDE26","nudeDanger":"nudeDanger__zOqPK","nudeSystem":"nudeSystem__PdH9G","compactIcon":"compactIcon__8D7Nl","tertiary":"tertiary__pRmHg","qualifier":"qualifier__JJPaq","qualifierStart":"qualifierStart__6o51Y","qualifierEnd":"qualifierEnd__Yb2zt","buttonL":"buttonL__dT9zq","buttonM":"buttonM__jmSYx","buttonS":"buttonS__MrlZh","buttonXs":"buttonXs__r9M7f","iconL":"iconL__9Ee56","iconM":"iconM__7SUOV","iconS":"iconS__ItZGm","iconXs":"iconXs__5mF1K","compactL":"compactL__lisV7","compactM":"compactM__hqnWo","compactS":"compactS__nuYcM","compactXs":"compactXs__AywxT","link":"link__OB7N-","support":"support__rVLCU","supportDanger":"supportDanger__A92zV","supportWarning":"supportWarning__2P5Di","supportSuccess":"supportSuccess__f-jtZ","supportInfo":"supportInfo__mgorv","qualifierWrapper":"qualifierWrapper__QSvCa","iconWrapper":"iconWrapper__avueo","stickStart":"stickStart__XljCt","stickEnd":"stickEnd__KBlxz","stickPrimary":"stickPrimary__5OgXf","stickSecondary":"stickSecondary__mt79y","stickTertiary":"stickTertiary__pRNFE","stickNude":"stickNude__ppKxQ","noUnderline":"noUnderline__4ntOt"}; | ||
| var stylesheet=".Button__yXAkD {\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 /* WebKit browsers add margin around the buttons, which hinders the use case of grouping the buttons */\n margin: 0;\n}\n\n.Button__yXAkD: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__yXAkD: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__yXAkD:focus-visible {\n outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__3qC8p {\n width: 100%;\n}\n\n/* primary styles */\n.primary__VOpsr {\n --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__Krr2l {\n --button-surface-color: var(\n --interactive-surface-brand-primary-default,\n #00aa13\n );\n}\n\n.primaryBrand__Krr2l:hover {\n --button-surface-color: var(\n --interactive-surface-brand-primary-hover,\n #33bb42\n );\n}\n\n.primaryBrand__Krr2l:active {\n --button-surface-color: var(\n --interactive-surface-brand-primary-active,\n #067817\n );\n}\n\n.primaryDanger__NfS2o {\n --button-surface-color: var(\n --interactive-support-danger-primary-default,\n #f3536b\n );\n}\n\n.primaryDanger__NfS2o:hover {\n --button-surface-color: var(\n --interactive-support-danger-primary-hover,\n #f3637a\n );\n}\n\n.primaryDanger__NfS2o:active {\n --button-surface-color: var(\n --interactive-support-danger-primary-active,\n #c32e52\n );\n}\n\n.primarySystem__zsZ-u {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-default,\n #383942\n );\n}\n\n.primarySystem__zsZ-u:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-hover,\n #444651\n );\n}\n\n.primarySystem__zsZ-u:active {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-active,\n #0a0d1d\n );\n}\n\n/* secondary styles */\n.secondary__zealy {\n --button-surface-color: transparent;\n border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__jfdxk {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__jfdxk:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-default,\n #dff6e0\n );\n}\n\n.secondaryBrand__jfdxk:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.secondaryDanger__-U1QE {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__-U1QE:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.secondaryDanger__-U1QE:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.secondarySystem__PJ4Xx {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__PJ4Xx:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.secondarySystem__PJ4Xx:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* tertiary styles */\n.tertiaryBrand__1-455 {\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__1-455:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.tertiaryBrand__1-455:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.tertiaryDanger__tqihQ {\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__tqihQ:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.tertiaryDanger__tqihQ:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.tertiarySystem__-S7oN {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-default,\n #d9dfe8\n );\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__-S7oN:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.tertiarySystem__-S7oN:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* nude styles */\n.nude__SJHsv {\n --button-surface-color: transparent;\n}\n\n.nudeBrand__aDE26 {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__aDE26:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.nudeBrand__aDE26:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.nudeDanger__zOqPK {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__zOqPK:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.nudeDanger__zOqPK:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.nudeSystem__PdH9G {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__PdH9G:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.nudeSystem__PdH9G:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* compact icon styles */\n.compactIcon__8D7Nl {\n border-radius: var(--button-compact-icon-border-radius);\n}\n\n/* disabled styles */\n.primary__VOpsr:disabled,\n.secondary__zealy:disabled,\n.tertiary__pRmHg:disabled,\n.nude__SJHsv: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__JJPaq {\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n\n.qualifierStart__6o51Y {\n margin-left: 0;\n margin-right: 0.625rem;\n}\n\n.qualifierEnd__Yb2zt {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__6o51Y {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__Yb2zt {\n margin-right: 0.625rem;\n margin-left: 0;\n}\n\n/* sizes */\n.buttonL__dT9zq {\n padding: 1.0625rem 2rem;\n --button-font: var(\n --label-L,\n 600 1.125rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonM__jmSYx {\n padding: 0.875rem 2rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonS__MrlZh {\n padding: 0.625rem 1.5rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonXs__r9M7f {\n padding: 0.5625rem 1rem;\n --button-font: var(\n --label-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.iconL__9Ee56 {\n padding: 1rem;\n}\n\n.iconM__7SUOV {\n padding: 0.8125rem;\n}\n\n.iconS__ItZGm {\n padding: 0.625rem;\n}\n\n.iconXs__5mF1K {\n padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__lisV7 {\n padding: 0.5rem;\n}\n\n.compactM__hqnWo {\n padding: 0.3125rem;\n}\n\n.compactS__nuYcM {\n padding: 0.125rem;\n}\n\n.compactXs__AywxT {\n padding: 0.0625rem;\n}\n\n/** link style */\n.link__OB7N- {\n text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__rVLCU {\n --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__A92zV {\n --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__A92zV:hover {\n --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__A92zV:active {\n --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__2P5Di {\n --button-surface-color: var(\n --support-warning-default,\n hsla(33, 100%, 56%, 1)\n );\n}\n\n.supportWarning__2P5Di:hover {\n --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__2P5Di:active {\n --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__f-jtZ {\n --button-surface-color: var(\n --support-success-default,\n hsla(159, 97%, 27%, 1)\n );\n}\n\n.supportSuccess__f-jtZ:hover {\n --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__f-jtZ:active {\n --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__mgorv {\n --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__mgorv:hover {\n --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__mgorv:active {\n --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n\n.qualifierWrapper__QSvCa {\n display: inline-flex;\n pointer-events: none;\n}\n\n.iconWrapper__avueo {\n display: inline-flex;\n pointer-events: none;\n}\n\n.stickStart__XljCt {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.stickEnd__KBlxz {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.stickStart__XljCt:focus-visible {\n position: relative;\n}\n\n.stickEnd__KBlxz:focus-visible {\n position: relative;\n}\n\n@supports not selector(:focus-visible) {\n .stickStart__XljCt:focus {\n position: relative;\n }\n\n .stickEnd__KBlxz:focus {\n position: relative;\n }\n}\n\n.stickPrimary__5OgXf {\n margin-left: 1px;\n}\n\n.stickSecondary__mt79y {\n border-left: 0;\n}\n\n.stickTertiary__pRNFE {\n margin-left: 1px;\n}\n\n.stickNude__ppKxQ {\n margin-left: 1px;\n}\n\n.noUnderline__4ntOt {\n text-decoration: none;\n}\n"; | ||
| styleInject(css_248z); | ||
| const{isSVG}=helper.svgUtil;const{concatClasses,resolvePropCollision}=helper.propsUtil;const Button=React.forwardRef(({children,size,primary,secondary,tertiary,nude,brand,danger,system,qualifier: qualifier$1,qualifierEnd,stretch,icon,compact,link,as:Link,asProps,stickStart,stickEnd,stick,...props},ref)=>{context.sendStyles(stylesheet);const{collision:variantCollision,value:variant}=resolvePropCollision({primary,secondary,tertiary,nude},"primary");if(variantCollision){console.warn(`Button: Multiple variants detected, falling back to "primary"`);}const{collision:intentCollision,value:intent}=resolvePropCollision({brand,danger,system},"brand");if(intentCollision){console.warn(`Button: Multiple intents detected, falling back to "brand"`);}const{style,className,...rest}=props;const iconOnly=icon&&!compact;const isCompactIcon=icon&&compact;const compactClass=cn(styles.compactIcon,styles[`${concatClasses("compact",resolveSizeProp(size))}`]);const btnClasses=cn(styles.Button,styles[variant],styles[`${concatClasses(variant,intent)}`],{[styles[`${concatClasses("button",resolveSizeProp(size))}`]]:!icon},{[styles[`${concatClasses("icon",resolveSizeProp(size))}`]]:iconOnly},{[compactClass]:isCompactIcon},{[styles.link]:link},{[styles.stretch]:stretch},{[styles.stickStart]:stickStart},{[styles.stickEnd]:stickEnd},{[styles[`${concatClasses("stick",variant)}`]]:stick});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$1){qualifier$1=React.createElement(NewTab,null);}const getQualifier=()=>React.createElement("span",{"data-testid":"qualifier",className:cn(styles.qualifier,qualifierEnd?styles.qualifierEnd:styles.qualifierStart)},React.createElement("div",{className:styles.qualifierWrapper},React.createElement(qualifier.Qualifier,{iconSize:svgSize(qualifierSVGSizes,size)},qualifier$1)));const getIcon=()=>{if(icon&&!isSVG(children)){console.warn("Icon can only be SVG");children="";}return React.createElement("div",{className:styles.iconWrapper},React.createElement(SvgNormalizer,{dimension:svgSize(iconSVGSizes,size)},children))};const getQualifierWithChildren=()=>{return React.createElement(React.Fragment,null,qualifier$1&&!qualifierEnd&&getQualifier(),children,qualifier$1&&qualifierEnd&&getQualifier())};if(link){const{style,...restAsProps}=asProps||{};if(props.disabled){console.warn("Button: LinkButton can not be disabled");}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(context.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.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.bool,size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,stickStart:PropTypes.bool,stickEnd:PropTypes.bool,stick: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:"."},stickEnd:false,stickStart:false,stick:false}; | ||
| const{isSVG}=helper.svgUtil;const{concatClasses,resolvePropCollision}=helper.propsUtil;const Button=React.forwardRef(({children,size,primary,secondary,tertiary,nude,brand,danger,system,qualifier: qualifier$1,qualifierEnd,stretch,icon,compact,link,as:Link,asProps,stickStart,stickEnd,stick,underline,...props},ref)=>{context.sendStyles(stylesheet);const{collision:variantCollision,value:variant}=resolvePropCollision({primary,secondary,tertiary,nude},"primary");if(variantCollision){console.warn(`Button: Multiple variants detected, falling back to "primary"`);}const{collision:intentCollision,value:intent}=resolvePropCollision({brand,danger,system},"brand");if(intentCollision){console.warn(`Button: Multiple intents detected, falling back to "brand"`);}const{style,className,...rest}=props;const iconOnly=icon&&!compact;const isCompactIcon=icon&&compact;const compactClass=cn(styles.compactIcon,styles[`${concatClasses("compact",resolveSizeProp(size))}`]);const btnClasses=cn(styles.Button,styles[variant],styles[`${concatClasses(variant,intent)}`],{[styles[`${concatClasses("button",resolveSizeProp(size))}`]]:!icon},{[styles[`${concatClasses("icon",resolveSizeProp(size))}`]]:iconOnly},{[compactClass]:isCompactIcon},{[styles.link]:link},{[styles.stretch]:stretch},{[styles.stickStart]:stickStart},{[styles.stickEnd]:stickEnd},{[styles[`${concatClasses("stick",variant)}`]]:stick},{[styles.noUnderline]:link&&!underline});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$1){qualifier$1=React.createElement(NewTab,null);}const getQualifier=()=>React.createElement("span",{"data-testid":"qualifier",className:cn(styles.qualifier,qualifierEnd?styles.qualifierEnd:styles.qualifierStart)},React.createElement("div",{className:styles.qualifierWrapper},React.createElement(qualifier.Qualifier,{iconSize:svgSize(qualifierSVGSizes,size)},qualifier$1)));const getIcon=()=>{if(icon&&!isSVG(children)){console.warn("Icon can only be SVG");children="";}return React.createElement("div",{className:styles.iconWrapper},React.createElement(SvgNormalizer,{dimension:svgSize(iconSVGSizes,size)},children))};const getQualifierWithChildren=()=>{return React.createElement(React.Fragment,null,qualifier$1&&!qualifierEnd&&getQualifier(),children,qualifier$1&&qualifierEnd&&getQualifier())};if(link){const{style,...restAsProps}=asProps||{};if(props.disabled){console.warn("Button: LinkButton can not be disabled");}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(context.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.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.bool,size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,stickStart:PropTypes.bool,stickEnd:PropTypes.bool,stick:PropTypes.bool,underline: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:"."},stickEnd:false,stickStart:false,stick:false,underline:true}; | ||
| exports.Button = Button; |
+4
-4
@@ -59,9 +59,9 @@ import React, { forwardRef } from 'react'; | ||
| var css_248z = ".Button__yXAkD {\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 /* WebKit browsers add margin around the buttons, which hinders the use case of grouping the buttons */\n margin: 0;\n}\n\n.Button__yXAkD: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__yXAkD: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__yXAkD:focus-visible {\n outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__3qC8p {\n width: 100%;\n}\n\n/* primary styles */\n.primary__VOpsr {\n --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__Krr2l {\n --button-surface-color: var(\n --interactive-surface-brand-primary-default,\n #00aa13\n );\n}\n\n.primaryBrand__Krr2l:hover {\n --button-surface-color: var(\n --interactive-surface-brand-primary-hover,\n #33bb42\n );\n}\n\n.primaryBrand__Krr2l:active {\n --button-surface-color: var(\n --interactive-surface-brand-primary-active,\n #067817\n );\n}\n\n.primaryDanger__NfS2o {\n --button-surface-color: var(\n --interactive-support-danger-primary-default,\n #f3536b\n );\n}\n\n.primaryDanger__NfS2o:hover {\n --button-surface-color: var(\n --interactive-support-danger-primary-hover,\n #f3637a\n );\n}\n\n.primaryDanger__NfS2o:active {\n --button-surface-color: var(\n --interactive-support-danger-primary-active,\n #c32e52\n );\n}\n\n.primarySystem__zsZ-u {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-default,\n #383942\n );\n}\n\n.primarySystem__zsZ-u:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-hover,\n #444651\n );\n}\n\n.primarySystem__zsZ-u:active {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-active,\n #0a0d1d\n );\n}\n\n/* secondary styles */\n.secondary__zealy {\n --button-surface-color: transparent;\n border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__jfdxk {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__jfdxk:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-default,\n #dff6e0\n );\n}\n\n.secondaryBrand__jfdxk:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.secondaryDanger__-U1QE {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__-U1QE:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.secondaryDanger__-U1QE:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.secondarySystem__PJ4Xx {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__PJ4Xx:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.secondarySystem__PJ4Xx:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* tertiary styles */\n.tertiaryBrand__1-455 {\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__1-455:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.tertiaryBrand__1-455:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.tertiaryDanger__tqihQ {\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__tqihQ:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.tertiaryDanger__tqihQ:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.tertiarySystem__-S7oN {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-default,\n #d9dfe8\n );\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__-S7oN:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.tertiarySystem__-S7oN:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* nude styles */\n.nude__SJHsv {\n --button-surface-color: transparent;\n}\n\n.nudeBrand__aDE26 {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__aDE26:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.nudeBrand__aDE26:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.nudeDanger__zOqPK {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__zOqPK:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.nudeDanger__zOqPK:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.nudeSystem__PdH9G {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__PdH9G:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.nudeSystem__PdH9G:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* compact icon styles */\n.compactIcon__8D7Nl {\n border-radius: var(--button-compact-icon-border-radius);\n}\n\n/* disabled styles */\n.primary__VOpsr:disabled,\n.secondary__zealy:disabled,\n.tertiary__pRmHg:disabled,\n.nude__SJHsv: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__JJPaq {\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n\n.qualifierStart__6o51Y {\n margin-left: 0;\n margin-right: 0.625rem;\n}\n\n.qualifierEnd__Yb2zt {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__6o51Y {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__Yb2zt {\n margin-right: 0.625rem;\n margin-left: 0;\n}\n\n/* sizes */\n.buttonL__dT9zq {\n padding: 1.0625rem 2rem;\n --button-font: var(\n --label-L,\n 600 1.125rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonM__jmSYx {\n padding: 0.875rem 2rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonS__MrlZh {\n padding: 0.625rem 1.5rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonXs__r9M7f {\n padding: 0.5625rem 1rem;\n --button-font: var(\n --label-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.iconL__9Ee56 {\n padding: 1rem;\n}\n\n.iconM__7SUOV {\n padding: 0.8125rem;\n}\n\n.iconS__ItZGm {\n padding: 0.625rem;\n}\n\n.iconXs__5mF1K {\n padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__lisV7 {\n padding: 0.5rem;\n}\n\n.compactM__hqnWo {\n padding: 0.3125rem;\n}\n\n.compactS__nuYcM {\n padding: 0.125rem;\n}\n\n.compactXs__AywxT {\n padding: 0.0625rem;\n}\n\n/** link style */\n.link__OB7N- {\n text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__rVLCU {\n --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__A92zV {\n --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__A92zV:hover {\n --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__A92zV:active {\n --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__2P5Di {\n --button-surface-color: var(\n --support-warning-default,\n hsla(33, 100%, 56%, 1)\n );\n}\n\n.supportWarning__2P5Di:hover {\n --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__2P5Di:active {\n --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__f-jtZ {\n --button-surface-color: var(\n --support-success-default,\n hsla(159, 97%, 27%, 1)\n );\n}\n\n.supportSuccess__f-jtZ:hover {\n --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__f-jtZ:active {\n --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__mgorv {\n --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__mgorv:hover {\n --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__mgorv:active {\n --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n\n.qualifierWrapper__QSvCa {\n display: inline-flex;\n pointer-events: none;\n}\n\n.iconWrapper__avueo {\n display: inline-flex;\n pointer-events: none;\n}\n\n.stickStart__XljCt {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.stickEnd__KBlxz {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.stickStart__XljCt:focus-visible {\n position: relative;\n}\n\n.stickEnd__KBlxz:focus-visible {\n position: relative;\n}\n\n@supports not selector(:focus-visible) {\n .stickStart__XljCt:focus {\n position: relative;\n }\n\n .stickEnd__KBlxz:focus {\n position: relative;\n }\n}\n\n.stickPrimary__5OgXf {\n margin-left: 1px;\n}\n\n.stickSecondary__mt79y {\n border-left: 0;\n}\n\n.stickTertiary__pRNFE {\n margin-left: 1px;\n}\n\n.stickNude__ppKxQ {\n margin-left: 1px;\n}\n"; | ||
| var styles = {"Button":"Button__yXAkD","stretch":"stretch__3qC8p","primary":"primary__VOpsr","primaryBrand":"primaryBrand__Krr2l","primaryDanger":"primaryDanger__NfS2o","primarySystem":"primarySystem__zsZ-u","secondary":"secondary__zealy","secondaryBrand":"secondaryBrand__jfdxk","secondaryDanger":"secondaryDanger__-U1QE","secondarySystem":"secondarySystem__PJ4Xx","tertiaryBrand":"tertiaryBrand__1-455","tertiaryDanger":"tertiaryDanger__tqihQ","tertiarySystem":"tertiarySystem__-S7oN","nude":"nude__SJHsv","nudeBrand":"nudeBrand__aDE26","nudeDanger":"nudeDanger__zOqPK","nudeSystem":"nudeSystem__PdH9G","compactIcon":"compactIcon__8D7Nl","tertiary":"tertiary__pRmHg","qualifier":"qualifier__JJPaq","qualifierStart":"qualifierStart__6o51Y","qualifierEnd":"qualifierEnd__Yb2zt","buttonL":"buttonL__dT9zq","buttonM":"buttonM__jmSYx","buttonS":"buttonS__MrlZh","buttonXs":"buttonXs__r9M7f","iconL":"iconL__9Ee56","iconM":"iconM__7SUOV","iconS":"iconS__ItZGm","iconXs":"iconXs__5mF1K","compactL":"compactL__lisV7","compactM":"compactM__hqnWo","compactS":"compactS__nuYcM","compactXs":"compactXs__AywxT","link":"link__OB7N-","support":"support__rVLCU","supportDanger":"supportDanger__A92zV","supportWarning":"supportWarning__2P5Di","supportSuccess":"supportSuccess__f-jtZ","supportInfo":"supportInfo__mgorv","qualifierWrapper":"qualifierWrapper__QSvCa","iconWrapper":"iconWrapper__avueo","stickStart":"stickStart__XljCt","stickEnd":"stickEnd__KBlxz","stickPrimary":"stickPrimary__5OgXf","stickSecondary":"stickSecondary__mt79y","stickTertiary":"stickTertiary__pRNFE","stickNude":"stickNude__ppKxQ"}; | ||
| var stylesheet=".Button__yXAkD {\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 /* WebKit browsers add margin around the buttons, which hinders the use case of grouping the buttons */\n margin: 0;\n}\n\n.Button__yXAkD: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__yXAkD: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__yXAkD:focus-visible {\n outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__3qC8p {\n width: 100%;\n}\n\n/* primary styles */\n.primary__VOpsr {\n --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__Krr2l {\n --button-surface-color: var(\n --interactive-surface-brand-primary-default,\n #00aa13\n );\n}\n\n.primaryBrand__Krr2l:hover {\n --button-surface-color: var(\n --interactive-surface-brand-primary-hover,\n #33bb42\n );\n}\n\n.primaryBrand__Krr2l:active {\n --button-surface-color: var(\n --interactive-surface-brand-primary-active,\n #067817\n );\n}\n\n.primaryDanger__NfS2o {\n --button-surface-color: var(\n --interactive-support-danger-primary-default,\n #f3536b\n );\n}\n\n.primaryDanger__NfS2o:hover {\n --button-surface-color: var(\n --interactive-support-danger-primary-hover,\n #f3637a\n );\n}\n\n.primaryDanger__NfS2o:active {\n --button-surface-color: var(\n --interactive-support-danger-primary-active,\n #c32e52\n );\n}\n\n.primarySystem__zsZ-u {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-default,\n #383942\n );\n}\n\n.primarySystem__zsZ-u:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-hover,\n #444651\n );\n}\n\n.primarySystem__zsZ-u:active {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-active,\n #0a0d1d\n );\n}\n\n/* secondary styles */\n.secondary__zealy {\n --button-surface-color: transparent;\n border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__jfdxk {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__jfdxk:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-default,\n #dff6e0\n );\n}\n\n.secondaryBrand__jfdxk:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.secondaryDanger__-U1QE {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__-U1QE:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.secondaryDanger__-U1QE:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.secondarySystem__PJ4Xx {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__PJ4Xx:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.secondarySystem__PJ4Xx:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* tertiary styles */\n.tertiaryBrand__1-455 {\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__1-455:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.tertiaryBrand__1-455:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.tertiaryDanger__tqihQ {\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__tqihQ:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.tertiaryDanger__tqihQ:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.tertiarySystem__-S7oN {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-default,\n #d9dfe8\n );\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__-S7oN:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.tertiarySystem__-S7oN:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* nude styles */\n.nude__SJHsv {\n --button-surface-color: transparent;\n}\n\n.nudeBrand__aDE26 {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__aDE26:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.nudeBrand__aDE26:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.nudeDanger__zOqPK {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__zOqPK:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.nudeDanger__zOqPK:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.nudeSystem__PdH9G {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__PdH9G:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.nudeSystem__PdH9G:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* compact icon styles */\n.compactIcon__8D7Nl {\n border-radius: var(--button-compact-icon-border-radius);\n}\n\n/* disabled styles */\n.primary__VOpsr:disabled,\n.secondary__zealy:disabled,\n.tertiary__pRmHg:disabled,\n.nude__SJHsv: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__JJPaq {\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n\n.qualifierStart__6o51Y {\n margin-left: 0;\n margin-right: 0.625rem;\n}\n\n.qualifierEnd__Yb2zt {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__6o51Y {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__Yb2zt {\n margin-right: 0.625rem;\n margin-left: 0;\n}\n\n/* sizes */\n.buttonL__dT9zq {\n padding: 1.0625rem 2rem;\n --button-font: var(\n --label-L,\n 600 1.125rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonM__jmSYx {\n padding: 0.875rem 2rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonS__MrlZh {\n padding: 0.625rem 1.5rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonXs__r9M7f {\n padding: 0.5625rem 1rem;\n --button-font: var(\n --label-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.iconL__9Ee56 {\n padding: 1rem;\n}\n\n.iconM__7SUOV {\n padding: 0.8125rem;\n}\n\n.iconS__ItZGm {\n padding: 0.625rem;\n}\n\n.iconXs__5mF1K {\n padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__lisV7 {\n padding: 0.5rem;\n}\n\n.compactM__hqnWo {\n padding: 0.3125rem;\n}\n\n.compactS__nuYcM {\n padding: 0.125rem;\n}\n\n.compactXs__AywxT {\n padding: 0.0625rem;\n}\n\n/** link style */\n.link__OB7N- {\n text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__rVLCU {\n --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__A92zV {\n --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__A92zV:hover {\n --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__A92zV:active {\n --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__2P5Di {\n --button-surface-color: var(\n --support-warning-default,\n hsla(33, 100%, 56%, 1)\n );\n}\n\n.supportWarning__2P5Di:hover {\n --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__2P5Di:active {\n --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__f-jtZ {\n --button-surface-color: var(\n --support-success-default,\n hsla(159, 97%, 27%, 1)\n );\n}\n\n.supportSuccess__f-jtZ:hover {\n --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__f-jtZ:active {\n --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__mgorv {\n --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__mgorv:hover {\n --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__mgorv:active {\n --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n\n.qualifierWrapper__QSvCa {\n display: inline-flex;\n pointer-events: none;\n}\n\n.iconWrapper__avueo {\n display: inline-flex;\n pointer-events: none;\n}\n\n.stickStart__XljCt {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.stickEnd__KBlxz {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.stickStart__XljCt:focus-visible {\n position: relative;\n}\n\n.stickEnd__KBlxz:focus-visible {\n position: relative;\n}\n\n@supports not selector(:focus-visible) {\n .stickStart__XljCt:focus {\n position: relative;\n }\n\n .stickEnd__KBlxz:focus {\n position: relative;\n }\n}\n\n.stickPrimary__5OgXf {\n margin-left: 1px;\n}\n\n.stickSecondary__mt79y {\n border-left: 0;\n}\n\n.stickTertiary__pRNFE {\n margin-left: 1px;\n}\n\n.stickNude__ppKxQ {\n margin-left: 1px;\n}\n"; | ||
| var css_248z = ".Button__yXAkD {\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 /* WebKit browsers add margin around the buttons, which hinders the use case of grouping the buttons */\n margin: 0;\n}\n\n.Button__yXAkD: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__yXAkD: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__yXAkD:focus-visible {\n outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__3qC8p {\n width: 100%;\n}\n\n/* primary styles */\n.primary__VOpsr {\n --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__Krr2l {\n --button-surface-color: var(\n --interactive-surface-brand-primary-default,\n #00aa13\n );\n}\n\n.primaryBrand__Krr2l:hover {\n --button-surface-color: var(\n --interactive-surface-brand-primary-hover,\n #33bb42\n );\n}\n\n.primaryBrand__Krr2l:active {\n --button-surface-color: var(\n --interactive-surface-brand-primary-active,\n #067817\n );\n}\n\n.primaryDanger__NfS2o {\n --button-surface-color: var(\n --interactive-support-danger-primary-default,\n #f3536b\n );\n}\n\n.primaryDanger__NfS2o:hover {\n --button-surface-color: var(\n --interactive-support-danger-primary-hover,\n #f3637a\n );\n}\n\n.primaryDanger__NfS2o:active {\n --button-surface-color: var(\n --interactive-support-danger-primary-active,\n #c32e52\n );\n}\n\n.primarySystem__zsZ-u {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-default,\n #383942\n );\n}\n\n.primarySystem__zsZ-u:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-hover,\n #444651\n );\n}\n\n.primarySystem__zsZ-u:active {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-active,\n #0a0d1d\n );\n}\n\n/* secondary styles */\n.secondary__zealy {\n --button-surface-color: transparent;\n border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__jfdxk {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__jfdxk:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-default,\n #dff6e0\n );\n}\n\n.secondaryBrand__jfdxk:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.secondaryDanger__-U1QE {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__-U1QE:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.secondaryDanger__-U1QE:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.secondarySystem__PJ4Xx {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__PJ4Xx:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.secondarySystem__PJ4Xx:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* tertiary styles */\n.tertiaryBrand__1-455 {\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__1-455:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.tertiaryBrand__1-455:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.tertiaryDanger__tqihQ {\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__tqihQ:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.tertiaryDanger__tqihQ:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.tertiarySystem__-S7oN {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-default,\n #d9dfe8\n );\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__-S7oN:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.tertiarySystem__-S7oN:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* nude styles */\n.nude__SJHsv {\n --button-surface-color: transparent;\n}\n\n.nudeBrand__aDE26 {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__aDE26:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.nudeBrand__aDE26:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.nudeDanger__zOqPK {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__zOqPK:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.nudeDanger__zOqPK:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.nudeSystem__PdH9G {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__PdH9G:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.nudeSystem__PdH9G:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* compact icon styles */\n.compactIcon__8D7Nl {\n border-radius: var(--button-compact-icon-border-radius);\n}\n\n/* disabled styles */\n.primary__VOpsr:disabled,\n.secondary__zealy:disabled,\n.tertiary__pRmHg:disabled,\n.nude__SJHsv: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__JJPaq {\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n\n.qualifierStart__6o51Y {\n margin-left: 0;\n margin-right: 0.625rem;\n}\n\n.qualifierEnd__Yb2zt {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__6o51Y {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__Yb2zt {\n margin-right: 0.625rem;\n margin-left: 0;\n}\n\n/* sizes */\n.buttonL__dT9zq {\n padding: 1.0625rem 2rem;\n --button-font: var(\n --label-L,\n 600 1.125rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonM__jmSYx {\n padding: 0.875rem 2rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonS__MrlZh {\n padding: 0.625rem 1.5rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonXs__r9M7f {\n padding: 0.5625rem 1rem;\n --button-font: var(\n --label-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.iconL__9Ee56 {\n padding: 1rem;\n}\n\n.iconM__7SUOV {\n padding: 0.8125rem;\n}\n\n.iconS__ItZGm {\n padding: 0.625rem;\n}\n\n.iconXs__5mF1K {\n padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__lisV7 {\n padding: 0.5rem;\n}\n\n.compactM__hqnWo {\n padding: 0.3125rem;\n}\n\n.compactS__nuYcM {\n padding: 0.125rem;\n}\n\n.compactXs__AywxT {\n padding: 0.0625rem;\n}\n\n/** link style */\n.link__OB7N- {\n text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__rVLCU {\n --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__A92zV {\n --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__A92zV:hover {\n --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__A92zV:active {\n --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__2P5Di {\n --button-surface-color: var(\n --support-warning-default,\n hsla(33, 100%, 56%, 1)\n );\n}\n\n.supportWarning__2P5Di:hover {\n --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__2P5Di:active {\n --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__f-jtZ {\n --button-surface-color: var(\n --support-success-default,\n hsla(159, 97%, 27%, 1)\n );\n}\n\n.supportSuccess__f-jtZ:hover {\n --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__f-jtZ:active {\n --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__mgorv {\n --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__mgorv:hover {\n --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__mgorv:active {\n --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n\n.qualifierWrapper__QSvCa {\n display: inline-flex;\n pointer-events: none;\n}\n\n.iconWrapper__avueo {\n display: inline-flex;\n pointer-events: none;\n}\n\n.stickStart__XljCt {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.stickEnd__KBlxz {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.stickStart__XljCt:focus-visible {\n position: relative;\n}\n\n.stickEnd__KBlxz:focus-visible {\n position: relative;\n}\n\n@supports not selector(:focus-visible) {\n .stickStart__XljCt:focus {\n position: relative;\n }\n\n .stickEnd__KBlxz:focus {\n position: relative;\n }\n}\n\n.stickPrimary__5OgXf {\n margin-left: 1px;\n}\n\n.stickSecondary__mt79y {\n border-left: 0;\n}\n\n.stickTertiary__pRNFE {\n margin-left: 1px;\n}\n\n.stickNude__ppKxQ {\n margin-left: 1px;\n}\n\n.noUnderline__4ntOt {\n text-decoration: none;\n}\n"; | ||
| var styles = {"Button":"Button__yXAkD","stretch":"stretch__3qC8p","primary":"primary__VOpsr","primaryBrand":"primaryBrand__Krr2l","primaryDanger":"primaryDanger__NfS2o","primarySystem":"primarySystem__zsZ-u","secondary":"secondary__zealy","secondaryBrand":"secondaryBrand__jfdxk","secondaryDanger":"secondaryDanger__-U1QE","secondarySystem":"secondarySystem__PJ4Xx","tertiaryBrand":"tertiaryBrand__1-455","tertiaryDanger":"tertiaryDanger__tqihQ","tertiarySystem":"tertiarySystem__-S7oN","nude":"nude__SJHsv","nudeBrand":"nudeBrand__aDE26","nudeDanger":"nudeDanger__zOqPK","nudeSystem":"nudeSystem__PdH9G","compactIcon":"compactIcon__8D7Nl","tertiary":"tertiary__pRmHg","qualifier":"qualifier__JJPaq","qualifierStart":"qualifierStart__6o51Y","qualifierEnd":"qualifierEnd__Yb2zt","buttonL":"buttonL__dT9zq","buttonM":"buttonM__jmSYx","buttonS":"buttonS__MrlZh","buttonXs":"buttonXs__r9M7f","iconL":"iconL__9Ee56","iconM":"iconM__7SUOV","iconS":"iconS__ItZGm","iconXs":"iconXs__5mF1K","compactL":"compactL__lisV7","compactM":"compactM__hqnWo","compactS":"compactS__nuYcM","compactXs":"compactXs__AywxT","link":"link__OB7N-","support":"support__rVLCU","supportDanger":"supportDanger__A92zV","supportWarning":"supportWarning__2P5Di","supportSuccess":"supportSuccess__f-jtZ","supportInfo":"supportInfo__mgorv","qualifierWrapper":"qualifierWrapper__QSvCa","iconWrapper":"iconWrapper__avueo","stickStart":"stickStart__XljCt","stickEnd":"stickEnd__KBlxz","stickPrimary":"stickPrimary__5OgXf","stickSecondary":"stickSecondary__mt79y","stickTertiary":"stickTertiary__pRNFE","stickNude":"stickNude__ppKxQ","noUnderline":"noUnderline__4ntOt"}; | ||
| var stylesheet=".Button__yXAkD {\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 /* WebKit browsers add margin around the buttons, which hinders the use case of grouping the buttons */\n margin: 0;\n}\n\n.Button__yXAkD: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__yXAkD: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__yXAkD:focus-visible {\n outline: var(--button-border-focus) solid 4px;\n}\n\n.stretch__3qC8p {\n width: 100%;\n}\n\n/* primary styles */\n.primary__VOpsr {\n --button-content-color: var(--content-on-brand, #ffffff);\n}\n\n.primaryBrand__Krr2l {\n --button-surface-color: var(\n --interactive-surface-brand-primary-default,\n #00aa13\n );\n}\n\n.primaryBrand__Krr2l:hover {\n --button-surface-color: var(\n --interactive-surface-brand-primary-hover,\n #33bb42\n );\n}\n\n.primaryBrand__Krr2l:active {\n --button-surface-color: var(\n --interactive-surface-brand-primary-active,\n #067817\n );\n}\n\n.primaryDanger__NfS2o {\n --button-surface-color: var(\n --interactive-support-danger-primary-default,\n #f3536b\n );\n}\n\n.primaryDanger__NfS2o:hover {\n --button-surface-color: var(\n --interactive-support-danger-primary-hover,\n #f3637a\n );\n}\n\n.primaryDanger__NfS2o:active {\n --button-surface-color: var(\n --interactive-support-danger-primary-active,\n #c32e52\n );\n}\n\n.primarySystem__zsZ-u {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-default,\n #383942\n );\n}\n\n.primarySystem__zsZ-u:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-hover,\n #444651\n );\n}\n\n.primarySystem__zsZ-u:active {\n --button-surface-color: var(\n --interactive-surface-inverse-primary-active,\n #0a0d1d\n );\n}\n\n/* secondary styles */\n.secondary__zealy {\n --button-surface-color: transparent;\n border: 2px solid var(--button-border-inactive);\n}\n\n.secondaryBrand__jfdxk {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.secondaryBrand__jfdxk:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-default,\n #dff6e0\n );\n}\n\n.secondaryBrand__jfdxk:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.secondaryDanger__-U1QE {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.secondaryDanger__-U1QE:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.secondaryDanger__-U1QE:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.secondarySystem__PJ4Xx {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.secondarySystem__PJ4Xx:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.secondarySystem__PJ4Xx:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* tertiary styles */\n.tertiaryBrand__1-455 {\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__1-455:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.tertiaryBrand__1-455:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.tertiaryDanger__tqihQ {\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__tqihQ:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.tertiaryDanger__tqihQ:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.tertiarySystem__-S7oN {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-default,\n #d9dfe8\n );\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.tertiarySystem__-S7oN:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.tertiarySystem__-S7oN:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* nude styles */\n.nude__SJHsv {\n --button-surface-color: transparent;\n}\n\n.nudeBrand__aDE26 {\n --button-content-color: var(--content-brand, #00aa13);\n}\n\n.nudeBrand__aDE26:hover {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-hover,\n #eff8f0\n );\n}\n\n.nudeBrand__aDE26:active {\n --button-surface-color: var(\n --interactive-surface-brand-secondary-active,\n #bdecc6\n );\n}\n\n.nudeDanger__zOqPK {\n --button-content-color: var(--content-danger, #bb354e);\n}\n\n.nudeDanger__zOqPK:hover {\n --button-surface-color: var(\n --interactive-support-danger-secondary-hover,\n #fff1f4\n );\n}\n\n.nudeDanger__zOqPK:active {\n --button-surface-color: var(\n --interactive-support-danger-secondary-active,\n #ffc6d0\n );\n}\n\n.nudeSystem__PdH9G {\n --button-content-color: var(--content-primary, #2d2e34);\n}\n\n.nudeSystem__PdH9G:hover {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-hover,\n #e9eef4\n );\n}\n\n.nudeSystem__PdH9G:active {\n --button-surface-color: var(\n --interactive-surface-inverse-secondary-active,\n #b7c2d2\n );\n}\n\n/* compact icon styles */\n.compactIcon__8D7Nl {\n border-radius: var(--button-compact-icon-border-radius);\n}\n\n/* disabled styles */\n.primary__VOpsr:disabled,\n.secondary__zealy:disabled,\n.tertiary__pRmHg:disabled,\n.nude__SJHsv: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__JJPaq {\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n\n.qualifierStart__6o51Y {\n margin-left: 0;\n margin-right: 0.625rem;\n}\n\n.qualifierEnd__Yb2zt {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n/** rtl style for qualifier */\n\n*[dir=\"rtl\"] .qualifierStart__6o51Y {\n margin-left: 0.625rem;\n margin-right: 0;\n}\n\n*[dir=\"rtl\"] .qualifierEnd__Yb2zt {\n margin-right: 0.625rem;\n margin-left: 0;\n}\n\n/* sizes */\n.buttonL__dT9zq {\n padding: 1.0625rem 2rem;\n --button-font: var(\n --label-L,\n 600 1.125rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonM__jmSYx {\n padding: 0.875rem 2rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonS__MrlZh {\n padding: 0.625rem 1.5rem;\n --button-font: var(\n --label-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.buttonXs__r9M7f {\n padding: 0.5625rem 1rem;\n --button-font: var(\n --label-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n line-height: 1;\n}\n\n.iconL__9Ee56 {\n padding: 1rem;\n}\n\n.iconM__7SUOV {\n padding: 0.8125rem;\n}\n\n.iconS__ItZGm {\n padding: 0.625rem;\n}\n\n.iconXs__5mF1K {\n padding: 0.5625rem;\n}\n\n/** compact icon(nude support only) */\n\n.compactL__lisV7 {\n padding: 0.5rem;\n}\n\n.compactM__hqnWo {\n padding: 0.3125rem;\n}\n\n.compactS__nuYcM {\n padding: 0.125rem;\n}\n\n.compactXs__AywxT {\n padding: 0.0625rem;\n}\n\n/** link style */\n.link__OB7N- {\n text-decoration: underline;\n}\n\n/* support nude button styles for Flag component */\n.support__rVLCU {\n --button-content-color: var(--text-inverse, hsla(0, 0%, 100%, 1));\n}\n\n/* danger */\n.supportDanger__A92zV {\n --button-surface-color: var(--support-danger-default, hsla(12, 92%, 45%, 1));\n}\n\n.supportDanger__A92zV:hover {\n --button-surface-color: var(--support-danger-hover, hsla(12, 76%, 56%, 1));\n}\n\n.supportDanger__A92zV:active {\n --button-surface-color: var(--support-danger-active, hsla(12, 92%, 36%, 1));\n}\n\n/* warning */\n.supportWarning__2P5Di {\n --button-surface-color: var(\n --support-warning-default,\n hsla(33, 100%, 56%, 1)\n );\n}\n\n.supportWarning__2P5Di:hover {\n --button-surface-color: var(--support-warning-hover, hsla(33, 100%, 65%, 1));\n}\n\n.supportWarning__2P5Di:active {\n --button-surface-color: var(--support-warning-active, hsla(33, 79%, 45%, 1));\n}\n\n/* success */\n.supportSuccess__f-jtZ {\n --button-surface-color: var(\n --support-success-default,\n hsla(159, 97%, 27%, 1)\n );\n}\n\n.supportSuccess__f-jtZ:hover {\n --button-surface-color: var(--support-success-hover, hsla(159, 51%, 41%, 1));\n}\n\n.supportSuccess__f-jtZ:active {\n --button-surface-color: var(--support-success-active, hsla(159, 98%, 21%, 1));\n}\n\n/* info */\n.supportInfo__mgorv {\n --button-surface-color: var(--support-info-default, hsla(209, 100%, 42%, 1));\n}\n\n.supportInfo__mgorv:hover {\n --button-surface-color: var(--support-info-hover, hsla(209, 72%, 54%, 1));\n}\n\n.supportInfo__mgorv:active {\n --button-surface-color: var(--support-info-active, hsla(209, 100%, 34%, 1));\n}\n\n.qualifierWrapper__QSvCa {\n display: inline-flex;\n pointer-events: none;\n}\n\n.iconWrapper__avueo {\n display: inline-flex;\n pointer-events: none;\n}\n\n.stickStart__XljCt {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.stickEnd__KBlxz {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.stickStart__XljCt:focus-visible {\n position: relative;\n}\n\n.stickEnd__KBlxz:focus-visible {\n position: relative;\n}\n\n@supports not selector(:focus-visible) {\n .stickStart__XljCt:focus {\n position: relative;\n }\n\n .stickEnd__KBlxz:focus {\n position: relative;\n }\n}\n\n.stickPrimary__5OgXf {\n margin-left: 1px;\n}\n\n.stickSecondary__mt79y {\n border-left: 0;\n}\n\n.stickTertiary__pRNFE {\n margin-left: 1px;\n}\n\n.stickNude__ppKxQ {\n margin-left: 1px;\n}\n\n.noUnderline__4ntOt {\n text-decoration: none;\n}\n"; | ||
| styleInject(css_248z); | ||
| const{isSVG}=svgUtil;const{concatClasses,resolvePropCollision}=propsUtil;const Button=forwardRef(({children,size,primary,secondary,tertiary,nude,brand,danger,system,qualifier,qualifierEnd,stretch,icon,compact,link,as:Link,asProps,stickStart,stickEnd,stick,...props},ref)=>{sendStyles(stylesheet);const{collision:variantCollision,value:variant}=resolvePropCollision({primary,secondary,tertiary,nude},"primary");if(variantCollision){console.warn(`Button: Multiple variants detected, falling back to "primary"`);}const{collision:intentCollision,value:intent}=resolvePropCollision({brand,danger,system},"brand");if(intentCollision){console.warn(`Button: Multiple intents detected, falling back to "brand"`);}const{style,className,...rest}=props;const iconOnly=icon&&!compact;const isCompactIcon=icon&&compact;const compactClass=cn(styles.compactIcon,styles[`${concatClasses("compact",resolveSizeProp(size))}`]);const btnClasses=cn(styles.Button,styles[variant],styles[`${concatClasses(variant,intent)}`],{[styles[`${concatClasses("button",resolveSizeProp(size))}`]]:!icon},{[styles[`${concatClasses("icon",resolveSizeProp(size))}`]]:iconOnly},{[compactClass]:isCompactIcon},{[styles.link]:link},{[styles.stretch]:stretch},{[styles.stickStart]:stickStart},{[styles.stickEnd]:stickEnd},{[styles[`${concatClasses("stick",variant)}`]]:stick});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("div",{className:styles.qualifierWrapper},React.createElement(Qualifier,{iconSize:svgSize(qualifierSVGSizes,size)},qualifier)));const getIcon=()=>{if(icon&&!isSVG(children)){console.warn("Icon can only be SVG");children="";}return React.createElement("div",{className:styles.iconWrapper},React.createElement(SvgNormalizer,{dimension:svgSize(iconSVGSizes,size)},children))};const getQualifierWithChildren=()=>{return React.createElement(React.Fragment,null,qualifier&&!qualifierEnd&&getQualifier(),children,qualifier&&qualifierEnd&&getQualifier())};if(link){const{style,...restAsProps}=asProps||{};if(props.disabled){console.warn("Button: LinkButton can not be disabled");}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.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.bool,size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,stickStart:PropTypes.bool,stickEnd:PropTypes.bool,stick: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:"."},stickEnd:false,stickStart:false,stick:false}; | ||
| const{isSVG}=svgUtil;const{concatClasses,resolvePropCollision}=propsUtil;const Button=forwardRef(({children,size,primary,secondary,tertiary,nude,brand,danger,system,qualifier,qualifierEnd,stretch,icon,compact,link,as:Link,asProps,stickStart,stickEnd,stick,underline,...props},ref)=>{sendStyles(stylesheet);const{collision:variantCollision,value:variant}=resolvePropCollision({primary,secondary,tertiary,nude},"primary");if(variantCollision){console.warn(`Button: Multiple variants detected, falling back to "primary"`);}const{collision:intentCollision,value:intent}=resolvePropCollision({brand,danger,system},"brand");if(intentCollision){console.warn(`Button: Multiple intents detected, falling back to "brand"`);}const{style,className,...rest}=props;const iconOnly=icon&&!compact;const isCompactIcon=icon&&compact;const compactClass=cn(styles.compactIcon,styles[`${concatClasses("compact",resolveSizeProp(size))}`]);const btnClasses=cn(styles.Button,styles[variant],styles[`${concatClasses(variant,intent)}`],{[styles[`${concatClasses("button",resolveSizeProp(size))}`]]:!icon},{[styles[`${concatClasses("icon",resolveSizeProp(size))}`]]:iconOnly},{[compactClass]:isCompactIcon},{[styles.link]:link},{[styles.stretch]:stretch},{[styles.stickStart]:stickStart},{[styles.stickEnd]:stickEnd},{[styles[`${concatClasses("stick",variant)}`]]:stick},{[styles.noUnderline]:link&&!underline});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("div",{className:styles.qualifierWrapper},React.createElement(Qualifier,{iconSize:svgSize(qualifierSVGSizes,size)},qualifier)));const getIcon=()=>{if(icon&&!isSVG(children)){console.warn("Icon can only be SVG");children="";}return React.createElement("div",{className:styles.iconWrapper},React.createElement(SvgNormalizer,{dimension:svgSize(iconSVGSizes,size)},children))};const getQualifierWithChildren=()=>{return React.createElement(React.Fragment,null,qualifier&&!qualifierEnd&&getQualifier(),children,qualifier&&qualifierEnd&&getQualifier())};if(link){const{style,...restAsProps}=asProps||{};if(props.disabled){console.warn("Button: LinkButton can not be disabled");}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.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.bool,size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,stickStart:PropTypes.bool,stickEnd:PropTypes.bool,stick:PropTypes.bool,underline: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:"."},stickEnd:false,stickStart:false,stick:false,underline:true}; | ||
| export { Button }; |
+2
-2
| { | ||
| "name": "@asphalt-react/button", | ||
| "version": "2.0.0-alpha.16", | ||
| "version": "2.0.0-alpha.17", | ||
| "description": "Button", | ||
@@ -52,3 +52,3 @@ "keywords": [ | ||
| }, | ||
| "gitHead": "f4fb1d6fe86c8e09cded4b749a14f0160ed90460" | ||
| "gitHead": "f310c7dc144e4878c64e599811d65d00123ebea2" | ||
| } |
+8
-0
@@ -250,1 +250,9 @@ # Button | ||
| | bool | false | false | | ||
| ### underline | ||
| Adds underline in link Button | ||
| | type | required | default | | ||
| | ---- | -------- | ------- | | ||
| | bool | false | true | |
Major refactor
Supply chain riskPackage 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 riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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 riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
71197
0.85%317
1.28%258
3.2%