@pfct/purple 1.4.0-rc.6 → 1.4.0-rc.7

package/dist/components/ToastMessage/Toast/index.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+const Icon_1 = require("../../../Icon");
+const Colors_1 = require("../../../core/Colors");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Toast-Message-2ea99ab2e0154d858596c6314c87284c?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 현재 진행 상태와 관련된 간단한 메시지로 일시적인 피드백을 제공할 때 사용합니다.
+ *
+ */
+const meta = {
+    title: 'Component/Toast Message',
+    component: _1.Toast,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+        "Tip! visible \uAC12\uC744 \uBC14\uAFD4\uBCF4\uC138\uC694",
+        react_1.default.createElement(_1.Toast, Object.assign({}, props)))),
+    args: {
+        visible: true,
+        children: '텍스트를 입력해주세요',
+        icon: react_1.default.createElement(Icon_1.AlarmFillIcon, { fillColor: Colors_1.basicColors.yellow400 }),
+        hasButton: true,
+    },
+};
+exports.Story1.storyName = 'Toast Message';

package/dist/components/ToastMessage/Toast/index.styled.d.ts

@@ -1,8 +1,8 @@
-export declare const ContentWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/ToastMessage/Toast/index.styled.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconWrapper = exports.ContentWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.ContentWrapper = styled_1.default.div `
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+`;
+exports.IconWrapper = styled_1.default.div `
+	display: flex;
+	align-items: center;
+
+	& > * + * {
+		margin-left: 10px;
+	}
+`;

package/dist/components/ToastMessage/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Toast"), exports);

package/dist/components/Tooltip/BasicTooltip/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { TooltipBaseProps } from '../TooltipBase';
 export type BasicTooltipProps = Omit<TooltipBaseProps, 'colorType' | 'alwaysShow' | 'hasCloseButton'>;
 declare const BasicTooltip: React.FC<BasicTooltipProps>;

package/dist/components/Tooltip/BasicTooltip/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const TooltipBase_1 = __importDefault(require("../TooltipBase"));
+const BasicTooltip = (props) => {
+    return react_1.default.createElement(TooltipBase_1.default, Object.assign({}, props, { colorType: "white", alwaysShow: false, hasCloseButton: false }));
+};
+exports.default = BasicTooltip;

package/dist/components/Tooltip/BasicTooltip/index.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BasicTooltipProps } from '.';
+type Story = StoryObj<BasicTooltipProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Tooltip-3517bfdc827244d3a8cc91ec2b5c54c3" target="_blank">노션페이지</a>
+ * <br/>
+ * 콘텐츠의 이해를 돕기 위한 보충 설명을 제공합니다. 사용자의 행동에 방해되지 않도록 선택적으로 열고 닫을 수 있으며 아이콘, 텍스트 등 버튼의 기능을 가진 컴포넌트에 종속되어 단독으로 사용할 수 없습니다.
+ *
+ */
+declare const meta: Meta<BasicTooltipProps>;
+export default meta;
+export declare const Story1: Story;
+export declare const Story2: Story;
+export declare const Story3: Story;

package/dist/components/Tooltip/BasicTooltip/index.stories.js

