@uiw/react-github-corners - npm Package Compare versions

Comparing version 1.5.4 to 1.5.5

cjs/index.d.ts

 import React from 'react';
-import './style/index.css';
+import '@uiw/github-corners';
 export interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -40,2 +40,2 @@ /**
 }
-export default function githubCorners(props?: GitHubCornersProps): JSX.Element;
+export default function githubCorners(props: GitHubCornersProps): JSX.Element;

cjs/index.js

@@ -16,8 +16,9 @@ "use strict";
 
+require("@uiw/github-corners");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["size", "fixed", "bottom", "zIndex", "className", "bgColor", "color", "position"];
+var _excluded = ["size", "fixed", "bottom", "zIndex", "className", "style", "bgColor", "color", "position"];
 
-function githubCorners() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+function githubCorners(props) {
   var _props$size = props.size,
@@ -30,2 +31,3 @@ size = _props$size === void 0 ? 80 : _props$size,
       className = props.className,
+      style = props.style,
       _props$bgColor = props.bgColor,
@@ -40,5 +42,8 @@ bgColor = _props$bgColor === void 0 ? '#151513' : _props$bgColor,
     left: 0,
+    right: 'initial',
     transform: 'scale(-1, 1)'
   } : {
-    right: 0
+    right: 0,
+    left: 'initial',
+    transform: 'scale(1, 1)'
   };
@@ -50,38 +55,17 @@
     styl.transform = position === 'left' ? 'scale(-1, -1)' : 'scale(1, -1)';
+  } else {
+    styl.bottom = 'initial';
+    styl.top = 0;
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("github-corners", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    width: size,
+    height: size,
     href: props.href,
-    "aria-label": "View source on GitHub"
-  }, otherProps), {}, {
-    className: 'github-corner ' + (className || ''),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-      width: size,
-      height: size,
-      viewBox: "0 0 250 250",
-      style: (0, _objectSpread2.default)({
-        fill: bgColor,
-        color: color,
-        position: fixed ? 'fixed' : 'absolute',
-        border: 0,
-        top: 0,
-        zIndex: zIndex
-      }, styl),
-      "aria-hidden": "true",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-        d: "M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-        d: "M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2",
-        fill: "currentColor",
-        style: {
-          transformOrigin: '130px 106px'
-        },
-        className: "octo-arm"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-        d: "M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z",
-        fill: "currentColor",
-        className: "octo-body"
-      })]
-    })
-  }));
+    position: fixed ? 'fixed' : 'absolute',
+    "z-index": zIndex,
+    style: style,
+    fill: bgColor,
+    color: color
+  }, styl), otherProps));
 }
@@ -88,0 +72,0 @@

cjs/index.js.map

@@ -14,2 +14,3 @@ {
     "className",
+    "style",
     "bgColor",
@@ -21,14 +22,11 @@ "color",
     "left",
+    "right",
     "transform",
-    "right",
     "top",
-    "href",
-    "fill",
-    "border",
-    "transformOrigin"
+    "href"
   ],
-  "mappings": ";;;;;;;;;;;;;AACA;;;;;;AAyCe,SAASA,aAAT,GAAuD;AAAA,MAAhCC,KAAgC,uEAAJ,EAAI;AACpE,oBAAwIA,KAAxI,CAAQC,IAAR;AAAA,MAAQA,IAAR,4BAAe,EAAf;AAAA,qBAAwID,KAAxI,CAAmBE,KAAnB;AAAA,MAAmBA,KAAnB,6BAA2B,KAA3B;AAAA,MAAkCC,MAAlC,GAAwIH,KAAxI,CAAkCG,MAAlC;AAAA,MAA0CC,MAA1C,GAAwIJ,KAAxI,CAA0CI,MAA1C;AAAA,MAAkDC,SAAlD,GAAwIL,KAAxI,CAAkDK,SAAlD;AAAA,uBAAwIL,KAAxI,CAA6DM,OAA7D;AAAA,MAA6DA,OAA7D,+BAAuE,SAAvE;AAAA,qBAAwIN,KAAxI,CAAkFO,KAAlF;AAAA,MAAkFA,KAAlF,6BAA0F,MAA1F;AAAA,wBAAwIP,KAAxI,CAAkGQ,QAAlG;AAAA,MAAkGA,QAAlG,gCAA6G,OAA7G;AAAA,MAAyHC,UAAzH,0CAAwIT,KAAxI;AACA,MAAMU,IAAyB,GAAGF,QAAQ,KAAK,MAAb,GAAsB;AAAEG,IAAAA,IAAI,EAAE,CAAR;AAAWC,IAAAA,SAAS,EAAE;AAAtB,GAAtB,GAA+D;AAAEC,IAAAA,KAAK,EAAE;AAAT,GAAjG;;AACA,MAAIV,MAAJ,EAAY;AACVO,IAAAA,IAAI,CAACP,MAAL,GAAc,CAAd;AACAO,IAAAA,IAAI,CAACI,GAAL,GAAW,SAAX;AACAJ,IAAAA,IAAI,CAACE,SAAL,GAAiBJ,QAAQ,KAAK,MAAb,GAAsB,eAAtB,GAAwC,cAAzD;AACD;;AACD,sBACE;AAAG,IAAA,IAAI,EAAER,KAAK,CAACe,IAAf;AAAqB,kBAAW;AAAhC,KAA4DN,UAA5D;AAAwE,IAAA,SAAS,EAAE,oBAAoBJ,SAAS,IAAI,EAAjC,CAAnF;AAAA,2BACE;AACE,MAAA,KAAK,EAAEJ,IADT;AAEE,MAAA,MAAM,EAAEA,IAFV;AAGE,MAAA,OAAO,EAAC,aAHV;AAIE,MAAA,KAAK;AACHe,QAAAA,IAAI,EAAEV,OADH;AAEHC,QAAAA,KAAK,EAAEA,KAFJ;AAGHC,QAAAA,QAAQ,EAAEN,KAAK,GAAG,OAAH,GAAa,UAHzB;AAIHe,QAAAA,MAAM,EAAE,CAJL;AAKHH,QAAAA,GAAG,EAAE,CALF;AAMHV,QAAAA,MAAM,EAANA;AANG,SAOAM,IAPA,CAJP;AAaE,qBAAY,MAbd;AAAA,8BAcE;AAAM,QAAA,CAAC,EAAC;AAAR,QAdF,eAeE;AACE,QAAA,CAAC,EAAC,0LADJ;AAEE,QAAA,IAAI,EAAC,cAFP;AAGE,QAAA,KAAK,EAAE;AAAEQ,UAAAA,eAAe,EAAE;AAAnB,SAHT;AAIE,QAAA,SAAS,EAAC;AAJZ,QAfF,eAqBE;AACE,QAAA,CAAC,EAAC,qhBADJ;AAEE,QAAA,IAAI,EAAC,cAFP;AAGE,QAAA,SAAS,EAAC;AAHZ,QArBF;AAAA;AADF,KADF;AA+BD",
+  "mappings": ";;;;;;;;;;;;;AAAA;;AACA;;;;;;AAwCe,SAASA,aAAT,CAAuBC,KAAvB,EAAkD;AAC/D,oBAA+IA,KAA/I,CAAQC,IAAR;AAAA,MAAQA,IAAR,4BAAe,EAAf;AAAA,qBAA+ID,KAA/I,CAAmBE,KAAnB;AAAA,MAAmBA,KAAnB,6BAA2B,KAA3B;AAAA,MAAkCC,MAAlC,GAA+IH,KAA/I,CAAkCG,MAAlC;AAAA,MAA0CC,MAA1C,GAA+IJ,KAA/I,CAA0CI,MAA1C;AAAA,MAAkDC,SAAlD,GAA+IL,KAA/I,CAAkDK,SAAlD;AAAA,MAA6DC,KAA7D,GAA+IN,KAA/I,CAA6DM,KAA7D;AAAA,uBAA+IN,KAA/I,CAAoEO,OAApE;AAAA,MAAoEA,OAApE,+BAA8E,SAA9E;AAAA,qBAA+IP,KAA/I,CAAyFQ,KAAzF;AAAA,MAAyFA,KAAzF,6BAAiG,MAAjG;AAAA,wBAA+IR,KAA/I,CAAyGS,QAAzG;AAAA,MAAyGA,QAAzG,gCAAoH,OAApH;AAAA,MAAgIC,UAAhI,0CAA+IV,KAA/I;AACA,MAAMW,IAAyB,GAAGF,QAAQ,KAAK,MAAb,GAAsB;AAAEG,IAAAA,IAAI,EAAE,CAAR;AAAWC,IAAAA,KAAK,EAAE,SAAlB;AAA6BC,IAAAA,SAAS,EAAE;AAAxC,GAAtB,GAAiF;AAAED,IAAAA,KAAK,EAAE,CAAT;AAAYD,IAAAA,IAAI,EAAE,SAAlB;AAA6BE,IAAAA,SAAS,EAAE;AAAxC,GAAnH;;AACA,MAAIX,MAAJ,EAAY;AACVQ,IAAAA,IAAI,CAACR,MAAL,GAAc,CAAd;AACAQ,IAAAA,IAAI,CAACI,GAAL,GAAW,SAAX;AACAJ,IAAAA,IAAI,CAACG,SAAL,GAAiBL,QAAQ,KAAK,MAAb,GAAsB,eAAtB,GAAwC,cAAzD;AACD,GAJD,MAIO;AACLE,IAAAA,IAAI,CAACR,MAAL,GAAc,SAAd;AACAQ,IAAAA,IAAI,CAACI,GAAL,GAAW,CAAX;AACD;;AACD,sBACE;AAAgB,IAAA,KAAK,EAAEd,IAAvB;AAA6B,IAAA,MAAM,EAAEA,IAArC;AAA2C,IAAA,IAAI,EAAED,KAAK,CAACgB,IAAvD;AAA6D,IAAA,QAAQ,EAAEd,KAAK,GAAG,OAAH,GAAa,UAAzF;AAAqG,eAASE,MAA9G;AAAsH,IAAA,KAAK,EAAEE,KAA7H;AAAoI,IAAA,IAAI,EAAEC,OAA1I;AAAmJ,IAAA,KAAK,EAAEC;AAA1J,KAAqKG,IAArK,GAA+KD,UAA/K,EADF;AAGD",
   "sourcesContent": [
-    "\nimport React from 'react';\nimport './style/index.css';\n\nexport interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The link to your project page.\n   */\n  href?: string;\n  /**\n   * The width and height of the corner. \n   * Default: `80`\n   */\n  size?: number;\n  /**\n   * The background color of the corner.\n   * Default: `#151513`\n   */\n  bgColor?: string;\n  /**\n   * The Github logo color of the corner.\n   * Default: `#fff`\n   */\n  color?: string;\n  /**\n   * The position of corner. \n   * Default: `right`\n   */\n  position?: 'left' | 'right';\n  /** Is it displayed at the bottom? */\n  bottom?: boolean,\n  /**\n   * It is positioned relative to the initial containing block established.\n   * Default: `false`\n   */\n  fixed?: boolean;\n  /**\n   * Sets the z-order of a positioned element and its descendants or flex items.\n   */\n  zIndex?: number;\n}\n\nexport default function githubCorners(props: GitHubCornersProps = {}) {\n  const { size = 80, fixed = false, bottom, zIndex, className, bgColor = '#151513', color = '#fff', position = 'right', ...otherProps } = props;\n  const styl: React.CSSProperties = position === 'left' ? { left: 0, transform: 'scale(-1, 1)' } : { right: 0 };\n  if (bottom) {\n    styl.bottom = 0;\n    styl.top = 'initial';\n    styl.transform = position === 'left' ? 'scale(-1, -1)' : 'scale(1, -1)';\n  }\n  return (\n    <a href={props.href} aria-label=\"View source on GitHub\" {...otherProps} className={'github-corner ' + (className || '')} >\n      <svg\n        width={size}\n        height={size}\n        viewBox=\"0 0 250 250\"\n        style={{\n          fill: bgColor,\n          color: color,\n          position: fixed ? 'fixed' : 'absolute',\n          border: 0,\n          top: 0,\n          zIndex,\n          ...styl,\n        }}\n        aria-hidden=\"true\">\n        <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\" />\n        <path\n          d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n          fill=\"currentColor\"\n          style={{ transformOrigin: '130px 106px' }}\n          className=\"octo-arm\"\n        />\n        <path\n          d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n          fill=\"currentColor\"\n          className=\"octo-body\"\n        />\n      </svg>\n    </a>\n  )\n}"
+    "import React from 'react';\nimport '@uiw/github-corners';\n\nexport interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The link to your project page.\n   */\n  href?: string;\n  /**\n   * The width and height of the corner. \n   * Default: `80`\n   */\n  size?: number;\n  /**\n   * The background color of the corner.\n   * Default: `#151513`\n   */\n  bgColor?: string;\n  /**\n   * The Github logo color of the corner.\n   * Default: `#fff`\n   */\n  color?: string;\n  /**\n   * The position of corner. \n   * Default: `right`\n   */\n  position?: 'left' | 'right';\n  /** Is it displayed at the bottom? */\n  bottom?: boolean,\n  /** \n   * It is positioned relative to the initial containing block established.\n   * Default: `false`\n   */\n  fixed?: boolean;\n  /**\n   * Sets the z-order of a positioned element and its descendants or flex items.\n   */\n  zIndex?: number;\n}\n\nexport default function githubCorners(props: GitHubCornersProps) {\n  const { size = 80, fixed = false, bottom, zIndex, className, style, bgColor = '#151513', color = '#fff', position = 'right', ...otherProps } = props;\n  const styl: React.CSSProperties = position === 'left' ? { left: 0, right: 'initial', transform: 'scale(-1, 1)' } : { right: 0, left: 'initial', transform: 'scale(1, 1)' };\n  if (bottom) {\n    styl.bottom = 0;\n    styl.top = 'initial';\n    styl.transform = position === 'left' ? 'scale(-1, -1)' : 'scale(1, -1)';\n  } else {\n    styl.bottom = 'initial';\n    styl.top = 0;\n  }\n  return (\n    <github-corners width={size} height={size} href={props.href} position={fixed ? 'fixed' : 'absolute'} z-index={zIndex} style={style} fill={bgColor} color={color} {...styl} {...otherProps}></github-corners>\n  );\n}"
   ]
 }

