@ndla/ui 56.0.20-alpha.0 → 56.0.22-alpha.0

package/dist/panda.buildinfo.json

@@ -256,25 +256,21 @@
       "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",
-      "bottom]___[value:0",
-      "right]___[value:0",
-      "transitionProperty]___[value:transform, background-color, color",
-      "transitionDuration]___[value:normal",
-      "transitionTimingFunction]___[value:ease-out",
-      "background]___[value:background.default/20",
-      "transitionProperty]___[value:transform]___[cond:& svg",
-      "transitionDuration]___[value:normal]___[cond:& svg",
-      "transitionTimingFunction]___[value:ease-out]___[cond:& svg",
-      "fill]___[value:primary]___[cond:& svg",
       "padding]___[value:0",
       "top]___[value:xsmall",
       "right]___[value:xsmall",
       "width]___[value:medium",
       "height]___[value:medium",
       "borderColor]___[value:background.default",
+      "transitionProperty]___[value:transform, background-color, color",
+      "transitionDuration]___[value:normal",
+      "transitionTimingFunction]___[value:ease-out",
       "color]___[value:background.default",
       "backgroundColor]___[value:surface.action",
       "borderRadius]___[value:large",
+      "transitionProperty]___[value:transform]___[cond:& svg",
+      "transitionDuration]___[value:normal]___[cond:& svg",
+      "transitionTimingFunction]___[value:ease-out]___[cond:& svg",
       "overflow]___[value:visible",
       "borderBottom]___[value:1px solid",
       "borderStyle]___[value:dashed",

package/dist/styles.css

@@ -458,11 +458,6 @@
     border-bottom: 0;
 }
 
-  .bg_background\.default\/20 {
-    --mix-background: color-mix(in srgb, var(--colors-background-default) 20%, transparent);
-    background: var(--mix-background, var(--colors-background-default));
-}
-
   .p_0 {
     padding: 0;
 }
@@ -742,12 +737,16 @@
     border-bottom-right-radius: 0;
 }
 
-  .bottom_0 {
-    bottom: 0;
+  .top_xsmall {
+    top: var(--spacing-xsmall);
 }
 
-  .right_0 {
-    right: 0;
+  .right_xsmall {
+    right: var(--spacing-xsmall);
+}
+
+  .bd-c_background\.default {
+    border-color: var(--colors-background-default);
 }
 
   .trs-prop_transform\,_background-color\,_color {
@@ -765,18 +764,6 @@
     transition-timing-function: ease-out;
 }
 
-  .top_xsmall {
-    top: var(--spacing-xsmall);
-}
-
-  .right_xsmall {
-    right: var(--spacing-xsmall);
-}
-
-  .bd-c_background\.default {
-    border-color: var(--colors-background-default);
-}
-
   .bg-c_surface\.action {
     background-color: var(--colors-surface-action);
 }
@@ -1092,10 +1079,6 @@
     margin-inline-start: var(--spacing-1);
 }
 
-  .\[\&_svg\]\:fill_primary svg {
-    fill: var(--colors-primary);
-}
-
   .\[\&_a\]\:c_text\.strong a {
     color: var(--colors-text-strong);
 }

package/es/Embed/ImageEmbed.js

@@ -10,7 +10,6 @@ import parse from "html-react-parser";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AddLine } from "@ndla/icons/action";
-import { ArrowDownShortLine, ArrowUpShortLine } from "@ndla/icons/common";
 import { Figure, Image } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
@@ -127,32 +126,6 @@ const StyledFigure = styled(Figure, {
     }
   }
 });
