@webiny/app-headless-cms 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/admin/plugins/fieldRenderers/Accordion.js

@@ -1,9 +1,10 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useState } from "react";
-import { css } from "emotion";
+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)."; }
+import React, { useEffect, useRef } from "react";
+import { css } from "@emotion/css";
 import classNames from "classnames";
-import { Typography } from "@webiny/ui/Typography";
-var classes = {
+import { Text } from "@webiny/admin-ui";
+const classes = {
   accordionWrapper: /*#__PURE__*/css({
     /**
      * We're using position: "relative" here for "Popping Out of Hidden Overflow" https://css-tricks.com/popping-hidden-overflow/
@@ -11,115 +12,88 @@ var classes = {
      */
     position: "relative",
     width: "100%",
-    borderBottom: "1px solid var(--mdc-theme-on-secondary)"
-  }, "label:accordionWrapper;"),
-  accordionHeader: /*#__PURE__*/css({
-    position: "relative",
-    color: "var(--mdc-theme-text-secondary-on-background)",
-    cursor: "pointer",
-    padding: "0px",
-    minHeight: 48,
-    // To have same height as the remove value action button.
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    "& .accordion-header--left": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      "& .accordion-title": {
-        span: {
-          marginLeft: 16
-        }
-      }
-    },
-    "& .accordion-header--right": {
-      display: "flex",
-      "& .icon-container": {
-        display: "flex",
-        alignItems: "center",
-        "& span": {
-          display: "flex"
-        },
-        "& svg": {
-          fill: "currentColor",
-          width: 14,
-          height: 14
-        }
-      }
-    },
-    "&::before": {
-      position: "absolute",
-      top: "calc(50% - 5px)",
-      left: 0,
-      content: '""',
-      width: 0,
-      height: 0,
-      // Arrow right.
-      borderTop: "5px solid transparent",
-      borderBottom: "5px solid transparent",
-      borderLeft: "5px solid currentColor"
-    },
-    "&.open": {
-      "&::before": {
-        transform: "translateY(3px) rotate(90deg)"
-      }
-    }
-  }, "label:accordionHeader;"),
-  accordionItem: /*#__PURE__*/css({
-    overflow: "hidden",
-    transition: "max-height 0.3s cubic-bezier(1, 0, 1, 0)",
-    height: "auto",
-    maxHeight: "9999px",
-    "&.collapsed": {
-      maxHeight: 0,
-      transition: "max-height 0.35s cubic-bezier(0, 1, 0, 1)"
-    }
-  }, "label:accordionItem;")
+    borderBottom: `1px solid var(--mdc-theme-on-secondary)`
+  }, process.env.NODE_ENV === "production" ? "" : ";label:accordionWrapper;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFjY29yZGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUXNCIiwiZmlsZSI6IkFjY29yZGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IFJlYWN0RWxlbWVudCB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IFJlYWN0LCB7IHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCBjbGFzc05hbWVzIGZyb20gXCJjbGFzc25hbWVzXCI7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSBcIkB3ZWJpbnkvYWRtaW4tdWlcIjtcblxuY29uc3QgY2xhc3NlcyA9IHtcbiAgICBhY2NvcmRpb25XcmFwcGVyOiBjc3Moe1xuICAgICAgICAvKipcbiAgICAgICAgICogV2UncmUgdXNpbmcgcG9zaXRpb246IFwicmVsYXRpdmVcIiBoZXJlIGZvciBcIlBvcHBpbmcgT3V0IG9mIEhpZGRlbiBPdmVyZmxvd1wiIGh0dHBzOi8vY3NzLXRyaWNrcy5jb20vcG9wcGluZy1oaWRkZW4tb3ZlcmZsb3cvXG4gICAgICAgICAqIHNvIHRoYXQsIHdlIGNhbiB1c2UgYWJzb2x1dGUgcG9zaXRpb25lZCBlbGVtZW50IGluc2lkZSB3aXRob3V0IFwib3ZlcmZsb3c6IGhpZGRlblwiIGJlaW5nIGEgcHJvYmxlbVxuICAgICAgICAgKi9cbiAgICAgICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICBib3JkZXJCb3R0b206IGAxcHggc29saWQgdmFyKC0tbWRjLXRoZW1lLW9uLXNlY29uZGFyeSlgXG4gICAgfSksXG4gICAgYWNjb3JkaW9uSGVhZGVyOiBjc3Moe1xuICAgICAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgICAgICBjb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtdGV4dC1zZWNvbmRhcnktb24tYmFja2dyb3VuZClcIixcbiAgICAgICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICAgICAgcGFkZGluZzogXCIwcHhcIixcbiAgICAgICAgbWluSGVpZ2h0OiAzMiwgLy8gVG8gaGF2ZSBzYW1lIGhlaWdodCBhcyB0aGUgcmVtb3ZlIHZhbHVlIGFjdGlvbiBidXR0b24uXG4gICAgICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgICAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgICAgICBqdXN0aWZ5Q29udGVudDogXCJzcGFjZS1iZXR3ZWVuXCIsXG5cbiAgICAgICAgXCImIC5hY2NvcmRpb24taGVhZGVyLS1sZWZ0XCI6IHtcbiAgICAgICAgICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgICAgICAgICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICAgICAgICAgIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWJldHdlZW5cIixcbiAgICAgICAgICAgIFwiJiAuYWNjb3JkaW9uLXRpdGxlXCI6IHtcbiAgICAgICAgICAgICAgICBzcGFuOiB7XG4gICAgICAgICAgICAgICAgICAgIG1hcmdpbkxlZnQ6IDI0XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBcIiYgLmFjY29yZGlvbi1oZWFkZXItLXJpZ2h0XCI6IHtcbiAgICAgICAgICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgICAgICAgICAgXCImIC5pY29uLWNvbnRhaW5lclwiOiB7XG4gICAgICAgICAgICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICAgICAgICAgICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcblxuICAgICAgICAgICAgICAgIFwiJiBzcGFuXCI6IHtcbiAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogXCJmbGV4XCJcbiAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgIFwiJiBzdmdcIjoge1xuICAgICAgICAgICAgICAgICAgICBmaWxsOiBcImN1cnJlbnRDb2xvclwiLFxuICAgICAgICAgICAgICAgICAgICB3aWR0aDogMTQsXG4gICAgICAgICAgICAgICAgICAgIGhlaWdodDogMTRcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIH0sXG5cbiAgICAgICAgXCImOjpiZWZvcmVcIjoge1xuICAgICAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgICAgIHRvcDogXCJjYWxjKDUwJSAtIDVweClcIixcbiAgICAgICAgICAgIGxlZnQ6IFwiNXB4XCIsXG4gICAgICAgICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICAgICAgICB3aWR0aDogMCxcbiAgICAgICAgICAgIGhlaWdodDogMCxcblxuICAgICAgICAgICAgLy8gQXJyb3cgcmlnaHQuXG4gICAgICAgICAgICBib3JkZXJUb3A6IFwiNXB4IHNvbGlkIHRyYW5zcGFyZW50XCIsXG4gICAgICAgICAgICBib3JkZXJCb3R0b206IFwiNXB4IHNvbGlkIHRyYW5zcGFyZW50XCIsXG4gICAgICAgICAgICBib3JkZXJMZWZ0OiBcIjVweCBzb2xpZCBjdXJyZW50Q29sb3JcIlxuICAgICAgICB9LFxuXG4gICAgICAgIFwiJi5vcGVuXCI6IHtcbiAgICAgICAgICAgIFwiJjo6YmVmb3JlXCI6IHtcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWSgzcHgpIHJvdGF0ZSg5MGRlZylcIlxuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfSlcbn07XG5cbmNvbnN0IEFjY29yZGlvbkl0ZW0gPSBzdHlsZWQuZGl2PHsgYW5pbWF0ZTogYm9vbGVhbiB9PmBcbiAgICBAa2V5ZnJhbWVzIHNob3ctb3ZlcmZsb3cge1xuICAgICAgICB0byB7XG4gICAgICAgICAgICBvdmVyZmxvdzogdmlzaWJsZTtcbiAgICAgICAgfVxuICAgIH1cbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHRyYW5zaXRpb246ICR7KHsgYW5pbWF0ZSB9KSA9PlxuICAgICAgICBhbmltYXRlID8gXCJtYXgtaGVpZ2h0IDAuMzVzIGN1YmljLWJlemllcigwLCAxLCAwLCAxKVwiIDogXCJub25lICFpbXBvcnRhbnRcIn07XG4gICAgaGVpZ2h0OiBhdXRvO1xuICAgIG1heC1oZWlnaHQ6IDA7XG5cbiAgICAmLmV4cGFuZGVkIHtcbiAgICAgICAgbWF4LWhlaWdodDogOTk5OXB4O1xuICAgICAgICB0cmFuc2l0aW9uOiAkeyh7IGFuaW1hdGUgfSkgPT5cbiAgICAgICAgICAgIGFuaW1hdGUgPyBcIm1heC1oZWlnaHQgMC4zcyBjdWJpYy1iZXppZXIoMSwgMCwgMSwgMClcIiA6IFwibm9uZSAhaW1wb3J0YW50XCJ9O1xuICAgICAgICBhbmltYXRpb24tZmlsbC1tb2RlOiBmb3J3YXJkcztcbiAgICAgICAgYW5pbWF0aW9uLW5hbWU6IHNob3ctb3ZlcmZsb3c7XG4gICAgICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMjBtcztcbiAgICAgICAgYW5pbWF0aW9uLWRlbGF5OiAwLjNzO1xuICAgIH1cbmA7XG5cbmNvbnN0IEFjY29yZGlvbkNvbnRlbnQgPSBzdHlsZWQuZGl2YFxuICAgIHBhZGRpbmctYm90dG9tOiAxMDtcbmA7XG5cbmludGVyZmFjZSBBY2NvcmRpb25Qcm9wcyB7XG4gICAgdGl0bGU6IHN0cmluZztcbiAgICBpc0V4cGFuZGVkOiBib29sZWFuO1xuICAgIHRvZ2dsZUV4cGFuZGVkOiAoKSA9PiB2b2lkO1xuICAgIGFjdGlvbj86IFJlYWN0RWxlbWVudCB8IG51bGw7XG4gICAgaWNvbj86IFJlYWN0RWxlbWVudDtcbiAgICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5jb25zdCBBY2NvcmRpb24gPSAoe1xuICAgIHRpdGxlLFxuICAgIGNoaWxkcmVuLFxuICAgIGFjdGlvbixcbiAgICBpY29uLFxuICAgIGlzRXhwYW5kZWQsXG4gICAgdG9nZ2xlRXhwYW5kZWRcbn06IEFjY29yZGlvblByb3BzKSA9PiB7XG4gICAgY29uc3QgdXNlckludGVyYWN0aW9uUmVmID0gdXNlUmVmKGZhbHNlKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIGlmICh1c2VySW50ZXJhY3Rpb25SZWYuY3VycmVudCkge1xuICAgICAgICAgICAgdXNlckludGVyYWN0aW9uUmVmLmN1cnJlbnQgPSBmYWxzZTtcbiAgICAgICAgfVxuICAgIH0sIFtpc0V4cGFuZGVkXSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17Y2xhc3Nlcy5hY2NvcmRpb25XcmFwcGVyfT5cbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXMoY2xhc3Nlcy5hY2NvcmRpb25IZWFkZXIsIHtcbiAgICAgICAgICAgICAgICAgICAgb3BlbjogaXNFeHBhbmRlZFxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgdXNlckludGVyYWN0aW9uUmVmLmN1cnJlbnQgPSB0cnVlO1xuICAgICAgICAgICAgICAgICAgICB0b2dnbGVFeHBhbmRlZCgpO1xuICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJhY2NvcmRpb24taGVhZGVyLS1sZWZ0XCI+XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtcImFjY29yZGlvbi10aXRsZVwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxUZXh0IHNpemU9e1wibWRcIn0gYXM9e1wic3BhblwifSBjbGFzc05hbWU9e1wid2ViaW55X2FjY29yZGlvbi10aXRsZS10ZXh0XCJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJhY2NvcmRpb24taGVhZGVyLS1yaWdodFwiPlxuICAgICAgICAgICAgICAgICAgICB7YWN0aW9uICYmIDxkaXYgY2xhc3NOYW1lPXtcImFjdGlvbi1jb250YWluZXJcIn0+e2FjdGlvbn08L2Rpdj59XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtcImljb24tY29udGFpbmVyXCJ9PntpY29ufTwvZGl2PlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8QWNjb3JkaW9uSXRlbVxuICAgICAgICAgICAgICAgIGFuaW1hdGU9e3VzZXJJbnRlcmFjdGlvblJlZi5jdXJyZW50ID09PSB0cnVlfVxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lcyh7XG4gICAgICAgICAgICAgICAgICAgIGV4cGFuZGVkOiBpc0V4cGFuZGVkXG4gICAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPEFjY29yZGlvbkNvbnRlbnQ+e2NoaWxkcmVufTwvQWNjb3JkaW9uQ29udGVudD5cbiAgICAgICAgICAgIDwvQWNjb3JkaW9uSXRlbT5cbiAgICAgICAgPC9kaXY+XG4gICAgKTtcbn07XG5jb25zdCBNZW1vaXplZEFjY29yZGlvbjogUmVhY3QuQ29tcG9uZW50VHlwZTxBY2NvcmRpb25Qcm9wcz4gPSBSZWFjdC5tZW1vKEFjY29yZGlvbik7XG5leHBvcnQgZGVmYXVsdCBNZW1vaXplZEFjY29yZGlvbjtcbiJdfQ== */"),
+  accordionHeader: /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+    name: "opcd5p",
+    styles: "position:relative;color:var(--mdc-theme-text-secondary-on-background);cursor:pointer;padding:0px;min-height:32px;display:flex;align-items:center;justify-content:space-between;& .accordion-header--left{display:flex;align-items:center;justify-content:space-between;& .accordion-title{span{margin-left:24px;}}}& .accordion-header--right{display:flex;& .icon-container{display:flex;align-items:center;& span{display:flex;}& svg{fill:currentColor;width:14px;height:14px;}}}&::before{position:absolute;top:calc(50% - 5px);left:5px;content:\"\";width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid currentColor;}&.open{&::before{transform:translateY(3px) rotate(90deg);}}"
+  } : {
+    name: "1fc18ru-accordionHeader",
+    styles: "position:relative;color:var(--mdc-theme-text-secondary-on-background);cursor:pointer;padding:0px;min-height:32px;display:flex;align-items:center;justify-content:space-between;& .accordion-header--left{display:flex;align-items:center;justify-content:space-between;& .accordion-title{span{margin-left:24px;}}}& .accordion-header--right{display:flex;& .icon-container{display:flex;align-items:center;& span{display:flex;}& svg{fill:currentColor;width:14px;height:14px;}}}&::before{position:absolute;top:calc(50% - 5px);left:5px;content:\"\";width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid currentColor;}&.open{&::before{transform:translateY(3px) rotate(90deg);}};label:accordionHeader;",
+    map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFjY29yZGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJxQiIsImZpbGUiOiJBY2NvcmRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBSZWFjdEVsZW1lbnQgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVJlZiB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgY2xhc3NOYW1lcyBmcm9tIFwiY2xhc3NuYW1lc1wiO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gXCJAd2ViaW55L2FkbWluLXVpXCI7XG5cbmNvbnN0IGNsYXNzZXMgPSB7XG4gICAgYWNjb3JkaW9uV3JhcHBlcjogY3NzKHtcbiAgICAgICAgLyoqXG4gICAgICAgICAqIFdlJ3JlIHVzaW5nIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIgaGVyZSBmb3IgXCJQb3BwaW5nIE91dCBvZiBIaWRkZW4gT3ZlcmZsb3dcIiBodHRwczovL2Nzcy10cmlja3MuY29tL3BvcHBpbmctaGlkZGVuLW92ZXJmbG93L1xuICAgICAgICAgKiBzbyB0aGF0LCB3ZSBjYW4gdXNlIGFic29sdXRlIHBvc2l0aW9uZWQgZWxlbWVudCBpbnNpZGUgd2l0aG91dCBcIm92ZXJmbG93OiBoaWRkZW5cIiBiZWluZyBhIHByb2JsZW1cbiAgICAgICAgICovXG4gICAgICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1zZWNvbmRhcnkpYFxuICAgIH0pLFxuICAgIGFjY29yZGlvbkhlYWRlcjogY3NzKHtcbiAgICAgICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICAgICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXRleHQtc2Vjb25kYXJ5LW9uLWJhY2tncm91bmQpXCIsXG4gICAgICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgICAgIHBhZGRpbmc6IFwiMHB4XCIsXG4gICAgICAgIG1pbkhlaWdodDogMzIsIC8vIFRvIGhhdmUgc2FtZSBoZWlnaHQgYXMgdGhlIHJlbW92ZSB2YWx1ZSBhY3Rpb24gYnV0dG9uLlxuICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICAgICAganVzdGlmeUNvbnRlbnQ6IFwic3BhY2UtYmV0d2VlblwiLFxuXG4gICAgICAgIFwiJiAuYWNjb3JkaW9uLWhlYWRlci0tbGVmdFwiOiB7XG4gICAgICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogXCJzcGFjZS1iZXR3ZWVuXCIsXG4gICAgICAgICAgICBcIiYgLmFjY29yZGlvbi10aXRsZVwiOiB7XG4gICAgICAgICAgICAgICAgc3Bhbjoge1xuICAgICAgICAgICAgICAgICAgICBtYXJnaW5MZWZ0OiAyNFxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgfSxcbiAgICAgICAgXCImIC5hY2NvcmRpb24taGVhZGVyLS1yaWdodFwiOiB7XG4gICAgICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgICAgIFwiJiAuaWNvbi1jb250YWluZXJcIjoge1xuICAgICAgICAgICAgICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgICAgICAgICAgICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG5cbiAgICAgICAgICAgICAgICBcIiYgc3BhblwiOiB7XG4gICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6IFwiZmxleFwiXG4gICAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgICBcIiYgc3ZnXCI6IHtcbiAgICAgICAgICAgICAgICAgICAgZmlsbDogXCJjdXJyZW50Q29sb3JcIixcbiAgICAgICAgICAgICAgICAgICAgd2lkdGg6IDE0LFxuICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6IDE0XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuXG4gICAgICAgIFwiJjo6YmVmb3JlXCI6IHtcbiAgICAgICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgICAgICB0b3A6IFwiY2FsYyg1MCUgLSA1cHgpXCIsXG4gICAgICAgICAgICBsZWZ0OiBcIjVweFwiLFxuICAgICAgICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgICAgICAgd2lkdGg6IDAsXG4gICAgICAgICAgICBoZWlnaHQ6IDAsXG5cbiAgICAgICAgICAgIC8vIEFycm93IHJpZ2h0LlxuICAgICAgICAgICAgYm9yZGVyVG9wOiBcIjVweCBzb2xpZCB0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgYm9yZGVyQm90dG9tOiBcIjVweCBzb2xpZCB0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgYm9yZGVyTGVmdDogXCI1cHggc29saWQgY3VycmVudENvbG9yXCJcbiAgICAgICAgfSxcblxuICAgICAgICBcIiYub3BlblwiOiB7XG4gICAgICAgICAgICBcIiY6OmJlZm9yZVwiOiB7XG4gICAgICAgICAgICAgICAgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVkoM3B4KSByb3RhdGUoOTBkZWcpXCJcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH0pXG59O1xuXG5jb25zdCBBY2NvcmRpb25JdGVtID0gc3R5bGVkLmRpdjx7IGFuaW1hdGU6IGJvb2xlYW4gfT5gXG4gICAgQGtleWZyYW1lcyBzaG93LW92ZXJmbG93IHtcbiAgICAgICAgdG8ge1xuICAgICAgICAgICAgb3ZlcmZsb3c6IHZpc2libGU7XG4gICAgICAgIH1cbiAgICB9XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICB0cmFuc2l0aW9uOiAkeyh7IGFuaW1hdGUgfSkgPT5cbiAgICAgICAgYW5pbWF0ZSA/IFwibWF4LWhlaWdodCAwLjM1cyBjdWJpYy1iZXppZXIoMCwgMSwgMCwgMSlcIiA6IFwibm9uZSAhaW1wb3J0YW50XCJ9O1xuICAgIGhlaWdodDogYXV0bztcbiAgICBtYXgtaGVpZ2h0OiAwO1xuXG4gICAgJi5leHBhbmRlZCB7XG4gICAgICAgIG1heC1oZWlnaHQ6IDk5OTlweDtcbiAgICAgICAgdHJhbnNpdGlvbjogJHsoeyBhbmltYXRlIH0pID0+XG4gICAgICAgICAgICBhbmltYXRlID8gXCJtYXgtaGVpZ2h0IDAuM3MgY3ViaWMtYmV6aWVyKDEsIDAsIDEsIDApXCIgOiBcIm5vbmUgIWltcG9ydGFudFwifTtcbiAgICAgICAgYW5pbWF0aW9uLWZpbGwtbW9kZTogZm9yd2FyZHM7XG4gICAgICAgIGFuaW1hdGlvbi1uYW1lOiBzaG93LW92ZXJmbG93O1xuICAgICAgICBhbmltYXRpb24tZHVyYXRpb246IDIwbXM7XG4gICAgICAgIGFuaW1hdGlvbi1kZWxheTogMC4zcztcbiAgICB9XG5gO1xuXG5jb25zdCBBY2NvcmRpb25Db250ZW50ID0gc3R5bGVkLmRpdmBcbiAgICBwYWRkaW5nLWJvdHRvbTogMTA7XG5gO1xuXG5pbnRlcmZhY2UgQWNjb3JkaW9uUHJvcHMge1xuICAgIHRpdGxlOiBzdHJpbmc7XG4gICAgaXNFeHBhbmRlZDogYm9vbGVhbjtcbiAgICB0b2dnbGVFeHBhbmRlZDogKCkgPT4gdm9pZDtcbiAgICBhY3Rpb24/OiBSZWFjdEVsZW1lbnQgfCBudWxsO1xuICAgIGljb24/OiBSZWFjdEVsZW1lbnQ7XG4gICAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbn1cblxuY29uc3QgQWNjb3JkaW9uID0gKHtcbiAgICB0aXRsZSxcbiAgICBjaGlsZHJlbixcbiAgICBhY3Rpb24sXG4gICAgaWNvbixcbiAgICBpc0V4cGFuZGVkLFxuICAgIHRvZ2dsZUV4cGFuZGVkXG59OiBBY2NvcmRpb25Qcm9wcykgPT4ge1xuICAgIGNvbnN0IHVzZXJJbnRlcmFjdGlvblJlZiA9IHVzZVJlZihmYWxzZSk7XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgICBpZiAodXNlckludGVyYWN0aW9uUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgICAgIHVzZXJJbnRlcmFjdGlvblJlZi5jdXJyZW50ID0gZmFsc2U7XG4gICAgICAgIH1cbiAgICB9LCBbaXNFeHBhbmRlZF0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2NsYXNzZXMuYWNjb3JkaW9uV3JhcHBlcn0+XG4gICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzKGNsYXNzZXMuYWNjb3JkaW9uSGVhZGVyLCB7XG4gICAgICAgICAgICAgICAgICAgIG9wZW46IGlzRXhwYW5kZWRcbiAgICAgICAgICAgICAgICB9KX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHVzZXJJbnRlcmFjdGlvblJlZi5jdXJyZW50ID0gdHJ1ZTtcbiAgICAgICAgICAgICAgICAgICAgdG9nZ2xlRXhwYW5kZWQoKTtcbiAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiYWNjb3JkaW9uLWhlYWRlci0tbGVmdFwiPlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17XCJhY2NvcmRpb24tdGl0bGVcIn0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8VGV4dCBzaXplPXtcIm1kXCJ9IGFzPXtcInNwYW5cIn0gY2xhc3NOYW1lPXtcIndlYmlueV9hY2NvcmRpb24tdGl0bGUtdGV4dFwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7dGl0bGV9XG4gICAgICAgICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiYWNjb3JkaW9uLWhlYWRlci0tcmlnaHRcIj5cbiAgICAgICAgICAgICAgICAgICAge2FjdGlvbiAmJiA8ZGl2IGNsYXNzTmFtZT17XCJhY3Rpb24tY29udGFpbmVyXCJ9PnthY3Rpb259PC9kaXY+fVxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17XCJpY29uLWNvbnRhaW5lclwifT57aWNvbn08L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPEFjY29yZGlvbkl0ZW1cbiAgICAgICAgICAgICAgICBhbmltYXRlPXt1c2VySW50ZXJhY3Rpb25SZWYuY3VycmVudCA9PT0gdHJ1ZX1cbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXMoe1xuICAgICAgICAgICAgICAgICAgICBleHBhbmRlZDogaXNFeHBhbmRlZFxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxBY2NvcmRpb25Db250ZW50PntjaGlsZHJlbn08L0FjY29yZGlvbkNvbnRlbnQ+XG4gICAgICAgICAgICA8L0FjY29yZGlvbkl0ZW0+XG4gICAgICAgIDwvZGl2PlxuICAgICk7XG59O1xuY29uc3QgTWVtb2l6ZWRBY2NvcmRpb246IFJlYWN0LkNvbXBvbmVudFR5cGU8QWNjb3JkaW9uUHJvcHM+ID0gUmVhY3QubWVtbyhBY2NvcmRpb24pO1xuZXhwb3J0IGRlZmF1bHQgTWVtb2l6ZWRBY2NvcmRpb247XG4iXX0= */",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  })
 };
