@twilio-paste/badge - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

dist/index.debug.es.js

@@ -210,3 +210,3 @@ var __defProp = Object.defineProperty;
     borderRadius: "borderRadius30",
-    columnGap: "space10",
+    columnGap: "space20",
     display: "flex",
@@ -213,0 +213,0 @@ element,

dist/index.debug.js

@@ -233,3 +233,3 @@ var __create = Object.create;
     borderRadius: "borderRadius30",
-    columnGap: "space10",
+    columnGap: "space20",
     display: "flex",
@@ -236,0 +236,0 @@ element,

dist/index.es.js

@@ -1,1 +0,1 @@
-var __defProp=Object.defineProperty,__defProps=Object.defineProperties;var __getOwnPropDescs=Object.getOwnPropertyDescriptors;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};import*as React2 from"react";import*as PropTypes from"prop-types";import{Box,safelySpreadBoxProps}from"@twilio-paste/box";import{secureExternalLink}from"@twilio-paste/anchor";import{ErrorIcon}from"@twilio-paste/icons/esm/ErrorIcon";import*as React from"react";import{useUIDSeed}from"@twilio-paste/uid-library";var DEFAULT_ICON_SIZE="sizeIcon10",useResizeChildIcons=children=>{let seed=useUIDSeed();return Array.isArray(children)?React.Children.map(children,child=>{var _a,_b;return typeof child=="object"&&!Array.isArray(child)&&typeof((_a=child==null?void 0:child.type)==null?void 0:_a.displayName)=="string"&&((_b=child==null?void 0:child.type)==null?void 0:_b.displayName.includes("Icon"))?React.cloneElement(child,__spreadProps(__spreadValues({},child.props),{key:seed(child),size:DEFAULT_ICON_SIZE})):React.createElement(React.Fragment,{key:seed(child)},child)}):children};var badgeVariantStyles={success:{backgroundColor:"colorBackgroundSuccessWeakest",color:"colorTextSuccess"},error:{backgroundColor:"colorBackgroundErrorWeakest",color:"colorTextErrorStrong"},warning:{backgroundColor:"colorBackgroundWarningWeakest",color:"colorTextWarningStrong"},new:{backgroundColor:"colorBackgroundNew",color:"colorTextNew"},neutral:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral"},decorative10:{backgroundColor:"colorBackgroundDecorative10Weakest",color:"colorTextDecorative10"},decorative20:{backgroundColor:"colorBackgroundDecorative20Weakest",color:"colorTextDecorative20"},decorative30:{backgroundColor:"colorBackgroundDecorative30Weakest",color:"colorTextDecorative30"},decorative40:{backgroundColor:"colorBackgroundDecorative40Weakest",color:"colorTextDecorative40"},neutral_counter:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral",borderRadius:"borderRadiusPill"},error_counter:{backgroundColor:"colorBackgroundErrorWeakest",color:"colorTextErrorStrong",borderRadius:"borderRadiusPill"},default:{backgroundColor:"colorBackground",color:"colorTextWeak"},info:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral"}},badgeButtonStyles={success:{boxShadow:"shadowBorderBottomSuccessWeaker"},error:{boxShadow:"shadowBorderBottomErrorWeaker"},warning:{boxShadow:"shadowBorderBottomWarningWeaker"},new:{boxShadow:"shadowBorderBottomNewWeaker"},neutral:{boxShadow:"shadowBorderBottomNeutralWeaker"},decorative10:{boxShadow:"shadowBorderBottomDecorative10Weaker"},decorative20:{boxShadow:"shadowBorderBottomDecorative20Weaker"},decorative30:{boxShadow:"shadowBorderBottomDecorative30Weaker"},decorative40:{boxShadow:"shadowBorderBottomDecorative40Weaker"},neutral_counter:{boxShadow:"shadowBorderBottomNeutralWeaker"},error_counter:{boxShadow:"shadowBorderBottomErrorWeaker"},default:{boxShadow:"shadowBorderBottomDecorative10Weaker"},info:{boxShadow:"shadowBorderBottomNeutralWeaker"}},getBadgeAnchorStyles=()=>({textDecoration:"underline",cursor:"pointer",_hover:{textDecoration:"none"},_focus:{textDecoration:"none",boxShadow:"shadowFocus"}}),getBadgeButtonStyles=variant=>{let variantButtonStyle=badgeButtonStyles[variant];return __spreadProps(__spreadValues({},variantButtonStyle),{cursor:"pointer",_hover:{top:"1px",boxShadow:"none"},_focus:{top:"1px",boxShadow:"shadowFocus"}})};var handlePropValidation=({as,href,onClick})=>{if(as==="a"){if(href==null)throw new Error('[Paste: Badge] Badge is being used as an anchor (`as="a"`). Provide an href.');if(onClick!=null)throw new Error('[Paste: Badge] An onClick was provided. To use as a button, use `as="button"`.')}if(as==="button"){if(onClick==null)throw new Error('[Paste: Badge] Badge is being used as an button (`as="button"`). Provide an onClick.');if(href===null)throw new Error('[Paste: Badge] An href was provided. To use as an anchor, use `as="a"`.')}},Badge=React2.forwardRef((_a,ref)=>{var _b=_a,{as,href,variant,children,element="BADGE"}=_b,props=__objRest(_b,["as","href","variant","children","element"]);handlePropValidation(__spreadValues({as,href},props));let resizedChildren=useResizeChildIcons(children),badgeStyles=badgeVariantStyles[variant];return as==="a"&&(badgeStyles=__spreadValues(__spreadValues({},badgeStyles),getBadgeAnchorStyles())),as==="button"&&(badgeStyles=__spreadValues(__spreadValues({},badgeStyles),getBadgeButtonStyles(variant))),React2.createElement(Box,__spreadValues(__spreadProps(__spreadValues(__spreadValues({},safelySpreadBoxProps(props)),href?secureExternalLink(href):{}),{href,alignItems:"center",as,border:"unset",borderRadius:"borderRadius30",columnGap:"space10",display:"flex",element,fontSize:"fontSize20",fontWeight:"fontWeightSemibold",lineHeight:"lineHeight10",maxWidth:"max-content",paddingX:"space30",paddingY:"space20",appearance:"none",background:"none",outline:"none",fontFamily:"inherit",position:"relative",variant,ref}),badgeStyles),variant==="error_counter"?React2.createElement(ErrorIcon,{element:`${element}_ICON`,decorative:!0,size:"sizeIcon10"}):null,resizedChildren)});Badge.displayName="Badge";Badge.propTypes={children:PropTypes.node.isRequired,element:PropTypes.string,variant:PropTypes.oneOf(["neutral","warning","error","success","new","decorative10","decorative20","decorative30","decorative40","neutral_counter","error_counter","default","info"]).isRequired,as:PropTypes.oneOf(["span","button","a"]).isRequired,href:PropTypes.string,onClick:PropTypes.func};export{Badge};
+var __defProp=Object.defineProperty,__defProps=Object.defineProperties;var __getOwnPropDescs=Object.getOwnPropertyDescriptors;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};import*as React2 from"react";import*as PropTypes from"prop-types";import{Box,safelySpreadBoxProps}from"@twilio-paste/box";import{secureExternalLink}from"@twilio-paste/anchor";import{ErrorIcon}from"@twilio-paste/icons/esm/ErrorIcon";import*as React from"react";import{useUIDSeed}from"@twilio-paste/uid-library";var DEFAULT_ICON_SIZE="sizeIcon10",useResizeChildIcons=children=>{let seed=useUIDSeed();return Array.isArray(children)?React.Children.map(children,child=>{var _a,_b;return typeof child=="object"&&!Array.isArray(child)&&typeof((_a=child==null?void 0:child.type)==null?void 0:_a.displayName)=="string"&&((_b=child==null?void 0:child.type)==null?void 0:_b.displayName.includes("Icon"))?React.cloneElement(child,__spreadProps(__spreadValues({},child.props),{key:seed(child),size:DEFAULT_ICON_SIZE})):React.createElement(React.Fragment,{key:seed(child)},child)}):children};var badgeVariantStyles={success:{backgroundColor:"colorBackgroundSuccessWeakest",color:"colorTextSuccess"},error:{backgroundColor:"colorBackgroundErrorWeakest",color:"colorTextErrorStrong"},warning:{backgroundColor:"colorBackgroundWarningWeakest",color:"colorTextWarningStrong"},new:{backgroundColor:"colorBackgroundNew",color:"colorTextNew"},neutral:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral"},decorative10:{backgroundColor:"colorBackgroundDecorative10Weakest",color:"colorTextDecorative10"},decorative20:{backgroundColor:"colorBackgroundDecorative20Weakest",color:"colorTextDecorative20"},decorative30:{backgroundColor:"colorBackgroundDecorative30Weakest",color:"colorTextDecorative30"},decorative40:{backgroundColor:"colorBackgroundDecorative40Weakest",color:"colorTextDecorative40"},neutral_counter:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral",borderRadius:"borderRadiusPill"},error_counter:{backgroundColor:"colorBackgroundErrorWeakest",color:"colorTextErrorStrong",borderRadius:"borderRadiusPill"},default:{backgroundColor:"colorBackground",color:"colorTextWeak"},info:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral"}},badgeButtonStyles={success:{boxShadow:"shadowBorderBottomSuccessWeaker"},error:{boxShadow:"shadowBorderBottomErrorWeaker"},warning:{boxShadow:"shadowBorderBottomWarningWeaker"},new:{boxShadow:"shadowBorderBottomNewWeaker"},neutral:{boxShadow:"shadowBorderBottomNeutralWeaker"},decorative10:{boxShadow:"shadowBorderBottomDecorative10Weaker"},decorative20:{boxShadow:"shadowBorderBottomDecorative20Weaker"},decorative30:{boxShadow:"shadowBorderBottomDecorative30Weaker"},decorative40:{boxShadow:"shadowBorderBottomDecorative40Weaker"},neutral_counter:{boxShadow:"shadowBorderBottomNeutralWeaker"},error_counter:{boxShadow:"shadowBorderBottomErrorWeaker"},default:{boxShadow:"shadowBorderBottomDecorative10Weaker"},info:{boxShadow:"shadowBorderBottomNeutralWeaker"}},getBadgeAnchorStyles=()=>({textDecoration:"underline",cursor:"pointer",_hover:{textDecoration:"none"},_focus:{textDecoration:"none",boxShadow:"shadowFocus"}}),getBadgeButtonStyles=variant=>{let variantButtonStyle=badgeButtonStyles[variant];return __spreadProps(__spreadValues({},variantButtonStyle),{cursor:"pointer",_hover:{top:"1px",boxShadow:"none"},_focus:{top:"1px",boxShadow:"shadowFocus"}})};var handlePropValidation=({as,href,onClick})=>{if(as==="a"){if(href==null)throw new Error('[Paste: Badge] Badge is being used as an anchor (`as="a"`). Provide an href.');if(onClick!=null)throw new Error('[Paste: Badge] An onClick was provided. To use as a button, use `as="button"`.')}if(as==="button"){if(onClick==null)throw new Error('[Paste: Badge] Badge is being used as an button (`as="button"`). Provide an onClick.');if(href===null)throw new Error('[Paste: Badge] An href was provided. To use as an anchor, use `as="a"`.')}},Badge=React2.forwardRef((_a,ref)=>{var _b=_a,{as,href,variant,children,element="BADGE"}=_b,props=__objRest(_b,["as","href","variant","children","element"]);handlePropValidation(__spreadValues({as,href},props));let resizedChildren=useResizeChildIcons(children),badgeStyles=badgeVariantStyles[variant];return as==="a"&&(badgeStyles=__spreadValues(__spreadValues({},badgeStyles),getBadgeAnchorStyles())),as==="button"&&(badgeStyles=__spreadValues(__spreadValues({},badgeStyles),getBadgeButtonStyles(variant))),React2.createElement(Box,__spreadValues(__spreadProps(__spreadValues(__spreadValues({},safelySpreadBoxProps(props)),href?secureExternalLink(href):{}),{href,alignItems:"center",as,border:"unset",borderRadius:"borderRadius30",columnGap:"space20",display:"flex",element,fontSize:"fontSize20",fontWeight:"fontWeightSemibold",lineHeight:"lineHeight10",maxWidth:"max-content",paddingX:"space30",paddingY:"space20",appearance:"none",background:"none",outline:"none",fontFamily:"inherit",position:"relative",variant,ref}),badgeStyles),variant==="error_counter"?React2.createElement(ErrorIcon,{element:`${element}_ICON`,decorative:!0,size:"sizeIcon10"}):null,resizedChildren)});Badge.displayName="Badge";Badge.propTypes={children:PropTypes.node.isRequired,element:PropTypes.string,variant:PropTypes.oneOf(["neutral","warning","error","success","new","decorative10","decorative20","decorative30","decorative40","neutral_counter","error_counter","default","info"]).isRequired,as:PropTypes.oneOf(["span","button","a"]).isRequired,href:PropTypes.string,onClick:PropTypes.func};export{Badge};