dist/github-corners.js

@@ -15,3 +15,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-/***/ 323:
+/***/ 512:
 /***/ ((module) => {
@@ -113,3 +113,3 @@
 
-/***/ 638:
+/***/ 298:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -126,4 +126,4 @@
  */
-__webpack_require__(323);var f=__webpack_require__(787),g=60103;__webpack_unused_export__=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");__webpack_unused_export__=h("react.fragment")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};
-function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;exports.jsxs=q;
+__webpack_require__(512);var f=__webpack_require__(787),g=60103;__webpack_unused_export__=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");__webpack_unused_export__=h("react.fragment")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};
+function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;__webpack_unused_export__=q;
 
@@ -133,3 +133,3 @@
 
-/***/ 724:
+/***/ 605:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
@@ -140,3 +140,3 @@
 if (true) {
-  module.exports = __webpack_require__(638);
+  module.exports = __webpack_require__(298);
 } else {}
@@ -221,3 +221,3 @@
 
-;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js
+;// CONCATENATED MODULE: ../node_modules/@babel/runtime/helpers/esm/defineProperty.js
 function _defineProperty(obj, key, value) {
@@ -237,3 +237,3 @@ if (key in obj) {
 }
-;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js
+;// CONCATENATED MODULE: ../node_modules/@babel/runtime/helpers/esm/objectSpread2.js
 
@@ -266,3 +266,3 @@
 }
-;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
+;// CONCATENATED MODULE: ../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -282,3 +282,3 @@ if (source == null) return {};
 }
-;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js
+;// CONCATENATED MODULE: ../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js
 
@@ -305,9 +305,85 @@ function _objectWithoutProperties(source, excluded) {
 var external_root_React_commonjs2_react_commonjs_react_amd_react_ = __webpack_require__(787);
-;// CONCATENATED MODULE: ./src/style/index.css
-// extracted by mini-css-extract-plugin
-/* harmony default export */ const style = ({});
-// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
-var jsx_runtime = __webpack_require__(724);
+;// CONCATENATED MODULE: ../web-component/lib/index.js
+const TEMPLATE = document.createElement("template");
+TEMPLATE.innerHTML = `
+<style>
+:host a:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+@keyframes octocat-wave {
+  0%, 100% {
+    transform: rotate(0);
+  }
+  20%, 60% {
+    transform: rotate(-25deg);
+  }
+  40%, 80% {
+    transform: rotate(10deg);
+  }
+}
+@media (max-width:500px) {
+  :host a:hover .octo-arm {
+    animation: none;
+  }
+  :host .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+}
+</style>
+<a id="warpper">
+  <svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true" style="fill: rgb(21, 21, 19); color: rgb(255, 255, 255); position: absolute; border: 0px; top: 0px;">
+    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+    <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" class="octo-arm" style="transform-origin: 130px 106px;"></path>
+    <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+  </svg>
+</a>
+`;
+class GithubCorners extends HTMLElement {
+    constructor() {
+        super();
+        this.right = '0';
+        this.initDom();
+    }
+    static get observedAttributes() {
+        return ['z-index', 'height', 'width', 'href', 'color', 'fill', 'position', 'top', 'left', 'right', 'bottom', 'transform'];
+    }
+    initDom() {
+        const shadow = this.attachShadow({ mode: 'open' });
+        shadow.appendChild(this.ownerDocument.importNode(TEMPLATE.content, true));
+        this.warpper = shadow.getElementById('warpper');
+        // const svg = warpper.firstElementChild as SVGAElement;
+        // console.log('>>>href', this.getAttributeNames())
+        // console.log('>>>hre222f', warpper, warpper.querySelector('a'))
+        // ;[...this.getAttributeNames(), 'right'].forEach((name) => {
+        //   if (/(z-index|height|width|color|fill|position|top|left|right|bottom|transform)/.test(name.toLocaleLowerCase())) {
+        //     svg.style[name as any] = this.getAttribute(name) || this[name as keyof GithubCorners] as any;
+        //     console.log('~~~', name, this['left'], this.getAttribute(name))
+        //   } else {
+        //     console.log('name::', name,  this.getAttribute(name))
+        //     warpper.setAttribute(name, this.getAttribute(name));
+        //   }
+        // });
+        this.update();
+    }
+    update() {
+        const svg = this.warpper.querySelector('svg');
+        [...this.getAttributeNames(), 'right'].forEach((name) => {
+            if (/(z-index|height|width|color|fill|position|top|left|right|bottom|transform)/.test(name.toLocaleLowerCase())) {
+                svg.style[name] = this.getAttribute(name) || this[name];
+            }
+            else {
+                this.warpper.setAttribute(name, this.getAttribute(name) || this[name]);
+            }
+        });
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        this.update();
+    }
+}
+customElements.define('github-corners', GithubCorners);
+
+// EXTERNAL MODULE: ../node_modules/react/jsx-runtime.js
+var jsx_runtime = __webpack_require__(605);
 ;// CONCATENATED MODULE: ./src/index.tsx
-var _excluded=["size","fixed","bottom","zIndex","className","bgColor","color","position"];function githubCorners(){var props=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var _props$size=props.size,size=_props$size===void 0?80:_props$size,_props$fixed=props.fixed,fixed=_props$fixed===void 0?false:_props$fixed,bottom=props.bottom,zIndex=props.zIndex,className=props.className,_props$bgColor=props.bgColor,bgColor=_props$bgColor===void 0?'#151513':_props$bgColor,_props$color=props.color,color=_props$color===void 0?'#fff':_props$color,_props$position=props.position,position=_props$position===void 0?'right':_props$position,otherProps=_objectWithoutProperties(props,_excluded);var styl=position==='left'?{left:0,transform:'scale(-1, 1)'}:{right:0};if(bottom){styl.bottom=0;styl.top='initial';styl.transform=position==='left'?'scale(-1, -1)':'scale(1, -1)';}return/*#__PURE__*/(0,jsx_runtime.jsx)("a",_objectSpread2(_objectSpread2({href:props.href,"aria-label":"View source on GitHub"},otherProps),{},{className:'github-corner '+(className||''),children:/*#__PURE__*/(0,jsx_runtime.jsxs)("svg",{width:size,height:size,viewBox:"0 0 250 250",style:_objectSpread2({fill:bgColor,color:color,position:fixed?'fixed':'absolute',border:0,top:0,zIndex:zIndex},styl),"aria-hidden":"true",children:[/*#__PURE__*/(0,jsx_runtime.jsx)("path",{d:"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"}),/*#__PURE__*/(0,jsx_runtime.jsx)("path",{d:"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2",fill:"currentColor",style:{transformOrigin:'130px 106px'},className:"octo-arm"}),/*#__PURE__*/(0,jsx_runtime.jsx)("path",{d:"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z",fill:"currentColor",className:"octo-body"})]})}));}
+var _excluded=["size","fixed","bottom","zIndex","className","style","bgColor","color","position"];function githubCorners(props){var _props$size=props.size,size=_props$size===void 0?80:_props$size,_props$fixed=props.fixed,fixed=_props$fixed===void 0?false:_props$fixed,bottom=props.bottom,zIndex=props.zIndex,className=props.className,style=props.style,_props$bgColor=props.bgColor,bgColor=_props$bgColor===void 0?'#151513':_props$bgColor,_props$color=props.color,color=_props$color===void 0?'#fff':_props$color,_props$position=props.position,position=_props$position===void 0?'right':_props$position,otherProps=_objectWithoutProperties(props,_excluded);var styl=position==='left'?{left:0,right:'initial',transform:'scale(-1, 1)'}:{right:0,left:'initial',transform:'scale(1, 1)'};if(bottom){styl.bottom=0;styl.top='initial';styl.transform=position==='left'?'scale(-1, -1)':'scale(1, -1)';}else{styl.bottom='initial';styl.top=0;}return/*#__PURE__*/(0,jsx_runtime.jsx)("github-corners",_objectSpread2(_objectSpread2({width:size,height:size,href:props.href,position:fixed?'fixed':'absolute',"z-index":zIndex,style:style,fill:bgColor,color:color},styl),otherProps));}
 })();
