@asphalt-react/card - npm Package Compare versions

Comparing version 2.11.0 to 2.12.0

dist/index.cjs

@@ -48,21 +48,21 @@ 'use strict';
 
-var css_248z$2 = ".Base__wgmJa {\n  width: auto;\n  height: auto;\n}\n\n.elevated__T-gux {\n  box-shadow: var(--shadow-mid, 0px 4px 20px 0px #1e2c6a1a);\n}\n\n.fitWidth__Fkyrr {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.bezelless__iKw4n {\n  padding: 0;\n}\n\n.debossTop__dbsHX {\n  box-shadow: inset var(--shadow-deboss-mid-top, 0px 4px 4px 0px #1e2c6a0a);\n}\n\n.bevelTop__nXRoQ {\n  box-shadow: inset var(--shadow-emboss-mid-top, 0px 2px 1px 0px #ffffffb3);\n}\n\n.bevelBottom__74lDy {\n  box-shadow: var(--shadow-emboss-mid-bottom, 0px 2px 1px 0px #ffffffb3);\n}\n";
-var commonStyles = {"Base":"Base__wgmJa","elevated":"elevated__T-gux","fitWidth":"fitWidth__Fkyrr","bezelless":"bezelless__iKw4n","debossTop":"debossTop__dbsHX","bevelTop":"bevelTop__nXRoQ","bevelBottom":"bevelBottom__74lDy"};
+var css_248z$2 = ".Base__wgmJa {\n  width: auto;\n  height: auto;\n}\n\n.elevated__T-gux {\n  box-shadow: var(--shadow-mid, 0px 4px 20px 0px #1e2c6a1a);\n}\n\n.bezelless__iKw4n {\n  --padding: 0;\n}\n\n.debossTop__dbsHX {\n  box-shadow: inset var(--shadow-deboss-mid-top, 0px 4px 4px 0px #1e2c6a0a);\n}\n\n.bevelTop__nXRoQ {\n  box-shadow: inset var(--shadow-emboss-mid-top, 0px 2px 1px 0px #ffffffb3);\n}\n\n.bevelBottom__74lDy {\n  box-shadow: var(--shadow-emboss-mid-bottom, 0px 2px 1px 0px #ffffffb3);\n}\n";
+var commonStyles = {"Base":"Base__wgmJa","elevated":"elevated__T-gux","bezelless":"bezelless__iKw4n","debossTop":"debossTop__dbsHX","bevelTop":"bevelTop__nXRoQ","bevelBottom":"bevelBottom__74lDy"};
 styleInject(css_248z$2);
 
-var css_248z$1 = ".Card__NSU-L {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--static-surface-primary, #ffffff);\n  --border-color: transparent;\n  --roundness: var(--roundness-container-M, 1rem);\n\n  border: 1px solid var(--border-color);\n  background-color: var(--surface, #ffffff);\n  color: var(--content-color);\n  padding: var(--padding);\n  border-radius: var(--roundness);\n}\n\n.outlined__e3x-V {\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__cFUAA {\n  --padding: 1rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__AhTyM {\n  --padding: 1.5rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Q7ZtD {\n  --padding: 2rem;\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__2rGke {\n  --padding: 2.5rem;\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n.primary__HgAhX {\n  --surface: var(--static-surface-primary, #ffffff);\n}\n\n.secondary__czH67 {\n  --surface: var(--static-surface-secondary, #f8f8fa);\n}\n\n.tertiary__lUp2E {\n  --surface: var(--static-surface-tertiary, #e8ebef);\n}\n\n.success__B0zv0 {\n  --surface: var(--static-support-success-secondary, #e8fbf7);\n}\n\n.danger__2ROwv {\n  --surface: var(--static-support-danger-secondary, #fee1e7);\n}\n\n.warning__-Dv69 {\n  --surface: var(--static-support-warning-secondary, #fff5e3);\n}\n\n.info__V3Wbk {\n  --surface: var(--static-support-info-secondary, #e3edff);\n}\n\n.brand__n5AaV {\n  --surface: var(--static-surface-brand, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.inverse__9JPdt {\n  --surface: var(--static-surface-inverse, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n";
-var styles$1 = {"Card":"Card__NSU-L","outlined":"outlined__e3x-V","xs":"xs__cFUAA","s":"s__AhTyM","m":"m__Q7ZtD","l":"l__2rGke","primary":"primary__HgAhX","secondary":"secondary__czH67","tertiary":"tertiary__lUp2E","success":"success__B0zv0","danger":"danger__2ROwv","warning":"warning__-Dv69","info":"info__V3Wbk","brand":"brand__n5AaV","inverse":"inverse__9JPdt"};
-var stylesheet$1=".Card__NSU-L {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--static-surface-primary, #ffffff);\n  --border-color: transparent;\n  --roundness: var(--roundness-container-M, 1rem);\n\n  border: 1px solid var(--border-color);\n  background-color: var(--surface, #ffffff);\n  color: var(--content-color);\n  padding: var(--padding);\n  border-radius: var(--roundness);\n}\n\n.outlined__e3x-V {\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__cFUAA {\n  --padding: 1rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__AhTyM {\n  --padding: 1.5rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Q7ZtD {\n  --padding: 2rem;\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__2rGke {\n  --padding: 2.5rem;\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n.primary__HgAhX {\n  --surface: var(--static-surface-primary, #ffffff);\n}\n\n.secondary__czH67 {\n  --surface: var(--static-surface-secondary, #f8f8fa);\n}\n\n.tertiary__lUp2E {\n  --surface: var(--static-surface-tertiary, #e8ebef);\n}\n\n.success__B0zv0 {\n  --surface: var(--static-support-success-secondary, #e8fbf7);\n}\n\n.danger__2ROwv {\n  --surface: var(--static-support-danger-secondary, #fee1e7);\n}\n\n.warning__-Dv69 {\n  --surface: var(--static-support-warning-secondary, #fff5e3);\n}\n\n.info__V3Wbk {\n  --surface: var(--static-support-info-secondary, #e3edff);\n}\n\n.brand__n5AaV {\n  --surface: var(--static-surface-brand, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.inverse__9JPdt {\n  --surface: var(--static-surface-inverse, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n";
+var css_248z$1 = ".Card__NSU-L {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--static-surface-primary, #ffffff);\n  --border-color: transparent;\n  --roundness: var(--roundness-container-M, 1rem);\n\n  border: 1px solid var(--border-color);\n  background-color: var(--surface, #ffffff);\n  color: var(--content-color);\n  padding: var(--padding);\n  border-radius: var(--roundness);\n}\n\n.fitWidth__cEBDj {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.outlined__e3x-V {\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__cFUAA {\n  --padding: 1rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__AhTyM {\n  --padding: 1.5rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Q7ZtD {\n  --padding: 2rem;\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__2rGke {\n  --padding: 2.5rem;\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n.primary__HgAhX {\n  --surface: var(--static-surface-primary, #ffffff);\n}\n\n.secondary__czH67 {\n  --surface: var(--static-surface-secondary, #f8f8fa);\n}\n\n.tertiary__lUp2E {\n  --surface: var(--static-surface-tertiary, #e8ebef);\n}\n\n.success__B0zv0 {\n  --surface: var(--static-support-success-secondary, #e8fbf7);\n}\n\n.danger__2ROwv {\n  --surface: var(--static-support-danger-secondary, #fee1e7);\n}\n\n.warning__-Dv69 {\n  --surface: var(--static-support-warning-secondary, #fff5e3);\n}\n\n.info__V3Wbk {\n  --surface: var(--static-support-info-secondary, #e3edff);\n}\n\n.brand__n5AaV {\n  --surface: var(--static-surface-brand, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.inverse__9JPdt {\n  --surface: var(--static-surface-inverse, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n";
+var styles$1 = {"Card":"Card__NSU-L","fitWidth":"fitWidth__cEBDj","outlined":"outlined__e3x-V","xs":"xs__cFUAA","s":"s__AhTyM","m":"m__Q7ZtD","l":"l__2rGke","primary":"primary__HgAhX","secondary":"secondary__czH67","tertiary":"tertiary__lUp2E","success":"success__B0zv0","danger":"danger__2ROwv","warning":"warning__-Dv69","info":"info__V3Wbk","brand":"brand__n5AaV","inverse":"inverse__9JPdt"};
+var stylesheet$1=".Card__NSU-L {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--static-surface-primary, #ffffff);\n  --border-color: transparent;\n  --roundness: var(--roundness-container-M, 1rem);\n\n  border: 1px solid var(--border-color);\n  background-color: var(--surface, #ffffff);\n  color: var(--content-color);\n  padding: var(--padding);\n  border-radius: var(--roundness);\n}\n\n.fitWidth__cEBDj {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.outlined__e3x-V {\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__cFUAA {\n  --padding: 1rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__AhTyM {\n  --padding: 1.5rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Q7ZtD {\n  --padding: 2rem;\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__2rGke {\n  --padding: 2.5rem;\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n.primary__HgAhX {\n  --surface: var(--static-surface-primary, #ffffff);\n}\n\n.secondary__czH67 {\n  --surface: var(--static-surface-secondary, #f8f8fa);\n}\n\n.tertiary__lUp2E {\n  --surface: var(--static-surface-tertiary, #e8ebef);\n}\n\n.success__B0zv0 {\n  --surface: var(--static-support-success-secondary, #e8fbf7);\n}\n\n.danger__2ROwv {\n  --surface: var(--static-support-danger-secondary, #fee1e7);\n}\n\n.warning__-Dv69 {\n  --surface: var(--static-support-warning-secondary, #fff5e3);\n}\n\n.info__V3Wbk {\n  --surface: var(--static-support-info-secondary, #e3edff);\n}\n\n.brand__n5AaV {\n  --surface: var(--static-surface-brand, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.inverse__9JPdt {\n  --surface: var(--static-surface-inverse, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n";
 styleInject(css_248z$1);
 
