@artsy/palette 26.0.1 → 26.1.1

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+# v26.1.1 (Thu Nov 17 2022)
+
+#### 🐛  Bug Fix
+
+- fix(modaldialogcontent): fixes width for shorter content [#1225](https://github.com/artsy/palette/pull/1225) ([@dzucconi](https://github.com/dzucconi))
+- fix(modaldialogcontent): fixes width for shorter content ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
+# v26.1.0 (Thu Nov 17 2022)
+
+#### 🚀  Enhancement
+
+- feat(modaldialog): adds left/right panel support [#1224](https://github.com/artsy/palette/pull/1224) ([@dzucconi](https://github.com/dzucconi))
+
+#### 🐛  Bug Fix
+
+- feat(modaldialog): adds support for left/right panels ([@dzucconi](https://github.com/dzucconi))
+- fix(modalcontent): ensures shadow covers inputs ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v26.0.1 (Tue Nov 01 2022)
 
 #### 🐛  Bug Fix

package/dist/elements/ModalDialog/ModalDialog.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import { ModalBaseProps } from "../Modal";
 import { ModalDialogContentProps } from "./ModalDialogContent";
-export declare type ModalDialogProps = ModalBaseProps & ModalDialogContentProps;
+export declare type ModalDialogProps = ModalBaseProps & ModalDialogContentProps & {
+    leftPanel?: React.ReactNode;
+    rightPanel?: React.ReactNode;
+};
 export declare const ModalDialog: React.FC<ModalDialogProps>;

package/dist/elements/ModalDialog/ModalDialog.js

@@ -15,7 +15,7 @@ var _Box = require("../Box");
 
 var _useDidMount = require("../../utils/useDidMount");
 
-var _excluded = ["children", "footer", "hasLogo", "onClose", "title"],
+var _excluded = ["children", "footer", "hasLogo", "leftPanel", "onClose", "rightPanel", "title"],
     _excluded2 = ["width"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -42,7 +42,9 @@ var ModalDialog = function ModalDialog(_ref) {
   var children = _ref.children,
       footer = _ref.footer,
       hasLogo = _ref.hasLogo,
+      leftPanel = _ref.leftPanel,
       onClose = _ref.onClose,
+      rightPanel = _ref.rightPanel,
       title = _ref.title,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -71,7 +73,9 @@ var ModalDialog = function ModalDialog(_ref) {
   }, modalProps), /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, _extends({
     footer: footer,
     hasLogo: hasLogo,
+    leftPanel: leftPanel,
     onClose: onClose,
+    rightPanel: rightPanel,
     title: title,
     width: "100%",
     style: isMounted ? {

package/dist/elements/ModalDialog/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.tsx"],"names":["ModalDialog","children","footer","hasLogo","onClose","title","rest","isMounted","clearCallStack","width","boxProps","modalProps","backgroundColor","transition","opacity","transform"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAIA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,OAOjD;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,SAAS,GAAG,8BAAY;AAAEC,IAAAA,cAAc,EAAE;AAAlB,GAAZ,CAAlB;;AAEA,uBAA6C,wBAAcF,IAAd,CAA7C;AAAA;AAAA;AAAA,MAASG,KAAT,oBAASA,KAAT;AAAA,MAAmBC,QAAnB;AAAA,MAA+BC,UAA/B;;AAEA,sBACE,6BAAC,gBAAD;AACE,IAAA,OAAO,EAAEP,OADX;AAEE,IAAA,KAAK,EACHG,SAAS,GACL;AACEK,MAAAA,eAAe,EAAE,0BADnB;AAEEC,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAED,MAAAA,eAAe,EAAE;AAAnB,KARR;AAUE,IAAA,WAAW,EAAE;AAAEH,MAAAA,KAAK,EAAEA,KAAF,aAAEA,KAAF,cAAEA,KAAF,GAAW;AAAlB;AAVf,KAWME,UAXN,gBAaE,6BAAC,sCAAD;AACE,IAAA,MAAM,EAAET,MADV;AAEE,IAAA,OAAO,EAAEC,OAFX;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,KAAK,EAAC,MALR;AAME,IAAA,KAAK,EACHE,SAAS,GACL;AACEO,MAAAA,OAAO,EAAE,CADX;AAEED,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAEC,MAAAA,OAAO,EAAE,CAAX;AAAcC,MAAAA,SAAS,EAAE;AAAzB;AAZR,KAcML,QAdN,GAgBGT,QAhBH,CAbF,CADF;AAkCD,CA9CM;;;AAAMD,W","sourcesContent":["import React from \"react\"\nimport { ModalBase, ModalBaseProps } from \"../Modal\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { splitBoxProps } from \"../Box\"\nimport { useDidMount } from \"../../utils/useDidMount\"\n\nexport type ModalDialogProps = ModalBaseProps & ModalDialogContentProps\n\nexport const ModalDialog: React.FC<ModalDialogProps> = ({\n  children,\n  footer,\n  hasLogo,\n  onClose,\n  title,\n  ...rest\n}) => {\n  const isMounted = useDidMount({ clearCallStack: true })\n\n  const [{ width, ...boxProps }, modalProps] = splitBoxProps(rest)\n\n  return (\n    <ModalBase\n      onClose={onClose}\n      style={\n        isMounted\n          ? {\n              backgroundColor: \"rgba(229, 229, 229, 0.5)\",\n              transition: \"background-color 250ms\",\n            }\n          : { backgroundColor: \"transparent\" }\n      }\n      dialogProps={{ width: width ?? 480 }}\n      {...modalProps}\n    >\n      <ModalDialogContent\n        footer={footer}\n        hasLogo={hasLogo}\n        onClose={onClose}\n        title={title}\n        width=\"100%\"\n        style={\n          isMounted\n            ? {\n                opacity: 1,\n                transition: \"opacity 250ms, transform 250ms\",\n              }\n            : { opacity: 0, transform: \"translateY(10px)\" }\n        }\n        {...boxProps}\n      >\n        {children}\n      </ModalDialogContent>\n    </ModalBase>\n  )\n}\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.tsx"],"names":["ModalDialog","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","rest","isMounted","clearCallStack","width","boxProps","modalProps","backgroundColor","transition","opacity","transform"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAIA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,OASjD;AAAA,MARJC,QAQI,QARJA,QAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,OAMI,QANJA,OAMI;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,SAAS,GAAG,8BAAY;AAAEC,IAAAA,cAAc,EAAE;AAAlB,GAAZ,CAAlB;;AAEA,uBAA6C,wBAAcF,IAAd,CAA7C;AAAA;AAAA;AAAA,MAASG,KAAT,oBAASA,KAAT;AAAA,MAAmBC,QAAnB;AAAA,MAA+BC,UAA/B;;AAEA,sBACE,6BAAC,gBAAD;AACE,IAAA,OAAO,EAAER,OADX;AAEE,IAAA,KAAK,EACHI,SAAS,GACL;AACEK,MAAAA,eAAe,EAAE,0BADnB;AAEEC,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAED,MAAAA,eAAe,EAAE;AAAnB,KARR;AAUE,IAAA,WAAW,EAAE;AAAEH,MAAAA,KAAK,EAAEA,KAAF,aAAEA,KAAF,cAAEA,KAAF,GAAW;AAAlB;AAVf,KAWME,UAXN,gBAaE,6BAAC,sCAAD;AACE,IAAA,MAAM,EAAEX,MADV;AAEE,IAAA,OAAO,EAAEC,OAFX;AAGE,IAAA,SAAS,EAAEC,SAHb;AAIE,IAAA,OAAO,EAAEC,OAJX;AAKE,IAAA,UAAU,EAAEC,UALd;AAME,IAAA,KAAK,EAAEC,KANT;AAOE,IAAA,KAAK,EAAC,MAPR;AAQE,IAAA,KAAK,EACHE,SAAS,GACL;AACEO,MAAAA,OAAO,EAAE,CADX;AAEED,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAEC,MAAAA,OAAO,EAAE,CAAX;AAAcC,MAAAA,SAAS,EAAE;AAAzB;AAdR,KAgBML,QAhBN,GAkBGX,QAlBH,CAbF,CADF;AAoCD,CAlDM;;;AAAMD,W","sourcesContent":["import React from \"react\"\nimport { ModalBase, ModalBaseProps } from \"../Modal\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { splitBoxProps } from \"../Box\"\nimport { useDidMount } from \"../../utils/useDidMount\"\n\nexport type ModalDialogProps = ModalBaseProps &\n  ModalDialogContentProps & {\n    leftPanel?: React.ReactNode\n    rightPanel?: React.ReactNode\n  }\n\nexport const ModalDialog: React.FC<ModalDialogProps> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  ...rest\n}) => {\n  const isMounted = useDidMount({ clearCallStack: true })\n\n  const [{ width, ...boxProps }, modalProps] = splitBoxProps(rest)\n\n  return (\n    <ModalBase\n      onClose={onClose}\n      style={\n        isMounted\n          ? {\n              backgroundColor: \"rgba(229, 229, 229, 0.5)\",\n              transition: \"background-color 250ms\",\n            }\n          : { backgroundColor: \"transparent\" }\n      }\n      dialogProps={{ width: width ?? 480 }}\n      {...modalProps}\n    >\n      <ModalDialogContent\n        footer={footer}\n        hasLogo={hasLogo}\n        leftPanel={leftPanel}\n        onClose={onClose}\n        rightPanel={rightPanel}\n        title={title}\n        width=\"100%\"\n        style={\n          isMounted\n            ? {\n                opacity: 1,\n                transition: \"opacity 250ms, transform 250ms\",\n              }\n            : { opacity: 0, transform: \"translateY(10px)\" }\n        }\n        {...boxProps}\n      >\n        {children}\n      </ModalDialogContent>\n    </ModalBase>\n  )\n}\n"],"file":"ModalDialog.js"}

package/dist/elements/ModalDialog/ModalDialog.story.js

@@ -17,6 +17,8 @@ var _Button = require("../Button");
 
 var _ModalDialog = require("./ModalDialog");
 
+var _Box = require("../Box");
+
 var _excluded = ["children"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -116,6 +118,51 @@ var Default = function Default() {
       footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
         width: "100%"
       }, "Confirm")
+    }, {
+      width: 800,
+      title: "With Left Panel",
+      leftPanel: /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        bg: "black100",
+        width: 300,
+        flexShrink: 0,
+        p: 1
+      }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "xs",
+        color: "white100"
+      }, "Some custom content on the left"))
+    }, {
+      width: 800,
+      title: "With Right Panel",
+      rightPanel: /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        bg: "black100",
+        width: 300,
+        flexShrink: 0,
+        p: 1
+      }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "xs",
+        color: "white100"
+      }, "Some custom content on the left"))
+    }, {
+      width: "100%",
+      title: "With Left and Right Panels",
+      leftPanel: /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        bg: "black100",
+        width: 300,
+        flexShrink: 0,
+        p: 1
+      }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "xs",
+        color: "white100"
+      }, "Some custom content on the left")),
+      rightPanel: /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        bg: "black100",
+        width: 300,
+        flexShrink: 0,
+        p: 1
+      }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "xs",
+        color: "white100"
+      }, "Some custom content on the left"))
     }]
   }, function (props) {
     return /*#__PURE__*/_react.default.createElement(Demo, props);

package/dist/elements/ModalDialog/ModalDialog.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.story.tsx"],"names":["LOREM","title","Demo","children","rest","open","setOpen","repeat","Default","width","hasLogo","footer","props"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,KAAK,GACT,+MADF;eAGe;AACbC,EAAAA,KAAK,EAAE;AADM,C;;;AAIf,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAsD;AAAA,MAAnDC,QAAmD,QAAnDA,QAAmD;AAAA,MAAtCC,IAAsC;;AACjE,kBAAwB,qBAAS,KAAT,CAAxB;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AAEA,sBACE,yEACE,6BAAC,cAAD;AAAQ,IAAA,OAAO,EAAE;AAAA,aAAMA,OAAO,CAAC,IAAD,CAAb;AAAA;AAAjB,kBADF,EAGGD,IAAI,iBACH,6BAAC,wBAAD;AAAa,IAAA,OAAO,EAAE;AAAA,aAAMC,OAAO,CAAC,KAAD,CAAb;AAAA;AAAtB,KAAgDF,IAAhD,GACGD,QAAQ,GAAGA,QAAH,gBAAc,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAAoBH,KAAK,CAACO,MAAN,CAAa,EAAb,CAApB,CADzB,CAJJ,CADF;AAWD,CAdD;;AAgBO,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AACEL,MAAAA,QAAQ,eAAE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,SAAoBH,KAApB;AADZ,KADM,EAIN;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAJM,EAKN;AAAEA,MAAAA,KAAK,EAAE,YAAT;AAAuBQ,MAAAA,KAAK,EAAE;AAA9B,KALM,EAMN;AAAER,MAAAA,KAAK,EAAE,6BAAT;AAAwCQ,MAAAA,KAAK,EAAE,CAAC,KAAD,EAAQ,KAAR,EAAe,KAAf;AAA/C,KANM,EAON;AAAER,MAAAA,KAAK,EAAE,kBAAT;AAA6BQ,MAAAA,KAAK,EAAE,CAAC,MAAD,EAAS,GAAT;AAApC,KAPM,EAQN;AACER,MAAAA,KAAK,EACH;AAFJ,KARM,EAYN;AAAES,MAAAA,OAAO,EAAE;AAAX,KAZM,EAaN;AAAET,MAAAA,KAAK,EAAE,aAAT;AAAwBS,MAAAA,OAAO,EAAE;AAAjC,KAbM,EAcN;AACEP,MAAAA,QAAQ,eAAE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,SAAoBH,KAApB,CADZ;AAEEW,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAFV,KAdM,EAkBN;AAAEV,MAAAA,KAAK,EAAE,aAAT;AAAwBU,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAAhC,KAlBM,EAmBN;AACEV,MAAAA,KAAK,EACH,kFAFJ;AAGEU,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAHV,KAnBM,EAwBN;AACEV,MAAAA,KAAK,EACH,kFAFJ;AAGES,MAAAA,OAAO,EAAE,IAHX;AAIEC,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAJV,KAxBM;AADV,KAiCG,UAACC,KAAD;AAAA,wBAAW,6BAAC,IAAD,EAAUA,KAAV,CAAX;AAAA,GAjCH,CADF;AAqCD,CAtCM;;;AAAMJ,O","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Text } from \"../Text\"\nimport { Button } from \"../Button\"\nimport { ModalDialog, ModalDialogProps } from \"./ModalDialog\"\n\nconst LOREM =\n  \"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus sed iure repellendus animi, aliquid aut fuga maxime nemo minus quas. Error, incidunt fugit similique quidem culpa hic! Nemo, quas rerum. \"\n\nexport default {\n  title: \"Components/ModalDialog\",\n}\n\nconst Demo = ({ children, ...rest }: Partial<ModalDialogProps>) => {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open Modal</Button>\n\n      {open && (\n        <ModalDialog onClose={() => setOpen(false)} {...rest}>\n          {children ? children : <Text variant=\"sm\">{LOREM.repeat(15)}</Text>}\n        </ModalDialog>\n      )}\n    </>\n  )\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ModalDialogProps>>\n      states={[\n        {\n          children: <Text variant=\"sm\">{LOREM}</Text>,\n        },\n        { title: \"Modal Title\" },\n        { title: \"100% Width\", width: \"100%\" },\n        { title: \"Responsive Percentage Width\", width: [\"75%\", \"66%\", \"50%\"] },\n        { title: \"Responsive Width\", width: [\"100%\", 550] },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n        },\n        { hasLogo: true },\n        { title: \"Modal Title\", hasLogo: true },\n        {\n          children: <Text variant=\"sm\">{LOREM}</Text>,\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        { title: \"Modal Title\", footer: <Button width=\"100%\">Confirm</Button> },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          hasLogo: true,\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n      ]}\n    >\n      {(props) => <Demo {...props} />}\n    </States>\n  )\n}\n"],"file":"ModalDialog.story.js"}
+{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.story.tsx"],"names":["LOREM","title","Demo","children","rest","open","setOpen","repeat","Default","width","hasLogo","footer","leftPanel","rightPanel","props"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Text } from \"../Text\"\nimport { Button } from \"../Button\"\nimport { ModalDialog, ModalDialogProps } from \"./ModalDialog\"\nimport { Box } from \"../Box\"\n\nconst LOREM =\n  \"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus sed iure repellendus animi, aliquid aut fuga maxime nemo minus quas. Error, incidunt fugit similique quidem culpa hic! Nemo, quas rerum. \"\n\nexport default {\n  title: \"Components/ModalDialog\",\n}\n\nconst Demo = ({ children, ...rest }: Partial<ModalDialogProps>) => {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open Modal</Button>\n\n      {open && (\n        <ModalDialog onClose={() => setOpen(false)} {...rest}>\n          {children ? children : <Text variant=\"sm\">{LOREM.repeat(15)}</Text>}\n        </ModalDialog>\n      )}\n    </>\n  )\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ModalDialogProps>>\n      states={[\n        {\n          children: <Text variant=\"sm\">{LOREM}</Text>,\n        },\n        { title: \"Modal Title\" },\n        { title: \"100% Width\", width: \"100%\" },\n        { title: \"Responsive Percentage Width\", width: [\"75%\", \"66%\", \"50%\"] },\n        { title: \"Responsive Width\", width: [\"100%\", 550] },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n        },\n        { hasLogo: true },\n        { title: \"Modal Title\", hasLogo: true },\n        {\n          children: <Text variant=\"sm\">{LOREM}</Text>,\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        { title: \"Modal Title\", footer: <Button width=\"100%\">Confirm</Button> },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          hasLogo: true,\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        {\n          width: 800,\n          title: \"With Left Panel\",\n          leftPanel: (\n            <Box bg=\"black100\" width={300} flexShrink={0} p={1}>\n              <Text variant=\"xs\" color=\"white100\">\n                Some custom content on the left\n              </Text>\n            </Box>\n          ),\n        },\n        {\n          width: 800,\n          title: \"With Right Panel\",\n          rightPanel: (\n            <Box bg=\"black100\" width={300} flexShrink={0} p={1}>\n              <Text variant=\"xs\" color=\"white100\">\n                Some custom content on the left\n              </Text>\n            </Box>\n          ),\n        },\n        {\n          width: \"100%\",\n          title: \"With Left and Right Panels\",\n          leftPanel: (\n            <Box bg=\"black100\" width={300} flexShrink={0} p={1}>\n              <Text variant=\"xs\" color=\"white100\">\n                Some custom content on the left\n              </Text>\n            </Box>\n          ),\n          rightPanel: (\n            <Box bg=\"black100\" width={300} flexShrink={0} p={1}>\n              <Text variant=\"xs\" color=\"white100\">\n                Some custom content on the left\n              </Text>\n            </Box>\n          ),\n        },\n      ]}\n    >\n      {(props) => <Demo {...props} />}\n    </States>\n  )\n}\n"],"file":"ModalDialog.story.js"}

