pds-dev-kit-web 1.9.0-beta.8 → 1.9.0

package/dist/src/GlobalStyle.js

@@ -5,6 +5,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = require("styled-components");
-var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-jp.css');\n  \n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"], ["\n  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-jp.css');\n  \n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"])));
+var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-jp.css');\n  \n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-text-fill-color: ", " !important;\n  transition: background-color 9999s ease-in-out 0s !important;\n}\n"], ["\n  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-jp.css');\n  \n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-text-fill-color: ", " !important;\n  transition: background-color 9999s ease-in-out 0s !important;\n}\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_text_typed;
+});
 exports.default = GlobalStyle;
 var templateObject_1;

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

@@ -710,5 +710,6 @@
     "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",
-    "ui_editor_preview_editing": "sys_widget_status_active_01"
+    "ui_editor_preview_editing": "sys_widget_status_active_01",
+    "ui_cpnt_icon_sys_black": "sys_widget_black"
 }

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

@@ -1,5 +1,101 @@
 declare const colorSet: {
-    readonly PaletteColor_Dark: {
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+        grey30: string;
+        opacity95: string;
+        darkgrey30: string;
+        opacity40: string;
+        kakaoyellow: string;
+        pastelblue500: string;
+        pastelpink500: string;
+        pastelorange500: string;
+        pastelgreen500: string;
+        pastelpurple500: string;
+        darkpastelblue500: string;
+        darkpastelpink500: string;
+        darkpastelorange500: string;
+        darkpastelgreen500: string;
+        darkpastelpurple500: string;
+        green30: string;
+        darkgreen30: string;
+        orange50: string;
+        darkorange50: string;
+        orange30: string;
+        darkorange30: string;
+        green50: string;
+        darkgreen50: string;
+        opacity90: string;
+        facebookblue: string;
+        opacity05: string;
+        opacity15: string;
+        grey80: string;
+        grey200: string;
+        darkgrey80: string;
+        darkgrey200: string;
+        opacity70: string;
+        opacity60: string;
+        skyblue100: string;
+        green100: string;
+        darkgreen100: string;
+        darkskyblue100: string;
+        opacity25: string;
+        opacity35: string;
+        grey10: string;
+        darkgrey10: string;
+    };
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -266,103 +362,7 @@ declare const colorSet: {
         sys_component_base_pressed_transparent: string;
         sys_text_white_opacity_01: string;
     };
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-        grey30: string;
-        opacity95: string;
-        darkgrey30: string;
-        opacity40: string;
-        kakaoyellow: string;
-        pastelblue500: string;
-        pastelpink500: string;
-        pastelorange500: string;
-        pastelgreen500: string;
-        pastelpurple500: string;
-        darkpastelblue500: string;
-        darkpastelpink500: string;
-        darkpastelorange500: string;
-        darkpastelgreen500: string;
-        darkpastelpurple500: string;
-        green30: string;
-        darkgreen30: string;
-        orange50: string;
-        darkorange50: string;
-        orange30: string;
-        darkorange30: string;
-        green50: string;
-        darkgreen50: string;
-        opacity90: string;
-        facebookblue: string;
-        opacity05: string;
-        opacity15: string;
-        grey80: string;
-        grey200: string;
-        darkgrey80: string;
-        darkgrey200: string;
-        opacity70: string;
-        opacity60: string;
-        skyblue100: string;
-        green100: string;
-        darkgreen100: string;
-        darkskyblue100: string;
-        opacity25: string;
-        opacity35: string;
-        grey10: string;
-        darkgrey10: string;
-    };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -1342,6 +1342,7 @@ declare const colorSet: {
         ui_cpnt_reactionbutton_base_02: string;
         ui_create_ch_step_prev: string;
         ui_editor_preview_editing: string;
+        ui_cpnt_icon_sys_black: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     SemanticColor: SemanticColor_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

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

@@ -711,4 +711,5 @@ export interface UITheme {
     ui_cpnt_reactionbutton_base_02: string;
     ui_create_ch_step_prev: string;
     ui_editor_preview_editing: string;
+    ui_cpnt_icon_sys_black: 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, scrollDownTargetSectionId, editingSectionId, animationDelay, navigationHandler, 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, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, animationDelay = _a.animationDelay, navigationHandler = _a.navigationHandler, 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, { animationDelay: animationDelay !== null && animationDelay !== void 0 ? animationDelay : 150, editingSectionId: editingSectionId, 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,9 +1,8 @@
 /// <reference types="react" />
 import type { ISection } from '../../types';
-export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, animationDelay, onClickEditSection }: {
+export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, onClickEditSection }: {
     filteredSortedSection: ISection[];
     scrollDownTargetSectionId?: number;
     editingSectionId?: number;
-    animationDelay: 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, editingSectionId = _a.editingSectionId, animationDelay = _a.animationDelay, 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, { animationDelay: animationDelay, isEditing: editingSectionId === section.id, 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/SectionBox.d.ts

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

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

@@ -33,19 +33,19 @@ var desktop_1 = require("../../../../desktop");
 var useLazyUnmount_1 = require("../../hooks/useLazyUnmount");
 var OverlayBorders_1 = __importDefault(require("./OverlayBorders"));
 function SectionBox(_a) {
-    var scrollIntoThisSection = _a.scrollIntoThisSection, isEditing = _a.isEditing, children = _a.children, animationDelay = _a.animationDelay, 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 _c = (0, react_1.useState)(false), fadeOut = _c[0], setFadeout = _c[1];
     var _d = (0, react_1.useState)(false), hasNoChild = _d[0], setHasNoChild = _d[1];
-    var onMouseLeaveAsync = (0, useLazyUnmount_1.useLazyUnmount)({ doUnmount: function () { return setIsHover(false); } }, animationDelay);
+    var onMouseLeaveAsync = (0, useLazyUnmount_1.useLazyUnmount)({ doUnmount: function () { return setIsHover(false); } }, 150);
     var onClickDelayedAsync = (0, useLazyUnmount_1.useLazyUnmount)({
         doUnmount: function () {
             onClick();
             setFadeout(false);
         }
-    }, animationDelay);
+    }, 150);
     (0, react_1.useEffect)(function () {
         var _a;
         if (!sectionRef) {
@@ -70,15 +70,16 @@ function SectionBox(_a) {
     };
     var onClickSectionBox = function () {
         setFadeout(true);
+        setIsHover(false);
         onClickDelayedAsync();
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClickSectionBox, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeaveAsync, isEditing: isEditing },
-            isEditing && !hasNoChild && (react_1.default.createElement(S_Editing, { isMounting: true },
+            isEditing && !hasNoChild && (react_1.default.createElement(S_Editing, 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, { fadeOut: fadeOut },
+            !isEditing && (react_1.default.createElement(DimmedEditOverlay, { isHover: isHover, fadeOut: fadeOut },
                 react_1.default.createElement(S_EditButton, null,
                     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)));
@@ -89,12 +90,21 @@ var TopRightAbsoluteBox = styled_components_1.default.div(templateObject_1 || (t
     return theme.ui_editor_preview_editing;
 });
 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: ", ";\n  opacity: 0;\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: opacity 0.2s ease-out;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  animation: ", ";\n\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n"], ["\n  position: absolute;\n  background-color: ", ";\n  opacity: 0;\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: opacity 0.2s ease-out;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  animation: ", ";\n\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n"])), function (_a) {
+var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  animation: ", ";\n  background-color: ", ";\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  left: 0;\n\n  opacity: ", ";\n\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: opacity 0.2s ease-out;\n  z-index: 10;\n\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n"], ["\n  align-items: center;\n  animation: ", ";\n  background-color: ", ";\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  left: 0;\n\n  opacity: ", ";\n\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: opacity 0.2s ease-out;\n  z-index: 10;\n\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n"])), function (_a) {
+    var fadeOut = _a.fadeOut;
+    return fadeOut && 'fadeOut 0.2s ease-out';
+}, function (_a) {
     var theme = _a.theme;
     return theme.ui_pages_section_dimmed;
 }, function (_a) {
-    var fadeOut = _a.fadeOut;
-    return fadeOut && 'fadeOut 0.2s ease-out';
+    var isHover = _a.isHover, fadeOut = _a.fadeOut;
+    if (fadeOut) {
+        return 0;
+    }
+    if (isHover) {
+        return 1;
+    }
+    return 0;
 });
 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\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\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\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -172,7 +172,6 @@ export declare type DynamicLayoutProps = {
     sections: ISection[];
     scrollDownTargetSectionId?: number;
     editingSectionId?: number;
-    animationDelay?: number;
     navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
     onClickEditSection?: (section: ISection) => void;
 };

package/dist/storybook-static/{main.b3a48c0a.iframe.bundle.d.ts → main.4cccd23b.iframe.bundle.d.ts}

@@ -2,7 +2,7 @@ export = webpackContext;
 export = webpackContext;
 declare function webpackContext(req: any): any;
 declare namespace webpackContext {
-    export { keys, webpackContextResolve as resolve, id, __esModule, Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch, CircularProgress, Form, ThreeBarProgress, TextLabel, AdminListItemTransition, InputTransition, ButtonTransition, Section, sectionContext, dynamicLayoutContext, IconButton, scrollbarStyle, scrollbarWithPaddingStyle, Item, withFormProvider, theme, skeletonLoadingStyle, NavLink, Navs, ContextTextLabelNav, TextLabelNav, LayoutWF, WFContainersBox, LayoutWH, WHContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab, D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_SectionSheet, OverlayBorders as default, M_MainButton, M_TextLabel, M_TextButton, M_IconButton, ContextMenu, MainButton, fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme, themeByGivenTone, AdminList, AdminListHeader, AdminListItem, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, ImageSlide, LottieReactionButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopSideTab, UserDesktopTabBar, dialogOnAni, dialogOffAni, dialogOverlayOnAni, dialogOverlayOffAni, modalOnAni, modalOffAni, modalOverlayOnAni, modalOverlayOffAni, BasePathContext, samplePageIntroSection, samplePageContentsCarouselSection, samplePageIntroSection2, samplePageContentsSection, samplePageInfoBoxSection, samplePageIntroSection3, samplePageFooterSection, samplePage, ContentsContainer, GlobalMenuContainer, PageMenuContainer, TabMenuContainer, SubMenuContainer, formatCompactNumber, formatStandardNumber, ContainersBox, TextFieldBase, NavigationContainer, TabContainer, parameters, globalTypes, decorators, Col, Grid, Row, useDetectOverflow, usePrevious, MenuItemNav, getSearchExceptGivenName, Default, ChipDefault, SearchFieldDefault, DefaultCard, ImageCard, MobileAlertDialog, MobileHeaderBar, MobileTabBar, SectionMatcher, ContentsCarouselSection, useLazyUnmount, ContentsSection, FooterSection, InfoBoxSection, IntroSection, ToggleTone, StepContainer, WFA, WFB, WFC, WFD, WFE, WFF, WFG, WFH, WFI, WFJ, WFK, WFL, PageMenu, WizardPageMenu, TabMenu, LeftSubMenu, Step, WHA, WHB, WHC, WHD, WHE, PrimaryGlobalMenu, SecondaryGlobalMenu, WSA, WSB, WSC, WSD, WSE, WSF, WSG, WSH, GlobalMenu, WTA, WTB, WTC, WTD, WTE, WTF, WTG, WTH, WTI, WTJ, WTK, WTL, WTM, WTN, WTO, WTP, WTQ, WTS, WTT, WTU, TopPageMenu, LeftPageMenu, Popup, PopupProvider, iconStateColors, iconThemeColorLineColors, fadeIn, fadeOut, glow, scaleUp, scaleDown, scaleUpIncludeTranslate, scaleDownIncludeTranslate, gelatine, scaleBounceIn, scaleBounceIn02, scaleBounceOut, scaleBounceOut02, scaleBounceInIncludeTranslate, scaleBounceOutIncludeTranslate, scaleBounceInIncludeTranslate02, scaleBounceOutIncludeTranslate02, BrandLogo, PrimaryMenu, SecondaryMenu, UserProfile, ContextMenuNavs, ContextMenuItemNav, defaultValue, TEMPLATES_DATA, textStyles, iconFillTypeColors, iconStyleThemeColors, AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopHeadlessModal, SectionSheet, Single, Multi, Auto, readOnly, disabled, Low, Medium, High, Empty, TextFieldType, SelectType, SwitchType, MixType, DefaultBasicList, Image, Badge, Validate, MultiState, MultiRows, AutoState, AutoRows, TitleOnly, WithDescription, WithContent, Both, DefaultCardList, MultiCardList, Grey01, Primary, LongText, SellerTail, Seller, SubscriberTail, Subscriber, MyTail, My, WithImage, AllVariation, AllIcon, WithChatBubbleListItem, CategoryChoice, FilterSingle, FilterMulti, Removable, Label, Time, Information, DefaultContextMenu, ListContextMenu, DefaultContextMenuItem, TitleDefault, IconDefault, tBtn3TextDefault, StackDefault, LeftBtnDesktopHeaderBar, RightBtnDesktopHeaderBar, ComplexBtnDesktopHeaderBar, MainDefault, SubDefault, ContentDefault, LeftIconButton, OverrideUserProfile, ColorThemeTransparent, SingleSize, SingleState, SinglePreventBlankMode, SingleValidation, MultiSizeOnlyLarge, MultiValidation, AutoSizeOnlyLarge, AutoValidation, TextFieldForm, MultiTextFieldForm, EditApply_textfieldForm, DropdownForm, TextStringType, EditButton, List, Disabled, TextType, CountTypeFormatting, CountTypeNonFormatting, OnlyHintText, OnlyDefaultValue, HintAndDefaultValue, NoHintNoDefaultValue, All, SingleSizeIcon, SingleStateIcon, SingleColorTheme, TransparentColorTheme, ShortText, LongTextWithLineBreakTab, TextDefault, CenterNoneDefault, WFA_1, WFA_2, WFB_1, WFC_1, WFD_1, WFD_2, WFE_1, WFE_2, WFE_3, WFE_4, WFF_1, WFG_1, WFG_2, WFG_3, WFG_4, WFG_5, WFG_6, WFH_1, WFI_1, WFI_2, WFI_3, WFI_4, WFI_5, WFI_6, WFJ_1, WFK_1, WFL_1, WHA_1, WHB_1, WHB_2, WHB_3, WHB_4, WHB_5, WHB_6, WHC_1, WHD_1, WHD_2, WHD_3, WHD_4, WHD_5, WHD_6, WHE_1, WHE_2, WSA_1, WSB_1, WSB_2, WSC_1, WSD_1, WSE_1, WSF_1, WSF_2, WSF_3, WSF_4, WSF_5, WSF_6, WSF_7, WSG_1, WSG_2, WSG_3, WSG_4, WSG_5, WSH_1, WTA_1, WTA_2, WTA_3, WTB_1, WTC_1, WTD_1, WTD_2, WTD_3, WTD_4, WTD_5, WTD_6, WTE_1, WTF_1, WTF_2, WTF_3, WTF_4, WTF_5, WTF_6, WTG_1, WTH_1, WTH_2, WTH_3, WTI_1, WTI_2, WTJ_1, WTK_1, WTK_2, WTK_3, WTK_4, WTL_1, WTM_1, WTM_2, WTM_3, WTN_1, WTN_2, WTN_3, WTO_1, WTP_1, WTQ_1, WTS_1, WTS_2, WTT_1, WTT_2, WTU_1, UseCase1MoreInformation, UseCase1Community, UseCase2Thumbnail, BodyScrollDefault, BodyOverflowVisible, imageMainButtonCase, imageFocusCase, imageHeaderCase, imageHeaderFixedCase, UseCase1PostsSettingSection, AllLineIcon, AllFillIcon, LineIcon, FillIcon, AutoWidthResponsive, AutoWidth300, AutoWidth300NoImage400, AutoHeightResponsive, AutoHeight300, AutoHeight300NoImage400, AutoWidth300Height500, RatioResponsive, Ratio300, MultiAutoHeight, MultiAutoWidth, AllLottieIcon, OneLottieIcon, IconLongTextDefault, Profile, CaptionText, MFA_1, MFB_1, MFB_2, MFC_1, MFD_1, MFE_1, MFE_2, MFA, MFB, MFC, MFD, MFE, MMA_1, MMB_1, MMA, MMB, Navigation, MPA_1, MPB_1, MPC_1, MPC_2, MPD_1, MPE_1, MPF_1, MPF_2, MPA, MPB, MPC, MPD, MPE, MPF, Tab, MSA_1, MSA_2, MSB_1, MSC_1, MSC_2, MSD_1, MSE_1, MSF_1, MSF_2, MSG_1, MSH_1, MSA, MSB, MSC, MSD, MSE, MSF, MSG, MSH, TwoButton, ContentTextScrollDefault, Sample, EditModeSectionMatcher, YouTubeIframe, useUnmountStyle, TemplateA, TemplateB, D_TemplateA, Carousel, SectionTitle, SectionDescription, SectionImage, SectionButton, M_TemplateA, D_TemplateB, M_TemplateB, TemplateC, TemplateD, D_TemplateC, M_TemplateC, D_TemplateD, M_TemplateD, TemplateA_desktop, TemplateA_mobile, TemplateB_desktop, TemplateB_mobile, TemplateC_desktop, TemplateC_mobile, TemplateD_desktop, TemplateD_mobile };
+    export { keys, webpackContextResolve as resolve, id, __esModule, Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch, CircularProgress, Form, ThreeBarProgress, TextLabel, AdminListItemTransition, InputTransition, ButtonTransition, Section, sectionContext, dynamicLayoutContext, IconButton, scrollbarStyle, scrollbarWithPaddingStyle, Item, withFormProvider, theme, skeletonLoadingStyle, NavLink, Navs, ContextTextLabelNav, TextLabelNav, LayoutWF, WFContainersBox, LayoutWH, WHContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab, D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_SectionSheet, OverlayBorders as default, M_MainButton, M_TextLabel, M_TextButton, M_IconButton, ContextMenu, MainButton, fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme, themeByGivenTone, AdminList, AdminListHeader, AdminListItem, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, ImageSlide, LottieReactionButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopSideTab, UserDesktopTabBar, dialogOnAni, dialogOffAni, dialogOverlayOnAni, dialogOverlayOffAni, modalOnAni, modalOffAni, modalOverlayOnAni, modalOverlayOffAni, BasePathContext, samplePageIntroSection, samplePageContentsCarouselSection, samplePageIntroSection2, samplePageContentsSection, samplePageInfoBoxSection, samplePageIntroSection3, samplePageFooterSection, samplePage, ContentsContainer, GlobalMenuContainer, PageMenuContainer, TabMenuContainer, SubMenuContainer, formatCompactNumber, formatStandardNumber, ContainersBox, TextFieldBase, NavigationContainer, TabContainer, parameters, globalTypes, decorators, Col, Grid, Row, useDetectOverflow, usePrevious, MenuItemNav, getSearchExceptGivenName, Default, ChipDefault, SearchFieldDefault, DefaultCard, ImageCard, MobileAlertDialog, MobileHeaderBar, MobileTabBar, SectionMatcher, ContentsCarouselSection, useLazyUnmount, ContentsSection, FooterSection, InfoBoxSection, IntroSection, ToggleTone, StepContainer, WFA, WFB, WFC, WFD, WFE, WFF, WFG, WFH, WFI, WFJ, WFK, WFL, PageMenu, WizardPageMenu, TabMenu, LeftSubMenu, Step, WHA, WHB, WHC, WHD, WHE, PrimaryGlobalMenu, SecondaryGlobalMenu, WSA, WSB, WSC, WSD, WSE, WSF, WSG, WSH, GlobalMenu, WTA, WTB, WTC, WTD, WTE, WTF, WTG, WTH, WTI, WTJ, WTK, WTL, WTM, WTN, WTO, WTP, WTQ, WTS, WTT, WTU, TopPageMenu, LeftPageMenu, Popup, PopupProvider, iconStateColors, iconThemeColorLineColors, fadeIn, fadeOut, glow, scaleUp, scaleDown, scaleUpIncludeTranslate, scaleDownIncludeTranslate, gelatine, scaleBounceIn, scaleBounceIn02, scaleBounceOut, scaleBounceOut02, scaleBounceInIncludeTranslate, scaleBounceOutIncludeTranslate, scaleBounceInIncludeTranslate02, scaleBounceOutIncludeTranslate02, BrandLogo, PrimaryMenu, SecondaryMenu, UserProfile, ContextMenuNavs, ContextMenuItemNav, defaultValue, TEMPLATES_DATA, textStyles, iconFillTypeColors, iconStyleThemeColors, AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopHeadlessModal, SectionSheet, Single, Multi, Auto, readOnly, disabled, Low, Medium, High, Empty, TextFieldType, SelectType, SwitchType, MixType, DefaultBasicList, Image, Badge, Validate, MultiState, MultiRows, AutoState, AutoRows, TitleOnly, WithDescription, WithContent, Both, DefaultCardList, MultiCardList, Grey01, Primary, LongText, OtherAvatarImpact, OtherAvatar, OtherAvatarSub, Other, OtherSub, Me, MeSub, GreyColorChildrenTextLabel, BrandPrimaryColorChildrenTextLabel, TranslucentWhiteColorChildrenTextLabel, TranslucentBlackColorChildrenTextLabel, WithImage, AllVariation, AllIcon, WithChatBubbleListItem, CategoryChoice, FilterSingle, FilterMulti, Removable, Label, Time, Information, DefaultContextMenu, ListContextMenu, DefaultContextMenuItem, TitleDefault, IconDefault, tBtn3TextDefault, StackDefault, LeftBtnDesktopHeaderBar, RightBtnDesktopHeaderBar, ComplexBtnDesktopHeaderBar, MainDefault, SubDefault, ContentDefault, LeftIconButton, OverrideUserProfile, ColorThemeTransparent, SingleSize, SingleState, SinglePreventBlankMode, SingleValidation, MultiSizeOnlyLarge, MultiValidation, AutoSizeOnlyLarge, AutoValidation, TextFieldForm, MultiTextFieldForm, EditApply_textfieldForm, DropdownForm, TextStringType, EditButton, List, Disabled, TextType, CountTypeFormatting, CountTypeNonFormatting, OnlyHintText, OnlyDefaultValue, HintAndDefaultValue, NoHintNoDefaultValue, All, SingleSizeIcon, SingleStateIcon, SingleColorTheme, TransparentColorTheme, ShortText, LongTextWithLineBreakTab, TextDefault, CenterNoneDefault, WFA_1, WFA_2, WFB_1, WFC_1, WFD_1, WFD_2, WFE_1, WFE_2, WFE_3, WFE_4, WFF_1, WFG_1, WFG_2, WFG_3, WFG_4, WFG_5, WFG_6, WFH_1, WFI_1, WFI_2, WFI_3, WFI_4, WFI_5, WFI_6, WFJ_1, WFK_1, WFL_1, WHA_1, WHB_1, WHB_2, WHB_3, WHB_4, WHB_5, WHB_6, WHC_1, WHD_1, WHD_2, WHD_3, WHD_4, WHD_5, WHD_6, WHE_1, WHE_2, WSA_1, WSB_1, WSB_2, WSC_1, WSD_1, WSE_1, WSF_1, WSF_2, WSF_3, WSF_4, WSF_5, WSF_6, WSF_7, WSG_1, WSG_2, WSG_3, WSG_4, WSG_5, WSH_1, WTA_1, WTA_2, WTA_3, WTB_1, WTC_1, WTD_1, WTD_2, WTD_3, WTD_4, WTD_5, WTD_6, WTE_1, WTF_1, WTF_2, WTF_3, WTF_4, WTF_5, WTF_6, WTG_1, WTH_1, WTH_2, WTH_3, WTI_1, WTI_2, WTJ_1, WTK_1, WTK_2, WTK_3, WTK_4, WTL_1, WTM_1, WTM_2, WTM_3, WTN_1, WTN_2, WTN_3, WTO_1, WTP_1, WTQ_1, WTS_1, WTS_2, WTT_1, WTT_2, WTU_1, UseCase1MoreInformation, UseCase1Community, UseCase2Thumbnail, BodyScrollDefault, BodyOverflowVisible, imageMainButtonCase, imageFocusCase, imageHeaderCase, imageHeaderFixedCase, UseCase1PostsSettingSection, AllLineIcon, AllFillIcon, LineIcon, FillIcon, AutoWidthResponsive, AutoWidth300, AutoWidth300NoImage400, AutoHeightResponsive, AutoHeight300, AutoHeight300NoImage400, AutoWidth300Height500, RatioResponsive, Ratio300, MultiAutoHeight, MultiAutoWidth, AllLottieIcon, OneLottieIcon, IconLongTextDefault, Profile, CaptionText, MFA_1, MFB_1, MFB_2, MFC_1, MFD_1, MFE_1, MFE_2, MFA, MFB, MFC, MFD, MFE, MMA_1, MMB_1, MMA, MMB, Navigation, MPA_1, MPB_1, MPC_1, MPC_2, MPD_1, MPE_1, MPF_1, MPF_2, MPA, MPB, MPC, MPD, MPE, MPF, Tab, MSA_1, MSA_2, MSB_1, MSC_1, MSC_2, MSD_1, MSE_1, MSF_1, MSF_2, MSG_1, MSH_1, MSA, MSB, MSC, MSD, MSE, MSF, MSG, MSH, TwoButton, ContentTextScrollDefault, Sample, EditModeSectionMatcher, YouTubeIframe, useUnmountStyle, TemplateA, TemplateB, D_TemplateA, Carousel, SectionTitle, SectionDescription, SectionImage, SectionButton, M_TemplateA, D_TemplateB, M_TemplateB, TemplateC, TemplateD, D_TemplateC, M_TemplateC, D_TemplateD, M_TemplateD, TemplateA_desktop, TemplateA_mobile, TemplateB_desktop, TemplateB_mobile, TemplateC_desktop, TemplateC_mobile, TemplateD_desktop, TemplateD_mobile };
 }
 declare function keys(): string[];
 declare function webpackContextResolve(req: any): any;
@@ -1631,12 +1631,17 @@ declare var MultiCardList: any;
 declare var Grey01: any;
 declare var Primary: any;
 declare var LongText: any;
-declare var SellerTail: any;
-declare var Seller: any;
-declare var SubscriberTail: any;
-declare var Subscriber: any;
-declare var MyTail: any;
-declare var My: any;
+declare var OtherAvatarImpact: any;
+declare var OtherAvatar: any;
+declare var OtherAvatarSub: any;
+declare var Other: any;
+declare var OtherSub: any;
+declare var Me: any;
+declare var MeSub: any;
+declare var GreyColorChildrenTextLabel: any;
+declare var BrandPrimaryColorChildrenTextLabel: any;
+declare var TranslucentWhiteColorChildrenTextLabel: any;
+declare var TranslucentBlackColorChildrenTextLabel: any;
 declare var WithImage: any;
 declare var AllVariation: any;
 declare var AllIcon: any;