@elvia/elvis-spotlight 1.6.2 → 1.6.4

package/CHANGELOG.json

@@ -1,6 +1,32 @@
 {
   "$schema": "../../changelogSchema.json",
+  "name": "elvis-spotlight",
   "content": [
+    {
+      "date": "30.05.24",
+      "version": "1.6.4",
+      "changelog": [
+        {
+          "type": "patch",
+          "changes": [
+            "Now using <code>@emotion</code> for styling instead of <code>styled-components</code>.",
+            "Updated internal dependencies."
+          ]
+        }
+      ]
+    },
+    {
+      "date": "11.03.24",
+      "version": "1.6.3",
+      "changelog": [
+        {
+          "type": "bug_fix",
+          "changes": [
+            "Fixed a problem where the spotlight background would not resize when the window was resized."
+          ]
+        }
+      ]
+    },
     {
       "date": "06.10.23",
       "version": "1.6.2",

package/dist/main/web-component.js

@@ -0,0 +1,96 @@
+// components/elvis-spotlight/src/react/config.ts
+import * as ReactComponent from "../../react.js";
+import { ElvisComponentWrapper } from "@elvia/elvis-component-wrapper";
+var ElviaComponent = class _ElviaComponent extends ElvisComponentWrapper {
+  static get observedAttributes() {
+    return ["position", "shape", "radius", "rectangleprops", "haslockbodyscroll", "transitionduration", "classname", "inlinestyle"];
+  }
+  static getComponentData() {
+    return { "name": "Spotlight", "attributes": [{ "name": "position", "type": "object" }, { "name": "shape", "type": "string" }, { "name": "radius", "type": "number" }, { "name": "rectangleProps", "type": "object" }, { "name": "hasLockBodyScroll", "type": "boolean" }, { "name": "transitionDuration", "type": "string" }, { "name": "className", "type": "string" }, { "name": "inlineStyle", "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"]);
+  }
+};
+window.customElements.define(`elvia-spotlight`, ElviaComponent);
+export {
+  ElviaComponent as default
+};

package/dist/react/{js/elvia-spotlight.d.ts → elvia-spotlight.d.ts}

@@ -1,4 +1,4 @@
 import { FC } from 'react';
 import { SpotlightProps } from './elvia-spotlight.types';
-declare const Spotlight: FC<SpotlightProps>;
+export declare const Spotlight: FC<SpotlightProps>;
 export default Spotlight;

package/dist/react/elvia-spotlight.js

@@ -0,0 +1,90 @@
+// components/elvis-spotlight/src/react/elvia-spotlight.tsx
+import React from "react";
+
+// components/elvis-spotlight/src/react/styledComponents.tsx
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+var SpotlightArea = /* @__PURE__ */ _styled("svg", {
+  target: "e1uexsug3",
+  label: "SpotlightArea"
+})(false ? {
+  name: "8afq30",
+  styles: "position:fixed;top:0;left:0;z-index:99999;width:100vw;height:100vh"
+} : {
+  name: "8afq30",
+  styles: "position:fixed;top:0;left:0;z-index:99999;width:100vw;height:100vh",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZENvbXBvbmVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUV1QyIsImZpbGUiOiJzdHlsZWRDb21wb25lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IFNwb3RsaWdodEFyZWEgPSBzdHlsZWQuc3ZnYFxuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgei1pbmRleDogOTk5OTk7XG4gIHdpZHRoOiAxMDB2dztcbiAgaGVpZ2h0OiAxMDB2aDtcbmA7XG5cbmludGVyZmFjZSBTcG90bGlnaHRDaXJjbGVQcm9wcyB7XG4gIHRyYW5zaXRpb25EdXJhdGlvbjogc3RyaW5nO1xufVxuXG5leHBvcnQgY29uc3QgU3BvdGxpZ2h0Q2lyY2xlID0gc3R5bGVkLmNpcmNsZTxTcG90bGlnaHRDaXJjbGVQcm9wcz5gXG4gIHRyYW5zaXRpb246IGFsbCAkeyh7IHRyYW5zaXRpb25EdXJhdGlvbiB9KSA9PiB0cmFuc2l0aW9uRHVyYXRpb259IGVhc2UtaW4tb3V0O1xuYDtcbmludGVyZmFjZSBTcG90bGlnaHRSZWN0UHJvcHMge1xuICB0cmFuc2l0aW9uRHVyYXRpb246IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IFNwb3RsaWdodFJlY3QgPSBzdHlsZWQucmVjdDxTcG90bGlnaHRSZWN0UHJvcHM+YFxuICB0cmFuc2l0aW9uOiBhbGwgJHsoeyB0cmFuc2l0aW9uRHVyYXRpb24gfSkgPT4gdHJhbnNpdGlvbkR1cmF0aW9ufSBlYXNlLWluLW91dDtcbmA7XG5cbmV4cG9ydCBjb25zdCBTcG90bGlnaHRNYXNrID0gc3R5bGVkLnJlY3RgXG4gIC0tZXdjLXNwb3RsaWdodC1tYXNrLWZpbGw6IDAuMjU7XG4gIC5lLWNvbG9yLWJhY2tncm91bmQtMyAmJixcbiAgLmUtdGhlbWUtZGFyayAmJixcbiAgLmUtY29sb3ItYmFja2dyb3VuZC0zICYmIHtcbiAgICAtLWV3Yy1zcG90bGlnaHQtbWFzay1maWxsOiAwLjU7XG4gIH1cblxuICBmaWxsOiByZ2JhKDAsIDAsIDAsIHZhcigtLWV3Yy1zcG90bGlnaHQtbWFzay1maWxsKSk7XG4gIHdpZHRoOiAxMDB2dztcbiAgaGVpZ2h0OiAxMDB2aDtcbmA7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var SpotlightCircle = /* @__PURE__ */ _styled("circle", {
+  target: "e1uexsug2",
+  label: "SpotlightCircle"
+})("transition:all ", ({
+  transitionDuration
+}) => transitionDuration, " ease-in-out;" + (false ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZENvbXBvbmVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVrRSIsImZpbGUiOiJzdHlsZWRDb21wb25lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IFNwb3RsaWdodEFyZWEgPSBzdHlsZWQuc3ZnYFxuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgei1pbmRleDogOTk5OTk7XG4gIHdpZHRoOiAxMDB2dztcbiAgaGVpZ2h0OiAxMDB2aDtcbmA7XG5cbmludGVyZmFjZSBTcG90bGlnaHRDaXJjbGVQcm9wcyB7XG4gIHRyYW5zaXRpb25EdXJhdGlvbjogc3RyaW5nO1xufVxuXG5leHBvcnQgY29uc3QgU3BvdGxpZ2h0Q2lyY2xlID0gc3R5bGVkLmNpcmNsZTxTcG90bGlnaHRDaXJjbGVQcm9wcz5gXG4gIHRyYW5zaXRpb246IGFsbCAkeyh7IHRyYW5zaXRpb25EdXJhdGlvbiB9KSA9PiB0cmFuc2l0aW9uRHVyYXRpb259IGVhc2UtaW4tb3V0O1xuYDtcbmludGVyZmFjZSBTcG90bGlnaHRSZWN0UHJvcHMge1xuICB0cmFuc2l0aW9uRHVyYXRpb246IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IFNwb3RsaWdodFJlY3QgPSBzdHlsZWQucmVjdDxTcG90bGlnaHRSZWN0UHJvcHM+YFxuICB0cmFuc2l0aW9uOiBhbGwgJHsoeyB0cmFuc2l0aW9uRHVyYXRpb24gfSkgPT4gdHJhbnNpdGlvbkR1cmF0aW9ufSBlYXNlLWluLW91dDtcbmA7XG5cbmV4cG9ydCBjb25zdCBTcG90bGlnaHRNYXNrID0gc3R5bGVkLnJlY3RgXG4gIC0tZXdjLXNwb3RsaWdodC1tYXNrLWZpbGw6IDAuMjU7XG4gIC5lLWNvbG9yLWJhY2tncm91bmQtMyAmJixcbiAgLmUtdGhlbWUtZGFyayAmJixcbiAgLmUtY29sb3ItYmFja2dyb3VuZC0zICYmIHtcbiAgICAtLWV3Yy1zcG90bGlnaHQtbWFzay1maWxsOiAwLjU7XG4gIH1cblxuICBmaWxsOiByZ2JhKDAsIDAsIDAsIHZhcigtLWV3Yy1zcG90bGlnaHQtbWFzay1maWxsKSk7XG4gIHdpZHRoOiAxMDB2dztcbiAgaGVpZ2h0OiAxMDB2aDtcbmA7XG4iXX0= */"));
+var SpotlightRect = /* @__PURE__ */ _styled("rect", {
+  target: "e1uexsug1",
+  label: "SpotlightRect"
+})("transition:all ", ({
+  transitionDuration
+}) => transitionDuration, " ease-in-out;" + (false ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZENvbXBvbmVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCNEQiLCJmaWxlIjoic3R5bGVkQ29tcG9uZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBTcG90bGlnaHRBcmVhID0gc3R5bGVkLnN2Z2BcbiAgcG9zaXRpb246IGZpeGVkO1xuICB0b3A6IDA7XG4gIGxlZnQ6IDA7XG4gIHotaW5kZXg6IDk5OTk5O1xuICB3aWR0aDogMTAwdnc7XG4gIGhlaWdodDogMTAwdmg7XG5gO1xuXG5pbnRlcmZhY2UgU3BvdGxpZ2h0Q2lyY2xlUHJvcHMge1xuICB0cmFuc2l0aW9uRHVyYXRpb246IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IFNwb3RsaWdodENpcmNsZSA9IHN0eWxlZC5jaXJjbGU8U3BvdGxpZ2h0Q2lyY2xlUHJvcHM+YFxuICB0cmFuc2l0aW9uOiBhbGwgJHsoeyB0cmFuc2l0aW9uRHVyYXRpb24gfSkgPT4gdHJhbnNpdGlvbkR1cmF0aW9ufSBlYXNlLWluLW91dDtcbmA7XG5pbnRlcmZhY2UgU3BvdGxpZ2h0UmVjdFByb3BzIHtcbiAgdHJhbnNpdGlvbkR1cmF0aW9uOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBjb25zdCBTcG90bGlnaHRSZWN0ID0gc3R5bGVkLnJlY3Q8U3BvdGxpZ2h0UmVjdFByb3BzPmBcbiAgdHJhbnNpdGlvbjogYWxsICR7KHsgdHJhbnNpdGlvbkR1cmF0aW9uIH0pID0+IHRyYW5zaXRpb25EdXJhdGlvbn0gZWFzZS1pbi1vdXQ7XG5gO1xuXG5leHBvcnQgY29uc3QgU3BvdGxpZ2h0TWFzayA9IHN0eWxlZC5yZWN0YFxuICAtLWV3Yy1zcG90bGlnaHQtbWFzay1maWxsOiAwLjI1O1xuICAuZS1jb2xvci1iYWNrZ3JvdW5kLTMgJiYsXG4gIC5lLXRoZW1lLWRhcmsgJiYsXG4gIC5lLWNvbG9yLWJhY2tncm91bmQtMyAmJiB7XG4gICAgLS1ld2Mtc3BvdGxpZ2h0LW1hc2stZmlsbDogMC41O1xuICB9XG5cbiAgZmlsbDogcmdiYSgwLCAwLCAwLCB2YXIoLS1ld2Mtc3BvdGxpZ2h0LW1hc2stZmlsbCkpO1xuICB3aWR0aDogMTAwdnc7XG4gIGhlaWdodDogMTAwdmg7XG5gO1xuIl19 */"));
+var SpotlightMask = /* @__PURE__ */ _styled("rect", {
+  target: "e1uexsug0",
+  label: "SpotlightMask"
+})(false ? {
+  name: "j858q8",
+  styles: "--ewc-spotlight-mask-fill:0.25;.e-color-background-3 &&,.e-theme-dark &&,.e-color-background-3 &&{--ewc-spotlight-mask-fill:0.5;}fill:rgba(0, 0, 0, var(--ewc-spotlight-mask-fill));width:100vw;height:100vh"
+} : {
+  name: "j858q8",
+  styles: "--ewc-spotlight-mask-fill:0.25;.e-color-background-3 &&,.e-theme-dark &&,.e-color-background-3 &&{--ewc-spotlight-mask-fill:0.5;}fill:rgba(0, 0, 0, var(--ewc-spotlight-mask-fill));width:100vw;height:100vh",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZENvbXBvbmVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCd0MiLCJmaWxlIjoic3R5bGVkQ29tcG9uZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBTcG90bGlnaHRBcmVhID0gc3R5bGVkLnN2Z2BcbiAgcG9zaXRpb246IGZpeGVkO1xuICB0b3A6IDA7XG4gIGxlZnQ6IDA7XG4gIHotaW5kZXg6IDk5OTk5O1xuICB3aWR0aDogMTAwdnc7XG4gIGhlaWdodDogMTAwdmg7XG5gO1xuXG5pbnRlcmZhY2UgU3BvdGxpZ2h0Q2lyY2xlUHJvcHMge1xuICB0cmFuc2l0aW9uRHVyYXRpb246IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IFNwb3RsaWdodENpcmNsZSA9IHN0eWxlZC5jaXJjbGU8U3BvdGxpZ2h0Q2lyY2xlUHJvcHM+YFxuICB0cmFuc2l0aW9uOiBhbGwgJHsoeyB0cmFuc2l0aW9uRHVyYXRpb24gfSkgPT4gdHJhbnNpdGlvbkR1cmF0aW9ufSBlYXNlLWluLW91dDtcbmA7XG5pbnRlcmZhY2UgU3BvdGxpZ2h0UmVjdFByb3BzIHtcbiAgdHJhbnNpdGlvbkR1cmF0aW9uOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBjb25zdCBTcG90bGlnaHRSZWN0ID0gc3R5bGVkLnJlY3Q8U3BvdGxpZ2h0UmVjdFByb3BzPmBcbiAgdHJhbnNpdGlvbjogYWxsICR7KHsgdHJhbnNpdGlvbkR1cmF0aW9uIH0pID0+IHRyYW5zaXRpb25EdXJhdGlvbn0gZWFzZS1pbi1vdXQ7XG5gO1xuXG5leHBvcnQgY29uc3QgU3BvdGxpZ2h0TWFzayA9IHN0eWxlZC5yZWN0YFxuICAtLWV3Yy1zcG90bGlnaHQtbWFzay1maWxsOiAwLjI1O1xuICAuZS1jb2xvci1iYWNrZ3JvdW5kLTMgJiYsXG4gIC5lLXRoZW1lLWRhcmsgJiYsXG4gIC5lLWNvbG9yLWJhY2tncm91bmQtMyAmJiB7XG4gICAgLS1ld2Mtc3BvdGxpZ2h0LW1hc2stZmlsbDogMC41O1xuICB9XG5cbiAgZmlsbDogcmdiYSgwLCAwLCAwLCB2YXIoLS1ld2Mtc3BvdGxpZ2h0LW1hc2stZmlsbCkpO1xuICB3aWR0aDogMTAwdnc7XG4gIGhlaWdodDogMTAwdmg7XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+// components/elvis-spotlight/src/react/useLockBodyScroll.tsx
+import { useEffect } from "react";
+function useLockBodyScroll(removeLockBodyScroll) {
+  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]);
+}
+
+// components/elvis-spotlight/src/react/elvia-spotlight.tsx
+var Spotlight = ({
+  position,
+  shape = "circle",
+  radius = 200,
+  hasLockBodyScroll = true,
+  transitionDuration = "350ms",
+  rectangleProps = {
+    width: 200,
+    height: 200,
+    borderRadius: 8
+  },
+  className,
+  inlineStyle,
+  ...rest
+}) => {
+  const hasPosition = position && position.horizontal !== void 0 && position.vertical !== void 0;
+  useLockBodyScroll(hasLockBodyScroll);
+  return hasPosition ? /* @__PURE__ */ React.createElement("div", { className, style: inlineStyle, ...rest }, /* @__PURE__ */ React.createElement(SpotlightArea, null, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("mask", { id: "hole" }, /* @__PURE__ */ React.createElement("rect", { width: "100%", height: "100%", fill: "white" }), shape === "circle" ? /* @__PURE__ */ React.createElement(SpotlightCircle, { transitionDuration, r: radius, cx: position.horizontal, cy: position.vertical, fill: "black" }) : /* @__PURE__ */ React.createElement(SpotlightRect, { transitionDuration, width: rectangleProps.width, height: rectangleProps.height, x: position.horizontal, y: position.vertical, rx: rectangleProps.borderRadius, ry: rectangleProps.borderRadius, fill: "black" }))), /* @__PURE__ */ React.createElement(SpotlightMask, { mask: "url(#hole)" }))) : /* @__PURE__ */ React.createElement("div", null);
+};
+var elvia_spotlight_default = Spotlight;
+export {
+  Spotlight,
+  elvia_spotlight_default as default
+};

package/dist/react/{js/elvia-spotlight.types.d.ts → elvia-spotlight.types.d.ts}

@@ -10,10 +10,12 @@ export interface SpotlightRectangleProps {
     height?: number;
     borderRadius?: number;
 }
-export interface SpotlightProps extends ComponentPropsWithoutRef<'div'>, BaseProps, HasTransitionDuration {
+export interface BaseSpotlightProps extends BaseProps, HasTransitionDuration {
     position?: SpotlightPosition;
     shape?: SpotlightShape;
     radius?: number;
     rectangleProps?: SpotlightRectangleProps;
     hasLockBodyScroll?: boolean;
 }
+export interface SpotlightProps extends BaseSpotlightProps, ComponentPropsWithoutRef<'div'> {
+}

package/dist/react/styledComponents.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare const SpotlightArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGSVGElement>, {}>;
+interface SpotlightCircleProps {
+    transitionDuration: string;
+}
+export declare const SpotlightCircle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & SpotlightCircleProps, import("react").SVGProps<SVGCircleElement>, {}>;
+interface SpotlightRectProps {
+    transitionDuration: string;
+}
+export declare const SpotlightRect: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & SpotlightRectProps, import("react").SVGProps<SVGRectElement>, {}>;
+export declare const SpotlightMask: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGRectElement>, {}>;
+export {};

package/package.json

@@ -1,21 +1,25 @@
 {
   "name": "@elvia/elvis-spotlight",
-  "version": "1.6.2",
-  "main": "web_component.js",
+  "version": "1.6.4",
   "license": "MIT",
   "homepage": "https://design.elvia.io/components/spotlight",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/3lvia/designsystem.git",
+    "directory": "packages/components/components/elvis-spotlight"
+  },
+  "source": "src/react/elvia-spotlight.tsx",
+  "main": "dist/main/web-component.js",
   "files": [
-    "web_component.js",
     "react.js",
     "react.d.ts",
-    "CHANGELOG.json",
-    "README.md",
-    "dist/**/*"
+    "dist"
   ],
   "dependencies": {
-    "@elvia/elvis-component-wrapper": "^4.1.3",
-    "@elvia/elvis-toolbox": "^11.0.0",
-    "styled-components": "^5.3.3"
+    "@elvia/elvis-component-wrapper": "^4.2.0",
+    "@elvia/elvis-toolbox": "^12.0.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

package/react.d.ts

@@ -1,5 +1,2 @@
-declare module '@elvia/elvis-spotlight/react';
-export { default as Spotlight } from './dist/react/js/elvia-spotlight';
-export type { SpotlightProps } from './dist/react/js/elvia-spotlight.types';
-export type * from './dist/react/js/elvia-spotlight';
-export type * from './dist/react/js/elvia-spotlight.types';
+export * from './dist/react/elvia-spotlight';
+export * from './dist/react/elvia-spotlight.types';

package/react.js

@@ -1 +1 @@
-export { default as Spotlight } from './dist/react/js/elvia-spotlight';
+export * from './dist/react/elvia-spotlight.js';

package/dist/react/js/config.d.ts

@@ -1,2 +0,0 @@
-import { ComponentConfig } from '@elvia/elvis-toolbox';
-export declare const config: ComponentConfig;

package/dist/react/js/config.js

@@ -1,6 +0,0 @@
-/* 
- * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
- * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
- */
-export var config={name:"Spotlight",attributes:[{name:"position",type:"object"},{name:"shape",type:"string"},{name:"radius",type:"number"},{name:"rectangleProps",type:"object"},{name:"hasLockBodyScroll",type:"boolean"},{name:"transitionDuration",type:"string"},{name:"className",type:"string"},{name:"inlineStyle",type:"object"}]};
-//# sourceMappingURL=config.js.map

package/dist/react/js/config.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["config.ts"],"names":["config","name","attributes","type"],"mappings":";;;;AAEA,MAAO,IAAM,CAAAA,MAAuB,CAAG,CACrCC,IAAI,CAAE,WAAW,CACjBC,UAAU,CAAE,CACV,CAAED,IAAI,CAAE,UAAU,CAAEE,IAAI,CAAE,QAAS,CAAC,CACpC,CAAEF,IAAI,CAAE,OAAO,CAAEE,IAAI,CAAE,QAAS,CAAC,CACjC,CAAEF,IAAI,CAAE,QAAQ,CAAEE,IAAI,CAAE,QAAS,CAAC,CAClC,CAAEF,IAAI,CAAE,gBAAgB,CAAEE,IAAI,CAAE,QAAS,CAAC,CAC1C,CAAEF,IAAI,CAAE,mBAAmB,CAAEE,IAAI,CAAE,SAAU,CAAC,CAC9C,CAAEF,IAAI,CAAE,oBAAoB,CAAEE,IAAI,CAAE,QAAS,CAAC,CAC9C,CAAEF,IAAI,CAAE,WAAW,CAAEE,IAAI,CAAE,QAAS,CAAC,CACrC,CAAEF,IAAI,CAAE,aAAa,CAAEE,IAAI,CAAE,QAAS,CAAC,CAE3C,CAAC","file":"config.js","sourcesContent":["import { ComponentConfig } from '@elvia/elvis-toolbox';\n\nexport const config: ComponentConfig = {\n  name: 'Spotlight',\n  attributes: [\n    { name: 'position', type: 'object' },\n    { name: 'shape', type: 'string' },\n    { name: 'radius', type: 'number' },\n    { name: 'rectangleProps', type: 'object' },\n    { name: 'hasLockBodyScroll', type: 'boolean' },\n    { name: 'transitionDuration', type: 'string' },\n    { name: 'className', type: 'string' },\n    { name: 'inlineStyle', type: 'object' },\n  ],\n};\n"]}

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

@@ -1,6 +0,0 @@
-/* 
- * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
- * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
- */
-var _excluded=["position","shape","radius","hasLockBodyScroll","transitionDuration","rectangleProps","className","inlineStyle"];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}import React from"react";import{SpotlightArea,SpotlightCircle,SpotlightMask,SpotlightRect}from"./styledComponents";import{useLockBodyScroll}from"./useLockBodyScroll";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 useLockBodyScroll(void 0===g||g),o?/*#__PURE__*/React.createElement("div",_extends({className:l,style:m},n),/*#__PURE__*/React.createElement(SpotlightArea,null,/*#__PURE__*/React.createElement("defs",null,/*#__PURE__*/React.createElement("mask",{id:"hole"},/*#__PURE__*/React.createElement("rect",{width:"100%",height:"100%",fill:"white"}),"circle"===d?/*#__PURE__*/React.createElement(SpotlightCircle,{transitionDuration:i,r:f,cx:b.horizontal,cy:b.vertical,fill:"black"}):/*#__PURE__*/React.createElement(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.createElement(SpotlightMask,{mask:"url(#hole)"}))):/*#__PURE__*/React.createElement("div",null)};export default Spotlight;
-//# sourceMappingURL=elvia-spotlight.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["elvia-spotlight.tsx"],"names":["React","SpotlightArea","SpotlightCircle","SpotlightMask","SpotlightRect","useLockBodyScroll","Spotlight","a","position","c","shape","e","radius","g","hasLockBodyScroll","h","transitionDuration","j","rectangleProps","width","height","borderRadius","className","inlineStyle","rest","_objectWithoutProperties","_excluded","hasPosition","horizontal","vertical","createElement","_extends","style","id","fill","r","cx","cy","x","y","rx","ry","mask"],"mappings":";;;;4zBAAA,MAAO,CAAAA,KAAK,KAAc,OAAO,CACjC,OAASC,aAAa,CAAEC,eAAe,CAAEC,aAAa,CAAEC,aAAa,KAAQ,oBAAoB,CAEjG,OAASC,iBAAiB,KAAQ,qBAAqB,CAGvD,GAAM,CAAAC,SAA6B,CAAG,QAAAA,CAAAC,CAAA,CAUhC,IATJ,CAAAC,CAAQ,CAAAD,CAAA,CAARC,QAAQ,CAAAC,CAAA,CAAAF,CAAA,CACRG,KAAK,CAALA,CAAK,UAAAD,CAAA,CAAG,QAAQ,CAAAA,CAAA,CAAAE,CAAA,CAAAJ,CAAA,CAChBK,MAAM,CAANA,CAAM,UAAAD,CAAA,CAAG,GAAG,CAAAA,CAAA,CAAAE,CAAA,CAAAN,CAAA,CACZO,iBAAiB,CAAAC,CAAA,CAAAR,CAAA,CACjBS,kBAAkB,CAAlBA,CAAkB,UAAAD,CAAA,CAAG,OAAO,CAAAA,CAAA,CAAAE,CAAA,CAAAV,CAAA,CAC5BW,cAAc,CAAdA,CAAc,UAAAD,CAAA,CAAG,CAAEE,KAAK,CAAE,GAAG,CAAEC,MAAM,CAAE,GAAG,CAAEC,YAAY,CAAE,CAAE,CAAC,CAAAJ,CAAA,CAC7DK,CAAS,CAAAf,CAAA,CAATe,SAAS,CACTC,CAAW,CAAAhB,CAAA,CAAXgB,WAAW,CACRC,CAAI,CAAAC,wBAAA,CAAAlB,CAAA,CAAAmB,SAAA,EAEDC,CAAW,CAAGnB,CAAQ,EAAI,SAAAA,CAAQ,CAACoB,UAAwB,EAAI,SAAApB,CAAQ,CAACqB,QAAsB,CAGpG,MAFA,CAAAxB,iBAAiB,UAAAQ,CAAA,EAAAA,CAAkB,CAAC,CAE7Bc,CAAW,cAChB3B,KAAA,CAAA8B,aAAA,OAAAC,QAAA,EAAKT,SAAS,CAAEA,CAAU,CAACU,KAAK,CAAET,CAAY,EAAKC,CAAI,eACrDxB,KAAA,CAAA8B,aAAA,CAAC7B,aAAa,mBACZD,KAAA,CAAA8B,aAAA,0BACE9B,KAAA,CAAA8B,aAAA,SAAMG,EAAE,CAAC,MAAM,eACbjC,KAAA,CAAA8B,aAAA,SAAMX,KAAK,CAAC,MAAM,CAACC,MAAM,CAAC,MAAM,CAACc,IAAI,CAAC,OAAO,CAAE,CAAC,CACrC,QAAQ,GAAlBxB,CAAkB,cACjBV,KAAA,CAAA8B,aAAA,CAAC5B,eAAe,EACdc,kBAAkB,CAAEA,CAAmB,CACvCmB,CAAC,CAAEvB,CAAO,CACVwB,EAAE,CAAE5B,CAAQ,CAACoB,UAAW,CACxBS,EAAE,CAAE7B,CAAQ,CAACqB,QAAS,CACtBK,IAAI,CAAC,OAAO,CACb,CAAC,cAEFlC,KAAA,CAAA8B,aAAA,CAAC1B,aAAa,EACZY,kBAAkB,CAAEA,CAAmB,CACvCG,KAAK,CAAED,CAAc,CAACC,KAAM,CAC5BC,MAAM,CAAEF,CAAc,CAACE,MAAO,CAC9BkB,CAAC,CAAE9B,CAAQ,CAACoB,UAAW,CACvBW,CAAC,CAAE/B,CAAQ,CAACqB,QAAS,CACrBW,EAAE,CAAEtB,CAAc,CAACG,YAAa,CAChCoB,EAAE,CAAEvB,CAAc,CAACG,YAAa,CAChCa,IAAI,CAAC,OAAO,CACb,CAEC,CACF,CAAC,cACPlC,KAAA,CAAA8B,aAAA,CAAC3B,aAAa,EAACuC,IAAI,CAAC,YAAY,CAAE,CACrB,CACZ,CAAC,cAEN1C,KAAA,CAAA8B,aAAA,WAAU,CAEd,CAAC,CAED,cAAe,CAAAxB,SAAS","file":"elvia-spotlight.js","sourcesContent":["import React, { FC } from 'react';\nimport { SpotlightArea, SpotlightCircle, SpotlightMask, SpotlightRect } from './styledComponents';\n\nimport { useLockBodyScroll } from './useLockBodyScroll';\nimport { SpotlightProps } from './elvia-spotlight.types';\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} 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        <SpotlightMask mask=\"url(#hole)\" />\n      </SpotlightArea>\n    </div>\n  ) : (\n    <div></div>\n  );\n};\n\nexport default Spotlight;\n"]}

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

@@ -1,6 +0,0 @@
-/* 
- * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
- * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
- */
-export{};
-//# sourceMappingURL=elvia-spotlight.types.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["elvia-spotlight.types.tsx"],"names":[],"mappings":";;;;AAAA","file":"elvia-spotlight.types.js","sourcesContent":["import { BaseProps, HasTransitionDuration } from '@elvia/elvis-toolbox';\nimport { ComponentPropsWithoutRef } from 'react';\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 extends ComponentPropsWithoutRef<'div'>, BaseProps, HasTransitionDuration {\n  position?: SpotlightPosition;\n  shape?: SpotlightShape;\n  radius?: number;\n  rectangleProps?: SpotlightRectangleProps;\n  hasLockBodyScroll?: boolean;\n}\n"]}

package/dist/react/js/styledComponents.d.ts

@@ -1,11 +0,0 @@
-export declare const SpotlightArea: import("styled-components").StyledComponent<"svg", any, {}, never>;
-interface SpotlightCircleProps {
-    transitionDuration: string;
-}
-export declare const SpotlightCircle: import("styled-components").StyledComponent<"circle", any, SpotlightCircleProps, never>;
-interface SpotlightRectProps {
-    transitionDuration: string;
-}
-export declare const SpotlightRect: import("styled-components").StyledComponent<"rect", any, SpotlightRectProps, never>;
-export declare const SpotlightMask: import("styled-components").StyledComponent<"rect", any, {}, never>;
-export {};

package/dist/react/js/styledComponents.js

@@ -1,6 +0,0 @@
-/* 
- * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
- * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
- */
-import styled from"styled-components";export var SpotlightArea=styled.svg.withConfig({displayName:"styledComponents__SpotlightArea",componentId:"sc-env4mw-0"})(["position:fixed;top:0;left:0;z-index:99999;width:100vw;height:100vh;"]);export var SpotlightCircle=styled.circle.withConfig({displayName:"styledComponents__SpotlightCircle",componentId:"sc-env4mw-1"})(["transition:all "," ease-in-out;"],function(a){var b=a.transitionDuration;return b});export var SpotlightRect=styled.rect.withConfig({displayName:"styledComponents__SpotlightRect",componentId:"sc-env4mw-2"})(["transition:all "," ease-in-out;"],function(a){var b=a.transitionDuration;return b});export var SpotlightMask=styled.rect.withConfig({displayName:"styledComponents__SpotlightMask",componentId:"sc-env4mw-3"})(["--ewc-spotlight-mask-fill:0.25;.e-color-background-3 &&,.e-theme-dark &&,.e-color-background-3 &&{--ewc-spotlight-mask-fill:0.5;}fill:rgba(0,0,0,var(--ewc-spotlight-mask-fill));width:100%;height:100%;"]);
-//# sourceMappingURL=styledComponents.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["styledComponents.tsx"],"names":["styled","SpotlightArea","svg","withConfig","displayName","componentId","SpotlightCircle","circle","a","transitionDuration","SpotlightRect","rect","SpotlightMask"],"mappings":";;;;AAAA,MAAO,CAAAA,MAAM,KAAM,mBAAmB,CAEtC,MAAO,IAAM,CAAAC,aAAa,CAAGD,MAAM,CAACE,GAAG,CAAAC,UAAA,EAAAC,WAAA,mCAAAC,WAAA,yFAOtC,CAMD,MAAO,IAAM,CAAAC,eAAe,CAAGN,MAAM,CAACO,MAAM,CAAAJ,UAAA,EAAAC,WAAA,qCAAAC,WAAA,qDACxB,SAAAG,CAAA,KAAG,CAAAC,CAAkB,CAAAD,CAAA,CAAlBC,kBAAkB,OAAO,CAAAA,CAAkB,EACjE,CAKD,MAAO,IAAM,CAAAC,aAAa,CAAGV,MAAM,CAACW,IAAI,CAAAR,UAAA,EAAAC,WAAA,mCAAAC,WAAA,qDACpB,SAAAG,CAAA,KAAG,CAAAC,CAAkB,CAAAD,CAAA,CAAlBC,kBAAkB,OAAO,CAAAA,CAAkB,EACjE,CAED,MAAO,IAAM,CAAAG,aAAa,CAAGZ,MAAM,CAACW,IAAI,CAAAR,UAAA,EAAAC,WAAA,mCAAAC,WAAA,8NAWvC","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 ${({ transitionDuration }) => transitionDuration} ease-in-out;\n`;\ninterface SpotlightRectProps {\n  transitionDuration: string;\n}\n\nexport const SpotlightRect = styled.rect<SpotlightRectProps>`\n  transition: all ${({ transitionDuration }) => transitionDuration} ease-in-out;\n`;\n\nexport const SpotlightMask = styled.rect`\n  --ewc-spotlight-mask-fill: 0.25;\n  .e-color-background-3 &&,\n  .e-theme-dark &&,\n  .e-color-background-3 && {\n    --ewc-spotlight-mask-fill: 0.5;\n  }\n\n  fill: rgba(0, 0, 0, var(--ewc-spotlight-mask-fill));\n  width: 100%;\n  height: 100%;\n`;\n"]}

package/dist/react/js/useLockBodyScroll.js

@@ -1,7 +0,0 @@
-/* 
- * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
- * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
- */
-import{useEffect}from"react";// eslint-disable-next-line
-export function useLockBodyScroll(a){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 +0,0 @@
-{"version":3,"sources":["useLockBodyScroll.tsx"],"names":["useEffect","useLockBodyScroll","removeLockBodyScroll","originalStyleOverflowBody","window","getComputedStyle","document","body","overflow","originalStyleOverflowHtml","documentElement","style"],"mappings":";;;;AAAA,OAASA,SAAS,KAAQ,OAAO,CAEjC;AACA,MAAO,SAAS,CAAAC,iBAAiBA,CAACC,CAA6B,CAAE,CAC/DF,SAAS,CAAC,UAAM,IACR,CAAAG,CAAyB,CAAGC,MAAM,CAACC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,QAAQ,CAC3EC,CAAyB,CAAGL,MAAM,CAACC,gBAAgB,CAACC,QAAQ,CAACI,eAAe,CAAC,CAACF,QAAQ,OACvF,CAAAN,CAAoB,EAKzBI,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,CAACP,CAAoB,CAAC,CAC3B","file":"useLockBodyScroll.js","sourcesContent":["import { useEffect } from 'react';\n\n// eslint-disable-next-line\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

@@ -1,149 +0,0 @@
-/* 
- * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
- * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
- */
-import * as ReactComponent from '../../../react.js';
-import { ElvisComponentWrapper } from '@elvia/elvis-component-wrapper';
-export default class ElviaComponent extends ElvisComponentWrapper {
-  static get observedAttributes() {
-    return ["position", "shape", "radius", "rectangleprops", "haslockbodyscroll", "transitionduration", "classname", "inlinestyle"];
-  }
-  static getComponentData() {
-    return {
-      "name": "Spotlight",
-      "attributes": [{
-        "name": "position",
-        "type": "object"
-      }, {
-        "name": "shape",
-        "type": "string"
-      }, {
-        "name": "radius",
-        "type": "number"
-      }, {
-        "name": "rectangleProps",
-        "type": "object"
-      }, {
-        "name": "hasLockBodyScroll",
-        "type": "boolean"
-      }, {
-        "name": "transitionDuration",
-        "type": "string"
-      }, {
-        "name": "className",
-        "type": "string"
-      }, {
-        "name": "inlineStyle",
-        "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']);
-  }
-}
-window.customElements.define(`elvia-spotlight`, ElviaComponent);

package/web_component.js

@@ -1 +0,0 @@
-export { default as Spotlight } from './dist/web_component/js/elvia-spotlight';