@artsy/palette 38.1.5 → 38.3.0

package/dist/elements/ReadMore/ReadMore.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 export interface ReadMoreProps {
     content: string;
     disabled?: boolean;
+    inlineReadMoreLink?: boolean;
     isExpanded?: boolean;
     maxChars?: number;
     onReadLessClicked?: () => void;

package/dist/elements/ReadMore/ReadMore.js

@@ -24,6 +24,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var ReadMore = function ReadMore(_ref) {
   var expandedHTML = _ref.content,
     disabled = _ref.disabled,
+    _ref$inlineReadMoreLi = _ref.inlineReadMoreLink,
+    inlineReadMoreLink = _ref$inlineReadMoreLi === void 0 ? true : _ref$inlineReadMoreLi,
     isExpanded = _ref.isExpanded,
     _ref$maxChars = _ref.maxChars,
     maxChars = _ref$maxChars === void 0 ? Infinity : _ref$maxChars,
@@ -66,11 +68,15 @@ var ReadMore = function ReadMore(_ref) {
     fontWeight: "bold"
   }, "Read less"))) : /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
     onClick: handleClick
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, inlineReadMoreLink ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     dangerouslySetInnerHTML: {
       __html: truncatedHTML
     }
-  }), " ", /*#__PURE__*/_react.default.createElement(_Text.Text, {
+  }), " ") : /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    dangerouslySetInnerHTML: {
+      __html: truncatedHTML
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
     as: "span",
     variant: "xs",
     fontWeight: "bold",

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","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  isExpanded?: boolean\n  maxChars?: number\n  onReadLessClicked?: () => void\n  onReadMoreClicked?: () => void\n}\n\n/** ReadMore */\nexport const ReadMore: React.FC<ReadMoreProps> = ({\n  content: expandedHTML,\n  disabled,\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          <span dangerouslySetInnerHTML={{ __html: truncatedHTML }} />{\" \"}\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","_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<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.d.ts

@@ -44,3 +44,9 @@ export declare const CharacterCapWithHtmlDisabled: {
         name: string;
     };
 };
+export declare const WithBottomReadMore: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithCustomizableTypography2 = exports.WithCustomizableTypography = exports.WithCharacterCap = exports.ShortContent = exports.CharacterCapWithHtmlDisabled = exports.CharacterCapWithHtml = exports.AsString = void 0;
+exports.default = exports.WithCustomizableTypography2 = exports.WithCustomizableTypography = exports.WithCharacterCap = exports.WithBottomReadMore = exports.ShortContent = exports.CharacterCapWithHtmlDisabled = exports.CharacterCapWithHtml = exports.AsString = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _HTML = require("../HTML");
 var _ReadMore = require("./ReadMore");
+var _Box = require("../Box");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
   title: "Components/ReadMore"
@@ -92,4 +93,21 @@ CharacterCapWithHtmlDisabled.displayName = "CharacterCapWithHtmlDisabled";
 CharacterCapWithHtmlDisabled.story = {
   name: "Character cap with html (disabled)"
 };
+var WithBottomReadMore = function WithBottomReadMore() {
+  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    textAlign: "center",
+    width: 600
+  }, /*#__PURE__*/_react.default.createElement(_HTML.HTML, {
+    variant: "lg"
+  }, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
+    inlineReadMoreLink: false,
+    maxChars: 280,
+    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'"
+};
 //# sourceMappingURL=ReadMore.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReadMore.story.js","names":["_react","_interopRequireDefault","require","_HTML","_ReadMore","obj","__esModule","default","_default","title","exports","WithCharacterCap","createElement","ReadMore","maxChars","content","displayName","story","name","ShortContent","AsString","CharacterCapWithHtml","WithCustomizableTypography","HTML","WithCustomizableTypography2","variant","CharacterCapWithHtmlDisabled","disabled"],"sources":["../../../src/elements/ReadMore/ReadMore.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { HTML } from \"../HTML\"\nimport { ReadMore } from \"./ReadMore\"\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"],"mappings":"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"}
+{"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":";;;;;;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,GAEb;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AAEM,IAAMG,gBAAgB,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;AAAAL,OAAA,CAAAC,gBAAA,GAAAA,gBAAA;AAfYA,gBAAgB,CAAAK,WAAA;AAiB7BL,gBAAgB,CAACM,KAAK,GAAG;EACvBC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMC,YAAY,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;AAAAL,OAAA,CAAAS,YAAA,GAAAA,YAAA;AAVYA,YAAY,CAAAH,WAAA;AAYzBG,YAAY,CAACF,KAAK,GAAG;EACnBC,IAAI,EAAE;AACR,CAAC;AAEM,IAAME,QAAQ,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;AAAAL,OAAA,CAAAU,QAAA,GAAAA,QAAA;AAPYA,QAAQ,CAAAJ,WAAA;AASrBI,QAAQ,CAACH,KAAK,GAAG;EACfC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMG,oBAAoB,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;AAAAL,OAAA,CAAAW,oBAAA,GAAAA,oBAAA;AA3BYA,oBAAoB,CAAAL,WAAA;AA6BjCK,oBAAoB,CAACJ,KAAK,GAAG;EAC3BC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMI,0BAA0B,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;AAAAL,OAAA,CAAAY,0BAAA,GAAAA,0BAAA;AA/BYA,0BAA0B,CAAAN,WAAA;AAiCvCM,0BAA0B,CAACL,KAAK,GAAG;EACjCC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMM,2BAA2B,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;AAAAL,OAAA,CAAAc,2BAAA,GAAAA,2BAAA;AA9BYA,2BAA2B,CAAAR,WAAA;AAgCxCQ,2BAA2B,CAACP,KAAK,GAAG;EAClCC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMQ,4BAA4B,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;AAAAL,OAAA,CAAAgB,4BAAA,GAAAA,4BAAA;AAhBYA,4BAA4B,CAAAV,WAAA;AAkBzCU,4BAA4B,CAACT,KAAK,GAAG;EACnCC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMU,kBAAkB,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;AAAAL,OAAA,CAAAkB,kBAAA,GAAAA,kBAAA;AApBYA,kBAAkB,CAAAZ,WAAA;AAsB/BY,kBAAkB,CAACX,KAAK,GAAG;EACzBC,IAAI,EAAE;AACR,CAAC"}

package/dist/elements/Toggle/Toggle.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { BoxProps } from "../Box";
+export interface ToggleProps extends BoxProps, Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Disable toggle interactions */
+    disabled?: boolean;
+    /** Select the toggle on render */
+    selected?: boolean;
+    /** Used to force the toggle into the visual hover state */
+    hover?: boolean;
+    /** Callback when selected */
+    onSelect?: (selected: boolean) => void;
+}
+/** A toggle */
+export declare const Toggle: React.FC<ToggleProps>;

package/dist/elements/Toggle/Toggle.js

@@ -0,0 +1,71 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toggle = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Box = require("../Box");
+var _tokens = require("./tokens");
+var _themeGet = require("@styled-system/theme-get");
+var _excluded = ["selected", "disabled", "onSelect", "onClick"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/** A toggle */
+var Toggle = function Toggle(_ref) {
+  var _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    disabled = _ref.disabled,
+    onSelect = _ref.onSelect,
+    onClick = _ref.onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var isSelectable = !disabled && onSelect !== undefined;
+  var handleClick = function handleClick(event) {
+    if (isSelectable && onSelect) {
+      onSelect(!selected);
+    }
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  var handleKeyPress = function handleKeyPress(event) {
+    if (event.key === " " && isSelectable && onSelect) {
+      event.preventDefault();
+      onSelect(!selected);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(Container, _extends({
+    display: "flex",
+    alignItems: "center",
+    onClick: handleClick,
+    tabIndex: disabled ? -1 : 0,
+    onKeyPress: handleKeyPress,
+    role: "toggle",
+    "aria-checked": selected,
+    selected: selected,
+    disabled: disabled
+  }, rest), /*#__PURE__*/_react.default.createElement(Switch, {
+    selected: selected
+  }));
+};
+exports.Toggle = Toggle;
+Toggle.displayName = "Toggle";
+var Switch = (0, _styledComponents.default)(_Box.Box).withConfig({
+  displayName: "Toggle__Switch",
+  componentId: "sc-1yxwor4-0"
+})(["width:26px;height:26px;margin:3px;border-radius:50%;transition:transform 0.3s;box-shadow:", ";", ""], (0, _themeGet.themeGet)("effects.dropShadow"), function (props) {
+  return (0, _styledComponents.css)(["", ""], props.selected ? _tokens.SWITCH_STATES.selected : _tokens.SWITCH_STATES.default);
+});
+var Container = (0, _styledComponents.default)(_Box.Box).withConfig({
+  displayName: "Toggle__Container",
+  componentId: "sc-1yxwor4-1"
+})(["user-select:none;border-radius:100px;width:51px;height:31px;", ""], function (props) {
+  return (0, _styledComponents.css)(["", " ", " ", ""], props.selected ? _tokens.TOGGLE_STATES.selected : _tokens.TOGGLE_STATES.default, props.hover && _tokens.TOGGLE_STATES.hover, props.disabled && (props.selected ? _tokens.TOGGLE_STATES.disabled.selected : _tokens.TOGGLE_STATES.disabled.default));
+});
+//# sourceMappingURL=Toggle.js.map

package/dist/elements/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","names":["_react","_interopRequireDefault","require","_styledComponents","_interopRequireWildcard","_Box","_tokens","_themeGet","_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","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Toggle","_ref","_ref$selected","selected","disabled","onSelect","onClick","rest","isSelectable","undefined","handleClick","event","handleKeyPress","preventDefault","createElement","Container","display","alignItems","tabIndex","onKeyPress","role","Switch","exports","displayName","styled","Box","withConfig","componentId","themeGet","props","css","SWITCH_STATES","TOGGLE_STATES","hover"],"sources":["../../../src/elements/Toggle/Toggle.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\nimport { SWITCH_STATES, TOGGLE_STATES } from \"./tokens\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface ToggleProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable toggle interactions */\n  disabled?: boolean\n  /** Select the toggle on render */\n  selected?: boolean\n  /** Used to force the toggle into the visual hover state */\n  hover?: boolean\n  /** Callback when selected */\n  onSelect?: (selected: boolean) => void\n}\n\n/** A toggle */\nexport const Toggle: React.FC<ToggleProps> = ({\n  selected = false,\n  disabled,\n  onSelect,\n  onClick,\n  ...rest\n}) => {\n  const isSelectable = !disabled && onSelect !== undefined\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (isSelectable && onSelect) {\n      onSelect(!selected)\n    }\n\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" && isSelectable && onSelect) {\n      event.preventDefault()\n      onSelect(!selected)\n    }\n  }\n\n  return (\n    <Container\n      display=\"flex\"\n      alignItems=\"center\"\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      role=\"toggle\"\n      aria-checked={selected}\n      selected={selected}\n      disabled={disabled}\n      {...rest}\n    >\n      <Switch selected={selected} />\n    </Container>\n  )\n}\n\nconst Switch = styled(Box)<{ selected: boolean }>`\n  width: 26px;\n  height: 26px;\n  margin: 3px;\n  border-radius: 50%;\n  transition: transform 0.3s;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n\n  ${(props) => {\n    return css`\n      ${props.selected ? SWITCH_STATES.selected : SWITCH_STATES.default}\n    `\n  }}\n`\n\nconst Container = styled(Box)<{\n  selected: boolean\n  hover?: boolean\n  disabled?: boolean\n}>`\n  user-select: none;\n  border-radius: 100px;\n  width: 51px;\n  height: 31px;\n\n  ${(props) => {\n    return css`\n      ${props.selected ? TOGGLE_STATES.selected : TOGGLE_STATES.default}\n      ${props.hover && TOGGLE_STATES.hover}\n      ${props.disabled &&\n      (props.selected\n        ? TOGGLE_STATES.disabled.selected\n        : TOGGLE_STATES.disabled.default)}\n    `\n  }}\n`\n"],"mappings":"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"}

package/dist/elements/Toggle/Toggle.story.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const Demo: () => JSX.Element;

package/dist/elements/Toggle/Toggle.story.js

@@ -0,0 +1,62 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Demo = exports.Default = void 0;
+var _addonActions = require("@storybook/addon-actions");
+var _react = _interopRequireWildcard(require("react"));
+var _storybookStates = require("storybook-states");
+var _Toggle = require("./Toggle");
+var _Text = require("../Text");
+var _Flex = require("../Flex");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var _default = {
+  title: "Components/Toggle"
+};
+exports.default = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+    states: [{}, {
+      selected: true
+    }, {
+      hover: true
+    }, {
+      hover: true,
+      selected: true
+    }, {
+      disabled: true
+    }, {
+      disabled: true,
+      selected: true
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_Toggle.Toggle, null));
+};
+exports.Default = Default;
+Default.displayName = "Default";
+var Demo = function Demo() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSelected = _useState2[0],
+    setSelected = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    px: 1
+  }, isSelected ? "On" : "Off", " "), /*#__PURE__*/_react.default.createElement(_Toggle.Toggle, {
+    selected: isSelected,
+    onSelect: function onSelect(selected) {
+      setSelected(selected);
+      (0, _addonActions.action)("onClick")(selected);
+    }
+  }, "Example")));
+};
+exports.Demo = Demo;
+Demo.displayName = "Demo";
+//# sourceMappingURL=Toggle.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.story.js","names":["_addonActions","require","_react","_interopRequireWildcard","_storybookStates","_Toggle","_Text","_Flex","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","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","_default","title","exports","Default","createElement","States","states","selected","hover","disabled","Toggle","displayName","Demo","_useState","useState","_useState2","isSelected","setSelected","Flex","Text","px","onSelect","action"],"sources":["../../../src/elements/Toggle/Toggle.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Toggle } from \"./Toggle\"\nimport { Text } from \"../Text\"\nimport { Flex } from \"../Flex\"\n\nexport default {\n  title: \"Components/Toggle\",\n}\n\nexport const Default = () => {\n  return (\n    <States\n      states={[\n        {},\n        { selected: true },\n        { hover: true },\n        { hover: true, selected: true },\n        { disabled: true },\n        { disabled: true, selected: true },\n      ]}\n    >\n      <Toggle />\n    </States>\n  )\n}\n\nexport const Demo = () => {\n  const [isSelected, setSelected] = useState(false)\n  return (\n    <States>\n      <Flex>\n        <Text px={1}>{isSelected ? \"On\" : \"Off\"} </Text>\n        <Toggle\n          selected={isSelected}\n          onSelect={(selected) => {\n            setSelected(selected)\n            action(\"onClick\")(selected)\n          }}\n        >\n          Example\n        </Toggle>\n      </Flex>\n    </States>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/Toggle/index.d.ts

