pds-dev-kit-web 1.9.0-beta.3 → 1.9.0-beta.4

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -256,5 +256,12 @@
     "sys_component_base_26": "grey30",
     "sys_component_base_27": "grey70",
     "sys_component_base_28": "darkgrey500",
-    "sys_widget_sidebar_label_text": "darkgrey500/opacity70"
+    "sys_widget_sidebar_label_text": "darkgrey500/opacity70",
+    "sys_component_base_hover_darktheme": "darkgrey80",
+    "sys_component_base_pressed_darktheme": "darkgrey200",
+    "sys_component_base_hover_white": "white/opacity05",
+    "sys_component_base_pressed_white": "white/opacity15",
+    "sys_component_base_hover_transparent": "darkgrey900/opacity25",
+    "sys_component_base_pressed_transparent": "darkgrey900/opacity35",
+    "sys_text_white_opacity_01": "white/opacity70"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -256,5 +256,12 @@
     "sys_component_base_26": "grey30",
     "sys_component_base_27": "grey70",
     "sys_component_base_28": "grey500",
-    "sys_widget_sidebar_label_text": "grey500/opacity70"
+    "sys_widget_sidebar_label_text": "grey500/opacity70",
+    "sys_component_base_hover_darktheme": "darkgrey80",
+    "sys_component_base_pressed_darktheme": "darkgrey200",
+    "sys_component_base_hover_white": "white/opacity05",
+    "sys_component_base_pressed_white": "white/opacity15",
+    "sys_component_base_hover_transparent": "darkgrey900/opacity25",
+    "sys_component_base_pressed_transparent": "darkgrey900/opacity35",
+    "sys_text_white_opacity_01": "white/opacity70"
 }

package/dist/src/common/styles/colorSet/SemanticColor.json

@@ -88,5 +88,7 @@
     "skyblue100": "#B2E7FF",
     "green100": "#91F9C8",
     "darkgreen100": "#91F3C5",
-    "darkskyblue100": "#A2DEF9"
+    "darkskyblue100": "#A2DEF9",
+    "opacity25": "40",
+    "opacity35": "59"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -492,7 +492,7 @@
     "ui_cpnt_dropdown_border_white_disabled": "sys_border_line_white_opacity50",
     "ui_cpnt_sheet_base_white_opacity00": "sys_component_base_white_opacity00",
     "ui_dimmed_01": "sys_background_dimmed_20",
-    "ui_cpnt_reactionbutton_base_01": "sys_component_base_07",
+    "ui_cpnt_reactionbutton_base_01": "sys_component_base_01",
     "ui_cpnt_textfield_border_disabled": "sys_border_line_07",
     "ui_cpnt_dropdown_border_disabled": "sys_border_line_07",
     "ui_cpnt_select_border_disabled": "sys_border_line_07",
@@ -697,5 +697,17 @@
     "ui_editor_preview_divice_area_border": "sys_border_line_02",
     "ui_editor_preview_background": "sys_component_base_06",
     "ui_editor_leftside_base": "sys_component_base_04",
