@twilio-paste/callout - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

dist/Callout.d.ts

@@ -37,2 +37,17 @@ import type { BoxProps, BoxStyleProps } from "@twilio-paste/box";
     marginY?: BoxStyleProps["marginY"];
+    /**
+     * Function to run on dismiss of the Callout. Adds a close button.
+     *
+     * @default null
+     * @memberof CalloutProps
+     */
+    onDismiss?: () => void;
+    /**
+     * Title for dismiss label. Only necessary when using onDismiss.
+     *
+     * @default 'Dismiss callout'
+     * @memberof CalloutProps
+     * @type {string}
+     */
+    i18nDismissLabel?: string;
 }
@@ -39,0 +54,0 @@ export declare const Callout: React.ForwardRefExoticComponent<CalloutProps & React.RefAttributes<HTMLDivElement>>;

dist/index.debug.es.js

 // src/Callout.tsx
 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";
@@ -12,5 +14,5 @@ import { NeutralIcon } from "@twilio-paste/icons/esm/NeutralIcon";
   success: {
-    backgroundColor: "colorBackgroundSuccessWeakest",
+    backgroundColor: "colorBackgroundWeak",
     color: "colorTextSuccess",
-    borderColor: "colorBorderSuccessWeaker"
+    borderColor: "colorBorderSuccessWeak"
   },
@@ -20,18 +22,18 @@ error: {
     color: "colorTextError",
-    borderColor: "colorBorderErrorWeaker"
+    borderColor: "colorBorderErrorWeak"
   },
   warning: {
-    backgroundColor: "colorBackgroundWarningWeakest",
+    backgroundColor: "colorBackgroundWeak",
     color: "colorTextWarningStrong",
-    borderColor: "colorBorderWarningWeaker"
+    borderColor: "colorBorderWarningWeak"
   },
   new: {
-    backgroundColor: "colorBackgroundNewWeakest",
+    backgroundColor: "colorBackgroundWeak",
     color: "colorTextNew",
-    borderColor: "colorBorderNewWeaker"
+    borderColor: "colorBorderNewWeak"
   },
   neutral: {
-    backgroundColor: "colorBackgroundNeutralWeakest",
+    backgroundColor: "colorBackgroundWeak",
     color: "colorTextNeutral",
-    borderColor: "colorBorderNeutralWeaker"
+    borderColor: "colorBorderNeutralWeak"
   }
