pds-dev-kit-web 1.9.0-beta.9 → 1.9.1

package/README.md

@@ -8,5 +8,5 @@ publ design system 프로젝트
 
 ## 참고 문서
 
-해당 패키지 버전은 PDS 문서 1.8 버전을 따르고 있음
-[PDS 1.8 문서 링크](https://design.docs.publ.biz/pds-project/)
+해당 패키지 버전은 PDS 문서 1.9 버전을 따르고 있음
+[PDS 1.9 문서 링크](https://design.docs.publ.biz/pds-project/)

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/components/EditModeSectionMatcher/SectionBox.js

@@ -66,19 +66,26 @@ function SectionBox(_a) {
         setHasNoChild(false);
     }, [isEditing, children]);
     var onMouseEnter = function () {
+        if (hasNoChild) {
+            return;
+        }
         setIsHover(true);
     };
     var onClickSectionBox = function () {
+        if (hasNoChild) {
+            return;
+        }
         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,15 +96,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: ", ";\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: ", ";\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 ? 0 : 1);
-}, 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/storybook-static/0.f85c225d.iframe.bundle.d.ts

@@ -0,0 +1,3 @@
+export = warning;
+export = warning;
+declare function warning(): void;