@@ -0,0 +1,93 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story3 = exports.Story2 = exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const _1 = __importDefault(require("."));
+const TooltipBase_1 = require("../TooltipBase");
+const Icon_1 = require("../../../Icon");
+const __1 = require("../..");
+const library_1 = require("../../../library");
+const button_1 = require("@/components/ui/button");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Tooltip-3517bfdc827244d3a8cc91ec2b5c54c3" target="_blank">노션페이지</a>
+ * <br/>
+ * 콘텐츠의 이해를 돕기 위한 보충 설명을 제공합니다. 사용자의 행동에 방해되지 않도록 선택적으로 열고 닫을 수 있으며 아이콘, 텍스트 등 버튼의 기능을 가진 컴포넌트에 종속되어 단독으로 사용할 수 없습니다.
+ *
+ */
+const meta = {
+    title: 'Component/Tooltip/BasicTooltip',
+    component: _1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const commonArgTypes = {
+    placement: {
+        options: TooltipBase_1.PlacementArray,
+        control: { type: 'radio' },
+    },
+};
+const ContainerForStorybook = styled_1.default.div `
+	width: 100%;
+	padding: 100px 0;
+`;
+const Component1 = (props) => {
+    return (react_1.default.createElement(ContainerForStorybook, null,
+        react_1.default.createElement(_1.default, Object.assign({}, props),
+            react_1.default.createElement(Icon_1.QuestionCircleIcon, null))));
+};
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(Component1, Object.assign({}, props)),
+    args: {
+        content: '툴팁 문구를 입력해주세요',
+    },
+    argTypes: commonArgTypes,
+    parameters: {
+        docs: {
+            description: {
+                story: '종속된 컴포넌트 위치에 따라 말풍선 꼬리의 위치를 결정합니다. 화면을 가로로 3등분 하여 콘텐츠의 위치에 따라 왼쪽, 중앙, 오른쪽에 꼬리를 표시하고, 화면을 세로로 2등분 하여 위쪽, 아래쪽으로 말풍선 꼬리를 표시합니다.',
+            },
+        },
+    },
+};
+exports.Story1.storyName = 'w. QuestionIcon';
+const Component2 = (props) => {
+    return (react_1.default.createElement(ContainerForStorybook, null,
+        react_1.default.createElement(_1.default, Object.assign({}, props),
+            react_1.default.createElement(__1.BoxMiniButton, { colorType: "gray" }, "\uC0C1\uD488 \uD544\uD130")),
+        react_1.default.createElement(library_1.Spacing, { spaceNumber: 30 }),
+        react_1.default.createElement(_1.default, Object.assign({}, props, { isChildrenFullWidth: true }),
+            react_1.default.createElement(button_1.Button, { colorType: "gray", purpose: "main" }, "Button")),
+        react_1.default.createElement(library_1.Spacing, { spaceNumber: 30 }),
+        react_1.default.createElement(_1.default, Object.assign({}, props),
+            react_1.default.createElement(__1.IconMiniButton, { colorType: "gray", size: "s", icon: react_1.default.createElement(Icon_1.ChevronRightIcon, { size: 20 }) }, "\uC0C1\uD488 \uAC00\uC774\uB4DC"))));
+};
+// Props 교체 가능
+exports.Story2 = {
+    render: (props) => react_1.default.createElement(Component2, Object.assign({}, props)),
+    args: {
+        content: '툴팁 문구를 입력해주세요',
+    },
+    argTypes: commonArgTypes,
+};
+exports.Story2.storyName = 'w. Buttons';
+const Component3 = (props) => {
+    return (react_1.default.createElement(ContainerForStorybook, null,
+        react_1.default.createElement(_1.default, Object.assign({}, props),
+            react_1.default.createElement(__1.IconMiniButton, { colorType: "gray", size: "s", icon: react_1.default.createElement(Icon_1.ChevronRightIcon, { size: 20 }) }, "\uC0C1\uD488 \uAC00\uC774\uB4DC"))));
+};
+// Props 교체 가능
+exports.Story3 = {
+    render: (props) => react_1.default.createElement(Component3, Object.assign({}, props)),
+    args: {
+        content: '툴팁 문구를 입력해주세요',
+    },
+    argTypes: commonArgTypes,
+};
+exports.Story3.storyName = 'w. IconMiniButton';

package/dist/components/Tooltip/ImpactTooltip/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { TooltipBaseProps, TooltipPlacementType } from '../TooltipBase';
 export type ImpactTooltipProps = Omit<TooltipBaseProps, 'alwaysShow' | 'placement'> & {
     placement: TooltipPlacementType;

package/dist/components/Tooltip/ImpactTooltip/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const TooltipBase_1 = __importDefault(require("../TooltipBase"));
+const ImpactTooltip = (props) => {
+    return (react_1.default.createElement(TooltipBase_1.default, Object.assign({}, props, { alwaysShow: true, popperOptions: {
+            modifiers: [
+                { name: 'flip', enabled: false },
+                {
+                    name: 'preventOverflow',
+                    options: {
+                        mainAxis: false,
+                    },
+                },
+            ],
+        } })));
+};
+exports.default = ImpactTooltip;

package/dist/components/Tooltip/ImpactTooltip/index.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ImpactTooltipProps } from '.';
+type Story = StoryObj<ImpactTooltipProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Tooltip-3517bfdc827244d3a8cc91ec2b5c54c3" target="_blank">노션페이지</a>
+ * <br/>
+ * 사용자에게 필수로 정보를 인지시켜야할 경우 사용합니다. 화면 진입 시 단독으로 노출하며 사용자의 액션을 방해하지 않도록 필요 시 닫기 기능을 제공합니다.
+ *
+ */
+declare const meta: Meta<ImpactTooltipProps>;
+export default meta;
+export declare const Story1: Story;