-const{resolvePropCollision: resolvePropCollision$1}=helper.propsUtil;const Card=({children,size="m",outlined=null,elevated=null,bezel=true,fitWidth=false,primary=false,secondary=false,tertiary=false,brand=false,inverse=false,danger=false,warning=false,success=false,info=false,debossTop=false,bevelTop=false,bevelBottom=false,...props})=>{context.sendStyles(stylesheet$1);const{style,className,...rest}=props;if(elevated===null&&outlined===null){elevated=true;}const{collision,value:intent}=resolvePropCollision$1({primary,danger,info,success,warning,brand,secondary,tertiary,inverse},"primary");if(collision){console.warn(`Card: Multiple intents detected. Falling back to "primary"`);}const cardClasses=cn(commonStyles.Base,styles$1.Card,{[styles$1[resolveSizeProp(size)]]:bezel},{[styles$1.outlined]:outlined},{[commonStyles.elevated]:elevated},{[commonStyles.fitWidth]:fitWidth},{[commonStyles.bezelless]:!bezel},{[commonStyles.debossTop]:debossTop},{[commonStyles.bevelTop]:bevelTop},{[commonStyles.bevelBottom]:bevelBottom},styles$1[intent]);return React.createElement("div",_extends({},rest,{className:cardClasses}),children)};Card.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["xs","s","m","l"]),outlined:PropTypes.oneOfType([PropTypes.bool,PropTypes.null]),elevated:PropTypes.oneOfType([PropTypes.bool,PropTypes.null]),bezel:PropTypes.bool,fitWidth:PropTypes.bool,primary:PropTypes.bool,secondary:PropTypes.bool,tertiary:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool,danger:PropTypes.bool,warning:PropTypes.bool,success:PropTypes.bool,info:PropTypes.bool,debossTop:PropTypes.bool,bevelTop:PropTypes.bool,bevelBottom:PropTypes.bool};Card.defaultProps={size:"m",outlined:null,elevated:null,bezel:true,fitWidth:false,primary:false,secondary:false,tertiary:false,brand:false,inverse:false,danger:false,warning:false,success:false,info:false,debossTop:false,bevelTop:false,bevelBottom:false};
+const{resolvePropCollision: resolvePropCollision$1}=helper.propsUtil;const Card=({children,size="m",outlined=null,elevated=null,bezel=true,fitWidth=false,primary=false,secondary=false,tertiary=false,brand=false,inverse=false,danger=false,warning=false,success=false,info=false,debossTop=false,bevelTop=false,bevelBottom=false,...props})=>{context.sendStyles(stylesheet$1);const{style,className,...rest}=props;if(elevated===null&&outlined===null){elevated=true;}const{collision,value:intent}=resolvePropCollision$1({primary,danger,info,success,warning,brand,secondary,tertiary,inverse},"primary");if(collision){console.warn(`Card: Multiple intents detected. Falling back to "primary"`);}const cardClasses=cn(commonStyles.Base,styles$1.Card,{[styles$1[resolveSizeProp(size)]]:bezel},{[styles$1.outlined]:outlined},{[commonStyles.elevated]:elevated},{[styles$1.fitWidth]:fitWidth},{[commonStyles.bezelless]:!bezel},{[commonStyles.debossTop]:debossTop},{[commonStyles.bevelTop]:bevelTop},{[commonStyles.bevelBottom]:bevelBottom},styles$1[intent]);return React.createElement("div",_extends({},rest,{className:cardClasses}),children)};Card.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["xs","s","m","l"]),outlined:PropTypes.oneOfType([PropTypes.bool,PropTypes.null]),elevated:PropTypes.oneOfType([PropTypes.bool,PropTypes.null]),bezel:PropTypes.bool,fitWidth:PropTypes.bool,primary:PropTypes.bool,secondary:PropTypes.bool,tertiary:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool,danger:PropTypes.bool,warning:PropTypes.bool,success:PropTypes.bool,info:PropTypes.bool,debossTop:PropTypes.bool,bevelTop:PropTypes.bool,bevelBottom:PropTypes.bool};Card.defaultProps={size:"m",outlined:null,elevated:null,bezel:true,fitWidth:false,primary:false,secondary:false,tertiary:false,brand:false,inverse:false,danger:false,warning:false,success:false,info:false,debossTop:false,bevelTop:false,bevelBottom:false};
 