-
-var Accordion = function Accordion(_ref) {
-  var title = _ref.title,
-      children = _ref.children,
-      action = _ref.action,
-      icon = _ref.icon,
-      _ref$defaultValue = _ref.defaultValue,
-      defaultValue = _ref$defaultValue === void 0 ? false : _ref$defaultValue;
-
-  var _useState = useState(defaultValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setOpen = _useState2[1];
-
-  var toggleOpen = useCallback(function () {
-    return setOpen(!isOpen);
-  }, [isOpen]);
+const AccordionItem = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e15quhd1"
+} : {
+  target: "e15quhd1",
+  label: "AccordionItem"
+})("@keyframes show-overflow{to{overflow:visible;}}overflow:hidden;transition:", ({
+  animate
+}) => animate ? "max-height 0.35s cubic-bezier(0, 1, 0, 1)" : "none !important", ";height:auto;max-height:0;&.expanded{max-height:9999px;transition:", ({
+  animate
+}) => animate ? "max-height 0.3s cubic-bezier(1, 0, 1, 0)" : "none !important", ";animation-fill-mode:forwards;animation-name:show-overflow;animation-duration:20ms;animation-delay:0.3s;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFjY29yZGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEVzRCIsImZpbGUiOiJBY2NvcmRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBSZWFjdEVsZW1lbnQgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVJlZiB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgY2xhc3NOYW1lcyBmcm9tIFwiY2xhc3NuYW1lc1wiO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gXCJAd2ViaW55L2FkbWluLXVpXCI7XG5cbmNvbnN0IGNsYXNzZXMgPSB7XG4gICAgYWNjb3JkaW9uV3JhcHBlcjogY3NzKHtcbiAgICAgICAgLyoqXG4gICAgICAgICAqIFdlJ3JlIHVzaW5nIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIgaGVyZSBmb3IgXCJQb3BwaW5nIE91dCBvZiBIaWRkZW4gT3ZlcmZsb3dcIiBodHRwczovL2Nzcy10cmlja3MuY29tL3BvcHBpbmctaGlkZGVuLW92ZXJmbG93L1xuICAgICAgICAgKiBzbyB0aGF0LCB3ZSBjYW4gdXNlIGFic29sdXRlIHBvc2l0aW9uZWQgZWxlbWVudCBpbnNpZGUgd2l0aG91dCBcIm92ZXJmbG93OiBoaWRkZW5cIiBiZWluZyBhIHByb2JsZW1cbiAgICAgICAgICovXG4gICAgICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1zZWNvbmRhcnkpYFxuICAgIH0pLFxuICAgIGFjY29yZGlvbkhlYWRlcjogY3NzKHtcbiAgICAgICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICAgICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXRleHQtc2Vjb25kYXJ5LW9uLWJhY2tncm91bmQpXCIsXG4gICAgICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgICAgIHBhZGRpbmc6IFwiMHB4XCIsXG4gICAgICAgIG1pbkhlaWdodDogMzIsIC8vIFRvIGhhdmUgc2FtZSBoZWlnaHQgYXMgdGhlIHJlbW92ZSB2YWx1ZSBhY3Rpb24gYnV0dG9uLlxuICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICAgICAganVzdGlmeUNvbnRlbnQ6IFwic3BhY2UtYmV0d2VlblwiLFxuXG4gICAgICAgIFwiJiAuYWNjb3JkaW9uLWhlYWRlci0tbGVmdFwiOiB7XG4gICAgICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogXCJzcGFjZS1iZXR3ZWVuXCIsXG4gICAgICAgICAgICBcIiYgLmFjY29yZGlvbi10aXRsZVwiOiB7XG4gICAgICAgICAgICAgICAgc3Bhbjoge1xuICAgICAgICAgICAgICAgICAgICBtYXJnaW5MZWZ0OiAyNFxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgfSxcbiAgICAgICAgXCImIC5hY2NvcmRpb24taGVhZGVyLS1yaWdodFwiOiB7XG4gICAgICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgICAgIFwiJiAuaWNvbi1jb250YWluZXJcIjoge1xuICAgICAgICAgICAgICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgICAgICAgICAgICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG5cbiAgICAgICAgICAgICAgICBcIiYgc3BhblwiOiB7XG4gICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6IFwiZmxleFwiXG4gICAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgICBcIiYgc3ZnXCI6IHtcbiAgICAgICAgICAgICAgICAgICAgZmlsbDogXCJjdXJyZW50Q29sb3JcIixcbiAgICAgICAgICAgICAgICAgICAgd2lkdGg6IDE0LFxuICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6IDE0XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuXG4gICAgICAgIFwiJjo6YmVmb3JlXCI6IHtcbiAgICAgICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgICAgICB0b3A6IFwiY2FsYyg1MCUgLSA1cHgpXCIsXG4gICAgICAgICAgICBsZWZ0OiBcIjVweFwiLFxuICAgICAgICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgICAgICAgd2lkdGg6IDAsXG4gICAgICAgICAgICBoZWlnaHQ6IDAsXG5cbiAgICAgICAgICAgIC8vIEFycm93IHJpZ2h0LlxuICAgICAgICAgICAgYm9yZGVyVG9wOiBcIjVweCBzb2xpZCB0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgYm9yZGVyQm90dG9tOiBcIjVweCBzb2xpZCB0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgYm9yZGVyTGVmdDogXCI1cHggc29saWQgY3VycmVudENvbG9yXCJcbiAgICAgICAgfSxcblxuICAgICAgICBcIiYub3BlblwiOiB7XG4gICAgICAgICAgICBcIiY6OmJlZm9yZVwiOiB7XG4gICAgICAgICAgICAgICAgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVkoM3B4KSByb3RhdGUoOTBkZWcpXCJcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH0pXG59O1xuXG5jb25zdCBBY2NvcmRpb25JdGVtID0gc3R5bGVkLmRpdjx7IGFuaW1hdGU6IGJvb2xlYW4gfT5gXG4gICAgQGtleWZyYW1lcyBzaG93LW92ZXJmbG93IHtcbiAgICAgICAgdG8ge1xuICAgICAgICAgICAgb3ZlcmZsb3c6IHZpc2libGU7XG4gICAgICAgIH1cbiAgICB9XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICB0cmFuc2l0aW9uOiAkeyh7IGFuaW1hdGUgfSkgPT5cbiAgICAgICAgYW5pbWF0ZSA/IFwibWF4LWhlaWdodCAwLjM1cyBjdWJpYy1iZXppZXIoMCwgMSwgMCwgMSlcIiA6IFwibm9uZSAhaW1wb3J0YW50XCJ9O1xuICAgIGhlaWdodDogYXV0bztcbiAgICBtYXgtaGVpZ2h0OiAwO1xuXG4gICAgJi5leHBhbmRlZCB7XG4gICAgICAgIG1heC1oZWlnaHQ6IDk5OTlweDtcbiAgICAgICAgdHJhbnNpdGlvbjogJHsoeyBhbmltYXRlIH0pID0+XG4gICAgICAgICAgICBhbmltYXRlID8gXCJtYXgtaGVpZ2h0IDAuM3MgY3ViaWMtYmV6aWVyKDEsIDAsIDEsIDApXCIgOiBcIm5vbmUgIWltcG9ydGFudFwifTtcbiAgICAgICAgYW5pbWF0aW9uLWZpbGwtbW9kZTogZm9yd2FyZHM7XG4gICAgICAgIGFuaW1hdGlvbi1uYW1lOiBzaG93LW92ZXJmbG93O1xuICAgICAgICBhbmltYXRpb24tZHVyYXRpb246IDIwbXM7XG4gICAgICAgIGFuaW1hdGlvbi1kZWxheTogMC4zcztcbiAgICB9XG5gO1xuXG5jb25zdCBBY2NvcmRpb25Db250ZW50ID0gc3R5bGVkLmRpdmBcbiAgICBwYWRkaW5nLWJvdHRvbTogMTA7XG5gO1xuXG5pbnRlcmZhY2UgQWNjb3JkaW9uUHJvcHMge1xuICAgIHRpdGxlOiBzdHJpbmc7XG4gICAgaXNFeHBhbmRlZDogYm9vbGVhbjtcbiAgICB0b2dnbGVFeHBhbmRlZDogKCkgPT4gdm9pZDtcbiAgICBhY3Rpb24/OiBSZWFjdEVsZW1lbnQgfCBudWxsO1xuICAgIGljb24/OiBSZWFjdEVsZW1lbnQ7XG4gICAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbn1cblxuY29uc3QgQWNjb3JkaW9uID0gKHtcbiAgICB0aXRsZSxcbiAgICBjaGlsZHJlbixcbiAgICBhY3Rpb24sXG4gICAgaWNvbixcbiAgICBpc0V4cGFuZGVkLFxuICAgIHRvZ2dsZUV4cGFuZGVkXG59OiBBY2NvcmRpb25Qcm9wcykgPT4ge1xuICAgIGNvbnN0IHVzZXJJbnRlcmFjdGlvblJlZiA9IHVzZVJlZihmYWxzZSk7XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgICBpZiAodXNlckludGVyYWN0aW9uUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgICAgIHVzZXJJbnRlcmFjdGlvblJlZi5jdXJyZW50ID0gZmFsc2U7XG4gICAgICAgIH1cbiAgICB9LCBbaXNFeHBhbmRlZF0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2NsYXNzZXMuYWNjb3JkaW9uV3JhcHBlcn0+XG4gICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzKGNsYXNzZXMuYWNjb3JkaW9uSGVhZGVyLCB7XG4gICAgICAgICAgICAgICAgICAgIG9wZW46IGlzRXhwYW5kZWRcbiAgICAgICAgICAgICAgICB9KX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHVzZXJJbnRlcmFjdGlvblJlZi5jdXJyZW50ID0gdHJ1ZTtcbiAgICAgICAgICAgICAgICAgICAgdG9nZ2xlRXhwYW5kZWQoKTtcbiAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiYWNjb3JkaW9uLWhlYWRlci0tbGVmdFwiPlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17XCJhY2NvcmRpb24tdGl0bGVcIn0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8VGV4dCBzaXplPXtcIm1kXCJ9IGFzPXtcInNwYW5cIn0gY2xhc3NOYW1lPXtcIndlYmlueV9hY2NvcmRpb24tdGl0bGUtdGV4dFwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7dGl0bGV9XG4gICAgICAgICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiYWNjb3JkaW9uLWhlYWRlci0tcmlnaHRcIj5cbiAgICAgICAgICAgICAgICAgICAge2FjdGlvbiAmJiA8ZGl2IGNsYXNzTmFtZT17XCJhY3Rpb24tY29udGFpbmVyXCJ9PnthY3Rpb259PC9kaXY+fVxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17XCJpY29uLWNvbnRhaW5lclwifT57aWNvbn08L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPEFjY29yZGlvbkl0ZW1cbiAgICAgICAgICAgICAgICBhbmltYXRlPXt1c2VySW50ZXJhY3Rpb25SZWYuY3VycmVudCA9PT0gdHJ1ZX1cbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXMoe1xuICAgICAgICAgICAgICAgICAgICBleHBhbmRlZDogaXNFeHBhbmRlZFxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxBY2NvcmRpb25Db250ZW50PntjaGlsZHJlbn08L0FjY29yZGlvbkNvbnRlbnQ+XG4gICAgICAgICAgICA8L0FjY29yZGlvbkl0ZW0+XG4gICAgICAgIDwvZGl2PlxuICAgICk7XG59O1xuY29uc3QgTWVtb2l6ZWRBY2NvcmRpb246IFJlYWN0LkNvbXBvbmVudFR5cGU8QWNjb3JkaW9uUHJvcHM+ID0gUmVhY3QubWVtbyhBY2NvcmRpb24pO1xuZXhwb3J0IGRlZmF1bHQgTWVtb2l6ZWRBY2NvcmRpb247XG4iXX0= */"));
+const AccordionContent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e15quhd0"
+} : {
+  target: "e15quhd0",
+  label: "AccordionContent"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1adqh5i",
+  styles: "padding-bottom:10"
+} : {
+  name: "1adqh5i",
+  styles: "padding-bottom:10",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFjY29yZGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUdtQyIsImZpbGUiOiJBY2NvcmRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBSZWFjdEVsZW1lbnQgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVJlZiB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgY2xhc3NOYW1lcyBmcm9tIFwiY2xhc3NuYW1lc1wiO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gXCJAd2ViaW55L2FkbWluLXVpXCI7XG5cbmNvbnN0IGNsYXNzZXMgPSB7XG4gICAgYWNjb3JkaW9uV3JhcHBlcjogY3NzKHtcbiAgICAgICAgLyoqXG4gICAgICAgICAqIFdlJ3JlIHVzaW5nIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIgaGVyZSBmb3IgXCJQb3BwaW5nIE91dCBvZiBIaWRkZW4gT3ZlcmZsb3dcIiBodHRwczovL2Nzcy10cmlja3MuY29tL3BvcHBpbmctaGlkZGVuLW92ZXJmbG93L1xuICAgICAgICAgKiBzbyB0aGF0LCB3ZSBjYW4gdXNlIGFic29sdXRlIHBvc2l0aW9uZWQgZWxlbWVudCBpbnNpZGUgd2l0aG91dCBcIm92ZXJmbG93OiBoaWRkZW5cIiBiZWluZyBhIHByb2JsZW1cbiAgICAgICAgICovXG4gICAgICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1zZWNvbmRhcnkpYFxuICAgIH0pLFxuICAgIGFjY29yZGlvbkhlYWRlcjogY3NzKHtcbiAgICAgICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICAgICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXRleHQtc2Vjb25kYXJ5LW9uLWJhY2tncm91bmQpXCIsXG4gICAgICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgICAgIHBhZGRpbmc6IFwiMHB4XCIsXG4gICAgICAgIG1pbkhlaWdodDogMzIsIC8vIFRvIGhhdmUgc2FtZSBoZWlnaHQgYXMgdGhlIHJlbW92ZSB2YWx1ZSBhY3Rpb24gYnV0dG9uLlxuICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICAgICAganVzdGlmeUNvbnRlbnQ6IFwic3BhY2UtYmV0d2VlblwiLFxuXG4gICAgICAgIFwiJiAuYWNjb3JkaW9uLWhlYWRlci0tbGVmdFwiOiB7XG4gICAgICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogXCJzcGFjZS1iZXR3ZWVuXCIsXG4gICAgICAgICAgICBcIiYgLmFjY29yZGlvbi10aXRsZVwiOiB7XG4gICAgICAgICAgICAgICAgc3Bhbjoge1xuICAgICAgICAgICAgICAgICAgICBtYXJnaW5MZWZ0OiAyNFxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgfSxcbiAgICAgICAgXCImIC5hY2NvcmRpb24taGVhZGVyLS1yaWdodFwiOiB7XG4gICAgICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgICAgIFwiJiAuaWNvbi1jb250YWluZXJcIjoge1xuICAgICAgICAgICAgICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgICAgICAgICAgICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG5cbiAgICAgICAgICAgICAgICBcIiYgc3BhblwiOiB7XG4gICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6IFwiZmxleFwiXG4gICAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgICBcIiYgc3ZnXCI6IHtcbiAgICAgICAgICAgICAgICAgICAgZmlsbDogXCJjdXJyZW50Q29sb3JcIixcbiAgICAgICAgICAgICAgICAgICAgd2lkdGg6IDE0LFxuICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6IDE0XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuXG4gICAgICAgIFwiJjo6YmVmb3JlXCI6IHtcbiAgICAgICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgICAgICB0b3A6IFwiY2FsYyg1MCUgLSA1cHgpXCIsXG4gICAgICAgICAgICBsZWZ0OiBcIjVweFwiLFxuICAgICAgICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgICAgICAgd2lkdGg6IDAsXG4gICAgICAgICAgICBoZWlnaHQ6IDAsXG5cbiAgICAgICAgICAgIC8vIEFycm93IHJpZ2h0LlxuICAgICAgICAgICAgYm9yZGVyVG9wOiBcIjVweCBzb2xpZCB0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgYm9yZGVyQm90dG9tOiBcIjVweCBzb2xpZCB0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgYm9yZGVyTGVmdDogXCI1cHggc29saWQgY3VycmVudENvbG9yXCJcbiAgICAgICAgfSxcblxuICAgICAgICBcIiYub3BlblwiOiB7XG4gICAgICAgICAgICBcIiY6OmJlZm9yZVwiOiB7XG4gICAgICAgICAgICAgICAgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVkoM3B4KSByb3RhdGUoOTBkZWcpXCJcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH0pXG59O1xuXG5jb25zdCBBY2NvcmRpb25JdGVtID0gc3R5bGVkLmRpdjx7IGFuaW1hdGU6IGJvb2xlYW4gfT5gXG4gICAgQGtleWZyYW1lcyBzaG93LW92ZXJmbG93IHtcbiAgICAgICAgdG8ge1xuICAgICAgICAgICAgb3ZlcmZsb3c6IHZpc2libGU7XG4gICAgICAgIH1cbiAgICB9XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICB0cmFuc2l0aW9uOiAkeyh7IGFuaW1hdGUgfSkgPT5cbiAgICAgICAgYW5pbWF0ZSA/IFwibWF4LWhlaWdodCAwLjM1cyBjdWJpYy1iZXppZXIoMCwgMSwgMCwgMSlcIiA6IFwibm9uZSAhaW1wb3J0YW50XCJ9O1xuICAgIGhlaWdodDogYXV0bztcbiAgICBtYXgtaGVpZ2h0OiAwO1xuXG4gICAgJi5leHBhbmRlZCB7XG4gICAgICAgIG1heC1oZWlnaHQ6IDk5OTlweDtcbiAgICAgICAgdHJhbnNpdGlvbjogJHsoeyBhbmltYXRlIH0pID0+XG4gICAgICAgICAgICBhbmltYXRlID8gXCJtYXgtaGVpZ2h0IDAuM3MgY3ViaWMtYmV6aWVyKDEsIDAsIDEsIDApXCIgOiBcIm5vbmUgIWltcG9ydGFudFwifTtcbiAgICAgICAgYW5pbWF0aW9uLWZpbGwtbW9kZTogZm9yd2FyZHM7XG4gICAgICAgIGFuaW1hdGlvbi1uYW1lOiBzaG93LW92ZXJmbG93O1xuICAgICAgICBhbmltYXRpb24tZHVyYXRpb246IDIwbXM7XG4gICAgICAgIGFuaW1hdGlvbi1kZWxheTogMC4zcztcbiAgICB9XG5gO1xuXG5jb25zdCBBY2NvcmRpb25Db250ZW50ID0gc3R5bGVkLmRpdmBcbiAgICBwYWRkaW5nLWJvdHRvbTogMTA7XG5gO1xuXG5pbnRlcmZhY2UgQWNjb3JkaW9uUHJvcHMge1xuICAgIHRpdGxlOiBzdHJpbmc7XG4gICAgaXNFeHBhbmRlZDogYm9vbGVhbjtcbiAgICB0b2dnbGVFeHBhbmRlZDogKCkgPT4gdm9pZDtcbiAgICBhY3Rpb24/OiBSZWFjdEVsZW1lbnQgfCBudWxsO1xuICAgIGljb24/OiBSZWFjdEVsZW1lbnQ7XG4gICAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbn1cblxuY29uc3QgQWNjb3JkaW9uID0gKHtcbiAgICB0aXRsZSxcbiAgICBjaGlsZHJlbixcbiAgICBhY3Rpb24sXG4gICAgaWNvbixcbiAgICBpc0V4cGFuZGVkLFxuICAgIHRvZ2dsZUV4cGFuZGVkXG59OiBBY2NvcmRpb25Qcm9wcykgPT4ge1xuICAgIGNvbnN0IHVzZXJJbnRlcmFjdGlvblJlZiA9IHVzZVJlZihmYWxzZSk7XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgICBpZiAodXNlckludGVyYWN0aW9uUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgICAgIHVzZXJJbnRlcmFjdGlvblJlZi5jdXJyZW50ID0gZmFsc2U7XG4gICAgICAgIH1cbiAgICB9LCBbaXNFeHBhbmRlZF0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2NsYXNzZXMuYWNjb3JkaW9uV3JhcHBlcn0+XG4gICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzKGNsYXNzZXMuYWNjb3JkaW9uSGVhZGVyLCB7XG4gICAgICAgICAgICAgICAgICAgIG9wZW46IGlzRXhwYW5kZWRcbiAgICAgICAgICAgICAgICB9KX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHVzZXJJbnRlcmFjdGlvblJlZi5jdXJyZW50ID0gdHJ1ZTtcbiAgICAgICAgICAgICAgICAgICAgdG9nZ2xlRXhwYW5kZWQoKTtcbiAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiYWNjb3JkaW9uLWhlYWRlci0tbGVmdFwiPlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17XCJhY2NvcmRpb24tdGl0bGVcIn0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8VGV4dCBzaXplPXtcIm1kXCJ9IGFzPXtcInNwYW5cIn0gY2xhc3NOYW1lPXtcIndlYmlueV9hY2NvcmRpb24tdGl0bGUtdGV4dFwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7dGl0bGV9XG4gICAgICAgICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiYWNjb3JkaW9uLWhlYWRlci0tcmlnaHRcIj5cbiAgICAgICAgICAgICAgICAgICAge2FjdGlvbiAmJiA8ZGl2IGNsYXNzTmFtZT17XCJhY3Rpb24tY29udGFpbmVyXCJ9PnthY3Rpb259PC9kaXY+fVxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17XCJpY29uLWNvbnRhaW5lclwifT57aWNvbn08L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPEFjY29yZGlvbkl0ZW1cbiAgICAgICAgICAgICAgICBhbmltYXRlPXt1c2VySW50ZXJhY3Rpb25SZWYuY3VycmVudCA9PT0gdHJ1ZX1cbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXMoe1xuICAgICAgICAgICAgICAgICAgICBleHBhbmRlZDogaXNFeHBhbmRlZFxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxBY2NvcmRpb25Db250ZW50PntjaGlsZHJlbn08L0FjY29yZGlvbkNvbnRlbnQ+XG4gICAgICAgICAgICA8L0FjY29yZGlvbkl0ZW0+XG4gICAgICAgIDwvZGl2PlxuICAgICk7XG59O1xuY29uc3QgTWVtb2l6ZWRBY2NvcmRpb246IFJlYWN0LkNvbXBvbmVudFR5cGU8QWNjb3JkaW9uUHJvcHM+ID0gUmVhY3QubWVtbyhBY2NvcmRpb24pO1xuZXhwb3J0IGRlZmF1bHQgTWVtb2l6ZWRBY2NvcmRpb247XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Accordion = ({
+  title,
+  children,
+  action,
+  icon,
+  isExpanded,
+  toggleExpanded
+}) => {
+  const userInteractionRef = useRef(false);
+  useEffect(() => {
+    if (userInteractionRef.current) {
+      userInteractionRef.current = false;
+    }
+  }, [isExpanded]);
   return /*#__PURE__*/React.createElement("div", {
     className: classes.accordionWrapper
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(classes.accordionHeader, {
-      open: isOpen
+      open: isExpanded
     }),
-    onClick: toggleOpen
+    onClick: () => {
+      userInteractionRef.current = true;
+      toggleExpanded();
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: "accordion-header--left"
   }, /*#__PURE__*/React.createElement("div", {
     className: "accordion-title"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    use: "subtitle1"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "md",
+    as: "span",
+    className: "webiny_accordion-title-text"
   }, title))), /*#__PURE__*/React.createElement("div", {
     className: "accordion-header--right"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, action && /*#__PURE__*/React.createElement("div", {
     className: "action-container"
   }, action), /*#__PURE__*/React.createElement("div", {
     className: "icon-container"
-  }, icon))), /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.accordionItem, {
-      collapsed: !isOpen
+  }, icon))), /*#__PURE__*/React.createElement(AccordionItem, {
+    animate: userInteractionRef.current === true,
+    className: classNames({
+      expanded: isExpanded
     })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "accordion-content"
-  }, children)));
+  }, /*#__PURE__*/React.createElement(AccordionContent, null, children)));
 };
