@team-monolith/cds 1.122.4 → 1.122.6

package/dist/components/OverflowTooltip.js

@@ -41,8 +41,8 @@ export function OverflowTooltip(props) {
     };
     return (_jsx(Tooltip, Object.assign({ className: [overflowTooltipClasses.root, className].filter(Boolean).join(" "), open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, otherProps, { children: _jsx(OverflowDiv, { className: overflowTooltipClasses.overflow, css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen, children: props.text }) })));
 }
-const OverflowDiv = styled.div `
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+const OverflowDiv = styled.div `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;

package/dist/components/Pagination.js

@@ -36,60 +36,60 @@ export const Pagination = React.forwardRef(function Pagination(props, ref) {
                 : t("{{page}}페이지", { page });
         } })));
 });
-const StyledPagination = styled(MuiPagination)(({ theme }) => css `
-    &.MuiPagination-root {
-      & .MuiPagination-ul {
-        li {
-          width: 32px;
-          height: 32px;
-          margin-left: 4px;
-          margin-right: 4px;
-          button {
-            padding: 0;
-            margin: 0;
-          }
-        }
-      }
-      & .MuiPaginationItem-root {
-        ${HOVER(css `
-          background-color: ${theme.color.background.neutralAlt};
-        `)}
-      }
-      & .MuiPaginationItem-text {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        border-radius: 8px;
-        color: ${theme.color.foreground.neutralBase};
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 24px;
-        padding: 1px 7px;
-        margin: 0;
-      }
-      & .Mui-selected {
-        border: 2px solid ${theme.color.background.primary};
-        background-color: transparent;
-        color: ${theme.color.background.primary};
-        font-weight: 700;
-        ${HOVER(css `
-          background-color: transparent;
-        `)}
-      }
-      & .Mui-disabled {
-        background-color: transparent;
-        color: ${theme.color.foreground.neutralBaseDisabled};
-      }
-      & .Mui-disabled.Mui-selected {
-        border: 2px solid ${theme.color.background.primaryDisabled};
-        background-color: transparent;
-        color: ${theme.color.background.primaryDisabled};
-      }
-      & .MuiPaginationItem-ellipsis {
-        ${HOVER(css `
-          background-color: transparent;
-        `)}
-      }
-    }
+const StyledPagination = styled(MuiPagination)(({ theme }) => css `
+    &.MuiPagination-root {
+      & .MuiPagination-ul {
+        li {
+          width: 32px;
+          height: 32px;
+          margin-left: 4px;
+          margin-right: 4px;
+          button {
+            padding: 0;
+            margin: 0;
+          }
+        }
+      }
+      & .MuiPaginationItem-root {
+        ${HOVER(css `
+          background-color: ${theme.color.background.neutralAlt};
+        `)}
+      }
+      & .MuiPaginationItem-text {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        border-radius: 8px;
+        color: ${theme.color.foreground.neutralBase};
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 24px;
+        padding: 1px 7px;
+        margin: 0;
+      }
+      & .Mui-selected {
+        border: 2px solid ${theme.color.background.primary};
+        background-color: transparent;
+        color: ${theme.color.background.primary};
+        font-weight: 700;
+        ${HOVER(css `
+          background-color: transparent;
+        `)}
+      }
+      & .Mui-disabled {
+        background-color: transparent;
+        color: ${theme.color.foreground.neutralBaseDisabled};
+      }
+      & .Mui-disabled.Mui-selected {
+        border: 2px solid ${theme.color.background.primaryDisabled};
+        background-color: transparent;
+        color: ${theme.color.background.primaryDisabled};
+      }
+      & .MuiPaginationItem-ellipsis {
+        ${HOVER(css `
+          background-color: transparent;
+        `)}
+      }
+    }
   `);

package/dist/components/PinInput.js

@@ -23,58 +23,58 @@ export const pinInputClasses = {
     hint: "PinInput-hint",
 };
 const SIZE_TO_STYLES = (size) => ({
-    small: css `
-      width: 36px;
+    small: css `
+      width: 36px;
     `,
-    medium: css `
-      width: 48px;
+    medium: css `
+      width: 48px;
     `,
-    large: css `
-      width: 56px;
+    large: css `
+      width: 56px;
     `,
 })[size];
 const COLOR_TO_HINT_STYLES = (theme, color, disabled) => disabled
