@pfct/purple 1.4.0-rc.4 → 1.4.0-rc.5

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

@@ -0,0 +1,23 @@
+import { j as t } from "../../../chunks/jsx-runtime.Drh4NO5G.js";
+import { S as m } from "../../../chunks/index.styled.BTZpARWY.js";
+import { FloatBaseButton as a } from "../FloatBaseButton/index.es.js";
+const x = ({
+  underlineText: o,
+  underlineUrl: r,
+  underlineOnClick: n,
+  underlineDisabled: s,
+  children: e,
+  ...i
+}) => /* @__PURE__ */ t.jsx(
+  a,
+  {
+    underlineText: o,
+    underlineUrl: r,
+    underlineOnClick: n,
+    underlineDisabled: s,
+    children: /* @__PURE__ */ t.jsx(m, { ...i, children: e })
+  }
+);
+export {
+  x as FloatSingleButton
+};

package/dist/components/Button/FloatSingleButton/index.spec.cjs.js

@@ -0,0 +1 @@
+"use strict";const t=require("../../../chunks/jsx-runtime.713F0z8w.js"),e=require("../../../chunks/react.esm.DGn2IpBE.js"),n=require("./index.cjs.js");describe("<FloatSingleButton />",()=>{it("렌더링 체크",()=>{e.render(t.jsxRuntimeExports.jsx(n.FloatSingleButton,{colorType:"gray",purpose:"main",children:"확인"})),expect(e.screen.getByText("확인")).toBeInTheDocument()})});

package/dist/components/Button/FloatSingleButton/index.spec.es.js

