@twilio-paste/alert - npm Package Compare versions

Comparing version 14.1.0 to 14.1.1

dist/Alert.d.ts

@@ -14,12 +14,5 @@ import type { BoxProps } from "@twilio-paste/box";
 };
-export declare const AlertBackgroundColors: {
-    readonly ERROR: "colorBackgroundErrorWeakest";
-    readonly NEUTRAL: "colorBackgroundNeutralWeakest";
-    readonly WARNING: "colorBackgroundWarningWeakest";
-};
-export declare const AlertTextColors: {
-    readonly ERROR: "colorTextError";
-    readonly NEUTRAL: "colorTextNeutral";
-    readonly WARNING: "colorTextWarningStrong";
-};
+export declare const AlertBackgroundColors: BoxProps["backgroundColor"];
+export declare const AlertBorderColors: BoxProps["borderColor"];
+export declare const AlertTextColors: BoxProps["color"];
 export type AlertVariants = ValueOf<typeof AlertVariants>;
@@ -26,0 +19,0 @@ export type AlertBackgroundColors = ValueOf<typeof AlertBackgroundColors>;

dist/index.debug.es.js

@@ -26,2 +26,7 @@ // src/Alert.tsx
 };
+var AlertBorderColors = {
+  ERROR: "colorBorderErrorWeaker",
+  NEUTRAL: "colorBorderNeutralWeaker",
+  WARNING: "colorBorderWarningWeaker"
+};
 var AlertTextColors = {
@@ -93,6 +98,7 @@ ERROR: "colorTextError",
         backgroundColor: AlertBackgroundColors[variant.toUpperCase()],
-        paddingLeft: "space60",
-        paddingRight: "space60",
-        paddingTop: "space60",
-        paddingBottom: "space60",
+        borderColor: AlertBorderColors[variant.toUpperCase()],
+        borderStyle: "solid",
+        borderWidth: "borderWidth10",
+        borderRadius: "borderRadius30",
+        padding: "space50",
         element,
@@ -103,3 +109,3 @@ variant,
       },
-      /* @__PURE__ */ React.createElement(MediaObject, { as: "div" }, /* @__PURE__ */ React.createElement(MediaFigure, { as: "div", spacing: "space30" }, renderAlertIcon(variant, element, i18nLabelVariantMap[variant])), /* @__PURE__ */ React.createElement(MediaBody, { as: "div" }, /* @__PURE__ */ React.createElement(Box, { color: AlertTextColors[variant.toUpperCase()] }, children)), onDismiss && typeof onDismiss === "function" && /* @__PURE__ */ React.createElement(MediaFigure, { align: "end", spacing: "space60" }, /* @__PURE__ */ React.createElement(Button, { onClick: onDismiss, variant: "secondary_icon", size: "reset", element: `${element}_DISMISS_BUTTON` }, /* @__PURE__ */ React.createElement(CloseIcon, { element: `${element}_DISMISS_ICON`, decorative: true, size: "sizeIcon20" }), /* @__PURE__ */ React.createElement(ScreenReaderOnly, null, i18nDismissLabel))))
+      /* @__PURE__ */ React.createElement(MediaObject, { as: "div" }, /* @__PURE__ */ React.createElement(MediaFigure, { as: "div", spacing: "space30" }, renderAlertIcon(variant, element, i18nLabelVariantMap[variant])), /* @__PURE__ */ React.createElement(MediaBody, { as: "div" }, /* @__PURE__ */ React.createElement(Box, { color: AlertTextColors[variant.toUpperCase()] }, children)), onDismiss && typeof onDismiss === "function" && /* @__PURE__ */ React.createElement(MediaFigure, { align: "end", spacing: "space60" }, /* @__PURE__ */ React.createElement(Button, { onClick: onDismiss, variant: "secondary_icon", size: "reset", element: `${element}_DISMISS_BUTTON` }, /* @__PURE__ */ React.createElement(CloseIcon, { element: `${element}_DISMISS_ICON`, color: "colorTextIcon", decorative: true, size: "sizeIcon20" }), /* @__PURE__ */ React.createElement(ScreenReaderOnly, null, i18nDismissLabel))))
     );
@@ -106,0 +112,0 @@ }

dist/index.debug.js

@@ -58,2 +58,7 @@ "use strict";
 };
