@team-monolith/cds 0.28.0 → 0.29.0

package/dist/components/Button.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { PolymorphicProps } from "@mui/base";
-export type ButtonColor = "primary" | "grey" | "danger" | "textNeutral" | "textDanger" | "textPrimary" | "black";
+export type ButtonColor = "primary" | "grey" | "danger" | "textNeutral" | "textDanger" | "textPrimary" | "black" | "white";
 export type ButtonSize = "large" | "medium" | "small" | "xsmall";
 export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
     className?: string;

package/dist/components/Button.js

@@ -46,19 +46,21 @@ var COLOR_TO_BUTTON_STYLE = function (theme, color, disabled) {
             ? css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n            background: none;\n            color: ", ";\n          "], ["\n            background: none;\n            color: ", ";\n          "])), theme.color.foreground.primaryDisabled) : css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n            background: none;\n            color: ", ";\n            ", "\n          "], ["\n            background: none;\n            color: ", ";\n            ", "\n          "])), theme.color.foreground.primary, HOVER(css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n              background: ", ";\n              color: ", ";\n            "], ["\n              background: ", ";\n              color: ", ";\n            "])), theme.color.background.neutralAltActive, theme.color.foreground.primary)))),
         black: css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), disabled
             ? css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n            background: ", ";\n            color: ", ";\n          "], ["\n            background: ", ";\n            color: ", ";\n          "])), theme.color.background.blackDisabled, theme.color.foreground.neutralAltDisabled) : css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n            background: ", ";\n            color: ", ";\n            ", "\n          "], ["\n            background: ", ";\n            color: ", ";\n            ", "\n          "])), theme.color.background.black, theme.color.foreground.neutralAlt, HOVER(css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n              background: ", ";\n              color: ", ";\n            "], ["\n              background: ", ";\n              color: ", ";\n            "])), theme.color.background.blackActive, theme.color.foreground.neutralAlt)))),
+        white: css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), disabled
+            ? css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n            background: ", ";\n            color: ", ";\n          "], ["\n            background: ", ";\n            color: ", ";\n          "])), theme.color.background.neutralAltDisabled, theme.color.foreground.neutralBaseDisabled) : css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n            background: ", ";\n            color: ", ";\n            ", "\n          "], ["\n            background: ", ";\n            color: ", ";\n            ", "\n          "])), theme.color.background.neutralBase, theme.color.foreground.neutralBase, HOVER(css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n              background: ", ";\n              color: ", ";\n            "], ["\n              background: ", ";\n              color: ", ";\n            "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)))),
     })[color];
 };
 var SIZE_TO_BUTTON_STYLE = {
-    large: css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n    padding: 16px 20px;\n    gap: 10px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "], ["\n    padding: 16px 20px;\n    gap: 10px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "]))),
-    medium: css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n    padding: 14px 16px;\n    gap: 8px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "], ["\n    padding: 14px 16px;\n    gap: 8px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "]))),
-    small: css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n    padding: 10px 12px;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "], ["\n    padding: 10px 12px;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "]))),
-    xsmall: css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n    padding: 6px 8px;\n    gap: 4px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "], ["\n    padding: 6px 8px;\n    gap: 4px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "]))),
+    large: css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    padding: 16px 20px;\n    gap: 10px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "], ["\n    padding: 16px 20px;\n    gap: 10px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "]))),
+    medium: css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n    padding: 14px 16px;\n    gap: 8px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "], ["\n    padding: 14px 16px;\n    gap: 8px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "]))),
+    small: css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n    padding: 10px 12px;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "], ["\n    padding: 10px 12px;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "]))),
+    xsmall: css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n    padding: 6px 8px;\n    gap: 4px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "], ["\n    padding: 6px 8px;\n    gap: 4px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "]))),
 };
 var SIZE_TO_LABEL_STYLE = {
-    large: css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    font-size: 20px;\n    line-height: 24px;\n  "], ["\n    font-size: 20px;\n    line-height: 24px;\n  "]))),
-    medium: css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 20px;\n  "], ["\n    font-size: 18px;\n    line-height: 20px;\n  "]))),
-    small: css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 16px;\n  "], ["\n    font-size: 14px;\n    line-height: 16px;\n  "]))),
-    xsmall: css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 16px;\n  "], ["\n    font-size: 14px;\n    line-height: 16px;\n  "]))),
+    large: css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n    font-size: 20px;\n    line-height: 24px;\n  "], ["\n    font-size: 20px;\n    line-height: 24px;\n  "]))),
+    medium: css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 20px;\n  "], ["\n    font-size: 18px;\n    line-height: 20px;\n  "]))),
+    small: css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 16px;\n  "], ["\n    font-size: 14px;\n    line-height: 16px;\n  "]))),
+    xsmall: css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 16px;\n  "], ["\n    font-size: 14px;\n    line-height: 16px;\n  "]))),
 };
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
@@ -67,15 +69,15 @@ var Button = React.forwardRef(function Button(props, ref) {
     var className = props.className, _a = props.component, Component = _a === void 0 ? "button" : _a, disabled = props.disabled, color = props.color, size = props.size, startIcon = props.startIcon, endIcon = props.endIcon, label = props.label, fullWidth = props.fullWidth, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth"]);
     var theme = useTheme();
     return (_jsxs(Component, __assign({ type: "button" }, other, { className: className, ref: ref, css: [
-            css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          ", "\n\n          font-family: ", ";\n          text-decoration: none;\n\n          width: ", ";\n        "], ["\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          ", "\n\n          font-family: ", ";\n          text-decoration: none;\n\n          width: ", ";\n        "])), disabled
-                ? css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n                cursor: default;\n                pointer-events: none;\n              "], ["\n                cursor: default;\n                pointer-events: none;\n              "]))) : css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n                cursor: pointer;\n              "], ["\n                cursor: pointer;\n              "]))), theme.fontFamily.ui, fullWidth ? "100%" : "auto"),
+            css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          ", "\n\n          font-family: ", ";\n          text-decoration: none;\n\n          width: ", ";\n        "], ["\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          ", "\n\n          font-family: ", ";\n          text-decoration: none;\n\n          width: ", ";\n        "])), disabled
+                ? css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n                cursor: default;\n                pointer-events: none;\n              "], ["\n                cursor: default;\n                pointer-events: none;\n              "]))) : css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n                cursor: pointer;\n              "], ["\n                cursor: pointer;\n              "]))), theme.fontFamily.ui, fullWidth ? "100%" : "auto"),
             COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled)),
             SIZE_TO_BUTTON_STYLE[size],
         ], disabled: disabled }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
 });
