@artsy/palette 41.8.1 → 42.0.0

package/dist/elements/ReadMore/ReadMore.js

@@ -17,11 +17,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /** ReadMore */
-var ReadMore = function ReadMore(_ref) {
+var ReadMore = exports.ReadMore = function ReadMore(_ref) {
   var expandedHTML = _ref.content,
     disabled = _ref.disabled,
     _ref$inlineReadMoreLi = _ref.inlineReadMoreLink,
@@ -85,7 +85,6 @@ var ReadMore = function ReadMore(_ref) {
     }
   }, "Read more")));
 };
-exports.ReadMore = ReadMore;
 ReadMore.displayName = "ReadMore";
 var Container = _styledComponents.default.div.withConfig({
   displayName: "ReadMore__Container",

package/dist/elements/ReadMore/ReadMore.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReadMore.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_truncHtml","_Clickable","_Text","_Box","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","ReadMore","_ref","expandedHTML","content","disabled","_ref$inlineReadMoreLi","inlineReadMoreLink","isExpanded","_ref$maxChars","maxChars","Infinity","onReadLessClicked","onReadMoreClicked","_useState","useState","_useState2","expanded","setExpanded","charCount","replace","HTML_TAG_REGEX","truncatedHTML","truncate","html","visible","handleClick","expandedState","createElement","dangerouslySetInnerHTML","__html","Container","Fragment","Box","Clickable","cursor","textDecoration","onClick","Text","variant","fontWeight","as","style","exports","displayName","styled","div","withConfig","componentId"],"sources":["../../../src/elements/ReadMore/ReadMore.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport truncate from \"trunc-html\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { Box } from \"../Box\"\n\nexport interface ReadMoreProps {\n  content: string\n  disabled?: boolean\n  inlineReadMoreLink?: boolean\n  isExpanded?: boolean\n  maxChars?: number\n  onReadLessClicked?: () => void\n  onReadMoreClicked?: () => void\n}\n\n/** ReadMore */\nexport const ReadMore: React.FC<React.PropsWithChildren<ReadMoreProps>> = ({\n  content: expandedHTML,\n  disabled,\n  inlineReadMoreLink = true,\n  isExpanded,\n  maxChars = Infinity,\n  onReadLessClicked,\n  onReadMoreClicked,\n}) => {\n  const [expanded, setExpanded] = useState(!!isExpanded)\n\n  if (typeof expandedHTML !== \"string\") return null\n\n  const charCount = expandedHTML.replace(HTML_TAG_REGEX, \"\").length\n\n  const truncatedHTML = truncate(expandedHTML, maxChars).html\n\n  const visible = charCount > maxChars\n\n  const handleClick = () => {\n    if (disabled) return\n    setExpanded((expandedState) => !expandedState)\n\n    expanded\n      ? onReadLessClicked && onReadLessClicked()\n      : onReadMoreClicked && onReadMoreClicked()\n  }\n\n  if (!visible) {\n    return (\n      <span\n        dangerouslySetInnerHTML={{\n          __html: expandedHTML,\n        }}\n      />\n    )\n  }\n\n  return (\n    <Container aria-expanded={expanded}>\n      {expanded ? (\n        <>\n          <Box dangerouslySetInnerHTML={{ __html: expandedHTML }} />\n\n          <Clickable\n            cursor=\"pointer\"\n            textDecoration=\"underline\"\n            onClick={handleClick}\n          >\n            <Text variant=\"xs\" fontWeight=\"bold\">\n              Read less\n            </Text>\n          </Clickable>\n        </>\n      ) : (\n        <Clickable onClick={handleClick}>\n          {inlineReadMoreLink ? (\n            <>\n              <span dangerouslySetInnerHTML={{ __html: truncatedHTML }} />{\" \"}\n            </>\n          ) : (\n            <Box dangerouslySetInnerHTML={{ __html: truncatedHTML }} />\n          )}\n\n          <Text\n            as=\"span\"\n            variant=\"xs\"\n            fontWeight=\"bold\"\n            style={{ textDecoration: \"underline\" }}\n          >\n            Read more\n          </Text>\n        </Clickable>\n      )}\n    </Container>\n  )\n}\n\nconst Container = styled.div`\n  > * > span > *:last-child {\n    display: inherit;\n  }\n`\n\nContainer.displayName = \"Container\"\n\nconst HTML_TAG_REGEX = /(<([^>]+)>)/gi\n"],"mappings":"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"}
+{"version":3,"file":"ReadMore.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_truncHtml","_Clickable","_Text","_Box","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","ReadMore","exports","_ref","expandedHTML","content","disabled","_ref$inlineReadMoreLi","inlineReadMoreLink","isExpanded","_ref$maxChars","maxChars","Infinity","onReadLessClicked","onReadMoreClicked","_useState","useState","_useState2","expanded","setExpanded","charCount","replace","HTML_TAG_REGEX","truncatedHTML","truncate","html","visible","handleClick","expandedState","createElement","dangerouslySetInnerHTML","__html","Container","Fragment","Box","Clickable","cursor","textDecoration","onClick","Text","variant","fontWeight","as","style","displayName","styled","div","withConfig","componentId"],"sources":["../../../src/elements/ReadMore/ReadMore.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport truncate from \"trunc-html\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { Box } from \"../Box\"\n\nexport interface ReadMoreProps {\n  content: string\n  disabled?: boolean\n  inlineReadMoreLink?: boolean\n  isExpanded?: boolean\n  maxChars?: number\n  onReadLessClicked?: () => void\n  onReadMoreClicked?: () => void\n}\n\n/** ReadMore */\nexport const ReadMore: React.FC<React.PropsWithChildren<ReadMoreProps>> = ({\n  content: expandedHTML,\n  disabled,\n  inlineReadMoreLink = true,\n  isExpanded,\n  maxChars = Infinity,\n  onReadLessClicked,\n  onReadMoreClicked,\n}) => {\n  const [expanded, setExpanded] = useState(!!isExpanded)\n\n  if (typeof expandedHTML !== \"string\") return null\n\n  const charCount = expandedHTML.replace(HTML_TAG_REGEX, \"\").length\n\n  const truncatedHTML = truncate(expandedHTML, maxChars).html\n\n  const visible = charCount > maxChars\n\n  const handleClick = () => {\n    if (disabled) return\n    setExpanded((expandedState) => !expandedState)\n\n    expanded\n      ? onReadLessClicked && onReadLessClicked()\n      : onReadMoreClicked && onReadMoreClicked()\n  }\n\n  if (!visible) {\n    return (\n      <span\n        dangerouslySetInnerHTML={{\n          __html: expandedHTML,\n        }}\n      />\n    )\n  }\n\n  return (\n    <Container aria-expanded={expanded}>\n      {expanded ? (\n        <>\n          <Box dangerouslySetInnerHTML={{ __html: expandedHTML }} />\n\n          <Clickable\n            cursor=\"pointer\"\n            textDecoration=\"underline\"\n            onClick={handleClick}\n          >\n            <Text variant=\"xs\" fontWeight=\"bold\">\n              Read less\n            </Text>\n          </Clickable>\n        </>\n      ) : (\n        <Clickable onClick={handleClick}>\n          {inlineReadMoreLink ? (\n            <>\n              <span dangerouslySetInnerHTML={{ __html: truncatedHTML }} />{\" \"}\n            </>\n          ) : (\n            <Box dangerouslySetInnerHTML={{ __html: truncatedHTML }} />\n          )}\n\n          <Text\n            as=\"span\"\n            variant=\"xs\"\n            fontWeight=\"bold\"\n            style={{ textDecoration: \"underline\" }}\n          >\n            Read more\n          </Text>\n        </Clickable>\n      )}\n    </Container>\n  )\n}\n\nconst Container = styled.div`\n  > * > span > *:last-child {\n    display: inherit;\n  }\n`\n\nContainer.displayName = \"Container\"\n\nconst HTML_TAG_REGEX = /(<([^>]+)>)/gi\n"],"mappings":"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"}

