pds-dev-kit-web 2.2.292 → 2.2.294

package/dist/src/common/assets/icons/fill/HalfArrowStemLeft01.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const HalfArrowStemLeft01: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default HalfArrowStemLeft01;

package/dist/src/common/assets/icons/fill/HalfArrowStemLeft01.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var HalfArrowStemLeft01 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("polyline", { fill: "none", stroke: color, strokeWidth: "2.5", points: "20.797 13.758 4.796 13.758 10.144 8.31" }) })));
+};
+exports.default = HalfArrowStemLeft01;

package/dist/src/common/assets/icons/fill/HalfArrowStemRight01.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const HalfArrowStemRight01: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default HalfArrowStemRight01;

package/dist/src/common/assets/icons/fill/HalfArrowStemRight01.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var HalfArrowStemRight01 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("polyline", { fill: "none", stroke: color, strokeWidth: "2.5", points: "2.904 13.758 18.904 13.758 13.556 8.31" }) })));
+};
+exports.default = HalfArrowStemRight01;

package/dist/src/common/assets/icons/fill/index.d.ts

@@ -176,5 +176,7 @@ declare const fillIcons: {
     readonly ic_widget: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_stem_left_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_stem_right_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_half_arrow_stem_left_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_half_arrow_stem_right_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
 };
 export default fillIcons;

package/dist/src/common/assets/icons/fill/index.js

@@ -68,6 +68,8 @@ var EyeClose_1 = __importDefault(require("./EyeClose"));
 var Face_1 = __importDefault(require("./Face"));
 var Gift_1 = __importDefault(require("./Gift"));
 var Group_1 = __importDefault(require("./Group"));
+var HalfArrowStemLeft01_1 = __importDefault(require("./HalfArrowStemLeft01"));
+var HalfArrowStemRight01_1 = __importDefault(require("./HalfArrowStemRight01"));
 var Heart_1 = __importDefault(require("./Heart"));
 var HelpWindow_1 = __importDefault(require("./HelpWindow"));
 var Home_1 = __importDefault(require("./Home"));
@@ -355,6 +357,8 @@ var fillIcons = {
     ic_post_detail: PostDetail_1.default,
     ic_widget: Widget_1.default,
     ic_arrow_stem_left_01: ArrowStemLeft01_1.default,
-    ic_arrow_stem_right_01: ArrowStemRight01_1.default
+    ic_arrow_stem_right_01: ArrowStemRight01_1.default,
+    ic_half_arrow_stem_left_01: HalfArrowStemLeft01_1.default,
+    ic_half_arrow_stem_right_01: HalfArrowStemRight01_1.default
 };
 exports.default = fillIcons;

package/dist/src/common/assets/icons/line/HalfArrowStemLeft01.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const HalfArrowStemLeft01: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default HalfArrowStemLeft01;

package/dist/src/common/assets/icons/line/HalfArrowStemLeft01.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var HalfArrowStemLeft01 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("polyline", { fill: "none", stroke: color, strokeWidth: "1.5", points: "20.797 13.758 4.796 13.758 10.144 8.31" }) })));
+};
+exports.default = HalfArrowStemLeft01;

package/dist/src/common/assets/icons/line/HalfArrowStemRight01.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const HalfArrowStemRight01: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default HalfArrowStemRight01;

package/dist/src/common/assets/icons/line/HalfArrowStemRight01.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var HalfArrowStemRight01 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("polyline", { fill: "none", stroke: color, strokeWidth: "1.5", points: "2.904 13.758 18.904 13.758 13.556 8.31" }) })));
+};
+exports.default = HalfArrowStemRight01;

package/dist/src/common/assets/icons/line/index.d.ts

@@ -337,5 +337,7 @@ declare const lineIcons: {
     readonly ic_widget: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_stem_left_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_stem_right_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_half_arrow_stem_left_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_half_arrow_stem_right_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
 };
 export default lineIcons;

package/dist/src/common/assets/icons/line/index.js

@@ -110,6 +110,8 @@ var Folder_1 = __importDefault(require("./Folder"));
 var Ghost_1 = __importDefault(require("./Ghost"));
 var Gift_1 = __importDefault(require("./Gift"));
 var Group_1 = __importDefault(require("./Group"));
