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

package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js

@@ -35,28 +35,25 @@ var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 var ChatBubble_1 = __importDefault(require("./ChatBubble"));
 var Popup_1 = require("./Popup");
-var ChatBubbleColorTheme = {
-    seller_tail: 'seller',
-    seller: 'seller',
-    subscriber_tail: 'subscriber',
-    subscriber: 'subscriber',
-    my_tail: 'my',
-    my: 'my'
+var chatBubbleTailType = {
+    other_avatar_impact: 'left_top',
+    other_avatar: 'left_top',
+    other_avatar_sub: 'none',
+    other: 'left_top',
+    other_sub: 'none',
+    me: 'right_top',
+    me_sub: 'none'
 };
-var ChatBubbleTailType = {
-    seller_tail: 'left_top',
-    seller: 'none',
-    subscriber_tail: 'left_top',
-    subscriber: 'none',
-    my_tail: 'right_top',
-    my: 'none'
+var profileImageBorderColorTheme = {
+    grey: 'ui_avatar_border',
+    brand_primary: 'ui_avatar_border_brandprimary',
+    translucent_white: 'ui_avatar_border_translucent_white',
+    translucent_black: 'ui_avatar_border_translucent_black'
 };
 function ChatBubbleListItem(_a) {
-    var titleText = _a.titleText, _b = _a.imageMode, imageMode = _b === void 0 ? 'use' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, _d = _a.styleTheme, styleTheme = _d === void 0 ? 'seller_tail' : _d, _e = _a.timeMode, timeMode = _e === void 0 ? 'use' : _e, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
-    var isMy = styleTheme.includes('my');
-    var isSeller = styleTheme.includes('seller');
-    var isTail = styleTheme.includes('tail');
-    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
+    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
+    var isMe = styleTheme.includes('me');
+    var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
     var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -82,24 +79,65 @@ function ChatBubbleListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
+    var isShowProfileImage = function () {
+        if (styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar') {
+            return true;
+        }
+        return false;
+    };
+    var isShowTitleText = function () {
+        if (styleTheme === 'other_avatar_impact' ||
+            styleTheme === 'other_avatar' ||
+            styleTheme === 'other') {
+            return true;
+        }
+        return false;
+    };
+    var checkTextColorTheme = function () {
+        switch (colorTheme) {
+            case 'grey': {
+                return 'sysTextPrimary';
+            }
+            case 'brand_primary': {
+                return 'usrTextBrandPrimary';
+            }
+            case 'translucent_white': {
+                return 'sysTextBlack';
+            }
+            case 'translucent_black': {
+                return 'sysTextWhite';
+            }
+            default: {
+                return 'sysTextPrimary';
+            }
+        }
+    };
+    var isLeftSpacingChecker = function () {
+        if (styleTheme === 'other_avatar_impact' ||
+            styleTheme === 'other_avatar' ||
+            styleTheme === 'other_avatar_sub') {
+            return true;
+        }
+        return false;
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMy: isMy, imageMode: imageMode },
-            imageMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null, isTail && !isMy ? (react_1.default.createElement(S_ImageViewWrapper, { isSeller: isSeller },
-                react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: isSeller ? 36 : 38 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
+        react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe },
+            isLeftSpacingChecker() ? (react_1.default.createElement(react_1.default.Fragment, null, isShowProfileImage() ? (react_1.default.createElement(S_ImageViewWrapper, { isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme },
+                react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })),
             react_1.default.createElement(S_RightBox, null,
-                isTail && !isMy && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: isSeller ? 'usrTextBrandPrimary' : 'sysTextPrimary' }),
+                isShowTitleText() && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }))),
                 react_1.default.createElement(S_ChatBubbleBox, null,
-                    react_1.default.createElement(S_ChatBubbleWrapper, { isMy: isMy },
-                        timeMode === 'use' && timeText && isMy && (react_1.default.createElement(S_TimeWrapper, null,
+                    react_1.default.createElement(S_ChatBubbleWrapper, { isMe: isMe },
+                        timeMode === 'use' && timeText && isMe && (react_1.default.createElement(S_TimeWrapper, null,
                             react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }),
                             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
-                        react_1.default.createElement(ChatBubble_1.default, { colorTheme: ChatBubbleColorTheme[styleTheme], tailType: ChatBubbleTailType[styleTheme] }, children),
-                        timeMode === 'use' && timeText && !isMy && (react_1.default.createElement(S_TimeWrapper, null,
+                        react_1.default.createElement(ChatBubble_1.default, { colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, children),
+                        timeMode === 'use' && timeText && !isMe && (react_1.default.createElement(S_TimeWrapper, null,
                             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
                             react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })))),
-                    hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
+                    hoverMode === 'use' && !isMe && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
                         react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))))),
             react_1.default.createElement(Popup_1.PopupProvider, null,
                 react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
@@ -109,41 +147,34 @@ var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (tem
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var NoImageChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: ", ";\n"], ["\n  margin-left: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
+var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n\n  ", ";\n"], ["\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n\n  ", ";\n"])), function (_a) {
+    var isMe = _a.isMe;
+    return isMe && MyChatBubbleListItem;
 });
