@team-monolith/cds 1.111.1 → 1.112.0

package/dist/components/Input.js

@@ -21,50 +21,50 @@ export const inputClasses = {
     hint: "Input-hint",
 };
 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};
         `,
-        base: css `
-          color: ${theme.color.foreground.neutralBaseDisabled};
+        base: 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];
 /**
@@ -81,27 +81,27 @@ export const Input = React.forwardRef(function Input(props, ref) {
 });
 const InputWrapper = styled("span", {
     shouldForwardProp: (prop) => prop !== "fullWidth",
-}) `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  ${({ size }) => SIZE_TO_FONT_STYLES(size)}
-  ${({ fullWidth }) => fullWidth && `width: 100%;`}
-
-  position: relative;
+}) `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  ${({ size }) => SIZE_TO_FONT_STYLES(size)}
+  ${({ fullWidth }) => fullWidth && `width: 100%;`}
+
+  position: relative;
 `;
-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};
+    `}
 `;
-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)};
   `);

package/dist/components/InputBase.js

@@ -16,79 +16,79 @@ export const inputBaseClasses = {
 // 이 컴포넌트는 multiline을 고려하여 height를 명시적으로 지정하지 않았습니다.
 const COLOR_TO_INPUT_STYLES = (theme, color, disabled) => {
     if (disabled) {
-        return css `
-      border: 2px solid ${theme.color.background.neutralAltActive};
-      background: ${theme.color.background.neutralAltDisabled};
-      color: ${theme.color.foreground.neutralBaseDisabled};
+        return css `
+      border: 2px solid ${theme.color.background.neutralAltActive};
+      background: ${theme.color.background.neutralAltDisabled};
+      color: ${theme.color.foreground.neutralBaseDisabled};
     `;
     }
     return {
-        default: css `
-      border: 2px solid ${theme.color.background.neutralAltActive};
-      background: ${theme.color.background.neutralAlt};
-      color: ${theme.color.foreground.neutralBase};
+        default: css `
+      border: 2px solid ${theme.color.background.neutralAltActive};
+      background: ${theme.color.background.neutralAlt};
+      color: ${theme.color.foreground.neutralBase};
     `,
-        base: css `
-      border: 2px solid transparent;
-      background: ${theme.color.background.neutralBase};
-      color: ${theme.color.foreground.neutralBase};
+        base: css `
+      border: 2px solid transparent;
+      background: ${theme.color.background.neutralBase};
+      color: ${theme.color.foreground.neutralBase};
     `,
-        activePrimary: css `
-      border: 2px solid ${theme.color.foreground.primary};
-      background: ${theme.color.background.neutralBase};
-      color: ${theme.color.foreground.neutralBase};
+        activePrimary: css `
+      border: 2px solid ${theme.color.foreground.primary};
+      background: ${theme.color.background.neutralBase};
+      color: ${theme.color.foreground.neutralBase};
     `,
-        activeDanger: css `
-      border: 2px solid ${theme.color.foreground.danger};
-      background: ${theme.color.background.neutralBase};
-      color: ${theme.color.foreground.neutralBase};
+        activeDanger: css `
+      border: 2px solid ${theme.color.foreground.danger};
+      background: ${theme.color.background.neutralBase};
+      color: ${theme.color.foreground.neutralBase};
     `,
-        activeSuccess: css `
-      border: 2px solid ${theme.color.foreground.success};
-      background: ${theme.color.background.neutralBase};
-      color: ${theme.color.foreground.neutralBase};
+        activeSuccess: css `
+      border: 2px solid ${theme.color.foreground.success};
+      background: ${theme.color.background.neutralBase};
+      color: ${theme.color.foreground.neutralBase};
     `,
     }[color];
 };
 // 아래 padding 값은 피그마와 조금 다릅니다.
 // 왜냐하면 border가 따로 크기가 계산되므로 제외했기 때문입니다.
 const SIZE_TO_STYLES = (size, fullWidth) => ({
-    small: css `
-      padding-top: 6px;
-      padding-bottom: 6px;
-      ${!fullWidth && "max-width: 300px"};
+    small: css `
+      padding-top: 6px;
+      padding-bottom: 6px;
+      ${!fullWidth && "max-width: 300px"};
     `,
-    medium: css `
-      padding-top: 10px;
-      padding-bottom: 10px;
-      ${!fullWidth && "max-width: 375px"};
+    medium: css `
+      padding-top: 10px;
+      padding-bottom: 10px;
+      ${!fullWidth && "max-width: 375px"};
     `,
-    large: css `
-      padding-top: 12px;
-      padding-bottom: 12px;
-      ${!fullWidth && "max-width: 375px"};
+    large: css `
+      padding-top: 12px;
+      padding-bottom: 12px;
+      ${!fullWidth && "max-width: 375px"};
     `,
 })[size];
 function InputComponent(props) {
     const { placeholder, disabled = false, defaultValue, value } = props;
     const theme = useTheme();
-    const style = css `
-    appearance: none;
-    flex: 1;
-    width: 0; // https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container
-    border: none;
-    padding: 0;
-    background-color: transparent;
-    font: inherit;
-    color: currentColor;
-    resize: none;
-
-    &:focus-visible {
-      outline: none;
-    }
-    &::placeholder {
-      color: ${theme.color.foreground.neutralBaseDisabled};
-    }
+    const style = css `
+    appearance: none;
+    flex: 1;
+    width: 0; // https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    font: inherit;
+    color: currentColor;
+    resize: none;
+
+    &:focus-visible {
+      outline: none;
+    }
+    &::placeholder {
+      color: ${theme.color.foreground.neutralBaseDisabled};
+    }
   `;
     // Type Safety 때문에 코드의 중복을 허용합니다.
     if (props.multiline) {
@@ -107,24 +107,24 @@ export function InputBase(props) {
 }
 const InputContainer = styled("div", {
     shouldForwardProp: (prop) => !["inputSize", "fullWidth"].includes(prop),
-})(({ theme, color, inputSize, disabled, fullWidth }) => css `
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    box-sizing: border-box;
-    padding: 14px 16px;
-    border-radius: 8px;
-    ${COLOR_TO_INPUT_STYLES(theme, color, disabled)}
-    ${SIZE_TO_STYLES(inputSize, fullWidth)}
-    ${fullWidth && `width: inherit;`} // InputWrapper의 width를 따릅니다.
+})(({ theme, color, inputSize, disabled, fullWidth }) => css `
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    box-sizing: border-box;
+    padding: 14px 16px;
+    border-radius: 8px;
+    ${COLOR_TO_INPUT_STYLES(theme, color, disabled)}
+    ${SIZE_TO_STYLES(inputSize, fullWidth)}
+    ${fullWidth && `width: inherit;`} // InputWrapper의 width를 따릅니다.
   `);
-const ClearButton = styled.button `
-  ${RESET_BUTTON}
-  color: currentColor;
-  &:not(:disabled) {
-    cursor: pointer;
-  }
-  display: flex;
-  align-items: center;
+const ClearButton = styled.button `
+  ${RESET_BUTTON}
+  color: currentColor;
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+  display: flex;
+  align-items: center;
 `;

package/dist/components/Modal.js

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { Modal as MuiModal, css } from "@mui/material";
-export const Modal = styled(MuiModal)(({ theme }) => css `
-    .MuiModal-backdrop {
-      background-color: ${theme.color.blanket.neutral};
-    }
+export const Modal = styled(MuiModal)(({ theme }) => css `
+    .MuiModal-backdrop {
+      background-color: ${theme.color.blanket.neutral};
+    }
   `);

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

@@ -32,60 +32,60 @@ export const Pagination = React.forwardRef(function Pagination(props, ref) {
             return `${page}페이지${selected ? " 선택됨" : ""}`;
         } })));
 });
-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;
 `;