+var HalfArrowStemLeft01_1 = __importDefault(require("./HalfArrowStemLeft01"));
+var HalfArrowStemRight01_1 = __importDefault(require("./HalfArrowStemRight01"));
 var Heart_1 = __importDefault(require("./Heart"));
 var HeartCare_1 = __importDefault(require("./HeartCare"));
 var Home_1 = __importDefault(require("./Home"));
@@ -677,6 +679,8 @@ var lineIcons = {
     ic_post_detail: PostDetail_1.default,
     ic_widget: Widget_1.default,
     ic_arrow_stem_left_01: ArrowStemLeft01_1.default,
-    ic_arrow_stem_right_01: ArrowStemRight01_1.default
+    ic_arrow_stem_right_01: ArrowStemRight01_1.default,
+    ic_half_arrow_stem_left_01: HalfArrowStemLeft01_1.default,
+    ic_half_arrow_stem_right_01: HalfArrowStemRight01_1.default
 };
 exports.default = lineIcons;

package/dist/src/common/styles/colorSet/UIColor.json

@@ -919,5 +919,7 @@
     "ui_sw_subsidebar_label_text_emphasis": "sys_component_base_orange",
     "ui_pa_figure_text_secondary": "sys_component_base_grey",
     "ui_148": "sys_widget_grey_07",