-var css_248z = "/* Remove default style of button in the browser */\nbutton {\n  all: unset;\n}\n\n.Tile__jAWCN {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n  --border-color: transparent;\n  --border-width: 0px;\n  --roundness: var(--roundness-container-M, 1rem);\n\n  background: var(--surface, #ffffff);\n  color: var(--content-color);\n  border: var(--border-width) solid var(--border-color);\n  padding: var(--padding);\n  text-decoration: none;\n  border-radius: var(--roundness);\n}\n\n.outlined__OzZPW {\n  --border-width: 1px;\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__qfsYx {\n  --padding: calc(1rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__YK8ZO {\n  --padding: calc(1.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Np7Ju {\n  --padding: calc(2rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__QzLVU {\n  --padding: calc(2.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n/* States */\n\n.Tile__jAWCN:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Tile__jAWCN:focus-visible:not(.disabled__esyur) {\n  outline: var(--focus-outline, 2px solid) var(--interactive-focus, #86afff);\n}\n\n.Tile__jAWCN:active:not(.disabled__esyur) {\n  outline: none;\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface: var(--interactive-surface-primary-active, #d6dce7);\n  --border-width: 1px;\n}\n\n/* Primary */\n\n.primary__pmd4W {\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n}\n\n/* Secondary */\n\n.secondary__0QWTZ {\n  --surface: var(--interactive-surface-secondary-default, #e9eef3);\n}\n\n.secondary__0QWTZ:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-hover, #f4f7f9);\n}\n\n.secondary__0QWTZ:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-active, #c6cdd4);\n}\n\n/* Success */\n\n.success__mOYgq {\n  --surface: var(--interactive-support-success-secondary-default, #e8fbf7);\n}\n\n.success__mOYgq:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-hover, #f1fdfa);\n}\n\n.success__mOYgq:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-active, #b0f2e9);\n}\n\n/* Danger */\n\n.danger__ENZ2v {\n  --surface: var(--interactive-support-danger-secondary-default, #fee1e7);\n}\n\n.danger__ENZ2v:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-hover, #fff1f4);\n}\n\n.danger__ENZ2v:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-active, #ffc6d0);\n}\n\n/* Warning */\n\n.warning__1MrIg {\n  --surface: var(--interactive-support-warning-secondary-default, #fff5e3);\n}\n\n.warning__1MrIg:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-hover, #fff9ee);\n}\n\n.warning__1MrIg:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-active, #ffe28f);\n}\n\n/* Info */\n\n.info__nfjlt {\n  --surface: var(--interactive-support-info-secondary-default, #e3edff);\n}\n\n.info__nfjlt:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-hover, #eef4ff);\n}\n\n.info__nfjlt:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-active, #b2c1fe);\n}\n\n/* Brand */\n\n.brand__na5I2 {\n  --surface: var(--interactive-surface-brand-primary-default, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-hover, #33bb42);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-active, #067817);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n/* Inverse */\n\n.inverse__dPfLT {\n  --surface: var(--interactive-surface-inverse-primary-default, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-hover, #444651);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-active, #0a0d1d);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.disabled__esyur {\n  --surface: var(--interactive-surface-disabled, #f1f3f6);\n  --content-color: var(--content-disabled, #9a9eaa);\n}\n\n.selected__hfnbY {\n  --surface: var(--interactive-highlighted-primary, #e3edff);\n  --border-color: var(--interactive-active, #1c3abb);\n  --border-width: 1px;\n  --content-color: var(--content-primary, #2d2e34);\n}\n\n.invalid__bYvaD {\n  --border-color: var(--interactive-invalid, #ec4453);\n  --border-width: 1px;\n}\n";
-var styles = {"Tile":"Tile__jAWCN","outlined":"outlined__OzZPW","xs":"xs__qfsYx","s":"s__YK8ZO","m":"m__Np7Ju","l":"l__QzLVU","disabled":"disabled__esyur","primary":"primary__pmd4W","secondary":"secondary__0QWTZ","success":"success__mOYgq","danger":"danger__ENZ2v","warning":"warning__1MrIg","info":"info__nfjlt","brand":"brand__na5I2","inverse":"inverse__dPfLT","selected":"selected__hfnbY","invalid":"invalid__bYvaD"};
-var stylesheet="/* Remove default style of button in the browser */\nbutton {\n  all: unset;\n}\n\n.Tile__jAWCN {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n  --border-color: transparent;\n  --border-width: 0px;\n  --roundness: var(--roundness-container-M, 1rem);\n\n  background: var(--surface, #ffffff);\n  color: var(--content-color);\n  border: var(--border-width) solid var(--border-color);\n  padding: var(--padding);\n  text-decoration: none;\n  border-radius: var(--roundness);\n}\n\n.outlined__OzZPW {\n  --border-width: 1px;\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__qfsYx {\n  --padding: calc(1rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__YK8ZO {\n  --padding: calc(1.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Np7Ju {\n  --padding: calc(2rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__QzLVU {\n  --padding: calc(2.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n/* States */\n\n.Tile__jAWCN:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Tile__jAWCN:focus-visible:not(.disabled__esyur) {\n  outline: var(--focus-outline, 2px solid) var(--interactive-focus, #86afff);\n}\n\n.Tile__jAWCN:active:not(.disabled__esyur) {\n  outline: none;\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface: var(--interactive-surface-primary-active, #d6dce7);\n  --border-width: 1px;\n}\n\n/* Primary */\n\n.primary__pmd4W {\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n}\n\n/* Secondary */\n\n.secondary__0QWTZ {\n  --surface: var(--interactive-surface-secondary-default, #e9eef3);\n}\n\n.secondary__0QWTZ:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-hover, #f4f7f9);\n}\n\n.secondary__0QWTZ:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-active, #c6cdd4);\n}\n\n/* Success */\n\n.success__mOYgq {\n  --surface: var(--interactive-support-success-secondary-default, #e8fbf7);\n}\n\n.success__mOYgq:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-hover, #f1fdfa);\n}\n\n.success__mOYgq:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-active, #b0f2e9);\n}\n\n/* Danger */\n\n.danger__ENZ2v {\n  --surface: var(--interactive-support-danger-secondary-default, #fee1e7);\n}\n\n.danger__ENZ2v:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-hover, #fff1f4);\n}\n\n.danger__ENZ2v:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-active, #ffc6d0);\n}\n\n/* Warning */\n\n.warning__1MrIg {\n  --surface: var(--interactive-support-warning-secondary-default, #fff5e3);\n}\n\n.warning__1MrIg:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-hover, #fff9ee);\n}\n\n.warning__1MrIg:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-active, #ffe28f);\n}\n\n/* Info */\n\n.info__nfjlt {\n  --surface: var(--interactive-support-info-secondary-default, #e3edff);\n}\n\n.info__nfjlt:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-hover, #eef4ff);\n}\n\n.info__nfjlt:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-active, #b2c1fe);\n}\n\n/* Brand */\n\n.brand__na5I2 {\n  --surface: var(--interactive-surface-brand-primary-default, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-hover, #33bb42);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-active, #067817);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n/* Inverse */\n\n.inverse__dPfLT {\n  --surface: var(--interactive-surface-inverse-primary-default, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-hover, #444651);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-active, #0a0d1d);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.disabled__esyur {\n  --surface: var(--interactive-surface-disabled, #f1f3f6);\n  --content-color: var(--content-disabled, #9a9eaa);\n}\n\n.selected__hfnbY {\n  --surface: var(--interactive-highlighted-primary, #e3edff);\n  --border-color: var(--interactive-active, #1c3abb);\n  --border-width: 1px;\n  --content-color: var(--content-primary, #2d2e34);\n}\n\n.invalid__bYvaD {\n  --border-color: var(--interactive-invalid, #ec4453);\n  --border-width: 1px;\n}\n";
+var css_248z = "/* Remove default style of button in the browser */\nbutton {\n  all: unset;\n}\n\n.Tile__jAWCN {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n  --border-color: transparent;\n  --border-width: 0px;\n  --roundness: var(--roundness-container-M, 1rem);\n  --width: 100%;\n\n  background: var(--surface, #ffffff);\n  color: var(--content-color);\n  border: var(--border-width) solid var(--border-color);\n  padding: var(--padding);\n  text-decoration: none;\n  border-radius: var(--roundness);\n  box-sizing: border-box;\n  width: var(--width);\n}\n\n.fitWidth__ky-5l {\n  --width: fit-content;\n}\n\n.outlined__OzZPW {\n  --border-width: 1px;\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__qfsYx {\n  --padding: calc(1rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__YK8ZO {\n  --padding: calc(1.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Np7Ju {\n  --padding: calc(2rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__QzLVU {\n  --padding: calc(2.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n/* States */\n\n.Tile__jAWCN:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Tile__jAWCN:focus-visible:not(.disabled__esyur) {\n  outline: var(--focus-outline, 2px solid) var(--interactive-focus, #86afff);\n}\n\n.Tile__jAWCN:active:not(.disabled__esyur) {\n  outline: none;\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface: var(--interactive-surface-primary-active, #d6dce7);\n  --border-width: 1px;\n}\n\n/* Primary */\n\n.primary__pmd4W {\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n}\n\n/* Secondary */\n\n.secondary__0QWTZ {\n  --surface: var(--interactive-surface-secondary-default, #e9eef3);\n}\n\n.secondary__0QWTZ:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-hover, #f4f7f9);\n}\n\n.secondary__0QWTZ:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-active, #c6cdd4);\n}\n\n/* Success */\n\n.success__mOYgq {\n  --surface: var(--interactive-support-success-secondary-default, #e8fbf7);\n}\n\n.success__mOYgq:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-hover, #f1fdfa);\n}\n\n.success__mOYgq:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-active, #b0f2e9);\n}\n\n/* Danger */\n\n.danger__ENZ2v {\n  --surface: var(--interactive-support-danger-secondary-default, #fee1e7);\n}\n\n.danger__ENZ2v:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-hover, #fff1f4);\n}\n\n.danger__ENZ2v:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-active, #ffc6d0);\n}\n\n/* Warning */\n\n.warning__1MrIg {\n  --surface: var(--interactive-support-warning-secondary-default, #fff5e3);\n}\n\n.warning__1MrIg:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-hover, #fff9ee);\n}\n\n.warning__1MrIg:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-active, #ffe28f);\n}\n\n/* Info */\n\n.info__nfjlt {\n  --surface: var(--interactive-support-info-secondary-default, #e3edff);\n}\n\n.info__nfjlt:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-hover, #eef4ff);\n}\n\n.info__nfjlt:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-active, #b2c1fe);\n}\n\n/* Brand */\n\n.brand__na5I2 {\n  --surface: var(--interactive-surface-brand-primary-default, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-hover, #33bb42);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-active, #067817);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n/* Inverse */\n\n.inverse__dPfLT {\n  --surface: var(--interactive-surface-inverse-primary-default, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-hover, #444651);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-active, #0a0d1d);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.disabled__esyur {\n  --surface: var(--interactive-surface-disabled, #f1f3f6);\n  --content-color: var(--content-disabled, #9a9eaa);\n}\n\n.selected__hfnbY {\n  --surface: var(--interactive-highlighted-primary, #e3edff);\n  --border-color: var(--interactive-active, #1c3abb);\n  --border-width: 1px;\n  --content-color: var(--content-primary, #2d2e34);\n}\n\n.invalid__bYvaD {\n  --border-color: var(--interactive-invalid, #ec4453);\n  --border-width: 1px;\n}\n";
+var styles = {"Tile":"Tile__jAWCN","fitWidth":"fitWidth__ky-5l","outlined":"outlined__OzZPW","xs":"xs__qfsYx","s":"s__YK8ZO","m":"m__Np7Ju","l":"l__QzLVU","disabled":"disabled__esyur","primary":"primary__pmd4W","secondary":"secondary__0QWTZ","success":"success__mOYgq","danger":"danger__ENZ2v","warning":"warning__1MrIg","info":"info__nfjlt","brand":"brand__na5I2","inverse":"inverse__dPfLT","selected":"selected__hfnbY","invalid":"invalid__bYvaD"};
+var stylesheet="/* Remove default style of button in the browser */\nbutton {\n  all: unset;\n}\n\n.Tile__jAWCN {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n  --border-color: transparent;\n  --border-width: 0px;\n  --roundness: var(--roundness-container-M, 1rem);\n  --width: 100%;\n\n  background: var(--surface, #ffffff);\n  color: var(--content-color);\n  border: var(--border-width) solid var(--border-color);\n  padding: var(--padding);\n  text-decoration: none;\n  border-radius: var(--roundness);\n  box-sizing: border-box;\n  width: var(--width);\n}\n\n.fitWidth__ky-5l {\n  --width: fit-content;\n}\n\n.outlined__OzZPW {\n  --border-width: 1px;\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__qfsYx {\n  --padding: calc(1rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__YK8ZO {\n  --padding: calc(1.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Np7Ju {\n  --padding: calc(2rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__QzLVU {\n  --padding: calc(2.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n/* States */\n\n.Tile__jAWCN:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Tile__jAWCN:focus-visible:not(.disabled__esyur) {\n  outline: var(--focus-outline, 2px solid) var(--interactive-focus, #86afff);\n}\n\n.Tile__jAWCN:active:not(.disabled__esyur) {\n  outline: none;\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface: var(--interactive-surface-primary-active, #d6dce7);\n  --border-width: 1px;\n}\n\n/* Primary */\n\n.primary__pmd4W {\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n}\n\n/* Secondary */\n\n.secondary__0QWTZ {\n  --surface: var(--interactive-surface-secondary-default, #e9eef3);\n}\n\n.secondary__0QWTZ:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-hover, #f4f7f9);\n}\n\n.secondary__0QWTZ:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-active, #c6cdd4);\n}\n\n/* Success */\n\n.success__mOYgq {\n  --surface: var(--interactive-support-success-secondary-default, #e8fbf7);\n}\n\n.success__mOYgq:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-hover, #f1fdfa);\n}\n\n.success__mOYgq:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-active, #b0f2e9);\n}\n\n/* Danger */\n\n.danger__ENZ2v {\n  --surface: var(--interactive-support-danger-secondary-default, #fee1e7);\n}\n\n.danger__ENZ2v:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-hover, #fff1f4);\n}\n\n.danger__ENZ2v:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-active, #ffc6d0);\n}\n\n/* Warning */\n\n.warning__1MrIg {\n  --surface: var(--interactive-support-warning-secondary-default, #fff5e3);\n}\n\n.warning__1MrIg:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-hover, #fff9ee);\n}\n\n.warning__1MrIg:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-active, #ffe28f);\n}\n\n/* Info */\n\n.info__nfjlt {\n  --surface: var(--interactive-support-info-secondary-default, #e3edff);\n}\n\n.info__nfjlt:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-hover, #eef4ff);\n}\n\n.info__nfjlt:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-active, #b2c1fe);\n}\n\n/* Brand */\n\n.brand__na5I2 {\n  --surface: var(--interactive-surface-brand-primary-default, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-hover, #33bb42);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-active, #067817);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n/* Inverse */\n\n.inverse__dPfLT {\n  --surface: var(--interactive-surface-inverse-primary-default, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-hover, #444651);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-active, #0a0d1d);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.disabled__esyur {\n  --surface: var(--interactive-surface-disabled, #f1f3f6);\n  --content-color: var(--content-disabled, #9a9eaa);\n}\n\n.selected__hfnbY {\n  --surface: var(--interactive-highlighted-primary, #e3edff);\n  --border-color: var(--interactive-active, #1c3abb);\n  --border-width: 1px;\n  --content-color: var(--content-primary, #2d2e34);\n}\n\n.invalid__bYvaD {\n  --border-color: var(--interactive-invalid, #ec4453);\n  --border-width: 1px;\n}\n";
 styleInject(css_248z);
 
