@artsy/palette 41.8.1 → 42.0.0

package/dist/elements/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["_v","require","_styledComponents","_interopRequireWildcard","_styledSystem","_Box","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","textColor","style","prop","cssProperty","textTransform","system","textMixin","compose","typography","color","exports","overflowEllipsisMixin","css","hyphenate","Text","styled","Box","withConfig","displayName","componentId","variant","variants","TEXT_VARIANTS","props","overflowEllipsis","lineClamp","defaultProps","fontFamily"],"sources":["../../../src/elements/Text/Text.tsx"],"sourcesContent":["import {\n  TEXT_VARIANTS,\n  TextVariant,\n} from \"@artsy/palette-tokens/dist/typography/v3\"\nimport styled, { css } from \"styled-components\"\nimport {\n  color,\n  ColorProps,\n  compose,\n  ResponsiveValue,\n  style,\n  system,\n  typography,\n  TypographyProps,\n  variant,\n} from \"styled-system\"\nimport { Color } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** BaseTextProps */\nexport type BaseTextProps = TypographyProps &\n  Omit<ColorProps, \"color\"> & {\n    /**\n     * @description\n     * Variants of the text. Possible to pass an array that\n     * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n     * @example\n     * \"sm\"\n     * \"md\"\n     * [\"md\", \"sm\"]\n     * @see {@link TextVariant}\n     */\n    variant?: ResponsiveValue<TextVariant>\n    textColor?: ResponsiveValue<Color>\n    /**\n     * Max number of lines before truncating the content with an ellipsis at the end of the last line.\n     * Overwriting display is required for this.\n     */\n    lineClamp?: number\n  }\n\nconst textColor = style({\n  prop: \"textColor\",\n  cssProperty: \"color\",\n  key: \"colors\",\n})\n\nexport type TextTransform =\n  | \"none\"\n  | \"capitalize\"\n  | \"uppercase\"\n  | \"lowercase\"\n  | \"initial\"\n  | \"inherit\"\n\nconst textTransform = system({ textTransform: true })\n\n/** styled functions for Text */\nexport const textMixin = compose(typography, color, textColor, textTransform)\n\n/** Adds ellipsis to overflowing text */\nexport const overflowEllipsisMixin = css`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\n/** Adds hyphenation to overflowing text */\nexport const hyphenate = css`\n  word-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n`\n\n/** TextProps */\nexport type TextProps = BaseTextProps &\n  BoxProps & {\n    hyphenate?: boolean\n    overflowEllipsis?: boolean\n    textTransform?: ResponsiveValue<TextTransform>\n    lineClamp?: ResponsiveValue<number>\n  }\n\n/** Text */\nexport const Text = styled(Box)<TextProps>`\n  && {\n    ${variant({ variants: TEXT_VARIANTS })}\n    ${textMixin}\n\n    ${(props) => {\n      return css`\n        ${props.hyphenate && hyphenate}\n        ${props.overflowEllipsis && overflowEllipsisMixin}\n        ${props.lineClamp &&\n        css`\n          display: -webkit-box;\n          -webkit-box-orient: vertical;\n          -webkit-line-clamp: ${props.lineClamp};\n          line-clamp: ${props.lineClamp};\n          overflow: hidden;\n        `}\n      `\n    }}\n  }\n`\n\nText.displayName = \"Text\"\n\nText.defaultProps = {\n  fontFamily: \"sans\",\n  variant: \"sm\",\n}\n"],"mappings":"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"}
+{"version":3,"file":"Text.js","names":["_v","require","_styledComponents","_interopRequireWildcard","_styledSystem","_Box","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","textColor","style","prop","cssProperty","textTransform","system","textMixin","exports","compose","typography","color","overflowEllipsisMixin","css","hyphenate","Text","styled","Box","withConfig","displayName","componentId","variant","variants","TEXT_VARIANTS","props","overflowEllipsis","lineClamp","defaultProps","fontFamily"],"sources":["../../../src/elements/Text/Text.tsx"],"sourcesContent":["import {\n  TEXT_VARIANTS,\n  TextVariant,\n} from \"@artsy/palette-tokens/dist/typography/v3\"\nimport styled, { css } from \"styled-components\"\nimport {\n  color,\n  ColorProps,\n  compose,\n  ResponsiveValue,\n  style,\n  system,\n  typography,\n  TypographyProps,\n  variant,\n} from \"styled-system\"\nimport { Color } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** BaseTextProps */\nexport type BaseTextProps = TypographyProps &\n  Omit<ColorProps, \"color\"> & {\n    /**\n     * @description\n     * Variants of the text. Possible to pass an array that\n     * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n     * @example\n     * \"sm\"\n     * \"md\"\n     * [\"md\", \"sm\"]\n     * @see {@link TextVariant}\n     */\n    variant?: ResponsiveValue<TextVariant>\n    textColor?: ResponsiveValue<Color>\n    /**\n     * Max number of lines before truncating the content with an ellipsis at the end of the last line.\n     * Overwriting display is required for this.\n     */\n    lineClamp?: number\n  }\n\nconst textColor = style({\n  prop: \"textColor\",\n  cssProperty: \"color\",\n  key: \"colors\",\n})\n\nexport type TextTransform =\n  | \"none\"\n  | \"capitalize\"\n  | \"uppercase\"\n  | \"lowercase\"\n  | \"initial\"\n  | \"inherit\"\n\nconst textTransform = system({ textTransform: true })\n\n/** styled functions for Text */\nexport const textMixin = compose(typography, color, textColor, textTransform)\n\n/** Adds ellipsis to overflowing text */\nexport const overflowEllipsisMixin = css`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\n/** Adds hyphenation to overflowing text */\nexport const hyphenate = css`\n  word-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n`\n\n/** TextProps */\nexport type TextProps = BaseTextProps &\n  BoxProps & {\n    hyphenate?: boolean\n    overflowEllipsis?: boolean\n    textTransform?: ResponsiveValue<TextTransform>\n    lineClamp?: ResponsiveValue<number>\n  }\n\n/** Text */\nexport const Text = styled(Box)<TextProps>`\n  && {\n    ${variant({ variants: TEXT_VARIANTS })}\n    ${textMixin}\n\n    ${(props) => {\n      return css`\n        ${props.hyphenate && hyphenate}\n        ${props.overflowEllipsis && overflowEllipsisMixin}\n        ${props.lineClamp &&\n        css`\n          display: -webkit-box;\n          -webkit-box-orient: vertical;\n          -webkit-line-clamp: ${props.lineClamp};\n          line-clamp: ${props.lineClamp};\n          overflow: hidden;\n        `}\n      `\n    }}\n  }\n`\n\nText.displayName = \"Text\"\n\nText.defaultProps = {\n  fontFamily: \"sans\",\n  variant: \"sm\",\n}\n"],"mappings":";;;;;;;AAAA,IAAAA,EAAA,GAAAC,OAAA;AAIA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAYA,IAAAI,IAAA,GAAAJ,OAAA;AAAsC,SAAAK,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAJ,wBAAAQ,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAE,OAAA,CAAAF,GAAA,yBAAAA,GAAA,4BAAAG,OAAA,EAAAH,GAAA,UAAAI,KAAA,GAAAT,wBAAA,CAAAC,WAAA,OAAAQ,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAL,GAAA,YAAAI,KAAA,CAAAE,GAAA,CAAAN,GAAA,SAAAO,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAZ,GAAA,QAAAY,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,GAAA,EAAAY,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,GAAA,EAAAY,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAZ,GAAA,CAAAY,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAH,GAAA,MAAAI,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAjB,GAAA,EAAAO,MAAA,YAAAA,MAAA;AAEtC;;AAsBA,IAAMW,SAAS,GAAG,IAAAC,mBAAK,EAAC;EACtBC,IAAI,EAAE,WAAW;EACjBC,WAAW,EAAE,OAAO;EACpBT,GAAG,EAAE;AACP,CAAC,CAAC;AAUF,IAAMU,aAAa,GAAG,IAAAC,oBAAM,EAAC;EAAED,aAAa,EAAE;AAAK,CAAC,CAAC;;AAErD;AACO,IAAME,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,qBAAO,EAACC,wBAAU,EAAEC,mBAAK,EAAEV,SAAS,EAAEI,aAAa,CAAC;;AAE7E;AACO,IAAMO,qBAAqB,GAAAJ,OAAA,CAAAI,qBAAA,OAAGC,qBAAG,iEAIvC;;AAED;AACO,IAAMC,SAAS,GAAAN,OAAA,CAAAM,SAAA,OAAGD,qBAAG,+DAI3B;;AAED;;AASA;AACO,IAAME,IAAI,GAAAP,OAAA,CAAAO,IAAA,GAAG,IAAAC,yBAAM,EAACC,QAAG,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2BAEzB,IAAAC,qBAAO,EAAC;EAAEC,QAAQ,EAAEC;AAAc,CAAC,CAAC,EACpChB,SAAS,EAET,UAACiB,KAAK,EAAK;EACX,WAAOX,qBAAG,sBACNW,KAAK,CAACV,SAAS,IAAIA,SAAS,EAC5BU,KAAK,CAACC,gBAAgB,IAAIb,qBAAqB,EAC/CY,KAAK,CAACE,SAAS,QACjBb,qBAAG,gHAGqBW,KAAK,CAACE,SAAS,EACvBF,KAAK,CAACE,SAAS,CAE9B;AAEL,CAAC,CAEJ;AAEDX,IAAI,CAACI,WAAW,GAAG,MAAM;AAEzBJ,IAAI,CAACY,YAAY,GAAG;EAClBC,UAAU,EAAE,MAAM;EAClBP,OAAO,EAAE;AACX,CAAC"}