-const BylineButton = styled("button", {
-  base: {
-    cursor: "pointer",
-    position: "absolute",
-    zIndex: "base",
-    bottom: "0",
-    right: "0",
-    paddingBlock: "xsmall",
-    paddingInline: "xsmall",
-    transitionProperty: "transform, background-color, color",
-    transitionDuration: "normal",
-    transitionTimingFunction: "ease-out",
-    background: "background.default/20",
-    border: "0",
-    "& svg": {
-      transitionProperty: "transform",
-      transitionDuration: "normal",
-      transitionTimingFunction: "ease-out",
-      fill: "primary"
-    }
-  }
-}, {
-  defaultProps: {
-    type: "button"
-  }
-});
 const ExpandButton = styled("button", {
   base: {
     display: "flex",
@@ -192,7 +165,6 @@ const ImageEmbed = _ref => {
     renderContext = "article",
     children
   } = _ref;
-  const [isBylineHidden, setIsBylineHidden] = useState(hideByline(embed.embedData));
   const [imageSizes, setImageSizes] = useState(undefined);
   const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);
   const {
@@ -249,21 +221,13 @@ const ImageEmbed = _ref => {
         onClick: toggleImageSize,
         "data-expanded": !!imageSizes,
         children: /*#__PURE__*/_jsx(AddLine, {})
-      }), (embedData.size?.endsWith("-hide-byline") || embedData.hideByline === "true") && /*#__PURE__*/_jsx(BylineButton, {
-        "data-byline-button": "",
-        "aria-label": t(`license.images.itemImage.${isBylineHidden ? "expandByline" : "minimizeByline"}`),
-        onClick: () => setIsBylineHidden(p => !p),
-        children: isBylineHidden ? /*#__PURE__*/_jsx(ArrowDownShortLine, {}) : /*#__PURE__*/_jsx(ArrowUpShortLine, {})
       })]
-    }), isBylineHidden ? null : /*#__PURE__*/_jsx(EmbedByline, {
+    }), embedData.hideByline === "true" ? null : /*#__PURE__*/_jsx(EmbedByline, {
       type: "image",
       copyright: data.copyright,
-      description: parsedDescription,
+      description: embedData.hideCaption === "true" ? "" : parsedDescription,
       visibleAlt: previewAlt ? embed.embedData.alt : ""
     })]
   });
 };
-const hideByline = embed => {
-  return !!embed.size && embed.size.endsWith("-hide-byline") || embed.hideByline === "true";
-};
 export default ImageEmbed;

package/es/TagSelector/TagSelector.js

@@ -74,10 +74,10 @@ export const TagSelectorControl = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...props
   } = _ref2;
   return /*#__PURE__*/_jsx(ComboboxControl, {
+    ref: ref,
     asChild: true,
     children: /*#__PURE__*/_jsx(TagsInputControl, {
       ...props,
-      ref: ref,
       children: children
     })
   });
@@ -91,6 +91,7 @@ export const TagSelectorInputBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
   } = _ref3;
   const tagsApi = useTagsInputContext();
   return /*#__PURE__*/_jsx(ComboboxInput, {
+    ref: ref,
     asChild: true,
     children: /*#__PURE__*/_jsx(TagsInputInput, {
       ...props,
@@ -99,7 +100,6 @@ export const TagSelectorInputBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
           tagsApi.addValue(tagsApi.inputValue);
         }
       },
-      ref: ref,
       children: children
     })
   });
@@ -122,6 +122,7 @@ export const TagSelectorInput = /*#__PURE__*/forwardRef((_ref4, ref) => {
         })]
       }), /*#__PURE__*/_jsx(TagsInputItemInput, {})]
     }, value)), /*#__PURE__*/_jsx(ComboboxInput, {
+      ref: ref,
       asChild: true,
       children: /*#__PURE__*/_jsx(TagsInputInput, {
         ...props,
@@ -130,7 +131,6 @@ export const TagSelectorInput = /*#__PURE__*/forwardRef((_ref4, ref) => {
             tagsApi.addValue(tagsApi.inputValue);
           }
         },
-        ref: ref,
         children: children
       })
     })]

package/es/locale/messages-en.js

