@contentful/f36-spinner 4.14.0 → 4.16.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 (6) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/main.js +39 -40
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +39 -40
  5. package/dist/module.js.map +1 -1
  6. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.16.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies []:
8
+ - @contentful/f36-core@4.16.0
9
+
10
+ ## 4.15.1
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies []:
15
+ - @contentful/f36-core@4.15.1
16
+
17
+ ## 4.15.0
18
+
19
+ ### Patch Changes
20
+
21
+ - Updated dependencies []:
22
+ - @contentful/f36-core@4.15.0
23
+
3
24
  ## 4.14.0
4
25
 
5
26
  ### Patch Changes
package/dist/main.js CHANGED
@@ -19,118 +19,117 @@ $parcel$export(module.exports, "Spinner", () => $05c01a9aaed28186$export$7f7cbe8
19
19
 
20
20
 
21
21
  const $ccc4b2a72ca993e7$var$sizes = {
22
- large: '36px',
23
- medium: '20px',
24
- small: '14px'
22
+ large: "36px",
23
+ medium: "20px",
24
+ small: "14px"
25
25
  };
26
26
  const $ccc4b2a72ca993e7$export$ffd58b7f6f099a57 = ()=>{
27
27
  const animations = {
28
- scale1: /*#__PURE__*/ $b84Wv$emotion.keyframes({
28
+ scale1: /*#__PURE__*/ (0, $b84Wv$emotion.keyframes)({
29
29
  name: "2hhwgy",
30
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
31
  }),
32
- scale2: /*#__PURE__*/ $b84Wv$emotion.keyframes({
32
+ scale2: /*#__PURE__*/ (0, $b84Wv$emotion.keyframes)({
33
33
  name: "1b94qny",
34
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
35
  }),
36
- scale3: /*#__PURE__*/ $b84Wv$emotion.keyframes({
36
+ scale3: /*#__PURE__*/ (0, $b84Wv$emotion.keyframes)({
37
37
  name: "1q9z2j0",
38
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
39
  }),
40
- translate1: /*#__PURE__*/ $b84Wv$emotion.keyframes({
40
+ translate1: /*#__PURE__*/ (0, $b84Wv$emotion.keyframes)({
41
41
  name: "piqegj",
42
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
43
  }),
44
- translate2: /*#__PURE__*/ $b84Wv$emotion.keyframes({
44
+ translate2: /*#__PURE__*/ (0, $b84Wv$emotion.keyframes)({
45
45
  name: "1tc59mm",
46
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
47
  }),
48
- translate3: /*#__PURE__*/ $b84Wv$emotion.keyframes({
48
+ translate3: /*#__PURE__*/ (0, $b84Wv$emotion.keyframes)({
49
49
  name: "21uo4u",
50
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
51
  })
52
52
  };
53
53
  return {
54
- root: (props)=>/*#__PURE__*/ $b84Wv$emotion.css({
54
+ root: (props)=>/*#__PURE__*/ (0, $b84Wv$emotion.css)({
55
55
  height: props.customSize ? `${props.customSize}px` : undefined,
56
- verticalAlign: 'middle',
56
+ verticalAlign: "middle",
57
57
  width: props.customSize ? `${props.customSize}px` : $ccc4b2a72ca993e7$var$sizes[props.size]
58
- })
59
- ,
60
- circle1Scale: /*#__PURE__*/ $b84Wv$emotion.css({
58
+ }),
59
+ circle1Scale: /*#__PURE__*/ (0, $b84Wv$emotion.css)({
61
60
  animation: `${animations.scale1} 1s linear infinite normal forwards;`
62
61
  }),
63
- circle2Scale: /*#__PURE__*/ $b84Wv$emotion.css({
62
+ circle2Scale: /*#__PURE__*/ (0, $b84Wv$emotion.css)({
64
63
  animation: `${animations.scale2} 1s linear infinite normal forwards;`
65
64
  }),
66
- circle3Scale: /*#__PURE__*/ $b84Wv$emotion.css({
65
+ circle3Scale: /*#__PURE__*/ (0, $b84Wv$emotion.css)({
67
66
  animation: `${animations.scale3} 1s linear infinite normal forwards;`
68
67
  }),
69
- circle1Translate: /*#__PURE__*/ $b84Wv$emotion.css({
68
+ circle1Translate: /*#__PURE__*/ (0, $b84Wv$emotion.css)({
70
69
  animation: `${animations.translate1} 1s linear infinite normal forwards;`
71
70
  }),
72
- circle2Translate: /*#__PURE__*/ $b84Wv$emotion.css({
71
+ circle2Translate: /*#__PURE__*/ (0, $b84Wv$emotion.css)({
73
72
  animation: `${animations.translate2} 1s linear infinite normal forwards;`
74
73
  }),
75
- circle3Translate: /*#__PURE__*/ $b84Wv$emotion.css({
74
+ circle3Translate: /*#__PURE__*/ (0, $b84Wv$emotion.css)({
76
75
  animation: `${animations.translate3} 1s linear infinite normal forwards;`
77
76
  })
78
77
  };
79
78
  };
80
79
 
81
80
 
82
- const $05c01a9aaed28186$var$SPINNER_DEFAULT_TAG = 'div';
81
+ const $05c01a9aaed28186$var$SPINNER_DEFAULT_TAG = "div";
83
82
  const $05c01a9aaed28186$var$variants = {
84
- default: ($parcel$interopDefault($b84Wv$contentfulf36tokens)).gray700,
85
- primary: ($parcel$interopDefault($b84Wv$contentfulf36tokens)).colorPrimary,
86
- white: ($parcel$interopDefault($b84Wv$contentfulf36tokens)).colorWhite
83
+ default: (0, ($parcel$interopDefault($b84Wv$contentfulf36tokens))).gray700,
84
+ primary: (0, ($parcel$interopDefault($b84Wv$contentfulf36tokens))).colorPrimary,
85
+ white: (0, ($parcel$interopDefault($b84Wv$contentfulf36tokens))).colorWhite
87
86
  };
88
- const $05c01a9aaed28186$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $b84Wv$react.forwardRef(({ className: className , customSize: customSize , size: size = 'medium' , variant: variant = 'default' , testId: testId = 'cf-ui-spinner' , ...otherProps }, forwardedRef)=>{
89
- const styles = $ccc4b2a72ca993e7$export$ffd58b7f6f099a57();
90
- return /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement($b84Wv$contentfulf36core.Box, {
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), {
91
90
  as: $05c01a9aaed28186$var$SPINNER_DEFAULT_TAG,
92
91
  display: "inline-block",
93
92
  ...otherProps,
94
- className: $b84Wv$emotion.cx(styles.root({
93
+ className: (0, $b84Wv$emotion.cx)(styles.root({
95
94
  size: size,
96
95
  customSize: customSize
97
96
  }), className),
98
97
  ref: forwardedRef,
99
98
  testId: testId
100
- }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("svg", {
101
- className: $b84Wv$emotion.css({
102
- display: 'block',
99
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("svg", {
100
+ className: (0, $b84Wv$emotion.css)({
101
+ display: "block",
103
102
  fill: $05c01a9aaed28186$var$variants[variant]
104
103
  }),
105
104
  viewBox: "0 0 60 51",
106
105
  xmlns: "http://www.w3.org/2000/svg"
107
- }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("title", null, "Loading\u2026"), /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
106
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("title", null, "Loading\u2026"), /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("g", {
108
107
  className: styles.circle1Translate,
109
108
  transform: "translate(10,33.528168)"
110
- }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
109
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("g", {
111
110
  className: styles.circle1Scale
112
- }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("circle", {
111
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("circle", {
113
112
  r: "6",
114
113
  transform: "translate(0,10.471832)"
115
- }))), /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
114
+ }))), /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("g", {
116
115
  className: styles.circle2Translate,
117
116
  transform: "translate(30,33.528168)"
118
- }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
117
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("g", {
119
118
  className: styles.circle2Scale
120
- }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("circle", {
119
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("circle", {
121
120
  r: "6",
122
121
  transform: "translate(0,10.471832)"
123
- }))), /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
122
+ }))), /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("g", {
124
123
  className: styles.circle3Translate,
125
124
  transform: "translate(50,33.528168)"
126
- }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
125
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("g", {
127
126
  className: styles.circle3Scale
128
- }, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("circle", {
127
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($b84Wv$react))).createElement("circle", {
129
128
  r: "6",
130
129
  transform: "translate(0,10.471832)"
131
130
  })))));
132
131
  });
133
- $05c01a9aaed28186$export$7f7cbe89f1eacd2.displayName = 'Spinner';
132
+ $05c01a9aaed28186$export$7f7cbe89f1eacd2.displayName = "Spinner";
134
133
 
135
134
 
136
135
 
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/spinner/src/index.ts","packages/components/spinner/src/Spinner.tsx","packages/components/spinner/src/Spinner.styles.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n","import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { Box } from '@contentful/f36-core';\nimport type {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\nimport type { SpinnerSize, SpinnerVariant } from './types';\nimport { getStyles } from './Spinner.styles';\n\nconst SPINNER_DEFAULT_TAG = 'div';\n\nconst variants: { [key in SpinnerVariant]: string } = {\n default: tokens.gray700,\n primary: tokens.colorPrimary,\n white: tokens.colorWhite,\n};\n\nexport type SpinnerInternalProps = CommonProps & {\n /**\n * Determines the color that will be used in the `fill` property of the SVG\n */\n variant?: SpinnerVariant;\n /**\n * Allows resizing the spinner with any N value. The final size will be NxN pixels\n */\n customSize?: number;\n /**\n * Controls the size of the spinner. The default `medium` size is 20px wide,\n * the `small` size is 14px wide, and the `large` size is 36px wide\n */\n size?: SpinnerSize;\n};\n\nexport type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;\n\nexport const Spinner = forwardRef<HTMLDivElement, ExpandProps<SpinnerProps>>(\n (\n {\n className,\n customSize,\n size = 'medium',\n variant = 'default',\n testId = 'cf-ui-spinner',\n ...otherProps\n },\n forwardedRef,\n ) => {\n const styles = getStyles();\n return (\n <Box\n as={SPINNER_DEFAULT_TAG}\n display=\"inline-block\"\n {...otherProps}\n className={cx(styles.root({ size, customSize }), className)}\n ref={forwardedRef}\n testId={testId}\n >\n <svg\n className={css({\n display: 'block',\n fill: variants[variant],\n })}\n viewBox=\"0 0 60 51\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Loading…</title>\n <g\n className={styles.circle1Translate}\n transform=\"translate(10,33.528168)\"\n >\n <g className={styles.circle1Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n\n <g\n className={styles.circle2Translate}\n transform=\"translate(30,33.528168)\"\n >\n <g className={styles.circle2Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n\n <g\n className={styles.circle3Translate}\n transform=\"translate(50,33.528168)\"\n >\n <g className={styles.circle3Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n </svg>\n </Box>\n );\n },\n);\n\nSpinner.displayName = 'Spinner';\n","import { css, keyframes } from 'emotion';\nimport type { SpinnerSize } from './types';\n\nconst sizes: { [key in SpinnerSize]: string } = {\n large: '36px',\n medium: '20px',\n small: '14px',\n};\n\nexport const getStyles = () => {\n const animations = {\n scale1: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 6.666667% {\n transform: scale(1.5, 0.5);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1.5, 0.5);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale2: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 20% {\n transform: scale(1.5, 0.5);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 46.666667% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 73.333333% {\n transform: scale(1.5, 0.5);\n }\n 80% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale3: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1.5, 0.5);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 80% {\n transform: scale(1, 1);\n }\n 86.666667% {\n transform: scale(1.5, 0.5);\n }\n 93.333333% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n translate1: keyframes`\n 0% {\n transform: translate(10px, 33.528168px);\n }\n 6.666667% {\n transform: translate(10px, 41.764084px);\n }\n 13.333333% {\n transform: translate(10px, 33.528168px);\n }\n 26.666667% {\n transform: translate(10px, -2.651608px);\n }\n 33.333333% {\n transform: translate(10px, -4.471832px);\n }\n 40% {\n transform: translate(10px, -2.651608px);\n }\n 53.333333% {\n transform: translate(10px, 33.528168px);\n }\n 60% {\n transform: translate(10px, 41.764084px);\n }\n 66.666667% {\n transform: translate(10px, 33.528168px);\n }\n 100% {\n transform: translate(10px, 33.528168px);\n }\n `,\n translate2: keyframes`\n 0% {\n transform: translate(30px, 33.528168px);\n }\n 13.333333% {\n transform: translate(30px, 33.528168px);\n }\n 20% {\n transform: translate(30px, 41.764084px);\n }\n 26.666667% {\n transform: translate(30px, 33.528168px);\n }\n 40% {\n transform: translate(30px, -2.651608px);\n }\n 46.666667% {\n transform: translate(30px, -4.471832px);\n }\n 53.333333% {\n transform: translate(30px, -2.651608px);\n }\n 66.666667% {\n transform: translate(30px, 33.528168px);\n }\n 73.333333% {\n transform: translate(30px, 41.764084px);\n }\n 80% {\n transform: translate(30px, 33.528168px);\n }\n 100% {\n transform: translate(30px, 33.528168px);\n }\n `,\n translate3: keyframes`\n 0% {\n transform: translate(50px, 33.528168px);\n }\n 26.666667% {\n transform: translate(50px, 33.528168px);\n }\n 33.333333% {\n transform: translate(50px, 41.764084px);\n }\n 40% {\n transform: translate(50px, 33.528168px);\n }\n 53.333333% {\n transform: translate(50px, -2.651608px);\n }\n 60% {\n transform: translate(50px, -4.471832px);\n }\n 66.666667% {\n transform: translate(50px, -2.651608px);\n }\n 80% {\n transform: translate(50px, 33.528168px);\n }\n 86.666667% {\n transform: translate(50px, 41.764084px);\n }\n 93.333333% {\n transform: translate(50px, 33.528168px);\n }\n 100% {\n transform: translate(50px, 33.528168px);\n }\n `,\n };\n\n return {\n root: (props: { size: SpinnerSize; customSize?: number }) =>\n css({\n height: props.customSize ? `${props.customSize}px` : undefined,\n verticalAlign: 'middle',\n width: props.customSize ? `${props.customSize}px` : sizes[props.size],\n }),\n circle1Scale: css({\n animation: `${animations.scale1} 1s linear infinite normal forwards;`,\n }),\n circle2Scale: css({\n animation: `${animations.scale2} 1s linear infinite normal forwards;`,\n }),\n circle3Scale: css({\n animation: `${animations.scale3} 1s linear infinite normal forwards;`,\n }),\n circle1Translate: css({\n animation: `${animations.translate1} 1s linear infinite normal forwards;`,\n }),\n circle2Translate: css({\n animation: `${animations.translate2} 1s linear infinite normal forwards;`,\n }),\n circle3Translate: css({\n animation: `${animations.translate3} 1s linear infinite normal forwards;`,\n }),\n };\n};\n"],"names":["Spinner","SpinnerProps","React","forwardRef","tokens","Box","CommonProps","PropsWithHTMLElement","ExpandProps","SpinnerSize","SpinnerVariant","getStyles","SPINNER_DEFAULT_TAG","variants","default","gray700","primary","colorPrimary","white","colorWhite","SpinnerInternalProps","variant","customSize","size","HTMLDivElement","className","testId","otherProps","forwardedRef","styles","root","display","fill","circle1Translate","circle1Scale","circle2Translate","circle2Scale","circle3Translate","circle3Scale","displayName","sizes","large","medium","small","animations","scale1","scale2","scale3","translate1","translate2","translate3","props","height","undefined","verticalAlign","width","animation"],"version":3,"file":"main.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;A;;;;;A;;AEGA,MAAMwC,2BAAK,GAAqC;IAC9CC,KAAK,EAAE,MADuC;IAE9CC,MAAM,EAAE,MAFsC;IAG9CC,KAAK,EAAE,MAAPA;CAHF,AAAgD;AAMzC,MAAMhC,yCAAS,GAAG,IAAM;IAC7B,MAAMiC,UAAU,GAAG;QACjBC,MAAM,EAANA,aAAAA,CAAAA,CAAAA,GAAAA,wBAAAA,CAAAA,CAAAA;YAAM,IAAA,EAAA,QAAA;YAAA,MAAA,EAAA,uTAAA;SAAA,CADW;QAiCjBC,MAAM,EAANA,aAAAA,CAAAA,CAAAA,GAAAA,wBAAAA,CAAAA,CAAAA;YAAM,IAAA,EAAA,SAAA;YAAA,MAAA,EAAA,kVAAA;SAAA,CAjCW;QAoEjBC,MAAM,EAANA,aAAAA,CAAAA,CAAAA,GAAAA,wBAAAA,CAAAA,CAAAA;YAAM,IAAA,EAAA,SAAA;YAAA,MAAA,EAAA,kVAAA;SAAA,CApEW;QAuGjBC,UAAU,EAAVA,aAAAA,CAAAA,CAAAA,GAAAA,wBAAAA,CAAAA,CAAAA;YAAU,IAAA,EAAA,QAAA;YAAA,MAAA,EAAA,ydAAA;SAAA,CAvGO;QAuIjBC,UAAU,EAAVA,aAAAA,CAAAA,CAAAA,GAAAA,wBAAAA,CAAAA,CAAAA;YAAU,IAAA,EAAA,SAAA;YAAA,MAAA,EAAA,qgBAAA;SAAA,CAvIO;QA0KjBC,UAAU,EAAVA,aAAAA,CAAAA,CAAAA,GAAAA,wBAAAA,CAAAA,CAAAA;YAAU,IAAA,EAAA,QAAA;YAAA,MAAA,EAAA,qgBAAA;SAAA,CAAA;KA1KZ,AAAmB;IA+MnB,OAAO;QACLpB,IAAI,EAAE,CAACqB,KAAD,GAAA,aACJ,CAAA,CAAA,GAAA,kBAAA,CAAA,CAAI;gBACFC,MAAM,EAAED,KAAK,CAAC7B,UAAN,GAAoB,CAAA,EAAE6B,KAAK,CAAC7B,UAAW,CAAA,EAAA,CAAvC,GAA6C+B,SADnD;gBAEFC,aAAa,EAAE,QAFb;gBAGFC,KAAK,EAAEJ,KAAK,CAAC7B,UAAN,GAAoB,CAAA,EAAE6B,KAAK,CAAC7B,UAAW,CAAA,EAAA,CAAvC,GAA6CkB,2BAAK,CAACW,KAAK,CAAC5B,IAAP,CAAzDgC;aAHF,CAFG;QAOLrB,YAAY,EAAA,aAAE,CAAA,CAAA,GAAA,kBAAA,CAAA,CAAI;YAChBsB,SAAS,EAAG,CAAA,EAAEZ,UAAU,CAACC,MAAO,CAAhCW,oCAAAA,CAAAA;SADY,CAPT;QAULpB,YAAY,EAAA,aAAE,CAAA,CAAA,GAAA,kBAAA,CAAA,CAAI;YAChBoB,SAAS,EAAG,CAAA,EAAEZ,UAAU,CAACE,MAAO,CAAhCU,oCAAAA,CAAAA;SADY,CAVT;QAaLlB,YAAY,EAAA,aAAE,CAAA,CAAA,GAAA,kBAAA,CAAA,CAAI;YAChBkB,SAAS,EAAG,CAAA,EAAEZ,UAAU,CAACG,MAAO,CAAhCS,oCAAAA,CAAAA;SADY,CAbT;QAgBLvB,gBAAgB,EAAA,aAAE,CAAA,CAAA,GAAA,kBAAA,CAAA,CAAI;YACpBuB,SAAS,EAAG,CAAA,EAAEZ,UAAU,CAACI,UAAW,CAApCQ,oCAAAA,CAAAA;SADgB,CAhBb;QAmBLrB,gBAAgB,EAAA,aAAE,CAAA,CAAA,GAAA,kBAAA,CAAA,CAAI;YACpBqB,SAAS,EAAG,CAAA,EAAEZ,UAAU,CAACK,UAAW,CAApCO,oCAAAA,CAAAA;SADgB,CAnBb;QAsBLnB,gBAAgB,EAAA,aAAE,CAAA,CAAA,GAAA,kBAAA,CAAA,CAAI;YACpBmB,SAAS,EAAG,CAAA,EAAEZ,UAAU,CAACM,UAAW,CAApCM,oCAAAA,CAAAA;SADgB,CAAI;KAtBxB,CAAO;CAhNF,AA0ON;;;ADvOD,MAAM5C,yCAAmB,GAAG,KAA5B,AAAA;AAEA,MAAMC,8BAAQ,GAAwC;IACpDC,OAAO,EAAEV,CAAAA,GAAAA,oDAAM,CAAA,CAACW,OADoC;IAEpDC,OAAO,EAAEZ,CAAAA,GAAAA,oDAAM,CAAA,CAACa,YAFoC;IAGpDC,KAAK,EAAEd,CAAAA,GAAAA,oDAAM,CAAA,CAACe,UAAdD;CAHF,AAAsD;AAwB/C,MAAMlB,wCAAO,iBAAGG,CAAAA,GAAAA,uBAAU,CAAA,CAC/B,CACE,aACEsB,SADF,CAAA,cAEEH,UAFF,CAAA,QAGEC,IAAI,GAAG,QAHT,YAIEF,OAAO,GAAG,SAJZ,WAKEK,MAAM,GAAG,eALX,GAME,GAAGC,UAAH,EAPJ,EASEC,YATF,GAUK;IACH,MAAMC,MAAM,GAAGlB,CAAAA,GAAAA,yCAAS,CAAA,EAAxB,AAAA;IACA,qBACE,0DAAC,CAAA,GAAA,4BAAD,CAAA;QACE,EAAA,EAAIC,yCAAD;QACH,OAAA,EAAQ,cAFV;QAGE,GAAIe,UAAJ;QACA,SAAA,EAAW,CAAA,GAAA,iBAAA,CAAA,CAAGE,MAAM,CAACC,IAAP,CAAY;kBAAEP,IAAF;wBAAQD,UAAAA;SAApB,CAAH,EAAsCG,SAAtC,CAAD;QACV,GAAA,EAAKG,YAAD;QACJ,MAAA,EAAQF,MAAD;qBAEP,0DAAC,KAAD;QACE,SAAA,EAAW,CAAA,GAAA,kBAAA,CAAA,CAAI;YACbK,OAAO,EAAE,OADI;YAEbC,IAAI,EAAEnB,8BAAQ,CAACQ,OAAD,CAAdW;SAFS,CAAD;QAIV,OAAA,EAAQ,WALV;QAME,KAAA,EAAM,4BANR;qBAQE,0DAAC,OAAD,QAAO,eAAQ,CAAzB,gBACU,0DAAC,GAAD;QACE,SAAA,EAAWH,MAAM,CAACI,gBAAR;QACV,SAAA,EAAU,yBAFZ;qBAIE,0DAAC,GAAD;QAAG,SAAA,EAAWJ,MAAM,CAACK,YAAR;qBACX,0DAAC,QAAD;QAAQ,CAAA,EAAE,GAAV;QAAc,SAAA,EAAU,wBAAxB;MAAd,CACA,CACA,gBAEU,0DAAC,GAAD;QACE,SAAA,EAAWL,MAAM,CAACM,gBAAR;QACV,SAAA,EAAU,yBAFZ;qBAIE,0DAAC,GAAD;QAAG,SAAA,EAAWN,MAAM,CAACO,YAAR;qBACX,0DAAC,QAAD;QAAQ,CAAA,EAAE,GAAV;QAAc,SAAA,EAAU,wBAAxB;MAAd,CACA,CACA,gBAEU,0DAAC,GAAD;QACE,SAAA,EAAWP,MAAM,CAACQ,gBAAR;QACV,SAAA,EAAU,yBAFZ;qBAIE,0DAAC,GAAD;QAAG,SAAA,EAAWR,MAAM,CAACS,YAAR;qBACX,0DAAC,QAAD;QAAQ,CAAA,EAAE,GAAV;QAAc,SAAA,EAAU,wBAAxB;MAAd,CACA,CACA,CACA,CA5CI,CA6CJ;CA1DiC,CAA1B,AA4DJ;AAGHtC,wCAAO,CAACuC,WAAR,GAAsB,SAAtB,CAAAvC;;ADrGA","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 CHANGED
@@ -11,118 +11,117 @@ import {Box as $dzcjh$Box} from "@contentful/f36-core";
11
11
 
12
12
 
13
13
  const $d9f7c1001d753182$var$sizes = {
14
- large: '36px',
15
- medium: '20px',
16
- small: '14px'
14
+ large: "36px",
15
+ medium: "20px",
16
+ small: "14px"
17
17
  };
18
18
  const $d9f7c1001d753182$export$ffd58b7f6f099a57 = ()=>{
19
19
  const animations = {
20
- scale1: /*#__PURE__*/ $dzcjh$keyframes({
20
+ scale1: /*#__PURE__*/ (0, $dzcjh$keyframes)({
21
21
  name: "2hhwgy",
22
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
23
  }),
24
- scale2: /*#__PURE__*/ $dzcjh$keyframes({
24
+ scale2: /*#__PURE__*/ (0, $dzcjh$keyframes)({
25
25
  name: "1b94qny",
26
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
27
  }),
28
- scale3: /*#__PURE__*/ $dzcjh$keyframes({
28
+ scale3: /*#__PURE__*/ (0, $dzcjh$keyframes)({
29
29
  name: "1q9z2j0",
30
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
31
  }),
32
- translate1: /*#__PURE__*/ $dzcjh$keyframes({
32
+ translate1: /*#__PURE__*/ (0, $dzcjh$keyframes)({
33
33
  name: "piqegj",
34
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
35
  }),
36
- translate2: /*#__PURE__*/ $dzcjh$keyframes({
36
+ translate2: /*#__PURE__*/ (0, $dzcjh$keyframes)({
37
37
  name: "1tc59mm",
38
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
39
  }),
40
- translate3: /*#__PURE__*/ $dzcjh$keyframes({
40
+ translate3: /*#__PURE__*/ (0, $dzcjh$keyframes)({
41
41
  name: "21uo4u",
42
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
43
  })
44
44
  };
45
45
  return {
46
- root: (props)=>/*#__PURE__*/ $dzcjh$css({
46
+ root: (props)=>/*#__PURE__*/ (0, $dzcjh$css)({
47
47
  height: props.customSize ? `${props.customSize}px` : undefined,
48
- verticalAlign: 'middle',
48
+ verticalAlign: "middle",
49
49
  width: props.customSize ? `${props.customSize}px` : $d9f7c1001d753182$var$sizes[props.size]
50
- })
51
- ,
52
- circle1Scale: /*#__PURE__*/ $dzcjh$css({
50
+ }),
51
+ circle1Scale: /*#__PURE__*/ (0, $dzcjh$css)({
53
52
  animation: `${animations.scale1} 1s linear infinite normal forwards;`
54
53
  }),
55
- circle2Scale: /*#__PURE__*/ $dzcjh$css({
54
+ circle2Scale: /*#__PURE__*/ (0, $dzcjh$css)({
56
55
  animation: `${animations.scale2} 1s linear infinite normal forwards;`
57
56
  }),
58
- circle3Scale: /*#__PURE__*/ $dzcjh$css({
57
+ circle3Scale: /*#__PURE__*/ (0, $dzcjh$css)({
59
58
  animation: `${animations.scale3} 1s linear infinite normal forwards;`
60
59
  }),
61
- circle1Translate: /*#__PURE__*/ $dzcjh$css({
60
+ circle1Translate: /*#__PURE__*/ (0, $dzcjh$css)({
62
61
  animation: `${animations.translate1} 1s linear infinite normal forwards;`
63
62
  }),
64
- circle2Translate: /*#__PURE__*/ $dzcjh$css({
63
+ circle2Translate: /*#__PURE__*/ (0, $dzcjh$css)({
65
64
  animation: `${animations.translate2} 1s linear infinite normal forwards;`
66
65
  }),
67
- circle3Translate: /*#__PURE__*/ $dzcjh$css({
66
+ circle3Translate: /*#__PURE__*/ (0, $dzcjh$css)({
68
67
  animation: `${animations.translate3} 1s linear infinite normal forwards;`
69
68
  })
70
69
  };
71
70
  };
72
71
 
73
72
 
74
- const $e780e5d24bf8af61$var$SPINNER_DEFAULT_TAG = 'div';
73
+ const $e780e5d24bf8af61$var$SPINNER_DEFAULT_TAG = "div";
75
74
  const $e780e5d24bf8af61$var$variants = {
76
- default: $dzcjh$contentfulf36tokens.gray700,
77
- primary: $dzcjh$contentfulf36tokens.colorPrimary,
78
- white: $dzcjh$contentfulf36tokens.colorWhite
75
+ default: (0, $dzcjh$contentfulf36tokens).gray700,
76
+ primary: (0, $dzcjh$contentfulf36tokens).colorPrimary,
77
+ white: (0, $dzcjh$contentfulf36tokens).colorWhite
79
78
  };
80
- const $e780e5d24bf8af61$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $dzcjh$forwardRef(({ className: className , customSize: customSize , size: size = 'medium' , variant: variant = 'default' , testId: testId = 'cf-ui-spinner' , ...otherProps }, forwardedRef)=>{
81
- const styles = $d9f7c1001d753182$export$ffd58b7f6f099a57();
82
- return /*#__PURE__*/ $dzcjh$react.createElement($dzcjh$Box, {
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), {
83
82
  as: $e780e5d24bf8af61$var$SPINNER_DEFAULT_TAG,
84
83
  display: "inline-block",
85
84
  ...otherProps,
86
- className: $dzcjh$cx(styles.root({
85
+ className: (0, $dzcjh$cx)(styles.root({
87
86
  size: size,
88
87
  customSize: customSize
89
88
  }), className),
90
89
  ref: forwardedRef,
91
90
  testId: testId
92
- }, /*#__PURE__*/ $dzcjh$react.createElement("svg", {
93
- className: $dzcjh$css({
94
- display: 'block',
91
+ }, /*#__PURE__*/ (0, $dzcjh$react).createElement("svg", {
92
+ className: (0, $dzcjh$css)({
93
+ display: "block",
95
94
  fill: $e780e5d24bf8af61$var$variants[variant]
96
95
  }),
97
96
  viewBox: "0 0 60 51",
98
97
  xmlns: "http://www.w3.org/2000/svg"
99
- }, /*#__PURE__*/ $dzcjh$react.createElement("title", null, "Loading\u2026"), /*#__PURE__*/ $dzcjh$react.createElement("g", {
98
+ }, /*#__PURE__*/ (0, $dzcjh$react).createElement("title", null, "Loading\u2026"), /*#__PURE__*/ (0, $dzcjh$react).createElement("g", {
100
99
  className: styles.circle1Translate,
101
100
  transform: "translate(10,33.528168)"
102
- }, /*#__PURE__*/ $dzcjh$react.createElement("g", {
101
+ }, /*#__PURE__*/ (0, $dzcjh$react).createElement("g", {
103
102
  className: styles.circle1Scale
104
- }, /*#__PURE__*/ $dzcjh$react.createElement("circle", {
103
+ }, /*#__PURE__*/ (0, $dzcjh$react).createElement("circle", {
105
104
  r: "6",
106
105
  transform: "translate(0,10.471832)"
107
- }))), /*#__PURE__*/ $dzcjh$react.createElement("g", {
106
+ }))), /*#__PURE__*/ (0, $dzcjh$react).createElement("g", {
108
107
  className: styles.circle2Translate,
109
108
  transform: "translate(30,33.528168)"
110
- }, /*#__PURE__*/ $dzcjh$react.createElement("g", {
109
+ }, /*#__PURE__*/ (0, $dzcjh$react).createElement("g", {
111
110
  className: styles.circle2Scale
112
- }, /*#__PURE__*/ $dzcjh$react.createElement("circle", {
111
+ }, /*#__PURE__*/ (0, $dzcjh$react).createElement("circle", {
113
112
  r: "6",
114
113
  transform: "translate(0,10.471832)"
115
- }))), /*#__PURE__*/ $dzcjh$react.createElement("g", {
114
+ }))), /*#__PURE__*/ (0, $dzcjh$react).createElement("g", {
116
115
  className: styles.circle3Translate,
117
116
  transform: "translate(50,33.528168)"
118
- }, /*#__PURE__*/ $dzcjh$react.createElement("g", {
117
+ }, /*#__PURE__*/ (0, $dzcjh$react).createElement("g", {
119
118
  className: styles.circle3Scale
120
- }, /*#__PURE__*/ $dzcjh$react.createElement("circle", {
119
+ }, /*#__PURE__*/ (0, $dzcjh$react).createElement("circle", {
121
120
  r: "6",
122
121
  transform: "translate(0,10.471832)"
123
122
  })))));
124
123
  });
125
- $e780e5d24bf8af61$export$7f7cbe89f1eacd2.displayName = 'Spinner';
124
+ $e780e5d24bf8af61$export$7f7cbe89f1eacd2.displayName = "Spinner";
126
125
 
127
126
 
128
127
 
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/spinner/src/index.ts","packages/components/spinner/src/Spinner.tsx","packages/components/spinner/src/Spinner.styles.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n","import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { Box } from '@contentful/f36-core';\nimport type {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\nimport type { SpinnerSize, SpinnerVariant } from './types';\nimport { getStyles } from './Spinner.styles';\n\nconst SPINNER_DEFAULT_TAG = 'div';\n\nconst variants: { [key in SpinnerVariant]: string } = {\n default: tokens.gray700,\n primary: tokens.colorPrimary,\n white: tokens.colorWhite,\n};\n\nexport type SpinnerInternalProps = CommonProps & {\n /**\n * Determines the color that will be used in the `fill` property of the SVG\n */\n variant?: SpinnerVariant;\n /**\n * Allows resizing the spinner with any N value. The final size will be NxN pixels\n */\n customSize?: number;\n /**\n * Controls the size of the spinner. The default `medium` size is 20px wide,\n * the `small` size is 14px wide, and the `large` size is 36px wide\n */\n size?: SpinnerSize;\n};\n\nexport type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;\n\nexport const Spinner = forwardRef<HTMLDivElement, ExpandProps<SpinnerProps>>(\n (\n {\n className,\n customSize,\n size = 'medium',\n variant = 'default',\n testId = 'cf-ui-spinner',\n ...otherProps\n },\n forwardedRef,\n ) => {\n const styles = getStyles();\n return (\n <Box\n as={SPINNER_DEFAULT_TAG}\n display=\"inline-block\"\n {...otherProps}\n className={cx(styles.root({ size, customSize }), className)}\n ref={forwardedRef}\n testId={testId}\n >\n <svg\n className={css({\n display: 'block',\n fill: variants[variant],\n })}\n viewBox=\"0 0 60 51\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Loading…</title>\n <g\n className={styles.circle1Translate}\n transform=\"translate(10,33.528168)\"\n >\n <g className={styles.circle1Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n\n <g\n className={styles.circle2Translate}\n transform=\"translate(30,33.528168)\"\n >\n <g className={styles.circle2Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n\n <g\n className={styles.circle3Translate}\n transform=\"translate(50,33.528168)\"\n >\n <g className={styles.circle3Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n </svg>\n </Box>\n );\n },\n);\n\nSpinner.displayName = 'Spinner';\n","import { css, keyframes } from 'emotion';\nimport type { SpinnerSize } from './types';\n\nconst sizes: { [key in SpinnerSize]: string } = {\n large: '36px',\n medium: '20px',\n small: '14px',\n};\n\nexport const getStyles = () => {\n const animations = {\n scale1: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 6.666667% {\n transform: scale(1.5, 0.5);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1.5, 0.5);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale2: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 20% {\n transform: scale(1.5, 0.5);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 46.666667% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 73.333333% {\n transform: scale(1.5, 0.5);\n }\n 80% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale3: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1.5, 0.5);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 80% {\n transform: scale(1, 1);\n }\n 86.666667% {\n transform: scale(1.5, 0.5);\n }\n 93.333333% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n translate1: keyframes`\n 0% {\n transform: translate(10px, 33.528168px);\n }\n 6.666667% {\n transform: translate(10px, 41.764084px);\n }\n 13.333333% {\n transform: translate(10px, 33.528168px);\n }\n 26.666667% {\n transform: translate(10px, -2.651608px);\n }\n 33.333333% {\n transform: translate(10px, -4.471832px);\n }\n 40% {\n transform: translate(10px, -2.651608px);\n }\n 53.333333% {\n transform: translate(10px, 33.528168px);\n }\n 60% {\n transform: translate(10px, 41.764084px);\n }\n 66.666667% {\n transform: translate(10px, 33.528168px);\n }\n 100% {\n transform: translate(10px, 33.528168px);\n }\n `,\n translate2: keyframes`\n 0% {\n transform: translate(30px, 33.528168px);\n }\n 13.333333% {\n transform: translate(30px, 33.528168px);\n }\n 20% {\n transform: translate(30px, 41.764084px);\n }\n 26.666667% {\n transform: translate(30px, 33.528168px);\n }\n 40% {\n transform: translate(30px, -2.651608px);\n }\n 46.666667% {\n transform: translate(30px, -4.471832px);\n }\n 53.333333% {\n transform: translate(30px, -2.651608px);\n }\n 66.666667% {\n transform: translate(30px, 33.528168px);\n }\n 73.333333% {\n transform: translate(30px, 41.764084px);\n }\n 80% {\n transform: translate(30px, 33.528168px);\n }\n 100% {\n transform: translate(30px, 33.528168px);\n }\n `,\n translate3: keyframes`\n 0% {\n transform: translate(50px, 33.528168px);\n }\n 26.666667% {\n transform: translate(50px, 33.528168px);\n }\n 33.333333% {\n transform: translate(50px, 41.764084px);\n }\n 40% {\n transform: translate(50px, 33.528168px);\n }\n 53.333333% {\n transform: translate(50px, -2.651608px);\n }\n 60% {\n transform: translate(50px, -4.471832px);\n }\n 66.666667% {\n transform: translate(50px, -2.651608px);\n }\n 80% {\n transform: translate(50px, 33.528168px);\n }\n 86.666667% {\n transform: translate(50px, 41.764084px);\n }\n 93.333333% {\n transform: translate(50px, 33.528168px);\n }\n 100% {\n transform: translate(50px, 33.528168px);\n }\n `,\n };\n\n return {\n root: (props: { size: SpinnerSize; customSize?: number }) =>\n css({\n height: props.customSize ? `${props.customSize}px` : undefined,\n verticalAlign: 'middle',\n width: props.customSize ? `${props.customSize}px` : sizes[props.size],\n }),\n circle1Scale: css({\n animation: `${animations.scale1} 1s linear infinite normal forwards;`,\n }),\n circle2Scale: css({\n animation: `${animations.scale2} 1s linear infinite normal forwards;`,\n }),\n circle3Scale: css({\n animation: `${animations.scale3} 1s linear infinite normal forwards;`,\n }),\n circle1Translate: css({\n animation: `${animations.translate1} 1s linear infinite normal forwards;`,\n }),\n circle2Translate: css({\n animation: `${animations.translate2} 1s linear infinite normal forwards;`,\n }),\n circle3Translate: css({\n animation: `${animations.translate3} 1s linear infinite normal forwards;`,\n }),\n };\n};\n"],"names":["Spinner","SpinnerProps","React","forwardRef","tokens","Box","CommonProps","PropsWithHTMLElement","ExpandProps","SpinnerSize","SpinnerVariant","getStyles","SPINNER_DEFAULT_TAG","variants","default","gray700","primary","colorPrimary","white","colorWhite","SpinnerInternalProps","variant","customSize","size","HTMLDivElement","className","testId","otherProps","forwardedRef","styles","root","display","fill","circle1Translate","circle1Scale","circle2Translate","circle2Scale","circle3Translate","circle3Scale","displayName","sizes","large","medium","small","animations","scale1","scale2","scale3","translate1","translate2","translate3","props","height","undefined","verticalAlign","width","animation"],"version":3,"file":"module.js.map"}
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/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@contentful/f36-spinner",
3
- "version": "4.14.0",
3
+ "version": "4.16.0",
4
4
  "description": "Forma 36: Spinner Component",
5
5
  "scripts": {
6
6
  "build": "parcel build src/index.ts"
7
7
  },
8
8
  "dependencies": {
9
9
  "@babel/runtime": "^7.6.2",
10
- "@contentful/f36-core": "^4.14.0",
10
+ "@contentful/f36-core": "^4.16.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.14.0"
15
+ "@contentful/f36-typography": "^4.16.0"
16
16
  },
17
17
  "peerDependencies": {
18
18
  "react": ">=16.8"