@pfct/purple 1.3.4-npm-test.1

package/dist/components/Button/SingleButton/index.spec.js

@@ -0,0 +1,14 @@
+"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 react_2 = require("@testing-library/react");
+const _1 = require(".");
+describe('<SingleButton />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(_1.SingleButton, { colorType: "gray", purpose: "main" }, "\uD655\uC778"));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

package/dist/components/Button/SingleButton/index.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SingleButtonProps } from '.';
+type Story = StoryObj<SingleButtonProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/fdb21779528c4474ba7e5e500388bf3e?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * **Pattern**
+ *
+ * 정보 영역에서 선택사항이 한 가지일 경우 사용합니다.
+ *
+ * **Hierarchy**
+ *
+ * 컬러 스타일에 따라 두 가지의 스타일로 나누어서 사용합니다. 이 때 반드시 버튼의 중요도에 따른 위계를 구분하여 사용해야 합니다.
+ */
+declare const meta: Meta<SingleButtonProps>;
+export default meta;
+export declare const MainButton: Story;
+export declare const SubButton: Story;

package/dist/components/Button/SingleButton/index.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubButton = exports.MainButton = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/fdb21779528c4474ba7e5e500388bf3e?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * **Pattern**
+ *
+ * 정보 영역에서 선택사항이 한 가지일 경우 사용합니다.
+ *
+ * **Hierarchy**
+ *
+ * 컬러 스타일에 따라 두 가지의 스타일로 나누어서 사용합니다. 이 때 반드시 버튼의 중요도에 따른 위계를 구분하여 사용해야 합니다.
+ */
+const meta = {
+    title: 'Component/Button/SingleButton',
+    component: _1.SingleButton,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.MainButton = {
+    render: (props) => react_1.default.createElement(_1.SingleButton, Object.assign({}, props)),
+    args: {
+        colorType: 'gray',
+        purpose: 'main',
+        children: '버튼',
+    },
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: '흰 텍스트가 잘 보이도록 버튼 영역에 색을 채운 버튼입니다.<br/>배경에 강한 컬러를 사용하기 때문에 한 화면에 최대 1개만 사용해야 합니다.',
+            },
+        },
+    },
+};
+// UI 확인용
+exports.SubButton = {
+    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_1.SingleButton, { colorType: "pink", purpose: "sub" }, "\uBC84\uD2BC"))),
+    args: {
+        colorType: 'gray',
+        purpose: 'main',
+        children: '버튼',
+    },
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: '텍스트와 버튼 영역 모두 색을 사용하고, 텍스트가 잘 보이도록 옅은 배경색을 사용합니다.<br/>한 화면 내에서 여러 개를 사용할 수 있습니다.',
+            },
+        },
+    },
+};

package/dist/components/Button/SingleButton/index.styled.d.ts

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

package/dist/components/Button/SingleButton/index.styled.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingleButtonWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.SingleButtonWrapper = styled_1.default.div `
+	height: 50px;
+`;

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

@@ -0,0 +1,5 @@
+export * from './SingleButton';
+export * from './DoubleButton';
+export * from './FloatSingleButton';
+export * from './FloatDoubleButton';
+export * from './FloatBaseButton';

package/dist/components/Button/index.js

@@ -0,0 +1,21 @@
+"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("./SingleButton"), exports);
+__exportStar(require("./DoubleButton"), exports);
+__exportStar(require("./FloatSingleButton"), exports);
+__exportStar(require("./FloatDoubleButton"), exports);
+__exportStar(require("./FloatBaseButton"), exports);

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

@@ -0,0 +1,10 @@
+import React from 'react';
+type CardProps = {
+    disabled?: boolean;
+    clickable?: boolean;
+    fixedSize?: 's' | 'm';
+    children: React.ReactNode;
+};
+declare const Card: React.FC<CardProps>;
+export type { CardProps };
+export { Card };

package/dist/components/Card/index.js

@@ -0,0 +1,39 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.Card = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const hooks_1 = require("../../hooks");
+const Card = ({ fixedSize, disabled, clickable, children }) => {
+    const isMobile = (0, hooks_1.useLayoutIsMobile)();
+    const size = fixedSize || (isMobile ? 's' : 'm');
+    return (react_1.default.createElement(Styled.Wrapper, { size: size, disabled: disabled, clickable: clickable },
+        react_1.default.createElement(Styled.ContentContainer, { disabled: disabled }, children)));
+};
+exports.Card = Card;

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

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

