@elvia/elvis-spotlight 1.4.1 → 1.4.3

package/dist/react/js/elvia-spotlight.js

@@ -2,83 +2,5 @@
  * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
  * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
  */
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = require("./styledComponents");
-
-var _useLockBodyScroll = require("./useLockBodyScroll");
-
-var _excluded = ["position", "shape", "radius", "hasLockBodyScroll", "transitionDuration", "rectangleProps", "className", "inlineStyle"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-var Spotlight = function Spotlight(_ref) {
-  var position = _ref.position,
-      _ref$shape = _ref.shape,
-      shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
-      _ref$radius = _ref.radius,
-      radius = _ref$radius === void 0 ? 200 : _ref$radius,
-      _ref$hasLockBodyScrol = _ref.hasLockBodyScroll,
-      hasLockBodyScroll = _ref$hasLockBodyScrol === void 0 ? true : _ref$hasLockBodyScrol,
-      _ref$transitionDurati = _ref.transitionDuration,
-      transitionDuration = _ref$transitionDurati === void 0 ? '350ms' : _ref$transitionDurati,
-      _ref$rectangleProps = _ref.rectangleProps,
-      rectangleProps = _ref$rectangleProps === void 0 ? {
-    width: 200,
-    height: 200,
-    borderRadius: 8
-  } : _ref$rectangleProps,
-      className = _ref.className,
-      inlineStyle = _ref.inlineStyle,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var hasPosition = position && position.horizontal !== undefined && position.vertical !== undefined;
-  (0, _useLockBodyScroll.useLockBodyScroll)(hasLockBodyScroll);
-  return hasPosition ? /*#__PURE__*/_react.default.createElement("div", _extends({
-    className: "".concat(className ? className : ''),
-    style: inlineStyle
-  }, rest), /*#__PURE__*/_react.default.createElement(_styledComponents.SpotlightArea, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("mask", {
-    id: "hole"
-  }, /*#__PURE__*/_react.default.createElement("rect", {
-    width: "100%",
-    height: "100%",
-    fill: "white"
-  }), shape === 'circle' ? /*#__PURE__*/_react.default.createElement(_styledComponents.SpotlightCircle, {
-    transitionDuration: transitionDuration,
-    r: radius,
-    cx: position.horizontal,
-    cy: position.vertical,
-    fill: "black"
-  }) : /*#__PURE__*/_react.default.createElement(_styledComponents.SpotlightRect, {
-    transitionDuration: transitionDuration,
-    width: rectangleProps.width,
-    height: rectangleProps.height,
-    x: position.horizontal,
-    y: position.vertical,
-    rx: rectangleProps.borderRadius,
-    ry: rectangleProps.borderRadius,
-    fill: "black"
-  }))), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "rgba(0,0,0,0.25)",
-    width: "100%",
-    height: "100%",
-    mask: "url(#hole)"
-  }))) : /*#__PURE__*/_react.default.createElement("div", null);
-};
-
-var _default = Spotlight;
-exports.default = _default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_styledComponents=require("./styledComponents"),_useLockBodyScroll=require("./useLockBodyScroll"),_excluded=["position","shape","radius","hasLockBodyScroll","transitionDuration","rectangleProps","className","inlineStyle"];function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}function _objectWithoutProperties(a,b){if(null==a)return{};var c,d,e=_objectWithoutPropertiesLoose(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],0<=b.indexOf(c)||Object.prototype.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}function _objectWithoutPropertiesLoose(a,b){if(null==a)return{};var c,d,e={},f=Object.keys(a);for(d=0;d<f.length;d++)c=f[d],0<=b.indexOf(c)||(e[c]=a[c]);return e}var Spotlight=function(a){var b=a.position,c=a.shape,d=void 0===c?"circle":c,e=a.radius,f=void 0===e?200:e,g=a.hasLockBodyScroll,h=a.transitionDuration,i=void 0===h?"350ms":h,j=a.rectangleProps,k=void 0===j?{width:200,height:200,borderRadius:8}:j,l=a.className,m=a.inlineStyle,n=_objectWithoutProperties(a,_excluded),o=b&&void 0!==b.horizontal&&void 0!==b.vertical;return(0,_useLockBodyScroll.useLockBodyScroll)(void 0===g||g),o?/*#__PURE__*/_react.default.createElement("div",_extends({className:"".concat(l?l:""),style:m},n),/*#__PURE__*/_react.default.createElement(_styledComponents.SpotlightArea,null,/*#__PURE__*/_react.default.createElement("defs",null,/*#__PURE__*/_react.default.createElement("mask",{id:"hole"},/*#__PURE__*/_react.default.createElement("rect",{width:"100%",height:"100%",fill:"white"}),"circle"===d?/*#__PURE__*/_react.default.createElement(_styledComponents.SpotlightCircle,{transitionDuration:i,r:f,cx:b.horizontal,cy:b.vertical,fill:"black"}):/*#__PURE__*/_react.default.createElement(_styledComponents.SpotlightRect,{transitionDuration:i,width:k.width,height:k.height,x:b.horizontal,y:b.vertical,rx:k.borderRadius,ry:k.borderRadius,fill:"black"}))),/*#__PURE__*/_react.default.createElement("rect",{fill:"rgba(0,0,0,0.25)",width:"100%",height:"100%",mask:"url(#hole)"}))):/*#__PURE__*/_react.default.createElement("div",null)},_default=Spotlight;exports.default=_default;
 //# sourceMappingURL=elvia-spotlight.js.map

