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

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

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+exports.default = {
+    title: 'Component/Button/FloatSingleButton',
+    component: _1.FloatSingleButton,
+};
+const Default = () => (react_1.default.createElement("div", { className: "h-screen w-full bg-gray-100" },
+    react_1.default.createElement(_1.FloatSingleButton, { colorType: "lime", purpose: "main" }, "\uD14C\uC2A4\uD2B8")));
+exports.Default = Default;

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

@@ -1,6 +1,6 @@
-import { default as React } from 'react';
-import { BaseButtonProps } from '../BaseButton';
-type SingleButtonProps = BaseButtonProps;
+import React from 'react';
+import { ButtonProps } from '@/components/ui/button';
+type SingleButtonProps = ButtonProps;
 declare const SingleButton: React.FC<SingleButtonProps>;
 export type { SingleButtonProps };
 export { SingleButton };

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

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingleButton = void 0;
+const react_1 = __importDefault(require("react"));
+const button_1 = require("@/components/ui/button");
+const SingleButton = (_a) => {
+    var { colorType, children, purpose = 'main' } = _a, restProps = __rest(_a, ["colorType", "children", "purpose"]);
+    return (react_1.default.createElement(button_1.Button, Object.assign({}, restProps, { colorType: colorType, purpose: purpose }), children));
+};
+exports.SingleButton = SingleButton;

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

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

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/Button-a1ffff4ad3b74bafbe6cd41fa6761c87" 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/Button-a1ffff4ad3b74bafbe6cd41fa6761c87" 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: (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_1.SingleButton, Object.assign({}, props), "\uBC84\uD2BC"))),
+    args: {
+        colorType: 'gray',
+        purpose: 'sub',
+        children: '버튼',
+    },
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: '텍스트와 버튼 영역 모두 색을 사용하고, 텍스트가 잘 보이도록 옅은 배경색을 사용합니다.<br/>한 화면 내에서 여러 개를 사용할 수 있습니다.',
+            },
+        },
+    },
+};

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

@@ -1,3 +1,3 @@
-import { default as React } from 'react';
+import React from 'react';
 declare const TestButton: () => React.JSX.Element;
 export { TestButton };

package/dist/components/Button/TestButton/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 });
+exports.TestButton = void 0;
+const react_1 = __importDefault(require("react"));
+const TestButton = () => {
+    return react_1.default.createElement("button", { className: "bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600" }, "Tailwind Button");
+};
+exports.TestButton = TestButton;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: () => React.JSX.Element;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/dist/components/Button/TestButton/index.stories.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 });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+exports.default = {
+    title: 'Component/Button/TestButton',
+    component: _1.TestButton,
+};
+const Default = () => react_1.default.createElement(_1.TestButton, null);
+exports.Default = Default;

package/dist/components/Button/index.js

@@ -0,0 +1,22 @@
+"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);
+__exportStar(require("./TestButton"), exports);

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 type CardProps = {
     disabled?: boolean;
     clickable?: boolean;

package/dist/components/Card/index.js

@@ -0,0 +1,49 @@
+"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.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

@@ -1,13 +1,13 @@
 import { CardProps } from '.';
-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;
 } & {
     disabled?: boolean;
     clickable?: boolean;
     size?: "s" | "m";
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ContentContainer: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContentContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & CardProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & 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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { SelectItemProps } from '../../SelectBox';
 import { ColorType } from '../../../utils';
 type MultiSelectProps<T> = {

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

@@ -0,0 +1,33 @@
+"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.value.length > 0;
+    const handleClickResetIcon = () => {
+        props.onChange([]);
+    };
+    const iconProps = showResetIcon
+        ? { type: 'reset', onClick: handleClickResetIcon }
+        : undefined;
+    const handleClickItem = (selectedValue) => {
+        const index = props.value.findIndex((target) => target === selectedValue);
+        if (index === -1) {
+            props.onChange([...props.value, selectedValue]);
+        }
+        else {
+            const prev = props.value;
+            const result = [...prev.slice(0, index), ...prev.slice(index + 1)];
+            props.onChange(result);
+        }
+    };
+    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: props.value.includes(item.value), onClick: () => handleClickItem(item.value), onReset: () => handleClickItem(item.value) }));
+    })));
+};
+exports.BasicChips = BasicChips;

package/dist/components/Chips/BasicChips/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/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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { ColorType } from '../../..';
 import { ChipsType } from '../type';
 type ChipItemProps = {