package/dist/elements/ModalDialog/ModalDialogContent.d.ts

@@ -4,7 +4,9 @@ export interface ModalDialogContentProps extends BoxProps, React.HTMLAttributes<
     children: React.ReactNode;
     footer?: React.ReactNode;
     hasLogo?: boolean;
+    leftPanel?: React.ReactNode;
     onClose: () => void;
+    rightPanel?: React.ReactNode;
     title?: string;
 }
 export declare const ModalDialogContent: React.FC<ModalDialogContentProps>;

package/dist/elements/ModalDialog/ModalDialogContent.js

@@ -25,7 +25,7 @@ var _useSentinelVisibility = require("../../utils/useSentinelVisibility");
 
 var _Spacer = require("../Spacer");
 
-var _excluded = ["children", "footer", "hasLogo", "onClose", "title"];
+var _excluded = ["children", "footer", "hasLogo", "leftPanel", "onClose", "rightPanel", "title"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,7 +39,9 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
   var children = _ref.children,
       footer = _ref.footer,
       hasLogo = _ref.hasLogo,
+      leftPanel = _ref.leftPanel,
       onClose = _ref.onClose,
+      rightPanel = _ref.rightPanel,
       title = _ref.title,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -53,15 +55,18 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_Flex.Flex, _extends({
     bg: "white100",
-    flexDirection: "column",
-    overflow: "hidden",
     m: 2,
     style: {
       boxShadow: _shadow.DROP_SHADOW
     }
-  }, rest), /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+  }, rest), leftPanel, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    flexDirection: "column",
+    overflow: "hidden",
+    width: "100%"
+  }, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
     alignItems: "flex-start",
     justifyContent: "space-between",