-var Label = styled.span(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"], ["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"])), function (_a) {
+var Label = styled.span(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"], ["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return SIZE_TO_LABEL_STYLE[size];
 });
 export default Button;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44;

package/dist/components/SquareButton.js

@@ -37,28 +37,29 @@ var COLOR_TO_BUTTON_STYLE = function (theme, color) {
         primary: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", ";\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "], ["\n      background: ", ";\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "])), theme.color.background.primary, theme.color.foreground.neutralAlt, HOVER(css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        background: ", ";\n      "], ["\n        background: ", ";\n      "])), theme.color.background.primaryActive)), theme.color.background.primaryDisabled),
         icon: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      background: none;\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "], ["\n      background: none;\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "])), theme.color.foreground.neutralBase, HOVER(css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)), theme.color.foreground.neutralBaseDisabled),
         black: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      background: ", ";\n      border: none;\n      color: ", ";\n      ", "\n      &:disabled {\n        background: ", ";\n        color: ", ";\n      }\n    "], ["\n      background: ", ";\n      border: none;\n      color: ", ";\n      ", "\n      &:disabled {\n        background: ", ";\n        color: ", ";\n      }\n    "])), theme.color.background.black, theme.color.foreground.neutralAlt, HOVER(css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.blackActive, theme.color.foreground.neutralAlt)), theme.color.background.blackDisabled, theme.color.foreground.neutralAltDisabled),