-const{resolvePropCollision}=helper.propsUtil;const Tile=({children,size="m",outlined=false,elevated=true,bezel=true,fitWidth=false,selected=false,disabled=false,primary=false,secondary=false,brand=false,inverse=false,danger=false,warning=false,success=false,info=false,invalid=false,debossTop=false,bevelTop=false,bevelBottom=false,as:Tiles="button",asProps={},...props})=>{context.sendStyles(stylesheet);const{style,className,...rest}=props;const{collision,value:intent}=resolvePropCollision({primary,danger,info,success,warning,brand,secondary,inverse},"primary");if(collision){console.warn(`Card: Multiple intents detected. Falling back to "primary"`);}const tileClasses=cn(commonStyles.Base,styles.Tile,styles[intent],{[commonStyles.elevated]:elevated},{[commonStyles.fitWidth]:fitWidth},{[commonStyles.bezelless]:!bezel},{[commonStyles.debossTop]:debossTop},{[commonStyles.bevelTop]:bevelTop},{[commonStyles.bevelBottom]:bevelBottom},{[styles[resolveSizeProp(size)]]:bezel},{[styles.outlined]:outlined},{[styles.selected]:selected&&!disabled},{[styles.disabled]:disabled},{[styles.invalid]:invalid});return React.createElement(Tiles,_extends({},rest,asProps,{className:tileClasses,tabIndex:disabled?-1:0,"aria-selected":selected,disabled:disabled}),children)};Tile.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["xs","s","m","l"]),outlined:PropTypes.bool,elevated:PropTypes.bool,bezel:PropTypes.bool,fitWidth:PropTypes.bool,selected:PropTypes.bool,disabled:PropTypes.bool,primary:PropTypes.bool,secondary:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool,danger:PropTypes.bool,warning:PropTypes.bool,success:PropTypes.bool,info:PropTypes.bool,invalid:PropTypes.bool,debossTop:PropTypes.bool,bevelTop:PropTypes.bool,bevelBottom:PropTypes.bool,as:PropTypes.elementType,asProps:PropTypes.object};
+const{resolvePropCollision}=helper.propsUtil;const Tile=({children,size="m",outlined=false,elevated=true,bezel=true,fitWidth=false,selected=false,disabled=false,primary=false,secondary=false,brand=false,inverse=false,danger=false,warning=false,success=false,info=false,invalid=false,debossTop=false,bevelTop=false,bevelBottom=false,as:Tiles="button",asProps={},...props})=>{context.sendStyles(stylesheet);const{style,className,...rest}=props;const{collision,value:intent}=resolvePropCollision({primary,danger,info,success,warning,brand,secondary,inverse},"primary");if(collision){console.warn(`Card: Multiple intents detected. Falling back to "primary"`);}const tileClasses=cn(commonStyles.Base,styles.Tile,styles[intent],{[commonStyles.elevated]:elevated},{[styles.fitWidth]:fitWidth},{[commonStyles.bezelless]:!bezel},{[commonStyles.debossTop]:debossTop},{[commonStyles.bevelTop]:bevelTop},{[commonStyles.bevelBottom]:bevelBottom},{[styles[resolveSizeProp(size)]]:bezel},{[styles.outlined]:outlined},{[styles.selected]:selected&&!disabled},{[styles.disabled]:disabled},{[styles.invalid]:invalid});return React.createElement(Tiles,_extends({},rest,asProps,{className:tileClasses,tabIndex:disabled?-1:0,"aria-selected":selected,disabled:disabled}),children)};Tile.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["xs","s","m","l"]),outlined:PropTypes.bool,elevated:PropTypes.bool,bezel:PropTypes.bool,fitWidth:PropTypes.bool,selected:PropTypes.bool,disabled:PropTypes.bool,primary:PropTypes.bool,secondary:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool,danger:PropTypes.bool,warning:PropTypes.bool,success:PropTypes.bool,info:PropTypes.bool,invalid:PropTypes.bool,debossTop:PropTypes.bool,bevelTop:PropTypes.bool,bevelBottom:PropTypes.bool,as:PropTypes.elementType,asProps:PropTypes.object};
 
 exports.Card = Card;
 exports.Tile = Tile;

dist/index.js

@@ -46,20 +46,20 @@ import React from 'react';
 
