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

package/dist/components/Chips/ChipItem/index.js

@@ -0,0 +1,54 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChipItem = void 0;
+const react_1 = __importDefault(require("react"));
+const __1 = require("../../..");
+const Styled = __importStar(require("./index.styled"));
+const ChipItem = ({ type, colorType, displayValue, disabled = false, selected = false, onClick, onReset, }) => {
+    const hasRightIcon = selected || type === 'select';
+    return (react_1.default.createElement(Styled.Container, { colorType: colorType, disabled: disabled, selected: selected, hasRightIcon: hasRightIcon, onClick: onClick },
+        react_1.default.createElement(__1.Title3, { className: Styled.className.Text }, displayValue),
+        selected && (react_1.default.createElement(Styled.CancelIconWrapper, { onClick: (e) => {
+                e.stopPropagation();
+                onReset === null || onReset === void 0 ? void 0 : onReset();
+            } },
+            react_1.default.createElement(__1.CancelIcon, { size: 18 }))),
+        !selected && type === 'select' && react_1.default.createElement(__1.ChevronDownIcon, { size: 18 })));
+};
+exports.ChipItem = ChipItem;

package/dist/components/Chips/ChipItem/index.styled.d.ts

@@ -3,16 +3,16 @@ export declare const className: {
     Text: string;
 };
 export declare const CHIP_ITEM_HEIGHT = 38;
-export declare const Container: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     disabled: boolean;
     selected: boolean;
     colorType: ColorType;
     hasRightIcon: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const CancelIconWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const CancelIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/components/Chips/ChipItem/index.styled.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CancelIconWrapper = exports.Container = exports.CHIP_ITEM_HEIGHT = exports.className = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const GenerateColorStyle_1 = require("../../../utils/GenerateColorStyle");
+exports.className = {
+    Text: 'chip-item-text',
+};
+exports.CHIP_ITEM_HEIGHT = 38;
+exports.Container = styled_1.default.span `
+	display: inline-flex;
+	min-width: max-content;
+	height: ${exports.CHIP_ITEM_HEIGHT}px;
+	gap: 2px;
+	padding: 8px 0 8px 12px;
+	padding-right: ${({ hasRightIcon }) => (hasRightIcon ? '7px' : '12px')};
+	align-items: center;
+
+	border-radius: 22px;
+
+	${({ disabled, selected, colorType }) => {
+    const colorStyle = (0, GenerateColorStyle_1.chipColorStyle)(colorType);
+    const state = disabled ? 'disabled' : 'default';
+    const status = selected ? 'on' : 'off';
+    return (0, react_1.css) `
+			background-color: ${colorStyle[state][status].containerColor};
+			border: 1px solid ${colorStyle[state][status].borderColor};
+			.${exports.className.Text} {
+				color: ${colorStyle[state][status].textColor};
+			}
+			svg > path {
+				fill: ${colorStyle[state][status].iconColor};
+			}
+		`;
+}}
+
+	${({ selected }) => !selected &&
+    (0, react_1.css) `
+			cursor: pointer;
+		`}
+`;
+exports.CancelIconWrapper = styled_1.default.span `
+	cursor: pointer;
+	display: flex;
+`;

package/dist/components/Chips/ChipsFrame/index.js

@@ -0,0 +1,54 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChipsFrame = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const Icon_1 = require("../../../Icon");
+const ChipsFrame = (props) => {
+    var _a, _b, _c;
+    const hasIconArea = Boolean(props.icon);
+    return (react_1.default.createElement(Styled.OutterContainer, null,
+        hasIconArea && (react_1.default.createElement(Styled.ControlIconContainer, null,
+            react_1.default.createElement(Styled.ControlIconGradientBackground, null),
+            react_1.default.createElement(Styled.ControlIconCircleWrapper, { onClick: (_a = props.icon) === null || _a === void 0 ? void 0 : _a.onClick },
+                ((_b = props.icon) === null || _b === void 0 ? void 0 : _b.type) === 'reset' && react_1.default.createElement(Icon_1.ReIcon, { size: 21.375 }),
+                ((_c = props.icon) === null || _c === void 0 ? void 0 : _c.type) === 'filter' && react_1.default.createElement(Icon_1.FilterIcon, { size: 17 })))),
+        react_1.default.createElement(Styled.ChipListContainer, { hasIconArea: hasIconArea }, props.children)));
+};
+exports.ChipsFrame = ChipsFrame;

package/dist/components/Chips/ChipsFrame/index.styled.d.ts