+var AlertBorderColors = {
+  ERROR: "colorBorderErrorWeaker",
+  NEUTRAL: "colorBorderNeutralWeaker",
+  WARNING: "colorBorderWarningWeaker"
+};
 var AlertTextColors = {
@@ -125,6 +130,7 @@ ERROR: "colorTextError",
         backgroundColor: AlertBackgroundColors[variant.toUpperCase()],
-        paddingLeft: "space60",
-        paddingRight: "space60",
-        paddingTop: "space60",
-        paddingBottom: "space60",
+        borderColor: AlertBorderColors[variant.toUpperCase()],
+        borderStyle: "solid",
+        borderWidth: "borderWidth10",
+        borderRadius: "borderRadius30",
+        padding: "space50",
         element,
@@ -135,3 +141,3 @@ variant,
       },
-      /* @__PURE__ */ React.createElement(import_media_object.MediaObject, { as: "div" }, /* @__PURE__ */ React.createElement(import_media_object.MediaFigure, { as: "div", spacing: "space30" }, renderAlertIcon(variant, element, i18nLabelVariantMap[variant])), /* @__PURE__ */ React.createElement(import_media_object.MediaBody, { as: "div" }, /* @__PURE__ */ React.createElement(import_box.Box, { color: AlertTextColors[variant.toUpperCase()] }, children)), onDismiss && typeof onDismiss === "function" && /* @__PURE__ */ React.createElement(import_media_object.MediaFigure, { align: "end", spacing: "space60" }, /* @__PURE__ */ React.createElement(import_button.Button, { onClick: onDismiss, variant: "secondary_icon", size: "reset", element: `${element}_DISMISS_BUTTON` }, /* @__PURE__ */ React.createElement(import_CloseIcon.CloseIcon, { element: `${element}_DISMISS_ICON`, decorative: true, size: "sizeIcon20" }), /* @__PURE__ */ React.createElement(import_screen_reader_only.ScreenReaderOnly, null, i18nDismissLabel))))
+      /* @__PURE__ */ React.createElement(import_media_object.MediaObject, { as: "div" }, /* @__PURE__ */ React.createElement(import_media_object.MediaFigure, { as: "div", spacing: "space30" }, renderAlertIcon(variant, element, i18nLabelVariantMap[variant])), /* @__PURE__ */ React.createElement(import_media_object.MediaBody, { as: "div" }, /* @__PURE__ */ React.createElement(import_box.Box, { color: AlertTextColors[variant.toUpperCase()] }, children)), onDismiss && typeof onDismiss === "function" && /* @__PURE__ */ React.createElement(import_media_object.MediaFigure, { align: "end", spacing: "space60" }, /* @__PURE__ */ React.createElement(import_button.Button, { onClick: onDismiss, variant: "secondary_icon", size: "reset", element: `${element}_DISMISS_BUTTON` }, /* @__PURE__ */ React.createElement(import_CloseIcon.CloseIcon, { element: `${element}_DISMISS_ICON`, color: "colorTextIcon", decorative: true, size: "sizeIcon20" }), /* @__PURE__ */ React.createElement(import_screen_reader_only.ScreenReaderOnly, null, i18nDismissLabel))))
     );
@@ -138,0 +144,0 @@ }

dist/index.es.js