-    "ui_149": "sys_widget_grey_01"
+    "ui_149": "sys_widget_grey_01",
+    "ui_150": "sys_widget_grey_01",
+    "ui_151": "usr_on_surface"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -123,7 +123,7 @@ declare const colorSet: {
         grey450: string;
         darkgrey450: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -509,7 +509,7 @@ declare const colorSet: {
         usr_on_brand_primary_opacity50: string;
         sys_cpnt_sheet_base_55: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -1817,6 +1817,8 @@ declare const colorSet: {
         ui_pa_figure_text_secondary: string;
         ui_148: string;
         ui_149: string;
+        ui_150: string;
+        ui_151: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -920,4 +920,6 @@ export interface UITheme {
     ui_pa_figure_text_secondary: string;
     ui_148: string;
     ui_149: string;
+    ui_150: string;
+    ui_151: string;
 }

package/dist/src/desktop/components/BoxItem/BoxItem.d.ts

@@ -47,8 +47,6 @@ export type BoxItemProps = {
     onClickIBtn1?: (id: number | string) => void;
     onClickIBtn2?: (id: number | string) => void;
     onClickIBtn3?: (id: number | string) => void;
-    /** @deprecated in 2.4.0 descTextLineLimit prop을 대신 사용하세요. */
-    descLineLimit?: number;
 };
 declare const paddingSpacing: {
     readonly spacing_a: "spacingA";
@@ -66,7 +64,5 @@ declare const paddingSpacing: {
     readonly spacing_m: "spacingM";
     readonly spacing_n: "spacingN";
 };
-declare function BoxItem({ selectionMode, checkboxMode, checkboxState, indicatorMode, state, selectState, titleText, titleFontSize, titleTextLineLimit, titleTextColorKey, titleTextWordBreak, descText, descTextColorKey, descTextWordBreak, 
-/** NOTE: descLineLimit prop 최종 삭제시 descTextLineLimit의 기본값 2로 지정 필요 */
-descTextLineLimit, imageMode, imageShapeType, imageSrc, imageWidth, imageRatio, imageScaleType, chipMode, chipText, chipOverrideTextColorKey, chipOverrideBackgroundColorKey, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, iBtn3IconName, iBtn3IconFillType, iBtn3IconColorKey, overrideBorderColorKey, paddingTop, paddingRight, paddingBottom, paddingLeft, id, onClick, onClickIBtn1, onClickIBtn2, onClickIBtn3, descLineLimit }: BoxItemProps): JSX.Element;
+declare function BoxItem({ selectionMode, checkboxMode, checkboxState, indicatorMode, state, selectState, titleText, titleFontSize, titleTextLineLimit, titleTextColorKey, titleTextWordBreak, descText, descTextColorKey, descTextWordBreak, descTextLineLimit, imageMode, imageShapeType, imageSrc, imageWidth, imageRatio, imageScaleType, chipMode, chipText, chipOverrideTextColorKey, chipOverrideBackgroundColorKey, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, iBtn3IconName, iBtn3IconFillType, iBtn3IconColorKey, overrideBorderColorKey, paddingTop, paddingRight, paddingBottom, paddingLeft, id, onClick, onClickIBtn1, onClickIBtn2, onClickIBtn3 }: BoxItemProps): JSX.Element;
 export default BoxItem;

package/dist/src/desktop/components/BoxItem/BoxItem.js

@@ -42,10 +42,7 @@ var paddingSpacing = {
     spacing_n: 'spacingN'
 };
 function BoxItem(_a) {
-    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, _m = _a.descTextWordBreak, descTextWordBreak = _m === void 0 ? 'normal' : _m, 
-    /** NOTE: descLineLimit prop 최종 삭제시 descTextLineLimit의 기본값 2로 지정 필요 */
-    descTextLineLimit = _a.descTextLineLimit, _o = _a.imageMode, imageMode = _o === void 0 ? 'none' : _o, _p = _a.imageShapeType, imageShapeType = _p === void 0 ? 'round' : _p, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _q = _a.imageRatio, imageRatio = _q === void 0 ? '1_1' : _q, _r = _a.imageScaleType, imageScaleType = _r === void 0 ? 'cover' : _r, _s = _a.chipMode, chipMode = _s === void 0 ? 'none' : _s, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _t = _a.displayType, displayType = _t === void 0 ? 'none' : _t, iBtn1IconName = _a.iBtn1IconName, _u = _a.iBtn1IconFillType, iBtn1IconFillType = _u === void 0 ? 'line' : _u, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _v = _a.iBtn2IconFillType, iBtn2IconFillType = _v === void 0 ? 'line' : _v, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, _w = _a.iBtn3IconFillType, iBtn3IconFillType = _w === void 0 ? 'line' : _w, iBtn3IconColorKey = _a.iBtn3IconColorKey, overrideBorderColorKey = _a.overrideBorderColorKey, _x = _a.paddingTop, paddingTop = _x === void 0 ? 'spacing_d' : _x, _y = _a.paddingRight, paddingRight = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingBottom, paddingBottom = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingLeft, paddingLeft = _0 === void 0 ? 'spacing_d' : _0, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3, _1 = _a.descLineLimit, descLineLimit = _1 === void 0 ? 2 : _1;
-    var finalDescTextLineLimit = descTextLineLimit !== null && descTextLineLimit !== void 0 ? descTextLineLimit : descLineLimit;
+    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, _m = _a.descTextWordBreak, descTextWordBreak = _m === void 0 ? 'normal' : _m, _o = _a.descTextLineLimit, descTextLineLimit = _o === void 0 ? 2 : _o, _p = _a.imageMode, imageMode = _p === void 0 ? 'none' : _p, _q = _a.imageShapeType, imageShapeType = _q === void 0 ? 'round' : _q, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _r = _a.imageRatio, imageRatio = _r === void 0 ? '1_1' : _r, _s = _a.imageScaleType, imageScaleType = _s === void 0 ? 'cover' : _s, _t = _a.chipMode, chipMode = _t === void 0 ? 'none' : _t, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _u = _a.displayType, displayType = _u === void 0 ? 'none' : _u, iBtn1IconName = _a.iBtn1IconName, _v = _a.iBtn1IconFillType, iBtn1IconFillType = _v === void 0 ? 'line' : _v, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _w = _a.iBtn2IconFillType, iBtn2IconFillType = _w === void 0 ? 'line' : _w, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, _x = _a.iBtn3IconFillType, iBtn3IconFillType = _x === void 0 ? 'line' : _x, iBtn3IconColorKey = _a.iBtn3IconColorKey, overrideBorderColorKey = _a.overrideBorderColorKey, _y = _a.paddingTop, paddingTop = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingRight, paddingRight = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingBottom, paddingBottom = _0 === void 0 ? 'spacing_d' : _0, _1 = _a.paddingLeft, paddingLeft = _1 === void 0 ? 'spacing_d' : _1, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
     var handleClick = function () {
         if (state === 'disabled' || state === 'read_only') {
             return;
@@ -104,7 +101,7 @@ function BoxItem(_a) {
                     : selectionMode === 'use'
                         ? 'pointer'
                         : 'default'
-            } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : descTextColorKey, lineLimit: finalDescTextLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
+            } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : descTextColorKey, lineLimit: descTextLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
                             (chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, iconSize: 20, state: state === 'normal' ? 'normal' : 'disabled', baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn3Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn1Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
 }
 var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"])), function (_a) {

package/dist/src/desktop/components/Chip/Chip.d.ts

@@ -3,6 +3,7 @@ import type { PDSIconType, PDSTextType, PDSValueOption, UiColors } from '../../.
 type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information' | 'information2' | 'information3';
 export type ChipProps = {
     displayType?: DisplayType;
+    shapeType?: 'rectangle' | 'round';
     text?: PDSTextType;
     filterIconMode?: 'none' | 'left';
     iconFillType?: 'line' | 'fill';
@@ -18,5 +19,5 @@ export type ChipProps = {
     /** @deprecated id 필드를 대신 사용하세요. */
     chipId?: string | number;
 };
-export default function Chip({ displayType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
+export default function Chip({ displayType, shapeType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
 export {};

package/dist/src/desktop/components/Chip/Chip.js

@@ -45,7 +45,7 @@ var hybrid_1 = require("../../../hybrid");
 var Icon_1 = require("../../../hybrid/components/Icon");
 var TextLabel_1 = require("../TextLabel");
 function Chip(_a) {
-    var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, text = _a.text, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, activeChipId = _a.activeChipId, chipId = _a.chipId, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon;
+    var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'round' : _c, text = _a.text, _d = _a.filterIconMode, filterIconMode = _d === void 0 ? 'none' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, activeChipId = _a.activeChipId, chipId = _a.chipId, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon;
     var isActive = (0, react_1.useMemo)(function () {
         if (activeChipId !== undefined && chipId !== undefined) {
             return activeChipId === chipId;
@@ -69,29 +69,32 @@ function Chip(_a) {
     var chipType = function () {
         switch (displayType) {
             case 'category_choice':
-                return ((0, jsx_runtime_1.jsxs)(S_CategoryChoiceChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [!isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })] }))] })));
+                return ((0, jsx_runtime_1.jsxs)(S_CategoryChoiceChip, __assign({ isActive: isActive, shapeType: shapeType, onClick: handleClickChip }, { children: [!isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })] }))] })));
             case 'information':
-                return ((0, jsx_runtime_1.jsx)(S_InfoChip, __assign({ onClick: handleClickChip, overrideBackgroundColorKey: overrideBackgroundColorKey }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
+                return ((0, jsx_runtime_1.jsx)(S_InfoChip, __assign({ onClick: handleClickChip, shapeType: shapeType, overrideBackgroundColorKey: overrideBackgroundColorKey }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
             case 'label':
-                return ((0, jsx_runtime_1.jsx)(S_LabelChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
+                return ((0, jsx_runtime_1.jsx)(S_LabelChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
             case 'time':
-                return ((0, jsx_runtime_1.jsx)(S_TimeChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
+                return ((0, jsx_runtime_1.jsx)(S_TimeChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
             case 'removable':
-                return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ onClick: handleClickChip }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }) }))] })));
+                return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }) }))] })));
             case 'information2':
