pds-dev-kit-web-test 2.5.391 → 2.5.393

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.
@@ -375,5 +375,6 @@
375
375
  "sys_cpnt_sheet_base_52": "darkgrey50",
376
376
  "sys_cpnt_sheet_base_53": "darkgrey70",
377
377
  "sys_widget_grey_07": "grey900",
378
- "sys_cpnt_sheet_base_54": "grey30"
378
+ "sys_cpnt_sheet_base_54": "grey30",
379
+ "sys_component_border_01": "grey100/opacity50"
379
380
  }
@@ -375,5 +375,6 @@
375
375
  "sys_cpnt_sheet_base_52": "grey30",
376
376
  "sys_cpnt_sheet_base_53": "white",
377
377
  "sys_widget_grey_07": "white",
378
- "sys_cpnt_sheet_base_54": "grey600"
378
+ "sys_cpnt_sheet_base_54": "grey600",
379
+ "sys_component_border_01": "grey100/opacity50"
379
380
  }
@@ -899,5 +899,6 @@
899
899
  "ui_cpnt_selcontrols_icon_grey_01": "sys_widget_grey_01",
900
900
  "ui_cpnt_selcontrols_text_grey_01": "sys_text_grey_01",
901
901
  "ui_cpnt_snackbar_text": "sys_widget_grey_07",
902
- "ui_cpnt_snackbar_base": "sys_cpnt_sheet_base_54"
902
+ "ui_cpnt_snackbar_base": "sys_cpnt_sheet_base_54",
903
+ "ui_140": "sys_component_border_01"
903
904
  }
