@elvia/elvis-spotlight 1.6.3 → 1.6.5

package/CHANGELOG.json

@@ -1,6 +1,30 @@
 {
   "$schema": "../../changelogSchema.json",
+  "name": "elvis-spotlight",
   "content": [
+    {
+      "date": "30.05.24",
+      "version": "1.6.5",
+      "changelog": [
+        {
+          "type": "bug_fix",
+          "changes": ["Republish the package to fix an issue with the previous release."]
+        }
+      ]
+    },
+    {
+      "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,44 @@
 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",
+  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;");
+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;");
+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",
+  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.5",
   "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.1",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",