-                return ((0, jsx_runtime_1.jsxs)(S_Information2, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_usr_brandprimary" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "usrTextBrandPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
+                return ((0, jsx_runtime_1.jsxs)(S_Information2, __assign({ shapeType: shapeType }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_usr_brandprimary" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "usrTextBrandPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] })));
             case 'information3':
-                return ((0, jsx_runtime_1.jsxs)(S_Information3, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_sys_white" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
+                return ((0, jsx_runtime_1.jsxs)(S_Information3, __assign({ shapeType: shapeType }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_sys_white" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] })));
             default:
-                return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
+                return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, shapeType: shapeType, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_ChipWrapper, __assign({ "x-pds-name": "Chip", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: chipType() })));
 }
 exports.default = Chip;
-var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 20px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 20px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"])), function (_a) {
+var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 20px' }[shapeType];
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
@@ -105,11 +108,14 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? '' : "border: 1px solid ".concat(theme.ui_cpnt_chip_line_border_01);
 });
-var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])), function (_a) {
+var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])), function (_a) {
     var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
     return overrideBackgroundColorKey
         ? theme[overrideBackgroundColorKey]
         : theme.ui_cpnt_chip_fill_base_inactive;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 12px' }[shapeType];
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
@@ -117,9 +123,12 @@ var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_fill_base_inactive;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
@@ -131,9 +140,12 @@ var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templa
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
@@ -141,40 +153,52 @@ var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (te
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_LabelChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
+var S_LabelChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_line_border_01;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 10px' }[shapeType];
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
+var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_base_playtime;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 10px' }[shapeType];
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var informationBase = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+var informationBase = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_Information2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"], ["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"])), informationBase, function (_a) {
+var S_Information2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n  ", ";\n"], ["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n  ", ";\n"])), informationBase, function (_a) {
     var theme = _a.theme;
     return theme.ui_67;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_140;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
 });