@@ -1,5 +1,129 @@
1
1
  declare const colorSet: {
2
- readonly PaletteColor_Dark: {
2
+ readonly SemanticColor: {
3
+ blue500: string;
4
+ blue700: string;
5
+ blue300: string;
6
+ green700: string;
7
+ green500: string;
8
+ green300: string;
9
+ red500: string;
10
+ grey900: string;
11
+ grey500: string;
12
+ grey400: string;
13
+ grey100: string;
14
+ grey50: string;
15
+ white: string;
16
+ black: string;
17
+ darkblue500: string;
18
+ grey950: string;
19
+ darkgrey900: string;
20
+ darkgrey500: string;
21
+ darkgrey400: string;
22
+ darkgrey100: string;
23
+ darkgrey50: string;
24
+ darkred500: string;
25
+ darkgreen700: string;
26
+ orange500: string;
27
+ darkorange500: string;
28
+ opacity00: string;
29
+ opacity20: string;
30
+ opacity30: string;
31
+ opacity65: string;
32
+ darkgreen500: string;
33
+ grey70: string;
34
+ navy500: string;
35
+ lightgreen500: string;
36
+ pink500: string;
37
+ darkgrey70: string;
38
+ darknavy500: string;
39
+ darkpink500: string;
40
+ darklightgreen500: string;
41
+ opacity10: string;
42
+ grey600: string;
43
+ darkgrey600: string;
44
+ skyblue500: string;
45
+ skyblue300: string;
46
+ pink300: string;
47
+ lightpink500: string;
48
+ darkblue300: string;
49
+ darkblue700: string;
50
+ darkgreen300: string;
51
+ darkskyblue500: string;
52
+ navy100: string;
53
+ darknavy100: string;
54
+ opacity80: string;
55
+ opacity50: string;
56
+ grey30: string;
57
+ opacity95: string;
58
+ darkgrey30: string;
59
+ opacity40: string;
60
+ kakaoyellow: string;
61
+ pastelblue500: string;
62
+ pastelpink500: string;
63
+ pastelorange500: string;
64
+ pastelgreen500: string;
65
+ pastelpurple500: string;
66
+ darkpastelblue500: string;
67
+ darkpastelpink500: string;
68
+ darkpastelorange500: string;
69
+ darkpastelgreen500: string;
70
+ darkpastelpurple500: string;
71
+ green30: string;
72
+ darkgreen30: string;
73
+ orange50: string;
74
+ darkorange50: string;
75
+ orange30: string;
76
+ darkorange30: string;
77
+ green50: string;
78
+ darkgreen50: string;
79
+ opacity90: string;
80
+ facebookblue: string;
81
+ opacity05: string;
82
+ opacity15: string;
83
+ grey80: string;
84
+ grey200: string;
85
+ darkgrey80: string;
86
+ darkgrey200: string;
87
+ opacity70: string;
88
+ opacity60: string;
89
+ skyblue100: string;
90
+ green100: string;
91
+ darkgreen100: string;
92
+ darkskyblue100: string;
93
+ opacity25: string;
94
+ opacity35: string;
95
+ grey10: string;
96
+ darkgrey10: string;
97
+ blue50: string;
98
+ darkblue50: string;
99
+ blue10: string;
100
+ red10: string;
101
+ green10: string;
102
+ blue30: string;
103
+ red30: string;
104
+ orange300: string;
105
+ darkorange300: string;
106
+ darkpink300: string;
107
+ pastelblue300: string;
108
+ darkpastelblue300: string;
109
+ softpurple500: string;
110
+ darksoftpurple500: string;
111
+ coolpink500: string;
112
+ darkcoolpink500: string;
113
+ brown500: string;
114
+ darkbrown500: string;
115
+ yellow300: string;
116
+ darkyellow300: string;
117
+ grey20: string;
118
+ darkgrey20: string;
119
+ grey300: string;
120
+ darkgrey300: string;
121
+ yellow500: string;
122
+ darkyellow500: string;
123
+ grey450: string;
124
+ darkgrey450: string;
125
+ };
126
+ readonly PaletteColor_light: {
3
127
  sys_container_background_01: string;
4
128
  sys_container_background_02: string;
5
129
  sys_container_background_03: string;
@@ -377,132 +501,9 @@ declare const colorSet: {
377
501
  sys_cpnt_sheet_base_53: string;
378
502
  sys_widget_grey_07: string;
379
503
  sys_cpnt_sheet_base_54: string;
504
+ sys_component_border_01: string;
380
505
  };
381
- readonly SemanticColor: {
382
- blue500: string;
383
- blue700: string;
384
- blue300: string;
385
- green700: string;
386
- green500: string;
387
- green300: string;
388
- red500: string;
389
- grey900: string;
390
- grey500: string;
391
- grey400: string;
392
- grey100: string;
393
- grey50: string;
394
- white: string;
395
- black: string;
396
- darkblue500: string;
397
- grey950: string;
398
- darkgrey900: string;
399
- darkgrey500: string;
400
- darkgrey400: string;
401
- darkgrey100: string;
402
- darkgrey50: string;
403
- darkred500: string;
404
- darkgreen700: string;
405
- orange500: string;
406
- darkorange500: string;
407
- opacity00: string;
408
- opacity20: string;
409
- opacity30: string;
410
- opacity65: string;
411
- darkgreen500: string;
412
- grey70: string;
413
- navy500: string;
414
- lightgreen500: string;
415
- pink500: string;
416
- darkgrey70: string;
417
- darknavy500: string;
418
- darkpink500: string;
419
- darklightgreen500: string;
420
- opacity10: string;
421
- grey600: string;
422
- darkgrey600: string;
423
- skyblue500: string;
424
- skyblue300: string;
425
- pink300: string;
426
- lightpink500: string;
427
- darkblue300: string;
428
- darkblue700: string;
429
- darkgreen300: string;
430
- darkskyblue500: string;
431
- navy100: string;
432
- darknavy100: string;
433
- opacity80: string;
434
- opacity50: string;
435
- grey30: string;
436
- opacity95: string;
437
- darkgrey30: string;
438
- opacity40: string;
439
- kakaoyellow: string;
440
- pastelblue500: string;
441
- pastelpink500: string;
442
- pastelorange500: string;
443
- pastelgreen500: string;
444
- pastelpurple500: string;
445
- darkpastelblue500: string;
446
- darkpastelpink500: string;
447
- darkpastelorange500: string;
448
- darkpastelgreen500: string;
449
- darkpastelpurple500: string;
450
- green30: string;
451
- darkgreen30: string;
452
- orange50: string;
453
- darkorange50: string;
454
- orange30: string;
455
- darkorange30: string;
456
- green50: string;
457
- darkgreen50: string;
458
- opacity90: string;
459
- facebookblue: string;
460
- opacity05: string;
461
- opacity15: string;
462
- grey80: string;
463
- grey200: string;
464
- darkgrey80: string;
465
- darkgrey200: string;
466
- opacity70: string;
467
- opacity60: string;
468
- skyblue100: string;
469
- green100: string;
470
- darkgreen100: string;
471
- darkskyblue100: string;
472
- opacity25: string;
473
- opacity35: string;
474
- grey10: string;
475
- darkgrey10: string;
476
- blue50: string;
477
- darkblue50: string;
478
- blue10: string;
479
- red10: string;
480
- green10: string;
481
- blue30: string;
482
- red30: string;
483
- orange300: string;
484
- darkorange300: string;
485
- darkpink300: string;
486
- pastelblue300: string;
487
- darkpastelblue300: string;
488
- softpurple500: string;
489
- darksoftpurple500: string;
490
- coolpink500: string;
491
- darkcoolpink500: string;
492
- brown500: string;
493
- darkbrown500: string;
494
- yellow300: string;
495
- darkyellow300: string;
496
- grey20: string;
497
- darkgrey20: string;
498
- grey300: string;
499
- darkgrey300: string;
500
- yellow500: string;
501
- darkyellow500: string;
502
- grey450: string;
503
- darkgrey450: string;
504
- };
505
- readonly PaletteColor_light: {
506
+ readonly PaletteColor_Dark: {
506
507
  sys_container_background_01: string;
507
508
  sys_container_background_02: string;
508
509
  sys_container_background_03: string;
@@ -880,6 +881,7 @@ declare const colorSet: {
880
881
  sys_cpnt_sheet_base_53: string;
881
882
  sys_widget_grey_07: string;
882
883
  sys_cpnt_sheet_base_54: string;
884
+ sys_component_border_01: string;
883
885
  };
884
886
  readonly UIColor: {
885
887
  ui_cpnt_button_fill_base_primary: string;
@@ -1783,6 +1785,7 @@ declare const colorSet: {
1783
1785
  ui_cpnt_selcontrols_text_grey_01: string;
1784
1786
  ui_cpnt_snackbar_text: string;
1785
1787
  ui_cpnt_snackbar_base: string;
1788
+ ui_140: string;
1786
1789
  };
1787
1790
  };
1788
1791
  export default colorSet;
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
- var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
8
7
  var SemanticColor_json_1 = __importDefault(require("./SemanticColor.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
- PaletteColor_Dark: PaletteColor_Dark_json_1.default,
13
12
  SemanticColor: SemanticColor_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;
@@ -900,4 +900,5 @@ export interface UITheme {
900
900
  ui_cpnt_selcontrols_text_grey_01: string;
901
901
  ui_cpnt_snackbar_text: string;
902
902
  ui_cpnt_snackbar_base: string;
903
+ ui_140: string;
903
904
  }
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { PDSIconType, PDSTextType, PDSValueOption, UiColors } from '../../../common';
3
- type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
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
6
  text?: PDSTextType;
@@ -14,13 +14,33 @@ var __assign = (this && this.__assign) || function () {
14
14
  };
15
15
  return __assign.apply(this, arguments);
16
16
  };
17
- var __importDefault = (this && this.__importDefault) || function (mod) {
18
- return (mod && mod.__esModule) ? mod : { "default": mod };
17
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
+ if (k2 === undefined) k2 = k;
19
+ var desc = Object.getOwnPropertyDescriptor(m, k);
20
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
21
+ desc = { enumerable: true, get: function() { return m[k]; } };
22
+ }
23
+ Object.defineProperty(o, k2, desc);
24
+ }) : (function(o, m, k, k2) {
25
+ if (k2 === undefined) k2 = k;
26
+ o[k2] = m[k];
27
+ }));
28
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
29
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
30
+ }) : function(o, v) {
31
+ o["default"] = v;
32
+ });
33
+ var __importStar = (this && this.__importStar) || function (mod) {
34
+ if (mod && mod.__esModule) return mod;
35
+ var result = {};
36
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
37
+ __setModuleDefault(result, mod);
38
+ return result;
19
39
  };