@@ -0,0 +1 @@
+export * from "./Toggle";

package/dist/elements/Toggle/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Toggle = require("./Toggle");
+Object.keys(_Toggle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Toggle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Toggle[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/elements/Toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Toggle","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../src/elements/Toggle/index.tsx"],"sourcesContent":["export * from \"./Toggle\"\n"],"mappings":";;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}

package/dist/elements/Toggle/tokens.d.ts

@@ -0,0 +1,13 @@
+export declare const SWITCH_STATES: {
+    readonly selected: import("styled-components").InterpolationValue[];
+    readonly default: import("styled-components").InterpolationValue[];
+};
+export declare const TOGGLE_STATES: {
+    readonly default: import("styled-components").FlattenInterpolation<any>[];
+    readonly selected: import("styled-components").FlattenInterpolation<any>[];
+    readonly hover: import("styled-components").InterpolationValue[];
+    readonly disabled: {
+        readonly default: import("styled-components").FlattenInterpolation<any>[];
+        readonly selected: import("styled-components").FlattenInterpolation<any>[];
+    };
+};

package/dist/elements/Toggle/tokens.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TOGGLE_STATES = exports.SWITCH_STATES = void 0;
+var _themeGet = require("@styled-system/theme-get");
+var _styledComponents = require("styled-components");
+var SWITCH_STATES = {
+  selected: (0, _styledComponents.css)(["background-color:white;transform:translateX(19px);"]),
+  default: (0, _styledComponents.css)(["background-color:white;"])
+};
+exports.SWITCH_STATES = SWITCH_STATES;
+var TOGGLE_STATES = {
+  default: (0, _styledComponents.css)(["background-color:", ";"], (0, _themeGet.themeGet)("colors.black30")),
+  selected: (0, _styledComponents.css)(["background-color:", ";"], (0, _themeGet.themeGet)("colors.blue100")),
+  hover: (0, _styledComponents.css)(["cursor:pointer;"]),
+  disabled: {
+    default: (0, _styledComponents.css)(["background-color:", ";pointer-events:none;"], (0, _themeGet.themeGet)("colors.black10")),
+    selected: (0, _styledComponents.css)(["background-color:", ";pointer-events:none;"], (0, _themeGet.themeGet)("colors.blue10"))
+  }
+};
+exports.TOGGLE_STATES = TOGGLE_STATES;
+//# sourceMappingURL=tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","SWITCH_STATES","selected","css","default","exports","TOGGLE_STATES","themeGet","hover","disabled"],"sources":["../../../src/elements/Toggle/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\n\nexport const SWITCH_STATES = {\n  selected: css`\n    background-color: white;\n    transform: translateX(19px);\n  `,\n  default: css`\n    background-color: white;\n  `,\n} as const\n\nexport const TOGGLE_STATES = {\n  default: css`\n    background-color: ${themeGet(\"colors.black30\")};\n  `,\n  selected: css`\n    background-color: ${themeGet(\"colors.blue100\")};\n  `,\n  hover: css`\n    cursor: pointer;\n  `,\n  disabled: {\n    default: css`\n      background-color: ${themeGet(\"colors.black10\")};\n      pointer-events: none;\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.blue10\")};\n      pointer-events: none;\n    `,\n  },\n} as const\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAEO,IAAME,aAAa,GAAG;EAC3BC,QAAQ,MAAEC,qBAAG,yDAGZ;EACDC,OAAO,MAAED,qBAAG;AAGd,CAAU;AAAAE,OAAA,CAAAJ,aAAA,GAAAA,aAAA;AAEH,IAAMK,aAAa,GAAG;EAC3BF,OAAO,MAAED,qBAAG,8BACU,IAAAI,kBAAQ,EAAC,gBAAgB,CAAC,CAC/C;EACDL,QAAQ,MAAEC,qBAAG,8BACS,IAAAI,kBAAQ,EAAC,gBAAgB,CAAC,CAC/C;EACDC,KAAK,MAAEL,qBAAG,sBAET;EACDM,QAAQ,EAAE;IACRL,OAAO,MAAED,qBAAG,kDACU,IAAAI,kBAAQ,EAAC,gBAAgB,CAAC,CAE/C;IACDL,QAAQ,MAAEC,qBAAG,kDACS,IAAAI,kBAAQ,EAAC,eAAe,CAAC;EAGjD;AACF,CAAU;AAAAF,OAAA,CAAAC,aAAA,GAAAA,aAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "38.1.5",
+  "version": "38.3.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -182,5 +182,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "4c518941ca152a98ecc374c3ae4ddf0c8f79bcd1"
+  "gitHead": "0a4e85291249b0f318a742585d6685b169e32e19"
 }