-    ? css `
-        color: ${theme.color.foreground.neutralBaseDisabled};
+    ? css `
+        color: ${theme.color.foreground.neutralBaseDisabled};
       `
     : {
-        default: css `
-          color: ${theme.color.foreground.neutralBaseDisabled};
+        default: css `
+          color: ${theme.color.foreground.neutralBaseDisabled};
         `,
-        activePrimary: css `
-          color: ${theme.color.foreground.neutralBaseDisabled};
+        activePrimary: css `
+          color: ${theme.color.foreground.neutralBaseDisabled};
         `,
-        activeDanger: css `
-          color: ${theme.color.foreground.danger};
+        activeDanger: css `
+          color: ${theme.color.foreground.danger};
         `,
-        activeSuccess: css `
-          color: ${theme.color.foreground.success};
+        activeSuccess: css `
+          color: ${theme.color.foreground.success};
         `,
     }[color];
 const SIZE_TO_FONT_STYLES = (size) => ({
-    small: css `
-      font-size: 14px;
-      line-height: 20px;
-      svg {
-        width: 16px;
-        height: 16px;
-      }
+    small: css `
+      font-size: 14px;
+      line-height: 20px;
+      svg {
+        width: 16px;
+        height: 16px;
+      }
     `,
-    medium: css `
-      font-size: 16px;
-      line-height: 24px;
-      svg {
-        width: 16px;
-        height: 16px;
-      }
+    medium: css `
+      font-size: 16px;
+      line-height: 24px;
+      svg {
+        width: 16px;
+        height: 16px;
+      }
     `,
-    large: css `
-      font-size: 18px;
-      line-height: 28px;
-      svg {
-        width: 18px;
-        height: 18px;
-      }
+    large: css `
+      font-size: 18px;
+      line-height: 28px;
+      svg {
+        width: 18px;
+        height: 18px;
+      }
     `,
 })[size];
 /** i번째 값을 value로 바꾸는 setState Wrapper 함수  */
@@ -157,36 +157,36 @@ function PinInputComponent(props) {
                 },
             }, fullWidth: true, value: value }, i))) }));
 }
-const PinInputWrapper = styled.span `
-  display: inline-flex;
-  flex-direction: column;
-  gap: 8px;
-  ${({ size }) => SIZE_TO_FONT_STYLES(size)}
+const PinInputWrapper = styled.span `
+  display: inline-flex;
+  flex-direction: column;
+  gap: 8px;
+  ${({ size }) => SIZE_TO_FONT_STYLES(size)}
 `;
-const PinInputContainer = styled.span `
-  display: inline-flex;
-  gap: 8px;
+const PinInputContainer = styled.span `
+  display: inline-flex;
+  gap: 8px;
 `;
-const SqaureInput = styled(InputBase) `
-  ${({ size }) => SIZE_TO_STYLES(size)}
-  padding-left: 0;
-  padding-right: 0;
-  input {
-    text-align: center;
-  }
+const SqaureInput = styled(InputBase) `
+  ${({ size }) => SIZE_TO_STYLES(size)}
+  padding-left: 0;
+  padding-right: 0;
+  input {
+    text-align: center;
+  }
 `;
-const Hint = styled.div(({ theme, color, disabled }) => css `
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    ${COLOR_TO_HINT_STYLES(theme, color, disabled)};
+const Hint = styled.div(({ theme, color, disabled }) => css `
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    ${COLOR_TO_HINT_STYLES(theme, color, disabled)};
   `);
