@team-monolith/cds 1.4.8 → 1.5.0

package/dist/icons/custom/material.svg

@@ -1,6 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 4C4 2.89543 4.89543 2 6 2H18C19.1046 2 20 2.89543 20 4V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4Z" fill="#C5DBFF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.58578 14.5858C3.96086 14.2107 4.46957 14 5 14H8.17C8.69814 13.9996 9.20502 14.2081 9.58 14.58L11 16H20C20.5305 16 21.0392 16.2107 21.4143 16.5858C21.7893 16.9609 22 17.4696 22 18V19H22V20C22 20.5304 21.7893 21.0391 21.4142 21.4142C21.0392 21.7893 20.5304 22 20 22H5C4.46957 22 3.96089 21.7893 3.58582 21.4142C3.21074 21.0391 3 20.5304 3 20V19.57V19V16C3 15.4696 3.21071 14.9609 3.58578 14.5858Z" fill="#5599FF"/>
-<path d="M6 6C6 5.44772 6.44772 5 7 5H17C17.5523 5 18 5.44772 18 6V8C18 8.55228 17.5523 9 17 9H7C6.44772 9 6 8.55228 6 8V6Z" fill="#82ACE8"/>
-<path d="M17.4 10H6.6C6.26863 10 6 10.2239 6 10.5V11.5C6 11.7761 6.26863 12 6.6 12H17.4C17.7313 12 18 11.7761 18 11.5V10.5C18 10.2239 17.7313 10 17.4 10Z" fill="#82ACE8"/>
+<rect x="1.5" y="1.5" width="21" height="21" rx="10" fill="#ECF3FF"/>
+<path d="M17.1114 5.25H7.26359C6.97994 5.25 6.75 5.47395 6.75 5.7502V18.9998C6.75 19.2761 6.97994 19.5 7.26359 19.5H17.1114C17.3951 19.5 17.625 19.2761 17.625 18.9998V5.7502C17.625 5.47395 17.3951 5.25 17.1114 5.25Z" fill="#C5DBFF"/>
+<path d="M15.1912 7.12494H9.18378C8.46096 7.12494 7.875 7.71242 7.875 8.43711V8.43776C7.875 9.16246 8.46096 9.74994 9.18378 9.74994H15.1912C15.914 9.74994 16.5 9.16246 16.5 8.43776V8.43711C16.5 7.71242 15.914 7.12494 15.1912 7.12494Z" fill="#82ACE8"/>
+<path d="M15.7961 11.25H8.57891C8.39726 11.25 8.25 11.4179 8.25 11.625C8.25 11.8321 8.39726 12 8.57891 12H15.7961C15.9777 12 16.125 11.8321 16.125 11.625C16.125 11.4179 15.9777 11.25 15.7961 11.25Z" fill="#82ACE8"/>
+<path d="M11.8931 13.8287L8.73224 12.4227C8.66206 12.3911 8.58466 12.375 8.50595 12.375H5.76424C5.48023 12.375 5.25 12.5843 5.25 12.8425V19.0325C5.25 19.2907 5.48023 19.5 5.76424 19.5H18.2358C18.5198 19.5 18.75 19.2907 18.75 19.0325V14.3439C18.75 14.0857 18.5198 13.8764 18.2358 13.8764H12.1194C12.0413 13.8764 11.9639 13.8603 11.8931 13.8287Z" fill="#5599FF"/>
 </svg>

package/dist/icons/custom/resource.svg

