@asphalt-react/card - npm Package Compare versions

Comparing version 2.10.0 to 2.11.0

dist/index.cjs

@@ -48,9 +48,21 @@ 'use strict';
 
-var css_248z = ".Card__NSU-L {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--static-surface-primary, #ffffff);\n\n  background-color: var(--surface, #ffffff);\n  color: var(--content-color);\n  border-radius: var(--roundness-container-M, 1rem);\n  --border-color: transparent;\n  border: 1px solid var(--border-color);\n  padding: var(--padding);\n  width: auto;\n  height: auto;\n}\n\n.xs__cFUAA {\n  --padding: 1rem;\n}\n\n.s__AhTyM {\n  --padding: 1.5rem;\n}\n\n.m__Q7ZtD {\n  --padding: 2rem;\n}\n\n.l__2rGke {\n  --padding: 2.5rem;\n}\n\n.elevated__X5zhD {\n  box-shadow: var(--shadow-mid, 0px 4px 20px 0px #1e2c6a1a);\n}\n\n.outlined__e3x-V {\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.fitWidth__cEBDj {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.bezelless__vuOMp {\n  padding: 0;\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\n.debossTop__5TsBW {\n  box-shadow: inset var(--shadow-deboss-mid-top, 0px 4px 4px 0px #1e2c6a0a);\n}\n\n.bevelTop__xMaOf {\n  box-shadow: inset var(--shadow-emboss-mid-top, 0px 2px 1px 0px #ffffffb3);\n}\n\n.bevelBottom__7MAP4 {\n  box-shadow: var(--shadow-emboss-mid-bottom, 0px 2px 1px 0px #ffffffb3);\n}\n";
-var styles = {"Card":"Card__NSU-L","xs":"xs__cFUAA","s":"s__AhTyM","m":"m__Q7ZtD","l":"l__2rGke","elevated":"elevated__X5zhD","outlined":"outlined__e3x-V","fitWidth":"fitWidth__cEBDj","bezelless":"bezelless__vuOMp","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","debossTop":"debossTop__5TsBW","bevelTop":"bevelTop__xMaOf","bevelBottom":"bevelBottom__7MAP4"};
-var stylesheet=".Card__NSU-L {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--static-surface-primary, #ffffff);\n\n  background-color: var(--surface, #ffffff);\n  color: var(--content-color);\n  border-radius: var(--roundness-container-M, 1rem);\n  --border-color: transparent;\n  border: 1px solid var(--border-color);\n  padding: var(--padding);\n  width: auto;\n  height: auto;\n}\n\n.xs__cFUAA {\n  --padding: 1rem;\n}\n\n.s__AhTyM {\n  --padding: 1.5rem;\n}\n\n.m__Q7ZtD {\n  --padding: 2rem;\n}\n\n.l__2rGke {\n  --padding: 2.5rem;\n}\n\n.elevated__X5zhD {\n  box-shadow: var(--shadow-mid, 0px 4px 20px 0px #1e2c6a1a);\n}\n\n.outlined__e3x-V {\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.fitWidth__cEBDj {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.bezelless__vuOMp {\n  padding: 0;\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\n.debossTop__5TsBW {\n  box-shadow: inset var(--shadow-deboss-mid-top, 0px 4px 4px 0px #1e2c6a0a);\n}\n\n.bevelTop__xMaOf {\n  box-shadow: inset var(--shadow-emboss-mid-top, 0px 2px 1px 0px #ffffffb3);\n}\n\n.bevelBottom__7MAP4 {\n  box-shadow: var(--shadow-emboss-mid-bottom, 0px 2px 1px 0px #ffffffb3);\n}\n";
+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"};
+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";
+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};
+
+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";
 styleInject(css_248z);
 