20
40
  Object.defineProperty(exports, "__esModule", { value: true });
21
41
  var jsx_runtime_1 = require("react/jsx-runtime");
22
42
  var react_1 = require("react");
23
- var styled_components_1 = __importDefault(require("styled-components"));
43
+ var styled_components_1 = __importStar(require("styled-components"));
24
44
  var hybrid_1 = require("../../../hybrid");
25
45
  var Icon_1 = require("../../../hybrid/components/Icon");
26
46
  var TextLabel_1 = require("../TextLabel");
@@ -58,6 +78,10 @@ function Chip(_a) {
58
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" }) })));
59
79
  case 'removable':
60
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" }) }))] })));
81
+ 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" })] }))] }));
83
+ 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" })] }))] }));
61
85
  default:
62
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" })] })));
63
87
  }
@@ -131,5 +155,26 @@ var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateOb
131
155
  var theme = _a.theme;
132
156
  return theme.spacing.spacingB;
133
157
  });
134
- var S_ChipWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __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"])));
135
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
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) {
159
+ var theme = _a.theme;
160
+ return theme.spacing.spacingB;
161
+ }, function (_a) {
162
+ var theme = _a.theme;
163
+ return theme.spacing.spacingB;
164
+ });
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) {
166
+ var theme = _a.theme;
167
+ return theme.ui_67;
168
+ }, function (_a) {
169
+ var theme = _a.theme;
170
+ return theme.ui_140;
171
+ });
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) {
173
+ var theme = _a.theme;
174
+ return theme.ui_37;
175
+ }, function (_a) {
176
+ var theme = _a.theme;
177
+ return theme.ui_67;
178
+ });
179
+ 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
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { PDSIconType, PDSTextType, PDSValueOption, UiColors } from '../../../common';
3
- type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
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
6
  text?: PDSTextType;