@@ -1,11 +1,11 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_292_28484)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.66989 11.9999H4.50003C4.15734 11.9999 3.82192 12.0462 3.5 12.1344V4.00005C3.5 2.89566 4.39514 2 5.50005 2H17.5004C18.6048 2 19.5004 2.89566 19.5004 4.00005V14H11.2318L10.3236 13.0919C9.61335 12.3878 8.67147 11.9999 7.66989 11.9999ZM6.5 5C5.94772 5 5.5 5.44772 5.5 6V8C5.5 8.55228 5.94772 9 6.5 9H16.5C17.0523 9 17.5 8.55228 17.5 8V6C17.5 5.44772 17.0523 5 16.5 5H6.5Z" fill="#363636"/>
-<path d="M3.08568 14.5862C3.46056 14.2113 3.9694 14.0005 4.50005 14.0005H7.66992C8.19797 14.0005 8.70473 14.2087 9.08013 14.5805L10.5002 16.0005H19.4999C20.0306 16.0005 20.5389 16.2113 20.9143 16.5862C21.2892 16.9611 21.5 17.4699 21.5 18.0006V19.0006V20.0006C21.5 20.5313 21.2892 21.0396 20.9143 21.415C20.5394 21.7899 20.0306 22.0007 19.4999 22.0007H4.50005C3.9694 22.0007 3.46108 21.7899 3.08568 21.415C2.71081 21.0401 2.5 20.5313 2.5 20.0006V16.0005C2.5 15.4699 2.71081 14.9616 3.08568 14.5862Z" fill="#363636"/>
+<g clip-path="url(#clip0_358_3211)">
+<path d="M11.8576 13.0612L7.64236 11.0937C7.54909 11.0499 7.446 11.0264 7.34127 11.0264H3.68564C3.30764 11.0264 3 11.3191 3 11.6807V20.3457C3 20.7073 3.30764 21 3.68564 21H20.3144C20.6924 21 21 20.7073 21 20.3457V13.7828C21 13.4212 20.6924 13.1285 20.3144 13.1285H12.1587C12.054 13.1285 11.9509 13.1066 11.8576 13.0612Z" fill="#363636"/>
+<path d="M7.34127 9.37983C7.446 9.37983 7.54909 9.40174 7.64236 9.44713L11.8576 11.4146C11.9525 11.4584 12.0556 11.4819 12.1587 11.4819H19.0085V3.63235C19.0085 3.2833 18.7124 3 18.3458 3H5.65418C5.28927 3 4.99146 3.2833 4.99146 3.63235V9.37983H7.34127Z" fill="#363636"/>
 </g>
 <defs>
-<clipPath id="clip0_292_28484">
-<rect width="19" height="20" fill="white" transform="translate(2.5 2)"/>
+<clipPath id="clip0_358_3211">
+<rect width="18" height="18" fill="white" transform="translate(3 3)"/>
 </clipPath>
 </defs>
 </svg>

package/dist/patterns/LexicalEditor/LexicalEditor.d.ts

@@ -11,4 +11,4 @@ export interface LexicalEditorProps {
     /** 외부에서 플러그인을 주입하는 경우 활용함 */
     children?: JSX.Element | string | (JSX.Element | string)[];
 }