-var S_Information3 = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"], ["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"])), informationBase, function (_a) {
+var S_Information3 = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n  ", ";\n"], ["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n  ", ";\n"])), informationBase, function (_a) {
     var theme = _a.theme;
     return theme.ui_37;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_67;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
 });
 var S_ChipWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-block;\n  min-width: fit-content;\n  vertical-align: bottom;\n"], ["\n  display: inline-block;\n  min-width: fit-content;\n  vertical-align: bottom;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/src/mobile/components/BoxItem/BoxItem.d.ts

@@ -47,8 +47,6 @@ export type BoxItemProps = {
     onClickIBtn1?: (id: number | string) => void;
     onClickIBtn2?: (id: number | string) => void;
     onClickIBtn3?: (id: number | string) => void;
-    /** @deprecated in 2.4.0 descTextLineLimit prop을 대신 사용하세요. */
-    descLineLimit?: number;
 };
 declare const paddingSpacing: {
     readonly spacing_a: "spacingA";
@@ -66,7 +64,5 @@ declare const paddingSpacing: {
     readonly spacing_m: "spacingM";
     readonly spacing_n: "spacingN";
 };
-declare function BoxItem({ selectionMode, checkboxMode, checkboxState, indicatorMode, state, selectState, titleText, titleFontSize, titleTextLineLimit, titleTextColorKey, titleTextWordBreak, descText, descTextColorKey, 
-/** NOTE: descLineLimit prop 최종 삭제시 descTextLineLimit의 기본값 2로 지정 필요 */
-descTextLineLimit, descTextWordBreak, imageMode, imageShapeType, imageSrc, imageWidth, imageRatio, imageScaleType, chipMode, chipText, chipOverrideTextColorKey, chipOverrideBackgroundColorKey, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, iBtn3IconName, overrideBorderColorKey, iBtn3IconFillType, iBtn3IconColorKey, paddingTop, paddingRight, paddingBottom, paddingLeft, id, onClick, onClickIBtn1, onClickIBtn2, onClickIBtn3, descLineLimit }: BoxItemProps): JSX.Element;
+declare function BoxItem({ selectionMode, checkboxMode, checkboxState, indicatorMode, state, selectState, titleText, titleFontSize, titleTextLineLimit, titleTextColorKey, titleTextWordBreak, descText, descTextColorKey, descTextLineLimit, descTextWordBreak, imageMode, imageShapeType, imageSrc, imageWidth, imageRatio, imageScaleType, chipMode, chipText, chipOverrideTextColorKey, chipOverrideBackgroundColorKey, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, iBtn3IconName, overrideBorderColorKey, iBtn3IconFillType, iBtn3IconColorKey, paddingTop, paddingRight, paddingBottom, paddingLeft, id, onClick, onClickIBtn1, onClickIBtn2, onClickIBtn3 }: BoxItemProps): JSX.Element;
 export default BoxItem;

package/dist/src/mobile/components/BoxItem/BoxItem.js

@@ -42,10 +42,7 @@ var paddingSpacing = {
     spacing_n: 'spacingN'
 };
 function BoxItem(_a) {
-    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, 
-    /** NOTE: descLineLimit prop 최종 삭제시 descTextLineLimit의 기본값 2로 지정 필요 */
-    descTextLineLimit = _a.descTextLineLimit, _m = _a.descTextWordBreak, descTextWordBreak = _m === void 0 ? 'normal' : _m, _o = _a.imageMode, imageMode = _o === void 0 ? 'none' : _o, _p = _a.imageShapeType, imageShapeType = _p === void 0 ? 'round' : _p, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _q = _a.imageRatio, imageRatio = _q === void 0 ? '1_1' : _q, _r = _a.imageScaleType, imageScaleType = _r === void 0 ? 'cover' : _r, _s = _a.chipMode, chipMode = _s === void 0 ? 'none' : _s, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _t = _a.displayType, displayType = _t === void 0 ? 'none' : _t, iBtn1IconName = _a.iBtn1IconName, _u = _a.iBtn1IconFillType, iBtn1IconFillType = _u === void 0 ? 'line' : _u, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _v = _a.iBtn2IconFillType, iBtn2IconFillType = _v === void 0 ? 'line' : _v, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, overrideBorderColorKey = _a.overrideBorderColorKey, _w = _a.iBtn3IconFillType, iBtn3IconFillType = _w === void 0 ? 'line' : _w, iBtn3IconColorKey = _a.iBtn3IconColorKey, _x = _a.paddingTop, paddingTop = _x === void 0 ? 'spacing_d' : _x, _y = _a.paddingRight, paddingRight = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingBottom, paddingBottom = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingLeft, paddingLeft = _0 === void 0 ? 'spacing_d' : _0, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3, _1 = _a.descLineLimit, descLineLimit = _1 === void 0 ? 2 : _1;
-    var finalDescTextLineLimit = descTextLineLimit !== null && descTextLineLimit !== void 0 ? descTextLineLimit : descLineLimit;
+    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, _m = _a.descTextLineLimit, descTextLineLimit = _m === void 0 ? 2 : _m, _o = _a.descTextWordBreak, descTextWordBreak = _o === void 0 ? 'normal' : _o, _p = _a.imageMode, imageMode = _p === void 0 ? 'none' : _p, _q = _a.imageShapeType, imageShapeType = _q === void 0 ? 'round' : _q, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _r = _a.imageRatio, imageRatio = _r === void 0 ? '1_1' : _r, _s = _a.imageScaleType, imageScaleType = _s === void 0 ? 'cover' : _s, _t = _a.chipMode, chipMode = _t === void 0 ? 'none' : _t, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _u = _a.displayType, displayType = _u === void 0 ? 'none' : _u, iBtn1IconName = _a.iBtn1IconName, _v = _a.iBtn1IconFillType, iBtn1IconFillType = _v === void 0 ? 'line' : _v, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _w = _a.iBtn2IconFillType, iBtn2IconFillType = _w === void 0 ? 'line' : _w, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, overrideBorderColorKey = _a.overrideBorderColorKey, _x = _a.iBtn3IconFillType, iBtn3IconFillType = _x === void 0 ? 'line' : _x, iBtn3IconColorKey = _a.iBtn3IconColorKey, _y = _a.paddingTop, paddingTop = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingRight, paddingRight = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingBottom, paddingBottom = _0 === void 0 ? 'spacing_d' : _0, _1 = _a.paddingLeft, paddingLeft = _1 === void 0 ? 'spacing_d' : _1, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
     var handleClick = function () {
         if (state === 'disabled' || state === 'read_only') {
             return;
@@ -103,7 +100,7 @@ function BoxItem(_a) {
                     : selectionMode === 'use'
                         ? 'pointer'
                         : 'default'
-            } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : descTextColorKey, lineLimit: finalDescTextLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
+            } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : descTextColorKey, lineLimit: descTextLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
                             (chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, onClick: handleIBtn3Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
 }
 var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"])), function (_a) {

package/dist/src/mobile/components/Chip/Chip.d.ts

@@ -3,6 +3,7 @@ import type { PDSIconType, PDSTextType, PDSValueOption, UiColors } from '../../.
 type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information' | 'information2' | 'information3';
 export type ChipProps = {
     displayType?: DisplayType;
+    shapeType?: 'rectangle' | 'round';
     text?: PDSTextType;
     filterIconMode?: 'none' | 'left';
     iconFillType?: 'line' | 'fill';
@@ -18,5 +19,5 @@ export type ChipProps = {
     /** @deprecated id 필드를 대신 사용하세요. */
     chipId?: string | number;
 };
-export default function Chip({ displayType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
+export default function Chip({ displayType, shapeType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
 export {};

package/dist/src/mobile/components/Chip/Chip.js

@@ -45,7 +45,7 @@ var hybrid_1 = require("../../../hybrid");
 var Icon_1 = require("../../../hybrid/components/Icon");
 var TextLabel_1 = require("../TextLabel");
 function Chip(_a) {
-    var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, text = _a.text, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon, activeChipId = _a.activeChipId, chipId = _a.chipId;
+    var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'round' : _c, text = _a.text, _d = _a.filterIconMode, filterIconMode = _d === void 0 ? 'none' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon, activeChipId = _a.activeChipId, chipId = _a.chipId;
     var isActive = (0, react_1.useMemo)(function () {
         if (activeChipId !== undefined && chipId !== undefined) {
             return activeChipId === chipId;
@@ -69,27 +69,27 @@ function Chip(_a) {
     var chipType = function () {
         switch (displayType) {
             case 'category_choice':
-                return ((0, jsx_runtime_1.jsxs)(S_CategoryChoiceChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [!isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })] }))] })));
+                return ((0, jsx_runtime_1.jsxs)(S_CategoryChoiceChip, __assign({ isActive: isActive, shapeType: shapeType, onClick: handleClickChip }, { children: [!isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })] }))] })));
             case 'information':
-                return ((0, jsx_runtime_1.jsx)(S_InfoChip, __assign({ onClick: handleClickChip, overrideBackgroundColorKey: overrideBackgroundColorKey }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
+                return ((0, jsx_runtime_1.jsx)(S_InfoChip, __assign({ onClick: handleClickChip, shapeType: shapeType, overrideBackgroundColorKey: overrideBackgroundColorKey }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
             case 'label':
-                return ((0, jsx_runtime_1.jsx)(S_LabelChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
+                return ((0, jsx_runtime_1.jsx)(S_LabelChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
             case 'time':
-                return ((0, jsx_runtime_1.jsx)(S_TimeChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
+                return ((0, jsx_runtime_1.jsx)(S_TimeChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
             case 'removable':
-                return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ onClick: handleClickChip }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }) }))] })));
+                return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }) }))] })));
             case 'information2':