-    "ui_cpnt_sidebar_label_text": "sys_widget_sidebar_label_text"
+    "ui_cpnt_sidebar_label_text": "sys_widget_sidebar_label_text",
+    "ui_cpnt_dropdown_base_hover_darktheme": "sys_component_base_hover_darktheme",
+    "ui_cpnt_dropdown_base_pressed_darktheme": "sys_component_base_pressed_darktheme",
+    "ui_cpnt_dropdown_base_hover_white": "sys_component_base_hover_white",
+    "ui_cpnt_dropdown_base_pressed_white": "sys_component_base_pressed_white",
+    "ui_cpnt_textfield_base_hover_darktheme": "sys_component_base_hover_darktheme",
+    "ui_cpnt_textfield_base_pressed_darktheme": "sys_component_base_pressed_darktheme",
+    "ui_cpnt_select_base_hover_darktheme": "sys_component_base_hover_darktheme",
+    "ui_cpnt_select_base_pressed_darktheme": "sys_component_base_pressed_darktheme",
+    "ui_cpnt_textfield_base_hover_transparent": "sys_component_base_hover_transparent",
+    "ui_cpnt_textfield_base_pressed_transparent": "sys_component_base_pressed_transparent",
+    "ui_cpnt_reactionbutton_base_02": "sys_component_base_03",
+    "ui_create_ch_step_prev": "sys_text_white_opacity_01"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -90,6 +90,8 @@ declare const colorSet: {
         green100: string;
         darkgreen100: string;
         darkskyblue100: string;
+        opacity25: string;
+        opacity35: string;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
@@ -350,6 +352,13 @@ declare const colorSet: {
         sys_component_base_27: string;
         sys_component_base_28: string;
         sys_widget_sidebar_label_text: string;
+        sys_component_base_hover_darktheme: string;
+        sys_component_base_pressed_darktheme: string;
+        sys_component_base_hover_white: string;
+        sys_component_base_pressed_white: string;
+        sys_component_base_hover_transparent: string;
+        sys_component_base_pressed_transparent: string;
+        sys_text_white_opacity_01: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -610,6 +619,13 @@ declare const colorSet: {
         sys_component_base_27: string;
         sys_component_base_28: string;
         sys_widget_sidebar_label_text: string;
+        sys_component_base_hover_darktheme: string;
+        sys_component_base_pressed_darktheme: string;
+        sys_component_base_hover_white: string;
+        sys_component_base_pressed_white: string;
+        sys_component_base_hover_transparent: string;
+        sys_component_base_pressed_transparent: string;
+        sys_text_white_opacity_01: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1311,6 +1327,18 @@ declare const colorSet: {
         ui_editor_preview_background: string;
         ui_editor_leftside_base: string;
         ui_cpnt_sidebar_label_text: string;
+        ui_cpnt_dropdown_base_hover_darktheme: string;
+        ui_cpnt_dropdown_base_pressed_darktheme: string;
+        ui_cpnt_dropdown_base_hover_white: string;
+        ui_cpnt_dropdown_base_pressed_white: string;
+        ui_cpnt_textfield_base_hover_darktheme: string;
+        ui_cpnt_textfield_base_pressed_darktheme: string;
+        ui_cpnt_select_base_hover_darktheme: string;
+        ui_cpnt_select_base_pressed_darktheme: string;
+        ui_cpnt_textfield_base_hover_transparent: string;
+        ui_cpnt_textfield_base_pressed_transparent: string;
+        ui_cpnt_reactionbutton_base_02: string;
+        ui_create_ch_step_prev: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -698,4 +698,16 @@ export interface UITheme {
     ui_editor_preview_background: string;
     ui_editor_leftside_base: string;
     ui_cpnt_sidebar_label_text: string;
+    ui_cpnt_dropdown_base_hover_darktheme: string;
+    ui_cpnt_dropdown_base_pressed_darktheme: string;
+    ui_cpnt_dropdown_base_hover_white: string;
+    ui_cpnt_dropdown_base_pressed_white: string;
+    ui_cpnt_textfield_base_hover_darktheme: string;
+    ui_cpnt_textfield_base_pressed_darktheme: string;
+    ui_cpnt_select_base_hover_darktheme: string;
+    ui_cpnt_select_base_pressed_darktheme: string;
+    ui_cpnt_textfield_base_hover_transparent: string;
+    ui_cpnt_textfield_base_pressed_transparent: string;
+    ui_cpnt_reactionbutton_base_02: string;
+    ui_create_ch_step_prev: string;
 }

package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, navigationHandler, scrollDownTargetSectionId, onClickEditSection }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, onClickEditSection }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

package/dist/src/sub/DynamicLayout/DynamicLayout.js

@@ -28,11 +28,11 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, onClickEditSection = _a.onClickEditSection;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, onClickEditSection = _a.onClickEditSection;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } },
-        mode === 'EDIT' && onClickEditSection && (react_1.default.createElement(EditModeSectionMatcher_1.EditModeSectionMatcher, { scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })),
+        mode === 'EDIT' && onClickEditSection && (react_1.default.createElement(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })),
         mode !== 'EDIT' &&
             filteredSortedSection.map(function (section) { return react_1.default.createElement(SectionMatcher_1.SectionMatcher, __assign({ key: section.id }, section)); })));
 }

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import type { ISection } from '../../types';
-export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, onClickEditSection }: {
+export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, onClickEditSection }: {
     filteredSortedSection: ISection[];
     scrollDownTargetSectionId?: number;
+    editingSectionId?: number;
     onClickEditSection: (section: ISection) => void;
 }): JSX.Element;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.js

