@react-to-styled/loader - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1-alpha.1

dist/cjs/loader.development.js

+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var essentials = require('@react-to-styled/essentials');
+var React = require('react');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Loader = ({ wrapperHeight , loaderSize =72 ,  })=>{
+    if (wrapperHeight) {
+        return /*#__PURE__*/ React__default["default"].createElement(Wrapper, {
+            className: "rts-loader__container",
+            wrapperHeight: wrapperHeight
+        }, /*#__PURE__*/ React__default["default"].createElement(Element, {
+            className: "rts-loader",
+            "data-element": "loader",
+            loaderSize: loaderSize
+        }));
+    }
+    return /*#__PURE__*/ React__default["default"].createElement(Element, {
+        className: "rts-loader",
+        "data-element": "loader",
+        loaderSize: loaderSize
+    });
+};
+const loaderKeyframe = styled.keyframes`
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const Wrapper = styled__default["default"].div`
+  width: 100%;
+  ${({ wrapperHeight  })=>`height: ${typeof wrapperHeight === 'number' ? `${wrapperHeight}px` : wrapperHeight}`
+};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Element = styled__default["default"].div`
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  font-size: 10px;
+  position: relative;
+  border: 4px solid transparent;
+  border-left-color: ${essentials.Colors.darkBlue};
+  transform: translateZ(0);
+  animation: ${loaderKeyframe} 1.1s infinite linear;
+  ${({ loaderSize  })=>`
+    width: ${loaderSize}px;
+    height: ${loaderSize}px;
+    
+    ::after {
+      width: ${loaderSize}px;
+      height: ${loaderSize}px;
+      border-radius: 50%;
+    }
+  `
+};
+`;
+
+exports.Loader = Loader;
+//# sourceMappingURL=loader.development.js.map

dist/cjs/loader.development.js.map

