@contentful/f36-spinner 4.19.2 → 4.20.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 4.20.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-core@4.20.0
+
 ## 4.19.2
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,9 +1,9 @@
 import { cx, css, keyframes } from 'emotion';
-import r, { forwardRef } from 'react';
-import l from '@contentful/f36-tokens';
+import s, { forwardRef } from 'react';
+import i from '@contentful/f36-tokens';
 import { Box } from '@contentful/f36-core';
 
-var S={large:"36px",medium:"20px",small:"14px"},o=()=>{let a={scale1:keyframes`
+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`
     0% {
       transform: scale(1, 1);
     }
@@ -201,7 +201,7 @@ var S={large:"36px",medium:"20px",small:"14px"},o=()=>{let a={scale1:keyframes`
     100% {
       transform: translate(50px, 33.528168px);
     }
-  `};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";
+  `};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";
 
-export { m as Spinner };
+export { u as Spinner };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -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"]}
+{"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"]}

package/dist/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var emotion = require('emotion');
-var r = require('react');
-var l = require('@contentful/f36-tokens');
+var s = require('react');
+var i = require('@contentful/f36-tokens');
 var f36Core = require('@contentful/f36-core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var r__default = /*#__PURE__*/_interopDefaultLegacy(r);
-var l__default = /*#__PURE__*/_interopDefaultLegacy(l);
+var s__default = /*#__PURE__*/_interopDefaultLegacy(s);
+var i__default = /*#__PURE__*/_interopDefaultLegacy(i);
 
-var S={large:"36px",medium:"20px",small:"14px"},o=()=>{let a={scale1:emotion.keyframes`
+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`
     0% {
       transform: scale(1, 1);
     }
@@ -210,7 +210,7 @@ var S={large:"36px",medium:"20px",small:"14px"},o=()=>{let a={scale1:emotion.key
     100% {
       transform: translate(50px, 33.528168px);
     }
-  `};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";
+  `};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";
 
-exports.Spinner = m;
+exports.Spinner = u;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -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":"AAAA,OAAS,MAAAA,EAAI,OAAAC,MAAW,UACxB,OAAOC,GAAS,cAAAC,MAAkB,QAClC,OAAOC,MAAY,yBACnB,OACE,OAAAC,MAIK,uBCRP,OAAS,OAAAJ,EAAK,aAAAK,MAAiB,UAG/B,IAAMC,EAA0C,CAC9C,MAAO,OACP,OAAQ,OACR,MAAO,MACT,EAEaC,EAAY,IAAM,CAC7B,IAAMC,EAAa,CACjB,OAAQH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgCR,OAAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmCR,OAAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmCR,WAAYA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgCZ,WAAYA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmCZ,WAAYA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmCd,EAEA,MAAO,CACL,KAAOI,GACLT,EAAI,CACF,OAAQS,EAAM,WAAa,GAAGA,EAAM,eAAiB,OACrD,cAAe,SACf,MAAOA,EAAM,WAAa,GAAGA,EAAM,eAAiBH,EAAMG,EAAM,KAClE,CAAC,EACH,aAAcT,EAAI,CAChB,UAAW,GAAGQ,EAAW,4CAC3B,CAAC,EACD,aAAcR,EAAI,CAChB,UAAW,GAAGQ,EAAW,4CAC3B,CAAC,EACD,aAAcR,EAAI,CAChB,UAAW,GAAGQ,EAAW,4CAC3B,CAAC,EACD,iBAAkBR,EAAI,CACpB,UAAW,GAAGQ,EAAW,gDAC3B,CAAC,EACD,iBAAkBR,EAAI,CACpB,UAAW,GAAGQ,EAAW,gDAC3B,CAAC,EACD,iBAAkBR,EAAI,CACpB,UAAW,GAAGQ,EAAW,gDAC3B,CAAC,CACH,CACF,EDvOA,IAAME,EAAsB,MAEtBC,EAAgD,CACpD,QAASR,EAAO,QAChB,QAASA,EAAO,aAChB,MAAOA,EAAO,UAChB,EAoBaS,EAAUV,EACrB,CACE,CACE,UAAAW,EACA,WAAAC,EACA,KAAAC,EAAO,SACP,QAAAC,EAAU,UACV,OAAAC,EAAS,mBACNC,CACL,EACAC,IACG,CACH,IAAMC,EAASb,EAAU,EACzB,OACEN,EAAA,cAACG,EAAA,CACC,GAAIM,EACJ,QAAQ,eACP,GAAGQ,EACJ,UAAWnB,EAAGqB,EAAO,KAAK,CAAE,KAAAL,EAAM,WAAAD,CAAW,CAAC,EAAGD,CAAS,EAC1D,IAAKM,EACL,OAAQF,GAERhB,EAAA,cAAC,OACC,UAAWD,EAAI,CACb,QAAS,QACT,KAAMW,EAASK,EACjB,CAAC,EACD,QAAQ,YACR,MAAM,8BAENf,EAAA,cAAC,aAAM,eAAQ,EACfA,EAAA,cAAC,KACC,UAAWmB,EAAO,iBAClB,UAAU,2BAEVnB,EAAA,cAAC,KAAE,UAAWmB,EAAO,cACnBnB,EAAA,cAAC,UAAO,EAAE,IAAI,UAAU,yBAAyB,CACnD,CACF,EAEAA,EAAA,cAAC,KACC,UAAWmB,EAAO,iBAClB,UAAU,2BAEVnB,EAAA,cAAC,KAAE,UAAWmB,EAAO,cACnBnB,EAAA,cAAC,UAAO,EAAE,IAAI,UAAU,yBAAyB,CACnD,CACF,EAEAA,EAAA,cAAC,KACC,UAAWmB,EAAO,iBAClB,UAAU,2BAEVnB,EAAA,cAAC,KAAE,UAAWmB,EAAO,cACnBnB,EAAA,cAAC,UAAO,EAAE,IAAI,UAAU,yBAAyB,CACnD,CACF,CACF,CACF,CAEJ,CACF,EAEAW,EAAQ,YAAc","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"]}
+{"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"]}

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@contentful/f36-spinner",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "description": "Forma 36: Spinner Component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "^4.19.2",
+    "@contentful/f36-core": "^4.20.0",
     "@contentful/f36-tokens": "^4.0.1",
     "emotion": "^10.0.17"
   },
   "devDependencies": {
-    "@contentful/f36-typography": "^4.19.2"
+    "@contentful/f36-typography": "^4.20.0"
   },
   "peerDependencies": {
     "react": ">=16.8"