-const Label = styled.label `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+const Label = styled.label `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   ${({ theme, disabled }) => disabled &&
-    css `
-      color: ${theme.color.foreground.neutralBaseDisabled};
-    `}
+    css `
+      color: ${theme.color.foreground.neutralBaseDisabled};
+    `}
 `;

package/dist/components/Popover.js

@@ -14,35 +14,35 @@ export const Popover = React.forwardRef(function Popover(props, ref) {
     const { className, headline, content, icon, button } = props;
     return (_jsxs(Container, { ref: ref, className: [popoverClasses.root, className].filter(Boolean).join(" "), children: [icon && _jsx(Icon, { className: popoverClasses.icon, children: icon }), _jsxs(ContentArea, { className: popoverClasses.contentArea, children: [headline && (_jsx(Headline, { className: popoverClasses.headline, children: headline })), content && (_jsx(Content, { className: popoverClasses.content, children: content }))] }), button] }));
 });
-const Container = styled.div(({ theme }) => css `
-    display: inline-flex;
-    align-items: center;
-    width: auto;
-    padding: 6px 16px;
-    gap: 12px;
-    border-radius: 100px;
-    background-color: ${theme.color.foreground.neutralBase};
-    color: ${theme.color.background.neutralBase};
-    box-shadow: ${shadows.shadow32};
+const Container = styled.div(({ theme }) => css `
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+    padding: 6px 16px;
+    gap: 12px;
+    border-radius: 100px;
+    background-color: ${theme.color.foreground.neutralBase};
+    color: ${theme.color.background.neutralBase};
+    box-shadow: ${shadows.shadow32};
   `);
-const Icon = styled.div `
-  display: block;
-  width: 20px;
-  height: 20px;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
+const Icon = styled.div `
+  display: block;
+  width: 20px;
+  height: 20px;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
 `;
-const ContentArea = styled.div `
-  flex: 1 0 auto;
-  font-size: 14px;
-  line-height: 20px;
+const ContentArea = styled.div `
+  flex: 1 0 auto;
+  font-size: 14px;
+  line-height: 20px;
 `;
-const Headline = styled.div `
-  margin-bottom: 2px;
-  font-weight: 700;
+const Headline = styled.div `
+  margin-bottom: 2px;
+  font-weight: 700;
 `;
-const Content = styled.div `
-  font-weight: 400;
+const Content = styled.div `
+  font-weight: 400;
 `;

package/dist/components/RadioInput.js