-const{resolvePropCollision}=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);const{style,className,...rest}=props;if(elevated===null&&outlined===null){elevated=true;}const{collision,value:intent}=resolvePropCollision({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(styles.Card,styles[resolveSizeProp(size)],{[styles.outlined]:outlined},{[styles.elevated]:elevated},{[styles.fitWidth]:fitWidth},{[styles.bezelless]:!bezel},{[styles.debossTop]:debossTop},{[styles.bevelTop]:bevelTop},{[styles.bevelBottom]:bevelBottom},styles[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}=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};
 
 exports.Card = Card;
+exports.Tile = Tile;

dist/index.d.ts

@@ -84,2 +84,98 @@ type Override<T, U> = Omit<U, keyof T> & T
 
-export { Card, type CardProps };
+interface TileProps {
+  /**
+   * Node for the content inside the Tile.
+   */
+  children: React.ReactNode
+  /**
+   * Controls the size of the Tile. Possible values: `"xs"` (extra-small), `"s"` (small), `"m"` (medium), `"l"` (large).
+   */
+  size?: "xs" | "s" | "m" | "l"
+  /**
+   * Adds an outline around the Tile.
+   */
+  outlined?: boolean
+  /**
+   * Elevates the Tile from the container surface.
+   */
+  elevated?: boolean
+  /**
+   * Adds spacing inside the Tile.
+   */
+  bezel?: boolean
+  /**
+   * Adjusts the Tile width based on its content.
+   */
+  fitWidth?: boolean
+  /**
+   * Indicates whether the Tile is currently selected.
+   *
+   */
+  selected?: boolean
+  /**
+   * Disables interaction with the Tile.
+   */
+  disabled?: boolean
+  /**
+   * Applies primary intent styling.
+   */
+  primary?: boolean
+  /**
+   * Applies secondary intent styling.
+   */
+  secondary?: boolean
+  /**
+   * Applies brand intent styling.
+   */
+  brand?: boolean
+  /**
+   * Applies inverse intent styling (e.g., for dark backgrounds).
+   */
+  inverse?: boolean
+  /**
+   * Applies danger intent styling, usually used for destructive actions.
+   */
+  danger?: boolean
+  /**
+   * Applies warning intent styling, used for cautionary actions or alerts.
+   */
+  warning?: boolean
+  /**
+   * Applies success intent styling, typically used for positive actions.
+   */
+  success?: boolean
+  /**
+   * Applies info intent styling, used for informational context.
+   */
+  info?: boolean
+  /**
+   * Applies invalid styles.
+   */
+  invalid?: boolean
+  /**
+   * Applies deboss top effect to the card.
+   */
+  debossTop?: boolean
+  /**
+   * Adds a bevel top effect to the card.
+   */
+  bevelTop?: boolean
+  /**
+   * Adds a bevel bottom effect to the card.
+   */
+  bevelBottom?: boolean
+  /**
+   * Html element/React component to render as container.
+   */
+  as?: React.ElementType
+  /**
+   * Accepts props & attributes for the link element. You can pass attributes like `onKeyPress`, `href`.
+   */
+  asProps?: object
+}
+
+declare function Tile(
+  props: Override<TileProps, React.ButtonHTMLAttributes<HTMLButtonElement>>
+): JSX.Element
+
+export { Card, type CardProps, Tile, type TileProps };

dist/index.js

@@ -46,9 +46,20 @@ import React from 'react';
 
-var css_248z = ".Card__NSU-L {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--static-surface-primary, #ffffff);\n\n  background-color: var(--surface, #ffffff);\n  color: var(--content-color);\n  border-radius: var(--roundness-container-M, 1rem);\n  --border-color: transparent;\n  border: 1px solid var(--border-color);\n  padding: var(--padding);\n  width: auto;\n  height: auto;\n}\n\n.xs__cFUAA {\n  --padding: 1rem;\n}\n\n.s__AhTyM {\n  --padding: 1.5rem;\n}\n\n.m__Q7ZtD {\n  --padding: 2rem;\n}\n\n.l__2rGke {\n  --padding: 2.5rem;\n}\n\n.elevated__X5zhD {\n  box-shadow: var(--shadow-mid, 0px 4px 20px 0px #1e2c6a1a);\n}\n\n.outlined__e3x-V {\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.fitWidth__cEBDj {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.bezelless__vuOMp {\n  padding: 0;\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\n.debossTop__5TsBW {\n  box-shadow: inset var(--shadow-deboss-mid-top, 0px 4px 4px 0px #1e2c6a0a);\n}\n\n.bevelTop__xMaOf {\n  box-shadow: inset var(--shadow-emboss-mid-top, 0px 2px 1px 0px #ffffffb3);\n}\n\n.bevelBottom__7MAP4 {\n  box-shadow: var(--shadow-emboss-mid-bottom, 0px 2px 1px 0px #ffffffb3);\n}\n";
-var styles = {"Card":"Card__NSU-L","xs":"xs__cFUAA","s":"s__AhTyM","m":"m__Q7ZtD","l":"l__2rGke","elevated":"elevated__X5zhD","outlined":"outlined__e3x-V","fitWidth":"fitWidth__cEBDj","bezelless":"bezelless__vuOMp","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","debossTop":"debossTop__5TsBW","bevelTop":"bevelTop__xMaOf","bevelBottom":"bevelBottom__7MAP4"};
-var stylesheet=".Card__NSU-L {\n  --content-color: var(--content-primary, #2d2e34);\n  --surface: var(--static-surface-primary, #ffffff);\n\n  background-color: var(--surface, #ffffff);\n  color: var(--content-color);\n  border-radius: var(--roundness-container-M, 1rem);\n  --border-color: transparent;\n  border: 1px solid var(--border-color);\n  padding: var(--padding);\n  width: auto;\n  height: auto;\n}\n\n.xs__cFUAA {\n  --padding: 1rem;\n}\n\n.s__AhTyM {\n  --padding: 1.5rem;\n}\n\n.m__Q7ZtD {\n  --padding: 2rem;\n}\n\n.l__2rGke {\n  --padding: 2.5rem;\n}\n\n.elevated__X5zhD {\n  box-shadow: var(--shadow-mid, 0px 4px 20px 0px #1e2c6a1a);\n}\n\n.outlined__e3x-V {\n  --border-color: var(--static-border-secondary, #dce5f0);\n}\n\n.fitWidth__cEBDj {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.bezelless__vuOMp {\n  padding: 0;\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\n.debossTop__5TsBW {\n  box-shadow: inset var(--shadow-deboss-mid-top, 0px 4px 4px 0px #1e2c6a0a);\n}\n\n.bevelTop__xMaOf {\n  box-shadow: inset var(--shadow-emboss-mid-top, 0px 2px 1px 0px #ffffffb3);\n}\n\n.bevelBottom__7MAP4 {\n  box-shadow: var(--shadow-emboss-mid-bottom, 0px 2px 1px 0px #ffffffb3);\n}\n";
+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"};
+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";
+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};
+
+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";
 styleInject(css_248z);
 
-const{resolvePropCollision}=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);const{style,className,...rest}=props;if(elevated===null&&outlined===null){elevated=true;}const{collision,value:intent}=resolvePropCollision({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(styles.Card,styles[resolveSizeProp(size)],{[styles.outlined]:outlined},{[styles.elevated]:elevated},{[styles.fitWidth]:fitWidth},{[styles.bezelless]:!bezel},{[styles.debossTop]:debossTop},{[styles.bevelTop]:bevelTop},{[styles.bevelBottom]:bevelBottom},styles[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}=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};
 
-export { Card };
+export { Card, Tile };

package.json

 {
   "name": "@asphalt-react/card",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Card",
@@ -51,3 +51,3 @@ "keywords": [
   "license": "UNLICENSED",
-  "gitHead": "53674cc2fc8e635d6f1fbd0522984e755c948b4a"
+  "gitHead": "ccb568000f6ca32f5a052d9f2a1b9f74aab38bd5"
 }

README.md

@@ -36,2 +36,16 @@ # Card
 
+## Types
+
+1. Static Card
+
+Used for non-interactive or decorative layouts that display information only.
+
+2. Interactive Card (Tile)
+
+An interactive variant of the Card for actionable content such as selectable items, navigation entries, or toggleable options. It shares the same visual foundation as the Card but supports user interactions like click, selection, focus, and disabled states.
+
+Use the `as` prop to render the Tile as a button, link, or div. Avoid nesting other interactive elements (e.g., buttons, links, or form controls) inside the Tile to maintain accessibility.
+
+If you need to include interactive elements like a radio button or checkbox inside, use a div as the element instead.
+
 ## Supported intents
@@ -204,1 +218,183 @@
 | bool | false    | false   |
+
+# Tile
+
+[comment]: # "Tile Props"
+
+## Props
+
+### children
+
+Node for the content inside the Tile.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| node | true     | N/A     |
+
+### size
+
+Controls the size of the Tile. Possible values: `"xs"` (extra-small), `"s"` (small), `"m"` (medium), `"l"` (large).
+
+| type | required | default |
+| ---- | -------- | ------- |
+| enum | false    | "m"     |
+
+### outlined
+
+Adds an outline around the Tile.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### elevated
+
+Elevates the Tile from the container surface.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | true    |
+
+### bezel
+
+Adds spacing inside the Tile.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | true    |
+
+### fitWidth
+
+Adjusts the Tile width based on its content.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### selected
+
+Indicates whether the Tile is currently selected.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### disabled
+
+Disables interaction with the Tile.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### primary
+
+Applies primary intent styling.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### secondary
+
+Applies secondary intent styling.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### brand
+
+Applies brand intent styling.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### inverse
+
+Applies inverse intent styling (e.g., for dark backgrounds).
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### danger
+
+Applies danger intent styling, usually used for destructive actions.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### warning
+
+Applies warning intent styling, used for cautionary actions or alerts.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### success
+
+Applies success intent styling, typically used for positive actions.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### info
+
+Applies info intent styling, used for informational context.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### invalid
+
+Applies invalid styles.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### debossTop
+
+Applies deboss top effect to the card.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### bevelTop
+
+Adds a bevel top effect to the card.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### bevelBottom
+
+Adds a bevel bottom effect to the card.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### as
+
+Html element/React component to render as container.
+
+| type        | required | default  |
+| ----------- | -------- | -------- |
+| elementType | false    | "button" |
+
+### asProps
+
+Accepts props & attributes for the link element. You can pass attributes like `onKeyPress`, `href`.
+
+| type   | required | default |
+| ------ | -------- | ------- |
+| object | false    | {}      |

New alerts

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53809

144.2%

Lines of code

411

92.06%

Number of lines in readme file

399

96.55%

Worsened metrics

Number of low supply chain risk alerts

9

80%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes