pds-dev-kit-web 2.2.293 → 2.2.295

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/src/common/assets/icons/fill/HalfArrowStemLeft01.d.ts +4 -0
  2. package/dist/src/common/assets/icons/fill/HalfArrowStemLeft01.js +30 -0
  3. package/dist/src/common/assets/icons/fill/HalfArrowStemRight01.d.ts +4 -0
  4. package/dist/src/common/assets/icons/fill/HalfArrowStemRight01.js +30 -0
  5. package/dist/src/common/assets/icons/fill/index.d.ts +2 -0
  6. package/dist/src/common/assets/icons/fill/index.js +5 -1
  7. package/dist/src/common/assets/icons/line/HalfArrowStemLeft01.d.ts +4 -0
  8. package/dist/src/common/assets/icons/line/HalfArrowStemLeft01.js +30 -0
  9. package/dist/src/common/assets/icons/line/HalfArrowStemRight01.d.ts +4 -0
  10. package/dist/src/common/assets/icons/line/HalfArrowStemRight01.js +30 -0
  11. package/dist/src/common/assets/icons/line/index.d.ts +2 -0
  12. package/dist/src/common/assets/icons/line/index.js +5 -1
  13. package/dist/src/common/styles/colorSet/UIColor.json +3 -1
  14. package/dist/src/common/styles/colorSet/index.d.ts +4 -2
  15. package/dist/src/common/styles/colorSet/index.js +2 -2
  16. package/dist/src/common/styles/colorSet/ui-type.d.ts +2 -0
  17. package/dist/src/desktop/components/Chip/Chip.d.ts +2 -1
  18. package/dist/src/desktop/components/Chip/Chip.js +45 -22
  19. package/dist/src/mobile/components/Chip/Chip.d.ts +2 -1
  20. package/dist/src/mobile/components/Chip/Chip.js +45 -22
  21. package/package.json +1 -1
  22. package/release-note.md +2 -2
package/dist/src/common/assets/icons/fill/HalfArrowStemLeft01.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import type IconType from '../IconType';
3
+ declare const HalfArrowStemLeft01: ({ color, size, ...rest }: IconType) => JSX.Element;
4
+ export default HalfArrowStemLeft01;
package/dist/src/common/assets/icons/fill/HalfArrowStemLeft01.js ADDED
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ Object.defineProperty(exports, "__esModule", { value: true });
25
+ var jsx_runtime_1 = require("react/jsx-runtime");
26
+ var HalfArrowStemLeft01 = function (_a) {
27
+ var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
+ 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" }) })));
29
+ };
30
+ exports.default = HalfArrowStemLeft01;
package/dist/src/common/assets/icons/fill/HalfArrowStemRight01.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import type IconType from '../IconType';
3
+ declare const HalfArrowStemRight01: ({ color, size, ...rest }: IconType) => JSX.Element;
4
+ export default HalfArrowStemRight01;
package/dist/src/common/assets/icons/fill/HalfArrowStemRight01.js ADDED
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ Object.defineProperty(exports, "__esModule", { value: true });
25
+ var jsx_runtime_1 = require("react/jsx-runtime");
26
+ var HalfArrowStemRight01 = function (_a) {
27
+ var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
+ 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" }) })));
29
+ };
30
+ exports.default = HalfArrowStemRight01;
package/dist/src/common/assets/icons/fill/index.d.ts CHANGED
@@ -176,5 +176,7 @@ declare const fillIcons: {
176
176
  readonly ic_widget: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
177
177
  readonly ic_arrow_stem_left_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
178
178
  readonly ic_arrow_stem_right_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
179
+ readonly ic_half_arrow_stem_left_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
180
+ readonly ic_half_arrow_stem_right_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
179
181
  };
180
182
  export default fillIcons;
package/dist/src/common/assets/icons/fill/index.js CHANGED
@@ -68,6 +68,8 @@ var EyeClose_1 = __importDefault(require("./EyeClose"));
68
68
  var Face_1 = __importDefault(require("./Face"));
69
69
  var Gift_1 = __importDefault(require("./Gift"));
70
70
  var Group_1 = __importDefault(require("./Group"));
71
+ var HalfArrowStemLeft01_1 = __importDefault(require("./HalfArrowStemLeft01"));
72
+ var HalfArrowStemRight01_1 = __importDefault(require("./HalfArrowStemRight01"));
71
73
  var Heart_1 = __importDefault(require("./Heart"));