package/dist/components/Card/index.spec.js

@@ -0,0 +1,14 @@
+"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 react_2 = require("@testing-library/react");
+const _1 = require(".");
+describe('<Card />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(_1.Card, null, " \uD655\uC778"));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CardProps } from '.';
+type Story = StoryObj<CardProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Card-7244d5fc8b4a4056a5bf954775c86bc7?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 페이지 안에서 콘텐츠를 시각적으로 구분 지어야 할 때 사용합니다.
+ *
+ */
+declare const meta: Meta<CardProps>;
+export default meta;
+export declare const MCard: Story;
+export declare const SCard: Story;
+export declare const PassiveCard: Story;

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

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PassiveCard = exports.SCard = exports.MCard = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Card-7244d5fc8b4a4056a5bf954775c86bc7?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 페이지 안에서 콘텐츠를 시각적으로 구분 지어야 할 때 사용합니다.
+ *
+ */
+const meta = {
+    title: 'Component/Card',
+    component: _1.Card,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.MCard = {
+    render: (props) => react_1.default.createElement(_1.Card, Object.assign({}, props)),
+    args: {
+        fixedSize: 'm',
+        children: (react_1.default.createElement("div", { style: { padding: '20px' } },
+            react_1.default.createElement("h1", null, "\uD0C0\uC774\uD2C0"),
+            react_1.default.createElement("h2", null, "\uC11C\uBE0C\uD0C0\uC774\uD2C0"),
+            react_1.default.createElement("p", null, "\uB0B4\uC6A9\uC785\uB2C8\uB2E4"))),
+    },
+};
+exports.MCard.storyName = 'M 활성화';
+exports.SCard = {
+    render: (props) => (react_1.default.createElement("div", { style: { width: '300px' } },
+        react_1.default.createElement(_1.Card, Object.assign({}, props)))),
+    args: {
+        fixedSize: 's',
+        children: (react_1.default.createElement("div", { style: { padding: '20px' } },
+            react_1.default.createElement("h1", null, "\uD0C0\uC774\uD2C0"),
+            react_1.default.createElement("h2", null, "\uC11C\uBE0C\uD0C0\uC774\uD2C0"),
+            react_1.default.createElement("p", null, "\uB0B4\uC6A9\uC785\uB2C8\uB2E4"))),
+    },
+};
+exports.SCard.storyName = 'S 활성화';
+exports.PassiveCard = {
+    render: (props) => react_1.default.createElement(_1.Card, Object.assign({}, props)),
+    args: {
+        fixedSize: 'm',
+        children: (react_1.default.createElement("div", { style: { padding: '20px' } },
+            react_1.default.createElement("h1", null, "\uD0C0\uC774\uD2C0"),
+            react_1.default.createElement("h2", null, "\uC11C\uBE0C\uD0C0\uC774\uD2C0"),
+            react_1.default.createElement("p", null, "\uB0B4\uC6A9\uC785\uB2C8\uB2E4"))),
+        disabled: true,
+    },
+};
+exports.PassiveCard.storyName = 'M 비활성화';

package/dist/components/Card/index.styled.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { CardProps } from '.';
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    disabled?: boolean | undefined;
+    clickable?: boolean | undefined;
+    size?: "s" | "m" | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContentContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & CardProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Card/index.styled.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentContainer = exports.Wrapper = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Colors_1 = require("../../core/Colors");
+exports.Wrapper = styled_1.default.div `
+	box-sizing: border-box;
+	width: 100%;
+	background-color: ${Colors_1.basicColors.white};
+
+	${({ clickable }) => clickable
+    ? (0, react_1.css) `
+					cursor: pointer;
+			  `
+    : (0, react_1.css) `
+					cursor: default;
+			  `};
+
+	${({ disabled }) => disabled &&
+    (0, react_1.css) `
+			cursor: not-allowed;
+		`};
+
+	${({ disabled, clickable }) => !disabled &&
+    clickable &&
+    (0, react_1.css) `
+			&:hover {
+				background-color: ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.white, '50%')};
+			}
+
+			&:active {
+				background-color: ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.white, '30%')};
+			}
+		`}
+
+	${({ size }) => {
+    switch (size) {
+        case 'm':
+            return (0, react_1.css) `
+					border-radius: 20px;
+				`;
+        case 's':
+            return (0, react_1.css) `
+					border-radius: 10px;
+				`;
+        default:
+            return undefined;
+    }
+}}
+`;
+exports.ContentContainer = styled_1.default.div `
+	${({ disabled }) => disabled &&
+    (0, react_1.css) `
+			opacity: 0.3;
+		`};
+`;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SelectItemProps } from '../../SelectBox';
+import { ColorType } from '../../../utils';
+type BasicChipsProps = {
+    colorType: ColorType;
+    list: (SelectItemProps & {
+        selected: boolean;
+    })[];
+    updateList: (idx: number, selected: boolean) => void;
+};
+declare const BasicChips: React.FC<BasicChipsProps>;
+export type { BasicChipsProps };
+export { BasicChips };

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

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasicChips = void 0;
+const react_1 = __importDefault(require("react"));
+const ChipItem_1 = require("../ChipItem");
+const ChipsFrame_1 = require("../ChipsFrame");
+const BasicChips = (props) => {
+    const showResetIcon = props.list.some((item) => item.selected);
+    const handleClickResetIcon = () => {
+        props.list.forEach((item, index) => {
+            if (item.selected) {
+                props.updateList(index, false);
+            }
+        });
+    };
+    const iconProps = showResetIcon
+        ? { type: 'reset', onClick: handleClickResetIcon }
+        : undefined;
+    return (react_1.default.createElement(ChipsFrame_1.ChipsFrame, { colorType: props.colorType, type: "basic", icon: iconProps }, props.list.map((item, index) => {
+        return (react_1.default.createElement(ChipItem_1.ChipItem, { key: index, type: "basic", colorType: props.colorType, displayValue: item.label, selected: item.selected, onClick: () => props.updateList(index, true), onReset: () => props.updateList(index, false) }));
+    })));
+};
+exports.BasicChips = BasicChips;

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const OutterContainer: 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 declare const ChipListContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    hasIconArea: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ControlIconContainer: 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 declare const ControlIconGradientBackground: 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 declare const ControlIconCircleWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,74 @@
+"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 zIndex = {
+    ControlIconContainer: 2,
+};
+const ControlIconWidthPx = index_styled_1.CHIP_ITEM_HEIGHT;
+const ControlIconGradientPx = 20;
+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 `
+	display: flex;
+	gap: 5px;
+	z-index: ${zIndex.ControlIconContainer - 1};
+
+	overflow: auto;
+
+	${({ hasIconArea }) => hasIconArea &&
+    (0, react_1.css) `
+			padding-left: ${ControlIconWidthPx + ControlIconGradientPx}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/ChipItem/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ColorType } from '../../..';
+import { ChipsType } from '../type';
+type ChipItemProps = {
+    type: ChipsType;
+    colorType: ColorType;
+    displayValue: string;
+    disabled?: boolean;
+    selected?: boolean;
+    onClick?: () => void;
+    onReset?: () => void;
+};
+declare const ChipItem: React.FC<ChipItemProps>;
+export type { ChipItemProps };
+export { ChipItem };

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

@@ -0,0 +1,44 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.CancelSIcon, { size: 18 }))),
+        !selected && type === 'select' && react_1.default.createElement(__1.ChevronDownSIcon, { size: 18 })));
+};
+exports.ChipItem = ChipItem;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ColorType } from '../../..';
+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 | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    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 | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, 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 __1 = require("../../..");
+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, __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.d.ts

@@ -0,0 +1,14 @@
+import { ColorType } from '../../../utils';
+import { ReactFCWithChildren } from '../../..';
+import { ChipsType } from '../type';
+type ChipsFrameProps = {
+    colorType: ColorType;
+    type: ChipsType;
+    icon?: {
+        type: 'reset' | 'filter';
+        onClick: () => void;
+    };
+};
+declare const ChipsFrame: ReactFCWithChildren<ChipsFrameProps>;
+export type { ChipsFrameProps };
+export { ChipsFrame };