package/dist/elements/Text/Text.story.js

@@ -15,8 +15,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 Table = _styledComponents.default.table.withConfig({
   displayName: "Textstory__Table",
@@ -44,11 +44,10 @@ var Specification = function Specification(_ref) {
     }, value));
   }));
 };
-var _default = {
+var _default = exports.default = {
   title: "Components/Text"
 };
-exports.default = _default;
-var Variants = function Variants() {
+var Variants = exports.Variants = function Variants() {
   return /*#__PURE__*/_react.default.createElement(Table, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "sm-display"
   }, "Variant")), /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
@@ -68,9 +67,8 @@ var Variants = function Variants() {
     }, "All their equipment and instruments are alive")));
   })));
 };
-exports.Variants = Variants;
 Variants.displayName = "Variants";
-var As = function As() {
+var As = exports.As = function As() {
   var ELEMENTS = ["h1", "h2", "h3", "p"];
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ELEMENTS.map(function (element) {
     return /*#__PURE__*/_react.default.createElement(_Text.Text, {
@@ -80,8 +78,7 @@ var As = function As() {
     }, "This is a text component with an element set to ", element);
   }));
 };
-exports.As = As;
-var Truncation = function Truncation() {
+var Truncation = exports.Truncation = function Truncation() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
     states: [{
       overflowEllipsis: true
@@ -92,9 +89,8 @@ var Truncation = function Truncation() {
     variant: "sm"
   }, "All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive."));
 };
-exports.Truncation = Truncation;
 Truncation.displayName = "Truncation";
-var Caps = function Caps() {
+var Caps = exports.Caps = function Caps() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
     states: [{}, {
       textTransform: "uppercase"
@@ -105,6 +101,5 @@ var Caps = function Caps() {
     variant: "xs"
   }, "Hello world"));
 };
-exports.Caps = Caps;
 Caps.displayName = "Caps";
 //# sourceMappingURL=Text.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.story.js","names":["_v","require","_themeGet","_react","_interopRequireDefault","_storybookStates","_styledComponents","_Flex","_Text","obj","__esModule","default","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","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","Table","styled","table","withConfig","displayName","componentId","themeGet","Specification","_ref","size","treatment","textColor","small","large","createElement","Fragment","entries","map","_ref2","_ref3","property","Flex","key","Text","variant","_default","title","exports","Variants","TEXT_VARIANT_NAMES","TEXT_VARIANTS","As","ELEMENTS","element","as","Truncation","States","states","overflowEllipsis","lineClamp","Caps","textTransform"],"sources":["../../../src/elements/Text/Text.story.tsx"],"sourcesContent":["import {\n  TEXT_VARIANT_NAMES,\n  TEXT_VARIANTS,\n} from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Color } from \"../../Theme\"\nimport { Flex } from \"../Flex\"\nimport { Text, TextProps } from \"./Text\"\n\nconst Table = styled.table`\n  width: 100%;\n  border: 1px solid ${themeGet(\"colors.mono10\")};\n  border-collapse: collapse;\n\n  > thead > tr > th {\n    text-align: left;\n    font-weight: normal;\n  }\n\n  > thead > tr > th,\n  > tbody > tr > td {\n    border-bottom: 1px solid ${themeGet(\"colors.mono10\")};\n    border-left: 1px solid ${themeGet(\"colors.mono10\")};\n    padding: ${themeGet(\"space.1\")};\n  }\n`\n\nconst Specification: React.FC<\n  React.PropsWithChildren<{\n    size?: \"small\" | \"large\" | \"default\"\n    treatment: any\n  }>\n> = ({ size, treatment }) => {\n  const textColor =\n    {\n      small: [\"purple100\", \"mono60\"] as Color[],\n      large: [\"mono60\", \"purple100\"] as Color[],\n    }[size || \"small\"] || \"mono60\"\n\n  return (\n    <>\n      {Object.entries(treatment).map(([property, value]) => {\n        return (\n          value && (\n            <Flex key={property}>\n              <Text variant=\"xs\" textColor={textColor}>\n                {property}:&nbsp;\n              </Text>\n\n              <Text variant=\"xs\" textColor={textColor}>\n                {value as any}\n              </Text>\n            </Flex>\n          )\n        )\n      })}\n    </>\n  )\n}\n\nexport default { title: \"Components/Text\" }\n\nexport const Variants = () => {\n  return (\n    <Table>\n      <thead>\n        <tr>\n          <th>\n            <Text variant=\"sm-display\">Variant</Text>\n          </th>\n\n          <th>\n            <Text variant=\"sm-display\">Specifications</Text>\n          </th>\n\n          <th>\n            <Text variant=\"sm-display\">Example</Text>\n          </th>\n        </tr>\n      </thead>\n\n      <tbody>\n        {TEXT_VARIANT_NAMES.map((key) => (\n          <tr key={key}>\n            <td>\n              <Text variant=\"sm-display\">{key}</Text>\n            </td>\n\n            <td>\n              <Specification size=\"default\" treatment={TEXT_VARIANTS[key]} />\n            </td>\n\n            <td>\n              <Text variant={key}>\n                All their equipment and instruments are alive\n              </Text>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </Table>\n  )\n}\n\nexport const As = () => {\n  const ELEMENTS = [\"h1\", \"h2\", \"h3\", \"p\"] as Array<keyof JSX.IntrinsicElements>\n\n  return (\n    <>\n      {ELEMENTS.map((element) => {\n        return (\n          <Text key={element} as={element} variant=\"sm\">\n            This is a text component with an element set to {element}\n          </Text>\n        )\n      })}\n    </>\n  )\n}\n\nexport const Truncation = () => {\n  return (\n    <States<TextProps> states={[{ overflowEllipsis: true }, { lineClamp: 2 }]}>\n      <Text variant=\"sm\">\n        All their equipment and instruments are alive. All their equipment and\n        instruments are alive. All their equipment and instruments are alive.\n        All their equipment and instruments are alive. All their equipment and\n        instruments are alive. All their equipment and instruments are alive.\n        All their equipment and instruments are alive. All their equipment and\n        instruments are alive. All their equipment and instruments are alive.\n      </Text>\n    </States>\n  )\n}\n\nexport const Caps = () => {\n  return (\n    <States<TextProps>\n      states={[\n        {},\n        { textTransform: \"uppercase\" },\n        { textTransform: \"capitalize\" },\n      ]}\n    >\n      <Text variant=\"xs\">Hello world</Text>\n    </States>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Text.story.js","names":["_v","require","_themeGet","_react","_interopRequireDefault","_storybookStates","_styledComponents","_Flex","_Text","obj","__esModule","default","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","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","Table","styled","table","withConfig","displayName","componentId","themeGet","Specification","_ref","size","treatment","textColor","small","large","createElement","Fragment","entries","map","_ref2","_ref3","property","Flex","key","Text","variant","_default","exports","title","Variants","TEXT_VARIANT_NAMES","TEXT_VARIANTS","As","ELEMENTS","element","as","Truncation","States","states","overflowEllipsis","lineClamp","Caps","textTransform"],"sources":["../../../src/elements/Text/Text.story.tsx"],"sourcesContent":["import {\n  TEXT_VARIANT_NAMES,\n  TEXT_VARIANTS,\n} from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Color } from \"../../Theme\"\nimport { Flex } from \"../Flex\"\nimport { Text, TextProps } from \"./Text\"\n\nconst Table = styled.table`\n  width: 100%;\n  border: 1px solid ${themeGet(\"colors.mono10\")};\n  border-collapse: collapse;\n\n  > thead > tr > th {\n    text-align: left;\n    font-weight: normal;\n  }\n\n  > thead > tr > th,\n  > tbody > tr > td {\n    border-bottom: 1px solid ${themeGet(\"colors.mono10\")};\n    border-left: 1px solid ${themeGet(\"colors.mono10\")};\n    padding: ${themeGet(\"space.1\")};\n  }\n`\n\nconst Specification: React.FC<\n  React.PropsWithChildren<{\n    size?: \"small\" | \"large\" | \"default\"\n    treatment: any\n  }>\n> = ({ size, treatment }) => {\n  const textColor =\n    {\n      small: [\"purple100\", \"mono60\"] as Color[],\n      large: [\"mono60\", \"purple100\"] as Color[],\n    }[size || \"small\"] || \"mono60\"\n\n  return (\n    <>\n      {\n        Object.entries(treatment).map(([property, value]) => {\n          return (\n            value && (\n              <Flex key={property}>\n                <Text variant=\"xs\" textColor={textColor}>\n                  {property}:&nbsp;\n                </Text>\n\n                <Text variant=\"xs\" textColor={textColor}>\n                  {value as any}\n                </Text>\n              </Flex>\n            )\n          )\n        }) as React.ReactNode[]\n      }\n    </>\n  )\n}\n\nexport default { title: \"Components/Text\" }\n\nexport const Variants = () => {\n  return (\n    <Table>\n      <thead>\n        <tr>\n          <th>\n            <Text variant=\"sm-display\">Variant</Text>\n          </th>\n\n          <th>\n            <Text variant=\"sm-display\">Specifications</Text>\n          </th>\n\n          <th>\n            <Text variant=\"sm-display\">Example</Text>\n          </th>\n        </tr>\n      </thead>\n\n      <tbody>\n        {TEXT_VARIANT_NAMES.map((key) => (\n          <tr key={key}>\n            <td>\n              <Text variant=\"sm-display\">{key}</Text>\n            </td>\n\n            <td>\n              <Specification size=\"default\" treatment={TEXT_VARIANTS[key]} />\n            </td>\n\n            <td>\n              <Text variant={key}>\n                All their equipment and instruments are alive\n              </Text>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </Table>\n  )\n}\n\nexport const As = () => {\n  const ELEMENTS = [\"h1\", \"h2\", \"h3\", \"p\"] as Array<keyof JSX.IntrinsicElements>\n\n  return (\n    <>\n      {ELEMENTS.map((element) => {\n        return (\n          <Text key={element} as={element} variant=\"sm\">\n            This is a text component with an element set to {element}\n          </Text>\n        )\n      })}\n    </>\n  )\n}\n\nexport const Truncation = () => {\n  return (\n    <States<TextProps> states={[{ overflowEllipsis: true }, { lineClamp: 2 }]}>\n      <Text variant=\"sm\">\n        All their equipment and instruments are alive. All their equipment and\n        instruments are alive. All their equipment and instruments are alive.\n        All their equipment and instruments are alive. All their equipment and\n        instruments are alive. All their equipment and instruments are alive.\n        All their equipment and instruments are alive. All their equipment and\n        instruments are alive. All their equipment and instruments are alive.\n      </Text>\n    </States>\n  )\n}\n\nexport const Caps = () => {\n  return (\n    <States<TextProps>\n      states={[\n        {},\n        { textTransform: \"uppercase\" },\n        { textTransform: \"capitalize\" },\n      ]}\n    >\n      <Text variant=\"xs\">Hello world</Text>\n    </States>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/TextArea/TextArea.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; }
 /** TextArea */
-var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+var TextArea = exports.TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var error = _ref.error,
     disabled = _ref.disabled,
     focus = _ref.focus,
@@ -117,7 +117,6 @@ var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     ml: 1
   }, error));
 });
