@twilio-paste/spinner - npm Package Compare versions

Comparing version 8.0.1 to 8.0.2

CHANGELOG.md

 # Change Log
 
+## 8.0.2
+
+### Patch Changes
+
+- [`73c596919`](https://github.com/twilio-labs/paste/commit/73c5969191c04b4721a059c9dee329126afc1a8e) [#2269](https://github.com/twilio-labs/paste/pull/2269) Thanks [@SiTaggart](https://github.com/SiTaggart)! - Fixed a regression with the compilation script that caused incompatible ESM module importing of JSON files.
+
 ## 8.0.1
@@ -4,0 +10,0 @@

dist/index.debug.es.js

 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -19,78 +17,17 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
 };
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module, copyDefault, desc) => {
-  if (module && typeof module === "object" || typeof module === "function") {
-    for (let key of __getOwnPropNames(module))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module[key], enumerable: !(desc = __getOwnPropDesc(module, key)) || desc.enumerable });
-  }
-  return target;
-};
 
-// esm-externals:react
-var react_exports = {};
-__export(react_exports, {
-  default: () => default2
-});
-__reExport(react_exports, react_star);
-import * as default2 from "react";
-import * as react_star from "react";
+// src/index.tsx
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { useUID } from "@twilio-paste/uid-library";
+import { IconWrapper } from "@twilio-paste/icons/esm/helpers/IconWrapper";
+import { useTheme } from "@twilio-paste/theme";
+import { isIconSizeTokenProp } from "@twilio-paste/style-props";
 
-// esm-externals:prop-types
-var prop_types_exports = {};
-__export(prop_types_exports, {
-  default: () => default3
-});
-__reExport(prop_types_exports, prop_types_star);
-import * as default3 from "prop-types";
-import * as prop_types_star from "prop-types";
+// src/styled.tsx
+import { styled } from "@twilio-paste/styling-library";
 
-// esm-externals:@twilio-paste/uid-library
-var uid_library_exports = {};
-__export(uid_library_exports, {
-  default: () => default4
-});
-__reExport(uid_library_exports, uid_library_star);
-import * as default4 from "@twilio-paste/uid-library";
-import * as uid_library_star from "@twilio-paste/uid-library";
+// src/keyframes.tsx
+import { keyframes } from "@twilio-paste/styling-library";
 
-// esm-externals:@twilio-paste/icons/esm/helpers/IconWrapper
-var IconWrapper_exports = {};
-__export(IconWrapper_exports, {
-  default: () => default5
-});
-__reExport(IconWrapper_exports, IconWrapper_star);
-import * as default5 from "@twilio-paste/icons/esm/helpers/IconWrapper";
-import * as IconWrapper_star from "@twilio-paste/icons/esm/helpers/IconWrapper";
-
-// esm-externals:@twilio-paste/theme
-var theme_exports = {};
-__export(theme_exports, {
-  default: () => default6
-});
-__reExport(theme_exports, theme_star);
-import * as default6 from "@twilio-paste/theme";
-import * as theme_star from "@twilio-paste/theme";
-
-// esm-externals:@twilio-paste/style-props
-var style_props_exports = {};
-__export(style_props_exports, {
-  default: () => default7
-});
-__reExport(style_props_exports, style_props_star);
-import * as default7 from "@twilio-paste/style-props";
-import * as style_props_star from "@twilio-paste/style-props";
-
-// esm-externals:@twilio-paste/styling-library
-var styling_library_exports = {};
-__export(styling_library_exports, {
-  default: () => default8
-});
-__reExport(styling_library_exports, styling_library_star);
-import * as default8 from "@twilio-paste/styling-library";
-import * as styling_library_star from "@twilio-paste/styling-library";
-
 // src/constants.ts
@@ -106,3 +43,3 @@ var circleRadius = 45;
 // src/keyframes.tsx
-var SvgKeyframes = styling_library_exports.keyframes`
+var SvgKeyframes = keyframes`
   0%,
