@twilio-paste/modal - npm Package Compare versions

Comparing version 0.1.18 to 0.2.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.2.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/modal@0.1.18...@twilio-paste/modal@0.2.0) (2020-06-01)
+
+
+### Features
+
+* **modal:** animate modal open & close transitions ([547d4f4](https://github.com/twilio-labs/paste/commit/547d4f45d08097756ac3cd924fb7bba89a941ba7))
+
+
+
+
+
 ## [0.1.18](https://github.com/twilio-labs/paste/compare/@twilio-paste/modal@0.1.17...@twilio-paste/modal@0.1.18) (2020-05-28)
@@ -8,0 +19,0 @@

dist/index.es.js

@@ -1,2 +0,2 @@
-import{createContext as e,useContext as o,createElement as r,Children as i}from"react";import{node as t,bool as n,func as l,oneOf as a,object as s,string as d}from"prop-types";import p from"@emotion/styled";import c from"@styled-system/css";import{pasteBaseStyles as u}from"@twilio-paste/theme";import{ModalDialogPrimitiveOverlay as m,ModalDialogPrimitiveContent as f}from"@twilio-paste/modal-dialog-primitive";import{Box as h,safelySpreadBoxProps as v}from"@twilio-paste/box";import{Button as y}from"@twilio-paste/button";import{Flex as b}from"@twilio-paste/flex";import{UID as g}from"react-uid";import{system as w,compose as x,size as C}from"styled-system";import{Heading as O}from"@twilio-paste/heading";
+import{createContext as e,useContext as o,createElement as r,Children as i}from"react";import{node as t,bool as n,func as a,oneOf as l,object as s,string as d}from"prop-types";import p from"@emotion/styled";import c from"@styled-system/css";import{animated as m,useTransition as u}from"@twilio-paste/animation-library";import{pasteBaseStyles as f}from"@twilio-paste/theme";import{ModalDialogPrimitiveOverlay as h,ModalDialogPrimitiveContent as y}from"@twilio-paste/modal-dialog-primitive";import{Box as v,safelySpreadBoxProps as b}from"@twilio-paste/box";import{Button as g}from"@twilio-paste/button";import{Flex as w}from"@twilio-paste/flex";import{UID as x}from"react-uid";import{system as C,compose as O,size as N}from"styled-system";import{Heading as R}from"@twilio-paste/heading";
 /*! *****************************************************************************
@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation. All rights reserved.
 and limitations under the License.
-***************************************************************************** */var N=function(){return(N=Object.assign||function(e){for(var o,r=1,i=arguments.length;r<i;r++)for(var t in o=arguments[r])Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t]);return e}).apply(this,arguments)};function R(e,o){var r={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&o.indexOf(i)<0&&(r[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(i=Object.getOwnPropertySymbols(e);t<i.length;t++)o.indexOf(i[t])<0&&Object.prototype.propertyIsEnumerable.call(e,i[t])&&(r[i[t]]=e[i[t]])}return r}var z=e(null),E=p(m)(c({position:"fixed",top:0,right:0,bottom:0,left:0,display:"flex",justifyContent:"center",alignItems:"center",width:"100%",backgroundColor:"colorBackgroundOverlay",zIndex:"2000"}),u),D=p(f)((function(e){var o=e.size;return c({width:"100%",maxWidth:"wide"===o?"size80":"size60",maxHeight:"90%",backgroundColor:"colorBackgroundBody",borderRadius:"borderRadius20",boxShadow:"shadowCard",display:"flex",flexDirection:"column"})})),B=function(e){var o=e.children,i=e.isOpen,t=e.onDismiss,n=e.allowPinchZoom,l=void 0===n||n,a=e.initialFocusRef,s=e.ariaLabelledby,d=e.size,p=R(e,["children","isOpen","onDismiss","allowPinchZoom","initialFocusRef","ariaLabelledby","size"]);return r(E,{isOpen:i,onDismiss:t,allowPinchZoom:l,initialFocusRef:a},r(z.Provider,{value:{onDismiss:t}},r(D,N({"aria-labelledby":s},p,{className:null,style:null,size:d}),o)))};B.displayName="Modal","development"===process.env.NODE_ENV&&(B.propTypes={children:t.isRequired,isOpen:n.isRequired,onDismiss:l.isRequired,allowPinchZoom:n,size:a(["default","wide"]).isRequired,initialFocusRef:s,ariaLabelledby:d.isRequired});var P=w({iconColor:{property:"color",scale:"textColors"}}),j=p.span({display:"inline-flex"},x(P,C));j.defaultProps={size:"sizeIcon30",iconColor:"currentColor"},j.displayName="IconWrapper";var q=function(e){var o=e.as,i=e.size,t=e.iconColor,n=e.title,l=e.decorative;if(!l&&null==n)throw new Error("[CloseIcon]: Missing a title for non-decorative icon.");return r(j,{as:o,size:i,iconColor:t},r(g,null,(function(e){return r("svg",{role:"img","aria-hidden":l,"aria-labelledby":e,width:"100%",height:"100%",viewBox:"0 0 24 24"},n?r("title",{id:e},n):null,r("path",{fill:"currentColor",fillRule:"evenodd",d:"M18.01 5.99c.17.169.189.432.057.622l-.051.062-5.327 5.325 5.327 5.327c.19.19.185.494-.006.684a.488.488 0 01-.622.057l-.062-.051L12 12.689l-5.326 5.327a.481.481 0 01-.684-.006.488.488 0 01-.057-.622l.051-.062L11.311 12 5.984 6.674a.481.481 0 01.006-.684.488.488 0 01.622-.057l.062.051L12 11.31l5.326-5.326a.481.481 0 01.684.006z"}))})))};q.displayName="CloseIcon";var M=function(e){var i=e.children,t=R(e,["children"]),n=function(){var e=o(z);if(!e)throw new Error("useModalContext must be used with ModalContextProvider");return e}().onDismiss;return r(h,N({},v(t),{as:"header",borderBottomStyle:"solid",borderBottomWidth:"borderWidth10",borderBottomColor:"colorBorderLight",padding:"space50",margin:"space0",flexShrink:0}),r(b,{hAlignContent:"between"},r(b,{vAlignContent:"center",grow:1,marginRight:"space70"},i),r(y,{variant:"reset",size:"reset",onClick:function(){return n()}},r(q,{decorative:!1,iconColor:"colorTextWeak",size:"sizeIcon60",title:"Close modal"}))))};M.displayName="ModalHeader","development"===process.env.NODE_ENV&&(M.propTypes={children:t.isRequired});var T=function(e){var o=e.children,i=e.as,t=void 0===i?"h2":i,n=R(e,["children","as"]);return r(O,N({},n,{as:t,marginBottom:"space0",variant:"heading30"}),o)};T.displayName="ModalHeading","development"===process.env.NODE_ENV&&(T.propTypes={children:t.isRequired,as:a(["h1","h2","h3","h4","h5","h6"])});var k=function(e){var o=e.children,i=R(e,["children"]);return r(h,N({},v(i),{as:"div",overflowY:"auto",padding:"space50",paddingBottom:"space60"}),o)};k.displayName="ModalBody","development"===process.env.NODE_ENV&&(k.propTypes={children:t.isRequired});var I=function(e){var o=e.children,i=R(e,["children"]);return r(h,N({},v(i),{as:"footer",borderTopStyle:"solid",borderTopWidth:"borderWidth10",borderTopColor:"colorBorderLight",padding:"space50",display:"flex",flexShrink:0}),o)};I.displayName="ModalFooter","development"===process.env.NODE_ENV&&(I.propTypes={children:t.isRequired});var L=function(e){var o=e.children,t=e.justify,n=i.count(o);return r(h,{display:"flex",justifyContent:"start"===t?"flex-start":"flex-end",flexShrink:"start"===t?null:0,flexWrap:"wrap",flexGrow:1,alignItems:"center"},i.map(o,(function(e,o){return r(h,{marginRight:n!==o+1?"space50":null},e)})))};L.displayName="ModalFooterActions","development"===process.env.NODE_ENV&&(L.propTypes={children:t.isRequired,justify:a(["start","end"])});export{B as Modal,k as ModalBody,I as ModalFooter,L as ModalFooterActions,M as ModalHeader,T as ModalHeading};
+***************************************************************************** */var z=function(){return(z=Object.assign||function(e){for(var o,r=1,i=arguments.length;r<i;r++)for(var t in o=arguments[r])Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t]);return e}).apply(this,arguments)};function E(e,o){var r={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&o.indexOf(i)<0&&(r[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(i=Object.getOwnPropertySymbols(e);t<i.length;t++)o.indexOf(i[t])<0&&Object.prototype.propertyIsEnumerable.call(e,i[t])&&(r[i[t]]=e[i[t]])}return r}var D=e(null),B=m(p(h)(c({position:"fixed",top:0,right:0,bottom:0,left:0,display:"flex",justifyContent:"center",alignItems:"center",width:"100%",backgroundColor:"colorBackgroundOverlay",zIndex:"2000"}),f)),P=m(p(y)((function(e){var o=e.size;return c({width:"100%",maxWidth:"wide"===o?"size80":"size60",maxHeight:"90%",minHeight:"170px",backgroundColor:"colorBackgroundBody",borderRadius:"borderRadius20",boxShadow:"shadowCard",display:"flex",flexDirection:"column"})}))),j={from:{opacity:0,transform:"scale(0.675)"},enter:{opacity:1,transform:"scale(1)"},leave:{opacity:0,transform:"scale(0.675)"},config:{mass:.5,tension:370,friction:26}},q=function(e){var o=e.children,i=e.isOpen,t=e.onDismiss,n=e.allowPinchZoom,a=void 0===n||n,l=e.initialFocusRef,s=e.ariaLabelledby,d=e.size,p=E(e,["children","isOpen","onDismiss","allowPinchZoom","initialFocusRef","ariaLabelledby","size"]),c=u(i,j);return r(D.Provider,{value:{onDismiss:t}},c((function(e,i){return i&&r(B,{onDismiss:t,allowPinchZoom:a,initialFocusRef:l,style:{opacity:e.opacity}},r(P,z({"aria-labelledby":s},p,{className:null,style:e,size:d}),o))})))};q.displayName="Modal","development"===process.env.NODE_ENV&&(q.propTypes={children:t.isRequired,isOpen:n.isRequired,onDismiss:a.isRequired,allowPinchZoom:n,size:l(["default","wide"]).isRequired,initialFocusRef:s,ariaLabelledby:d.isRequired});var M=C({iconColor:{property:"color",scale:"textColors"}}),T=p.span({display:"inline-flex"},O(M,N));T.defaultProps={size:"sizeIcon30",iconColor:"currentColor"},T.displayName="IconWrapper";var k=function(e){var o=e.as,i=e.size,t=e.iconColor,n=e.title,a=e.decorative;if(!a&&null==n)throw new Error("[CloseIcon]: Missing a title for non-decorative icon.");return r(T,{as:o,size:i,iconColor:t},r(x,null,(function(e){return r("svg",{role:"img","aria-hidden":a,"aria-labelledby":e,width:"100%",height:"100%",viewBox:"0 0 24 24"},n?r("title",{id:e},n):null,r("path",{fill:"currentColor",fillRule:"evenodd",d:"M18.01 5.99c.17.169.189.432.057.622l-.051.062-5.327 5.325 5.327 5.327c.19.19.185.494-.006.684a.488.488 0 01-.622.057l-.062-.051L12 12.689l-5.326 5.327a.481.481 0 01-.684-.006.488.488 0 01-.057-.622l.051-.062L11.311 12 5.984 6.674a.481.481 0 01.006-.684.488.488 0 01.622-.057l.062.051L12 11.31l5.326-5.326a.481.481 0 01.684.006z"}))})))};k.displayName="CloseIcon";var I=function(e){var i=e.children,t=E(e,["children"]),n=function(){var e=o(D);if(!e)throw new Error("useModalContext must be used with ModalContextProvider");return e}().onDismiss;return r(v,z({},b(t),{as:"header",borderBottomStyle:"solid",borderBottomWidth:"borderWidth10",borderBottomColor:"colorBorderLight",padding:"space50",margin:"space0",flexShrink:0}),r(w,{hAlignContent:"between"},r(w,{vAlignContent:"center",grow:1,marginRight:"space70"},i),r(g,{variant:"reset",size:"reset",onClick:function(){return n()}},r(k,{decorative:!1,iconColor:"colorTextWeak",size:"sizeIcon60",title:"Close modal"}))))};I.displayName="ModalHeader","development"===process.env.NODE_ENV&&(I.propTypes={children:t.isRequired});var L=function(e){var o=e.children,i=e.as,t=void 0===i?"h2":i,n=E(e,["children","as"]);return r(R,z({},n,{as:t,marginBottom:"space0",variant:"heading30"}),o)};L.displayName="ModalHeading","development"===process.env.NODE_ENV&&(L.propTypes={children:t.isRequired,as:l(["h1","h2","h3","h4","h5","h6"])});var S=function(e){var o=e.children,i=E(e,["children"]);return r(v,z({},b(i),{as:"div",overflowY:"auto",padding:"space50",paddingBottom:"space60"}),o)};S.displayName="ModalBody","development"===process.env.NODE_ENV&&(S.propTypes={children:t.isRequired});var W=function(e){var o=e.children,i=E(e,["children"]);return r(v,z({},b(i),{as:"footer",borderTopStyle:"solid",borderTopWidth:"borderWidth10",borderTopColor:"colorBorderLight",padding:"space50",display:"flex",flexShrink:0}),o)};W.displayName="ModalFooter","development"===process.env.NODE_ENV&&(W.propTypes={children:t.isRequired});var F=function(e){var o=e.children,t=e.justify,n=i.count(o);return r(v,{display:"flex",justifyContent:"start"===t?"flex-start":"flex-end",flexShrink:"start"===t?null:0,flexWrap:"wrap",flexGrow:1,alignItems:"center"},i.map(o,(function(e,o){return r(v,{marginRight:n!==o+1?"space50":null},e)})))};F.displayName="ModalFooterActions","development"===process.env.NODE_ENV&&(F.propTypes={children:t.isRequired,justify:l(["start","end"])});export{q as Modal,S as ModalBody,W as ModalFooter,F as ModalFooterActions,I as ModalHeader,L as ModalHeading};

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),o=require("prop-types"),t=e(require("@emotion/styled")),i=e(require("@styled-system/css")),n=require("@twilio-paste/theme"),l=require("@twilio-paste/modal-dialog-primitive"),a=require("@twilio-paste/box"),s=require("@twilio-paste/button"),d=require("@twilio-paste/flex"),c=require("react-uid"),p=require("styled-system"),u=require("@twilio-paste/heading"),m=function(){return(m=Object.assign||function(e){for(var r,o=1,t=arguments.length;o<t;o++)for(var i in r=arguments[o])Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i]);return e}).apply(this,arguments)};function f(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(t=Object.getOwnPropertySymbols(e);i<t.length;i++)r.indexOf(t[i])<0&&Object.prototype.propertyIsEnumerable.call(e,t[i])&&(o[t[i]]=e[t[i]])}return o}var h=r.createContext(null),y=t(l.ModalDialogPrimitiveOverlay)(i({position:"fixed",top:0,right:0,bottom:0,left:0,display:"flex",justifyContent:"center",alignItems:"center",width:"100%",backgroundColor:"colorBackgroundOverlay",zIndex:"2000"}),n.pasteBaseStyles),v=t(l.ModalDialogPrimitiveContent)((function(e){var r=e.size;return i({width:"100%",maxWidth:"wide"===r?"size80":"size60",maxHeight:"90%",backgroundColor:"colorBackgroundBody",borderRadius:"borderRadius20",boxShadow:"shadowCard",display:"flex",flexDirection:"column"})})),x=function(e){var o=e.children,t=e.isOpen,i=e.onDismiss,n=e.allowPinchZoom,l=void 0===n||n,a=e.initialFocusRef,s=e.ariaLabelledby,d=e.size,c=f(e,["children","isOpen","onDismiss","allowPinchZoom","initialFocusRef","ariaLabelledby","size"]);return r.createElement(y,{isOpen:t,onDismiss:i,allowPinchZoom:l,initialFocusRef:a},r.createElement(h.Provider,{value:{onDismiss:i}},r.createElement(v,m({"aria-labelledby":s},c,{className:null,style:null,size:d}),o)))};x.displayName="Modal","development"===process.env.NODE_ENV&&(x.propTypes={children:o.node.isRequired,isOpen:o.bool.isRequired,onDismiss:o.func.isRequired,allowPinchZoom:o.bool,size:o.oneOf(["default","wide"]).isRequired,initialFocusRef:o.object,ariaLabelledby:o.string.isRequired});var b=p.system({iconColor:{property:"color",scale:"textColors"}}),g=t.span({display:"inline-flex"},p.compose(b,p.size));g.defaultProps={size:"sizeIcon30",iconColor:"currentColor"},g.displayName="IconWrapper";var E=function(e){var o=e.as,t=e.size,i=e.iconColor,n=e.title,l=e.decorative;if(!l&&null==n)throw new Error("[CloseIcon]: Missing a title for non-decorative icon.");return r.createElement(g,{as:o,size:t,iconColor:i},r.createElement(c.UID,null,(function(e){return r.createElement("svg",{role:"img","aria-hidden":l,"aria-labelledby":e,width:"100%",height:"100%",viewBox:"0 0 24 24"},n?r.createElement("title",{id:e},n):null,r.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M18.01 5.99c.17.169.189.432.057.622l-.051.062-5.327 5.325 5.327 5.327c.19.19.185.494-.006.684a.488.488 0 01-.622.057l-.062-.051L12 12.689l-5.326 5.327a.481.481 0 01-.684-.006.488.488 0 01-.057-.622l.051-.062L11.311 12 5.984 6.674a.481.481 0 01.006-.684.488.488 0 01.622-.057l.062.051L12 11.31l5.326-5.326a.481.481 0 01.684.006z"}))})))};E.displayName="CloseIcon";var w=function(e){var o=e.children,t=f(e,["children"]),i=function(){var e=r.useContext(h);if(!e)throw new Error("useModalContext must be used with ModalContextProvider");return e}().onDismiss;return r.createElement(a.Box,m({},a.safelySpreadBoxProps(t),{as:"header",borderBottomStyle:"solid",borderBottomWidth:"borderWidth10",borderBottomColor:"colorBorderLight",padding:"space50",margin:"space0",flexShrink:0}),r.createElement(d.Flex,{hAlignContent:"between"},r.createElement(d.Flex,{vAlignContent:"center",grow:1,marginRight:"space70"},o),r.createElement(s.Button,{variant:"reset",size:"reset",onClick:function(){return i()}},r.createElement(E,{decorative:!1,iconColor:"colorTextWeak",size:"sizeIcon60",title:"Close modal"}))))};w.displayName="ModalHeader","development"===process.env.NODE_ENV&&(w.propTypes={children:o.node.isRequired});var C=function(e){var o=e.children,t=e.as,i=void 0===t?"h2":t,n=f(e,["children","as"]);return r.createElement(u.Heading,m({},n,{as:i,marginBottom:"space0",variant:"heading30"}),o)};C.displayName="ModalHeading","development"===process.env.NODE_ENV&&(C.propTypes={children:o.node.isRequired,as:o.oneOf(["h1","h2","h3","h4","h5","h6"])});var O=function(e){var o=e.children,t=f(e,["children"]);return r.createElement(a.Box,m({},a.safelySpreadBoxProps(t),{as:"div",overflowY:"auto",padding:"space50",paddingBottom:"space60"}),o)};O.displayName="ModalBody","development"===process.env.NODE_ENV&&(O.propTypes={children:o.node.isRequired});var B=function(e){var o=e.children,t=f(e,["children"]);return r.createElement(a.Box,m({},a.safelySpreadBoxProps(t),{as:"footer",borderTopStyle:"solid",borderTopWidth:"borderWidth10",borderTopColor:"colorBorderLight",padding:"space50",display:"flex",flexShrink:0}),o)};B.displayName="ModalFooter","development"===process.env.NODE_ENV&&(B.propTypes={children:o.node.isRequired});var q=function(e){var o=e.children,t=e.justify,i=r.Children.count(o);return r.createElement(a.Box,{display:"flex",justifyContent:"start"===t?"flex-start":"flex-end",flexShrink:"start"===t?null:0,flexWrap:"wrap",flexGrow:1,alignItems:"center"},r.Children.map(o,(function(e,o){return r.createElement(a.Box,{marginRight:i!==o+1?"space50":null},e)})))};q.displayName="ModalFooterActions","development"===process.env.NODE_ENV&&(q.propTypes={children:o.node.isRequired,justify:o.oneOf(["start","end"])}),exports.Modal=x,exports.ModalBody=O,exports.ModalFooter=B,exports.ModalFooterActions=q,exports.ModalHeader=w,exports.ModalHeading=C;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),o=require("prop-types"),t=e(require("@emotion/styled")),i=e(require("@styled-system/css")),n=require("@twilio-paste/animation-library"),a=require("@twilio-paste/theme"),l=require("@twilio-paste/modal-dialog-primitive"),s=require("@twilio-paste/box"),d=require("@twilio-paste/button"),c=require("@twilio-paste/flex"),p=require("react-uid"),u=require("styled-system"),m=require("@twilio-paste/heading"),f=function(){return(f=Object.assign||function(e){for(var r,o=1,t=arguments.length;o<t;o++)for(var i in r=arguments[o])Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i]);return e}).apply(this,arguments)};function y(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(t=Object.getOwnPropertySymbols(e);i<t.length;i++)r.indexOf(t[i])<0&&Object.prototype.propertyIsEnumerable.call(e,t[i])&&(o[t[i]]=e[t[i]])}return o}var h=r.createContext(null),v=n.animated(t(l.ModalDialogPrimitiveOverlay)(i({position:"fixed",top:0,right:0,bottom:0,left:0,display:"flex",justifyContent:"center",alignItems:"center",width:"100%",backgroundColor:"colorBackgroundOverlay",zIndex:"2000"}),a.pasteBaseStyles)),x=n.animated(t(l.ModalDialogPrimitiveContent)((function(e){var r=e.size;return i({width:"100%",maxWidth:"wide"===r?"size80":"size60",maxHeight:"90%",minHeight:"170px",backgroundColor:"colorBackgroundBody",borderRadius:"borderRadius20",boxShadow:"shadowCard",display:"flex",flexDirection:"column"})}))),b={from:{opacity:0,transform:"scale(0.675)"},enter:{opacity:1,transform:"scale(1)"},leave:{opacity:0,transform:"scale(0.675)"},config:{mass:.5,tension:370,friction:26}},g=function(e){var o=e.children,t=e.isOpen,i=e.onDismiss,a=e.allowPinchZoom,l=void 0===a||a,s=e.initialFocusRef,d=e.ariaLabelledby,c=e.size,p=y(e,["children","isOpen","onDismiss","allowPinchZoom","initialFocusRef","ariaLabelledby","size"]),u=n.useTransition(t,b);return r.createElement(h.Provider,{value:{onDismiss:i}},u((function(e,t){return t&&r.createElement(v,{onDismiss:i,allowPinchZoom:l,initialFocusRef:s,style:{opacity:e.opacity}},r.createElement(x,f({"aria-labelledby":d},p,{className:null,style:e,size:c}),o))})))};g.displayName="Modal","development"===process.env.NODE_ENV&&(g.propTypes={children:o.node.isRequired,isOpen:o.bool.isRequired,onDismiss:o.func.isRequired,allowPinchZoom:o.bool,size:o.oneOf(["default","wide"]).isRequired,initialFocusRef:o.object,ariaLabelledby:o.string.isRequired});var w=u.system({iconColor:{property:"color",scale:"textColors"}}),E=t.span({display:"inline-flex"},u.compose(w,u.size));E.defaultProps={size:"sizeIcon30",iconColor:"currentColor"},E.displayName="IconWrapper";var C=function(e){var o=e.as,t=e.size,i=e.iconColor,n=e.title,a=e.decorative;if(!a&&null==n)throw new Error("[CloseIcon]: Missing a title for non-decorative icon.");return r.createElement(E,{as:o,size:t,iconColor:i},r.createElement(p.UID,null,(function(e){return r.createElement("svg",{role:"img","aria-hidden":a,"aria-labelledby":e,width:"100%",height:"100%",viewBox:"0 0 24 24"},n?r.createElement("title",{id:e},n):null,r.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M18.01 5.99c.17.169.189.432.057.622l-.051.062-5.327 5.325 5.327 5.327c.19.19.185.494-.006.684a.488.488 0 01-.622.057l-.062-.051L12 12.689l-5.326 5.327a.481.481 0 01-.684-.006.488.488 0 01-.057-.622l.051-.062L11.311 12 5.984 6.674a.481.481 0 01.006-.684.488.488 0 01.622-.057l.062.051L12 11.31l5.326-5.326a.481.481 0 01.684.006z"}))})))};C.displayName="CloseIcon";var O=function(e){var o=e.children,t=y(e,["children"]),i=function(){var e=r.useContext(h);if(!e)throw new Error("useModalContext must be used with ModalContextProvider");return e}().onDismiss;return r.createElement(s.Box,f({},s.safelySpreadBoxProps(t),{as:"header",borderBottomStyle:"solid",borderBottomWidth:"borderWidth10",borderBottomColor:"colorBorderLight",padding:"space50",margin:"space0",flexShrink:0}),r.createElement(c.Flex,{hAlignContent:"between"},r.createElement(c.Flex,{vAlignContent:"center",grow:1,marginRight:"space70"},o),r.createElement(d.Button,{variant:"reset",size:"reset",onClick:function(){return i()}},r.createElement(C,{decorative:!1,iconColor:"colorTextWeak",size:"sizeIcon60",title:"Close modal"}))))};O.displayName="ModalHeader","development"===process.env.NODE_ENV&&(O.propTypes={children:o.node.isRequired});var q=function(e){var o=e.children,t=e.as,i=void 0===t?"h2":t,n=y(e,["children","as"]);return r.createElement(m.Heading,f({},n,{as:i,marginBottom:"space0",variant:"heading30"}),o)};q.displayName="ModalHeading","development"===process.env.NODE_ENV&&(q.propTypes={children:o.node.isRequired,as:o.oneOf(["h1","h2","h3","h4","h5","h6"])});var B=function(e){var o=e.children,t=y(e,["children"]);return r.createElement(s.Box,f({},s.safelySpreadBoxProps(t),{as:"div",overflowY:"auto",padding:"space50",paddingBottom:"space60"}),o)};B.displayName="ModalBody","development"===process.env.NODE_ENV&&(B.propTypes={children:o.node.isRequired});var N=function(e){var o=e.children,t=y(e,["children"]);return r.createElement(s.Box,f({},s.safelySpreadBoxProps(t),{as:"footer",borderTopStyle:"solid",borderTopWidth:"borderWidth10",borderTopColor:"colorBorderLight",padding:"space50",display:"flex",flexShrink:0}),o)};N.displayName="ModalFooter","development"===process.env.NODE_ENV&&(N.propTypes={children:o.node.isRequired});var M=function(e){var o=e.children,t=e.justify,i=r.Children.count(o);return r.createElement(s.Box,{display:"flex",justifyContent:"start"===t?"flex-start":"flex-end",flexShrink:"start"===t?null:0,flexWrap:"wrap",flexGrow:1,alignItems:"center"},r.Children.map(o,(function(e,o){return r.createElement(s.Box,{marginRight:i!==o+1?"space50":null},e)})))};M.displayName="ModalFooterActions","development"===process.env.NODE_ENV&&(M.propTypes={children:o.node.isRequired,justify:o.oneOf(["start","end"])}),exports.Modal=g,exports.ModalBody=B,exports.ModalFooter=N,exports.ModalFooterActions=M,exports.ModalHeader=O,exports.ModalHeading=q;