@@ -0,0 +1,10 @@
+import { j as e } from "../../../chunks/jsx-runtime.Drh4NO5G.js";
+import { r as t, s as o } from "../../../chunks/react.esm.CbGyPoJJ.js";
+import { FloatSingleButton as r } from "./index.es.js";
+describe("<FloatSingleButton />", () => {
+  it("렌더링 체크", () => {
+    t(
+      /* @__PURE__ */ e.jsx(r, { colorType: "gray", purpose: "main", children: "확인" })
+    ), expect(o.getByText("확인")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../chunks/jsx-runtime.713F0z8w.js");require("../../../core/TextStyles/index.cjs.js");const e=require("../../../chunks/index.styled.SwCr6Bqs.js");exports.SingleButton=e.SingleButton;

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

@@ -0,0 +1,6 @@
+import "../../../chunks/jsx-runtime.Drh4NO5G.js";
+import "../../../core/TextStyles/index.es.js";
+import { S as m } from "../../../chunks/index.styled.BTZpARWY.js";
+export {
+  m as SingleButton
+};

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

@@ -0,0 +1 @@
+"use strict";const t=require("../../../chunks/jsx-runtime.713F0z8w.js"),e=require("../../../chunks/react.esm.DGn2IpBE.js"),r=require("../../../chunks/index.styled.SwCr6Bqs.js");describe("<SingleButton />",()=>{it("렌더링 체크",()=>{e.render(t.jsxRuntimeExports.jsx(r.SingleButton,{colorType:"gray",purpose:"main",children:"확인"})),expect(e.screen.getByText("확인")).toBeInTheDocument()})});

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

@@ -0,0 +1,10 @@
+import { j as e } from "../../../chunks/jsx-runtime.Drh4NO5G.js";
+import { r, s as t } from "../../../chunks/react.esm.CbGyPoJJ.js";
+import { S as o } from "../../../chunks/index.styled.BTZpARWY.js";
+describe("<SingleButton />", () => {
+  it("렌더링 체크", () => {
+    r(
+      /* @__PURE__ */ e.jsx(o, { colorType: "gray", purpose: "main", children: "확인" })
+    ), expect(t.getByText("확인")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../../chunks/jsx-runtime.713F0z8w.js"),o=require("../../../chunks/index.styled.SwCr6Bqs.js"),n={title:"Component/Button/SingleButton",component:o.SingleButton,tags:["autodocs"]},r={render:e=>t.jsxRuntimeExports.jsx(o.SingleButton,{...e}),args:{colorType:"gray",purpose:"main",children:"버튼"},argTypes:{onClick:{action:"clicked"}},parameters:{docs:{description:{story:"흰 텍스트가 잘 보이도록 버튼 영역에 색을 채운 버튼입니다.<br/>배경에 강한 컬러를 사용하기 때문에 한 화면에 최대 1개만 사용해야 합니다."}}}},s={render:e=>t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:t.jsxRuntimeExports.jsx(o.SingleButton,{...e,children:"버튼"})}),args:{colorType:"gray",purpose:"sub",children:"버튼"},argTypes:{onClick:{action:"clicked"}},parameters:{docs:{description:{story:"텍스트와 버튼 영역 모두 색을 사용하고, 텍스트가 잘 보이도록 옅은 배경색을 사용합니다.<br/>한 화면 내에서 여러 개를 사용할 수 있습니다."}}}};exports.MainButton=r;exports.SubButton=s;exports.default=n;

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

@@ -0,0 +1,46 @@
+import { j as o } from "../../../chunks/jsx-runtime.Drh4NO5G.js";
+import { S as t } from "../../../chunks/index.styled.BTZpARWY.js";
+const s = {
+  title: "Component/Button/SingleButton",
+  component: t,
+  tags: ["autodocs"]
+}, c = {
+  render: (r) => /* @__PURE__ */ o.jsx(t, { ...r }),
+  args: {
+    colorType: "gray",
+    purpose: "main",
+    children: "버튼"
+  },
+  argTypes: {
+    onClick: { action: "clicked" }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "흰 텍스트가 잘 보이도록 버튼 영역에 색을 채운 버튼입니다.<br/>배경에 강한 컬러를 사용하기 때문에 한 화면에 최대 1개만 사용해야 합니다."
+      }
+    }
+  }
+}, a = {
+  render: (r) => /* @__PURE__ */ o.jsx(o.Fragment, { children: /* @__PURE__ */ o.jsx(t, { ...r, children: "버튼" }) }),
+  args: {
+    colorType: "gray",
+    purpose: "sub",
+    children: "버튼"
+  },
+  argTypes: {
+    onClick: { action: "clicked" }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "텍스트와 버튼 영역 모두 색을 사용하고, 텍스트가 잘 보이도록 옅은 배경색을 사용합니다.<br/>한 화면 내에서 여러 개를 사용할 수 있습니다."
+      }
+    }
+  }
+};
+export {
+  c as MainButton,
+  a as SubButton,
+  s as default
+};

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

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@emotion/styled"),o=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},l=o(e),n=l.default.div`
+	height: 50px;
+`;exports.SingleButtonWrapper=n;

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

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

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

@@ -0,0 +1,7 @@
+import t from "@emotion/styled";
+const o = t.div`
+	height: 50px;
+`;
+export {
+  o as SingleButtonWrapper
+};

package/dist/components/Button/TestButton/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../chunks/jsx-runtime.713F0z8w.js"),e=()=>t.jsxRuntimeExports.jsx("button",{className:"bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600",children:"Tailwind Button"});exports.TestButton=e;

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

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

package/dist/components/Button/TestButton/index.es.js

@@ -0,0 +1,5 @@
+import { j as t } from "../../../chunks/jsx-runtime.Drh4NO5G.js";
+const r = () => /* @__PURE__ */ t.jsx("button", { className: "bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600", children: "Tailwind Button" });
+export {
+  r as 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.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../../chunks/jsx-runtime.713F0z8w.js"),t=require("./index.cjs.js"),o={title:"Component/TestButton",component:t.TestButton},n=()=>e.jsxRuntimeExports.jsx(t.TestButton,{});exports.Default=n;exports.default=o;

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.es.js

@@ -0,0 +1,10 @@
+import { j as o } from "../../../chunks/jsx-runtime.Drh4NO5G.js";
+import { TestButton as t } from "./index.es.js";
+const n = {
+  title: "Component/TestButton",
+  component: t
+}, m = () => /* @__PURE__ */ o.jsx(t, {});
+export {
+  m as Default,
+  n as default
+};

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/TestButton',
+    component: _1.TestButton,
+};
+const Default = () => react_1.default.createElement(_1.TestButton, null);
+exports.Default = Default;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../chunks/index.styled.SwCr6Bqs.js"),o=require("./FloatSingleButton/index.cjs.js"),e=require("./FloatDoubleButton/index.cjs.js"),n=require("./FloatBaseButton/index.cjs.js"),u=require("./TestButton/index.cjs.js");exports.DoubleButton=t.DoubleButton;exports.SingleButton=t.SingleButton;exports.FloatSingleButton=o.FloatSingleButton;exports.FloatDoubleButton=e.FloatDoubleButton;exports.FloatBaseButton=n.FloatBaseButton;exports.TestButton=u.TestButton;

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

@@ -3,3 +3,4 @@ export * from './DoubleButton';
 export * from './FloatSingleButton';
 export * from './FloatDoubleButton';
 export * from './FloatBaseButton';
+export * from './TestButton';

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

@@ -0,0 +1,13 @@
+import { D as e, S as r } from "../../chunks/index.styled.BTZpARWY.js";
+import { FloatSingleButton as u } from "./FloatSingleButton/index.es.js";
+import { FloatDoubleButton as B } from "./FloatDoubleButton/index.es.js";
+import { FloatBaseButton as f } from "./FloatBaseButton/index.es.js";
+import { TestButton as p } from "./TestButton/index.es.js";
+export {
+  e as DoubleButton,
+  f as FloatBaseButton,
+  B as FloatDoubleButton,
+  u as FloatSingleButton,
+  r as SingleButton,
+  p as TestButton
+};

package/dist/components/Button/index.js

@@ -19,3 +19,4 @@ __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.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../chunks/jsx-runtime.713F0z8w.js"),r=require("./index.styled.cjs.js");require("react");const c=require("../../hooks/useLayoutIsMobile.cjs.js"),x=({fixedSize:s,disabled:e,clickable:o,children:n})=>{const i=c(),u=s||(i?"s":"m");return t.jsxRuntimeExports.jsx(r.Wrapper,{size:u,disabled:e,clickable:o,children:t.jsxRuntimeExports.jsx(r.ContentContainer,{disabled:e,children:n})})};exports.Card=x;

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

@@ -0,0 +1,11 @@
+import { j as r } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import { Wrapper as m, ContentContainer as p } from "./index.styled.es.js";
+import "react";
+import x from "../../hooks/useLayoutIsMobile.es.js";
+const f = ({ fixedSize: t, disabled: o, clickable: s, children: e }) => {
+  const i = x(), n = t || (i ? "s" : "m");
+  return /* @__PURE__ */ r.jsx(m, { size: n, disabled: o, clickable: s, children: /* @__PURE__ */ r.jsx(p, { disabled: o, children: e }) });
+};
+export {
+  f as Card
+};

package/dist/components/Card/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __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 };
 };

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

@@ -0,0 +1 @@
+"use strict";const r=require("../../chunks/jsx-runtime.713F0z8w.js"),e=require("../../chunks/react.esm.DGn2IpBE.js"),t=require("./index.cjs.js");describe("<Card />",()=>{it("렌더링 체크",()=>{e.render(r.jsxRuntimeExports.jsx(t.Card,{children:" 확인"})),expect(e.screen.getByText("확인")).toBeInTheDocument()})});

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

@@ -0,0 +1,8 @@
+import { j as e } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import { r, s as t } from "../../chunks/react.esm.CbGyPoJJ.js";
+import { Card as o } from "./index.es.js";
+describe("<Card />", () => {
+  it("렌더링 체크", () => {
+    r(/* @__PURE__ */ e.jsx(o, { children: " 확인" })), expect(t.getByText("확인")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../chunks/jsx-runtime.713F0z8w.js"),r=require("./index.cjs.js"),n={title:"Component/Card",component:r.Card,tags:["autodocs"]},t={render:e=>s.jsxRuntimeExports.jsx(r.Card,{...e}),args:{fixedSize:"m",children:s.jsxRuntimeExports.jsxs("div",{style:{padding:"20px"},children:[s.jsxRuntimeExports.jsx("h1",{children:"타이틀"}),s.jsxRuntimeExports.jsx("h2",{children:"서브타이틀"}),s.jsxRuntimeExports.jsx("p",{children:"내용입니다"})]})}};t.storyName="M 활성화";const i={render:e=>s.jsxRuntimeExports.jsx("div",{style:{width:"300px"},children:s.jsxRuntimeExports.jsx(r.Card,{...e})}),args:{fixedSize:"s",children:s.jsxRuntimeExports.jsxs("div",{style:{padding:"20px"},children:[s.jsxRuntimeExports.jsx("h1",{children:"타이틀"}),s.jsxRuntimeExports.jsx("h2",{children:"서브타이틀"}),s.jsxRuntimeExports.jsx("p",{children:"내용입니다"})]})}};i.storyName="S 활성화";const x={render:e=>s.jsxRuntimeExports.jsx(r.Card,{...e}),args:{fixedSize:"m",children:s.jsxRuntimeExports.jsxs("div",{style:{padding:"20px"},children:[s.jsxRuntimeExports.jsx("h1",{children:"타이틀"}),s.jsxRuntimeExports.jsx("h2",{children:"서브타이틀"}),s.jsxRuntimeExports.jsx("p",{children:"내용입니다"})]}),disabled:!0}};x.storyName="M 비활성화";exports.MCard=t;exports.PassiveCard=x;exports.SCard=i;exports.default=n;

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

@@ -0,0 +1,49 @@
+import { j as e } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import { Card as d } from "./index.es.js";
+const h = {
+  title: "Component/Card",
+  component: d,
+  tags: ["autodocs"]
+}, r = {
+  render: (s) => /* @__PURE__ */ e.jsx(d, { ...s }),
+  args: {
+    fixedSize: "m",
+    children: /* @__PURE__ */ e.jsxs("div", { style: { padding: "20px" }, children: [
+      /* @__PURE__ */ e.jsx("h1", { children: "타이틀" }),
+      /* @__PURE__ */ e.jsx("h2", { children: "서브타이틀" }),
+      /* @__PURE__ */ e.jsx("p", { children: "내용입니다" })
+    ] })
+  }
+};
+r.storyName = "M 활성화";
+const i = {
+  render: (s) => /* @__PURE__ */ e.jsx("div", { style: { width: "300px" }, children: /* @__PURE__ */ e.jsx(d, { ...s }) }),
+  args: {
+    fixedSize: "s",
+    children: /* @__PURE__ */ e.jsxs("div", { style: { padding: "20px" }, children: [
+      /* @__PURE__ */ e.jsx("h1", { children: "타이틀" }),
+      /* @__PURE__ */ e.jsx("h2", { children: "서브타이틀" }),
+      /* @__PURE__ */ e.jsx("p", { children: "내용입니다" })
+    ] })
+  }
+};
+i.storyName = "S 활성화";
+const n = {
+  render: (s) => /* @__PURE__ */ e.jsx(d, { ...s }),
+  args: {
+    fixedSize: "m",
+    children: /* @__PURE__ */ e.jsxs("div", { style: { padding: "20px" }, children: [
+      /* @__PURE__ */ e.jsx("h1", { children: "타이틀" }),
+      /* @__PURE__ */ e.jsx("h2", { children: "서브타이틀" }),
+      /* @__PURE__ */ e.jsx("p", { children: "내용입니다" })
+    ] }),
+    disabled: !0
+  }
+};
+n.storyName = "M 비활성화";
+export {
+  r as MCard,
+  n as PassiveCard,
+  i as SCard,
+  h as default
+};

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

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@emotion/react"),c=require("@emotion/styled"),r=require("../../core/Colors/index.cjs.js"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(c),i=t.default.div`
+	box-sizing: border-box;
+	width: 100%;
+	background-color: ${r.basicColors.white};
+
+	${({clickable:e})=>e?o.css`
+					cursor: pointer;
+			  `:o.css`
+					cursor: default;
+			  `};
+
+	${({disabled:e})=>e&&o.css`
+			cursor: not-allowed;
+		`};
+
+	${({disabled:e,clickable:s})=>!e&&s&&o.css`
+			&:hover {
+				background-color: ${r.generateHexWithAlphaInLightMode(r.basicColors.white,"50%")};
+			}
+
+			&:active {
+				background-color: ${r.generateHexWithAlphaInLightMode(r.basicColors.white,"30%")};
+			}
+		`}
+
+	${({size:e})=>{switch(e){case"m":return o.css`
+					border-radius: 20px;
+				`;case"s":return o.css`
+					border-radius: 10px;
+				`;default:return}}}
+`,n=t.default.div`
+	${({disabled:e})=>e&&o.css`
+			opacity: 0.3;
+		`};
+`;exports.ContentContainer=n;exports.Wrapper=i;

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

@@ -1,14 +1,13 @@
-/// <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, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
-    disabled?: boolean | undefined;
-    clickable?: boolean | undefined;
-    size?: "s" | "m" | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & CardProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,51 @@
+import { css as o } from "@emotion/react";
+import i from "@emotion/styled";
+import { basicColors as e, generateHexWithAlphaInLightMode as t } from "../../core/Colors/index.es.js";
+const s = i.div`
+	box-sizing: border-box;
+	width: 100%;
+	background-color: ${e.white};
+
+	${({ clickable: r }) => r ? o`
+					cursor: pointer;
+			  ` : o`
+					cursor: default;
+			  `};
+
+	${({ disabled: r }) => r && o`
+			cursor: not-allowed;
+		`};
+
+	${({ disabled: r, clickable: c }) => !r && c && o`
+			&:hover {
+				background-color: ${t(e.white, "50%")};
+			}
+
+			&:active {
+				background-color: ${t(e.white, "30%")};
+			}
+		`}
+
+	${({ size: r }) => {
+  switch (r) {
+    case "m":
+      return o`
+					border-radius: 20px;
+				`;
+    case "s":
+      return o`
+					border-radius: 10px;
+				`;
+    default:
+      return;
+  }
+}}
+`, u = i.div`
+	${({ disabled: r }) => r && o`
+			opacity: 0.3;
+		`};
+`;
+export {
+  u as ContentContainer,
+  s as Wrapper
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../../chunks/jsx-runtime.713F0z8w.js"),a=require("../ChipItem/index.cjs.js"),u=require("../ChipsFrame/index.cjs.js"),h=e=>{const o=e.value.length>0?{type:"reset",onClick:()=>{e.onChange([])}}:void 0,t=n=>{const c=e.value.findIndex(s=>s===n);if(c===-1)e.onChange([...e.value,n]);else{const s=e.value,l=[...s.slice(0,c),...s.slice(c+1)];e.onChange(l)}};return i.jsxRuntimeExports.jsx(u.ChipsFrame,{colorType:e.colorType,type:"basic",icon:o,children:e.list.map((n,c)=>i.jsxRuntimeExports.jsx(a.ChipItem,{type:"basic",colorType:e.colorType,displayValue:n.label,selected:e.value.includes(n.value),onClick:()=>t(n.value),onReset:()=>t(n.value)},c))})};exports.BasicChips=h;

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

@@ -0,0 +1,31 @@
+import { j as t } from "../../../chunks/jsx-runtime.Drh4NO5G.js";
+import { ChipItem as a } from "../ChipItem/index.es.js";
+import { ChipsFrame as h } from "../ChipsFrame/index.es.js";
+const m = (e) => {
+  const i = e.value.length > 0 ? { type: "reset", onClick: () => {
+    e.onChange([]);
+  } } : void 0, o = (n) => {
+    const l = e.value.findIndex((c) => c === n);
+    if (l === -1)
+      e.onChange([...e.value, n]);
+    else {
+      const c = e.value, s = [...c.slice(0, l), ...c.slice(l + 1)];
+      e.onChange(s);
+    }
+  };
+  return /* @__PURE__ */ t.jsx(h, { colorType: e.colorType, type: "basic", icon: i, children: e.list.map((n, l) => /* @__PURE__ */ t.jsx(
+    a,
+    {
+      type: "basic",
+      colorType: e.colorType,
+      displayValue: n.label,
+      selected: e.value.includes(n.value),
+      onClick: () => o(n.value),
+      onReset: () => o(n.value)
+    },
+    l
+  )) });
+};
+export {
+  m as BasicChips
+};

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

@@ -0,0 +1,53 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@emotion/styled"),e=require("../../../core/Colors/index.cjs.js");require("../../../chunks/jsx-runtime.713F0z8w.js");const l=require("../../../chunks/index.styled.SwCr6Bqs.js");require("../../../core/TextStyles/index.cjs.js");const c=require("@emotion/react"),d=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},t=d(a),r={ControlIconContainer:2},n=l.CHIP_ITEM_HEIGHT,i=20,s=e.basicColors.white,u=t.default.div`
+	display: flex;
+	align-items: center;
+	position: relative;
+	overflow: hidden;
+
+	width: 100%;
+`,p=t.default.div`
+	display: flex;
+	gap: 5px;
+	z-index: ${r.ControlIconContainer-1};
+
+	overflow: auto;
+
+	${({hasIconArea:o})=>o&&c.css`
+			padding-left: ${n+i}px;
+		`}
+	padding-right: 20px;
+`,C=t.default.div`
+	cursor: pointer;
+	position: absolute;
+	left: 0;
+	top: 0;
+
+	z-index: ${r.ControlIconContainer};
+
+	background-color: ${s};
+	width: ${n}px;
+	height: ${n}px;
+`,g=t.default.div`
+	width: ${i}px;
+	height: 100%;
+
+	/* TODO: 컬러, 범위, 여백 수정 필요 */
+	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.01) 100%);
+
+	position: absolute;
+	left: ${n}px;
+	top: 0;
+`,f=t.default.div`
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+
+	background: ${e.basicColors.gray50};
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	position: absolute;
+	left: 0;
+	top: 0;
+`;exports.ChipListContainer=p;exports.ControlIconCircleWrapper=f;exports.ControlIconContainer=C;exports.ControlIconGradientBackground=g;exports.OutterContainer=u;

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

@@ -1,23 +1,22 @@
-/// <reference types="react" />
 export declare const OutterContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;