pds-dev-kit-web 2.2.293 → 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/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/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.293",
+  "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.293]
+## [v2.2.294]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
 
-* [PDS-1409] BoxItem 컴포넌트의 descLineLimit prop 삭제 처리
+* [PDS-1412] Chip에 prop 추가: shapeType
+* [PDS-1411] 신규 Icon 제작: half_arrow_stem_left & right