@@ -18,8 +18,8 @@ var react_1 = __importDefault(require("react"));
 var SectionMatcher_1 = require("../SectionMatcher");
 var SectionBox_1 = __importDefault(require("./SectionBox"));
 function EditModeSectionMatcher(_a) {
-    var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, onClickEditSection = _a.onClickEditSection;
-    return (react_1.default.createElement(react_1.default.Fragment, null, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionBox_1.default, { scrollIntoThisSection: section.id === scrollDownTargetSectionId, key: section.id, onClick: function () { return onClickEditSection(section); } },
+    var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, onClickEditSection = _a.onClickEditSection;
+    return (react_1.default.createElement(react_1.default.Fragment, null, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionBox_1.default, { isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, key: section.id, onClick: function () { return onClickEditSection(section); } },
         react_1.default.createElement(SectionMatcher_1.SectionMatcher, __assign({ key: section.id }, section)))); })));
 }
 exports.default = EditModeSectionMatcher;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/OverlayBorders.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type Props = {
+    zIndex: number;
+};
+declare function OverlayBorders({ zIndex }: Props): JSX.Element;
+export default OverlayBorders;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/OverlayBorders.js

@@ -0,0 +1,49 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function OverlayBorders(_a) {
+    var zIndex = _a.zIndex;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Absolute_Border_Top, { zIndex: zIndex }),
+        react_1.default.createElement(Absolute_Border_Left, { zIndex: zIndex }),
+        react_1.default.createElement(Absolute_Border_Right, { zIndex: zIndex }),
+        react_1.default.createElement(Absolute_Border_Bottom, { zIndex: zIndex })));
+}
+exports.default = OverlayBorders;
+var Absolute_Border_Top = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  top: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  z-index: ", ";\n"], ["\n  top: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_base_pages;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var Absolute_Border_Left = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  left: 0;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  background-color: ", ";\n  z-index: ", ";\n"], ["\n  left: 0;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  background-color: ", ";\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_base_pages;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var Absolute_Border_Right = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  right: 0;\n  position: absolute;\n  height: 100%;\n  width: 4px;\n  background-color: ", ";\n  z-index: ", ";\n"], ["\n  right: 0;\n  position: absolute;\n  height: 100%;\n  width: 4px;\n  background-color: ", ";\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_base_pages;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var Absolute_Border_Bottom = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  bottom: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  z-index: ", ";\n"], ["\n  bottom: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_base_pages;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-export default function SectionBox({ scrollIntoThisSection, children, onClick }: {
+export default function SectionBox({ scrollIntoThisSection, isEditing, children, onClick }: {
     scrollIntoThisSection: boolean;
+    isEditing: boolean;
     children: React.ReactNode;
     onClick: () => void;
 }): JSX.Element;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.js

@@ -30,10 +30,14 @@ var react_1 = __importStar(require("react"));
 var react_i18next_1 = require("react-i18next");
 var styled_components_1 = __importDefault(require("styled-components"));
 var desktop_1 = require("../../../../desktop");
+var useLazyUnmount_1 = require("../../hooks/useLazyUnmount");
+var OverlayBorders_1 = __importDefault(require("./OverlayBorders"));
 function SectionBox(_a) {
-    var scrollIntoThisSection = _a.scrollIntoThisSection, children = _a.children, onClick = _a.onClick;
+    var scrollIntoThisSection = _a.scrollIntoThisSection, isEditing = _a.isEditing, children = _a.children, onClick = _a.onClick;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     var sectionRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(false), isHover = _b[0], setIsHover = _b[1];
+    var onMouseLeaveAsync = (0, useLazyUnmount_1.useLazyUnmount)({ doUnmount: function () { return setIsHover(false); } }, 200);
     (0, react_1.useEffect)(function () {
         var _a;
         if (!sectionRef) {
@@ -43,19 +47,30 @@ function SectionBox(_a) {
             (_a = sectionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
         }
     }, [scrollIntoThisSection]);
-    return (react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClick },
-        react_1.default.createElement(DimmedEditOverlay, null,
+    var onMouseEnter = function () {
+        setIsHover(true);
+    };
+    return (react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeaveAsync, isEditing: isEditing },
+        isEditing && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(OverlayBorders_1.default, { zIndex: 1 }),
+            react_1.default.createElement(TopRightAbsoluteBox, null,
+                react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4657'), styleTheme: "caption1Bold", colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" })))),
+        isHover && !isEditing && (react_1.default.createElement(DimmedEditOverlay, null,
             react_1.default.createElement(S_EditButton, null,
-                react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4653'), customFontSize: "20", colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" }))),
+                react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4653'), colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" })))),
         children));
 }
 exports.default = SectionBox;
-var S_SectionBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var DimmedEditOverlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  background-color: transparent;\n  z-index: 10;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.2s ease-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  background-color: transparent;\n  z-index: 10;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.2s ease-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var TopRightAbsoluteBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  top: 0;\n  right: 0;\n  position: absolute;\n  z-index: 4;\n  background-color: ", ";\n  padding: 8px 10px;\n"], ["\n  top: 0;\n  right: 0;\n  position: absolute;\n  z-index: 4;\n  background-color: ", ";\n  padding: 8px 10px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_base_pages;
+});
+var S_SectionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  background-color: transparent;\n  z-index: 10;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.2s ease-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  background-color: transparent;\n  z-index: 10;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.2s ease-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_pages_section_dimmed;
 });
-var S_EditButton = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  font-weight: bold;\n  height: 64px;\n  display: flex;\n  border-radius: 14px;\n  justify-content: center;\n  align-items: center;\n  padding: 0 ", ";\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"], ["\n  background-color: ", ";\n  font-weight: bold;\n  height: 64px;\n  display: flex;\n  border-radius: 14px;\n  justify-content: center;\n  align-items: center;\n  padding: 0 ", ";\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (_a) {
+var S_EditButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  font-weight: bold;\n  height: 56px;\n  display: flex;\n  border-radius: 14px;\n  justify-content: center;\n  align-items: center;\n  padding: 0 ", ";\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"], ["\n  background-color: ", ";\n  font-weight: bold;\n  height: 56px;\n  display: flex;\n  border-radius: 14px;\n  justify-content: center;\n  align-items: center;\n  padding: 0 ", ";\n  opacity: 0;\n  transition: opacity 0.2s ease-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_71;
 }, function (_a) {
@@ -68,4 +83,4 @@ var S_EditButton = styled_components_1.default.div(templateObject_3 || (template
     var theme = _a.theme;
     return theme.ui_73;
 }, DimmedEditOverlay);
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/sub/DynamicLayout/hooks/useLazyUnmount/index.d.ts

@@ -0,0 +1 @@
+export { default as useLazyUnmount } from './useLazyUnmount';

package/dist/src/sub/DynamicLayout/hooks/useLazyUnmount/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLazyUnmount = void 0;
+var useLazyUnmount_1 = require("./useLazyUnmount");
+Object.defineProperty(exports, "useLazyUnmount", { enumerable: true, get: function () { return __importDefault(useLazyUnmount_1).default; } });

package/dist/src/sub/DynamicLayout/hooks/useLazyUnmount/useLazyUnmount.d.ts

@@ -0,0 +1,5 @@
+declare type Options = {
+    doUnmount: () => void;
+};
+export default function useLazyUnmount({ doUnmount }: Options, delayTime: number): () => Promise<void>;
+export {};

package/dist/src/sub/DynamicLayout/hooks/useLazyUnmount/useLazyUnmount.js

@@ -0,0 +1,61 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// NOTE: promise의 delay time은 정확하지 않기때문에, transition 딜레이보다 짧게 가는것이 보기 좋습니다.
+function useLazyUnmount(_a, delayTime) {
+    var doUnmount = _a.doUnmount;
+    function lazyUnmountAsync() {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, new Promise(function (resolve) {
+                            setTimeout(function () {
+                                doUnmount();
+                                resolve(true);
+                            }, delayTime);
+                        })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    return lazyUnmountAsync;
+}
+exports.default = useLazyUnmount;

package/dist/src/sub/DynamicLayout/types.d.ts

@@ -170,8 +170,9 @@ export declare type DynamicLayoutProps = {
     /** @deprecated use 'mode' instead */
     isPreview?: boolean;
     sections: ISection[];
-    navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
     scrollDownTargetSectionId?: number;
+    editingSectionId?: number;
+    navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
     onClickEditSection?: (section: ISection) => void;
 };
 export {};

package/dist/storybook-static/{0.73af3e66.iframe.bundle.js → 0.8a8ae8fa.iframe.bundle.js}

@@ -1,4 +1,4 @@
-(window.webpackJsonp = window.webpackJsonp || []).push([[0], { 2192: function (module, exports) { var hasElementType = "undefined" != typeof Element, hasMap = "function" == typeof Map, hasSet = "function" == typeof Set, hasArrayBuffer = "function" == typeof ArrayBuffer && !!ArrayBuffer.isView; function equal(a, b) { if (a === b)
+(window.webpackJsonp = window.webpackJsonp || []).push([[0], { 2205: function (module, exports) { var hasElementType = "undefined" != typeof Element, hasMap = "function" == typeof Map, hasSet = "function" == typeof Set, hasArrayBuffer = "function" == typeof ArrayBuffer && !!ArrayBuffer.isView; function equal(a, b) { if (a === b)
             return !0; if (a && b && "object" == typeof a && "object" == typeof b) {
             if (a.constructor !== b.constructor)
                 return !1;
@@ -62,15 +62,15 @@
             if ((error.message || "").match(/stack|recursion/i))
                 return console.warn("react-fast-compare cannot handle circular refs"), !1;
             throw error;
-        } }; }, 2193: function (module, exports, __webpack_require__) {
+        } }; }, 2206: function (module, exports, __webpack_require__) {
             "use strict";
             var warning = function () { };
             module.exports = warning;
-        }, 689: function (module, __webpack_exports__, __webpack_require__) {
+        }, 697: function (module, __webpack_exports__, __webpack_require__) {
             "use strict";
             __webpack_require__.r(__webpack_exports__), __webpack_require__.d(__webpack_exports__, "WithTooltipPure", (function () { return WithTooltip_WithTooltipPure; })), __webpack_require__.d(__webpack_exports__, "WithToolTipState", (function () { return WithTooltip_WithToolTipState; })), __webpack_require__.d(__webpack_exports__, "WithTooltip", (function () { return WithTooltip_WithToolTipState; }));
-            __webpack_require__(16), __webpack_require__(44), __webpack_require__(26), __webpack_require__(7), __webpack_require__(19), __webpack_require__(12), __webpack_require__(10), __webpack_require__(21), __webpack_require__(15), __webpack_require__(17), __webpack_require__(9), __webpack_require__(30), __webpack_require__(18), __webpack_require__(53);
-            var react = __webpack_require__(0), react_default = __webpack_require__.n(react), esm = __webpack_require__(3), global_window = __webpack_require__(11), window_default = __webpack_require__.n(global_window), objectWithoutPropertiesLoose = __webpack_require__(116), esm_extends = __webpack_require__(23), inheritsLoose = __webpack_require__(59), react_dom = __webpack_require__(62), ManagerReferenceNodeContext = react.createContext(), ManagerReferenceNodeSetterContext = react.createContext();
+            __webpack_require__(16), __webpack_require__(45), __webpack_require__(26), __webpack_require__(7), __webpack_require__(19), __webpack_require__(12), __webpack_require__(10), __webpack_require__(21), __webpack_require__(15), __webpack_require__(17), __webpack_require__(9), __webpack_require__(30), __webpack_require__(18), __webpack_require__(54);
+            var react = __webpack_require__(0), react_default = __webpack_require__.n(react), esm = __webpack_require__(3), global_window = __webpack_require__(11), window_default = __webpack_require__.n(global_window), objectWithoutPropertiesLoose = __webpack_require__(117), esm_extends = __webpack_require__(23), inheritsLoose = __webpack_require__(60), react_dom = __webpack_require__(63), ManagerReferenceNodeContext = react.createContext(), ManagerReferenceNodeSetterContext = react.createContext();
             function Manager(_ref) { var children = _ref.children, _React$useState = react.useState(null), referenceNode = _React$useState[0], setReferenceNode = _React$useState[1], hasUnmounted = react.useRef(!1); react.useEffect((function () { return function () { hasUnmounted.current = !0; }; }), []); var handleSetReferenceNode = react.useCallback((function (node) { hasUnmounted.current || setReferenceNode(node); }), []); return react.createElement(ManagerReferenceNodeContext.Provider, { value: referenceNode }, react.createElement(ManagerReferenceNodeSetterContext.Provider, { value: handleSetReferenceNode }, children)); }
             var unwrapArray = function unwrapArray(arg) { return Array.isArray(arg) ? arg[0] : arg; }, safeInvoke = function safeInvoke(fn) { if ("function" == typeof fn) {
                 for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++)
@@ -227,12 +227,12 @@
                         } }, requiresIfExists: ["offset"] }, { name: "arrow", enabled: !0, phase: "main", fn: function arrow(_ref) { var _state$modifiersData$, state = _ref.state, name = _ref.name, options = _ref.options, arrowElement = state.elements.arrow, popperOffsets = state.modifiersData.popperOffsets, basePlacement = getBasePlacement(state.placement), axis = getMainAxisFromPlacement(basePlacement), len = [left, right].indexOf(basePlacement) >= 0 ? "height" : "width"; if (arrowElement && popperOffsets) {
                             var paddingObject = function toPaddingObject(padding, state) { return mergePaddingObject("number" != typeof (padding = "function" == typeof padding ? padding(Object.assign({}, state.rects, { placement: state.placement })) : padding) ? padding : expandToHashMap(padding, basePlacements)); }(options.padding, state), arrowRect = getLayoutRect(arrowElement), minProp = "y" === axis ? enums_top : left, maxProp = "y" === axis ? bottom : right, endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len], startDiff = popperOffsets[axis] - state.rects.reference[axis], arrowOffsetParent = getOffsetParent(arrowElement), clientSize = arrowOffsetParent ? "y" === axis ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0, centerToReference = endDiff / 2 - startDiff / 2, min = paddingObject[minProp], max = clientSize - arrowRect[len] - paddingObject[maxProp], center = clientSize / 2 - arrowRect[len] / 2 + centerToReference, offset = within(min, center, max), axisProp = axis;
                             state.modifiersData[name] = ((_state$modifiersData$ = {})[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
-                        } }, effect: function arrow_effect(_ref2) { var state = _ref2.state, _options$element = _ref2.options.element, arrowElement = void 0 === _options$element ? "[data-popper-arrow]" : _options$element; null != arrowElement && ("string" != typeof arrowElement || (arrowElement = state.elements.popper.querySelector(arrowElement))) && contains(state.elements.popper, arrowElement) && (state.elements.arrow = arrowElement); }, requires: ["popperOffsets"], requiresIfExists: ["preventOverflow"] }, { name: "hide", enabled: !0, phase: "main", requiresIfExists: ["preventOverflow"], fn: function hide(_ref) { var state = _ref.state, name = _ref.name, referenceRect = state.rects.reference, popperRect = state.rects.popper, preventedOffsets = state.modifiersData.preventOverflow, referenceOverflow = detectOverflow(state, { elementContext: "reference" }), popperAltOverflow = detectOverflow(state, { altBoundary: !0 }), referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect), popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets), isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets), hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); state.modifiersData[name] = { referenceClippingOffsets: referenceClippingOffsets, popperEscapeOffsets: popperEscapeOffsets, isReferenceHidden: isReferenceHidden, hasPopperEscaped: hasPopperEscaped }, state.attributes.popper = Object.assign({}, state.attributes.popper, { "data-popper-reference-hidden": isReferenceHidden, "data-popper-escaped": hasPopperEscaped }); } }] }), react_fast_compare = __webpack_require__(2192), react_fast_compare_default = __webpack_require__.n(react_fast_compare), EMPTY_MODIFIERS = [], NOOP = function NOOP() { }, NOOP_PROMISE = function NOOP_PROMISE() { return Promise.resolve(null); }, Popper_EMPTY_MODIFIERS = [];
+                        } }, effect: function arrow_effect(_ref2) { var state = _ref2.state, _options$element = _ref2.options.element, arrowElement = void 0 === _options$element ? "[data-popper-arrow]" : _options$element; null != arrowElement && ("string" != typeof arrowElement || (arrowElement = state.elements.popper.querySelector(arrowElement))) && contains(state.elements.popper, arrowElement) && (state.elements.arrow = arrowElement); }, requires: ["popperOffsets"], requiresIfExists: ["preventOverflow"] }, { name: "hide", enabled: !0, phase: "main", requiresIfExists: ["preventOverflow"], fn: function hide(_ref) { var state = _ref.state, name = _ref.name, referenceRect = state.rects.reference, popperRect = state.rects.popper, preventedOffsets = state.modifiersData.preventOverflow, referenceOverflow = detectOverflow(state, { elementContext: "reference" }), popperAltOverflow = detectOverflow(state, { altBoundary: !0 }), referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect), popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets), isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets), hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); state.modifiersData[name] = { referenceClippingOffsets: referenceClippingOffsets, popperEscapeOffsets: popperEscapeOffsets, isReferenceHidden: isReferenceHidden, hasPopperEscaped: hasPopperEscaped }, state.attributes.popper = Object.assign({}, state.attributes.popper, { "data-popper-reference-hidden": isReferenceHidden, "data-popper-escaped": hasPopperEscaped }); } }] }), react_fast_compare = __webpack_require__(2205), react_fast_compare_default = __webpack_require__.n(react_fast_compare), EMPTY_MODIFIERS = [], NOOP = function NOOP() { }, NOOP_PROMISE = function NOOP_PROMISE() { return Promise.resolve(null); }, Popper_EMPTY_MODIFIERS = [];
             function Popper(_ref) { var _ref$placement = _ref.placement, placement = void 0 === _ref$placement ? "bottom" : _ref$placement, _ref$strategy = _ref.strategy, strategy = void 0 === _ref$strategy ? "absolute" : _ref$strategy, _ref$modifiers = _ref.modifiers, modifiers = void 0 === _ref$modifiers ? Popper_EMPTY_MODIFIERS : _ref$modifiers, referenceElement = _ref.referenceElement, onFirstUpdate = _ref.onFirstUpdate, innerRef = _ref.innerRef, children = _ref.children, referenceNode = react.useContext(ManagerReferenceNodeContext), _React$useState = react.useState(null), popperElement = _React$useState[0], setPopperElement = _React$useState[1], _React$useState2 = react.useState(null), arrowElement = _React$useState2[0], setArrowElement = _React$useState2[1]; react.useEffect((function () { setRef(innerRef, popperElement); }), [innerRef, popperElement]); var options = react.useMemo((function () { return { placement: placement, strategy: strategy, onFirstUpdate: onFirstUpdate, modifiers: [].concat(modifiers, [{ name: "arrow", enabled: null != arrowElement, options: { element: arrowElement } }]) }; }), [placement, strategy, onFirstUpdate, modifiers, arrowElement]), _usePopper = function usePopper(referenceElement, popperElement, options) { void 0 === options && (options = {}); var prevOptions = react.useRef(null), optionsWithDefaults = { onFirstUpdate: options.onFirstUpdate, placement: options.placement || "bottom", strategy: options.strategy || "absolute", modifiers: options.modifiers || EMPTY_MODIFIERS }, _React$useState = react.useState({ styles: { popper: { position: optionsWithDefaults.strategy, left: "0", top: "0" }, arrow: { position: "absolute" } }, attributes: {} }), state = _React$useState[0], setState = _React$useState[1], updateStateModifier = react.useMemo((function () { return { name: "updateState", enabled: !0, phase: "write", fn: function fn(_ref) { var state = _ref.state, elements = Object.keys(state.elements); setState({ styles: fromEntries(elements.map((function (element) { return [element, state.styles[element] || {}]; }))), attributes: fromEntries(elements.map((function (element) { return [element, state.attributes[element]]; }))) }); }, requires: ["computeStyles"] }; }), []), popperOptions = react.useMemo((function () { var newOptions = { onFirstUpdate: optionsWithDefaults.onFirstUpdate, placement: optionsWithDefaults.placement, strategy: optionsWithDefaults.strategy, modifiers: [].concat(optionsWithDefaults.modifiers, [updateStateModifier, { name: "applyStyles", enabled: !1 }]) }; return react_fast_compare_default()(prevOptions.current, newOptions) ? prevOptions.current || newOptions : (prevOptions.current = newOptions, newOptions); }), [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]), popperInstanceRef = react.useRef(); return useIsomorphicLayoutEffect((function () { popperInstanceRef.current && popperInstanceRef.current.setOptions(popperOptions); }), [popperOptions]), useIsomorphicLayoutEffect((function () { if (null != referenceElement && null != popperElement) {
                 var popperInstance = (options.createPopper || popper_createPopper)(referenceElement, popperElement, popperOptions);
                 return popperInstanceRef.current = popperInstance, function () { popperInstance.destroy(), popperInstanceRef.current = null; };
             } }), [referenceElement, popperElement, options.createPopper]), { state: popperInstanceRef.current ? popperInstanceRef.current.state : null, styles: state.styles, attributes: state.attributes, update: popperInstanceRef.current ? popperInstanceRef.current.update : null, forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null }; }(referenceElement || referenceNode, popperElement, options), state = _usePopper.state, styles = _usePopper.styles, forceUpdate = _usePopper.forceUpdate, update = _usePopper.update, childrenProps = react.useMemo((function () { return { ref: setPopperElement, style: styles.popper, placement: state ? state.placement : placement, hasPopperEscaped: state && state.modifiersData.hide ? state.modifiersData.hide.hasPopperEscaped : null, isReferenceHidden: state && state.modifiersData.hide ? state.modifiersData.hide.isReferenceHidden : null, arrowProps: { style: styles.arrow, ref: setArrowElement }, forceUpdate: forceUpdate || NOOP, update: update || NOOP_PROMISE }; }), [setPopperElement, setArrowElement, placement, state, styles, update, forceUpdate]); return unwrapArray(children)(childrenProps); }