@@ -1108,7 +1108,7 @@ const messages = {
       },
       topicsBy: "Topics by",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Tools to moderate and administer the arena.",
         administrate: "Administrate",
         category: {

package/es/locale/messages-nb.js

@@ -1108,7 +1108,7 @@ const messages = {
       },
       topicsBy: "Innlegg av",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
         category: {

package/es/locale/messages-nn.js

@@ -1108,7 +1108,7 @@ const messages = {
       },
       topicsBy: "Innlegg av",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
         category: {

package/es/locale/messages-se.js

@@ -1108,7 +1108,7 @@ const messages = {
       },
       topicsBy: "Innlegg av",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
         category: {

package/es/locale/messages-sma.js

@@ -1108,7 +1108,7 @@ const messages = {
       },
       topicsBy: "Innlegg av",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
         category: {

package/es/styles.css

@@ -458,11 +458,6 @@
     border-bottom: 0;
 }
 
-  .bg_background\.default\/20 {
-    --mix-background: color-mix(in srgb, var(--colors-background-default) 20%, transparent);
-    background: var(--mix-background, var(--colors-background-default));
-}
-
   .p_0 {
     padding: 0;
 }
@@ -742,12 +737,16 @@
     border-bottom-right-radius: 0;
 }
 
-  .bottom_0 {
-    bottom: 0;
+  .top_xsmall {
+    top: var(--spacing-xsmall);
 }
 
-  .right_0 {
-    right: 0;
+  .right_xsmall {
+    right: var(--spacing-xsmall);
+}
+
+  .bd-c_background\.default {
+    border-color: var(--colors-background-default);
 }
 
   .trs-prop_transform\,_background-color\,_color {
@@ -765,18 +764,6 @@
     transition-timing-function: ease-out;
 }
 
-  .top_xsmall {
-    top: var(--spacing-xsmall);
-}
-
-  .right_xsmall {
-    right: var(--spacing-xsmall);
-}
-
-  .bd-c_background\.default {
-    border-color: var(--colors-background-default);
-}
-
   .bg-c_surface\.action {
     background-color: var(--colors-surface-action);
 }
@@ -1092,10 +1079,6 @@
     margin-inline-start: var(--spacing-1);
 }
 
-  .\[\&_svg\]\:fill_primary svg {
-    fill: var(--colors-primary);
-}
-
   .\[\&_a\]\:c_text\.strong a {
     color: var(--colors-text-strong);
 }

package/lib/Embed/ImageEmbed.js

@@ -8,7 +8,6 @@ var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
 var _react = require("react");
 var _reactI18next = require("react-i18next");
 var _action = require("@ndla/icons/action");
-var _common = require("@ndla/icons/common");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
@@ -137,32 +136,6 @@ const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
     }
   }
 });
-const BylineButton = (0, _jsx2.styled)("button", {
-  base: {
-    cursor: "pointer",
-    position: "absolute",
-    zIndex: "base",
-    bottom: "0",
-    right: "0",
-    paddingBlock: "xsmall",
-    paddingInline: "xsmall",
-    transitionProperty: "transform, background-color, color",
-    transitionDuration: "normal",
-    transitionTimingFunction: "ease-out",
-    background: "background.default/20",
-    border: "0",
-    "& svg": {
-      transitionProperty: "transform",
-      transitionDuration: "normal",
-      transitionTimingFunction: "ease-out",
-      fill: "primary"
-    }
-  }
-}, {
-  defaultProps: {
-    type: "button"
-  }
-});
 const ExpandButton = (0, _jsx2.styled)("button", {
   base: {
     display: "flex",
@@ -202,7 +175,6 @@ const ImageEmbed = _ref => {
     renderContext = "article",
     children
   } = _ref;
-  const [isBylineHidden, setIsBylineHidden] = (0, _react.useState)(hideByline(embed.embedData));
   const [imageSizes, setImageSizes] = (0, _react.useState)(undefined);
   const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);
   const {
@@ -259,21 +231,13 @@ const ImageEmbed = _ref => {
         onClick: toggleImageSize,
         "data-expanded": !!imageSizes,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.AddLine, {})
-      }), (embedData.size?.endsWith("-hide-byline") || embedData.hideByline === "true") && /*#__PURE__*/(0, _jsxRuntime.jsx)(BylineButton, {
-        "data-byline-button": "",
-        "aria-label": t(`license.images.itemImage.${isBylineHidden ? "expandByline" : "minimizeByline"}`),
-        onClick: () => setIsBylineHidden(p => !p),
-        children: isBylineHidden ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ArrowDownShortLine, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ArrowUpShortLine, {})
       })]