+    zIndex: 1,
     style: {
       transition: "box-shadow 250ms",
       boxShadow: isAtTop ? _shadow.DROP_SHADOW : undefined
@@ -100,7 +105,7 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
       transition: "box-shadow 250ms",
       boxShadow: isAtBottom ? _shadow.DROP_SHADOW : undefined
     }
-  }, footer));
+  }, footer)), rightPanel);
 };
 
 exports.ModalDialogContent = ModalDialogContent;

package/dist/elements/ModalDialog/ModalDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"names":["ModalDialogContent","children","footer","hasLogo","onClose","title","rest","topSentinel","sentinel","isAtTop","isSentinelVisible","bottomSentinel","isAtBottom","boxShadow","DROP_SHADOW","transition","undefined","width","height","WebkitOverflowScrolling"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAYO,IAAMA,kBAAqD,GAAG,SAAxDA,kBAAwD,OAO/D;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,IACC;;AACJ,8BAGI,mDAHJ;AAAA,MACYC,WADZ,yBACEC,QADF;AAAA,MAEqBC,OAFrB,yBAEEC,iBAFF;;AAKA,+BAGI,mDAHJ;AAAA,MACYC,cADZ,0BACEH,QADF;AAAA,MAEqBI,UAFrB,0BAEEF,iBAFF;;AAKA,sBACE,6BAAC,UAAD;AACE,IAAA,EAAE,EAAC,UADL;AAEE,IAAA,aAAa,EAAC,QAFhB;AAGE,IAAA,QAAQ,EAAC,QAHX;AAIE,IAAA,CAAC,EAAE,CAJL;AAKE,IAAA,KAAK,EAAE;AAAEG,MAAAA,SAAS,EAAEC;AAAb;AALT,KAMMR,IANN,gBAQE,6BAAC,UAAD;AACE,IAAA,UAAU,EAAC,YADb;AAEE,IAAA,cAAc,EAAC,eAFjB;AAGE,IAAA,KAAK,EAAE;AACLS,MAAAA,UAAU,EAAE,kBADP;AAELF,MAAAA,SAAS,EAAEJ,OAAO,GAAGK,mBAAH,GAAiBE;AAF9B;AAHT,KAQG,CAACX,KAAK,IAAIF,OAAV,kBACC,6BAAC,QAAD;AAAK,IAAA,CAAC,EAAE;AAAR,KACGA,OAAO,iBACN,6BAAC,sCAAD;AACE,IAAA,OAAO,EAAC,OADV;AAEE,IAAA,KAAK,EAAE;AAAEc,MAAAA,KAAK,EAAE,MAAT;AAAiBC,MAAAA,MAAM,EAAE;AAAzB;AAFT,IAFJ,EAQGf,OAAO,IAAIE,KAAX,iBAAoB,6BAAC,cAAD;AAAQ,IAAA,EAAE,EAAE;AAAZ,IARvB,EAUGA,KAAK,iBAAI,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAA4BA,KAA5B,CAVZ,CATJ,eAuBE,6BAAC,oBAAD;AAAW,IAAA,CAAC,EAAE,CAAd;AAAiB,IAAA,EAAE,EAAC,MAApB;AAA2B,IAAA,OAAO,EAAED,OAApC;AAA6C,kBAAW;AAAxD,kBACE,6BAAC,oBAAD;AAAW,IAAA,IAAI,EAAC,UAAhB;AAA2B,IAAA,OAAO,EAAC;AAAnC,IADF,CAvBF,CARF,eAoCE,6BAAC,QAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,EAAE,EAAE,CAFN;AAGE,IAAA,IAAI,EAAE,CAHR;AAIE,IAAA,QAAQ,EAAC,MAJX;AAKE,IAAA,KAAK,EAAE;AAAEe,MAAAA,uBAAuB,EAAE;AAA3B;AALT,KAOGZ,WAPH,EAQGN,QARH,EASGU,cATH,CApCF,EAgDGT,MAAM,iBACL,6BAAC,QAAD;AACE,IAAA,CAAC,EAAE,CADL;AAEE,IAAA,KAAK,EAAE;AACLa,MAAAA,UAAU,EAAE,kBADP;AAELF,MAAAA,SAAS,EAAED,UAAU,GAAGE,mBAAH,GAAiBE;AAFjC;AAFT,KAOGd,MAPH,CAjDJ,CADF;AA8DD,CAhFM;;;AAAMF,kB","sourcesContent":["import React from \"react\"\nimport { Clickable } from \"../Clickable\"\nimport { DROP_SHADOW } from \"../../helpers/shadow\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { CloseIcon } from \"../../svgs/CloseIcon\"\nimport { ArtsyLogoBlackIcon } from \"../../svgs/ArtsyLogoBlackIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\n\nexport interface ModalDialogContentProps\n  extends BoxProps,\n    React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  footer?: React.ReactNode\n  hasLogo?: boolean\n  onClose: () => void\n  title?: string\n}\n\nexport const ModalDialogContent: React.FC<ModalDialogContentProps> = ({\n  children,\n  footer,\n  hasLogo,\n  onClose,\n  title,\n  ...rest\n}) => {\n  const {\n    sentinel: topSentinel,\n    isSentinelVisible: isAtTop,\n  } = useSentinelVisibility()\n\n  const {\n    sentinel: bottomSentinel,\n    isSentinelVisible: isAtBottom,\n  } = useSentinelVisibility()\n\n  return (\n    <Flex\n      bg=\"white100\"\n      flexDirection=\"column\"\n      overflow=\"hidden\"\n      m={2}\n      style={{ boxShadow: DROP_SHADOW }}\n      {...rest}\n    >\n      <Flex\n        alignItems=\"flex-start\"\n        justifyContent=\"space-between\"\n        style={{\n          transition: \"box-shadow 250ms\",\n          boxShadow: isAtTop ? DROP_SHADOW : undefined,\n        }}\n      >\n        {(title || hasLogo) && (\n          <Box m={2}>\n            {hasLogo && (\n              <ArtsyLogoBlackIcon\n                display=\"block\"\n                style={{ width: \"75px\", height: \"26px\" }}\n              />\n            )}\n\n            {hasLogo && title && <Spacer mt={2} />}\n\n            {title && <Text variant=\"lg-display\">{title}</Text>}\n          </Box>\n        )}\n\n        <Clickable p={2} ml=\"auto\" onClick={onClose} aria-label=\"Close\">\n          <CloseIcon fill=\"black100\" display=\"block\" />\n        </Clickable>\n      </Flex>\n\n      <Box\n        px={2}\n        pb={2}\n        flex={1}\n        overflow=\"auto\"\n        style={{ WebkitOverflowScrolling: \"touch\" }}\n      >\n        {topSentinel}\n        {children}\n        {bottomSentinel}\n      </Box>\n\n      {footer && (\n        <Box\n          p={2}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtBottom ? DROP_SHADOW : undefined,\n          }}\n        >\n          {footer}\n        </Box>\n      )}\n    </Flex>\n  )\n}\n"],"file":"ModalDialogContent.js"}
+{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"names":["ModalDialogContent","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","rest","topSentinel","sentinel","isAtTop","isSentinelVisible","bottomSentinel","isAtBottom","boxShadow","DROP_SHADOW","transition","undefined","width","height","WebkitOverflowScrolling"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAcO,IAAMA,kBAAqD,GAAG,SAAxDA,kBAAwD,OAS/D;AAAA,MARJC,QAQI,QARJA,QAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,OAMI,QANJA,OAMI;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,IACC;;AACJ,8BAGI,mDAHJ;AAAA,MACYC,WADZ,yBACEC,QADF;AAAA,MAEqBC,OAFrB,yBAEEC,iBAFF;;AAKA,+BAGI,mDAHJ;AAAA,MACYC,cADZ,0BACEH,QADF;AAAA,MAEqBI,UAFrB,0BAEEF,iBAFF;;AAKA,sBACE,6BAAC,UAAD;AAAM,IAAA,EAAE,EAAC,UAAT;AAAoB,IAAA,CAAC,EAAE,CAAvB;AAA0B,IAAA,KAAK,EAAE;AAAEG,MAAAA,SAAS,EAAEC;AAAb;AAAjC,KAAiER,IAAjE,GACGJ,SADH,eAGE,6BAAC,UAAD;AAAM,IAAA,aAAa,EAAC,QAApB;AAA6B,IAAA,QAAQ,EAAC,QAAtC;AAA+C,IAAA,KAAK,EAAC;AAArD,kBACE,6BAAC,UAAD;AACE,IAAA,UAAU,EAAC,YADb;AAEE,IAAA,cAAc,EAAC,eAFjB;AAGE,IAAA,MAAM,EAAE,CAHV;AAIE,IAAA,KAAK,EAAE;AACLa,MAAAA,UAAU,EAAE,kBADP;AAELF,MAAAA,SAAS,EAAEJ,OAAO,GAAGK,mBAAH,GAAiBE;AAF9B;AAJT,KASG,CAACX,KAAK,IAAIJ,OAAV,kBACC,6BAAC,QAAD;AAAK,IAAA,CAAC,EAAE;AAAR,KACGA,OAAO,iBACN,6BAAC,sCAAD;AACE,IAAA,OAAO,EAAC,OADV;AAEE,IAAA,KAAK,EAAE;AAAEgB,MAAAA,KAAK,EAAE,MAAT;AAAiBC,MAAAA,MAAM,EAAE;AAAzB;AAFT,IAFJ,EAQGjB,OAAO,IAAII,KAAX,iBAAoB,6BAAC,cAAD;AAAQ,IAAA,EAAE,EAAE;AAAZ,IARvB,EAUGA,KAAK,iBAAI,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAA4BA,KAA5B,CAVZ,CAVJ,eAwBE,6BAAC,oBAAD;AAAW,IAAA,CAAC,EAAE,CAAd;AAAiB,IAAA,EAAE,EAAC,MAApB;AAA2B,IAAA,OAAO,EAAEF,OAApC;AAA6C,kBAAW;AAAxD,kBACE,6BAAC,oBAAD;AAAW,IAAA,IAAI,EAAC,UAAhB;AAA2B,IAAA,OAAO,EAAC;AAAnC,IADF,CAxBF,CADF,eA8BE,6BAAC,QAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,EAAE,EAAE,CAFN;AAGE,IAAA,IAAI,EAAE,CAHR;AAIE,IAAA,QAAQ,EAAC,MAJX;AAKE,IAAA,KAAK,EAAE;AAAEgB,MAAAA,uBAAuB,EAAE;AAA3B;AALT,KAOGZ,WAPH,EAQGR,QARH,EASGY,cATH,CA9BF,EA0CGX,MAAM,iBACL,6BAAC,QAAD;AACE,IAAA,CAAC,EAAE,CADL;AAEE,IAAA,KAAK,EAAE;AACLe,MAAAA,UAAU,EAAE,kBADP;AAELF,MAAAA,SAAS,EAAED,UAAU,GAAGE,mBAAH,GAAiBE;AAFjC;AAFT,KAOGhB,MAPH,CA3CJ,CAHF,EA0DGI,UA1DH,CADF;AA8DD,CAlFM;;;AAAMN,kB","sourcesContent":["import React from \"react\"\nimport { Clickable } from \"../Clickable\"\nimport { DROP_SHADOW } from \"../../helpers/shadow\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { CloseIcon } from \"../../svgs/CloseIcon\"\nimport { ArtsyLogoBlackIcon } from \"../../svgs/ArtsyLogoBlackIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\n\nexport interface ModalDialogContentProps\n  extends BoxProps,\n    React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  footer?: React.ReactNode\n  hasLogo?: boolean\n  leftPanel?: React.ReactNode\n  onClose: () => void\n  rightPanel?: React.ReactNode\n  title?: string\n}\n\nexport const ModalDialogContent: React.FC<ModalDialogContentProps> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  ...rest\n}) => {\n  const {\n    sentinel: topSentinel,\n    isSentinelVisible: isAtTop,\n  } = useSentinelVisibility()\n\n  const {\n    sentinel: bottomSentinel,\n    isSentinelVisible: isAtBottom,\n  } = useSentinelVisibility()\n\n  return (\n    <Flex bg=\"white100\" m={2} style={{ boxShadow: DROP_SHADOW }} {...rest}>\n      {leftPanel}\n\n      <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n        <Flex\n          alignItems=\"flex-start\"\n          justifyContent=\"space-between\"\n          zIndex={1}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtTop ? DROP_SHADOW : undefined,\n          }}\n        >\n          {(title || hasLogo) && (\n            <Box m={2}>\n              {hasLogo && (\n                <ArtsyLogoBlackIcon\n                  display=\"block\"\n                  style={{ width: \"75px\", height: \"26px\" }}\n                />\n              )}\n\n              {hasLogo && title && <Spacer mt={2} />}\n\n              {title && <Text variant=\"lg-display\">{title}</Text>}\n            </Box>\n          )}\n\n          <Clickable p={2} ml=\"auto\" onClick={onClose} aria-label=\"Close\">\n            <CloseIcon fill=\"black100\" display=\"block\" />\n          </Clickable>\n        </Flex>\n\n        <Box\n          px={2}\n          pb={2}\n          flex={1}\n          overflow=\"auto\"\n          style={{ WebkitOverflowScrolling: \"touch\" }}\n        >\n          {topSentinel}\n          {children}\n          {bottomSentinel}\n        </Box>\n\n        {footer && (\n          <Box\n            p={2}\n            style={{\n              transition: \"box-shadow 250ms\",\n              boxShadow: isAtBottom ? DROP_SHADOW : undefined,\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </Flex>\n\n      {rightPanel}\n    </Flex>\n  )\n}\n"],"file":"ModalDialogContent.js"}