@@ -21,54 +21,54 @@ export const radioInputClasses = {
     label: "RadioInput-label",
 };
 const TYPE_TO_ICON_STYLE = (theme, type, disabled) => ({
-    default: css `
-      path {
-        stroke: ${theme.color.background.neutralAltActive};
-        fill: ${theme.color.background.neutralBase};
-      }
+    default: css `
+      path {
+        stroke: ${theme.color.background.neutralAltActive};
+        fill: ${theme.color.background.neutralBase};
+      }
       ${disabled
-        ? css `
-            path {
-              stroke: ${theme.color.foreground.neutralBaseDisabled};
-              fill: ${theme.color.background.neutralBaseDisabled};
-            }
+        ? css `
+            path {
+              stroke: ${theme.color.foreground.neutralBaseDisabled};
+              fill: ${theme.color.background.neutralBaseDisabled};
+            }
           `
-        : css `
-            input[type="radio"]:hover + & {
-              path {
-                stroke: ${theme.color.background.primary};
-              }
-            }
-          `}
+        : css `
+            input[type="radio"]:hover + & {
+              path {
+                stroke: ${theme.color.background.primary};
+              }
+            }
+          `}
     `,
-    selected: css `
-      path {
-        stroke: ${theme.color.background.primary};
-        fill: ${theme.color.background.neutralBase};
-      }
-      rect {
-        fill: ${theme.color.background.primary};
-      }
+    selected: css `
+      path {
+        stroke: ${theme.color.background.primary};
+        fill: ${theme.color.background.neutralBase};
+      }
+      rect {
+        fill: ${theme.color.background.primary};
+      }
       ${disabled
-        ? css `
-            path {
-              stroke: ${theme.color.background.primaryDisabled};
-              fill: ${theme.color.background.neutralBaseDisabled};
-            }
-            rect {
-              fill: ${theme.color.background.primaryDisabled};
-            }
+        ? css `
+            path {
+              stroke: ${theme.color.background.primaryDisabled};
+              fill: ${theme.color.background.neutralBaseDisabled};
+            }
+            rect {
+              fill: ${theme.color.background.primaryDisabled};
+            }
           `
-        : css `
-            input[type="radio"]:hover + & {
-              path {
-                stroke: ${theme.color.background.primaryActive};
-              }
-              rect {
-                fill: ${theme.color.background.primaryActive};
-              }
-            }
-          `}
+        : css `
+            input[type="radio"]:hover + & {
+              path {
+                stroke: ${theme.color.background.primaryActive};
+              }
+              rect {
+                fill: ${theme.color.background.primaryActive};
+              }
+            }
+          `}
     `,
 })[type];
 /**
@@ -86,8 +86,8 @@ export const RadioInput = React.forwardRef(function RadioInput(props, ref) {
         onChange,
         inputProps,
     };
-    return (_jsxs(Label, Object.assign({ className: [radioInputClasses.root, className].filter(Boolean).join(" "), ref: ref, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, other, { children: [_jsx(RadioButton, Object.assign({ className: radioInputClasses.radio }, radioProps)), _jsx("span", { className: radioInputClasses.label, css: css `
-          margin-left: 8px;
+    return (_jsxs(Label, Object.assign({ className: [radioInputClasses.root, className].filter(Boolean).join(" "), ref: ref, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, other, { children: [_jsx(RadioButton, Object.assign({ className: radioInputClasses.radio }, radioProps)), _jsx("span", { className: radioInputClasses.label, css: css `
+          margin-left: 8px;
         `, children: label })] })));
 });
 const RadioButton = React.forwardRef(function RadioButton(props, ref) {
@@ -95,38 +95,38 @@ const RadioButton = React.forwardRef(function RadioButton(props, ref) {
     const type = props.checked ? "selected" : "default";
     return (_jsxs(RadioButtonContainer, Object.assign({ className: className, spacer: spacer, disabled: disabled, ref: ref }, other, { children: [_jsx(StyledInput, Object.assign({ type: "radio" }, inputProps, { checked: checked, disabled: disabled, onChange: onChange })), _jsx(RadioButtonIcon, { type: type, disabled: disabled })] })));
 });
-const Label = styled.label `
-  display: flex;
-  position: relative;
-  width: fit-content;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 16px;
+const Label = styled.label `
+  display: flex;
+  position: relative;
+  width: fit-content;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
   color: ${({ theme, disabled }) => disabled
     ? theme.color.foreground.neutralBaseDisabled
-    : theme.color.foreground.neutralBase};
-  align-self: center;
+    : theme.color.foreground.neutralBase};
+  align-self: center;
 `;
-const RadioButtonContainer = styled.span(({ spacer, disabled }) => css `
-    display: inline-flex;
-    position: relative;
-    width: 16px;
-    height: 16px;
-    cursor: ${disabled ? "default" : "pointer"};
-    margin-bottom: ${spacer ? "8px" : "0"};
+const RadioButtonContainer = styled.span(({ spacer, disabled }) => css `
+    display: inline-flex;
+    position: relative;
+    width: 16px;
+    height: 16px;
+    cursor: ${disabled ? "default" : "pointer"};
+    margin-bottom: ${spacer ? "8px" : "0"};
   `);
-const StyledInput = styled.input `
-  cursor: inherit;
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  padding: 0;
-  // input 컴포넌트는 보이지 않지만, 클릭이 가능하게 z-index를 설정합니다.
-  z-index: ${ZINDEX.inputBase};
+const StyledInput = styled.input `
+  cursor: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  // input 컴포넌트는 보이지 않지만, 클릭이 가능하게 z-index를 설정합니다.
+  z-index: ${ZINDEX.inputBase};
 `;
 // default와 selected 구조가 유사하여 하나의 컴포넌트로 표현합니다.
 const RadioButtonIcon = (props) => {

package/dist/components/Slider.js

@@ -31,62 +31,62 @@ export const Slider = React.forwardRef(function Slider(props, ref) {
             onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(value);
         } })));
 });
-const StyledSlider = styled(MuiSlider)(({ theme }) => css `
-    // figma 디자인과 간격 맞추기 위해 조정
-    padding: 7px 0;
-    // thumb 크기(SLIDER_THUMB_SIZE)의 절반만큼 좌우 여백 제외한 너비
-    width: calc(100% - ${SLIDER_THUMB_SIZE}px);
-    margin: 24px ${SLIDER_THUMB_SIZE / 2}px 0;
-    &.MuiSlider-marked {
-      margin-bottom: 20px;
-    }
-
-    .MuiSlider-rail {
-      border-radius: 100px;
-      background: ${theme.color.foreground.neutralBaseDisabled};
-      opacity: 1;
-    }
-    .MuiSlider-track {
-      border-radius: 100px;
-      background: ${theme.color.foreground.primary};
-    }
-    .MuiSlider-thumb {
-      width: ${SLIDER_THUMB_SIZE}px;
-      height: 18px;
-      border-radius: 23px;
-      border: 2px solid ${theme.color.foreground.neutralBaseDisabled};
-      background: ${theme.color.background.neutralBase};
-      /* Shadow-4 */
-      box-shadow: ${shadows.shadow04};
-
-      &:before {
-        box-shadow: none;
-      }
-
-      .MuiSlider-valueLabel {
-        background: transparent;
-        padding: 0;
-        color: ${theme.color.foreground.neutralBase};
-        /* Default/Label/16px-Eb */
-        font-family: Pretendard;
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 800;
-        line-height: 20px; /* 125% */
-        top: -6px; // figma 디자인과 간격 맞추기 위해 조정
-      }
-    }
-    .MuiSlider-mark {
-      display: none;
-    }
-    .MuiSlider-markLabel {
-      color: ${theme.color.foreground.neutralBaseDisabled};
-      /* Default/Label/12px-Md */
-      font-family: ${theme.fontFamily.ui};
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 16px; /* 133.333% */
-      top: 22px; // figma 디자인과 간격 맞추기 위해 조정
-    }
+const StyledSlider = styled(MuiSlider)(({ theme }) => css `
+    // figma 디자인과 간격 맞추기 위해 조정
+    padding: 7px 0;
+    // thumb 크기(SLIDER_THUMB_SIZE)의 절반만큼 좌우 여백 제외한 너비
+    width: calc(100% - ${SLIDER_THUMB_SIZE}px);
+    margin: 24px ${SLIDER_THUMB_SIZE / 2}px 0;
+    &.MuiSlider-marked {
+      margin-bottom: 20px;
+    }
+
+    .MuiSlider-rail {
+      border-radius: 100px;
+      background: ${theme.color.foreground.neutralBaseDisabled};
+      opacity: 1;
+    }
+    .MuiSlider-track {
+      border-radius: 100px;
+      background: ${theme.color.foreground.primary};
+    }
+    .MuiSlider-thumb {
+      width: ${SLIDER_THUMB_SIZE}px;
+      height: 18px;
+      border-radius: 23px;
+      border: 2px solid ${theme.color.foreground.neutralBaseDisabled};
+      background: ${theme.color.background.neutralBase};
+      /* Shadow-4 */
+      box-shadow: ${shadows.shadow04};
+
+      &:before {
+        box-shadow: none;
+      }
+
+      .MuiSlider-valueLabel {
+        background: transparent;
+        padding: 0;
+        color: ${theme.color.foreground.neutralBase};
+        /* Default/Label/16px-Eb */
+        font-family: Pretendard;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 800;
+        line-height: 20px; /* 125% */
+        top: -6px; // figma 디자인과 간격 맞추기 위해 조정
+      }
+    }
+    .MuiSlider-mark {
+      display: none;
+    }
+    .MuiSlider-markLabel {
+      color: ${theme.color.foreground.neutralBaseDisabled};
+      /* Default/Label/12px-Md */
+      font-family: ${theme.fontFamily.ui};
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 16px; /* 133.333% */
+      top: 22px; // figma 디자인과 간격 맞추기 위해 조정
+    }
   `);