-    }), isBylineHidden ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
+    }), embedData.hideByline === "true" ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
       type: "image",
       copyright: data.copyright,
-      description: parsedDescription,
+      description: embedData.hideCaption === "true" ? "" : parsedDescription,
       visibleAlt: previewAlt ? embed.embedData.alt : ""
     })]
   });
 };
-const hideByline = embed => {
-  return !!embed.size && embed.size.endsWith("-hide-byline") || embed.hideByline === "true";
-};
 var _default = exports.default = ImageEmbed;

package/lib/TagSelector/TagSelector.js

@@ -81,10 +81,10 @@ const TagSelectorControl = exports.TagSelectorControl = /*#__PURE__*/(0, _react.
     ...props
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.ComboboxControl, {
+    ref: ref,
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputControl, {
       ...props,
-      ref: ref,
       children: children
     })
   });
@@ -98,6 +98,7 @@ const TagSelectorInputBase = exports.TagSelectorInputBase = /*#__PURE__*/(0, _re
   } = _ref3;
   const tagsApi = (0, _react2.useTagsInputContext)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.ComboboxInput, {
+    ref: ref,
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputInput, {
       ...props,
@@ -106,7 +107,6 @@ const TagSelectorInputBase = exports.TagSelectorInputBase = /*#__PURE__*/(0, _re
           tagsApi.addValue(tagsApi.inputValue);
         }
       },
-      ref: ref,
       children: children
     })
   });
@@ -129,6 +129,7 @@ const TagSelectorInput = exports.TagSelectorInput = /*#__PURE__*/(0, _react.forw
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputItemInput, {})]
     }, value)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.ComboboxInput, {
+      ref: ref,
       asChild: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputInput, {
         ...props,
@@ -137,7 +138,6 @@ const TagSelectorInput = exports.TagSelectorInput = /*#__PURE__*/(0, _react.forw
             tagsApi.addValue(tagsApi.inputValue);
           }
         },
-        ref: ref,
         children: children
       })
     })]

package/lib/locale/messages-en.js

