@primer/components 0.0.0-20211016233521 → 0.0.0-2021101703333

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # @primer/components
 
-## 0.0.0-20211016233521
+## 0.0.0-2021101703333
+
+### Major Changes
+
+- [#1614](https://github.com/primer/react/pull/1614) [`dfe61595`](https://github.com/primer/react/commit/dfe6159508c8446111e8a9e37e800abb2756db6f) Thanks [@jfuchs](https://github.com/jfuchs)! - Dialog2 no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
 
 ### Minor Changes
 

package/dist/browser.esm.js

@@ -318,26 +318,24 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
     }
   }
 
-  ${Nt};
-  ${Ot};
   ${rr};
-`,Jo=({dialogLabelId:t,title:r,subtitle:a,dialogDescriptionId:n,onClose:i})=>{const l=o((()=>{i("close-button")}),[i]);return e.createElement(sa.Header,null,e.createElement(or,{display:"flex"},e.createElement(or,{display:"flex",px:2,py:"6px",flexDirection:"column",flexGrow:1},e.createElement(sa.Title,{id:t},null!=r?r:"Dialog"),a&&e.createElement(sa.Subtitle,{id:n},a)),e.createElement(sa.CloseButton,{onClose:l})))};Jo.displayName="DefaultHeader";const Zo=({children:t})=>e.createElement(sa.Body,null,t);Zo.displayName="DefaultBody";const Qo=({footerButtons:t})=>{const{containerRef:r}=Po({bindKeys:Mr.ArrowHorizontal|Mr.Tab,focusInStrategy:"closest"});return t?e.createElement(sa.Footer,{ref:r},e.createElement(sa.Buttons,{buttons:t})):null},ea=e.forwardRef(((t,o)=>{const{title:a="Dialog",subtitle:n="",renderHeader:i,renderBody:l,renderFooter:d,onClose:s,role:c="dialog",width:f="xlarge",height:g="auto",footerButtons:u=[]}=t,p=Vo(),b=Vo(),m=r(null);for(const e of u)e.autoFocus&&(e.ref=m);const h={...t,title:a,subtitle:n,role:c,dialogLabelId:p,dialogDescriptionId:b},v=r(null),x=Fo(v,o),y=r(null);Ro({containerRef:v,restoreFocusOnCleanUp:!0,initialFocusRef:m}),Cr((e=>{s("escape"),e.preventDefault()}),[s]);const w=(null!=i?i:Jo)(h),B=(null!=l?l:Zo)(h),$=(null!=d?d:Qo)(h);return e.createElement(e.Fragment,null,e.createElement(Wo,null,e.createElement(Ko,{ref:y},e.createElement(Yo,{width:f,height:g,ref:x,role:c,"aria-labelledby":p,"aria-describedby":b},w,B,$))))}));ea.displayName="Dialog";const ta=f(or).attrs({as:"header"})`
+`,Jo=({dialogLabelId:t,title:r,subtitle:a,dialogDescriptionId:n,onClose:i})=>{const l=o((()=>{i("close-button")}),[i]);return e.createElement(sa.Header,null,e.createElement(or,{display:"flex"},e.createElement(or,{display:"flex",px:2,py:"6px",flexDirection:"column",flexGrow:1},e.createElement(sa.Title,{id:t},null!=r?r:"Dialog"),a&&e.createElement(sa.Subtitle,{id:n},a)),e.createElement(sa.CloseButton,{onClose:l})))};Jo.displayName="DefaultHeader";const Zo=({children:t})=>e.createElement(sa.Body,null,t);Zo.displayName="DefaultBody";const Qo=({footerButtons:t})=>{const{containerRef:r}=Po({bindKeys:Mr.ArrowHorizontal|Mr.Tab,focusInStrategy:"closest"});return t?e.createElement(sa.Footer,{ref:r},e.createElement(sa.Buttons,{buttons:t})):null},ea=e.forwardRef(((t,o)=>{const{title:a="Dialog",subtitle:n="",renderHeader:i,renderBody:l,renderFooter:d,onClose:s,role:c="dialog",width:f="xlarge",height:g="auto",footerButtons:u=[]}=t,p=Vo(),b=Vo(),m=r(null);for(const e of u)e.autoFocus&&(e.ref=m);const h={...t,title:a,subtitle:n,role:c,dialogLabelId:p,dialogDescriptionId:b},v=r(null),x=Fo(v,o),y=r(null);Ro({containerRef:v,restoreFocusOnCleanUp:!0,initialFocusRef:m}),Cr((e=>{s("escape"),e.preventDefault()}),[s]);const w=(null!=i?i:Jo)(h),B=(null!=l?l:Zo)(h),$=(null!=d?d:Qo)(h);return e.createElement(e.Fragment,null,e.createElement(Wo,null,e.createElement(Ko,{ref:y},e.createElement(Yo,{width:f,height:g,ref:x,role:c,"aria-labelledby":p,"aria-describedby":b},w,B,$))))}));ea.displayName="Dialog";const ta=f.div.attrs({as:"header"})`
   box-shadow: 0 1px 0 ${It("colors.border.default")};
   padding: ${It("space.2")};
   z-index: 1;
   flex-shrink: 0;
-`,ra=f(or)`
+`,ra=f.div`
   font-size: ${It("fontSizes.1")};
   font-weight: ${It("fontWeights.bold")};
-`,oa=f(or)`
+`,oa=f.div`
   font-size: ${It("fontSizes.0")};
   margin-top: ${It("space.1")};
   color: ${It("colors.fg.muted")};
-`,aa=f(or)`
+`,aa=f.div`
   flex-grow: 1;
   overflow: auto;
   padding: ${It("space.3")};
-`,na=f(or).attrs({as:"footer"})`
+`,na=f.div.attrs({as:"footer"})`
   box-shadow: 0 -1px 0 ${It("colors.border.default")};
   padding: ${It("space.3")};
   display: flex;