@team-monolith/cds 0.25.0 → 0.26.0

package/@types/emotion.d.ts

@@ -1,8 +1,8 @@
 import "@emotion/react";
 
 interface CodleFontFamilies {
-  uiFont: string;
-  titleFont: string;
+  ui: string;
+  title: string;
 }
 
 interface CodleColors {

package/dist/CodleDesignSystemProvider.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 export declare const light: {
     fontFamily: {
-        uiFont: string;
-        titleFont: string;
+        ui: string;
+        title: string;
     };
     color: {
         background: {

package/dist/CodleDesignSystemProvider.js

@@ -21,8 +21,8 @@ import FONT from "./foundation/font";
 import { createTheme } from "@mui/material";
 export var light = {
     fontFamily: {
-        uiFont: FONT.pretendard,
-        titleFont: FONT.naumSquareNeo,
+        ui: FONT.pretendard,
+        title: FONT.naumSquareNeo,
     },
     color: {
         background: {

package/dist/components/AlertDialog/AlertDialogTitle.js

@@ -36,6 +36,6 @@ export var AlertDialogTitle = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, onClose = props.onClose, children = props.children, other = __rest(props, ["className", "component", "onClose", "children"]);
     var icon = React.useContext(AlertDialogContext).icon;
     var theme = useTheme();
-    return (_jsx(_Fragment, { children: _jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            grid-area: title;\n            font-family: ", ";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "], ["\n            grid-area: title;\n            font-family: ", ";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "])), theme.fontFamily.uiFont, theme.color.foreground.neutralBase) }, { children: [_jsxs("div", __assign({ css: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              display: flex;\n              flex-direction: column;\n              justify-content: center;\n              align-items: flex-start;\n              gap: 16px;\n            "], ["\n              display: flex;\n              flex-direction: column;\n              justify-content: center;\n              align-items: flex-start;\n              gap: 16px;\n            "]))) }, { children: [icon && (_jsx("div", __assign({ css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  display: none;\n                  ", "\n                "], ["\n                  display: none;\n                  ", "\n                "])), MOBILE(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    color: ", ";\n\n                    svg {\n                      width: 32px;\n                      height: 32px;\n                    }\n                  "], ["\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    color: ", ";\n\n                    svg {\n                      width: 32px;\n                      height: 32px;\n                    }\n                  "])), theme.color.background.infoActive))) }, { children: icon }))), children] })), onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })) }));
+    return (_jsx(_Fragment, { children: _jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            grid-area: title;\n            font-family: ", ";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "], ["\n            grid-area: title;\n            font-family: ", ";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "])), theme.fontFamily.ui, theme.color.foreground.neutralBase) }, { children: [_jsxs("div", __assign({ css: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              display: flex;\n              flex-direction: column;\n              justify-content: center;\n              align-items: flex-start;\n              gap: 16px;\n            "], ["\n              display: flex;\n              flex-direction: column;\n              justify-content: center;\n              align-items: flex-start;\n              gap: 16px;\n            "]))) }, { children: [icon && (_jsx("div", __assign({ css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  display: none;\n                  ", "\n                "], ["\n                  display: none;\n                  ", "\n                "])), MOBILE(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    color: ", ";\n\n                    svg {\n                      width: 32px;\n                      height: 32px;\n                    }\n                  "], ["\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    color: ", ";\n\n                    svg {\n                      width: 32px;\n                      height: 32px;\n                    }\n                  "])), theme.color.background.infoActive))) }, { children: icon }))), children] })), onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })) }));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Banner.js