+const MemoizedAccordion = /*#__PURE__*/React.memo(Accordion);
+export default MemoizedAccordion;
 
-export default /*#__PURE__*/React.memo(Accordion);
+//# sourceMappingURL=Accordion.js.map

package/admin/plugins/fieldRenderers/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","css","classNames","Text","classes","accordionWrapper","position","width","borderBottom","process","env","NODE_ENV","accordionHeader","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","AccordionItem","_styled","target","label","animate","AccordionContent","Accordion","title","children","action","icon","isExpanded","toggleExpanded","userInteractionRef","current","createElement","className","open","onClick","size","as","expanded","MemoizedAccordion","memo"],"sources":["Accordion.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React, { useEffect, useRef } from \"react\";\nimport { css } from \"@emotion/css\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport { Text } from \"@webiny/admin-ui\";\n\nconst classes = {\n    accordionWrapper: css({\n        /**\n         * We're using position: \"relative\" here for \"Popping Out of Hidden Overflow\" https://css-tricks.com/popping-hidden-overflow/\n         * so that, we can use absolute positioned element inside without \"overflow: hidden\" being a problem\n         */\n        position: \"relative\",\n        width: \"100%\",\n        borderBottom: `1px solid var(--mdc-theme-on-secondary)`\n    }),\n    accordionHeader: css({\n        position: \"relative\",\n        color: \"var(--mdc-theme-text-secondary-on-background)\",\n        cursor: \"pointer\",\n        padding: \"0px\",\n        minHeight: 32, // To have same height as the remove value action button.\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-between\",\n\n        \"& .accordion-header--left\": {\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            \"& .accordion-title\": {\n                span: {\n                    marginLeft: 24\n                }\n            }\n        },\n        \"& .accordion-header--right\": {\n            display: \"flex\",\n            \"& .icon-container\": {\n                display: \"flex\",\n                alignItems: \"center\",\n\n                \"& span\": {\n                    display: \"flex\"\n                },\n                \"& svg\": {\n                    fill: \"currentColor\",\n                    width: 14,\n                    height: 14\n                }\n            }\n        },\n\n        \"&::before\": {\n            position: \"absolute\",\n            top: \"calc(50% - 5px)\",\n            left: \"5px\",\n            content: '\"\"',\n            width: 0,\n            height: 0,\n\n            // Arrow right.\n            borderTop: \"5px solid transparent\",\n            borderBottom: \"5px solid transparent\",\n            borderLeft: \"5px solid currentColor\"\n        },\n\n        \"&.open\": {\n            \"&::before\": {\n                transform: \"translateY(3px) rotate(90deg)\"\n            }\n        }\n    })\n};\n\nconst AccordionItem = styled.div<{ animate: boolean }>`\n    @keyframes show-overflow {\n        to {\n            overflow: visible;\n        }\n    }\n    overflow: hidden;\n    transition: ${({ animate }) =>\n        animate ? \"max-height 0.35s cubic-bezier(0, 1, 0, 1)\" : \"none !important\"};\n    height: auto;\n    max-height: 0;\n\n    &.expanded {\n        max-height: 9999px;\n        transition: ${({ animate }) =>\n            animate ? \"max-height 0.3s cubic-bezier(1, 0, 1, 0)\" : \"none !important\"};\n        animation-fill-mode: forwards;\n        animation-name: show-overflow;\n        animation-duration: 20ms;\n        animation-delay: 0.3s;\n    }\n`;\n\nconst AccordionContent = styled.div`\n    padding-bottom: 10;\n`;\n\ninterface AccordionProps {\n    title: string;\n    isExpanded: boolean;\n    toggleExpanded: () => void;\n    action?: ReactElement | null;\n    icon?: ReactElement;\n    children: React.ReactNode;\n}\n\nconst Accordion = ({\n    title,\n    children,\n    action,\n    icon,\n    isExpanded,\n    toggleExpanded\n}: AccordionProps) => {\n    const userInteractionRef = useRef(false);\n\n    useEffect(() => {\n        if (userInteractionRef.current) {\n            userInteractionRef.current = false;\n        }\n    }, [isExpanded]);\n\n    return (\n        <div className={classes.accordionWrapper}>\n            <div\n                className={classNames(classes.accordionHeader, {\n                    open: isExpanded\n                })}\n                onClick={() => {\n                    userInteractionRef.current = true;\n                    toggleExpanded();\n                }}\n            >\n                <div className=\"accordion-header--left\">\n                    <div className={\"accordion-title\"}>\n                        <Text size={\"md\"} as={\"span\"} className={\"webiny_accordion-title-text\"}>\n                            {title}\n                        </Text>\n                    </div>\n                </div>\n                <div className=\"accordion-header--right\">\n                    {action && <div className={\"action-container\"}>{action}</div>}\n                    <div className={\"icon-container\"}>{icon}</div>\n                </div>\n            </div>\n            <AccordionItem\n                animate={userInteractionRef.current === true}\n                className={classNames({\n                    expanded: isExpanded\n                })}\n            >\n                <AccordionContent>{children}</AccordionContent>\n            </AccordionItem>\n        </div>\n    );\n};\nconst MemoizedAccordion: React.ComponentType<AccordionProps> = React.memo(Accordion);\nexport default MemoizedAccordion;\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/AccordionRenderSettings.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { CmsModelField, CmsModelFieldRendererSettingsProps } from "@webiny/app-headless-cms-common/types";
+export interface IAccordionRenderSettings {
+    open: boolean;
+}
+export declare const getAccordionRenderSettings: (field: CmsModelField) => IAccordionRenderSettings;
+export declare const AccordionRenderSettings: ({ field }: CmsModelFieldRendererSettingsProps) => React.JSX.Element;