@@ -125,3 +62,3 @@ 15% {
 `;
-var CircleKeyframes = styling_library_exports.keyframes`
+var CircleKeyframes = keyframes`
   0% {
@@ -136,7 +73,7 @@ transform: rotateZ(0deg);
 // src/styled.tsx
-var StyledCircleTrack = styling_library_exports.styled.circle({
+var StyledCircleTrack = styled.circle({
   transformOrigin: "center",
   opacity: 0.25
 });
-var AnimatedStyledCircle = styling_library_exports.styled.circle(({ show }) => ({
+var AnimatedStyledCircle = styled.circle(({ show }) => ({
   transformOrigin: "center",
@@ -147,3 +84,3 @@ animation: `1.5s ease-in-out infinite both ${CircleKeyframes}`,
 }));
-var StyledSvg = styling_library_exports.styled.svg({
+var StyledSvg = styled.svg({
   height: "100%",
@@ -156,9 +93,9 @@ width: "100%",
 // src/index.tsx
-var Spinner = react_exports.forwardRef(({ size, color = "currentColor", title, as, display, decorative, delay = 250, element = "SPINNER" }, ref) => {
-  const titleId = `spinner-${(0, uid_library_exports.useUID)()}`;
+var Spinner = React.forwardRef(({ size, color = "currentColor", title, as, display, decorative, delay = 250, element = "SPINNER" }, ref) => {
+  const titleId = `spinner-${useUID()}`;
   const {
     borderWidths: { borderWidth40 }
-  } = (0, theme_exports.useTheme)();
-  const [show, setShow] = react_exports.useState(delay === 0);
-  react_exports.useEffect(() => {
+  } = useTheme();
+  const [show, setShow] = React.useState(delay === 0);
+  React.useEffect(() => {
     if (delay === 0)
@@ -169,3 +106,3 @@ return;
   }, [delay]);
-  return /* @__PURE__ */ react_exports.createElement(IconWrapper_exports.IconWrapper, {
+  return /* @__PURE__ */ React.createElement(IconWrapper, {
     as,
@@ -178,9 +115,9 @@ element,
     ref
-  }, /* @__PURE__ */ react_exports.createElement(StyledSvg, {
+  }, /* @__PURE__ */ React.createElement(StyledSvg, {
     viewBox: "0 0 100 100",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-labelledby": titleId
-  }, title ? /* @__PURE__ */ react_exports.createElement("title", {
+  }, title ? /* @__PURE__ */ React.createElement("title", {
     id: titleId
-  }, title) : null, /* @__PURE__ */ react_exports.createElement("g", {
+  }, title) : null, /* @__PURE__ */ React.createElement("g", {
     strokeWidth: borderWidth40,
@@ -190,3 +127,3 @@ stroke: "currentColor",
     fill: "transparent"
-  }, /* @__PURE__ */ react_exports.createElement(StyledCircleTrack, __spreadValues({}, circleGeometry)), /* @__PURE__ */ react_exports.createElement(AnimatedStyledCircle, __spreadValues({
+  }, /* @__PURE__ */ React.createElement(StyledCircleTrack, __spreadValues({}, circleGeometry)), /* @__PURE__ */ React.createElement(AnimatedStyledCircle, __spreadValues({
     show
@@ -197,6 +134,6 @@ }, circleGeometry)))));
 Spinner.propTypes = {
-  title: prop_types_exports.string.isRequired,
-  delay: prop_types_exports.number,
-  element: prop_types_exports.string,
-  size: style_props_exports.isIconSizeTokenProp
+  title: PropTypes.string.isRequired,
+  delay: PropTypes.number,
+  element: PropTypes.string,
+  size: isIconSizeTokenProp
 };
@@ -203,0 +140,0 @@ export {

dist/index.es.js

@@ -1,5 +0,5 @@
-var u=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames,P=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var C=(i,e,o)=>e in i?u(i,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[e]=o,h=(i,e)=>{for(var o in e||(e={}))w.call(e,o)&&C(i,o,e[o]);if(P)for(var o of P(e))U.call(e,o)&&C(i,o,e[o]);return i};var a=(i,e)=>{for(var o in e)u(i,o,{get:e[o],enumerable:!0})},r=(i,e,o,y)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of H(e))!w.call(i,n)&&(o||n!=="default")&&u(i,n,{get:()=>e[n],enumerable:!(y=q(e,n))||y.enumerable});return i};var t={};a(t,{default:()=>k});r(t,F);import*as k from"react";import*as F from"react";var p={};a(p,{default:()=>T});r(p,J);import*as T from"prop-types";import*as J from"prop-types";var m={};a(m,{default:()=>b});r(m,Q);import*as b from"@twilio-paste/uid-library";import*as Q from"@twilio-paste/uid-library";var c={};a(c,{default:()=>v});r(c,X);import*as v from"@twilio-paste/icons/esm/helpers/IconWrapper";import*as X from"@twilio-paste/icons/esm/helpers/IconWrapper";var f={};a(f,{default:()=>I});r(f,Y);import*as I from"@twilio-paste/theme";import*as Y from"@twilio-paste/theme";var l={};a(l,{default:()=>R});r(l,_);import*as R from"@twilio-paste/style-props";import*as _ from"@twilio-paste/style-props";var s={};a(s,{default:()=>W});r(s,ee);import*as W from"@twilio-paste/styling-library";import*as ee from"@twilio-paste/styling-library";var E=45,S={cx:50,cy:50,r:E},d=Math.PI*2*E;var G=s.keyframes`
+var E=Object.defineProperty;var l=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var f=(o,t,e)=>t in o?E(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e,c=(o,t)=>{for(var e in t||(t={}))G.call(t,e)&&f(o,e,t[e]);if(l)for(var e of l(t))$.call(t,e)&&f(o,e,t[e]);return o};import*as r from"react";import*as s from"prop-types";import{useUID as K}from"@twilio-paste/uid-library";import{IconWrapper as z}from"@twilio-paste/icons/esm/helpers/IconWrapper";import{useTheme as B}from"@twilio-paste/theme";import{isIconSizeTokenProp as D}from"@twilio-paste/style-props";import{styled as a}from"@twilio-paste/styling-library";import{keyframes as y}from"@twilio-paste/styling-library";var d=45,p={cx:50,cy:50,r:d},i=Math.PI*2*d;var h=y`
   0%,
   15% {
-    stroke-dashoffset: ${d*.9999};
+    stroke-dashoffset: ${i*.9999};
     transform: rotate(0);
@@ -10,3 +10,3 @@ }
   75% {
-    stroke-dashoffset: ${d*.2};
+    stroke-dashoffset: ${i*.2};
     transform: rotate(45deg);
@@ -16,6 +16,6 @@ }
   100% {
-    stroke-dashoffset: ${d*.9999};
+    stroke-dashoffset: ${i*.9999};
     transform: rotate(360deg);
   }
-`,$=s.keyframes`
+`,u=y`
   0% {
@@ -27,2 +27,2 @@ transform: rotateZ(0deg);
   }
-`;var K=s.styled.circle({transformOrigin:"center",opacity:.25}),z=s.styled.circle(({show:i})=>({transformOrigin:"center",animation:`1.5s ease-in-out infinite both ${$}`,strokeDasharray:d,opacity:i?1:0})),B=s.styled.svg({height:"100%",width:"100%",display:"block",animation:`4.25s linear infinite both ${G}`});var D=t.forwardRef(({size:i,color:e="currentColor",title:o,as:y,display:n,decorative:N,delay:x=250,element:A="SPINNER"},L)=>{let g=`spinner-${(0,m.useUID)()}`,{borderWidths:{borderWidth40:M}}=(0,f.useTheme)(),[O,V]=t.useState(x===0);return t.useEffect(()=>{if(x===0)return;let Z=setTimeout(()=>V(!0),x);return()=>clearTimeout(Z)},[x]),t.createElement(c.IconWrapper,{as:y,element:A,display:n,size:i,color:e,"aria-hidden":N,ref:L},t.createElement(B,{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":g},o?t.createElement("title",{id:g},o):null,t.createElement("g",{strokeWidth:M,stroke:"currentColor",strokeLinecap:"round",fill:"transparent"},t.createElement(K,h({},S)),t.createElement(z,h({show:O},S)))))});D.displayName="Spinner";D.propTypes={title:p.string.isRequired,delay:p.number,element:p.string,size:l.isIconSizeTokenProp};export{D as Spinner};
+`;var S=a.circle({transformOrigin:"center",opacity:.25}),g=a.circle(({show:o})=>({transformOrigin:"center",animation:`1.5s ease-in-out infinite both ${u}`,strokeDasharray:i,opacity:o?1:0})),x=a.svg({height:"100%",width:"100%",display:"block",animation:`4.25s linear infinite both ${h}`});var P=r.forwardRef(({size:o,color:t="currentColor",title:e,as:w,display:C,decorative:k,delay:n=250,element:T="SPINNER"},b)=>{let m=`spinner-${K()}`,{borderWidths:{borderWidth40:v}}=B(),[I,R]=r.useState(n===0);return r.useEffect(()=>{if(n===0)return;let W=setTimeout(()=>R(!0),n);return()=>clearTimeout(W)},[n]),r.createElement(z,{as:w,element:T,display:C,size:o,color:t,"aria-hidden":k,ref:b},r.createElement(x,{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":m},e?r.createElement("title",{id:m},e):null,r.createElement("g",{strokeWidth:v,stroke:"currentColor",strokeLinecap:"round",fill:"transparent"},r.createElement(S,c({},p)),r.createElement(g,c({show:I},p)))))});P.displayName="Spinner";P.propTypes={title:s.string.isRequired,delay:s.number,element:s.string,size:D};export{P as Spinner};

package.json

 {
   "name": "@twilio-paste/spinner",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "category": "feedback",
@@ -41,10 +41,10 @@ "status": "production",
   "devDependencies": {
-    "@twilio-paste/box": "^5.0.1",
-    "@twilio-paste/design-tokens": "^7.1.0",
-    "@twilio-paste/icons": "^6.2.0",
-    "@twilio-paste/style-props": "^4.0.1",
-    "@twilio-paste/styling-library": "^0.3.6",
-    "@twilio-paste/theme": "^6.0.1",
-    "@twilio-paste/types": "^3.1.4",
-    "@twilio-paste/uid-library": "^0.2.3",
+    "@twilio-paste/box": "^5.0.2",
+    "@twilio-paste/design-tokens": "^7.1.1",
+    "@twilio-paste/icons": "^6.2.1",
+    "@twilio-paste/style-props": "^4.0.2",
+    "@twilio-paste/styling-library": "^0.3.7",
+    "@twilio-paste/theme": "^6.0.2",
+    "@twilio-paste/types": "^3.1.5",
+    "@twilio-paste/uid-library": "^0.2.4",
     "prop-types": "^15.7.2",
@@ -51,0 +51,0 @@ "react": "^17.0.2",

No alert changes

Worsened metrics

Total package byte prevSize

484790

decreased by-0.62%

Lines of code

430

decreased by-12.6%

No dependency changes