@contentful/f36-spinner 4.18.0 → 4.19.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/{index.mjs → esm/index.js} +6 -6
  3. package/dist/esm/index.js.map +1 -0
  4. package/dist/index.js +7 -7
  5. package/dist/index.js.map +1 -1
  6. package/package.json +4 -4
  7. package/dist/index.mjs.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.19.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies []:
8
+ - @contentful/f36-core@4.19.2
9
+
10
+ ## 4.19.1
11
+
12
+ ### Patch Changes
13
+
14
+ - [#2209](https://github.com/contentful/forma-36/pull/2209) [`42f0c321`](https://github.com/contentful/forma-36/commit/42f0c3218965137191842f492fe5dbf4bd10784c) Thanks [@denkristoffer](https://github.com/denkristoffer)! - build: build ESM to JS file - legacy output
15
+ fix(notification): use type imports
16
+ - Updated dependencies []:
17
+ - @contentful/f36-core@4.19.1
18
+
19
+ ## 4.19.0
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies []:
24
+ - @contentful/f36-core@4.19.0
25
+
3
26
  ## 4.18.0
4
27
 
5
28
  ### Patch Changes
package/dist/{index.mjs → esm/index.js} RENAMED
@@ -1,9 +1,9 @@
1
1
  import { cx, css, keyframes } from 'emotion';
2
- import s, { forwardRef } from 'react';
3
- import i from '@contentful/f36-tokens';
2
+ import r, { forwardRef } from 'react';
3
+ import l from '@contentful/f36-tokens';
4
4
  import { Box } from '@contentful/f36-core';
5
5
 
6
- var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var f=(r,a,t)=>a in r?N(r,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[a]=t,S=(r,a)=>{for(var t in a||(a={}))c.call(a,t)&&f(r,t,a[t]);if(m)for(var t of m(a))x.call(a,t)&&f(r,t,a[t]);return r},d=(r,a)=>T(r,v(a));var g=(r,a)=>{var t={};for(var n in r)c.call(r,n)&&a.indexOf(n)<0&&(t[n]=r[n]);if(r!=null&&m)for(var n of m(r))a.indexOf(n)<0&&x.call(r,n)&&(t[n]=r[n]);return t};var h={large:"36px",medium:"20px",small:"14px"},y=()=>{let r={scale1:keyframes`
6
+ var S={large:"36px",medium:"20px",small:"14px"},o=()=>{let a={scale1:keyframes`
7
7
  0% {
8
8
  transform: scale(1, 1);
9
9
  }
@@ -201,7 +201,7 @@ var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropert
201
201
  100% {
202
202
  transform: translate(50px, 33.528168px);
203
203
  }
204
- `};return {root:a=>css({height:a.customSize?`${a.customSize}px`:void 0,verticalAlign:"middle",width:a.customSize?`${a.customSize}px`:h[a.size]}),circle1Scale:css({animation:`${r.scale1} 1s linear infinite normal forwards;`}),circle2Scale:css({animation:`${r.scale2} 1s linear infinite normal forwards;`}),circle3Scale:css({animation:`${r.scale3} 1s linear infinite normal forwards;`}),circle1Translate:css({animation:`${r.translate1} 1s linear infinite normal forwards;`}),circle2Translate:css({animation:`${r.translate2} 1s linear infinite normal forwards;`}),circle3Translate:css({animation:`${r.translate3} 1s linear infinite normal forwards;`})}};var b="div",I={default:i.gray700,primary:i.colorPrimary,white:i.colorWhite},u=forwardRef((A,P)=>{var p=A,{className:r,customSize:a,size:t="medium",variant:n="default",testId:z="cf-ui-spinner"}=p,w=g(p,["className","customSize","size","variant","testId"]);let e=y();return s.createElement(Box,d(S({as:b,display:"inline-block"},w),{className:cx(e.root({size:t,customSize:a}),r),ref:P,testId:z}),s.createElement("svg",{className:css({display:"block",fill:I[n]}),viewBox:"0 0 60 51",xmlns:"http://www.w3.org/2000/svg"},s.createElement("title",null,"Loading\u2026"),s.createElement("g",{className:e.circle1Translate,transform:"translate(10,33.528168)"},s.createElement("g",{className:e.circle1Scale},s.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s.createElement("g",{className:e.circle2Translate,transform:"translate(30,33.528168)"},s.createElement("g",{className:e.circle2Scale},s.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s.createElement("g",{className:e.circle3Translate,transform:"translate(50,33.528168)"},s.createElement("g",{className:e.circle3Scale},s.createElement("circle",{r:"6",transform:"translate(0,10.471832)"})))))});u.displayName="Spinner";
204
+ `};return {root:t=>css({height:t.customSize?`${t.customSize}px`:void 0,verticalAlign:"middle",width:t.customSize?`${t.customSize}px`:S[t.size]}),circle1Scale:css({animation:`${a.scale1} 1s linear infinite normal forwards;`}),circle2Scale:css({animation:`${a.scale2} 1s linear infinite normal forwards;`}),circle3Scale:css({animation:`${a.scale3} 1s linear infinite normal forwards;`}),circle1Translate:css({animation:`${a.translate1} 1s linear infinite normal forwards;`}),circle2Translate:css({animation:`${a.translate2} 1s linear infinite normal forwards;`}),circle3Translate:css({animation:`${a.translate3} 1s linear infinite normal forwards;`})}};var z="div",w={default:l.gray700,primary:l.colorPrimary,white:l.colorWhite},m=forwardRef(({className:a,customSize:t,size:i="medium",variant:p="default",testId:f="cf-ui-spinner",...c},x)=>{let s=o();return r.createElement(Box,{as:z,display:"inline-block",...c,className:cx(s.root({size:i,customSize:t}),a),ref:x,testId:f},r.createElement("svg",{className:css({display:"block",fill:w[p]}),viewBox:"0 0 60 51",xmlns:"http://www.w3.org/2000/svg"},r.createElement("title",null,"Loading\u2026"),r.createElement("g",{className:s.circle1Translate,transform:"translate(10,33.528168)"},r.createElement("g",{className:s.circle1Scale},r.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),r.createElement("g",{className:s.circle2Translate,transform:"translate(30,33.528168)"},r.createElement("g",{className:s.circle2Scale},r.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),r.createElement("g",{className:s.circle3Translate,transform:"translate(50,33.528168)"},r.createElement("g",{className:s.circle3Scale},r.createElement("circle",{r:"6",transform:"translate(0,10.471832)"})))))});m.displayName="Spinner";
205
205
 
206
- export { u as Spinner };
207
- //# sourceMappingURL=index.mjs.map
206
+ export { m as Spinner };
207
+ //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Spinner.tsx","../../src/Spinner.styles.ts"],"names":["cx","css","React","forwardRef","tokens","Box","keyframes","sizes","getStyles","animations","props","SPINNER_DEFAULT_TAG","variants","Spinner","className","customSize","size","variant","testId","otherProps","forwardedRef","styles"],"mappings":"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","sourcesContent":["import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\n Box,\n type CommonProps,\n type PropsWithHTMLElement,\n type 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"]}
package/dist/index.js CHANGED
@@ -3,16 +3,16 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var emotion = require('emotion');
6
- var s = require('react');
7
- var i = require('@contentful/f36-tokens');
6
+ var r = require('react');
7
+ var l = require('@contentful/f36-tokens');
8
8
  var f36Core = require('@contentful/f36-core');
9
9
 
10
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
11
 
12
- var s__default = /*#__PURE__*/_interopDefaultLegacy(s);
13
- var i__default = /*#__PURE__*/_interopDefaultLegacy(i);
12
+ var r__default = /*#__PURE__*/_interopDefaultLegacy(r);
13
+ var l__default = /*#__PURE__*/_interopDefaultLegacy(l);
14
14
 
15
- var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var f=(r,a,t)=>a in r?N(r,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[a]=t,S=(r,a)=>{for(var t in a||(a={}))c.call(a,t)&&f(r,t,a[t]);if(m)for(var t of m(a))x.call(a,t)&&f(r,t,a[t]);return r},d=(r,a)=>T(r,v(a));var g=(r,a)=>{var t={};for(var n in r)c.call(r,n)&&a.indexOf(n)<0&&(t[n]=r[n]);if(r!=null&&m)for(var n of m(r))a.indexOf(n)<0&&x.call(r,n)&&(t[n]=r[n]);return t};var h={large:"36px",medium:"20px",small:"14px"},y=()=>{let r={scale1:emotion.keyframes`
15
+ var S={large:"36px",medium:"20px",small:"14px"},o=()=>{let a={scale1:emotion.keyframes`
16
16
  0% {
17
17
  transform: scale(1, 1);
18
18
  }
@@ -210,7 +210,7 @@ var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropert
210
210
  100% {
211
211
  transform: translate(50px, 33.528168px);
212
212
  }
213
- `};return {root:a=>emotion.css({height:a.customSize?`${a.customSize}px`:void 0,verticalAlign:"middle",width:a.customSize?`${a.customSize}px`:h[a.size]}),circle1Scale:emotion.css({animation:`${r.scale1} 1s linear infinite normal forwards;`}),circle2Scale:emotion.css({animation:`${r.scale2} 1s linear infinite normal forwards;`}),circle3Scale:emotion.css({animation:`${r.scale3} 1s linear infinite normal forwards;`}),circle1Translate:emotion.css({animation:`${r.translate1} 1s linear infinite normal forwards;`}),circle2Translate:emotion.css({animation:`${r.translate2} 1s linear infinite normal forwards;`}),circle3Translate:emotion.css({animation:`${r.translate3} 1s linear infinite normal forwards;`})}};var b="div",I={default:i__default["default"].gray700,primary:i__default["default"].colorPrimary,white:i__default["default"].colorWhite},u=s.forwardRef((A,P)=>{var p=A,{className:r,customSize:a,size:t="medium",variant:n="default",testId:z="cf-ui-spinner"}=p,w=g(p,["className","customSize","size","variant","testId"]);let e=y();return s__default["default"].createElement(f36Core.Box,d(S({as:b,display:"inline-block"},w),{className:emotion.cx(e.root({size:t,customSize:a}),r),ref:P,testId:z}),s__default["default"].createElement("svg",{className:emotion.css({display:"block",fill:I[n]}),viewBox:"0 0 60 51",xmlns:"http://www.w3.org/2000/svg"},s__default["default"].createElement("title",null,"Loading\u2026"),s__default["default"].createElement("g",{className:e.circle1Translate,transform:"translate(10,33.528168)"},s__default["default"].createElement("g",{className:e.circle1Scale},s__default["default"].createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s__default["default"].createElement("g",{className:e.circle2Translate,transform:"translate(30,33.528168)"},s__default["default"].createElement("g",{className:e.circle2Scale},s__default["default"].createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s__default["default"].createElement("g",{className:e.circle3Translate,transform:"translate(50,33.528168)"},s__default["default"].createElement("g",{className:e.circle3Scale},s__default["default"].createElement("circle",{r:"6",transform:"translate(0,10.471832)"})))))});u.displayName="Spinner";
213
+ `};return {root:t=>emotion.css({height:t.customSize?`${t.customSize}px`:void 0,verticalAlign:"middle",width:t.customSize?`${t.customSize}px`:S[t.size]}),circle1Scale:emotion.css({animation:`${a.scale1} 1s linear infinite normal forwards;`}),circle2Scale:emotion.css({animation:`${a.scale2} 1s linear infinite normal forwards;`}),circle3Scale:emotion.css({animation:`${a.scale3} 1s linear infinite normal forwards;`}),circle1Translate:emotion.css({animation:`${a.translate1} 1s linear infinite normal forwards;`}),circle2Translate:emotion.css({animation:`${a.translate2} 1s linear infinite normal forwards;`}),circle3Translate:emotion.css({animation:`${a.translate3} 1s linear infinite normal forwards;`})}};var z="div",w={default:l__default["default"].gray700,primary:l__default["default"].colorPrimary,white:l__default["default"].colorWhite},m=r.forwardRef(({className:a,customSize:t,size:i="medium",variant:p="default",testId:f="cf-ui-spinner",...c},x)=>{let s=o();return r__default["default"].createElement(f36Core.Box,{as:z,display:"inline-block",...c,className:emotion.cx(s.root({size:i,customSize:t}),a),ref:x,testId:f},r__default["default"].createElement("svg",{className:emotion.css({display:"block",fill:w[p]}),viewBox:"0 0 60 51",xmlns:"http://www.w3.org/2000/svg"},r__default["default"].createElement("title",null,"Loading\u2026"),r__default["default"].createElement("g",{className:s.circle1Translate,transform:"translate(10,33.528168)"},r__default["default"].createElement("g",{className:s.circle1Scale},r__default["default"].createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),r__default["default"].createElement("g",{className:s.circle2Translate,transform:"translate(30,33.528168)"},r__default["default"].createElement("g",{className:s.circle2Scale},r__default["default"].createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),r__default["default"].createElement("g",{className:s.circle3Translate,transform:"translate(50,33.528168)"},r__default["default"].createElement("g",{className:s.circle3Scale},r__default["default"].createElement("circle",{r:"6",transform:"translate(0,10.471832)"})))))});m.displayName="Spinner";
214
214
 
215
- exports.Spinner = u;
215
+ exports.Spinner = m;
216
216
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Spinner.tsx","../src/Spinner.styles.ts"],"names":["cx","css","React","forwardRef","tokens","Box","keyframes","sizes","getStyles","animations","props","SPINNER_DEFAULT_TAG","variants","Spinner","_a","forwardedRef","_b","className","customSize","size","variant","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues"],"mappings":"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","sourcesContent":["import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\n Box,\n type CommonProps,\n type PropsWithHTMLElement,\n type 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"]}
1
+ {"version":3,"sources":["../src/Spinner.tsx","../src/Spinner.styles.ts"],"names":["cx","css","React","forwardRef","tokens","Box","keyframes","sizes","getStyles","animations","props","SPINNER_DEFAULT_TAG","variants","Spinner","className","customSize","size","variant","testId","otherProps","forwardedRef","styles"],"mappings":"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","sourcesContent":["import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\n Box,\n type CommonProps,\n type PropsWithHTMLElement,\n type 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"]}
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@contentful/f36-spinner",
3
- "version": "4.18.0",
3
+ "version": "4.19.2",
4
4
  "description": "Forma 36: Spinner Component",
5
5
  "scripts": {
6
6
  "build": "tsup"
7
7
  },
8
8
  "dependencies": {
9
9
  "@babel/runtime": "^7.6.2",
10
- "@contentful/f36-core": "^4.18.0",
10
+ "@contentful/f36-core": "^4.19.2",
11
11
  "@contentful/f36-tokens": "^4.0.1",
12
12
  "emotion": "^10.0.17"
13
13
  },
14
14
  "devDependencies": {
15
- "@contentful/f36-typography": "^4.18.0"
15
+ "@contentful/f36-typography": "^4.19.2"
16
16
  },
17
17
  "peerDependencies": {
18
18
  "react": ">=16.8"
@@ -22,7 +22,7 @@
22
22
  "dist"
23
23
  ],
24
24
  "main": "dist/index.js",
25
- "module": "dist/index.mjs",
25
+ "module": "dist/esm/index.js",
26
26
  "types": "dist/index.d.ts",
27
27
  "source": "src/index.ts",
28
28
  "sideEffects": false,
package/dist/index.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Spinner.tsx","../src/Spinner.styles.ts"],"names":["cx","css","React","forwardRef","tokens","Box","keyframes","sizes","getStyles","animations","props","SPINNER_DEFAULT_TAG","variants","Spinner","_a","forwardedRef","_b","className","customSize","size","variant","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues"],"mappings":"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","sourcesContent":["import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\n Box,\n type CommonProps,\n type PropsWithHTMLElement,\n type 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"]}