@team-monolith/cds 1.100.2 → 1.100.3

package/dist/components/OverflowTooltip.d.ts

@@ -5,6 +5,8 @@ import { TooltipProps } from "./Tooltip";
 interface OverflowTooltipProps extends Omit<TooltipProps, "open" | "onOpen" | "onClose" | "children"> {
     className?: string;
     childrenCss?: SerializedStyles;
+    /** 접근성을 위한 aria 속성을 전달하기 위한 prop */
+    divProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 /**
  * 인자로 주어진 텍스트를 그립니다.

package/dist/components/OverflowTooltip.js

@@ -1,3 +1,14 @@
+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";
 import styled from "@emotion/styled";
 import { useRef, useState } from "react";
@@ -7,6 +18,7 @@ import { Tooltip } from "./Tooltip";
  * 공간이 부족하면 ...으로 표시하고 툴팁으로 전체 내용을 노출합니다.
  */
 export function OverflowTooltip(props) {
+    const { divProps } = props, tooltipProps = __rest(props, ["divProps"]);
     const tooltipRef = useRef(null);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
     const getIsOverflow = () => {
@@ -23,7 +35,7 @@ export function OverflowTooltip(props) {
     const handleClose = () => {
         setIsTooltipOpen(false);
     };
-    return (_jsx(Tooltip, Object.assign({ open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, props, { children: _jsx(OverflowDiv, Object.assign({ css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen }, { children: props.text })) })));
+    return (_jsx(Tooltip, Object.assign({ open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, tooltipProps, { children: _jsx(OverflowDiv, Object.assign({}, divProps, { css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen }, { children: props.text })) })));
 }
 const OverflowDiv = styled.div `
   overflow: hidden;

package/dist/components/Switch.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { InputHTMLAttributes } from "react";
 export type SwitchSize = "small" | "large";
 export interface SwitchProps {
     className?: string;
@@ -11,6 +11,8 @@ export interface SwitchProps {
     size: SwitchSize;
     /** 스위치 상태 변경 시 호출될 콜백 함수 */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    /** HTML input 태그에 전달될 props */
+    inputProps: InputHTMLAttributes<HTMLInputElement>;
 }
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-1577&t=9sDLb4XIOdmF2VMc-0)

package/dist/components/Switch.js

@@ -19,8 +19,8 @@ import { css } from "@emotion/react";
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-1577&t=9sDLb4XIOdmF2VMc-0)
  */
 export const Switch = React.forwardRef(function Switch(props, ref) {
-    const { className, checked, disabled = false, size, onChange } = props, other = __rest(props, ["className", "checked", "disabled", "size", "onChange"]);
-    return (_jsx(StyledSwitch, Object.assign({}, other, { ref: ref, className: className, checked: checked, disabled: disabled, onChange: onChange, switchSize: size })));
+    const { className, checked, disabled = false, size, onChange, inputProps } = props, other = __rest(props, ["className", "checked", "disabled", "size", "onChange", "inputProps"]);
+    return (_jsx(StyledSwitch, Object.assign({}, other, { ref: ref, className: className, checked: checked, disabled: disabled, onChange: onChange, switchSize: size, inputProps: inputProps })));
 });
 const SIZE_TO_SWTICH_SIZE = {
     large: {

package/dist/patterns/Accordion.d.ts

@@ -7,6 +7,7 @@ export interface AccordionProps {
     children: React.ReactNode;
     open?: boolean;
     onClick?: () => void;
+    buttonLabel?: string;
 }
 /** 배너같이 생겼으나 누를 때마다 하단내용이 접힘(보이지않음)/펼침(보임) 상태가 바뀌는 컴포넌트입니다. */
 export declare function Accordion(props: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Accordion.js

@@ -3,14 +3,15 @@ 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;
+    const { className, icon, title, children, open = false, onClick, wrapperClassName, buttonLabel, } = props;
     return (_jsxs("div", Object.assign({ css: css `
         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, "aria-label": buttonLabel }, { 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,13 @@ 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 }, (Component === "button"
+                ? {
+                    type: "button",
+                    disabled: disabled,
+                    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";
@@ -32,7 +32,7 @@ function useSuspenseImage(src) {
 }
 function LazyImage({ altText, className, imageRef, src, width, height, maxWidth: _maxWidth, onError, title, onClick, }) {
     useSuspenseImage(src);
-    return (_jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, style: {
+    return (_jsx("img", Object.assign({ className: className || undefined, src: src, alt: altText, ref: imageRef, style: {
             height,
             // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
             // maxWidth: `min(${maxWidth}px, 100%)`,
@@ -40,7 +40,17 @@ function LazyImage({ altText, className, imageRef, src, width, height, maxWidth:
             // fixme: maxWidth를 수정할 수 있게 되면 원복합니다.
             maxWidth: "100%",
             width,
-        }, title: title, onClick: onClick, onError: onError, draggable: "false" }));
+        }, title: title, "aria-label": title, onClick: onClick, onError: onError, draggable: "false" }, (onClick
+        ? {
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    onClick();
+                }
+            },
+        }
+        : {}))));
 }
 export function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resizable, }) {
     const imageRef = useRef(null);
@@ -184,7 +194,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. \uC6D0\uBCF8 \uC774\uBBF8\uC9C0\uB294 \uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BD\uB2C8\uB2E4." })) })) })));
     }
     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

@@ -60,7 +60,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: { "aria-label": "정답" } })] })), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, buttonProps: {
                             "aria-label": "삭제",
                         } }))] }))] }));
 }

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

@@ -151,7 +151,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", title: "\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uAE30" }, { children: linkUrl })), _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/package.json

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