72
74
  var HelpWindow_1 = __importDefault(require("./HelpWindow"));
73
75
  var Home_1 = __importDefault(require("./Home"));
@@ -355,6 +357,8 @@ var fillIcons = {
355
357
  ic_post_detail: PostDetail_1.default,
356
358
  ic_widget: Widget_1.default,
357
359
  ic_arrow_stem_left_01: ArrowStemLeft01_1.default,
358
- ic_arrow_stem_right_01: ArrowStemRight01_1.default
360
+ ic_arrow_stem_right_01: ArrowStemRight01_1.default,
361
+ ic_half_arrow_stem_left_01: HalfArrowStemLeft01_1.default,
362
+ ic_half_arrow_stem_right_01: HalfArrowStemRight01_1.default
359
363
  };
360
364
  exports.default = fillIcons;
package/dist/src/common/assets/icons/line/HalfArrowStemLeft01.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import type IconType from '../IconType';
3
+ declare const HalfArrowStemLeft01: ({ color, size, ...rest }: IconType) => JSX.Element;
4
+ export default HalfArrowStemLeft01;
package/dist/src/common/assets/icons/line/HalfArrowStemLeft01.js ADDED
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ Object.defineProperty(exports, "__esModule", { value: true });
25
+ var jsx_runtime_1 = require("react/jsx-runtime");
26
+ var HalfArrowStemLeft01 = function (_a) {
27
+ var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
+ 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" }) })));
29
+ };
30
+ exports.default = HalfArrowStemLeft01;
package/dist/src/common/assets/icons/line/HalfArrowStemRight01.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import type IconType from '../IconType';
3
+ declare const HalfArrowStemRight01: ({ color, size, ...rest }: IconType) => JSX.Element;
4
+ export default HalfArrowStemRight01;
package/dist/src/common/assets/icons/line/HalfArrowStemRight01.js ADDED
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ Object.defineProperty(exports, "__esModule", { value: true });
25
+ var jsx_runtime_1 = require("react/jsx-runtime");
26
+ var HalfArrowStemRight01 = function (_a) {
27
+ var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
+ 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" }) })));
29
+ };
30
+ exports.default = HalfArrowStemRight01;
package/dist/src/common/assets/icons/line/index.d.ts CHANGED
@@ -337,5 +337,7 @@ declare const lineIcons: {
337
337
  readonly ic_widget: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
338
338
  readonly ic_arrow_stem_left_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
339
339
  readonly ic_arrow_stem_right_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
340
+ readonly ic_half_arrow_stem_left_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
341
+ readonly ic_half_arrow_stem_right_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
340
342
  };
341
343
  export default lineIcons;
package/dist/src/common/assets/icons/line/index.js CHANGED
@@ -110,6 +110,8 @@ var Folder_1 = __importDefault(require("./Folder"));
110
110
  var Ghost_1 = __importDefault(require("./Ghost"));
111
111
  var Gift_1 = __importDefault(require("./Gift"));
112
112
  var Group_1 = __importDefault(require("./Group"));
113
+ var HalfArrowStemLeft01_1 = __importDefault(require("./HalfArrowStemLeft01"));
114
+ var HalfArrowStemRight01_1 = __importDefault(require("./HalfArrowStemRight01"));
113
115
  var Heart_1 = __importDefault(require("./Heart"));
114
116
  var HeartCare_1 = __importDefault(require("./HeartCare"));
115
117
  var Home_1 = __importDefault(require("./Home"));
@@ -677,6 +679,8 @@ var lineIcons = {
677
679
  ic_post_detail: PostDetail_1.default,
678
680
  ic_widget: Widget_1.default,
679
681
  ic_arrow_stem_left_01: ArrowStemLeft01_1.default,
680
- ic_arrow_stem_right_01: ArrowStemRight01_1.default
682
+ ic_arrow_stem_right_01: ArrowStemRight01_1.default,
683
+ ic_half_arrow_stem_left_01: HalfArrowStemLeft01_1.default,
684
+ ic_half_arrow_stem_right_01: HalfArrowStemRight01_1.default
681
685
  };
682
686
  exports.default = lineIcons;
package/dist/src/common/styles/colorSet/UIColor.json CHANGED
@@ -919,5 +919,7 @@
919
919
  "ui_sw_subsidebar_label_text_emphasis": "sys_component_base_orange",
920
920
  "ui_pa_figure_text_secondary": "sys_component_base_grey",
