@webiny/app-headless-cms 5.43.3 → 6.0.0-alpha.1

package/admin/plugins/fieldRenderers/object/FieldSettings.js

@@ -1,65 +1,45 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FieldSettings = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var cache = new Map();
+const cache = new Map();
 
 /**
  * This class helps us handle the `field.settings` and encapsulate defaults, checks of undefined, etc.
  * We also want to prevent log spamming in the browser console, so we cache and reuse each instance
  * for every unique field object. That way, each instance can track its own state.
  */
-var FieldSettings = exports.FieldSettings = /*#__PURE__*/function () {
-  function FieldSettings(field) {
-    (0, _classCallCheck2.default)(this, FieldSettings);
-    (0, _defineProperty2.default)(this, "logged", false);
+export class FieldSettings {
+  logged = false;
+  constructor(field) {
     this.field = field;
   }
-  return (0, _createClass2.default)(FieldSettings, [{
-    key: "getSettings",
-    value: function getSettings() {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.field.settings), {}, {
-        fields: this.field.settings?.fields || [],
-        layout: this.field.settings?.layout || []
-      });
+  getSettings() {
+    return {
+      ...this.field.settings,
+      fields: this.field.settings?.fields || [],
+      layout: this.field.settings?.layout || []
+    };
+  }
+  hasFields() {
+    if (!this.field.settings) {
+      return false;
     }
-  }, {
-    key: "hasFields",
-    value: function hasFields() {
-      if (!this.field.settings) {
-        return false;
-      }
-      if (!this.field.settings.fields) {
-        return false;
-      }
-      return this.field.settings.fields.length > 0;
+    if (!this.field.settings.fields) {
+      return false;
     }
-  }, {
-    key: "logMissingFields",
-    value: function logMissingFields() {
-      if (this.logged) {
-        return;
-      }
-      console.info("Skipping \"".concat(this.field.fieldId, "\" field. There are no fields defined for this object."));
-      this.logged = true;
+    return this.field.settings.fields.length > 0;
+  }
+  logMissingFields() {
+    if (this.logged) {
+      return;
     }
-  }], [{
-    key: "createFrom",
-    value: function createFrom(field) {
-      if (cache.has(field)) {
-        return cache.get(field);
-      }
-      cache.set(field, new FieldSettings(field));
+    console.info(`Skipping "${this.field.fieldId}" field. There are no fields defined for this object.`);
+    this.logged = true;
+  }
+  static createFrom(field) {
+    if (cache.has(field)) {
       return cache.get(field);
     }
-  }]);
-}();
+    cache.set(field, new FieldSettings(field));
+    return cache.get(field);
+  }
+}
 
 //# sourceMappingURL=FieldSettings.js.map

package/admin/plugins/fieldRenderers/object/FieldSettings.js.map

@@ -1 +1 @@
-{"version":3,"names":["cache","Map","FieldSettings","exports","field","_classCallCheck2","default","_defineProperty2","_createClass2","key","value","getSettings","_objectSpread2","settings","fields","layout","hasFields","length","logMissingFields","logged","console","info","concat","fieldId","createFrom","has","get","set"],"sources":["FieldSettings.ts"],"sourcesContent":["import { CmsModelField } from \"@webiny/app-headless-cms-common/types\";\n\nconst cache = new Map<CmsModelField, FieldSettings>();\n\n/**\n * This class helps us handle the `field.settings` and encapsulate defaults, checks of undefined, etc.\n * We also want to prevent log spamming in the browser console, so we cache and reuse each instance\n * for every unique field object. That way, each instance can track its own state.\n */\nexport class FieldSettings {\n    private readonly field: CmsModelField;\n    private logged = false;\n\n    private constructor(field: CmsModelField) {\n        this.field = field;\n    }\n\n    getSettings() {\n        return {\n            ...this.field.settings,\n            fields: this.field.settings?.fields || [],\n            layout: this.field.settings?.layout || []\n        };\n    }\n\n    hasFields() {\n        if (!this.field.settings) {\n            return false;\n        }\n\n        if (!this.field.settings.fields) {\n            return false;\n        }\n\n        return this.field.settings.fields.length > 0;\n    }\n\n    logMissingFields() {\n        if (this.logged) {\n            return;\n        }\n\n        console.info(\n            `Skipping \"${this.field.fieldId}\" field. There are no fields defined for this object.`\n        );\n\n        this.logged = true;\n    }\n\n    public static createFrom(field: CmsModelField): FieldSettings {\n        if (cache.has(field)) {\n            return cache.get(field) as FieldSettings;\n        }\n\n        cache.set(field, new FieldSettings(field));\n\n        return cache.get(field) as FieldSettings;\n    }\n}\n"],"mappings":";;;;;;;;;;;AAEA,IAAMA,KAAK,GAAG,IAAIC,GAAG,CAA+B,CAAC;;AAErD;AACA;AACA;AACA;AACA;AAJA,IAKaC,aAAa,GAAAC,OAAA,CAAAD,aAAA;EAItB,SAAAA,cAAoBE,KAAoB,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA,QAAAJ,aAAA;IAAA,IAAAK,gBAAA,CAAAD,OAAA,kBAFzB,KAAK;IAGlB,IAAI,CAACF,KAAK,GAAGA,KAAK;EACtB;EAAC,WAAAI,aAAA,CAAAF,OAAA,EAAAJ,aAAA;IAAAO,GAAA;IAAAC,KAAA,EAED,SAAAC,WAAWA,CAAA,EAAG;MACV,WAAAC,cAAA,CAAAN,OAAA,MAAAM,cAAA,CAAAN,OAAA,MACO,IAAI,CAACF,KAAK,CAACS,QAAQ;QACtBC,MAAM,EAAE,IAAI,CAACV,KAAK,CAACS,QAAQ,EAAEC,MAAM,IAAI,EAAE;QACzCC,MAAM,EAAE,IAAI,CAACX,KAAK,CAACS,QAAQ,EAAEE,MAAM,IAAI;MAAE;IAEjD;EAAC;IAAAN,GAAA;IAAAC,KAAA,EAED,SAAAM,SAASA,CAAA,EAAG;MACR,IAAI,CAAC,IAAI,CAACZ,KAAK,CAACS,QAAQ,EAAE;QACtB,OAAO,KAAK;MAChB;MAEA,IAAI,CAAC,IAAI,CAACT,KAAK,CAACS,QAAQ,CAACC,MAAM,EAAE;QAC7B,OAAO,KAAK;MAChB;MAEA,OAAO,IAAI,CAACV,KAAK,CAACS,QAAQ,CAACC,MAAM,CAACG,MAAM,GAAG,CAAC;IAChD;EAAC;IAAAR,GAAA;IAAAC,KAAA,EAED,SAAAQ,gBAAgBA,CAAA,EAAG;MACf,IAAI,IAAI,CAACC,MAAM,EAAE;QACb;MACJ;MAEAC,OAAO,CAACC,IAAI,eAAAC,MAAA,CACK,IAAI,CAAClB,KAAK,CAACmB,OAAO,2DACnC,CAAC;MAED,IAAI,CAACJ,MAAM,GAAG,IAAI;IACtB;EAAC;IAAAV,GAAA;IAAAC,KAAA,EAED,SAAcc,UAAUA,CAACpB,KAAoB,EAAiB;MAC1D,IAAIJ,KAAK,CAACyB,GAAG,CAACrB,KAAK,CAAC,EAAE;QAClB,OAAOJ,KAAK,CAAC0B,GAAG,CAACtB,KAAK,CAAC;MAC3B;MAEAJ,KAAK,CAAC2B,GAAG,CAACvB,KAAK,EAAE,IAAIF,aAAa,CAACE,KAAK,CAAC,CAAC;MAE1C,OAAOJ,KAAK,CAAC0B,GAAG,CAACtB,KAAK,CAAC;IAC3B;EAAC;AAAA","ignoreList":[]}
+{"version":3,"names":["cache","Map","FieldSettings","logged","constructor","field","getSettings","settings","fields","layout","hasFields","length","logMissingFields","console","info","fieldId","createFrom","has","get","set"],"sources":["FieldSettings.ts"],"sourcesContent":["import type { CmsModelField } from \"@webiny/app-headless-cms-common/types\";\n\nconst cache = new Map<CmsModelField, FieldSettings>();\n\n/**\n * This class helps us handle the `field.settings` and encapsulate defaults, checks of undefined, etc.\n * We also want to prevent log spamming in the browser console, so we cache and reuse each instance\n * for every unique field object. That way, each instance can track its own state.\n */\nexport class FieldSettings {\n    private readonly field: CmsModelField;\n    private logged = false;\n\n    private constructor(field: CmsModelField) {\n        this.field = field;\n    }\n\n    getSettings() {\n        return {\n            ...this.field.settings,\n            fields: this.field.settings?.fields || [],\n            layout: this.field.settings?.layout || []\n        };\n    }\n\n    hasFields() {\n        if (!this.field.settings) {\n            return false;\n        }\n\n        if (!this.field.settings.fields) {\n            return false;\n        }\n\n        return this.field.settings.fields.length > 0;\n    }\n\n    logMissingFields() {\n        if (this.logged) {\n            return;\n        }\n\n        console.info(\n            `Skipping \"${this.field.fieldId}\" field. There are no fields defined for this object.`\n        );\n\n        this.logged = true;\n    }\n\n    public static createFrom(field: CmsModelField): FieldSettings {\n        if (cache.has(field)) {\n            return cache.get(field) as FieldSettings;\n        }\n\n        cache.set(field, new FieldSettings(field));\n\n        return cache.get(field) as FieldSettings;\n    }\n}\n"],"mappings":"AAEA,MAAMA,KAAK,GAAG,IAAIC,GAAG,CAA+B,CAAC;;AAErD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,CAAC;EAEfC,MAAM,GAAG,KAAK;EAEdC,WAAWA,CAACC,KAAoB,EAAE;IACtC,IAAI,CAACA,KAAK,GAAGA,KAAK;EACtB;EAEAC,WAAWA,CAAA,EAAG;IACV,OAAO;MACH,GAAG,IAAI,CAACD,KAAK,CAACE,QAAQ;MACtBC,MAAM,EAAE,IAAI,CAACH,KAAK,CAACE,QAAQ,EAAEC,MAAM,IAAI,EAAE;MACzCC,MAAM,EAAE,IAAI,CAACJ,KAAK,CAACE,QAAQ,EAAEE,MAAM,IAAI;IAC3C,CAAC;EACL;EAEAC,SAASA,CAAA,EAAG;IACR,IAAI,CAAC,IAAI,CAACL,KAAK,CAACE,QAAQ,EAAE;MACtB,OAAO,KAAK;IAChB;IAEA,IAAI,CAAC,IAAI,CAACF,KAAK,CAACE,QAAQ,CAACC,MAAM,EAAE;MAC7B,OAAO,KAAK;IAChB;IAEA,OAAO,IAAI,CAACH,KAAK,CAACE,QAAQ,CAACC,MAAM,CAACG,MAAM,GAAG,CAAC;EAChD;EAEAC,gBAAgBA,CAAA,EAAG;IACf,IAAI,IAAI,CAACT,MAAM,EAAE;MACb;IACJ;IAEAU,OAAO,CAACC,IAAI,CACR,aAAa,IAAI,CAACT,KAAK,CAACU,OAAO,uDACnC,CAAC;IAED,IAAI,CAACZ,MAAM,GAAG,IAAI;EACtB;EAEA,OAAca,UAAUA,CAACX,KAAoB,EAAiB;IAC1D,IAAIL,KAAK,CAACiB,GAAG,CAACZ,KAAK,CAAC,EAAE;MAClB,OAAOL,KAAK,CAACkB,GAAG,CAACb,KAAK,CAAC;IAC3B;IAEAL,KAAK,CAACmB,GAAG,CAACd,KAAK,EAAE,IAAIH,aAAa,CAACG,KAAK,CAAC,CAAC;IAE1C,OAAOL,KAAK,CAACkB,GAAG,CAACb,KAAK,CAAC;EAC3B;AACJ","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/MultiValueContainer.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { BindComponentRenderProp, CmsModelFieldRendererProps } from "@webiny/app-headless-cms-common/types";
+import type { BindComponentRenderProp, CmsModelFieldRendererProps } from "@webiny/app-headless-cms-common/types";
 type GetBind = CmsModelFieldRendererProps["getBind"];
 export interface MultiValueContainerProps {
     bind: BindComponentRenderProp;

package/admin/plugins/fieldRenderers/object/MultiValueContainer.js

@@ -1,116 +1,113 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MultiValueContainer = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread8 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _utils = require("@webiny/utils");
-var _Grid = require("@webiny/ui/Grid");
-var _appAdmin = require("@webiny/app-admin");
-var _MultiValueItemContainer = require("./MultiValueItemContainer");
-var _Fields = require("../../../components/ContentEntryForm/Fields");
-var _DynamicSection = _interopRequireDefault(require("../DynamicSection"));
-var _StyledComponents = require("./StyledComponents");
-var _FieldSettings = require("./FieldSettings");
-var _ModelFieldProvider = require("../../../components/ModelFieldProvider");
-var _ModelProvider = require("../../../components/ModelProvider");
-var MultiValueContainer = exports.MultiValueContainer = function MultiValueContainer(props) {
-  var _useState = (0, _react.useState)({}),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    highlightMap = _useState2[0],
-    setHighlightIndex = _useState2[1];
-  var _useState3 = (0, _react.useState)({}),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    itemState = _useState4[0],
-    setItemState = _useState4[1];
-  var _useModel = (0, _ModelProvider.useModel)(),
-    model = _useModel.model;
-  var _useModelField = (0, _ModelFieldProvider.useModelField)(),
-    field = _useModelField.field;
-  var _useConfirmationDialo = (0, _appAdmin.useConfirmationDialog)({
-      message: "Are you sure you want to delete this item? This action is not reversible.",
-      acceptLabel: "Yes, I'm sure!",
-      cancelLabel: "No, leave it."
-    }),
-    showConfirmation = _useConfirmationDialo.showConfirmation;
-  var fieldSettings = _FieldSettings.FieldSettings.createFrom(field);
+import React, { useState } from "react";
+import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
+import { Cell } from "@webiny/ui/Grid";
+import { useConfirmationDialog } from "@webiny/app-admin";
+import { MultiValueItemContainer } from "./MultiValueItemContainer";
+import { Fields } from "../../../components/ContentEntryForm/Fields";
+import DynamicSection from "../DynamicSection";
+import { dynamicSectionGridStyle, fieldsGridStyle, fieldsWrapperStyle, ItemHighLight, ObjectItem } from "./StyledComponents";
+import { FieldSettings } from "./FieldSettings";
+import { useModelField } from "../../../components/ModelFieldProvider";
+import { useModel } from "../../../components/ModelProvider";
+export const MultiValueContainer = props => {
+  const [highlightMap, setHighlightIndex] = useState({});
+  const [itemState, setItemState] = useState({});
+  const {
+    model
+  } = useModel();
+  const {
+    field
+  } = useModelField();
+  const {
+    showConfirmation
+  } = useConfirmationDialog({
+    message: `Are you sure you want to delete this item? This action is not reversible.`,
+    acceptLabel: `Yes, I'm sure!`,
+    cancelLabel: `No, leave it.`
+  });
+  const fieldSettings = FieldSettings.createFrom(field);
   if (!fieldSettings.hasFields()) {
     fieldSettings.logMissingFields();
     return null;
   }
-  var toggleItemState = function toggleItemState(index) {
-    setItemState(function (state) {
-      return (0, _objectSpread8.default)((0, _objectSpread8.default)({}, state), {}, (0, _defineProperty2.default)({}, index, !state[index]));
-    });
+  const toggleItemState = index => {
+    setItemState(state => ({
+      ...state,
+      [index]: !state[index]
+    }));
   };
-  var onAddItem = function onAddItem(index) {
-    setItemState(function (state) {
-      return (0, _objectSpread8.default)((0, _objectSpread8.default)({}, state), {}, (0, _defineProperty2.default)({}, index, true));
-    });
+  const onAddItem = index => {
+    setItemState(state => ({
+      ...state,
+      [index]: true
+    }));
   };
-  var settings = fieldSettings.getSettings();
-  return /*#__PURE__*/_react.default.createElement(_DynamicSection.default, Object.assign({}, props, {
+  const settings = fieldSettings.getSettings();
+  return /*#__PURE__*/React.createElement(DynamicSection, Object.assign({}, props, {
     showLabel: props.showTitle,
     field: field,
     emptyValue: {},
     onAddItem: onAddItem,
-    gridClassName: _StyledComponents.dynamicSectionGridStyle
-  }), function (_ref) {
-    var Bind = _ref.Bind,
-      bind = _ref.bind,
-      index = _ref.index;
-    var onMoveDown = function onMoveDown() {
+    gridClassName: dynamicSectionGridStyle
+  }), ({
+    Bind,
+    bind,
+    index
+  }) => {
+    const onMoveDown = () => {
       bind.field.moveValueDown(index);
-      setHighlightIndex(function (map) {
-        return (0, _objectSpread8.default)((0, _objectSpread8.default)({}, map), {}, (0, _defineProperty2.default)({}, index + 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
-      });
-      setItemState(function (state) {
-        return (0, _objectSpread8.default)((0, _objectSpread8.default)({}, state), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, index + 1, state[index] ?? false), index, state[index + 1] ?? false));
+      setHighlightIndex(map => ({
+        ...map,
+        [index + 1]: generateAlphaNumericLowerCaseId(12)
+      }));
+      setItemState(state => {
+        return {
+          ...state,
+          [index + 1]: state[index] ?? false,
+          [index]: state[index + 1] ?? false
+        };
       });
     };
-    var onMoveUp = function onMoveUp() {
+    const onMoveUp = () => {
       bind.field.moveValueUp(index);
-      setHighlightIndex(function (map) {
-        return (0, _objectSpread8.default)((0, _objectSpread8.default)({}, map), {}, (0, _defineProperty2.default)({}, index - 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
-      });
-      setItemState(function (state) {
-        return (0, _objectSpread8.default)((0, _objectSpread8.default)({}, state), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, index - 1, state[index] ?? false), index, state[index - 1] ?? false));
+      setHighlightIndex(map => ({
+        ...map,
+        [index - 1]: generateAlphaNumericLowerCaseId(12)
+      }));
+      setItemState(state => {
+        return {
+          ...state,
+          [index - 1]: state[index] ?? false,
+          [index]: state[index - 1] ?? false
+        };
       });
     };
-    var onDelete = function onDelete() {
-      showConfirmation(function () {
+    const onDelete = () => {
+      showConfirmation(() => {
         bind.field.removeValue(index);
       });
     };
-    return /*#__PURE__*/_react.default.createElement(_StyledComponents.ObjectItem, null, highlightMap[index] ? /*#__PURE__*/_react.default.createElement(_StyledComponents.ItemHighLight, {
+    return /*#__PURE__*/React.createElement(ObjectItem, null, highlightMap[index] ? /*#__PURE__*/React.createElement(ItemHighLight, {
       key: highlightMap[index]
-    }) : null, /*#__PURE__*/_react.default.createElement(_MultiValueItemContainer.MultiValueItemContainer, {
+    }) : null, /*#__PURE__*/React.createElement(MultiValueItemContainer, {
       value: bind.index.value,
-      title: "".concat(field.label, " #").concat(index + 1),
+      title: `${field.label} #${index + 1}`,
       isFirst: index === 0,
       isLast: index === bind.field.value.length - 1,
       onMoveUp: onMoveUp,
       onMoveDown: onMoveDown,
       onDelete: onDelete,
       isExpanded: itemState[index] ?? false,
-      toggleExpanded: function toggleExpanded() {
-        return toggleItemState(index);
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+      toggleExpanded: () => toggleItemState(index)
+    }, /*#__PURE__*/React.createElement(Cell, {
       span: 12,
-      className: _StyledComponents.fieldsWrapperStyle
-    }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
+      className: fieldsWrapperStyle
+    }, /*#__PURE__*/React.createElement(Fields, {
       Bind: Bind,
       contentModel: model,
       fields: settings.fields,
       layout: settings.layout,
-      gridClassName: _StyledComponents.fieldsGridStyle
+      gridClassName: fieldsGridStyle
     }))));
   });
 };

package/admin/plugins/fieldRenderers/object/MultiValueContainer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_utils","_Grid","_appAdmin","_MultiValueItemContainer","_Fields","_DynamicSection","_interopRequireDefault","_StyledComponents","_FieldSettings","_ModelFieldProvider","_ModelProvider","MultiValueContainer","exports","props","_useState","useState","_useState2","_slicedToArray2","default","highlightMap","setHighlightIndex","_useState3","_useState4","itemState","setItemState","_useModel","useModel","model","_useModelField","useModelField","field","_useConfirmationDialo","useConfirmationDialog","message","acceptLabel","cancelLabel","showConfirmation","fieldSettings","FieldSettings","createFrom","hasFields","logMissingFields","toggleItemState","index","state","_objectSpread8","_defineProperty2","onAddItem","settings","getSettings","createElement","Object","assign","showLabel","showTitle","emptyValue","gridClassName","dynamicSectionGridStyle","_ref","Bind","bind","onMoveDown","moveValueDown","map","generateAlphaNumericLowerCaseId","onMoveUp","moveValueUp","onDelete","removeValue","ObjectItem","ItemHighLight","key","MultiValueItemContainer","value","title","concat","label","isFirst","isLast","length","isExpanded","toggleExpanded","Cell","span","className","fieldsWrapperStyle","Fields","contentModel","fields","layout","fieldsGridStyle"],"sources":["MultiValueContainer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport {\n    BindComponentRenderProp,\n    CmsModelFieldRendererProps\n} from \"@webiny/app-headless-cms-common/types\";\nimport { MultiValueItemContainer } from \"~/admin/plugins/fieldRenderers/object/MultiValueItemContainer\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport DynamicSection from \"~/admin/plugins/fieldRenderers/DynamicSection\";\nimport {\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    fieldsWrapperStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"~/admin/plugins/fieldRenderers/object/StyledComponents\";\nimport { FieldSettings } from \"~/admin/plugins/fieldRenderers/object/FieldSettings\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider\";\nimport { useModel } from \"~/admin/components/ModelProvider\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueContainerProps {\n    bind: BindComponentRenderProp;\n    getBind: GetBind;\n    showTitle?: boolean;\n}\n\nexport const MultiValueContainer = (props: MultiValueContainerProps) => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const [itemState, setItemState] = useState<{ [key: number]: boolean }>({});\n\n    const { model } = useModel();\n    const { field } = useModelField();\n\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const toggleItemState = (index: number) => {\n        setItemState(state => ({ ...state, [index]: !state[index] }));\n    };\n\n    const onAddItem = (index: number) => {\n        setItemState(state => ({ ...state, [index]: true }));\n    };\n\n    const settings = fieldSettings.getSettings();\n\n    return (\n        <DynamicSection\n            {...props}\n            showLabel={props.showTitle}\n            field={field}\n            emptyValue={{}}\n            onAddItem={onAddItem}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => {\n                const onMoveDown = () => {\n                    bind.field.moveValueDown(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index + 1]: state[index] ?? false,\n                            [index]: state[index + 1] ?? false\n                        };\n                    });\n                };\n\n                const onMoveUp = () => {\n                    bind.field.moveValueUp(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index - 1]: state[index] ?? false,\n                            [index]: state[index - 1] ?? false\n                        };\n                    });\n                };\n\n                const onDelete = () => {\n                    showConfirmation(() => {\n                        bind.field.removeValue(index);\n                    });\n                };\n\n                return (\n                    <ObjectItem>\n                        {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                        <MultiValueItemContainer\n                            value={bind.index.value}\n                            title={`${field.label} #${index + 1}`}\n                            isFirst={index === 0}\n                            isLast={index === bind.field.value.length - 1}\n                            onMoveUp={onMoveUp}\n                            onMoveDown={onMoveDown}\n                            onDelete={onDelete}\n                            isExpanded={itemState[index] ?? false}\n                            toggleExpanded={() => toggleItemState(index)}\n                        >\n                            <Cell span={12} className={fieldsWrapperStyle}>\n                                <Fields\n                                    Bind={Bind}\n                                    contentModel={model}\n                                    fields={settings.fields}\n                                    layout={settings.layout}\n                                    gridClassName={fieldsGridStyle}\n                                />\n                            </Cell>\n                        </MultiValueItemContainer>\n                    </ObjectItem>\n                );\n            }}\n        </DynamicSection>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","generateAlphaNumericLowerCaseId","Cell","useConfirmationDialog","MultiValueItemContainer","Fields","DynamicSection","dynamicSectionGridStyle","fieldsGridStyle","fieldsWrapperStyle","ItemHighLight","ObjectItem","FieldSettings","useModelField","useModel","MultiValueContainer","props","highlightMap","setHighlightIndex","itemState","setItemState","model","field","showConfirmation","message","acceptLabel","cancelLabel","fieldSettings","createFrom","hasFields","logMissingFields","toggleItemState","index","state","onAddItem","settings","getSettings","createElement","Object","assign","showLabel","showTitle","emptyValue","gridClassName","Bind","bind","onMoveDown","moveValueDown","map","onMoveUp","moveValueUp","onDelete","removeValue","key","value","title","label","isFirst","isLast","length","isExpanded","toggleExpanded","span","className","contentModel","fields","layout"],"sources":["MultiValueContainer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport type {\n    BindComponentRenderProp,\n    CmsModelFieldRendererProps\n} from \"@webiny/app-headless-cms-common/types\";\nimport { MultiValueItemContainer } from \"~/admin/plugins/fieldRenderers/object/MultiValueItemContainer\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport DynamicSection from \"~/admin/plugins/fieldRenderers/DynamicSection\";\nimport {\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    fieldsWrapperStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"~/admin/plugins/fieldRenderers/object/StyledComponents\";\nimport { FieldSettings } from \"~/admin/plugins/fieldRenderers/object/FieldSettings\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider\";\nimport { useModel } from \"~/admin/components/ModelProvider\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueContainerProps {\n    bind: BindComponentRenderProp;\n    getBind: GetBind;\n    showTitle?: boolean;\n}\n\nexport const MultiValueContainer = (props: MultiValueContainerProps) => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const [itemState, setItemState] = useState<{ [key: number]: boolean }>({});\n\n    const { model } = useModel();\n    const { field } = useModelField();\n\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const toggleItemState = (index: number) => {\n        setItemState(state => ({ ...state, [index]: !state[index] }));\n    };\n\n    const onAddItem = (index: number) => {\n        setItemState(state => ({ ...state, [index]: true }));\n    };\n\n    const settings = fieldSettings.getSettings();\n\n    return (\n        <DynamicSection\n            {...props}\n            showLabel={props.showTitle}\n            field={field}\n            emptyValue={{}}\n            onAddItem={onAddItem}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => {\n                const onMoveDown = () => {\n                    bind.field.moveValueDown(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index + 1]: state[index] ?? false,\n                            [index]: state[index + 1] ?? false\n                        };\n                    });\n                };\n\n                const onMoveUp = () => {\n                    bind.field.moveValueUp(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index - 1]: state[index] ?? false,\n                            [index]: state[index - 1] ?? false\n                        };\n                    });\n                };\n\n                const onDelete = () => {\n                    showConfirmation(() => {\n                        bind.field.removeValue(index);\n                    });\n                };\n\n                return (\n                    <ObjectItem>\n                        {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                        <MultiValueItemContainer\n                            value={bind.index.value}\n                            title={`${field.label} #${index + 1}`}\n                            isFirst={index === 0}\n                            isLast={index === bind.field.value.length - 1}\n                            onMoveUp={onMoveUp}\n                            onMoveDown={onMoveDown}\n                            onDelete={onDelete}\n                            isExpanded={itemState[index] ?? false}\n                            toggleExpanded={() => toggleItemState(index)}\n                        >\n                            <Cell span={12} className={fieldsWrapperStyle}>\n                                <Fields\n                                    Bind={Bind}\n                                    contentModel={model}\n                                    fields={settings.fields}\n                                    layout={settings.layout}\n                                    gridClassName={fieldsGridStyle}\n                                />\n                            </Cell>\n                        </MultiValueItemContainer>\n                    </ObjectItem>\n                );\n            }}\n        </DynamicSection>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/MultiValueItemContainer.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { GenericRecord } from "@webiny/app/types";
+import type { GenericRecord } from "@webiny/app/types";
 export interface MultiValueItemContainerProps {
     value: GenericRecord<string>;
     isFirst: boolean;

package/admin/plugins/fieldRenderers/object/MultiValueItemContainer.js

@@ -1,49 +1,43 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MultiValueItemContainer = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _reactComposition = require("@webiny/react-composition");
-var _Accordion = _interopRequireDefault(require("../Accordion"));
-var _delete_outline = require("@material-design-icons/svg/outlined/delete_outline.svg");
-var _arrow_drop_up = require("@material-design-icons/svg/outlined/arrow_drop_up.svg");
-var _arrow_drop_down = require("@material-design-icons/svg/outlined/arrow_drop_down.svg");
-var _Button = require("@webiny/ui/Button");
-var _excluded = ["children"];
-var MultiValueItemContainer = exports.MultiValueItemContainer = (0, _reactComposition.makeDecoratable)("MultiValueItemContainer", function (_ref) {
-  var children = _ref.children,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var onMoveUp = props.onMoveUp,
-    onMoveDown = props.onMoveDown,
-    onDelete = props.onDelete,
-    isLast = props.isLast,
-    isFirst = props.isFirst;
-  var actions = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_down.ReactComponent, null),
-    onClick: function onClick(e) {
+import React from "react";
+import { makeDecoratable } from "@webiny/react-composition";
+import Accordion from "../Accordion";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_drop_up.svg";
+import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_drop_down.svg";
+import { IconButton } from "@webiny/ui/Button";
+export const MultiValueItemContainer = makeDecoratable("MultiValueItemContainer", ({
+  children,
+  ...props
+}) => {
+  const {
+    onMoveUp,
+    onMoveDown,
+    onDelete,
+    isLast,
+    isFirst
+  } = props;
+  const actions = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(ArrowDown, null),
+    onClick: e => {
       e.stopPropagation();
       onMoveDown();
     },
     disabled: isLast
-  }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_up.ReactComponent, null),
-    onClick: function onClick(e) {
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(ArrowUp, null),
+    onClick: e => {
       e.stopPropagation();
       onMoveUp();
     },
     disabled: isFirst
-  }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    icon: /*#__PURE__*/_react.default.createElement(_delete_outline.ReactComponent, null),
-    onClick: function onClick(e) {
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+    onClick: e => {
       e.stopPropagation();
       onDelete();
     }
   }));
-  return /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+  return /*#__PURE__*/React.createElement(Accordion, {
     title: props.title,
     action: actions,
     isExpanded: props.isExpanded,

package/admin/plugins/fieldRenderers/object/MultiValueItemContainer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactComposition","_Accordion","_delete_outline","_arrow_drop_up","_arrow_drop_down","_Button","_excluded","MultiValueItemContainer","exports","makeDecoratable","_ref","children","props","_objectWithoutProperties2","default","onMoveUp","onMoveDown","onDelete","isLast","isFirst","actions","createElement","Fragment","IconButton","icon","ReactComponent","onClick","e","stopPropagation","disabled","title","action","isExpanded","toggleExpanded"],"sources":["MultiValueItemContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport { GenericRecord } from \"@webiny/app/types\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.svg\";\nimport { ReactComponent as ArrowUp } from \"@material-design-icons/svg/outlined/arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"@material-design-icons/svg/outlined/arrow_drop_down.svg\";\nimport { IconButton } from \"@webiny/ui/Button\";\n\nexport interface MultiValueItemContainerProps {\n    value: GenericRecord<string>;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    isExpanded: boolean;\n    toggleExpanded: () => void;\n    title: string;\n    children: React.ReactNode;\n}\n\nexport const MultiValueItemContainer = makeDecoratable(\n    \"MultiValueItemContainer\",\n    ({ children, ...props }: MultiValueItemContainerProps) => {\n        const { onMoveUp, onMoveDown, onDelete, isLast, isFirst } = props;\n\n        const actions = (\n            <>\n                <IconButton\n                    icon={<ArrowDown />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onMoveDown();\n                    }}\n                    disabled={isLast}\n                />\n                <IconButton\n                    icon={<ArrowUp />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onMoveUp();\n                    }}\n                    disabled={isFirst}\n                />\n                <IconButton\n                    icon={<DeleteIcon />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onDelete();\n                    }}\n                />\n            </>\n        );\n\n        return (\n            <Accordion\n                title={props.title}\n                action={actions}\n                isExpanded={props.isExpanded}\n                toggleExpanded={props.toggleExpanded}\n            >\n                {children}\n            </Accordion>\n        );\n    }\n);\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAA+C,IAAAO,SAAA;AAexC,IAAMC,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,iCAAe,EAClD,yBAAyB,EACzB,UAAAC,IAAA,EAA0D;EAAA,IAAvDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAKC,KAAK,OAAAC,yBAAA,CAAAC,OAAA,EAAAJ,IAAA,EAAAJ,SAAA;EACjB,IAAQS,QAAQ,GAA4CH,KAAK,CAAzDG,QAAQ;IAAEC,UAAU,GAAgCJ,KAAK,CAA/CI,UAAU;IAAEC,QAAQ,GAAsBL,KAAK,CAAnCK,QAAQ;IAAEC,MAAM,GAAcN,KAAK,CAAzBM,MAAM;IAAEC,OAAO,GAAKP,KAAK,CAAjBO,OAAO;EAEvD,IAAMC,OAAO,gBACTvB,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAAAxB,MAAA,CAAAiB,OAAA,CAAAQ,QAAA,qBACIzB,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAAChB,OAAA,CAAAkB,UAAU;IACPC,IAAI,eAAE3B,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAACjB,gBAAA,CAAAqB,cAAS,MAAE,CAAE;IACpBC,OAAO,EAAE,SAATA,OAAOA,CAAEC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBZ,UAAU,CAAC,CAAC;IAChB,CAAE;IACFa,QAAQ,EAAEX;EAAO,CACpB,CAAC,eACFrB,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAAChB,OAAA,CAAAkB,UAAU;IACPC,IAAI,eAAE3B,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAAClB,cAAA,CAAAsB,cAAO,MAAE,CAAE;IAClBC,OAAO,EAAE,SAATA,OAAOA,CAAEC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBb,QAAQ,CAAC,CAAC;IACd,CAAE;IACFc,QAAQ,EAAEV;EAAQ,CACrB,CAAC,eACFtB,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAAChB,OAAA,CAAAkB,UAAU;IACPC,IAAI,eAAE3B,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAACnB,eAAA,CAAAuB,cAAU,MAAE,CAAE;IACrBC,OAAO,EAAE,SAATA,OAAOA,CAAEC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBX,QAAQ,CAAC,CAAC;IACd;EAAE,CACL,CACH,CACL;EAED,oBACIpB,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAACpB,UAAA,CAAAa,OAAS;IACNgB,KAAK,EAAElB,KAAK,CAACkB,KAAM;IACnBC,MAAM,EAAEX,OAAQ;IAChBY,UAAU,EAAEpB,KAAK,CAACoB,UAAW;IAC7BC,cAAc,EAAErB,KAAK,CAACqB;EAAe,GAEpCtB,QACM,CAAC;AAEpB,CACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","Accordion","ReactComponent","DeleteIcon","ArrowUp","ArrowDown","IconButton","MultiValueItemContainer","children","props","onMoveUp","onMoveDown","onDelete","isLast","isFirst","actions","createElement","Fragment","icon","onClick","e","stopPropagation","disabled","title","action","isExpanded","toggleExpanded"],"sources":["MultiValueItemContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport type { GenericRecord } from \"@webiny/app/types\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_drop_down.svg\";\nimport { IconButton } from \"@webiny/ui/Button\";\n\nexport interface MultiValueItemContainerProps {\n    value: GenericRecord<string>;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    isExpanded: boolean;\n    toggleExpanded: () => void;\n    title: string;\n    children: React.ReactNode;\n}\n\nexport const MultiValueItemContainer = makeDecoratable(\n    \"MultiValueItemContainer\",\n    ({ children, ...props }: MultiValueItemContainerProps) => {\n        const { onMoveUp, onMoveDown, onDelete, isLast, isFirst } = props;\n\n        const actions = (\n            <>\n                <IconButton\n                    icon={<ArrowDown />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onMoveDown();\n                    }}\n                    disabled={isLast}\n                />\n                <IconButton\n                    icon={<ArrowUp />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onMoveUp();\n                    }}\n                    disabled={isFirst}\n                />\n                <IconButton\n                    icon={<DeleteIcon />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onDelete();\n                    }}\n                />\n            </>\n        );\n\n        return (\n            <Accordion\n                title={props.title}\n                action={actions}\n                isExpanded={props.isExpanded}\n                toggleExpanded={props.toggleExpanded}\n            >\n                {children}\n            </Accordion>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,OAAOC,SAAS;AAEhB,SAASC,cAAc,IAAIC,UAAU,QAAQ,kCAAkC;AAC/E,SAASD,cAAc,IAAIE,OAAO,QAAQ,iCAAiC;AAC3E,SAASF,cAAc,IAAIG,SAAS,QAAQ,mCAAmC;AAC/E,SAASC,UAAU,QAAQ,mBAAmB;AAe9C,OAAO,MAAMC,uBAAuB,GAAGP,eAAe,CAClD,yBAAyB,EACzB,CAAC;EAAEQ,QAAQ;EAAE,GAAGC;AAAoC,CAAC,KAAK;EACtD,MAAM;IAAEC,QAAQ;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAGL,KAAK;EAEjE,MAAMM,OAAO,gBACThB,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAkB,QAAA,qBACIlB,KAAA,CAAAiB,aAAA,CAACV,UAAU;IACPY,IAAI,eAAEnB,KAAA,CAAAiB,aAAA,CAACX,SAAS,MAAE,CAAE;IACpBc,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBV,UAAU,CAAC,CAAC;IAChB,CAAE;IACFW,QAAQ,EAAET;EAAO,CACpB,CAAC,eACFd,KAAA,CAAAiB,aAAA,CAACV,UAAU;IACPY,IAAI,eAAEnB,KAAA,CAAAiB,aAAA,CAACZ,OAAO,MAAE,CAAE;IAClBe,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBX,QAAQ,CAAC,CAAC;IACd,CAAE;IACFY,QAAQ,EAAER;EAAQ,CACrB,CAAC,eACFf,KAAA,CAAAiB,aAAA,CAACV,UAAU;IACPY,IAAI,eAAEnB,KAAA,CAAAiB,aAAA,CAACb,UAAU,MAAE,CAAE;IACrBgB,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBT,QAAQ,CAAC,CAAC;IACd;EAAE,CACL,CACH,CACL;EAED,oBACIb,KAAA,CAAAiB,aAAA,CAACf,SAAS;IACNsB,KAAK,EAAEd,KAAK,CAACc,KAAM;IACnBC,MAAM,EAAET,OAAQ;IAChBU,UAAU,EAAEhB,KAAK,CAACgB,UAAW;IAC7BC,cAAc,EAAEjB,KAAK,CAACiB;EAAe,GAEpClB,QACM,CAAC;AAEpB,CACJ,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/StyledComponents.js

@@ -1,20 +1,43 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fieldsWrapperStyle = exports.fieldsGridStyle = exports.dynamicSectionTitleStyle = exports.dynamicSectionGridStyle = exports.ObjectItem = exports.ItemHighLight = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _emotion = require("emotion");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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 fieldsWrapperStyle = exports.fieldsWrapperStyle = (0, _emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    border-left: 2px solid var(--mdc-theme-on-background);\n    padding-left: 16px;\n\n    &:focus-within {\n        border-color: var(--mdc-theme-primary);\n    }\n"])));
-var dynamicSectionTitleStyle = exports.dynamicSectionTitleStyle = (0, _emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    margin-top: 24px;\n"])));
-var dynamicSectionGridStyle = exports.dynamicSectionGridStyle = (0, _emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    & > .mdc-layout-grid__inner {\n        grid-gap: 8px;\n    }\n"])));
-var fieldsGridStyle = exports.fieldsGridStyle = (0, _emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    &.mdc-layout-grid {\n        padding: 8px;\n    }\n"])));
-var ObjectItem = exports.ObjectItem = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+import { css } from "@emotion/css";
+export const fieldsWrapperStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "1yd7z3y",
+  styles: "border-left:2px solid var(--mdc-theme-on-background);padding-left:16px;margin-left:6px;&:focus-within{border-color:var(--mdc-theme-primary);}"
+} : {
+  name: "tzi0gb-fieldsWrapperStyle",
+  styles: "border-left:2px solid var(--mdc-theme-on-background);padding-left:16px;margin-left:6px;&:focus-within{border-color:var(--mdc-theme-primary);};label:fieldsWrapperStyle;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR3FDIiwiZmlsZSI6IlN0eWxlZENvbXBvbmVudHMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc1dyYXBwZXJTdHlsZSA9IGNzc2BcbiAgICBib3JkZXItbGVmdDogMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKTtcbiAgICBwYWRkaW5nLWxlZnQ6IDE2cHg7XG4gICAgbWFyZ2luLWxlZnQ6IDZweDtcblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSk7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uVGl0bGVTdHlsZSA9IGNzc2BcbiAgICBtYXJnaW4tdG9wOiAyNHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uR3JpZFN0eWxlID0gY3NzYFxuICAgICYgPiAubWRjLWxheW91dC1ncmlkX19pbm5lciB7XG4gICAgICAgIGdyaWQtZ2FwOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc0dyaWRTdHlsZSA9IGNzc2BcbiAgICAmLm1kYy1sYXlvdXQtZ3JpZCB7XG4gICAgICAgIHBhZGRpbmc6IDhweDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgT2JqZWN0SXRlbSA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1IaWdoTGlnaHQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIFwiJlwiOiB7XG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIGFuaW1hdGlvbjogXCJ3Zi1ibGluay1pbiAxc1wiLFxuICAgICAgICBib3JkZXI6IFwiMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgIGJveFNoYWRvdzogXCIwIDAgMTVweCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSg0MiwgMjE3LCAxMzQsIDAuMjUpXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogXCIycHhcIixcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAtMTIsXG4gICAgICAgIHJpZ2h0OiAtOCxcbiAgICAgICAgYm90dG9tOiAwLFxuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiXG4gICAgfSxcbiAgICBcIkBrZXlmcmFtZXMgd2YtYmxpbmstaW5cIjogeyBcIjQwJVwiOiB7IG9wYWNpdHk6IDEgfSB9XG59KTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const dynamicSectionTitleStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "1d0nbku",
+  styles: "margin-top:24px"
+} : {
+  name: "ni4rfk-dynamicSectionTitleStyle",
+  styles: "margin-top:24px;label:dynamicSectionTitleStyle;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYTJDIiwiZmlsZSI6IlN0eWxlZENvbXBvbmVudHMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc1dyYXBwZXJTdHlsZSA9IGNzc2BcbiAgICBib3JkZXItbGVmdDogMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKTtcbiAgICBwYWRkaW5nLWxlZnQ6IDE2cHg7XG4gICAgbWFyZ2luLWxlZnQ6IDZweDtcblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSk7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uVGl0bGVTdHlsZSA9IGNzc2BcbiAgICBtYXJnaW4tdG9wOiAyNHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uR3JpZFN0eWxlID0gY3NzYFxuICAgICYgPiAubWRjLWxheW91dC1ncmlkX19pbm5lciB7XG4gICAgICAgIGdyaWQtZ2FwOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc0dyaWRTdHlsZSA9IGNzc2BcbiAgICAmLm1kYy1sYXlvdXQtZ3JpZCB7XG4gICAgICAgIHBhZGRpbmc6IDhweDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgT2JqZWN0SXRlbSA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1IaWdoTGlnaHQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIFwiJlwiOiB7XG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIGFuaW1hdGlvbjogXCJ3Zi1ibGluay1pbiAxc1wiLFxuICAgICAgICBib3JkZXI6IFwiMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgIGJveFNoYWRvdzogXCIwIDAgMTVweCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSg0MiwgMjE3LCAxMzQsIDAuMjUpXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogXCIycHhcIixcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAtMTIsXG4gICAgICAgIHJpZ2h0OiAtOCxcbiAgICAgICAgYm90dG9tOiAwLFxuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiXG4gICAgfSxcbiAgICBcIkBrZXlmcmFtZXMgd2YtYmxpbmstaW5cIjogeyBcIjQwJVwiOiB7IG9wYWNpdHk6IDEgfSB9XG59KTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const dynamicSectionGridStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "6bwtfr",
+  styles: "&>.mdc-layout-grid__inner{grid-gap:8px;}"
+} : {
+  name: "c4xhr-dynamicSectionGridStyle",
+  styles: "&>.mdc-layout-grid__inner{grid-gap:8px;};label:dynamicSectionGridStyle;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUIwQyIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNXcmFwcGVyU3R5bGUgPSBjc3NgXG4gICAgYm9yZGVyLWxlZnQ6IDJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiA2cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const fieldsGridStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "1t4nest",
+  styles: "&.mdc-layout-grid{padding:8px;}"
+} : {
+  name: "17rca61-fieldsGridStyle",
+  styles: "&.mdc-layout-grid{padding:8px;};label:fieldsGridStyle;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJrQyIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNXcmFwcGVyU3R5bGUgPSBjc3NgXG4gICAgYm9yZGVyLWxlZnQ6IDJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiA2cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const ObjectItem = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "efe1kdz1"
 } : {
   target: "efe1kdz1",
@@ -25,10 +48,10 @@ var ObjectItem = exports.ObjectItem = /*#__PURE__*/(0, _base.default)("div", pro
 } : {
   name: "bjn8wh",
   styles: "position:relative",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJvQyIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiZW1vdGlvblwiO1xuXG5leHBvcnQgY29uc3QgZmllbGRzV3JhcHBlclN0eWxlID0gY3NzYFxuICAgIGJvcmRlci1sZWZ0OiAycHggc29saWQgdmFyKC0tbWRjLXRoZW1lLW9uLWJhY2tncm91bmQpO1xuICAgIHBhZGRpbmctbGVmdDogMTZweDtcblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSk7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uVGl0bGVTdHlsZSA9IGNzc2BcbiAgICBtYXJnaW4tdG9wOiAyNHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uR3JpZFN0eWxlID0gY3NzYFxuICAgICYgPiAubWRjLWxheW91dC1ncmlkX19pbm5lciB7XG4gICAgICAgIGdyaWQtZ2FwOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc0dyaWRTdHlsZSA9IGNzc2BcbiAgICAmLm1kYy1sYXlvdXQtZ3JpZCB7XG4gICAgICAgIHBhZGRpbmc6IDhweDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgT2JqZWN0SXRlbSA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1IaWdoTGlnaHQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIFwiJlwiOiB7XG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIGFuaW1hdGlvbjogXCJ3Zi1ibGluay1pbiAxc1wiLFxuICAgICAgICBib3JkZXI6IFwiMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgIGJveFNoYWRvdzogXCIwIDAgMTVweCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSg0MiwgMjE3LCAxMzQsIDAuMjUpXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogXCIycHhcIixcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAtMTIsXG4gICAgICAgIHJpZ2h0OiAtOCxcbiAgICAgICAgYm90dG9tOiAwLFxuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiXG4gICAgfSxcbiAgICBcIkBrZXlmcmFtZXMgd2YtYmxpbmstaW5cIjogeyBcIjQwJVwiOiB7IG9wYWNpdHk6IDEgfSB9XG59KTtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJvQyIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNXcmFwcGVyU3R5bGUgPSBjc3NgXG4gICAgYm9yZGVyLWxlZnQ6IDJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiA2cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var ItemHighLight = exports.ItemHighLight = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+export const ItemHighLight = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "efe1kdz0"
 } : {
   target: "efe1kdz0",
@@ -54,6 +77,6 @@ var ItemHighLight = exports.ItemHighLight = /*#__PURE__*/(0, _base.default)("div
       opacity: 1
     }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0M2QiIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiZW1vdGlvblwiO1xuXG5leHBvcnQgY29uc3QgZmllbGRzV3JhcHBlclN0eWxlID0gY3NzYFxuICAgIGJvcmRlci1sZWZ0OiAycHggc29saWQgdmFyKC0tbWRjLXRoZW1lLW9uLWJhY2tncm91bmQpO1xuICAgIHBhZGRpbmctbGVmdDogMTZweDtcblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSk7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uVGl0bGVTdHlsZSA9IGNzc2BcbiAgICBtYXJnaW4tdG9wOiAyNHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uR3JpZFN0eWxlID0gY3NzYFxuICAgICYgPiAubWRjLWxheW91dC1ncmlkX19pbm5lciB7XG4gICAgICAgIGdyaWQtZ2FwOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc0dyaWRTdHlsZSA9IGNzc2BcbiAgICAmLm1kYy1sYXlvdXQtZ3JpZCB7XG4gICAgICAgIHBhZGRpbmc6IDhweDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgT2JqZWN0SXRlbSA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1IaWdoTGlnaHQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIFwiJlwiOiB7XG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIGFuaW1hdGlvbjogXCJ3Zi1ibGluay1pbiAxc1wiLFxuICAgICAgICBib3JkZXI6IFwiMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgIGJveFNoYWRvdzogXCIwIDAgMTVweCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSg0MiwgMjE3LCAxMzQsIDAuMjUpXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogXCIycHhcIixcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAtMTIsXG4gICAgICAgIHJpZ2h0OiAtOCxcbiAgICAgICAgYm90dG9tOiAwLFxuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiXG4gICAgfSxcbiAgICBcIkBrZXlmcmFtZXMgd2YtYmxpbmstaW5cIjogeyBcIjQwJVwiOiB7IG9wYWNpdHk6IDEgfSB9XG59KTtcbiJdfQ== */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUM2QiIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNXcmFwcGVyU3R5bGUgPSBjc3NgXG4gICAgYm9yZGVyLWxlZnQ6IDJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiA2cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */");
 
 //# sourceMappingURL=StyledComponents.js.map