package/dist/components/Tooltip/ImpactTooltip/index.stories.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const TooltipBase_1 = require("../TooltipBase");
+const _1 = __importDefault(require("."));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Icon_1 = require("src/Icon");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Tooltip-3517bfdc827244d3a8cc91ec2b5c54c3" target="_blank">노션페이지</a>
+ * <br/>
+ * 사용자에게 필수로 정보를 인지시켜야할 경우 사용합니다. 화면 진입 시 단독으로 노출하며 사용자의 액션을 방해하지 않도록 필요 시 닫기 기능을 제공합니다.
+ *
+ */
+const meta = {
+    title: 'Component/Tooltip/ImpactTooltip',
+    component: _1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const commonArgTypes = {
+    colorType: {
+        options: TooltipBase_1.ColorTypeArray.filter((colorType) => colorType !== 'white'),
+        control: { type: 'radio' },
+    },
+    placement: {
+        options: TooltipBase_1.PlacementArray,
+        control: { type: 'radio' },
+    },
+    hasCloseButton: {
+        control: { type: 'boolean' },
+    },
+};
+const ContainerForStorybook = styled_1.default.div `
+	width: 100%;
+	padding: 100px 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;
+const Component1 = (props) => {
+    return (react_1.default.createElement(ContainerForStorybook, null,
+        react_1.default.createElement(_1.default, Object.assign({}, props),
+            react_1.default.createElement(Icon_1.QuestionCircleIcon, null))));
+};
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(Component1, Object.assign({}, props)),
+    args: {
+        colorType: 'gray',
+        content: '툴팁 문구를 입력해주세요',
+        placement: 'top-center',
+    },
+    argTypes: commonArgTypes,
+    parameters: {
+        docs: {
+            description: {
+                story: '화면 영향 없이 콘텐츠가 가려지지 않는 방향으로 자유롭게 말풍선 꼬리를 표시합니다.',
+            },
+        },
+    },
+};
+exports.Story1.storyName = 'playground';

package/dist/components/Tooltip/TooltipBase/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { TippyProps } from '@tippyjs/react';
 import { ColorType } from '../../../utils';
 type ExtendColorType = ColorType | 'white';

package/dist/components/Tooltip/TooltipBase/index.js

@@ -0,0 +1,154 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlacementArray = exports.ColorTypeArray = void 0;
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const Colors_1 = require("../../../core/Colors");
+const Icon_1 = require("../../../Icon");
+exports.ColorTypeArray = ['white', 'pink', 'blue', 'gray', 'lime'];
+exports.PlacementArray = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+    'left-center',
+    'right-center',
+];
+const arrowLengthPx = 5.8;
+const distancePx = 2;
+const createArrow = ({ backgroundColor }) => {
+    if (backgroundColor === Colors_1.basicColors.white) {
+        // fyi. borderColor 컬러가 상이해서 다른 svg를 사용합니다.
+        return `<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4.67395 2.01734L5.08584e-07 8L1.31297 8L5.46343 2.67569C5.86314 2.16294 6.63816 2.16193 7.03919 2.67364L11.2136 8L12.5 8L7.82605 2.01734C7.02531 0.992394 5.4747 0.992392 4.67395 2.01734Z" fill="${Colors_1.basicColors.gray100}" />
+        <path d="M11.201 8L1.30078 8L5.45142 2.66295C5.85118 2.14892 6.62777 2.14801 7.02874 2.6611L11.201 8Z" fill="${Colors_1.basicColors.white}"/>
+    </svg>`;
+    }
+    else {
+        return `
+    <svg id="hello" width="13" height="7" viewBox="0 0 13 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4.67395 0.768711L0 6.75137L1.30078 6.75137L11.201 6.75137H12.5L7.82605 0.768713C7.02531 -0.256236 5.4747 -0.256238 4.67395 0.768711Z" fill="${backgroundColor}"/>
+    </svg>
+`;
+    }
+};
+const TooltipBase = ({ placement, colorType, content, children, className, alwaysShow = false, hasCloseButton = false, zIndex, popperOptions, isChildrenFullWidth = false, }) => {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const placementAssertedType = (0, react_1.useMemo)(() => {
+        switch (placement) {
+            case 'top-left':
+                return 'bottom-start';
+            case 'top-center':
+                return 'bottom';
+            case 'top-right':
+                return 'bottom-end';
+            case 'bottom-left':
+                return 'top-start';
+            case 'bottom-center':
+                return 'top';
+            case 'bottom-right':
+                return 'top-end';
+            case 'left-center':
+                return 'right';
+            case 'right-center':
+                return 'left';
+            default:
+                return 'top';
+        }
+    }, [placement]);
+    const colorStyle = (0, react_1.useMemo)(() => {
+        switch (colorType) {
+            case 'gray':
+                return {
+                    backgroundColor: Colors_1.basicColors.gray700,
+                    borderColor: Colors_1.basicColors.gray700,
+                    contentColor: Colors_1.basicColors.gray25,
+                };
+            case 'white':
+                return {
+                    backgroundColor: Colors_1.basicColors.white,
+                    borderColor: Colors_1.basicColors.gray100,
+                    contentColor: Colors_1.basicColors.gray400,
+                };
+            default:
+                return {
+                    backgroundColor: Colors_1.basicColors[`${colorType}400`],
+                    borderColor: Colors_1.basicColors[`${colorType}400`],
+                    contentColor: Colors_1.basicColors.gray25,
+                };
+        }
+    }, [colorType]);
+    const propsWithoutPlacement = {
+        visible,
+        arrow: createArrow({ backgroundColor: colorStyle.backgroundColor }),
+    };
+    const openTooltip = () => {
+        setVisible(true);
+    };
+    const closeTooltip = () => {
+        setVisible(false);
+    };
+    const convertedContent = (react_1.default.createElement(Styled.TippyContentAndCloseButtonWrapper, { onClick: closeTooltip },
+        react_1.default.createElement("div", null, content),
+        hasCloseButton && (react_1.default.createElement(Styled.CloseButtonWrapper, null,
+            react_1.default.createElement(Icon_1.CancelIcon, { fillColor: Colors_1.basicColors.white, size: 20 })))));
+    const handleMouseEnter = () => {
+        if (visible && alwaysShow) {
+            return;
+        }
+        openTooltip();
+    };
+    const handleMouseLeave = () => {
+        if (visible && alwaysShow) {
+            return;
+        }
+        closeTooltip();
+    };
+    (0, react_1.useEffect)(() => {
+        if (alwaysShow) {
+            // 초기 렌더링에 툴팁 표시
+            setVisible(true);
+        }
+    }, [alwaysShow]);
+    // `backgroundColor` is not a valid prop. You may have spelled it incorrectly, or if it's a plugin, forgot to pass it in an array as props.plugins.
+    // All props: https://atomiks.github.io/tippyjs/v6/all-props/
+    // Plugins: https://atomiks.github.io/tippyjs/v6/plugins/
+    return (react_1.default.createElement(Styled.TippyWrapper, Object.assign({}, colorStyle, propsWithoutPlacement, { placement: placementAssertedType, className: className, content: convertedContent, offset: [0, arrowLengthPx + distancePx], interactive: true, zIndex: zIndex, popperOptions: popperOptions }),
+        react_1.default.createElement(Styled.Children, { isChildrenFullWidth: isChildrenFullWidth, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, children)));
+};
+exports.default = TooltipBase;

package/dist/components/Tooltip/TooltipBase/index.styled.d.ts

@@ -3,20 +3,20 @@ export type TooltipColorStyleProps = {
     borderColor: string;
     contentColor: string;
 };
-export declare const TippyContentAndCloseButtonWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const TippyContentAndCloseButtonWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CloseButtonWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CloseButtonWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TippyWrapper: import('@emotion/styled').StyledComponent<import('@tippyjs/react').TippyProps & {
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TippyWrapper: import("@emotion/styled").StyledComponent<import("@tippyjs/react").TippyProps & {
+    theme?: import("@emotion/react").Theme;
 } & TooltipColorStyleProps, {}, {}>;
-export declare const Children: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const Children: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     isChildrenFullWidth: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Tooltip/TooltipBase/index.styled.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Children = exports.TippyWrapper = exports.CloseButtonWrapper = exports.TippyContentAndCloseButtonWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = __importDefault(require("@tippyjs/react"));
+const TextStyles_1 = require("../../../core/TextStyles");
+exports.TippyContentAndCloseButtonWrapper = styled_1.default.div `
+	display: flex;
+	justify-content: space-between;
+	gap: 5px;
+`;
+exports.CloseButtonWrapper = styled_1.default.div `
+	width: 16px;
+	height: 100%;
+
+	svg {
+		/* close buttons */
+		cursor: pointer;
+		width: 16px;
+		height: 16px;
+	}
+`;
+exports.TippyWrapper = (0, styled_1.default)(react_1.default) `
+	background-color: ${({ backgroundColor }) => backgroundColor};
+	border-radius: 8px;
+	border: 1px solid ${({ borderColor }) => borderColor};
+	transform: translate3d(0, 0, 0);
+
+	& > .tippy-content {
+		/* 툴팁 내부 박스 */
+		${(0, TextStyles_1.body2)()}
+		color: ${({ contentColor }) => contentColor} !important;
+
+		position: relative;
+		white-space: pre-wrap;
+		padding: 12.5px 15px;
+
+		#custom-tippy-content-close-btn {
+			/* TODO: 클릭 후 닫히기 기능 점검 필요 */
+			cursor: pointer;
+		}
+	}
+
+	& > .tippy-svg-arrow {
+		& > svg {
+			transform: translate3d(0, 0, 0);
+		}
+	}
+
+	&.tippy-box[data-placement^='top'] > .tippy-svg-arrow {
+		bottom: 0;
+	}
+	&.tippy-box[data-placement^='top'] > .tippy-svg-arrow:after,
+	&.tippy-box[data-placement^='top'] > .tippy-svg-arrow > svg {
+		top: 16px;
+		transform: rotate(180deg);
+	}
+	&.tippy-box[data-placement^='bottom'] > .tippy-svg-arrow {
+		top: 0;
+	}
+	&.tippy-box[data-placement^='bottom'] > .tippy-svg-arrow > svg {
+		bottom: 16px;
+	}
+	&.tippy-box[data-placement^='left'] > .tippy-svg-arrow {
+		right: 0;
+	}
+	&.tippy-box[data-placement^='left'] > .tippy-svg-arrow:after,
+	&.tippy-box[data-placement^='left'] > .tippy-svg-arrow > svg {
+		transform: rotate(90deg);
+		top: calc(50% - 3px);
+		left: 11px;
+	}
+	&.tippy-box[data-placement^='right'] > .tippy-svg-arrow {
+		left: 0;
+	}
+	&.tippy-box[data-placement^='right'] > .tippy-svg-arrow:after,
+	&.tippy-box[data-placement^='right'] > .tippy-svg-arrow > svg {
+		transform: rotate(-90deg);
+		top: calc(50% - 3px);
+		right: 11px;
+	}
+	.tippy-svg-arrow {
+		width: 16px;
+		height: 16px;
+		fill: #333;
+		text-align: initial;
+	}
+	.tippy-svg-arrow,
+	.tippy-svg-arrow > svg {
+		position: absolute;
+	}
+`;
+exports.Children = styled_1.default.div `
+	display: inline-block;
+	${({ isChildrenFullWidth }) => isChildrenFullWidth && 'width: 100%'};
+`;

package/dist/components/Tooltip/index.js

@@ -0,0 +1,11 @@
+"use strict";
+// fyi. 원하는 모듈과 타입만 외부 노출 방법
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImpactTooltip = exports.BasicTooltip = void 0;
+var BasicTooltip_1 = require("./BasicTooltip");
+Object.defineProperty(exports, "BasicTooltip", { enumerable: true, get: function () { return __importDefault(BasicTooltip_1).default; } });
+var ImpactTooltip_1 = require("./ImpactTooltip");
+Object.defineProperty(exports, "ImpactTooltip", { enumerable: true, get: function () { return __importDefault(ImpactTooltip_1).default; } });