@@ -1115,7 +1115,7 @@ const messages = {
       },
       topicsBy: "Topics by",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Tools to moderate and administer the arena.",
         administrate: "Administrate",
         category: {

package/lib/locale/messages-nb.js

@@ -1115,7 +1115,7 @@ const messages = {
       },
       topicsBy: "Innlegg av",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
         category: {

package/lib/locale/messages-nn.js

@@ -1115,7 +1115,7 @@ const messages = {
       },
       topicsBy: "Innlegg av",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
         category: {

package/lib/locale/messages-se.js

@@ -1115,7 +1115,7 @@ const messages = {
       },
       topicsBy: "Innlegg av",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
         category: {

package/lib/locale/messages-sma.js

@@ -1115,7 +1115,7 @@ const messages = {
       },
       topicsBy: "Innlegg av",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
         category: {

package/lib/styles.css

@@ -458,11 +458,6 @@
     border-bottom: 0;
 }
 
-  .bg_background\.default\/20 {
-    --mix-background: color-mix(in srgb, var(--colors-background-default) 20%, transparent);
-    background: var(--mix-background, var(--colors-background-default));
-}
-
   .p_0 {
     padding: 0;
 }
@@ -742,12 +737,16 @@
     border-bottom-right-radius: 0;
 }
 
-  .bottom_0 {
-    bottom: 0;
+  .top_xsmall {
+    top: var(--spacing-xsmall);
 }
 
-  .right_0 {
-    right: 0;
+  .right_xsmall {
+    right: var(--spacing-xsmall);
+}
+
+  .bd-c_background\.default {
+    border-color: var(--colors-background-default);
 }
 
   .trs-prop_transform\,_background-color\,_color {
@@ -765,18 +764,6 @@
     transition-timing-function: ease-out;
 }
 
-  .top_xsmall {
-    top: var(--spacing-xsmall);
-}
-
-  .right_xsmall {
-    right: var(--spacing-xsmall);
-}
-
-  .bd-c_background\.default {
-    border-color: var(--colors-background-default);
-}
-
   .bg-c_surface\.action {
     background-color: var(--colors-surface-action);
 }
@@ -1092,10 +1079,6 @@
     margin-inline-start: var(--spacing-1);
 }
 
-  .\[\&_svg\]\:fill_primary svg {
-    fill: var(--colors-primary);
-}
-
   .\[\&_a\]\:c_text\.strong a {
     color: var(--colors-text-strong);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.20-alpha.0",
+  "version": "56.0.22-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -34,11 +34,11 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.14-alpha.0",
+    "@ndla/icons": "^8.0.15-alpha.0",
     "@ndla/licenses": "^8.0.2-alpha.0",
-    "@ndla/primitives": "^1.0.18-alpha.0",
-    "@ndla/safelink": "^7.0.18-alpha.0",
-    "@ndla/styled-system": "^0.0.16",
+    "@ndla/primitives": "^1.0.20-alpha.0",
+    "@ndla/safelink": "^7.0.20-alpha.0",
+    "@ndla/styled-system": "^0.0.17",
     "@ndla/util": "^4.1.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0"
@@ -53,7 +53,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.24",
+    "@ndla/preset-panda": "^0.0.25",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.1-alpha.0",
     "@pandacss/dev": "^0.45.2",
@@ -66,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "66b3b382188ec1730fa409d4adb3672942f00670"
+  "gitHead": "d40977f8ad6f9927572a6a62bf6a397189d0cfa4"
 }

package/src/Embed/ImageEmbed.stories.tsx

@@ -139,7 +139,23 @@ export const HiddenByline: StoryObj<typeof ImageEmbed> = {
       status: "success",
       embedData: {
         ...embedData,
-        size: "full-hide-byline",
+        size: "full",
+        hideByline: "true",
+      },
+      data: metaData,
+    },
+  },
+};
+
+export const HiddenCaption: StoryObj<typeof ImageEmbed> = {
+  args: {
+    embed: {
+      resource: "image",
+      status: "success",
+      embedData: {
+        ...embedData,
+        size: "full",
+        hideCaption: "true",
       },
       data: metaData,
     },

package/src/Embed/ImageEmbed.tsx

@@ -10,7 +10,6 @@ import parse from "html-react-parser";
 import { ReactNode, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AddLine } from "@ndla/icons/action";
-import { ArrowDownShortLine, ArrowUpShortLine } from "@ndla/icons/common";
 import { Figure, FigureSize, FigureVariantProps, Image } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { ImageEmbedData, ImageMetaData } from "@ndla/types-embed";
@@ -157,33 +156,6 @@ const StyledFigure = styled(Figure, {
   },
 });
 
-const BylineButton = styled(
-  "button",
-  {
-    base: {
-      cursor: "pointer",
-      position: "absolute",
-      zIndex: "base",
-      bottom: "0",
-      right: "0",
-      paddingBlock: "xsmall",
-      paddingInline: "xsmall",
-      transitionProperty: "transform, background-color, color",
-      transitionDuration: "normal",
-      transitionTimingFunction: "ease-out",
-      background: "background.default/20",
-      border: "0",
-      "& svg": {
-        transitionProperty: "transform",
-        transitionDuration: "normal",
-        transitionTimingFunction: "ease-out",
-        fill: "primary",
-      },
-    },
-  },
-  { defaultProps: { type: "button" } },
-);
-
 const ExpandButton = styled(
   "button",
   {
@@ -217,7 +189,6 @@ const ExpandButton = styled(
 );
 
 const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", children }: Props) => {
-  const [isBylineHidden, setIsBylineHidden] = useState(hideByline(embed.embedData));
   const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);
   const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);
   const { t } = useTranslation();
@@ -279,21 +250,12 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
             <AddLine />
           </ExpandButton>
         )}
-        {(embedData.size?.endsWith("-hide-byline") || embedData.hideByline === "true") && (
-          <BylineButton
-            data-byline-button=""
-            aria-label={t(`license.images.itemImage.${isBylineHidden ? "expandByline" : "minimizeByline"}`)}
-            onClick={() => setIsBylineHidden((p) => !p)}
-          >
-            {isBylineHidden ? <ArrowDownShortLine /> : <ArrowUpShortLine />}
-          </BylineButton>
-        )}
       </ImageWrapper>
-      {isBylineHidden ? null : (
+      {embedData.hideByline === "true" ? null : (
         <EmbedByline
           type="image"
           copyright={data.copyright}
-          description={parsedDescription}
+          description={embedData.hideCaption === "true" ? "" : parsedDescription}
           visibleAlt={previewAlt ? embed.embedData.alt : ""}
         />
       )}
@@ -301,8 +263,4 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
   );
 };
 
-const hideByline = (embed: ImageEmbedData): boolean => {
-  return (!!embed.size && embed.size.endsWith("-hide-byline")) || embed.hideByline === "true";
-};
-
 export default ImageEmbed;

package/src/TagSelector/TagSelector.tsx

@@ -108,10 +108,8 @@ export const TagSelectorTrigger = ComboboxTrigger;
 
 export const TagSelectorControl = forwardRef<HTMLDivElement, TagSelectorControlProps>(({ children, ...props }, ref) => {
   return (
-    <ComboboxControl asChild>
-      <TagsInputControl {...props} ref={ref}>
-        {children}
-      </TagsInputControl>
+    <ComboboxControl ref={ref} asChild>
+      <TagsInputControl {...props}>{children}</TagsInputControl>
     </ComboboxControl>
   );
 });
@@ -126,7 +124,7 @@ export const TagSelectorInputBase = forwardRef<HTMLInputElement, TagSelectorInpu
     const tagsApi = useTagsInputContext();
 
     return (
-      <ComboboxInput asChild>
+      <ComboboxInput ref={ref} asChild>
         <TagsInputInput
           {...props}
           onKeyDown={(event) => {
@@ -134,7 +132,6 @@ export const TagSelectorInputBase = forwardRef<HTMLInputElement, TagSelectorInpu
               tagsApi.addValue(tagsApi.inputValue);
             }
           }}
-          ref={ref}
         >
           {children}
         </TagsInputInput>
@@ -159,7 +156,7 @@ export const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputPro
           <TagsInputItemInput />
         </TagsInputItem>
       ))}