-var css_248z$2 = ".Base__wgmJa {\n  width: auto;\n  height: auto;\n}\n\n.elevated__T-gux {\n  box-shadow: var(--shadow-mid, 0px 4px 20px 0px #1e2c6a1a);\n}\n\n.fitWidth__Fkyrr {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.bezelless__iKw4n {\n  padding: 0;\n}\n\n.debossTop__dbsHX {\n  box-shadow: inset var(--shadow-deboss-mid-top, 0px 4px 4px 0px #1e2c6a0a);\n}\n\n.bevelTop__nXRoQ {\n  box-shadow: inset var(--shadow-emboss-mid-top, 0px 2px 1px 0px #ffffffb3);\n}\n\n.bevelBottom__74lDy {\n  box-shadow: var(--shadow-emboss-mid-bottom, 0px 2px 1px 0px #ffffffb3);\n}\n";
-var commonStyles = {"Base":"Base__wgmJa","elevated":"elevated__T-gux","fitWidth":"fitWidth__Fkyrr","bezelless":"bezelless__iKw4n","debossTop":"debossTop__dbsHX","bevelTop":"bevelTop__nXRoQ","bevelBottom":"bevelBottom__74lDy"};
+var css_248z$2 = ".Base__wgmJa {\n  width: auto;\n  height: auto;\n}\n\n.elevated__T-gux {\n  box-shadow: var(--shadow-mid, 0px 4px 20px 0px #1e2c6a1a);\n}\n\n.bezelless__iKw4n {\n  --padding: 0;\n}\n\n.debossTop__dbsHX {\n  box-shadow: inset var(--shadow-deboss-mid-top, 0px 4px 4px 0px #1e2c6a0a);\n}\n\n.bevelTop__nXRoQ {\n  box-shadow: inset var(--shadow-emboss-mid-top, 0px 2px 1px 0px #ffffffb3);\n}\n\n.bevelBottom__74lDy {\n  box-shadow: var(--shadow-emboss-mid-bottom, 0px 2px 1px 0px #ffffffb3);\n}\n";
+var commonStyles = {"Base":"Base__wgmJa","elevated":"elevated__T-gux","bezelless":"bezelless__iKw4n","debossTop":"debossTop__dbsHX","bevelTop":"bevelTop__nXRoQ","bevelBottom":"bevelBottom__74lDy"};
 styleInject(css_248z$2);
 
-var css_248z$1 = ".Card__NSU-L {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--static-surface-primary, #ffffff);\n  --border-color: transparent;\n  --roundness: var(--roundness-container-M, 1rem);\n\n  border: 1px solid var(--border-color);\n  background-color: var(--surface, #ffffff);\n  color: var(--content-color);\n  padding: var(--padding);\n  border-radius: var(--roundness);\n}\n\n.outlined__e3x-V {\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__cFUAA {\n  --padding: 1rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__AhTyM {\n  --padding: 1.5rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Q7ZtD {\n  --padding: 2rem;\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__2rGke {\n  --padding: 2.5rem;\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n.primary__HgAhX {\n  --surface: var(--static-surface-primary, #ffffff);\n}\n\n.secondary__czH67 {\n  --surface: var(--static-surface-secondary, #f8f8fa);\n}\n\n.tertiary__lUp2E {\n  --surface: var(--static-surface-tertiary, #e8ebef);\n}\n\n.success__B0zv0 {\n  --surface: var(--static-support-success-secondary, #e8fbf7);\n}\n\n.danger__2ROwv {\n  --surface: var(--static-support-danger-secondary, #fee1e7);\n}\n\n.warning__-Dv69 {\n  --surface: var(--static-support-warning-secondary, #fff5e3);\n}\n\n.info__V3Wbk {\n  --surface: var(--static-support-info-secondary, #e3edff);\n}\n\n.brand__n5AaV {\n  --surface: var(--static-surface-brand, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.inverse__9JPdt {\n  --surface: var(--static-surface-inverse, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n";
-var styles$1 = {"Card":"Card__NSU-L","outlined":"outlined__e3x-V","xs":"xs__cFUAA","s":"s__AhTyM","m":"m__Q7ZtD","l":"l__2rGke","primary":"primary__HgAhX","secondary":"secondary__czH67","tertiary":"tertiary__lUp2E","success":"success__B0zv0","danger":"danger__2ROwv","warning":"warning__-Dv69","info":"info__V3Wbk","brand":"brand__n5AaV","inverse":"inverse__9JPdt"};
-var stylesheet$1=".Card__NSU-L {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--static-surface-primary, #ffffff);\n  --border-color: transparent;\n  --roundness: var(--roundness-container-M, 1rem);\n\n  border: 1px solid var(--border-color);\n  background-color: var(--surface, #ffffff);\n  color: var(--content-color);\n  padding: var(--padding);\n  border-radius: var(--roundness);\n}\n\n.outlined__e3x-V {\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__cFUAA {\n  --padding: 1rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__AhTyM {\n  --padding: 1.5rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Q7ZtD {\n  --padding: 2rem;\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__2rGke {\n  --padding: 2.5rem;\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n.primary__HgAhX {\n  --surface: var(--static-surface-primary, #ffffff);\n}\n\n.secondary__czH67 {\n  --surface: var(--static-surface-secondary, #f8f8fa);\n}\n\n.tertiary__lUp2E {\n  --surface: var(--static-surface-tertiary, #e8ebef);\n}\n\n.success__B0zv0 {\n  --surface: var(--static-support-success-secondary, #e8fbf7);\n}\n\n.danger__2ROwv {\n  --surface: var(--static-support-danger-secondary, #fee1e7);\n}\n\n.warning__-Dv69 {\n  --surface: var(--static-support-warning-secondary, #fff5e3);\n}\n\n.info__V3Wbk {\n  --surface: var(--static-support-info-secondary, #e3edff);\n}\n\n.brand__n5AaV {\n  --surface: var(--static-surface-brand, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.inverse__9JPdt {\n  --surface: var(--static-surface-inverse, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n";
+var css_248z$1 = ".Card__NSU-L {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--static-surface-primary, #ffffff);\n  --border-color: transparent;\n  --roundness: var(--roundness-container-M, 1rem);\n\n  border: 1px solid var(--border-color);\n  background-color: var(--surface, #ffffff);\n  color: var(--content-color);\n  padding: var(--padding);\n  border-radius: var(--roundness);\n}\n\n.fitWidth__cEBDj {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.outlined__e3x-V {\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__cFUAA {\n  --padding: 1rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__AhTyM {\n  --padding: 1.5rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Q7ZtD {\n  --padding: 2rem;\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__2rGke {\n  --padding: 2.5rem;\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n.primary__HgAhX {\n  --surface: var(--static-surface-primary, #ffffff);\n}\n\n.secondary__czH67 {\n  --surface: var(--static-surface-secondary, #f8f8fa);\n}\n\n.tertiary__lUp2E {\n  --surface: var(--static-surface-tertiary, #e8ebef);\n}\n\n.success__B0zv0 {\n  --surface: var(--static-support-success-secondary, #e8fbf7);\n}\n\n.danger__2ROwv {\n  --surface: var(--static-support-danger-secondary, #fee1e7);\n}\n\n.warning__-Dv69 {\n  --surface: var(--static-support-warning-secondary, #fff5e3);\n}\n\n.info__V3Wbk {\n  --surface: var(--static-support-info-secondary, #e3edff);\n}\n\n.brand__n5AaV {\n  --surface: var(--static-surface-brand, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.inverse__9JPdt {\n  --surface: var(--static-surface-inverse, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n";
+var styles$1 = {"Card":"Card__NSU-L","fitWidth":"fitWidth__cEBDj","outlined":"outlined__e3x-V","xs":"xs__cFUAA","s":"s__AhTyM","m":"m__Q7ZtD","l":"l__2rGke","primary":"primary__HgAhX","secondary":"secondary__czH67","tertiary":"tertiary__lUp2E","success":"success__B0zv0","danger":"danger__2ROwv","warning":"warning__-Dv69","info":"info__V3Wbk","brand":"brand__n5AaV","inverse":"inverse__9JPdt"};
+var stylesheet$1=".Card__NSU-L {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--static-surface-primary, #ffffff);\n  --border-color: transparent;\n  --roundness: var(--roundness-container-M, 1rem);\n\n  border: 1px solid var(--border-color);\n  background-color: var(--surface, #ffffff);\n  color: var(--content-color);\n  padding: var(--padding);\n  border-radius: var(--roundness);\n}\n\n.fitWidth__cEBDj {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.outlined__e3x-V {\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__cFUAA {\n  --padding: 1rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__AhTyM {\n  --padding: 1.5rem;\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Q7ZtD {\n  --padding: 2rem;\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__2rGke {\n  --padding: 2.5rem;\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n.primary__HgAhX {\n  --surface: var(--static-surface-primary, #ffffff);\n}\n\n.secondary__czH67 {\n  --surface: var(--static-surface-secondary, #f8f8fa);\n}\n\n.tertiary__lUp2E {\n  --surface: var(--static-surface-tertiary, #e8ebef);\n}\n\n.success__B0zv0 {\n  --surface: var(--static-support-success-secondary, #e8fbf7);\n}\n\n.danger__2ROwv {\n  --surface: var(--static-support-danger-secondary, #fee1e7);\n}\n\n.warning__-Dv69 {\n  --surface: var(--static-support-warning-secondary, #fff5e3);\n}\n\n.info__V3Wbk {\n  --surface: var(--static-support-info-secondary, #e3edff);\n}\n\n.brand__n5AaV {\n  --surface: var(--static-surface-brand, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.inverse__9JPdt {\n  --surface: var(--static-surface-inverse, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n";
 styleInject(css_248z$1);
 