@@ -1,1 +0,1 @@
-import{Box,safelySpreadBoxProps}from"@twilio-paste/box";import{Button}from"@twilio-paste/button";import{CloseIcon}from"@twilio-paste/icons/esm/CloseIcon";import{ErrorIcon}from"@twilio-paste/icons/esm/ErrorIcon";import{NeutralIcon}from"@twilio-paste/icons/esm/NeutralIcon";import{WarningIcon}from"@twilio-paste/icons/esm/WarningIcon";import{MediaBody,MediaFigure,MediaObject}from"@twilio-paste/media-object";import{ScreenReaderOnly}from"@twilio-paste/screen-reader-only";import*as React from"react";var AlertRoles={ERROR:"alert",NEUTRAL:"status",WARNING:"alert"},AlertVariants={ERROR:"error",NEUTRAL:"neutral",WARNING:"warning"},AlertBackgroundColors={ERROR:"colorBackgroundErrorWeakest",NEUTRAL:"colorBackgroundNeutralWeakest",WARNING:"colorBackgroundWarningWeakest"},AlertTextColors={ERROR:"colorTextError",NEUTRAL:"colorTextNeutral",WARNING:"colorTextWarningStrong"},renderAlertIcon=(variant,element,title)=>{switch(variant){case AlertVariants.ERROR:return React.createElement(ErrorIcon,{element:`${element}_ICON`,color:"colorTextIconError",decorative:!1,title,size:"sizeIcon20"});case AlertVariants.WARNING:return React.createElement(WarningIcon,{element:`${element}_ICON`,color:"colorTextIconWarning",decorative:!1,title,size:"sizeIcon20"});case AlertVariants.NEUTRAL:default:return React.createElement(NeutralIcon,{element:`${element}_ICON`,color:"colorTextIconNeutral",decorative:!1,title,size:"sizeIcon20"})}},Alert=React.forwardRef(({children,onDismiss,variant,role,element="ALERT",i18nDismissLabel="Dismiss alert",i18nErrorLabel="(error)",i18nNeutralLabel="(information)",i18nWarningLabel="(warning)",...props},ref)=>{let i18nLabelVariantMap={error:i18nErrorLabel,neutral:i18nNeutralLabel,warning:i18nWarningLabel};return React.createElement(Box,{...safelySpreadBoxProps(props),backgroundColor:AlertBackgroundColors[variant.toUpperCase()],paddingLeft:"space60",paddingRight:"space60",paddingTop:"space60",paddingBottom:"space60",element,variant,ref,role:role??AlertRoles[variant.toUpperCase()]},React.createElement(MediaObject,{as:"div"},React.createElement(MediaFigure,{as:"div",spacing:"space30"},renderAlertIcon(variant,element,i18nLabelVariantMap[variant])),React.createElement(MediaBody,{as:"div"},React.createElement(Box,{color:AlertTextColors[variant.toUpperCase()]},children)),onDismiss&&typeof onDismiss=="function"&&React.createElement(MediaFigure,{align:"end",spacing:"space60"},React.createElement(Button,{onClick:onDismiss,variant:"secondary_icon",size:"reset",element:`${element}_DISMISS_BUTTON`},React.createElement(CloseIcon,{element:`${element}_DISMISS_ICON`,decorative:!0,size:"sizeIcon20"}),React.createElement(ScreenReaderOnly,null,i18nDismissLabel)))))});Alert.displayName="Alert";export{Alert};
+import{Box,safelySpreadBoxProps}from"@twilio-paste/box";import{Button}from"@twilio-paste/button";import{CloseIcon}from"@twilio-paste/icons/esm/CloseIcon";import{ErrorIcon}from"@twilio-paste/icons/esm/ErrorIcon";import{NeutralIcon}from"@twilio-paste/icons/esm/NeutralIcon";import{WarningIcon}from"@twilio-paste/icons/esm/WarningIcon";import{MediaBody,MediaFigure,MediaObject}from"@twilio-paste/media-object";import{ScreenReaderOnly}from"@twilio-paste/screen-reader-only";import*as React from"react";var AlertRoles={ERROR:"alert",NEUTRAL:"status",WARNING:"alert"},AlertVariants={ERROR:"error",NEUTRAL:"neutral",WARNING:"warning"},AlertBackgroundColors={ERROR:"colorBackgroundErrorWeakest",NEUTRAL:"colorBackgroundNeutralWeakest",WARNING:"colorBackgroundWarningWeakest"},AlertBorderColors={ERROR:"colorBorderErrorWeaker",NEUTRAL:"colorBorderNeutralWeaker",WARNING:"colorBorderWarningWeaker"},AlertTextColors={ERROR:"colorTextError",NEUTRAL:"colorTextNeutral",WARNING:"colorTextWarningStrong"},renderAlertIcon=(variant,element,title)=>{switch(variant){case AlertVariants.ERROR:return React.createElement(ErrorIcon,{element:`${element}_ICON`,color:"colorTextIconError",decorative:!1,title,size:"sizeIcon20"});case AlertVariants.WARNING:return React.createElement(WarningIcon,{element:`${element}_ICON`,color:"colorTextIconWarning",decorative:!1,title,size:"sizeIcon20"});case AlertVariants.NEUTRAL:default:return React.createElement(NeutralIcon,{element:`${element}_ICON`,color:"colorTextIconNeutral",decorative:!1,title,size:"sizeIcon20"})}},Alert=React.forwardRef(({children,onDismiss,variant,role,element="ALERT",i18nDismissLabel="Dismiss alert",i18nErrorLabel="(error)",i18nNeutralLabel="(information)",i18nWarningLabel="(warning)",...props},ref)=>{let i18nLabelVariantMap={error:i18nErrorLabel,neutral:i18nNeutralLabel,warning:i18nWarningLabel};return React.createElement(Box,{...safelySpreadBoxProps(props),backgroundColor:AlertBackgroundColors[variant.toUpperCase()],borderColor:AlertBorderColors[variant.toUpperCase()],borderStyle:"solid",borderWidth:"borderWidth10",borderRadius:"borderRadius30",padding:"space50",element,variant,ref,role:role??AlertRoles[variant.toUpperCase()]},React.createElement(MediaObject,{as:"div"},React.createElement(MediaFigure,{as:"div",spacing:"space30"},renderAlertIcon(variant,element,i18nLabelVariantMap[variant])),React.createElement(MediaBody,{as:"div"},React.createElement(Box,{color:AlertTextColors[variant.toUpperCase()]},children)),onDismiss&&typeof onDismiss=="function"&&React.createElement(MediaFigure,{align:"end",spacing:"space60"},React.createElement(Button,{onClick:onDismiss,variant:"secondary_icon",size:"reset",element:`${element}_DISMISS_BUTTON`},React.createElement(CloseIcon,{element:`${element}_DISMISS_ICON`,color:"colorTextIcon",decorative:!0,size:"sizeIcon20"}),React.createElement(ScreenReaderOnly,null,i18nDismissLabel)))))});Alert.displayName="Alert";export{Alert};

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;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,{Alert:()=>Alert});module.exports=__toCommonJS(src_exports);var import_box=require("@twilio-paste/box"),import_button=require("@twilio-paste/button"),import_CloseIcon=require("@twilio-paste/icons/cjs/CloseIcon"),import_ErrorIcon=require("@twilio-paste/icons/cjs/ErrorIcon"),import_NeutralIcon=require("@twilio-paste/icons/cjs/NeutralIcon"),import_WarningIcon=require("@twilio-paste/icons/cjs/WarningIcon"),import_media_object=require("@twilio-paste/media-object"),import_screen_reader_only=require("@twilio-paste/screen-reader-only"),React=__toESM(require("react")),AlertRoles={ERROR:"alert",NEUTRAL:"status",WARNING:"alert"},AlertVariants={ERROR:"error",NEUTRAL:"neutral",WARNING:"warning"},AlertBackgroundColors={ERROR:"colorBackgroundErrorWeakest",NEUTRAL:"colorBackgroundNeutralWeakest",WARNING:"colorBackgroundWarningWeakest"},AlertTextColors={ERROR:"colorTextError",NEUTRAL:"colorTextNeutral",WARNING:"colorTextWarningStrong"},renderAlertIcon=(variant,element,title)=>{switch(variant){case AlertVariants.ERROR:return React.createElement(import_ErrorIcon.ErrorIcon,{element:`${element}_ICON`,color:"colorTextIconError",decorative:!1,title,size:"sizeIcon20"});case AlertVariants.WARNING:return React.createElement(import_WarningIcon.WarningIcon,{element:`${element}_ICON`,color:"colorTextIconWarning",decorative:!1,title,size:"sizeIcon20"});case AlertVariants.NEUTRAL:default:return React.createElement(import_NeutralIcon.NeutralIcon,{element:`${element}_ICON`,color:"colorTextIconNeutral",decorative:!1,title,size:"sizeIcon20"})}},Alert=React.forwardRef(({children,onDismiss,variant,role,element="ALERT",i18nDismissLabel="Dismiss alert",i18nErrorLabel="(error)",i18nNeutralLabel="(information)",i18nWarningLabel="(warning)",...props},ref)=>{let i18nLabelVariantMap={error:i18nErrorLabel,neutral:i18nNeutralLabel,warning:i18nWarningLabel};return React.createElement(import_box.Box,{...(0,import_box.safelySpreadBoxProps)(props),backgroundColor:AlertBackgroundColors[variant.toUpperCase()],paddingLeft:"space60",paddingRight:"space60",paddingTop:"space60",paddingBottom:"space60",element,variant,ref,role:role??AlertRoles[variant.toUpperCase()]},React.createElement(import_media_object.MediaObject,{as:"div"},React.createElement(import_media_object.MediaFigure,{as:"div",spacing:"space30"},renderAlertIcon(variant,element,i18nLabelVariantMap[variant])),React.createElement(import_media_object.MediaBody,{as:"div"},React.createElement(import_box.Box,{color:AlertTextColors[variant.toUpperCase()]},children)),onDismiss&&typeof onDismiss=="function"&&React.createElement(import_media_object.MediaFigure,{align:"end",spacing:"space60"},React.createElement(import_button.Button,{onClick:onDismiss,variant:"secondary_icon",size:"reset",element:`${element}_DISMISS_BUTTON`},React.createElement(import_CloseIcon.CloseIcon,{element:`${element}_DISMISS_ICON`,decorative:!0,size:"sizeIcon20"}),React.createElement(import_screen_reader_only.ScreenReaderOnly,null,i18nDismissLabel)))))});Alert.displayName="Alert";
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;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,{Alert:()=>Alert});module.exports=__toCommonJS(src_exports);var import_box=require("@twilio-paste/box"),import_button=require("@twilio-paste/button"),import_CloseIcon=require("@twilio-paste/icons/cjs/CloseIcon"),import_ErrorIcon=require("@twilio-paste/icons/cjs/ErrorIcon"),import_NeutralIcon=require("@twilio-paste/icons/cjs/NeutralIcon"),import_WarningIcon=require("@twilio-paste/icons/cjs/WarningIcon"),import_media_object=require("@twilio-paste/media-object"),import_screen_reader_only=require("@twilio-paste/screen-reader-only"),React=__toESM(require("react")),AlertRoles={ERROR:"alert",NEUTRAL:"status",WARNING:"alert"},AlertVariants={ERROR:"error",NEUTRAL:"neutral",WARNING:"warning"},AlertBackgroundColors={ERROR:"colorBackgroundErrorWeakest",NEUTRAL:"colorBackgroundNeutralWeakest",WARNING:"colorBackgroundWarningWeakest"},AlertBorderColors={ERROR:"colorBorderErrorWeaker",NEUTRAL:"colorBorderNeutralWeaker",WARNING:"colorBorderWarningWeaker"},AlertTextColors={ERROR:"colorTextError",NEUTRAL:"colorTextNeutral",WARNING:"colorTextWarningStrong"},renderAlertIcon=(variant,element,title)=>{switch(variant){case AlertVariants.ERROR:return React.createElement(import_ErrorIcon.ErrorIcon,{element:`${element}_ICON`,color:"colorTextIconError",decorative:!1,title,size:"sizeIcon20"});case AlertVariants.WARNING:return React.createElement(import_WarningIcon.WarningIcon,{element:`${element}_ICON`,color:"colorTextIconWarning",decorative:!1,title,size:"sizeIcon20"});case AlertVariants.NEUTRAL:default:return React.createElement(import_NeutralIcon.NeutralIcon,{element:`${element}_ICON`,color:"colorTextIconNeutral",decorative:!1,title,size:"sizeIcon20"})}},Alert=React.forwardRef(({children,onDismiss,variant,role,element="ALERT",i18nDismissLabel="Dismiss alert",i18nErrorLabel="(error)",i18nNeutralLabel="(information)",i18nWarningLabel="(warning)",...props},ref)=>{let i18nLabelVariantMap={error:i18nErrorLabel,neutral:i18nNeutralLabel,warning:i18nWarningLabel};return React.createElement(import_box.Box,{...(0,import_box.safelySpreadBoxProps)(props),backgroundColor:AlertBackgroundColors[variant.toUpperCase()],borderColor:AlertBorderColors[variant.toUpperCase()],borderStyle:"solid",borderWidth:"borderWidth10",borderRadius:"borderRadius30",padding:"space50",element,variant,ref,role:role??AlertRoles[variant.toUpperCase()]},React.createElement(import_media_object.MediaObject,{as:"div"},React.createElement(import_media_object.MediaFigure,{as:"div",spacing:"space30"},renderAlertIcon(variant,element,i18nLabelVariantMap[variant])),React.createElement(import_media_object.MediaBody,{as:"div"},React.createElement(import_box.Box,{color:AlertTextColors[variant.toUpperCase()]},children)),onDismiss&&typeof onDismiss=="function"&&React.createElement(import_media_object.MediaFigure,{align:"end",spacing:"space60"},React.createElement(import_button.Button,{onClick:onDismiss,variant:"secondary_icon",size:"reset",element:`${element}_DISMISS_BUTTON`},React.createElement(import_CloseIcon.CloseIcon,{element:`${element}_DISMISS_ICON`,color:"colorTextIcon",decorative:!0,size:"sizeIcon20"}),React.createElement(import_screen_reader_only.ScreenReaderOnly,null,i18nDismissLabel)))))});Alert.displayName="Alert";

package.json

 {
   "name": "@twilio-paste/alert",
-  "version": "14.1.0",
+  "version": "14.1.1",
   "category": "feedback",
@@ -57,3 +57,3 @@ "status": "production",
     "@twilio-paste/customization": "^8.1.0",
-    "@twilio-paste/design-tokens": "^10.2.0",
+    "@twilio-paste/design-tokens": "^10.8.0",
     "@twilio-paste/icons": "^12.2.0",
@@ -73,5 +73,5 @@ "@twilio-paste/media-object": "^10.1.0",
     "react-dom": "^18.0.0",
-    "tsx": "^3.12.10",
+    "tsx": "^4.0.0",
     "typescript": "^4.9.4"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

144112

increased by25.85%

Lines of code

378

increased by1.89%

No dependency changes