package.json

 {
   "name": "@twilio-paste/modal",
-  "version": "0.1.18",
+  "version": "0.2.0",
   "category": "overlay",
@@ -36,10 +36,11 @@ "status": "beta",
     "@twilio-paste/absolute": "^2.0.38",
+    "@twilio-paste/animation-library": "^0.1.1",
     "@twilio-paste/box": "^2.4.6",
-    "@twilio-paste/button": "^1.2.1",
+    "@twilio-paste/button": "^1.2.2",
     "@twilio-paste/design-tokens": "^5.2.0",
     "@twilio-paste/flex": "^0.3.25",
     "@twilio-paste/heading": "^2.0.6",
-    "@twilio-paste/icons": "^2.1.7",
+    "@twilio-paste/icons": "^2.2.0",
     "@twilio-paste/modal-dialog-primitive": "^0.1.3",
-    "@twilio-paste/spinner": "^1.2.8",
+    "@twilio-paste/spinner": "^1.2.9",
     "@twilio-paste/style-props": "^1.1.7",
@@ -56,17 +57,18 @@ "@twilio-paste/text": "^2.1.7",
   "devDependencies": {
-    "@twilio-paste/absolute": "^2.0.38",
-    "@twilio-paste/box": "^2.4.6",
-    "@twilio-paste/button": "^1.2.2",
+    "@twilio-paste/absolute": "^2.0.39",
+    "@twilio-paste/animation-library": "^0.2.0",
+    "@twilio-paste/box": "^2.4.7",
+    "@twilio-paste/button": "^1.2.3",
     "@twilio-paste/design-tokens": "^5.2.0",
-    "@twilio-paste/flex": "^0.3.25",
-    "@twilio-paste/heading": "^2.0.6",
-    "@twilio-paste/icons": "^2.2.0",
+    "@twilio-paste/flex": "^0.3.26",
+    "@twilio-paste/heading": "^2.0.7",
+    "@twilio-paste/icons": "^2.2.1",
     "@twilio-paste/modal-dialog-primitive": "^0.1.3",
-    "@twilio-paste/spinner": "^1.2.9",
-    "@twilio-paste/style-props": "^1.1.7",
-    "@twilio-paste/text": "^2.1.7",
-    "@twilio-paste/theme": "^3.1.7",
+    "@twilio-paste/spinner": "^1.2.10",
+    "@twilio-paste/style-props": "^1.1.8",
+    "@twilio-paste/text": "^2.1.8",
+    "@twilio-paste/theme": "^3.2.0",
     "@twilio-paste/types": "^3.0.7"
   },
-  "gitHead": "339628d2db7bd8c3573a75c38ea3fcf1dbec3121"
+  "gitHead": "e26f9af30f362846b7ce6bbaff3a839a421c6bab"
 }

No alert changes

Improved metrics

Total package byte prevSize

26305

increased by4.12%

Lines of code

118

increased by1.72%

Worsened metrics

Dependency count

23

increased by4.55%

Dev dependency count

14

increased by7.69%

No dependency changes