-export declare function LexicalEditor(props: LexicalEditorProps): JSX.Element;
+export declare function LexicalEditor(props: LexicalEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageDialog.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { LexicalEditor } from "lexical";
 export interface InsertImageDialogProps {
     open: boolean;
     activeEditor: LexicalEditor;
     onClose: () => void;
 }
-export declare function InsertImageDialog(props: InsertImageDialogProps): JSX.Element;
+export declare function InsertImageDialog(props: InsertImageDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageDialog.js

@@ -1,16 +1,32 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { INSERT_IMAGE_COMMAND } from ".";
 import { InsertImageUriDialogBody } from "./InsertImageUriDialogBody";
 import { InsertImageUploadedDialogBody } from "./InsertImageUploadedDialogBody";
 import styled from "@emotion/styled";
-import { AlertDialog, AlertDialogContent, AlertDialogTitle } from "../../../../components/AlertDialog";
-import { ImageFillIcon } from "../../../../icons";
+import { AlertDialog, AlertDialogContent, AlertDialogTitle, } from "../../../../components/AlertDialog";
+import { ImageFillIcon, LinkIcon, UploadLineIcon } from "../../../../icons";
 import Button from "../../../../components/Button";
+import { useTheme } from "@emotion/react";
+import { CodleDesignSystemContext } from "../../../../CodleDesignSystemProvider";
 export function InsertImageDialog(props) {
     const { open, activeEditor, onClose } = props;
+    const theme = useTheme();
     const [mode, setMode] = useState(null);
     const hasModifier = useRef(false);
+    const inputRef = useRef(null);
+    const cdsContext = useContext(CodleDesignSystemContext);
+    const [src, setSrc] = useState("");
+    const [altText, setAltText] = useState("");
     useEffect(() => {
         hasModifier.current = false;
         const handler = (e) => {
@@ -23,17 +39,70 @@ export function InsertImageDialog(props) {
     }, [activeEditor]);
     const onClick = (payload) => {
         activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
-        onClose();
+        handleOnClose();
     };
     const handleOnClose = () => {
         setMode(null);
+        setSrc("");
+        setAltText("");
         onClose();
     };
-    return (_jsxs(AlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, {}), open: open, onClose: handleOnClose, disableIconPadding: true }, { children: [_jsx(AlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: "\uC774\uBBF8\uC9C0 \uC785\uB825\uD558\uAE30" })), !mode && (_jsx(AlertDialogContent, { children: _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL \uC785\uB825\uD558\uAE30", onClick: () => setMode("url") }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC62C\uB9AC\uAE30", onClick: () => setMode("file") })] }) })), mode === "url" && _jsx(InsertImageUriDialogBody, { onClick: onClick }), mode === "file" && _jsx(InsertImageUploadedDialogBody, { onClick: onClick })] })));
+    return (_jsxs(StyledAlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30" })), !mode && (_jsx(AlertDialogContent, { children: _jsxs(Buttons, { children: [_jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uC774\uBBF8\uC9C0 URL\uC744 \uC54C\uACE0 \uC788\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL\uB85C \uC0BD\uC785\uD558\uAE30", startIcon: _jsx(LinkIcon, {}), onClick: () => setMode("url") })] }), _jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uAC16\uACE0 \uC788\uB294 \uC774\uBBF8\uC9C0\uB97C \uC0BD\uC785\uD558\uACE0 \uC2F6\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", startIcon: _jsx(UploadLineIcon, {}), onClick: () => {
+                                        var _a;
+                                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                                    } }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
+                                        var _a, _b;
+                                        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                                        if (!file)
+                                            return;
+                                        const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
+                                        if (uploadByFile) {
+                                            setSrc(yield uploadByFile(file));
+                                            setMode("file");
+                                        }
+                                    }) })] })] }) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick }))] })));
 }
+const StyledAlertDialog = styled(AlertDialog) `
+  gap: 16px;
+`;
+const StyledAlertDialogTitle = styled(AlertDialogTitle) `
+  color: ${({ theme }) => theme.color.foreground.neutralBase};
+  text-align: center;
+
+  /* Default/Heading/20px-Bd */
+  font-family: ${({ theme }) => theme.fontFamily.ui};
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px; /* 140% */
+  letter-spacing: 0.25px;
+`;
 const Buttons = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+
+  // Actions가 없는 경우 하단이 디자인과 맞지 않는다
+  margin-bottom: -16px;
+`;
+const ButtonAndDescription = styled.div `
   display: flex;
   flex-direction: column;