-                return ((0, jsx_runtime_1.jsxs)(S_Information2, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_usr_brandprimary" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "usrTextBrandPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
+                return ((0, jsx_runtime_1.jsxs)(S_Information2, __assign({ shapeType: shapeType }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_usr_brandprimary" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "usrTextBrandPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] })));
             case 'information3':
-                return ((0, jsx_runtime_1.jsxs)(S_Information3, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_sys_white" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
+                return ((0, jsx_runtime_1.jsxs)(S_Information3, __assign({ shapeType: shapeType }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_sys_white" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] })));
             default:
-                return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
+                return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, shapeType: shapeType, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_ChipWrapper, __assign({ "x-pds-name": "Chip", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: chipType() })));
 }
 exports.default = Chip;
-var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 20px;\n  box-sizing: border-box;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 20px;\n  box-sizing: border-box;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"])), function (_a) {
+var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
 }, function (_a) {
@@ -98,15 +98,21 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 20px' }[shapeType];
 }, function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? '' : "border: 1px solid ".concat(theme.ui_cpnt_chip_line_border_01);
 });
-var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])), function (_a) {
+var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])), function (_a) {
     var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
     return overrideBackgroundColorKey
         ? theme[overrideBackgroundColorKey]
         : theme.ui_cpnt_chip_fill_base_inactive;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 12px' }[shapeType];
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
@@ -114,9 +120,12 @@ var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_fill_base_inactive;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
@@ -128,9 +137,12 @@ var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templa
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
@@ -138,40 +150,52 @@ var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (te
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_LabelChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
+var S_LabelChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid ", ";\n  ", ";\n\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid ", ";\n  ", ";\n\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_line_border_01;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 10px' }[shapeType];
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
+var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_base_playtime;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 10px' }[shapeType];
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var informationBase = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+var informationBase = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_Information2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"], ["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"])), informationBase, function (_a) {
+var S_Information2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n  ", ";\n"], ["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n  ", ";\n"])), informationBase, function (_a) {
     var theme = _a.theme;
     return theme.ui_67;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_140;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
 });
-var S_Information3 = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"], ["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"])), informationBase, function (_a) {
+var S_Information3 = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n  ", ";\n"], ["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n  ", ";\n"])), informationBase, function (_a) {
     var theme = _a.theme;
     return theme.ui_37;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_67;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
 });
 var S_ChipWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-block;\n  min-width: fit-content;\n  vertical-align: bottom;\n"], ["\n  display: inline-block;\n  min-width: fit-content;\n  vertical-align: bottom;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.292",
+  "version": "2.2.294",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,7 +1,8 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.292]
+## [v2.2.294]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
 
-* [PDS-1407] ArrowStem icon 추가
+* [PDS-1412] Chip에 prop 추가: shapeType
+* [PDS-1411] 신규 Icon 제작: half_arrow_stem_left & right