@contentful/f36-spinner 4.48.0 → 4.48.2

package/dist/esm/index.js

@@ -204,4 +204,5 @@ var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropert
   `};return {root:a=>css({height:a.customSize?`${a.customSize}px`:void 0,verticalAlign:"middle",width:a.customSize?`${a.customSize}px`:h[a.size]}),circle1Scale:css({animation:`${r.scale1} 1s linear infinite normal forwards;`}),circle2Scale:css({animation:`${r.scale2} 1s linear infinite normal forwards;`}),circle3Scale:css({animation:`${r.scale3} 1s linear infinite normal forwards;`}),circle1Translate:css({animation:`${r.translate1} 1s linear infinite normal forwards;`}),circle2Translate:css({animation:`${r.translate2} 1s linear infinite normal forwards;`}),circle3Translate:css({animation:`${r.translate3} 1s linear infinite normal forwards;`})}};var L="div",I={default:i.gray700,primary:i.blue500,white:i.colorWhite},u=forwardRef((A,P)=>{var p=A,{className:r,customSize:a,size:t="medium",variant:n="default",testId:z="cf-ui-spinner"}=p,w=g(p,["className","customSize","size","variant","testId"]);let e=y();return s.createElement(Box,d(S({as:L,display:"inline-block"},w),{className:cx(e.root({size:t,customSize:a}),r),ref:P,testId:z}),s.createElement("svg",{className:css({display:"block",fill:I[n]}),viewBox:"0 0 60 51",xmlns:"http://www.w3.org/2000/svg"},s.createElement("title",null,"Loading\u2026"),s.createElement("g",{className:e.circle1Translate,transform:"translate(10,33.528168)"},s.createElement("g",{className:e.circle1Scale},s.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s.createElement("g",{className:e.circle2Translate,transform:"translate(30,33.528168)"},s.createElement("g",{className:e.circle2Scale},s.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s.createElement("g",{className:e.circle3Translate,transform:"translate(50,33.528168)"},s.createElement("g",{className:e.circle3Scale},s.createElement("circle",{r:"6",transform:"translate(0,10.471832)"})))))});u.displayName="Spinner";
 
 export { u as Spinner };
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Spinner.tsx","../../src/Spinner.styles.ts"],"names":["cx","css","React","forwardRef","tokens","Box","keyframes","sizes","getStyles","animations","props","SPINNER_DEFAULT_TAG","variants","Spinner","_a","forwardedRef","_b","className","customSize","size","variant","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues"],"mappings":"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","sourcesContent":["import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\n  Box,\n  type CommonProps,\n  type PropsWithHTMLElement,\n  type ExpandProps,\n} from '@contentful/f36-core';\nimport type { SpinnerSize, SpinnerVariant } from './types';\nimport { getStyles } from './Spinner.styles';\n\nconst SPINNER_DEFAULT_TAG = 'div';\n\nconst variants: { [key in SpinnerVariant]: string } = {\n  default: tokens.gray700,\n  primary: tokens.blue500,\n  white: tokens.colorWhite,\n};\n\nexport type SpinnerInternalProps = CommonProps & {\n  /**\n   * Determines the color that will be used in the `fill` property of the SVG\n   */\n  variant?: SpinnerVariant;\n  /**\n   * Allows resizing the spinner with any N value. The final size will be NxN pixels\n   */\n  customSize?: number;\n  /**\n   * Controls the size of the spinner. The default `medium` size is 20px wide,\n   * the `small` size is 14px wide, and the `large` size is 36px wide\n   */\n  size?: SpinnerSize;\n};\n\nexport type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;\n\nexport const Spinner = forwardRef<HTMLDivElement, ExpandProps<SpinnerProps>>(\n  (\n    {\n      className,\n      customSize,\n      size = 'medium',\n      variant = 'default',\n      testId = 'cf-ui-spinner',\n      ...otherProps\n    },\n    forwardedRef,\n  ) => {\n    const styles = getStyles();\n    return (\n      <Box\n        as={SPINNER_DEFAULT_TAG}\n        display=\"inline-block\"\n        {...otherProps}\n        className={cx(styles.root({ size, customSize }), className)}\n        ref={forwardedRef}\n        testId={testId}\n      >\n        <svg\n          className={css({\n            display: 'block',\n            fill: variants[variant],\n          })}\n          viewBox=\"0 0 60 51\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <title>Loading…</title>\n          <g\n            className={styles.circle1Translate}\n            transform=\"translate(10,33.528168)\"\n          >\n            <g className={styles.circle1Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n\n          <g\n            className={styles.circle2Translate}\n            transform=\"translate(30,33.528168)\"\n          >\n            <g className={styles.circle2Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n\n          <g\n            className={styles.circle3Translate}\n            transform=\"translate(50,33.528168)\"\n          >\n            <g className={styles.circle3Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n        </svg>\n      </Box>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n","import { css, keyframes } from 'emotion';\nimport type { SpinnerSize } from './types';\n\nconst sizes: { [key in SpinnerSize]: string } = {\n  large: '36px',\n  medium: '20px',\n  small: '14px',\n};\n\nexport const getStyles = () => {\n  const animations = {\n    scale1: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    6.666667% {\n      transform: scale(1.5, 0.5);\n    }\n    13.333333% {\n      transform: scale(1, 1);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    33.333333% {\n      transform: scale(1, 1);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    60% {\n      transform: scale(1.5, 0.5);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    scale2: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    13.333333% {\n      transform: scale(1, 1);\n    }\n    20% {\n      transform: scale(1.5, 0.5);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    46.666667% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    73.333333% {\n      transform: scale(1.5, 0.5);\n    }\n    80% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    scale3: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    33.333333% {\n      transform: scale(1.5, 0.5);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    60% {\n      transform: scale(1, 1);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    80% {\n      transform: scale(1, 1);\n    }\n    86.666667% {\n      transform: scale(1.5, 0.5);\n    }\n    93.333333% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    translate1: keyframes`\n    0% {\n      transform: translate(10px, 33.528168px);\n    }\n    6.666667% {\n      transform: translate(10px, 41.764084px);\n    }\n    13.333333% {\n      transform: translate(10px, 33.528168px);\n    }\n    26.666667% {\n      transform: translate(10px, -2.651608px);\n    }\n    33.333333% {\n      transform: translate(10px, -4.471832px);\n    }\n    40% {\n      transform: translate(10px, -2.651608px);\n    }\n    53.333333% {\n      transform: translate(10px, 33.528168px);\n    }\n    60% {\n      transform: translate(10px, 41.764084px);\n    }\n    66.666667% {\n      transform: translate(10px, 33.528168px);\n    }\n    100% {\n      transform: translate(10px, 33.528168px);\n    }\n  `,\n    translate2: keyframes`\n    0% {\n      transform: translate(30px, 33.528168px);\n    }\n    13.333333% {\n      transform: translate(30px, 33.528168px);\n    }\n    20% {\n      transform: translate(30px, 41.764084px);\n    }\n    26.666667% {\n      transform: translate(30px, 33.528168px);\n    }\n    40% {\n      transform: translate(30px, -2.651608px);\n    }\n    46.666667% {\n      transform: translate(30px, -4.471832px);\n    }\n    53.333333% {\n      transform: translate(30px, -2.651608px);\n    }\n    66.666667% {\n      transform: translate(30px, 33.528168px);\n    }\n    73.333333% {\n      transform: translate(30px, 41.764084px);\n    }\n    80% {\n      transform: translate(30px, 33.528168px);\n    }\n    100% {\n      transform: translate(30px, 33.528168px);\n    }\n  `,\n    translate3: keyframes`\n    0% {\n      transform: translate(50px, 33.528168px);\n    }\n    26.666667% {\n      transform: translate(50px, 33.528168px);\n    }\n    33.333333% {\n      transform: translate(50px, 41.764084px);\n    }\n    40% {\n      transform: translate(50px, 33.528168px);\n    }\n    53.333333% {\n      transform: translate(50px, -2.651608px);\n    }\n    60% {\n      transform: translate(50px, -4.471832px);\n    }\n    66.666667% {\n      transform: translate(50px, -2.651608px);\n    }\n    80% {\n      transform: translate(50px, 33.528168px);\n    }\n    86.666667% {\n      transform: translate(50px, 41.764084px);\n    }\n    93.333333% {\n      transform: translate(50px, 33.528168px);\n    }\n    100% {\n      transform: translate(50px, 33.528168px);\n    }\n  `,\n  };\n\n  return {\n    root: (props: { size: SpinnerSize; customSize?: number }) =>\n      css({\n        height: props.customSize ? `${props.customSize}px` : undefined,\n        verticalAlign: 'middle',\n        width: props.customSize ? `${props.customSize}px` : sizes[props.size],\n      }),\n    circle1Scale: css({\n      animation: `${animations.scale1} 1s linear infinite normal forwards;`,\n    }),\n    circle2Scale: css({\n      animation: `${animations.scale2} 1s linear infinite normal forwards;`,\n    }),\n    circle3Scale: css({\n      animation: `${animations.scale3} 1s linear infinite normal forwards;`,\n    }),\n    circle1Translate: css({\n      animation: `${animations.translate1} 1s linear infinite normal forwards;`,\n    }),\n    circle2Translate: css({\n      animation: `${animations.translate2} 1s linear infinite normal forwards;`,\n    }),\n    circle3Translate: css({\n      animation: `${animations.translate3} 1s linear infinite normal forwards;`,\n    }),\n  };\n};\n"]}
+{"version":3,"sources":["../../src/Spinner.tsx","../../src/Spinner.styles.ts"],"names":["cx","css","React","forwardRef","tokens","Box","keyframes","sizes","getStyles","animations","props","SPINNER_DEFAULT_TAG","variants","Spinner","_a","forwardedRef","_b","className","customSize","size","variant","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues"],"mappings":"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","sourcesContent":["import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\n  Box,\n  type CommonProps,\n  type PropsWithHTMLElement,\n  type ExpandProps,\n} from '@contentful/f36-core';\nimport type { SpinnerSize, SpinnerVariant } from './types';\nimport { getStyles } from './Spinner.styles';\n\nconst SPINNER_DEFAULT_TAG = 'div';\n\nconst variants: { [key in SpinnerVariant]: string } = {\n  default: tokens.gray700,\n  primary: tokens.blue500,\n  white: tokens.colorWhite,\n};\n\nexport type SpinnerInternalProps = CommonProps & {\n  /**\n   * Determines the color that will be used in the `fill` property of the SVG\n   */\n  variant?: SpinnerVariant;\n  /**\n   * Allows resizing the spinner with any N value. The final size will be NxN pixels\n   */\n  customSize?: number;\n  /**\n   * Controls the size of the spinner. The default `medium` size is 20px wide,\n   * the `small` size is 14px wide, and the `large` size is 36px wide\n   */\n  size?: SpinnerSize;\n};\n\nexport type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;\n\nexport const Spinner = forwardRef<HTMLDivElement, ExpandProps<SpinnerProps>>(\n  (\n    {\n      className,\n      customSize,\n      size = 'medium',\n      variant = 'default',\n      testId = 'cf-ui-spinner',\n      ...otherProps\n    },\n    forwardedRef,\n  ) => {\n    const styles = getStyles();\n    return (\n      <Box\n        as={SPINNER_DEFAULT_TAG}\n        display=\"inline-block\"\n        {...otherProps}\n        className={cx(styles.root({ size, customSize }), className)}\n        ref={forwardedRef}\n        testId={testId}\n      >\n        <svg\n          className={css({\n            display: 'block',\n            fill: variants[variant],\n          })}\n          viewBox=\"0 0 60 51\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <title>Loading…</title>\n          <g\n            className={styles.circle1Translate}\n            transform=\"translate(10,33.528168)\"\n          >\n            <g className={styles.circle1Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n\n          <g\n            className={styles.circle2Translate}\n            transform=\"translate(30,33.528168)\"\n          >\n            <g className={styles.circle2Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n\n          <g\n            className={styles.circle3Translate}\n            transform=\"translate(50,33.528168)\"\n          >\n            <g className={styles.circle3Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n        </svg>\n      </Box>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n","import { css, keyframes } from 'emotion';\nimport type { SpinnerSize } from './types';\n\nconst sizes: { [key in SpinnerSize]: string } = {\n  large: '36px',\n  medium: '20px',\n  small: '14px',\n};\n\nexport const getStyles = () => {\n  const animations = {\n    scale1: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    6.666667% {\n      transform: scale(1.5, 0.5);\n    }\n    13.333333% {\n      transform: scale(1, 1);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    33.333333% {\n      transform: scale(1, 1);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    60% {\n      transform: scale(1.5, 0.5);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    scale2: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    13.333333% {\n      transform: scale(1, 1);\n    }\n    20% {\n      transform: scale(1.5, 0.5);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    46.666667% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    73.333333% {\n      transform: scale(1.5, 0.5);\n    }\n    80% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    scale3: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    33.333333% {\n      transform: scale(1.5, 0.5);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    60% {\n      transform: scale(1, 1);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    80% {\n      transform: scale(1, 1);\n    }\n    86.666667% {\n      transform: scale(1.5, 0.5);\n    }\n    93.333333% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    translate1: keyframes`\n    0% {\n      transform: translate(10px, 33.528168px);\n    }\n    6.666667% {\n      transform: translate(10px, 41.764084px);\n    }\n    13.333333% {\n      transform: translate(10px, 33.528168px);\n    }\n    26.666667% {\n      transform: translate(10px, -2.651608px);\n    }\n    33.333333% {\n      transform: translate(10px, -4.471832px);\n    }\n    40% {\n      transform: translate(10px, -2.651608px);\n    }\n    53.333333% {\n      transform: translate(10px, 33.528168px);\n    }\n    60% {\n      transform: translate(10px, 41.764084px);\n    }\n    66.666667% {\n      transform: translate(10px, 33.528168px);\n    }\n    100% {\n      transform: translate(10px, 33.528168px);\n    }\n  `,\n    translate2: keyframes`\n    0% {\n      transform: translate(30px, 33.528168px);\n    }\n    13.333333% {\n      transform: translate(30px, 33.528168px);\n    }\n    20% {\n      transform: translate(30px, 41.764084px);\n    }\n    26.666667% {\n      transform: translate(30px, 33.528168px);\n    }\n    40% {\n      transform: translate(30px, -2.651608px);\n    }\n    46.666667% {\n      transform: translate(30px, -4.471832px);\n    }\n    53.333333% {\n      transform: translate(30px, -2.651608px);\n    }\n    66.666667% {\n      transform: translate(30px, 33.528168px);\n    }\n    73.333333% {\n      transform: translate(30px, 41.764084px);\n    }\n    80% {\n      transform: translate(30px, 33.528168px);\n    }\n    100% {\n      transform: translate(30px, 33.528168px);\n    }\n  `,\n    translate3: keyframes`\n    0% {\n      transform: translate(50px, 33.528168px);\n    }\n    26.666667% {\n      transform: translate(50px, 33.528168px);\n    }\n    33.333333% {\n      transform: translate(50px, 41.764084px);\n    }\n    40% {\n      transform: translate(50px, 33.528168px);\n    }\n    53.333333% {\n      transform: translate(50px, -2.651608px);\n    }\n    60% {\n      transform: translate(50px, -4.471832px);\n    }\n    66.666667% {\n      transform: translate(50px, -2.651608px);\n    }\n    80% {\n      transform: translate(50px, 33.528168px);\n    }\n    86.666667% {\n      transform: translate(50px, 41.764084px);\n    }\n    93.333333% {\n      transform: translate(50px, 33.528168px);\n    }\n    100% {\n      transform: translate(50px, 33.528168px);\n    }\n  `,\n  };\n\n  return {\n    root: (props: { size: SpinnerSize; customSize?: number }) =>\n      css({\n        height: props.customSize ? `${props.customSize}px` : undefined,\n        verticalAlign: 'middle',\n        width: props.customSize ? `${props.customSize}px` : sizes[props.size],\n      }),\n    circle1Scale: css({\n      animation: `${animations.scale1} 1s linear infinite normal forwards;`,\n    }),\n    circle2Scale: css({\n      animation: `${animations.scale2} 1s linear infinite normal forwards;`,\n    }),\n    circle3Scale: css({\n      animation: `${animations.scale3} 1s linear infinite normal forwards;`,\n    }),\n    circle1Translate: css({\n      animation: `${animations.translate1} 1s linear infinite normal forwards;`,\n    }),\n    circle2Translate: css({\n      animation: `${animations.translate2} 1s linear infinite normal forwards;`,\n    }),\n    circle3Translate: css({\n      animation: `${animations.translate3} 1s linear infinite normal forwards;`,\n    }),\n  };\n};\n"]}

package/dist/index.d.mts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';
+
+declare type SpinnerVariant = 'primary' | 'default' | 'white';
+declare type SpinnerSize = 'large' | 'medium' | 'small';
+
+declare type SpinnerInternalProps = CommonProps & {
+    /**
+     * Determines the color that will be used in the `fill` property of the SVG
+     */
+    variant?: SpinnerVariant;
+    /**
+     * Allows resizing the spinner with any N value. The final size will be NxN pixels
+     */
+    customSize?: number;
+    /**
+     * Controls the size of the spinner. The default `medium` size is 20px wide,
+     * the `small` size is 14px wide, and the `large` size is 36px wide
+     */
+    size?: SpinnerSize;
+};
+declare type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;
+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 & {
+    /**
+     * Determines the color that will be used in the `fill` property of the SVG
+     */
+    variant?: SpinnerVariant;
+    /**
+     * Allows resizing the spinner with any N value. The final size will be NxN pixels
+     */
+    customSize?: number;
+    /**
+     * Controls the size of the spinner. The default `medium` size is 20px wide,
+     * the `small` size is 14px wide, and the `large` size is 36px wide
+     */
+    size?: SpinnerSize;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { Spinner, SpinnerProps };

package/dist/index.js

@@ -1,16 +1,14 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var emotion = require('emotion');
 var s = require('react');
 var i = require('@contentful/f36-tokens');
 var f36Core = require('@contentful/f36-core');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var s__default = /*#__PURE__*/_interopDefaultLegacy(s);
-var i__default = /*#__PURE__*/_interopDefaultLegacy(i);
+var s__default = /*#__PURE__*/_interopDefault(s);
+var i__default = /*#__PURE__*/_interopDefault(i);
 
 var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var f=(r,a,t)=>a in r?N(r,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[a]=t,S=(r,a)=>{for(var t in a||(a={}))c.call(a,t)&&f(r,t,a[t]);if(m)for(var t of m(a))x.call(a,t)&&f(r,t,a[t]);return r},d=(r,a)=>T(r,v(a));var g=(r,a)=>{var t={};for(var n in r)c.call(r,n)&&a.indexOf(n)<0&&(t[n]=r[n]);if(r!=null&&m)for(var n of m(r))a.indexOf(n)<0&&x.call(r,n)&&(t[n]=r[n]);return t};var h={large:"36px",medium:"20px",small:"14px"},y=()=>{let r={scale1:emotion.keyframes`
     0% {
@@ -210,7 +208,8 @@ var N=Object.defineProperty,T=Object.defineProperties;var v=Object.getOwnPropert
     100% {
       transform: translate(50px, 33.528168px);
     }
-  `};return {root:a=>emotion.css({height:a.customSize?`${a.customSize}px`:void 0,verticalAlign:"middle",width:a.customSize?`${a.customSize}px`:h[a.size]}),circle1Scale:emotion.css({animation:`${r.scale1} 1s linear infinite normal forwards;`}),circle2Scale:emotion.css({animation:`${r.scale2} 1s linear infinite normal forwards;`}),circle3Scale:emotion.css({animation:`${r.scale3} 1s linear infinite normal forwards;`}),circle1Translate:emotion.css({animation:`${r.translate1} 1s linear infinite normal forwards;`}),circle2Translate:emotion.css({animation:`${r.translate2} 1s linear infinite normal forwards;`}),circle3Translate:emotion.css({animation:`${r.translate3} 1s linear infinite normal forwards;`})}};var L="div",I={default:i__default["default"].gray700,primary:i__default["default"].blue500,white:i__default["default"].colorWhite},u=s.forwardRef((A,P)=>{var p=A,{className:r,customSize:a,size:t="medium",variant:n="default",testId:z="cf-ui-spinner"}=p,w=g(p,["className","customSize","size","variant","testId"]);let e=y();return s__default["default"].createElement(f36Core.Box,d(S({as:L,display:"inline-block"},w),{className:emotion.cx(e.root({size:t,customSize:a}),r),ref:P,testId:z}),s__default["default"].createElement("svg",{className:emotion.css({display:"block",fill:I[n]}),viewBox:"0 0 60 51",xmlns:"http://www.w3.org/2000/svg"},s__default["default"].createElement("title",null,"Loading\u2026"),s__default["default"].createElement("g",{className:e.circle1Translate,transform:"translate(10,33.528168)"},s__default["default"].createElement("g",{className:e.circle1Scale},s__default["default"].createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s__default["default"].createElement("g",{className:e.circle2Translate,transform:"translate(30,33.528168)"},s__default["default"].createElement("g",{className:e.circle2Scale},s__default["default"].createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s__default["default"].createElement("g",{className:e.circle3Translate,transform:"translate(50,33.528168)"},s__default["default"].createElement("g",{className:e.circle3Scale},s__default["default"].createElement("circle",{r:"6",transform:"translate(0,10.471832)"})))))});u.displayName="Spinner";
+  `};return {root:a=>emotion.css({height:a.customSize?`${a.customSize}px`:void 0,verticalAlign:"middle",width:a.customSize?`${a.customSize}px`:h[a.size]}),circle1Scale:emotion.css({animation:`${r.scale1} 1s linear infinite normal forwards;`}),circle2Scale:emotion.css({animation:`${r.scale2} 1s linear infinite normal forwards;`}),circle3Scale:emotion.css({animation:`${r.scale3} 1s linear infinite normal forwards;`}),circle1Translate:emotion.css({animation:`${r.translate1} 1s linear infinite normal forwards;`}),circle2Translate:emotion.css({animation:`${r.translate2} 1s linear infinite normal forwards;`}),circle3Translate:emotion.css({animation:`${r.translate3} 1s linear infinite normal forwards;`})}};var L="div",I={default:i__default.default.gray700,primary:i__default.default.blue500,white:i__default.default.colorWhite},u=s.forwardRef((A,P)=>{var p=A,{className:r,customSize:a,size:t="medium",variant:n="default",testId:z="cf-ui-spinner"}=p,w=g(p,["className","customSize","size","variant","testId"]);let e=y();return s__default.default.createElement(f36Core.Box,d(S({as:L,display:"inline-block"},w),{className:emotion.cx(e.root({size:t,customSize:a}),r),ref:P,testId:z}),s__default.default.createElement("svg",{className:emotion.css({display:"block",fill:I[n]}),viewBox:"0 0 60 51",xmlns:"http://www.w3.org/2000/svg"},s__default.default.createElement("title",null,"Loading\u2026"),s__default.default.createElement("g",{className:e.circle1Translate,transform:"translate(10,33.528168)"},s__default.default.createElement("g",{className:e.circle1Scale},s__default.default.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s__default.default.createElement("g",{className:e.circle2Translate,transform:"translate(30,33.528168)"},s__default.default.createElement("g",{className:e.circle2Scale},s__default.default.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),s__default.default.createElement("g",{className:e.circle3Translate,transform:"translate(50,33.528168)"},s__default.default.createElement("g",{className:e.circle3Scale},s__default.default.createElement("circle",{r:"6",transform:"translate(0,10.471832)"})))))});u.displayName="Spinner";
 
 exports.Spinner = u;
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Spinner.tsx","../src/Spinner.styles.ts"],"names":["cx","css","React","forwardRef","tokens","Box","keyframes","sizes","getStyles","animations","props","SPINNER_DEFAULT_TAG","variants","Spinner","_a","forwardedRef","_b","className","customSize","size","variant","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues"],"mappings":"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","sourcesContent":["import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\n  Box,\n  type CommonProps,\n  type PropsWithHTMLElement,\n  type ExpandProps,\n} from '@contentful/f36-core';\nimport type { SpinnerSize, SpinnerVariant } from './types';\nimport { getStyles } from './Spinner.styles';\n\nconst SPINNER_DEFAULT_TAG = 'div';\n\nconst variants: { [key in SpinnerVariant]: string } = {\n  default: tokens.gray700,\n  primary: tokens.blue500,\n  white: tokens.colorWhite,\n};\n\nexport type SpinnerInternalProps = CommonProps & {\n  /**\n   * Determines the color that will be used in the `fill` property of the SVG\n   */\n  variant?: SpinnerVariant;\n  /**\n   * Allows resizing the spinner with any N value. The final size will be NxN pixels\n   */\n  customSize?: number;\n  /**\n   * Controls the size of the spinner. The default `medium` size is 20px wide,\n   * the `small` size is 14px wide, and the `large` size is 36px wide\n   */\n  size?: SpinnerSize;\n};\n\nexport type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;\n\nexport const Spinner = forwardRef<HTMLDivElement, ExpandProps<SpinnerProps>>(\n  (\n    {\n      className,\n      customSize,\n      size = 'medium',\n      variant = 'default',\n      testId = 'cf-ui-spinner',\n      ...otherProps\n    },\n    forwardedRef,\n  ) => {\n    const styles = getStyles();\n    return (\n      <Box\n        as={SPINNER_DEFAULT_TAG}\n        display=\"inline-block\"\n        {...otherProps}\n        className={cx(styles.root({ size, customSize }), className)}\n        ref={forwardedRef}\n        testId={testId}\n      >\n        <svg\n          className={css({\n            display: 'block',\n            fill: variants[variant],\n          })}\n          viewBox=\"0 0 60 51\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <title>Loading…</title>\n          <g\n            className={styles.circle1Translate}\n            transform=\"translate(10,33.528168)\"\n          >\n            <g className={styles.circle1Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n\n          <g\n            className={styles.circle2Translate}\n            transform=\"translate(30,33.528168)\"\n          >\n            <g className={styles.circle2Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n\n          <g\n            className={styles.circle3Translate}\n            transform=\"translate(50,33.528168)\"\n          >\n            <g className={styles.circle3Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n        </svg>\n      </Box>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n","import { css, keyframes } from 'emotion';\nimport type { SpinnerSize } from './types';\n\nconst sizes: { [key in SpinnerSize]: string } = {\n  large: '36px',\n  medium: '20px',\n  small: '14px',\n};\n\nexport const getStyles = () => {\n  const animations = {\n    scale1: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    6.666667% {\n      transform: scale(1.5, 0.5);\n    }\n    13.333333% {\n      transform: scale(1, 1);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    33.333333% {\n      transform: scale(1, 1);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    60% {\n      transform: scale(1.5, 0.5);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    scale2: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    13.333333% {\n      transform: scale(1, 1);\n    }\n    20% {\n      transform: scale(1.5, 0.5);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    46.666667% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    73.333333% {\n      transform: scale(1.5, 0.5);\n    }\n    80% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    scale3: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    33.333333% {\n      transform: scale(1.5, 0.5);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    60% {\n      transform: scale(1, 1);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    80% {\n      transform: scale(1, 1);\n    }\n    86.666667% {\n      transform: scale(1.5, 0.5);\n    }\n    93.333333% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    translate1: keyframes`\n    0% {\n      transform: translate(10px, 33.528168px);\n    }\n    6.666667% {\n      transform: translate(10px, 41.764084px);\n    }\n    13.333333% {\n      transform: translate(10px, 33.528168px);\n    }\n    26.666667% {\n      transform: translate(10px, -2.651608px);\n    }\n    33.333333% {\n      transform: translate(10px, -4.471832px);\n    }\n    40% {\n      transform: translate(10px, -2.651608px);\n    }\n    53.333333% {\n      transform: translate(10px, 33.528168px);\n    }\n    60% {\n      transform: translate(10px, 41.764084px);\n    }\n    66.666667% {\n      transform: translate(10px, 33.528168px);\n    }\n    100% {\n      transform: translate(10px, 33.528168px);\n    }\n  `,\n    translate2: keyframes`\n    0% {\n      transform: translate(30px, 33.528168px);\n    }\n    13.333333% {\n      transform: translate(30px, 33.528168px);\n    }\n    20% {\n      transform: translate(30px, 41.764084px);\n    }\n    26.666667% {\n      transform: translate(30px, 33.528168px);\n    }\n    40% {\n      transform: translate(30px, -2.651608px);\n    }\n    46.666667% {\n      transform: translate(30px, -4.471832px);\n    }\n    53.333333% {\n      transform: translate(30px, -2.651608px);\n    }\n    66.666667% {\n      transform: translate(30px, 33.528168px);\n    }\n    73.333333% {\n      transform: translate(30px, 41.764084px);\n    }\n    80% {\n      transform: translate(30px, 33.528168px);\n    }\n    100% {\n      transform: translate(30px, 33.528168px);\n    }\n  `,\n    translate3: keyframes`\n    0% {\n      transform: translate(50px, 33.528168px);\n    }\n    26.666667% {\n      transform: translate(50px, 33.528168px);\n    }\n    33.333333% {\n      transform: translate(50px, 41.764084px);\n    }\n    40% {\n      transform: translate(50px, 33.528168px);\n    }\n    53.333333% {\n      transform: translate(50px, -2.651608px);\n    }\n    60% {\n      transform: translate(50px, -4.471832px);\n    }\n    66.666667% {\n      transform: translate(50px, -2.651608px);\n    }\n    80% {\n      transform: translate(50px, 33.528168px);\n    }\n    86.666667% {\n      transform: translate(50px, 41.764084px);\n    }\n    93.333333% {\n      transform: translate(50px, 33.528168px);\n    }\n    100% {\n      transform: translate(50px, 33.528168px);\n    }\n  `,\n  };\n\n  return {\n    root: (props: { size: SpinnerSize; customSize?: number }) =>\n      css({\n        height: props.customSize ? `${props.customSize}px` : undefined,\n        verticalAlign: 'middle',\n        width: props.customSize ? `${props.customSize}px` : sizes[props.size],\n      }),\n    circle1Scale: css({\n      animation: `${animations.scale1} 1s linear infinite normal forwards;`,\n    }),\n    circle2Scale: css({\n      animation: `${animations.scale2} 1s linear infinite normal forwards;`,\n    }),\n    circle3Scale: css({\n      animation: `${animations.scale3} 1s linear infinite normal forwards;`,\n    }),\n    circle1Translate: css({\n      animation: `${animations.translate1} 1s linear infinite normal forwards;`,\n    }),\n    circle2Translate: css({\n      animation: `${animations.translate2} 1s linear infinite normal forwards;`,\n    }),\n    circle3Translate: css({\n      animation: `${animations.translate3} 1s linear infinite normal forwards;`,\n    }),\n  };\n};\n"]}
+{"version":3,"sources":["../src/Spinner.tsx","../src/Spinner.styles.ts"],"names":["cx","css","React","forwardRef","tokens","Box","keyframes","sizes","getStyles","animations","props","SPINNER_DEFAULT_TAG","variants","Spinner","_a","forwardedRef","_b","className","customSize","size","variant","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues"],"mappings":"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","sourcesContent":["import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\n  Box,\n  type CommonProps,\n  type PropsWithHTMLElement,\n  type ExpandProps,\n} from '@contentful/f36-core';\nimport type { SpinnerSize, SpinnerVariant } from './types';\nimport { getStyles } from './Spinner.styles';\n\nconst SPINNER_DEFAULT_TAG = 'div';\n\nconst variants: { [key in SpinnerVariant]: string } = {\n  default: tokens.gray700,\n  primary: tokens.blue500,\n  white: tokens.colorWhite,\n};\n\nexport type SpinnerInternalProps = CommonProps & {\n  /**\n   * Determines the color that will be used in the `fill` property of the SVG\n   */\n  variant?: SpinnerVariant;\n  /**\n   * Allows resizing the spinner with any N value. The final size will be NxN pixels\n   */\n  customSize?: number;\n  /**\n   * Controls the size of the spinner. The default `medium` size is 20px wide,\n   * the `small` size is 14px wide, and the `large` size is 36px wide\n   */\n  size?: SpinnerSize;\n};\n\nexport type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;\n\nexport const Spinner = forwardRef<HTMLDivElement, ExpandProps<SpinnerProps>>(\n  (\n    {\n      className,\n      customSize,\n      size = 'medium',\n      variant = 'default',\n      testId = 'cf-ui-spinner',\n      ...otherProps\n    },\n    forwardedRef,\n  ) => {\n    const styles = getStyles();\n    return (\n      <Box\n        as={SPINNER_DEFAULT_TAG}\n        display=\"inline-block\"\n        {...otherProps}\n        className={cx(styles.root({ size, customSize }), className)}\n        ref={forwardedRef}\n        testId={testId}\n      >\n        <svg\n          className={css({\n            display: 'block',\n            fill: variants[variant],\n          })}\n          viewBox=\"0 0 60 51\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <title>Loading…</title>\n          <g\n            className={styles.circle1Translate}\n            transform=\"translate(10,33.528168)\"\n          >\n            <g className={styles.circle1Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n\n          <g\n            className={styles.circle2Translate}\n            transform=\"translate(30,33.528168)\"\n          >\n            <g className={styles.circle2Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n\n          <g\n            className={styles.circle3Translate}\n            transform=\"translate(50,33.528168)\"\n          >\n            <g className={styles.circle3Scale}>\n              <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n            </g>\n          </g>\n        </svg>\n      </Box>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n","import { css, keyframes } from 'emotion';\nimport type { SpinnerSize } from './types';\n\nconst sizes: { [key in SpinnerSize]: string } = {\n  large: '36px',\n  medium: '20px',\n  small: '14px',\n};\n\nexport const getStyles = () => {\n  const animations = {\n    scale1: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    6.666667% {\n      transform: scale(1.5, 0.5);\n    }\n    13.333333% {\n      transform: scale(1, 1);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    33.333333% {\n      transform: scale(1, 1);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    60% {\n      transform: scale(1.5, 0.5);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    scale2: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    13.333333% {\n      transform: scale(1, 1);\n    }\n    20% {\n      transform: scale(1.5, 0.5);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    46.666667% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    73.333333% {\n      transform: scale(1.5, 0.5);\n    }\n    80% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    scale3: keyframes`\n    0% {\n      transform: scale(1, 1);\n    }\n    26.666667% {\n      transform: scale(1, 1);\n    }\n    33.333333% {\n      transform: scale(1.5, 0.5);\n    }\n    40% {\n      transform: scale(1, 1);\n    }\n    53.333333% {\n      transform: scale(1, 1);\n    }\n    60% {\n      transform: scale(1, 1);\n    }\n    66.666667% {\n      transform: scale(1, 1);\n    }\n    80% {\n      transform: scale(1, 1);\n    }\n    86.666667% {\n      transform: scale(1.5, 0.5);\n    }\n    93.333333% {\n      transform: scale(1, 1);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  `,\n    translate1: keyframes`\n    0% {\n      transform: translate(10px, 33.528168px);\n    }\n    6.666667% {\n      transform: translate(10px, 41.764084px);\n    }\n    13.333333% {\n      transform: translate(10px, 33.528168px);\n    }\n    26.666667% {\n      transform: translate(10px, -2.651608px);\n    }\n    33.333333% {\n      transform: translate(10px, -4.471832px);\n    }\n    40% {\n      transform: translate(10px, -2.651608px);\n    }\n    53.333333% {\n      transform: translate(10px, 33.528168px);\n    }\n    60% {\n      transform: translate(10px, 41.764084px);\n    }\n    66.666667% {\n      transform: translate(10px, 33.528168px);\n    }\n    100% {\n      transform: translate(10px, 33.528168px);\n    }\n  `,\n    translate2: keyframes`\n    0% {\n      transform: translate(30px, 33.528168px);\n    }\n    13.333333% {\n      transform: translate(30px, 33.528168px);\n    }\n    20% {\n      transform: translate(30px, 41.764084px);\n    }\n    26.666667% {\n      transform: translate(30px, 33.528168px);\n    }\n    40% {\n      transform: translate(30px, -2.651608px);\n    }\n    46.666667% {\n      transform: translate(30px, -4.471832px);\n    }\n    53.333333% {\n      transform: translate(30px, -2.651608px);\n    }\n    66.666667% {\n      transform: translate(30px, 33.528168px);\n    }\n    73.333333% {\n      transform: translate(30px, 41.764084px);\n    }\n    80% {\n      transform: translate(30px, 33.528168px);\n    }\n    100% {\n      transform: translate(30px, 33.528168px);\n    }\n  `,\n    translate3: keyframes`\n    0% {\n      transform: translate(50px, 33.528168px);\n    }\n    26.666667% {\n      transform: translate(50px, 33.528168px);\n    }\n    33.333333% {\n      transform: translate(50px, 41.764084px);\n    }\n    40% {\n      transform: translate(50px, 33.528168px);\n    }\n    53.333333% {\n      transform: translate(50px, -2.651608px);\n    }\n    60% {\n      transform: translate(50px, -4.471832px);\n    }\n    66.666667% {\n      transform: translate(50px, -2.651608px);\n    }\n    80% {\n      transform: translate(50px, 33.528168px);\n    }\n    86.666667% {\n      transform: translate(50px, 41.764084px);\n    }\n    93.333333% {\n      transform: translate(50px, 33.528168px);\n    }\n    100% {\n      transform: translate(50px, 33.528168px);\n    }\n  `,\n  };\n\n  return {\n    root: (props: { size: SpinnerSize; customSize?: number }) =>\n      css({\n        height: props.customSize ? `${props.customSize}px` : undefined,\n        verticalAlign: 'middle',\n        width: props.customSize ? `${props.customSize}px` : sizes[props.size],\n      }),\n    circle1Scale: css({\n      animation: `${animations.scale1} 1s linear infinite normal forwards;`,\n    }),\n    circle2Scale: css({\n      animation: `${animations.scale2} 1s linear infinite normal forwards;`,\n    }),\n    circle3Scale: css({\n      animation: `${animations.scale3} 1s linear infinite normal forwards;`,\n    }),\n    circle1Translate: css({\n      animation: `${animations.translate1} 1s linear infinite normal forwards;`,\n    }),\n    circle2Translate: css({\n      animation: `${animations.translate2} 1s linear infinite normal forwards;`,\n    }),\n    circle3Translate: css({\n      animation: `${animations.translate3} 1s linear infinite normal forwards;`,\n    }),\n  };\n};\n"]}

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@contentful/f36-spinner",
-  "version": "4.48.0",
+  "version": "4.48.2",
   "description": "Forma 36: Spinner Component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-core": "^4.48.0",
+    "@contentful/f36-core": "^4.48.2",
     "@contentful/f36-tokens": "^4.0.2",
     "emotion": "^10.0.17"
   },
   "devDependencies": {
-    "@contentful/f36-typography": "^4.48.0"
+    "@contentful/f36-typography": "^4.48.2"
   },
   "peerDependencies": {
     "react": ">=16.8"