-  margin-top: 20px;
-  gap: 20px;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+`;
+const Description = styled.div `
+  color: ${({ theme }) => theme.color.foreground.neutralBaseDisabled};
+  text-align: center;
+
+  /* Default/Label/12px-Md */
+  font-family: ${({ theme }) => theme.fontFamily.ui};
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+`;
+const HiddenInput = styled.input `
+  display: none;
 `;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.d.ts

@@ -1,6 +1,9 @@
-/// <reference types="react" />
 import { InsertImagePayload } from ".";
 export interface InsertImageUploadedDialogBodyProps {
+    src: string;
+    setSrc: (src: string) => void;
+    altText: string;
+    setAltText: (altText: string) => void;
     onClick: (payload: InsertImagePayload) => void;
 }
-export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): JSX.Element;
+export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.js

@@ -8,23 +8,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useRef, useState } from "react";
+import { useContext, useRef } from "react";
 import styled from "@emotion/styled";
 import { CodleDesignSystemContext } from "../../../../CodleDesignSystemProvider";
-import { AlertDialogContent, AlertDialogActions } from "../../../../components/AlertDialog";
+import { AlertDialogContent, AlertDialogActions, } from "../../../../components/AlertDialog";
 import Button from "../../../../components/Button";
 import Input from "../../../../components/Input";
+import { RefreshLineIcon } from "../../../../icons";
 export function InsertImageUploadedDialogBody(props) {
-    const { onClick } = props;
-    const [src, setSrc] = useState("");
-    const [altText, setAltText] = useState("");
+    const { src, setSrc, altText, setAltText, onClick } = props;
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
     const isDisabled = src === "";
-    return (_jsxs(_Fragment, { children: [_jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uC62C\uB9AC\uAE30", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uBC14\uAFB8\uAE30", onClick: () => {
                                 var _a;
                                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                            } }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
+                            }, startIcon: _jsx(RefreshLineIcon, {}) }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
                                 var _a, _b;
                                 const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
                                 if (!file)
@@ -33,17 +32,20 @@ export function InsertImageUploadedDialogBody(props) {
                                 if (uploadByFile) {
                                     setSrc(yield uploadByFile(file));
                                 }
-                            }) }), _jsx(Input, { fullWidth: true, label: "\uC124\uBA85", placeholder: "\uC774\uBBF8\uC9C0\uC5D0 \uB300\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
+                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: src, alt: altText })] }), _jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
                                 setAltText(e.target.value);
-                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { label: "\uD655\uC778", size: "large", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
+                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
 }
 const Inputs = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  margin-top: 20px;
-  margin-bottom: 10px;
+  gap: 16px;
 `;
 const HiddenInput = styled.input `
   display: none;
 `;
+const ImagePreview = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.d.ts

@@ -1,6 +1,9 @@
-/// <reference types="react" />
 import { InsertImagePayload } from ".";
 export interface InsertImageUriDialogBodyProps {
+    src: string;
+    setSrc: (src: string) => void;
+    altText: string;
+    setAltText: (altText: string) => void;
     onClick: (payload: InsertImagePayload) => void;
 }
-export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): JSX.Element;
+export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.js

@@ -1,24 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
 import styled from "@emotion/styled";
-import { AlertDialogContent, AlertDialogActions } from "../../../../components/AlertDialog";
+import { AlertDialogActions, AlertDialogContent, } from "../../../../components/AlertDialog";
 import Input from "../../../../components/Input";