package/admin/plugins/fieldRenderers/AccordionRenderSettings.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { Bind } from "@webiny/form";
+import { Grid, Switch } from "@webiny/admin-ui";
+const DEFAULT_ACCORDION_RENDER_SETTINGS = {
+  open: false
+};
+export const getAccordionRenderSettings = field => {
+  if (typeof field.renderer === "function") {
+    return DEFAULT_ACCORDION_RENDER_SETTINGS;
+  }
+  return field.renderer.settings ?? {};
+};
+export const AccordionRenderSettings = ({
+  field
+}) => {
+  return /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "renderer.settings.open",
+    defaultValue: false
+  }, /*#__PURE__*/React.createElement(Switch, {
+    label: "Expand Accordion",
+    description: `Enable if "${field.label}" is to be expanded by default.`
+  })));
+};
+
+//# sourceMappingURL=AccordionRenderSettings.js.map

package/admin/plugins/fieldRenderers/AccordionRenderSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Bind","Grid","Switch","DEFAULT_ACCORDION_RENDER_SETTINGS","open","getAccordionRenderSettings","field","renderer","settings","AccordionRenderSettings","createElement","Column","span","name","defaultValue","label","description"],"sources":["AccordionRenderSettings.tsx"],"sourcesContent":["import React from \"react\";\nimport { Bind } from \"@webiny/form\";\nimport { Grid, Switch } from \"@webiny/admin-ui\";\nimport type {\n    CmsModelField,\n    CmsModelFieldRendererSettingsProps\n} from \"@webiny/app-headless-cms-common/types\";\n\nexport interface IAccordionRenderSettings {\n    open: boolean;\n}\n\nconst DEFAULT_ACCORDION_RENDER_SETTINGS: IAccordionRenderSettings = {\n    open: false\n};\n\nexport const getAccordionRenderSettings = (field: CmsModelField) => {\n    if (typeof field.renderer === \"function\") {\n        return DEFAULT_ACCORDION_RENDER_SETTINGS;\n    }\n\n    return (field.renderer.settings ?? {}) as IAccordionRenderSettings;\n};\n\nexport const AccordionRenderSettings = ({ field }: CmsModelFieldRendererSettingsProps) => {\n    return (\n        <Grid.Column span={12}>\n            <Bind name={\"renderer.settings.open\"} defaultValue={false}>\n                <Switch\n                    label={\"Expand Accordion\"}\n                    description={`Enable if \"${field.label}\" is to be expanded by default.`}\n                />\n            </Bind>\n        </Grid.Column>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,IAAI,EAAEC,MAAM,QAAQ,kBAAkB;AAU/C,MAAMC,iCAA2D,GAAG;EAChEC,IAAI,EAAE;AACV,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAK;EAChE,IAAI,OAAOA,KAAK,CAACC,QAAQ,KAAK,UAAU,EAAE;IACtC,OAAOJ,iCAAiC;EAC5C;EAEA,OAAQG,KAAK,CAACC,QAAQ,CAACC,QAAQ,IAAI,CAAC,CAAC;AACzC,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EAAEH;AAA0C,CAAC,KAAK;EACtF,oBACIP,KAAA,CAAAW,aAAA,CAACT,IAAI,CAACU,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBb,KAAA,CAAAW,aAAA,CAACV,IAAI;IAACa,IAAI,EAAE,wBAAyB;IAACC,YAAY,EAAE;EAAM,gBACtDf,KAAA,CAAAW,aAAA,CAACR,MAAM;IACHa,KAAK,EAAE,kBAAmB;IAC1BC,WAAW,EAAE,cAAcV,KAAK,CAACS,KAAK;EAAkC,CAC3E,CACC,CACG,CAAC;AAEtB,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/DynamicSection.d.ts