+{"version":3,"file":"loader.development.js","sources":["../../index.tsx"],"sourcesContent":["import { Colors } from '@react-to-styled/essentials'\nimport React, { FunctionComponent } from 'react'\nimport styled, { keyframes } from 'styled-components'\n\n/**\n * Loader props.\n */\nexport interface LoaderProps {\n  /**\n   * This can set minHeight of the wrapper and loader will be in the center.\n   */\n  wrapperHeight?: number | string\n  /**\n   * Sets the loader radius.\n   */\n  loaderSize?: number\n}\n\nexport const Loader: FunctionComponent<LoaderProps> = ({\n  wrapperHeight,\n  loaderSize = 72,\n}) => {\n  if (wrapperHeight) {\n    return (\n      <Wrapper className=\"rts-loader__container\" wrapperHeight={wrapperHeight}>\n        <Element\n          className=\"rts-loader\"\n          data-element=\"loader\"\n          loaderSize={loaderSize}\n        />\n      </Wrapper>\n    )\n  }\n\n  return (\n    <Element\n      className=\"rts-loader\"\n      data-element=\"loader\"\n      loaderSize={loaderSize}\n    />\n  )\n}\n\nconst loaderKeyframe = keyframes`\n  0% {\n    transform: rotate(0);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n`\n\nconst Wrapper = styled.div<Pick<LoaderProps, 'wrapperHeight'>>`\n  width: 100%;\n  ${({ wrapperHeight }) =>\n    `height: ${\n      typeof wrapperHeight === 'number' ? `${wrapperHeight}px` : wrapperHeight\n    }`};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Element = styled.div<Pick<LoaderProps, 'loaderSize'>>`\n  width: 72px;\n  height: 72px;\n  border-radius: 50%;\n  font-size: 10px;\n  position: relative;\n  border: 4px solid transparent;\n  border-left-color: ${Colors.darkBlue};\n  transform: translateZ(0);\n  animation: ${loaderKeyframe} 1.1s infinite linear;\n  ${({ loaderSize }) => `\n    width: ${loaderSize}px;\n    height: ${loaderSize}px;\n    \n    ::after {\n      width: ${loaderSize}px;\n      height: ${loaderSize}px;\n      border-radius: 50%;\n    }\n  `};\n`\n"],"names":["Loader","wrapperHeight","loaderSize","React","createElement","Wrapper","className","Element","loaderKeyframe","keyframes","styled","div","Colors","darkBlue"],"mappings":";;;;;;;;;;;;;AAsBMA,MAAAA,MAAA,GAAa,CAAE,EAAAC,aAAA,GAAAC,UAAA,EAAA,EAAA,KAAA,GAAA;AAAA,IAAA,IACjBD,aACE,EAAA;AAAuE,QAAA,qBACrEE,yBAAA,CAAAC,aAAC,CAAAC,OACC,EAAA;AAAAC,YAAAA,SAAU,EAAA,uBAAY;AAAAL,YAAAA,aAEtB,EAAAA,aAAY;AAAA,SAAA,gBAInBE,yBAAA,CAAAC,aAAA,CAAAG,OAAA,EAAA;AAAAD,YAAAA,SAAA,EAAA,YAAA;AAAA,YAAA,cAAA,EAAA,QAAA;AAAAJ,YAAAA,UAAA,EAAAA,UAAA;AAAA,SAAA,CAAA,CAAA,CAAA;AAED,KAAA;AAOD,IAAA,qBAAAC,yBAAA,CAAAC,aAAA,CAAAG,OAAA,EAAA;AAAAD,QAAAA,SAAA,EAAA,YAAA;AAAA,QAAA,cAAA,EAAA,QAAA;AAAAJ,QAAAA,UAAA,EAAAA,UAAA;AAAA,KAAA,CAAA,CAAA;EAED;AAAgC,MAAAM,cAAA,GAAAC,gBAAA,CAAA;;;;;;;;AAUhC,CAAA,CAAA;AAA8D,MAAAJ,OAAA,GAAAK,0BAAA,CAAAC,GAAA,CAAA;;EAKxD,EAAA,CAAA,EAAAV,aAAA,GAAA,GAAA,CAAA,QAAA,EAAA,OAAAA,aAAA,KAAA,QAAA,GAAA,CAAA,EAAAA,aAAA,CAAA,EAAA,CAAA,GAAAA,aAAA,CAAA,CAAA;AAAA,CAAA;;;;AAMN,CAAA,CAAA;AAA2D,MAAAM,OAAA,GAAAG,0BAAA,CAAAC,GAAA,CAAA;;;;;;;qBAOrB,EAAAC,iBAAA,CAAAC,QAAA,CAAA;;AAG/B,aAAA,EAAAL,cAAiB,CAAA;AAAA,EAAA,EAAA,CAAA,EAAAN,UACX,GAAA,GAAU,CAAA;AAAA,WAAA,EAAAA,UACT,CAAU;AAAA,YAAA,EAAAA,UAAA,CAAA;;;AAGC,aAAA,EAAAA,UACT,CAAU;AAAA,cAAA,EAAAA,UAAA,CAAA;;;EAIzB,CAAA;AAAA,CAAA;AAAA,CAAA;;;;"}

dist/cjs/loader.js

+if (process.env.NODE_ENV === 'production') {
+    module.exports = require('./loader.production.min.js');
+} else {
+    module.exports = require('./loader.development.js');
+}

dist/cjs/loader.production.min.js