@@ -57,11 +57,11 @@ var Banner = React.forwardRef(function (props, ref) {
 var IconDiv = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 16px 0px 16px 16px;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 16px 0px 16px 16px;\n"])));
 var HeadlineDiv = styled.div(function (_a) {
     var theme = _a.theme;
-    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 700;\n    line-height: 20px; /* 125% */\n  "], ["\n    font-family: ", ";\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 700;\n    line-height: 20px; /* 125% */\n  "])), theme.fontFamily.uiFont);
+    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 700;\n    line-height: 20px; /* 125% */\n  "], ["\n    font-family: ", ";\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 700;\n    line-height: 20px; /* 125% */\n  "])), theme.fontFamily.ui);
 });
 var ContentDiv = styled.div(function (_a) {
     var theme = _a.theme;
-    return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px; /* 150% */\n  "], ["\n    font-family: ", ";\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px; /* 150% */\n  "])), theme.fontFamily.uiFont);
+    return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px; /* 150% */\n  "], ["\n    font-family: ", ";\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px; /* 150% */\n  "])), theme.fontFamily.ui);
 });
 var TextContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  flex: 1;\n\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 16px;\n  gap: 4px;\n"], ["\n  flex: 1;\n\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 16px;\n  gap: 4px;\n"])));
 var BannerButton = styled.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 10px 12px;\n  cursor: pointer;\n  color: currentColor;\n"], ["\n  ", "\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 10px 12px;\n  cursor: pointer;\n  color: currentColor;\n"])), RESET_BUTTON);

package/dist/components/Button.js

@@ -68,7 +68,7 @@ var Button = React.forwardRef(function Button(props, ref) {
     var theme = useTheme();
     return (_jsxs(Component, __assign({ type: "button" }, other, { className: className, ref: ref, css: [
             css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          ", "\n\n          font-family: ", ";\n          text-decoration: none;\n\n          width: ", ";\n        "], ["\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          ", "\n\n          font-family: ", ";\n          text-decoration: none;\n\n          width: ", ";\n        "])), disabled
-                ? css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n                cursor: default;\n                pointer-events: none;\n              "], ["\n                cursor: default;\n                pointer-events: none;\n              "]))) : css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n                cursor: pointer;\n              "], ["\n                cursor: pointer;\n              "]))), theme.fontFamily.uiFont, fullWidth ? "100%" : "auto"),
+                ? css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n                cursor: default;\n                pointer-events: none;\n              "], ["\n                cursor: default;\n                pointer-events: none;\n              "]))) : css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n                cursor: pointer;\n              "], ["\n                cursor: pointer;\n              "]))), theme.fontFamily.ui, fullWidth ? "100%" : "auto"),
             COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled)),
             SIZE_TO_BUTTON_STYLE[size],
         ], disabled: disabled }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));

package/dist/components/Tooltip.js

@@ -43,7 +43,7 @@ var StyledTooltip = styled(function (_a) {
     return (_jsx(MuiTooltip, __assign({}, props, { classes: { popper: className } })));
 })(function (_a) {
     var theme = _a.theme;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .MuiTooltip-tooltip {\n      background: ", ";\n      border-radius: 8px;\n      padding: 6px 10px;\n\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n\n      color: ", ";\n      font-family: ", ";\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 22px;\n    }\n  "], ["\n    .MuiTooltip-tooltip {\n      background: ", ";\n      border-radius: 8px;\n      padding: 6px 10px;\n\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n\n      color: ", ";\n      font-family: ", ";\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 22px;\n    }\n  "])), theme.color.foreground.neutralBase, theme.color.background.neutralBase, theme.fontFamily.uiFont);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .MuiTooltip-tooltip {\n      background: ", ";\n      border-radius: 8px;\n      padding: 6px 10px;\n\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n\n      color: ", ";\n      font-family: ", ";\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 22px;\n    }\n  "], ["\n    .MuiTooltip-tooltip {\n      background: ", ";\n      border-radius: 8px;\n      padding: 6px 10px;\n\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n\n      color: ", ";\n      font-family: ", ";\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 22px;\n    }\n  "])), theme.color.foreground.neutralBase, theme.color.background.neutralBase, theme.fontFamily.ui);
 });
 var TitleDiv = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: 700;\n"], ["\n  font-weight: 700;\n"])));
 export default Tooltip;

package/dist/patterns/SegmentedControl/SegmentedControlButton.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ButtonProps } from "../..";
 export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" | "size"> {
     value: string;