@@ -14,13 +14,33 @@ var __assign = (this && this.__assign) || function () {
14
14
  };
15
15
  return __assign.apply(this, arguments);
16
16
  };
17
- var __importDefault = (this && this.__importDefault) || function (mod) {
18
- return (mod && mod.__esModule) ? mod : { "default": mod };
17
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
+ if (k2 === undefined) k2 = k;
19
+ var desc = Object.getOwnPropertyDescriptor(m, k);
20
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
21
+ desc = { enumerable: true, get: function() { return m[k]; } };
22
+ }
23
+ Object.defineProperty(o, k2, desc);
24
+ }) : (function(o, m, k, k2) {
25
+ if (k2 === undefined) k2 = k;
26
+ o[k2] = m[k];
27
+ }));
28
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
29
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
30
+ }) : function(o, v) {
31
+ o["default"] = v;
32
+ });
33
+ var __importStar = (this && this.__importStar) || function (mod) {
34
+ if (mod && mod.__esModule) return mod;
35
+ var result = {};
36
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
37
+ __setModuleDefault(result, mod);
38
+ return result;
19
39
  };
20
40
  Object.defineProperty(exports, "__esModule", { value: true });
21
41
  var jsx_runtime_1 = require("react/jsx-runtime");
22
42
  var react_1 = require("react");
23
- var styled_components_1 = __importDefault(require("styled-components"));
43
+ var styled_components_1 = __importStar(require("styled-components"));
24
44
  var hybrid_1 = require("../../../hybrid");
25
45
  var Icon_1 = require("../../../hybrid/components/Icon");
26
46
  var TextLabel_1 = require("../TextLabel");
@@ -58,6 +78,10 @@ function Chip(_a) {
58
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" }) })));
59
79
  case 'removable':
60
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" }) }))] })));
81
+ 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" })] }))] }));
83
+ 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" })] }))] }));
61
85
  default:
62
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" })] })));
63
87
  }
@@ -128,5 +152,26 @@ var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateOb
128
152
  var theme = _a.theme;
129
153
  return theme.spacing.spacingB;
130
154
  });