+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-to-styled/essentials"),t=require("react"),r=require("styled-components");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(t),i=a(r);const o=r.keyframes`
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+`,l=i.default.div`
+  width: 100%;
+  ${({wrapperHeight:e})=>"height: "+("number"==typeof e?e+"px":e)};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,d=i.default.div`
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  font-size: 10px;
+  position: relative;
+  border: 4px solid transparent;
+  border-left-color: ${e.Colors.darkBlue};
+  transform: translateZ(0);
+  animation: ${o} 1.1s infinite linear;
+  ${({loaderSize:e})=>`\n    width: ${e}px;\n    height: ${e}px;\n    \n    ::after {\n      width: ${e}px;\n      height: ${e}px;\n      border-radius: 50%;\n    }\n  `};
+`;exports.Loader=({wrapperHeight:e,loaderSize:t=72})=>e?n.default.createElement(l,{className:"rts-loader__container",wrapperHeight:e},n.default.createElement(d,{className:"rts-loader","data-element":"loader",loaderSize:t})):n.default.createElement(d,{className:"rts-loader","data-element":"loader",loaderSize:t});
+//# sourceMappingURL=loader.production.min.js.map

dist/cjs/loader.production.min.js.map

+{"version":3,"file":"loader.production.min.js","sources":["../../index.tsx"],"sourcesContent":["import { Colors } from '@react-to-styled/essentials'\nimport React, { FunctionComponent } from 'react'\nimport styled, { keyframes } from 'styled-components'\n\n/**\n * Loader props.\n */\nexport interface LoaderProps {\n  /**\n   * This can set minHeight of the wrapper and loader will be in the center.\n   */\n  wrapperHeight?: number | string\n  /**\n   * Sets the loader radius.\n   */\n  loaderSize?: number\n}\n\nexport const Loader: FunctionComponent<LoaderProps> = ({\n  wrapperHeight,\n  loaderSize = 72,\n}) => {\n  if (wrapperHeight) {\n    return (\n      <Wrapper className=\"rts-loader__container\" wrapperHeight={wrapperHeight}>\n        <Element\n          className=\"rts-loader\"\n          data-element=\"loader\"\n          loaderSize={loaderSize}\n        />\n      </Wrapper>\n    )\n  }\n\n  return (\n    <Element\n      className=\"rts-loader\"\n      data-element=\"loader\"\n      loaderSize={loaderSize}\n    />\n  )\n}\n\nconst loaderKeyframe = keyframes`\n  0% {\n    transform: rotate(0);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n`\n\nconst Wrapper = styled.div<Pick<LoaderProps, 'wrapperHeight'>>`\n  width: 100%;\n  ${({ wrapperHeight }) =>\n    `height: ${\n      typeof wrapperHeight === 'number' ? `${wrapperHeight}px` : wrapperHeight\n    }`};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Element = styled.div<Pick<LoaderProps, 'loaderSize'>>`\n  width: 72px;\n  height: 72px;\n  border-radius: 50%;\n  font-size: 10px;\n  position: relative;\n  border: 4px solid transparent;\n  border-left-color: ${Colors.darkBlue};\n  transform: translateZ(0);\n  animation: ${loaderKeyframe} 1.1s infinite linear;\n  ${({ loaderSize }) => `\n    width: ${loaderSize}px;\n    height: ${loaderSize}px;\n    \n    ::after {\n      width: ${loaderSize}px;\n      height: ${loaderSize}px;\n      border-radius: 50%;\n    }\n  `};\n`\n"],"names":["Loader","loaderKeyframe","keyframes","Wrapper","styled","div","wrapperHeight","Element","Colors","darkBlue","loaderSize","React","createElement","className"],"mappings":"6PAsBMA,MAqB0BC,EAAAC,EAAAA,SAAA;;;;;;;;EAU8BC,EAAAC,EAAA,QAAAC,GAAA;;IAKxD,EAAAC,cAAAA,KAAA,YAAA,iBAAAA,EAAAA,EAAA,KAAAA;;;;EAMqDC,EAAAH,EAAA,QAAAC,GAAA;;;;;;;uBAOrBG,EAAAA,OAAAC;;eAG/BR;IAAiB,EAAAS,WAAAA,KACD,gBAAAA,qBACCA,2CAGCA,uBACCA;iBA1DP,EAAEJ,cAAAA,EAAAI,WAAAA,EAAA,MACjBJ,EAEIK,EAAA,QAAAC,cAACT,EACC,CAAAU,UAAU,wBAAYP,cAEtBA,GAIPK,EAAA,QAAAC,cAAAL,EAAA,CAAAM,UAAA,aAAA,eAAA,SAAAH,WAAAA,KASFC,EAAA,QAAAC,cAAAL,EAAA,CAAAM,UAAA,aAAA,eAAA,SAAAH,WAAAA"}