+        white: css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background: ", ";\n      border: none;\n      color: ", ";\n      ", "\n      &:disabled {\n        background: ", ";\n        color: ", ";\n      }\n    "], ["\n      background: ", ";\n      border: none;\n      color: ", ";\n      ", "\n      &:disabled {\n        background: ", ";\n        color: ", ";\n      }\n    "])), theme.color.background.neutralBase, theme.color.foreground.neutralBase, HOVER(css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)), theme.color.background.neutralAltDisabled, theme.color.foreground.neutralBaseDisabled),
     })[color];
 };
 var SIZE_TO_BUTTON_STYLE = {
-    large: css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    width: 56px;\n    height: 56px;\n    padding: 16px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "], ["\n    width: 56px;\n    height: 56px;\n    padding: 16px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "]))),
-    medium: css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    width: 48px;\n    height: 48px;\n    padding: 14px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "], ["\n    width: 48px;\n    height: 48px;\n    padding: 14px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "]))),
-    small: css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    width: 36px;\n    height: 36px;\n    padding: 10px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "], ["\n    width: 36px;\n    height: 36px;\n    padding: 10px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "]))),
-    xsmall: css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    width: 28px;\n    height: 28px;\n    padding: 8px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "], ["\n    width: 28px;\n    height: 28px;\n    padding: 8px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "]))),
+    large: css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    width: 56px;\n    height: 56px;\n    padding: 16px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "], ["\n    width: 56px;\n    height: 56px;\n    padding: 16px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "]))),
+    medium: css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    width: 48px;\n    height: 48px;\n    padding: 14px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "], ["\n    width: 48px;\n    height: 48px;\n    padding: 14px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "]))),
+    small: css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    width: 36px;\n    height: 36px;\n    padding: 10px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "], ["\n    width: 36px;\n    height: 36px;\n    padding: 10px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "]))),
+    xsmall: css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    width: 28px;\n    height: 28px;\n    padding: 8px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "], ["\n    width: 28px;\n    height: 28px;\n    padding: 8px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "]))),
 };
 var SIZE_TO_LABEL_STYLE = {
-    large: css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
-    medium: css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
-    small: css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
-    xsmall: css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 22px;\n  "], ["\n    font-size: 14px;\n    line-height: 22px;\n  "]))),
+    large: css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
+    medium: css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
+    small: css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
+    xsmall: css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 22px;\n  "], ["\n    font-size: 14px;\n    line-height: 22px;\n  "]))),
 };
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=22-374&t=kTLv3t86qtGalHSS-0)
  */
 var SquareButton = React.forwardRef(function SquareButton(props, ref) {
     var className = props.className, _a = props.component, Component = _a === void 0 ? "span" : _a, disabled = props.disabled, color = props.color, size = props.size, icon = props.icon, label = props.label, fullWidth = props.fullWidth, onClick = props.onClick, other = __rest(props, ["className", "component", "disabled", "color", "size", "icon", "label", "fullWidth", "onClick"]);
-    return (_jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 8px;\n\n          width: ", ";\n        "], ["\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 8px;\n\n          width: ", ";\n        "])), fullWidth ? "100%" : "fit-content") }, { children: [_jsx(Button, __assign({ type: "button", color: color, size: size, disabled: disabled, fullWidth: fullWidth, onClick: onClick }, { children: icon })), label && (_jsx(Label, __assign({ disabled: disabled, size: size }, { children: label })))] })));
+    return (_jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 8px;\n\n          width: ", ";\n        "], ["\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 8px;\n\n          width: ", ";\n        "])), fullWidth ? "100%" : "fit-content") }, { children: [_jsx(Button, __assign({ type: "button", color: color, size: size, disabled: disabled, fullWidth: fullWidth, onClick: onClick }, { children: icon })), label && (_jsx(Label, __assign({ disabled: disabled, size: size }, { children: label })))] })));
 });
-var Button = styled.button(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  border-radius: 8px;\n  cursor: pointer;\n  &:disabled {\n    cursor: default;\n  }\n  ", "\n  ", "\n  ", "\n"], ["\n  border-radius: 8px;\n  cursor: pointer;\n  &:disabled {\n    cursor: default;\n  }\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+var Button = styled.button(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  border-radius: 8px;\n  cursor: pointer;\n  &:disabled {\n    cursor: default;\n  }\n  ", "\n  ", "\n  ", "\n"], ["\n  border-radius: 8px;\n  cursor: pointer;\n  &:disabled {\n    cursor: default;\n  }\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme, color = _a.color;
     return COLOR_TO_BUTTON_STYLE(theme, color);
 }, function (_a) {
@@ -68,7 +69,7 @@ var Button = styled.button(templateObject_20 || (templateObject_20 = __makeTempl
     var fullWidth = _a.fullWidth;
     return fullWidth && "width: 100%;";
 });
-var Label = styled.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  font-weight: 400;\n  color: ", ";\n  ", "\n"], ["\n  font-weight: 400;\n  color: ", ";\n  ", "\n"])), function (_a) {
+var Label = styled.span(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  font-weight: 400;\n  color: ", ";\n  ", "\n"], ["\n  font-weight: 400;\n  color: ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
     return disabled
         ? theme.color.foreground.neutralBaseDisabled
@@ -78,4 +79,4 @@ var Label = styled.span(templateObject_21 || (templateObject_21 = __makeTemplate
     return SIZE_TO_LABEL_STYLE[size];
 });
 export default SquareButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;

package/dist/index.d.ts

@@ -12,8 +12,6 @@ export { default as Pagination } from "./components/Pagination";
 export * from "./components/Pagination";
 export { default as PinInput } from "./components/PinInput";
 export * from "./components/PinInput";
-export { default as Popover } from "./components/Popover";
-export * from "./components/Popover";
 export { default as RadioInput } from "./components/RadioInput";
 export * from "./components/RadioInput";
 export { default as SquareButton } from "./components/SquareButton";

package/dist/index.js

@@ -12,8 +12,6 @@ export { default as Pagination } from "./components/Pagination";
 export * from "./components/Pagination";
 export { default as PinInput } from "./components/PinInput";
 export * from "./components/PinInput";
-export { default as Popover } from "./components/Popover";
-export * from "./components/Popover";
 export { default as RadioInput } from "./components/RadioInput";
 export * from "./components/RadioInput";
 export { default as SquareButton } from "./components/SquareButton";

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/** useForm에서 사용되는 ReactEditorJS 컴포넌트입니다. */
+export declare function FormEditorJS(props: {
+    className?: string;
+    name: string;
+    control?: any;
+    readOnly?: boolean;
+}): React.ReactElement;

package/dist/patterns/ReactEditorJS/FormEditorJS.js

@@ -0,0 +1,133 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import { createReactEditorJS } from "react-editor-js";
+import { useCallback, useRef } from "react";
+import TOOLS from "./tools";
+import I18n from "./i18n";
+import Layout from "./Layout";
+import * as Sentry from "@sentry/react";
+/** useForm에서 사용되는 ReactEditorJS 컴포넌트입니다. */
+export function FormEditorJS(props) {
+    var _this = this;
+    var className = props.className, name = props.name, control = props.control, _a = props.readOnly, readOnly = _a === void 0 ? false : _a;
+    var ReactEditorJS = createReactEditorJS();
+    var editorCore = useRef(null);
+    var handleInitialize = useCallback(function (instance) { return __awaiter(_this, void 0, void 0, function () {
+        var e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, instance.dangerouslyLowLevelInstance.isReady];
+                case 1:
+                    _a.sent();
+                    editorCore.current = instance;
+                    return [3 /*break*/, 3];
+                case 2:
+                    e_1 = _a.sent();
+                    Sentry.captureException(e_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    var handleSave = useCallback(function (onChange) { return __awaiter(_this, void 0, void 0, function () {
+        var _this = this;
+        var _a;
+        return __generator(this, function (_b) {
+            if (!editorCore.current) {
+                return [2 /*return*/];
+            }
+            // 저장 전에 isReady 상태를 기다리기
+            // https://github.com/codex-team/editor.js/issues/1136
+            (_a = editorCore.current.dangerouslyLowLevelInstance.isReady) === null || _a === void 0 ? void 0 : _a.then(function () { return __awaiter(_this, void 0, void 0, function () {
+                var savedData;
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, ((_a = editorCore.current) === null || _a === void 0 ? void 0 : _a.save())];
+                        case 1:
+                            savedData = _b.sent();
+                            if (savedData) {
+                                onChange(savedData.blocks);
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            return [2 /*return*/];
+        });
+    }); }, []);
+    // readOnly가 변경되면 ReactEditorJS를 다시 마운트하기 위해 key를 변경합니다.
+    // readOnly 모드에서는 onChange를 전달할 수 없어서 케이스를 분리합니다.
+    if (readOnly) {
+        return (_jsx(Controller, { name: name, control: control, render: function (_a) {
+                var value = _a.field.value;
+                return (_jsx(Layout, __assign({ className: className }, { children: _jsx(ReactEditorJS, { onInitialize: handleInitialize, tools: TOOLS, defaultValue: {
+                            blocks: value,
+                        }, i18n: I18n, readOnly: true }, "readOnly") })));
+            } }));
+    }
+    return (_jsx(Controller, { name: name, control: control, render: function (_a) {
+            var _b = _a.field, onChange = _b.onChange, value = _b.value;
+            return (_jsx(Layout, __assign({ className: className }, { children: _jsx(ReactEditorJS, { onInitialize: handleInitialize, tools: TOOLS, inlineToolbar: [
+                        "bold",
+                        "italic",
+                        "underline",
+                        "strikeThrough",
+                        "inlineCode",
+                        "link",
+                    ], tunes: ["moveUp", "delete", "moveDown"], 
+                    // onChange를 사용하므로 value를 사용하면 안됩니다.(defaultValue 사용이 highly recommended)
+                    defaultValue: {
+                        blocks: value,
+                    }, placeholder: "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694.", onChange: function () { return handleSave(onChange); }, i18n: I18n }, "editable") })));
+        } }));
+}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const Layout: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default Layout;

package/dist/patterns/ReactEditorJS/Layout.js

@@ -0,0 +1,14 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { hexToCSSFilter } from "hex-to-css-filter";
+import { CalloutStyle, DelimiterStyle, HeaderStyle, NestedListStyle, QuoteStyle, RawStyle, } from "./customTools";
+var Layout = styled.div(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: auto;\n    margin-top: 8px;\n    border: 1px solid ", ";\n    border-radius: 8px;\n    padding: 32px 74px 32px 16px;\n    .codex-editor__redactor {\n      padding-bottom: 0 !important;\n    }\n    .ce-block {\n      margin-left: 55px;\n    }\n    .ce-block__content {\n      margin: 0;\n      max-width: unset;\n    }\n    .ce-toolbar__content {\n      position: unset;\n    }\n    .ce-toolbar__actions {\n      left: -5px;\n    }\n    .ce-paragraph {\n      font-family: ", ";\n      font-weight: 400;\n      font-size: 16px;\n      line-height: 24px;\n      padding: 0 0 8px;\n    }\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", " \n\n    // block tool \uC2A4\uD0C0\uC77C\n    .ce-popover-item__icon img {\n      width: 18px;\n      height: 18px;\n    }\n\n    // inline tool \uC2A4\uD0C0\uC77C\n    .ce-conversion-tool img {\n      width: 18px;\n      height: 18px;\n    }\n    .ce-inline-toolbar__buttons {\n      gap: 4px;\n      .ce-inline-tool--active img {\n        // color\uB97C editorjs\uC5D0\uC11C\uB294 active icon\uC744 svg color: #388ae5\uB85C \uBCC0\uACBD\uD569\uB2C8\uB2E4.\n        // cds color\uC778 primary\uB85C \uBCC0\uACBD\uD569\uB2C8\uB2E4.\n        filter: ", ";\n      }\n    }\n    .ce-inline-toolbar__dropdown {\n      padding: 8px 4px;\n      gap: 4px;\n    }\n    .ce-inline-toolbar__dropdown-content img {\n      margin-left: 4px;\n      width: 18px;\n      height: 18px;\n    }\n    .ce-inline-tool {\n      padding: 8px 4px;\n      img {\n        width: 18px;\n        height: 18px;\n      }\n    }\n  "], ["\n    width: auto;\n    margin-top: 8px;\n    border: 1px solid ", ";\n    border-radius: 8px;\n    padding: 32px 74px 32px 16px;\n    .codex-editor__redactor {\n      padding-bottom: 0 !important;\n    }\n    .ce-block {\n      margin-left: 55px;\n    }\n    .ce-block__content {\n      margin: 0;\n      max-width: unset;\n    }\n    .ce-toolbar__content {\n      position: unset;\n    }\n    .ce-toolbar__actions {\n      left: -5px;\n    }\n    .ce-paragraph {\n      font-family: ", ";\n      font-weight: 400;\n      font-size: 16px;\n      line-height: 24px;\n      padding: 0 0 8px;\n    }\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", " \n\n    // block tool \uC2A4\uD0C0\uC77C\n    .ce-popover-item__icon img {\n      width: 18px;\n      height: 18px;\n    }\n\n    // inline tool \uC2A4\uD0C0\uC77C\n    .ce-conversion-tool img {\n      width: 18px;\n      height: 18px;\n    }\n    .ce-inline-toolbar__buttons {\n      gap: 4px;\n      .ce-inline-tool--active img {\n        // color\uB97C editorjs\uC5D0\uC11C\uB294 active icon\uC744 svg color: #388ae5\uB85C \uBCC0\uACBD\uD569\uB2C8\uB2E4.\n        // cds color\uC778 primary\uB85C \uBCC0\uACBD\uD569\uB2C8\uB2E4.\n        filter: ", ";\n      }\n    }\n    .ce-inline-toolbar__dropdown {\n      padding: 8px 4px;\n      gap: 4px;\n    }\n    .ce-inline-toolbar__dropdown-content img {\n      margin-left: 4px;\n      width: 18px;\n      height: 18px;\n    }\n    .ce-inline-tool {\n      padding: 8px 4px;\n      img {\n        width: 18px;\n        height: 18px;\n      }\n    }\n  "])), theme.color.background.neutralAlt, theme.fontFamily.ui, HeaderStyle(theme), NestedListStyle, QuoteStyle(theme), CalloutStyle(theme), RawStyle(theme), DelimiterStyle(theme), hexToCSSFilter(theme.color.foreground.primary).filter);
+});
+export default Layout;
+var templateObject_1;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface ReactEditorJSProps {
+    className?: string;
+    /** 읽기모드 여부(preview 여부) */
+    readOnly?: boolean;
+    /** 에디터의 블록데이터 */
+    blocks: any;
+    /** 데이터가 변경되었을 때 실행될 콜백 */
+    onChange?: (blocks: any) => void;
+}
+export declare function ReactEditorJS(props: ReactEditorJSProps): JSX.Element;

package/dist/patterns/ReactEditorJS/ReactEditorJS.js

@@ -0,0 +1,137 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { createReactEditorJS } from "react-editor-js";
+import * as Sentry from "@sentry/react";
+import Layout from "./Layout";
+import TOOLS from "./tools";
+import I18n from "./i18n";
+export function ReactEditorJS(props) {
+    var _this = this;
+    var className = props.className, _a = props.readOnly, readOnly = _a === void 0 ? false : _a, blocks = props.blocks, onChange = props.onChange;
+    var ReactEditorJS = createReactEditorJS();
+    var editorCore = useRef(null);
+    var handleInitialize = useCallback(function (instance) { return __awaiter(_this, void 0, void 0, function () {
+        var e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, instance.dangerouslyLowLevelInstance.isReady];
+                case 1:
+                    _a.sent();
+                    editorCore.current = instance;
+                    return [3 /*break*/, 3];
+                case 2:
+                    e_1 = _a.sent();
+                    Sentry.captureException(e_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    var handleSave = useCallback(function (onChange) { return __awaiter(_this, void 0, void 0, function () {
+        var _this = this;
+        var _a;
+        return __generator(this, function (_b) {
+            if (!editorCore.current || readOnly) {
+                return [2 /*return*/];
+            }
+            // 저장 전에 isReady 상태를 기다리기
+            // https://github.com/codex-team/editor.js/issues/1136
+            (_a = editorCore.current.dangerouslyLowLevelInstance.isReady) === null || _a === void 0 ? void 0 : _a.then(function () { return __awaiter(_this, void 0, void 0, function () {
+                var savedData;
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, ((_a = editorCore.current) === null || _a === void 0 ? void 0 : _a.save())];
+                        case 1:
+                            savedData = _b.sent();
+                            if (savedData) {
+                                onChange(savedData.blocks);
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            return [2 /*return*/];
+        });
+    }); }, []);
+    // blocks가 변경될 때 preview가 다시 렌더링되게 하려면 controlled component를 위한 "value"인자를 전달하는 것이 올바른 방법이지만
+    // controlled를 위해 "defaultValue" 대신 "value"를 사용하면 불필요하게 많이 리렌더링 되고, 그에 따른 오류가 발생합니다.
+    // 따라서, highly recommended인 "defaultValue" 사용을 유지하고 blocks가 변경될 때마다
+    // useEffect를 사용하여 editorCore의 render 메서드를 호출하여 리렌더링을 수행하도록 구현합니다.
+    useEffect(function () {
+        if (!editorCore.current || !readOnly) {
+            return;
+        }
+        editorCore.current.render({
+            blocks: blocks,
+        });
+    }, [blocks, readOnly]);
+    // readOnly가 변경되면 ReactEditorJS를 다시 마운트하기 위해 key를 변경합니다.
+    // readOnly 모드에서는 onChange를 전달할 수 없어서 케이스를 분리합니다.
+    if (readOnly) {
+        return (_jsx(Layout, __assign({ className: className }, { children: _jsx(ReactEditorJS, { onInitialize: handleInitialize, tools: TOOLS, defaultValue: {
+                    blocks: blocks,
+                }, i18n: I18n, readOnly: true }, "readOnly") })));
+    }
+    return (_jsx(Layout, __assign({ className: className }, { children: _jsx(ReactEditorJS, { onInitialize: handleInitialize, tools: TOOLS, inlineToolbar: [
+                "bold",
+                "italic",
+                "underline",
+                "strikeThrough",
+                "inlineCode",
+                "link",
+            ], tunes: ["moveUp", "delete", "moveDown"], 
+            // onChange를 사용하므로 value를 사용하면 안됩니다.(defaultValue 사용이 highly recommended)
+            defaultValue: {
+                blocks: blocks,
+            }, onChange: function () { return handleSave(onChange); }, i18n: I18n }, "editable") })));
+}

package/dist/patterns/ReactEditorJS/customTools/block/Callout.d.ts

@@ -0,0 +1,40 @@
+import { BlockTool } from "@editorjs/editorjs";
+import { Theme } from "@emotion/react";
+type COLOR_TYPE = "grey" | "red" | "yellow" | "blue" | "green";
+type DATA_TYPE = {
+    color: COLOR_TYPE;
+    text: string;
+};
+export declare const CalloutStyle: (theme: Theme) => import("@emotion/utils").SerializedStyles;
+export declare class Callout implements BlockTool {
+    api: any;
+    config: any;
+    readOnly: any;
+    private _wrapper;
+    constructor({ api, config, readOnly, data }: any);
+    createWrapper(data: DATA_TYPE): HTMLDivElement;
+    get colors(): string[];
+    get defaultColor(): string;
+    get color(): COLOR_TYPE;
+    set data(data: DATA_TYPE);
+    save(): {
+        color: COLOR_TYPE;
+        text: string;
+    };
+    render(): HTMLDivElement;
+    renderSettings(): {
+        name: string;
+        icon: string;
+        label: any;
+        isActive: boolean;
+        closeOnActivate: boolean;
+        onActivate: () => void;
+    }[];
+    static get isReadOnlySupported(): boolean;
+    static get enableLineBreaks(): boolean;
+    static get toolbox(): {
+        icon: string;
+        title: string;
+    };
+}
+export {};