@lunit/design-system 1.0.0-b.2 → 1.0.0-b.4

package/dist/types/components/Chip/Chip.styled.d.ts

@@ -6,7 +6,7 @@ export declare const StyledOutlinedChip: import("@emotion/styled").StyledCompone
     children?: null | undefined;
     classes?: Partial<import("@mui/material").ChipClasses> | undefined;
     clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "error" | "success" | "info" | "warning" | "default" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "default" | "primary" | "secondary" | undefined;
     deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     disabled?: boolean | undefined;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
@@ -16,16 +16,16 @@ export declare const StyledOutlinedChip: import("@emotion/styled").StyledCompone
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & OutlinedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & OutlinedChipProps, {}, {}>;
 export declare const StyledContainedChipBase: import("@emotion/styled").StyledComponent<{
     avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     children?: null | undefined;
     classes?: Partial<import("@mui/material").ChipClasses> | undefined;
     clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "error" | "success" | "info" | "warning" | "default" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "default" | "primary" | "secondary" | undefined;
     deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     disabled?: boolean | undefined;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
@@ -35,16 +35,16 @@ export declare const StyledContainedChipBase: import("@emotion/styled").StyledCo
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
 export declare const StyledContainedChipEnable: import("@emotion/styled").StyledComponent<{
     avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     children?: null | undefined;
     classes?: Partial<import("@mui/material").ChipClasses> | undefined;
     clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "error" | "success" | "info" | "warning" | "default" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "default" | "primary" | "secondary" | undefined;
     deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     disabled?: boolean | undefined;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
@@ -54,16 +54,16 @@ export declare const StyledContainedChipEnable: import("@emotion/styled").Styled
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps & EnableContainedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps & EnableContainedChipProps, {}, {}>;
 export declare const StyledContainedChipDeletable: import("@emotion/styled").StyledComponent<{
     avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     children?: null | undefined;
     classes?: Partial<import("@mui/material").ChipClasses> | undefined;
     clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "error" | "success" | "info" | "warning" | "default" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "default" | "primary" | "secondary" | undefined;
     deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     disabled?: boolean | undefined;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
@@ -73,7 +73,7 @@ export declare const StyledContainedChipDeletable: import("@emotion/styled").Sty
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;

package/dist/types/components/Toggle/Toggle.d.ts

@@ -1,3 +1,3 @@
-import type { ToggleProps } from './Toggle.types';
+import type { ToggleProps } from "./Toggle.types";
 declare const Toggle: (props: ToggleProps) => import("react/jsx-runtime").JSX.Element;
 export default Toggle;

package/dist/types/components/Toggle/Toggle.styled.d.ts

@@ -1,6 +1,6 @@
 import { SwitchProps } from "@mui/material";
 interface ToggleProps extends SwitchProps {
-    toggleSize: "medium" | "large";
+    toggleSize: "small" | "large";
 }
 export declare const CommonToggle: import("@emotion/styled").StyledComponent<SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ToggleProps, {}, {}>;
 export declare const CommonIndeterminateToggle: import("@emotion/styled").StyledComponent<SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ToggleProps, {}, {}>;

package/dist/types/components/Toggle/Toggle.types.d.ts

@@ -2,12 +2,12 @@ import type { SwitchProps } from "@mui/material";
 export interface ToggleProps extends Omit<SwitchProps, "size"> {
     /**
      * The size of the component.
-     * @default medium
+     * @default small
      */
-    size?: 'medium' | 'large';
+    size?: "small" | "large";
     /**
-    * If `true`, the component has consistent 'checked' value and change shape.
-    * @default false
-    */
+     * If `true`, the component has consistent 'checked' value and change shape.
+     * @default false
+     */
     indeterminate?: boolean;
 }

package/dist/types/components/ToggleButton/ToggleButton.d.ts

@@ -1,3 +1,3 @@
-import type { ToggleButtonProps } from "./ToggleButton.types";
-declare const ToggleButton: (props: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;
+import React from "react";
+declare const ToggleButton: React.ForwardRefExoticComponent<(Omit<import("./ToggleButton.types").ContainedToggleButtonProps, "ref"> | Omit<import("./ToggleButton.types").GhostToggleButtonProps, "ref"> | Omit<import("./ToggleButton.types").OutlinedToggleButtonProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
 export default ToggleButton;

package/dist/types/components/ToggleButton/ToggleButton.styled.d.ts

@@ -6,7 +6,7 @@ type CustomToggleButtonProps = ToggleButtonProps & {
 export declare const CustomToggleButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ToggleButtonClasses> | undefined;
-    color?: "primary" | "secondary" | "error" | "success" | "info" | "warning" | "standard" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "standard" | "primary" | "secondary" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -34,6 +34,10 @@ export declare const CustomToggleButton: import("@emotion/styled").StyledCompone
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "onChange" | "onClick" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "fullWidth" | "size" | "value" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CustomToggleButtonProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "tabIndex" | "color" | "onChange" | "onClick" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "fullWidth" | "size" | "value" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CustomToggleButtonProps, {}, {}>;
 export declare const IconAndChildrenWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    hasIconOnly: boolean;
+    size: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/dist/types/components/ToggleButton/ToggleButton.types.d.ts

@@ -1,20 +1,19 @@
 /// <reference types="react" />
 import type { ToggleButtonProps as MuiToggleButtonProps } from "@mui/material";
-interface ToggleButtonBaseProps extends Omit<MuiToggleButtonProps, "variant"> {
+export interface ToggleButtonBaseProps extends Omit<MuiToggleButtonProps, "variant"> {
     selectedColor?: "primary" | "secondary";
     icon?: React.ReactNode;
 }
-interface ContainedToggleButtonProps extends ToggleButtonBaseProps {
+export interface ContainedToggleButtonProps extends ToggleButtonBaseProps {
     kind?: "contained";
     color?: "primary" | "secondary";
 }
-interface GhostToggleButtonProps extends ToggleButtonBaseProps {
+export interface GhostToggleButtonProps extends ToggleButtonBaseProps {
     kind?: "ghost";
     color?: "primary" | "secondary";
 }
-interface OutlinedToggleButtonProps extends ToggleButtonBaseProps {
+export interface OutlinedToggleButtonProps extends ToggleButtonBaseProps {
     kind?: "outlined";
     color?: "primary";
 }
 export type ToggleButtonProps = ContainedToggleButtonProps | GhostToggleButtonProps | OutlinedToggleButtonProps;
-export {};

package/dist/types/foundation/Typography/index.d.ts

@@ -27,8 +27,7 @@ export declare const typographyDefaultProps: {
     };
 };
 export declare const createTypographyCssBaseline: () => {
-    html: {
-        fontFamily: string;
+    "*, *:before, *:after": {
         fontFeatureSettings: string;
     };
     ":root": {
@@ -70,10 +69,10 @@ export declare const createTypographyCssBaseline: () => {
         "--headline1-line-height": "68px";
         "--headline2-font-weight": "var(--font-weight-bold)";
         "--headline2-font-size": "38px";
-        "--headline2-line-height": "48px";
+        "--headline2-line-height": "65px";
         "--headline3-font-weight": "var(--font-weight-semibold)";
         "--headline3-font-size": "24px";
-        "--headline3-line-height": "36px";
+        "--headline3-line-height": "57px";
         "--headline4-font-weight": "var(--font-weight-semibold)";
         "--headline4-font-size": "20px";
         "--headline4-line-height": "28px";

package/dist/types/foundation/Typography/tokens.d.ts

@@ -39,10 +39,10 @@ export declare const cssVariables: {
     "--headline1-line-height": "68px";
     "--headline2-font-weight": "var(--font-weight-bold)";
     "--headline2-font-size": "38px";
-    "--headline2-line-height": "48px";
+    "--headline2-line-height": "65px";
     "--headline3-font-weight": "var(--font-weight-semibold)";
     "--headline3-font-size": "24px";
-    "--headline3-line-height": "36px";
+    "--headline3-line-height": "57px";
     "--headline4-font-weight": "var(--font-weight-semibold)";
     "--headline4-font-size": "20px";
     "--headline4-line-height": "28px";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/design-system",
-  "version": "1.0.0-b.2",
+  "version": "1.0.0-b.4",
   "description": "Lunit Design System",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",

package/src/components/Button/Button.styled.ts

@@ -213,20 +213,14 @@ export const iconStyle = ({
   "& .MuiButton-startIcon": {
     width: "20px",
     height: "20px",
+    padding: "1px",
     margin: 0,
     marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
 
-    // This style was added for Mui Button Svg Icon handling
     "*:nth-of-type(1)": {
-      fontSize: "20px",
+      fontSize: "18px",
     },
   },
-  svg: {
-    width: "20px",
-    height: "20px",
-    margin: 0,
-    marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
-  },
 });
 
 export const CustomButton = styled(MuiButton, {

package/src/components/Button/Button.tsx

@@ -1,19 +1,20 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { CustomButton } from "./Button.styled";
 
 import type { ButtonType, ButtonProps } from "./Button.types";
 
-const Button: ButtonType = (props: ButtonProps) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     size = "small",
     color = "primary",
     icon,
     className,
     children,
+    startIcon,
     ...buttonProps
   } = props;
-  const hasIconOnly = Boolean(icon && !children);
+  const hasIconOnly = Boolean((startIcon || icon) && !children);
 
   return (
     <>
@@ -21,11 +22,12 @@ const Button: ButtonType = (props: ButtonProps) => {
       {props.kind === "outlined" ? (
         <CustomButton
           {...buttonProps}
+          ref={ref}
           className={`outlined ${className ? className : ""}`}
           kind="outlined"
           color={props.color ?? "primary"}
           size={size}
-          startIcon={icon}
+          startIcon={startIcon || icon}
           hasIconOnly={hasIconOnly}
         >
           {!hasIconOnly && <>{children}</>}
@@ -33,13 +35,14 @@ const Button: ButtonType = (props: ButtonProps) => {
       ) : (
         <CustomButton
           {...buttonProps}
+          ref={ref}
           className={`${props.kind ?? "contained"} ${
             className ? className : ""
           }`}
           kind={props.kind ?? "contained"}
           color={props.color ?? "primary"}
           size={size}
-          startIcon={icon}
+          startIcon={startIcon || icon}
           hasIconOnly={hasIconOnly}
         >
           {!hasIconOnly && <>{children}</>}
@@ -47,6 +50,11 @@ const Button: ButtonType = (props: ButtonProps) => {
       )}
     </>
   );
-};
+  /**
+   * There is an issue between React 18, Mui's OverridableComponent type and the
+   * type coercion to temporarily fix it.
+   * https://github.com/lunit-io/design-system/pull/143#issuecomment-1831127232
+   */
+}) as ButtonType;
 
 export default Button;

package/src/components/TextField/TextField.style.ts

@@ -128,6 +128,7 @@ const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
       height: "100%",
       zIndex: -1,
       backgroundColor: lunit_token.core.hover,
+      borderRadius: "8px",
     },
     "&.Mui-focused": {
       "&:hover::before": {

package/src/components/TextField/TextField.tsx

@@ -55,7 +55,7 @@ const SingleTextField = forwardRef<HTMLDivElement, SingleTextFieldProps>(
 );
 
 const MultiTextField = forwardRef<HTMLDivElement, MultiTextFieldProps>(
-  ({ size = "small", onChange, ...restProps }, ref) => {
+  ({ size = "small", ...restProps }, ref) => {
     return (
       <BaseTextField {...restProps} ref={ref} textFieldSize={size} multiline />
     );

package/src/components/Toggle/Toggle.styled.ts

@@ -1,10 +1,10 @@
 import { styled, Switch as MuiSwitch, SwitchProps } from "@mui/material";
 interface ToggleProps extends SwitchProps {
-  toggleSize: "medium" | "large";
+  toggleSize: "small" | "large";
 }
 
 const toggleStyles = {
-  medium: {
+  small: {
     root: {
       width: 28,
       height: 18,
@@ -65,7 +65,7 @@ const indeterminateStyles = {
       borderRadius: 2,
     },
   },
-  medium: {
+  small: {
     switchChecked: {
       top: 6,
       left: -4,
@@ -94,7 +94,7 @@ export const CommonToggle = styled(MuiSwitch, {
 
   return {
     ...toggleStyle.root,
-    display: "flex",
+
     padding: 0,
     overflow: "visible",
     backgroundColor: "transparent",

package/src/components/Toggle/Toggle.tsx

@@ -1,18 +1,37 @@
-import React from 'react'
-import { CommonToggle, CommonIndeterminateToggle } from './Toggle.styled'
-import type { ToggleProps } from './Toggle.types'
-
+import React from "react";
+import { CommonToggle, CommonIndeterminateToggle } from "./Toggle.styled";
+import type { ToggleProps } from "./Toggle.types";
 
 const Toggle = (props: ToggleProps) => {
-  const { size = "medium", indeterminate = false, disableRipple, ...switchProps } = props
+  const {
+    size = "small",
+    indeterminate = false,
+    disableRipple,
+    ...switchProps
+  } = props;
 
   if (indeterminate) {
     const { checked: _, ...restProps } = switchProps;
     // can't use checked props with indeterminate
-      return <CommonIndeterminateToggle toggleSize={size} checked focusRipple={false} disableRipple={disableRipple} {...restProps} />
+    return (
+      <CommonIndeterminateToggle
+        toggleSize={size}
+        checked
+        focusRipple={false}
+        disableRipple={disableRipple}
+        {...restProps}
+      />
+    );
   }
 
-  return  <CommonToggle toggleSize={size} focusRipple={false} disableRipple={disableRipple} {...switchProps}/>
-}
+  return (
+    <CommonToggle
+      toggleSize={size}
+      focusRipple={false}
+      disableRipple={disableRipple}
+      {...switchProps}
+    />
+  );
+};
 
-export default Toggle
+export default Toggle;

package/src/components/Toggle/Toggle.types.ts

@@ -1,14 +1,14 @@
-import type { SwitchProps } from "@mui/material"
+import type { SwitchProps } from "@mui/material";
 
-export interface ToggleProps extends Omit<SwitchProps, "size" > {
+export interface ToggleProps extends Omit<SwitchProps, "size"> {
   /**
    * The size of the component.
-   * @default medium
+   * @default small
    */
-  size?: 'medium' | 'large'
+  size?: "small" | "large";
   /**
-  * If `true`, the component has consistent 'checked' value and change shape.
-  * @default false
-  */
-  indeterminate?: boolean
+   * If `true`, the component has consistent 'checked' value and change shape.
+   * @default false
+   */
+  indeterminate?: boolean;
 }

package/src/components/ToggleButton/ToggleButton.styled.ts

@@ -2,12 +2,7 @@ import { styled } from "@mui/material/styles";
 import { ToggleButton as MuiToggleButton } from "@mui/material";
 
 import type { ToggleButtonProps } from "../ToggleButton/ToggleButton.types";
-import {
-  commonStyle,
-  sizeStyle,
-  kindStyle,
-  iconStyle,
-} from "../Button/Button.styled";
+import { commonStyle, sizeStyle, kindStyle } from "../Button/Button.styled";
 
 type CustomToggleButtonProps = ToggleButtonProps & { hasIconOnly: boolean };
 
@@ -31,7 +26,6 @@ export const CustomToggleButton = styled(MuiToggleButton, {
     return {
       border: "none",
       ...commonStyle({ lunit_token }),
-      ...iconStyle({ size, hasIconOnly }),
       ...sizeStyle({ size, kind, hasIconOnly, selected, typography }),
       ...kindStyle({ kind, color, lunit_token }),
       ...(selectedColor === "primary" && {
@@ -56,3 +50,17 @@ export const IconAndChildrenWrapper = styled("div")({
   display: "flex",
   alignItems: "center",
 });
+
+export const IconWrapper = styled("div")<{
+  hasIconOnly: boolean;
+  size: string;
+}>(({ hasIconOnly, size }) => ({
+  width: "20px",
+  height: "20px",
+  padding: "1px",
+  marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
+
+  "*:nth-of-type(1)": {
+    fontSize: "18px",
+  },
+}));