@contentful/f36-spinner 5.7.0 → 6.0.0-alpha.1

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/dist/esm/index.js +2 -9
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +7 -7
  4. package/dist/index.d.ts +7 -7
  5. package/dist/index.js +8 -22
  6. package/dist/index.js.map +1 -1
  7. package/package.json +7 -7
package/dist/esm/index.js CHANGED
@@ -1,9 +1,4 @@
1
- import { cx, css, keyframes } from 'emotion';
2
- import s, { forwardRef } from 'react';
3
- import i from '@contentful/f36-tokens';
4
- import { Box } from '@contentful/f36-core';
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`
1
+ import {cx,css,keyframes}from'@emotion/css';import s,{forwardRef}from'react';import i from'@contentful/f36-tokens';import {Box}from'@contentful/f36-core';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:true,configurable:true,writable:true,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`
7
2
  0% {
8
3
  transform: scale(1, 1);
9
4
  }
@@ -202,7 +197,5 @@ var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropert
202
197
  transform: translate(50px, 33.528168px);
203
198
  }
204
199
  `};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 L="div",I={default:i.gray700,primary:i.blue500,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:L,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";
205
-
206
- export { u as Spinner };
207
- //# sourceMappingURL=out.js.map
200
+ export{u as Spinner};//# sourceMappingURL=index.js.map
208
201
  //# sourceMappingURL=index.js.map
package/dist/esm/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":"+kBAAA,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,UAAU,KAAO,OACrD,cAAe,SACf,MAAOA,EAAM,WAAa,GAAGA,EAAM,UAAU,KAAOH,EAAMG,EAAM,IAAI,CACtE,CAAC,EACH,aAAcT,EAAI,CAChB,UAAW,GAAGQ,EAAW,MAAM,sCACjC,CAAC,EACD,aAAcR,EAAI,CAChB,UAAW,GAAGQ,EAAW,MAAM,sCACjC,CAAC,EACD,aAAcR,EAAI,CAChB,UAAW,GAAGQ,EAAW,MAAM,sCACjC,CAAC,EACD,iBAAkBR,EAAI,CACpB,UAAW,GAAGQ,EAAW,UAAU,sCACrC,CAAC,EACD,iBAAkBR,EAAI,CACpB,UAAW,GAAGQ,EAAW,UAAU,sCACrC,CAAC,EACD,iBAAkBR,EAAI,CACpB,UAAW,GAAGQ,EAAW,UAAU,sCACrC,CAAC,CACH,CACF,EDvOA,IAAME,EAAsB,MAEtBC,EAAgD,CACpD,QAASR,EAAO,QAChB,QAASA,EAAO,QAChB,MAAOA,EAAO,UAChB,EAoBaS,EAAUV,EACrB,CACEW,EAQAC,IACG,CATH,IAAAC,EAAAF,EACE,WAAAG,EACA,WAAAC,EACA,KAAAC,EAAO,SACP,QAAAC,EAAU,UACV,OAAAC,EAAS,eA7Cf,EAwCIL,EAMKM,EAAAC,EANLP,EAMK,CALH,YACA,aACA,OACA,UACA,WAKF,IAAMQ,EAAShB,EAAU,EACzB,OACEN,EAAA,cAACG,EAAAoB,EAAAC,EAAA,CACC,GAAIf,EACJ,QAAQ,gBACJW,GAHL,CAIC,UAAWtB,EAAGwB,EAAO,KAAK,CAAE,KAAAL,EAAM,WAAAD,CAAW,CAAC,EAAGD,CAAS,EAC1D,IAAKF,EACL,OAAQM,IAERnB,EAAA,cAAC,OACC,UAAWD,EAAI,CACb,QAAS,QACT,KAAMW,EAASQ,CAAO,CACxB,CAAC,EACD,QAAQ,YACR,MAAM,8BAENlB,EAAA,cAAC,aAAM,eAAQ,EACfA,EAAA,cAAC,KACC,UAAWsB,EAAO,iBAClB,UAAU,2BAEVtB,EAAA,cAAC,KAAE,UAAWsB,EAAO,cACnBtB,EAAA,cAAC,UAAO,EAAE,IAAI,UAAU,yBAAyB,CACnD,CACF,EAEAA,EAAA,cAAC,KACC,UAAWsB,EAAO,iBAClB,UAAU,2BAEVtB,EAAA,cAAC,KAAE,UAAWsB,EAAO,cACnBtB,EAAA,cAAC,UAAO,EAAE,IAAI,UAAU,yBAAyB,CACnD,CACF,EAEAA,EAAA,cAAC,KACC,UAAWsB,EAAO,iBAClB,UAAU,2BAEVtB,EAAA,cAAC,KAAE,UAAWsB,EAAO,cACnBtB,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.blue500,\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":["sizes","getStyles","animations","keyframes","props","css","SPINNER_DEFAULT_TAG","variants","tokens","Spinner","forwardRef","_a","forwardedRef","_b","className","customSize","size","variant","testId","otherProps","__objRest","styles","React","Box","__spreadProps","__spreadValues","cx"],"mappings":"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","file":"index.js","sourcesContent":["import { cx, css } from '@emotion/css';\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.blue500,\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/css';\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.d.mts CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
- import { PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';
2
+ import { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
3
3
 
4
- declare type SpinnerVariant = 'primary' | 'default' | 'white';
5
- declare type SpinnerSize = 'large' | 'medium' | 'small';
4
+ type SpinnerVariant = 'primary' | 'default' | 'white';
5
+ type SpinnerSize = 'large' | 'medium' | 'small';
6
6
 
7
- declare type SpinnerInternalProps = CommonProps & {
7
+ type SpinnerInternalProps = CommonProps & {
8
8
  /**
9
9
  * Determines the color that will be used in the `fill` property of the SVG
10
10
  */
@@ -19,8 +19,8 @@ declare type SpinnerInternalProps = CommonProps & {
19
19
  */
20
20
  size?: SpinnerSize;
21
21
  };
22
- declare type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;
23
- declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, never>, keyof CommonProps | "variant" | "customSize" | "size"> & CommonProps & {
22
+ type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;
23
+ declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, never>, keyof CommonProps | "variant" | "customSize" | "size"> & CommonProps & {
24
24
  /**
25
25
  * Determines the color that will be used in the `fill` property of the SVG
26
26
  */
@@ -36,4 +36,4 @@ declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.Deta
36
36
  size?: SpinnerSize;
37
37
  } & React.RefAttributes<HTMLDivElement>>;
38
38
 
39
- export { Spinner, SpinnerProps };
39
+ export { Spinner, type SpinnerProps };
package/dist/index.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
- import { PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';
2
+ import { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
3
3
 
4
- declare type SpinnerVariant = 'primary' | 'default' | 'white';
5
- declare type SpinnerSize = 'large' | 'medium' | 'small';
4
+ type SpinnerVariant = 'primary' | 'default' | 'white';
5
+ type SpinnerSize = 'large' | 'medium' | 'small';
6
6
 
7
- declare type SpinnerInternalProps = CommonProps & {
7
+ type SpinnerInternalProps = CommonProps & {
8
8
  /**
9
9
  * Determines the color that will be used in the `fill` property of the SVG
10
10
  */
@@ -19,8 +19,8 @@ declare type SpinnerInternalProps = CommonProps & {
19
19
  */
20
20
  size?: SpinnerSize;
21
21
  };
22
- declare type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;
23
- declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, never>, keyof CommonProps | "variant" | "customSize" | "size"> & CommonProps & {
22
+ type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;
23
+ declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, never>, keyof CommonProps | "variant" | "customSize" | "size"> & CommonProps & {
24
24
  /**
25
25
  * Determines the color that will be used in the `fill` property of the SVG
26
26
  */
@@ -36,4 +36,4 @@ declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.Deta
36
36
  size?: SpinnerSize;
37
37
  } & React.RefAttributes<HTMLDivElement>>;
38
38
 
39
- export { Spinner, SpinnerProps };
39
+ export { Spinner, type SpinnerProps };
package/dist/index.js CHANGED
@@ -1,16 +1,4 @@
1
- 'use strict';
2
-
3
- var emotion = require('emotion');
4
- var s = require('react');
5
- var i = require('@contentful/f36-tokens');
6
- var f36Core = require('@contentful/f36-core');
7
-
8
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
9
-
10
- var s__default = /*#__PURE__*/_interopDefault(s);
11
- var i__default = /*#__PURE__*/_interopDefault(i);
12
-
13
- 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`
1
+ 'use strict';var css=require('@emotion/css'),s=require('react'),i=require('@contentful/f36-tokens'),f36Core=require('@contentful/f36-core');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var s__default=/*#__PURE__*/_interopDefault(s);var i__default=/*#__PURE__*/_interopDefault(i);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:true,configurable:true,writable:true,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:css.keyframes`
14
2
  0% {
15
3
  transform: scale(1, 1);
16
4
  }
@@ -41,7 +29,7 @@ var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropert
41
29
  100% {
42
30
  transform: scale(1, 1);
43
31
  }
44
- `,scale2:emotion.keyframes`
32
+ `,scale2:css.keyframes`
45
33
  0% {
46
34
  transform: scale(1, 1);
47
35
  }
@@ -75,7 +63,7 @@ var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropert
75
63
  100% {
76
64
  transform: scale(1, 1);
77
65
  }
78
- `,scale3:emotion.keyframes`
66
+ `,scale3:css.keyframes`
79
67
  0% {
80
68
  transform: scale(1, 1);
81
69
  }
@@ -109,7 +97,7 @@ var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropert
109
97
  100% {
110
98
  transform: scale(1, 1);
111
99
  }
112
- `,translate1:emotion.keyframes`
100
+ `,translate1:css.keyframes`
113
101
  0% {
114
102
  transform: translate(10px, 33.528168px);
115
103
  }
@@ -140,7 +128,7 @@ var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropert
140
128
  100% {
141
129
  transform: translate(10px, 33.528168px);
142
130
  }
143
- `,translate2:emotion.keyframes`
131
+ `,translate2:css.keyframes`
144
132
  0% {
145
133
  transform: translate(30px, 33.528168px);
146
134
  }
@@ -174,7 +162,7 @@ var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropert
174
162
  100% {
175
163
  transform: translate(30px, 33.528168px);
176
164
  }
177
- `,translate3:emotion.keyframes`
165
+ `,translate3:css.keyframes`
178
166
  0% {
179
167
  transform: translate(50px, 33.528168px);
180
168
  }
@@ -208,8 +196,6 @@ var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropert
208
196
  100% {
209
197
  transform: translate(50px, 33.528168px);
210
198
  }
211
- `};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 L="div",I={default:i__default.default.gray700,primary:i__default.default.blue500,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:L,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";
212
-
213
- exports.Spinner = u;
214
- //# sourceMappingURL=out.js.map
199
+ `};return {root:a=>css.css({height:a.customSize?`${a.customSize}px`:void 0,verticalAlign:"middle",width:a.customSize?`${a.customSize}px`:h[a.size]}),circle1Scale:css.css({animation:`${r.scale1} 1s linear infinite normal forwards;`}),circle2Scale:css.css({animation:`${r.scale2} 1s linear infinite normal forwards;`}),circle3Scale:css.css({animation:`${r.scale3} 1s linear infinite normal forwards;`}),circle1Translate:css.css({animation:`${r.translate1} 1s linear infinite normal forwards;`}),circle2Translate:css.css({animation:`${r.translate2} 1s linear infinite normal forwards;`}),circle3Translate:css.css({animation:`${r.translate3} 1s linear infinite normal forwards;`})}};var L="div",I={default:i__default.default.gray700,primary:i__default.default.blue500,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:L,display:"inline-block"},w),{className:css.cx(e.root({size:t,customSize:a}),r),ref:P,testId:z}),s__default.default.createElement("svg",{className:css.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";
200
+ exports.Spinner=u;//# sourceMappingURL=index.js.map
215
201
  //# 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.blue500,\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":["sizes","getStyles","animations","keyframes","props","css","SPINNER_DEFAULT_TAG","variants","tokens","Spinner","forwardRef","_a","forwardedRef","_b","className","customSize","size","variant","testId","otherProps","__objRest","styles","React","Box","__spreadProps","__spreadValues","cx"],"mappings":"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","file":"index.js","sourcesContent":["import { cx, css } from '@emotion/css';\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.blue500,\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/css';\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,21 +1,21 @@
1
1
  {
2
2
  "name": "@contentful/f36-spinner",
3
- "version": "5.7.0",
3
+ "version": "6.0.0-alpha.1",
4
4
  "description": "Forma 36: Spinner Component",
5
5
  "scripts": {
6
6
  "build": "tsup"
7
7
  },
8
8
  "dependencies": {
9
- "@contentful/f36-core": "^5.7.0",
10
- "@contentful/f36-tokens": "^5.1.0",
11
- "emotion": "^10.0.17"
9
+ "@contentful/f36-core": "^6.0.0-alpha.0",
10
+ "@contentful/f36-tokens": "^6.0.0-alpha.0",
11
+ "@emotion/css": "^11.13.5"
12
12
  },
13
13
  "devDependencies": {
14
- "@contentful/f36-typography": "^5.7.0"
14
+ "@contentful/f36-typography": "^6.0.0-alpha.0"
15
15
  },
16
16
  "peerDependencies": {
17
- "react": ">=16.8",
18
- "react-dom": ">=16.8"
17
+ "react": ">=19.1.0",
18
+ "react-dom": ">=19.1.0"
19
19
  },
20
20
  "license": "MIT",
21
21
  "files": [