package/dist/elements/ReadMore/ReadMore.story.js

@@ -9,66 +9,60 @@ var _HTML = require("../HTML");
 var _ReadMore = require("./ReadMore");
 var _Box = require("../Box");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = {
+var _default = exports.default = {
   title: "Components/ReadMore"
 };
-exports.default = _default;
-var WithCharacterCap = function WithCharacterCap() {
+var WithCharacterCap = exports.WithCharacterCap = function WithCharacterCap() {
   return /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
     maxChars: 300,
     content: "<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>"
   });
 };
-exports.WithCharacterCap = WithCharacterCap;
 WithCharacterCap.displayName = "WithCharacterCap";
 WithCharacterCap.story = {
   name: "With character cap"
 };
-var ShortContent = function ShortContent() {
+var ShortContent = exports.ShortContent = function ShortContent() {
   return /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
     maxChars: 300,
     content: "<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>.\n        </div>"
   });
 };
-exports.ShortContent = ShortContent;
 ShortContent.displayName = "ShortContent";
 ShortContent.story = {
   name: "Short content"
 };
-var AsString = function AsString() {
+var AsString = exports.AsString = function AsString() {
   return /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
     maxChars: 300,
     content: "Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa. Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa."
   });
 };
-exports.AsString = AsString;
 AsString.displayName = "AsString";
 AsString.story = {
   name: "As string"
 };
-var CharacterCapWithHtml = function CharacterCapWithHtml() {
+var CharacterCapWithHtml = exports.CharacterCapWithHtml = function CharacterCapWithHtml() {
   return /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
     maxChars: 300,
     content: "<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>"
   });
 };
-exports.CharacterCapWithHtml = CharacterCapWithHtml;
 CharacterCapWithHtml.displayName = "CharacterCapWithHtml";
 CharacterCapWithHtml.story = {
   name: "Character cap with HTML"
 };
-var WithCustomizableTypography = function WithCustomizableTypography() {
+var WithCustomizableTypography = exports.WithCustomizableTypography = function WithCustomizableTypography() {
   return /*#__PURE__*/_react.default.createElement(_HTML.HTML, null, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
     maxChars: 300,
     content: "\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>"
   }));
 };
-exports.WithCustomizableTypography = WithCustomizableTypography;
 WithCustomizableTypography.displayName = "WithCustomizableTypography";
 WithCustomizableTypography.story = {
   name: "With customizable typography"
 };
-var WithCustomizableTypography2 = function WithCustomizableTypography2() {
+var WithCustomizableTypography2 = exports.WithCustomizableTypography2 = function WithCustomizableTypography2() {
   return /*#__PURE__*/_react.default.createElement(_HTML.HTML, {
     variant: "lg"
   }, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
@@ -76,24 +70,22 @@ var WithCustomizableTypography2 = function WithCustomizableTypography2() {
     content: "<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>"
   }));
 };
