@artsy/palette 38.13.4 → 38.14.0

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

@@ -1,14 +1,14 @@
 import React, { FC } from "react";
 import { ClickableProps } from "../Clickable";
 import { BoxProps } from "../Box";
-export interface ModalDialogContentProps extends BoxProps, React.HTMLAttributes<HTMLDivElement> {
+export interface ModalDialogContentProps extends BoxProps, Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     children: React.ReactNode;
     footer?: React.ReactNode;
     hasLogo?: boolean;
     leftPanel?: React.ReactNode;
     onClose: () => void;
     rightPanel?: React.ReactNode;
-    title?: string;
+    title?: React.ReactNode;
     header?: React.ReactNode;
 }
 export declare const ModalDialogContent: React.FC<ModalDialogContentProps>;

package/dist/elements/ModalDialog/ModalDialogContent.js

@@ -1,10 +1,11 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ModalDialogContent = exports.ModalClose = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Clickable = require("../Clickable");
 var _Box = require("../Box");
 var _Flex = require("../Flex");
@@ -18,6 +19,8 @@ var _themeGet = require("@styled-system/theme-get");
 var _Theme = require("../../Theme");
 var _excluded = ["children", "footer", "hasLogo", "leftPanel", "onClose", "rightPanel", "title", "header"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -56,7 +59,7 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
       transition: "box-shadow 250ms",
       boxShadow: isAtTop ? theme.effects.dropShadow : undefined
     }