-            var warning = __webpack_require__(2193), warning_default = __webpack_require__.n(warning);
+            var warning = __webpack_require__(2206), warning_default = __webpack_require__.n(warning);
             function Reference(_ref) { var children = _ref.children, innerRef = _ref.innerRef, setReferenceNode = react.useContext(ManagerReferenceNodeSetterContext), refHandler = react.useCallback((function (node) { setRef(innerRef, node), safeInvoke(setReferenceNode, node); }), [innerRef, setReferenceNode]); return react.useEffect((function () { return function () { return setRef(innerRef, null); }; })), react.useEffect((function () { warning_default()(Boolean(setReferenceNode), "`Reference` should not be used outside of a `Manager` component."); }), [setReferenceNode]), unwrapArray(children)({ ref: refHandler }); }
             var TooltipContext = react_default.a.createContext({}), callAll = function callAll() { for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++)
                 fns[_key] = arguments[_key]; return function () { for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++)
@@ -258,7 +258,7 @@
                 style.transform = "translate3d(" + x + "px, " + y + "px, 0";
             } return react_default.a.createElement(react_popper_tooltip_Tooltip, Object(esm_extends.a)({ arrowProps: arrowProps, closeOnReferenceHidden: closeOnReferenceHidden, isReferenceHidden: isReferenceHidden, placement: placement, update: update, style: style, tooltip: tooltip, trigger: trigger, mutationObserverOptions: mutationObserverOptions }, { clearScheduled: _this2.clearScheduled, hideTooltip: _this2.hideTooltip, innerRef: ref })); })); return react_default.a.createElement(Manager, null, react_default.a.createElement(Reference, { innerRef: getTriggerRef }, (function (_ref4) { var ref = _ref4.ref; return children({ getTriggerProps: _this2.getTriggerProps, triggerRef: ref }); })), this.getState() && (usePortal ? Object(react_dom.createPortal)(popper, portalContainer) : popper)); }, _proto.isControlled = function isControlled() { return void 0 !== this.props.tooltipShown; }, _proto.getState = function getState() { return this.isControlled() ? this.props.tooltipShown : this.state.tooltipShown; }, _proto.isTriggeredBy = function isTriggeredBy(event) { var trigger = this.props.trigger; return trigger === event || Array.isArray(trigger) && trigger.includes(event); }, TooltipTrigger; }(react.Component);
             react_popper_tooltip_TooltipTrigger.defaultProps = { closeOnReferenceHidden: !0, defaultTooltipShown: !1, delayHide: 0, delayShow: 0, followCursor: !1, onVisibilityChange: function noop() { }, placement: "right", portalContainer: canUseDOM() ? document.body : null, trigger: "hover", usePortal: canUseDOM(), mutationObserverOptions: { childList: !0, subtree: !0 }, modifiers: [] };
-            var react_popper_tooltip = react_popper_tooltip_TooltipTrigger, memoizerific = (__webpack_require__(84), __webpack_require__(32), __webpack_require__(176), __webpack_require__(24), __webpack_require__(163)), memoizerific_default = __webpack_require__.n(memoizerific), utils = __webpack_require__(112);
+            var react_popper_tooltip = react_popper_tooltip_TooltipTrigger, memoizerific = (__webpack_require__(85), __webpack_require__(32), __webpack_require__(177), __webpack_require__(24), __webpack_require__(165)), memoizerific_default = __webpack_require__.n(memoizerific), utils = __webpack_require__(113);
             function _extends() { return _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) {
                 var source = arguments[i];
                 for (var key in source)