@team-monolith/cds 1.100.2 → 1.100.4

package/dist/components/Switch.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+import { SwitchProps as MuiSwitchProps } from "@mui/material";
 export type SwitchSize = "small" | "large";
-export interface SwitchProps {
+export interface SwitchProps extends Omit<MuiSwitchProps, "size"> {
     className?: string;
     /** 스위치 체크 상태 여부 */
     checked: boolean;
@@ -15,4 +16,4 @@ export interface SwitchProps {
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-1577&t=9sDLb4XIOdmF2VMc-0)
  */
-export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Switch.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
 import React from "react";
-import { Switch as MuiSwitch } from "@mui/material";
+import { Switch as MuiSwitch, } from "@mui/material";
 import { css } from "@emotion/react";
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-1577&t=9sDLb4XIOdmF2VMc-0)

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export * from "./icons/custom/colored";
 export * from "./utils/hover";
 export * from "./utils/reset";
 export * from "./utils/zIndex";
+export * from "./utils/visuallyHidden";
 export * from "./patterns/Dropdown";
 export * from "./patterns/SegmentedControl";
 export * from "./patterns/LexicalEditor";

package/dist/index.js

@@ -30,6 +30,7 @@ export * from "./icons/custom/colored";
 export * from "./utils/hover";
 export * from "./utils/reset";
 export * from "./utils/zIndex";
+export * from "./utils/visuallyHidden";
 export * from "./patterns/Dropdown";
 export * from "./patterns/SegmentedControl";
 export * from "./patterns/LexicalEditor";

package/dist/patterns/Accordion.js

@@ -3,6 +3,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { ArrowDownSLineIcon, ArrowUpSLineIcon } from "../icons";
+import { RESET_BUTTON } from "../utils/reset";
 /** 배너같이 생겼으나 누를 때마다 하단내용이 접힘(보이지않음)/펼침(보임) 상태가 바뀌는 컴포넌트입니다. */
 export function Accordion(props) {
     const { className, icon, title, children, open = false, onClick, wrapperClassName, } = props;
@@ -10,7 +11,7 @@ export function Accordion(props) {
         display: flex;
         flex-direction: column;
         gap: 2px;
-      `, className: wrapperClassName }, { children: [_jsxs(Container, Object.assign({ className: className, onClick: onClick }, { children: [_jsxs(Title, { children: [icon, title] }), open ? _jsx(ArrowUpSLineIcon, {}) : _jsx(ArrowDownSLineIcon, {})] })), open && children] })));
+      `, className: wrapperClassName }, { children: [_jsxs(Container, Object.assign({ type: "button", className: className, onClick: onClick, "aria-expanded": open }, { children: [_jsxs(Title, { children: [icon, title] }), open ? _jsx(ArrowUpSLineIcon, {}) : _jsx(ArrowDownSLineIcon, {})] })), open && children] })));
 }
 const Title = styled.div(({ theme }) => css `
     display: flex;
@@ -21,7 +22,8 @@ const Title = styled.div(({ theme }) => css `
     font-weight: 700;
     line-height: 16px; /* 133.333% */
   `);
-const Container = styled.div `
+const Container = styled.button `
+  ${RESET_BUTTON}
   display: flex;
   padding: 8px 16px;
   align-items: center;

package/dist/patterns/Dropdown/Dropdown.js

@@ -11,10 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { forwardRef, useMemo, useRef, useState } from "react";
+import { forwardRef, useId, useRef, useState } from "react";
 import { Button, ArrowDownSFillIcon, } from "../..";
 import { DropdownMenu } from "./DropdownMenu";
-import { uid } from "uid";
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=203-95329&t=FwczLZ1IVvskUVbT-0)
  */
@@ -32,7 +31,7 @@ const Dropdown = forwardRef(function Dropdown(props, ref) {
     const isControlled = menuProps.open !== undefined;
     const [open, setOpen] = useState(false);
     const [itemState, setItemState] = useState(new Map());
-    const dropdownMenuId = useMemo(() => `dropdown-menu-${uid()}`, []);
+    const dropdownMenuId = `dropdown-menu-${useId()}`;
     const handleClick = (e) => {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
         if (!isControlled)

package/dist/patterns/Dropdown/DropdownItem/DropdownItem.js

@@ -14,12 +14,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
 import { css } from "@emotion/react";
 import * as React from "react";
 import styled from "@emotion/styled";
-import { CheckboxInput, ArrowRightSLineIcon, HOVER, } from "../../..";
-import { useContext, useMemo, useRef } from "react";
+import { CheckboxInput, ArrowRightSLineIcon, HOVER, RESET_BUTTON, } from "../../..";
+import { useContext, useId, useRef } from "react";
 import { DropdownMenu } from "../DropdownMenu";
 import { DropdownContext } from "../DropdownContext";
 import { getSelected, setSelected } from "./selected";
-import { uid } from "uid";
 const TYPE_TO_COLOR = (theme, type) => ({
     default: theme.color.foreground.neutralBase,
     danger: theme.color.foreground.danger,
@@ -28,10 +27,10 @@ const TYPE_TO_COLOR = (theme, type) => ({
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1900&t=FwczLZ1IVvskUVbT-0)
  */
 const DropdownItem = React.forwardRef(function DropdownItem(props, ref) {
-    const { className, index, labelCss, component: Component = "div", type = "default", checkbox, checkboxProps = { checked: false }, startIcon, label, endIcon, preserveIconColor = false, disabled, active, onMouseEnter, onMouseLeave, onClick, subMenuProps, children } = props, other = __rest(props, ["className", "index", "labelCss", "component", "type", "checkbox", "checkboxProps", "startIcon", "label", "endIcon", "preserveIconColor", "disabled", "active", "onMouseEnter", "onMouseLeave", "onClick", "subMenuProps", "children"]);
+    const { className, index, labelCss, component: Component = "button", type = "default", checkbox, checkboxProps = { checked: false }, startIcon, label, endIcon, preserveIconColor = false, disabled, active, onMouseEnter, onMouseLeave, onClick, subMenuProps, children } = props, other = __rest(props, ["className", "index", "labelCss", "component", "type", "checkbox", "checkboxProps", "startIcon", "label", "endIcon", "preserveIconColor", "disabled", "active", "onMouseEnter", "onMouseLeave", "onClick", "subMenuProps", "children"]);
     const itemRef = useRef(null);
     const { open, onCloseOnItemClick, nestedIndex, itemState, setItemState } = useContext(DropdownContext);
-    const dropdownMenuId = useMemo(() => `dropdown-menu-${uid()}`, []);
+    const dropdownMenuId = `dropdown-menu-${useId()}`;
     const absItemIndex = nestedIndex ? `${nestedIndex}-${index}` : `${index}`;
     // 서브메뉴가 존재하는지 여부
     const isSubMenuExist = Boolean(children);
@@ -51,7 +50,12 @@ const DropdownItem = React.forwardRef(function DropdownItem(props, ref) {
             setSelected(setItemState, absItemIndex);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Component, Object.assign({ className: className, ref: ref, tabIndex: disabled ? -1 : 0, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: handleClick, "aria-disabled": disabled }, other, { "aria-expanded": isSubMenuExist ? isSubMenuShowed : undefined, "aria-controls": isSubMenuExist ? dropdownMenuId : undefined }, { children: _jsxs(Item, Object.assign({ ref: itemRef, disabled: disabled, selected: isSubMenuShowed || Boolean(active) }, { children: [_jsxs(LeftWrapper, { children: [checkbox && (_jsx(StyledCheckboxInput, Object.assign({}, checkboxProps, { disabled: disabled, onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Component, Object.assign({ className: className, ref: ref, tabIndex: disabled ? -1 : 0, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: handleClick, "aria-disabled": disabled }, other, { "aria-expanded": isSubMenuExist ? isSubMenuShowed : undefined, "aria-controls": isSubMenuExist ? dropdownMenuId : undefined, disabled: disabled }, (Component === "button"
+                ? {
+                    type: "button",
+                    css: RESET_BUTTON,
+                }
+                : {}), { children: _jsxs(Item, Object.assign({ ref: itemRef, disabled: disabled, selected: isSubMenuShowed || Boolean(active) }, { children: [_jsxs(LeftWrapper, { children: [checkbox && (_jsx(StyledCheckboxInput, Object.assign({}, checkboxProps, { disabled: disabled, onClick: (e) => {
                                         e.stopPropagation();
                                     } }))), startIcon && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: startIcon }))), _jsx(LabelDiv, Object.assign({ css: labelCss, type: type }, { children: label }))] }), endIcon && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: endIcon }))), !endIcon && isSubMenuExist && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: _jsx(ArrowRightSLineIcon, {}) })))] })) })), isSubMenuExist && (_jsx(DropdownContext.Provider, Object.assign({ value: {
                     open,

package/dist/patterns/LexicalEditor/nodes/ImageNode/ImageComponent.js

@@ -3,7 +3,7 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
 import { mergeRegister } from "@lexical/utils";
 import { $getNodeByKey, $getSelection, $isNodeSelection, $isRangeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, createCommand, DRAGSTART_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from "lexical";
-import { Suspense, useCallback, useEffect, useRef, useState, } from "react";
+import { Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { $isImageNode } from "./ImageNode";
 import { SquareButton } from "../../../../components/SquareButton";
 import { Settings3FillIcon } from "../../../../icons";
@@ -13,6 +13,7 @@ import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 import { ImageNotAvailable } from "./ImageNotAvailable";
 import { ImageResizer } from "./ImageResizer";
 import { css } from "@emotion/react";
+import { RESET_BUTTON } from "../../../../utils/reset";
 const imageCache = new Set();
 export const RIGHT_CLICK_IMAGE_COMMAND = createCommand("RIGHT_CLICK_IMAGE_COMMAND");
 function useSuspenseImage(src) {
@@ -32,6 +33,17 @@ function useSuspenseImage(src) {
 }
 function LazyImage({ altText, className, imageRef, src, width, height, maxWidth: _maxWidth, onError, title, onClick, }) {
     useSuspenseImage(src);
+    if (onClick) {
+        return (_jsx("button", Object.assign({ type: "button", css: RESET_BUTTON, onClick: onClick, "aria-label": "\uC774\uBBF8\uC9C0 (\uC0C8 \uD0ED)" }, { children: _jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, style: {
+                    height,
+                    // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+                    // maxWidth: `min(${maxWidth}px, 100%)`,
+                    // 이미지가 maxWidth보다 클 경우 이미지를 줄이지 않기 위해 100%로 변경
+                    // fixme: maxWidth를 수정할 수 있게 되면 원복합니다.
+                    maxWidth: "100%",
+                    width,
+                }, title: title, onError: onError, draggable: "false" }) })));
+    }
     return (_jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, style: {
             height,
             // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
@@ -40,7 +52,7 @@ function LazyImage({ altText, className, imageRef, src, width, height, maxWidth:
             // fixme: maxWidth를 수정할 수 있게 되면 원복합니다.
             maxWidth: "100%",
             width,
-        }, title: title, onClick: onClick, onError: onError, draggable: "false" }));
+        }, title: title, onError: onError, draggable: "false" }));
 }
 export function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resizable, }) {
     const imageRef = useRef(null);
@@ -184,7 +196,7 @@ export function ImageComponent({ src, altText, nodeKey, width, height, maxWidth,
                         ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
                         : null, css: css `
                 cursor: pointer;
-              `, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth, onError: () => setIsLoadError(true), onClick: () => window.open(src, "_blank"), title: "\uD074\uB9AD\uD574\uC11C \uC6D0\uBCF8 \uC774\uBBF8\uC9C0 \uBCF4\uAE30" })) })) })));
+              `, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth, onError: () => setIsLoadError(true), onClick: () => window.open(src, "_blank"), title: "\uD074\uB9AD\uD574\uC11C \uC6D0\uBCF8 \uC774\uBBF8\uC9C0 \uBCF4\uAE30." })) })) })));
     }
     return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx("div", Object.assign({ draggable: draggable, css: css `
               // ImageResizer를 위한 relative 설정입니다.

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/FormSelection.js

@@ -9,6 +9,7 @@ import { SquareButton } from "../../../../../components/SquareButton";
 import { Switch } from "../../../../../components/Switch";
 import { useState } from "react";
 import { InsertImageDialog } from "../../../components/InsertImageDialog";
+import { RESET_BUTTON } from "../../../../../utils/reset";
 export function FormSelection(props) {
     var _a;
     const { index, control, rules, onDelete } = props;
@@ -60,7 +61,7 @@ export function FormSelection(props) {
                                 : "이미지 삽입하기",
                         } }), _jsxs(Answer, Object.assign({ onClick: () => {
                             onChange(Object.assign(Object.assign({}, value), { isAnswer: !value.isAnswer }));
-                        } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value.isAnswer), size: "small" })] })), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, buttonProps: {
+                        } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value.isAnswer), size: "small", inputProps: { tabIndex: -1 } })] })), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, buttonProps: {
                             "aria-label": "삭제",
                         } }))] }))] }));
 }
@@ -89,7 +90,8 @@ const Index = styled.div(({ theme }) => css `
     font-weight: 800;
     line-height: 16px;
   `);
-const Answer = styled.div(({ theme }) => css `
+const Answer = styled.button(({ theme }) => css `
+    ${RESET_BUTTON}
     display: flex;
     align-items: center;
     padding-right: 4px;

package/dist/patterns/LexicalEditor/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { Dispatch } from "react";
 import { LexicalEditor } from "lexical";
 export interface FloatingLinkEditorProps {

package/dist/patterns/LexicalEditor/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useCallback, useEffect, useId, useRef, useState, } from "react";
 import { sanitizeUrl } from "../../utils/url";
 import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from "lexical";
 import { getSelectedNode } from "../../utils/getSelectedNode";
@@ -9,6 +10,7 @@ import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 import styled from "@emotion/styled";
 import { CloseFillIcon, CheckLineIcon, EditLineIcon, DeleteBinLineIcon, } from "../../../../icons";
 import { Input } from "../../../../components/Input";
+import { VISUALLY_HIDDEN } from "../../../../utils/visuallyHidden";
 export function FloatingLinkEditor(props) {
     const { editor, isLink, setIsLink, anchorElem, isLinkEditMode, setIsLinkEditMode, } = props;
     const editorRef = useRef(null);
@@ -16,6 +18,7 @@ export function FloatingLinkEditor(props) {
     const [linkUrl, setLinkUrl] = useState("");
     const [editedLinkUrl, setEditedLinkUrl] = useState("https://");
     const [lastSelection, setLastSelection] = useState(null);
+    const newWindowInfoId = `new-window-info-${useId()}`;
     const $updateLinkEditor = useCallback(() => {
         var _a, _b;
         const selection = $getSelection();
@@ -151,7 +154,7 @@ export function FloatingLinkEditor(props) {
                             } }, { children: _jsx(CloseFillIcon, {}) })), _jsx(Button, Object.assign({ tabIndex: 0, onClick: (event) => {
                                 event.preventDefault();
                                 handleLinkSubmission();
-                            } }, { children: _jsx(CheckLineIcon, {}) }))] })] })) : (_jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ href: sanitizeUrl(linkUrl), target: "_blank", rel: "noopener noreferrer" }, { children: linkUrl })), _jsxs(Buttons, { children: [_jsx(Button, Object.assign({ tabIndex: 0, onClick: (event) => {
+                            } }, { children: _jsx(CheckLineIcon, {}) }))] })] })) : (_jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ href: sanitizeUrl(linkUrl), target: "_blank", rel: "noopener noreferrer", "aria-labelledby": newWindowInfoId }, { children: linkUrl })), _jsx("div", Object.assign({ id: newWindowInfoId, css: VISUALLY_HIDDEN }, { children: "\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC" })), _jsxs(Buttons, { children: [_jsx(Button, Object.assign({ tabIndex: 0, onClick: (event) => {
                                 event.preventDefault();
                                 setEditedLinkUrl(linkUrl);
                                 setIsLinkEditMode(true);

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -30,10 +30,21 @@ export const SegmentedControlButton = React.forwardRef(function SegmentedControl
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    const { label } = other;
-    return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, startIcon: typeof startIcon === "function" ? startIcon(isActive) : startIcon, endIcon: typeof endIcon === "function" ? endIcon(isActive) : endIcon, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick, disabled: context.disabled || props.disabled, title: isActive
-            ? (typeof label === "string" ? `${label} 선택됨` : "선택됨")
-            : undefined })));
+    // 화살표 키(좌, 우)로 인접 버튼으로 포커스 이동하는 로직
+    const handleKeyDown = (e) => {
+        let sibling = null;
+        if (e.key === "ArrowRight") {
+            sibling = e.currentTarget.nextElementSibling;
+        }
+        else if (e.key === "ArrowLeft") {
+            sibling = e.currentTarget.previousElementSibling;
+        }
+        if (sibling instanceof HTMLButtonElement) {
+            e.preventDefault();
+            sibling.focus();
+        }
+    };
+    return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, startIcon: typeof startIcon === "function" ? startIcon(isActive) : startIcon, endIcon: typeof endIcon === "function" ? endIcon(isActive) : endIcon, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick, onKeyDown: handleKeyDown, disabled: context.disabled || props.disabled, "aria-selected": isActive, role: "tab", tabIndex: isActive ? 0 : -1 })));
 });
 const StyledButton = styled(Button, {
     shouldForwardProp: (prop) => prop !== "isActive",

package/dist/patterns/SegmentedControl/SegmentedControlGroup.js

@@ -29,7 +29,7 @@ export const SegmentedControlGroup = React.forwardRef(function SegmentedControlG
           background-color: ${theme.color.background.neutralAlt};
           border-radius: 8px;
           border: 1px solid ${theme.color.background.neutralAltActive};
-        ` }, { children: _jsx(Context.Provider, Object.assign({ value: Object.assign(Object.assign({}, props), { onClick: (newValue) => {
+        `, role: "tablist", "aria-orientation": "horizontal" }, { children: _jsx(Context.Provider, Object.assign({ value: Object.assign(Object.assign({}, props), { onClick: (newValue) => {
                     var _a, _b, _c;
                     if (multiSelect) {
                         if (props.value.includes(newValue)) {

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.js

@@ -20,7 +20,7 @@ import { SegmentedControlGroupPropsContext, } from "./SegmentedControlGroupProps
  * [피그마](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, icon } = props, other = __rest(props, ["onClick", "icon"]);
+    const { onClick, icon, buttonProps } = props, other = __rest(props, ["onClick", "icon", "buttonProps"]);
     const context = useContext(SegmentedControlGroupPropsContext);
     const handleClick = (e) => {
         var _a;
@@ -30,7 +30,25 @@ export const SegmentedControlSquareButton = React.forwardRef(function SegmentedC
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(StyledSquareButton, Object.assign({}, other, { ref: ref, isActive: isActive, icon: typeof icon === "function" ? icon(isActive) : icon, color: isActive ? "white" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: handleClick, disabled: context.disabled || props.disabled })));
+    // 화살표 키(좌, 우)로 인접 버튼으로 포커스 이동하는 로직
+    const handleKeyDown = (e) => {
+        var _a, _b, _c, _d;
+        let siblingButton = null;
+        if (e.key === "ArrowRight") {
+            // sibling 요소의 첫 번째 자식인 버튼에 포커스 이동 처리
+            siblingButton =
+                (_b = (_a = e.currentTarget.nextElementSibling) === null || _a === void 0 ? void 0 : _a.firstElementChild) !== null && _b !== void 0 ? _b : null;
+        }
+        else if (e.key === "ArrowLeft") {
+            siblingButton =
+                (_d = (_c = e.currentTarget.previousElementSibling) === null || _c === void 0 ? void 0 : _c.firstElementChild) !== null && _d !== void 0 ? _d : null;
+        }
+        if (siblingButton instanceof HTMLButtonElement) {
+            e.preventDefault();
+            siblingButton.focus();
+        }
+    };
+    return (_jsx(StyledSquareButton, Object.assign({}, other, { ref: ref, isActive: isActive, icon: typeof icon === "function" ? icon(isActive) : icon, color: isActive ? "white" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: handleClick, onKeyDown: handleKeyDown, disabled: context.disabled || props.disabled, buttonProps: Object.assign(Object.assign({}, buttonProps), { "aria-selected": isActive, role: "tab", tabIndex: isActive ? 0 : -1 }) })));
 });
 const StyledSquareButton = styled(SquareButton, {
     shouldForwardProp: (prop) => prop !== "isActive",

package/dist/utils/visuallyHidden.d.ts

@@ -0,0 +1 @@
+export declare const VISUALLY_HIDDEN: import("@emotion/utils").SerializedStyles;

package/dist/utils/visuallyHidden.js

@@ -0,0 +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; /* 텍스트가 줄 바뀜 없이 한 줄로 유지되도록 */
+`;

package/package.json

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