@@ -5,4 +6,4 @@ export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" |
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
-export declare function SegmentedControlButton(props: SegmentedControlButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SegmentedControlButton: React.ForwardRefExoticComponent<Omit<SegmentedControlButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -27,13 +27,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
-import { useContext } from "react";
+import React, { useContext } from "react";
 import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
 import { Button, shadows } from "../..";
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
-export function SegmentedControlButton(props) {
+export var SegmentedControlButton = React.forwardRef(function SegmentedControlButton(props, ref) {
     var onClick = props.onClick, other = __rest(props, ["onClick"]);
     var context = useContext(SegmentedControlGroupPropsContext);
     var handleClick = function (e) {
@@ -44,6 +44,6 @@ export function SegmentedControlButton(props) {
     var isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(Button, __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        justify-content: center;\n        flex-grow: 1;\n        ", "\n      "], ["\n        display: flex;\n        justify-content: center;\n        flex-grow: 1;\n        ", "\n      "])), isActive && "box-shadow: ".concat(shadows.shadow04, ";")) }, other, { color: isActive ? "primary" : "textNeutral", size: context.size, onClick: handleClick })));
-}
+    return (_jsx(Button, __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: flex;\n          justify-content: center;\n          flex-grow: 1;\n          ", "\n        "], ["\n          display: flex;\n          justify-content: center;\n          flex-grow: 1;\n          ", "\n        "])), isActive && "box-shadow: ".concat(shadows.shadow04, ";")) }, other, { ref: ref, color: isActive ? "primary" : "textNeutral", size: context.size, onClick: handleClick })));
+});
 var templateObject_1;

package/dist/patterns/SegmentedControl/SegmentedControlGroup.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ButtonSize, SquareButtonSize } from "../..";
+import React from "react";
 export type SegmentedControlGroupProps = {
     className?: string;
     component?: React.ElementType;
@@ -22,4 +22,4 @@ export type SegmentedControlGroupProps = {
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
-export declare function SegmentedControlGroup(props: SegmentedControlGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SegmentedControlGroup: React.ForwardRefExoticComponent<SegmentedControlGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/patterns/SegmentedControl/SegmentedControlGroup.js

@@ -26,13 +26,14 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, useTheme } from "@emotion/react";
 import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+import React from "react";
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
-export function SegmentedControlGroup(props) {
+export var SegmentedControlGroup = React.forwardRef(function SegmentedControlGroup(props, ref) {
     var _a = props.component, Component = _a === void 0 ? "div" : _a, className = props.className, children = props.children, fullWidth = props.fullWidth, multiSelect = props.multiSelect;
     var theme = useTheme();
-    return (_jsx(Component, __assign({ className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        gap: 4px;\n\n        width: ", ";\n        background-color: ", ";\n        border-radius: 8px;\n        border: 1px solid ", ";\n      "], ["\n        display: flex;\n        gap: 4px;\n\n        width: ", ";\n        background-color: ", ";\n        border-radius: 8px;\n        border: 1px solid ", ";\n      "])), fullWidth ? "100%" : "fit-content", theme.color.background.neutralAlt, theme.color.background.neutralAltActive) }, { children: _jsx(SegmentedControlGroupPropsContext.Provider, __assign({ value: __assign(__assign({}, props), { onClick: function (newValue) {
+    return (_jsx(Component, __assign({ ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        gap: 4px;\n\n        width: ", ";\n        background-color: ", ";\n        border-radius: 8px;\n        border: 1px solid ", ";\n      "], ["\n        display: flex;\n        gap: 4px;\n\n        width: ", ";\n        background-color: ", ";\n        border-radius: 8px;\n        border: 1px solid ", ";\n      "])), fullWidth ? "100%" : "fit-content", theme.color.background.neutralAlt, theme.color.background.neutralAltActive) }, { children: _jsx(SegmentedControlGroupPropsContext.Provider, __assign({ value: __assign(__assign({}, props), { onClick: function (newValue) {
                     var _a, _b, _c;
                     if (multiSelect) {
                         if (props.value.includes(newValue)) {
@@ -46,5 +47,5 @@ export function SegmentedControlGroup(props) {
                         (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, newValue);
                     }
                 } }) }, { children: children })) })));
-}
+});
 var templateObject_1;

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.d.ts

@@ -1,8 +1,9 @@
 import { SquareButtonProps } from "../..";
+import React from "react";
 export interface SegmentedControlSquareButtonProps extends Omit<SquareButtonProps, "color" | "size"> {
     value: string;
 }
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
-export declare function SegmentedControlSquareButton(props: SegmentedControlSquareButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SegmentedControlSquareButton: React.ForwardRefExoticComponent<Omit<SegmentedControlSquareButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.js

@@ -19,22 +19,23 @@ import styled from "@emotion/styled";
 import { useContext } from "react";
 import { shadows, SquareButton } from "../..";
 import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+import React from "react";
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
-export function SegmentedControlSquareButton(props) {
+export var SegmentedControlSquareButton = React.forwardRef(function SegmentedControlSquareButton(props, ref) {
     var context = useContext(SegmentedControlGroupPropsContext);
     var isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(StyledSquareButton, __assign({}, props, { isActive: isActive, color: isActive ? "primary" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: function () {
+    return (_jsx(StyledSquareButton, __assign({}, props, { ref: ref, isActive: isActive, color: isActive ? "primary" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: function () {
             var _a;
             if (context.onClick) {
                 context.onClick(props.value);
                 (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
             }
         } })));
-}
+});
 var StyledSquareButton = styled(SquareButton, {
     shouldForwardProp: function (prop) { return prop !== "isActive"; },
 })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  button {\n    ", "\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  button {\n    ", "\n  }\n"])), function (_a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,