@team-monolith/cds 0.1.8 → 0.2.0

package/dist/patterns/Navigation/NavigationHorizontal.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface NavigationHorizontalProps {
+    className?: string;
+    component?: React.ElementType;
+    children?: React.ReactNode;
+    size: "small" | "medium";
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A92757)
+ */
+export declare function NavigationHorizontal(props: NavigationHorizontalProps): React.ReactElement;

package/dist/patterns/Navigation/NavigationHorizontal.js

@@ -0,0 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { NavigationContext } from "./NavigationContext";
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A92757)
+ */
+export function NavigationHorizontal(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "nav" : _a, children = props.children;
+    return (_jsx(Component, __assign({ className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: inline-flex;\n        padding: 0px 24px;\n        gap: 40px;\n      "], ["\n        display: inline-flex;\n        padding: 0px 24px;\n        gap: 40px;\n      "]))) }, { children: _jsx(NavigationContext.Provider, __assign({ value: { size: props.size, type: "horizontal" } }, { children: children })) })));
+}
+var templateObject_1;

package/dist/patterns/Navigation/NavigationItem.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface NavigationItemProps {
+    className?: string;
+    /** 주로 React Router의 NavLink 입니다. */
+    component: React.ElementType;
+    label: string;
+    to: string;
+}
+export declare function NavigationItem(props: NavigationItemProps): React.ReactElement;

package/dist/patterns/Navigation/NavigationItem.js

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import React from "react";
+import Button from "../../components/Button";
+import { NavigationContext } from "./NavigationContext";
+export function NavigationItem(props) {
+    var className = props.className, Component = props.component, label = props.label, to = props.to;
+    var _a = React.useContext(NavigationContext), size = _a.size, type = _a.type;
+    return (_jsx(Component, __assign({ className: className, to: to }, { children: function (_a) {
+            var isActive = _a.isActive;
+            return (_jsx(StyledButton, { type: type, size: size, label: label, color: isActive ? "secondary" : "textNeutral" }));
+        } })));
+}
+var StyledButton = styled(Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var type = _a.type;
+    return type === "vertical" && "width: 100%;";
+});
+var templateObject_1;

package/dist/patterns/Navigation/NavigationVertical.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface NavigationVerticalProps {
+    className?: string;
+    component?: React.ElementType;
+    children?: React.ReactNode;
+    /** 컴포넌트 크기 */
+    size: "small" | "medium";
+    /** 전체 너비 유무. Vertical 에서만 동작합니다. */
+    fullWidth?: boolean;
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A92757)
+ */
+export declare function NavigationVertical(props: NavigationVerticalProps): React.ReactElement;

package/dist/patterns/Navigation/NavigationVertical.js

@@ -0,0 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { NavigationContext } from "./NavigationContext";
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A92757)
+ */
+export function NavigationVertical(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "nav" : _a, fullWidth = props.fullWidth, children = props.children;
+    return (_jsx(Component, __assign({ className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        width: ", ";\n        flex-direction: column;\n        gap: 8px;\n      "], ["\n        display: flex;\n        width: ", ";\n        flex-direction: column;\n        gap: 8px;\n      "])), fullWidth ? "100%" : "240px") }, { children: _jsx(NavigationContext.Provider, __assign({ value: { size: props.size, type: "vertical" } }, { children: children })) })));
+}
+var templateObject_1;

package/dist/patterns/Navigation/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./NavigationHorizontal";
+export * from "./NavigationVertical";
+export * from "./NavigationItem";

package/dist/patterns/Navigation/index.js

@@ -0,0 +1,3 @@
+export * from "./NavigationHorizontal";
+export * from "./NavigationVertical";
+export * from "./NavigationItem";

package/dist/patterns/Table/Table.d.ts

@@ -9,6 +9,8 @@ export interface TableProps {
     size: TableSize;
     /** fullWidth 여부 */
     fullWidth?: boolean;
+    /** `true`일 때 상호작용이 불가하며, 글자가 회색 처리됩니다. */
+    disabled?: boolean;
 }
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=181-91732&t=07ngLzGHuU3xxg4S-0)

package/dist/patterns/Table/Table.js

@@ -17,17 +17,17 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, useTheme } from "@emotion/react";
 import { RESET_TABLE } from "../../utils/reset";
-import TableSizeContext from "./TableSizeContext";
+import TablePropsContext from "./TablePropsContext";
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=181-91732&t=07ngLzGHuU3xxg4S-0)
  */
 export default function Table(props) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "table" : _a, children = props.children, size = props.size, fullWidth = props.fullWidth;
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "table" : _a, children = props.children, size = props.size, disabled = props.disabled, fullWidth = props.fullWidth;
     var theme = useTheme();
     return (_jsx(Component, __assign({ className: className, css: [
             RESET_TABLE,
             css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-collapse: separate;\n\n          background: ", ";\n          border: 1px solid ", ";\n          color: ", ";\n          border-radius: 4px;\n        "], ["\n          border-collapse: separate;\n\n          background: ", ";\n          border: 1px solid ", ";\n          color: ", ";\n          border-radius: 4px;\n        "])), theme.color.background.neutralBase, theme.color.background.neutralAlt, theme.color.foreground.neutralBase),
             fullWidth && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            width: 100%;\n          "], ["\n            width: 100%;\n          "]))),
-        ] }, { children: _jsx(TableSizeContext.Provider, __assign({ value: { size: size } }, { children: children })) })));
+        ] }, { children: _jsx(TablePropsContext.Provider, __assign({ value: { size: size, disabled: disabled } }, { children: children })) })));
 }
 var templateObject_1, templateObject_2;

