@team-monolith/cds 1.125.0 → 1.126.0

package/dist/components/Tag.js

@@ -22,59 +22,59 @@ export const tagClasses = {
     closeButton: "Tag-closeButton",
 };
 const COLOR_TO_STYLE = (theme, color) => ({
-    default: css `
-      box-sizing: border-box;
-      background: ${theme.color.container.marbleContainer};
-      border: 1px solid ${theme.color.container.marbleOnContainer};
-      color: ${theme.color.container.marbleOnContainer};
+    default: css `
+      box-sizing: border-box;
+      background: ${theme.color.container.marbleContainer};
+      border: 1px solid ${theme.color.container.marbleOnContainer};
+      color: ${theme.color.container.marbleOnContainer};
     `,
-    red: css `
-      box-sizing: border-box;
-      background: ${theme.color.container.redContainer};
-      border: 1px solid ${theme.color.container.redOnContainer};
-      color: ${theme.color.container.redOnContainer};
+    red: css `
+      box-sizing: border-box;
+      background: ${theme.color.container.redContainer};
+      border: 1px solid ${theme.color.container.redOnContainer};
+      color: ${theme.color.container.redOnContainer};
     `,
-    teal: css `
-      box-sizing: border-box;
-      background: ${theme.color.container.tealContainer};
-      border: 1px solid ${theme.color.container.tealOnContainer};
-      color: ${theme.color.container.tealOnContainer};
+    teal: css `
+      box-sizing: border-box;
+      background: ${theme.color.container.tealContainer};
+      border: 1px solid ${theme.color.container.tealOnContainer};
+      color: ${theme.color.container.tealOnContainer};
     `,
-    orange: css `
-      box-sizing: border-box;
-      background: ${theme.color.container.orangeContainer};
-      border: 1px solid ${theme.color.container.orangeOnContainer};
-      color: ${theme.color.container.orangeOnContainer};
+    orange: css `
+      box-sizing: border-box;
+      background: ${theme.color.container.orangeContainer};
+      border: 1px solid ${theme.color.container.orangeOnContainer};
+      color: ${theme.color.container.orangeOnContainer};
     `,
-    blue: css `
-      box-sizing: border-box;
-      background: ${theme.color.container.blueContainer};
-      border: 1px solid ${theme.color.container.blueOnContainer};
-      color: ${theme.color.container.blueOnContainer};
+    blue: css `
+      box-sizing: border-box;
+      background: ${theme.color.container.blueContainer};
+      border: 1px solid ${theme.color.container.blueOnContainer};
+      color: ${theme.color.container.blueOnContainer};
     `,
-    green: css `
-      box-sizing: border-box;
-      background: ${theme.color.container.greenContainer};
-      border: 1px solid ${theme.color.container.greenOnContainer};
-      color: ${theme.color.container.greenOnContainer};
+    green: css `
+      box-sizing: border-box;
+      background: ${theme.color.container.greenContainer};
+      border: 1px solid ${theme.color.container.greenOnContainer};
+      color: ${theme.color.container.greenOnContainer};
     `,
-    yellow: css `
-      box-sizing: border-box;
-      background: ${theme.color.container.yellowContainer};
-      border: 1px solid ${theme.color.container.yellowOnContainer};
-      color: ${theme.color.container.yellowOnContainer};
+    yellow: css `
+      box-sizing: border-box;
+      background: ${theme.color.container.yellowContainer};
+      border: 1px solid ${theme.color.container.yellowOnContainer};
+      color: ${theme.color.container.yellowOnContainer};
     `,
-    black: css `
-      background: ${theme.color.container.obsidianContainer};
-      color: ${theme.color.container.obsidianOnContainer};
+    black: css `
+      background: ${theme.color.container.obsidianContainer};
+      color: ${theme.color.container.obsidianOnContainer};
     `,
-    white: css `
-      background: ${theme.color.background.neutralBase};
-      color: ${theme.color.foreground.neutralBaseActive};
+    white: css `
+      background: ${theme.color.background.neutralBase};
+      color: ${theme.color.foreground.neutralBaseActive};
     `,
-    ai: css `
-      background: linear-gradient(94deg, #5898ff 5.24%, #c673e4 96.99%);
-      color: ${theme.color.container.obsidianOnContainer};
+    ai: css `
+      background: linear-gradient(94deg, #5898ff 5.24%, #c673e4 96.99%);
+      color: ${theme.color.container.obsidianOnContainer};
     `,
 })[color];
 /**
@@ -84,43 +84,43 @@ export const Tag = React.forwardRef(function Tag(props, ref) {
     const { className, component: Component = "span", label, icon, color = "default", bold, onClick, close } = props, other = __rest(props, ["className", "component", "label", "icon", "color", "bold", "onClick", "close"]);
     const theme = useTheme();
     return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: [tagClasses.root, className].filter(Boolean).join(" "), css: [
-            css `
-          box-sizing: border-box;
-          display: flex;
-          // flex가 화면 전체로 확장되지 않고 내부의 아이콘과 텍스트만 포함한다.
-          padding: 1px 8px;
-          align-items: center;
-          gap: 3px;
-          width: fit-content;
-          border-radius: 8px;
-          height: 22px;
-
-          svg {
-            width: 14px;
-            height: 14px;
-          }
+            css `
+          box-sizing: border-box;
+          display: flex;
+          // flex가 화면 전체로 확장되지 않고 내부의 아이콘과 텍스트만 포함한다.
+          padding: 1px 8px;
+          align-items: center;
+          gap: 3px;
+          width: fit-content;
+          border-radius: 8px;
+          height: 22px;
+
+          svg {
+            width: 14px;
+            height: 14px;
+          }
         `,
             COLOR_TO_STYLE(theme, color),
             onClick
-                ? css `
-              cursor: pointer;
+                ? css `
+              cursor: pointer;
             `
                 : undefined,
-        ], onClick: onClick, children: [icon, _jsx("span", { className: tagClasses.label, css: css `
-          font-weight: ${bold ? 700 : 400};
-          font-size: 12px;
-          line-height: 20px;
-        `, children: label }), close && (_jsx("span", { css: css `
-            display: flex;
-            cursor: pointer;
-            align-items: center;
+        ], onClick: onClick, children: [icon, _jsx("span", { className: tagClasses.label, css: css `
+          font-weight: ${bold ? 700 : 400};
+          font-size: 12px;
+          line-height: 20px;
+        `, children: label }), close && (_jsx("span", { css: css `
+            display: flex;
+            cursor: pointer;
+            align-items: center;
           `, onClick: (e) => {
                     var _a, _b;
                     (_b = ((_a = props.onClose) !== null && _a !== void 0 ? _a : onClick)) === null || _b === void 0 ? void 0 : _b();
                     e.stopPropagation();
                 }, children: _jsx(StyledCloseFillIcon, { className: tagClasses.closeButton }) }))] })));
 });
-const StyledCloseFillIcon = styled(CloseFillIcon) `
-  width: 10px;
-  height: 10px;
+const StyledCloseFillIcon = styled(CloseFillIcon) `
+  width: 10px;
+  height: 10px;
 `;

package/dist/components/Tooltip.js

@@ -59,24 +59,24 @@ export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
 const StyledTooltip = styled((_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (_jsx(MuiTooltip, Object.assign({}, props, { classes: { popper: className } })));
-})(({ theme }) => css `
-    .MuiTooltip-tooltip {
-      background: ${theme.color.foreground.neutralBase};
-      border-radius: 8px;
-      padding: 6px 10px;
-
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-
-      color: ${theme.color.background.neutralBase};
-      font-family: ${theme.fontFamily.ui};
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 22px;
-    }
+})(({ theme }) => css `
+    .MuiTooltip-tooltip {
+      background: ${theme.color.foreground.neutralBase};
+      border-radius: 8px;
+      padding: 6px 10px;
+
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+
+      color: ${theme.color.background.neutralBase};
+      font-family: ${theme.fontFamily.ui};
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+    }
   `);
-const TitleDiv = styled.div `
-  font-weight: 700;
+const TitleDiv = styled.div `
+  font-weight: 700;
 `;

package/dist/foundation/breakpoints.js

@@ -1,22 +1,22 @@
 import { css } from "@emotion/react";
-export const MAIN_CONTAINER_STYLE = css `
-  container: main / inline-size;
+export const MAIN_CONTAINER_STYLE = css `
+  container: main / inline-size;
 `;
 export const TABLET_MAX_WIDTH_BREAKPOINT = 1279;
-export const TABLET = (style) => css `
-  @media (max-width: ${TABLET_MAX_WIDTH_BREAKPOINT}px) {
-    ${style}
-  }
-  @container main (width < ${TABLET_MAX_WIDTH_BREAKPOINT}px) {
-    ${style}
-  }
+export const TABLET = (style) => css `
+  @media (max-width: ${TABLET_MAX_WIDTH_BREAKPOINT}px) {
+    ${style}
+  }
+  @container main (width < ${TABLET_MAX_WIDTH_BREAKPOINT}px) {
+    ${style}
+  }
 `;
 export const MOBILE_MAX_WIDTH_BREAKPOINT = 719;
-export const MOBILE = (style) => css `
-  @media (max-width: ${MOBILE_MAX_WIDTH_BREAKPOINT}px) {
-    ${style}
-  }
-  @container main (width < ${MOBILE_MAX_WIDTH_BREAKPOINT}px) {
-    ${style}
-  }
+export const MOBILE = (style) => css `
+  @media (max-width: ${MOBILE_MAX_WIDTH_BREAKPOINT}px) {
+    ${style}
+  }
+  @container main (width < ${MOBILE_MAX_WIDTH_BREAKPOINT}px) {
+    ${style}
+  }
 `;

package/dist/foundation/typography.js

@@ -2,209 +2,209 @@ import { css } from "@emotion/react";
 import { FONT } from "./font";
 export const typography = {
     // Heading 1
-    heading1Regular: css `
-    font-family: ${FONT.pretendard};
-    font-size: 40px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 52px;
-  `,
-    heading1Bold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 40px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 52px;
+    heading1Regular: css `
+    font-family: ${FONT.pretendard};
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 52px;
+  `,
+    heading1Bold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 52px;
   `,
     // Heading 2
-    heading2Regular: css `
-    font-family: ${FONT.pretendard};
-    font-size: 36px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 44px;
-  `,
-    heading2Bold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 36px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 44px;
+    heading2Regular: css `
+    font-family: ${FONT.pretendard};
+    font-size: 36px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 44px;
+  `,
+    heading2Bold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 36px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 44px;
   `,
     // Heading 3
-    heading3Regular: css `
-    font-family: ${FONT.pretendard};
-    font-size: 32px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 40px;
-  `,
-    heading3Bold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 32px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 40px;
+    heading3Regular: css `
+    font-family: ${FONT.pretendard};
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 40px;
+  `,
+    heading3Bold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 40px;
   `,
     // Heading 4
-    heading4Regular: css `
-    font-family: ${FONT.pretendard};
-    font-size: 28px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 36px;
-  `,
-    heading4Bold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 28px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 36px;
+    heading4Regular: css `
+    font-family: ${FONT.pretendard};
+    font-size: 28px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 36px;
+  `,
+    heading4Bold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 28px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 36px;
   `,
     // Heading 5
-    heading5Regular: css `
-    font-family: ${FONT.pretendard};
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 32px;
-  `,
-    heading5Bold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 32px;
+    heading5Regular: css `
+    font-family: ${FONT.pretendard};
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 32px;
+  `,
+    heading5Bold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 32px;
   `,
     // Heading 6
-    heading6Regular: css `
-    font-family: ${FONT.pretendard};
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 28px;
-  `,
-    heading6Bold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 28px;
+    heading6Regular: css `
+    font-family: ${FONT.pretendard};
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px;
+  `,
+    heading6Bold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 28px;
   `,
     // Body 1
-    body1Regular: css `
-    font-family: ${FONT.pretendard};
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 28px;
-  `,
-    body1Medium: css `
-    font-family: ${FONT.pretendard};
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 28px;
-  `,
-    body1SemiBold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 28px;
-  `,
-    body1Bold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 28px;
+    body1Regular: css `
+    font-family: ${FONT.pretendard};
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px;
+  `,
+    body1Medium: css `
+    font-family: ${FONT.pretendard};
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 28px;
+  `,
+    body1SemiBold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+  `,
+    body1Bold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 28px;
   `,
     // Body 2
-    body2Regular: css `
-    font-family: ${FONT.pretendard};
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px;
-  `,
-    body2Medium: css `
-    font-family: ${FONT.pretendard};
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 24px;
-  `,
-    body2SemiBold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 24px;
-  `,
-    body2Bold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 24px;
+    body2Regular: css `
+    font-family: ${FONT.pretendard};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  `,
+    body2Medium: css `
+    font-family: ${FONT.pretendard};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+  `,
+    body2SemiBold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+  `,
+    body2Bold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
   `,
     // Body 3
-    body3Regular: css `
-    font-family: ${FONT.pretendard};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-  `,
-    body3Medium: css `
-    font-family: ${FONT.pretendard};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 20px;
-  `,
-    body3SemiBold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 20px;
-  `,
-    body3Bold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 20px;
+    body3Regular: css `
+    font-family: ${FONT.pretendard};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  `,
+    body3Medium: css `
+    font-family: ${FONT.pretendard};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+  `,
+    body3SemiBold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+  `,
+    body3Bold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px;
   `,
     // Caption
-    captionRegular: css `
-    font-family: ${FONT.pretendard};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 16px;
-  `,
-    captionMedium: css `
-    font-family: ${FONT.pretendard};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px;
-  `,
-    captionSemiBold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 16px;
-  `,
-    captionBold: css `
-    font-family: ${FONT.pretendard};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 16px;
+    captionRegular: css `
+    font-family: ${FONT.pretendard};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+  `,
+    captionMedium: css `
+    font-family: ${FONT.pretendard};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+  `,
+    captionSemiBold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 16px;
+  `,
+    captionBold: css `
+    font-family: ${FONT.pretendard};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 16px;
   `,
 };

package/dist/icons/custom/colored/Microsoft.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const CustomMicrosoftIcon: React.ForwardRefExoticComponent<{
+    className?: string;
+} & React.RefAttributes<SVGSVGElement>>;
+export declare const customMicrosoftSvg: string;

package/dist/icons/custom/colored/Microsoft.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import svgImport from "./microsoft.svg";
+export const CustomMicrosoftIcon = forwardRef(function CustomMicrosoftIcon(props, ref) {
+    return (_jsxs("svg", Object.assign({ width: 24, height: 24, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: ref }, props, { children: [_jsx("path", { d: "M0 0H7.54294V7.54294H0V0Z", fill: "#F35325" }), _jsx("path", { d: "M0 8.29039H7.54294V15.8333H0V8.29039Z", fill: "#05A6F0" }), _jsx("path", { d: "M8.29039 0H15.8333V7.54294H8.29039V0Z", fill: "#81BC06" }), _jsx("path", { d: "M8.29039 8.29039H15.8333V15.8333H8.29039V8.29039Z", fill: "#FFBA08" })] })));
+});
+export const customMicrosoftSvg = svgImport;