dist/esm/loader.js

+import { Colors } from '@react-to-styled/essentials';
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const Loader = ({ wrapperHeight , loaderSize =72 ,  })=>{
+    if (wrapperHeight) {
+        return /*#__PURE__*/ React.createElement(Wrapper, {
+            className: "rts-loader__container",
+            wrapperHeight: wrapperHeight
+        }, /*#__PURE__*/ React.createElement(Element, {
+            className: "rts-loader",
+            "data-element": "loader",
+            loaderSize: loaderSize
+        }));
+    }
+    return /*#__PURE__*/ React.createElement(Element, {
+        className: "rts-loader",
+        "data-element": "loader",
+        loaderSize: loaderSize
+    });
+};
+const loaderKeyframe = keyframes`
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const Wrapper = styled.div`
+  width: 100%;
+  ${({ wrapperHeight  })=>`height: ${typeof wrapperHeight === 'number' ? `${wrapperHeight}px` : wrapperHeight}`
+};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Element = styled.div`
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  font-size: 10px;
+  position: relative;
+  border: 4px solid transparent;
+  border-left-color: ${Colors.darkBlue};
+  transform: translateZ(0);
+  animation: ${loaderKeyframe} 1.1s infinite linear;
+  ${({ loaderSize  })=>`
+    width: ${loaderSize}px;
+    height: ${loaderSize}px;
+    
+    ::after {
+      width: ${loaderSize}px;
+      height: ${loaderSize}px;
+      border-radius: 50%;
+    }
+  `
+};
+`;
+
+export { Loader };
+//# sourceMappingURL=loader.js.map

dist/esm/loader.js.map

