@artsy/palette 41.0.0-canary.1423.31655.0 → 41.0.0

package/dist/elements/ModalDialog/ModalDialogContent.js

@@ -43,7 +43,7 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
   var _useTheme = (0, _Theme.useTheme)(),
     theme = _useTheme.theme;
   return /*#__PURE__*/_react.default.createElement(_Flex.Flex, _extends({
-    bg: "white100",
+    bg: "mono0",
     m: 2,
     style: {
       boxShadow: theme.effects.dropShadow
@@ -112,5 +112,5 @@ ModalClose.displayName = "ModalClose";
 var Close = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
   displayName: "ModalDialogContent__Close",
   componentId: "sc-ow6myz-0"
-})(["color:", ";&:focus,&:focus-visible{outline:none;color:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black60"));
+})(["color:", ";&:focus,&:focus-visible{outline:none;color:", ";}"], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono60"));
 //# sourceMappingURL=ModalDialogContent.js.map

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

@@ -1 +1 @@
-{"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<React.PropsWithChildren<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<React.PropsWithChildren<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<\n  React.PropsWithChildren<ModalDialogContentProps>\n> = ({\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=\"mono0\"\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<React.PropsWithChildren<ModalCloseProps>> = (\n  props\n) => {\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.mono100\")};\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    color: ${themeGet(\"colors.mono60\")};\n  }\n`\n"],"mappings":"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"}

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