-exports.TextArea = TextArea;
 TextArea.displayName = "TextArea";
 var StyledTextArea = _styledComponents.default.textarea.withConfig({
   displayName: "TextArea__StyledTextArea",

package/dist/elements/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_RequiredField","_Box","_Text","_Tooltip","_tokens","_helpers","_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","_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","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","TextArea","React","forwardRef","_ref","ref","error","disabled","focus","hover","characterLimit","characterLimitHelper","title","description","_ref$defaultValue","defaultValue","required","onChange","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","_useState","useState","_useState2","setValue","characterLimitExceeded","useCallback","text","Boolean","characterLimitReached","handleChange","event","nextValue","currentTarget","exceedsCharacterLimit","hasError","useMemo","showCharacterLimitReached","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","position","mt","StyledTextArea","placeholder","StyledLabel","htmlFor","display","mx","RequiredField","flex","ml","exports","displayName","styled","textarea","withConfig","componentId","themeGet","props","css","TEXTAREA_STATES","active","completed","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/TextArea/TextArea.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { TEXTAREA_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface TextAreaProps\n  extends BoxProps,\n    Omit<\n      React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      \"onChange\" | \"title\"\n    > {\n  active?: boolean\n  characterLimit?: number\n  characterLimitHelper?: boolean\n  defaultValue?: string\n  description?: React.ReactNode\n  required?: boolean\n  title?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  onChange?(result: TextAreaChange): void\n}\n\nexport interface TextAreaChange {\n  value: string\n  exceedsCharacterLimit: boolean\n}\n\n/** TextArea */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      error,\n      disabled,\n      focus,\n      hover,\n      characterLimit,\n      characterLimitHelper,\n      title,\n      description,\n      defaultValue = \"\",\n      required,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [value, setValue] = useState(defaultValue)\n\n    const characterLimitExceeded = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length > characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const characterLimitReached = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length >= characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.({\n          value: nextValue,\n          exceedsCharacterLimit: characterLimitExceeded(nextValue),\n        })\n      },\n      [characterLimitExceeded, onChange]\n    )\n\n    const hasError = useMemo(\n      () => Boolean(error || characterLimitExceeded(value)),\n      [characterLimitExceeded, error, value]\n    )\n\n    const showCharacterLimitReached =\n      characterLimitHelper &&\n      typeof characterLimit !== \"undefined\" &&\n      characterLimitReached(value)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledTextArea\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={hasError}\n            onChange={handleChange}\n            defaultValue={defaultValue}\n            required={required}\n            title={title}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n        </Box>\n\n        {(required || characterLimit) && !(error && typeof error === \"string\") && (\n          <Box display=\"flex\" mt={0.5} mx={1}>\n            {required && !showCharacterLimitReached && (\n              <RequiredField flex={1} disabled={disabled} />\n            )}\n\n            {showCharacterLimitReached && (\n              <Text flex={1} variant=\"xs\" color=\"mono60\" textAlign=\"left\">\n                Character limit reached\n              </Text>\n            )}\n\n            {typeof characterLimit !== \"undefined\" && (\n              <Text\n                flex={1}\n                variant=\"xs\"\n                color={characterLimitExceeded(value) ? \"red100\" : \"mono60\"}\n                textAlign=\"right\"\n              >\n                {value.length}/{characterLimit}\n              </Text>\n            )}\n          </Box>\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" color=\"red100\" mt={0.5} ml={1}>\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nTextArea.displayName = \"TextArea\"\n\ntype StyledTextAreaProps = Pick<\n  TextAreaProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\"\n>\n\nconst StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  appearance: none;\n  display: block;\n  width: 100%;\n  background-color: ${themeGet(\"colors.mono0\")};\n  padding: ${themeGet(\"space.1\")};\n  resize: vertical;\n  transition: border-color 0.25s, color 0.25s;\n  outline: none;\n  border: 1px solid;\n  border-radius: 3px;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  &::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${TEXTAREA_STATES.default}\n      ${props.hover && TEXTAREA_STATES.hover}\n      ${props.focus && TEXTAREA_STATES.focus}\n      ${props.active && TEXTAREA_STATES.active}\n      ${props.disabled && TEXTAREA_STATES.disabled}\n      ${props.error && TEXTAREA_STATES.error}\n\n      &:hover {\n        ${TEXTAREA_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${TEXTAREA_STATES.completed}\n        ${props.error && TEXTAREA_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${TEXTAREA_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${!!props.placeholder && TEXTAREA_STATES.active}\n          ${props.error && TEXTAREA_STATES.error}\n        }\n\n        &::placeholder {\n          opacity: 1;\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${TEXTAREA_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          opacity: 0;\n        }\n      `}\n    `\n  }}\n`\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 25px;\n  left: 6px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_RequiredField","_Box","_Text","_Tooltip","_tokens","_helpers","_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","_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","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","TextArea","exports","React","forwardRef","_ref","ref","error","disabled","focus","hover","characterLimit","characterLimitHelper","title","description","_ref$defaultValue","defaultValue","required","onChange","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","_useState","useState","_useState2","setValue","characterLimitExceeded","useCallback","text","Boolean","characterLimitReached","handleChange","event","nextValue","currentTarget","exceedsCharacterLimit","hasError","useMemo","showCharacterLimitReached","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","position","mt","StyledTextArea","placeholder","StyledLabel","htmlFor","display","mx","RequiredField","flex","ml","displayName","styled","textarea","withConfig","componentId","themeGet","props","css","TEXTAREA_STATES","active","completed","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/TextArea/TextArea.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { TEXTAREA_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface TextAreaProps\n  extends BoxProps,\n    Omit<\n      React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      \"onChange\" | \"title\"\n    > {\n  active?: boolean\n  characterLimit?: number\n  characterLimitHelper?: boolean\n  defaultValue?: string\n  description?: React.ReactNode\n  required?: boolean\n  title?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  onChange?(result: TextAreaChange): void\n}\n\nexport interface TextAreaChange {\n  value: string\n  exceedsCharacterLimit: boolean\n}\n\n/** TextArea */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      error,\n      disabled,\n      focus,\n      hover,\n      characterLimit,\n      characterLimitHelper,\n      title,\n      description,\n      defaultValue = \"\",\n      required,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [value, setValue] = useState(defaultValue)\n\n    const characterLimitExceeded = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length > characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const characterLimitReached = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length >= characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.({\n          value: nextValue,\n          exceedsCharacterLimit: characterLimitExceeded(nextValue),\n        })\n      },\n      [characterLimitExceeded, onChange]\n    )\n\n    const hasError = useMemo(\n      () => Boolean(error || characterLimitExceeded(value)),\n      [characterLimitExceeded, error, value]\n    )\n\n    const showCharacterLimitReached =\n      characterLimitHelper &&\n      typeof characterLimit !== \"undefined\" &&\n      characterLimitReached(value)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledTextArea\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={hasError}\n            onChange={handleChange}\n            defaultValue={defaultValue}\n            required={required}\n            title={title}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n        </Box>\n\n        {(required || characterLimit) && !(error && typeof error === \"string\") && (\n          <Box display=\"flex\" mt={0.5} mx={1}>\n            {required && !showCharacterLimitReached && (\n              <RequiredField flex={1} disabled={disabled} />\n            )}\n\n            {showCharacterLimitReached && (\n              <Text flex={1} variant=\"xs\" color=\"mono60\" textAlign=\"left\">\n                Character limit reached\n              </Text>\n            )}\n\n            {typeof characterLimit !== \"undefined\" && (\n              <Text\n                flex={1}\n                variant=\"xs\"\n                color={characterLimitExceeded(value) ? \"red100\" : \"mono60\"}\n                textAlign=\"right\"\n              >\n                {value.length}/{characterLimit}\n              </Text>\n            )}\n          </Box>\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" color=\"red100\" mt={0.5} ml={1}>\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nTextArea.displayName = \"TextArea\"\n\ntype StyledTextAreaProps = Pick<\n  TextAreaProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\"\n>\n\nconst StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  appearance: none;\n  display: block;\n  width: 100%;\n  background-color: ${themeGet(\"colors.mono0\")};\n  padding: ${themeGet(\"space.1\")};\n  resize: vertical;\n  transition: border-color 0.25s, color 0.25s;\n  outline: none;\n  border: 1px solid;\n  border-radius: 3px;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  &::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${TEXTAREA_STATES.default}\n      ${props.hover && TEXTAREA_STATES.hover}\n      ${props.focus && TEXTAREA_STATES.focus}\n      ${props.active && TEXTAREA_STATES.active}\n      ${props.disabled && TEXTAREA_STATES.disabled}\n      ${props.error && TEXTAREA_STATES.error}\n\n      &:hover {\n        ${TEXTAREA_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${TEXTAREA_STATES.completed}\n        ${props.error && TEXTAREA_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${TEXTAREA_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${!!props.placeholder && TEXTAREA_STATES.active}\n          ${props.error && TEXTAREA_STATES.error}\n        }\n\n        &::placeholder {\n          opacity: 1;\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${TEXTAREA_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          opacity: 0;\n        }\n      `}\n    `\n  }}\n`\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 25px;\n  left: 6px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":"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"}

package/dist/elements/TextArea/TextArea.story.js

@@ -10,11 +10,10 @@ var _storybookStates = require("storybook-states");
 var _Button = require("../Button");
 var _TextArea = require("./TextArea");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = {
+var _default = exports.default = {
   title: "Components/TextArea"
 };
-exports.default = _default;
-var Default = function Default() {
+var Default = exports.Default = function Default() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
     states: [{}, {
       focus: true
@@ -57,9 +56,8 @@ var Default = function Default() {
     onChange: (0, _addonActions.action)("onChange")
   }));
 };
-exports.Default = Default;
 Default.displayName = "Default";
-var Required = function Required() {
+var Required = exports.Required = function Required() {
   return /*#__PURE__*/_react.default.createElement("form", null, /*#__PURE__*/_react.default.createElement(_TextArea.TextArea, {
     mt: 1,
     title: "Example",
@@ -69,6 +67,5 @@ var Required = function Required() {
     mt: 1
   }, "Submit"));
 };
-exports.Required = Required;
 Required.displayName = "Required";
 //# sourceMappingURL=TextArea.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.story.js","names":["_addonActions","require","_react","_interopRequireDefault","_storybookStates","_Button","_TextArea","obj","__esModule","default","_default","title","exports","Default","createElement","States","states","focus","hover","active","error","disabled","required","characterLimit","characterLimitHelper","defaultValue","name","description","TextArea","placeholder","onChange","action","displayName","Required","mt","Button"],"sources":["../../../src/elements/TextArea/TextArea.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Button } from \"../Button\"\nimport { TextArea, TextAreaProps } from \"./TextArea\"\n\nexport default {\n  title: \"Components/TextArea\",\n}\n\nexport const Default = () => {\n  return (\n    <States<TextAreaProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { error: \"Something went wrong.\" },\n        { disabled: true },\n        { title: \"Note\" },\n        { title: \"Note\", required: true },\n        { characterLimit: 10 },\n        {\n          characterLimit: 10,\n          characterLimitHelper: true,\n          required: true,\n        },\n        { characterLimit: 10, defaultValue: \"hello\" },\n        { characterLimit: 10, defaultValue: \"hello world\" },\n        { name: \"my-text-area\" },\n        {\n          name: \"my-text-area\",\n          title: \"Note\",\n          description: \"This is my description\",\n        },\n        {\n          defaultValue:\n            \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam iste beatae reiciendis ea harum, aspernatur, eius, omnis eveniet corporis consequatur minima assumenda ipsum dolor dolorum perferendis animi distinctio eligendi?\",\n        },\n      ]}\n    >\n      <TextArea placeholder=\"Start typing...\" onChange={action(\"onChange\")} />\n    </States>\n  )\n}\n\nexport const Required = () => {\n  return (\n    <form>\n      <TextArea\n        mt={1}\n        title=\"Example\"\n        required\n        placeholder=\"Submission should be blocked unless this has a value\"\n      />\n\n      <Button mt={1}>Submit</Button>\n    </form>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AAAoD,SAAAE,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAErC;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AAEM,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEX,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACV,gBAAA,CAAAW,MAAM;IACLC,MAAM,EAAE,CACN,CAAC,CAAC,EACF;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,MAAM,EAAE;IAAK,CAAC,EAChB;MAAEC,KAAK,EAAE;IAAwB,CAAC,EAClC;MAAEC,QAAQ,EAAE;IAAK,CAAC,EAClB;MAAEV,KAAK,EAAE;IAAO,CAAC,EACjB;MAAEA,KAAK,EAAE,MAAM;MAAEW,QAAQ,EAAE;IAAK,CAAC,EACjC;MAAEC,cAAc,EAAE;IAAG,CAAC,EACtB;MACEA,cAAc,EAAE,EAAE;MAClBC,oBAAoB,EAAE,IAAI;MAC1BF,QAAQ,EAAE;IACZ,CAAC,EACD;MAAEC,cAAc,EAAE,EAAE;MAAEE,YAAY,EAAE;IAAQ,CAAC,EAC7C;MAAEF,cAAc,EAAE,EAAE;MAAEE,YAAY,EAAE;IAAc,CAAC,EACnD;MAAEC,IAAI,EAAE;IAAe,CAAC,EACxB;MACEA,IAAI,EAAE,cAAc;MACpBf,KAAK,EAAE,MAAM;MACbgB,WAAW,EAAE;IACf,CAAC,EACD;MACEF,YAAY,EACV;IACJ,CAAC;EACD,gBAEFvB,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,SAAA,CAAAsB,QAAQ;IAACC,WAAW,EAAC,iBAAiB;IAACC,QAAQ,EAAE,IAAAC,oBAAM,EAAC,UAAU;EAAE,EAAG,CACjE;AAEb,CAAC;AAAAnB,OAAA,CAAAC,OAAA,GAAAA,OAAA;AAnCYA,OAAO,CAAAmB,WAAA;AAqCb,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAA,EAAS;EAC5B,oBACE/B,MAAA,CAAAO,OAAA,CAAAK,aAAA,4BACEZ,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,SAAA,CAAAsB,QAAQ;IACPM,EAAE,EAAE,CAAE;IACNvB,KAAK,EAAC,SAAS;IACfW,QAAQ;IACRO,WAAW,EAAC;EAAsD,EAClE,eAEF3B,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,OAAA,CAAA8B,MAAM;IAACD,EAAE,EAAE;EAAE,GAAC,QAAM,CAAS,CACzB;AAEX,CAAC;AAAAtB,OAAA,CAAAqB,QAAA,GAAAA,QAAA;AAbYA,QAAQ,CAAAD,WAAA"}
+{"version":3,"file":"TextArea.story.js","names":["_addonActions","require","_react","_interopRequireDefault","_storybookStates","_Button","_TextArea","obj","__esModule","default","_default","exports","title","Default","createElement","States","states","focus","hover","active","error","disabled","required","characterLimit","characterLimitHelper","defaultValue","name","description","TextArea","placeholder","onChange","action","displayName","Required","mt","Button"],"sources":["../../../src/elements/TextArea/TextArea.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Button } from \"../Button\"\nimport { TextArea, TextAreaProps } from \"./TextArea\"\n\nexport default {\n  title: \"Components/TextArea\",\n}\n\nexport const Default = () => {\n  return (\n    <States<TextAreaProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { error: \"Something went wrong.\" },\n        { disabled: true },\n        { title: \"Note\" },\n        { title: \"Note\", required: true },\n        { characterLimit: 10 },\n        {\n          characterLimit: 10,\n          characterLimitHelper: true,\n          required: true,\n        },\n        { characterLimit: 10, defaultValue: \"hello\" },\n        { characterLimit: 10, defaultValue: \"hello world\" },\n        { name: \"my-text-area\" },\n        {\n          name: \"my-text-area\",\n          title: \"Note\",\n          description: \"This is my description\",\n        },\n        {\n          defaultValue:\n            \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam iste beatae reiciendis ea harum, aspernatur, eius, omnis eveniet corporis consequatur minima assumenda ipsum dolor dolorum perferendis animi distinctio eligendi?\",\n        },\n      ]}\n    >\n      <TextArea placeholder=\"Start typing...\" onChange={action(\"onChange\")} />\n    </States>\n  )\n}\n\nexport const Required = () => {\n  return (\n    <form>\n      <TextArea\n        mt={1}\n        title=\"Example\"\n        required\n        placeholder=\"Submission should be blocked unless this has a value\"\n      />\n\n      <Button mt={1}>Submit</Button>\n    </form>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AAAoD,SAAAE,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAErC;EACbG,KAAK,EAAE;AACT,CAAC;AAEM,IAAMC,OAAO,GAAAF,OAAA,CAAAE,OAAA,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEX,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACV,gBAAA,CAAAW,MAAM;IACLC,MAAM,EAAE,CACN,CAAC,CAAC,EACF;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,MAAM,EAAE;IAAK,CAAC,EAChB;MAAEC,KAAK,EAAE;IAAwB,CAAC,EAClC;MAAEC,QAAQ,EAAE;IAAK,CAAC,EAClB;MAAET,KAAK,EAAE;IAAO,CAAC,EACjB;MAAEA,KAAK,EAAE,MAAM;MAAEU,QAAQ,EAAE;IAAK,CAAC,EACjC;MAAEC,cAAc,EAAE;IAAG,CAAC,EACtB;MACEA,cAAc,EAAE,EAAE;MAClBC,oBAAoB,EAAE,IAAI;MAC1BF,QAAQ,EAAE;IACZ,CAAC,EACD;MAAEC,cAAc,EAAE,EAAE;MAAEE,YAAY,EAAE;IAAQ,CAAC,EAC7C;MAAEF,cAAc,EAAE,EAAE;MAAEE,YAAY,EAAE;IAAc,CAAC,EACnD;MAAEC,IAAI,EAAE;IAAe,CAAC,EACxB;MACEA,IAAI,EAAE,cAAc;MACpBd,KAAK,EAAE,MAAM;MACbe,WAAW,EAAE;IACf,CAAC,EACD;MACEF,YAAY,EACV;IACJ,CAAC;EACD,gBAEFvB,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,SAAA,CAAAsB,QAAQ;IAACC,WAAW,EAAC,iBAAiB;IAACC,QAAQ,EAAE,IAAAC,oBAAM,EAAC,UAAU;EAAE,EAAG,CACjE;AAEb,CAAC;AAnCYlB,OAAO,CAAAmB,WAAA;AAqCb,IAAMC,QAAQ,GAAAtB,OAAA,CAAAsB,QAAA,GAAG,SAAXA,QAAQA,CAAA,EAAS;EAC5B,oBACE/B,MAAA,CAAAO,OAAA,CAAAK,aAAA,4BACEZ,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,SAAA,CAAAsB,QAAQ;IACPM,EAAE,EAAE,CAAE;IACNtB,KAAK,EAAC,SAAS;IACfU,QAAQ;IACRO,WAAW,EAAC;EAAsD,EAClE,eAEF3B,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,OAAA,CAAA8B,MAAM;IAACD,EAAE,EAAE;EAAE,GAAC,QAAM,CAAS,CACzB;AAEX,CAAC;AAbYD,QAAQ,CAAAD,WAAA"}

package/dist/elements/TextArea/tokens.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TEXTAREA_STATES = void 0;
 var _themeGet = require("@styled-system/theme-get");
 var _styledComponents = require("styled-components");
-var TEXTAREA_STATES = {
+var TEXTAREA_STATES = exports.TEXTAREA_STATES = {
   default: (0, _styledComponents.css)(["min-height:", ";font-size:", ";line-height:", ";color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";font-size:", ";}"], (0, _themeGet.themeGet)("space.12"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("textVariants.sm.lineHeight"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize")),
   focus: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";opacity:1;}& + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
   hover: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";}"], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono100")),
@@ -15,5 +15,4 @@ var TEXTAREA_STATES = {
   disabled: (0, _styledComponents.css)(["color:", ";border-color:", ";background-color:transparent;::placeholder{color:", ";}&:not(:placeholder-shown) + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}&:placeholder-shown + label{color:", ";}"], (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), (0, _themeGet.themeGet)("colors.mono30")),
   error: (0, _styledComponents.css)(["border-color:", ";& + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"))
 };
-exports.TEXTAREA_STATES = TEXTAREA_STATES;
 //# sourceMappingURL=tokens.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","TEXTAREA_STATES","default","css","themeGet","focus","hover","active","completed","disabled","error","exports"],"sources":["../../../src/elements/TextArea/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const TEXTAREA_STATES: Record<State, any> = {\n  default: css`\n    min-height: ${themeGet(\"space.12\")};\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    line-height: ${themeGet(\"textVariants.sm.lineHeight\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n      opacity: 1;\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  completed: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    background-color: transparent;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n\n    &:not(:placeholder-shown) + label {\n      color: ${themeGet(\"colors.mono30\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:placeholder-shown + label {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & + label {\n      color: ${themeGet(\"colors.red100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAGO,IAAME,eAAmC,GAAG;EACjDC,OAAO,MAAEC,qBAAG,oJACI,IAAAC,kBAAQ,EAAC,UAAU,CAAC,EACrB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,EAC1C,IAAAA,kBAAQ,EAAC,4BAA4B,CAAC,EAC5C,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAIzB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EACrB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,CAE5D;EACDC,KAAK,MAAEF,qBAAG,uKACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAKzB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EACDE,KAAK,MAAEH,qBAAG,qFACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDG,MAAM,MAAEJ,qBAAG,6JACA,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EACDI,SAAS,MAAEL,qBAAG,mIACH,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAErB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EACDK,QAAQ,MAAEN,qBAAG,0PACF,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAClB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAI9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAIzB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAErB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASxC,IAAAA,kBAAQ,EAAC,eAAe,CAAC,CAErC;EACDM,KAAK,MAAEP,qBAAG,wHACQ,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAErB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC;AAQvD,CAAC;AAAAO,OAAA,CAAAV,eAAA,GAAAA,eAAA"}
+{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","TEXTAREA_STATES","exports","default","css","themeGet","focus","hover","active","completed","disabled","error"],"sources":["../../../src/elements/TextArea/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const TEXTAREA_STATES: Record<State, any> = {\n  default: css`\n    min-height: ${themeGet(\"space.12\")};\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    line-height: ${themeGet(\"textVariants.sm.lineHeight\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n      opacity: 1;\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  completed: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    background-color: transparent;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n\n    &:not(:placeholder-shown) + label {\n      color: ${themeGet(\"colors.mono30\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:placeholder-shown + label {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & + label {\n      color: ${themeGet(\"colors.red100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAGO,IAAME,eAAmC,GAAAC,OAAA,CAAAD,eAAA,GAAG;EACjDE,OAAO,MAAEC,qBAAG,oJACI,IAAAC,kBAAQ,EAAC,UAAU,CAAC,EACrB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,EAC1C,IAAAA,kBAAQ,EAAC,4BAA4B,CAAC,EAC5C,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAIzB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EACrB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,CAE5D;EACDC,KAAK,MAAEF,qBAAG,uKACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAKzB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EACDE,KAAK,MAAEH,qBAAG,qFACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDG,MAAM,MAAEJ,qBAAG,6JACA,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EACDI,SAAS,MAAEL,qBAAG,mIACH,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAErB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EACDK,QAAQ,MAAEN,qBAAG,0PACF,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAClB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAI9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAIzB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAErB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASxC,IAAAA,kBAAQ,EAAC,eAAe,CAAC,CAErC;EACDM,KAAK,MAAEP,qBAAG,wHACQ,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAErB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC;AAQvD,CAAC"}

package/dist/elements/TextArea/types.d.ts

@@ -1 +1 @@
-export declare type State = "active" | "default" | "disabled" | "error" | "focus" | "hover" | "completed";
+export type State = "active" | "default" | "disabled" | "error" | "focus" | "hover" | "completed";

package/dist/elements/Toasts/Toast.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { BoxProps } from "../Box";
-export declare type ToastVariant = keyof typeof TOAST_VARIANTS;
+export type ToastVariant = keyof typeof TOAST_VARIANTS;
 export interface ToastProps extends BoxProps {
     id: string;
     action?: {

package/dist/elements/Toasts/Toast.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
-var Toast = function Toast(_ref) {
+var Toast = exports.Toast = function Toast(_ref) {
   var id = _ref.id,
     action = _ref.action,
     description = _ref.description,
@@ -57,9 +57,8 @@ var Toast = function Toast(_ref) {
     variant: "xs"
   }, description));
 };
-exports.Toast = Toast;
 Toast.displayName = "Toast";
-var TOAST_VARIANTS = {
+var TOAST_VARIANTS = exports.TOAST_VARIANTS = {
   message: {
     backgroundColor: "mono100",
     color: "mono0"
@@ -77,7 +76,6 @@ var TOAST_VARIANTS = {
     color: "mono0"
   }
 };
-exports.TOAST_VARIANTS = TOAST_VARIANTS;
 var Container = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Toast__Container",
   componentId: "sc-1c067m4-0"

package/dist/elements/Toasts/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":["_react","_interopRequireDefault","require","_styledComponents","_styledSystem","_Box","_Flex","_Clickable","_Text","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Toast","_ref","id","action","description","message","onClose","rest","handleClick","createElement","Container","width","px","py","bg","color","role","tabIndex","onClick","onKeyPress","event","style","cursor","Flex","alignItems","justifyContent","Text","variant","Clickable","textDecoration","label","exports","displayName","TOAST_VARIANTS","backgroundColor","alert","success","error","styled","Box","withConfig","componentId","variants"],"sources":["../../../src/elements/Toasts/Toast.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\n\nexport type ToastVariant = keyof typeof TOAST_VARIANTS\n\nexport interface ToastProps extends BoxProps {\n  id: string\n  action?: {\n    label: string\n    onClick(): void\n  }\n  description?: string\n  message: string\n  onClose?(id: string): void\n  variant?: ToastVariant\n}\n\nexport const Toast: React.FC<React.PropsWithChildren<ToastProps>> = ({\n  id,\n  action,\n  description,\n  message,\n  onClose,\n  ...rest\n}) => {\n  const handleClick = () => {\n    onClose?.(id)\n  }\n\n  return (\n    <Container\n      width=\"100%\"\n      px={2}\n      py={1}\n      bg=\"mono100\"\n      color=\"mono0\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleClick}\n      onKeyPress={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          onClose?.(id)\n        }\n      }}\n      style={{ cursor: \"pointer\" }}\n      {...rest}\n    >\n      <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n        <Text variant=\"sm-display\">{message}</Text>\n\n        {action && (\n          <Clickable onClick={action.onClick} textDecoration=\"underline\">\n            <Text variant=\"xs\">{action.label}</Text>\n          </Clickable>\n        )}\n      </Flex>\n\n      {description && <Text variant=\"xs\">{description}</Text>}\n    </Container>\n  )\n}\n\nexport const TOAST_VARIANTS = {\n  message: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n  alert: {\n    backgroundColor: \"blue100\",\n    color: \"mono0\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"mono0\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"mono0\",\n  },\n}\n\nconst Container = styled(Box)`\n  ${variant({ variants: TOAST_VARIANTS })}\n  user-select: none;\n`\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,IAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AAA8B,IAAAO,SAAA;AAAA,SAAAR,uBAAAS,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAAA,SAAAQ,yBAAAN,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,GAAAY,6BAAA,CAAAR,MAAA,EAAAO,QAAA,OAAAN,GAAA,EAAAJ,CAAA,MAAAJ,MAAA,CAAAgB,qBAAA,QAAAC,gBAAA,GAAAjB,MAAA,CAAAgB,qBAAA,CAAAT,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAa,gBAAA,CAAAX,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAS,gBAAA,CAAAb,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,uBAAAR,MAAA,CAAAS,SAAA,CAAAU,oBAAA,CAAAR,IAAA,CAAAJ,MAAA,EAAAC,GAAA,aAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,cAAAL,MAAA;AAAA,SAAAY,8BAAAR,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,WAAAiB,UAAA,GAAApB,MAAA,CAAAqB,IAAA,CAAAd,MAAA,OAAAC,GAAA,EAAAJ,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAgB,UAAA,CAAAd,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAY,UAAA,CAAAhB,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,kBAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,YAAAL,MAAA;AAgBvB,IAAMmB,KAAoD,GAAG,SAAvDA,KAAoDA,CAAAC,IAAA,EAO3D;EAAA,IANJC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACJC,IAAI,GAAAhB,wBAAA,CAAAU,IAAA,EAAA5B,SAAA;EAEP,IAAMmC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGJ,EAAE,CAAC;EACf,CAAC;EAED,oBACEtC,MAAA,CAAAY,OAAA,CAAAiC,aAAA,CAACC,SAAS,EAAAjC,QAAA;IACRkC,KAAK,EAAC,MAAM;IACZC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAC,SAAS;IACZC,KAAK,EAAC,OAAO;IACbC,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IACZC,OAAO,EAAEV,WAAY;IACrBW,UAAU,EAAE,SAAAA,WAACC,KAAK,EAAK;MACrB,IAAIA,KAAK,CAAClC,GAAG,KAAK,OAAO,IAAIkC,KAAK,CAAClC,GAAG,KAAK,GAAG,EAAE;QAC9CoB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGJ,EAAE,CAAC;MACf;IACF,CAAE;IACFmB,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAU;EAAE,GACzBf,IAAI,gBAER3C,MAAA,CAAAY,OAAA,CAAAiC,aAAA,CAACvC,KAAA,CAAAqD,IAAI;IAACC,UAAU,EAAC,YAAY;IAACC,cAAc,EAAC;EAAe,gBAC1D7D,MAAA,CAAAY,OAAA,CAAAiC,aAAA,CAACrC,KAAA,CAAAsD,IAAI;IAACC,OAAO,EAAC;EAAY,GAAEtB,OAAO,CAAQ,EAE1CF,MAAM,iBACLvC,MAAA,CAAAY,OAAA,CAAAiC,aAAA,CAACtC,UAAA,CAAAyD,SAAS;IAACV,OAAO,EAAEf,MAAM,CAACe,OAAQ;IAACW,cAAc,EAAC;EAAW,gBAC5DjE,MAAA,CAAAY,OAAA,CAAAiC,aAAA,CAACrC,KAAA,CAAAsD,IAAI;IAACC,OAAO,EAAC;EAAI,GAAExB,MAAM,CAAC2B,KAAK,CAAQ,CAE3C,CACI,EAEN1B,WAAW,iBAAIxC,MAAA,CAAAY,OAAA,CAAAiC,aAAA,CAACrC,KAAA,CAAAsD,IAAI;IAACC,OAAO,EAAC;EAAI,GAAEvB,WAAW,CAAQ,CAC7C;AAEhB,CAAC;AAAA2B,OAAA,CAAA/B,KAAA,GAAAA,KAAA;AA3CYA,KAAoD,CAAAgC,WAAA;AA6C1D,IAAMC,cAAc,GAAG;EAC5B5B,OAAO,EAAE;IACP6B,eAAe,EAAE,SAAS;IAC1BnB,KAAK,EAAE;EACT,CAAC;EACDoB,KAAK,EAAE;IACLD,eAAe,EAAE,SAAS;IAC1BnB,KAAK,EAAE;EACT,CAAC;EACDqB,OAAO,EAAE;IACPF,eAAe,EAAE,UAAU;IAC3BnB,KAAK,EAAE;EACT,CAAC;EACDsB,KAAK,EAAE;IACLH,eAAe,EAAE,QAAQ;IACzBnB,KAAK,EAAE;EACT;AACF,CAAC;AAAAgB,OAAA,CAAAE,cAAA,GAAAA,cAAA;AAED,IAAMvB,SAAS,GAAG,IAAA4B,yBAAM,EAACC,QAAG,CAAC,CAAAC,UAAA;EAAAR,WAAA;EAAAS,WAAA;AAAA,+BACzB,IAAAd,qBAAO,EAAC;EAAEe,QAAQ,EAAET;AAAe,CAAC,CAAC,CAExC"}
+{"version":3,"file":"Toast.js","names":["_react","_interopRequireDefault","require","_styledComponents","_styledSystem","_Box","_Flex","_Clickable","_Text","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Toast","exports","_ref","id","action","description","message","onClose","rest","handleClick","createElement","Container","width","px","py","bg","color","role","tabIndex","onClick","onKeyPress","event","style","cursor","Flex","alignItems","justifyContent","Text","variant","Clickable","textDecoration","label","displayName","TOAST_VARIANTS","backgroundColor","alert","success","error","styled","Box","withConfig","componentId","variants"],"sources":["../../../src/elements/Toasts/Toast.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\n\nexport type ToastVariant = keyof typeof TOAST_VARIANTS\n\nexport interface ToastProps extends BoxProps {\n  id: string\n  action?: {\n    label: string\n    onClick(): void\n  }\n  description?: string\n  message: string\n  onClose?(id: string): void\n  variant?: ToastVariant\n}\n\nexport const Toast: React.FC<React.PropsWithChildren<ToastProps>> = ({\n  id,\n  action,\n  description,\n  message,\n  onClose,\n  ...rest\n}) => {\n  const handleClick = () => {\n    onClose?.(id)\n  }\n\n  return (\n    <Container\n      width=\"100%\"\n      px={2}\n      py={1}\n      bg=\"mono100\"\n      color=\"mono0\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleClick}\n      onKeyPress={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          onClose?.(id)\n        }\n      }}\n      style={{ cursor: \"pointer\" }}\n      {...rest}\n    >\n      <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n        <Text variant=\"sm-display\">{message}</Text>\n\n        {action && (\n          <Clickable onClick={action.onClick} textDecoration=\"underline\">\n            <Text variant=\"xs\">{action.label}</Text>\n          </Clickable>\n        )}\n      </Flex>\n\n      {description && <Text variant=\"xs\">{description}</Text>}\n    </Container>\n  )\n}\n\nexport const TOAST_VARIANTS = {\n  message: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n  alert: {\n    backgroundColor: \"blue100\",\n    color: \"mono0\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"mono0\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"mono0\",\n  },\n}\n\nconst Container = styled(Box)`\n  ${variant({ variants: TOAST_VARIANTS })}\n  user-select: none;\n`\n"],"mappings":"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"}

package/dist/elements/Toasts/Toast.story.js

@@ -9,11 +9,10 @@ var _react = _interopRequireDefault(require("react"));
 var _storybookStates = require("storybook-states");
 var _Toast = require("./Toast");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = {
+var _default = exports.default = {
   title: "Components/Toast"
 };
-exports.default = _default;
-var Default = function Default() {
+var Default = exports.Default = function Default() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
     states: [{
       variant: "message"
@@ -35,6 +34,5 @@ var Default = function Default() {
     description: "This is placeholder text."
   }));
 };
-exports.Default = Default;
 Default.displayName = "Default";
 //# sourceMappingURL=Toast.story.js.map

package/dist/elements/Toasts/Toast.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.story.js","names":["_addonActions","require","_react","_interopRequireDefault","_storybookStates","_Toast","obj","__esModule","default","_default","title","exports","Default","createElement","States","states","variant","action","label","onClick","Toast","id","message","description","displayName"],"sources":["../../../src/elements/Toasts/Toast.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Toast, ToastProps } from \"./Toast\"\n\nexport default {\n  title: \"Components/Toast\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ToastProps>>\n      states={[\n        { variant: \"message\" },\n        { variant: \"alert\" },\n        { variant: \"success\" },\n        { variant: \"error\" },\n        { action: { label: \"Undo\", onClick: action(\"onClick\") } },\n      ]}\n    >\n      <Toast\n        id=\"example\"\n        message=\"Message Title\"\n        description=\"This is placeholder text.\"\n      />\n    </States>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAA2C,SAAAE,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAE5B;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AAEM,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEV,MAAA,CAAAM,OAAA,CAAAK,aAAA,CAACT,gBAAA,CAAAU,MAAM;IACLC,MAAM,EAAE,CACN;MAAEC,OAAO,EAAE;IAAU,CAAC,EACtB;MAAEA,OAAO,EAAE;IAAQ,CAAC,EACpB;MAAEA,OAAO,EAAE;IAAU,CAAC,EACtB;MAAEA,OAAO,EAAE;IAAQ,CAAC,EACpB;MAAEC,MAAM,EAAE;QAAEC,KAAK,EAAE,MAAM;QAAEC,OAAO,EAAE,IAAAF,oBAAM,EAAC,SAAS;MAAE;IAAE,CAAC;EACzD,gBAEFf,MAAA,CAAAM,OAAA,CAAAK,aAAA,CAACR,MAAA,CAAAe,KAAK;IACJC,EAAE,EAAC,SAAS;IACZC,OAAO,EAAC,eAAe;IACvBC,WAAW,EAAC;EAA2B,EACvC,CACK;AAEb,CAAC;AAAAZ,OAAA,CAAAC,OAAA,GAAAA,OAAA;AAlBYA,OAAO,CAAAY,WAAA"}
+{"version":3,"file":"Toast.story.js","names":["_addonActions","require","_react","_interopRequireDefault","_storybookStates","_Toast","obj","__esModule","default","_default","exports","title","Default","createElement","States","states","variant","action","label","onClick","Toast","id","message","description","displayName"],"sources":["../../../src/elements/Toasts/Toast.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Toast, ToastProps } from \"./Toast\"\n\nexport default {\n  title: \"Components/Toast\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ToastProps>>\n      states={[\n        { variant: \"message\" },\n        { variant: \"alert\" },\n        { variant: \"success\" },\n        { variant: \"error\" },\n        { action: { label: \"Undo\", onClick: action(\"onClick\") } },\n      ]}\n    >\n      <Toast\n        id=\"example\"\n        message=\"Message Title\"\n        description=\"This is placeholder text.\"\n      />\n    </States>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAA2C,SAAAE,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAE5B;EACbG,KAAK,EAAE;AACT,CAAC;AAEM,IAAMC,OAAO,GAAAF,OAAA,CAAAE,OAAA,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEV,MAAA,CAAAM,OAAA,CAAAK,aAAA,CAACT,gBAAA,CAAAU,MAAM;IACLC,MAAM,EAAE,CACN;MAAEC,OAAO,EAAE;IAAU,CAAC,EACtB;MAAEA,OAAO,EAAE;IAAQ,CAAC,EACpB;MAAEA,OAAO,EAAE;IAAU,CAAC,EACtB;MAAEA,OAAO,EAAE;IAAQ,CAAC,EACpB;MAAEC,MAAM,EAAE;QAAEC,KAAK,EAAE,MAAM;QAAEC,OAAO,EAAE,IAAAF,oBAAM,EAAC,SAAS;MAAE;IAAE,CAAC;EACzD,gBAEFf,MAAA,CAAAM,OAAA,CAAAK,aAAA,CAACR,MAAA,CAAAe,KAAK;IACJC,EAAE,EAAC,SAAS;IACZC,OAAO,EAAC,eAAe;IACvBC,WAAW,EAAC;EAA2B,EACvC,CACK;AAEb,CAAC;AAlBYX,OAAO,CAAAY,WAAA"}

package/dist/elements/Toasts/Toasts.js

@@ -17,7 +17,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
-var Toasts = function Toasts(_ref) {
+var Toasts = exports.Toasts = function Toasts(_ref) {
   var _ref$limit = _ref.limit,
     limit = _ref$limit === void 0 ? 5 : _ref$limit,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -44,7 +44,6 @@ var Toasts = function Toasts(_ref) {
     }, toast.message, " - ", toast.description);
   })));
 };
-exports.Toasts = Toasts;
 var takeRight = function takeRight(xs) {
   var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   if (xs.length < limit) {

package/dist/elements/Toasts/Toasts.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toasts.js","names":["_react","_interopRequireDefault","require","_VisuallyHidden","_Box","_Join","_Spacer","_Toast","_useToasts2","_excluded","_excluded2","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Toasts","_ref","_ref$limit","limit","rest","_useToasts","useToasts","toasts","createElement","Fragment","Box","Join","separator","Spacer","y","takeRight","map","_ref2","id","Toast","VisuallyHidden","toast","message","description","exports","xs","undefined","slice"],"sources":["../../../src/elements/Toasts/Toasts.tsx"],"sourcesContent":["import React from \"react\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Toast } from \"./Toast\"\nimport { useToasts } from \"./useToasts\"\n\nexport interface ToastsProps extends BoxProps {\n  limit?: number\n}\n\nexport const Toasts: React.FC<React.PropsWithChildren<ToastsProps>> = ({ limit = 5, ...rest }) => {\n  const { toasts } = useToasts()\n\n  return (\n    <>\n      <Box {...rest}>\n        <Join separator={<Spacer y={1} />}>\n          {takeRight(toasts, limit).map(({ id, ...rest }) => (\n            <Toast key={id} id={id} {...rest} />\n          ))}\n        </Join>\n      </Box>\n\n      <VisuallyHidden\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        {toasts.map((toast, i) => {\n          return (\n            <div key={i}>\n              {toast.message} - {toast.description}\n            </div>\n          )\n        })}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst takeRight = <T,>(xs: T[], limit = 1) => {\n  if (xs.length < limit) {\n    return xs\n  }\n\n  return xs.slice(xs.length - limit, xs.length)\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,IAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,WAAA,GAAAN,OAAA;AAAuC,IAAAO,SAAA;EAAAC,UAAA;AAAA,SAAAT,uBAAAU,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAAA,SAAAQ,yBAAAN,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,GAAAY,6BAAA,CAAAR,MAAA,EAAAO,QAAA,OAAAN,GAAA,EAAAJ,CAAA,MAAAJ,MAAA,CAAAgB,qBAAA,QAAAC,gBAAA,GAAAjB,MAAA,CAAAgB,qBAAA,CAAAT,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAa,gBAAA,CAAAX,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAS,gBAAA,CAAAb,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,uBAAAR,MAAA,CAAAS,SAAA,CAAAU,oBAAA,CAAAR,IAAA,CAAAJ,MAAA,EAAAC,GAAA,aAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,cAAAL,MAAA;AAAA,SAAAY,8BAAAR,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,WAAAiB,UAAA,GAAApB,MAAA,CAAAqB,IAAA,CAAAd,MAAA,OAAAC,GAAA,EAAAJ,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAgB,UAAA,CAAAd,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAY,UAAA,CAAAhB,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,kBAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,YAAAL,MAAA;AAMhC,IAAMmB,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAA+B;EAAA,IAAAC,UAAA,GAAAD,IAAA,CAAzBE,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,CAAC,GAAAA,UAAA;IAAKE,IAAI,GAAAb,wBAAA,CAAAU,IAAA,EAAA7B,SAAA;EACzF,IAAAiC,UAAA,GAAmB,IAAAC,qBAAS,GAAE;IAAtBC,MAAM,GAAAF,UAAA,CAANE,MAAM;EAEd,oBACE5C,MAAA,CAAAa,OAAA,CAAAgC,aAAA,CAAA7C,MAAA,CAAAa,OAAA,CAAAiC,QAAA,qBACE9C,MAAA,CAAAa,OAAA,CAAAgC,aAAA,CAACzC,IAAA,CAAA2C,GAAG,EAAKN,IAAI,eACXzC,MAAA,CAAAa,OAAA,CAAAgC,aAAA,CAACxC,KAAA,CAAA2C,IAAI;IAACC,SAAS,eAAEjD,MAAA,CAAAa,OAAA,CAAAgC,aAAA,CAACvC,OAAA,CAAA4C,MAAM;MAACC,CAAC,EAAE;IAAE;EAAI,GAC/BC,SAAS,CAACR,MAAM,EAAEJ,KAAK,CAAC,CAACa,GAAG,CAAC,UAAAC,KAAA;IAAA,IAAGC,EAAE,GAAAD,KAAA,CAAFC,EAAE;MAAKd,IAAI,GAAAb,wBAAA,CAAA0B,KAAA,EAAA5C,UAAA;IAAA,oBAC1CV,MAAA,CAAAa,OAAA,CAAAgC,aAAA,CAACtC,MAAA,CAAAiD,KAAK,EAAA1C,QAAA;MAACS,GAAG,EAAEgC,EAAG;MAACA,EAAE,EAAEA;IAAG,GAAKd,IAAI,EAAI;EAAA,CACrC,CAAC,CACG,CACH,eAENzC,MAAA,CAAAa,OAAA,CAAAgC,aAAA,CAAC1C,eAAA,CAAAsD,cAAc;IACb,aAAU,WAAW;IACrB,eAAY,MAAM;IAClB,iBAAc;EAAW,GAExBb,MAAM,CAACS,GAAG,CAAC,UAACK,KAAK,EAAEvC,CAAC,EAAK;IACxB,oBACEnB,MAAA,CAAAa,OAAA,CAAAgC,aAAA;MAAKtB,GAAG,EAAEJ;IAAE,GACTuC,KAAK,CAACC,OAAO,EAAC,KAAG,EAACD,KAAK,CAACE,WAAW,CAChC;EAEV,CAAC,CAAC,CACa,CAChB;AAEP,CAAC;AAAAC,OAAA,CAAAxB,MAAA,GAAAA,MAAA;AAED,IAAMe,SAAS,GAAG,SAAZA,SAASA,CAAQU,EAAO,EAAgB;EAAA,IAAdtB,KAAK,GAAApB,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAA2C,SAAA,GAAA3C,SAAA,MAAG,CAAC;EACvC,IAAI0C,EAAE,CAACzC,MAAM,GAAGmB,KAAK,EAAE;IACrB,OAAOsB,EAAE;EACX;EAEA,OAAOA,EAAE,CAACE,KAAK,CAACF,EAAE,CAACzC,MAAM,GAAGmB,KAAK,EAAEsB,EAAE,CAACzC,MAAM,CAAC;AAC/C,CAAC"}
+{"version":3,"file":"Toasts.js","names":["_react","_interopRequireDefault","require","_VisuallyHidden","_Box","_Join","_Spacer","_Toast","_useToasts2","_excluded","_excluded2","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Toasts","exports","_ref","_ref$limit","limit","rest","_useToasts","useToasts","toasts","createElement","Fragment","Box","Join","separator","Spacer","y","takeRight","map","_ref2","id","Toast","VisuallyHidden","toast","message","description","xs","undefined","slice"],"sources":["../../../src/elements/Toasts/Toasts.tsx"],"sourcesContent":["import React from \"react\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Toast } from \"./Toast\"\nimport { useToasts } from \"./useToasts\"\n\nexport interface ToastsProps extends BoxProps {\n  limit?: number\n}\n\nexport const Toasts: React.FC<React.PropsWithChildren<ToastsProps>> = ({ limit = 5, ...rest }) => {\n  const { toasts } = useToasts()\n\n  return (\n    <>\n      <Box {...rest}>\n        <Join separator={<Spacer y={1} />}>\n          {takeRight(toasts, limit).map(({ id, ...rest }) => (\n            <Toast key={id} id={id} {...rest} />\n          ))}\n        </Join>\n      </Box>\n\n      <VisuallyHidden\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        {toasts.map((toast, i) => {\n          return (\n            <div key={i}>\n              {toast.message} - {toast.description}\n            </div>\n          )\n        })}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst takeRight = <T,>(xs: T[], limit = 1) => {\n  if (xs.length < limit) {\n    return xs\n  }\n\n  return xs.slice(xs.length - limit, xs.length)\n}\n"],"mappings":"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"}

package/dist/elements/Toasts/Toasts.story.js

@@ -24,14 +24,13 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 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 _default = {
+var _default = exports.default = {
   title: "Components/Toasts"
 };
-exports.default = _default;
-var Demo = function Demo() {
+var Demo = exports.Demo = function Demo() {
   var _useToasts = (0, _useToasts2.useToasts)(),
     sendToast = _useToasts.sendToast,
     retractToast = _useToasts.retractToast;
@@ -105,7 +104,6 @@ var Demo = function Demo() {
     }, "Remove ", id);
   }))));
 };
-exports.Demo = Demo;
 Demo.decorators = [function (Story) {
   return /*#__PURE__*/_react.default.createElement(_useToasts2.ToastsProvider, null, /*#__PURE__*/_react.default.createElement(Story, null));
 }];