@@ -54,3 +56,12 @@ };
 var Callout = React.forwardRef(
-  ({ children, variant, element = "CALLOUT", i18nLabel, marginY, ...props }, ref) => {
+  ({
+    children,
+    variant,
+    element = "CALLOUT",
+    i18nLabel,
+    marginY,
+    onDismiss,
+    i18nDismissLabel = "Dismiss callout",
+    ...props
+  }, ref) => {
     const IconComponent = variantIcons[variant];
@@ -65,12 +76,16 @@ const iconLabel = i18nLabel ? i18nLabel : defaultIconLabels[variant];
         display: "flex",
+        flexDirection: "column",
         marginY,
-        padding: "space60",
-        borderStyle: "solid",
-        borderWidth: "borderWidth10",
-        borderRadius: "borderRadius30",
+        rowGap: "space50",
+        paddingTop: "space70",
+        paddingLeft: "space70",
+        paddingRight: "space70",
+        paddingBottom: "space90",
+        borderLeftStyle: "solid",
+        borderLeftWidth: "borderWidth20",
         variant,
         ...variantStyles[variant]
       },
-      /* @__PURE__ */ React.createElement(Box, { marginRight: "space60", paddingTop: "space10", element: `${element}_ICON` }, IconComponent, /* @__PURE__ */ React.createElement(ScreenReaderOnly, null, iconLabel)),
-      /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", rowGap: "space50", flex: "1" }, children)
+      /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(Box, { element: `${element}_ICON` }, IconComponent, /* @__PURE__ */ React.createElement(ScreenReaderOnly, null, iconLabel)), onDismiss && typeof onDismiss === "function" && /* @__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(Box, { display: "flex", flexDirection: "column", rowGap: "space30", flex: "1" }, children)
     );
@@ -77,0 +92,0 @@ }

dist/index.debug.js

@@ -39,2 +39,4 @@ "use strict";
 var import_box = require("@twilio-paste/box");
+var import_button = require("@twilio-paste/button");
+var import_CloseIcon = require("@twilio-paste/icons/cjs/CloseIcon");
 var import_ErrorIcon = require("@twilio-paste/icons/cjs/ErrorIcon");
@@ -49,5 +51,5 @@ var import_NeutralIcon = require("@twilio-paste/icons/cjs/NeutralIcon");
   success: {
-    backgroundColor: "colorBackgroundSuccessWeakest",
+    backgroundColor: "colorBackgroundWeak",
     color: "colorTextSuccess",
-    borderColor: "colorBorderSuccessWeaker"
+    borderColor: "colorBorderSuccessWeak"
   },
@@ -57,18 +59,18 @@ error: {
     color: "colorTextError",
-    borderColor: "colorBorderErrorWeaker"
+    borderColor: "colorBorderErrorWeak"
   },
   warning: {
-    backgroundColor: "colorBackgroundWarningWeakest",
+    backgroundColor: "colorBackgroundWeak",
     color: "colorTextWarningStrong",
-    borderColor: "colorBorderWarningWeaker"
+    borderColor: "colorBorderWarningWeak"
   },
   new: {
-    backgroundColor: "colorBackgroundNewWeakest",
+    backgroundColor: "colorBackgroundWeak",
     color: "colorTextNew",
-    borderColor: "colorBorderNewWeaker"
+    borderColor: "colorBorderNewWeak"
   },
   neutral: {
-    backgroundColor: "colorBackgroundNeutralWeakest",
+    backgroundColor: "colorBackgroundWeak",
     color: "colorTextNeutral",
-    borderColor: "colorBorderNeutralWeaker"
+    borderColor: "colorBorderNeutralWeak"
   }
@@ -91,3 +93,12 @@ };
 var Callout = React.forwardRef(
-  ({ children, variant, element = "CALLOUT", i18nLabel, marginY, ...props }, ref) => {
+  ({
+    children,
+    variant,
+    element = "CALLOUT",
+    i18nLabel,
+    marginY,
+    onDismiss,
+    i18nDismissLabel = "Dismiss callout",
+    ...props
+  }, ref) => {
     const IconComponent = variantIcons[variant];
@@ -102,12 +113,16 @@ const iconLabel = i18nLabel ? i18nLabel : defaultIconLabels[variant];
         display: "flex",
+        flexDirection: "column",
         marginY,
-        padding: "space60",
-        borderStyle: "solid",
-        borderWidth: "borderWidth10",
-        borderRadius: "borderRadius30",
+        rowGap: "space50",
+        paddingTop: "space70",
+        paddingLeft: "space70",
+        paddingRight: "space70",
+        paddingBottom: "space90",
+        borderLeftStyle: "solid",
+        borderLeftWidth: "borderWidth20",
         variant,
         ...variantStyles[variant]
       },
-      /* @__PURE__ */ React.createElement(import_box.Box, { marginRight: "space60", paddingTop: "space10", element: `${element}_ICON` }, IconComponent, /* @__PURE__ */ React.createElement(import_screen_reader_only.ScreenReaderOnly, null, iconLabel)),
-      /* @__PURE__ */ React.createElement(import_box.Box, { display: "flex", flexDirection: "column", rowGap: "space50", flex: "1" }, children)
+      /* @__PURE__ */ React.createElement(import_box.Box, { display: "flex", justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(import_box.Box, { element: `${element}_ICON` }, IconComponent, /* @__PURE__ */ React.createElement(import_screen_reader_only.ScreenReaderOnly, null, iconLabel)), onDismiss && typeof onDismiss === "function" && /* @__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_box.Box, { display: "flex", flexDirection: "column", rowGap: "space30", flex: "1" }, children)
     );
@@ -114,0 +129,0 @@ }

dist/index.es.js

@@ -1,1 +0,1 @@
-import{Box,safelySpreadBoxProps}from"@twilio-paste/box";import{ErrorIcon}from"@twilio-paste/icons/esm/ErrorIcon";import{NeutralIcon}from"@twilio-paste/icons/esm/NeutralIcon";import{NewIcon}from"@twilio-paste/icons/esm/NewIcon";import{SuccessIcon}from"@twilio-paste/icons/esm/SuccessIcon";import{WarningIcon}from"@twilio-paste/icons/esm/WarningIcon";import{ScreenReaderOnly}from"@twilio-paste/screen-reader-only";import*as React from"react";var variantStyles={success:{backgroundColor:"colorBackgroundSuccessWeakest",color:"colorTextSuccess",borderColor:"colorBorderSuccessWeaker"},error:{backgroundColor:"colorBackgroundErrorWeakest",color:"colorTextError",borderColor:"colorBorderErrorWeaker"},warning:{backgroundColor:"colorBackgroundWarningWeakest",color:"colorTextWarningStrong",borderColor:"colorBorderWarningWeaker"},new:{backgroundColor:"colorBackgroundNewWeakest",color:"colorTextNew",borderColor:"colorBorderNewWeaker"},neutral:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral",borderColor:"colorBorderNeutralWeaker"}},variantIcons={success:React.createElement(SuccessIcon,{decorative:!0,color:"colorTextIconSuccess"}),error:React.createElement(ErrorIcon,{decorative:!0,color:"colorTextIconError"}),warning:React.createElement(WarningIcon,{decorative:!0,color:"colorTextIconWarning"}),new:React.createElement(NewIcon,{decorative:!0,color:"colorTextIconNew"}),neutral:React.createElement(NeutralIcon,{decorative:!0,color:"colorTextIconNeutral"})},defaultIconLabels={success:"(success)",error:"(error)",warning:"(warning)",new:"(new)",neutral:"(information)"},Callout=React.forwardRef(({children,variant,element="CALLOUT",i18nLabel,marginY,...props},ref)=>{let IconComponent=variantIcons[variant],iconLabel=i18nLabel||defaultIconLabels[variant];return React.createElement(Box,{...safelySpreadBoxProps(props),ref,element,display:"flex",marginY,padding:"space60",borderStyle:"solid",borderWidth:"borderWidth10",borderRadius:"borderRadius30",variant,...variantStyles[variant]},React.createElement(Box,{marginRight:"space60",paddingTop:"space10",element:`${element}_ICON`},IconComponent,React.createElement(ScreenReaderOnly,null,iconLabel)),React.createElement(Box,{display:"flex",flexDirection:"column",rowGap:"space50",flex:"1"},children))});Callout.displayName="Callout";import{Text,safelySpreadTextProps}from"@twilio-paste/text";import*as React2 from"react";var CalloutHeading=React2.forwardRef(({element="CALLOUT_HEADING",children,as="h3",...props},ref)=>React2.createElement(Text,{...safelySpreadTextProps(props),as,ref,element,color:"currentColor",lineHeight:"lineHeight40",fontWeight:"fontWeightSemibold"},children));CalloutHeading.displayName="CalloutHeading";import{Box as Box2,safelySpreadBoxProps as safelySpreadBoxProps2}from"@twilio-paste/box";import{Text as Text2,safelySpreadTextProps as safelySpreadTextProps2}from"@twilio-paste/text";import*as React3 from"react";var CalloutList=React3.forwardRef(({element="CALLOUT_LIST",children,as,...props},ref)=>React3.createElement(Box2,{...safelySpreadBoxProps2(props),element,ref,as,margin:"space0",display:"flex",flexDirection:"column",rowGap:"space30",paddingLeft:"space60"},children));CalloutList.displayName="CalloutList";var CalloutListItem=React3.forwardRef(({element="CALLOUT_LIST_ITEM",children,...props},ref)=>React3.createElement(Text2,{...safelySpreadTextProps2(props),element,ref,as:"li",color:"currentColor"},children));CalloutListItem.displayName="CalloutListItem";import{Text as Text3,safelySpreadTextProps as safelySpreadTextProps3}from"@twilio-paste/text";import*as React4 from"react";var CalloutText=React4.forwardRef(({element="CALLOUT_TEXT",children,...props},ref)=>React4.createElement(Text3,{...safelySpreadTextProps3(props),as:"p",ref,element,color:"currentColor",lineHeight:"lineHeight40"},children));CalloutText.displayName="CalloutText";export{Callout,CalloutHeading,CalloutList,CalloutListItem,CalloutText};
+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{NewIcon}from"@twilio-paste/icons/esm/NewIcon";import{SuccessIcon}from"@twilio-paste/icons/esm/SuccessIcon";import{WarningIcon}from"@twilio-paste/icons/esm/WarningIcon";import{ScreenReaderOnly}from"@twilio-paste/screen-reader-only";import*as React from"react";var variantStyles={success:{backgroundColor:"colorBackgroundWeak",color:"colorTextSuccess",borderColor:"colorBorderSuccessWeak"},error:{backgroundColor:"colorBackgroundErrorWeakest",color:"colorTextError",borderColor:"colorBorderErrorWeak"},warning:{backgroundColor:"colorBackgroundWeak",color:"colorTextWarningStrong",borderColor:"colorBorderWarningWeak"},new:{backgroundColor:"colorBackgroundWeak",color:"colorTextNew",borderColor:"colorBorderNewWeak"},neutral:{backgroundColor:"colorBackgroundWeak",color:"colorTextNeutral",borderColor:"colorBorderNeutralWeak"}},variantIcons={success:React.createElement(SuccessIcon,{decorative:!0,color:"colorTextIconSuccess"}),error:React.createElement(ErrorIcon,{decorative:!0,color:"colorTextIconError"}),warning:React.createElement(WarningIcon,{decorative:!0,color:"colorTextIconWarning"}),new:React.createElement(NewIcon,{decorative:!0,color:"colorTextIconNew"}),neutral:React.createElement(NeutralIcon,{decorative:!0,color:"colorTextIconNeutral"})},defaultIconLabels={success:"(success)",error:"(error)",warning:"(warning)",new:"(new)",neutral:"(information)"},Callout=React.forwardRef(({children,variant,element="CALLOUT",i18nLabel,marginY,onDismiss,i18nDismissLabel="Dismiss callout",...props},ref)=>{let IconComponent=variantIcons[variant],iconLabel=i18nLabel||defaultIconLabels[variant];return React.createElement(Box,{...safelySpreadBoxProps(props),ref,element,display:"flex",flexDirection:"column",marginY,rowGap:"space50",paddingTop:"space70",paddingLeft:"space70",paddingRight:"space70",paddingBottom:"space90",borderLeftStyle:"solid",borderLeftWidth:"borderWidth20",variant,...variantStyles[variant]},React.createElement(Box,{display:"flex",justifyContent:"space-between"},React.createElement(Box,{element:`${element}_ICON`},IconComponent,React.createElement(ScreenReaderOnly,null,iconLabel)),onDismiss&&typeof onDismiss=="function"&&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))),React.createElement(Box,{display:"flex",flexDirection:"column",rowGap:"space30",flex:"1"},children))});Callout.displayName="Callout";import{Text,safelySpreadTextProps}from"@twilio-paste/text";import*as React2 from"react";var CalloutHeading=React2.forwardRef(({element="CALLOUT_HEADING",children,as="h3",...props},ref)=>React2.createElement(Text,{...safelySpreadTextProps(props),as,ref,element,color:"currentColor",lineHeight:"lineHeight40",fontWeight:"fontWeightSemibold"},children));CalloutHeading.displayName="CalloutHeading";import{Box as Box2,safelySpreadBoxProps as safelySpreadBoxProps2}from"@twilio-paste/box";import{Text as Text2,safelySpreadTextProps as safelySpreadTextProps2}from"@twilio-paste/text";import*as React3 from"react";var CalloutList=React3.forwardRef(({element="CALLOUT_LIST",children,as,...props},ref)=>React3.createElement(Box2,{...safelySpreadBoxProps2(props),element,ref,as,margin:"space0",display:"flex",flexDirection:"column",rowGap:"space30",paddingLeft:"space60"},children));CalloutList.displayName="CalloutList";var CalloutListItem=React3.forwardRef(({element="CALLOUT_LIST_ITEM",children,...props},ref)=>React3.createElement(Text2,{...safelySpreadTextProps2(props),element,ref,as:"li",color:"currentColor"},children));CalloutListItem.displayName="CalloutListItem";import{Text as Text3,safelySpreadTextProps as safelySpreadTextProps3}from"@twilio-paste/text";import*as React4 from"react";var CalloutText=React4.forwardRef(({element="CALLOUT_TEXT",children,...props},ref)=>React4.createElement(Text3,{...safelySpreadTextProps3(props),as:"p",ref,element,color:"currentColor",lineHeight:"lineHeight40"},children));CalloutText.displayName="CalloutText";export{Callout,CalloutHeading,CalloutList,CalloutListItem,CalloutText};

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,{Callout:()=>Callout,CalloutHeading:()=>CalloutHeading,CalloutList:()=>CalloutList,CalloutListItem:()=>CalloutListItem,CalloutText:()=>CalloutText});module.exports=__toCommonJS(src_exports);var import_box=require("@twilio-paste/box"),import_ErrorIcon=require("@twilio-paste/icons/cjs/ErrorIcon"),import_NeutralIcon=require("@twilio-paste/icons/cjs/NeutralIcon"),import_NewIcon=require("@twilio-paste/icons/cjs/NewIcon"),import_SuccessIcon=require("@twilio-paste/icons/cjs/SuccessIcon"),import_WarningIcon=require("@twilio-paste/icons/cjs/WarningIcon"),import_screen_reader_only=require("@twilio-paste/screen-reader-only"),React=__toESM(require("react")),variantStyles={success:{backgroundColor:"colorBackgroundSuccessWeakest",color:"colorTextSuccess",borderColor:"colorBorderSuccessWeaker"},error:{backgroundColor:"colorBackgroundErrorWeakest",color:"colorTextError",borderColor:"colorBorderErrorWeaker"},warning:{backgroundColor:"colorBackgroundWarningWeakest",color:"colorTextWarningStrong",borderColor:"colorBorderWarningWeaker"},new:{backgroundColor:"colorBackgroundNewWeakest",color:"colorTextNew",borderColor:"colorBorderNewWeaker"},neutral:{backgroundColor:"colorBackgroundNeutralWeakest",color:"colorTextNeutral",borderColor:"colorBorderNeutralWeaker"}},variantIcons={success:React.createElement(import_SuccessIcon.SuccessIcon,{decorative:!0,color:"colorTextIconSuccess"}),error:React.createElement(import_ErrorIcon.ErrorIcon,{decorative:!0,color:"colorTextIconError"}),warning:React.createElement(import_WarningIcon.WarningIcon,{decorative:!0,color:"colorTextIconWarning"}),new:React.createElement(import_NewIcon.NewIcon,{decorative:!0,color:"colorTextIconNew"}),neutral:React.createElement(import_NeutralIcon.NeutralIcon,{decorative:!0,color:"colorTextIconNeutral"})},defaultIconLabels={success:"(success)",error:"(error)",warning:"(warning)",new:"(new)",neutral:"(information)"},Callout=React.forwardRef(({children,variant,element="CALLOUT",i18nLabel,marginY,...props},ref)=>{let IconComponent=variantIcons[variant],iconLabel=i18nLabel||defaultIconLabels[variant];return React.createElement(import_box.Box,{...(0,import_box.safelySpreadBoxProps)(props),ref,element,display:"flex",marginY,padding:"space60",borderStyle:"solid",borderWidth:"borderWidth10",borderRadius:"borderRadius30",variant,...variantStyles[variant]},React.createElement(import_box.Box,{marginRight:"space60",paddingTop:"space10",element:`${element}_ICON`},IconComponent,React.createElement(import_screen_reader_only.ScreenReaderOnly,null,iconLabel)),React.createElement(import_box.Box,{display:"flex",flexDirection:"column",rowGap:"space50",flex:"1"},children))});Callout.displayName="Callout";var import_text=require("@twilio-paste/text"),React2=__toESM(require("react")),CalloutHeading=React2.forwardRef(({element="CALLOUT_HEADING",children,as="h3",...props},ref)=>React2.createElement(import_text.Text,{...(0,import_text.safelySpreadTextProps)(props),as,ref,element,color:"currentColor",lineHeight:"lineHeight40",fontWeight:"fontWeightSemibold"},children));CalloutHeading.displayName="CalloutHeading";var import_box2=require("@twilio-paste/box"),import_text2=require("@twilio-paste/text"),React3=__toESM(require("react")),CalloutList=React3.forwardRef(({element="CALLOUT_LIST",children,as,...props},ref)=>React3.createElement(import_box2.Box,{...(0,import_box2.safelySpreadBoxProps)(props),element,ref,as,margin:"space0",display:"flex",flexDirection:"column",rowGap:"space30",paddingLeft:"space60"},children));CalloutList.displayName="CalloutList";var CalloutListItem=React3.forwardRef(({element="CALLOUT_LIST_ITEM",children,...props},ref)=>React3.createElement(import_text2.Text,{...(0,import_text2.safelySpreadTextProps)(props),element,ref,as:"li",color:"currentColor"},children));CalloutListItem.displayName="CalloutListItem";var import_text3=require("@twilio-paste/text"),React4=__toESM(require("react")),CalloutText=React4.forwardRef(({element="CALLOUT_TEXT",children,...props},ref)=>React4.createElement(import_text3.Text,{...(0,import_text3.safelySpreadTextProps)(props),as:"p",ref,element,color:"currentColor",lineHeight:"lineHeight40"},children));CalloutText.displayName="CalloutText";
+"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,{Callout:()=>Callout,CalloutHeading:()=>CalloutHeading,CalloutList:()=>CalloutList,CalloutListItem:()=>CalloutListItem,CalloutText:()=>CalloutText});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_NewIcon=require("@twilio-paste/icons/cjs/NewIcon"),import_SuccessIcon=require("@twilio-paste/icons/cjs/SuccessIcon"),import_WarningIcon=require("@twilio-paste/icons/cjs/WarningIcon"),import_screen_reader_only=require("@twilio-paste/screen-reader-only"),React=__toESM(require("react")),variantStyles={success:{backgroundColor:"colorBackgroundWeak",color:"colorTextSuccess",borderColor:"colorBorderSuccessWeak"},error:{backgroundColor:"colorBackgroundErrorWeakest",color:"colorTextError",borderColor:"colorBorderErrorWeak"},warning:{backgroundColor:"colorBackgroundWeak",color:"colorTextWarningStrong",borderColor:"colorBorderWarningWeak"},new:{backgroundColor:"colorBackgroundWeak",color:"colorTextNew",borderColor:"colorBorderNewWeak"},neutral:{backgroundColor:"colorBackgroundWeak",color:"colorTextNeutral",borderColor:"colorBorderNeutralWeak"}},variantIcons={success:React.createElement(import_SuccessIcon.SuccessIcon,{decorative:!0,color:"colorTextIconSuccess"}),error:React.createElement(import_ErrorIcon.ErrorIcon,{decorative:!0,color:"colorTextIconError"}),warning:React.createElement(import_WarningIcon.WarningIcon,{decorative:!0,color:"colorTextIconWarning"}),new:React.createElement(import_NewIcon.NewIcon,{decorative:!0,color:"colorTextIconNew"}),neutral:React.createElement(import_NeutralIcon.NeutralIcon,{decorative:!0,color:"colorTextIconNeutral"})},defaultIconLabels={success:"(success)",error:"(error)",warning:"(warning)",new:"(new)",neutral:"(information)"},Callout=React.forwardRef(({children,variant,element="CALLOUT",i18nLabel,marginY,onDismiss,i18nDismissLabel="Dismiss callout",...props},ref)=>{let IconComponent=variantIcons[variant],iconLabel=i18nLabel||defaultIconLabels[variant];return React.createElement(import_box.Box,{...(0,import_box.safelySpreadBoxProps)(props),ref,element,display:"flex",flexDirection:"column",marginY,rowGap:"space50",paddingTop:"space70",paddingLeft:"space70",paddingRight:"space70",paddingBottom:"space90",borderLeftStyle:"solid",borderLeftWidth:"borderWidth20",variant,...variantStyles[variant]},React.createElement(import_box.Box,{display:"flex",justifyContent:"space-between"},React.createElement(import_box.Box,{element:`${element}_ICON`},IconComponent,React.createElement(import_screen_reader_only.ScreenReaderOnly,null,iconLabel)),onDismiss&&typeof onDismiss=="function"&&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))),React.createElement(import_box.Box,{display:"flex",flexDirection:"column",rowGap:"space30",flex:"1"},children))});Callout.displayName="Callout";var import_text=require("@twilio-paste/text"),React2=__toESM(require("react")),CalloutHeading=React2.forwardRef(({element="CALLOUT_HEADING",children,as="h3",...props},ref)=>React2.createElement(import_text.Text,{...(0,import_text.safelySpreadTextProps)(props),as,ref,element,color:"currentColor",lineHeight:"lineHeight40",fontWeight:"fontWeightSemibold"},children));CalloutHeading.displayName="CalloutHeading";var import_box2=require("@twilio-paste/box"),import_text2=require("@twilio-paste/text"),React3=__toESM(require("react")),CalloutList=React3.forwardRef(({element="CALLOUT_LIST",children,as,...props},ref)=>React3.createElement(import_box2.Box,{...(0,import_box2.safelySpreadBoxProps)(props),element,ref,as,margin:"space0",display:"flex",flexDirection:"column",rowGap:"space30",paddingLeft:"space60"},children));CalloutList.displayName="CalloutList";var CalloutListItem=React3.forwardRef(({element="CALLOUT_LIST_ITEM",children,...props},ref)=>React3.createElement(import_text2.Text,{...(0,import_text2.safelySpreadTextProps)(props),element,ref,as:"li",color:"currentColor"},children));CalloutListItem.displayName="CalloutListItem";var import_text3=require("@twilio-paste/text"),React4=__toESM(require("react")),CalloutText=React4.forwardRef(({element="CALLOUT_TEXT",children,...props},ref)=>React4.createElement(import_text3.Text,{...(0,import_text3.safelySpreadTextProps)(props),as:"p",ref,element,color:"currentColor",lineHeight:"lineHeight40"},children));CalloutText.displayName="CalloutText";

package.json

 {
   "name": "@twilio-paste/callout",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "category": "feedback",
@@ -28,4 +28,6 @@ "status": "production",
   "peerDependencies": {
+    "@twilio-paste/anchor": "^12.0.0",
     "@twilio-paste/animation-library": "^2.0.0",
     "@twilio-paste/box": "^10.0.0",
+    "@twilio-paste/button": "^14.0.0",
     "@twilio-paste/color-contrast-utils": "^5.0.0",
@@ -36,2 +38,4 @@ "@twilio-paste/customization": "^8.0.0",
     "@twilio-paste/screen-reader-only": "^13.0.0",
+    "@twilio-paste/spinner": "^14.0.0",
+    "@twilio-paste/stack": "^8.0.0",
     "@twilio-paste/style-props": "^9.0.0",
@@ -49,9 +53,13 @@ "@twilio-paste/styling-library": "^3.0.0",
   "devDependencies": {
+    "@twilio-paste/anchor": "^12.0.0",
     "@twilio-paste/animation-library": "^2.0.0",
     "@twilio-paste/box": "^10.1.0",
+    "@twilio-paste/button": "^14.1.0",
     "@twilio-paste/color-contrast-utils": "^5.0.0",
     "@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",
     "@twilio-paste/screen-reader-only": "^13.1.0",
+    "@twilio-paste/spinner": "^14.0.0",
+    "@twilio-paste/stack": "^8.0.0",
     "@twilio-paste/style-props": "^9.1.0",
@@ -67,5 +75,5 @@ "@twilio-paste/styling-library": "^3.0.0",
     "react-dom": "^18.0.0",
-    "tsx": "^3.12.10",
+    "tsx": "^4.0.0",
     "typescript": "^4.9.4"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

156263

increased by26.88%

Lines of code

530

increased by11.34%

Worsened metrics

Dependency count

21

increased by23.53%

Dev dependency count

23

increased by21.05%

No dependency changes