921
921
  "ui_148": "sys_widget_grey_07",
922
- "ui_149": "sys_widget_grey_01"
922
+ "ui_149": "sys_widget_grey_01",
923
+ "ui_150": "sys_widget_grey_01",
924
+ "ui_151": "usr_on_surface"
923
925
  }
package/dist/src/common/styles/colorSet/index.d.ts CHANGED
@@ -123,7 +123,7 @@ declare const colorSet: {
123
123
  grey450: string;
124
124
  darkgrey450: string;
125
125
  };
126
- readonly PaletteColor_Dark: {
126
+ readonly PaletteColor_light: {
127
127
  sys_container_background_01: string;
128
128
  sys_container_background_02: string;
129
129
  sys_container_background_03: string;
@@ -509,7 +509,7 @@ declare const colorSet: {
509
509
  usr_on_brand_primary_opacity50: string;
510
510
  sys_cpnt_sheet_base_55: string;
511
511
  };
512
- readonly PaletteColor_light: {
512
+ readonly PaletteColor_Dark: {
513
513
  sys_container_background_01: string;
514
514
  sys_container_background_02: string;
515
515
  sys_container_background_03: string;
@@ -1817,6 +1817,8 @@ declare const colorSet: {
1817
1817
  ui_pa_figure_text_secondary: string;
1818
1818
  ui_148: string;
1819
1819
  ui_149: string;
1820
+ ui_150: string;
1821
+ ui_151: string;
1820
1822
  };
1821
1823
  };
1822
1824
  export default colorSet;
package/dist/src/common/styles/colorSet/index.js CHANGED
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
7
  var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
8
- var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
9
8
  var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
9
+ var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
10
10
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
11
11
  var colorSet = {
12
12
  SemanticColor: SemanticColor_json_1.default,
13
- PaletteColor_Dark: PaletteColor_Dark_json_1.default,
14
13
  PaletteColor_light: PaletteColor_light_json_1.default,
14
+ PaletteColor_Dark: PaletteColor_Dark_json_1.default,
15
15
  UIColor: UIColor_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -920,4 +920,6 @@ export interface UITheme {
920
920
  ui_pa_figure_text_secondary: string;
921
921
  ui_148: string;
922
922
  ui_149: string;
923
+ ui_150: string;
924
+ ui_151: string;
923
925
  }
package/dist/src/desktop/components/Chip/Chip.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { PDSIconType, PDSTextType, PDSValueOption, UiColors } from '../../.
3
3
  type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information' | 'information2' | 'information3';
4
4
  export type ChipProps = {
5
5
  displayType?: DisplayType;
6
+ shapeType?: 'rectangle' | 'round';
6
7
  text?: PDSTextType;
7
8
  filterIconMode?: 'none' | 'left';
8
9
  iconFillType?: 'line' | 'fill';
@@ -18,5 +19,5 @@ export type ChipProps = {
18
19
  /** @deprecated id 필드를 대신 사용하세요. */
19
20
  chipId?: string | number;
20
21
  };
21
- export default function Chip({ displayType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
22
+ export default function Chip({ displayType, shapeType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
22
23
  export {};
package/dist/src/desktop/components/Chip/Chip.js CHANGED
@@ -45,7 +45,7 @@ var hybrid_1 = require("../../../hybrid");
45
45
  var Icon_1 = require("../../../hybrid/components/Icon");
46
46
  var TextLabel_1 = require("../TextLabel");
47
47
  function Chip(_a) {
48
- 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;
48
+ 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;
49
49
  var isActive = (0, react_1.useMemo)(function () {
50
50
  if (activeChipId !== undefined && chipId !== undefined) {
51
51
  return activeChipId === chipId;
@@ -65,33 +65,38 @@ function Chip(_a) {
65
65
  if (onClickXMarkIcon) {
66
66
  onClickXMarkIcon();
67
67
  }
68
+ else
69
+ onClickChip === null || onClickChip === void 0 ? void 0 : onClickChip(e);
68
70
  };
69
71
  var chipType = function () {
70
72
  switch (displayType) {
71
73
  case 'category_choice':
72
- 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" })] }))] })));
74
+ 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)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" }) }))] }))] })));
73
75
  case 'information':
74
- 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" }) })));
76
+ 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" }) })));
75
77
  case 'label':
76
- 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" }) })));
78
+ 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" }) })));
77
79
  case 'time':
78
- 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" }) })));
80
+ 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" }) })));
79
81
  case 'removable':
80
- 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" }) }))] })));
82
+ 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)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (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" }) }))] })));
81
83
  case 'information2':
82
- 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" })] }))] }));
84
+ 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" })] }))] })));
83
85
  case 'information3':
84
- 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" })] }))] }));
86
+ 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" })] }))] })));
85
87
  default:
86
- 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" })] })));
88
+ 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" })] })));
87
89
  }
88
90
  };
89
91
  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() })));
90
92
  }
91
93
  exports.default = Chip;
92
- 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) {
94
+ 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) {
93
95
  var theme = _a.theme, isActive = _a.isActive;
94
96
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
97
+ }, function (_a) {
98
+ var shapeType = _a.shapeType;
99
+ return shapeType && { rectangle: '', round: 'border-radius: 20px' }[shapeType];
95
100
  }, function (_a) {
96
101
  var theme = _a.theme;
97
102
  return theme.spacing.spacingD;
@@ -105,11 +110,14 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
105
110
  var theme = _a.theme, isActive = _a.isActive;
106
111
  return isActive ? '' : "border: 1px solid ".concat(theme.ui_cpnt_chip_line_border_01);
107
112
  });
108
- 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) {
113
+ 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) {
109
114
  var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
110
115
  return overrideBackgroundColorKey
111
116
  ? theme[overrideBackgroundColorKey]
112
117
  : theme.ui_cpnt_chip_fill_base_inactive;
118
+ }, function (_a) {
119
+ var shapeType = _a.shapeType;
120
+ return shapeType && { rectangle: '', round: 'border-radius: 12px' }[shapeType];
113
121
  }, function (_a) {
114
122
  var theme = _a.theme;
115
123
  return theme.spacing.spacingC;
@@ -117,9 +125,12 @@ var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateO
117
125
  var theme = _a.theme;
118
126
  return theme.spacing.spacingC;
119
127
  });
120
- 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) {
128
+ 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) {
121
129
  var theme = _a.theme;
122
130
  return theme.ui_cpnt_chip_fill_base_inactive;
131
+ }, function (_a) {
132
+ var shapeType = _a.shapeType;
133
+ return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
123
134
  }, function (_a) {
124
135
  var theme = _a.theme;
125
136
  return theme.spacing.spacingC;
@@ -127,13 +138,13 @@ var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templ
127
138
  var theme = _a.theme;
128
139
  return theme.spacing.spacingC;
129
140
  });
130
- var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n cursor: pointer;\n margin-left: ", ";\n"], ["\n cursor: pointer;\n margin-left: ", ";\n"])), function (_a) {
131
- var theme = _a.theme;
132
- return theme.spacing.spacingB;
133
- });
134
- 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) {
141
+ var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n cursor: pointer;\n display: flex;\n justify-content: center;\n"], ["\n align-items: center;\n cursor: pointer;\n display: flex;\n justify-content: center;\n"])));
142
+ 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) {
135
143
  var theme = _a.theme, isActive = _a.isActive;
136
144
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
145
+ }, function (_a) {
146
+ var shapeType = _a.shapeType;
147
+ return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
137
148
  }, function (_a) {
138
149
  var theme = _a.theme;
139
150
  return theme.spacing.spacingC;
@@ -141,40 +152,52 @@ var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (te
141
152
  var theme = _a.theme;
142
153
  return theme.spacing.spacingC;
143
154
  });