@@ -1,22 +1,22 @@
-export declare const OutterContainer: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const OutterContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ChipListContainer: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ChipListContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     hasIconArea: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ControlIconContainer: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ControlIconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ControlIconGradientBackground: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ControlIconGradientBackground: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ControlIconCircleWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ControlIconCircleWrapper: 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/Chips/ChipsFrame/index.styled.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlIconCircleWrapper = exports.ControlIconGradientBackground = exports.ControlIconContainer = exports.ChipListContainer = exports.OutterContainer = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const core_1 = require("../../../core");
+const react_1 = require("@emotion/react");
+const index_styled_1 = require("../ChipItem/index.styled");
+const common_1 = require("../../../style/common");
+const zIndex = {
+    ControlIconContainer: 2,
+};
+const ControlIconWidthPx = index_styled_1.CHIP_ITEM_HEIGHT;
+const ControlIconGradientPx = 25;
+const CongrolIconBackground = core_1.basicColors.white;
+exports.OutterContainer = styled_1.default.div `
+	display: flex;
+	align-items: center;
+	position: relative;
+	overflow: hidden;
+
+	width: 100%;
+`;
+exports.ChipListContainer = styled_1.default.div `
+	${common_1.scrollStyle}
+
+	display: flex;
+	gap: 5px;
+	z-index: ${zIndex.ControlIconContainer - 1};
+
+	${({ hasIconArea }) => hasIconArea &&
+    (0, react_1.css) `
+			padding-left: ${ControlIconWidthPx + 8}px;
+		`}
+	padding-right: 20px;
+`;
+exports.ControlIconContainer = styled_1.default.div `
+	cursor: pointer;
+	position: absolute;
+	left: 0;
+	top: 0;
+
+	z-index: ${zIndex.ControlIconContainer};
+
+	background-color: ${CongrolIconBackground};
+	width: ${ControlIconWidthPx}px;
+	height: ${ControlIconWidthPx}px;
+`;
+exports.ControlIconGradientBackground = styled_1.default.div `
+	width: ${ControlIconGradientPx}px;
+	height: 100%;
+
+	/* TODO: 컬러, 범위, 여백 수정 필요 */
+	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.01) 100%);
+
+	position: absolute;
+	left: ${ControlIconWidthPx}px;
+	top: 0;
+`;
+exports.ControlIconCircleWrapper = styled_1.default.div `
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+
+	background: ${core_1.basicColors.gray50};
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	position: absolute;
+	left: 0;
+	top: 0;
+`;

package/dist/components/Chips/index.js

@@ -0,0 +1,19 @@
+"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("./BasicChips"), exports);
+__exportStar(require("./ChipItem"), exports);
+__exportStar(require("./ChipsFrame"), exports);

package/dist/components/Chips/index.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChipItemProps } from './ChipItem';
+import { BasicChipsProps } from './BasicChips';
+type Story = StoryObj<ChipItemProps>;
+declare const meta: Meta<ChipItemProps>;
+export default meta;
+export declare const ChipItemStory: Story;
+export declare const BasicChipsStory1: StoryObj<BasicChipsProps>;
+export declare const BasicChipsStory2: StoryObj<BasicChipsProps>;

package/dist/components/Chips/index.stories.js