package/dist/patterns/Table/TableCell.js

@@ -18,7 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
 import { css, useTheme } from "@emotion/react";
 import React, { useContext } from "react";
 import TableVariantContext from "./TableVariantContext";
-import TableSizeContext from "./TableSizeContext";
+import TablePropsContext from "./TablePropsContext";
 import { ArrowDownFillIcon, ArrowUpFillIcon, ExpandUpDownIcon, } from "../../icons/arrows";
 import styled from "@emotion/styled";
 import { RESET_BUTTON } from "../../utils/reset";
@@ -35,7 +35,7 @@ export default function TableCell(props) {
     // variant 값에 따라 th 태그로 그릴지, td 태그로 그릴지를 결정합니다.
     var variant = useContext(TableVariantContext).variant;
     var Element = (Component !== null && Component !== void 0 ? Component : variant === "head") ? "th" : "td";
-    var size = useContext(TableSizeContext).size;
+    var _a = useContext(TablePropsContext), size = _a.size, disabled = _a.disabled;
     var theme = useTheme();
     if (variant === "body") {
         return (_jsx(Element, __assign({ colSpan: colSpan, className: className, onClick: onClick, css: [
@@ -49,7 +49,7 @@ export default function TableCell(props) {
             Element === "th"
                 ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n              background: ", ";\n              font-style: normal;\n              font-weight: 500;\n              font-size: 14px;\n              line-height: 16px;\n            "], ["\n              background: ", ";\n              font-style: normal;\n              font-weight: 500;\n              font-size: 14px;\n              line-height: 16px;\n            "])), theme.color.background.neutralAlt) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n              font-style: normal;\n              font-weight: 400;\n              font-size: 16px;\n              line-height: 24px;\n            "], ["\n              font-style: normal;\n              font-weight: 400;\n              font-size: 16px;\n              line-height: 24px;\n            "]))),
             css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          display: table-cell;\n          text-align: initial;\n\n          &:first-of-type {\n            padding-left: 16px;\n          }\n\n          &:last-of-type {\n            padding-right: 16px;\n          }\n        "], ["\n          display: table-cell;\n          text-align: initial;\n\n          &:first-of-type {\n            padding-left: 16px;\n          }\n\n          &:last-of-type {\n            padding-right: 16px;\n          }\n        "]))),
-        ] }, { children: _jsxs(Cell, { children: [children, _jsxs(Buttons, { children: [sort && _jsx(SortButton, { sort: sort, onSortClick: onSortClick }), isFilterActive !== undefined && (_jsx(FilterButton, { isFilterActive: isFilterActive !== null && isFilterActive !== void 0 ? isFilterActive : false, onFilterClick: onFilterClick, ref: filterButttonRef }))] })] }) })));
+        ] }, { children: _jsxs(Cell, { children: [children, _jsxs(Buttons, { children: [sort && (_jsx(SortButton, { sort: sort, onSortClick: onSortClick, disabled: disabled })), isFilterActive !== undefined && (_jsx(FilterButton, { isFilterActive: isFilterActive !== null && isFilterActive !== void 0 ? isFilterActive : false, onFilterClick: onFilterClick, ref: filterButttonRef, disabled: disabled }))] })] }) })));
 }
 var Cell = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 var Buttons = styled.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  gap: 4px;\n"], ["\n  display: flex;\n  gap: 4px;\n"])));
