@artsy/palette 20.0.1 → 20.0.2

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v20.0.2 (Fri May 20 2022)
+
+#### 🐛  Bug Fix
+
+- fix(spinner): supports box props; respects theme [#1166](https://github.com/artsy/palette/pull/1166) ([@dzucconi](https://github.com/dzucconi))
+- fix(spinner): supports box props; respects theme ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v20.0.1 (Fri May 20 2022)
 
 #### 🐛  Bug Fix

package/dist/elements/Spinner/Spinner.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+import { BoxProps } from "../../../dist";
 import { Color } from "../../Theme";
-export interface SpinnerProps {
+export interface SpinnerProps extends Omit<BoxProps, "size"> {
     /** Delay before spinner appears */
     delay?: number;
     /** Width of the spinner */

package/dist/elements/Spinner/Spinner.js

@@ -7,11 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getSize = exports.Spinner = void 0;
 
+var _themeGet = require("@styled-system/theme-get");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _helpers = require("../../helpers");
+var _Box = require("../Box");
+
+var _excluded = ["delay"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -29,6 +33,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 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; }
+
 /**
  * Returns width and height of spinner based on size
  * @param props
@@ -70,8 +78,11 @@ exports.getSize = getSize;
 var spin = (0, _styledComponents.keyframes)(["100%{transform:rotate(360deg)}"]);
 /** Generic Spinner component */
 
-var Spinner = function Spinner(props) {
-  var _useState = (0, _react.useState)(props.delay === 0),
+var Spinner = function Spinner(_ref) {
+  var delay = _ref.delay,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(delay === 0),
       _useState2 = _slicedToArray(_useState, 2),
       show = _useState2[0],
       setShow = _useState2[1];
@@ -79,34 +90,34 @@ var Spinner = function Spinner(props) {
   (0, _react.useEffect)(function () {
     var timeout = setTimeout(function () {
       setShow(true);
-    }, props.delay);
+    }, delay);
     return function () {
       clearTimeout(timeout);
     };
-  }, []);
+  }, [delay]);
 
   if (!show) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(SpinnerBar, props);
+  return /*#__PURE__*/_react.default.createElement(SpinnerBar, rest);
 };
 
 exports.Spinner = Spinner;
 Spinner.displayName = "Spinner";
-
-var SpinnerBar = _styledComponents.default.div.withConfig({
+var SpinnerBar = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Spinner__SpinnerBar",
   componentId: "sc-1t000ax-0"
-})(["animation:", " 1s infinite linear;position:absolute;", ";"], spin, function (props) {
+})(["animation:", " 1s infinite linear;", ";"], spin, function (props) {
   var _getSize = getSize(props),
       width = _getSize.width,
       height = _getSize.height;
 
-  return "\n      background-color: ".concat(props.color === "currentColor" ? "currentColor" : (0, _helpers.color)(props.color), ";\n      width: ").concat(width, "px;\n      height: ").concat(height, "px;\n      top: calc(50% - ").concat(height, "px / 2);\n      left: calc(50% - ").concat(width, "px / 2);\n    ");
-});
+  return "\n      background-color: ".concat(props.color === "currentColor" ? "currentColor" : (0, _themeGet.themeGet)("colors.".concat(props.color))(props), ";\n\n      width: ").concat(width, "px;\n      height: ").concat(height, "px;\n      top: calc(50% - ").concat(height, "px / 2);\n      left: calc(50% - ").concat(width, "px / 2);\n    ");
+}); // TODO: Remove default `position`, `top`, & `left` props
 
 Spinner.defaultProps = {
+  position: "absolute",
   delay: 0,
   width: 25,
   height: 6,

package/dist/elements/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Spinner/Spinner.tsx"],"names":["getSize","props","base","width","height","size","spin","keyframes","Spinner","delay","show","setShow","timeout","setTimeout","clearTimeout","SpinnerBar","styled","div","color","defaultProps","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;AAgBA;AACA;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,KAAD,EAAyB;AAC9C,MAAMC,IAAI,GAAG;AAAEC,IAAAA,KAAK,EAAE,EAAT;AAAaC,IAAAA,MAAM,EAAE;AAArB,GAAb;;AAEA,UAAQH,KAAK,CAACI,IAAd;AACE,SAAK,OAAL;AACE,aAAO;AACLF,QAAAA,KAAK,EAAED,IAAI,CAACC,KAAL,GAAa,GADf;AAELC,QAAAA,MAAM,EAAEF,IAAI,CAACE,MAAL,GAAc;AAFjB,OAAP;;AAIF,SAAK,QAAL;AACE,aAAO;AACLD,QAAAA,KAAK,EAAED,IAAI,CAACC,KAAL,GAAa,GADf;AAELC,QAAAA,MAAM,EAAEF,IAAI,CAACE,MAAL,GAAc;AAFjB,OAAP;;AAIF,SAAK,OAAL;AACE,aAAO;AACLD,QAAAA,KAAK,EAAED,IAAI,CAACC,KADP;AAELC,QAAAA,MAAM,EAAEF,IAAI,CAACE;AAFR,OAAP;;AAIF;AACE,aAAO;AACLD,QAAAA,KAAK,EAAEF,KAAK,CAACE,KADR;AAELC,QAAAA,MAAM,EAAEH,KAAK,CAACG;AAFT,OAAP;AAjBJ;AAsBD,CAzBM;;;AA2BP,IAAME,IAAI,OAAGC,2BAAH,qCAAV;AAMA;;AACO,IAAMC,OAA+B,GAAG,SAAlCA,OAAkC,CAACP,KAAD,EAAW;AACxD,kBAAwB,qBAASA,KAAK,CAACQ,KAAN,KAAgB,CAAzB,CAAxB;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AAEA,wBAAU,YAAM;AACd,QAAMC,OAAO,GAAGC,UAAU,CAAC,YAAM;AAC/BF,MAAAA,OAAO,CAAC,IAAD,CAAP;AACD,KAFyB,EAEvBV,KAAK,CAACQ,KAFiB,CAA1B;AAIA,WAAO,YAAM;AACXK,MAAAA,YAAY,CAACF,OAAD,CAAZ;AACD,KAFD;AAGD,GARD,EAQG,EARH;;AAUA,MAAI,CAACF,IAAL,EAAW;AACT,WAAO,IAAP;AACD;;AAED,sBAAO,6BAAC,UAAD,EAAgBT,KAAhB,CAAP;AACD,CAlBM;;;AAAMO,O;;AAoBb,IAAMO,UAAU,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,kEACDX,IADC,EAIZ,UAACL,KAAD,EAAW;AACX,iBAA0BD,OAAO,CAACC,KAAD,CAAjC;AAAA,MAAQE,KAAR,YAAQA,KAAR;AAAA,MAAeC,MAAf,YAAeA,MAAf;;AAEA,6CAEIH,KAAK,CAACiB,KAAN,KAAgB,cAAhB,GAAiC,cAAjC,GAAkD,oBAAMjB,KAAK,CAACiB,KAAZ,CAFtD,6BAIWf,KAJX,gCAKYC,MALZ,wCAMoBA,MANpB,8CAOqBD,KAPrB;AASD,CAhBa,CAAhB;;AAmBAK,OAAO,CAACW,YAAR,GAAuB;AACrBV,EAAAA,KAAK,EAAE,CADc;AAErBN,EAAAA,KAAK,EAAE,EAFc;AAGrBC,EAAAA,MAAM,EAAE,CAHa;AAIrBc,EAAAA,KAAK,EAAE;AAJc,CAAvB;AAOAV,OAAO,CAACY,WAAR,GAAsB,SAAtB","sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { color } from \"../../helpers\"\nimport { Color } from \"../../Theme\"\n\nexport interface SpinnerProps {\n  /** Delay before spinner appears */\n  delay?: number\n  /** Width of the spinner */\n  width?: number\n  /** Height of the spinner */\n  height?: number\n  /** Size of the spinner */\n  size?: \"small\" | \"medium\" | \"large\"\n  /** Color of the spinner */\n  color?: Color | \"currentColor\"\n}\n\n/**\n * Returns width and height of spinner based on size\n * @param props\n */\nexport const getSize = (props: SpinnerProps) => {\n  const base = { width: 25, height: 6 }\n\n  switch (props.size) {\n    case \"small\":\n      return {\n        width: base.width * 0.5,\n        height: base.height * 0.5,\n      }\n    case \"medium\":\n      return {\n        width: base.width * 0.8,\n        height: base.height * 0.8,\n      }\n    case \"large\":\n      return {\n        width: base.width,\n        height: base.height,\n      }\n    default:\n      return {\n        width: props.width,\n        height: props.height,\n      }\n  }\n}\n\nconst spin = keyframes`\n  100% {\n    transform: rotate(360deg)\n  }\n`\n\n/** Generic Spinner component */\nexport const Spinner: React.FC<SpinnerProps> = (props) => {\n  const [show, setShow] = useState(props.delay === 0)\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setShow(true)\n    }, props.delay)\n\n    return () => {\n      clearTimeout(timeout)\n    }\n  }, [])\n\n  if (!show) {\n    return null\n  }\n\n  return <SpinnerBar {...props} />\n}\n\nconst SpinnerBar = styled.div<SpinnerProps>`\n  animation: ${spin} 1s infinite linear;\n  position: absolute;\n\n  ${(props) => {\n    const { width, height } = getSize(props)\n\n    return `\n      background-color: ${\n        props.color === \"currentColor\" ? \"currentColor\" : color(props.color!)\n      };\n      width: ${width}px;\n      height: ${height}px;\n      top: calc(50% - ${height}px / 2);\n      left: calc(50% - ${width}px / 2);\n    `\n  }};\n`\n\nSpinner.defaultProps = {\n  delay: 0,\n  width: 25,\n  height: 6,\n  color: \"black100\",\n}\n\nSpinner.displayName = \"Spinner\"\n"],"file":"Spinner.js"}
+{"version":3,"sources":["../../../src/elements/Spinner/Spinner.tsx"],"names":["getSize","props","base","width","height","size","spin","keyframes","Spinner","delay","rest","show","setShow","timeout","setTimeout","clearTimeout","SpinnerBar","Box","color","defaultProps","position","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;AAeA;AACA;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,KAAD,EAAyB;AAC9C,MAAMC,IAAI,GAAG;AAAEC,IAAAA,KAAK,EAAE,EAAT;AAAaC,IAAAA,MAAM,EAAE;AAArB,GAAb;;AAEA,UAAQH,KAAK,CAACI,IAAd;AACE,SAAK,OAAL;AACE,aAAO;AACLF,QAAAA,KAAK,EAAED,IAAI,CAACC,KAAL,GAAa,GADf;AAELC,QAAAA,MAAM,EAAEF,IAAI,CAACE,MAAL,GAAc;AAFjB,OAAP;;AAKF,SAAK,QAAL;AACE,aAAO;AACLD,QAAAA,KAAK,EAAED,IAAI,CAACC,KAAL,GAAa,GADf;AAELC,QAAAA,MAAM,EAAEF,IAAI,CAACE,MAAL,GAAc;AAFjB,OAAP;;AAKF,SAAK,OAAL;AACE,aAAO;AACLD,QAAAA,KAAK,EAAED,IAAI,CAACC,KADP;AAELC,QAAAA,MAAM,EAAEF,IAAI,CAACE;AAFR,OAAP;;AAKF;AACE,aAAO;AACLD,QAAAA,KAAK,EAAEF,KAAK,CAACE,KADR;AAELC,QAAAA,MAAM,EAAEH,KAAK,CAACG;AAFT,OAAP;AApBJ;AAyBD,CA5BM;;;AA8BP,IAAME,IAAI,OAAGC,2BAAH,qCAAV;AAMA;;AACO,IAAMC,OAA+B,GAAG,SAAlCA,OAAkC,OAAwB;AAAA,MAArBC,KAAqB,QAArBA,KAAqB;AAAA,MAAXC,IAAW;;AACrE,kBAAwB,qBAASD,KAAK,KAAK,CAAnB,CAAxB;AAAA;AAAA,MAAOE,IAAP;AAAA,MAAaC,OAAb;;AAEA,wBAAU,YAAM;AACd,QAAMC,OAAO,GAAGC,UAAU,CAAC,YAAM;AAC/BF,MAAAA,OAAO,CAAC,IAAD,CAAP;AACD,KAFyB,EAEvBH,KAFuB,CAA1B;AAIA,WAAO,YAAM;AACXM,MAAAA,YAAY,CAACF,OAAD,CAAZ;AACD,KAFD;AAGD,GARD,EAQG,CAACJ,KAAD,CARH;;AAUA,MAAI,CAACE,IAAL,EAAW;AACT,WAAO,IAAP;AACD;;AAED,sBAAO,6BAAC,UAAD,EAAgBD,IAAhB,CAAP;AACD,CAlBM;;;AAAMF,O;AAoBb,IAAMQ,UAAU,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,gDACDX,IADC,EAGZ,UAACL,KAAD,EAAW;AACX,iBAA0BD,OAAO,CAACC,KAAD,CAAjC;AAAA,MAAQE,KAAR,YAAQA,KAAR;AAAA,MAAeC,MAAf,YAAeA,MAAf;;AAEA,6CAEIH,KAAK,CAACiB,KAAN,KAAgB,cAAhB,GACI,cADJ,GAEI,yCAAmBjB,KAAK,CAACiB,KAAzB,GAAkCjB,KAAlC,CAJR,+BAOWE,KAPX,gCAQYC,MARZ,wCASoBA,MATpB,8CAUqBD,KAVrB;AAYD,CAlBa,CAAhB,C,CAoBA;;AACAK,OAAO,CAACW,YAAR,GAAuB;AACrBC,EAAAA,QAAQ,EAAE,UADW;AAErBX,EAAAA,KAAK,EAAE,CAFc;AAGrBN,EAAAA,KAAK,EAAE,EAHc;AAIrBC,EAAAA,MAAM,EAAE,CAJa;AAKrBc,EAAAA,KAAK,EAAE;AALc,CAAvB;AAQAV,OAAO,CAACa,WAAR,GAAsB,SAAtB","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { BoxProps } from \"../../../dist\"\nimport { Color } from \"../../Theme\"\nimport { Box } from \"../Box\"\n\nexport interface SpinnerProps extends Omit<BoxProps, \"size\"> {\n  /** Delay before spinner appears */\n  delay?: number\n  /** Width of the spinner */\n  width?: number\n  /** Height of the spinner */\n  height?: number\n  /** Size of the spinner */\n  size?: \"small\" | \"medium\" | \"large\"\n  /** Color of the spinner */\n  color?: Color | \"currentColor\"\n}\n\n/**\n * Returns width and height of spinner based on size\n * @param props\n */\nexport const getSize = (props: SpinnerProps) => {\n  const base = { width: 25, height: 6 }\n\n  switch (props.size) {\n    case \"small\":\n      return {\n        width: base.width * 0.5,\n        height: base.height * 0.5,\n      }\n\n    case \"medium\":\n      return {\n        width: base.width * 0.8,\n        height: base.height * 0.8,\n      }\n\n    case \"large\":\n      return {\n        width: base.width,\n        height: base.height,\n      }\n\n    default:\n      return {\n        width: props.width,\n        height: props.height,\n      }\n  }\n}\n\nconst spin = keyframes`\n  100% {\n    transform: rotate(360deg)\n  }\n`\n\n/** Generic Spinner component */\nexport const Spinner: React.FC<SpinnerProps> = ({ delay, ...rest }) => {\n  const [show, setShow] = useState(delay === 0)\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setShow(true)\n    }, delay)\n\n    return () => {\n      clearTimeout(timeout)\n    }\n  }, [delay])\n\n  if (!show) {\n    return null\n  }\n\n  return <SpinnerBar {...rest} />\n}\n\nconst SpinnerBar = styled(Box)<SpinnerProps>`\n  animation: ${spin} 1s infinite linear;\n\n  ${(props) => {\n    const { width, height } = getSize(props)\n\n    return `\n      background-color: ${\n        props.color === \"currentColor\"\n          ? \"currentColor\"\n          : themeGet(`colors.${props.color}`)(props)\n      };\n\n      width: ${width}px;\n      height: ${height}px;\n      top: calc(50% - ${height}px / 2);\n      left: calc(50% - ${width}px / 2);\n    `\n  }};\n`\n// TODO: Remove default `position`, `top`, & `left` props\nSpinner.defaultProps = {\n  position: \"absolute\",\n  delay: 0,\n  width: 25,\n  height: 6,\n  color: \"black100\",\n}\n\nSpinner.displayName = \"Spinner\"\n"],"file":"Spinner.js"}

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