-const{resolvePropCollision: resolvePropCollision$1}=propsUtil;const Card=({children,size="m",outlined=null,elevated=null,bezel=true,fitWidth=false,primary=false,secondary=false,tertiary=false,brand=false,inverse=false,danger=false,warning=false,success=false,info=false,debossTop=false,bevelTop=false,bevelBottom=false,...props})=>{sendStyles(stylesheet$1);const{style,className,...rest}=props;if(elevated===null&&outlined===null){elevated=true;}const{collision,value:intent}=resolvePropCollision$1({primary,danger,info,success,warning,brand,secondary,tertiary,inverse},"primary");if(collision){console.warn(`Card: Multiple intents detected. Falling back to "primary"`);}const cardClasses=cn(commonStyles.Base,styles$1.Card,{[styles$1[resolveSizeProp(size)]]:bezel},{[styles$1.outlined]:outlined},{[commonStyles.elevated]:elevated},{[commonStyles.fitWidth]:fitWidth},{[commonStyles.bezelless]:!bezel},{[commonStyles.debossTop]:debossTop},{[commonStyles.bevelTop]:bevelTop},{[commonStyles.bevelBottom]:bevelBottom},styles$1[intent]);return React.createElement("div",_extends({},rest,{className:cardClasses}),children)};Card.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["xs","s","m","l"]),outlined:PropTypes.oneOfType([PropTypes.bool,PropTypes.null]),elevated:PropTypes.oneOfType([PropTypes.bool,PropTypes.null]),bezel:PropTypes.bool,fitWidth:PropTypes.bool,primary:PropTypes.bool,secondary:PropTypes.bool,tertiary:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool,danger:PropTypes.bool,warning:PropTypes.bool,success:PropTypes.bool,info:PropTypes.bool,debossTop:PropTypes.bool,bevelTop:PropTypes.bool,bevelBottom:PropTypes.bool};Card.defaultProps={size:"m",outlined:null,elevated:null,bezel:true,fitWidth:false,primary:false,secondary:false,tertiary:false,brand:false,inverse:false,danger:false,warning:false,success:false,info:false,debossTop:false,bevelTop:false,bevelBottom:false};
+const{resolvePropCollision: resolvePropCollision$1}=propsUtil;const Card=({children,size="m",outlined=null,elevated=null,bezel=true,fitWidth=false,primary=false,secondary=false,tertiary=false,brand=false,inverse=false,danger=false,warning=false,success=false,info=false,debossTop=false,bevelTop=false,bevelBottom=false,...props})=>{sendStyles(stylesheet$1);const{style,className,...rest}=props;if(elevated===null&&outlined===null){elevated=true;}const{collision,value:intent}=resolvePropCollision$1({primary,danger,info,success,warning,brand,secondary,tertiary,inverse},"primary");if(collision){console.warn(`Card: Multiple intents detected. Falling back to "primary"`);}const cardClasses=cn(commonStyles.Base,styles$1.Card,{[styles$1[resolveSizeProp(size)]]:bezel},{[styles$1.outlined]:outlined},{[commonStyles.elevated]:elevated},{[styles$1.fitWidth]:fitWidth},{[commonStyles.bezelless]:!bezel},{[commonStyles.debossTop]:debossTop},{[commonStyles.bevelTop]:bevelTop},{[commonStyles.bevelBottom]:bevelBottom},styles$1[intent]);return React.createElement("div",_extends({},rest,{className:cardClasses}),children)};Card.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["xs","s","m","l"]),outlined:PropTypes.oneOfType([PropTypes.bool,PropTypes.null]),elevated:PropTypes.oneOfType([PropTypes.bool,PropTypes.null]),bezel:PropTypes.bool,fitWidth:PropTypes.bool,primary:PropTypes.bool,secondary:PropTypes.bool,tertiary:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool,danger:PropTypes.bool,warning:PropTypes.bool,success:PropTypes.bool,info:PropTypes.bool,debossTop:PropTypes.bool,bevelTop:PropTypes.bool,bevelBottom:PropTypes.bool};Card.defaultProps={size:"m",outlined:null,elevated:null,bezel:true,fitWidth:false,primary:false,secondary:false,tertiary:false,brand:false,inverse:false,danger:false,warning:false,success:false,info:false,debossTop:false,bevelTop:false,bevelBottom:false};
 