@@ -66,11 +66,11 @@ var SortButton = function (props) {
             sortIcon = _jsx(ExpandUpDownIcon, {});
             break;
     }
-    return (_jsx("button", __assign({ onClick: props.onSortClick, css: css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        ", "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding: 6px;\n\n        cursor: pointer;\n\n        svg {\n          width: 12px;\n          height: 12px;\n        }\n      "], ["\n        ", "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding: 6px;\n\n        cursor: pointer;\n\n        svg {\n          width: 12px;\n          height: 12px;\n        }\n      "])), RESET_BUTTON) }, { children: sortIcon })));
+    return (_jsx("button", __assign({ disabled: props.disabled, onClick: props.onSortClick, css: css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        ", "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding: 6px;\n\n        cursor: pointer;\n\n        svg {\n          width: 12px;\n          height: 12px;\n        }\n      "], ["\n        ", "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding: 6px;\n\n        cursor: pointer;\n\n        svg {\n          width: 12px;\n          height: 12px;\n        }\n      "])), RESET_BUTTON) }, { children: sortIcon })));
 };
 var FilterButton = React.forwardRef(function (props, ref) {
     var theme = useTheme();
-    return (_jsx("button", __assign({ ref: ref, onClick: props.onFilterClick, css: [
+    return (_jsx("button", __assign({ ref: ref, disabled: props.disabled, onClick: props.onFilterClick, css: [
             css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          ", "\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          padding: 6px;\n\n          cursor: pointer;\n\n          svg {\n            width: 12px;\n            height: 12px;\n          }\n        "], ["\n          ", "\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          padding: 6px;\n\n          cursor: pointer;\n\n          svg {\n            width: 12px;\n            height: 12px;\n          }\n        "])), RESET_BUTTON),
             props.isFilterActive && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n            color: ", ";\n          "], ["\n            color: ", ";\n          "])), theme.color.foreground.primary),
         ] }, { children: _jsx(FilterFillIcon, {}) })));

package/dist/patterns/Table/TablePropsContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { TableSize } from "./Table";
+declare const TablePropsContext: React.Context<{
+    size?: TableSize | undefined;
+    disabled?: boolean | undefined;
+}>;
+export default TablePropsContext;

package/dist/patterns/Table/TablePropsContext.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+var TablePropsContext = React.createContext({});
+export default TablePropsContext;

package/dist/patterns/Table/TableRow.d.ts

@@ -8,5 +8,7 @@ export interface TableRowProps {
     disableHover?: boolean;
     /** 이 행이 선택되었음을 결정하는 속성. `true`일때 배경색이 활성화됩니다. */
     isSelected?: boolean;
+    /** 행을 클릭할 때 호출되는 함수 */
+    onClick?: (event: any) => void;
 }
 export default function TableRow(props: TableRowProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Table/TableRow.js

@@ -16,14 +16,19 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, useTheme } from "@emotion/react";
+import { useContext } from "react";
 import { HOVER } from "../../utils/hover";
+import TablePropsContext from "./TablePropsContext";
 export default function TableRow(props) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "tr" : _a, isSelected = props.isSelected, disableHover = props.disableHover, children = props.children;
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "tr" : _a, isSelected = props.isSelected, disableHover = props.disableHover, children = props.children, onClick = props.onClick;
     var theme = useTheme();
-    return (_jsx(Component, __assign({ className: className, css: [
+    var disabled = useContext(TablePropsContext).disabled;
+    return (_jsx(Component, __assign({ className: className, onClick: disabled ? undefined : onClick, css: [
             css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: table-row;\n          &:not(:first-of-type) {\n            td {\n              border-top: 1px solid ", ";\n            }\n          }\n        "], ["\n          display: table-row;\n          &:not(:first-of-type) {\n            td {\n              border-top: 1px solid ", ";\n            }\n          }\n        "])), theme.color.background.neutralAlt),
             isSelected && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            background: ", ";\n          "], ["\n            background: ", ";\n          "])), theme.color.container.primaryContainer),
-            !disableHover && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), HOVER(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              background: ", ";\n            "], ["\n              background: ", ";\n            "])), theme.color.container.primaryContainer))),
+            disabled
+                ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              color: ", ";\n            "], ["\n              color: ", ";\n            "])), theme.color.foreground.neutralBaseDisabled) : css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n              ", "\n              ", "\n            "], ["\n              ", "\n              ", "\n            "])), !disableHover &&
+                HOVER(css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  background: ", ";\n                "], ["\n                  background: ", ";\n                "])), theme.color.container.primaryContainer)), onClick && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                cursor: pointer;\n              "], ["\n                cursor: pointer;\n              "])))),
         ] }, { children: children })));
 }
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/cds/components/AlertDialog/AlertDialogContent.tsx

@@ -17,22 +17,20 @@ export const AlertDialogContent = React.forwardRef<
   const { className, component: Component = "div", children, ...other } = props;
   const theme = useTheme();
   return (
-    <>
-      <Component
-        {...other}
-        ref={ref}
-        className={className}
-        css={css`
-          grid-area: content;
+    <Component
+      {...other}
+      ref={ref}
+      className={className}
+      css={css`
+        grid-area: content;
 
-          font-style: normal;
-          font-size: 18px;
-          line-height: 28px;
-          color: ${theme.color.foreground.neutralBase};
-        `}
-      >
-        {children}
-      </Component>
-    </>
+        font-style: normal;
+        font-size: 18px;
+        line-height: 28px;
+        color: ${theme.color.foreground.neutralBase};
+      `}
+    >
+      {children}
+    </Component>
   );
 });

package/src/cds/components/Button.tsx

@@ -3,6 +3,7 @@ import { css, SerializedStyles, Theme, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import React from "react";
 import { HOVER } from "../utils/hover";
+import { PolymorphicProps } from "@mui/base";
 
 export type ButtonColor =
   | "primary"
@@ -14,32 +15,6 @@ export type ButtonColor =
 
 export type ButtonSize = "large" | "medium" | "small" | "xsmall";
 
-export interface ButtonProps {
-  className?: string;
-  component?: React.ElementType;
-
-  /** 비활성화 여부 */
-  disabled?: boolean;
-
-  /** 컴포넌트 색상 */
-  color: ButtonColor;
-
-  /** 컴포넌트 크기 */
-  size: ButtonSize;
-
-  /** 컴포넌트 좌측에 표기될 아이콘 */
-  startIcon?: React.ReactNode;
-
-  /** 컴포넌트 우측에 표기될 아이콘 */
-  endIcon?: React.ReactNode;
-
-  /** 컴포넌트 내 표기될 문자열 */
-  label: string;
-
-  /** 버튼 클릭 시 호출될 콜백 함수 */
-  onClick?: () => void;
-}
-
 const COLOR_TO_BUTTON_STYLE = (theme: Theme, color: ButtonColor) =>
   ({
     primary: css`
@@ -176,63 +151,109 @@ const SIZE_TO_LABEL_STYLE: { [K in ButtonSize]: SerializedStyles } = {
   `,
 };
 
+export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
+  className?: string;
+  component?: RootComponentType;
+
+  /** 비활성화 여부 */
+  disabled?: boolean;
+
+  /** 컴포넌트 색상 */
+  color: ButtonColor;
+
+  /** 컴포넌트 크기 */
+  size: ButtonSize;
+
+  /** 컴포넌트 좌측에 표기될 아이콘 */
+  startIcon?: React.ReactNode;
+
+  /** 컴포넌트 우측에 표기될 아이콘 */
+  endIcon?: React.ReactNode;
+
+  /** 컴포넌트 내 표기될 문자열 */
+  label: string;
+
+  /** 버튼 클릭 시 호출될 콜백 함수 */
+  onClick?: () => void;
+}
+
+export type ButtonProps<
+  RootComponentType extends React.ElementType = ButtonTypeMap["defaultComponent"]
+> = PolymorphicProps<ButtonTypeMap<RootComponentType>, RootComponentType>;
+
+export interface ButtonTypeMap<
+  RootComponentType extends React.ElementType = "button"
+> {
+  props: ButtonOwnProps<RootComponentType>;
+  defaultComponent: RootComponentType;
+}
+
+type ButtonComponent = <RootComponentType extends React.ElementType = "button">(
+  props: ButtonProps<RootComponentType>
+) => React.ReactElement | null;
+
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
  */
-const Button = React.forwardRef<any, ButtonProps>(
-  (props, ref): React.ReactElement => {
-    const {
-      className,
-      component: Component = "button",
-      disabled,
-      color,
-      size,
-      startIcon,
-      endIcon,
-      label,
-      onClick,
-      ...other
-    } = props;
-    const theme = useTheme();
-
-    return (
-      <Component
-        {...other}
-        className={className}
-        ref={ref}
-        css={[
-          css`
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-
-            border: none;
-            border-radius: 8px;
-
-            cursor: pointer;
-            &:disabled {
-              cursor: default;
-              pointer-events: none;
-            }
-
-            font: inherit;
-          `,
-          COLOR_TO_BUTTON_STYLE(theme, color),
-          SIZE_TO_BUTTON_STYLE[size],
-        ]}
-        disabled={disabled}
-        onClick={onClick}
-      >
-        {startIcon}
-        <Label size={size}>{label}</Label>
-        {endIcon}
-      </Component>
-    );
-  }
-);
+const Button: ButtonComponent = React.forwardRef(function Button<
+  RootComponentType extends React.ElementType = "button"
+>(
+  props: ButtonProps<RootComponentType>,
+  ref: React.ComponentPropsWithRef<RootComponentType>['ref']
+): React.ReactElement {
+  const {
+    className,
+    component: Component = "button",
+    disabled,
+    color,
+    size,
+    startIcon,
+    endIcon,
+    label,
+    onClick,
+    ...other
+  } = props;
+  const theme = useTheme();
+
+  return (
+    <Component
+      {...other}
+      className={className}
+      ref={ref}
+      css={[
+        css`
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+
+          border: none;
+          border-radius: 8px;
+
+          cursor: pointer;
+          &:disabled {
+            cursor: default;
+            pointer-events: none;
+          }
+
+          font: inherit;
+          text-decoration: none;
+        `,
+        COLOR_TO_BUTTON_STYLE(theme, color),
+        SIZE_TO_BUTTON_STYLE[size],
+      ]}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {startIcon}
+      <Label size={size}>{label}</Label>
+      {endIcon}
+    </Component>
+  );
+});
 
 const Label = styled.span<{ size: ButtonSize }>`
   font-weight: 400;
+  white-space: nowrap;
   ${({ size }) => SIZE_TO_LABEL_STYLE[size]}
 `;
 

package/src/cds/icons/arrows.tsx

@@ -45,6 +45,31 @@ export const ArrowUpFillIcon = (props: { className?: string }) => (
     <path d="M13 12V20H11V12H4L12 4L20 12H13Z" fill="currentColor" />
   </svg>
 );
+export const ArrowRightFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M12 13H4V11H12V4L20 12L12 20V13Z" fill="currentColor" />
+  </svg>
+);
+export const ArrowLeftFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M12 13V20L4 12L12 4V11H20V13H12Z" fill="currentColor" />
+  </svg>
+);
+
 export const ArrowRightSLineIcon = (props: { className?: string }) => (
   <svg
     {...props}
@@ -59,3 +84,33 @@ export const ArrowRightSLineIcon = (props: { className?: string }) => (
     />
   </svg>
 );
+
+export const ArrowLeftLineIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M7.828 11H20v2H7.828l5.364 5.364l-1.414 1.414L4 12l7.778-7.778l1.414 1.414L7.828 11Z"
+    />
+  </svg>
+);
+
+export const ArrowRightLineIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="m16.172 11l-5.364-5.364l1.414-1.414L20 12l-7.778 7.778l-1.414-1.414L16.172 13H4v-2h12.172Z"
+    />
+  </svg>
+);

package/src/cds/icons/system.tsx

@@ -111,3 +111,18 @@ export const FilterFillIcon = (props: { className?: string }) => (
     <path d="M21 4V6H20L14 15V22H10V15L4 6H3V4H21Z" fill="currentColor" />
   </svg>
 );
+
+export const CheckboxMultipleBlankLine = (props: { className?: string }) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M7 7V3a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-4v3.992C17 21.55 16.551 22 15.992 22H3.008A1.006 1.006 0 0 1 2 20.992l.003-12.985C2.003 7.451 2.452 7 3.01 7H7Zm2 0h6.993C16.549 7 17 7.449 17 8.007V15h3V4H9v3ZM4.003 9L4 20h11V9H4.003Z"
+    />
+  </svg>
+);