@@ -1,14 +1,24 @@
 import React from "react";
-import { CmsEditorField } from "../../../types";
-declare type Props = {
-    field: CmsEditorField;
-    getBind(index?: number): React.ComponentType<any>;
+import type { GetBindCallable } from "../../components/ContentEntryForm/useBind";
+import type { BindComponent, BindComponentRenderProp, CmsModelField } from "../../../types";
+export interface DynamicSectionPropsChildrenParams {
+    Bind: BindComponent;
+    field: CmsModelField;
+    bind: {
+        index: BindComponentRenderProp;
+        field: BindComponentRenderProp;
+    };
+    index: number;
+}
+export interface DynamicSectionProps {
+    field: CmsModelField;
+    getBind: GetBindCallable;
     showLabel?: boolean;
-    Label: React.ComponentType<any>;
-    children: (params: any) => React.ReactNode;
+    children: (params: DynamicSectionPropsChildrenParams) => JSX.Element;
     emptyValue?: any;
-    renderTitle?: (value: any[]) => React.ReactElement;
     gridClassName?: string;
-};
-declare const DynamicSection: ({ field, getBind, Label, children, showLabel, emptyValue, renderTitle, gridClassName }: Props) => JSX.Element;
+    onAddItem?: (index: number) => void;
+    addValueButtonLabel?: string;
+}
+declare const DynamicSection: ({ field, getBind, children, showLabel, emptyValue, onAddItem, gridClassName, ...props }: DynamicSectionProps) => React.JSX.Element;
 export default DynamicSection;