-      <ComboboxInput asChild>
+      <ComboboxInput ref={ref} asChild>
         <TagsInputInput
           {...props}
           onKeyDown={(event) => {
@@ -167,7 +164,6 @@ export const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputPro
               tagsApi.addValue(tagsApi.inputValue);
             }
           }}
-          ref={ref}
         >
           {children}
         </TagsInputInput>

package/src/locale/messages-en.ts

@@ -1130,7 +1130,7 @@ const messages = {
       },
       topicsBy: "Topics by",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Tools to moderate and administer the arena.",
         administrate: "Administrate",
         category: {

package/src/locale/messages-nb.ts

@@ -1131,7 +1131,7 @@ const messages = {
       },
       topicsBy: "Innlegg av",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
         category: {

package/src/locale/messages-nn.ts

@@ -1131,7 +1131,7 @@ const messages = {
       },
       topicsBy: "Innlegg av",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
         category: {

package/src/locale/messages-se.ts

@@ -1133,7 +1133,7 @@ const messages = {
       },
       topicsBy: "Innlegg av",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
         category: {

package/src/locale/messages-sma.ts

@@ -1135,7 +1135,7 @@ const messages = {
       },
       topicsBy: "Innlegg av",
       admin: {
-        title: "Arena administrator",
+        title: "Arena admin",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
         category: {