@contentful/f36-spinner 4.0.0

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2018-present Contentful GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.mdx

@@ -0,0 +1,37 @@
+---
+title: 'Spinner'
+type: 'component'
+status: 'stable'
+slug: /components/spinner/
+github: 'https://github.com/contentful/forma-36/tree/forma-v4/packages/components/spinner'
+storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-spinner--default'
+typescript: ./src/Spinner.tsx
+---
+
+# Spinner
+
+A Spinner is a graphic element that helps communicating to users that an action is in progress and it will take some time to be completed.
+
+```jsx
+<Spinner />
+```
+
+## Code examples
+
+### With text
+
+It’s possible to use the Spinner with other elements. A very common pattern is using it together with text.
+
+```jsx
+<div>
+  Loading <Spinner />
+</div>
+```
+
+Another good example of the Spinner being used with other components is the loading state of `Button` component.
+
+## Props
+
+import { Props } from '@contentful/f36-docs-utils';
+
+<Props of="Spinner" />

package/dist/main.js

@@ -0,0 +1,138 @@
+var $b84Wv$emotion = require("emotion");
+var $b84Wv$react = require("react");
+var $b84Wv$contentfulf36tokens = require("@contentful/f36-tokens");
+var $b84Wv$contentfulf36core = require("@contentful/f36-core");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "Spinner", () => $05c01a9aaed28186$export$7f7cbe89f1eacd2);
+
+
+
+
+
+
+
+const $ccc4b2a72ca993e7$var$sizes = {
+    large: '36px',
+    medium: '20px',
+    small: '14px'
+};
+const $ccc4b2a72ca993e7$export$ffd58b7f6f099a57 = ()=>{
+    const animations = {
+        scale1: /*#__PURE__*/ $b84Wv$emotion.keyframes({
+            name: "2hhwgy",
+            styles: "0%{transform:scale(1,1);}6.666667%{transform:scale(1.5,0.5);}13.333333%{transform:scale(1,1);}26.666667%{transform:scale(1,1);}33.333333%{transform:scale(1,1);}40%{transform:scale(1,1);}53.333333%{transform:scale(1,1);}60%{transform:scale(1.5,0.5);}66.666667%{transform:scale(1,1);}100%{transform:scale(1,1);}"
+        }),
+        scale2: /*#__PURE__*/ $b84Wv$emotion.keyframes({
+            name: "1b94qny",
+            styles: "0%{transform:scale(1,1);}13.333333%{transform:scale(1,1);}20%{transform:scale(1.5,0.5);}26.666667%{transform:scale(1,1);}40%{transform:scale(1,1);}46.666667%{transform:scale(1,1);}53.333333%{transform:scale(1,1);}66.666667%{transform:scale(1,1);}73.333333%{transform:scale(1.5,0.5);}80%{transform:scale(1,1);}100%{transform:scale(1,1);}"
+        }),
+        scale3: /*#__PURE__*/ $b84Wv$emotion.keyframes({
+            name: "1q9z2j0",
+            styles: "0%{transform:scale(1,1);}26.666667%{transform:scale(1,1);}33.333333%{transform:scale(1.5,0.5);}40%{transform:scale(1,1);}53.333333%{transform:scale(1,1);}60%{transform:scale(1,1);}66.666667%{transform:scale(1,1);}80%{transform:scale(1,1);}86.666667%{transform:scale(1.5,0.5);}93.333333%{transform:scale(1,1);}100%{transform:scale(1,1);}"
+        }),
+        translate1: /*#__PURE__*/ $b84Wv$emotion.keyframes({
+            name: "piqegj",
+            styles: "0%{transform:translate(10px,33.528168px);}6.666667%{transform:translate(10px,41.764084px);}13.333333%{transform:translate(10px,33.528168px);}26.666667%{transform:translate(10px,-2.651608px);}33.333333%{transform:translate(10px,-4.471832px);}40%{transform:translate(10px,-2.651608px);}53.333333%{transform:translate(10px,33.528168px);}60%{transform:translate(10px,41.764084px);}66.666667%{transform:translate(10px,33.528168px);}100%{transform:translate(10px,33.528168px);}"
+        }),
+        translate2: /*#__PURE__*/ $b84Wv$emotion.keyframes({
+            name: "1tc59mm",
+            styles: "0%{transform:translate(30px,33.528168px);}13.333333%{transform:translate(30px,33.528168px);}20%{transform:translate(30px,41.764084px);}26.666667%{transform:translate(30px,33.528168px);}40%{transform:translate(30px,-2.651608px);}46.666667%{transform:translate(30px,-4.471832px);}53.333333%{transform:translate(30px,-2.651608px);}66.666667%{transform:translate(30px,33.528168px);}73.333333%{transform:translate(30px,41.764084px);}80%{transform:translate(30px,33.528168px);}100%{transform:translate(30px,33.528168px);}"
+        }),
+        translate3: /*#__PURE__*/ $b84Wv$emotion.keyframes({
+            name: "21uo4u",
+            styles: "0%{transform:translate(50px,33.528168px);}26.666667%{transform:translate(50px,33.528168px);}33.333333%{transform:translate(50px,41.764084px);}40%{transform:translate(50px,33.528168px);}53.333333%{transform:translate(50px,-2.651608px);}60%{transform:translate(50px,-4.471832px);}66.666667%{transform:translate(50px,-2.651608px);}80%{transform:translate(50px,33.528168px);}86.666667%{transform:translate(50px,41.764084px);}93.333333%{transform:translate(50px,33.528168px);}100%{transform:translate(50px,33.528168px);}"
+        })
+    };
+    return {
+        root: (props)=>/*#__PURE__*/ $b84Wv$emotion.css({
+                height: props.customSize ? `${props.customSize}px` : undefined,
+                verticalAlign: 'middle',
+                width: props.customSize ? `${props.customSize}px` : $ccc4b2a72ca993e7$var$sizes[props.size]
+            })
+        ,
+        circle1Scale: /*#__PURE__*/ $b84Wv$emotion.css({
+            animation: `${animations.scale1} 1s linear infinite normal forwards;`
+        }),
+        circle2Scale: /*#__PURE__*/ $b84Wv$emotion.css({
+            animation: `${animations.scale2} 1s linear infinite normal forwards;`
+        }),
+        circle3Scale: /*#__PURE__*/ $b84Wv$emotion.css({
+            animation: `${animations.scale3} 1s linear infinite normal forwards;`
+        }),
+        circle1Translate: /*#__PURE__*/ $b84Wv$emotion.css({
+            animation: `${animations.translate1} 1s linear infinite normal forwards;`
+        }),
+        circle2Translate: /*#__PURE__*/ $b84Wv$emotion.css({
+            animation: `${animations.translate2} 1s linear infinite normal forwards;`
+        }),
+        circle3Translate: /*#__PURE__*/ $b84Wv$emotion.css({
+            animation: `${animations.translate3} 1s linear infinite normal forwards;`
+        })
+    };
+};
+
+
+const $05c01a9aaed28186$var$SPINNER_DEFAULT_TAG = 'div';
+const $05c01a9aaed28186$var$variants = {
+    default: ($parcel$interopDefault($b84Wv$contentfulf36tokens)).gray700,
+    primary: ($parcel$interopDefault($b84Wv$contentfulf36tokens)).colorPrimary,
+    white: ($parcel$interopDefault($b84Wv$contentfulf36tokens)).colorWhite
+};
+const $05c01a9aaed28186$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $b84Wv$react.forwardRef(({ className: className , customSize: customSize , size: size = 'medium' , variant: variant = 'default' , testId: testId = 'cf-ui-spinner' , ...otherProps }, forwardedRef)=>{
+    const styles = $ccc4b2a72ca993e7$export$ffd58b7f6f099a57();
+    return(/*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement($b84Wv$contentfulf36core.Box, {
+        as: $05c01a9aaed28186$var$SPINNER_DEFAULT_TAG,
+        display: "inline-block",
+        ...otherProps,
+        className: $b84Wv$emotion.cx(styles.root({
+            size: size,
+            customSize: customSize
+        }), className),
+        ref: forwardedRef,
+        testId: testId
+    }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("svg", {
+        className: $b84Wv$emotion.css({
+            display: 'block',
+            fill: $05c01a9aaed28186$var$variants[variant]
+        }),
+        viewBox: "0 0 60 51",
+        xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("title", null, "Loading…"), /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
+        className: styles.circle1Translate,
+        transform: "translate(10,33.528168)"
+    }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
+        className: styles.circle1Scale
+    }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("circle", {
+        r: "6",
+        transform: "translate(0,10.471832)"
+    }))), /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
+        className: styles.circle2Translate,
+        transform: "translate(30,33.528168)"
+    }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
+        className: styles.circle2Scale
+    }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("circle", {
+        r: "6",
+        transform: "translate(0,10.471832)"
+    }))), /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
+        className: styles.circle3Translate,
+        transform: "translate(50,33.528168)"
+    }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
+        className: styles.circle3Scale
+    }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("circle", {
+        r: "6",
+        transform: "translate(0,10.471832)"
+    }))))));
+});
+$05c01a9aaed28186$export$7f7cbe89f1eacd2.displayName = 'Spinner';
+
+
+
+
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/components/spinner/src/index.ts","packages/components/spinner/src/Spinner.tsx","packages/components/spinner/src/Spinner.styles.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n","import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { Box } from '@contentful/f36-core';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport type { SpinnerSize, SpinnerVariant } from './types';\nimport { getStyles } from './Spinner.styles';\n\nconst SPINNER_DEFAULT_TAG = 'div';\n\nconst variants: { [key in SpinnerVariant]: string } = {\n  default: tokens.gray700,\n  primary: tokens.colorPrimary,\n  white: tokens.colorWhite,\n};\n\nexport type SpinnerInternalProps = CommonProps & {\n  /**\n   * Determines the color that will be used in the `fill` property of the SVG\n   */\n  variant?: SpinnerVariant;\n  /**\n   * Allows resizing the spinner with any N value. The final size will be NxN pixels\n   */\n  customSize?: number;\n  /**\n   * Controls the size of the spinner. The default `medium` size is 20px wide,\n   * the `small` size is 14px wide, and the `large` size is 36px wide\n   */\n  size?: SpinnerSize;\n};\n\nexport type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;\n\nexport const Spinner = forwardRef<HTMLDivElement, ExpandProps<SpinnerProps>>(\n  (\n    {\n      className,\n      customSize,\n      size = 'medium',\n      variant = 'default',\n      testId = 'cf-ui-spinner',\n      ...otherProps\n    },\n    forwardedRef,\n  ) => {\n    const styles = getStyles();\n    return (\n      <Box\n        as={SPINNER_DEFAULT_TAG}\n        display=\"inline-block\"\n        {...otherProps}\n        className={cx(styles.root({ size, customSize }), className)}\n        ref={forwardedRef}\n        testId={testId}\n      >\n        <svg\n          className={css({\n            display: 'block',\n            fill: variants[variant],\n          })}\n          viewBox=\"0 0 60 51\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <title>Loading…</title>\n          <g\n            className={styles.circle1Translate}\n            transform=\"translate(10,33.528168)\"\n          >\n            <g className={styles.circle1Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n\n          <g\n            className={styles.circle2Translate}\n            transform=\"translate(30,33.528168)\"\n          >\n            <g className={styles.circle2Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n\n          <g\n            className={styles.circle3Translate}\n            transform=\"translate(50,33.528168)\"\n          >\n            <g className={styles.circle3Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n        </svg>\n      </Box>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n","import { css, keyframes } from 'emotion';\nimport type { SpinnerSize } from './types';\n\nconst sizes: { [key in SpinnerSize]: string } = {\n  large: '36px',\n  medium: '20px',\n  small: '14px',\n};\n\nexport const getStyles = () => {\n  const animations = {\n    scale1: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    6.666667% {\n      transform: scale(1.5, 0.5);\n    }\n    13.333333% {\n      transform: scale(1, 1);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    33.333333% {\n      transform: scale(1, 1);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    60% {\n      transform: scale(1.5, 0.5);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    scale2: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    13.333333% {\n      transform: scale(1, 1);\n    }\n    20% {\n      transform: scale(1.5, 0.5);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    46.666667% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    73.333333% {\n      transform: scale(1.5, 0.5);\n    }\n    80% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    scale3: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    33.333333% {\n      transform: scale(1.5, 0.5);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    60% {\n      transform: scale(1, 1);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    80% {\n      transform: scale(1, 1);\n    }\n    86.666667% {\n      transform: scale(1.5, 0.5);\n    }\n    93.333333% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    translate1: keyframes`\n    0% {\n      transform: translate(10px, 33.528168px);\n    }\n    6.666667% {\n      transform: translate(10px, 41.764084px);\n    }\n    13.333333% {\n      transform: translate(10px, 33.528168px);\n    }\n    26.666667% {\n      transform: translate(10px, -2.651608px);\n    }\n    33.333333% {\n      transform: translate(10px, -4.471832px);\n    }\n    40% {\n      transform: translate(10px, -2.651608px);\n    }\n    53.333333% {\n      transform: translate(10px, 33.528168px);\n    }\n    60% {\n      transform: translate(10px, 41.764084px);\n    }\n    66.666667% {\n      transform: translate(10px, 33.528168px);\n    }\n    100% {\n      transform: translate(10px, 33.528168px);\n    }\n  `,\n    translate2: keyframes`\n    0% {\n      transform: translate(30px, 33.528168px);\n    }\n    13.333333% {\n      transform: translate(30px, 33.528168px);\n    }\n    20% {\n      transform: translate(30px, 41.764084px);\n    }\n    26.666667% {\n      transform: translate(30px, 33.528168px);\n    }\n    40% {\n      transform: translate(30px, -2.651608px);\n    }\n    46.666667% {\n      transform: translate(30px, -4.471832px);\n    }\n    53.333333% {\n      transform: translate(30px, -2.651608px);\n    }\n    66.666667% {\n      transform: translate(30px, 33.528168px);\n    }\n    73.333333% {\n      transform: translate(30px, 41.764084px);\n    }\n    80% {\n      transform: translate(30px, 33.528168px);\n    }\n    100% {\n      transform: translate(30px, 33.528168px);\n    }\n  `,\n    translate3: keyframes`\n    0% {\n      transform: translate(50px, 33.528168px);\n    }\n    26.666667% {\n      transform: translate(50px, 33.528168px);\n    }\n    33.333333% {\n      transform: translate(50px, 41.764084px);\n    }\n    40% {\n      transform: translate(50px, 33.528168px);\n    }\n    53.333333% {\n      transform: translate(50px, -2.651608px);\n    }\n    60% {\n      transform: translate(50px, -4.471832px);\n    }\n    66.666667% {\n      transform: translate(50px, -2.651608px);\n    }\n    80% {\n      transform: translate(50px, 33.528168px);\n    }\n    86.666667% {\n      transform: translate(50px, 41.764084px);\n    }\n    93.333333% {\n      transform: translate(50px, 33.528168px);\n    }\n    100% {\n      transform: translate(50px, 33.528168px);\n    }\n  `,\n  };\n\n  return {\n    root: (props: { size: SpinnerSize; customSize?: number }) =>\n      css({\n        height: props.customSize ? `${props.customSize}px` : undefined,\n        verticalAlign: 'middle',\n        width: props.customSize ? `${props.customSize}px` : sizes[props.size],\n      }),\n    circle1Scale: css({\n      animation: `${animations.scale1} 1s linear infinite normal forwards;`,\n    }),\n    circle2Scale: css({\n      animation: `${animations.scale2} 1s linear infinite normal forwards;`,\n    }),\n    circle3Scale: css({\n      animation: `${animations.scale3} 1s linear infinite normal forwards;`,\n    }),\n    circle1Translate: css({\n      animation: `${animations.translate1} 1s linear infinite normal forwards;`,\n    }),\n    circle2Translate: css({\n      animation: `${animations.translate2} 1s linear infinite normal forwards;`,\n    }),\n    circle3Translate: css({\n      animation: `${animations.translate3} 1s linear infinite normal forwards;`,\n    }),\n  };\n};\n"],"names":["Spinner","SpinnerProps","React","forwardRef","tokens","Box","CommonProps","PropsWithHTMLElement","ExpandProps","SpinnerSize","SpinnerVariant","getStyles","SPINNER_DEFAULT_TAG","variants","default","gray700","primary","colorPrimary","white","colorWhite","SpinnerInternalProps","variant","customSize","size","HTMLDivElement","className","testId","otherProps","forwardedRef","styles","root","display","fill","circle1Translate","circle1Scale","circle2Translate","circle2Scale","circle3Translate","circle3Scale","displayName","sizes","large","medium","small","animations","scale1","scale2","scale3","translate1","translate2","translate3","props","height","undefined","verticalAlign","width","animation"],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -0,0 +1,131 @@
+import {cx as $dzcjh$cx, css as $dzcjh$css, keyframes as $dzcjh$keyframes} from "emotion";
+import $dzcjh$react, {forwardRef as $dzcjh$forwardRef} from "react";
+import $dzcjh$contentfulf36tokens from "@contentful/f36-tokens";
+import {Box as $dzcjh$Box} from "@contentful/f36-core";
+
+
+
+
+
+
+
+
+const $d9f7c1001d753182$var$sizes = {
+    large: '36px',
+    medium: '20px',
+    small: '14px'
+};
+const $d9f7c1001d753182$export$ffd58b7f6f099a57 = ()=>{
+    const animations = {
+        scale1: /*#__PURE__*/ $dzcjh$keyframes({
+            name: "2hhwgy",
+            styles: "0%{transform:scale(1,1);}6.666667%{transform:scale(1.5,0.5);}13.333333%{transform:scale(1,1);}26.666667%{transform:scale(1,1);}33.333333%{transform:scale(1,1);}40%{transform:scale(1,1);}53.333333%{transform:scale(1,1);}60%{transform:scale(1.5,0.5);}66.666667%{transform:scale(1,1);}100%{transform:scale(1,1);}"
+        }),
+        scale2: /*#__PURE__*/ $dzcjh$keyframes({
+            name: "1b94qny",
+            styles: "0%{transform:scale(1,1);}13.333333%{transform:scale(1,1);}20%{transform:scale(1.5,0.5);}26.666667%{transform:scale(1,1);}40%{transform:scale(1,1);}46.666667%{transform:scale(1,1);}53.333333%{transform:scale(1,1);}66.666667%{transform:scale(1,1);}73.333333%{transform:scale(1.5,0.5);}80%{transform:scale(1,1);}100%{transform:scale(1,1);}"
+        }),
+        scale3: /*#__PURE__*/ $dzcjh$keyframes({
+            name: "1q9z2j0",
+            styles: "0%{transform:scale(1,1);}26.666667%{transform:scale(1,1);}33.333333%{transform:scale(1.5,0.5);}40%{transform:scale(1,1);}53.333333%{transform:scale(1,1);}60%{transform:scale(1,1);}66.666667%{transform:scale(1,1);}80%{transform:scale(1,1);}86.666667%{transform:scale(1.5,0.5);}93.333333%{transform:scale(1,1);}100%{transform:scale(1,1);}"
+        }),
+        translate1: /*#__PURE__*/ $dzcjh$keyframes({
+            name: "piqegj",
+            styles: "0%{transform:translate(10px,33.528168px);}6.666667%{transform:translate(10px,41.764084px);}13.333333%{transform:translate(10px,33.528168px);}26.666667%{transform:translate(10px,-2.651608px);}33.333333%{transform:translate(10px,-4.471832px);}40%{transform:translate(10px,-2.651608px);}53.333333%{transform:translate(10px,33.528168px);}60%{transform:translate(10px,41.764084px);}66.666667%{transform:translate(10px,33.528168px);}100%{transform:translate(10px,33.528168px);}"
+        }),
+        translate2: /*#__PURE__*/ $dzcjh$keyframes({
+            name: "1tc59mm",
+            styles: "0%{transform:translate(30px,33.528168px);}13.333333%{transform:translate(30px,33.528168px);}20%{transform:translate(30px,41.764084px);}26.666667%{transform:translate(30px,33.528168px);}40%{transform:translate(30px,-2.651608px);}46.666667%{transform:translate(30px,-4.471832px);}53.333333%{transform:translate(30px,-2.651608px);}66.666667%{transform:translate(30px,33.528168px);}73.333333%{transform:translate(30px,41.764084px);}80%{transform:translate(30px,33.528168px);}100%{transform:translate(30px,33.528168px);}"
+        }),
+        translate3: /*#__PURE__*/ $dzcjh$keyframes({
+            name: "21uo4u",
+            styles: "0%{transform:translate(50px,33.528168px);}26.666667%{transform:translate(50px,33.528168px);}33.333333%{transform:translate(50px,41.764084px);}40%{transform:translate(50px,33.528168px);}53.333333%{transform:translate(50px,-2.651608px);}60%{transform:translate(50px,-4.471832px);}66.666667%{transform:translate(50px,-2.651608px);}80%{transform:translate(50px,33.528168px);}86.666667%{transform:translate(50px,41.764084px);}93.333333%{transform:translate(50px,33.528168px);}100%{transform:translate(50px,33.528168px);}"
+        })
+    };
+    return {
+        root: (props)=>/*#__PURE__*/ $dzcjh$css({
+                height: props.customSize ? `${props.customSize}px` : undefined,
+                verticalAlign: 'middle',
+                width: props.customSize ? `${props.customSize}px` : $d9f7c1001d753182$var$sizes[props.size]
+            })
+        ,
+        circle1Scale: /*#__PURE__*/ $dzcjh$css({
+            animation: `${animations.scale1} 1s linear infinite normal forwards;`
+        }),
+        circle2Scale: /*#__PURE__*/ $dzcjh$css({
+            animation: `${animations.scale2} 1s linear infinite normal forwards;`
+        }),
+        circle3Scale: /*#__PURE__*/ $dzcjh$css({
+            animation: `${animations.scale3} 1s linear infinite normal forwards;`
+        }),
+        circle1Translate: /*#__PURE__*/ $dzcjh$css({
+            animation: `${animations.translate1} 1s linear infinite normal forwards;`
+        }),
+        circle2Translate: /*#__PURE__*/ $dzcjh$css({
+            animation: `${animations.translate2} 1s linear infinite normal forwards;`
+        }),
+        circle3Translate: /*#__PURE__*/ $dzcjh$css({
+            animation: `${animations.translate3} 1s linear infinite normal forwards;`
+        })
+    };
+};
+
+
+const $e780e5d24bf8af61$var$SPINNER_DEFAULT_TAG = 'div';
+const $e780e5d24bf8af61$var$variants = {
+    default: $dzcjh$contentfulf36tokens.gray700,
+    primary: $dzcjh$contentfulf36tokens.colorPrimary,
+    white: $dzcjh$contentfulf36tokens.colorWhite
+};
+const $e780e5d24bf8af61$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $dzcjh$forwardRef(({ className: className , customSize: customSize , size: size = 'medium' , variant: variant = 'default' , testId: testId = 'cf-ui-spinner' , ...otherProps }, forwardedRef)=>{
+    const styles = $d9f7c1001d753182$export$ffd58b7f6f099a57();
+    return(/*#__PURE__*/ $dzcjh$react.createElement($dzcjh$Box, {
+        as: $e780e5d24bf8af61$var$SPINNER_DEFAULT_TAG,
+        display: "inline-block",
+        ...otherProps,
+        className: $dzcjh$cx(styles.root({
+            size: size,
+            customSize: customSize
+        }), className),
+        ref: forwardedRef,
+        testId: testId
+    }, /*#__PURE__*/ $dzcjh$react.createElement("svg", {
+        className: $dzcjh$css({
+            display: 'block',
+            fill: $e780e5d24bf8af61$var$variants[variant]
+        }),
+        viewBox: "0 0 60 51",
+        xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/ $dzcjh$react.createElement("title", null, "Loading…"), /*#__PURE__*/ $dzcjh$react.createElement("g", {
+        className: styles.circle1Translate,
+        transform: "translate(10,33.528168)"
+    }, /*#__PURE__*/ $dzcjh$react.createElement("g", {
+        className: styles.circle1Scale
+    }, /*#__PURE__*/ $dzcjh$react.createElement("circle", {
+        r: "6",
+        transform: "translate(0,10.471832)"
+    }))), /*#__PURE__*/ $dzcjh$react.createElement("g", {
+        className: styles.circle2Translate,
+        transform: "translate(30,33.528168)"
+    }, /*#__PURE__*/ $dzcjh$react.createElement("g", {
+        className: styles.circle2Scale
+    }, /*#__PURE__*/ $dzcjh$react.createElement("circle", {
+        r: "6",
+        transform: "translate(0,10.471832)"
+    }))), /*#__PURE__*/ $dzcjh$react.createElement("g", {
+        className: styles.circle3Translate,
+        transform: "translate(50,33.528168)"
+    }, /*#__PURE__*/ $dzcjh$react.createElement("g", {
+        className: styles.circle3Scale
+    }, /*#__PURE__*/ $dzcjh$react.createElement("circle", {
+        r: "6",
+        transform: "translate(0,10.471832)"
+    }))))));
+});
+$e780e5d24bf8af61$export$7f7cbe89f1eacd2.displayName = 'Spinner';
+
+
+
+
+export {$e780e5d24bf8af61$export$7f7cbe89f1eacd2 as Spinner};
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/components/spinner/src/index.ts","packages/components/spinner/src/Spinner.tsx","packages/components/spinner/src/Spinner.styles.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n","import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { Box } from '@contentful/f36-core';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport type { SpinnerSize, SpinnerVariant } from './types';\nimport { getStyles } from './Spinner.styles';\n\nconst SPINNER_DEFAULT_TAG = 'div';\n\nconst variants: { [key in SpinnerVariant]: string } = {\n  default: tokens.gray700,\n  primary: tokens.colorPrimary,\n  white: tokens.colorWhite,\n};\n\nexport type SpinnerInternalProps = CommonProps & {\n  /**\n   * Determines the color that will be used in the `fill` property of the SVG\n   */\n  variant?: SpinnerVariant;\n  /**\n   * Allows resizing the spinner with any N value. The final size will be NxN pixels\n   */\n  customSize?: number;\n  /**\n   * Controls the size of the spinner. The default `medium` size is 20px wide,\n   * the `small` size is 14px wide, and the `large` size is 36px wide\n   */\n  size?: SpinnerSize;\n};\n\nexport type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;\n\nexport const Spinner = forwardRef<HTMLDivElement, ExpandProps<SpinnerProps>>(\n  (\n    {\n      className,\n      customSize,\n      size = 'medium',\n      variant = 'default',\n      testId = 'cf-ui-spinner',\n      ...otherProps\n    },\n    forwardedRef,\n  ) => {\n    const styles = getStyles();\n    return (\n      <Box\n        as={SPINNER_DEFAULT_TAG}\n        display=\"inline-block\"\n        {...otherProps}\n        className={cx(styles.root({ size, customSize }), className)}\n        ref={forwardedRef}\n        testId={testId}\n      >\n        <svg\n          className={css({\n            display: 'block',\n            fill: variants[variant],\n          })}\n          viewBox=\"0 0 60 51\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <title>Loading…</title>\n          <g\n            className={styles.circle1Translate}\n            transform=\"translate(10,33.528168)\"\n          >\n            <g className={styles.circle1Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n\n          <g\n            className={styles.circle2Translate}\n            transform=\"translate(30,33.528168)\"\n          >\n            <g className={styles.circle2Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n\n          <g\n            className={styles.circle3Translate}\n            transform=\"translate(50,33.528168)\"\n          >\n            <g className={styles.circle3Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n        </svg>\n      </Box>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n","import { css, keyframes } from 'emotion';\nimport type { SpinnerSize } from './types';\n\nconst sizes: { [key in SpinnerSize]: string } = {\n  large: '36px',\n  medium: '20px',\n  small: '14px',\n};\n\nexport const getStyles = () => {\n  const animations = {\n    scale1: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    6.666667% {\n      transform: scale(1.5, 0.5);\n    }\n    13.333333% {\n      transform: scale(1, 1);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    33.333333% {\n      transform: scale(1, 1);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    60% {\n      transform: scale(1.5, 0.5);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    scale2: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    13.333333% {\n      transform: scale(1, 1);\n    }\n    20% {\n      transform: scale(1.5, 0.5);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    46.666667% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    73.333333% {\n      transform: scale(1.5, 0.5);\n    }\n    80% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    scale3: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    33.333333% {\n      transform: scale(1.5, 0.5);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    60% {\n      transform: scale(1, 1);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    80% {\n      transform: scale(1, 1);\n    }\n    86.666667% {\n      transform: scale(1.5, 0.5);\n    }\n    93.333333% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    translate1: keyframes`\n    0% {\n      transform: translate(10px, 33.528168px);\n    }\n    6.666667% {\n      transform: translate(10px, 41.764084px);\n    }\n    13.333333% {\n      transform: translate(10px, 33.528168px);\n    }\n    26.666667% {\n      transform: translate(10px, -2.651608px);\n    }\n    33.333333% {\n      transform: translate(10px, -4.471832px);\n    }\n    40% {\n      transform: translate(10px, -2.651608px);\n    }\n    53.333333% {\n      transform: translate(10px, 33.528168px);\n    }\n    60% {\n      transform: translate(10px, 41.764084px);\n    }\n    66.666667% {\n      transform: translate(10px, 33.528168px);\n    }\n    100% {\n      transform: translate(10px, 33.528168px);\n    }\n  `,\n    translate2: keyframes`\n    0% {\n      transform: translate(30px, 33.528168px);\n    }\n    13.333333% {\n      transform: translate(30px, 33.528168px);\n    }\n    20% {\n      transform: translate(30px, 41.764084px);\n    }\n    26.666667% {\n      transform: translate(30px, 33.528168px);\n    }\n    40% {\n      transform: translate(30px, -2.651608px);\n    }\n    46.666667% {\n      transform: translate(30px, -4.471832px);\n    }\n    53.333333% {\n      transform: translate(30px, -2.651608px);\n    }\n    66.666667% {\n      transform: translate(30px, 33.528168px);\n    }\n    73.333333% {\n      transform: translate(30px, 41.764084px);\n    }\n    80% {\n      transform: translate(30px, 33.528168px);\n    }\n    100% {\n      transform: translate(30px, 33.528168px);\n    }\n  `,\n    translate3: keyframes`\n    0% {\n      transform: translate(50px, 33.528168px);\n    }\n    26.666667% {\n      transform: translate(50px, 33.528168px);\n    }\n    33.333333% {\n      transform: translate(50px, 41.764084px);\n    }\n    40% {\n      transform: translate(50px, 33.528168px);\n    }\n    53.333333% {\n      transform: translate(50px, -2.651608px);\n    }\n    60% {\n      transform: translate(50px, -4.471832px);\n    }\n    66.666667% {\n      transform: translate(50px, -2.651608px);\n    }\n    80% {\n      transform: translate(50px, 33.528168px);\n    }\n    86.666667% {\n      transform: translate(50px, 41.764084px);\n    }\n    93.333333% {\n      transform: translate(50px, 33.528168px);\n    }\n    100% {\n      transform: translate(50px, 33.528168px);\n    }\n  `,\n  };\n\n  return {\n    root: (props: { size: SpinnerSize; customSize?: number }) =>\n      css({\n        height: props.customSize ? `${props.customSize}px` : undefined,\n        verticalAlign: 'middle',\n        width: props.customSize ? `${props.customSize}px` : sizes[props.size],\n      }),\n    circle1Scale: css({\n      animation: `${animations.scale1} 1s linear infinite normal forwards;`,\n    }),\n    circle2Scale: css({\n      animation: `${animations.scale2} 1s linear infinite normal forwards;`,\n    }),\n    circle3Scale: css({\n      animation: `${animations.scale3} 1s linear infinite normal forwards;`,\n    }),\n    circle1Translate: css({\n      animation: `${animations.translate1} 1s linear infinite normal forwards;`,\n    }),\n    circle2Translate: css({\n      animation: `${animations.translate2} 1s linear infinite normal forwards;`,\n    }),\n    circle3Translate: css({\n      animation: `${animations.translate3} 1s linear infinite normal forwards;`,\n    }),\n  };\n};\n"],"names":["Spinner","SpinnerProps","React","forwardRef","tokens","Box","CommonProps","PropsWithHTMLElement","ExpandProps","SpinnerSize","SpinnerVariant","getStyles","SPINNER_DEFAULT_TAG","variants","default","gray700","primary","colorPrimary","white","colorWhite","SpinnerInternalProps","variant","customSize","size","HTMLDivElement","className","testId","otherProps","forwardedRef","styles","root","display","fill","circle1Translate","circle1Scale","circle2Translate","circle2Scale","circle3Translate","circle3Scale","displayName","sizes","large","medium","small","animations","scale1","scale2","scale3","translate1","translate2","translate3","props","height","undefined","verticalAlign","width","animation"],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -0,0 +1,285 @@
+import React from "react";
+import { CommonProps, PropsWithHTMLElement } from "@contentful/f36-core";
+type SpinnerVariant = 'primary' | 'default' | 'white';
+type SpinnerSize = 'large' | 'medium' | 'small';
+type SpinnerInternalProps = CommonProps & {
+    /**
+     * Determines the color that will be used in the `fill` property of the SVG
+     */
+    variant?: SpinnerVariant;
+    /**
+     * Allows resizing the spinner with any N value. The final size will be NxN pixels
+     */
+    customSize?: number;
+    /**
+     * Controls the size of the spinner. The default `medium` size is 20px wide,
+     * the `small` size is 14px wide, and the `large` size is 36px wide
+     */
+    size?: SpinnerSize;
+};
+export type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;
+export const Spinner: React.ForwardRefExoticComponent<{
+    color?: string;
+    translate?: "no" | "yes";
+    slot?: string;
+    title?: string;
+    key?: React.Key;
+    defaultChecked?: boolean;
+    defaultValue?: string | number | readonly string[];
+    suppressContentEditableWarning?: boolean;
+    suppressHydrationWarning?: boolean;
+    accessKey?: string;
+    contentEditable?: "inherit" | (boolean | "true" | "false");
+    contextMenu?: string;
+    dir?: string;
+    draggable?: boolean | "true" | "false";
+    hidden?: boolean;
+    id?: string;
+    lang?: string;
+    placeholder?: string;
+    spellCheck?: boolean | "true" | "false";
+    tabIndex?: number;
+    radioGroup?: string;
+    role?: string;
+    about?: string;
+    datatype?: string;
+    inlist?: any;
+    prefix?: string;
+    property?: string;
+    resource?: string;
+    typeof?: string;
+    vocab?: string;
+    autoCapitalize?: string;
+    autoCorrect?: string;
+    autoSave?: string;
+    itemProp?: string;
+    itemScope?: boolean;
+    itemType?: string;
+    itemID?: string;
+    itemRef?: string;
+    results?: number;
+    security?: string;
+    unselectable?: "on" | "off";
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+    is?: string;
+    'aria-activedescendant'?: string;
+    'aria-atomic'?: boolean | "true" | "false";
+    'aria-autocomplete'?: "both" | "none" | "list" | "inline";
+    'aria-busy'?: boolean | "true" | "false";
+    'aria-checked'?: boolean | "true" | "false" | "mixed";
+    'aria-colcount'?: number;
+    'aria-colindex'?: number;
+    'aria-colspan'?: number;
+    'aria-controls'?: string;
+    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date";
+    'aria-describedby'?: string;
+    'aria-details'?: string;
+    'aria-disabled'?: boolean | "true" | "false";
+    'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup";
+    'aria-errormessage'?: string;
+    'aria-expanded'?: boolean | "true" | "false";
+    'aria-flowto'?: string;
+    'aria-grabbed'?: boolean | "true" | "false";
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "true" | "false" | "listbox" | "tree";
+    'aria-hidden'?: boolean | "true" | "false";
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
+    'aria-keyshortcuts'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-level'?: number;
+    'aria-live'?: "off" | "assertive" | "polite";
+    'aria-modal'?: boolean | "true" | "false";
+    'aria-multiline'?: boolean | "true" | "false";
+    'aria-multiselectable'?: boolean | "true" | "false";
+    'aria-orientation'?: "horizontal" | "vertical";
+    'aria-owns'?: string;
+    'aria-placeholder'?: string;
+    'aria-posinset'?: number;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed";
+    'aria-readonly'?: boolean | "true" | "false";
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    'aria-required'?: boolean | "true" | "false";
+    'aria-roledescription'?: string;
+    'aria-rowcount'?: number;
+    'aria-rowindex'?: number;
+    'aria-rowspan'?: number;
+    'aria-selected'?: boolean | "true" | "false";
+    'aria-setsize'?: number;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other";
+    'aria-valuemax'?: number;
+    'aria-valuemin'?: number;
+    'aria-valuenow'?: number;
+    'aria-valuetext'?: string;
+    children?: React.ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    };
+    onCopy?: React.ClipboardEventHandler<HTMLDivElement>;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement>;
+    onCut?: React.ClipboardEventHandler<HTMLDivElement>;
+    onCutCapture?: React.ClipboardEventHandler<HTMLDivElement>;
+    onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement>;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement>;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement>;
+    onCompositionStart?: React.CompositionEventHandler<HTMLDivElement>;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement>;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement>;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement>;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onFocusCapture?: React.FocusEventHandler<HTMLDivElement>;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    onBlurCapture?: React.FocusEventHandler<HTMLDivElement>;
+    onChange?: React.FormEventHandler<HTMLDivElement>;
+    onChangeCapture?: React.FormEventHandler<HTMLDivElement>;
+    onBeforeInput?: React.FormEventHandler<HTMLDivElement>;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement>;
+    onInput?: React.FormEventHandler<HTMLDivElement>;
+    onInputCapture?: React.FormEventHandler<HTMLDivElement>;
+    onReset?: React.FormEventHandler<HTMLDivElement>;
+    onResetCapture?: React.FormEventHandler<HTMLDivElement>;
+    onSubmit?: React.FormEventHandler<HTMLDivElement>;
+    onSubmitCapture?: React.FormEventHandler<HTMLDivElement>;
+    onInvalid?: React.FormEventHandler<HTMLDivElement>;
+    onInvalidCapture?: React.FormEventHandler<HTMLDivElement>;
+    onLoad?: React.ReactEventHandler<HTMLDivElement>;
+    onLoadCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onError?: React.ReactEventHandler<HTMLDivElement>;
+    onErrorCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement>;
+    onKeyPress?: React.KeyboardEventHandler<HTMLDivElement>;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement>;
+    onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement>;
+    onAbort?: React.ReactEventHandler<HTMLDivElement>;
+    onAbortCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onCanPlay?: React.ReactEventHandler<HTMLDivElement>;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement>;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onDurationChange?: React.ReactEventHandler<HTMLDivElement>;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onEmptied?: React.ReactEventHandler<HTMLDivElement>;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onEncrypted?: React.ReactEventHandler<HTMLDivElement>;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onEnded?: React.ReactEventHandler<HTMLDivElement>;
+    onEndedCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onLoadedData?: React.ReactEventHandler<HTMLDivElement>;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement>;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onLoadStart?: React.ReactEventHandler<HTMLDivElement>;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onPause?: React.ReactEventHandler<HTMLDivElement>;
+    onPauseCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onPlay?: React.ReactEventHandler<HTMLDivElement>;
+    onPlayCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onPlaying?: React.ReactEventHandler<HTMLDivElement>;
+    onPlayingCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onProgress?: React.ReactEventHandler<HTMLDivElement>;
+    onProgressCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onRateChange?: React.ReactEventHandler<HTMLDivElement>;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onSeeked?: React.ReactEventHandler<HTMLDivElement>;
+    onSeekedCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onSeeking?: React.ReactEventHandler<HTMLDivElement>;
+    onSeekingCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onStalled?: React.ReactEventHandler<HTMLDivElement>;
+    onStalledCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onSuspend?: React.ReactEventHandler<HTMLDivElement>;
+    onSuspendCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onTimeUpdate?: React.ReactEventHandler<HTMLDivElement>;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onVolumeChange?: React.ReactEventHandler<HTMLDivElement>;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onWaiting?: React.ReactEventHandler<HTMLDivElement>;
+    onWaitingCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onAuxClick?: React.MouseEventHandler<HTMLDivElement>;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onClickCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onDrag?: React.DragEventHandler<HTMLDivElement>;
+    onDragCapture?: React.DragEventHandler<HTMLDivElement>;
+    onDragEnd?: React.DragEventHandler<HTMLDivElement>;
+    onDragEndCapture?: React.DragEventHandler<HTMLDivElement>;
+    onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+    onDragEnterCapture?: React.DragEventHandler<HTMLDivElement>;
+    onDragExit?: React.DragEventHandler<HTMLDivElement>;
+    onDragExitCapture?: React.DragEventHandler<HTMLDivElement>;
+    onDragLeave?: React.DragEventHandler<HTMLDivElement>;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement>;
+    onDragOver?: React.DragEventHandler<HTMLDivElement>;
+    onDragOverCapture?: React.DragEventHandler<HTMLDivElement>;
+    onDragStart?: React.DragEventHandler<HTMLDivElement>;
+    onDragStartCapture?: React.DragEventHandler<HTMLDivElement>;
+    onDrop?: React.DragEventHandler<HTMLDivElement>;
+    onDropCapture?: React.DragEventHandler<HTMLDivElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseOut?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onSelect?: React.ReactEventHandler<HTMLDivElement>;
+    onSelectCapture?: React.ReactEventHandler<HTMLDivElement>;
+    onTouchCancel?: React.TouchEventHandler<HTMLDivElement>;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement>;
+    onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement>;
+    onTouchMove?: React.TouchEventHandler<HTMLDivElement>;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLDivElement>;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement>;
+    onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerMove?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerUp?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerCancel?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerEnter?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerOver?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerOut?: React.PointerEventHandler<HTMLDivElement>;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement>;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement>;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement>;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement>;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement>;
+    onScroll?: React.UIEventHandler<HTMLDivElement>;
+    onScrollCapture?: React.UIEventHandler<HTMLDivElement>;
+    onWheel?: React.WheelEventHandler<HTMLDivElement>;
+    onWheelCapture?: React.WheelEventHandler<HTMLDivElement>;
+    onAnimationStart?: React.AnimationEventHandler<HTMLDivElement>;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement>;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement>;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement>;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement>;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement>;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement>;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement>;
+    className?: string;
+    testId?: string;
+    style?: React.CSSProperties;
+    variant?: SpinnerVariant;
+    customSize?: number;
+    size?: SpinnerSize;
+} & React.RefAttributes<HTMLDivElement>>;
+
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;AAAA,sBAA6B,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7D,mBAA0B,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AEkBvD,4BAAmC,WAAW,GAAG;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,2BAA2B,qBAAqB,oBAAoB,EAAE,KAAK,CAAC,CAAC;AAE7E,OAAO,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAdD,cAAc;iBAIX,MAAM;WAKZ,WAAW;wCAkEnB,CAAC","sources":["packages/components/spinner/src/src/types.ts","packages/components/spinner/src/src/Spinner.styles.ts","packages/components/spinner/src/src/Spinner.tsx","packages/components/spinner/src/src/index.ts","packages/components/spinner/src/index.ts"],"sourcesContent":[null,null,null,null,"export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@contentful/f36-spinner",
+  "version": "4.0.0",
+  "description": "Forma 36: Spinner Component",
+  "scripts": {
+    "build": "parcel build src/index.ts"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@contentful/f36-core": "^4.0.0",
+    "@contentful/f36-tokens": "^4.0.0",
+    "emotion": "^10.0.17"
+  },
+  "devDependencies": {
+    "@contentful/f36-typography": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "sideEffects": false,
+  "browserslist": "extends @contentful/browserslist-config",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentful/forma-36"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "01d931c77410619d05cd00dbb3b5acc5d8ae2cdf"
+}