package/admin/plugins/fieldRenderers/DynamicSection.js

@@ -1,103 +1,99 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
+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)."; }
 import React from "react";
-import { css } from "emotion";
+import classSet from "classnames";
+import { css } from "@emotion/css";
 import { i18n } from "@webiny/app/i18n";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { ButtonDefault, ButtonIcon } from "@webiny/ui/Button";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import { ReactComponent as AddIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/add-18px.svg";
-var t = i18n.ns("app-headless-cms/admin/fields/text");
-var style = {
-  addButton: /*#__PURE__*/css({
-    width: "100%",
-    borderTop: "1px solid var(--mdc-theme-background)",
-    paddingTop: 8
-  }, "label:addButton;")
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ParentFieldProvider } from "../../hooks";
+import { ParentValueIndexProvider } from "../../components/ModelFieldProvider";
+import { getMultiValueRendererSettings } from "./MultiValueRendererSettings";
+import { Button, cn, FormComponentDescription, FormComponentErrorMessage, Grid, Heading } from "@webiny/admin-ui";
+const t = i18n.ns("app-headless-cms/admin/fields/text");
+const style = {
+  gridContainer: /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+    name: "ivydhp",
+    styles: "padding:0!important"
+  } : {
+    name: "56q6jo-gridContainer",
+    styles: "padding:0!important;label:gridContainer;",
+    map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkR5bmFtaWNTZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQnNCIiwiZmlsZSI6IkR5bmFtaWNTZWN0aW9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBjbGFzc1NldCBmcm9tIFwiY2xhc3NuYW1lc1wiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHsgaTE4biB9IGZyb20gXCJAd2ViaW55L2FwcC9pMThuXCI7XG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBBZGRJY29uIH0gZnJvbSBcIkB3ZWJpbnkvaWNvbnMvYWRkLnN2Z1wiO1xuaW1wb3J0IHR5cGUgeyBHZXRCaW5kQ2FsbGFibGUgfSBmcm9tIFwifi9hZG1pbi9jb21wb25lbnRzL0NvbnRlbnRFbnRyeUZvcm0vdXNlQmluZFwiO1xuaW1wb3J0IHsgUGFyZW50RmllbGRQcm92aWRlciB9IGZyb20gXCJ+L2FkbWluL2hvb2tzXCI7XG5pbXBvcnQgeyBQYXJlbnRWYWx1ZUluZGV4UHJvdmlkZXIgfSBmcm9tIFwifi9hZG1pbi9jb21wb25lbnRzL01vZGVsRmllbGRQcm92aWRlclwiO1xuaW1wb3J0IHR5cGUgeyBCaW5kQ29tcG9uZW50LCBCaW5kQ29tcG9uZW50UmVuZGVyUHJvcCwgQ21zTW9kZWxGaWVsZCB9IGZyb20gXCJ+L3R5cGVzXCI7XG5pbXBvcnQgeyBnZXRNdWx0aVZhbHVlUmVuZGVyZXJTZXR0aW5ncyB9IGZyb20gXCJ+L2FkbWluL3BsdWdpbnMvZmllbGRSZW5kZXJlcnMvTXVsdGlWYWx1ZVJlbmRlcmVyU2V0dGluZ3NcIjtcbmltcG9ydCB7XG4gICAgQnV0dG9uLFxuICAgIGNuLFxuICAgIEZvcm1Db21wb25lbnREZXNjcmlwdGlvbixcbiAgICBGb3JtQ29tcG9uZW50RXJyb3JNZXNzYWdlLFxuICAgIEdyaWQsXG4gICAgSGVhZGluZ1xufSBmcm9tIFwiQHdlYmlueS9hZG1pbi11aVwiO1xuXG5jb25zdCB0ID0gaTE4bi5ucyhcImFwcC1oZWFkbGVzcy1jbXMvYWRtaW4vZmllbGRzL3RleHRcIik7XG5cbmNvbnN0IHN0eWxlID0ge1xuICAgIGdyaWRDb250YWluZXI6IGNzc2BcbiAgICAgICAgcGFkZGluZzogMCAhaW1wb3J0YW50O1xuICAgIGBcbn07XG5cbmV4cG9ydCBpbnRlcmZhY2UgRHluYW1pY1NlY3Rpb25Qcm9wc0NoaWxkcmVuUGFyYW1zIHtcbiAgICBCaW5kOiBCaW5kQ29tcG9uZW50O1xuICAgIGZpZWxkOiBDbXNNb2RlbEZpZWxkO1xuICAgIGJpbmQ6IHtcbiAgICAgICAgaW5kZXg6IEJpbmRDb21wb25lbnRSZW5kZXJQcm9wO1xuICAgICAgICBmaWVsZDogQmluZENvbXBvbmVudFJlbmRlclByb3A7XG4gICAgfTtcbiAgICBpbmRleDogbnVtYmVyO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIER5bmFtaWNTZWN0aW9uUHJvcHMge1xuICAgIGZpZWxkOiBDbXNNb2RlbEZpZWxkO1xuICAgIGdldEJpbmQ6IEdldEJpbmRDYWxsYWJsZTtcbiAgICBzaG93TGFiZWw/OiBib29sZWFuO1xuICAgIGNoaWxkcmVuOiAocGFyYW1zOiBEeW5hbWljU2VjdGlvblByb3BzQ2hpbGRyZW5QYXJhbXMpID0+IEpTWC5FbGVtZW50O1xuICAgIGVtcHR5VmFsdWU/OiBhbnk7XG4gICAgZ3JpZENsYXNzTmFtZT86IHN0cmluZztcbiAgICBvbkFkZEl0ZW0/OiAoaW5kZXg6IG51bWJlcikgPT4gdm9pZDtcbiAgICBhZGRWYWx1ZUJ1dHRvbkxhYmVsPzogc3RyaW5nO1xufVxuXG5jb25zdCBkZWZhdWx0QWRkSXRlbSA9ICgpID0+IHtcbiAgICAvLyBObyBvcC5cbn07XG5cbmNvbnN0IER5bmFtaWNTZWN0aW9uID0gKHtcbiAgICBmaWVsZCxcbiAgICBnZXRCaW5kLFxuICAgIGNoaWxkcmVuLFxuICAgIHNob3dMYWJlbCA9IHRydWUsXG4gICAgZW1wdHlWYWx1ZSA9IFwiXCIsXG4gICAgb25BZGRJdGVtID0gZGVmYXVsdEFkZEl0ZW0sXG4gICAgZ3JpZENsYXNzTmFtZSxcbiAgICAuLi5wcm9wc1xufTogRHluYW1pY1NlY3Rpb25Qcm9wcykgPT4ge1xuICAgIGNvbnN0IEJpbmQgPSBnZXRCaW5kKCk7XG5cbiAgICBjb25zdCBzZXR0aW5ncyA9IGdldE11bHRpVmFsdWVSZW5kZXJlclNldHRpbmdzKGZpZWxkKTtcbiAgICBjb25zdCBhZGRWYWx1ZUJ1dHRvbkxhYmVsID1cbiAgICAgICAgcHJvcHMuYWRkVmFsdWVCdXR0b25MYWJlbCA/PyBzZXR0aW5ncy5hZGRWYWx1ZUJ1dHRvbkxhYmVsID8/IFwiQWRkIFZhbHVlXCI7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICAvKiBGaXJzdCB3ZSBtb3VudCB0aGUgdG9wIGxldmVsIGZpZWxkLCBmb3IgZXhhbXBsZTogXCJpdGVtc1wiICovXG4gICAgICAgIDxCaW5kPlxuICAgICAgICAgICAge2JpbmRGaWVsZCA9PiB7XG4gICAgICAgICAgICAgICAgLyoqXG4gICAgICAgICAgICAgICAgICogXCJ2YWx1ZVwiIC0+IGFuIGFycmF5IG9mIGl0ZW1zXG4gICAgICAgICAgICAgICAgICogXCJhcHBlbmRWYWx1ZVwiIC0+IGEgY2FsbGJhY2sgdG8gYWRkIGEgbmV3IHZhbHVlIHRvIHRoZSB0b3AgbGV2ZWwgXCJpdGVtc1wiIGFycmF5XG4gICAgICAgICAgICAgICAgICovXG4gICAgICAgICAgICAgICAgY29uc3QgeyB2YWx1ZSwgYXBwZW5kVmFsdWUgfSA9IGJpbmRGaWVsZDtcblxuICAgICAgICAgICAgICAgIGNvbnN0IGJpbmRGaWVsZFZhbHVlOiBzdHJpbmdbXSA9IHZhbHVlIHx8IFtdO1xuXG4gICAgICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgICAgICAgPEJpbmQuVmFsaWRhdGlvbkNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxQYXJlbnRGaWVsZFByb3ZpZGVyIHZhbHVlPXt2YWx1ZX0gcGF0aD17QmluZC5wYXJlbnROYW1lfT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7c2hvd0xhYmVsID8gKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFwid2J5LXBiLW1kIHdieS1tYi1tZCB3YnktYm9yZGVyLWItc20gd2J5LWJvcmRlci1uZXV0cmFsLWRpbW1lZFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxIZWFkaW5nIGxldmVsPXs2fSBjbGFzc05hbWU9e1wid2ViaW55X2dyb3VwLWxhYmVsLXRleHRcIn0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2Ake2ZpZWxkLmxhYmVsfSAke1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBiaW5kRmllbGRWYWx1ZS5sZW5ndGhcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgID8gYCgke2JpbmRGaWVsZFZhbHVlLmxlbmd0aH0pYFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgOiBcIlwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfWB9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L0hlYWRpbmc+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7ZmllbGQuaGVscFRleHQgJiYgKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxGb3JtQ29tcG9uZW50RGVzY3JpcHRpb24gdGV4dD17ZmllbGQuaGVscFRleHR9IC8+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8R3JpZCBjbGFzc05hbWU9e2NsYXNzU2V0KGdyaWRDbGFzc05hbWUsIHN0eWxlLmdyaWRDb250YWluZXIpfT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtiaW5kRmllbGRWYWx1ZS5tYXAoKF8sIGluZGV4KSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc3QgQmluZEZpZWxkID0gZ2V0QmluZChpbmRleCk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEdyaWQuQ29sdW1uIHNwYW49ezEyfSBrZXk9e2luZGV4fT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxCaW5kRmllbGQ+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2JpbmRQcm9wcyA9PiAoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxCaW5kRmllbGQuVmFsaWRhdGlvbkNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxQYXJlbnRWYWx1ZUluZGV4UHJvdmlkZXIgaW5kZXg9e2luZGV4fT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7Y2hpbGRyZW4oe1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBCaW5kOiBCaW5kRmllbGQsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGZpZWxkLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBiaW5kOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpbmRleDogYmluZFByb3BzLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZmllbGQ6IGJpbmRGaWVsZFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpbmRleFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9QYXJlbnRWYWx1ZUluZGV4UHJvdmlkZXI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvQmluZEZpZWxkLlZhbGlkYXRpb25Db250YWluZXI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvQmluZEZpZWxkPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L0dyaWQuQ29sdW1uPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9KX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC8+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7YmluZEZpZWxkLnZhbGlkYXRpb24uaXNWYWxpZCA9PT0gZmFsc2UgJiYgKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxHcmlkLkNvbHVtbiBzcGFuPXsxMn0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxGb3JtQ29tcG9uZW50RXJyb3JNZXNzYWdlXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpbnZhbGlkXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0ZXh0PXtiaW5kRmllbGQudmFsaWRhdGlvbi5tZXNzYWdlfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvR3JpZC5Db2x1bW4+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8Lz5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEdyaWQuQ29sdW1uIHNwYW49ezEyfT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2NuKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBiaW5kRmllbGRWYWx1ZS5sZW5ndGggPiAwID8gXCJ3YnktcHQtbm9uZVwiIDogXCJ3YnktcHQtc21cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEJ1dHRvblxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB2YXJpYW50PXtcInRlcnRpYXJ5XCJ9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGljb249ezxBZGRJY29uIC8+fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0ZXh0PXt0KGFkZFZhbHVlQnV0dG9uTGFiZWwpfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBhcHBlbmRWYWx1ZShlbXB0eVZhbHVlKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQWRkSXRlbShiaW5kRmllbGRWYWx1ZS5sZW5ndGgpO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9HcmlkLkNvbHVtbj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L0dyaWQ+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L1BhcmVudEZpZWxkUHJvdmlkZXI+XG4gICAgICAgICAgICAgICAgICAgIDwvQmluZC5WYWxpZGF0aW9uQ29udGFpbmVyPlxuICAgICAgICAgICAgICAgICk7XG4gICAgICAgICAgICB9fVxuICAgICAgICA8L0JpbmQ+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IER5bmFtaWNTZWN0aW9uO1xuIl19 */",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  })
 };
-
-var DynamicSection = function DynamicSection(_ref) {
-  var field = _ref.field,
-      getBind = _ref.getBind,
-      Label = _ref.Label,
-      children = _ref.children,
-      _ref$showLabel = _ref.showLabel,
-      showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
-      _ref$emptyValue = _ref.emptyValue,
-      emptyValue = _ref$emptyValue === void 0 ? "" : _ref$emptyValue,
-      renderTitle = _ref.renderTitle,
-      gridClassName = _ref.gridClassName;
-  var Bind = getBind();
-  var FirstFieldBind = getBind(0);
-  return (
-    /*#__PURE__*/
-
-    /* First we mount the top level field, for example: "items" */
-    React.createElement(Bind, null, function (bindField) {
-      /**
-       * "value" -> an array of items
-       * "appendValue" -> a callback to add a new value to the top level "items" array
-       */
-      var value = bindField.value,
-          appendValue = bindField.appendValue;
-      var bindFieldValue = value || [];
-      return /*#__PURE__*/React.createElement(Grid, {
-        className: gridClassName
-      }, typeof renderTitle === "function" && renderTitle(bindFieldValue), /*#__PURE__*/React.createElement(Cell, {
-        span: 12
-      }, showLabel && field.label && /*#__PURE__*/React.createElement(Label, null, field.label), /*#__PURE__*/React.createElement(FirstFieldBind, null, function (bindIndex) {
-        return (
-          /* We bind it to index "0", so when you start typing, that index in parent array will be populated */
-          children({
-            Bind: FirstFieldBind,
-            field: field,
-            // "index" contains Bind props for this particular item in the array
-            // "field" contains Bind props for the main (parent) field.
-            bind: {
-              index: bindIndex,
-              field: bindField
-            },
-            index: 0 // Binds to "items.0" in the <Form>.
-
-          })
-        );
-      })), bindFieldValue.slice(1).map(function (_, index) {
-        /* We simply increase index, and as you type, the appropriate indexes in the parent array will be updated. */
-        var realIndex = index + 1;
-        var BindField = getBind(realIndex);
-        return /*#__PURE__*/React.createElement(Cell, {
-          span: 12,
-          key: realIndex
-        }, /*#__PURE__*/React.createElement(BindField, null, function (bindIndex) {
-          return children({
-            Bind: BindField,
-            field: field,
-            bind: {
-              index: bindIndex,
-              field: bindField
-            },
-            index: realIndex
-          });
-        }));
-      }), bindField.validation.isValid === false && /*#__PURE__*/React.createElement(Cell, {
-        span: 12
-      }, /*#__PURE__*/React.createElement(FormElementMessage, {
-        error: true
-      }, bindField.validation.message)), /*#__PURE__*/React.createElement(Cell, {
+const defaultAddItem = () => {
+  // No op.
+};
+const DynamicSection = ({
+  field,
+  getBind,
+  children,
+  showLabel = true,
+  emptyValue = "",
+  onAddItem = defaultAddItem,
+  gridClassName,
+  ...props
+}) => {
+  const Bind = getBind();
+  const settings = getMultiValueRendererSettings(field);
+  const addValueButtonLabel = props.addValueButtonLabel ?? settings.addValueButtonLabel ?? "Add Value";
+  return /*#__PURE__*/ /* First we mount the top level field, for example: "items" */React.createElement(Bind, null, bindField => {
+    /**
+     * "value" -> an array of items
+     * "appendValue" -> a callback to add a new value to the top level "items" array
+     */
+    const {
+      value,
+      appendValue
+    } = bindField;
+    const bindFieldValue = value || [];
+    return /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(ParentFieldProvider, {
+      value: value,
+      path: Bind.parentName
+    }, showLabel ? /*#__PURE__*/React.createElement("div", {
+      className: "wby-pb-md wby-mb-md wby-border-b-sm wby-border-neutral-dimmed"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6,
+      className: "webiny_group-label-text"
+    }, `${field.label} ${bindFieldValue.length ? `(${bindFieldValue.length})` : ""}`), field.helpText && /*#__PURE__*/React.createElement(FormComponentDescription, {
+      text: field.helpText
+    })) : null, /*#__PURE__*/React.createElement(Grid, {
+      className: classSet(gridClassName, style.gridContainer)
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, bindFieldValue.map((_, index) => {
+      const BindField = getBind(index);
+      return /*#__PURE__*/React.createElement(Grid.Column, {
         span: 12,
-        className: style.addButton
-      }, /*#__PURE__*/React.createElement(ButtonDefault, {
-        disabled: bindFieldValue[0] === undefined,
-        onClick: function onClick() {
-          return appendValue(emptyValue);
-        }
-      }, /*#__PURE__*/React.createElement(ButtonIcon, {
-        icon: /*#__PURE__*/React.createElement(AddIcon, null)
-      }), t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Add value"]))))));
-    })
-  );
+        key: index
+      }, /*#__PURE__*/React.createElement(BindField, null, bindProps => /*#__PURE__*/React.createElement(BindField.ValidationContainer, null, /*#__PURE__*/React.createElement(ParentValueIndexProvider, {
+        index: index
+      }, children({
+        Bind: BindField,
+        field,
+        bind: {
+          index: bindProps,
+          field: bindField
+        },
+        index
+      })))));
+    })), /*#__PURE__*/React.createElement(React.Fragment, null, bindField.validation.isValid === false && /*#__PURE__*/React.createElement(Grid.Column, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+      invalid: true,
+      text: bindField.validation.message
+    }))), /*#__PURE__*/React.createElement(Grid.Column, {
+      span: 12
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn(bindFieldValue.length > 0 ? "wby-pt-none" : "wby-pt-sm")
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: "tertiary",
+      icon: /*#__PURE__*/React.createElement(AddIcon, null),
+      text: t(addValueButtonLabel),
+      onClick: () => {
+        appendValue(emptyValue);
+        onAddItem(bindFieldValue.length);
+      }
+    }))))));
+  });
 };