-var css_248z = "/* Remove default style of button in the browser */\nbutton {\n  all: unset;\n}\n\n.Tile__jAWCN {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n  --border-color: transparent;\n  --border-width: 0px;\n  --roundness: var(--roundness-container-M, 1rem);\n\n  background: var(--surface, #ffffff);\n  color: var(--content-color);\n  border: var(--border-width) solid var(--border-color);\n  padding: var(--padding);\n  text-decoration: none;\n  border-radius: var(--roundness);\n}\n\n.outlined__OzZPW {\n  --border-width: 1px;\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__qfsYx {\n  --padding: calc(1rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__YK8ZO {\n  --padding: calc(1.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Np7Ju {\n  --padding: calc(2rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__QzLVU {\n  --padding: calc(2.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n/* States */\n\n.Tile__jAWCN:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Tile__jAWCN:focus-visible:not(.disabled__esyur) {\n  outline: var(--focus-outline, 2px solid) var(--interactive-focus, #86afff);\n}\n\n.Tile__jAWCN:active:not(.disabled__esyur) {\n  outline: none;\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface: var(--interactive-surface-primary-active, #d6dce7);\n  --border-width: 1px;\n}\n\n/* Primary */\n\n.primary__pmd4W {\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n}\n\n/* Secondary */\n\n.secondary__0QWTZ {\n  --surface: var(--interactive-surface-secondary-default, #e9eef3);\n}\n\n.secondary__0QWTZ:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-hover, #f4f7f9);\n}\n\n.secondary__0QWTZ:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-active, #c6cdd4);\n}\n\n/* Success */\n\n.success__mOYgq {\n  --surface: var(--interactive-support-success-secondary-default, #e8fbf7);\n}\n\n.success__mOYgq:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-hover, #f1fdfa);\n}\n\n.success__mOYgq:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-active, #b0f2e9);\n}\n\n/* Danger */\n\n.danger__ENZ2v {\n  --surface: var(--interactive-support-danger-secondary-default, #fee1e7);\n}\n\n.danger__ENZ2v:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-hover, #fff1f4);\n}\n\n.danger__ENZ2v:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-active, #ffc6d0);\n}\n\n/* Warning */\n\n.warning__1MrIg {\n  --surface: var(--interactive-support-warning-secondary-default, #fff5e3);\n}\n\n.warning__1MrIg:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-hover, #fff9ee);\n}\n\n.warning__1MrIg:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-active, #ffe28f);\n}\n\n/* Info */\n\n.info__nfjlt {\n  --surface: var(--interactive-support-info-secondary-default, #e3edff);\n}\n\n.info__nfjlt:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-hover, #eef4ff);\n}\n\n.info__nfjlt:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-active, #b2c1fe);\n}\n\n/* Brand */\n\n.brand__na5I2 {\n  --surface: var(--interactive-surface-brand-primary-default, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-hover, #33bb42);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-active, #067817);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n/* Inverse */\n\n.inverse__dPfLT {\n  --surface: var(--interactive-surface-inverse-primary-default, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-hover, #444651);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-active, #0a0d1d);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.disabled__esyur {\n  --surface: var(--interactive-surface-disabled, #f1f3f6);\n  --content-color: var(--content-disabled, #9a9eaa);\n}\n\n.selected__hfnbY {\n  --surface: var(--interactive-highlighted-primary, #e3edff);\n  --border-color: var(--interactive-active, #1c3abb);\n  --border-width: 1px;\n  --content-color: var(--content-primary, #2d2e34);\n}\n\n.invalid__bYvaD {\n  --border-color: var(--interactive-invalid, #ec4453);\n  --border-width: 1px;\n}\n";
-var styles = {"Tile":"Tile__jAWCN","outlined":"outlined__OzZPW","xs":"xs__qfsYx","s":"s__YK8ZO","m":"m__Np7Ju","l":"l__QzLVU","disabled":"disabled__esyur","primary":"primary__pmd4W","secondary":"secondary__0QWTZ","success":"success__mOYgq","danger":"danger__ENZ2v","warning":"warning__1MrIg","info":"info__nfjlt","brand":"brand__na5I2","inverse":"inverse__dPfLT","selected":"selected__hfnbY","invalid":"invalid__bYvaD"};
-var stylesheet="/* Remove default style of button in the browser */\nbutton {\n  all: unset;\n}\n\n.Tile__jAWCN {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n  --border-color: transparent;\n  --border-width: 0px;\n  --roundness: var(--roundness-container-M, 1rem);\n\n  background: var(--surface, #ffffff);\n  color: var(--content-color);\n  border: var(--border-width) solid var(--border-color);\n  padding: var(--padding);\n  text-decoration: none;\n  border-radius: var(--roundness);\n}\n\n.outlined__OzZPW {\n  --border-width: 1px;\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__qfsYx {\n  --padding: calc(1rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__YK8ZO {\n  --padding: calc(1.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Np7Ju {\n  --padding: calc(2rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__QzLVU {\n  --padding: calc(2.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n/* States */\n\n.Tile__jAWCN:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Tile__jAWCN:focus-visible:not(.disabled__esyur) {\n  outline: var(--focus-outline, 2px solid) var(--interactive-focus, #86afff);\n}\n\n.Tile__jAWCN:active:not(.disabled__esyur) {\n  outline: none;\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface: var(--interactive-surface-primary-active, #d6dce7);\n  --border-width: 1px;\n}\n\n/* Primary */\n\n.primary__pmd4W {\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n}\n\n/* Secondary */\n\n.secondary__0QWTZ {\n  --surface: var(--interactive-surface-secondary-default, #e9eef3);\n}\n\n.secondary__0QWTZ:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-hover, #f4f7f9);\n}\n\n.secondary__0QWTZ:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-active, #c6cdd4);\n}\n\n/* Success */\n\n.success__mOYgq {\n  --surface: var(--interactive-support-success-secondary-default, #e8fbf7);\n}\n\n.success__mOYgq:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-hover, #f1fdfa);\n}\n\n.success__mOYgq:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-active, #b0f2e9);\n}\n\n/* Danger */\n\n.danger__ENZ2v {\n  --surface: var(--interactive-support-danger-secondary-default, #fee1e7);\n}\n\n.danger__ENZ2v:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-hover, #fff1f4);\n}\n\n.danger__ENZ2v:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-active, #ffc6d0);\n}\n\n/* Warning */\n\n.warning__1MrIg {\n  --surface: var(--interactive-support-warning-secondary-default, #fff5e3);\n}\n\n.warning__1MrIg:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-hover, #fff9ee);\n}\n\n.warning__1MrIg:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-active, #ffe28f);\n}\n\n/* Info */\n\n.info__nfjlt {\n  --surface: var(--interactive-support-info-secondary-default, #e3edff);\n}\n\n.info__nfjlt:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-hover, #eef4ff);\n}\n\n.info__nfjlt:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-active, #b2c1fe);\n}\n\n/* Brand */\n\n.brand__na5I2 {\n  --surface: var(--interactive-surface-brand-primary-default, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-hover, #33bb42);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-active, #067817);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n/* Inverse */\n\n.inverse__dPfLT {\n  --surface: var(--interactive-surface-inverse-primary-default, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-hover, #444651);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-active, #0a0d1d);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.disabled__esyur {\n  --surface: var(--interactive-surface-disabled, #f1f3f6);\n  --content-color: var(--content-disabled, #9a9eaa);\n}\n\n.selected__hfnbY {\n  --surface: var(--interactive-highlighted-primary, #e3edff);\n  --border-color: var(--interactive-active, #1c3abb);\n  --border-width: 1px;\n  --content-color: var(--content-primary, #2d2e34);\n}\n\n.invalid__bYvaD {\n  --border-color: var(--interactive-invalid, #ec4453);\n  --border-width: 1px;\n}\n";
+var css_248z = "/* Remove default style of button in the browser */\nbutton {\n  all: unset;\n}\n\n.Tile__jAWCN {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n  --border-color: transparent;\n  --border-width: 0px;\n  --roundness: var(--roundness-container-M, 1rem);\n  --width: 100%;\n\n  background: var(--surface, #ffffff);\n  color: var(--content-color);\n  border: var(--border-width) solid var(--border-color);\n  padding: var(--padding);\n  text-decoration: none;\n  border-radius: var(--roundness);\n  box-sizing: border-box;\n  width: var(--width);\n}\n\n.fitWidth__ky-5l {\n  --width: fit-content;\n}\n\n.outlined__OzZPW {\n  --border-width: 1px;\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__qfsYx {\n  --padding: calc(1rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__YK8ZO {\n  --padding: calc(1.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Np7Ju {\n  --padding: calc(2rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__QzLVU {\n  --padding: calc(2.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n/* States */\n\n.Tile__jAWCN:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Tile__jAWCN:focus-visible:not(.disabled__esyur) {\n  outline: var(--focus-outline, 2px solid) var(--interactive-focus, #86afff);\n}\n\n.Tile__jAWCN:active:not(.disabled__esyur) {\n  outline: none;\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface: var(--interactive-surface-primary-active, #d6dce7);\n  --border-width: 1px;\n}\n\n/* Primary */\n\n.primary__pmd4W {\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n}\n\n/* Secondary */\n\n.secondary__0QWTZ {\n  --surface: var(--interactive-surface-secondary-default, #e9eef3);\n}\n\n.secondary__0QWTZ:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-hover, #f4f7f9);\n}\n\n.secondary__0QWTZ:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-active, #c6cdd4);\n}\n\n/* Success */\n\n.success__mOYgq {\n  --surface: var(--interactive-support-success-secondary-default, #e8fbf7);\n}\n\n.success__mOYgq:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-hover, #f1fdfa);\n}\n\n.success__mOYgq:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-active, #b0f2e9);\n}\n\n/* Danger */\n\n.danger__ENZ2v {\n  --surface: var(--interactive-support-danger-secondary-default, #fee1e7);\n}\n\n.danger__ENZ2v:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-hover, #fff1f4);\n}\n\n.danger__ENZ2v:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-active, #ffc6d0);\n}\n\n/* Warning */\n\n.warning__1MrIg {\n  --surface: var(--interactive-support-warning-secondary-default, #fff5e3);\n}\n\n.warning__1MrIg:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-hover, #fff9ee);\n}\n\n.warning__1MrIg:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-active, #ffe28f);\n}\n\n/* Info */\n\n.info__nfjlt {\n  --surface: var(--interactive-support-info-secondary-default, #e3edff);\n}\n\n.info__nfjlt:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-hover, #eef4ff);\n}\n\n.info__nfjlt:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-active, #b2c1fe);\n}\n\n/* Brand */\n\n.brand__na5I2 {\n  --surface: var(--interactive-surface-brand-primary-default, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-hover, #33bb42);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-active, #067817);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n/* Inverse */\n\n.inverse__dPfLT {\n  --surface: var(--interactive-surface-inverse-primary-default, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-hover, #444651);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-active, #0a0d1d);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.disabled__esyur {\n  --surface: var(--interactive-surface-disabled, #f1f3f6);\n  --content-color: var(--content-disabled, #9a9eaa);\n}\n\n.selected__hfnbY {\n  --surface: var(--interactive-highlighted-primary, #e3edff);\n  --border-color: var(--interactive-active, #1c3abb);\n  --border-width: 1px;\n  --content-color: var(--content-primary, #2d2e34);\n}\n\n.invalid__bYvaD {\n  --border-color: var(--interactive-invalid, #ec4453);\n  --border-width: 1px;\n}\n";
+var styles = {"Tile":"Tile__jAWCN","fitWidth":"fitWidth__ky-5l","outlined":"outlined__OzZPW","xs":"xs__qfsYx","s":"s__YK8ZO","m":"m__Np7Ju","l":"l__QzLVU","disabled":"disabled__esyur","primary":"primary__pmd4W","secondary":"secondary__0QWTZ","success":"success__mOYgq","danger":"danger__ENZ2v","warning":"warning__1MrIg","info":"info__nfjlt","brand":"brand__na5I2","inverse":"inverse__dPfLT","selected":"selected__hfnbY","invalid":"invalid__bYvaD"};
+var stylesheet="/* Remove default style of button in the browser */\nbutton {\n  all: unset;\n}\n\n.Tile__jAWCN {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n  --border-color: transparent;\n  --border-width: 0px;\n  --roundness: var(--roundness-container-M, 1rem);\n  --width: 100%;\n\n  background: var(--surface, #ffffff);\n  color: var(--content-color);\n  border: var(--border-width) solid var(--border-color);\n  padding: var(--padding);\n  text-decoration: none;\n  border-radius: var(--roundness);\n  box-sizing: border-box;\n  width: var(--width);\n}\n\n.fitWidth__ky-5l {\n  --width: fit-content;\n}\n\n.outlined__OzZPW {\n  --border-width: 1px;\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.xs__qfsYx {\n  --padding: calc(1rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.s__YK8ZO {\n  --padding: calc(1.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-S, 0.5rem);\n}\n\n.m__Np7Ju {\n  --padding: calc(2rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-M, 1rem);\n}\n\n.l__QzLVU {\n  --padding: calc(2.5rem + calc(1px - var(--border-width)));\n  --roundness: var(--roundness-container-L, 1.5rem);\n}\n\n/* States */\n\n.Tile__jAWCN:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Tile__jAWCN:focus-visible:not(.disabled__esyur) {\n  outline: var(--focus-outline, 2px solid) var(--interactive-focus, #86afff);\n}\n\n.Tile__jAWCN:active:not(.disabled__esyur) {\n  outline: none;\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface: var(--interactive-surface-primary-active, #d6dce7);\n  --border-width: 1px;\n}\n\n/* Primary */\n\n.primary__pmd4W {\n  --surface: var(--interactive-surface-primary-default, #ffffff);\n}\n\n/* Secondary */\n\n.secondary__0QWTZ {\n  --surface: var(--interactive-surface-secondary-default, #e9eef3);\n}\n\n.secondary__0QWTZ:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-hover, #f4f7f9);\n}\n\n.secondary__0QWTZ:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-secondary-active, #c6cdd4);\n}\n\n/* Success */\n\n.success__mOYgq {\n  --surface: var(--interactive-support-success-secondary-default, #e8fbf7);\n}\n\n.success__mOYgq:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-hover, #f1fdfa);\n}\n\n.success__mOYgq:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-success-secondary-active, #b0f2e9);\n}\n\n/* Danger */\n\n.danger__ENZ2v {\n  --surface: var(--interactive-support-danger-secondary-default, #fee1e7);\n}\n\n.danger__ENZ2v:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-hover, #fff1f4);\n}\n\n.danger__ENZ2v:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-danger-secondary-active, #ffc6d0);\n}\n\n/* Warning */\n\n.warning__1MrIg {\n  --surface: var(--interactive-support-warning-secondary-default, #fff5e3);\n}\n\n.warning__1MrIg:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-hover, #fff9ee);\n}\n\n.warning__1MrIg:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-warning-secondary-active, #ffe28f);\n}\n\n/* Info */\n\n.info__nfjlt {\n  --surface: var(--interactive-support-info-secondary-default, #e3edff);\n}\n\n.info__nfjlt:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-hover, #eef4ff);\n}\n\n.info__nfjlt:active:not(.disabled__esyur) {\n  --surface: var(--interactive-support-info-secondary-active, #b2c1fe);\n}\n\n/* Brand */\n\n.brand__na5I2 {\n  --surface: var(--interactive-surface-brand-primary-default, #00aa13);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-hover, #33bb42);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n.brand__na5I2:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-brand-primary-active, #067817);\n  --content-color: var(--content-on-brand, #ffffff);\n}\n\n/* Inverse */\n\n.inverse__dPfLT {\n  --surface: var(--interactive-surface-inverse-primary-default, #383942);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:hover:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-hover, #444651);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.inverse__dPfLT:active:not(.disabled__esyur) {\n  --surface: var(--interactive-surface-inverse-primary-active, #0a0d1d);\n  --content-color: var(--content-on-inverse, #ffffff);\n}\n\n.disabled__esyur {\n  --surface: var(--interactive-surface-disabled, #f1f3f6);\n  --content-color: var(--content-disabled, #9a9eaa);\n}\n\n.selected__hfnbY {\n  --surface: var(--interactive-highlighted-primary, #e3edff);\n  --border-color: var(--interactive-active, #1c3abb);\n  --border-width: 1px;\n  --content-color: var(--content-primary, #2d2e34);\n}\n\n.invalid__bYvaD {\n  --border-color: var(--interactive-invalid, #ec4453);\n  --border-width: 1px;\n}\n";
 styleInject(css_248z);
 
