@contentful/f36-spinner 4.17.0 → 4.18.0

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 (12) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/{types.d.ts → index.d.ts} +10 -8
  3. package/dist/index.js +216 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/index.mjs +207 -0
  6. package/dist/index.mjs.map +1 -0
  7. package/package.json +7 -7
  8. package/dist/main.js +0 -137
  9. package/dist/main.js.map +0 -1
  10. package/dist/module.js +0 -130
  11. package/dist/module.js.map +0 -1
  12. package/dist/types.d.ts.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.18.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies []:
8
+ - @contentful/f36-core@4.18.0
9
+
3
10
  ## 4.17.0
4
11
 
5
12
  ### Patch Changes
package/dist/{types.d.ts → index.d.ts} RENAMED
@@ -1,8 +1,10 @@
1
- import React from "react";
2
- import { CommonProps, PropsWithHTMLElement } from "@contentful/f36-core";
3
- type SpinnerVariant = 'primary' | 'default' | 'white';
4
- type SpinnerSize = 'large' | 'medium' | 'small';
5
- type SpinnerInternalProps = CommonProps & {
1
+ import React from 'react';
2
+ import { PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';
3
+
4
+ declare type SpinnerVariant = 'primary' | 'default' | 'white';
5
+ declare type SpinnerSize = 'large' | 'medium' | 'small';
6
+
7
+ declare type SpinnerInternalProps = CommonProps & {
6
8
  /**
7
9
  * Determines the color that will be used in the `fill` property of the SVG
8
10
  */
@@ -17,8 +19,8 @@ type SpinnerInternalProps = CommonProps & {
17
19
  */
18
20
  size?: SpinnerSize;
19
21
  };
20
- export type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;
21
- export 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
+ 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
24
  /**
23
25
  * Determines the color that will be used in the `fill` property of the SVG
24
26
  */
@@ -34,4 +36,4 @@ export const Spinner: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.Detai
34
36
  size?: SpinnerSize;
35
37
  } & React.RefAttributes<HTMLDivElement>>;
36
38
 
37
- //# sourceMappingURL=types.d.ts.map
39
+ export { Spinner, SpinnerProps };
package/dist/index.js ADDED
@@ -0,0 +1,216 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var emotion = require('emotion');
6
+ var s = require('react');
7
+ var i = require('@contentful/f36-tokens');
8
+ var f36Core = require('@contentful/f36-core');
9
+
10
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
+
12
+ var s__default = /*#__PURE__*/_interopDefaultLegacy(s);
13
+ var i__default = /*#__PURE__*/_interopDefaultLegacy(i);
14
+
15
+ var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var f=(r,a,t)=>a in r?N(r,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[a]=t,S=(r,a)=>{for(var t in a||(a={}))c.call(a,t)&&f(r,t,a[t]);if(m)for(var t of m(a))x.call(a,t)&&f(r,t,a[t]);return r},d=(r,a)=>T(r,v(a));var g=(r,a)=>{var t={};for(var n in r)c.call(r,n)&&a.indexOf(n)<0&&(t[n]=r[n]);if(r!=null&&m)for(var n of m(r))a.indexOf(n)<0&&x.call(r,n)&&(t[n]=r[n]);return t};var h={large:"36px",medium:"20px",small:"14px"},y=()=>{let r={scale1:emotion.keyframes`
16
+ 0% {
17
+ transform: scale(1, 1);
18
+ }
19
+ 6.666667% {
20
+ transform: scale(1.5, 0.5);
21
+ }
22
+ 13.333333% {
23
+ transform: scale(1, 1);
24
+ }
25
+ 26.666667% {
26
+ transform: scale(1, 1);
27
+ }
28
+ 33.333333% {
29
+ transform: scale(1, 1);
30
+ }
31
+ 40% {
32
+ transform: scale(1, 1);
33
+ }
34
+ 53.333333% {
35
+ transform: scale(1, 1);
36
+ }
37
+ 60% {
38
+ transform: scale(1.5, 0.5);
39
+ }
40
+ 66.666667% {
41
+ transform: scale(1, 1);
42
+ }
43
+ 100% {
44
+ transform: scale(1, 1);
45
+ }
46
+ `,scale2:emotion.keyframes`
47
+ 0% {
48
+ transform: scale(1, 1);
49
+ }
50
+ 13.333333% {
51
+ transform: scale(1, 1);
52
+ }
53
+ 20% {
54
+ transform: scale(1.5, 0.5);
55
+ }
56
+ 26.666667% {
57
+ transform: scale(1, 1);
58
+ }
59
+ 40% {
60
+ transform: scale(1, 1);
61
+ }
62
+ 46.666667% {
63
+ transform: scale(1, 1);
64
+ }
65
+ 53.333333% {
66
+ transform: scale(1, 1);
67
+ }
68
+ 66.666667% {
69
+ transform: scale(1, 1);
70
+ }
71
+ 73.333333% {
72
+ transform: scale(1.5, 0.5);
73
+ }
74
+ 80% {
75
+ transform: scale(1, 1);
76
+ }
77
+ 100% {
78
+ transform: scale(1, 1);
79
+ }
80
+ `,scale3:emotion.keyframes`
81
+ 0% {
82
+ transform: scale(1, 1);
83
+ }
84
+ 26.666667% {
85
+ transform: scale(1, 1);
86
+ }
87
+ 33.333333% {
88
+ transform: scale(1.5, 0.5);
89
+ }
90
+ 40% {
91
+ transform: scale(1, 1);
92
+ }
93
+ 53.333333% {
94
+ transform: scale(1, 1);
95
+ }
96
+ 60% {
97
+ transform: scale(1, 1);
98
+ }
99
+ 66.666667% {
100
+ transform: scale(1, 1);
101
+ }
102
+ 80% {
103
+ transform: scale(1, 1);
104
+ }
105
+ 86.666667% {
106
+ transform: scale(1.5, 0.5);
107
+ }
108
+ 93.333333% {
109
+ transform: scale(1, 1);
110
+ }
111
+ 100% {
112
+ transform: scale(1, 1);
113
+ }
114
+ `,translate1:emotion.keyframes`
115
+ 0% {
116
+ transform: translate(10px, 33.528168px);
117
+ }
118
+ 6.666667% {
119
+ transform: translate(10px, 41.764084px);
120
+ }
121
+ 13.333333% {
122
+ transform: translate(10px, 33.528168px);
123
+ }
124
+ 26.666667% {
125
+ transform: translate(10px, -2.651608px);
126
+ }
127
+ 33.333333% {
128
+ transform: translate(10px, -4.471832px);
129
+ }
130
+ 40% {
131
+ transform: translate(10px, -2.651608px);
132
+ }
133
+ 53.333333% {
134
+ transform: translate(10px, 33.528168px);
135
+ }
136
+ 60% {
137
+ transform: translate(10px, 41.764084px);
138
+ }
139
+ 66.666667% {
140
+ transform: translate(10px, 33.528168px);
141
+ }
142
+ 100% {
143
+ transform: translate(10px, 33.528168px);
144
+ }
145
+ `,translate2:emotion.keyframes`
146
+ 0% {
147
+ transform: translate(30px, 33.528168px);
148
+ }
149
+ 13.333333% {
150
+ transform: translate(30px, 33.528168px);
151
+ }
152
+ 20% {
153
+ transform: translate(30px, 41.764084px);
154
+ }
155
+ 26.666667% {
156
+ transform: translate(30px, 33.528168px);
157
+ }
158
+ 40% {
159
+ transform: translate(30px, -2.651608px);
160
+ }
161
+ 46.666667% {
162
+ transform: translate(30px, -4.471832px);
163
+ }
164
+ 53.333333% {
165
+ transform: translate(30px, -2.651608px);
166
+ }
167
+ 66.666667% {
168
+ transform: translate(30px, 33.528168px);
169
+ }
170
+ 73.333333% {
171
+ transform: translate(30px, 41.764084px);
172
+ }
173
+ 80% {
174
+ transform: translate(30px, 33.528168px);
175
+ }
176
+ 100% {
177
+ transform: translate(30px, 33.528168px);
178
+ }
179
+ `,translate3:emotion.keyframes`
180
+ 0% {
181
+ transform: translate(50px, 33.528168px);
182
+ }
183
+ 26.666667% {
184
+ transform: translate(50px, 33.528168px);
185
+ }
186
+ 33.333333% {
187
+ transform: translate(50px, 41.764084px);
188
+ }
189
+ 40% {
190
+ transform: translate(50px, 33.528168px);
191
+ }
192
+ 53.333333% {
193
+ transform: translate(50px, -2.651608px);
194
+ }
195
+ 60% {
196
+ transform: translate(50px, -4.471832px);
197
+ }
198
+ 66.666667% {
199
+ transform: translate(50px, -2.651608px);
200
+ }
201
+ 80% {
202
+ transform: translate(50px, 33.528168px);
203
+ }
204
+ 86.666667% {
205
+ transform: translate(50px, 41.764084px);
206
+ }
207
+ 93.333333% {
208
+ transform: translate(50px, 33.528168px);
209
+ }
210
+ 100% {
211
+ transform: translate(50px, 33.528168px);
212
+ }
213
+ `};return {root:a=>emotion.css({height:a.customSize?`${a.customSize}px`:void 0,verticalAlign:"middle",width:a.customSize?`${a.customSize}px`:h[a.size]}),circle1Scale:emotion.css({animation:`${r.scale1} 1s linear infinite normal forwards;`}),circle2Scale:emotion.css({animation:`${r.scale2} 1s linear infinite normal forwards;`}),circle3Scale:emotion.css({animation:`${r.scale3} 1s linear infinite normal forwards;`}),circle1Translate:emotion.css({animation:`${r.translate1} 1s linear infinite normal forwards;`}),circle2Translate:emotion.css({animation:`${r.translate2} 1s linear infinite normal forwards;`}),circle3Translate:emotion.css({animation:`${r.translate3} 1s linear infinite normal forwards;`})}};var b="div",I={default:i__default["default"].gray700,primary:i__default["default"].colorPrimary,white:i__default["default"].colorWhite},u=s.forwardRef((A,P)=>{var p=A,{className:r,customSize:a,size:t="medium",variant:n="default",testId:z="cf-ui-spinner"}=p,w=g(p,["className","customSize","size","variant","testId"]);let e=y();return s__default["default"].createElement(f36Core.Box,d(S({as:b,display:"inline-block"},w),{className:emotion.cx(e.root({size:t,customSize:a}),r),ref:P,testId:z}),s__default["default"].createElement("svg",{className:emotion.css({display:"block",fill:I[n]}),viewBox:"0 0 60 51",xmlns:"http://www.w3.org/2000/svg"},s__default["default"].createElement("title",null,"Loading\u2026"),s__default["default"].createElement("g",{className:e.circle1Translate,transform:"translate(10,33.528168)"},s__default["default"].createElement("g",{className:e.circle1Scale},s__default["default"].createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s__default["default"].createElement("g",{className:e.circle2Translate,transform:"translate(30,33.528168)"},s__default["default"].createElement("g",{className:e.circle2Scale},s__default["default"].createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s__default["default"].createElement("g",{className:e.circle3Translate,transform:"translate(50,33.528168)"},s__default["default"].createElement("g",{className:e.circle3Scale},s__default["default"].createElement("circle",{r:"6",transform:"translate(0,10.471832)"})))))});u.displayName="Spinner";
214
+
215
+ exports.Spinner = u;
216
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Spinner.tsx","../src/Spinner.styles.ts"],"names":["cx","css","React","forwardRef","tokens","Box","keyframes","sizes","getStyles","animations","props","SPINNER_DEFAULT_TAG","variants","Spinner","_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.mjs ADDED
@@ -0,0 +1,207 @@
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`
7
+ 0% {
8
+ transform: scale(1, 1);
9
+ }
10
+ 6.666667% {
11
+ transform: scale(1.5, 0.5);
12
+ }
13
+ 13.333333% {
14
+ transform: scale(1, 1);
15
+ }
16
+ 26.666667% {
17
+ transform: scale(1, 1);
18
+ }
19
+ 33.333333% {
20
+ transform: scale(1, 1);
21
+ }
22
+ 40% {
23
+ transform: scale(1, 1);
24
+ }
25
+ 53.333333% {
26
+ transform: scale(1, 1);
27
+ }
28
+ 60% {
29
+ transform: scale(1.5, 0.5);
30
+ }
31
+ 66.666667% {
32
+ transform: scale(1, 1);
33
+ }
34
+ 100% {
35
+ transform: scale(1, 1);
36
+ }
37
+ `,scale2:keyframes`
38
+ 0% {
39
+ transform: scale(1, 1);
40
+ }
41
+ 13.333333% {
42
+ transform: scale(1, 1);
43
+ }
44
+ 20% {
45
+ transform: scale(1.5, 0.5);
46
+ }
47
+ 26.666667% {
48
+ transform: scale(1, 1);
49
+ }
50
+ 40% {
51
+ transform: scale(1, 1);
52
+ }
53
+ 46.666667% {
54
+ transform: scale(1, 1);
55
+ }
56
+ 53.333333% {
57
+ transform: scale(1, 1);
58
+ }
59
+ 66.666667% {
60
+ transform: scale(1, 1);
61
+ }
62
+ 73.333333% {
63
+ transform: scale(1.5, 0.5);
64
+ }
65
+ 80% {
66
+ transform: scale(1, 1);
67
+ }
68
+ 100% {
69
+ transform: scale(1, 1);
70
+ }
71
+ `,scale3:keyframes`
72
+ 0% {
73
+ transform: scale(1, 1);
74
+ }
75
+ 26.666667% {
76
+ transform: scale(1, 1);
77
+ }
78
+ 33.333333% {
79
+ transform: scale(1.5, 0.5);
80
+ }
81
+ 40% {
82
+ transform: scale(1, 1);
83
+ }
84
+ 53.333333% {
85
+ transform: scale(1, 1);
86
+ }
87
+ 60% {
88
+ transform: scale(1, 1);
89
+ }
90
+ 66.666667% {
91
+ transform: scale(1, 1);
92
+ }
93
+ 80% {
94
+ transform: scale(1, 1);
95
+ }
96
+ 86.666667% {
97
+ transform: scale(1.5, 0.5);
98
+ }
99
+ 93.333333% {
100
+ transform: scale(1, 1);
101
+ }
102
+ 100% {
103
+ transform: scale(1, 1);
104
+ }
105
+ `,translate1:keyframes`
106
+ 0% {
107
+ transform: translate(10px, 33.528168px);
108
+ }
109
+ 6.666667% {
110
+ transform: translate(10px, 41.764084px);
111
+ }
112
+ 13.333333% {
113
+ transform: translate(10px, 33.528168px);
114
+ }
115
+ 26.666667% {
116
+ transform: translate(10px, -2.651608px);
117
+ }
118
+ 33.333333% {
119
+ transform: translate(10px, -4.471832px);
120
+ }
121
+ 40% {
122
+ transform: translate(10px, -2.651608px);
123
+ }
124
+ 53.333333% {
125
+ transform: translate(10px, 33.528168px);
126
+ }
127
+ 60% {
128
+ transform: translate(10px, 41.764084px);
129
+ }
130
+ 66.666667% {
131
+ transform: translate(10px, 33.528168px);
132
+ }
133
+ 100% {
134
+ transform: translate(10px, 33.528168px);
135
+ }
136
+ `,translate2:keyframes`
137
+ 0% {
138
+ transform: translate(30px, 33.528168px);
139
+ }
140
+ 13.333333% {
141
+ transform: translate(30px, 33.528168px);
142
+ }
143
+ 20% {
144
+ transform: translate(30px, 41.764084px);
145
+ }
146
+ 26.666667% {
147
+ transform: translate(30px, 33.528168px);
148
+ }
149
+ 40% {
150
+ transform: translate(30px, -2.651608px);
151
+ }
152
+ 46.666667% {
153
+ transform: translate(30px, -4.471832px);
154
+ }
155
+ 53.333333% {
156
+ transform: translate(30px, -2.651608px);
157
+ }
158
+ 66.666667% {
159
+ transform: translate(30px, 33.528168px);
160
+ }
161
+ 73.333333% {
162
+ transform: translate(30px, 41.764084px);
163
+ }
164
+ 80% {
165
+ transform: translate(30px, 33.528168px);
166
+ }
167
+ 100% {
168
+ transform: translate(30px, 33.528168px);
169
+ }
170
+ `,translate3:keyframes`
171
+ 0% {
172
+ transform: translate(50px, 33.528168px);
173
+ }
174
+ 26.666667% {
175
+ transform: translate(50px, 33.528168px);
176
+ }
177
+ 33.333333% {
178
+ transform: translate(50px, 41.764084px);
179
+ }
180
+ 40% {
181
+ transform: translate(50px, 33.528168px);
182
+ }
183
+ 53.333333% {
184
+ transform: translate(50px, -2.651608px);
185
+ }
186
+ 60% {
187
+ transform: translate(50px, -4.471832px);
188
+ }
189
+ 66.666667% {
190
+ transform: translate(50px, -2.651608px);
191
+ }
192
+ 80% {
193
+ transform: translate(50px, 33.528168px);
194
+ }
195
+ 86.666667% {
196
+ transform: translate(50px, 41.764084px);
197
+ }
198
+ 93.333333% {
199
+ transform: translate(50px, 33.528168px);
200
+ }
201
+ 100% {
202
+ transform: translate(50px, 33.528168px);
203
+ }
204
+ `};return {root:a=>css({height:a.customSize?`${a.customSize}px`:void 0,verticalAlign:"middle",width:a.customSize?`${a.customSize}px`:h[a.size]}),circle1Scale:css({animation:`${r.scale1} 1s linear infinite normal forwards;`}),circle2Scale:css({animation:`${r.scale2} 1s linear infinite normal forwards;`}),circle3Scale:css({animation:`${r.scale3} 1s linear infinite normal forwards;`}),circle1Translate:css({animation:`${r.translate1} 1s linear infinite normal forwards;`}),circle2Translate:css({animation:`${r.translate2} 1s linear infinite normal forwards;`}),circle3Translate:css({animation:`${r.translate3} 1s linear infinite normal forwards;`})}};var b="div",I={default:i.gray700,primary:i.colorPrimary,white:i.colorWhite},u=forwardRef((A,P)=>{var p=A,{className:r,customSize:a,size:t="medium",variant:n="default",testId:z="cf-ui-spinner"}=p,w=g(p,["className","customSize","size","variant","testId"]);let e=y();return s.createElement(Box,d(S({as:b,display:"inline-block"},w),{className:cx(e.root({size:t,customSize:a}),r),ref:P,testId:z}),s.createElement("svg",{className:css({display:"block",fill:I[n]}),viewBox:"0 0 60 51",xmlns:"http://www.w3.org/2000/svg"},s.createElement("title",null,"Loading\u2026"),s.createElement("g",{className:e.circle1Translate,transform:"translate(10,33.528168)"},s.createElement("g",{className:e.circle1Scale},s.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s.createElement("g",{className:e.circle2Translate,transform:"translate(30,33.528168)"},s.createElement("g",{className:e.circle2Scale},s.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s.createElement("g",{className:e.circle3Translate,transform:"translate(50,33.528168)"},s.createElement("g",{className:e.circle3Scale},s.createElement("circle",{r:"6",transform:"translate(0,10.471832)"})))))});u.displayName="Spinner";
205
+
206
+ export { u as Spinner };
207
+ //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Spinner.tsx","../src/Spinner.styles.ts"],"names":["cx","css","React","forwardRef","tokens","Box","keyframes","sizes","getStyles","animations","props","SPINNER_DEFAULT_TAG","variants","Spinner","_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 CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@contentful/f36-spinner",
3
- "version": "4.17.0",
3
+ "version": "4.18.0",
4
4
  "description": "Forma 36: Spinner Component",
5
5
  "scripts": {
6
- "build": "parcel build src/index.ts"
6
+ "build": "tsup"
7
7
  },
8
8
  "dependencies": {
9
9
  "@babel/runtime": "^7.6.2",
10
- "@contentful/f36-core": "^4.17.0",
10
+ "@contentful/f36-core": "^4.18.0",
11
11
  "@contentful/f36-tokens": "^4.0.1",
12
12
  "emotion": "^10.0.17"
13
13
  },
14
14
  "devDependencies": {
15
- "@contentful/f36-typography": "^4.17.0"
15
+ "@contentful/f36-typography": "^4.18.0"
16
16
  },
17
17
  "peerDependencies": {
18
18
  "react": ">=16.8"
@@ -21,9 +21,9 @@
21
21
  "files": [
22
22
  "dist"
23
23
  ],
24
- "main": "dist/main.js",
25
- "module": "dist/module.js",
26
- "types": "dist/types.d.ts",
24
+ "main": "dist/index.js",
25
+ "module": "dist/index.mjs",
26
+ "types": "dist/index.d.ts",
27
27
  "source": "src/index.ts",
28
28
  "sideEffects": false,
29
29
  "browserslist": "extends @contentful/browserslist-config",
package/dist/main.js DELETED
@@ -1,137 +0,0 @@
1
- var $b84Wv$emotion = require("emotion");
2
- var $b84Wv$react = require("react");
3
- var $b84Wv$contentfulf36tokens = require("@contentful/f36-tokens");
4
- var $b84Wv$contentfulf36core = require("@contentful/f36-core");
5
-
6
- function $parcel$export(e, n, v, s) {
7
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
8
- }
9
- function $parcel$interopDefault(a) {
10
- return a && a.__esModule ? a.default : a;
11
- }
12
-
13
- $parcel$export(module.exports, "Spinner", () => $05c01a9aaed28186$export$7f7cbe89f1eacd2);
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
- const $ccc4b2a72ca993e7$var$sizes = {
22
- large: "36px",
23
- medium: "20px",
24
- small: "14px"
25
- };
26
- const $ccc4b2a72ca993e7$export$ffd58b7f6f099a57 = ()=>{
27
- const animations = {
28
- scale1: /*#__PURE__*/ (0, $b84Wv$emotion.keyframes)({
29
- name: "2hhwgy",
30
- styles: "0%{transform:scale(1,1);}6.666667%{transform:scale(1.5,0.5);}13.333333%{transform:scale(1,1);}26.666667%{transform:scale(1,1);}33.333333%{transform:scale(1,1);}40%{transform:scale(1,1);}53.333333%{transform:scale(1,1);}60%{transform:scale(1.5,0.5);}66.666667%{transform:scale(1,1);}100%{transform:scale(1,1);}"
31
- }),
32
- scale2: /*#__PURE__*/ (0, $b84Wv$emotion.keyframes)({
33
- name: "1b94qny",
34
- styles: "0%{transform:scale(1,1);}13.333333%{transform:scale(1,1);}20%{transform:scale(1.5,0.5);}26.666667%{transform:scale(1,1);}40%{transform:scale(1,1);}46.666667%{transform:scale(1,1);}53.333333%{transform:scale(1,1);}66.666667%{transform:scale(1,1);}73.333333%{transform:scale(1.5,0.5);}80%{transform:scale(1,1);}100%{transform:scale(1,1);}"
35
- }),
36
- scale3: /*#__PURE__*/ (0, $b84Wv$emotion.keyframes)({
37
- name: "1q9z2j0",
38
- styles: "0%{transform:scale(1,1);}26.666667%{transform:scale(1,1);}33.333333%{transform:scale(1.5,0.5);}40%{transform:scale(1,1);}53.333333%{transform:scale(1,1);}60%{transform:scale(1,1);}66.666667%{transform:scale(1,1);}80%{transform:scale(1,1);}86.666667%{transform:scale(1.5,0.5);}93.333333%{transform:scale(1,1);}100%{transform:scale(1,1);}"
39
- }),
40
- translate1: /*#__PURE__*/ (0, $b84Wv$emotion.keyframes)({
41
- name: "piqegj",
42
- styles: "0%{transform:translate(10px,33.528168px);}6.666667%{transform:translate(10px,41.764084px);}13.333333%{transform:translate(10px,33.528168px);}26.666667%{transform:translate(10px,-2.651608px);}33.333333%{transform:translate(10px,-4.471832px);}40%{transform:translate(10px,-2.651608px);}53.333333%{transform:translate(10px,33.528168px);}60%{transform:translate(10px,41.764084px);}66.666667%{transform:translate(10px,33.528168px);}100%{transform:translate(10px,33.528168px);}"
43
- }),
44
- translate2: /*#__PURE__*/ (0, $b84Wv$emotion.keyframes)({
45
- name: "1tc59mm",
46
- styles: "0%{transform:translate(30px,33.528168px);}13.333333%{transform:translate(30px,33.528168px);}20%{transform:translate(30px,41.764084px);}26.666667%{transform:translate(30px,33.528168px);}40%{transform:translate(30px,-2.651608px);}46.666667%{transform:translate(30px,-4.471832px);}53.333333%{transform:translate(30px,-2.651608px);}66.666667%{transform:translate(30px,33.528168px);}73.333333%{transform:translate(30px,41.764084px);}80%{transform:translate(30px,33.528168px);}100%{transform:translate(30px,33.528168px);}"
47
- }),
48
- translate3: /*#__PURE__*/ (0, $b84Wv$emotion.keyframes)({
49
- name: "21uo4u",
50
- styles: "0%{transform:translate(50px,33.528168px);}26.666667%{transform:translate(50px,33.528168px);}33.333333%{transform:translate(50px,41.764084px);}40%{transform:translate(50px,33.528168px);}53.333333%{transform:translate(50px,-2.651608px);}60%{transform:translate(50px,-4.471832px);}66.666667%{transform:translate(50px,-2.651608px);}80%{transform:translate(50px,33.528168px);}86.666667%{transform:translate(50px,41.764084px);}93.333333%{transform:translate(50px,33.528168px);}100%{transform:translate(50px,33.528168px);}"
51
- })
52
- };
53
- return {
54
- root: (props)=>/*#__PURE__*/ (0, $b84Wv$emotion.css)({
55
- height: props.customSize ? `${props.customSize}px` : undefined,
56
- verticalAlign: "middle",
57
- width: props.customSize ? `${props.customSize}px` : $ccc4b2a72ca993e7$var$sizes[props.size]
58
- }),
59
- circle1Scale: /*#__PURE__*/ (0, $b84Wv$emotion.css)({
60
- animation: `${animations.scale1} 1s linear infinite normal forwards;`
61
- }),
62
- circle2Scale: /*#__PURE__*/ (0, $b84Wv$emotion.css)({
63
- animation: `${animations.scale2} 1s linear infinite normal forwards;`
64
- }),
65
- circle3Scale: /*#__PURE__*/ (0, $b84Wv$emotion.css)({
66
- animation: `${animations.scale3} 1s linear infinite normal forwards;`
67
- }),
68
- circle1Translate: /*#__PURE__*/ (0, $b84Wv$emotion.css)({
69
- animation: `${animations.translate1} 1s linear infinite normal forwards;`
70
- }),
71
- circle2Translate: /*#__PURE__*/ (0, $b84Wv$emotion.css)({
72
- animation: `${animations.translate2} 1s linear infinite normal forwards;`
73
- }),
74
- circle3Translate: /*#__PURE__*/ (0, $b84Wv$emotion.css)({
75
- animation: `${animations.translate3} 1s linear infinite normal forwards;`
76
- })
77
- };
78
- };
79
-
80
-
81
- const $05c01a9aaed28186$var$SPINNER_DEFAULT_TAG = "div";
82
- const $05c01a9aaed28186$var$variants = {
83
- default: (0, ($parcel$interopDefault($b84Wv$contentfulf36tokens))).gray700,
84
- primary: (0, ($parcel$interopDefault($b84Wv$contentfulf36tokens))).colorPrimary,
85
- white: (0, ($parcel$interopDefault($b84Wv$contentfulf36tokens))).colorWhite
86
- };
87
- const $05c01a9aaed28186$export$7f7cbe89f1eacd2 = /*#__PURE__*/ (0, $b84Wv$react.forwardRef)(({ className: className , customSize: customSize , size: size = "medium" , variant: variant = "default" , testId: testId = "cf-ui-spinner" , ...otherProps }, forwardedRef)=>{
88
- const styles = (0, $ccc4b2a72ca993e7$export$ffd58b7f6f099a57)();
89
- return /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement((0, $b84Wv$contentfulf36core.Box), {
90
- as: $05c01a9aaed28186$var$SPINNER_DEFAULT_TAG,
91
- display: "inline-block",
92
- ...otherProps,
93
- className: (0, $b84Wv$emotion.cx)(styles.root({
94
- size: size,
95
- customSize: customSize
96
- }), className),
97
- ref: forwardedRef,
98
- testId: testId
99
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("svg", {
100
- className: (0, $b84Wv$emotion.css)({
101
- display: "block",
102
- fill: $05c01a9aaed28186$var$variants[variant]
103
- }),
104
- viewBox: "0 0 60 51",
105
- xmlns: "http://www.w3.org/2000/svg"
106
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("title", null, "Loading\u2026"), /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("g", {
107
- className: styles.circle1Translate,
108
- transform: "translate(10,33.528168)"
109
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("g", {
110
- className: styles.circle1Scale
111
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("circle", {
112
- r: "6",
113
- transform: "translate(0,10.471832)"
114
- }))), /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("g", {
115
- className: styles.circle2Translate,
116
- transform: "translate(30,33.528168)"
117
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("g", {
118
- className: styles.circle2Scale
119
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("circle", {
120
- r: "6",
121
- transform: "translate(0,10.471832)"
122
- }))), /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("g", {
123
- className: styles.circle3Translate,
124
- transform: "translate(50,33.528168)"
125
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("g", {
126
- className: styles.circle3Scale
127
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("circle", {
128
- r: "6",
129
- transform: "translate(0,10.471832)"
130
- })))));
131
- });
132
- $05c01a9aaed28186$export$7f7cbe89f1eacd2.displayName = "Spinner";
133
-
134
-
135
-
136
-
137
- //# sourceMappingURL=main.js.map
package/dist/main.js.map DELETED
@@ -1 +0,0 @@
1
- {"mappings":"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","sources":["packages/components/spinner/src/index.ts","packages/components/spinner/src/Spinner.tsx","packages/components/spinner/src/Spinner.styles.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n","import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\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"],"names":["Spinner","SpinnerProps","React","forwardRef","tokens","Box","CommonProps","PropsWithHTMLElement","ExpandProps","SpinnerSize","SpinnerVariant","getStyles","SPINNER_DEFAULT_TAG","variants","default","gray700","primary","colorPrimary","white","colorWhite","SpinnerInternalProps","variant","customSize","size","HTMLDivElement","className","testId","otherProps","forwardedRef","styles","root","display","fill","circle1Translate","circle1Scale","circle2Translate","circle2Scale","circle3Translate","circle3Scale","displayName","sizes","large","medium","small","animations","scale1","scale2","scale3","translate1","translate2","translate3","props","height","undefined","verticalAlign","width","animation"],"version":3,"file":"main.js.map"}
package/dist/module.js DELETED
@@ -1,130 +0,0 @@
1
- import {cx as $dzcjh$cx, css as $dzcjh$css, keyframes as $dzcjh$keyframes} from "emotion";
2
- import $dzcjh$react, {forwardRef as $dzcjh$forwardRef} from "react";
3
- import $dzcjh$contentfulf36tokens from "@contentful/f36-tokens";
4
- import {Box as $dzcjh$Box} from "@contentful/f36-core";
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
- const $d9f7c1001d753182$var$sizes = {
14
- large: "36px",
15
- medium: "20px",
16
- small: "14px"
17
- };
18
- const $d9f7c1001d753182$export$ffd58b7f6f099a57 = ()=>{
19
- const animations = {
20
- scale1: /*#__PURE__*/ (0, $dzcjh$keyframes)({
21
- name: "2hhwgy",
22
- styles: "0%{transform:scale(1,1);}6.666667%{transform:scale(1.5,0.5);}13.333333%{transform:scale(1,1);}26.666667%{transform:scale(1,1);}33.333333%{transform:scale(1,1);}40%{transform:scale(1,1);}53.333333%{transform:scale(1,1);}60%{transform:scale(1.5,0.5);}66.666667%{transform:scale(1,1);}100%{transform:scale(1,1);}"
23
- }),
24
- scale2: /*#__PURE__*/ (0, $dzcjh$keyframes)({
25
- name: "1b94qny",
26
- styles: "0%{transform:scale(1,1);}13.333333%{transform:scale(1,1);}20%{transform:scale(1.5,0.5);}26.666667%{transform:scale(1,1);}40%{transform:scale(1,1);}46.666667%{transform:scale(1,1);}53.333333%{transform:scale(1,1);}66.666667%{transform:scale(1,1);}73.333333%{transform:scale(1.5,0.5);}80%{transform:scale(1,1);}100%{transform:scale(1,1);}"
27
- }),
28
- scale3: /*#__PURE__*/ (0, $dzcjh$keyframes)({
29
- name: "1q9z2j0",
30
- styles: "0%{transform:scale(1,1);}26.666667%{transform:scale(1,1);}33.333333%{transform:scale(1.5,0.5);}40%{transform:scale(1,1);}53.333333%{transform:scale(1,1);}60%{transform:scale(1,1);}66.666667%{transform:scale(1,1);}80%{transform:scale(1,1);}86.666667%{transform:scale(1.5,0.5);}93.333333%{transform:scale(1,1);}100%{transform:scale(1,1);}"
31
- }),
32
- translate1: /*#__PURE__*/ (0, $dzcjh$keyframes)({
33
- name: "piqegj",
34
- styles: "0%{transform:translate(10px,33.528168px);}6.666667%{transform:translate(10px,41.764084px);}13.333333%{transform:translate(10px,33.528168px);}26.666667%{transform:translate(10px,-2.651608px);}33.333333%{transform:translate(10px,-4.471832px);}40%{transform:translate(10px,-2.651608px);}53.333333%{transform:translate(10px,33.528168px);}60%{transform:translate(10px,41.764084px);}66.666667%{transform:translate(10px,33.528168px);}100%{transform:translate(10px,33.528168px);}"
35
- }),
36
- translate2: /*#__PURE__*/ (0, $dzcjh$keyframes)({
37
- name: "1tc59mm",
38
- styles: "0%{transform:translate(30px,33.528168px);}13.333333%{transform:translate(30px,33.528168px);}20%{transform:translate(30px,41.764084px);}26.666667%{transform:translate(30px,33.528168px);}40%{transform:translate(30px,-2.651608px);}46.666667%{transform:translate(30px,-4.471832px);}53.333333%{transform:translate(30px,-2.651608px);}66.666667%{transform:translate(30px,33.528168px);}73.333333%{transform:translate(30px,41.764084px);}80%{transform:translate(30px,33.528168px);}100%{transform:translate(30px,33.528168px);}"
39
- }),
40
- translate3: /*#__PURE__*/ (0, $dzcjh$keyframes)({
41
- name: "21uo4u",
42
- styles: "0%{transform:translate(50px,33.528168px);}26.666667%{transform:translate(50px,33.528168px);}33.333333%{transform:translate(50px,41.764084px);}40%{transform:translate(50px,33.528168px);}53.333333%{transform:translate(50px,-2.651608px);}60%{transform:translate(50px,-4.471832px);}66.666667%{transform:translate(50px,-2.651608px);}80%{transform:translate(50px,33.528168px);}86.666667%{transform:translate(50px,41.764084px);}93.333333%{transform:translate(50px,33.528168px);}100%{transform:translate(50px,33.528168px);}"
43
- })
44
- };
45
- return {
46
- root: (props)=>/*#__PURE__*/ (0, $dzcjh$css)({
47
- height: props.customSize ? `${props.customSize}px` : undefined,
48
- verticalAlign: "middle",
49
- width: props.customSize ? `${props.customSize}px` : $d9f7c1001d753182$var$sizes[props.size]
50
- }),
51
- circle1Scale: /*#__PURE__*/ (0, $dzcjh$css)({
52
- animation: `${animations.scale1} 1s linear infinite normal forwards;`
53
- }),
54
- circle2Scale: /*#__PURE__*/ (0, $dzcjh$css)({
55
- animation: `${animations.scale2} 1s linear infinite normal forwards;`
56
- }),
57
- circle3Scale: /*#__PURE__*/ (0, $dzcjh$css)({
58
- animation: `${animations.scale3} 1s linear infinite normal forwards;`
59
- }),
60
- circle1Translate: /*#__PURE__*/ (0, $dzcjh$css)({
61
- animation: `${animations.translate1} 1s linear infinite normal forwards;`
62
- }),
63
- circle2Translate: /*#__PURE__*/ (0, $dzcjh$css)({
64
- animation: `${animations.translate2} 1s linear infinite normal forwards;`
65
- }),
66
- circle3Translate: /*#__PURE__*/ (0, $dzcjh$css)({
67
- animation: `${animations.translate3} 1s linear infinite normal forwards;`
68
- })
69
- };
70
- };
71
-
72
-
73
- const $e780e5d24bf8af61$var$SPINNER_DEFAULT_TAG = "div";
74
- const $e780e5d24bf8af61$var$variants = {
75
- default: (0, $dzcjh$contentfulf36tokens).gray700,
76
- primary: (0, $dzcjh$contentfulf36tokens).colorPrimary,
77
- white: (0, $dzcjh$contentfulf36tokens).colorWhite
78
- };
79
- const $e780e5d24bf8af61$export$7f7cbe89f1eacd2 = /*#__PURE__*/ (0, $dzcjh$forwardRef)(({ className: className , customSize: customSize , size: size = "medium" , variant: variant = "default" , testId: testId = "cf-ui-spinner" , ...otherProps }, forwardedRef)=>{
80
- const styles = (0, $d9f7c1001d753182$export$ffd58b7f6f099a57)();
81
- return /*#__PURE__*/ (0, $dzcjh$react).createElement((0, $dzcjh$Box), {
82
- as: $e780e5d24bf8af61$var$SPINNER_DEFAULT_TAG,
83
- display: "inline-block",
84
- ...otherProps,
85
- className: (0, $dzcjh$cx)(styles.root({
86
- size: size,
87
- customSize: customSize
88
- }), className),
89
- ref: forwardedRef,
90
- testId: testId
91
- }, /*#__PURE__*/ (0, $dzcjh$react).createElement("svg", {
92
- className: (0, $dzcjh$css)({
93
- display: "block",
94
- fill: $e780e5d24bf8af61$var$variants[variant]
95
- }),
96
- viewBox: "0 0 60 51",
97
- xmlns: "http://www.w3.org/2000/svg"
98
- }, /*#__PURE__*/ (0, $dzcjh$react).createElement("title", null, "Loading\u2026"), /*#__PURE__*/ (0, $dzcjh$react).createElement("g", {
99
- className: styles.circle1Translate,
100
- transform: "translate(10,33.528168)"
101
- }, /*#__PURE__*/ (0, $dzcjh$react).createElement("g", {
102
- className: styles.circle1Scale
103
- }, /*#__PURE__*/ (0, $dzcjh$react).createElement("circle", {
104
- r: "6",
105
- transform: "translate(0,10.471832)"
106
- }))), /*#__PURE__*/ (0, $dzcjh$react).createElement("g", {
107
- className: styles.circle2Translate,
108
- transform: "translate(30,33.528168)"
109
- }, /*#__PURE__*/ (0, $dzcjh$react).createElement("g", {
110
- className: styles.circle2Scale
111
- }, /*#__PURE__*/ (0, $dzcjh$react).createElement("circle", {
112
- r: "6",
113
- transform: "translate(0,10.471832)"
114
- }))), /*#__PURE__*/ (0, $dzcjh$react).createElement("g", {
115
- className: styles.circle3Translate,
116
- transform: "translate(50,33.528168)"
117
- }, /*#__PURE__*/ (0, $dzcjh$react).createElement("g", {
118
- className: styles.circle3Scale
119
- }, /*#__PURE__*/ (0, $dzcjh$react).createElement("circle", {
120
- r: "6",
121
- transform: "translate(0,10.471832)"
122
- })))));
123
- });
124
- $e780e5d24bf8af61$export$7f7cbe89f1eacd2.displayName = "Spinner";
125
-
126
-
127
-
128
-
129
- export {$e780e5d24bf8af61$export$7f7cbe89f1eacd2 as Spinner};
130
- //# sourceMappingURL=module.js.map
package/dist/module.js.map DELETED
@@ -1 +0,0 @@
1
- {"mappings":"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","sources":["packages/components/spinner/src/index.ts","packages/components/spinner/src/Spinner.tsx","packages/components/spinner/src/Spinner.styles.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n","import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\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"],"names":["Spinner","SpinnerProps","React","forwardRef","tokens","Box","CommonProps","PropsWithHTMLElement","ExpandProps","SpinnerSize","SpinnerVariant","getStyles","SPINNER_DEFAULT_TAG","variants","default","gray700","primary","colorPrimary","white","colorWhite","SpinnerInternalProps","variant","customSize","size","HTMLDivElement","className","testId","otherProps","forwardedRef","styles","root","display","fill","circle1Translate","circle1Scale","circle2Translate","circle2Scale","circle3Translate","circle3Scale","displayName","sizes","large","medium","small","animations","scale1","scale2","scale3","translate1","translate2","translate3","props","height","undefined","verticalAlign","width","animation"],"version":3,"file":"module.js.map"}
package/dist/types.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"mappings":";;AAAA,sBAA6B,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7D,mBAA0B,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AEkBvD,4BAAmC,WAAW,GAAG;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,2BAA2B,qBAAqB,oBAAoB,EAAE,KAAK,CAAC,CAAC;AAE7E,OAAO,MAAM;IAjBX;;OAEG;cACO,cAAc;IACxB;;OAEG;iBACU,MAAM;IACnB;;;OAGG;WACI,WAAW;wCAkEnB,CAAC","sources":["packages/components/spinner/src/src/types.ts","packages/components/spinner/src/src/Spinner.styles.ts","packages/components/spinner/src/src/Spinner.tsx","packages/components/spinner/src/src/index.ts","packages/components/spinner/src/index.ts"],"sourcesContent":[null,null,null,null,"export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n"],"names":[],"version":3,"file":"types.d.ts.map"}