@@ -28,7 +28,7 @@ var Default = function Default() {
     states: [{
       children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
         variant: "sm",
-        bg: "black10"
+        bg: "mono10"
       }, "Content shorter than width")
     }, {
       children: /*#__PURE__*/_react.default.createElement(_Text.Text, {

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","_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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"}
+{"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=\"mono10\">\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/dist/elements/MultiSelect/MultiSelect.js

@@ -122,7 +122,7 @@ var MultiSelect = function MultiSelect(_ref) {
     placement: "top-end"
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs",
-    color: "black60",
+    color: "mono60",
     textAlign: "right"
   }, /*#__PURE__*/_react.default.createElement("u", null, "What is this?"))), /*#__PURE__*/_react.default.createElement(Container, _extends({
     mt: !!title && !description ? 1 : 0,
@@ -144,7 +144,7 @@ var MultiSelect = function MultiSelect(_ref) {
     tabIndex: 0,
     ref: tooltipRef,
     zIndex: 1,
-    bg: "white100",
+    bg: "mono0",
     width: width
   }, options.map(function (option) {
     return /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
@@ -174,11 +174,11 @@ var Options = (0, _styledComponents.default)(_Box.Box).withConfig({
 var Container = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
   displayName: "MultiSelect__Container",
   componentId: "sc-amrkn0-1"
-})(["position:relative;width:100%;padding:16px 24px 16px ", ";font-family:", ";border:1px solid;border-radius:3px;border-color:", ";cursor:pointer;line-height:1;transition:color 0.25s,background-color 0.25s,border-color 0.25s;background-color:", ";", " ", ""], (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.white100"), function (props) {
+})(["position:relative;width:100%;padding:16px 24px 16px ", ";font-family:", ";border:1px solid;border-radius:3px;border-color:", ";cursor:pointer;line-height:1;transition:color 0.25s,background-color 0.25s,border-color 0.25s;background-color:", ";", " ", ""], (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono0"), function (props) {
   return (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " &:hover{", "}", " &:disabled{cursor:default;", "}", ""], _tokens.MULTISELECT_STATES.default, props.complete && _tokens.MULTISELECT_STATES.completed, props.hover && _tokens.MULTISELECT_STATES.hover, props.focus && _tokens.MULTISELECT_STATES.focus, props.disabled && _tokens.MULTISELECT_STATES.disabled, props.error && _tokens.MULTISELECT_STATES.error, _tokens.MULTISELECT_STATES.hover, props.visible && _tokens.MULTISELECT_STATES.focus, _tokens.MULTISELECT_STATES.disabled, props.title && !props.complete && !props.visible && (0, _styledComponents.css)(["color:transparent !important;"]));
 }, _Select.caretMixin);
 var StyledLabel = _styledComponents.default.label.withConfig({
   displayName: "MultiSelect__StyledLabel",
   componentId: "sc-amrkn0-2"
-})(["position:absolute;top:50%;left:5px;padding:0 5px;pointer-events:none;transform:translateY(-50%);transition:", ";transition-property:color,transform,padding,font-size;background-color:", ";font-family:", ";"], _helpers.FORM_ELEMENT_TRANSITION, (0, _themeGet.themeGet)("colors.white100"), (0, _themeGet.themeGet)("fonts.sans"));
+})(["position:absolute;top:50%;left:5px;padding:0 5px;pointer-events:none;transform:translateY(-50%);transition:", ";transition-property:color,transform,padding,font-size;background-color:", ";font-family:", ";"], _helpers.FORM_ELEMENT_TRANSITION, (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("fonts.sans"));
 //# sourceMappingURL=MultiSelect.js.map

package/dist/elements/MultiSelect/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_helpers","_utils","_useUpdateEffect","_useWidthOf2","_Box","_Checkbox","_Select","_Text","_Tooltip","_Clickable","_RequiredField","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","MultiSelect","_ref","complete","description","disabled","error","focus","hover","_ref$name","options","required","title","onSelect","rest","_useState","useState","_useState2","visible","setVisible","_useState3","_useState4","selection","setSelection","useUpdateEffect","tooltipRef","current","anchorRef","onVisible","onHide","useEffect","handleKeydown","event","document","addEventListener","removeEventListener","_usePosition","usePosition","position","offset","active","_useWidthOf","useWidthOf","ref","width","useClickOutside","onClickOutside","when","type","handleSelect","option","selected","prevSelection","nextSelection","concat","filter","_ref2","createElement","Box","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","mt","onClick","lineHeight","StyledLabel","htmlFor","Options","tabIndex","zIndex","bg","map","Checkbox","height","px","includes","text","RequiredField","ml","exports","displayName","styled","withConfig","componentId","themeGet","Clickable","props","css","MULTISELECT_STATES","completed","caretMixin","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Checkbox } from \"../Checkbox\"\nimport { caretMixin, Option } from \"../Select\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { Clickable } from \"../Clickable\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { MULTISELECT_STATES } from \"./tokens\"\n\nexport interface MultiSelectProps extends BoxProps {\n  complete?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  name?: string\n  options: Option[]\n  required?: boolean\n  title?: string\n  onSelect?: (selection: Option[]) => void\n  visible?: boolean\n}\n\n/** A drop-down multi-select menu */\nexport const MultiSelect: React.FC<React.PropsWithChildren<MultiSelectProps>> = ({\n  complete,\n  description,\n  disabled,\n  error,\n  focus,\n  hover,\n  name = \"Select\",\n  options,\n  required,\n  title,\n  onSelect,\n  ...rest\n}) => {\n  const [visible, setVisible] = useState(false)\n  const [selection, setSelection] = useState<Option[]>([])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const onVisible = () => setVisible(true)\n  const onHide = () => setVisible(false)\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [])\n\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: visible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: onHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  const handleSelect = (option: Option) => {\n    return (selected: boolean) => {\n      const prevSelection = selection\n      const nextSelection = selected\n        ? [...prevSelection, option]\n        : prevSelection.filter(({ value }) => option.value !== value)\n\n      setSelection(nextSelection)\n      onSelect?.(nextSelection)\n    }\n  }\n\n  return (\n    <Box width=\"100%\" {...rest}>\n      {!!description && (\n        <Tooltip pointer content={description} placement=\"top-end\">\n          <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n            <u>What is this?</u>\n          </Text>\n        </Tooltip>\n      )}\n\n      <Container\n        mt={!!title && !description ? 1 : 0}\n        ref={anchorRef as any}\n        onClick={onVisible}\n        complete={complete || selection.length > 0}\n        disabled={!!disabled}\n        error={error}\n        focus={!!focus}\n        hover={!!hover}\n        title={title}\n        visible={visible}\n        {...rest}\n      >\n        <Text variant=\"sm\" lineHeight={1}>\n          {selection.length > 0 ? `${selection.length} selected` : name}\n        </Text>\n\n        {!!title && <StyledLabel htmlFor={name}>{title}</StyledLabel>}\n      </Container>\n\n      {visible && (\n        <Options\n          tabIndex={0}\n          ref={tooltipRef as any}\n          zIndex={1}\n          bg=\"white100\"\n          width={width}\n        >\n          {options.map((option) => {\n            return (\n              <Checkbox\n                key={option.value}\n                height={50}\n                px={1}\n                selected={selection.includes(option)}\n                onSelect={handleSelect(option)}\n              >\n                {option.text}\n              </Checkbox>\n            )\n          })}\n        </Options>\n      )}\n\n      {required && !(error && typeof error === \"string\") && (\n        <RequiredField mt={0.5} ml={1} disabled={disabled} />\n      )}\n\n      {error && typeof error === \"string\" && (\n        <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n          {error}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\nconst Options = styled(Box)`\n  position: fixed;\n  z-index: 1;\n  max-height: 300px;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n\ntype ContainerProps = Pick<\n  MultiSelectProps,\n  \"complete\" | \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"visible\"\n>\n\nconst Container = styled(Clickable)<ContainerProps>`\n  position: relative;\n  width: 100%;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 16px 24px 16px ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border: 1px solid;\n  border-radius: 3px;\n  border-color: ${themeGet(\"colors.black30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n  background-color: ${themeGet(\"colors.white100\")};\n\n  ${(props) => {\n    return css`\n      ${MULTISELECT_STATES.default}\n      ${props.complete && MULTISELECT_STATES.completed}\n      ${props.hover && MULTISELECT_STATES.hover}\n      ${props.focus && MULTISELECT_STATES.focus}\n      ${props.disabled && MULTISELECT_STATES.disabled}\n      ${props.error && MULTISELECT_STATES.error}\n    \n      &:hover {\n        ${MULTISELECT_STATES.hover}\n      }\n\n      ${props.visible && MULTISELECT_STATES.focus}\n\n      &:disabled {\n        cursor: default;\n        ${MULTISELECT_STATES.disabled}\n      }\n\n      // Hide text behind title when it's visible\n      ${props.title &&\n      !props.complete &&\n      !props.visible &&\n      css`\n        color: transparent !important;\n      `}\n    `\n  }}\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  background-color: ${themeGet(\"colors.white100\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_helpers","_utils","_useUpdateEffect","_useWidthOf2","_Box","_Checkbox","_Select","_Text","_Tooltip","_Clickable","_RequiredField","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","MultiSelect","_ref","complete","description","disabled","error","focus","hover","_ref$name","options","required","title","onSelect","rest","_useState","useState","_useState2","visible","setVisible","_useState3","_useState4","selection","setSelection","useUpdateEffect","tooltipRef","current","anchorRef","onVisible","onHide","useEffect","handleKeydown","event","document","addEventListener","removeEventListener","_usePosition","usePosition","position","offset","active","_useWidthOf","useWidthOf","ref","width","useClickOutside","onClickOutside","when","type","handleSelect","option","selected","prevSelection","nextSelection","concat","filter","_ref2","createElement","Box","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","mt","onClick","lineHeight","StyledLabel","htmlFor","Options","tabIndex","zIndex","bg","map","Checkbox","height","px","includes","text","RequiredField","ml","exports","displayName","styled","withConfig","componentId","themeGet","Clickable","props","css","MULTISELECT_STATES","completed","caretMixin","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Checkbox } from \"../Checkbox\"\nimport { caretMixin, Option } from \"../Select\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { Clickable } from \"../Clickable\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { MULTISELECT_STATES } from \"./tokens\"\n\nexport interface MultiSelectProps extends BoxProps {\n  complete?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  name?: string\n  options: Option[]\n  required?: boolean\n  title?: string\n  onSelect?: (selection: Option[]) => void\n  visible?: boolean\n}\n\n/** A drop-down multi-select menu */\nexport const MultiSelect: React.FC<\n  React.PropsWithChildren<MultiSelectProps>\n> = ({\n  complete,\n  description,\n  disabled,\n  error,\n  focus,\n  hover,\n  name = \"Select\",\n  options,\n  required,\n  title,\n  onSelect,\n  ...rest\n}) => {\n  const [visible, setVisible] = useState(false)\n  const [selection, setSelection] = useState<Option[]>([])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const onVisible = () => setVisible(true)\n  const onHide = () => setVisible(false)\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [])\n\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: visible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: onHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  const handleSelect = (option: Option) => {\n    return (selected: boolean) => {\n      const prevSelection = selection\n      const nextSelection = selected\n        ? [...prevSelection, option]\n        : prevSelection.filter(({ value }) => option.value !== value)\n\n      setSelection(nextSelection)\n      onSelect?.(nextSelection)\n    }\n  }\n\n  return (\n    <Box width=\"100%\" {...rest}>\n      {!!description && (\n        <Tooltip pointer content={description} placement=\"top-end\">\n          <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n            <u>What is this?</u>\n          </Text>\n        </Tooltip>\n      )}\n\n      <Container\n        mt={!!title && !description ? 1 : 0}\n        ref={anchorRef as any}\n        onClick={onVisible}\n        complete={complete || selection.length > 0}\n        disabled={!!disabled}\n        error={error}\n        focus={!!focus}\n        hover={!!hover}\n        title={title}\n        visible={visible}\n        {...rest}\n      >\n        <Text variant=\"sm\" lineHeight={1}>\n          {selection.length > 0 ? `${selection.length} selected` : name}\n        </Text>\n\n        {!!title && <StyledLabel htmlFor={name}>{title}</StyledLabel>}\n      </Container>\n\n      {visible && (\n        <Options\n          tabIndex={0}\n          ref={tooltipRef as any}\n          zIndex={1}\n          bg=\"mono0\"\n          width={width}\n        >\n          {options.map((option) => {\n            return (\n              <Checkbox\n                key={option.value}\n                height={50}\n                px={1}\n                selected={selection.includes(option)}\n                onSelect={handleSelect(option)}\n              >\n                {option.text}\n              </Checkbox>\n            )\n          })}\n        </Options>\n      )}\n\n      {required && !(error && typeof error === \"string\") && (\n        <RequiredField mt={0.5} ml={1} disabled={disabled} />\n      )}\n\n      {error && typeof error === \"string\" && (\n        <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n          {error}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\nconst Options = styled(Box)`\n  position: fixed;\n  z-index: 1;\n  max-height: 300px;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n\ntype ContainerProps = Pick<\n  MultiSelectProps,\n  \"complete\" | \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"visible\"\n>\n\nconst Container = styled(Clickable)<ContainerProps>`\n  position: relative;\n  width: 100%;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 16px 24px 16px ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border: 1px solid;\n  border-radius: 3px;\n  border-color: ${themeGet(\"colors.mono30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n  background-color: ${themeGet(\"colors.mono0\")};\n\n  ${(props) => {\n    return css`\n      ${MULTISELECT_STATES.default}\n      ${props.complete && MULTISELECT_STATES.completed}\n      ${props.hover && MULTISELECT_STATES.hover}\n      ${props.focus && MULTISELECT_STATES.focus}\n      ${props.disabled && MULTISELECT_STATES.disabled}\n      ${props.error && MULTISELECT_STATES.error}\n    \n      &:hover {\n        ${MULTISELECT_STATES.hover}\n      }\n\n      ${props.visible && MULTISELECT_STATES.focus}\n\n      &:disabled {\n        cursor: default;\n        ${MULTISELECT_STATES.disabled}\n      }\n\n      // Hide text behind title when it's visible\n      ${props.title &&\n      !props.complete &&\n      !props.visible &&\n      css`\n        color: transparent !important;\n      `}\n    `\n  }}\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  background-color: ${themeGet(\"colors.mono0\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}

package/dist/elements/MultiSelect/tokens.js

@@ -7,15 +7,15 @@ exports.MULTISELECT_STATES = void 0;
 var _themeGet = require("@styled-system/theme-get");
 var _styledComponents = require("styled-components");
 var MULTISELECT_STATES = {
-  default: (0, _styledComponents.css)(["height:50px;font-size:", ";color:", ";border-color:", ";& > label{color:", ";font-size:", ";}"], (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize")),
-  focus: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;& > label{color:", ";transform:translateY(-250%);font-size:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
-  hover: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;& > label{color:", ";", "}"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue100"), function (_ref) {
+  default: (0, _styledComponents.css)(["height:50px;font-size:", ";color:", ";border-color:", ";& > label{color:", ";font-size:", ";}"], (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize")),
+  focus: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;& > label{color:", ";transform:translateY(-250%);font-size:", ";}"], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
+  hover: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;& > label{color:", ";", "}"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.blue100"), function (_ref) {
     var complete = _ref.complete;
     return !complete && (0, _styledComponents.css)(["text-decoration:underline;"]);
   }),
-  completed: (0, _styledComponents.css)(["border-color:", ";text-decoration:none;& > label{color:", ";transform:translateY(-250%);font-size:", ";}"], (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
-  disabled: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:none;& > label{color:", ";text-decoration:none;}"], (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30")),
-  error: (0, _styledComponents.css)(["color:", ";border-color:", ";& > label{color:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"))
+  completed: (0, _styledComponents.css)(["border-color:", ";text-decoration:none;& > label{color:", ";transform:translateY(-250%);font-size:", ";}"], (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
+  disabled: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:none;& > label{color:", ";text-decoration:none;}"], (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30")),
+  error: (0, _styledComponents.css)(["color:", ";border-color:", ";& > label{color:", ";}"], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"))
 };
 exports.MULTISELECT_STATES = MULTISELECT_STATES;
 //# sourceMappingURL=tokens.js.map

package/dist/elements/MultiSelect/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","MULTISELECT_STATES","default","css","themeGet","focus","hover","_ref","complete","completed","disabled","error","exports"],"sources":["../../../src/elements/MultiSelect/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, ExecutionContext } from \"styled-components\"\nimport { State } from \"../Select/types\"\n\ninterface MultiSelectProps extends ExecutionContext {\n  complete?: boolean\n}\n\nexport const MULTISELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black30\")};\n\n    & > label {\n      color: ${themeGet(\"colors.black60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    & > label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n    text-decoration: underline;\n\n    & > label {\n      color: ${themeGet(\"colors.blue100\")};\n\n      ${({ complete }: MultiSelectProps) =>\n        !complete &&\n        css`\n          text-decoration: underline;\n        `}\n    }\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.black60\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.black60\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.black30\")};\n    border-color: ${themeGet(\"colors.black30\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.black30\")};\n      text-decoration: none;\n    }\n  `,\n  error: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & > label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAOO,IAAME,kBAAsC,GAAG;EACpDC,OAAO,MAAEC,qBAAG,qGAEG,IAAAC,kBAAQ,EAAC,kCAAkC,CAAC,EAChD,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACtB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,CAE5D;EACDC,KAAK,MAAEF,qBAAG,gIACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAEpD;EACDE,KAAK,MAAEH,qBAAG,yFACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEjC,UAAAG,IAAA;IAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAA,OACX,CAACA,QAAQ,QACTL,qBAAG,iCAEF;EAAA,EAEN;EACDM,SAAS,MAAEN,qBAAG,gHACI,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAEpD;EACDM,QAAQ,MAAEP,qBAAG,qGACF,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAGtC;EACDO,KAAK,MAAER,qBAAG,2DACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAGxC,CAAC;AAAAQ,OAAA,CAAAX,kBAAA,GAAAA,kBAAA"}
+{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","MULTISELECT_STATES","default","css","themeGet","focus","hover","_ref","complete","completed","disabled","error","exports"],"sources":["../../../src/elements/MultiSelect/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, ExecutionContext } from \"styled-components\"\nimport { State } from \"../Select/types\"\n\ninterface MultiSelectProps extends ExecutionContext {\n  complete?: boolean\n}\n\nexport const MULTISELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    & > label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    & > label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: underline;\n\n    & > label {\n      color: ${themeGet(\"colors.blue100\")};\n\n      ${({ complete }: MultiSelectProps) =>\n        !complete &&\n        css`\n          text-decoration: underline;\n        `}\n    }\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.mono60\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.mono30\")};\n      text-decoration: none;\n    }\n  `,\n  error: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & > label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAOO,IAAME,kBAAsC,GAAG;EACpDC,OAAO,MAAEC,qBAAG,qGAEG,IAAAC,kBAAQ,EAAC,kCAAkC,CAAC,EAChD,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EACrB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,CAE5D;EACDC,KAAK,MAAEF,qBAAG,gIACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAEpD;EACDE,KAAK,MAAEH,qBAAG,yFACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAI9B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEjC,UAAAG,IAAA;IAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAA,OACX,CAACA,QAAQ,QACTL,qBAAG,iCAEF;EAAA,EAEN;EACDM,SAAS,MAAEN,qBAAG,gHACI,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAI9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAErB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAEpD;EACDM,QAAQ,MAAEP,qBAAG,qGACF,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAClB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAI9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,CAGrC;EACDO,KAAK,MAAER,qBAAG,2DACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAGxC,CAAC;AAAAQ,OAAA,CAAAX,kBAAA,GAAAA,kBAAA"}

package/dist/elements/Pagination/Pagination.js

@@ -64,7 +64,7 @@ var Pagination = function Pagination(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
     alignItems: "center",
     p: 0.5,
-    color: "black60"
+    color: "mono60"
   }, "\u2026")), around.map(function (pageCursor) {
     return /*#__PURE__*/_react.default.createElement(Page, {
       getHref: getHref,
@@ -75,7 +75,7 @@ var Pagination = function Pagination(_ref) {
   }), last && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
     alignItems: "center",
     p: 0.5,
-    color: "black60"
+    color: "mono60"
   }, "\u2026"), /*#__PURE__*/_react.default.createElement(Page, {
     onClick: onClick,
     pageCursor: last,
@@ -115,10 +115,10 @@ var Page = function Page(_ref2) {
     alignItems: "center",
     p: 0.5
   }, isCurrent ? {
-    color: "black100",
+    color: "mono100",
     "aria-current": "page"
   } : {
-    color: "black60"
+    color: "mono60"
   }, rest), page);
 };
 Page.displayName = "Page";
@@ -134,7 +134,7 @@ var NextPrevButton = function NextPrevButton(_ref3) {
     return /*#__PURE__*/_react.default.createElement(_Flex.Flex, _extends({
       display: "flex",
       alignItems: "center",
-      color: "black30",
+      color: "mono30",
       py: 0.5
     }, rest), children);
   }

package/dist/elements/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["_react","_interopRequireDefault","require","_ChevronLeftIcon","_ChevronRightIcon","_Flex","_Text","_styledComponents","_Box","_Skeleton","_excluded","_excluded2","_excluded3","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","PageLink","styled","a","withConfig","displayName","componentId","boxMixin","exports","Pagination","_ref","getHref","hasNextPage","onClick","onNext","_ref$pageCursors","pageCursors","around","first","last","previous","rest","handlePrevClick","event","cursor","page","handleNextClick","nextPage","createElement","PaginationContainer","NextPrevButton","disabled","pr","mr","height","width","Flex","Fragment","Page","pageCursor","alignItems","p","color","map","pl","ml","_ref2","_ref2$pageCursor","isCurrent","handleClick","href","borderRadius","display","_ref3","children","py","style","opacity","pointerEvents","Text","attrs","as","variant","PaginationSkeleton","SkeletonBox","Box"],"sources":["../../../src/elements/Pagination/Pagination.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport styled from \"styled-components\"\nimport { Box, boxMixin, BoxProps } from \"../Box\"\nimport { SkeletonBox } from \"../Skeleton\"\n\ninterface PageCursor {\n  cursor: string\n  isCurrent: boolean\n  page: number\n}\n\nexport interface PageCursors {\n  around: PageCursor[]\n  first: PageCursor\n  last: PageCursor\n  previous: PageCursor\n}\n\nexport const PageLink = styled.a<BoxProps>`\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n  ${boxMixin}\n`\n\nexport interface PaginationProps extends FlexProps {\n  getHref?: (page: number) => string\n  hasNextPage: boolean\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  onNext?: (event: React.MouseEvent, page: number) => void\n  pageCursors: PageCursors\n  scrollTo?: string\n}\n\n/** Pagination */\nexport const Pagination: React.FC<React.PropsWithChildren<PaginationProps>> = ({\n  getHref,\n  hasNextPage,\n  onClick,\n  onNext,\n  pageCursors: { around, first, last, previous },\n  ...rest\n}) => {\n  const handlePrevClick = (event: React.MouseEvent) => {\n    if (previous) {\n      onClick && onClick(previous.cursor, previous.page, event)\n    }\n  }\n\n  const handleNextClick = (event: React.MouseEvent) => {\n    onNext && onNext(event, nextPage)\n  }\n\n  const nextPage = (previous?.page || 0) + 2\n\n  return (\n    <PaginationContainer {...rest}>\n      <NextPrevButton\n        data-testid=\"prev\"\n        aria-label=\"Previous\"\n        getHref={getHref}\n        onClick={handlePrevClick}\n        page={previous?.page}\n        disabled={!previous}\n        pr={0.5}\n      >\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <Flex>\n        {first && (\n          <>\n            <Page onClick={onClick} pageCursor={first} getHref={getHref} />\n            <Flex alignItems=\"center\" p={0.5} color=\"black60\">\n              …\n            </Flex>\n          </>\n        )}\n\n        {around.map((pageCursor) => {\n          return (\n            <Page\n              getHref={getHref}\n              key={pageCursor.page}\n              onClick={onClick}\n              pageCursor={pageCursor}\n            />\n          )\n        })}\n\n        {last && (\n          <>\n            <Flex alignItems=\"center\" p={0.5} color=\"black60\">\n              …\n            </Flex>\n\n            <Page onClick={onClick} pageCursor={last} getHref={getHref} />\n          </>\n        )}\n      </Flex>\n\n      <NextPrevButton\n        data-testid=\"next\"\n        getHref={getHref}\n        onClick={handleNextClick}\n        page={nextPage}\n        disabled={!hasNextPage}\n        pl={0.5}\n      >\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n\ninterface PageProps extends BoxProps {\n  getHref?: (page: number) => string\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  pageCursor: PageCursor\n}\n\nconst Page: React.FC<React.PropsWithChildren<PageProps>> = ({\n  getHref,\n  onClick,\n  pageCursor: { cursor, isCurrent, page },\n  ...rest\n}) => {\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n  ) => {\n    onClick && onClick(cursor, page, event)\n  }\n\n  const href = page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  return (\n    <PageLink\n      href={href}\n      onClick={handleClick}\n      borderRadius={2}\n      display=\"flex\"\n      alignItems=\"center\"\n      p={0.5}\n      {...(isCurrent\n        ? { color: \"black100\", \"aria-current\": \"page\" }\n        : { color: \"black60\" })}\n      {...rest}\n    >\n      {page}\n    </PageLink>\n  )\n}\n\nexport interface NextPrevButtonProps extends BoxProps {\n  disabled: boolean\n  getHref?: (page: number) => string\n  onClick?: (event: React.MouseEvent) => void\n  page?: number\n}\n\nconst NextPrevButton: React.FC<React.PropsWithChildren<NextPrevButtonProps>> = ({\n  disabled,\n  getHref,\n  onClick,\n  page,\n  children,\n  ...rest\n}) => {\n  const href =\n    !disabled && page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  if (disabled) {\n    return (\n      <Flex\n        display=\"flex\"\n        alignItems=\"center\"\n        color=\"black30\"\n        py={0.5}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    )\n  }\n\n  return (\n    <PageLink\n      href={href}\n      onClick={onClick}\n      display=\"flex\"\n      alignItems=\"center\"\n      py={0.5}\n      style={\n        !disabled\n          ? {\n              opacity: 1,\n              pointerEvents: \"inherit\",\n            }\n          : {\n              opacity: 0.1,\n              pointerEvents: \"none\",\n            }\n      }\n      {...rest}\n    >\n      {children}\n    </PageLink>\n  )\n}\n\nconst PaginationContainer = styled(Text).attrs({\n  as: \"nav\",\n  \"aria-label\": \"Pagination\",\n  variant: \"sm\",\n})`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  line-height: 1;\n`\n\nexport const PaginationSkeleton: FC<React.PropsWithChildren<unknown>> = () => {\n  return (\n    <PaginationContainer aria-hidden>\n      <NextPrevButton disabled pr={0.5}>\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <SkeletonBox width={100}>\n        <Box opacity={0}>0</Box>\n      </SkeletonBox>\n\n      <NextPrevButton disabled pl={0.5}>\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["_react","_interopRequireDefault","require","_ChevronLeftIcon","_ChevronRightIcon","_Flex","_Text","_styledComponents","_Box","_Skeleton","_excluded","_excluded2","_excluded3","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","PageLink","styled","a","withConfig","displayName","componentId","boxMixin","exports","Pagination","_ref","getHref","hasNextPage","onClick","onNext","_ref$pageCursors","pageCursors","around","first","last","previous","rest","handlePrevClick","event","cursor","page","handleNextClick","nextPage","createElement","PaginationContainer","NextPrevButton","disabled","pr","mr","height","width","Flex","Fragment","Page","pageCursor","alignItems","p","color","map","pl","ml","_ref2","_ref2$pageCursor","isCurrent","handleClick","href","borderRadius","display","_ref3","children","py","style","opacity","pointerEvents","Text","attrs","as","variant","PaginationSkeleton","SkeletonBox","Box"],"sources":["../../../src/elements/Pagination/Pagination.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport styled from \"styled-components\"\nimport { Box, boxMixin, BoxProps } from \"../Box\"\nimport { SkeletonBox } from \"../Skeleton\"\n\ninterface PageCursor {\n  cursor: string\n  isCurrent: boolean\n  page: number\n}\n\nexport interface PageCursors {\n  around: PageCursor[]\n  first: PageCursor\n  last: PageCursor\n  previous: PageCursor\n}\n\nexport const PageLink = styled.a<BoxProps>`\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n  ${boxMixin}\n`\n\nexport interface PaginationProps extends FlexProps {\n  getHref?: (page: number) => string\n  hasNextPage: boolean\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  onNext?: (event: React.MouseEvent, page: number) => void\n  pageCursors: PageCursors\n  scrollTo?: string\n}\n\n/** Pagination */\nexport const Pagination: React.FC<React.PropsWithChildren<PaginationProps>> = ({\n  getHref,\n  hasNextPage,\n  onClick,\n  onNext,\n  pageCursors: { around, first, last, previous },\n  ...rest\n}) => {\n  const handlePrevClick = (event: React.MouseEvent) => {\n    if (previous) {\n      onClick && onClick(previous.cursor, previous.page, event)\n    }\n  }\n\n  const handleNextClick = (event: React.MouseEvent) => {\n    onNext && onNext(event, nextPage)\n  }\n\n  const nextPage = (previous?.page || 0) + 2\n\n  return (\n    <PaginationContainer {...rest}>\n      <NextPrevButton\n        data-testid=\"prev\"\n        aria-label=\"Previous\"\n        getHref={getHref}\n        onClick={handlePrevClick}\n        page={previous?.page}\n        disabled={!previous}\n        pr={0.5}\n      >\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <Flex>\n        {first && (\n          <>\n            <Page onClick={onClick} pageCursor={first} getHref={getHref} />\n            <Flex alignItems=\"center\" p={0.5} color=\"mono60\">\n              …\n            </Flex>\n          </>\n        )}\n\n        {around.map((pageCursor) => {\n          return (\n            <Page\n              getHref={getHref}\n              key={pageCursor.page}\n              onClick={onClick}\n              pageCursor={pageCursor}\n            />\n          )\n        })}\n\n        {last && (\n          <>\n            <Flex alignItems=\"center\" p={0.5} color=\"mono60\">\n              …\n            </Flex>\n\n            <Page onClick={onClick} pageCursor={last} getHref={getHref} />\n          </>\n        )}\n      </Flex>\n\n      <NextPrevButton\n        data-testid=\"next\"\n        getHref={getHref}\n        onClick={handleNextClick}\n        page={nextPage}\n        disabled={!hasNextPage}\n        pl={0.5}\n      >\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n\ninterface PageProps extends BoxProps {\n  getHref?: (page: number) => string\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  pageCursor: PageCursor\n}\n\nconst Page: React.FC<React.PropsWithChildren<PageProps>> = ({\n  getHref,\n  onClick,\n  pageCursor: { cursor, isCurrent, page },\n  ...rest\n}) => {\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n  ) => {\n    onClick && onClick(cursor, page, event)\n  }\n\n  const href = page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  return (\n    <PageLink\n      href={href}\n      onClick={handleClick}\n      borderRadius={2}\n      display=\"flex\"\n      alignItems=\"center\"\n      p={0.5}\n      {...(isCurrent\n        ? { color: \"mono100\", \"aria-current\": \"page\" }\n        : { color: \"mono60\" })}\n      {...rest}\n    >\n      {page}\n    </PageLink>\n  )\n}\n\nexport interface NextPrevButtonProps extends BoxProps {\n  disabled: boolean\n  getHref?: (page: number) => string\n  onClick?: (event: React.MouseEvent) => void\n  page?: number\n}\n\nconst NextPrevButton: React.FC<\n  React.PropsWithChildren<NextPrevButtonProps>\n> = ({ disabled, getHref, onClick, page, children, ...rest }) => {\n  const href =\n    !disabled && page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  if (disabled) {\n    return (\n      <Flex\n        display=\"flex\"\n        alignItems=\"center\"\n        color=\"mono30\"\n        py={0.5}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    )\n  }\n\n  return (\n    <PageLink\n      href={href}\n      onClick={onClick}\n      display=\"flex\"\n      alignItems=\"center\"\n      py={0.5}\n      style={\n        !disabled\n          ? {\n              opacity: 1,\n              pointerEvents: \"inherit\",\n            }\n          : {\n              opacity: 0.1,\n              pointerEvents: \"none\",\n            }\n      }\n      {...rest}\n    >\n      {children}\n    </PageLink>\n  )\n}\n\nconst PaginationContainer = styled(Text).attrs({\n  as: \"nav\",\n  \"aria-label\": \"Pagination\",\n  variant: \"sm\",\n})`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  line-height: 1;\n`\n\nexport const PaginationSkeleton: FC<React.PropsWithChildren<unknown>> = () => {\n  return (\n    <PaginationContainer aria-hidden>\n      <NextPrevButton disabled pr={0.5}>\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <SkeletonBox width={100}>\n        <Box opacity={0}>0</Box>\n      </SkeletonBox>\n\n      <NextPrevButton disabled pl={0.5}>\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/PhoneInput/PhoneInput.js

@@ -282,7 +282,7 @@ exports.PhoneInput = PhoneInput;
 PhoneInput.displayName = "PhoneInput";
 var caretMixin = (0, _styledComponents.css)(["&::after{content:\"\";cursor:inherit;width:0;height:0;position:absolute;top:50%;transform:translateY(-50%);right:", ";pointer-events:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid ", ";}"], (0, _themeGet.themeGet)("space.1"), function (_ref4) {
   var disabled = _ref4.disabled;
-  return disabled ? (0, _themeGet.themeGet)("colors.black10") : (0, _themeGet.themeGet)("colors.black60");
+  return disabled ? (0, _themeGet.themeGet)("colors.mono10") : (0, _themeGet.themeGet)("colors.mono60");
 });
 var ContainerBox = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "PhoneInput__ContainerBox",
@@ -293,11 +293,11 @@ var ContainerBox = (0, _styledComponents.default)(_Box.Box).withConfig({
 var SelectContainer = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "PhoneInput__SelectContainer",
   componentId: "sc-lj1bt9-1"
-})(["display:flex;align-items:center;position:relative;min-width:120px;border:1px solid;border-right:0;padding:0 24px 0 ", ";font-family:", ";border-radius:3px 0 0 3px;border-color:", ";cursor:pointer;line-height:1;transition:color 0.25s,border-color 0.25s;height:50px;font-size:", ";color:", ";", ""], (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.black100"), caretMixin);
+})(["display:flex;align-items:center;position:relative;min-width:120px;border:1px solid;border-right:0;padding:0 24px 0 ", ";font-family:", ";border-radius:3px 0 0 3px;border-color:", ";cursor:pointer;line-height:1;transition:color 0.25s,border-color 0.25s;height:50px;font-size:", ";color:", ";", ""], (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.mono100"), caretMixin);
 var SelectDropdown = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "PhoneInput__SelectDropdown",
   componentId: "sc-lj1bt9-2"
-})(["box-shadow:", ";z-index:1;background:", ";"], (0, _themeGet.themeGet)("effects.dropShadow"), (0, _themeGet.themeGet)("colors.white100"));
+})(["box-shadow:", ";z-index:1;background:", ";"], (0, _themeGet.themeGet)("effects.dropShadow"), (0, _themeGet.themeGet)("colors.mono0"));
 var SelectOptions = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "PhoneInput__SelectOptions",
   componentId: "sc-lj1bt9-3"
@@ -305,15 +305,15 @@ var SelectOptions = (0, _styledComponents.default)(_Box.Box).withConfig({
 var SelectOption = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "PhoneInput__SelectOption",
   componentId: "sc-lj1bt9-4"
-})(["padding:", " 0;cursor:pointer;display:flex;flex-direction:row;align-items:center;text-decoration:none;color:", ";transition:color 0.25s,text-decoration 0.25s;&:hover{color:", ";text-decoration:underline;}&:focus,&:active{color:", ";text-decoration:none;}", ""], (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black100"), function (props) {
-  return props.selected && (0, _styledComponents.css)(["color:", ";text-decoration:none;"], (0, _themeGet.themeGet)("colors.black100"));
+})(["padding:", " 0;cursor:pointer;display:flex;flex-direction:row;align-items:center;text-decoration:none;color:", ";transition:color 0.25s,text-decoration 0.25s;&:hover{color:", ";text-decoration:underline;}&:focus,&:active{color:", ";text-decoration:none;}", ""], (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.mono100"), function (props) {
+  return props.selected && (0, _styledComponents.css)(["color:", ";text-decoration:none;"], (0, _themeGet.themeGet)("colors.mono100"));
 });
 var StyledInput = _styledComponents.default.input.withConfig({
   displayName: "PhoneInput__StyledInput",
   componentId: "sc-lj1bt9-5"
-})(["width:100%;background-color:", ";padding:0 ", ";appearance:none;outline:none;line-height:1;border:1px solid;border-radius:0 3px 3px 0;transition:color 0.25s,border-color 0.25s;font-family:", ";font-size:", ";color:", ";border-color:", ";", " ::placeholder{color:", ";transition:color 0.25s;}"], (0, _themeGet.themeGet)("colors.white100"), (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black30"), _styledSystem.height, (0, _themeGet.themeGet)("colors.black60"));
+})(["width:100%;background-color:", ";padding:0 ", ";appearance:none;outline:none;line-height:1;border:1px solid;border-radius:0 3px 3px 0;transition:color 0.25s,border-color 0.25s;font-family:", ";font-size:", ";color:", ";border-color:", ";", " ::placeholder{color:", ";transition:color 0.25s;}"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono30"), _styledSystem.height, (0, _themeGet.themeGet)("colors.mono60"));
 var StyledLabel = _styledComponents.default.label.withConfig({
   displayName: "PhoneInput__StyledLabel",
   componentId: "sc-lj1bt9-6"
-})(["position:absolute;top:0;left:5px;padding:0 5px;background-color:transparent;transform:translateY(-50%);transition:color 0.25s;font-family:", ";pointer-events:none;font-size:", ";color:", ";& > span{background-color:", ";height:2px;width:100%;display:block;position:absolute;top:50%;left:0;z-index:-1;}"], (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.white100"));
+})(["position:absolute;top:0;left:5px;padding:0 5px;background-color:transparent;transform:translateY(-50%);transition:color 0.25s;font-family:", ";pointer-events:none;font-size:", ";color:", ";& > span{background-color:", ";height:2px;width:100%;display:block;position:absolute;top:50%;left:0;z-index:-1;}"], (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono0"));
 //# sourceMappingURL=PhoneInput.js.map