@ndla/ui 56.0.29-alpha.0 → 56.0.31-alpha.0

package/dist/panda.buildinfo.json

@@ -256,6 +256,7 @@
       "textStyle]___[value:label.xsmall]___[cond:& a",
       "marginInlineStart]___[value:1]___[cond:& a",
       "borderRadius]___[value:0]___[cond:& img",
+      "zIndex]___[value:docked",
       "background]___[value:background.default]___[cond:_hover<___>& [data-byline-button]",
       "transform]___[value:scale(1.2)]___[cond:_hover<___>& button[data-expanded]",
       "transform]___[value:rotate(-45deg)]___[cond:& button[data-expanded='true']<___>& svg",

package/dist/styles.css

@@ -467,6 +467,10 @@
     max-height: 50vh;
 }
 
+  .z_docked {
+    z-index: var(--z-index-docked);
+}
+
   .p_0 {
     padding: 0;
 }

package/es/Embed/ImageEmbed.js

@@ -111,6 +111,7 @@ const ImageWrapper = styled("div", {
 });
 const StyledFigure = styled(Figure, {
   base: {
+    zIndex: "docked",
     _hover: {
       "& [data-byline-button]": {
         background: "background.default"

package/es/styles.css

@@ -467,6 +467,10 @@
     max-height: 50vh;
 }
 
+  .z_docked {
+    z-index: var(--z-index-docked);
+}
+
   .p_0 {
     padding: 0;
 }

package/lib/Embed/ImageEmbed.js

@@ -121,6 +121,7 @@ const ImageWrapper = (0, _jsx2.styled)("div", {
 });
 const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
   base: {
+    zIndex: "docked",
     _hover: {
       "& [data-byline-button]": {
         background: "background.default"

package/lib/styles.css

@@ -467,6 +467,10 @@
     max-height: 50vh;
 }
 
+  .z_docked {
+    z-index: var(--z-index-docked);
+}
+
   .p_0 {
     padding: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.29-alpha.0",
+  "version": "56.0.31-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -34,12 +34,12 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.20-alpha.0",
+    "@ndla/icons": "^8.0.21-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.26-alpha.0",
-    "@ndla/safelink": "^7.0.26-alpha.0",
+    "@ndla/primitives": "^1.0.28-alpha.0",
+    "@ndla/safelink": "^7.0.28-alpha.0",
     "@ndla/styled-system": "^0.0.22",
-    "@ndla/util": "^4.1.0",
+    "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0"
   },
@@ -51,7 +51,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.30",
+    "@ndla/preset-panda": "^0.0.31",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.2-alpha.0",
     "@pandacss/dev": "^0.46.0",
@@ -64,5 +64,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "92e263c72d707da94f33fb1aae9ea8e586b29b6e"
+  "gitHead": "784eea9f500d7e38a2d5102286118a1da129b743"
 }

package/src/Embed/ImageEmbed.tsx

@@ -140,6 +140,7 @@ const ImageWrapper = styled("div", {
 
 const StyledFigure = styled(Figure, {
   base: {
+    zIndex: "docked",
     _hover: {
       "& [data-byline-button]": {
         background: "background.default",