@asphalt-react/card - npm Package Compare versions

Comparing version 2.12.2 to 2.13.0

dist/index.css

+.Base__wgmJa {
+  width: auto;
+  height: auto;
+}
+
+.elevated__T-gux {
+  box-shadow: var(--shadow-mid, 0px 4px 20px 0px #1e2c6a1a);
+}
+
+.bezelless__iKw4n {
+  --padding: 0;
+}
+
+.debossTop__dbsHX {
+  box-shadow: inset var(--shadow-deboss-mid-top, 0px 4px 4px 0px #1e2c6a0a);
+}
+
+.bevelTop__nXRoQ {
+  box-shadow: inset var(--shadow-emboss-mid-top, 0px 2px 1px 0px #ffffffb3);
+}
+
+.bevelBottom__74lDy {
+  box-shadow: var(--shadow-emboss-mid-bottom, 0px 2px 1px 0px #ffffffb3);
+}
+
+.Card__NSU-L {
+  --content-color: var(--content-primary, #2d2e34);
+  --surface: var(--static-surface-primary, #ffffff);
+  --border-color: transparent;
+  --roundness: var(--roundness-container-M, 1rem);
+
+  border: 1px solid var(--border-color);
+  background-color: var(--surface, #ffffff);
+  color: var(--content-color);
+  padding: var(--padding);
+  border-radius: var(--roundness);
+}
+
+.fitWidth__cEBDj {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.outlined__e3x-V {
+  --border-color: var(--static-border-secondary, #dce5f0);
+}
+
+.xs__cFUAA {
+  --padding: var(--space-container-M, 1rem);
+  --roundness: var(--roundness-container-S, 0.5rem);
+}
+
+.s__AhTyM {
+  --padding: var(--space-container-L, 1.5rem);
+  --roundness: var(--roundness-container-S, 0.5rem);
+}
+
+.m__Q7ZtD {
+  --padding: var(--space-container-XL, 2rem);
+  --roundness: var(--roundness-container-M, 1rem);
+}
+
+.l__2rGke {
+  --padding: var(--space-container-2XL, 2.5rem);
+  --roundness: var(--roundness-container-L, 1.5rem);
+}
+
+.primary__HgAhX {
+  --surface: var(--static-surface-primary, #ffffff);
+}
+
+.secondary__czH67 {
+  --surface: var(--static-surface-secondary, #f8f8fa);
+}
+
+.tertiary__lUp2E {
+  --surface: var(--static-surface-tertiary, #e8ebef);
+}
+
+.success__B0zv0 {
+  --surface: var(--static-support-success-secondary, #e8fbf7);
+}
+
+.danger__2ROwv {
+  --surface: var(--static-support-danger-secondary, #fee1e7);
+}
+
+.warning__-Dv69 {
+  --surface: var(--static-support-warning-secondary, #fff5e3);
+}
+
+.info__V3Wbk {
+  --surface: var(--static-support-info-secondary, #e3edff);
+}
+
+.brand__n5AaV {
+  --surface: var(--static-surface-brand, #00aa13);
+  --content-color: var(--content-on-brand, #ffffff);
+}
+
+.inverse__9JPdt {
+  --surface: var(--static-surface-inverse, #383942);
+  --content-color: var(--content-on-inverse, #ffffff);
+}
+
+.Tile__jAWCN {
+  --content-color: var(--content-primary, #2d2e34);
+  --surface: var(--interactive-surface-primary-default, #ffffff);
+  --border-color: transparent;
+  --border-width: 0px;
+  --roundness: var(--roundness-container-M, 1rem);
+  --width: 100%;
+
+  background: var(--surface, #ffffff);
+  color: var(--content-color);
+  border: var(--border-width) solid var(--border-color);
+  padding: var(--padding);
+  text-decoration: none;
+  border-radius: var(--roundness);
+  box-sizing: border-box;
+  width: var(--width);
+  /* Reset default HTML element styles to ensure consistent appearance across browsers */
+  text-align: inherit;
+  font: inherit;
+}
+
+.fitWidth__ky-5l {
+  --width: fit-content;
+}
+
+.outlined__OzZPW {
+  --border-width: 1px;
+  --border-color: var(--static-border-secondary, #dce5f0);
+}
+
+.xs__qfsYx {
+  --padding: calc(1rem + calc(1px - var(--border-width)));
+  --roundness: var(--roundness-container-S, 0.5rem);
+}
+
+.s__YK8ZO {
+  --padding: calc(1.5rem + calc(1px - var(--border-width)));
+  --roundness: var(--roundness-container-S, 0.5rem);
+}
+
+.m__Np7Ju {
+  --padding: calc(2rem + calc(1px - var(--border-width)));
+  --roundness: var(--roundness-container-M, 1rem);
+}
+
+.l__QzLVU {
+  --padding: calc(2.5rem + calc(1px - var(--border-width)));
+  --roundness: var(--roundness-container-L, 1.5rem);
+}
+
+/* States */
+
+@media (hover: hover) and (pointer: fine) {
+  .Tile__jAWCN:hover:not(.disabled__esyur) {
+    --surface: var(--interactive-surface-primary-hover, #f5f7fa);
+  }
+}
+
+.Tile__jAWCN:focus-visible:not(.disabled__esyur) {
+  outline: var(--focus-outline, 2px solid) var(--interactive-focus, #86afff);
+}
+
+.Tile__jAWCN:active:not(.disabled__esyur) {
+  outline: none;
+  --border-color: var(--interactive-active, #1c3abb);
+  --surface: var(--interactive-surface-primary-active, #d6dce7);
+  --border-width: 1px;
+}
+
+/* Primary */
+
+.primary__pmd4W {
+  --surface: var(--interactive-surface-primary-default, #ffffff);
+}
+
+/* Secondary */
+
+.secondary__0QWTZ {
+  --surface: var(--interactive-surface-secondary-default, #e9eef3);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .secondary__0QWTZ:hover:not(.disabled__esyur) {
+    --surface: var(--interactive-surface-secondary-hover, #f4f7f9);
+  }
+}
+
+.secondary__0QWTZ:active:not(.disabled__esyur) {
+  --surface: var(--interactive-surface-secondary-active, #c6cdd4);
+}
+
+/* Success */
+
+.success__mOYgq {
+  --surface: var(--interactive-support-success-secondary-default, #e8fbf7);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .success__mOYgq:hover:not(.disabled__esyur) {
+    --surface: var(--interactive-support-success-secondary-hover, #f1fdfa);
+  }
+}
+
+.success__mOYgq:active:not(.disabled__esyur) {
+  --surface: var(--interactive-support-success-secondary-active, #b0f2e9);
+}
+
+/* Danger */
+
+.danger__ENZ2v {
+  --surface: var(--interactive-support-danger-secondary-default, #fee1e7);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .danger__ENZ2v:hover:not(.disabled__esyur) {
+    --surface: var(--interactive-support-danger-secondary-hover, #fff1f4);
+  }
+}
+
+.danger__ENZ2v:active:not(.disabled__esyur) {
+  --surface: var(--interactive-support-danger-secondary-active, #ffc6d0);
+}
+
+/* Warning */
+
+.warning__1MrIg {
+  --surface: var(--interactive-support-warning-secondary-default, #fff5e3);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .warning__1MrIg:hover:not(.disabled__esyur) {
+    --surface: var(--interactive-support-warning-secondary-hover, #fff9ee);
+  }
+}
+
+.warning__1MrIg:active:not(.disabled__esyur) {
+  --surface: var(--interactive-support-warning-secondary-active, #ffe28f);
+}
+
+/* Info */
+
+.info__nfjlt {
+  --surface: var(--interactive-support-info-secondary-default, #e3edff);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .info__nfjlt:hover:not(.disabled__esyur) {
+    --surface: var(--interactive-support-info-secondary-hover, #eef4ff);
+  }
+}
+
+.info__nfjlt:active:not(.disabled__esyur) {
+  --surface: var(--interactive-support-info-secondary-active, #b2c1fe);
+}
+
+/* Brand */
+
+.brand__na5I2 {
+  --surface: var(--interactive-surface-brand-primary-default, #00aa13);
+  --content-color: var(--content-on-brand, #ffffff);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .brand__na5I2:hover:not(.disabled__esyur) {
+    --surface: var(--interactive-surface-brand-primary-hover, #33bb42);
+    --content-color: var(--content-on-brand, #ffffff);
+  }
+}
+
+.brand__na5I2:active:not(.disabled__esyur) {
+  --surface: var(--interactive-surface-brand-primary-active, #067817);
+  --content-color: var(--content-on-brand, #ffffff);
+}
+
+/* Inverse */
+
+.inverse__dPfLT {
+  --surface: var(--interactive-surface-inverse-primary-default, #383942);
+  --content-color: var(--content-on-inverse, #ffffff);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .inverse__dPfLT:hover:not(.disabled__esyur) {
+    --surface: var(--interactive-surface-inverse-primary-hover, #444651);
+    --content-color: var(--content-on-inverse, #ffffff);
+  }
+}
+
+.inverse__dPfLT:active:not(.disabled__esyur) {
+  --surface: var(--interactive-surface-inverse-primary-active, #0a0d1d);
+  --content-color: var(--content-on-inverse, #ffffff);
+}
+
+.disabled__esyur {
+  --surface: var(--interactive-surface-disabled, #f1f3f6);
+  --content-color: var(--content-disabled, #9a9eaa);
+}
+
+.selected__hfnbY {
+  --surface: var(--interactive-highlighted-primary, #e3edff);
+  --border-color: var(--interactive-active, #1c3abb);
+  --border-width: 1px;
+  --content-color: var(--content-primary, #2d2e34);
+}
+
+.invalid__bYvaD {
+  --border-color: var(--interactive-invalid, #ec4453);
+  --border-width: 1px;
+}

dist/index.cjs

@@ -0,1 +1,2 @@
+require("./index.css");
 'use strict';
@@ -6,3 +7,2 @@
 var cn = require('classnames');
-var context = require('@asphalt-react/context');
 var helper = require('@asphalt-react/helper');
@@ -22,48 +22,13 @@
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-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.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},{[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};
+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})=>{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 = ".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  /* Reset default HTML element styles to ensure consistent appearance across browsers */\n  text-align: inherit;\n  font: inherit;\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@media (hover: hover) and (pointer: fine) {\n  .Tile__jAWCN:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .secondary__0QWTZ:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-surface-secondary-hover, #f4f7f9);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .success__mOYgq:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-success-secondary-hover, #f1fdfa);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .danger__ENZ2v:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-danger-secondary-hover, #fff1f4);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .warning__1MrIg:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-warning-secondary-hover, #fff9ee);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .info__nfjlt:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-info-secondary-hover, #eef4ff);\n  }\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@media (hover: hover) and (pointer: fine) {\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\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@media (hover: hover) and (pointer: fine) {\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\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=".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  /* Reset default HTML element styles to ensure consistent appearance across browsers */\n  text-align: inherit;\n  font: inherit;\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@media (hover: hover) and (pointer: fine) {\n  .Tile__jAWCN:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .secondary__0QWTZ:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-surface-secondary-hover, #f4f7f9);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .success__mOYgq:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-success-secondary-hover, #f1fdfa);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .danger__ENZ2v:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-danger-secondary-hover, #fff1f4);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .warning__1MrIg:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-warning-secondary-hover, #fff9ee);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .info__nfjlt:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-info-secondary-hover, #eef4ff);\n  }\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@media (hover: hover) and (pointer: fine) {\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\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@media (hover: hover) and (pointer: fine) {\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\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},{[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};
+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})=>{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

@@ -0,5 +1,5 @@
+import "./index.css";
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import { sendStyles } from '@asphalt-react/context';
 import { propsUtil } from '@asphalt-react/helper';
@@ -19,47 +19,12 @@
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-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.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},{[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};
+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})=>{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 = ".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  /* Reset default HTML element styles to ensure consistent appearance across browsers */\n  text-align: inherit;\n  font: inherit;\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@media (hover: hover) and (pointer: fine) {\n  .Tile__jAWCN:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .secondary__0QWTZ:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-surface-secondary-hover, #f4f7f9);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .success__mOYgq:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-success-secondary-hover, #f1fdfa);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .danger__ENZ2v:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-danger-secondary-hover, #fff1f4);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .warning__1MrIg:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-warning-secondary-hover, #fff9ee);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .info__nfjlt:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-info-secondary-hover, #eef4ff);\n  }\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@media (hover: hover) and (pointer: fine) {\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\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@media (hover: hover) and (pointer: fine) {\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\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=".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  /* Reset default HTML element styles to ensure consistent appearance across browsers */\n  text-align: inherit;\n  font: inherit;\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@media (hover: hover) and (pointer: fine) {\n  .Tile__jAWCN:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .secondary__0QWTZ:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-surface-secondary-hover, #f4f7f9);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .success__mOYgq:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-success-secondary-hover, #f1fdfa);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .danger__ENZ2v:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-danger-secondary-hover, #fff1f4);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .warning__1MrIg:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-warning-secondary-hover, #fff9ee);\n  }\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@media (hover: hover) and (pointer: fine) {\n  .info__nfjlt:hover:not(.disabled__esyur) {\n    --surface: var(--interactive-support-info-secondary-hover, #eef4ff);\n  }\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@media (hover: hover) and (pointer: fine) {\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\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@media (hover: hover) and (pointer: fine) {\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\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},{[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};
+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})=>{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.12.2",
+  "version": "2.13.0",
   "description": "Card",
@@ -41,8 +41,7 @@ "keywords": [
   "devDependencies": {
-    "@asphalt-react/build": "^2.12.0",
+    "@asphalt-react/build": "^2.13.0",
     "@testing-library/react": "^11.2.7"
   },
   "dependencies": {
-    "@asphalt-react/context": "^2.12.0",
-    "@asphalt-react/helper": "^2.12.0",
+    "@asphalt-react/helper": "^2.13.0",
     "classnames": "^2.5.1",
@@ -52,3 +51,6 @@ "prop-types": "^15.8.1"
   "license": "UNLICENSED",
-  "gitHead": "37abc774b63d4cf0a1d699371d887524b1819a4d"
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "gitHead": "6238a81dad8246006beb0bea5148a283f34b22ed"
 }

New 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

Fixed alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

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

Dependency count

4

-20%

Number of package files

6

20%

Lines of code

496

18.94%

Number of low supply chain risk alerts

1

-88.89%

Worsened metrics

Total package byte prevSize

31437

-44.28%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• - Removed

  @asphalt-react/context@^2.12.0

• - Removed

  @asphalt-react/context@2.13.0
  (transitive)

• Updated

  @asphalt-react/helper@^2.13.0