package/dist/react/js/elvia-spotlight.js.map

@@ -1 +1 @@
-{"version":3,"sources":["elvia-spotlight.tsx"],"names":["Spotlight","position","shape","radius","hasLockBodyScroll","transitionDuration","rectangleProps","width","height","borderRadius","className","inlineStyle","rest","hasPosition","horizontal","undefined","vertical","useLockBodyScroll"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AA0BA,IAAMA,SAA6B,GAAG,SAAhCA,SAAgC,OAUhC;EAAA,IATJC,QASI,QATJA,QASI;EAAA,sBARJC,KAQI;EAAA,IARJA,KAQI,2BARI,QAQJ;EAAA,uBAPJC,MAOI;EAAA,IAPJA,MAOI,4BAPK,GAOL;EAAA,iCANJC,iBAMI;EAAA,IANJA,iBAMI,sCANgB,IAMhB;EAAA,iCALJC,kBAKI;EAAA,IALJA,kBAKI,sCALiB,OAKjB;EAAA,+BAJJC,cAII;EAAA,IAJJA,cAII,oCAJa;IAAEC,KAAK,EAAE,GAAT;IAAcC,MAAM,EAAE,GAAtB;IAA2BC,YAAY,EAAE;EAAzC,CAIb;EAAA,IAHJC,SAGI,QAHJA,SAGI;EAAA,IAFJC,WAEI,QAFJA,WAEI;EAAA,IADDC,IACC;;EACJ,IAAMC,WAAW,GAAGZ,QAAQ,IAAIA,QAAQ,CAACa,UAAT,KAAwBC,SAApC,IAAiDd,QAAQ,CAACe,QAAT,KAAsBD,SAA3F;EACA,IAAAE,oCAAA,EAAkBb,iBAAlB;EAEA,OAAOS,WAAW,gBAChB;IAAK,SAAS,YAAKH,SAAS,GAAGA,SAAH,GAAe,EAA7B,CAAd;IAAiD,KAAK,EAAEC;EAAxD,GAAyEC,IAAzE,gBACE,6BAAC,+BAAD,qBACE,wDACE;IAAM,EAAE,EAAC;EAAT,gBACE;IAAM,KAAK,EAAC,MAAZ;IAAmB,MAAM,EAAC,MAA1B;IAAiC,IAAI,EAAC;EAAtC,EADF,EAEGV,KAAK,KAAK,QAAV,gBACC,6BAAC,iCAAD;IACE,kBAAkB,EAAEG,kBADtB;IAEE,CAAC,EAAEF,MAFL;IAGE,EAAE,EAAEF,QAAQ,CAACa,UAHf;IAIE,EAAE,EAAEb,QAAQ,CAACe,QAJf;IAKE,IAAI,EAAC;EALP,EADD,gBASC,6BAAC,+BAAD;IACE,kBAAkB,EAAEX,kBADtB;IAEE,KAAK,EAAEC,cAAc,CAACC,KAFxB;IAGE,MAAM,EAAED,cAAc,CAACE,MAHzB;IAIE,CAAC,EAAEP,QAAQ,CAACa,UAJd;IAKE,CAAC,EAAEb,QAAQ,CAACe,QALd;IAME,EAAE,EAAEV,cAAc,CAACG,YANrB;IAOE,EAAE,EAAEH,cAAc,CAACG,YAPrB;IAQE,IAAI,EAAC;EARP,EAXJ,CADF,CADF,eA0BE;IAAM,IAAI,EAAC,kBAAX;IAA8B,KAAK,EAAC,MAApC;IAA2C,MAAM,EAAC,MAAlD;IAAyD,IAAI,EAAC;EAA9D,EA1BF,CADF,CADgB,gBAgChB,yCAhCF;AAkCD,CAhDD;;eAkDeT,S","file":"elvia-spotlight.js","sourcesContent":["import React, { CSSProperties, FC } from 'react';\r\nimport { SpotlightArea, SpotlightCircle, SpotlightRect } from './styledComponents';\r\nimport { useLockBodyScroll } from './useLockBodyScroll';\r\n\r\nexport type SpotlightShape = 'circle' | 'rectangle';\r\n\r\nexport interface SpotlightPosition {\r\n  vertical: number;\r\n  horizontal: number;\r\n}\r\n\r\nexport interface SpotlightRectangleProps {\r\n  width?: number;\r\n  height?: number;\r\n  borderRadius?: number;\r\n}\r\n\r\nexport interface SpotlightProps {\r\n  position: SpotlightPosition | undefined;\r\n  shape?: SpotlightShape;\r\n  radius?: number;\r\n  rectangleProps?: SpotlightRectangleProps;\r\n  hasLockBodyScroll?: boolean;\r\n  transitionDuration?: string;\r\n  className?: string;\r\n  inlineStyle?: CSSProperties;\r\n}\r\n\r\nconst Spotlight: FC<SpotlightProps> = ({\r\n  position,\r\n  shape = 'circle',\r\n  radius = 200,\r\n  hasLockBodyScroll = true,\r\n  transitionDuration = '350ms',\r\n  rectangleProps = { width: 200, height: 200, borderRadius: 8 },\r\n  className,\r\n  inlineStyle,\r\n  ...rest\r\n}) => {\r\n  const hasPosition = position && position.horizontal !== undefined && position.vertical !== undefined;\r\n  useLockBodyScroll(hasLockBodyScroll);\r\n\r\n  return hasPosition ? (\r\n    <div className={`${className ? className : ''}`} style={inlineStyle} {...rest}>\r\n      <SpotlightArea>\r\n        <defs>\r\n          <mask id=\"hole\">\r\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\r\n            {shape === 'circle' ? (\r\n              <SpotlightCircle\r\n                transitionDuration={transitionDuration}\r\n                r={radius}\r\n                cx={position.horizontal}\r\n                cy={position.vertical}\r\n                fill=\"black\"\r\n              />\r\n            ) : (\r\n              <SpotlightRect\r\n                transitionDuration={transitionDuration}\r\n                width={rectangleProps.width}\r\n                height={rectangleProps.height}\r\n                x={position.horizontal}\r\n                y={position.vertical}\r\n                rx={rectangleProps.borderRadius}\r\n                ry={rectangleProps.borderRadius}\r\n                fill=\"black\"\r\n              />\r\n            )}\r\n          </mask>\r\n        </defs>\r\n        <rect fill=\"rgba(0,0,0,0.25)\" width=\"100%\" height=\"100%\" mask=\"url(#hole)\" />\r\n      </SpotlightArea>\r\n    </div>\r\n  ) : (\r\n    <div></div>\r\n  );\r\n};\r\n\r\nexport default Spotlight;\r\n"]}
+{"version":3,"sources":["elvia-spotlight.tsx"],"names":["Spotlight","position","shape","radius","hasLockBodyScroll","transitionDuration","rectangleProps","width","height","borderRadius","className","inlineStyle","rest","hasPosition","horizontal","vertical","useLockBodyScroll"],"mappings":";;;;onCA4BMA,UAA6B,CAAG,WAUhC,IATJC,EAAQ,GAARA,QAAQ,KACRC,KAAK,CAALA,CAAK,YAAG,QAAQ,OAChBC,MAAM,CAANA,CAAM,YAAG,GAAG,OACZC,iBAAiB,KACjBC,kBAAkB,CAAlBA,CAAkB,YAAG,OAAO,OAC5BC,cAAc,CAAdA,CAAc,YAAG,CAAEC,KAAK,CAAE,GAAG,CAAEC,MAAM,CAAE,GAAG,CAAEC,YAAY,CAAE,CAAE,CAAC,GAC7DC,CAAS,GAATA,SAAS,CACTC,CAAW,GAAXA,WAAW,CACRC,CAAI,uCAEDC,CAAW,CAAGZ,CAAQ,EAAI,SAAAA,CAAQ,CAACa,UAAwB,EAAI,SAAAb,CAAQ,CAACc,QAAsB,CAGpG,MAFA,GAAAC,oCAAiB,gBAAmB,CAE7BH,CAAW,cAChB,6CAAK,SAAS,WAAKH,CAAS,CAAGA,CAAS,CAAG,EAAE,CAAG,CAAC,KAAK,CAAEC,CAAY,EAAKC,CAAI,eAC3E,6BAAC,+BAAa,mBACZ,sDACE,qCAAM,EAAE,CAAC,MAAM,eACb,qCAAM,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAG,CACrC,QAAQ,GAAlBV,CAAkB,cACjB,6BAAC,iCAAe,EACd,kBAAkB,CAAEG,CAAmB,CACvC,CAAC,CAAEF,CAAO,CACV,EAAE,CAAEF,CAAQ,CAACa,UAAW,CACxB,EAAE,CAAEb,CAAQ,CAACc,QAAS,CACtB,IAAI,CAAC,OAAO,EACZ,cAEF,6BAAC,+BAAa,EACZ,kBAAkB,CAAEV,CAAmB,CACvC,KAAK,CAAEC,CAAc,CAACC,KAAM,CAC5B,MAAM,CAAED,CAAc,CAACE,MAAO,CAC9B,CAAC,CAAEP,CAAQ,CAACa,UAAW,CACvB,CAAC,CAAEb,CAAQ,CAACc,QAAS,CACrB,EAAE,CAAET,CAAc,CAACG,YAAa,CAChC,EAAE,CAAEH,CAAc,CAACG,YAAa,CAChC,IAAI,CAAC,OAAO,EAEf,CACI,CACF,cACP,qCAAM,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,EAAG,CAC/D,CACZ,cAEN,wCAEJ,CAAC,UAEcT,SAAS","file":"elvia-spotlight.js","sourcesContent":["import React, { CSSProperties, FC } from 'react';\nimport { SpotlightArea, SpotlightCircle, SpotlightRect } from './styledComponents';\nimport { useLockBodyScroll } from './useLockBodyScroll';\n\nexport type SpotlightShape = 'circle' | 'rectangle';\n\nexport interface SpotlightPosition {\n  vertical: number;\n  horizontal: number;\n}\n\nexport interface SpotlightRectangleProps {\n  width?: number;\n  height?: number;\n  borderRadius?: number;\n}\n\nexport interface SpotlightProps {\n  position: SpotlightPosition | undefined;\n  shape?: SpotlightShape;\n  radius?: number;\n  rectangleProps?: SpotlightRectangleProps;\n  hasLockBodyScroll?: boolean;\n  transitionDuration?: string;\n  className?: string;\n  inlineStyle?: CSSProperties;\n}\n\nconst Spotlight: FC<SpotlightProps> = ({\n  position,\n  shape = 'circle',\n  radius = 200,\n  hasLockBodyScroll = true,\n  transitionDuration = '350ms',\n  rectangleProps = { width: 200, height: 200, borderRadius: 8 },\n  className,\n  inlineStyle,\n  ...rest\n}) => {\n  const hasPosition = position && position.horizontal !== undefined && position.vertical !== undefined;\n  useLockBodyScroll(hasLockBodyScroll);\n\n  return hasPosition ? (\n    <div className={`${className ? className : ''}`} style={inlineStyle} {...rest}>\n      <SpotlightArea>\n        <defs>\n          <mask id=\"hole\">\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n            {shape === 'circle' ? (\n              <SpotlightCircle\n                transitionDuration={transitionDuration}\n                r={radius}\n                cx={position.horizontal}\n                cy={position.vertical}\n                fill=\"black\"\n              />\n            ) : (\n              <SpotlightRect\n                transitionDuration={transitionDuration}\n                width={rectangleProps.width}\n                height={rectangleProps.height}\n                x={position.horizontal}\n                y={position.vertical}\n                rx={rectangleProps.borderRadius}\n                ry={rectangleProps.borderRadius}\n                fill=\"black\"\n              />\n            )}\n          </mask>\n        </defs>\n        <rect fill=\"rgba(0,0,0,0.25)\" width=\"100%\" height=\"100%\" mask=\"url(#hole)\" />\n      </SpotlightArea>\n    </div>\n  ) : (\n    <div></div>\n  );\n};\n\nexport default Spotlight;\n"]}

package/dist/react/js/styledComponents.js

@@ -2,39 +2,5 @@
  * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
  * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
  */
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SpotlightRect = exports.SpotlightCircle = exports.SpotlightArea = void 0;
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var SpotlightArea = _styledComponents.default.svg.withConfig({
-  displayName: "styledComponents__SpotlightArea",
-  componentId: "sc-env4mw-0"
-})(["position:fixed;top:0;left:0;z-index:99999;width:100vw;height:100vh;"]);
-
-exports.SpotlightArea = SpotlightArea;
-
-var SpotlightCircle = _styledComponents.default.circle.withConfig({
-  displayName: "styledComponents__SpotlightCircle",
-  componentId: "sc-env4mw-1"
-})(["transition:all ", " ease-in-out;"], function (props) {
-  return props.transitionDuration;
-});
-
-exports.SpotlightCircle = SpotlightCircle;
-
-var SpotlightRect = _styledComponents.default.rect.withConfig({
-  displayName: "styledComponents__SpotlightRect",
-  componentId: "sc-env4mw-2"
-})(["transition:all ", " ease-in-out;"], function (props) {
-  return props.transitionDuration;
-});
-
-exports.SpotlightRect = SpotlightRect;
+"use strict";var _styledComponents=_interopRequireDefault(require("styled-components"));Object.defineProperty(exports,"__esModule",{value:!0}),exports.SpotlightRect=exports.SpotlightCircle=exports.SpotlightArea=void 0;function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}var SpotlightArea=_styledComponents.default.svg.withConfig({displayName:"styledComponents__SpotlightArea",componentId:"sc-env4mw-0"})(["position:fixed;top:0;left:0;z-index:99999;width:100vw;height:100vh;"]);exports.SpotlightArea=SpotlightArea;var SpotlightCircle=_styledComponents.default.circle.withConfig({displayName:"styledComponents__SpotlightCircle",componentId:"sc-env4mw-1"})(["transition:all "," ease-in-out;"],function(a){return a.transitionDuration});exports.SpotlightCircle=SpotlightCircle;var SpotlightRect=_styledComponents.default.rect.withConfig({displayName:"styledComponents__SpotlightRect",componentId:"sc-env4mw-2"})(["transition:all "," ease-in-out;"],function(a){return a.transitionDuration});exports.SpotlightRect=SpotlightRect;
 //# sourceMappingURL=styledComponents.js.map

package/dist/react/js/styledComponents.js.map

@@ -1 +1 @@
-{"version":3,"sources":["styledComponents.tsx"],"names":["SpotlightArea","styled","svg","SpotlightCircle","circle","props","transitionDuration","SpotlightRect","rect"],"mappings":";;;;;;;;;;;AAAA;;;;AAEO,IAAMA,aAAa,GAAGC,yBAAA,CAAOC,GAAV;EAAA;EAAA;AAAA,2EAAnB;;;;AAaA,IAAMC,eAAe,GAAGF,yBAAA,CAAOG,MAAV;EAAA;EAAA;AAAA,yCACR,UAACC,KAAD;EAAA,OAAWA,KAAK,CAACC,kBAAjB;AAAA,CADQ,CAArB;;;;AAOA,IAAMC,aAAa,GAAGN,yBAAA,CAAOO,IAAV;EAAA;EAAA;AAAA,yCACN,UAACH,KAAD;EAAA,OAAWA,KAAK,CAACC,kBAAjB;AAAA,CADM,CAAnB","file":"styledComponents.js","sourcesContent":["import styled from 'styled-components';\r\n\r\nexport const SpotlightArea = styled.svg`\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  z-index: 99999;\r\n  width: 100vw;\r\n  height: 100vh;\r\n`;\r\n\r\ninterface SpotlightCircleProps {\r\n  transitionDuration: string;\r\n}\r\n\r\nexport const SpotlightCircle = styled.circle<SpotlightCircleProps>`\r\n  transition: all ${(props) => props.transitionDuration} ease-in-out;\r\n`;\r\ninterface SpotlightRectProps {\r\n  transitionDuration: string;\r\n}\r\n\r\nexport const SpotlightRect = styled.rect<SpotlightRectProps>`\r\n  transition: all ${(props) => props.transitionDuration} ease-in-out;\r\n`;\r\n"]}
+{"version":3,"sources":["styledComponents.tsx"],"names":["SpotlightArea","styled","svg","SpotlightCircle","circle","props","transitionDuration","SpotlightRect","rect"],"mappings":";;;;aAAA,2EAAuC,0MAEhC,GAAMA,cAAa,CAAGC,yBAAM,CAACC,GAAG,+JAOtC,CAAC,oCAMK,GAAMC,gBAAe,CAAGF,yBAAM,CAACG,MAAM,6HACxB,SAACC,CAAK,QAAKA,EAAK,CAACC,kBAAkB,EACtD,CAAC,wCAKK,GAAMC,cAAa,CAAGN,yBAAM,CAACO,IAAI,2HACpB,SAACH,CAAK,QAAKA,EAAK,CAACC,kBAAkB,EACtD,CAAC","file":"styledComponents.js","sourcesContent":["import styled from 'styled-components';\n\nexport const SpotlightArea = styled.svg`\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 99999;\n  width: 100vw;\n  height: 100vh;\n`;\n\ninterface SpotlightCircleProps {\n  transitionDuration: string;\n}\n\nexport const SpotlightCircle = styled.circle<SpotlightCircleProps>`\n  transition: all ${(props) => props.transitionDuration} ease-in-out;\n`;\ninterface SpotlightRectProps {\n  transitionDuration: string;\n}\n\nexport const SpotlightRect = styled.rect<SpotlightRectProps>`\n  transition: all ${(props) => props.transitionDuration} ease-in-out;\n`;\n"]}

package/dist/react/js/useLockBodyScroll.js

@@ -2,33 +2,6 @@
  * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
  * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
  */
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useLockBodyScroll = useLockBodyScroll;
-
-var _react = require("react");
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-function useLockBodyScroll(removeLockBodyScroll) {
-  (0, _react.useEffect)(function () {
-    var originalStyleOverflowBody = window.getComputedStyle(document.body).overflow;
-    var originalStyleOverflowHtml = window.getComputedStyle(document.documentElement).overflow;
-
-    if (!removeLockBodyScroll) {
-      document.body.style.overflow = originalStyleOverflowBody;
-      document.documentElement.style.overflow = originalStyleOverflowHtml;
-      return;
-    }
-
-    document.body.style.overflow = 'hidden';
-    document.documentElement.style.overflow = 'hidden';
-    return function () {
-      document.body.style.overflow = originalStyleOverflowBody;
-      document.documentElement.style.overflow = originalStyleOverflowHtml;
-    };
-  }, [removeLockBodyScroll]);
-}
+"use strict";var _react=require("react");Object.defineProperty(exports,"__esModule",{value:!0}),exports.useLockBodyScroll=useLockBodyScroll;// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function useLockBodyScroll(a){(0,_react.useEffect)(function(){var b=window.getComputedStyle(document.body).overflow,c=window.getComputedStyle(document.documentElement).overflow;return a?(document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden",function(){document.body.style.overflow=b,document.documentElement.style.overflow=c}):(document.body.style.overflow=b,void(document.documentElement.style.overflow=c))},[a])}
 //# sourceMappingURL=useLockBodyScroll.js.map

package/dist/react/js/useLockBodyScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useLockBodyScroll.tsx"],"names":["useLockBodyScroll","removeLockBodyScroll","useEffect","originalStyleOverflowBody","window","getComputedStyle","document","body","overflow","originalStyleOverflowHtml","documentElement","style"],"mappings":";;;;;;;;;;;AAAA;;AAEA;AACO,SAASA,iBAAT,CAA2BC,oBAA3B,EAA0D;EAC/D,IAAAC,gBAAA,EAAU,YAAM;IACd,IAAMC,yBAAyB,GAAGC,MAAM,CAACC,gBAAP,CAAwBC,QAAQ,CAACC,IAAjC,EAAuCC,QAAzE;IACA,IAAMC,yBAAyB,GAAGL,MAAM,CAACC,gBAAP,CAAwBC,QAAQ,CAACI,eAAjC,EAAkDF,QAApF;;IACA,IAAI,CAACP,oBAAL,EAA2B;MACzBK,QAAQ,CAACC,IAAT,CAAcI,KAAd,CAAoBH,QAApB,GAA+BL,yBAA/B;MACAG,QAAQ,CAACI,eAAT,CAAyBC,KAAzB,CAA+BH,QAA/B,GAA0CC,yBAA1C;MACA;IACD;;IACDH,QAAQ,CAACC,IAAT,CAAcI,KAAd,CAAoBH,QAApB,GAA+B,QAA/B;IACAF,QAAQ,CAACI,eAAT,CAAyBC,KAAzB,CAA+BH,QAA/B,GAA0C,QAA1C;IAEA,OAAO,YAAM;MACXF,QAAQ,CAACC,IAAT,CAAcI,KAAd,CAAoBH,QAApB,GAA+BL,yBAA/B;MACAG,QAAQ,CAACI,eAAT,CAAyBC,KAAzB,CAA+BH,QAA/B,GAA0CC,yBAA1C;IACD,CAHD;EAID,CAfD,EAeG,CAACR,oBAAD,CAfH;AAgBD","file":"useLockBodyScroll.js","sourcesContent":["import { useEffect } from 'react';\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nexport function useLockBodyScroll(removeLockBodyScroll: boolean) {\n  useEffect(() => {\n    const originalStyleOverflowBody = window.getComputedStyle(document.body).overflow;\n    const originalStyleOverflowHtml = window.getComputedStyle(document.documentElement).overflow;\n    if (!removeLockBodyScroll) {\n      document.body.style.overflow = originalStyleOverflowBody;\n      document.documentElement.style.overflow = originalStyleOverflowHtml;\n      return;\n    }\n    document.body.style.overflow = 'hidden';\n    document.documentElement.style.overflow = 'hidden';\n\n    return () => {\n      document.body.style.overflow = originalStyleOverflowBody;\n      document.documentElement.style.overflow = originalStyleOverflowHtml;\n    };\n  }, [removeLockBodyScroll]);\n}\n"]}
+{"version":3,"sources":["useLockBodyScroll.tsx"],"names":["useLockBodyScroll","removeLockBodyScroll","useEffect","originalStyleOverflowBody","window","getComputedStyle","document","body","overflow","originalStyleOverflowHtml","documentElement","style"],"mappings":";;;;aAAA,4BAAkC,mGAElC;AACO,QAASA,kBAAiB,CAACC,CAA6B,CAAE,CAC/D,GAAAC,gBAAS,EAAC,UAAM,IACRC,EAAyB,CAAGC,MAAM,CAACC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,QAAQ,CAC3EC,CAAyB,CAAGL,MAAM,CAACC,gBAAgB,CAACC,QAAQ,CAACI,eAAe,CAAC,CAACF,QAAQ,OACvFP,EAAoB,EAKzBK,QAAQ,CAACC,IAAI,CAACI,KAAK,CAACH,QAAQ,CAAG,QAAQ,CACvCF,QAAQ,CAACI,eAAe,CAACC,KAAK,CAACH,QAAQ,CAAG,QAAQ,CAE3C,UAAM,CACXF,QAAQ,CAACC,IAAI,CAACI,KAAK,CAACH,QAAQ,CAAGL,CAAyB,CACxDG,QAAQ,CAACI,eAAe,CAACC,KAAK,CAACH,QAAQ,CAAGC,CAC5C,CAAC,GAVCH,QAAQ,CAACC,IAAI,CAACI,KAAK,CAACH,QAAQ,CAAGL,CAAyB,MACxDG,QAAQ,CAACI,eAAe,CAACC,KAAK,CAACH,QAAQ,CAAGC,CAAyB,EAUvE,CAAC,CAAE,CAACR,CAAoB,CAAC,CAC3B","file":"useLockBodyScroll.js","sourcesContent":["import { useEffect } from 'react';\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nexport function useLockBodyScroll(removeLockBodyScroll: boolean) {\n  useEffect(() => {\n    const originalStyleOverflowBody = window.getComputedStyle(document.body).overflow;\n    const originalStyleOverflowHtml = window.getComputedStyle(document.documentElement).overflow;\n    if (!removeLockBodyScroll) {\n      document.body.style.overflow = originalStyleOverflowBody;\n      document.documentElement.style.overflow = originalStyleOverflowHtml;\n      return;\n    }\n    document.body.style.overflow = 'hidden';\n    document.documentElement.style.overflow = 'hidden';\n\n    return () => {\n      document.body.style.overflow = originalStyleOverflowBody;\n      document.documentElement.style.overflow = originalStyleOverflowHtml;\n    };\n  }, [removeLockBodyScroll]);\n}\n"]}

package/dist/web_component/js/elvia-spotlight.js

@@ -4,189 +4,146 @@
  */
 import * as ReactComponent from '../../../react.js';
 import { ElvisComponentWrapper } from '@elvia/elvis-component-wrapper';
-const style = ``;
 export default class ElviaComponent extends ElvisComponentWrapper {
   static get observedAttributes() {
     return ["position", "shape", "radius", "rectangleprops", "haslockbodyscroll", "transitionduration", "classname", "inlinestyle"];
   }
-
   static getComponentData() {
     return {
-      "name": "elvis-spotlight",
-      "elementName": "elvia-spotlight",
+      "reactName": "Spotlight",
       "attributes": [{
         "name": "position",
-        "type": "object",
-        "propType": "object"
+        "type": "object"
       }, {
         "name": "shape",
-        "type": "string",
-        "propType": "string"
+        "type": "string"
       }, {
         "name": "radius",
-        "type": "number",
-        "propType": "number"
+        "type": "number"
       }, {
         "name": "rectangleProps",
-        "type": "object",
-        "propType": "object"
+        "type": "object"
       }, {
         "name": "hasLockBodyScroll",
-        "type": "boolean",
-        "propType": "boolean"
+        "type": "boolean"
       }, {
         "name": "transitionDuration",
-        "type": "string",
-        "propType": "boolean"
+        "type": "string"
       }, {
         "name": "className",
-        "type": "string",
-        "propType": "string | undefined"
+        "type": "string"
       }, {
         "name": "inlineStyle",
-        "type": "object",
-        "propType": "object | undefined"
-      }],
-      "reactName": "Spotlight",
-      "slotItems": false,
-      "useWrapper": false,
-      "reactTypescriptDeclaration": true
+        "type": "object"
+      }]
     };
   }
