@team-monolith/cds 1.122.6 → 1.123.0

package/dist/patterns/Tabs.js

@@ -18,51 +18,51 @@ export function Tabs({ className, activeKey, onTabClick, items }) {
     var _a;
     return (_jsxs(Wrapper, { className: [tabsClasses.root, className].filter(Boolean).join(" "), children: [_jsx(TabBar, { className: tabsClasses.tabBar, children: items.map((item) => (_jsxs(Tab, { className: tabsClasses.tab, onClick: (event) => onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(item.key, event), active: activeKey === item.key, children: [item.label, activeKey === item.key && (_jsx(ActiveIndicator, { className: tabsClasses.activeIndicator }))] }, item.key))) }), (_a = items.find((item) => item.key === activeKey)) === null || _a === void 0 ? void 0 : _a.children] }));
 }
-const Wrapper = styled.div `
-  display: flex;
-  flex-direction: column;
+const Wrapper = styled.div `
+  display: flex;
+  flex-direction: column;
 `;
-const TabBar = styled.ul(({ theme }) => css `
-    display: flex;
-    gap: 16px;
-    list-style: none;
-    padding: 0;
-    margin: 4px 0;
-    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
-    position: relative;
+const TabBar = styled.ul(({ theme }) => css `
+    display: flex;
+    gap: 16px;
+    list-style: none;
+    padding: 0;
+    margin: 4px 0;
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+    position: relative;
   `);
-const Tab = styled.li(({ theme, active }) => css `
-    padding: 8px 12px;
-    cursor: pointer;
-    color: ${theme.color.foreground.neutralBase};
-    text-align: center;
-    position: relative;
-
-    /* Default/Paragraph/14px-Bd */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
-
-    border-radius: 8px;
-
-    ${HOVER(css `
-      background: ${theme.color.background.neutralAltActive};
-    `)}
+const Tab = styled.li(({ theme, active }) => css `
+    padding: 8px 12px;
+    cursor: pointer;
+    color: ${theme.color.foreground.neutralBase};
+    text-align: center;
+    position: relative;
+
+    /* Default/Paragraph/14px-Bd */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+
+    border-radius: 8px;
+
+    ${HOVER(css `
+      background: ${theme.color.background.neutralAltActive};
+    `)}
     ${active &&
-    css `
-      font-weight: 700;
-    `}
-    &:focus {
-      outline: 2px solid ${theme.color.background.primary};
-    }
+    css `
+      font-weight: 700;
+    `}
+    &:focus {
+      outline: 2px solid ${theme.color.background.primary};
+    }
   `);
-const ActiveIndicator = styled.span(({ theme }) => css `
-    position: absolute;
-    bottom: -1px;
-    left: 8px;
-    right: 8px;
-    height: 2px;
-    background-color: ${theme.color.background.primary};
+const ActiveIndicator = styled.span(({ theme }) => css `
+    position: absolute;
+    bottom: -1px;
+    left: 8px;
+    right: 8px;
+    height: 2px;
+    background-color: ${theme.color.background.primary};
   `);

package/dist/patterns/ToggleButtonGroup/ToggleButton.js

@@ -14,45 +14,45 @@ export function ToggleButton(props) {
     }
     return (_jsx(Tooltip, { placement: placement, text: label, children: _jsx(Inactive, { "aria-label": t("{{label}} 선택하기", { label }), className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick, children: offIcon }) }));
 }