-var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n\n  ", ";\n  ", ";\n"], ["\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n\n  ", ";\n  ", ";\n"])), function (_a) {
-    var isMy = _a.isMy;
-    return isMy && MyChatBubbleListItem;
-}, function (_a) {
-    var imageMode = _a.imageMode;
-    return imageMode === 'none' && NoImageChatBubbleListItem;
+var ImageViewBrandPrimary = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n"], ["\n  border: 2px solid\n    ", ";\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
 });
-var ImageViewSeller = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 2px solid ", ";\n"], ["\n  border: 2px solid ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_profile_image_border_brandprimary;
-});
-var ImageViewDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_profile_image_border;
+var ImageViewDefault = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n"], ["\n  border: 1px solid\n    ", ";\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
 });
-var S_ImageViewWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n  position: relative;\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n  position: relative;\n\n  ", ";\n"])), function (_a) {
+var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n  position: relative;\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n  position: relative;\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
-    var isSeller = _a.isSeller;
-    return (isSeller ? ImageViewSeller : ImageViewDefault);
+    var isOtherAvatarImpact = _a.isOtherAvatarImpact;
+    return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
 });
-var S_RightBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var S_ChatBubbleBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
-var MyChatBubble = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  justify-content: flex-end;\n"], ["\n  justify-content: flex-end;\n"])));
-var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n\n  ", ";\n"], ["\n  flex: 1;\n  display: flex;\n\n  ", ";\n"])), function (_a) {
-    var isMy = _a.isMy;
-    return isMy && MyChatBubble;
+var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var S_ChatBubbleBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+var MyChatBubble = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  justify-content: flex-end;\n"], ["\n  justify-content: flex-end;\n"])));
+var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n\n  ", ";\n"], ["\n  flex: 1;\n  display: flex;\n\n  ", ";\n"])), function (_a) {
+    var isMe = _a.isMe;
+    return isMe && MyChatBubble;
 });
-var S_TimeWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-self: flex-end;\n  display: flex;\n"], ["\n  align-self: flex-end;\n  display: flex;\n"])));
-var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  width: 48px;\n  height: 24px;\n  min-width: 48px;\n  padding-right: ", ";\n  margin-top: ", ";\n  position: relative;\n  opacity: ", ";\n  justify-content: right;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  width: 48px;\n  height: 24px;\n  min-width: 48px;\n  padding-right: ", ";\n  margin-top: ", ";\n  position: relative;\n  opacity: ", ";\n  justify-content: right;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
+var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-self: flex-end;\n  display: flex;\n"], ["\n  align-self: flex-end;\n  display: flex;\n"])));
+var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  width: 48px;\n  height: 24px;\n  min-width: 48px;\n  padding-right: ", ";\n  margin-top: ", ";\n  position: relative;\n  opacity: ", ";\n  justify-content: right;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  width: 48px;\n  height: 24px;\n  min-width: 48px;\n  padding-right: ", ";\n  margin-top: ", ";\n  position: relative;\n  opacity: ", ";\n  justify-content: right;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
@@ -157,4 +188,4 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (temp
     return hoverMode === 'use' && '1';
 });
 exports.default = ChatBubbleListItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/src/mobile/components/TextLabel/TextLabel.d.ts

@@ -5,7 +5,7 @@ export declare type TextLabelProps = {
     textAlign?: 'left' | 'center' | 'right';
     styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
     colorOverride?: UiColors;
-    colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
+    colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';
     lineLimit?: number;
@@ -22,7 +22,7 @@ export declare type TextStyleProps = {
     textAlign?: 'left' | 'center' | 'right';
     styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
     colorOverride?: UiColors;
-    colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
+    colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';
     lineLimit?: number;

package/dist/src/mobile/components/TextLabel/TextLabel.js

@@ -233,52 +233,56 @@ var sysTextWhite = (0, styled_components_1.css)(templateObject_22 || (templateOb
     var theme = _a.theme;
     return theme.ui_cpnt_textlabel_sys_white;
 });
-var sysTextError = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var sysTextBlack = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textlabel_sys_black;
+});
+var sysTextError = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textlabel_sys_error;
 });
-var sysTextWarning = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var sysTextWarning = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textlabel_sys_warning;
 });
-var sysTextBrandPrimary = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var sysTextBrandPrimary = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textlabel_sys_brandprimary;
 });
-var sysTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var sysTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textlabel_sys_brandseconvariant;
 });
-var usrTextBrandPrimary = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var usrTextBrandPrimary = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textlabel_usr_brandprimary;
 });
-var usrTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var usrTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textlabel_usr_brandseconvariant;
 });
-var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textlabel_usr_brandonprimary;
 });