-
   set position(newValue) {
     super.setProps({
       'position': newValue
     });
   }
-
   get position() {
     return super.getProps()['position'];
   }
-
   set shape(newValue) {
     super.setProps({
       'shape': newValue
     });
   }
-
   get shape() {
     return super.getProps()['shape'];
   }
-
   set radius(newValue) {
     super.setProps({
       'radius': newValue
     });
   }
-
   get radius() {
     return super.getProps()['radius'];
   }
-
   set rectangleProps(newValue) {
     super.setProps({
       'rectangleprops': newValue
     });
   }
-
   get rectangleProps() {
     return super.getProps()['rectangleprops'];
   }
-
   set rectangleprops(newValue) {
     super.setProps({
       'rectangleprops': newValue
     });
   }
-
   get rectangleprops() {
     return super.getProps()['rectangleprops'];
   }
-
   set hasLockBodyScroll(newValue) {
     super.setProps({
       'haslockbodyscroll': newValue
     });
   }
-
   get hasLockBodyScroll() {
     return super.getProps()['haslockbodyscroll'];
   }
-
   set haslockbodyscroll(newValue) {
     super.setProps({
       'haslockbodyscroll': newValue
     });
   }
-
   get haslockbodyscroll() {
     return super.getProps()['haslockbodyscroll'];
   }