+{"version":3,"file":"loader.js","sources":["../../index.tsx"],"sourcesContent":["import { Colors } from '@react-to-styled/essentials'\nimport React, { FunctionComponent } from 'react'\nimport styled, { keyframes } from 'styled-components'\n\n/**\n * Loader props.\n */\nexport interface LoaderProps {\n  /**\n   * This can set minHeight of the wrapper and loader will be in the center.\n   */\n  wrapperHeight?: number | string\n  /**\n   * Sets the loader radius.\n   */\n  loaderSize?: number\n}\n\nexport const Loader: FunctionComponent<LoaderProps> = ({\n  wrapperHeight,\n  loaderSize = 72,\n}) => {\n  if (wrapperHeight) {\n    return (\n      <Wrapper className=\"rts-loader__container\" wrapperHeight={wrapperHeight}>\n        <Element\n          className=\"rts-loader\"\n          data-element=\"loader\"\n          loaderSize={loaderSize}\n        />\n      </Wrapper>\n    )\n  }\n\n  return (\n    <Element\n      className=\"rts-loader\"\n      data-element=\"loader\"\n      loaderSize={loaderSize}\n    />\n  )\n}\n\nconst loaderKeyframe = keyframes`\n  0% {\n    transform: rotate(0);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n`\n\nconst Wrapper = styled.div<Pick<LoaderProps, 'wrapperHeight'>>`\n  width: 100%;\n  ${({ wrapperHeight }) =>\n    `height: ${\n      typeof wrapperHeight === 'number' ? `${wrapperHeight}px` : wrapperHeight\n    }`};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Element = styled.div<Pick<LoaderProps, 'loaderSize'>>`\n  width: 72px;\n  height: 72px;\n  border-radius: 50%;\n  font-size: 10px;\n  position: relative;\n  border: 4px solid transparent;\n  border-left-color: ${Colors.darkBlue};\n  transform: translateZ(0);\n  animation: ${loaderKeyframe} 1.1s infinite linear;\n  ${({ loaderSize }) => `\n    width: ${loaderSize}px;\n    height: ${loaderSize}px;\n    \n    ::after {\n      width: ${loaderSize}px;\n      height: ${loaderSize}px;\n      border-radius: 50%;\n    }\n  `};\n`\n"],"names":["Loader","wrapperHeight","loaderSize","React","createElement","Wrapper","className","Element","loaderKeyframe","keyframes","styled","div","Colors","darkBlue"],"mappings":";;;;AAsBMA,MAAAA,MAAA,GAAa,CAAE,EAAAC,aAAA,GAAAC,UAAA,EAAA,EAAA,KAAA,GAAA;AAAA,IAAA,IACjBD,aACE,EAAA;AAAuE,QAAA,qBACrEE,KAAA,CAAAC,aAAC,CAAAC,OACC,EAAA;AAAAC,YAAAA,SAAU,EAAA,uBAAY;AAAAL,YAAAA,aAEtB,EAAAA,aAAY;AAAA,SAAA,gBAInBE,KAAA,CAAAC,aAAA,CAAAG,OAAA,EAAA;AAAAD,YAAAA,SAAA,EAAA,YAAA;AAAA,YAAA,cAAA,EAAA,QAAA;AAAAJ,YAAAA,UAAA,EAAAA,UAAA;AAAA,SAAA,CAAA,CAAA,CAAA;AAED,KAAA;AAOD,IAAA,qBAAAC,KAAA,CAAAC,aAAA,CAAAG,OAAA,EAAA;AAAAD,QAAAA,SAAA,EAAA,YAAA;AAAA,QAAA,cAAA,EAAA,QAAA;AAAAJ,QAAAA,UAAA,EAAAA,UAAA;AAAA,KAAA,CAAA,CAAA;EAED;AAAgC,MAAAM,cAAA,GAAAC,SAAA,CAAA;;;;;;;;AAUhC,CAAA,CAAA;AAA8D,MAAAJ,OAAA,GAAAK,MAAA,CAAAC,GAAA,CAAA;;EAKxD,EAAA,CAAA,EAAAV,aAAA,GAAA,GAAA,CAAA,QAAA,EAAA,OAAAA,aAAA,KAAA,QAAA,GAAA,CAAA,EAAAA,aAAA,CAAA,EAAA,CAAA,GAAAA,aAAA,CAAA,CAAA;AAAA,CAAA;;;;AAMN,CAAA,CAAA;AAA2D,MAAAM,OAAA,GAAAG,MAAA,CAAAC,GAAA,CAAA;;;;;;;qBAOrB,EAAAC,MAAA,CAAAC,QAAA,CAAA;;AAG/B,aAAA,EAAAL,cAAiB,CAAA;AAAA,EAAA,EAAA,CAAA,EAAAN,UACX,GAAA,GAAU,CAAA;AAAA,WAAA,EAAAA,UACT,CAAU;AAAA,YAAA,EAAAA,UAAA,CAAA;;;AAGC,aAAA,EAAAA,UACT,CAAU;AAAA,cAAA,EAAAA,UAAA,CAAA;;;EAIzB,CAAA;AAAA,CAAA;AAAA,CAAA;;;;"}

dist/loader.d.ts

+import { FunctionComponent } from 'react';
+/**
+ * Loader props.
+ */
+interface LoaderProps {
+    /**
+     * This can set minHeight of the wrapper and loader will be in the center.
+     */
+    wrapperHeight?: number | string;
+    /**
+     * Sets the loader radius.
+     */
+    loaderSize?: number;
+}
+declare const Loader: FunctionComponent<LoaderProps>;
+export { LoaderProps, Loader };

CHANGELOG.md

@@ -6,2 +6,21 @@ # Change Log
 