@@ -1,16 +1,17 @@
 declare const _default: {
     title: string;
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
 };
 export default _default;
+export declare const Default: () => JSX.Element;
 export declare const DefaultSpinner: () => JSX.Element;
 export declare const SpinnerWithDelayedShow: {
     (): JSX.Element;
     story: {
         name: string;
-        parameters: {
-            chromatic: {
-                disable: boolean;
-            };
-        };
     };
 };

package/dist/elements/Spinner/Spinner.story.js

@@ -3,19 +3,41 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SpinnerWithDelayedShow = exports.DefaultSpinner = void 0;
+exports.default = exports.SpinnerWithDelayedShow = exports.DefaultSpinner = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _storybookStates = require("storybook-states");
+
 var _Spinner = require("./Spinner");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = {
-  title: "Components/Spinner"
+  title: "Components/Spinner",
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
 };
 exports.default = _default;
 
+var Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+    states: [{}, {
+      color: "brand",
+      size: "small",
+      m: 2
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, {
+    position: "static"
+  }));
+};
+
+exports.Default = Default;
+Default.displayName = "Default";
+
 var DefaultSpinner = function DefaultSpinner() {
   return /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, null);
 };
@@ -32,11 +54,6 @@ var SpinnerWithDelayedShow = function SpinnerWithDelayedShow() {
 exports.SpinnerWithDelayedShow = SpinnerWithDelayedShow;
 SpinnerWithDelayedShow.displayName = "SpinnerWithDelayedShow";
 SpinnerWithDelayedShow.story = {
-  name: "Spinner with delayed show",
-  parameters: {
-    chromatic: {
-      disable: true
-    }
-  }
+  name: "Spinner with delayed show"
 };
 //# sourceMappingURL=Spinner.story.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Spinner/Spinner.story.tsx"],"names":["title","DefaultSpinner","SpinnerWithDelayedShow","story","name","parameters","chromatic","disable"],"mappings":";;;;;;;AAAA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAClC,sBAAO,6BAAC,gBAAD,OAAP;AACD,CAFM;;;AAAMA,c;;AAIN,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,GAAM;AAC1C,sBAAO,6BAAC,gBAAD;AAAS,IAAA,KAAK,EAAE;AAAhB,IAAP;AACD,CAFM;;;AAAMA,sB;AAIbA,sBAAsB,CAACC,KAAvB,GAA+B;AAC7BC,EAAAA,IAAI,EAAE,2BADuB;AAE7BC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AAFiB,CAA/B","sourcesContent":["import React from \"react\"\nimport { Spinner } from \"./Spinner\"\n\nexport default {\n  title: \"Components/Spinner\",\n}\n\nexport const DefaultSpinner = () => {\n  return <Spinner />\n}\n\nexport const SpinnerWithDelayedShow = () => {\n  return <Spinner delay={1000} />\n}\n\nSpinnerWithDelayedShow.story = {\n  name: \"Spinner with delayed show\",\n  parameters: { chromatic: { disable: true } },\n}\n"],"file":"Spinner.story.js"}
+{"version":3,"sources":["../../../src/elements/Spinner/Spinner.story.tsx"],"names":["title","parameters","chromatic","disable","Default","color","size","m","DefaultSpinner","SpinnerWithDelayedShow","story","name"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE,oBADM;AAEbC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AAFC,C;;;AAKR,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,sBACrB,6BAAC,uBAAD;AAAsB,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAEC,MAAAA,KAAK,EAAE,OAAT;AAAkBC,MAAAA,IAAI,EAAE,OAAxB;AAAiCC,MAAAA,CAAC,EAAE;AAApC,KAAL;AAA9B,kBACE,6BAAC,gBAAD;AAAS,IAAA,QAAQ,EAAC;AAAlB,IADF,CADqB;AAAA,CAAhB;;;AAAMH,O;;AAMN,IAAMI,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAClC,sBAAO,6BAAC,gBAAD,OAAP;AACD,CAFM;;;AAAMA,c;;AAIN,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,GAAM;AAC1C,sBAAO,6BAAC,gBAAD;AAAS,IAAA,KAAK,EAAE;AAAhB,IAAP;AACD,CAFM;;;AAAMA,sB;AAIbA,sBAAsB,CAACC,KAAvB,GAA+B;AAC7BC,EAAAA,IAAI,EAAE;AADuB,CAA/B","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Spinner, SpinnerProps } from \"./Spinner\"\n\nexport default {\n  title: \"Components/Spinner\",\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Default = () => (\n  <States<SpinnerProps> states={[{}, { color: \"brand\", size: \"small\", m: 2 }]}>\n    <Spinner position=\"static\" />\n  </States>\n)\n\nexport const DefaultSpinner = () => {\n  return <Spinner />\n}\n\nexport const SpinnerWithDelayedShow = () => {\n  return <Spinner delay={1000} />\n}\n\nSpinnerWithDelayedShow.story = {\n  name: \"Spinner with delayed show\",\n}\n"],"file":"Spinner.story.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "20.0.1",
+  "version": "20.0.2",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -178,5 +178,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "e7c43cc99dd63fce7028b113ac37dbf3d0c279d7"
+  "gitHead": "57539365f7b1731b294303ac9a0643d1b2612f42"
 }