-
   set transitionDuration(newValue) {
     super.setProps({
       'transitionduration': newValue
     });
   }
-
   get transitionDuration() {
     return super.getProps()['transitionduration'];
   }
-
   set transitionduration(newValue) {
     super.setProps({
       'transitionduration': newValue
     });
   }
-
   get transitionduration() {
     return super.getProps()['transitionduration'];
   }
-
   set className(newValue) {
     super.setProps({
       'classname': newValue
     });
   }
-
   get className() {
     return super.getProps()['classname'];
   }
-
   set classname(newValue) {
     super.setProps({
       'classname': newValue
     });
   }
-
   get classname() {
     return super.getProps()['classname'];
   }
-
   set inlineStyle(newValue) {
     super.setProps({
       'inlinestyle': newValue
     });
   }
-
   get inlineStyle() {
     return super.getProps()['inlinestyle'];
   }
-
   set inlinestyle(newValue) {
     super.setProps({
       'inlinestyle': newValue
     });
   }
-
   get inlinestyle() {
     return super.getProps()['inlinestyle'];
   }
-
   constructor() {
-    super(ElviaComponent, ReactComponent['Spotlight'], style);
+    super(ElviaComponent, ReactComponent['Spotlight']);
   }
-
 }
 window.customElements.define(`elvia-spotlight`, ElviaComponent);