package/dist/elements/ModalDialog/ModalDialogContent.story.js

@@ -17,6 +17,12 @@ var _Text = require("../Text");
 
 var _Button = require("../Button");
 
+var _Input = require("../Input");
+
+var _Join = require("../Join");
+
+var _Spacer = require("../Spacer");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = {
@@ -27,6 +33,11 @@ exports.default = _default;
 var Default = function Default() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
     states: [{
+      children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "sm",
+        bg: "black10"
+      }, "Content shorter than width")
+    }, {
       children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
         variant: "sm"
       }, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur?")
@@ -66,9 +77,22 @@ var Default = function Default() {
   }, /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
     onClose: (0, _addonActions.action)("onClose"),
     maxHeight: 400
+  }, /*#__PURE__*/_react.default.createElement(_Join.Join, {
+    separator: /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+      mt: 1
+    })
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "sm"
-  }, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore!")));
+  }, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam."), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    placeholder: "Enter your name",
+    autoComplete: "name"
+  }), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    placeholder: "Enter your email",
+    type: "email",
+    autoComplete: "email"
+  }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "sm"
+  }, "Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore!"))));
 };
 
 exports.Default = Default;

package/dist/elements/ModalDialog/ModalDialogContent.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.story.tsx"],"names":["title","Default","children","hasLogo","footer"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AACEC,MAAAA,QAAQ,eACN,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd;AAFJ,KADM,EAWN;AAAEF,MAAAA,KAAK,EAAE;AAAT,KAXM,EAYN;AACEA,MAAAA,KAAK,EACH;AAFJ,KAZM,EAgBN;AAAEG,MAAAA,OAAO,EAAE;AAAX,KAhBM,EAiBN;AAAEH,MAAAA,KAAK,EAAE,aAAT;AAAwBG,MAAAA,OAAO,EAAE;AAAjC,KAjBM,EAkBN;AACED,MAAAA,QAAQ,eACN,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,gPAFJ;AASEE,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AATV,KAlBM,EA6BN;AAAEJ,MAAAA,KAAK,EAAE,aAAT;AAAwBI,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAAhC,KA7BM,EA8BN;AACEJ,MAAAA,KAAK,EACH,kFAFJ;AAGEI,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAHV,KA9BM,EAmCN;AACEJ,MAAAA,KAAK,EACH,kFAFJ;AAGEG,MAAAA,OAAO,EAAE,IAHX;AAIEC,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAJV,KAnCM;AADV,kBA4CE,6BAAC,sCAAD;AAAoB,IAAA,OAAO,EAAE,0BAAO,SAAP,CAA7B;AAAgD,IAAA,SAAS,EAAE;AAA3D,kBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,2qFADF,CA5CF,CADF;AA4FD,CA7FM;;;AAAMH,O","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { Text } from \"../Text\"\nimport { Button } from \"../Button\"\n\nexport default {\n  title: \"Components/ModalDialogContent\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ModalDialogContentProps>>\n      states={[\n        {\n          children: (\n            <Text variant=\"sm\">\n              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n              neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n              asperiores iure explicabo itaque accusantium, consectetur aut sit\n              maxime culpa ab aliquid consequatur?\n            </Text>\n          ),\n        },\n        { title: \"Modal Title\" },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n        },\n        { hasLogo: true },\n        { title: \"Modal Title\", hasLogo: true },\n        {\n          children: (\n            <Text variant=\"sm\">\n              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n              neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n              asperiores iure explicabo itaque accusantium, consectetur aut sit\n              maxime culpa ab aliquid consequatur?\n            </Text>\n          ),\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        { title: \"Modal Title\", footer: <Button width=\"100%\">Confirm</Button> },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          hasLogo: true,\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n      ]}\n    >\n      <ModalDialogContent onClose={action(\"onClose\")} maxHeight={400}>\n        <Text variant=\"sm\">\n          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque\n          voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure\n          explicabo itaque accusantium, consectetur aut sit maxime culpa ab\n          aliquid consequatur? Lorem, ipsum dolor sit amet consectetur\n          adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque\n          dicta blanditiis debitis rerum asperiores quae nihil minima\n          praesentium, quaerat cupiditate amet dolor similique corporis? Lorem,\n          ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque\n          placeat mollitia aliquam porro molestiae recusandae eos iusto\n          obcaecati quo ducimus in iure tenetur vitae animi ullam nisi\n          voluptatem inventore! Lorem ipsum, dolor sit amet consectetur\n          adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam.\n          Assumenda, hic eius asperiores iure explicabo itaque accusantium,\n          consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum\n          dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus\n          dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores\n          quae nihil minima praesentium, quaerat cupiditate amet dolor similique\n          corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n          Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae\n          eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi\n          voluptatem inventore! Lorem ipsum, dolor sit amet consectetur\n          adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam.\n          Assumenda, hic eius asperiores iure explicabo itaque accusantium,\n          consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum\n          dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus\n          dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores\n          quae nihil minima praesentium, quaerat cupiditate amet dolor similique\n          corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n          Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae\n          eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi\n          voluptatem inventore! Lorem ipsum, dolor sit amet consectetur\n          adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam.\n          Assumenda, hic eius asperiores iure explicabo itaque accusantium,\n          consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum\n          dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus\n          dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores\n          quae nihil minima praesentium, quaerat cupiditate amet dolor similique\n          corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n          Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae\n          eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi\n          voluptatem inventore!\n        </Text>\n      </ModalDialogContent>\n    </States>\n  )\n}\n"],"file":"ModalDialogContent.story.js"}
+{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.story.tsx"],"names":["title","Default","children","hasLogo","footer"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AACEC,MAAAA,QAAQ,eACN,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC,IAAd;AAAmB,QAAA,EAAE,EAAC;AAAtB;AAFJ,KADM,EAQN;AACEA,MAAAA,QAAQ,eACN,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd;AAFJ,KARM,EAkBN;AAAEF,MAAAA,KAAK,EAAE;AAAT,KAlBM,EAmBN;AACEA,MAAAA,KAAK,EACH;AAFJ,KAnBM,EAuBN;AAAEG,MAAAA,OAAO,EAAE;AAAX,KAvBM,EAwBN;AAAEH,MAAAA,KAAK,EAAE,aAAT;AAAwBG,MAAAA,OAAO,EAAE;AAAjC,KAxBM,EAyBN;AACED,MAAAA,QAAQ,eACN,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,gPAFJ;AASEE,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AATV,KAzBM,EAoCN;AAAEJ,MAAAA,KAAK,EAAE,aAAT;AAAwBI,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAAhC,KApCM,EAqCN;AACEJ,MAAAA,KAAK,EACH,kFAFJ;AAGEI,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAHV,KArCM,EA0CN;AACEJ,MAAAA,KAAK,EACH,kFAFJ;AAGEG,MAAAA,OAAO,EAAE,IAHX;AAIEC,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAJV,KA1CM;AADV,kBAmDE,6BAAC,sCAAD;AAAoB,IAAA,OAAO,EAAE,0BAAO,SAAP,CAA7B;AAAgD,IAAA,SAAS,EAAE;AAA3D,kBACE,6BAAC,UAAD;AAAM,IAAA,SAAS,eAAE,6BAAC,cAAD;AAAQ,MAAA,EAAE,EAAE;AAAZ;AAAjB,kBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,0xBADF,eAgBE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC,iBAAnB;AAAqC,IAAA,YAAY,EAAC;AAAlD,IAhBF,eAkBE,6BAAC,YAAD;AACE,IAAA,WAAW,EAAC,kBADd;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,YAAY,EAAC;AAHf,IAlBF,eAwBE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,w5DAxBF,CADF,CAnDF,CADF;AAiHD,CAlHM;;;AAAMH,O","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { Text } from \"../Text\"\nimport { Button } from \"../Button\"\nimport { Input } from \"../Input\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\n\nexport default {\n  title: \"Components/ModalDialogContent\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ModalDialogContentProps>>\n      states={[\n        {\n          children: (\n            <Text variant=\"sm\" bg=\"black10\">\n              Content shorter than width\n            </Text>\n          ),\n        },\n        {\n          children: (\n            <Text variant=\"sm\">\n              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n              neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n              asperiores iure explicabo itaque accusantium, consectetur aut sit\n              maxime culpa ab aliquid consequatur?\n            </Text>\n          ),\n        },\n        { title: \"Modal Title\" },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n        },\n        { hasLogo: true },\n        { title: \"Modal Title\", hasLogo: true },\n        {\n          children: (\n            <Text variant=\"sm\">\n              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n              neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n              asperiores iure explicabo itaque accusantium, consectetur aut sit\n              maxime culpa ab aliquid consequatur?\n            </Text>\n          ),\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        { title: \"Modal Title\", footer: <Button width=\"100%\">Confirm</Button> },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          hasLogo: true,\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n      ]}\n    >\n      <ModalDialogContent onClose={action(\"onClose\")} maxHeight={400}>\n        <Join separator={<Spacer mt={1} />}>\n          <Text variant=\"sm\">\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n            neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n            asperiores iure explicabo itaque accusantium, consectetur aut sit\n            maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet\n            consectetur adipisicing elit. Quam enim vel accusamus dolor\n            voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae\n            nihil minima praesentium, quaerat cupiditate amet dolor similique\n            corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n            Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae\n            eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam\n            nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur\n            adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam.\n          </Text>\n\n          <Input placeholder=\"Enter your name\" autoComplete=\"name\" />\n\n          <Input\n            placeholder=\"Enter your email\"\n            type=\"email\"\n            autoComplete=\"email\"\n          />\n\n          <Text variant=\"sm\">\n            Assumenda, hic eius asperiores iure explicabo itaque accusantium,\n            consectetur aut sit maxime culpa ab aliquid consequatur? Lorem,\n            ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel\n            accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum\n            asperiores quae nihil minima praesentium, quaerat cupiditate amet\n            dolor similique corporis? Lorem, ipsum dolor sit amet consectetur\n            adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro\n            molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur\n            vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit\n            amet consectetur adipisicing elit. Eaque, neque voluptates!\n            Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo\n            itaque accusantium, consectetur aut sit maxime culpa ab aliquid\n            consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing\n            elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta\n            blanditiis debitis rerum asperiores quae nihil minima praesentium,\n            quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor\n            sit amet consectetur adipisicing elit. Quibusdam, eaque placeat\n            mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo\n            ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore!\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n            neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n            asperiores iure explicabo itaque accusantium, consectetur aut sit\n            maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet\n            consectetur adipisicing elit. Quam enim vel accusamus dolor\n            voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae\n            nihil minima praesentium, quaerat cupiditate amet dolor similique\n            corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n            Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae\n            eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam\n            nisi voluptatem inventore!\n          </Text>\n        </Join>\n      </ModalDialogContent>\n    </States>\n  )\n}\n"],"file":"ModalDialogContent.story.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "26.0.1",
+  "version": "26.1.1",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -176,5 +176,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "61f3821ede39890123d411c1ba851398a063f2a8"
+  "gitHead": "3d9344392750033cdf2ebf74c862a152d8949eb8"
 }