@@ -314,0 +390,0 @@

dist/github-corners.min.js

 /*! For license information please see github-corners.min.js.LICENSE.txt */
-!function(e,r){"object"===typeof exports&&"object"===typeof module?module.exports=r(require("react")):"function"===typeof define&&define.amd?define(["react"],r):"object"===typeof exports?exports["@uiw/react-github-corners"]=r(require("react")):e["@uiw/react-github-corners"]=r(e.React)}(self,(function(e){return(()=>{"use strict";var r={323:e=>{var r=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;function n(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var r={},t=0;t<10;t++)r["_"+String.fromCharCode(t)]=t;if("0123456789"!==Object.getOwnPropertyNames(r).map((function(e){return r[e]})).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach((function(e){o[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(n){return!1}}()?Object.assign:function(e,i){for(var c,a,l=n(e),f=1;f<arguments.length;f++){for(var s in c=Object(arguments[f]))t.call(c,s)&&(l[s]=c[s]);if(r){a=r(c);for(var u=0;u<a.length;u++)o.call(c,a[u])&&(l[a[u]]=c[a[u]])}}return l}},638:(e,r,t)=>{t(323);var o=t(787),n=60103;if(60107,"function"===typeof Symbol&&Symbol.for){var i=Symbol.for;n=i("react.element"),i("react.fragment")}var c=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a=Object.prototype.hasOwnProperty,l={key:!0,ref:!0,__self:!0,__source:!0};function f(e,r,t){var o,i={},f=null,s=null;for(o in void 0!==t&&(f=""+t),void 0!==r.key&&(f=""+r.key),void 0!==r.ref&&(s=r.ref),r)a.call(r,o)&&!l.hasOwnProperty(o)&&(i[o]=r[o]);if(e&&e.defaultProps)for(o in r=e.defaultProps)void 0===i[o]&&(i[o]=r[o]);return{$$typeof:n,type:e,key:f,ref:s,props:i,_owner:c.current}}r.jsx=f,r.jsxs=f},724:(e,r,t)=>{e.exports=t(638)},787:r=>{r.exports=e}},t={};function o(e){var n=t[e];if(void 0!==n)return n.exports;var i=t[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{function e(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function r(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function t(t){for(var o=1;o<arguments.length;o++){var n=null!=arguments[o]?arguments[o]:{};o%2?r(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function i(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}o.r(n),o.d(n,{default:()=>l});o(787);var c=o(724),a=["size","fixed","bottom","zIndex","className","bgColor","color","position"];function l(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=e.size,o=void 0===r?80:r,n=e.fixed,l=void 0!==n&&n,f=e.bottom,s=e.zIndex,u=e.className,p=e.bgColor,b=void 0===p?"#151513":p,y=e.color,d=void 0===y?"#fff":y,O=e.position,j=void 0===O?"right":O,g=i(e,a),v="left"===j?{left:0,transform:"scale(-1, 1)"}:{right:0};return f&&(v.bottom=0,v.top="initial",v.transform="left"===j?"scale(-1, -1)":"scale(1, -1)"),(0,c.jsx)("a",t(t({href:e.href,"aria-label":"View source on GitHub"},g),{},{className:"github-corner "+(u||""),children:(0,c.jsxs)("svg",{width:o,height:o,viewBox:"0 0 250 250",style:t({fill:b,color:d,position:l?"fixed":"absolute",border:0,top:0,zIndex:s},v),"aria-hidden":"true",children:[(0,c.jsx)("path",{d:"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"}),(0,c.jsx)("path",{d:"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2",fill:"currentColor",style:{transformOrigin:"130px 106px"},className:"octo-arm"}),(0,c.jsx)("path",{d:"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z",fill:"currentColor",className:"octo-body"})]})}))}})(),n})()}));
+!function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e(require("react")):"function"===typeof define&&define.amd?define(["react"],e):"object"===typeof exports?exports["@uiw/react-github-corners"]=e(require("react")):t["@uiw/react-github-corners"]=e(t.React)}(self,(function(t){return(()=>{"use strict";var e={512:t=>{var e=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;function n(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}t.exports=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},r=0;r<10;r++)e["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(e).map((function(t){return e[t]})).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach((function(t){o[t]=t})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(n){return!1}}()?Object.assign:function(t,i){for(var a,s,c=n(t),l=1;l<arguments.length;l++){for(var f in a=Object(arguments[l]))r.call(a,f)&&(c[f]=a[f]);if(e){s=e(a);for(var p=0;p<s.length;p++)o.call(a,s[p])&&(c[s[p]]=a[s[p]])}}return c}},298:(t,e,r)=>{r(512);var o=r(787),n=60103;if(60107,"function"===typeof Symbol&&Symbol.for){var i=Symbol.for;n=i("react.element"),i("react.fragment")}var a=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s=Object.prototype.hasOwnProperty,c={key:!0,ref:!0,__self:!0,__source:!0};function l(t,e,r){var o,i={},l=null,f=null;for(o in void 0!==r&&(l=""+r),void 0!==e.key&&(l=""+e.key),void 0!==e.ref&&(f=e.ref),e)s.call(e,o)&&!c.hasOwnProperty(o)&&(i[o]=e[o]);if(t&&t.defaultProps)for(o in e=t.defaultProps)void 0===i[o]&&(i[o]=e[o]);return{$$typeof:n,type:t,key:l,ref:f,props:i,_owner:a.current}}e.jsx=l},605:(t,e,r)=>{t.exports=r(298)},787:e=>{e.exports=t}},r={};function o(t){var n=r[t];if(void 0!==n)return n.exports;var i=r[t]={exports:{}};return e[t](i,i.exports,o),i.exports}o.d=(t,e)=>{for(var r in e)o.o(e,r)&&!o.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{function t(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function e(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,o)}return r}function r(r){for(var o=1;o<arguments.length;o++){var n=null!=arguments[o]?arguments[o]:{};o%2?e(Object(n),!0).forEach((function(e){t(r,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):e(Object(n)).forEach((function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(n,t))}))}return r}function i(t,e){if(null==t)return{};var r,o,n=function(t,e){if(null==t)return{};var r,o,n={},i=Object.keys(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(n[r]=t[r]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}o.r(n),o.d(n,{default:()=>f});o(787);const a=document.createElement("template");a.innerHTML='\n<style>\n:host a:hover .octo-arm {\n  animation: octocat-wave 560ms ease-in-out;\n}\n@keyframes octocat-wave {\n  0%, 100% {\n    transform: rotate(0);\n  }\n  20%, 60% {\n    transform: rotate(-25deg);\n  }\n  40%, 80% {\n    transform: rotate(10deg);\n  }\n}\n@media (max-width:500px) {\n  :host a:hover .octo-arm {\n    animation: none;\n  }\n  :host .octo-arm {\n    animation: octocat-wave 560ms ease-in-out;\n  }\n}\n</style>\n<a id="warpper">\n  <svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true" style="fill: rgb(21, 21, 19); color: rgb(255, 255, 255); position: absolute; border: 0px; top: 0px;">\n    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>\n    <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" class="octo-arm" style="transform-origin: 130px 106px;"></path>\n    <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>\n  </svg>\n</a>\n';class s extends HTMLElement{constructor(){super(),this.right="0",this.initDom()}static get observedAttributes(){return["z-index","height","width","href","color","fill","position","top","left","right","bottom","transform"]}initDom(){const t=this.attachShadow({mode:"open"});t.appendChild(this.ownerDocument.importNode(a.content,!0)),this.warpper=t.getElementById("warpper"),this.update()}update(){const t=this.warpper.querySelector("svg");[...this.getAttributeNames(),"right"].forEach((e=>{/(z-index|height|width|color|fill|position|top|left|right|bottom|transform)/.test(e.toLocaleLowerCase())?t.style[e]=this.getAttribute(e)||this[e]:this.warpper.setAttribute(e,this.getAttribute(e)||this[e])}))}attributeChangedCallback(t,e,r){this.update()}}customElements.define("github-corners",s);var c=o(605),l=["size","fixed","bottom","zIndex","className","style","bgColor","color","position"];function f(t){var e=t.size,o=void 0===e?80:e,n=t.fixed,a=void 0!==n&&n,s=t.bottom,f=t.zIndex,p=(t.className,t.style),u=t.bgColor,b=void 0===u?"#151513":u,d=t.color,h=void 0===d?"#fff":d,m=t.position,y=void 0===m?"right":m,g=i(t,l),O="left"===y?{left:0,right:"initial",transform:"scale(-1, 1)"}:{right:0,left:"initial",transform:"scale(1, 1)"};return s?(O.bottom=0,O.top="initial",O.transform="left"===y?"scale(-1, -1)":"scale(1, -1)"):(O.bottom="initial",O.top=0),(0,c.jsx)("github-corners",r(r({width:o,height:o,href:t.href,position:a?"fixed":"absolute","z-index":f,style:p,fill:b,color:h},O),g))}})(),n})()}));

esm/index.d.ts

 import React from 'react';
-import './style/index.css';
+import '@uiw/github-corners';
 export interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -40,2 +40,2 @@ /**
 }
-export default function githubCorners(props?: GitHubCornersProps): JSX.Element;
+export default function githubCorners(props: GitHubCornersProps): JSX.Element;

esm/index.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["size", "fixed", "bottom", "zIndex", "className", "bgColor", "color", "position"];
+var _excluded = ["size", "fixed", "bottom", "zIndex", "className", "style", "bgColor", "color", "position"];
 import React from 'react';
-import './style/index.css';
+import '@uiw/github-corners';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function githubCorners(props) {
-  if (props === void 0) {
-    props = {};
-  }
-
   var {
@@ -18,3 +13,3 @@ size = 80,
     zIndex,
-    className,
+    style,
     bgColor = '#151513',
@@ -28,5 +23,8 @@ color = '#fff',
     left: 0,
+    right: 'initial',
     transform: 'scale(-1, 1)'
   } : {
-    right: 0
+    right: 0,
+    left: 'initial',
+    transform: 'scale(1, 1)'
   };
@@ -38,39 +36,18 @@
     styl.transform = position === 'left' ? 'scale(-1, -1)' : 'scale(1, -1)';
+  } else {
+    styl.bottom = 'initial';
+    styl.top = 0;
   }
 
-  return /*#__PURE__*/_jsx("a", _extends({
+  return /*#__PURE__*/_jsx("github-corners", _extends({
+    width: size,
+    height: size,
     href: props.href,
-    "aria-label": "View source on GitHub"
-  }, otherProps, {
-    className: 'github-corner ' + (className || ''),
-    children: /*#__PURE__*/_jsxs("svg", {
-      width: size,
-      height: size,
-      viewBox: "0 0 250 250",
-      style: _extends({
-        fill: bgColor,
-        color: color,
-        position: fixed ? 'fixed' : 'absolute',
-        border: 0,
-        top: 0,
-        zIndex
-      }, styl),
-      "aria-hidden": "true",
-      children: [/*#__PURE__*/_jsx("path", {
-        d: "M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2",
-        fill: "currentColor",
-        style: {
-          transformOrigin: '130px 106px'
-        },
-        className: "octo-arm"
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z",
-        fill: "currentColor",
-        className: "octo-body"
-      })]
-    })
-  }));
+    position: fixed ? 'fixed' : 'absolute',
+    "z-index": zIndex,
+    style: style,
+    fill: bgColor,
+    color: color
+  }, styl, otherProps));
 }
 //# sourceMappingURL=index.js.map

esm/index.js.map

@@ -14,3 +14,3 @@ {
     "zIndex",
-    "className",
+    "style",
     "bgColor",
@@ -22,14 +22,11 @@ "color",
     "left",
+    "right",
     "transform",
-    "right",
     "top",
-    "href",
-    "fill",
-    "border",
-    "transformOrigin"
+    "href"
   ],
-  "mappings": ";;;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAO,mBAAP;;;AAwCA,eAAe,SAASC,aAAT,CAAuBC,KAAvB,EAAuD;AAAA,MAAhCA,KAAgC;AAAhCA,IAAAA,KAAgC,GAAJ,EAAI;AAAA;;AACpE,MAAM;AAAEC,IAAAA,IAAI,GAAG,EAAT;AAAaC,IAAAA,KAAK,GAAG,KAArB;AAA4BC,IAAAA,MAA5B;AAAoCC,IAAAA,MAApC;AAA4CC,IAAAA,SAA5C;AAAuDC,IAAAA,OAAO,GAAG,SAAjE;AAA4EC,IAAAA,KAAK,GAAG,MAApF;AAA4FC,IAAAA,QAAQ,GAAG;AAAvG,MAAkIR,KAAxI;AAAA,MAAyHS,UAAzH,iCAAwIT,KAAxI;;AACA,MAAMU,IAAyB,GAAGF,QAAQ,KAAK,MAAb,GAAsB;AAAEG,IAAAA,IAAI,EAAE,CAAR;AAAWC,IAAAA,SAAS,EAAE;AAAtB,GAAtB,GAA+D;AAAEC,IAAAA,KAAK,EAAE;AAAT,GAAjG;;AACA,MAAIV,MAAJ,EAAY;AACVO,IAAAA,IAAI,CAACP,MAAL,GAAc,CAAd;AACAO,IAAAA,IAAI,CAACI,GAAL,GAAW,SAAX;AACAJ,IAAAA,IAAI,CAACE,SAAL,GAAiBJ,QAAQ,KAAK,MAAb,GAAsB,eAAtB,GAAwC,cAAzD;AACD;;AACD,sBACE;AAAG,IAAA,IAAI,EAAER,KAAK,CAACe,IAAf;AAAqB,kBAAW;AAAhC,KAA4DN,UAA5D;AAAwE,IAAA,SAAS,EAAE,oBAAoBJ,SAAS,IAAI,EAAjC,CAAnF;AAAA,2BACE;AACE,MAAA,KAAK,EAAEJ,IADT;AAEE,MAAA,MAAM,EAAEA,IAFV;AAGE,MAAA,OAAO,EAAC,aAHV;AAIE,MAAA,KAAK;AACHe,QAAAA,IAAI,EAAEV,OADH;AAEHC,QAAAA,KAAK,EAAEA,KAFJ;AAGHC,QAAAA,QAAQ,EAAEN,KAAK,GAAG,OAAH,GAAa,UAHzB;AAIHe,QAAAA,MAAM,EAAE,CAJL;AAKHH,QAAAA,GAAG,EAAE,CALF;AAMHV,QAAAA;AANG,SAOAM,IAPA,CAJP;AAaE,qBAAY,MAbd;AAAA,8BAcE;AAAM,QAAA,CAAC,EAAC;AAAR,QAdF,eAeE;AACE,QAAA,CAAC,EAAC,0LADJ;AAEE,QAAA,IAAI,EAAC,cAFP;AAGE,QAAA,KAAK,EAAE;AAAEQ,UAAAA,eAAe,EAAE;AAAnB,SAHT;AAIE,QAAA,SAAS,EAAC;AAJZ,QAfF,eAqBE;AACE,QAAA,CAAC,EAAC,qhBADJ;AAEE,QAAA,IAAI,EAAC,cAFP;AAGE,QAAA,SAAS,EAAC;AAHZ,QArBF;AAAA;AADF,KADF;AA+BD",
+  "mappings": ";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAO,qBAAP;;AAwCA,eAAe,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAC/D,MAAM;AAAEC,IAAAA,IAAI,GAAG,EAAT;AAAaC,IAAAA,KAAK,GAAG,KAArB;AAA4BC,IAAAA,MAA5B;AAAoCC,IAAAA,MAApC;AAAuDC,IAAAA,KAAvD;AAA8DC,IAAAA,OAAO,GAAG,SAAxE;AAAmFC,IAAAA,KAAK,GAAG,MAA3F;AAAmGC,IAAAA,QAAQ,GAAG;AAA9G,MAAyIR,KAA/I;AAAA,MAAgIS,UAAhI,iCAA+IT,KAA/I;;AACA,MAAMU,IAAyB,GAAGF,QAAQ,KAAK,MAAb,GAAsB;AAAEG,IAAAA,IAAI,EAAE,CAAR;AAAWC,IAAAA,KAAK,EAAE,SAAlB;AAA6BC,IAAAA,SAAS,EAAE;AAAxC,GAAtB,GAAiF;AAAED,IAAAA,KAAK,EAAE,CAAT;AAAYD,IAAAA,IAAI,EAAE,SAAlB;AAA6BE,IAAAA,SAAS,EAAE;AAAxC,GAAnH;;AACA,MAAIV,MAAJ,EAAY;AACVO,IAAAA,IAAI,CAACP,MAAL,GAAc,CAAd;AACAO,IAAAA,IAAI,CAACI,GAAL,GAAW,SAAX;AACAJ,IAAAA,IAAI,CAACG,SAAL,GAAiBL,QAAQ,KAAK,MAAb,GAAsB,eAAtB,GAAwC,cAAzD;AACD,GAJD,MAIO;AACLE,IAAAA,IAAI,CAACP,MAAL,GAAc,SAAd;AACAO,IAAAA,IAAI,CAACI,GAAL,GAAW,CAAX;AACD;;AACD,sBACE;AAAgB,IAAA,KAAK,EAAEb,IAAvB;AAA6B,IAAA,MAAM,EAAEA,IAArC;AAA2C,IAAA,IAAI,EAAED,KAAK,CAACe,IAAvD;AAA6D,IAAA,QAAQ,EAAEb,KAAK,GAAG,OAAH,GAAa,UAAzF;AAAqG,eAASE,MAA9G;AAAsH,IAAA,KAAK,EAAEC,KAA7H;AAAoI,IAAA,IAAI,EAAEC,OAA1I;AAAmJ,IAAA,KAAK,EAAEC;AAA1J,KAAqKG,IAArK,EAA+KD,UAA/K,EADF;AAGD",
   "sourcesContent": [
-    "\nimport React from 'react';\nimport './style/index.css';\n\nexport interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The link to your project page.\n   */\n  href?: string;\n  /**\n   * The width and height of the corner. \n   * Default: `80`\n   */\n  size?: number;\n  /**\n   * The background color of the corner.\n   * Default: `#151513`\n   */\n  bgColor?: string;\n  /**\n   * The Github logo color of the corner.\n   * Default: `#fff`\n   */\n  color?: string;\n  /**\n   * The position of corner. \n   * Default: `right`\n   */\n  position?: 'left' | 'right';\n  /** Is it displayed at the bottom? */\n  bottom?: boolean,\n  /**\n   * It is positioned relative to the initial containing block established.\n   * Default: `false`\n   */\n  fixed?: boolean;\n  /**\n   * Sets the z-order of a positioned element and its descendants or flex items.\n   */\n  zIndex?: number;\n}\n\nexport default function githubCorners(props: GitHubCornersProps = {}) {\n  const { size = 80, fixed = false, bottom, zIndex, className, bgColor = '#151513', color = '#fff', position = 'right', ...otherProps } = props;\n  const styl: React.CSSProperties = position === 'left' ? { left: 0, transform: 'scale(-1, 1)' } : { right: 0 };\n  if (bottom) {\n    styl.bottom = 0;\n    styl.top = 'initial';\n    styl.transform = position === 'left' ? 'scale(-1, -1)' : 'scale(1, -1)';\n  }\n  return (\n    <a href={props.href} aria-label=\"View source on GitHub\" {...otherProps} className={'github-corner ' + (className || '')} >\n      <svg\n        width={size}\n        height={size}\n        viewBox=\"0 0 250 250\"\n        style={{\n          fill: bgColor,\n          color: color,\n          position: fixed ? 'fixed' : 'absolute',\n          border: 0,\n          top: 0,\n          zIndex,\n          ...styl,\n        }}\n        aria-hidden=\"true\">\n        <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\" />\n        <path\n          d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n          fill=\"currentColor\"\n          style={{ transformOrigin: '130px 106px' }}\n          className=\"octo-arm\"\n        />\n        <path\n          d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n          fill=\"currentColor\"\n          className=\"octo-body\"\n        />\n      </svg>\n    </a>\n  )\n}"
+    "import React from 'react';\nimport '@uiw/github-corners';\n\nexport interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The link to your project page.\n   */\n  href?: string;\n  /**\n   * The width and height of the corner. \n   * Default: `80`\n   */\n  size?: number;\n  /**\n   * The background color of the corner.\n   * Default: `#151513`\n   */\n  bgColor?: string;\n  /**\n   * The Github logo color of the corner.\n   * Default: `#fff`\n   */\n  color?: string;\n  /**\n   * The position of corner. \n   * Default: `right`\n   */\n  position?: 'left' | 'right';\n  /** Is it displayed at the bottom? */\n  bottom?: boolean,\n  /** \n   * It is positioned relative to the initial containing block established.\n   * Default: `false`\n   */\n  fixed?: boolean;\n  /**\n   * Sets the z-order of a positioned element and its descendants or flex items.\n   */\n  zIndex?: number;\n}\n\nexport default function githubCorners(props: GitHubCornersProps) {\n  const { size = 80, fixed = false, bottom, zIndex, className, style, bgColor = '#151513', color = '#fff', position = 'right', ...otherProps } = props;\n  const styl: React.CSSProperties = position === 'left' ? { left: 0, right: 'initial', transform: 'scale(-1, 1)' } : { right: 0, left: 'initial', transform: 'scale(1, 1)' };\n  if (bottom) {\n    styl.bottom = 0;\n    styl.top = 'initial';\n    styl.transform = position === 'left' ? 'scale(-1, -1)' : 'scale(1, -1)';\n  } else {\n    styl.bottom = 'initial';\n    styl.top = 0;\n  }\n  return (\n    <github-corners width={size} height={size} href={props.href} position={fixed ? 'fixed' : 'absolute'} z-index={zIndex} style={style} fill={bgColor} color={color} {...styl} {...otherProps}></github-corners>\n  );\n}"
   ]
 }

package.json

 {
   "name": "@uiw/react-github-corners",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "description": "Add a Github corner to your project page, This GitHub corners for react component.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
-  "scripts": {
-    "prepare": "npm run build",
-    "doc": "kkt build --app-src ./website",
-    "start": "kkt start --app-src ./website",
-    "bundle": "ncc build src/index.tsx --target web --filename github-corners",
-    "bundle:min": "ncc build src/index.tsx --target web --filename github-corners --minify",
-    "css:build": "compile-less -d src -o esm",
-    "css:watch": "compile-less -d src -o esm --watch",
-    "css:build:dist": "compile-less -d src --combine dist.css --rm-global",
-    "watch": "tsbb watch",
-    "build": "tsbb build && npm run css:build && npm run css:build:dist"
-  },
   "homepage": "https://uiwjs.github.io/react-github-corners",
@@ -26,6 +14,2 @@ "repository": {
   "license": "MIT",
-  "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
   "files": [
@@ -38,18 +22,19 @@ "dist",
   ],
+  "keywords": [
+    "react",
+    "github-corners",
+    "react-github-corners"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@uiw/github-corners": "1.5.5"
+  },
   "devDependencies": {
-    "@kkt/ncc": "~1.0.13",
-    "@kkt/raw-modules": "~7.1.1",
-    "@kkt/scope-plugin-options": "~7.1.1",
     "@types/react": "~17.0.43",
     "@types/react-dom": "~17.0.14",
-    "@uiw/react-color-sketch": "~1.0.10",
-    "@uiw/react-markdown-preview": "~4.0.5",
-    "@uiw/react-shields": "~1.1.2",
-    "@uiw/reset.css": "~1.0.6",
-    "@wcj/dark-mode": "~1.0.13",
-    "compile-less-cli": "~1.8.11",
-    "kkt": "~7.1.5",
     "react": "~17.0.2",
-    "react-dom": "~17.0.2",
-    "tsbb": "~3.7.2"
+    "react-dom": "~17.0.2"
   },
@@ -56,0 +41,0 @@ "eslintConfig": {

README.md

@@ -5,10 +5,8 @@ react-github-corners
 
-[![](https://img.shields.io/github/issues/uiwjs/react-github-corners.svg)](https://github.com/uiwjs/react-github-corners/issues)
-[![](https://img.shields.io/github/forks/uiwjs/react-github-corners.svg)](https://github.com/uiwjs/react-github-corners/network)
-[![](https://img.shields.io/github/stars/uiwjs/react-github-corners.svg)](https://github.com/uiwjs/react-github-corners/stargazers)
-[![](https://img.shields.io/github/v/release/uiwjs/react-github-corners.svg)](https://github.com/uiwjs/react-github-corners/releases)
-[![](https://img.shields.io/npm/v/@uiw/react-github-corners.svg)](https://www.npmjs.com/package/@uiw/react-github-corners)
-[![](https://jaywcjlove.github.io/sb/ico/gitee.svg)](https://gitee.com/uiw/react-github-corners)
+[![CI](https://github.com/uiwjs/react-github-corners/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-github-corners/actions/workflows/ci.yml)
+[![jsDelivr CDN](https://data.jsdelivr.com/v1/package/npm/@uiw/react-github-corners/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@uiw/react-github-corners)
+[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-github-corners.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-github-corners)
+[![npm version](https://img.shields.io/npm/v/@uiw/react-github-corners.svg)](https://www.npmjs.com/package/@uiw/react-github-corners)
+[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-github-corners/file/README.md)
 
-
 Add a Github corner to your project page, This [GitHub corners](https://uiwjs.github.io/react-github-corners) for [**@react**](https://github.com/facebook/react) component. Visit [https://uiwjs.github.io/react-github-corners](https://uiwjs.github.io/react-github-corners) to preview the example effects.
@@ -18,2 +16,4 @@
 
+## Installation
+
 ```bash
@@ -25,2 +25,28 @@ npm install --save @uiw/react-github-corners
 
+Or use Web Components
+
+```bash
+npm install --save @uiw/github-corners
+```
+
+Or load the ES module directly through unpkg
+
+unpkg.com CDN:
+
+```html
+<script type="module" src="https://unpkg.com/@uiw/github-corners?module"></script>
+```
+
+Skypack CDN:
+
+```html
+<script type="module" src="https://cdn.skypack.dev/@uiw/github-corners"></script>
+```
+
+JSPM CDN:
+
+```html
+<script type="module" src="https://jspm.dev/@uiw/github-corners"></script>
+```
+
 ## Usage
@@ -41,4 +67,27 @@
 
-## Props
+Use it in your HTML:
 
+```html
+<github-corners></github-corners>
+```
+
+Learn about web components [here](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
+
+[![npm version](https://img.shields.io/npm/v/@uiw/github-corners.svg?label=github-corners)](https://www.npmjs.com/package/@uiw/github-corners)
+
+Using web components in React:
+
+```jsx
+import React from 'react';
+import '@uiw/github-corners';
+
+function Demo() {
+  return (
+    <github-corners></github-corners>
+  );
+}
+```
+
+## React Props
+
 ```typescript
@@ -98,5 +147,5 @@ interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
 # Step 1, run first, listen to the component compile and output the .js file
-npm run build
+npm run hoist
 # Step 2, listen for compilation output type .d.ts file
-npm run watch
+npm run watch 
 npm run css:watch
@@ -110,3 +159,3 @@ # Step 3, development mode, listen to compile preview website instance
 ```bash
-npm run build
+npm run build:all
 npm run doc
@@ -118,4 +167,14 @@ ```
 
+## Contributors
+
+As always, thanks to our amazing contributors!
+
+<a href="https://github.com/uiwjs/react-github-corners/graphs/contributors">
+  <img src="https://uiwjs.github.io/react-github-corners/CONTRIBUTORS.svg" />
+</a>
+
+Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).
+
 ## License
 
 Licensed under the MIT License.

src/index.tsx

@@ -1,4 +0,3 @@
-
 import React from 'react';
-import './style/index.css';
+import '@uiw/github-corners';
 
@@ -32,3 +31,3 @@ export interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   bottom?: boolean,
-  /**
+  /** 
    * It is positioned relative to the initial containing block established.
@@ -44,5 +43,5 @@ * Default: `false`
 
-export default function githubCorners(props: GitHubCornersProps = {}) {
-  const { size = 80, fixed = false, bottom, zIndex, className, bgColor = '#151513', color = '#fff', position = 'right', ...otherProps } = props;
-  const styl: React.CSSProperties = position === 'left' ? { left: 0, transform: 'scale(-1, 1)' } : { right: 0 };
+export default function githubCorners(props: GitHubCornersProps) {
+  const { size = 80, fixed = false, bottom, zIndex, className, style, bgColor = '#151513', color = '#fff', position = 'right', ...otherProps } = props;
+  const styl: React.CSSProperties = position === 'left' ? { left: 0, right: 'initial', transform: 'scale(-1, 1)' } : { right: 0, left: 'initial', transform: 'scale(1, 1)' };
   if (bottom) {
@@ -52,34 +51,9 @@ styl.bottom = 0;
     styl.transform = position === 'left' ? 'scale(-1, -1)' : 'scale(1, -1)';
+  } else {
+    styl.bottom = 'initial';
+    styl.top = 0;
   }
   return (
-    <a href={props.href} aria-label="View source on GitHub" {...otherProps} className={'github-corner ' + (className || '')} >
-      <svg
-        width={size}
-        height={size}
-        viewBox="0 0 250 250"
-        style={{
-          fill: bgColor,
-          color: color,
-          position: fixed ? 'fixed' : 'absolute',
-          border: 0,
-          top: 0,
-          zIndex,
-          ...styl,
-        }}
-        aria-hidden="true">
-        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
-        <path
-          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
-          fill="currentColor"
-          style={{ transformOrigin: '130px 106px' }}
-          className="octo-arm"
-        />
-        <path
-          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
-          fill="currentColor"
-          className="octo-body"
-        />
-      </svg>
-    </a>
-  )
+    <github-corners width={size} height={size} href={props.href} position={fixed ? 'fixed' : 'absolute'} z-index={zIndex} style={style} fill={bgColor} color={color} {...styl} {...otherProps}></github-corners>
+  );
 }

cjs/style/index.css

-.github-corner:hover .octo-arm {
-  animation: octocat-wave 560ms ease-in-out;
-}
-
-@keyframes octocat-wave{
-  0%, 100%{
-    transform: rotate(0);
-  }
-  20%, 60%{
-    transform: rotate(-25deg);
-  }
-  40%, 80%{
-    transform: rotate(10deg);
-  }
-}
-@media (max-width:500px){
-  .github-corner:hover .octo-arm{
-    animation: none;
-  }
-  .github-corner .octo-arm{
-    animation: octocat-wave 560ms ease-in-out;
-  }
-}

dist.css

-.github-corner:hover .octo-arm {
-  -webkit-animation: octocat-wave 560ms ease-in-out;
-          animation: octocat-wave 560ms ease-in-out;
-}
-@-webkit-keyframes octocat-wave {
-  0%,
-  100% {
-    -webkit-transform: rotate(0);
-            transform: rotate(0);
-  }
-  20%,
-  60% {
-    -webkit-transform: rotate(-25deg);
-            transform: rotate(-25deg);
-  }
-  40%,
-  80% {
-    -webkit-transform: rotate(10deg);
-            transform: rotate(10deg);
-  }
-}
-@keyframes octocat-wave {
-  0%,
-  100% {
-    -webkit-transform: rotate(0);
-            transform: rotate(0);
-  }
-  20%,
-  60% {
-    -webkit-transform: rotate(-25deg);
-            transform: rotate(-25deg);
-  }
-  40%,
-  80% {
-    -webkit-transform: rotate(10deg);
-            transform: rotate(10deg);
-  }
-}
-@media (max-width: 500px) {
-  .github-corner:hover .octo-arm {
-    -webkit-animation: none;
-            animation: none;
-  }
-  .github-corner .octo-arm {
-    -webkit-animation: octocat-wave 560ms ease-in-out;
-            animation: octocat-wave 560ms ease-in-out;
-  }
-}

dist/github-corners.css

-.github-corner:hover .octo-arm {
-  -webkit-animation: octocat-wave 560ms ease-in-out;
-          animation: octocat-wave 560ms ease-in-out;
-}
-
-@-webkit-keyframes octocat-wave{
-  0%, 100%{
-    -webkit-transform: rotate(0);
-            transform: rotate(0);
-  }
-  20%, 60%{
-    -webkit-transform: rotate(-25deg);
-            transform: rotate(-25deg);
-  }
-  40%, 80%{
-    -webkit-transform: rotate(10deg);
-            transform: rotate(10deg);
-  }
-}
-
-@keyframes octocat-wave{
-  0%, 100%{
-    -webkit-transform: rotate(0);
-            transform: rotate(0);
-  }
-  20%, 60%{
-    -webkit-transform: rotate(-25deg);
-            transform: rotate(-25deg);
-  }
-  40%, 80%{
-    -webkit-transform: rotate(10deg);
-            transform: rotate(10deg);
-  }
-}
-@media (max-width:500px){
-  .github-corner:hover .octo-arm{
-    -webkit-animation: none;
-            animation: none;
-  }
-  .github-corner .octo-arm{
-    -webkit-animation: octocat-wave 560ms ease-in-out;
-            animation: octocat-wave 560ms ease-in-out;
-  }
-}

dist/github-corners.min.css

-.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}@-webkit-keyframes octocat-wave{0%,to{-webkit-transform:rotate(0);transform:rotate(0)}20%,60%{-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}40%,80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{-webkit-transform:rotate(0);transform:rotate(0)}20%,60%{-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}40%,80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{-webkit-animation:none;animation:none}.github-corner .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}}

esm/style/index.css

-.github-corner:hover .octo-arm {
-  -webkit-animation: octocat-wave 560ms ease-in-out;
-          animation: octocat-wave 560ms ease-in-out;
-}
-@-webkit-keyframes octocat-wave {
-  0%,
-  100% {
-    -webkit-transform: rotate(0);
-            transform: rotate(0);
-  }
-  20%,
-  60% {
-    -webkit-transform: rotate(-25deg);
-            transform: rotate(-25deg);
-  }
-  40%,
-  80% {
-    -webkit-transform: rotate(10deg);
-            transform: rotate(10deg);
-  }
-}
-@keyframes octocat-wave {
-  0%,
-  100% {
-    -webkit-transform: rotate(0);
-            transform: rotate(0);
-  }
-  20%,
-  60% {
-    -webkit-transform: rotate(-25deg);
-            transform: rotate(-25deg);
-  }
-  40%,
-  80% {
-    -webkit-transform: rotate(10deg);
-            transform: rotate(10deg);
-  }
-}
-@media (max-width: 500px) {
-  .github-corner:hover .octo-arm {
-    -webkit-animation: none;
-            animation: none;
-  }
-  .github-corner .octo-arm {
-    -webkit-animation: octocat-wave 560ms ease-in-out;
-            animation: octocat-wave 560ms ease-in-out;
-  }
-}

LICENSE

-MIT License
-
-Copyright (c) 2020 uiw
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

src/react-app-env.d.ts

-/// <reference types="react-scripts" />

src/style/index.css

-.github-corner:hover .octo-arm {
-  animation: octocat-wave 560ms ease-in-out;
-}
-
-@keyframes octocat-wave{
-  0%, 100%{
-    transform: rotate(0);
-  }
-  20%, 60%{
-    transform: rotate(-25deg);
-  }
-  40%, 80%{
-    transform: rotate(10deg);
-  }
-}
-@media (max-width:500px){
-  .github-corner:hover .octo-arm{
-    animation: none;
-  }
-  .github-corner .octo-arm{
-    animation: octocat-wave 560ms ease-in-out;
-  }
-}

src/tsconfig.json

-{
-  "extends": "../tsconfig",
-  "include": ["../src"],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "outDir": "../cjs",
-    "emitDeclarationOnly": true,
-    "noEmit": false
-  }
-}

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

4

-73.33%

Number of lines in readme file

174

51.3%

Worsened metrics

Total package byte prevSize

41483

-17.34%

Dependency count

3

50%

Number of package files

12

-42.86%

Lines of code

579

-24.12%

Number of low supply chain risk alerts

4

100%

Dependency changes

• + Added

  @uiw/github-corners@1.5.5

• + Added

  @uiw/github-corners@1.5.5
  (transitive)