+export default DynamicSection;
 
-export default DynamicSection;
+//# sourceMappingURL=DynamicSection.js.map

package/admin/plugins/fieldRenderers/DynamicSection.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","classSet","css","i18n","ReactComponent","AddIcon","ParentFieldProvider","ParentValueIndexProvider","getMultiValueRendererSettings","Button","cn","FormComponentDescription","FormComponentErrorMessage","Grid","Heading","t","ns","style","gridContainer","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","defaultAddItem","DynamicSection","field","getBind","children","showLabel","emptyValue","onAddItem","gridClassName","props","Bind","settings","addValueButtonLabel","createElement","bindField","value","appendValue","bindFieldValue","ValidationContainer","path","parentName","className","level","label","length","helpText","text","Fragment","_","index","BindField","Column","span","key","bindProps","bind","validation","isValid","invalid","message","variant","icon","onClick"],"sources":["DynamicSection.tsx"],"sourcesContent":["import React from \"react\";\nimport classSet from \"classnames\";\nimport { css } from \"@emotion/css\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport type { GetBindCallable } from \"~/admin/components/ContentEntryForm/useBind\";\nimport { ParentFieldProvider } from \"~/admin/hooks\";\nimport { ParentValueIndexProvider } from \"~/admin/components/ModelFieldProvider\";\nimport type { BindComponent, BindComponentRenderProp, CmsModelField } from \"~/types\";\nimport { getMultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings\";\nimport {\n    Button,\n    cn,\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    Grid,\n    Heading\n} from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst style = {\n    gridContainer: css`\n        padding: 0 !important;\n    `\n};\n\nexport interface DynamicSectionPropsChildrenParams {\n    Bind: BindComponent;\n    field: CmsModelField;\n    bind: {\n        index: BindComponentRenderProp;\n        field: BindComponentRenderProp;\n    };\n    index: number;\n}\n\nexport interface DynamicSectionProps {\n    field: CmsModelField;\n    getBind: GetBindCallable;\n    showLabel?: boolean;\n    children: (params: DynamicSectionPropsChildrenParams) => JSX.Element;\n    emptyValue?: any;\n    gridClassName?: string;\n    onAddItem?: (index: number) => void;\n    addValueButtonLabel?: string;\n}\n\nconst defaultAddItem = () => {\n    // No op.\n};\n\nconst DynamicSection = ({\n    field,\n    getBind,\n    children,\n    showLabel = true,\n    emptyValue = \"\",\n    onAddItem = defaultAddItem,\n    gridClassName,\n    ...props\n}: DynamicSectionProps) => {\n    const Bind = getBind();\n\n    const settings = getMultiValueRendererSettings(field);\n    const addValueButtonLabel =\n        props.addValueButtonLabel ?? settings.addValueButtonLabel ?? \"Add Value\";\n\n    return (\n        /* First we mount the top level field, for example: \"items\" */\n        <Bind>\n            {bindField => {\n                /**\n                 * \"value\" -> an array of items\n                 * \"appendValue\" -> a callback to add a new value to the top level \"items\" array\n                 */\n                const { value, appendValue } = bindField;\n\n                const bindFieldValue: string[] = value || [];\n\n                return (\n                    <Bind.ValidationContainer>\n                        <ParentFieldProvider value={value} path={Bind.parentName}>\n                            {showLabel ? (\n                                <div\n                                    className={\n                                        \"wby-pb-md wby-mb-md wby-border-b-sm wby-border-neutral-dimmed\"\n                                    }\n                                >\n                                    <Heading level={6} className={\"webiny_group-label-text\"}>\n                                        {`${field.label} ${\n                                            bindFieldValue.length\n                                                ? `(${bindFieldValue.length})`\n                                                : \"\"\n                                        }`}\n                                    </Heading>\n                                    {field.helpText && (\n                                        <FormComponentDescription text={field.helpText} />\n                                    )}\n                                </div>\n                            ) : null}\n                            <Grid className={classSet(gridClassName, style.gridContainer)}>\n                                <>\n                                    {bindFieldValue.map((_, index) => {\n                                        const BindField = getBind(index);\n                                        return (\n                                            <Grid.Column span={12} key={index}>\n                                                <BindField>\n                                                    {bindProps => (\n                                                        <BindField.ValidationContainer>\n                                                            <ParentValueIndexProvider index={index}>\n                                                                {children({\n                                                                    Bind: BindField,\n                                                                    field,\n                                                                    bind: {\n                                                                        index: bindProps,\n                                                                        field: bindField\n                                                                    },\n                                                                    index\n                                                                })}\n                                                            </ParentValueIndexProvider>\n                                                        </BindField.ValidationContainer>\n                                                    )}\n                                                </BindField>\n                                            </Grid.Column>\n                                        );\n                                    })}\n                                </>\n                                <>\n                                    {bindField.validation.isValid === false && (\n                                        <Grid.Column span={12}>\n                                            <FormComponentErrorMessage\n                                                invalid\n                                                text={bindField.validation.message}\n                                            />\n                                        </Grid.Column>\n                                    )}\n                                </>\n                                <Grid.Column span={12}>\n                                    <div\n                                        className={cn(\n                                            bindFieldValue.length > 0 ? \"wby-pt-none\" : \"wby-pt-sm\"\n                                        )}\n                                    >\n                                        <Button\n                                            variant={\"tertiary\"}\n                                            icon={<AddIcon />}\n                                            text={t(addValueButtonLabel)}\n                                            onClick={() => {\n                                                appendValue(emptyValue);\n                                                onAddItem(bindFieldValue.length);\n                                            }}\n                                        />\n                                    </div>\n                                </Grid.Column>\n                            </Grid>\n                        </ParentFieldProvider>\n                    </Bind.ValidationContainer>\n                );\n            }}\n        </Bind>\n    );\n};\n\nexport default DynamicSection;\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/MultiValueRendererSettings.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { CmsModelField, CmsModelFieldRendererSettingsProps } from "@webiny/app-headless-cms-common/types";
+interface IMultiValueRendererSettings {
+    addValueButtonLabel: string;
+}
+export declare const getMultiValueRendererSettings: (field: CmsModelField) => IMultiValueRendererSettings;
+export declare const MultiValueRendererSettings: ({ field }: CmsModelFieldRendererSettingsProps) => React.JSX.Element;
+export {};