package/package.json

@@ -1,22 +1,25 @@
 {
   "name": "@elvia/elvis-spotlight",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "",
   "main": "web_component.js",
   "author": "",
   "license": "MIT",
+  "files": [
+    "web_component.js",
+    "react.js",
+    "react.d.ts",
+    "CHANGELOG.json",
+    "README.md",
+    "dist/**/*"
+  ],
   "dependencies": {
-    "@elvia/elvis-component-wrapper": "^2.3.0",
+    "@elvia/elvis-component-wrapper": "^3.0.3",
     "styled-components": "^5.3.3"
   },
-  "devDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
-    "react-is": ">= 16.8.0"
-  },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
-    "react-is": ">= 16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0"
   }
 }

package/src/react/elvia-spotlight.tsx

@@ -1,79 +0,0 @@
-import React, { CSSProperties, FC } from 'react';
-import { SpotlightArea, SpotlightCircle, SpotlightRect } from './styledComponents';
-import { useLockBodyScroll } from './useLockBodyScroll';
-
-export type SpotlightShape = 'circle' | 'rectangle';
-
-export interface SpotlightPosition {
-  vertical: number;
-  horizontal: number;
-}
-
-export interface SpotlightRectangleProps {
-  width?: number;
-  height?: number;
-  borderRadius?: number;
-}
-
-export interface SpotlightProps {
-  position: SpotlightPosition | undefined;
-  shape?: SpotlightShape;
-  radius?: number;
-  rectangleProps?: SpotlightRectangleProps;
-  hasLockBodyScroll?: boolean;
-  transitionDuration?: string;
-  className?: string;
-  inlineStyle?: CSSProperties;
-}
-
-const Spotlight: FC<SpotlightProps> = ({
-  position,
-  shape = 'circle',
-  radius = 200,
-  hasLockBodyScroll = true,
-  transitionDuration = '350ms',
-  rectangleProps = { width: 200, height: 200, borderRadius: 8 },
-  className,
-  inlineStyle,
-  ...rest
-}) => {
-  const hasPosition = position && position.horizontal !== undefined && position.vertical !== undefined;
-  useLockBodyScroll(hasLockBodyScroll);
-
-  return hasPosition ? (
-    <div className={`${className ? className : ''}`} style={inlineStyle} {...rest}>
-      <SpotlightArea>
-        <defs>
-          <mask id="hole">
-            <rect width="100%" height="100%" fill="white" />
-            {shape === 'circle' ? (
-              <SpotlightCircle
-                transitionDuration={transitionDuration}
-                r={radius}
-                cx={position.horizontal}
-                cy={position.vertical}
-                fill="black"
-              />
-            ) : (
-              <SpotlightRect
-                transitionDuration={transitionDuration}
-                width={rectangleProps.width}
-                height={rectangleProps.height}
-                x={position.horizontal}
-                y={position.vertical}
-                rx={rectangleProps.borderRadius}
-                ry={rectangleProps.borderRadius}
-                fill="black"
-              />
-            )}
-          </mask>
-        </defs>
-        <rect fill="rgba(0,0,0,0.25)" width="100%" height="100%" mask="url(#hole)" />
-      </SpotlightArea>
-    </div>
-  ) : (
-    <div></div>
-  );
-};
-
-export default Spotlight;