144
- 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) {
155
+ 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) {
145
156
  var theme = _a.theme;
146
157
  return theme.ui_cpnt_chip_line_border_01;
158
+ }, function (_a) {
159
+ var shapeType = _a.shapeType;
160
+ return shapeType && { rectangle: '', round: 'border-radius: 10px' }[shapeType];
147
161
  }, function (_a) {
148
162
  var theme = _a.theme;
149
163
  return theme.spacing.spacingB;
150
164
  });
151
- 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) {
165
+ 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) {
152
166
  var theme = _a.theme;
153
167
  return theme.ui_cpnt_chip_base_playtime;
168
+ }, function (_a) {
169
+ var shapeType = _a.shapeType;
170
+ return shapeType && { rectangle: '', round: 'border-radius: 10px' }[shapeType];
154
171
  }, function (_a) {
155
172
  var theme = _a.theme;
156
173
  return theme.spacing.spacingB;
157
174
  });
158
- 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) {
175
+ 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) {
159
176
  var theme = _a.theme;
160
177
  return theme.spacing.spacingB;
161
178
  }, function (_a) {
162
179
  var theme = _a.theme;
163
180
  return theme.spacing.spacingB;
164
181
  });
165
- 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) {
182
+ 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) {
166
183
  var theme = _a.theme;
167
184
  return theme.ui_67;
168
185
  }, function (_a) {
169
186
  var theme = _a.theme;
170
187
  return theme.ui_140;
188
+ }, function (_a) {
189
+ var shapeType = _a.shapeType;
190
+ return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
171
191
  });
