@team-monolith/cds 1.123.1 → 1.125.0

package/dist/components/AlertDialog/AlertDialogTitle.js

@@ -31,39 +31,39 @@ export const AlertDialogTitle = React.forwardRef(function AlertDialogTitle(props
     const theme = useTheme();
     return (_jsx(_Fragment, { children: _jsxs(Component, Object.assign({}, other, { ref: ref, className: [alertDialogTitleClasses.root, className]
                 .filter(Boolean)
-                .join(" "), css: css `
-          grid-area: title;
-          font-family: ${theme.fontFamily.ui};
-          font-style: normal;
-          font-weight: 700;
-          font-size: 20px;
-          line-height: 28px; /* 140% */
-          letter-spacing: 0.25px;
-
-          color: ${theme.color.foreground.neutralBase};
-          text-align: center;
-
-          display: flex;
-          justify-content: space-between;
-        `, children: [_jsxs("div", { className: alertDialogTitleClasses.content, css: css `
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: flex-start;
-            gap: 16px;
-            text-align: left;
-          `, children: [icon && (_jsx("div", { className: alertDialogTitleClasses.icon, css: css `
-                display: none;
-                ${MOBILE(css `
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  color: ${theme.color.background.infoActive};
-
-                  svg {
-                    width: 32px;
-                    height: 32px;
-                  }
-                `)}
+                .join(" "), css: css `
+          grid-area: title;
+          font-family: ${theme.fontFamily.ui};
+          font-style: normal;
+          font-weight: 700;
+          font-size: 20px;
+          line-height: 28px; /* 140% */
+          letter-spacing: 0.25px;
+
+          color: ${theme.color.foreground.neutralBase};
+          text-align: center;
+
+          display: flex;
+          justify-content: space-between;
+        `, children: [_jsxs("div", { className: alertDialogTitleClasses.content, css: css `
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            gap: 16px;
+            text-align: left;
+          `, children: [icon && (_jsx("div", { className: alertDialogTitleClasses.icon, css: css `
+                display: none;
+                ${MOBILE(css `
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  color: ${theme.color.background.infoActive};
+
+                  svg {
+                    width: 32px;
+                    height: 32px;
+                  }
+                `)}
               `, children: icon })), children] }), onClose && (_jsx(SquareButton, { className: alertDialogTitleClasses.closeButton, color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, "aria-label": t("닫기", { context: "다이얼로그" }) }))] })) }));
 });

package/dist/components/AnimatedButton.js

@@ -6,28 +6,28 @@ export const animatedButtonClasses = {
     root: "AnimatedButton",
 };
 const DARK_BLACK_COLOR = "#202020";
-const getGradient = (baseColor, activeColor) => css `
-  background-image: repeating-linear-gradient(
-    -45deg,
-    ${baseColor} 0%,
-    ${baseColor} 20%,
-    ${activeColor} 20%,
-    ${activeColor} 25%,
-    ${baseColor} 25%,
-    ${baseColor} 30%,
-    ${activeColor} 30%,
-    ${activeColor} 40%,
-    ${baseColor} 40%,
-    ${baseColor} 60%,
-    ${activeColor} 60%,
-    ${activeColor} 70%,
-    ${baseColor} 70%,
-    ${baseColor} 75%,
-    ${activeColor} 75%,
-    ${activeColor} 80%,
-    ${baseColor} 80%,
-    ${baseColor} 100%
-  );
+const getGradient = (baseColor, activeColor) => css `
+  background-image: repeating-linear-gradient(
+    -45deg,
+    ${baseColor} 0%,
+    ${baseColor} 20%,
+    ${activeColor} 20%,
+    ${activeColor} 25%,
+    ${baseColor} 25%,
+    ${baseColor} 30%,
+    ${activeColor} 30%,
+    ${activeColor} 40%,
+    ${baseColor} 40%,
+    ${baseColor} 60%,
+    ${activeColor} 60%,
+    ${activeColor} 70%,
+    ${baseColor} 70%,
+    ${baseColor} 75%,
+    ${activeColor} 75%,
+    ${activeColor} 80%,
+    ${baseColor} 80%,
+    ${baseColor} 100%
+  );
 `;
 const COLOR_TO_BACKGROUND_IMAGE = (theme, color) => ({
     primary: getGradient(theme.color.background.primary, theme.color.background.primaryActive),
@@ -36,13 +36,13 @@ const COLOR_TO_BACKGROUND_IMAGE = (theme, color) => ({
     black: getGradient(theme.color.background.inverse, DARK_BLACK_COLOR),
     white: getGradient(theme.color.background.neutralBase, theme.color.background.neutralAltActive),
 })[color];
-const backgroundSlideAnimation = keyframes `
-  0% {
-    background-position: 400% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
+const backgroundSlideAnimation = keyframes `
+  0% {
+    background-position: 400% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
 `;
 /**
  * 반짝이는 애니메이션 효과가 적용된 Button 컴포넌트
@@ -55,9 +55,9 @@ export function AnimatedButton(props) {
             .join(" "), css: disabled || loading
             ? []
             : [
-                css `
-                background-size: 400% 100%;
-                animation: ${backgroundSlideAnimation} 8s linear infinite;
+                css `
+                background-size: 400% 100%;
+                animation: ${backgroundSlideAnimation} 8s linear infinite;
               `,
                 COLOR_TO_BACKGROUND_IMAGE(theme, color),
             ] })));

package/dist/components/Banner.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { CloseFillIcon } from "../icons";
 import { SquareButton } from "./SquareButton";
 import { Button } from "./Button";
@@ -60,62 +61,63 @@ export const Banner = React.forwardRef(function Banner(props, ref) {
     var _a;
     const { className, component: Component = "div", headline, content, icon, color, buttonLabel, onButtonClick, buttonProps, close, onClose, fullWidth } = props, other = __rest(props, ["className", "component", "headline", "content", "icon", "color", "buttonLabel", "onButtonClick", "buttonProps", "close", "onClose", "fullWidth"]);
     const theme = useTheme();
+    const { t } = useTranslation();
     return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: [bannerClasses.root, className].filter(Boolean).join(" "), css: [
-            css `
-          display: flex;
-          align-items: center;
-          padding: 0px 12px;
-          line-height: 125%;
-          background: ${COLOR_PALETTE(theme, color).background};
+            css `
+          display: flex;
+          align-items: center;
+          padding: 0px 12px;
+          line-height: 125%;
+          background: ${COLOR_PALETTE(theme, color).background};
         `,
             fullWidth
-                ? css `
-              width: 100%;
+                ? css `
+              width: 100%;
             `
-                : css `
-              border-radius: 12px;
-              width: fit-content;
+                : css `
+              border-radius: 12px;
+              width: fit-content;
             `,
-        ], children: [icon && (_jsx(Icon, { className: bannerClasses.icon, css: css `
-            align-self: ${headline && content ? "flex-start" : "center"};
-            color: ${COLOR_PALETTE(theme, color).headline};
-          `, children: icon })), _jsxs(TextContainer, { className: bannerClasses.textContainer, children: [headline && (_jsx(Headline, { className: bannerClasses.headline, css: css `
-              color: ${COLOR_PALETTE(theme, color).headline};
-            `, children: headline })), content && (_jsx(Content, { className: bannerClasses.content, css: css `
-              color: ${COLOR_PALETTE(theme, color).content};
+        ], children: [icon && (_jsx(Icon, { className: bannerClasses.icon, css: css `
+            align-self: ${headline && content ? "flex-start" : "center"};
+            color: ${COLOR_PALETTE(theme, color).headline};
+          `, children: icon })), _jsxs(TextContainer, { className: bannerClasses.textContainer, children: [headline && (_jsx(Headline, { className: bannerClasses.headline, css: css `
+              color: ${COLOR_PALETTE(theme, color).headline};
+            `, children: headline })), content && (_jsx(Content, { className: bannerClasses.content, css: css `
+              color: ${COLOR_PALETTE(theme, color).content};
             `, children: content }))] }), buttonLabel && (_jsx(Button, Object.assign({ className: bannerClasses.button, css: !buttonProps &&
-                    css `
-              color: ${COLOR_PALETTE(theme, color).content};
+                    css `
+              color: ${COLOR_PALETTE(theme, color).content};
             `, color: "textNeutral", size: "small", label: buttonLabel, onClick: onButtonClick }, buttonProps, { 
                 // component 속성이 없는 경우 제네릭 인자로 전달되는 타입을 확인하지 못하므로 component 속성 명시
-                component: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.component) !== null && _a !== void 0 ? _a : "button" }))), close && (_jsx(SquareButton, { className: bannerClasses.closeSquareButton, css: css `
-            color: ${COLOR_PALETTE(theme, color).content};
-          `, color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, "aria-label": "\uB2EB\uAE30" }))] })));
+                component: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.component) !== null && _a !== void 0 ? _a : "button" }))), close && (_jsx(SquareButton, { className: bannerClasses.closeSquareButton, css: css `
+            color: ${COLOR_PALETTE(theme, color).content};
+          `, color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, "aria-label": t("닫기", { context: "배너" }) }))] })));
 });
-const Icon = styled.div `
-  display: flex;
-  align-items: flex-start;
-  padding: 12px 0px;
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
+const Icon = styled.div `
+  display: flex;
+  align-items: flex-start;
+  padding: 12px 0px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
 `;
-const Headline = styled.div(({ theme }) => css `
-    font-family: ${theme.fontFamily.ui};
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 20px; /* 125% */
+const Headline = styled.div(({ theme }) => css `
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px; /* 125% */
   `);
 const Content = styled.div(({ theme }) => theme.typography.body2Regular);
-const TextContainer = styled.div `
-  flex: 1;
-
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 12px;
-  gap: 4px;
+const TextContainer = styled.div `
+  flex: 1;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 12px;
+  gap: 4px;
 `;

package/dist/components/Book/Book.js

@@ -99,198 +99,198 @@ export const Book = forwardRef(function Book(props, ref) {
             setOpen(false);
             onHoverEnd === null || onHoverEnd === void 0 ? void 0 : onHoverEnd();
         }, children: [_jsxs(Cover, { className: bookClasses.cover, css: onCoverClick &&
-                    css `
-            cursor: pointer;
+                    css `
+            cursor: pointer;
           `, variants: coverMotion, onClick: () => {
                     setOpen(!open);
                     onCoverClick === null || onCoverClick === void 0 ? void 0 : onCoverClick();
-                }, children: [icon && _jsx(CoverIcon, { className: bookClasses.coverIcon, children: icon }), isHidden && (_jsxs(_Fragment, { children: [_jsx(Hide, { className: bookClasses.hide }), _jsx(EyeOffFillIcon, { color: theme.color.foreground.neutralAlt, css: css `
-                position: absolute;
-                z-index: ${ZINDEX_HIDE};
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-                opacity: 0.8;
-              ` })] })), _jsxs(CoverTexts, { className: bookClasses.coverTexts, variants: buttons ? textMotion : undefined, children: [tagsProps && tagsProps.length > 0 && (_jsx("div", { css: css `
-                display: flex;
-                gap: 4px;
-                flex-wrap: wrap;
-              `, children: tagsProps.map((tagProps, index) => (_jsx(Tag, Object.assign({}, tagProps), index))) })), _jsx(Subtitle, { className: bookClasses.subtitle, children: subtitle }), _jsx(Subtitle, { className: bookClasses.subtitle, css: css `
-              font-weight: 800;
-            `, children: subtitleBold }), _jsx(CoverTitle, { className: bookClasses.coverTitle, showProgress: Boolean(progressInfo), children: title }), progressInfo && (_jsxs(Progress, { className: bookClasses.progress, children: [_jsx("div", { className: bookClasses.progressText, children: progressInfo.title }), _jsxs("div", { css: css `
-                  display: flex;
-                  justify-content: space-between;
-                  align-items: center;
-                `, children: [_jsx("div", { className: bookClasses.progressBase, css: css `
-                    overflow: hidden;
-                    width: 128px;
-                    height: 6px;
-                    border-radius: 3px;
-                  `, children: _jsx("div", { className: bookClasses.progressBar, css: css `
-                      width: ${progressInfo.value * 100}%;
-                      height: 6px;
-                    ` }) }), _jsxs("div", { className: bookClasses.progressText, css: css `
-                    width: 32px;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
+                }, children: [icon && _jsx(CoverIcon, { className: bookClasses.coverIcon, children: icon }), isHidden && (_jsxs(_Fragment, { children: [_jsx(Hide, { className: bookClasses.hide }), _jsx(EyeOffFillIcon, { color: theme.color.foreground.neutralAlt, css: css `
+                position: absolute;
+                z-index: ${ZINDEX_HIDE};
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                opacity: 0.8;
+              ` })] })), _jsxs(CoverTexts, { className: bookClasses.coverTexts, variants: buttons ? textMotion : undefined, children: [tagsProps && tagsProps.length > 0 && (_jsx("div", { css: css `
+                display: flex;
+                gap: 4px;
+                flex-wrap: wrap;
+              `, children: tagsProps.map((tagProps, index) => (_jsx(Tag, Object.assign({}, tagProps), index))) })), _jsx(Subtitle, { className: bookClasses.subtitle, children: subtitle }), _jsx(Subtitle, { className: bookClasses.subtitle, css: css `
+              font-weight: 800;
+            `, children: subtitleBold }), _jsx(CoverTitle, { className: bookClasses.coverTitle, showProgress: Boolean(progressInfo), children: title }), progressInfo && (_jsxs(Progress, { className: bookClasses.progress, children: [_jsx("div", { className: bookClasses.progressText, children: progressInfo.title }), _jsxs("div", { css: css `
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                `, children: [_jsx("div", { className: bookClasses.progressBase, css: css `
+                    overflow: hidden;
+                    width: 128px;
+                    height: 6px;
+                    border-radius: 3px;
+                  `, children: _jsx("div", { className: bookClasses.progressBar, css: css `
+                      width: ${progressInfo.value * 100}%;
+                      height: 6px;
+                    ` }) }), _jsxs("div", { className: bookClasses.progressText, css: css `
+                    width: 32px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
                   `, children: [Math.round(progressInfo.value * 100), "%"] })] })] }))] }), _jsx(BookGradient, {}), _jsx(Buttons, { className: bookClasses.buttons, variants: buttonsMotion, onClick: (e) => {
                             // Button 클릭 시에도 CoverClick 이벤트가 발생하지 않도록 막습니다.
                             e.stopPropagation();
                         }, children: buttons })] }), _jsx(Shelf, { className: bookClasses.shelf })] }));
 });
-const Container = styled(motion.div) `
-  position: relative;
-
-  width: 200px;
-  height: ${BOOK_HEIGHT + HOVER_Y_OFFSET + SHELF_HEIGHT + BOOK_SHELF_GAP}px;
-
-  padding-top: ${HOVER_Y_OFFSET}px;
+const Container = styled(motion.div) `
+  position: relative;
+
+  width: 200px;
+  height: ${BOOK_HEIGHT + HOVER_Y_OFFSET + SHELF_HEIGHT + BOOK_SHELF_GAP}px;
+
+  padding-top: ${HOVER_Y_OFFSET}px;
 `;
-const Cover = styled(motion.div) `
-  height: ${BOOK_HEIGHT}px;
-
-  border-radius: 8px;
-  box-shadow: ${shadows.shadow04};
-
-  display: flex;
-  flex-direction: row;
-  gap: 12px;
-  overflow: hidden;
-
-  position: relative;
-  bottom: 0px;
-  z-index: ${ZINDEX_COVER};
+const Cover = styled(motion.div) `
+  height: ${BOOK_HEIGHT}px;
+
+  border-radius: 8px;
+  box-shadow: ${shadows.shadow04};
+
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  overflow: hidden;
+
+  position: relative;
+  bottom: 0px;
+  z-index: ${ZINDEX_COVER};
 `;
-const CoverTexts = styled(motion.div) `
-  width: 100%;
-  height: 100%;
-  padding: 12px 12px 12px 24px;
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: ${ZINDEX_TEXT};
-
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+const CoverTexts = styled(motion.div) `
+  width: 100%;
+  height: 100%;
+  padding: 12px 12px 12px 24px;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: ${ZINDEX_TEXT};
+
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 `;
 const CoverTitle = styled("h1", {
     shouldForwardProp: (prop) => prop !== "showProgress",
-})(({ theme, showProgress }) => css `
-    word-wrap: break-word;
-    word-break: keep-all;
-
-    margin: auto 0 ${showProgress ? "4px" : "8px"} 0;
-    color: ${CARD_COLOR_PALETTE(theme).text};
-
-    /* Alt/Paragraph/16px-Eb */
-    font-family: ${theme.fontFamily.title};
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 800;
-    line-height: 24px;
-
-    /* multiline 말줄임말 적용 css */
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 7;
-    -webkit-box-orient: vertical;
+})(({ theme, showProgress }) => css `
+    word-wrap: break-word;
+    word-break: keep-all;
+
+    margin: auto 0 ${showProgress ? "4px" : "8px"} 0;
+    color: ${CARD_COLOR_PALETTE(theme).text};
+
+    /* Alt/Paragraph/16px-Eb */
+    font-family: ${theme.fontFamily.title};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 24px;
+
+    /* multiline 말줄임말 적용 css */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 7;
+    -webkit-box-orient: vertical;
   `);
-const BookGradient = styled.div `
-  width: 200px;
-  height: ${BOOK_HEIGHT}px;
-  background:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(0, 0, 0, 0.75) 100%
-    ),
-    linear-gradient(
-      90deg,
-      #999 0%,
-      #fbfbfb 2%,
-      #fbfbfb 4%,
-      #cdcdcd 6%,
-      #fbfbfb 10%,
-      #fbfbfb 100%
-    );
-  mix-blend-mode: multiply;
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-radius: 8px;
-  z-index: ${ZINDEX_COVER};
+const BookGradient = styled.div `
+  width: 200px;
+  height: ${BOOK_HEIGHT}px;
+  background:
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(0, 0, 0, 0.75) 100%
+    ),
+    linear-gradient(
+      90deg,
+      #999 0%,
+      #fbfbfb 2%,
+      #fbfbfb 4%,
+      #cdcdcd 6%,
+      #fbfbfb 10%,
+      #fbfbfb 100%
+    );
+  mix-blend-mode: multiply;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 8px;
+  z-index: ${ZINDEX_COVER};
 `;
-const Progress = styled.div(({ theme }) => css `
-    display: flex;
-    flex-direction: column;
-    height: 32px;
-
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+const Progress = styled.div(({ theme }) => css `
+    display: flex;
+    flex-direction: column;
+    height: 32px;
+
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
   `);
-const Buttons = styled(motion.div) `
-  display: flex;
-  gap: 8px;
-  width: 100%;
-  padding: 0 12px 0 24px;
-
-  position: absolute;
-  bottom: 12px;
-  z-index: ${ZINDEX_BUTTONS};
+const Buttons = styled(motion.div) `
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  padding: 0 12px 0 24px;
+
+  position: absolute;
+  bottom: 12px;
+  z-index: ${ZINDEX_BUTTONS};
 `;
-const Shelf = styled.div(({ theme }) => css `
-    height: ${SHELF_HEIGHT}px;
-    width: calc(100% + 32px);
-    border-radius: 4px;
-    background: ${theme.color.background.neutralAltActive};
-
-    position: absolute;
-    bottom: 0px;
-    left: -16px;
+const Shelf = styled.div(({ theme }) => css `
+    height: ${SHELF_HEIGHT}px;
+    width: calc(100% + 32px);
+    border-radius: 4px;
+    background: ${theme.color.background.neutralAltActive};
+
+    position: absolute;
+    bottom: 0px;
+    left: -16px;
   `);
-const Hide = styled.div(({ theme }) => css `
-    position: absolute;
-    left: 0;
-    top: 0;
-
-    width: 100%;
-    height: 100%;
-
-    background: ${theme.color.blanket.neutral};
-    border-radius: 8px;
-
-    z-index: ${ZINDEX_HIDE};
+const Hide = styled.div(({ theme }) => css `
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: ${theme.color.blanket.neutral};
+    border-radius: 8px;
+
+    z-index: ${ZINDEX_HIDE};
   `);
-const Subtitle = styled.div(({ theme }) => css `
-    color: ${CARD_COLOR_PALETTE(theme).text};
-
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+const Subtitle = styled.div(({ theme }) => css `
+    color: ${CARD_COLOR_PALETTE(theme).text};
+
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
   `);
-const CoverIcon = styled.div(({ theme }) => css `
-    position: absolute;
-    top: 50%;
-    left: 100px;
-    transform: translateY(-50%);
-
-    svg {
-      width: 120px;
-      height: 120px;
-      color: ${theme.color.blanket.neutral};
-    }
-
-    z-index: ${ZINDEX_ICON};
+const CoverIcon = styled.div(({ theme }) => css `
+    position: absolute;
+    top: 50%;
+    left: 100px;
+    transform: translateY(-50%);
+
+    svg {
+      width: 120px;
+      height: 120px;
+      color: ${theme.color.blanket.neutral};
+    }
+
+    z-index: ${ZINDEX_ICON};
   `);