@ndla/ui 56.0.19-alpha.0 → 56.0.21-alpha.0

package/lib/locale/messages-se.d.ts

@@ -986,6 +986,8 @@ declare const messages: {
                 posts: string;
                 posts_plural: string;
                 subcategory: string;
+                votes: string;
+                votes_plural: string;
             };
             publish: string;
             cancel: {
@@ -1048,6 +1050,8 @@ declare const messages: {
                 unlock: string;
                 lockDescription: string;
                 unlockDescription: string;
+                votes: string;
+                votes_plural: string;
             };
             posts: {
                 title: string;
@@ -1425,18 +1429,18 @@ declare const messages: {
             page: string;
         };
         imageSearch: {
-            close: string;
             searchPlaceholder: string;
             searchButtonTitle: string;
-            useImageTitle: string;
-            checkboxLabel: string;
-            imageMetadata: {
+            imagePreview: {
                 creatorsLabel: string;
                 license: string;
                 caption: string;
                 altText: string;
                 modelRelease: string;
                 tags: string;
+                checkboxLabel: string;
+                close: string;
+                useImageTitle: string;
             };
         };
         audioSearch: {

package/lib/locale/messages-se.js

@@ -1002,7 +1002,9 @@ const messages = {
         title: "Kategorier",
         posts: "innlegg",
         posts_plural: "innlegg",
-        subcategory: "Tema"
+        subcategory: "Tema",
+        votes: "reaksjon",
+        votes_plural: "reaksjoner"
       },
       publish: "Publiser",
       cancel: {
@@ -1064,7 +1066,9 @@ const messages = {
         locked: "Lås innlegg",
         unlock: "Lås opp innlegg",
         lockDescription: "Vil du låse dette innlegget? Dette vil gjøre at innlegget ikke kan få flere kommentarer, og vil vises som låst.",
-        unlockDescription: "Vil du låse opp dette innlegget? Dette vil gjøre at innlegget kan få flere kommentarer."
+        unlockDescription: "Vil du låse opp dette innlegget? Dette vil gjøre at innlegget kan få flere kommentarer.",
+        votes: "reaksjon",
+        votes_plural: "reaksjoner"
       },
       posts: {
         title: "Innlegg",
@@ -1093,12 +1097,12 @@ const messages = {
         maxLength: "Maksimal lengde for tekstfeltet er nådd",
         error: "Feltet er påkrevd"
       },
-      bottomText: "Savner du en kategori? Gi vår moderator beskjed på ",
+      bottomText: "Savner du en kategori? Du kan be om nye kategorier. Bruk 'Spør NDLA' eller send en epost til ",
       moderatorEmail: "moderator@ndla.no",
       notification: {
         title: "Varslinger",
         showAll: "Se alle varslinger",
-        description: "Velkommen inn i arenaen for lærere i videregående opplæring! Dette er <em>din</em> arena: et faglig møtested for diskusjon, inspirasjon, deling og utviklende samarbeid.",
+        description: "Velkommen til NDLAs Arena. Her kan du diskutere, dele og samarbeide med andre lærere fra hele Norge.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
@@ -1111,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: {
@@ -1476,18 +1480,18 @@ const messages = {
       page: "Side {{page}}"
     },
     imageSearch: {
-      close: "Lukk",
       searchPlaceholder: "Søk i bilder",
       searchButtonTitle: "Søk",
-      useImageTitle: "Bruk bildet",
-      checkboxLabel: "Sett som metabilde",
-      imageMetadata: {
+      imagePreview: {
         creatorsLabel: "Bilde",
         license: "Lisens",
         caption: "Bildetekst",
         altText: "Alt-tekst",
         modelRelease: "Modellklarert",
-        tags: "Emneknagger"
+        tags: "Emneknagger",
+        checkboxLabel: "Sett som metabilde",
+        close: "Lukk",
+        useImageTitle: "Bruk bildet"
       }
     },
     audioSearch: {

package/lib/locale/messages-sma.d.ts

@@ -986,6 +986,8 @@ declare const messages: {
                 posts: string;
                 posts_plural: string;
                 subcategory: string;
+                votes: string;
+                votes_plural: string;
             };
             publish: string;
             cancel: {
@@ -1048,6 +1050,8 @@ declare const messages: {
                 unlock: string;
                 lockDescription: string;
                 unlockDescription: string;
+                votes: string;
+                votes_plural: string;
             };
             posts: {
                 title: string;
@@ -1425,18 +1429,18 @@ declare const messages: {
             page: string;
         };
         imageSearch: {
-            close: string;
             searchPlaceholder: string;
             searchButtonTitle: string;
-            useImageTitle: string;
-            checkboxLabel: string;
-            imageMetadata: {
+            imagePreview: {
                 creatorsLabel: string;
                 license: string;
                 caption: string;
                 altText: string;
                 modelRelease: string;
                 tags: string;
+                checkboxLabel: string;
+                close: string;
+                useImageTitle: string;
             };
         };
         audioSearch: {

package/lib/locale/messages-sma.js

@@ -1002,7 +1002,9 @@ const messages = {
         title: "Kategorier",
         posts: "innlegg",
         posts_plural: "innlegg",
-        subcategory: "Tema"
+        subcategory: "Tema",
+        votes: "reaksjon",
+        votes_plural: "reaksjoner"
       },
       publish: "Publiser",
       cancel: {
@@ -1064,7 +1066,9 @@ const messages = {
         locked: "Lås innlegg",
         unlock: "Lås opp innlegg",
         lockDescription: "Vil du låse dette innlegget? Dette vil gjøre at innlegget ikke kan få flere kommentarer, og vil vises som låst.",
-        unlockDescription: "Vil du låse opp dette innlegget? Dette vil gjøre at innlegget kan få flere kommentarer."
+        unlockDescription: "Vil du låse opp dette innlegget? Dette vil gjøre at innlegget kan få flere kommentarer.",
+        votes: "reaksjon",
+        votes_plural: "reaksjoner"
       },
       posts: {
         title: "Innlegg",
@@ -1093,12 +1097,12 @@ const messages = {
         maxLength: "Maksimal lengde for tekstfeltet er nådd",
         error: "Feltet er påkrevd"
       },
-      bottomText: "Savner du en kategori? Gi vår moderator beskjed på ",
+      bottomText: "Savner du en kategori? Du kan be om nye kategorier. Bruk 'Spør NDLA' eller send en epost til ",
       moderatorEmail: "moderator@ndla.no",
       notification: {
         title: "Varslinger",
         showAll: "Se alle varslinger",
-        description: "Velkommen inn i arenaen for lærere i videregående opplæring! Dette er <em>din</em> arena: et faglig møtested for diskusjon, inspirasjon, deling og utviklende samarbeid.",
+        description: "Velkommen til NDLAs Arena. Her kan du diskutere, dele og samarbeide med andre lærere fra hele Norge.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
@@ -1111,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: {
@@ -1476,18 +1480,18 @@ const messages = {
       page: "Side {{page}}"
     },
     imageSearch: {
-      close: "Lukk",
       searchPlaceholder: "Søk i bilder",
       searchButtonTitle: "Søk",
-      useImageTitle: "Bruk bildet",
-      checkboxLabel: "Sett som metabilde",
-      imageMetadata: {
+      imagePreview: {
         creatorsLabel: "Bilde",
         license: "Lisens",
         caption: "Bildetekst",
         altText: "Alt-tekst",
         modelRelease: "Modellklarert",
-        tags: "Emneknagger"
+        tags: "Emneknagger",
+        checkboxLabel: "Sett som metabilde",
+        close: "Lukk",
+        useImageTitle: "Bruk bildet"
       }
     },
     audioSearch: {

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.19-alpha.0",
+  "version": "56.0.21-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.13-alpha.0",
+    "@ndla/icons": "^8.0.15-alpha.0",
     "@ndla/licenses": "^8.0.2-alpha.0",
-    "@ndla/primitives": "^1.0.17-alpha.0",
-    "@ndla/safelink": "^7.0.17-alpha.0",
-    "@ndla/styled-system": "^0.0.15",
+    "@ndla/primitives": "^1.0.19-alpha.0",
+    "@ndla/safelink": "^7.0.19-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.23",
+    "@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": "58687255a5be26e49b6a21d830cf0af5be37b9fa"
+  "gitHead": "4271f1708f835715edca5fd10f6ee4b182a207b4"
 }

package/src/Concept/Concept.tsx

@@ -22,6 +22,7 @@ export interface ConceptProps extends ComponentPropsWithRef<"figure"> {
   title?: string;
   children?: ReactNode;
   source?: string;
+  previewAlt?: boolean;
 }
 
 const StyledFigure = styled(Figure, {
@@ -45,7 +46,7 @@ const ContentWrapper = styled("div", {
 // TODO: Figure out if we need to support headerButtons.
 
 export const Concept = forwardRef<HTMLElement, ConceptProps>(
-  ({ copyright, visualElement, lang, children, title, source, ...rest }, ref) => {
+  ({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {
     const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);
 
     return (
@@ -60,7 +61,7 @@ export const Concept = forwardRef<HTMLElement, ConceptProps>(
           {children}
         </ContentWrapper>
         {visualElement?.resource === "image" ? (
-          <ImageEmbed embed={visualElement} lang={lang} />
+          <ImageEmbed embed={visualElement} lang={lang} previewAlt={previewAlt} />
         ) : visualElement?.resource === "brightcove" ? (
           <BrightcoveEmbed embed={visualElement} />
         ) : visualElement?.resource === "h5p" ? (

package/src/Embed/ConceptEmbed.tsx

@@ -21,6 +21,7 @@ import { Concept, ConceptProps } from "../Concept/Concept";
 interface BaseProps {
   renderContext?: RenderContext;
   lang?: string;
+  previewAlt?: boolean;
 }
 
 interface Props extends BaseProps {
@@ -35,7 +36,7 @@ const StyledPopoverContent = styled(PopoverContent, {
   },
 });
 
-export const ConceptEmbed = ({ embed, renderContext, lang }: Props) => {
+export const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }: Props) => {
   const parsedContent = useMemo(() => {
     if (embed.status === "error" || !embed.data.concept.content) return undefined;
     return parse(embed.data.concept.content.htmlContent);
@@ -58,6 +59,7 @@ export const ConceptEmbed = ({ embed, renderContext, lang }: Props) => {
   if (embed.embedData.type === "inline") {
     return (
       <InlineConcept
+        previewAlt={previewAlt}
         linkText={embed.embedData.linkText}
         copyright={concept.copyright}
         visualElement={visualElement}
@@ -72,6 +74,7 @@ export const ConceptEmbed = ({ embed, renderContext, lang }: Props) => {
 
   return (
     <BlockConcept
+      previewAlt={previewAlt}
       copyright={concept.copyright}
       visualElement={visualElement}
       lang={lang}

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/i18n/useComponentTranslations.ts

@@ -84,24 +84,24 @@ interface AudioSearchTranslations {
   paginationTranslations: PaginationRootProps["translations"];
 }
 
-interface MetadataTranslations {
+export interface PreviewTranslations {
   creatorsLabel: string;
   license: string;
   caption: string;
   altText: string;
   modelRelease: string;
   tags: string;
+  close: string;
+  checkboxLabel?: string;
+  missingTitleFallback?: string;
+  useImageTitle: string;
 }
 
-interface ImageSearchTranslations {
+export interface ImageSearchTranslations {
   searchPlaceholder: string;
   searchButtonTitle: string;
-  useImageTitle: string;
-  close: string;
-  imageMetadata: MetadataTranslations;
+  imagePreview: PreviewTranslations;
   paginationTranslations: PaginationRootProps["translations"];
-  missingTitleFallback?: string;
-  checkboxLabel?: string;
 }
 
 export const useImageSearchTranslations = (
@@ -110,21 +110,22 @@ export const useImageSearchTranslations = (
   const { t } = useTranslation("translation", { keyPrefix: "component.imageSearch" });
   const paginationTranslations = usePaginationTranslations();
 
-  const { imageMetadata, paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;
+  const { imagePreview, paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;
 
   return {
-    close: t("close"),
     searchPlaceholder: t("searchPlaceholder"),
     searchButtonTitle: t("searchButtonTitle"),
-    useImageTitle: t("useImageTitle"),
-    imageMetadata: {
-      creatorsLabel: t("imageMetadata.creatorsLabel"),
-      license: t("imageMetadata.license"),
-      caption: t("imageMetadata.caption"),
-      altText: t("imageMetadata.altText"),
-      modelRelease: t("imageMetadata.modelRelease"),
-      tags: t("imageMetadata.tags"),
-      ...imageMetadata,
+    imagePreview: {
+      creatorsLabel: t("imagePreview.creatorsLabel"),
+      license: t("imagePreview.license"),
+      caption: t("imagePreview.caption"),
+      altText: t("imagePreview.altText"),
+      modelRelease: t("imagePreview.modelRelease"),
+      tags: t("imagePreview.tags"),
+      close: t("close"),
+      checkboxLabel: t("imagePreview.checkboxLabel"),
+      useImageTitle: t("imagePreview.useImageTitle"),
+      ...imagePreview,
     },
     paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },
     ...remaining,

package/src/locale/messages-en.ts

@@ -1014,6 +1014,8 @@ const messages = {
         posts: "post",
         posts_plural: "posts",
         subcategory: "Subcategories",
+        votes: "reaction",
+        votes_plural: "reactions",
       },
       cancel: {
         title: {
@@ -1077,6 +1079,8 @@ const messages = {
         unlock: "Unlock topic",
         lockDescription: "Do you want do lock this topic? This will prevent this topic from getting more posts.",
         unlockDescription: "Do you want do unlock this topic? This will prevent this topic from getting more posts.",
+        votes: "reaction",
+        votes_plural: "reactions",
       },
       posts: {
         title: "Posts",
@@ -1107,13 +1111,13 @@ const messages = {
         maxLength: "The maximum length for the text field is reached",
         error: "The field is required",
       },
-      bottomText: "Are you missing a category? Let our moderator know at ",
+      bottomText: "Are you missing a category? You can request new categories. Use 'Ask NDLA' or send an email to ",
       moderatorEmail: "moderator@ndla.no",
       notification: {
         title: "Notifications",
         showAll: "View all notifications",
         description:
-          "Welcome to the arena for teachers in upper secondary education. This is <em>your</em> arena: a professional meeting place for discussion, inspiration, sharing, development, and collaboration.",
+          "Welcome to NDLAs Arena. Here, you can discuss, share and cooperate with other teachers from all over Norway.",
         myNotification: "My notifications",
         markAll: "Mark all as read",
         subscribe: "You will now be notified of new replies to this topic",
@@ -1126,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: {
@@ -1502,18 +1506,18 @@ const messages = {
       page: "Page {{page}}",
     },
     imageSearch: {
-      close: "Close",
       searchPlaceholder: "Search images",
       searchButtonTitle: "Search",
-      useImageTitle: "Use image",
-      checkboxLabel: "Set as meta image",
-      imageMetadata: {
+      imagePreview: {
         creatorsLabel: "Image",
         license: "License",
         caption: "Caption",
         altText: "Alt-text",
         modelRelease: "Model released",
         tags: "Tags",
+        checkboxLabel: "Set as meta image",
+        close: "Close",
+        useImageTitle: "Use image",
       },
     },
     audioSearch: {