@asphalt-react/card - npm Package Compare versions

Comparing version 2.9.0 to 2.10.0

dist/index.cjs

@@ -19,3 +19,3 @@ 'use strict';
 
-const resolveSizeProp=size=>{const supportedSizes=["s","m","l"];return supportedSizes.includes(size)?size:"m"};
+const resolveSizeProp=size=>{const supportedSizes=["xs","s","m","l"];return supportedSizes.includes(size)?size:"m"};
 
@@ -49,9 +49,9 @@ function styleInject(css, ref) {
 
-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.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";
-var styles = {"Card":"Card__NSU-L","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"};
-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.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";
+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";
 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,...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[intent]);return React.createElement("div",_extends({},rest,{className:cardClasses}),children)};Card.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["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};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};
+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};
 
 exports.Card = Card;

dist/index.d.ts

@@ -9,5 +9,5 @@ type Override<T, U> = Omit<U, keyof T> & T
   /**
-   * Controls size of card. Possible values are "s", "m" & "l" for small, medium & large respectively.
+   * Controls size of card. Possible values are "xs", "s", "m" & "l" for extra-small, small, medium & large respectively.
    */
-  size?: "s" | "m" | "l"
+  size?: "xs" | "s" | "m" | "l"
   /**
@@ -65,2 +65,16 @@ * Adds outline around card.
   info?: 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
 }
@@ -67,0 +81,0 @@

dist/index.js

@@ -17,3 +17,3 @@ import React from 'react';
 
-const resolveSizeProp=size=>{const supportedSizes=["s","m","l"];return supportedSizes.includes(size)?size:"m"};
+const resolveSizeProp=size=>{const supportedSizes=["xs","s","m","l"];return supportedSizes.includes(size)?size:"m"};
 
@@ -47,9 +47,9 @@ function styleInject(css, ref) {
 
-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.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";
-var styles = {"Card":"Card__NSU-L","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"};
-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.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";
+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";
 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,...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[intent]);return React.createElement("div",_extends({},rest,{className:cardClasses}),children)};Card.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["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};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};
+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};
 
 export { Card };

package.json

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

README.md

@@ -70,3 +70,3 @@ # Card
 
-Controls size of card. Possible values are "s", "m" & "l" for small, medium & large respectively.
+Controls size of card. Possible values are "xs", "s", "m" & "l" for extra-small, small, medium & large respectively.
 
@@ -180,1 +180,25 @@ | 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   |

New 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

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

Total package byte prevSize

22035

15.21%

Lines of code

214

13.23%

Number of lines in readme file

203

13.41%

Dependency changes

• Updated

  @asphalt-react/context@^2.10.0

• Updated

  @asphalt-react/helper@^2.10.0