-exports.WithCustomizableTypography2 = WithCustomizableTypography2;
 WithCustomizableTypography2.displayName = "WithCustomizableTypography2";
 WithCustomizableTypography2.story = {
   name: "With customizable typography (2)"
 };
-var CharacterCapWithHtmlDisabled = function CharacterCapWithHtmlDisabled() {
+var CharacterCapWithHtmlDisabled = exports.CharacterCapWithHtmlDisabled = function CharacterCapWithHtmlDisabled() {
   return /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
     disabled: true,
     maxChars: 300,
     content: "<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>"
   });
 };
-exports.CharacterCapWithHtmlDisabled = CharacterCapWithHtmlDisabled;
 CharacterCapWithHtmlDisabled.displayName = "CharacterCapWithHtmlDisabled";
 CharacterCapWithHtmlDisabled.story = {
   name: "Character cap with html (disabled)"
 };
-var WithBottomReadMore = function WithBottomReadMore() {
+var WithBottomReadMore = exports.WithBottomReadMore = function WithBottomReadMore() {
   return /*#__PURE__*/_react.default.createElement(_Box.Box, {
     textAlign: "center",
     width: 600
@@ -105,7 +97,6 @@ var WithBottomReadMore = function WithBottomReadMore() {
     content: "<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>"
   })));
 };