+## 0.3.1-alpha.1 (2022-05-03)
+
+
+### Bug Fixes
+
+* **root:** Prepare build before publish ([c8b1736](https://github.com/react-to/react-to-styled/commit/c8b1736b1ebbb696f07aaa4b12e96d7dde5fa283))
+
+
+
+
+
+## 0.3.1-alpha.0 (2022-05-03)
+
+**Note:** Version bump only for package @react-to-styled/loader
+
+
+
+
+
 # 0.3.0 (2022-02-26)
@@ -8,0 +27,0 @@

package.json

 {
   "name": "@react-to-styled/loader",
-  "version": "0.3.0",
+  "version": "0.3.1-alpha.1",
   "description": "Loader",
@@ -20,4 +20,4 @@ "author": {
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/esm/loader.js",
+  "types": "dist/loader.d.ts",
   "homepage": "https://react-to.github.io/react-to-styled/?path=/docs/loader--page",
@@ -34,3 +34,3 @@ "repository": {
   "scripts": {
-    "build": "tsc --declaration",
+    "build": "xrollup index.tsx",
     "prepublish": "yarn build"
@@ -51,5 +51,8 @@ },
   "dependencies": {
-    "@react-to-styled/essentials": "^0.3.0"
+    "@react-to-styled/essentials": "^0.3.1-alpha.1"
   },
-  "gitHead": "6f8836e75840834421d2ce996cb9224a24daa828"
+  "devDependencies": {
+    "@react-to-styled/build": "^0.1.1-alpha.1"
+  },
+  "gitHead": "4a28f526edaa80aaadeb1790f03e6e519716a086"
 }

dist/index.d.ts

-import { FunctionComponent } from 'react';
-/**
- * Loader props.
- */
-export interface LoaderProps {
-    /**
-     * This can set minHeight of the wrapper and loader will be in the center.
-     */
-    wrapperHeight?: number | string;
-    /**
-     * Sets the loader radius.
-     */
-    loaderSize?: number;
-}
-export declare const Loader: FunctionComponent<LoaderProps>;

dist/index.js

-import { Colors } from '@react-to-styled/essentials';
-import React from 'react';
-import styled, { keyframes } from 'styled-components';
-export const Loader = ({ wrapperHeight, loaderSize = 72, }) => {
-    if (wrapperHeight) {
-        return (React.createElement(Wrapper, { className: "rts-loader__container", wrapperHeight: wrapperHeight },
-            React.createElement(Element, { className: "rts-loader", "data-element": "loader", loaderSize: loaderSize })));
-    }
-    return (React.createElement(Element, { className: "rts-loader", "data-element": "loader", loaderSize: loaderSize }));
-};
-const loaderKeyframe = keyframes `
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-const Wrapper = styled.div `
-  width: 100%;
-  ${({ wrapperHeight }) => `height: ${typeof wrapperHeight === 'number' ? `${wrapperHeight}px` : wrapperHeight}`};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const Element = styled.div `
-  width: 72px;
-  height: 72px;
-  border-radius: 50%;
-  font-size: 10px;
-  position: relative;
-  border: 4px solid transparent;
-  border-left-color: ${Colors.darkBlue};
-  transform: translateZ(0);
-  animation: ${loaderKeyframe} 1.1s infinite linear;
-  ${({ loaderSize }) => `
-    width: ${loaderSize}px;
-    height: ${loaderSize}px;
-    
-    ::after {
-      width: ${loaderSize}px;
-      height: ${loaderSize}px;
-      border-radius: 50%;
-    }
-  `};
-`;

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24421

120.17%

Number of package files

12

100%

Lines of code

172

186.67%

Worsened metrics

Dev dependency count

1

Infinity%

Number of low supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  @react-to-styled/essentials@0.3.1-alpha.2
  (transitive)

• - Removed

  @react-to-styled/essentials@0.3.0
  (transitive)

• Updated

  @react-to-styled/essentials@^0.3.1-alpha.1