@elvia/elvis-spotlight 1.6.3 → 1.6.4

package/CHANGELOG.json

@@ -1,6 +1,20 @@
 {
   "$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",

package/dist/react/elvia-spotlight.js

@@ -2,27 +2,46 @@
 import React from "react";
 
 // components/elvis-spotlight/src/react/styledComponents.tsx
-import styled from "styled-components";
-var SpotlightArea = styled.svg.withConfig({
-  displayName: "SpotlightArea",
-  componentId: "sc-env4mw-0"
-})`position:fixed;top:0;left:0;z-index:99999;width:100vw;height:100vh;`;
-var SpotlightCircle = styled.circle.withConfig({
-  displayName: "SpotlightCircle",
-  componentId: "sc-env4mw-1"
-})`transition:all ${({
+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;`;
-var SpotlightRect = styled.rect.withConfig({
-  displayName: "SpotlightRect",
-  componentId: "sc-env4mw-2"
-})`transition:all ${({
+}) => 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;`;
-var SpotlightMask = styled.rect.withConfig({
-  displayName: "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:100vw;height:100vh;`;
+}) => 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";

package/dist/react/styledComponents.d.ts

@@ -1,11 +1,24 @@
-export declare const SpotlightArea: import("styled-components").StyledComponent<"svg", any, {}, never>;
+/// <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("styled-components").StyledComponent<"circle", any, SpotlightCircleProps, never>;
+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("styled-components").StyledComponent<"rect", any, SpotlightRectProps, never>;
-export declare const SpotlightMask: import("styled-components").StyledComponent<"rect", any, {}, never>;
+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,8 +1,13 @@
 {
   "name": "@elvia/elvis-spotlight",
-  "version": "1.6.3",
+  "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": [
@@ -11,9 +16,10 @@
     "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",