-  }, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+  }, /*#__PURE__*/(0, _react.isValidElement)(title) ? title : /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
     alignItems: "flex-start",
     justifyContent: "space-between"
   }, (title || hasLogo) && /*#__PURE__*/_react.default.createElement(_Box.Box, {

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

@@ -1 +1 @@
-{"version":3,"file":"ModalDialogContent.js","names":["_react","_interopRequireDefault","require","_Clickable","_Box","_Flex","_Text","_CloseIcon","_ArtsyLogoIcon","_useSentinelVisibility","_Spacer","_styledComponents","_themeGet","_Theme","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ModalDialogContent","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","_useSentinelVisibilit","useSentinelVisibility","topSentinel","sentinel","isAtTop","isSentinelVisible","_useSentinelVisibilit2","bottomSentinel","isAtBottom","_useTheme","useTheme","theme","createElement","Flex","bg","m","style","boxShadow","effects","dropShadow","flexDirection","overflow","width","zIndex","transition","undefined","alignItems","justifyContent","Box","display","height","Spacer","y","Text","variant","lineClamp","hyphenate","ModalClose","onClick","px","pb","flex","WebkitOverflowScrolling","p","exports","displayName","props","Close","ml","fill","styled","Clickable","withConfig","componentId","themeGet"],"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { useTheme } from \"../../Theme\"\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  header?: React.ReactNode\n}\n\nexport const ModalDialogContent: React.FC<ModalDialogContentProps> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\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  const { theme } = useTheme()\n\n  return (\n    <Flex\n      bg=\"white100\"\n      m={2}\n      style={{ boxShadow: theme.effects.dropShadow }}\n      {...rest}\n    >\n      {leftPanel}\n\n      <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n        <Flex\n          flexDirection=\"column\"\n          zIndex={1}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtTop ? theme.effects.dropShadow : undefined,\n          }}\n        >\n          <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n            {(title || hasLogo) && (\n              <Box m={2}>\n                {hasLogo && (\n                  <ArtsyLogoIcon display=\"block\" width={75} height={26} />\n                )}\n\n                {hasLogo && title && <Spacer y={2} />}\n\n                {title && (\n                  <Text variant=\"lg-display\" lineClamp={6} hyphenate>\n                    {title}\n                  </Text>\n                )}\n              </Box>\n            )}\n\n            <ModalClose onClick={onClose} />\n          </Flex>\n\n          {header && (\n            <Box px={2} pb={2}>\n              {header}\n            </Box>\n          )}\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 ? theme.effects.dropShadow : undefined,\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </Flex>\n\n      {rightPanel}\n    </Flex>\n  )\n}\n\nexport type ModalCloseProps = ClickableProps\n\nexport const ModalClose: FC<ModalCloseProps> = (props) => {\n  return (\n    <Close p={2} ml=\"auto\" aria-label=\"Close\" {...props}>\n      <CloseIcon fill=\"currentColor\" display=\"block\" />\n    </Close>\n  )\n}\n\nconst Close = styled(Clickable)`\n  color: ${themeGet(\"colors.black100\")};\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    color: ${themeGet(\"colors.black60\")};\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"ModalDialogContent.js","names":["_react","_interopRequireWildcard","require","_Clickable","_Box","_Flex","_Text","_CloseIcon","_interopRequireDefault","_ArtsyLogoIcon","_useSentinelVisibility","_Spacer","_styledComponents","_themeGet","_Theme","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ModalDialogContent","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","_useSentinelVisibilit","useSentinelVisibility","topSentinel","sentinel","isAtTop","isSentinelVisible","_useSentinelVisibilit2","bottomSentinel","isAtBottom","_useTheme","useTheme","theme","createElement","Flex","bg","m","style","boxShadow","effects","dropShadow","flexDirection","overflow","width","zIndex","transition","undefined","isValidElement","alignItems","justifyContent","Box","display","height","Spacer","y","Text","variant","lineClamp","hyphenate","ModalClose","onClick","px","pb","flex","WebkitOverflowScrolling","p","exports","displayName","props","Close","ml","fill","styled","Clickable","withConfig","componentId","themeGet"],"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"sourcesContent":["import React, { FC, isValidElement } from \"react\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface ModalDialogContentProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  children: React.ReactNode\n  footer?: React.ReactNode\n  hasLogo?: boolean\n  leftPanel?: React.ReactNode\n  onClose: () => void\n  rightPanel?: React.ReactNode\n  title?: React.ReactNode\n  header?: React.ReactNode\n}\n\nexport const ModalDialogContent: React.FC<ModalDialogContentProps> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\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  const { theme } = useTheme()\n\n  return (\n    <Flex\n      bg=\"white100\"\n      m={2}\n      style={{ boxShadow: theme.effects.dropShadow }}\n      {...rest}\n    >\n      {leftPanel}\n\n      <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n        <Flex\n          flexDirection=\"column\"\n          zIndex={1}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtTop ? theme.effects.dropShadow : undefined,\n          }}\n        >\n          {isValidElement(title) ? (\n            title\n          ) : (\n            <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n              {(title || hasLogo) && (\n                <Box m={2}>\n                  {hasLogo && (\n                    <ArtsyLogoIcon display=\"block\" width={75} height={26} />\n                  )}\n\n                  {hasLogo && title && <Spacer y={2} />}\n\n                  {title && (\n                    <Text variant=\"lg-display\" lineClamp={6} hyphenate>\n                      {title}\n                    </Text>\n                  )}\n                </Box>\n              )}\n\n              <ModalClose onClick={onClose} />\n            </Flex>\n          )}\n\n          {header && (\n            <Box px={2} pb={2}>\n              {header}\n            </Box>\n          )}\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 ? theme.effects.dropShadow : undefined,\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </Flex>\n\n      {rightPanel}\n    </Flex>\n  )\n}\n\nexport type ModalCloseProps = ClickableProps\n\nexport const ModalClose: FC<ModalCloseProps> = (props) => {\n  return (\n    <Close p={2} ml=\"auto\" aria-label=\"Close\" {...props}>\n      <CloseIcon fill=\"currentColor\" display=\"block\" />\n    </Close>\n  )\n}\n\nconst Close = styled(Clickable)`\n  color: ${themeGet(\"colors.black100\")};\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    color: ${themeGet(\"colors.black60\")};\n  }\n`\n"],"mappings":"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"}

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

@@ -13,6 +13,10 @@ var _Button = require("../Button");
 var _Input = require("../Input");
 var _Join = require("../Join");
 var _Spacer = require("../Spacer");
+var _Box = require("../Box");
+var _ChevronLeftIcon = _interopRequireDefault(require("@artsy/icons/ChevronLeftIcon"));
+var _ArtsyLogoIcon = _interopRequireDefault(require("@artsy/icons/ArtsyLogoIcon"));
+var _CloseIcon = _interopRequireDefault(require("@artsy/icons/CloseIcon"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
   title: "Components/ModalDialogContent"
@@ -66,6 +70,15 @@ var Default = function Default() {
       footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
         width: "100%"
       }, "Confirm")
+    }, {
+      title: /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        p: 2
+      }, /*#__PURE__*/_react.default.createElement(_ChevronLeftIcon.default, null), /*#__PURE__*/_react.default.createElement(_ArtsyLogoIcon.default, {
+        height: 30
+      }), /*#__PURE__*/_react.default.createElement(_CloseIcon.default, null))
     }]
   }, /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
     onClose: (0, _addonActions.action)("onClose"),

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