-exports.WithBottomReadMore = WithBottomReadMore;
 WithBottomReadMore.displayName = "WithBottomReadMore";
 WithBottomReadMore.story = {
   name: "With bottom placed 'Read More'"

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

@@ -1 +1 @@
-{"version":3,"file":"ReadMore.story.js","names":["_react","_interopRequireDefault","require","_HTML","_ReadMore","_Box","obj","__esModule","default","_default","title","exports","WithCharacterCap","createElement","ReadMore","maxChars","content","displayName","story","name","ShortContent","AsString","CharacterCapWithHtml","WithCustomizableTypography","HTML","WithCustomizableTypography2","variant","CharacterCapWithHtmlDisabled","disabled","WithBottomReadMore","Box","textAlign","width","inlineReadMoreLink"],"sources":["../../../src/elements/ReadMore/ReadMore.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { HTML } from \"../HTML\"\nimport { ReadMore } from \"./ReadMore\"\nimport { Box } from \"../Box\"\n\nexport default {\n  title: \"Components/ReadMore\",\n}\n\nexport const WithCharacterCap = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nWithCharacterCap.story = {\n  name: \"With character cap\",\n}\n\nexport const ShortContent = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>.\n        </div>`}\n    />\n  )\n}\n\nShortContent.story = {\n  name: \"Short content\",\n}\n\nexport const AsString = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content=\"Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa. Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa.\"\n    />\n  )\n}\n\nAsString.story = {\n  name: \"As string\",\n}\n\nexport const CharacterCapWithHtml = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>`}\n    />\n  )\n}\n\nCharacterCapWithHtml.story = {\n  name: \"Character cap with HTML\",\n}\n\nexport const WithCustomizableTypography = () => {\n  return (\n    <HTML>\n      <ReadMore\n        maxChars={300}\n        content={`\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography.story = {\n  name: \"With customizable typography\",\n}\n\nexport const WithCustomizableTypography2 = () => {\n  return (\n    <HTML variant=\"lg\">\n      <ReadMore\n        maxChars={300}\n        content={`<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography2.story = {\n  name: \"With customizable typography (2)\",\n}\n\nexport const CharacterCapWithHtmlDisabled = () => {\n  return (\n    <ReadMore\n      disabled\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nCharacterCapWithHtmlDisabled.story = {\n  name: \"Character cap with html (disabled)\",\n}\n\nexport const WithBottomReadMore = () => {\n  return (\n    <Box textAlign=\"center\" width={600}>\n      <HTML variant=\"lg\">\n        <ReadMore\n          inlineReadMoreLink={false}\n          maxChars={280}\n          content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n        />\n      </HTML>\n    </Box>\n  )\n}\n\nWithBottomReadMore.story = {\n  name: \"With bottom placed 'Read More'\",\n}\n"],"mappings":"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"}
+{"version":3,"file":"ReadMore.story.js","names":["_react","_interopRequireDefault","require","_HTML","_ReadMore","_Box","obj","__esModule","default","_default","exports","title","WithCharacterCap","createElement","ReadMore","maxChars","content","displayName","story","name","ShortContent","AsString","CharacterCapWithHtml","WithCustomizableTypography","HTML","WithCustomizableTypography2","variant","CharacterCapWithHtmlDisabled","disabled","WithBottomReadMore","Box","textAlign","width","inlineReadMoreLink"],"sources":["../../../src/elements/ReadMore/ReadMore.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { HTML } from \"../HTML\"\nimport { ReadMore } from \"./ReadMore\"\nimport { Box } from \"../Box\"\n\nexport default {\n  title: \"Components/ReadMore\",\n}\n\nexport const WithCharacterCap = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nWithCharacterCap.story = {\n  name: \"With character cap\",\n}\n\nexport const ShortContent = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>.\n        </div>`}\n    />\n  )\n}\n\nShortContent.story = {\n  name: \"Short content\",\n}\n\nexport const AsString = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content=\"Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa. Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa.\"\n    />\n  )\n}\n\nAsString.story = {\n  name: \"As string\",\n}\n\nexport const CharacterCapWithHtml = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>`}\n    />\n  )\n}\n\nCharacterCapWithHtml.story = {\n  name: \"Character cap with HTML\",\n}\n\nexport const WithCustomizableTypography = () => {\n  return (\n    <HTML>\n      <ReadMore\n        maxChars={300}\n        content={`\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography.story = {\n  name: \"With customizable typography\",\n}\n\nexport const WithCustomizableTypography2 = () => {\n  return (\n    <HTML variant=\"lg\">\n      <ReadMore\n        maxChars={300}\n        content={`<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography2.story = {\n  name: \"With customizable typography (2)\",\n}\n\nexport const CharacterCapWithHtmlDisabled = () => {\n  return (\n    <ReadMore\n      disabled\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nCharacterCapWithHtmlDisabled.story = {\n  name: \"Character cap with html (disabled)\",\n}\n\nexport const WithBottomReadMore = () => {\n  return (\n    <Box textAlign=\"center\" width={600}>\n      <HTML variant=\"lg\">\n        <ReadMore\n          inlineReadMoreLink={false}\n          maxChars={280}\n          content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n        />\n      </HTML>\n    </Box>\n  )\n}\n\nWithBottomReadMore.story = {\n  name: \"With bottom placed 'Read More'\",\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,IAAA,GAAAH,OAAA;AAA4B,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEb;EACbG,KAAK,EAAE;AACT,CAAC;AAEM,IAAMC,gBAAgB,GAAAF,OAAA,CAAAE,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;EACpC,oBACEZ,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,SAAA,CAAAU,QAAQ;IACPC,QAAQ,EAAE,GAAI;IACdC,OAAO;EAQG,EACV;AAEN,CAAC;AAfYJ,gBAAgB,CAAAK,WAAA;AAiB7BL,gBAAgB,CAACM,KAAK,GAAG;EACvBC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMC,YAAY,GAAAV,OAAA,CAAAU,YAAA,GAAG,SAAfA,YAAYA,CAAA,EAAS;EAChC,oBACEpB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,SAAA,CAAAU,QAAQ;IACPC,QAAQ,EAAE,GAAI;IACdC,OAAO;EAGG,EACV;AAEN,CAAC;AAVYI,YAAY,CAAAH,WAAA;AAYzBG,YAAY,CAACF,KAAK,GAAG;EACnBC,IAAI,EAAE;AACR,CAAC;AAEM,IAAME,QAAQ,GAAAX,OAAA,CAAAW,QAAA,GAAG,SAAXA,QAAQA,CAAA,EAAS;EAC5B,oBACErB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,SAAA,CAAAU,QAAQ;IACPC,QAAQ,EAAE,GAAI;IACdC,OAAO,EAAC;EAAib,EACzb;AAEN,CAAC;AAPYK,QAAQ,CAAAJ,WAAA;AASrBI,QAAQ,CAACH,KAAK,GAAG;EACfC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMG,oBAAoB,GAAAZ,OAAA,CAAAY,oBAAA,GAAG,SAAvBA,oBAAoBA,CAAA,EAAS;EACxC,oBACEtB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,SAAA,CAAAU,QAAQ;IACPC,QAAQ,EAAE,GAAI;IACdC,OAAO;EAoBC,EACR;AAEN,CAAC;AA3BYM,oBAAoB,CAAAL,WAAA;AA6BjCK,oBAAoB,CAACJ,KAAK,GAAG;EAC3BC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMI,0BAA0B,GAAAb,OAAA,CAAAa,0BAAA,GAAG,SAA7BA,0BAA0BA,CAAA,EAAS;EAC9C,oBACEvB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACV,KAAA,CAAAqB,IAAI,qBACHxB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,SAAA,CAAAU,QAAQ;IACPC,QAAQ,EAAE,GAAI;IACdC,OAAO;EAsBG,EACV,CACG;AAEX,CAAC;AA/BYO,0BAA0B,CAAAN,WAAA;AAiCvCM,0BAA0B,CAACL,KAAK,GAAG;EACjCC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMM,2BAA2B,GAAAf,OAAA,CAAAe,2BAAA,GAAG,SAA9BA,2BAA2BA,CAAA,EAAS;EAC/C,oBACEzB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACV,KAAA,CAAAqB,IAAI;IAACE,OAAO,EAAC;EAAI,gBAChB1B,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,SAAA,CAAAU,QAAQ;IACPC,QAAQ,EAAE,GAAI;IACdC,OAAO;EAqBG,EACV,CACG;AAEX,CAAC;AA9BYS,2BAA2B,CAAAR,WAAA;AAgCxCQ,2BAA2B,CAACP,KAAK,GAAG;EAClCC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMQ,4BAA4B,GAAAjB,OAAA,CAAAiB,4BAAA,GAAG,SAA/BA,4BAA4BA,CAAA,EAAS;EAChD,oBACE3B,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,SAAA,CAAAU,QAAQ;IACPc,QAAQ;IACRb,QAAQ,EAAE,GAAI;IACdC,OAAO;EAQG,EACV;AAEN,CAAC;AAhBYW,4BAA4B,CAAAV,WAAA;AAkBzCU,4BAA4B,CAACT,KAAK,GAAG;EACnCC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMU,kBAAkB,GAAAnB,OAAA,CAAAmB,kBAAA,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;EACtC,oBACE7B,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACR,IAAA,CAAAyB,GAAG;IAACC,SAAS,EAAC,QAAQ;IAACC,KAAK,EAAE;EAAI,gBACjChC,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACV,KAAA,CAAAqB,IAAI;IAACE,OAAO,EAAC;EAAI,gBAChB1B,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,SAAA,CAAAU,QAAQ;IACPmB,kBAAkB,EAAE,KAAM;IAC1BlB,QAAQ,EAAE,GAAI;IACdC,OAAO;EAQD,EACN,CACG,CACH;AAEV,CAAC;AApBYa,kBAAkB,CAAAZ,WAAA;AAsB/BY,kBAAkB,CAACX,KAAK,GAAG;EACzBC,IAAI,EAAE;AACR,CAAC"}

package/dist/elements/ResponsiveBox/ResponsiveBox.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { BoxProps } from "../Box";
 /** ResponsiveBoxMaxDimensions */
-export declare type ResponsiveBoxMaxDimensions = {
+export type ResponsiveBoxMaxDimensions = {
     maxWidth: number;
     maxHeight: number;
 } | {
@@ -16,6 +16,6 @@ export interface ResponsiveBoxAspectDimensions {
     aspectHeight: number;
 }
 /** ResponsiveBoxProps */
-export declare type ResponsiveBoxProps = Omit<BoxProps, "maxWidth" | "maxHeight"> & ResponsiveBoxAspectDimensions & ResponsiveBoxMaxDimensions;
+export type ResponsiveBoxProps = Omit<BoxProps, "maxWidth" | "maxHeight"> & ResponsiveBoxAspectDimensions & ResponsiveBoxMaxDimensions;
 /** ResponsiveBox */
 export declare const ResponsiveBox: React.FC<React.PropsWithChildren<ResponsiveBoxProps>>;

package/dist/elements/ResponsiveBox/ResponsiveBox.js

@@ -47,7 +47,7 @@ var responsiveScale = function responsiveScale(args) {
 /** ResponsiveBoxProps */
 
 /** ResponsiveBox */
-var ResponsiveBox = function ResponsiveBox(_ref) {
+var ResponsiveBox = exports.ResponsiveBox = function ResponsiveBox(_ref) {
   var aspectWidth = _ref.aspectWidth,
     aspectHeight = _ref.aspectHeight,
     children = _ref.children,
@@ -66,7 +66,6 @@ var ResponsiveBox = function ResponsiveBox(_ref) {
     }
   }, rest), children);
 };
-exports.ResponsiveBox = ResponsiveBox;
 ResponsiveBox.displayName = "ResponsiveBox";
 ResponsiveBox.displayName = "ResponsiveBox";
 //# sourceMappingURL=ResponsiveBox.js.map

package/dist/elements/ResponsiveBox/ResponsiveBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveBox.js","names":["_proportionalScale","require","_react","_interopRequireDefault","_Box","_excluded","_excluded2","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","_typeof","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","responsiveScale","args","maxWidth","paddingBottom","width","aspectWidth","height","aspectHeight","rest","scaled","scale","concat","ResponsiveBox","_ref","children","createElement","Box","position","overflow","style","aspectRatio","exports","displayName"],"sources":["../../../src/elements/ResponsiveBox/ResponsiveBox.tsx"],"sourcesContent":["import { paddingBottom, scale } from \"proportional-scale\"\nimport React from \"react\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** ResponsiveBoxMaxDimensions */\nexport type ResponsiveBoxMaxDimensions =\n  | {\n      maxWidth: number\n      maxHeight: number\n    }\n  | { maxWidth: number }\n  | { maxHeight: number }\n  | { maxWidth: \"100%\" }\n\nexport interface ResponsiveBoxAspectDimensions {\n  aspectWidth: number\n  aspectHeight: number\n}\n\nconst responsiveScale = (\n  args: ResponsiveBoxAspectDimensions & ResponsiveBoxMaxDimensions\n) => {\n  if (\"maxWidth\" in args && args.maxWidth === \"100%\") {\n    return {\n      maxWidth: \"100%\",\n      paddingBottom: paddingBottom({\n        width: args.aspectWidth,\n        height: args.aspectHeight,\n      }),\n    }\n  }\n\n  const { aspectWidth: width, aspectHeight: height, ...rest } = args\n  const scaled = scale({ width, height, ...rest })\n\n  return {\n    maxWidth: `${scaled.width}px`,\n    paddingBottom: scaled.paddingBottom,\n  }\n}\n\n/** ResponsiveBoxProps */\nexport type ResponsiveBoxProps = Omit<BoxProps, \"maxWidth\" | \"maxHeight\"> &\n  ResponsiveBoxAspectDimensions &\n  ResponsiveBoxMaxDimensions\n\n/** ResponsiveBox */\nexport const ResponsiveBox: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = ({\n  aspectWidth,\n  aspectHeight,\n  children,\n  ...rest\n}) => {\n  const scaled = responsiveScale({ aspectHeight, aspectWidth, ...rest })\n\n  return (\n    <Box\n      position=\"relative\"\n      width=\"100%\"\n      overflow=\"hidden\"\n      style={{\n        aspectRatio: `${aspectWidth} / ${aspectHeight}`,\n        maxWidth: scaled.maxWidth,\n      }}\n      {...rest}\n    >\n      {children}\n    </Box>\n  )\n}\n\nResponsiveBox.displayName = \"ResponsiveBox\"\n"],"mappings":"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"}
+{"version":3,"file":"ResponsiveBox.js","names":["_proportionalScale","require","_react","_interopRequireDefault","_Box","_excluded","_excluded2","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","_typeof","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","responsiveScale","args","maxWidth","paddingBottom","width","aspectWidth","height","aspectHeight","rest","scaled","scale","concat","ResponsiveBox","exports","_ref","children","createElement","Box","position","overflow","style","aspectRatio","displayName"],"sources":["../../../src/elements/ResponsiveBox/ResponsiveBox.tsx"],"sourcesContent":["import { paddingBottom, scale } from \"proportional-scale\"\nimport React from \"react\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** ResponsiveBoxMaxDimensions */\nexport type ResponsiveBoxMaxDimensions =\n  | {\n      maxWidth: number\n      maxHeight: number\n    }\n  | { maxWidth: number }\n  | { maxHeight: number }\n  | { maxWidth: \"100%\" }\n\nexport interface ResponsiveBoxAspectDimensions {\n  aspectWidth: number\n  aspectHeight: number\n}\n\nconst responsiveScale = (\n  args: ResponsiveBoxAspectDimensions & ResponsiveBoxMaxDimensions\n) => {\n  if (\"maxWidth\" in args && args.maxWidth === \"100%\") {\n    return {\n      maxWidth: \"100%\",\n      paddingBottom: paddingBottom({\n        width: args.aspectWidth,\n        height: args.aspectHeight,\n      }),\n    }\n  }\n\n  const { aspectWidth: width, aspectHeight: height, ...rest } = args\n  const scaled = scale({ width, height, ...rest })\n\n  return {\n    maxWidth: `${scaled.width}px`,\n    paddingBottom: scaled.paddingBottom,\n  }\n}\n\n/** ResponsiveBoxProps */\nexport type ResponsiveBoxProps = Omit<BoxProps, \"maxWidth\" | \"maxHeight\"> &\n  ResponsiveBoxAspectDimensions &\n  ResponsiveBoxMaxDimensions\n\n/** ResponsiveBox */\nexport const ResponsiveBox: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = ({\n  aspectWidth,\n  aspectHeight,\n  children,\n  ...rest\n}) => {\n  const scaled = responsiveScale({ aspectHeight, aspectWidth, ...rest })\n\n  return (\n    <Box\n      position=\"relative\"\n      width=\"100%\"\n      overflow=\"hidden\"\n      style={{\n        aspectRatio: `${aspectWidth} / ${aspectHeight}`,\n        maxWidth: scaled.maxWidth,\n      }}\n      {...rest}\n    >\n      {children}\n    </Box>\n  )\n}\n\nResponsiveBox.displayName = \"ResponsiveBox\"\n"],"mappings":"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"}

package/dist/elements/ResponsiveBox/ResponsiveBox.story.js

@@ -18,8 +18,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var Measure = function Measure(props) {
   var _useState = (0, _react.useState)({
@@ -82,11 +82,10 @@ var EXAMPLE_MAXIMUMS = [{
   maxHeight: 1024,
   maxWidth: 1024
 }];
-var _default = {
+var _default = exports.default = {
   title: "Components/ResponsiveBox"
 };
-exports.default = _default;
-var Basic = function Basic() {
+var Basic = exports.Basic = function Basic() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, EXAMPLE_ASPECTS.map(function (aspect, i) {
     return EXAMPLE_MAXIMUMS.map(function (maximum, j) {
       return /*#__PURE__*/_react.default.createElement(_ResponsiveBox.ResponsiveBox, _extends({
@@ -98,8 +97,7 @@ var Basic = function Basic() {
     });
   }));
 };
-exports.Basic = Basic;
-var MaxWidth100 = function MaxWidth100() {
+var MaxWidth100 = exports.MaxWidth100 = function MaxWidth100() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, EXAMPLE_ASPECTS.map(function (aspect, i) {
     return /*#__PURE__*/_react.default.createElement(_ResponsiveBox.ResponsiveBox, _extends({
       key: i
@@ -112,7 +110,6 @@ var MaxWidth100 = function MaxWidth100() {
     })));
   }));
 };
-exports.MaxWidth100 = MaxWidth100;
 MaxWidth100.story = {
   name: "maxWidth: 100%"
 };
@@ -120,7 +117,7 @@ var Masonry = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "ResponsiveBoxstory__Masonry",
   componentId: "sc-m69kz2-0"
 })(["column-count:3;*{break-inside:avoid;}"]);
-var ColumnsWithResponsiveImages = function ColumnsWithResponsiveImages() {
+var ColumnsWithResponsiveImages = exports.ColumnsWithResponsiveImages = function ColumnsWithResponsiveImages() {
   return /*#__PURE__*/_react.default.createElement(Masonry, null, new Array(12).fill(0).map(function (_, i) {
     var orientation = i % 3 === 0 ? "portrait" : "landscape";
     var width = orientation === "portrait" ? 200 : 300;
@@ -146,6 +143,5 @@ var ColumnsWithResponsiveImages = function ColumnsWithResponsiveImages() {
     );
   }));
 };
-exports.ColumnsWithResponsiveImages = ColumnsWithResponsiveImages;
 ColumnsWithResponsiveImages.displayName = "ColumnsWithResponsiveImages";
 //# sourceMappingURL=ResponsiveBox.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveBox.story.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_Box","_Text","_Image","_ResponsiveBox","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","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","Measure","props","_useState","useState","width","height","_useState2","dimensions","setDimensions","ref","useRef","check","current","offsetWidth","offsetHeight","useEffect","window","addEventListener","removeEventListener","createElement","Box","p","Text","variant","color","aspectWidth","aspectHeight","Fragment","maxHeight","maxWidth","join","displayName","EXAMPLE_ASPECTS","EXAMPLE_MAXIMUMS","_default","title","exports","Basic","map","aspect","maximum","j","ResponsiveBox","bg","my","MaxWidth100","story","Masonry","styled","withConfig","componentId","ColumnsWithResponsiveImages","fill","_","orientation","mb","Image","lazyLoad","src","concat","srcSet"],"sources":["../../../src/elements/ResponsiveBox/ResponsiveBox.story.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Image } from \"../Image\"\nimport {\n  ResponsiveBox,\n  ResponsiveBoxAspectDimensions,\n  ResponsiveBoxMaxDimensions,\n  ResponsiveBoxProps,\n} from \"./ResponsiveBox\"\n\nconst Measure: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = (\n  props\n) => {\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n  const ref = useRef<null | HTMLDivElement>(null)\n\n  const check = () => {\n    if (!ref.current) return\n    setDimensions({\n      width: ref.current!.offsetWidth,\n      height: ref.current!.offsetHeight,\n    })\n  }\n\n  useEffect(() => {\n    check()\n    window.addEventListener(\"resize\", check)\n    return () => {\n      window.removeEventListener(\"resize\", check)\n    }\n  })\n\n  return (\n    <Box width=\"100%\" height=\"100%\" p={1} ref={ref as any}>\n      <Text variant=\"xs\" color=\"mono0\">\n        {props.aspectWidth}:{props.aspectHeight}\n        <br />\n        {(\"maxWidth\" in props || \"maxHeight\" in props) && (\n          <>\n            with max dimensions of{\" \"}\n            {[\n              (props as any).maxHeight || 0,\n              (props as any).maxWidth || \"_\",\n            ].join(\" × \")}\n            <br />\n          </>\n        )}\n        Renders @ {dimensions.width} × {dimensions.height}\n      </Text>\n    </Box>\n  )\n}\n\nconst EXAMPLE_ASPECTS: ResponsiveBoxAspectDimensions[] = [\n  { aspectWidth: 300, aspectHeight: 400 },\n  { aspectWidth: 400, aspectHeight: 300 },\n]\n\nconst EXAMPLE_MAXIMUMS: ResponsiveBoxMaxDimensions[] = [\n  { maxHeight: 200, maxWidth: 200 },\n  { maxHeight: 400, maxWidth: 400 },\n  { maxHeight: 400 },\n  { maxWidth: 400 },\n  { maxHeight: 600, maxWidth: 600 },\n  { maxHeight: 100, maxWidth: 600 },\n  { maxHeight: 1024, maxWidth: 1024 },\n]\n\nexport default { title: \"Components/ResponsiveBox\" }\n\nexport const Basic = () => {\n  return (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) =>\n        EXAMPLE_MAXIMUMS.map((maximum, j) => {\n          return (\n            <ResponsiveBox\n              key={[i, j].join(\".\")}\n              {...aspect}\n              {...maximum}\n              bg=\"brand\"\n              my={2}\n            >\n              <Measure {...aspect} {...maximum} />\n            </ResponsiveBox>\n          )\n        })\n      )}\n    </>\n  )\n}\n\nexport const MaxWidth100 = () => {\n  return (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) => {\n        return (\n          <ResponsiveBox key={i} {...aspect} maxWidth=\"100%\" bg=\"brand\" my={2}>\n            <Measure {...aspect} maxWidth=\"100%\" />\n          </ResponsiveBox>\n        )\n      })}\n    </>\n  )\n}\n\nMaxWidth100.story = {\n  name: \"maxWidth: 100%\",\n}\n\nconst Masonry = styled(Box)`\n  column-count: 3;\n\n  * {\n    break-inside: avoid;\n  }\n`\n\nexport const ColumnsWithResponsiveImages = () => {\n  return (\n    <Masonry>\n      {new Array(12).fill(0).map((_, i) => {\n        const orientation = i % 3 === 0 ? \"portrait\" : \"landscape\"\n        const width = orientation === \"portrait\" ? 200 : 300\n        const height = orientation === \"portrait\" ? 300 : 200\n\n        return (\n          // Simply being wrapped in an extra `Box` causes a image loading bug in Chrome\n          <Box key={i}>\n            <ResponsiveBox\n              aspectWidth={width}\n              aspectHeight={height}\n              maxWidth=\"100%\"\n              bg=\"mono10\"\n              mb={2}\n            >\n              <Image\n                lazyLoad\n                width=\"100%\"\n                height=\"100%\"\n                src={`https://picsum.photos/seed/${i}/${width}/${height}`}\n                srcSet={`https://picsum.photos/seed/${i}/${width}/${height} 1x, https://picsum.photos/seed/${i}/${\n                  width * 2\n                }/${height * 2} 2x`}\n              />\n            </ResponsiveBox>\n          </Box>\n        )\n      })}\n    </Masonry>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ResponsiveBox.story.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_Box","_Text","_Image","_ResponsiveBox","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","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","Measure","props","_useState","useState","width","height","_useState2","dimensions","setDimensions","ref","useRef","check","current","offsetWidth","offsetHeight","useEffect","window","addEventListener","removeEventListener","createElement","Box","p","Text","variant","color","aspectWidth","aspectHeight","Fragment","maxHeight","maxWidth","join","displayName","EXAMPLE_ASPECTS","EXAMPLE_MAXIMUMS","_default","exports","title","Basic","map","aspect","maximum","j","ResponsiveBox","bg","my","MaxWidth100","story","Masonry","styled","withConfig","componentId","ColumnsWithResponsiveImages","fill","_","orientation","mb","Image","lazyLoad","src","concat","srcSet"],"sources":["../../../src/elements/ResponsiveBox/ResponsiveBox.story.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Image } from \"../Image\"\nimport {\n  ResponsiveBox,\n  ResponsiveBoxAspectDimensions,\n  ResponsiveBoxMaxDimensions,\n  ResponsiveBoxProps,\n} from \"./ResponsiveBox\"\n\nconst Measure: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = (\n  props\n) => {\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n  const ref = useRef<null | HTMLDivElement>(null)\n\n  const check = () => {\n    if (!ref.current) return\n    setDimensions({\n      width: ref.current!.offsetWidth,\n      height: ref.current!.offsetHeight,\n    })\n  }\n\n  useEffect(() => {\n    check()\n    window.addEventListener(\"resize\", check)\n    return () => {\n      window.removeEventListener(\"resize\", check)\n    }\n  })\n\n  return (\n    <Box width=\"100%\" height=\"100%\" p={1} ref={ref as any}>\n      <Text variant=\"xs\" color=\"mono0\">\n        {props.aspectWidth}:{props.aspectHeight}\n        <br />\n        {(\"maxWidth\" in props || \"maxHeight\" in props) && (\n          <>\n            with max dimensions of{\" \"}\n            {[\n              (props as any).maxHeight || 0,\n              (props as any).maxWidth || \"_\",\n            ].join(\" × \")}\n            <br />\n          </>\n        )}\n        Renders @ {dimensions.width} × {dimensions.height}\n      </Text>\n    </Box>\n  )\n}\n\nconst EXAMPLE_ASPECTS: ResponsiveBoxAspectDimensions[] = [\n  { aspectWidth: 300, aspectHeight: 400 },\n  { aspectWidth: 400, aspectHeight: 300 },\n]\n\nconst EXAMPLE_MAXIMUMS: ResponsiveBoxMaxDimensions[] = [\n  { maxHeight: 200, maxWidth: 200 },\n  { maxHeight: 400, maxWidth: 400 },\n  { maxHeight: 400 },\n  { maxWidth: 400 },\n  { maxHeight: 600, maxWidth: 600 },\n  { maxHeight: 100, maxWidth: 600 },\n  { maxHeight: 1024, maxWidth: 1024 },\n]\n\nexport default { title: \"Components/ResponsiveBox\" }\n\nexport const Basic = () => {\n  return (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) =>\n        EXAMPLE_MAXIMUMS.map((maximum, j) => {\n          return (\n            <ResponsiveBox\n              key={[i, j].join(\".\")}\n              {...aspect}\n              {...maximum}\n              bg=\"brand\"\n              my={2}\n            >\n              <Measure {...aspect} {...maximum} />\n            </ResponsiveBox>\n          )\n        })\n      )}\n    </>\n  )\n}\n\nexport const MaxWidth100 = () => {\n  return (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) => {\n        return (\n          <ResponsiveBox key={i} {...aspect} maxWidth=\"100%\" bg=\"brand\" my={2}>\n            <Measure {...aspect} maxWidth=\"100%\" />\n          </ResponsiveBox>\n        )\n      })}\n    </>\n  )\n}\n\nMaxWidth100.story = {\n  name: \"maxWidth: 100%\",\n}\n\nconst Masonry = styled(Box)`\n  column-count: 3;\n\n  * {\n    break-inside: avoid;\n  }\n`\n\nexport const ColumnsWithResponsiveImages = () => {\n  return (\n    <Masonry>\n      {new Array(12).fill(0).map((_, i) => {\n        const orientation = i % 3 === 0 ? \"portrait\" : \"landscape\"\n        const width = orientation === \"portrait\" ? 200 : 300\n        const height = orientation === \"portrait\" ? 300 : 200\n\n        return (\n          // Simply being wrapped in an extra `Box` causes a image loading bug in Chrome\n          <Box key={i}>\n            <ResponsiveBox\n              aspectWidth={width}\n              aspectHeight={height}\n              maxWidth=\"100%\"\n              bg=\"mono10\"\n              mb={2}\n            >\n              <Image\n                lazyLoad\n                width=\"100%\"\n                height=\"100%\"\n                src={`https://picsum.photos/seed/${i}/${width}/${height}`}\n                srcSet={`https://picsum.photos/seed/${i}/${width}/${height} 1x, https://picsum.photos/seed/${i}/${\n                  width * 2\n                }/${height * 2} 2x`}\n              />\n            </ResponsiveBox>\n          </Box>\n        )\n      })}\n    </Masonry>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/Select/Select.js

@@ -21,13 +21,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
 /** A drop-down select menu */
-var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var description = _ref.description,
     disabled = _ref.disabled,
     error = _ref.error,
@@ -121,15 +121,13 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     color: "red100"
   }, error));
 });
-exports.Select = Select;
 Select.displayName = "Select";
 var resetMixin = (0, _styledComponents.css)(["appearance:none;background:none;border:none;outline:0;text-indent:0.01px;text-overflow:\"\";border-radius:0;&:-moz-focusring{color:transparent;text-shadow:0 0 0 black;}option:not(:checked){color:black;}"]);
 /** Creates a small caret */
-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 (_ref3) {
+var caretMixin = exports.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 (_ref3) {
   var disabled = _ref3.disabled;
   return disabled ? (0, _themeGet.themeGet)("colors.mono10") : (0, _themeGet.themeGet)("colors.mono100");
 });
-exports.caretMixin = caretMixin;
 var Container = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Select__Container",
   componentId: "sc-1weszjl-0"