dist/index.js

@@ -1,1 +0,1 @@
-var __create=Object.create;var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropNames=Object.getOwnPropertyNames,__getOwnPropSymbols=Object.getOwnPropertySymbols,__getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{Badge:()=>Badge});module.exports=__toCommonJS(src_exports);var React2=__toESM(require("react")),PropTypes=__toESM(require("prop-types")),import_box=require("@twilio-paste/box"),import_anchor=require("@twilio-paste/anchor"),import_ErrorIcon=require("@twilio-paste/icons/cjs/ErrorIcon");var React=__toESM(require("react")),import_uid_library=require("@twilio-paste/uid-library"),DEFAULT_ICON_SIZE="sizeIcon10",useResizeChildIcons=children=>{let seed=(0,import_uid_library.useUIDSeed)();return Array.isArray(children)?React.Children.map(children,child=>{var _a,_b;return typeof child=="object"&&!Array.isArray(child)&&typeof((_a=child==null?void 0:child.type)==null?void 0:_a.displayName)=="string"&&((_b=child==null?void 0:child.type)==null?void 0:_b.displayName.includes("Icon"))?React.cloneElement(child,__spreadProps(__spreadValues({},child.props),{key:seed(child),size:DEFAULT_ICON_SIZE})):React.createElement(React.Fragment,{key:seed(child)},child)}):children};var badgeVariantStyles={success:{backgroundColor:"colorBackgroundSuccessWeakest",color:"colorTextSuccess"},error:{backgroundColor:"colorBackgroundErrorWeakest",color:"colorTextErrorStrong"},warning:{backgroundColor:"colorBackgroundWarningWeakest",color:"colorTextWarningStrong"},new:{backgroundColor:"colorBackgroundNew",color:"colorTextNew"},neutral:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral"},decorative10:{backgroundColor:"colorBackgroundDecorative10Weakest",color:"colorTextDecorative10"},decorative20:{backgroundColor:"colorBackgroundDecorative20Weakest",color:"colorTextDecorative20"},decorative30:{backgroundColor:"colorBackgroundDecorative30Weakest",color:"colorTextDecorative30"},decorative40:{backgroundColor:"colorBackgroundDecorative40Weakest",color:"colorTextDecorative40"},neutral_counter:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral",borderRadius:"borderRadiusPill"},error_counter:{backgroundColor:"colorBackgroundErrorWeakest",color:"colorTextErrorStrong",borderRadius:"borderRadiusPill"},default:{backgroundColor:"colorBackground",color:"colorTextWeak"},info:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral"}},badgeButtonStyles={success:{boxShadow:"shadowBorderBottomSuccessWeaker"},error:{boxShadow:"shadowBorderBottomErrorWeaker"},warning:{boxShadow:"shadowBorderBottomWarningWeaker"},new:{boxShadow:"shadowBorderBottomNewWeaker"},neutral:{boxShadow:"shadowBorderBottomNeutralWeaker"},decorative10:{boxShadow:"shadowBorderBottomDecorative10Weaker"},decorative20:{boxShadow:"shadowBorderBottomDecorative20Weaker"},decorative30:{boxShadow:"shadowBorderBottomDecorative30Weaker"},decorative40:{boxShadow:"shadowBorderBottomDecorative40Weaker"},neutral_counter:{boxShadow:"shadowBorderBottomNeutralWeaker"},error_counter:{boxShadow:"shadowBorderBottomErrorWeaker"},default:{boxShadow:"shadowBorderBottomDecorative10Weaker"},info:{boxShadow:"shadowBorderBottomNeutralWeaker"}},getBadgeAnchorStyles=()=>({textDecoration:"underline",cursor:"pointer",_hover:{textDecoration:"none"},_focus:{textDecoration:"none",boxShadow:"shadowFocus"}}),getBadgeButtonStyles=variant=>{let variantButtonStyle=badgeButtonStyles[variant];return __spreadProps(__spreadValues({},variantButtonStyle),{cursor:"pointer",_hover:{top:"1px",boxShadow:"none"},_focus:{top:"1px",boxShadow:"shadowFocus"}})};var handlePropValidation=({as,href,onClick})=>{if(as==="a"){if(href==null)throw new Error('[Paste: Badge] Badge is being used as an anchor (`as="a"`). Provide an href.');if(onClick!=null)throw new Error('[Paste: Badge] An onClick was provided. To use as a button, use `as="button"`.')}if(as==="button"){if(onClick==null)throw new Error('[Paste: Badge] Badge is being used as an button (`as="button"`). Provide an onClick.');if(href===null)throw new Error('[Paste: Badge] An href was provided. To use as an anchor, use `as="a"`.')}},Badge=React2.forwardRef((_a,ref)=>{var _b=_a,{as,href,variant,children,element="BADGE"}=_b,props=__objRest(_b,["as","href","variant","children","element"]);handlePropValidation(__spreadValues({as,href},props));let resizedChildren=useResizeChildIcons(children),badgeStyles=badgeVariantStyles[variant];return as==="a"&&(badgeStyles=__spreadValues(__spreadValues({},badgeStyles),getBadgeAnchorStyles())),as==="button"&&(badgeStyles=__spreadValues(__spreadValues({},badgeStyles),getBadgeButtonStyles(variant))),React2.createElement(import_box.Box,__spreadValues(__spreadProps(__spreadValues(__spreadValues({},(0,import_box.safelySpreadBoxProps)(props)),href?(0,import_anchor.secureExternalLink)(href):{}),{href,alignItems:"center",as,border:"unset",borderRadius:"borderRadius30",columnGap:"space10",display:"flex",element,fontSize:"fontSize20",fontWeight:"fontWeightSemibold",lineHeight:"lineHeight10",maxWidth:"max-content",paddingX:"space30",paddingY:"space20",appearance:"none",background:"none",outline:"none",fontFamily:"inherit",position:"relative",variant,ref}),badgeStyles),variant==="error_counter"?React2.createElement(import_ErrorIcon.ErrorIcon,{element:`${element}_ICON`,decorative:!0,size:"sizeIcon10"}):null,resizedChildren)});Badge.displayName="Badge";Badge.propTypes={children:PropTypes.node.isRequired,element:PropTypes.string,variant:PropTypes.oneOf(["neutral","warning","error","success","new","decorative10","decorative20","decorative30","decorative40","neutral_counter","error_counter","default","info"]).isRequired,as:PropTypes.oneOf(["span","button","a"]).isRequired,href:PropTypes.string,onClick:PropTypes.func};0&&(module.exports={Badge});
+var __create=Object.create;var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropNames=Object.getOwnPropertyNames,__getOwnPropSymbols=Object.getOwnPropertySymbols,__getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{Badge:()=>Badge});module.exports=__toCommonJS(src_exports);var React2=__toESM(require("react")),PropTypes=__toESM(require("prop-types")),import_box=require("@twilio-paste/box"),import_anchor=require("@twilio-paste/anchor"),import_ErrorIcon=require("@twilio-paste/icons/cjs/ErrorIcon");var React=__toESM(require("react")),import_uid_library=require("@twilio-paste/uid-library"),DEFAULT_ICON_SIZE="sizeIcon10",useResizeChildIcons=children=>{let seed=(0,import_uid_library.useUIDSeed)();return Array.isArray(children)?React.Children.map(children,child=>{var _a,_b;return typeof child=="object"&&!Array.isArray(child)&&typeof((_a=child==null?void 0:child.type)==null?void 0:_a.displayName)=="string"&&((_b=child==null?void 0:child.type)==null?void 0:_b.displayName.includes("Icon"))?React.cloneElement(child,__spreadProps(__spreadValues({},child.props),{key:seed(child),size:DEFAULT_ICON_SIZE})):React.createElement(React.Fragment,{key:seed(child)},child)}):children};var badgeVariantStyles={success:{backgroundColor:"colorBackgroundSuccessWeakest",color:"colorTextSuccess"},error:{backgroundColor:"colorBackgroundErrorWeakest",color:"colorTextErrorStrong"},warning:{backgroundColor:"colorBackgroundWarningWeakest",color:"colorTextWarningStrong"},new:{backgroundColor:"colorBackgroundNew",color:"colorTextNew"},neutral:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral"},decorative10:{backgroundColor:"colorBackgroundDecorative10Weakest",color:"colorTextDecorative10"},decorative20:{backgroundColor:"colorBackgroundDecorative20Weakest",color:"colorTextDecorative20"},decorative30:{backgroundColor:"colorBackgroundDecorative30Weakest",color:"colorTextDecorative30"},decorative40:{backgroundColor:"colorBackgroundDecorative40Weakest",color:"colorTextDecorative40"},neutral_counter:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral",borderRadius:"borderRadiusPill"},error_counter:{backgroundColor:"colorBackgroundErrorWeakest",color:"colorTextErrorStrong",borderRadius:"borderRadiusPill"},default:{backgroundColor:"colorBackground",color:"colorTextWeak"},info:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral"}},badgeButtonStyles={success:{boxShadow:"shadowBorderBottomSuccessWeaker"},error:{boxShadow:"shadowBorderBottomErrorWeaker"},warning:{boxShadow:"shadowBorderBottomWarningWeaker"},new:{boxShadow:"shadowBorderBottomNewWeaker"},neutral:{boxShadow:"shadowBorderBottomNeutralWeaker"},decorative10:{boxShadow:"shadowBorderBottomDecorative10Weaker"},decorative20:{boxShadow:"shadowBorderBottomDecorative20Weaker"},decorative30:{boxShadow:"shadowBorderBottomDecorative30Weaker"},decorative40:{boxShadow:"shadowBorderBottomDecorative40Weaker"},neutral_counter:{boxShadow:"shadowBorderBottomNeutralWeaker"},error_counter:{boxShadow:"shadowBorderBottomErrorWeaker"},default:{boxShadow:"shadowBorderBottomDecorative10Weaker"},info:{boxShadow:"shadowBorderBottomNeutralWeaker"}},getBadgeAnchorStyles=()=>({textDecoration:"underline",cursor:"pointer",_hover:{textDecoration:"none"},_focus:{textDecoration:"none",boxShadow:"shadowFocus"}}),getBadgeButtonStyles=variant=>{let variantButtonStyle=badgeButtonStyles[variant];return __spreadProps(__spreadValues({},variantButtonStyle),{cursor:"pointer",_hover:{top:"1px",boxShadow:"none"},_focus:{top:"1px",boxShadow:"shadowFocus"}})};var handlePropValidation=({as,href,onClick})=>{if(as==="a"){if(href==null)throw new Error('[Paste: Badge] Badge is being used as an anchor (`as="a"`). Provide an href.');if(onClick!=null)throw new Error('[Paste: Badge] An onClick was provided. To use as a button, use `as="button"`.')}if(as==="button"){if(onClick==null)throw new Error('[Paste: Badge] Badge is being used as an button (`as="button"`). Provide an onClick.');if(href===null)throw new Error('[Paste: Badge] An href was provided. To use as an anchor, use `as="a"`.')}},Badge=React2.forwardRef((_a,ref)=>{var _b=_a,{as,href,variant,children,element="BADGE"}=_b,props=__objRest(_b,["as","href","variant","children","element"]);handlePropValidation(__spreadValues({as,href},props));let resizedChildren=useResizeChildIcons(children),badgeStyles=badgeVariantStyles[variant];return as==="a"&&(badgeStyles=__spreadValues(__spreadValues({},badgeStyles),getBadgeAnchorStyles())),as==="button"&&(badgeStyles=__spreadValues(__spreadValues({},badgeStyles),getBadgeButtonStyles(variant))),React2.createElement(import_box.Box,__spreadValues(__spreadProps(__spreadValues(__spreadValues({},(0,import_box.safelySpreadBoxProps)(props)),href?(0,import_anchor.secureExternalLink)(href):{}),{href,alignItems:"center",as,border:"unset",borderRadius:"borderRadius30",columnGap:"space20",display:"flex",element,fontSize:"fontSize20",fontWeight:"fontWeightSemibold",lineHeight:"lineHeight10",maxWidth:"max-content",paddingX:"space30",paddingY:"space20",appearance:"none",background:"none",outline:"none",fontFamily:"inherit",position:"relative",variant,ref}),badgeStyles),variant==="error_counter"?React2.createElement(import_ErrorIcon.ErrorIcon,{element:`${element}_ICON`,decorative:!0,size:"sizeIcon10"}):null,resizedChildren)});Badge.displayName="Badge";Badge.propTypes={children:PropTypes.node.isRequired,element:PropTypes.string,variant:PropTypes.oneOf(["neutral","warning","error","success","new","decorative10","decorative20","decorative30","decorative40","neutral_counter","error_counter","default","info"]).isRequired,as:PropTypes.oneOf(["span","button","a"]).isRequired,href:PropTypes.string,onClick:PropTypes.func};0&&(module.exports={Badge});

package.json

 {
   "name": "@twilio-paste/badge",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "category": "data display",
@@ -47,4 +47,4 @@ "status": "production",
     "@twilio-paste/animation-library": "^0.3.7",
-    "@twilio-paste/box": "^6.0.1",
-    "@twilio-paste/design-tokens": "^7.3.0",
+    "@twilio-paste/box": "^6.0.2",
+    "@twilio-paste/design-tokens": "^7.4.0",
     "@twilio-paste/icons": "^8.0.2",
@@ -51,0 +51,0 @@ "@twilio-paste/spinner": "^10.0.1",

No alert changes

Worsened metrics

Total package byte prevSize

115604

decreased by-0.18%

No dependency changes