-const Active = styled.button(({ theme }) => css `
-    ${RESET_BUTTON};
-    cursor: pointer;
-    display: flex;
-    padding: 8px 12px;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-
-    border-radius: 99px;
-    background: ${theme.color.blanket.neutralLight};
-
-    color: ${theme.color.foreground.neutralBase};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 20px; /* 125% */
-
-    svg {
-      width: 24px;
-      height: 24px;
-    }
+const Active = styled.button(({ theme }) => css `
+    ${RESET_BUTTON};
+    cursor: pointer;
+    display: flex;
+    padding: 8px 12px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+
+    border-radius: 99px;
+    background: ${theme.color.blanket.neutralLight};
+
+    color: ${theme.color.foreground.neutralBase};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px; /* 125% */
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
   `);
-const Inactive = styled.button `
-  ${RESET_BUTTON};
-  cursor: pointer;
-  display: flex;
-  padding: 8px 12px;
-  justify-content: center;
-  align-items: center;
-
-  opacity: 0.6;
-  ${HOVER(css `
-    opacity: 1;
-  `)}
-
-  svg {
-    width: 24px;
-    height: 24px;
-  }
+const Inactive = styled.button `
+  ${RESET_BUTTON};
+  cursor: pointer;
+  display: flex;
+  padding: 8px 12px;
+  justify-content: center;
+  align-items: center;
+
+  opacity: 0.6;
+  ${HOVER(css `
+    opacity: 1;
+  `)}
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
 `;

package/dist/patterns/ToggleButtonGroup/ToggleButtonGroup.js

@@ -17,8 +17,8 @@ export const toggleButtonGroupClasses = {
 export function ToggleButtonGroup(props) {
     const { className, data, activeIndex, setActiveIndex } = props;
     return (_jsx(Container, { className: `${className} ${toggleButtonGroupClasses.container}`, css: !setActiveIndex &&
-            css `
-          pointer-events: none;
+            css `
+          pointer-events: none;
         `, children: data.map((datum, index) => {
             const isFirst = index === 0;
             const isLast = index === data.length - 1;
@@ -35,13 +35,13 @@ export function ToggleButtonGroup(props) {
                             : "bottom" }, index));
         }) }));
 }
-const Container = styled.div `
-  display: flex;
-  padding: 4px;
-  justify-content: space-between;
-  align-items: center;
-  flex: 1 0 0;
-
-  border-radius: 24px;
-  background: linear-gradient(90deg, #eff7ed 0%, #faefe3 100%);
+const Container = styled.div `
+  display: flex;
+  padding: 4px;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 0;
+
+  border-radius: 24px;
+  background: linear-gradient(90deg, #eff7ed 0%, #faefe3 100%);
 `;

package/dist/utils/hover.js

@@ -2,20 +2,20 @@ import { css } from "@emotion/react";
 // https://choi-jinwoo.github.io/post/development/css-media-hover/
 export function HOVER(style) {
     // -ms-high-contrast: none is for IE11 support.
-    return css `
-    @media (hover: hover), (-ms-high-contrast: none) {
-      &:hover {
-        ${style}
-      }
-    }
+    return css `
+    @media (hover: hover), (-ms-high-contrast: none) {
+      &:hover {
+        ${style}
+      }
+    }
   `;
 }
 export function FOCUS(style) {
-    return css `
-    @media (hover: hover), (-ms-high-contrast: none) {
-      &:focus {
-        ${style}
-      }
-    }
+    return css `
+    @media (hover: hover), (-ms-high-contrast: none) {
+      &:focus {
+        ${style}
+      }
+    }
   `;
 }

package/dist/utils/reset.js

@@ -1,23 +1,23 @@
 import { css } from "@emotion/react";
-export const RESET_COMMON_BOX = css `
-  margin: 0;
-  padding: 0;
-  border: 0;
+export const RESET_COMMON_BOX = css `
+  margin: 0;
+  padding: 0;
+  border: 0;
 `;
-export const RESET_BUTTON = css `
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  border: none;
-  background: none;
-  font: inherit;
-  text-align: inherit;
-  letter-spacing: inherit;
+export const RESET_BUTTON = css `
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  border: none;
+  background: none;
+  font: inherit;
+  text-align: inherit;
+  letter-spacing: inherit;
 `;
-export const RESET_TABLE = css `
-  padding: 0;
-  border: 0;
-  border-spacing: 0px;
-  border-collapse: collapse;
+export const RESET_TABLE = css `
+  padding: 0;
+  border: 0;
+  border-spacing: 0px;
+  border-collapse: collapse;
 `;

package/dist/utils/visuallyHidden.js

@@ -1,12 +1,12 @@
 import { css } from "@emotion/react";
-export const VISUALLY_HIDDEN = css `
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap; /* 텍스트가 줄 바뀜 없이 한 줄로 유지되도록 */
+export const VISUALLY_HIDDEN = css `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap; /* 텍스트가 줄 바뀜 없이 한 줄로 유지되도록 */
 `;

package/package.json

@@ -1,109 +1,109 @@
-{
-  "name": "@team-monolith/cds",
-  "version": "1.122.6",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "dependencies": {
-    "@emotion/css": "^11.11.2",
-    "@emotion/react": "^11.8.2",
-    "@emotion/styled": "^11.8.1",
-    "@lexical/react": "^0.32.1",
-    "@mui/material": "^5.13.6",
-    "@types/node": "^16.11.26",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
-    "framer-motion": "^11.3.19",
-    "hex-to-css-filter": "^5.4.0",
-    "i18next": "^25.5.2",
-    "i18next-browser-languagedetector": "^8.2.0",
-    "i18next-locize-backend": "^7.0.4",
-    "lexical": "^0.32.1",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.55.0",
-    "react-i18next": "^15.7.3",
-    "react-player": "^2.16.0",
-    "remixicon": "^4.3.0",
-    "typescript": "~5.5.4",
-    "uid": "^2.0.2",
-    "usehooks-ts": "^2.9.1"
-  },
-  "files": [
-    "dist/**/*",
-    "@types/**/*"
-  ],
-  "bundleDependencies": [
-    "react-i18next"
-  ],
-  "scripts": {
-    "build": "npm run build:compile && npm run i18n",
-    "build:compile": "npm i && npm run clean && mkdir dist && npm run iconconvert && npm run svgr-customicon && tsc && npm run postbundle",
-    "clean": "rimraf dist",
-    "postbundle": "copyfiles -u 2 src/cds/**/*.{svg,jpg,png} dist/",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "i18n": "npm run i18n:parse && npm run i18n:save-missing",
-    "i18n:context": "npx tsx scripts/audit-i18n-context.ts",
-    "i18n:parse": "i18next && npx tsx scripts/ko-plural-postprocess.ts",
-    "i18n:save-missing": "locize save-missing --path ./locales",
-    "iconconvert": "node iconscripts.mjs",
-    "svgr-default": "npx svgr src/cds/icons/custom/default -d src/cds/icons/custom/default --template src/cds/icons/custom/svgrDefaultTemplate.js",
-    "svgr-colored": "npx svgr src/cds/icons/custom/colored -d src/cds/icons/custom/colored --template src/cds/icons/custom/svgrColoredTemplate.js",
-    "svgr-customicon": "npm run svgr-default && npm run svgr-colored && node src/cds/icons/custom/uniqueidscripts.mjs",
-    "lint": "npx eslint src/"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest",
-      "plugin:storybook/recommended"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@babel/preset-env": "^7.22.7",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@eslint/js": "^9.7.0",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
-    "@storybook/blocks": "^7.4.6",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-webpack5": "^7.4.6",
-    "@storybook/testing-library": "^0.2.2",
-    "@svgr/cli": "^8.1.0",
-    "chromatic": "^7.1.0",
-    "copyfiles": "^2.4.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-i18next": "^6.1.3",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.34.4",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.8.0",
-    "globals": "^15.8.0",
-    "i18next-parser": "^9.3.0",
-    "locize-cli": "^10.3.2",
-    "pascalcase": "^2.0.0",
-    "prettier": "^3.0.2",
-    "prop-types": "^15.8.1",
-    "rimraf": "^5.0.1",
-    "storybook": "^7.4.6",
-    "tsx": "^4.20.5",
-    "typescript-eslint": "^8.4.0"
-  }
-}
+{
+  "name": "@team-monolith/cds",
+  "version": "1.123.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@lexical/react": "^0.32.1",
+    "@mui/material": "^5.13.6",
+    "@types/node": "^16.11.26",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "framer-motion": "^11.3.19",
+    "hex-to-css-filter": "^5.4.0",
+    "i18next": "^25.5.2",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "i18next-locize-backend": "^7.0.4",
+    "lexical": "^0.32.1",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.55.0",
+    "react-i18next": "^15.7.3",
+    "react-player": "^2.16.0",
+    "remixicon": "^4.3.0",
+    "typescript": "~5.5.4",
+    "uid": "^2.0.2",
+    "usehooks-ts": "^2.9.1"
+  },
+  "files": [
+    "dist/**/*",
+    "@types/**/*"
+  ],
+  "bundleDependencies": [
+    "react-i18next"
+  ],
+  "scripts": {
+    "build": "npm run build:compile && npm run i18n",
+    "build:compile": "npm i && npm run clean && mkdir dist && npm run iconconvert && npm run svgr-customicon && tsc && npm run postbundle",
+    "clean": "rimraf dist",
+    "postbundle": "copyfiles -u 2 src/cds/**/*.{svg,jpg,png} dist/",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "i18n": "npm run i18n:parse && npm run i18n:save-missing",
+    "i18n:context": "npx tsx scripts/audit-i18n-context.ts",
+    "i18n:parse": "i18next && npx tsx scripts/ko-plural-postprocess.ts",
+    "i18n:save-missing": "locize save-missing --path ./locales",
+    "iconconvert": "node iconscripts.mjs",
+    "svgr-default": "npx svgr src/cds/icons/custom/default -d src/cds/icons/custom/default --template src/cds/icons/custom/svgrDefaultTemplate.js",
+    "svgr-colored": "npx svgr src/cds/icons/custom/colored -d src/cds/icons/custom/colored --template src/cds/icons/custom/svgrColoredTemplate.js",
+    "svgr-customicon": "npm run svgr-default && npm run svgr-colored && node src/cds/icons/custom/uniqueidscripts.mjs",
+    "lint": "npx eslint src/"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.7",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@eslint/js": "^9.7.0",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@svgr/cli": "^8.1.0",
+    "chromatic": "^7.1.0",
+    "copyfiles": "^2.4.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-i18next": "^6.1.3",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react": "^7.34.4",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "globals": "^15.8.0",
+    "i18next-parser": "^9.3.0",
+    "locize-cli": "^10.3.2",
+    "pascalcase": "^2.0.0",
+    "prettier": "^3.0.2",
+    "prop-types": "^15.8.1",
+    "rimraf": "^5.0.1",
+    "storybook": "^7.4.6",
+    "tsx": "^4.20.5",
+    "typescript-eslint": "^8.4.0"
+  }
+}