-var customFontStyle = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: 1.5;\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: 1.5;\n  font-weight: ", ";\n"])), function (_a) {
+var customFontStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: 1.5;\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: 1.5;\n  font-weight: ", ";\n"])), function (_a) {
     var customFontSize = _a.customFontSize;
     return customFontSize;
 }, function (_a) {
     var theme = _a.theme, customFontWeight = _a.customFontWeight;
     return customFontWeight === 'bold' ? theme.fontWeight.bold : theme.fontWeight.normal;
 });
-var colorOverrideStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var colorOverrideStyle = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var colorOverride = _a.colorOverride, theme = _a.theme;
     return colorOverride && theme[colorOverride];
 });
-var ellipsisStyle = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_a) {
+var ellipsisStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_a) {
     var lineLimit = _a.lineLimit;
     return lineLimit;
 });
-var userSelectModeStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"])));
-var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    position: absolute;\n    left: 0;\n    width: 16px;\n  }\n"], ["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    position: absolute;\n    left: 0;\n    width: 16px;\n  }\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n  overflow-wrap: break-word;\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n  overflow-wrap: break-word;\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var userSelectModeStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"])));
+var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    position: absolute;\n    left: 0;\n    width: 16px;\n  }\n"], ["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    position: absolute;\n    left: 0;\n    width: 16px;\n  }\n"])));
+var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n  overflow-wrap: break-word;\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n  overflow-wrap: break-word;\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -324,6 +328,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_35 || (template
             sysTextSecondary: sysTextSecondary,
             sysTextTertiary: sysTextTertiary,
             sysTextWhite: sysTextWhite,
+            sysTextBlack: sysTextBlack,
             sysTextError: sysTextError,
             sysTextWarning: sysTextWarning,
             sysTextBrandPrimary: sysTextBrandPrimary,
@@ -360,7 +365,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_35 || (template
     var bulletPointMode = _a.bulletPointMode;
     return bulletPointMode === 'use' && bulletPointModeStyle;
 });
-var S_AfterTextBox = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n\n  ", ";\n"], ["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n\n  ", ";\n"])), function (_a) {
+var S_AfterTextBox = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n\n  ", ";\n"], ["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 }, function (_a) {
@@ -376,6 +381,6 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_36 || (templ
             return 'vertical-align: middle';
     }
 });
-var S_IconWrapper = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"])));
+var S_IconWrapper = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"])));
 exports.default = TextLabel;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38;

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, navigationHandler, onClickEditSection }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, animationDelay, 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, 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, animationDelay = _a.animationDelay, 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, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })),
+        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' &&
             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,8 +1,9 @@
 /// <reference types="react" />
 import type { ISection } from '../../types';
-export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, onClickEditSection }: {
+export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, animationDelay, 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, 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); } },
+    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); } },
         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,7 +1,8 @@
 import React from 'react';
-export default function SectionBox({ scrollIntoThisSection, isEditing, children, onClick }: {
+export default function SectionBox({ scrollIntoThisSection, isEditing, children, animationDelay, 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, onClick = _a.onClick;
+    var scrollIntoThisSection = _a.scrollIntoThisSection, isEditing = _a.isEditing, children = _a.children, animationDelay = _a.animationDelay, 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); } }, 150);
+    var onMouseLeaveAsync = (0, useLazyUnmount_1.useLazyUnmount)({ doUnmount: function () { return setIsHover(false); } }, animationDelay);
     var onClickDelayedAsync = (0, useLazyUnmount_1.useLazyUnmount)({
         doUnmount: function () {
             onClick();
             setFadeout(false);
         }
-    }, 150);
+    }, animationDelay);
     (0, react_1.useEffect)(function () {
         var _a;
         if (!sectionRef) {
@@ -61,7 +61,9 @@ function SectionBox(_a) {
         }
         if (sectionRef.current.getBoundingClientRect().height === 0) {
             setHasNoChild(true);
+            return;
         }
+        setHasNoChild(false);
     }, [isEditing, children]);
     var onMouseEnter = function () {
         setIsHover(true);

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

@@ -172,6 +172,7 @@ 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/{0.47127a3a.iframe.bundle.js → 0.f85c225d.iframe.bundle.js}

@@ -1,4 +1,4 @@
-(window.webpackJsonp = window.webpackJsonp || []).push([[0], { 2211: 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], { 2213: 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,11 +62,11 @@
             if ((error.message || "").match(/stack|recursion/i))
                 return console.warn("react-fast-compare cannot handle circular refs"), !1;
             throw error;
-        } }; }, 2212: function (module, exports, __webpack_require__) {
+        } }; }, 2214: function (module, exports, __webpack_require__) {
             "use strict";
             var warning = function () { };
             module.exports = warning;
-        }, 698: function (module, __webpack_exports__, __webpack_require__) {
+        }, 699: 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__(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);
@@ -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__(2211), 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__(2213), 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__(2212), warning_default = __webpack_require__.n(warning);
+            var warning = __webpack_require__(2214), 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++)