package/src/react/styledComponents.tsx

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-export const SpotlightArea = styled.svg`
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 99999;
-  width: 100vw;
-  height: 100vh;
-`;
-
-interface SpotlightCircleProps {
-  transitionDuration: string;
-}
-
-export const SpotlightCircle = styled.circle<SpotlightCircleProps>`
-  transition: all ${(props) => props.transitionDuration} ease-in-out;
-`;
-interface SpotlightRectProps {
-  transitionDuration: string;
-}
-
-export const SpotlightRect = styled.rect<SpotlightRectProps>`
-  transition: all ${(props) => props.transitionDuration} ease-in-out;
-`;

package/src/react/useLockBodyScroll.tsx

@@ -1,21 +0,0 @@
-import { useEffect } from 'react';
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function useLockBodyScroll(removeLockBodyScroll: boolean) {
-  useEffect(() => {
-    const originalStyleOverflowBody = window.getComputedStyle(document.body).overflow;
-    const originalStyleOverflowHtml = window.getComputedStyle(document.documentElement).overflow;
-    if (!removeLockBodyScroll) {
-      document.body.style.overflow = originalStyleOverflowBody;
-      document.documentElement.style.overflow = originalStyleOverflowHtml;
-      return;
-    }
-    document.body.style.overflow = 'hidden';
-    document.documentElement.style.overflow = 'hidden';
-
-    return () => {
-      document.body.style.overflow = originalStyleOverflowBody;
-      document.documentElement.style.overflow = originalStyleOverflowHtml;
-    };
-  }, [removeLockBodyScroll]);
-}