+import { LinkIcon } from "../../../../icons";
 import Button from "../../../../components/Button";
 export function InsertImageUriDialogBody(props) {
-    const { onClick } = props;
-    const [src, setSrc] = useState("");
-    const [altText, setAltText] = useState("");
+    const { src, setSrc, altText, setAltText, onClick } = props;
     const isDisabled = src === "";
-    return (_jsxs(_Fragment, { children: [_jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://source.unsplash.com/random", color: "default", size: "medium", onChange: (e) => {
+    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: (e) => {
                                 setSrc(e.target.value);
-                            }, value: src }), _jsx(Input, { fullWidth: true, label: "\uC124\uBA85", placeholder: "\uC774\uBBF8\uC9C0\uC5D0 \uB300\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
+                            }, value: src, startIcon: _jsx(LinkIcon, {}) }), _jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
                                 setAltText(e.target.value);
-                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { label: "\uD655\uC778", size: "large", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
+                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
 }
 const Inputs = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  margin-top: 20px;
-  margin-bottom: 10px;
+  gap: 16px;
 `;

package/dist/patterns/ReactEditorJS/ReactEditorJS.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { EditorCore } from "@react-editor-js/core";
 export interface ReactEditorJSProps {
     className?: string;
@@ -13,4 +12,4 @@ export interface ReactEditorJSProps {
     /** 초기화시 콜백 */
     onInitialize?: (instance: EditorCore) => void;
 }
-export declare function ReactEditorJS(props: ReactEditorJSProps): JSX.Element;
+export declare function ReactEditorJS(props: ReactEditorJSProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import React, { useContext } from "react";
 import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
@@ -30,22 +29,10 @@ export const SegmentedControlButton = React.forwardRef(function SegmentedControl
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick })));
+    return (_jsx(Button, Object.assign({ css: css `
+          display: flex;
+          justify-content: center;
+          flex-grow: 1;
+          ${isActive && `box-shadow: ${shadows.shadow04};`}
+        ` }, other, { ref: ref, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick })));
 });
-const StyledButton = styled(Button, {
-    shouldForwardProp: (prop) => prop !== "isActive",
-})(({ theme, isActive }) => css `
-    display: flex;
-    justify-content: center;
-    flex-grow: 1;
-    ${isActive &&
-    `
-      box-shadow: ${shadows.shadow04};
-      svg {
-        color: ${theme.color.foreground.primary};
-      }
-      span {
-        font-weight: 700;
-      }
-    `}
-  `);

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { SquareButtonProps } from "../..";
+import React from "react";
 export interface SegmentedControlSquareButtonProps extends Omit<SquareButtonProps, "color" | "size"> {
     value: string;
 }

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.js

@@ -1,51 +1,33 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
-import { css } from "@emotion/react";
-import React, { useContext } from "react";
+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 const SegmentedControlSquareButton = React.forwardRef(function SegmentedControlSquareButton(props, ref) {
-    const { onClick } = props, other = __rest(props, ["onClick"]);
     const context = useContext(SegmentedControlGroupPropsContext);
-    const handleClick = () => {
-        var _a;
-        (_a = context.onClick) === null || _a === void 0 ? void 0 : _a.call(context, props.value);
-        onClick === null || onClick === void 0 ? void 0 : onClick();
-    };
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(StyledSquareButton, Object.assign({}, other, { ref: ref, isActive: isActive, color: isActive ? "white" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: handleClick })));
+    return (_jsx(StyledSquareButton, Object.assign({}, props, { ref: ref, isActive: isActive, color: isActive ? "primary" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: () => {
+            var _a;
+            if (context.onClick) {
+                context.onClick(props.value);
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
+            }
+        } })));
 });
 const StyledSquareButton = styled(SquareButton, {
     shouldForwardProp: (prop) => prop !== "isActive",
-})(({ theme, isActive }) => css `
-    display: flex;
-    justify-content: center;
-    flex-grow: 1;
-    ${isActive &&
-    `
-      box-shadow: ${shadows.shadow04};
-      svg {
-        color: ${theme.color.foreground.primary};
-      }
-      span {
-        font-weight: 700;
-      }
-    `}
-  `);
+}) `
+  display: flex;
+  justify-content: center;
+  flex-grow: 1;
+  button {
+    ${({ isActive }) => isActive && `box-shadow: ${shadows.shadow04};`}
+  }
+`;

package/package.json

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

package/dist/icons/custom/quiz-color.svg

@@ -1,12 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_296_4038)">
-<path d="M19.5238 19.81C19.5238 20.3913 19.2927 20.9478 18.8819 21.3584C18.4712 21.7691 17.9137 22.0002 17.3333 22.0002H4.19048C3.60913 22.0002 3.05258 21.7691 2.64186 21.3584C2.23115 20.9478 2 20.3903 2 19.81V6.09309C2 5.5118 2.23115 4.95531 2.64186 4.54463C3.05258 4.13396 3.61012 3.90283 4.19048 3.90283H17.3333C17.9147 3.90283 18.4712 4.13396 18.8819 4.54463C19.2927 4.95531 19.5238 5.51279 19.5238 6.09309V19.81C19.5238 20.3913 19.2927 20.9478 18.8819 21.3584C18.4712 21.7691 17.9137 22.0002 17.3333 22.0002" fill="#FBEAF3"/>
-<path d="M21.9999 17.9072C21.9999 18.4884 21.7687 19.0449 21.358 19.4556C20.9473 19.8663 20.3898 20.0974 19.8094 20.0974H6.66655C6.0852 20.0974 5.52865 19.8663 5.11794 19.4556C4.70723 19.0449 4.47607 18.4875 4.47607 17.9072V4.19026C4.47607 3.60897 4.70723 3.05247 5.11794 2.6418C5.52865 2.23113 6.08619 2 6.66655 2H19.8094C20.3908 2 20.9473 2.23113 21.358 2.6418C21.7687 3.05247 21.9999 3.60996 21.9999 4.19026V17.9072C21.9999 18.4884 21.7687 19.0449 21.358 19.4556C20.9473 19.8663 20.3898 20.0974 19.8094 20.0974" fill="#F889AA"/>
-<path d="M17.2836 14.917C18.4152 13.8846 19.0484 12.3944 19.0484 10.7363C19.0484 7.62109 16.8132 5.09766 13.2381 5.09766C9.66292 5.09766 7.42773 7.62274 7.42773 10.7363C7.42773 13.8499 9.66292 16.375 13.2381 16.375C14.044 16.375 14.7805 16.246 15.4394 16.0113L16.0651 16.9064C16.118 16.9833 16.2147 17.0172 16.304 16.9916L18.0341 16.494C18.1011 16.4742 18.1556 16.4237 18.1796 16.3568C18.2028 16.2907 18.1928 16.2171 18.1523 16.1584L17.2836 14.917ZM13.2381 13.6656C11.3815 13.6656 10.2192 12.3539 10.2192 10.7363C10.2192 9.11878 11.3798 7.80706 13.2381 7.80706C15.0963 7.80706 16.2569 9.11878 16.2569 10.7363C16.2569 11.4331 16.0403 12.0728 15.6468 12.5762L14.8864 11.4885C14.8326 11.4124 14.7367 11.3777 14.6475 11.4033L12.9165 11.9009C12.8496 11.9208 12.795 11.9712 12.771 12.0381C12.7479 12.1042 12.7578 12.1778 12.7983 12.2365L13.7696 13.6251C13.6001 13.6499 13.4241 13.6656 13.2381 13.6656Z" fill="#FBEAF3"/>
-</g>
-<defs>
-<clipPath id="clip0_296_4038">
-<rect width="20" height="20" fill="white" transform="translate(2 2)"/>
-</clipPath>
-</defs>
-</svg>

package/dist/icons/custom/quiz.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.3773 18.3971C21.7758 18.0113 22 17.4886 22 16.9426V4.05744C22 3.51233 21.7758 2.98865 21.3773 2.60288C20.9789 2.21711 20.439 2 19.875 2H7.125C6.56199 2 6.02112 2.21711 5.62268 2.60288C5.22424 2.98865 5 3.5114 5 4.05744V16.9426C5 17.4877 5.22424 18.0113 5.62268 18.3971C6.02112 18.7829 6.56103 19 7.125 19H19.875C20.438 19 20.9789 18.7829 21.3773 18.3971ZM19 10.1849C19 11.8566 18.4006 13.359 17.3294 14.3998L18.1518 15.6515C18.1901 15.7107 18.1995 15.7848 18.1776 15.8515C18.1549 15.919 18.1033 15.9698 18.0399 15.9898L16.4022 16.4915C16.3177 16.5173 16.2261 16.4832 16.1761 16.4057L15.5837 15.5032C14.9601 15.7398 14.2629 15.8698 13.5 15.8698C10.1158 15.8698 8 13.324 8 10.1849C8 7.04579 10.1158 4.5 13.5 4.5C16.8842 4.5 19 7.04413 19 10.1849ZM10.6424 10.1849C10.6424 11.8157 11.7426 13.1382 13.5 13.1382C13.6761 13.1382 13.8427 13.1224 14.0031 13.0974L13.0837 11.6974C13.0454 11.6382 13.036 11.5641 13.0579 11.4974C13.0806 11.4299 13.1322 11.3791 13.1956 11.3591L14.8341 10.8574C14.9186 10.8316 15.0094 10.8666 15.0603 10.9432L15.7801 12.0399C16.1526 11.5324 16.3576 10.8874 16.3576 10.1849C16.3576 8.55411 15.259 7.23163 13.5 7.23163C11.741 7.23163 10.6424 8.55411 10.6424 10.1849Z" fill="#363636"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 3C3.55228 3 4 3.44772 4 4V18C4 19.1046 4.89543 20 6 20H20C20.5523 20 21 20.4477 21 21C21 21.5523 20.5523 22 20 22H6C3.79086 22 2 20.2091 2 18V4C2 3.44772 2.44772 3 3 3Z" fill="#363636"/>
-</svg>