@@ -1 +1 @@
-{"version":3,"file":"ModalDialogContent.story.js","names":["_addonActions","require","_react","_interopRequireDefault","_storybookStates","_ModalDialogContent","_Text","_Button","_Input","_Join","_Spacer","obj","__esModule","default","_default","title","exports","EXAMPLE_LONG_NAME","Default","createElement","States","states","children","Text","variant","bg","concat","hasLogo","footer","Button","width","ModalDialogContent","onClose","action","maxHeight","Join","separator","Spacer","y","Input","placeholder","autoComplete","type","displayName"],"sources":["../../../src/elements/ModalDialog/ModalDialogContent.story.tsx"],"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\nconst EXAMPLE_LONG_NAME =\n  \"Egypt, Thebes, Wadi Qubbanet el-Qirud, New Kingdom, Late Dynasty 18 or early Dynasty 19\"\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        { title: \"Pneumonoultramicroscopicsilicovolcanoconiosis\" },\n        {\n          title: `Sign up to discover new works by ${EXAMPLE_LONG_NAME} and more artists you love`,\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 y={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"],"mappings":"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"}
+{"version":3,"file":"ModalDialogContent.story.js","names":["_addonActions","require","_react","_interopRequireDefault","_storybookStates","_ModalDialogContent","_Text","_Button","_Input","_Join","_Spacer","_Box","_ChevronLeftIcon","_ArtsyLogoIcon","_CloseIcon","obj","__esModule","default","_default","title","exports","EXAMPLE_LONG_NAME","Default","createElement","States","states","children","Text","variant","bg","concat","hasLogo","footer","Button","width","Box","display","alignItems","justifyContent","p","height","ModalDialogContent","onClose","action","maxHeight","Join","separator","Spacer","y","Input","placeholder","autoComplete","type","displayName"],"sources":["../../../src/elements/ModalDialog/ModalDialogContent.story.tsx"],"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\"\nimport { Box } from \"../Box\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\n\nexport default {\n  title: \"Components/ModalDialogContent\",\n}\n\nconst EXAMPLE_LONG_NAME =\n  \"Egypt, Thebes, Wadi Qubbanet el-Qirud, New Kingdom, Late Dynasty 18 or early Dynasty 19\"\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        { title: \"Pneumonoultramicroscopicsilicovolcanoconiosis\" },\n        {\n          title: `Sign up to discover new works by ${EXAMPLE_LONG_NAME} and more artists you love`,\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          title: (\n            <Box\n              display=\"flex\"\n              alignItems=\"center\"\n              justifyContent=\"space-between\"\n              p={2}\n            >\n              <ChevronLeftIcon />\n              <ArtsyLogoIcon height={30} />\n              <CloseIcon />\n            </Box>\n          ),\n        },\n      ]}\n    >\n      <ModalDialogContent onClose={action(\"onClose\")} maxHeight={400}>\n        <Join separator={<Spacer y={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"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "38.13.4",
+  "version": "38.14.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -182,5 +182,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "b228d24029846f99840d208851dd2b30bf8be30a"
+  "gitHead": "c524b37db491cea4113aea5c3679ee7de52d10a4"
 }