172
- 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) {
192
+ 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) {
173
193
  var theme = _a.theme;
174
194
  return theme.ui_37;
175
195
  }, function (_a) {
176
196
  var theme = _a.theme;
177
197
  return theme.ui_67;
198
+ }, function (_a) {
199
+ var shapeType = _a.shapeType;
200
+ return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
178
201
  });
179
202
  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"])));
180
203
  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 CHANGED
@@ -3,6 +3,7 @@ import type { PDSIconType, PDSTextType, PDSValueOption, UiColors } from '../../.
3
3
  type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information' | 'information2' | 'information3';
4
4
  export type ChipProps = {
5
5
  displayType?: DisplayType;
6
+ shapeType?: 'rectangle' | 'round';
6
7
  text?: PDSTextType;
7
8
  filterIconMode?: 'none' | 'left';
8
9
  iconFillType?: 'line' | 'fill';
@@ -18,5 +19,5 @@ export type ChipProps = {
18
19
  /** @deprecated id 필드를 대신 사용하세요. */
19
20
  chipId?: string | number;
20
21
  };
21
- export default function Chip({ displayType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
22
+ export default function Chip({ displayType, shapeType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
22
23
  export {};
package/dist/src/mobile/components/Chip/Chip.js CHANGED
@@ -45,7 +45,7 @@ var hybrid_1 = require("../../../hybrid");
45
45
  var Icon_1 = require("../../../hybrid/components/Icon");
46
46
  var TextLabel_1 = require("../TextLabel");
47
47
  function Chip(_a) {
48
- 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;
48
+ 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;
49
49
  var isActive = (0, react_1.useMemo)(function () {
50
50
  if (activeChipId !== undefined && chipId !== undefined) {
51
51
  return activeChipId === chipId;
@@ -65,31 +65,33 @@ function Chip(_a) {
65
65
  if (onClickXMarkIcon) {
66
66
  onClickXMarkIcon();
67
67
  }
68
+ else
69
+ onClickChip === null || onClickChip === void 0 ? void 0 : onClickChip(e);
68
70
  };
69
71
  var chipType = function () {
70
72
  switch (displayType) {
71
73
  case 'category_choice':
72
- 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" })] }))] })));
74
+ 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)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" }) }))] }))] })));
73
75
  case 'information':
74
- 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" }) })));
76
+ 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" }) })));
75
77
  case 'label':
76
- 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" }) })));
78
+ 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" }) })));
77
79
  case 'time':
78
- 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" }) })));
80
+ 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" }) })));
79
81
  case 'removable':
80
- 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" }) }))] })));
82
+ 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)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (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" }) }))] })));
81
83
  case 'information2':
82
- 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" })] }))] }));
84
+ 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" })] }))] })));
83
85
  case 'information3':
84
- 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" })] }))] }));
86
+ 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" })] }))] })));
85
87
  default:
86
- 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" })] })));
88
+ 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" })] })));
87
89
  }
88
90
  };
89
91
  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() })));
90
92
  }
91
93
  exports.default = Chip;
92
- 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) {
94
+ 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) {
93
95
  var theme = _a.theme, isActive = _a.isActive;
94
96
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
95
97
  }, function (_a) {
@@ -98,15 +100,21 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
98
100
  }, function (_a) {
99
101
  var theme = _a.theme;
100
102
  return theme.spacing.spacingD;
103
+ }, function (_a) {
104
+ var shapeType = _a.shapeType;
105
+ return shapeType && { rectangle: '', round: 'border-radius: 20px' }[shapeType];
101
106
  }, function (_a) {
102
107
  var theme = _a.theme, isActive = _a.isActive;
103
108
  return isActive ? '' : "border: 1px solid ".concat(theme.ui_cpnt_chip_line_border_01);
104
109
  });
105
- 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) {
110
+ 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) {
106
111
  var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
107
112
  return overrideBackgroundColorKey
108
113
  ? theme[overrideBackgroundColorKey]
109
114
  : theme.ui_cpnt_chip_fill_base_inactive;
115
+ }, function (_a) {
116
+ var shapeType = _a.shapeType;
117
+ return shapeType && { rectangle: '', round: 'border-radius: 12px' }[shapeType];
110
118
  }, function (_a) {
111
119
  var theme = _a.theme;
112
120
  return theme.spacing.spacingC;
@@ -114,9 +122,12 @@ var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateO
114
122
  var theme = _a.theme;
115
123
  return theme.spacing.spacingC;
116
124
  });