131
- var S_ChipWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __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"])));
132
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
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) {
156
+ var theme = _a.theme;
157
+ return theme.spacing.spacingB;
158
+ }, function (_a) {
159
+ var theme = _a.theme;
160
+ return theme.spacing.spacingB;
161
+ });
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) {
163
+ var theme = _a.theme;
164
+ return theme.ui_67;
165
+ }, function (_a) {
166
+ var theme = _a.theme;
167
+ return theme.ui_140;
168
+ });
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) {
170
+ var theme = _a.theme;
171
+ return theme.ui_37;
172
+ }, function (_a) {
173
+ var theme = _a.theme;
174
+ return theme.ui_67;
175
+ });
176
+ 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
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
@@ -21,7 +21,7 @@ exports.MOCK_VIDEO_CB = {
21
21
  CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME: 5,
22
22
  CB_CONTENT_PROP_VIDEO_SPEC_MPLAY: true,
23
23
  CB_CONTENT_PROP_VIDEO_SPEC_REPLAY: true,
24
- CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR: 'https://publ-upload-dev.s3.ap-northeast-2.amazonaws.com/VSMP4z4pf20250529100121192-6ncx7.mp4?fallbackUrl=publ-upload-dev.s3.ap-northeast-2.amazonaws.com%2F6ce235e9-c103-4ba4-9a3d-f276f703f406.mp4',
24
+ CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR: 'http://publ-upload-local.s3.ap-northeast-2.amazonaws.com/dd7418e3-b4fb-4be4-86c0-f582c80d4986.mov',
25
25
  CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME: 0,
26
26
  CB_CONTENT_PROP_VIDEO_SPEC_THUMB: '',
27
27
  CB_CONTENT_PROP_VIDEO_SPEC_TYPE: 'FILE',
@@ -4239,7 +4239,7 @@ exports.MOCK_SECTIONS = [
4239
4239
  queryableTapSrc: 'N/A',
4240
4240
  updatedAt: '2025-02-27T03:37:10'
4241
4241
  }
4242
- ].splice(0, 1),
4242
+ ],
4243
4243
  display: true,
4244
4244
  dlSelectorId: 'DLSELKUP4U5JE3TVEI47R-RSWV6',
4245
4245
  dynamicLayoutPageId: 6106,
@@ -125,7 +125,7 @@ function VideoPlayer(props) {
125
125
  alignItems: 'center',
126
126
  justifyContent: 'center',
127
127
  transform: 'translate(-50%, -50%)'
128
- } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { iconName: "ic_video_play_circle", fillType: "fill", colorKey: "ui_cpnt_icon_sys_white", size: 48 }) }))), (0, jsx_runtime_1.jsxs)(S_Video, __assign({ muted: true, playsInline: true, controls: !isEditMode, isEditMode: isEditMode, ref: videoRef, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onLoadedMetadata: onLoadedMetadata, onPlay: onPlay, onError: onVideoError, "data-src": CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoURL }), "Your browser does not support the video tag."] }), videoURL + CB_CONTENT_PROP_VIDEO_SPEC_THUMB)] })) }))] }));
128
+ } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { iconName: "ic_video_play_circle", fillType: "fill", colorKey: "ui_cpnt_icon_sys_white", size: 48 }) }))), (0, jsx_runtime_1.jsxs)(S_Video, __assign({ preload: "metadata", muted: true, playsInline: true, controls: !isEditMode, isEditMode: isEditMode, ref: videoRef, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onLoadedMetadata: onLoadedMetadata, onPlay: onPlay, onError: onVideoError, "data-src": CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoURL }), "Your browser does not support the video tag."] }), videoURL + CB_CONTENT_PROP_VIDEO_SPEC_THUMB)] })) }))] }));
129
129
  }
130
130
  function getBGColorStyles(props, device) {
131
131
  var availableSpecCodes = [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.5.391",
3
+ "version": "2.5.393",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.174]
2
+ ## [v2.2.176]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
- * [PDS-1302] fix / video가 모바일에서 풀화면으로
6
+ * [PDS-1307] [PDS-1308] 아이콘 수정 / 모바일 자동재생