@@ -0,0 +1,84 @@
+"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.BasicChipsStory2 = exports.BasicChipsStory1 = exports.ChipItemStory = void 0;
+const react_1 = __importStar(require("react"));
+const ChipItem_1 = require("./ChipItem");
+const BasicChips_1 = require("./BasicChips");
+const meta = {
+    title: 'Component/Chips',
+    component: ChipItem_1.ChipItem,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.ChipItemStory = {
+    render: (props) => react_1.default.createElement(ChipItem_1.ChipItem, Object.assign({}, props)),
+    args: {
+        colorType: 'pink',
+        displayValue: '텍스트',
+    },
+};
+exports.ChipItemStory.storyName = 'ChipItem Anatomy';
+const BasicChipsUsage = (props) => {
+    const [value, setValue] = (0, react_1.useState)([]);
+    return (react_1.default.createElement("div", { style: { background: 'white', width: '350px' } },
+        react_1.default.createElement(BasicChips_1.BasicChips, Object.assign({}, props, { value: value, onChange: setValue }))));
+};
+exports.BasicChipsStory1 = {
+    render: (props) => react_1.default.createElement(BasicChipsUsage, Object.assign({}, props)),
+    args: {
+        colorType: 'pink',
+        list: [
+            { label: '텍스트1', value: 'valu1' },
+            { label: '텍스트2', value: 'value2' },
+        ],
+    },
+};
+exports.BasicChipsStory1.storyName = 'Basic Chips (Short)';
+exports.BasicChipsStory2 = {
+    render: (props) => react_1.default.createElement(BasicChipsUsage, Object.assign({}, props)),
+    args: {
+        colorType: 'pink',
+        list: [
+            { label: '텍스트1', value: 'value1' },
+            { label: '텍스트2', value: 'value2' },
+            { label: '텍스트3', value: 'value3' },
+            { label: '텍스트4', value: 'value4' },
+            { label: '텍스트5', value: 'value5' },
+            { label: '텍스트6', value: 'value6' },
+        ],
+    },
+};
+exports.BasicChipsStory2.storyName = 'Basic Chips (Long, Scrollable)';

package/dist/components/Chips/type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/Comment/Group/index.js

@@ -0,0 +1,45 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentGroup = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const CommentGroup = ({ children }) => {
+    return react_1.default.createElement(Styled.Wrapper, null, children);
+};
+exports.CommentGroup = CommentGroup;

package/dist/components/Comment/Group/index.styled.d.ts

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

package/dist/components/Comment/Group/index.styled.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const index_styled_1 = require("../Item/index.styled");
+exports.Wrapper = styled_1.default.ul `
+	margin: 0;
+	padding: 0;
+	.${index_styled_1.className.itemWrapper} {
+		margin-top: 7px;
+
+		&:first-of-type {
+			margin-top: 0;
+		}
+	}
+`;

package/dist/components/Comment/Item/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 interface CommentItemProps {
     text: React.ReactNode;
     hasBullet?: boolean;

package/dist/components/Comment/Item/index.js

@@ -0,0 +1,48 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentItem = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const CommentItem = ({ text, hasBullet = true }) => {
+    return (react_1.default.createElement(Styled.Wrapper, { className: Styled.className.itemWrapper },
+        hasBullet && (react_1.default.createElement(Styled.BulletWrapper, null,
+            react_1.default.createElement(Styled.Bullet, null))),
+        react_1.default.createElement(Styled.Text, null, text)));
+};
+exports.CommentItem = CommentItem;

package/dist/components/Comment/Item/index.styled.d.ts

@@ -1,19 +1,19 @@
 export declare const className: {
     itemWrapper: string;
 };
-export declare const Wrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BulletWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BulletWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Bullet: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Bullet: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Text: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Text: 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/Comment/Item/index.styled.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = exports.Bullet = exports.BulletWrapper = exports.Wrapper = exports.className = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const TextStyles_1 = require("../../../core/TextStyles");
+const Colors_1 = require("../../../core/Colors");
+exports.className = {
+    itemWrapper: 'comment-item-wrapper',
+};
+exports.Wrapper = styled_1.default.div `
+	display: flex;
+`;
+exports.BulletWrapper = styled_1.default.div `
+	min-width: 16px;
+	min-height: 16px;
+	max-width: 16px;
+	max-height: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`;
+exports.Bullet = styled_1.default.div `
+	width: 2px;
+	height: 2px;
+	border-radius: 50%;
+	background-color: ${Colors_1.basicColors.gray400};
+`;
+exports.Text = styled_1.default.div `
+	color: ${Colors_1.basicColors.gray400} !important;
+	${TextStyles_1.typography.body2};
+	white-space: pre-wrap;
+`;

package/dist/components/Comment/index.d.ts

@@ -1,8 +1,8 @@
 import { CommentItemProps } from './Item';
 import { CommentGroupProps } from './Group';
-declare const Comment: import('react').FC<CommentItemProps> & {
-    Group: import('../..').ReactFCWithChildren<{
-        readonly children: import('react').ReactNode;
+declare const Comment: import("react").FC<CommentItemProps> & {
+    Group: import("../..").ReactFCWithChildren<{
+        readonly children: import("react").ReactNode;
     }>;
 };
 export type { CommentItemProps, CommentGroupProps };

package/dist/components/Comment/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Comment = void 0;
+const Item_1 = require("./Item");
+const Group_1 = require("./Group");
+const Comment = Object.assign(Item_1.CommentItem, {
+    Group: Group_1.CommentGroup,
+});
+exports.Comment = Comment;

package/dist/components/Comment/index.spec.d.ts

@@ -0,0 +1 @@
+export {};