117
- 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) {
125
+ 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) {
118
126
  var theme = _a.theme;
119
127
  return theme.ui_cpnt_chip_fill_base_inactive;
128
+ }, function (_a) {
129
+ var shapeType = _a.shapeType;
130
+ return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
120
131
  }, function (_a) {
121
132
  var theme = _a.theme;
122
133
  return theme.spacing.spacingC;
@@ -124,13 +135,13 @@ var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templ
124
135
  var theme = _a.theme;
125
136
  return theme.spacing.spacingC;
126
137
  });
127
- var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
128
- var theme = _a.theme;
129
- return theme.spacing.spacingB;
130
- });
131
- 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) {
138
+ var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: center;\n"], ["\n align-items: center;\n display: flex;\n justify-content: center;\n"])));
139
+ 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) {
132
140
  var theme = _a.theme, isActive = _a.isActive;
133
141
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
142
+ }, function (_a) {
143
+ var shapeType = _a.shapeType;
144
+ return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
134
145
  }, function (_a) {
135
146
  var theme = _a.theme;
136
147
  return theme.spacing.spacingC;
@@ -138,40 +149,52 @@ var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (te
138
149
  var theme = _a.theme;
139
150
  return theme.spacing.spacingC;
140
151
  });
141
- 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) {
152
+ 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) {
142
153
  var theme = _a.theme;
143
154
  return theme.ui_cpnt_chip_line_border_01;
155
+ }, function (_a) {
156
+ var shapeType = _a.shapeType;
157
+ return shapeType && { rectangle: '', round: 'border-radius: 10px' }[shapeType];
144
158
  }, function (_a) {
145
159
  var theme = _a.theme;
146
160
  return theme.spacing.spacingB;
147
161
  });
148
- 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) {
162
+ 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) {
149
163
  var theme = _a.theme;
150
164
  return theme.ui_cpnt_chip_base_playtime;
165
+ }, function (_a) {
166
+ var shapeType = _a.shapeType;
167
+ return shapeType && { rectangle: '', round: 'border-radius: 10px' }[shapeType];
151
168
  }, function (_a) {
152
169
  var theme = _a.theme;
153
170
  return theme.spacing.spacingB;
154
171
  });
155
- 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) {
172
+ 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) {
156
173
  var theme = _a.theme;
157
174
  return theme.spacing.spacingB;
158
175
  }, function (_a) {
159
176
  var theme = _a.theme;
160
177
  return theme.spacing.spacingB;
161
178
  });
162
- 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) {
179
+ 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) {
163
180
  var theme = _a.theme;
164
181
  return theme.ui_67;
165
182
  }, function (_a) {
166
183
  var theme = _a.theme;
167
184
  return theme.ui_140;
185
+ }, function (_a) {
186
+ var shapeType = _a.shapeType;
187
+ return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
168
188
  });
169
- 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) {
189
+ 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) {
170
190
  var theme = _a.theme;
171
191
  return theme.ui_37;
172
192
  }, function (_a) {
173
193
  var theme = _a.theme;
174
194
  return theme.ui_67;
195
+ }, function (_a) {
196
+ var shapeType = _a.shapeType;
197
+ return shapeType && { rectangle: '', round: 'border-radius: 16px' }[shapeType];
175
198
  });
176
199
  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"])));
177
200
  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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.293",
3
+ "version": "2.2.295",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.293]
2
+ ## [v2.2.295]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
6
 
7
- * [PDS-1409] BoxItem 컴포넌트의 descLineLimit prop 삭제 처리
7
+ * [PDS-1413] Chip의 type이 category-choice 일 때 X 마크가 있음에도 불구하고 onClickXMarkIcon 로직은 실제로 작동하고 있지 않는 이슈