@ndla/image-search 6.0.166 → 6.0.167

package/es/PreviewImage.js

@@ -1,3 +1,4 @@
+import _styled from "@emotion/styled/base";
 /**
  * Copyright (c) 2017-present, NDLA.
  *
@@ -9,12 +10,17 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ButtonV2 } from "@ndla/button";
-import { CheckboxItem } from "@ndla/forms";
+import { spacing } from "@ndla/core";
+import { CheckboxItem, Label } from "@ndla/forms";
 import { uuid } from "@ndla/util";
 import ImageMeta from "./ImageMeta";
 import { getSrcSets } from "./util/imageUtil";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const CheckboxWrapper = /*#__PURE__*/_styled("div", {
+  target: "e28xng60",
+  label: "CheckboxWrapper"
+})("display:flex;gap:", spacing.small, ";align-items:center;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlByZXZpZXdJbWFnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJrQyIsImZpbGUiOiJQcmV2aWV3SW1hZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTctcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBCdXR0b25WMiB9IGZyb20gXCJAbmRsYS9idXR0b25cIjtcbmltcG9ydCB7IHNwYWNpbmcgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgQ2hlY2tib3hJdGVtLCBMYWJlbCB9IGZyb20gXCJAbmRsYS9mb3Jtc1wiO1xuaW1wb3J0IHsgSUltYWdlTWV0YUluZm9ybWF0aW9uVjMgfSBmcm9tIFwiQG5kbGEvdHlwZXMtYmFja2VuZC9pbWFnZS1hcGlcIjtcbmltcG9ydCB7IHV1aWQgfSBmcm9tIFwiQG5kbGEvdXRpbFwiO1xuXG5pbXBvcnQgSW1hZ2VNZXRhIGZyb20gXCIuL0ltYWdlTWV0YVwiO1xuaW1wb3J0IHsgZ2V0U3JjU2V0cyB9IGZyb20gXCIuL3V0aWwvaW1hZ2VVdGlsXCI7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGltYWdlOiBJSW1hZ2VNZXRhSW5mb3JtYXRpb25WMztcbiAgb25TZWxlY3RJbWFnZTogKGltYWdlOiBJSW1hZ2VNZXRhSW5mb3JtYXRpb25WMywgc2F2ZUFzTWV0YUltYWdlOiBib29sZWFuKSA9PiB2b2lkO1xuICB1c2VJbWFnZVRpdGxlOiBzdHJpbmc7XG4gIHNob3dDaGVja2JveDogYm9vbGVhbjtcbiAgY2hlY2tib3hMYWJlbD86IHN0cmluZztcbn1cblxuY29uc3QgQ2hlY2tib3hXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAke3NwYWNpbmcuc21hbGx9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgUHJldmlld0ltYWdlID0gKHsgaW1hZ2UsIG9uU2VsZWN0SW1hZ2UsIHVzZUltYWdlVGl0bGUsIHNob3dDaGVja2JveCwgY2hlY2tib3hMYWJlbCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IFtzYXZlQXNNZXRhSW1hZ2UsIHNldFNhdmVBc01ldGFJbWFnZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgdGFncyA9IGltYWdlLnRhZ3MudGFncyA/PyBbXTtcbiAgY29uc3QgdGl0bGUgPSBpbWFnZS50aXRsZS50aXRsZSA/PyBcIlwiO1xuICBjb25zdCBhbHRUZXh0ID0gaW1hZ2UuYWx0dGV4dC5hbHR0ZXh0ID8/IFwiXCI7XG4gIGNvbnN0IGNhcHRpb24gPSBpbWFnZS5jYXB0aW9uLmNhcHRpb24gPz8gXCJcIjtcbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT1cImltYWdlLXByZXZpZXdcIj5cbiAgICAgIDxkaXYgY2xhc3NOYW1lPVwiaW1hZ2VcIj5cbiAgICAgICAgPGltZ1xuICAgICAgICAgIHJvbGU9XCJwcmVzZW50YXRpb25cIlxuICAgICAgICAgIGFsdD1cInByZXNlbnRhdGlvblwiXG4gICAgICAgICAgc3JjU2V0PXtnZXRTcmNTZXRzKGltYWdlLmltYWdlLmltYWdlVXJsKX1cbiAgICAgICAgICBzaXplcz1cIihtaW4td2lkdGg6IDgwMHB4KSAzNjBweCwgKG1pbi13aWR0aDogNDAwcHgpIDMwMHB4LCAxMDB2d1wiXG4gICAgICAgICAgc3JjPXtpbWFnZS5pbWFnZS5pbWFnZVVybH1cbiAgICAgICAgICBhcmlhLWxhYmVsPXt0aXRsZX1cbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzc05hbWU9XCJpbmZvcm1hdGlvblwiPlxuICAgICAgICA8aDIgY2xhc3NOYW1lPVwidGl0bGVcIj57dGl0bGV9PC9oMj5cbiAgICAgICAge2ltYWdlLmNvcHlyaWdodC5jcmVhdG9ycyAmJiBpbWFnZS5jb3B5cmlnaHQuY3JlYXRvcnMubGVuZ3RoID4gMCA/IChcbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImNvcHlyaWdodC1hdXRob3JcIj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cInRleHRcIj57aW1hZ2UuY29weXJpZ2h0LmNyZWF0b3JzLm1hcCgoY3JlYXRvcikgPT4gY3JlYXRvci5uYW1lKS5qb2luKFwiLCBcIil9PC9zcGFuPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICApIDogbnVsbH1cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJpbmZvXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwidGV4dFwiPntpbWFnZS5jb3B5cmlnaHQubGljZW5zZS5kZXNjcmlwdGlvbn08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImluZm9cIj5cbiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9XCJ0ZXh0XCI+e2Ake3QoXCJpbWFnZS5jYXB0aW9uXCIpfTogJHtjYXB0aW9ufWB9PC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJpbmZvXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwidGV4dFwiPntgJHt0KFwiaW1hZ2UuYWx0VGV4dFwiKX06ICR7YWx0VGV4dH1gfTwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiaW5mb1wiPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cInRleHRcIj57YCR7dChcImltYWdlLm1vZGVsUmVsZWFzZWQubGFiZWxcIil9OiAke3QoXG4gICAgICAgICAgICBcImltYWdlLm1vZGVsUmVsZWFzZWQuXCIgKyBpbWFnZS5tb2RlbFJlbGVhc2UsXG4gICAgICAgICAgKX1gfTwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxJbWFnZU1ldGFcbiAgICAgICAgICBjb250ZW50VHlwZT17aW1hZ2UuaW1hZ2UuY29udGVudFR5cGV9XG4gICAgICAgICAgZmlsZVNpemU9e2ltYWdlLmltYWdlLnNpemV9XG4gICAgICAgICAgaW1hZ2VEaW1lbnNpb25zPXtpbWFnZS5pbWFnZS5kaW1lbnNpb25zfVxuICAgICAgICAvPlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cInRhZ3NcIj5cbiAgICAgICAgICB7dGFncy5tYXAoKHRhZykgPT4gKFxuICAgICAgICAgICAgPHNwYW4ga2V5PXt1dWlkKCl9IGNsYXNzTmFtZT1cInRhZ19pdGVtXCI+e2AjJHt0YWd9YH08L3NwYW4+XG4gICAgICAgICAgKSl9XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8QnV0dG9uVjIgZGF0YS10ZXN0aWQ9XCJ1c2UtaW1hZ2VcIiBvbkNsaWNrPXsoKSA9PiBvblNlbGVjdEltYWdlKGltYWdlLCBzYXZlQXNNZXRhSW1hZ2UpfT5cbiAgICAgICAgICB7dXNlSW1hZ2VUaXRsZX1cbiAgICAgICAgPC9CdXR0b25WMj5cbiAgICAgICAge3Nob3dDaGVja2JveCAmJiAoXG4gICAgICAgICAgPENoZWNrYm94V3JhcHBlcj5cbiAgICAgICAgICAgIDxDaGVja2JveEl0ZW1cbiAgICAgICAgICAgICAgaWQ9XCJzYXZlQXNNZXRhXCJcbiAgICAgICAgICAgICAgY2hlY2tlZD17c2F2ZUFzTWV0YUltYWdlfVxuICAgICAgICAgICAgICBvbkNoZWNrZWRDaGFuZ2U9eygpID0+IHNldFNhdmVBc01ldGFJbWFnZSgocHJldikgPT4gIXByZXYpfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIDxMYWJlbCBodG1sRm9yPVwic2F2ZUFzTWV0YVwiIHRleHRTdHlsZT1cImxhYmVsLXNtYWxsXCIgbWFyZ2luPVwibm9uZVwiPlxuICAgICAgICAgICAgICB7Y2hlY2tib3hMYWJlbH1cbiAgICAgICAgICAgIDwvTGFiZWw+XG4gICAgICAgICAgPC9DaGVja2JveFdyYXBwZXI+XG4gICAgICAgICl9XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3NOYW1lPVwiY2xlYXJcIiAvPlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgUHJldmlld0ltYWdlO1xuIl19 */"));
 const PreviewImage = _ref => {
   let {
     image,
@@ -92,12 +98,17 @@ const PreviewImage = _ref => {
         "data-testid": "use-image",
         onClick: () => onSelectImage(image, saveAsMetaImage),
         children: useImageTitle
-      }), showCheckbox && _jsx("div", {
-        children: _jsx(CheckboxItem, {
-          label: checkboxLabel,
+      }), showCheckbox && _jsxs(CheckboxWrapper, {
+        children: [_jsx(CheckboxItem, {
+          id: "saveAsMeta",
           checked: saveAsMetaImage,
-          onChange: () => setSaveAsMetaImage(prev => !prev)
-        })
+          onCheckedChange: () => setSaveAsMetaImage(prev => !prev)
+        }), _jsx(Label, {
+          htmlFor: "saveAsMeta",
+          textStyle: "label-small",
+          margin: "none",
+          children: checkboxLabel
+        })]
       })]
     }), _jsx("div", {
       className: "clear"

package/lib/PreviewImage.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = require("react");
 var _reactI18next = require("react-i18next");
 var _button = require("@ndla/button");
+var _core = require("@ndla/core");
 var _forms = require("@ndla/forms");
 var _util = require("@ndla/util");
 var _ImageMeta = _interopRequireDefault(require("./ImageMeta"));
@@ -21,6 +23,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *
  */
 
+const CheckboxWrapper = /*#__PURE__*/(0, _base.default)("div", {
+  target: "e28xng60",
+  label: "CheckboxWrapper"
+})("display:flex;gap:", _core.spacing.small, ";align-items:center;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlByZXZpZXdJbWFnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJrQyIsImZpbGUiOiJQcmV2aWV3SW1hZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTctcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBCdXR0b25WMiB9IGZyb20gXCJAbmRsYS9idXR0b25cIjtcbmltcG9ydCB7IHNwYWNpbmcgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgQ2hlY2tib3hJdGVtLCBMYWJlbCB9IGZyb20gXCJAbmRsYS9mb3Jtc1wiO1xuaW1wb3J0IHsgSUltYWdlTWV0YUluZm9ybWF0aW9uVjMgfSBmcm9tIFwiQG5kbGEvdHlwZXMtYmFja2VuZC9pbWFnZS1hcGlcIjtcbmltcG9ydCB7IHV1aWQgfSBmcm9tIFwiQG5kbGEvdXRpbFwiO1xuXG5pbXBvcnQgSW1hZ2VNZXRhIGZyb20gXCIuL0ltYWdlTWV0YVwiO1xuaW1wb3J0IHsgZ2V0U3JjU2V0cyB9IGZyb20gXCIuL3V0aWwvaW1hZ2VVdGlsXCI7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGltYWdlOiBJSW1hZ2VNZXRhSW5mb3JtYXRpb25WMztcbiAgb25TZWxlY3RJbWFnZTogKGltYWdlOiBJSW1hZ2VNZXRhSW5mb3JtYXRpb25WMywgc2F2ZUFzTWV0YUltYWdlOiBib29sZWFuKSA9PiB2b2lkO1xuICB1c2VJbWFnZVRpdGxlOiBzdHJpbmc7XG4gIHNob3dDaGVja2JveDogYm9vbGVhbjtcbiAgY2hlY2tib3hMYWJlbD86IHN0cmluZztcbn1cblxuY29uc3QgQ2hlY2tib3hXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAke3NwYWNpbmcuc21hbGx9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgUHJldmlld0ltYWdlID0gKHsgaW1hZ2UsIG9uU2VsZWN0SW1hZ2UsIHVzZUltYWdlVGl0bGUsIHNob3dDaGVja2JveCwgY2hlY2tib3hMYWJlbCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IFtzYXZlQXNNZXRhSW1hZ2UsIHNldFNhdmVBc01ldGFJbWFnZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgdGFncyA9IGltYWdlLnRhZ3MudGFncyA/PyBbXTtcbiAgY29uc3QgdGl0bGUgPSBpbWFnZS50aXRsZS50aXRsZSA/PyBcIlwiO1xuICBjb25zdCBhbHRUZXh0ID0gaW1hZ2UuYWx0dGV4dC5hbHR0ZXh0ID8/IFwiXCI7XG4gIGNvbnN0IGNhcHRpb24gPSBpbWFnZS5jYXB0aW9uLmNhcHRpb24gPz8gXCJcIjtcbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT1cImltYWdlLXByZXZpZXdcIj5cbiAgICAgIDxkaXYgY2xhc3NOYW1lPVwiaW1hZ2VcIj5cbiAgICAgICAgPGltZ1xuICAgICAgICAgIHJvbGU9XCJwcmVzZW50YXRpb25cIlxuICAgICAgICAgIGFsdD1cInByZXNlbnRhdGlvblwiXG4gICAgICAgICAgc3JjU2V0PXtnZXRTcmNTZXRzKGltYWdlLmltYWdlLmltYWdlVXJsKX1cbiAgICAgICAgICBzaXplcz1cIihtaW4td2lkdGg6IDgwMHB4KSAzNjBweCwgKG1pbi13aWR0aDogNDAwcHgpIDMwMHB4LCAxMDB2d1wiXG4gICAgICAgICAgc3JjPXtpbWFnZS5pbWFnZS5pbWFnZVVybH1cbiAgICAgICAgICBhcmlhLWxhYmVsPXt0aXRsZX1cbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzc05hbWU9XCJpbmZvcm1hdGlvblwiPlxuICAgICAgICA8aDIgY2xhc3NOYW1lPVwidGl0bGVcIj57dGl0bGV9PC9oMj5cbiAgICAgICAge2ltYWdlLmNvcHlyaWdodC5jcmVhdG9ycyAmJiBpbWFnZS5jb3B5cmlnaHQuY3JlYXRvcnMubGVuZ3RoID4gMCA/IChcbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImNvcHlyaWdodC1hdXRob3JcIj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cInRleHRcIj57aW1hZ2UuY29weXJpZ2h0LmNyZWF0b3JzLm1hcCgoY3JlYXRvcikgPT4gY3JlYXRvci5uYW1lKS5qb2luKFwiLCBcIil9PC9zcGFuPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICApIDogbnVsbH1cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJpbmZvXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwidGV4dFwiPntpbWFnZS5jb3B5cmlnaHQubGljZW5zZS5kZXNjcmlwdGlvbn08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImluZm9cIj5cbiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9XCJ0ZXh0XCI+e2Ake3QoXCJpbWFnZS5jYXB0aW9uXCIpfTogJHtjYXB0aW9ufWB9PC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJpbmZvXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwidGV4dFwiPntgJHt0KFwiaW1hZ2UuYWx0VGV4dFwiKX06ICR7YWx0VGV4dH1gfTwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiaW5mb1wiPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cInRleHRcIj57YCR7dChcImltYWdlLm1vZGVsUmVsZWFzZWQubGFiZWxcIil9OiAke3QoXG4gICAgICAgICAgICBcImltYWdlLm1vZGVsUmVsZWFzZWQuXCIgKyBpbWFnZS5tb2RlbFJlbGVhc2UsXG4gICAgICAgICAgKX1gfTwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxJbWFnZU1ldGFcbiAgICAgICAgICBjb250ZW50VHlwZT17aW1hZ2UuaW1hZ2UuY29udGVudFR5cGV9XG4gICAgICAgICAgZmlsZVNpemU9e2ltYWdlLmltYWdlLnNpemV9XG4gICAgICAgICAgaW1hZ2VEaW1lbnNpb25zPXtpbWFnZS5pbWFnZS5kaW1lbnNpb25zfVxuICAgICAgICAvPlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cInRhZ3NcIj5cbiAgICAgICAgICB7dGFncy5tYXAoKHRhZykgPT4gKFxuICAgICAgICAgICAgPHNwYW4ga2V5PXt1dWlkKCl9IGNsYXNzTmFtZT1cInRhZ19pdGVtXCI+e2AjJHt0YWd9YH08L3NwYW4+XG4gICAgICAgICAgKSl9XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8QnV0dG9uVjIgZGF0YS10ZXN0aWQ9XCJ1c2UtaW1hZ2VcIiBvbkNsaWNrPXsoKSA9PiBvblNlbGVjdEltYWdlKGltYWdlLCBzYXZlQXNNZXRhSW1hZ2UpfT5cbiAgICAgICAgICB7dXNlSW1hZ2VUaXRsZX1cbiAgICAgICAgPC9CdXR0b25WMj5cbiAgICAgICAge3Nob3dDaGVja2JveCAmJiAoXG4gICAgICAgICAgPENoZWNrYm94V3JhcHBlcj5cbiAgICAgICAgICAgIDxDaGVja2JveEl0ZW1cbiAgICAgICAgICAgICAgaWQ9XCJzYXZlQXNNZXRhXCJcbiAgICAgICAgICAgICAgY2hlY2tlZD17c2F2ZUFzTWV0YUltYWdlfVxuICAgICAgICAgICAgICBvbkNoZWNrZWRDaGFuZ2U9eygpID0+IHNldFNhdmVBc01ldGFJbWFnZSgocHJldikgPT4gIXByZXYpfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIDxMYWJlbCBodG1sRm9yPVwic2F2ZUFzTWV0YVwiIHRleHRTdHlsZT1cImxhYmVsLXNtYWxsXCIgbWFyZ2luPVwibm9uZVwiPlxuICAgICAgICAgICAgICB7Y2hlY2tib3hMYWJlbH1cbiAgICAgICAgICAgIDwvTGFiZWw+XG4gICAgICAgICAgPC9DaGVja2JveFdyYXBwZXI+XG4gICAgICAgICl9XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3NOYW1lPVwiY2xlYXJcIiAvPlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgUHJldmlld0ltYWdlO1xuIl19 */"));
 const PreviewImage = _ref => {
   let {
     image,
@@ -98,12 +104,17 @@ const PreviewImage = _ref => {
         "data-testid": "use-image",
         onClick: () => onSelectImage(image, saveAsMetaImage),
         children: useImageTitle
-      }), showCheckbox && (0, _jsxRuntime.jsx)("div", {
-        children: (0, _jsxRuntime.jsx)(_forms.CheckboxItem, {
-          label: checkboxLabel,
+      }), showCheckbox && (0, _jsxRuntime.jsxs)(CheckboxWrapper, {
+        children: [(0, _jsxRuntime.jsx)(_forms.CheckboxItem, {
+          id: "saveAsMeta",
           checked: saveAsMetaImage,
-          onChange: () => setSaveAsMetaImage(prev => !prev)
-        })
+          onCheckedChange: () => setSaveAsMetaImage(prev => !prev)
+        }), (0, _jsxRuntime.jsx)(_forms.Label, {
+          htmlFor: "saveAsMeta",
+          textStyle: "label-small",
+          margin: "none",
+          children: checkboxLabel
+        })]
       })]
     }), (0, _jsxRuntime.jsx)("div", {
       className: "clear"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/image-search",
-  "version": "6.0.166",
+  "version": "6.0.167",
   "description": "A simple library for searching images from NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -26,12 +26,12 @@
     "es"
   ],
   "dependencies": {
-    "@ndla/button": "^12.0.32",
+    "@ndla/button": "^12.0.33",
     "@ndla/core": "^4.4.0",
-    "@ndla/forms": "^5.2.23",
+    "@ndla/forms": "^6.0.0",
     "@ndla/icons": "^5.0.10",
-    "@ndla/pager": "^2.2.57",
-    "@ndla/ui": "^50.9.11",
+    "@ndla/pager": "^2.2.58",
+    "@ndla/ui": "^50.9.12",
     "@ndla/util": "^4.0.4",
     "pretty-bytes": "^5.6.0"
   },
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e4df6352059eb5bfe04e9e553d086487cc356806"
+  "gitHead": "1e6b966745840ee412f9a16f55afb9a7392b5ed5"
 }