-const{resolvePropCollision}=propsUtil;const Tile=({children,size="m",outlined=false,elevated=true,bezel=true,fitWidth=false,selected=false,disabled=false,primary=false,secondary=false,brand=false,inverse=false,danger=false,warning=false,success=false,info=false,invalid=false,debossTop=false,bevelTop=false,bevelBottom=false,as:Tiles="button",asProps={},...props})=>{sendStyles(stylesheet);const{style,className,...rest}=props;const{collision,value:intent}=resolvePropCollision({primary,danger,info,success,warning,brand,secondary,inverse},"primary");if(collision){console.warn(`Card: Multiple intents detected. Falling back to "primary"`);}const tileClasses=cn(commonStyles.Base,styles.Tile,styles[intent],{[commonStyles.elevated]:elevated},{[commonStyles.fitWidth]:fitWidth},{[commonStyles.bezelless]:!bezel},{[commonStyles.debossTop]:debossTop},{[commonStyles.bevelTop]:bevelTop},{[commonStyles.bevelBottom]:bevelBottom},{[styles[resolveSizeProp(size)]]:bezel},{[styles.outlined]:outlined},{[styles.selected]:selected&&!disabled},{[styles.disabled]:disabled},{[styles.invalid]:invalid});return React.createElement(Tiles,_extends({},rest,asProps,{className:tileClasses,tabIndex:disabled?-1:0,"aria-selected":selected,disabled:disabled}),children)};Tile.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["xs","s","m","l"]),outlined:PropTypes.bool,elevated:PropTypes.bool,bezel:PropTypes.bool,fitWidth:PropTypes.bool,selected:PropTypes.bool,disabled:PropTypes.bool,primary:PropTypes.bool,secondary:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool,danger:PropTypes.bool,warning:PropTypes.bool,success:PropTypes.bool,info:PropTypes.bool,invalid:PropTypes.bool,debossTop:PropTypes.bool,bevelTop:PropTypes.bool,bevelBottom:PropTypes.bool,as:PropTypes.elementType,asProps:PropTypes.object};
+const{resolvePropCollision}=propsUtil;const Tile=({children,size="m",outlined=false,elevated=true,bezel=true,fitWidth=false,selected=false,disabled=false,primary=false,secondary=false,brand=false,inverse=false,danger=false,warning=false,success=false,info=false,invalid=false,debossTop=false,bevelTop=false,bevelBottom=false,as:Tiles="button",asProps={},...props})=>{sendStyles(stylesheet);const{style,className,...rest}=props;const{collision,value:intent}=resolvePropCollision({primary,danger,info,success,warning,brand,secondary,inverse},"primary");if(collision){console.warn(`Card: Multiple intents detected. Falling back to "primary"`);}const tileClasses=cn(commonStyles.Base,styles.Tile,styles[intent],{[commonStyles.elevated]:elevated},{[styles.fitWidth]:fitWidth},{[commonStyles.bezelless]:!bezel},{[commonStyles.debossTop]:debossTop},{[commonStyles.bevelTop]:bevelTop},{[commonStyles.bevelBottom]:bevelBottom},{[styles[resolveSizeProp(size)]]:bezel},{[styles.outlined]:outlined},{[styles.selected]:selected&&!disabled},{[styles.disabled]:disabled},{[styles.invalid]:invalid});return React.createElement(Tiles,_extends({},rest,asProps,{className:tileClasses,tabIndex:disabled?-1:0,"aria-selected":selected,disabled:disabled}),children)};Tile.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["xs","s","m","l"]),outlined:PropTypes.bool,elevated:PropTypes.bool,bezel:PropTypes.bool,fitWidth:PropTypes.bool,selected:PropTypes.bool,disabled:PropTypes.bool,primary:PropTypes.bool,secondary:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool,danger:PropTypes.bool,warning:PropTypes.bool,success:PropTypes.bool,info:PropTypes.bool,invalid:PropTypes.bool,debossTop:PropTypes.bool,bevelTop:PropTypes.bool,bevelBottom:PropTypes.bool,as:PropTypes.elementType,asProps:PropTypes.object};
 
 export { Card, Tile };

package.json

 {
   "name": "@asphalt-react/card",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "Card",
@@ -41,8 +41,8 @@ "keywords": [
   "devDependencies": {
-    "@asphalt-react/build": "^2.10.0",
+    "@asphalt-react/build": "^2.12.0",
     "@testing-library/react": "^11.2.7"
   },
   "dependencies": {
-    "@asphalt-react/context": "^2.10.0",
-    "@asphalt-react/helper": "^2.10.0",
+    "@asphalt-react/context": "^2.12.0",
+    "@asphalt-react/helper": "^2.12.0",
     "classnames": "^2.5.1",
@@ -52,3 +52,3 @@ "prop-types": "^15.8.1"
   "license": "UNLICENSED",
-  "gitHead": "ccb568000f6ca32f5a052d9f2a1b9f74aab38bd5"
+  "gitHead": "ef3f211cc4e921b4345777317bb3bfbf3b12cfa5"
 }

New alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

New author

Supply chain risk

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

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54479

1.25%

Lines of code

413

0.49%

Dependency changes

• Updated

  @asphalt-react/context@^2.12.0

• Updated

  @asphalt-react/helper@^2.12.0