pds-dev-kit-web 2.2.309 → 2.2.311

package/_wildcard.machine.publr.co+2-key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDs4IzefteDpp40
+hBgk+1bVmLIe5+aU4KVUV39w+6zl9kBjooHgoE+QWre7HK7oDssQJacGcDdqLil+
+2VBUob5pVht/UrcfV0/8NGZgFPj3/eyyIqraJeXZtI0+18y5uN9yuwyt6ZJvF6vp
+fgJlftRLDBkADr28IK1kZ8LBYd2nMqp8hgIa5GhpbwfftZkLO26sbbN8Xonr8SyE
+abe7c4KywTPfMxxmLhY6muKVQ3xDvE/YXawamfCHcGCstx4a3GxojmRXczve+o0Z
+VvSJquvg0A4gZo7NoRPNfrIhN9YH4LTs7px4TAOyi+DQC2FqapIEXgvBeMV+GcLJ
+o7T3hEuVAgMBAAECggEAYdlgV4iN/hQVxhvK3Xv1osYwzhN9bIJfyTdbrZBJG7Vd
+Y8r9W4zdUQQoYWK33aQ+vazQEhjIy1PGUF/0jwFBZsHrGe1RN+EZaVU79PS047xA
+ylUHvpVpHUU4E32RVCbKJtqdojmaA8oDebBTzRlXGKkmqp9sQQo+lftGuBt1NFsu
+D34JjVJrg6R637eGolEdtlEt6mZun1wLpMA0a/XWn0GKfFekZz8zL9Vf/djipy+7
+D2tbLOStlMg7nTLInMC0yAwd+M+MHpGsqGQ1CAZ5gAtDeOWLjiZ7XOwadxtMdvCj
+uST6INab//ovwML6LypXs371LKV/YJ/cAa3bKbBdAQKBgQDwRTwm8dfGzacBQOgJ
+Lz37yTVThCNkkzV4FcEWXwQg+Vg1lEBbDvKbzc/R4lcN+eI8Ytkl4IJibx8r4lnm
+9f14uV8BWt9M86jsaSDqcyujAFyVp+Mk3KKxtZkHKBdVYAdpRXLbYpbXBmIW4jEW
+vqgq+G8YBdKaD60yHJa7yId2GwKBgQD8YnIq8IBK2y0bwz5fMuoVAto54kBbJ5xu
+051/qEpwp6F8zL5l90YfMzfaDI+HGd39Exyh1jw40tC/oftrpku45aUKlKh2p0Eu
+XIisd/ogREOgX+rccNK3/+vNIvuNMUG+P058CXIG77xmuVNhMcTCJlkVNkCvTqiD
+C15nG4MgDwKBgH8rNeYq9JjteioIr4dE8NqWKVpVwuHVpGQ1p2fuzGGjd5OMLu/D
+HpdmPEuLL6ZfDuYFL4eDp57vz6DLgefjZNAD1QwDi9LP2CWgkuJkKMFyTI6NOITn
+HllOk3sdNhRi6ilGr778FHgkkcAo4fB24s0zhqFBW7FdAL9YMFOdlEznAoGBAMmd
+01peGf6yrIxbIn5ma/0w9Cf9iC/JqvwV7OHIDP+FykmqPgeyy7+s6Nc15YqlrWK4
+W80lGaLDNqN/wRu0ExW3zmpva0yuPDHPFhfBGH2iSuvY9AP51TvMJBER+yZFzSEv
+7YDFAuRrq3PcZLFmUqpOfCen2XCyQ4e8E0QHBG8dAoGATLPdAJKh8QtrAHetvKba
+U6DvB9bZK1c9+JpMYTgm0sv0VAxEug6g7K5dzFze674+cT9aBjztmm9f9vMFrjLP
+jDEjf9078+yJMPHvJRfArm5wkEwtKB/+8l5EdegO3ddHEadeyKYkXhqr7xDi+Y7C
+NpXDacZzaSPE3eM94owa1Lw=
+-----END PRIVATE KEY-----

package/_wildcard.machine.publr.co+2.pem

@@ -0,0 +1,26 @@
+-----BEGIN CERTIFICATE-----
+MIIEVDCCArygAwIBAgIQIQ3K3sDryHneKbPt2m/uYjANBgkqhkiG9w0BAQsFADB5
+MR4wHAYDVQQKExVta2NlcnQgZGV2ZWxvcG1lbnQgQ0ExJzAlBgNVBAsMHmNjbHNz
+QGNjbHNzdWktTWFjQm9va1Byby5sb2NhbDEuMCwGA1UEAwwlbWtjZXJ0IGNjbHNz
+QGNjbHNzdWktTWFjQm9va1Byby5sb2NhbDAeFw0yNTAzMzExMTMwMjlaFw0yNzA3
+MDExMTMwMjlaMFIxJzAlBgNVBAoTHm1rY2VydCBkZXZlbG9wbWVudCBjZXJ0aWZp
+Y2F0ZTEnMCUGA1UECwweY2Nsc3NAY2Nsc3N1aS1NYWNCb29rUHJvLmxvY2FsMIIB
+IjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA7OCM3n7Xg6aeNIQYJPtW1Ziy
+HufmlOClVFd/cPus5fZAY6KB4KBPkFq3uxyu6A7LECWnBnA3ai4pftlQVKG+aVYb
+f1K3H1dP/DRmYBT49/3ssiKq2iXl2bSNPtfMubjfcrsMremSbxer6X4CZX7USwwZ
+AA69vCCtZGfCwWHdpzKqfIYCGuRoaW8H37WZCzturG2zfF6J6/EshGm3u3OCssEz
+3zMcZi4WOprilUN8Q7xP2F2sGpnwh3BgrLceGtxsaI5kV3M73vqNGVb0iarr4NAO
+IGaOzaETzX6yITfWB+C07O6ceEwDsovg0AthamqSBF4LwXjFfhnCyaO094RLlQID
+AQABo38wfTAOBgNVHQ8BAf8EBAMCBaAwEwYDVR0lBAwwCgYIKwYBBQUHAwEwHwYD
+VR0jBBgwFoAUivgDIbPxV5kEtkRARvALcvb3RgwwNQYDVR0RBC4wLIISKi5tYWNo
+aW5lLnB1YmxyLmNvhwTAqAEOhxAAAAAAAAAAAAAAAAAAAAABMA0GCSqGSIb3DQEB
+CwUAA4IBgQCnQOeM9UfVUHc5+0GGQvFsou88CsaTj8GGOK2Jsc5Qgc4puG9uX/Wl
+ex8VLerV1+/E27E9idhD6kN3lFpV0MG8b4YxlctCUXhpK0dT/fAau8kQIlwyU0cH
+AsZA1KmFTEtTiktMieRySHg2B4f5+FA3egRg5GEh1Um9al8+aFS2kR6uytN3yJOP
+FS0iX4j/nh35SuE0m5qwGDJuUd5/6V+oCrAlqDCdJt2WI/KK7rXP/l+h22hcUnm1
+6BXg95qTuASgHo559vXKlIGcG0rn+Gjt0hSJxdXTPLT9ixgE6fL93h1ouu67bJfK
+mgfUd0tzl43DgUnQKNZhbVx8U0S1d1mixrDPwjXYR3REZEW2EtCoaoTiUN4NbTkV
+UpHxXac/iSq03Vtw/eutQturAMFhRTcmLUdb9sCFONx8D+lOjzAmn2c4aoVPCZv5
+TDUSFopOvekxS2ngBJqb4YFtE0rebpoIuwuXvDaAdh9YCCDOghan0FLFRdMsD/kz
+kOlXSJWNgZ0=
+-----END CERTIFICATE-----

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

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

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

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var SocialLine = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M19.914 9.003a6.741 6.741 0 0 1-.764 2.2c-.179.324-1.056 1.558-1.325 1.884-1.478 1.788-3.953 3.851-8.092 5.857a.545.545 0 0 1-.78-.552l.21-1.885a.545.545 0 0 0-.483-.604C3.781 15.388 0 12.04 0 7.986 0 3.576 4.476 0 9.997 0c5.366 0 9.744 3.377 9.987 7.615.007.123.026.516.01.78-.011.16-.034.365-.08.608zm-15.414.6V6.24a.512.512 0 1 0-1.023 0v3.877c0 .284.23.514.512.514h2.045a.512.512 0 0 0 0-1.027H4.5zm3.154 1.028a.4.4 0 0 0 .4-.401V6.128a.4.4 0 0 0-.4-.402h-.223a.4.4 0 0 0-.4.402v4.102a.4.4 0 0 0 .4.4h.223zm4.133-4.391v2.369s-2.042-2.676-2.074-2.71a.508.508 0 0 0-.4-.172.527.527 0 0 0-.492.534v3.856a.512.512 0 1 0 1.023 0V7.763s2.073 2.698 2.104 2.727c.09.086.211.14.346.14.284.003.516-.249.516-.534V6.24a.512.512 0 1 0-1.023 0zm4.858 0a.512.512 0 0 0-.512-.514h-2.045a.512.512 0 0 0-.511.514v3.877c0 .284.229.514.511.514h2.045a.512.512 0 0 0 0-1.027H14.6v-.912h1.534a.512.512 0 0 0 0-1.027H14.6v-.912h1.534c.283 0 .512-.23.512-.513z" }) })));
+};
+exports.default = SocialLine;

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

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

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

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var SocialMeta = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V1.14c-.328-.047-1.46-.14-2.774-.14-2.766 0-4.726 1.677-4.726 4.86v3.14H8v4h2.274V22h3.726v-8.5z" }) })));
+};
+exports.default = SocialMeta;

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

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

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

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var SocialX = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) })));
+};
+exports.default = SocialX;

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

@@ -234,6 +234,9 @@ declare const lineIcons: {
     readonly ic_site: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_slideBanner: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_slider: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_social_line: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_social_meta: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_social_x: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_sort: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_speaker_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_speaker_wave_1: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

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

@@ -271,6 +271,9 @@ var Shoppingbag_1 = __importDefault(require("./Shoppingbag"));
 var Site_1 = __importDefault(require("./Site"));
 var SlideBanner_1 = __importDefault(require("./SlideBanner"));
 var Slider_1 = __importDefault(require("./Slider"));
+var SocialLine_1 = __importDefault(require("./SocialLine"));
+var SocialMeta_1 = __importDefault(require("./SocialMeta"));
+var SocialX_1 = __importDefault(require("./SocialX"));
 var Sort_1 = __importDefault(require("./Sort"));
 var SpeakerOff_1 = __importDefault(require("./SpeakerOff"));
 var SpeakerWave1_1 = __importDefault(require("./SpeakerWave1"));
@@ -577,6 +580,9 @@ var lineIcons = {
     ic_site: Site_1.default,
     ic_slideBanner: SlideBanner_1.default,
     ic_slider: Slider_1.default,
+    ic_social_line: SocialLine_1.default,
+    ic_social_meta: SocialMeta_1.default,
+    ic_social_x: SocialX_1.default,
     ic_sort: Sort_1.default,
     ic_speaker_off: SpeakerOff_1.default,
     ic_speaker_wave_1: SpeakerWave1_1.default,

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

@@ -6,7 +6,7 @@ type ReactionValueOption = {
     type: ReactionType;
     count: number;
 };
-type ReactionArrayType = ReactionValueOption[];
+export type ReactionArrayType = ReactionValueOption[];
 export type ChatBubbleListItemProps = {
     titleText?: PDSTextType;
     imageSrc?: string;
@@ -21,12 +21,14 @@ export type ChatBubbleListItemProps = {
     children?: React.ReactNode;
     downloadIBtnMode?: 'use' | 'none';
     reactionBtnMode?: 'use' | 'none';
-    reactionBtnText?: string;
     reactionArray?: ReactionArrayType;
     reactionBubblePosition?: 'top' | 'bottom';
+    translateIBtnMode?: 'use' | 'none';
+    translateState?: 'active' | 'deactive';
     onClickContextMenuItem?: (option: PDSValueOption) => void;
     onClickDownloadIBtn?: () => void;
     onClickReactionBtn?: (type: ReactionType) => void;
+    onClickTranslateIBtn?: () => void;
 };
-declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, reactionBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickContextMenuItem, onClickDownloadIBtn, onClickReactionBtn }: ChatBubbleListItemProps): JSX.Element;
+declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, reactionBtnMode, reactionArray, reactionBubblePosition, translateIBtnMode, translateState, onClickContextMenuItem, onClickDownloadIBtn, onClickReactionBtn, onClickTranslateIBtn }: ChatBubbleListItemProps): JSX.Element;
 export default ChatBubbleListItem;

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

@@ -69,7 +69,7 @@ var profileImageBorderColorTheme = {
     transparent: 'ui_cpnt_list_chatbubble_base_transparent'
 };
 function ChatBubbleListItem(_a) {
-    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, _g = _a.reactionBtnMode, reactionBtnMode = _g === void 0 ? 'none' : _g, _h = _a.reactionBtnText, reactionBtnText = _h === void 0 ? '-' : _h, reactionArray = _a.reactionArray, _j = _a.reactionBubblePosition, reactionBubblePosition = _j === void 0 ? 'bottom' : _j, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn, onClickReactionBtn = _a.onClickReactionBtn;
+    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, _g = _a.reactionBtnMode, reactionBtnMode = _g === void 0 ? 'none' : _g, reactionArray = _a.reactionArray, _h = _a.reactionBubblePosition, reactionBubblePosition = _h === void 0 ? 'bottom' : _h, _j = _a.translateIBtnMode, translateIBtnMode = _j === void 0 ? 'none' : _j, translateState = _a.translateState, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn, onClickReactionBtn = _a.onClickReactionBtn, onClickTranslateIBtn = _a.onClickTranslateIBtn;
     var _k = (0, react_1.useState)(false), isContextMenuOpen = _k[0], setIsContextMenuOpen = _k[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
@@ -136,7 +136,9 @@ function ChatBubbleListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_BubbleWrapper, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ hasBottomElement: !!labelText || !!timeMode }, { children: [(0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ hasBottomElement: !!labelText || !!timeMode }, { children: [(0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })))] }), (0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: isMe, downloadIBtnMode: downloadIBtnMode, reactionBtnMode: reactionBtnMode, reactionArray: reactionArray, reactionBtnText: reactionBtnText, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn })] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] }))] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_BubbleWrapper, { children: [isMe && ((0, jsx_runtime_1.jsx)(S_Box, { children: (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] })) })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsx)(S_Box, { children: (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] })) }))] }), (0, jsx_runtime_1.jsxs)(S_BottomActionWrapper, { children: [!isMe && ((0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: false, isReactionButtonShow: reactionBtnMode === 'use', reactionArray: reactionArray, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn })), translateIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "line", baseColorKey: "ui_cpnt_sheet_base_02", iconColorKey: translateState === 'active'
+                                                        ? 'ui_cpnt_list_chatbubble_base_brand_primary'
+                                                        : 'ui_cpnt_icon_sys_grey_01', iconSize: 12, baseSize: "xsmall", iconName: "ic_translate", onClick: onClickTranslateIBtn })), downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_sheet_base_02", iconColorKey: "ui_cpnt_icon_sys_grey_01", iconSize: 12, baseSize: "xsmall", iconName: "ic_download", onClick: onClickDownloadIBtn })), isMe && ((0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: true, isReactionButtonShow: reactionBtnMode === 'use', reactionArray: reactionArray, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn }))] })] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] }))] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
 }
 var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -162,27 +164,17 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (te
     return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
 });
 var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  margin-left: ", ";\n  margin-right: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_a) {
-    var isMe = _a.isMe, theme = _a.theme;
-    return !isMe && theme.spacing.spacingB;
-}, function (_a) {
-    var isMe = _a.isMe, theme = _a.theme;
-    return isMe && theme.spacing.spacingB;
-});
-var S_Box = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: ", ";\n"])), function (_a) {
-    var hasBottomElement = _a.hasBottomElement;
-    return (hasBottomElement ? 'space-between' : 'center');
-});
-var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
+var S_Box = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n"])));
+var S_ChatBubbleBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
     var isMe = _a.isMe;
     return isMe && MyChatBubble;
 });
-var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  justify-content: flex-end;\n"], ["\n  justify-content: flex-end;\n"])));
-var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  max-width: fit-content;\n"], ["\n  align-items: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  max-width: fit-content;\n"])), function (_a) {
+var MyChatBubble = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  justify-content: flex-end;\n"], ["\n  justify-content: flex-end;\n"])));
+var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  max-width: fit-content;\n"], ["\n  align-items: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  max-width: fit-content;\n"])), function (_a) {
     var isMe = _a.isMe;
     return isMe && 'flex-end';
 });
-var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_TimeWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var isMe = _a.isMe;
     return isMe && 'flex-end';
 }, function (_a) {
@@ -198,7 +190,7 @@ var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templa
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
+var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
@@ -211,6 +203,10 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (temp
     var hoverMode = _a.hoverMode;
     return hoverMode === 'use' && '1';
 });
-var S_BubbleWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_BubbleWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_BottomActionWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  padding-top: 4px;\n  position: relative;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  padding-top: 4px;\n  position: relative;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
 exports.default = ChatBubbleListItem;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.d.ts

@@ -7,12 +7,10 @@ type ReactionValueOption = {
 type ReactionArrayType = ReactionValueOption[];
 type Props = {
     isMe: boolean;
-    downloadIBtnMode: 'use' | 'none';
-    reactionBtnMode: 'use' | 'none';
-    reactionBtnText: string;
+    isReactionButtonShow: boolean;
     reactionArray?: ReactionArrayType;
     reactionBubblePosition: 'top' | 'bottom';
     onClickReactionBtn?: (type: ReactionType) => void;
 };
-declare function ReactionRow({ isMe, reactionBtnMode, downloadIBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
+declare function ReactionRow({ isMe, isReactionButtonShow, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
 export default ReactionRow;

package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.js

@@ -20,12 +20,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var TextLabel_1 = require("../../../components/TextLabel");
+var IconButton_1 = require("../../../components/IconButton");
 var components_1 = require("../../../../hybrid/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 var ReactionBubble_1 = __importDefault(require("./ReactionBubble"));
 function ReactionRow(_a) {
-    var isMe = _a.isMe, reactionBtnMode = _a.reactionBtnMode, downloadIBtnMode = _a.downloadIBtnMode, reactionBtnText = _a.reactionBtnText, reactionArray = _a.reactionArray, reactionBubblePosition = _a.reactionBubblePosition, onClickReactionBtn = _a.onClickReactionBtn;
+    var isMe = _a.isMe, isReactionButtonShow = _a.isReactionButtonShow, reactionArray = _a.reactionArray, reactionBubblePosition = _a.reactionBubblePosition, onClickReactionBtn = _a.onClickReactionBtn;
     var _b = (0, react_1.useState)(false), isOpenReactionBubble = _b[0], setIsOpenReactionBubble = _b[1];
     var bubbleRef = (0, react_1.useRef)(null);
     var buttonRef = (0, react_1.useRef)(null);
@@ -65,54 +65,34 @@ function ReactionRow(_a) {
             return;
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Wrapper, { children: [(0, jsx_runtime_1.jsxs)(S_ReactionWrapper, __assign({ isMe: isMe, downloadIBtnMode: downloadIBtnMode === 'use' }, { children: [(0, jsx_runtime_1.jsx)(S_ButtonWrapper, __assign({ ref: buttonRef }, { children: !isMe && reactionBtnMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ onClick: handleOpenReactionBubble }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_plus_circle", size: 12 }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: reactionBtnText, singleLineMode: "use", styleTheme: "caption2Bold" })] }))) })), reactionArray && ((0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: reactionArray.map(function (reaction, index) {
-                            var iconName = function () {
-                                switch (reaction.type) {
-                                    case 'heart':
-                                        return 'ic_lottie_heart';
-                                    case 'like':
-                                        return 'ic_lottie_thumb_up';
-                                    case 'confetti':
-                                        return 'ic_lottie_confetti';
-                                }
-                            };
-                            return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: iconName(), size: 16, autoplayMode: "none", loopMode: "none" }) }), index));
-                        }) }))] })), (0, jsx_runtime_1.jsx)(S_ReactionBubbleWrapper, __assign({ ref: bubbleRef, reactionBubblePosition: reactionBubblePosition }, { children: isOpenReactionBubble && ((0, jsx_runtime_1.jsx)(ReactionBubble_1.default, __assign({ pointingPosition: reactionBubblePosition === 'bottom' ? 'start_top' : 'start_bottom' }, { children: (0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: defaultReactions.map(function (reaction, index) { return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type, isButton: true, onClick: function () {
-                                onClickReactionBtn && onClickReactionBtn(reaction.type);
-                                setIsOpenReactionBubble(false);
-                            } }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: reaction.iconName, size: 16, autoplayMode: "none", loopMode: "none" }) }), index)); }) }) }))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(S_ReactionRowWrapper, { children: [reactionArray && ((0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: reactionArray.map(function (reaction, index) {
+                    var iconName = function () {
+                        switch (reaction.type) {
+                            case 'heart':
+                                return 'ic_lottie_heart';
+                            case 'like':
+                                return 'ic_lottie_thumb_up';
+                            case 'confetti':
+                                return 'ic_lottie_confetti';
+                        }
+                    };
+                    return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: iconName(), size: 12, autoplayMode: "none", loopMode: "none" }) }), index));
+                }) })), isReactionButtonShow && ((0, jsx_runtime_1.jsxs)(S_ButtonWrapper, __assign({ ref: buttonRef }, { children: [!isMe && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "line", baseColorKey: "ui_cpnt_sheet_base_02", iconColorKey: "ui_cpnt_icon_sys_grey_01", iconSize: 12, baseSize: "xsmall", iconName: "ic_face", onClick: handleOpenReactionBubble })), (0, jsx_runtime_1.jsx)(S_ReactionBubbleWrapper, __assign({ ref: bubbleRef, reactionBubblePosition: reactionBubblePosition }, { children: isOpenReactionBubble && ((0, jsx_runtime_1.jsx)(ReactionBubble_1.default, __assign({ pointingPosition: reactionBubblePosition === 'bottom' ? 'start_top' : 'start_bottom' }, { children: (0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: defaultReactions.map(function (reaction, index) { return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type, isButton: true, onClick: function () {
+                                        onClickReactionBtn && onClickReactionBtn(reaction.type);
+                                        setIsOpenReactionBubble(false);
+                                    } }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: reaction.iconName, size: 12, autoplayMode: "none", loopMode: "none" }) }), index)); }) }) }))) }))] })))] }));
 }
 exports.default = ReactionRow;
-var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  position: relative;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  position: relative;\n"])), function (_a) {
+var S_ReactionRowWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n"], ["\n  display: flex;\n  gap: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var S_ReactionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  max-width: -webkit-fill-available;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  max-width: -webkit-fill-available;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100%;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-}, function (_a) {
-    var isMe = _a.isMe, downloadIBtnMode = _a.downloadIBtnMode;
-    return !isMe && (downloadIBtnMode ? '40px' : '34px');
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-});
-var S_ButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var S_ReactionButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  gap: ", ";\n  height: 24px;\n  justify-content: center;\n  max-width: fit-content;\n  padding: 0 ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  gap: ", ";\n  height: 24px;\n  justify-content: center;\n  max-width: fit-content;\n  padding: 0 ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_sheet_base_02;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-});
-var S_ReactionBadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n"], ["\n  display: flex;\n  gap: ", ";\n"])), function (_a) {
+var S_ButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
+var S_ReactionBadgeWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var S_ReactionBadge = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 100%;\n  cursor: ", ";\n  display: flex;\n  height: 24px;\n  justify-content: center;\n  width: 24px;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 100%;\n  cursor: ", ";\n  display: flex;\n  height: 24px;\n  justify-content: center;\n  width: 24px;\n"])), function (_a) {
+var S_ReactionBadge = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 100%;\n  cursor: ", ";\n  display: flex;\n  height: 16px;\n  justify-content: center;\n  width: 16px;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 100%;\n  cursor: ", ";\n  display: flex;\n  height: 16px;\n  justify-content: center;\n  width: 16px;\n"])), function (_a) {
     var theme = _a.theme, type = _a.type;
     switch (type) {
         case 'heart':
@@ -126,8 +106,8 @@ var S_ReactionBadge = styled_components_1.default.div(templateObject_6 || (templ
     var isButton = _a.isButton;
     return isButton && 'pointer';
 });
-var S_ReactionBubbleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  left: 0;\n  position: absolute;\n  ", "\n  z-index: 10;\n"], ["\n  left: 0;\n  position: absolute;\n  ", "\n  z-index: 10;\n"])), function (_a) {
+var S_ReactionBubbleWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  left: -7.5px;\n  position: absolute;\n  ", "\n  z-index: 10;\n"], ["\n  left: -7.5px;\n  position: absolute;\n  ", "\n  z-index: 10;\n"])), function (_a) {
     var reactionBubblePosition = _a.reactionBubblePosition;
     return reactionBubblePosition === 'bottom' ? 'top: 28px;' : 'bottom: 24px;';
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -6,7 +6,7 @@ type ReactionValueOption = {
     type: ReactionType;
     count: number;
 };
-type ReactionArrayType = ReactionValueOption[];
+export type ReactionArrayType = ReactionValueOption[];
 export type ChatBubbleListItemProps = {
     titleText?: PDSTextType;
     imageSrc?: string;
@@ -21,12 +21,14 @@ export type ChatBubbleListItemProps = {
     children?: React.ReactNode;
     downloadIBtnMode?: 'use' | 'none';
     reactionBtnMode?: 'use' | 'none';
-    reactionBtnText?: string;
     reactionArray?: ReactionArrayType;
     reactionBubblePosition?: 'top' | 'bottom';
+    translateIBtnMode?: 'use' | 'none';
+    translateState?: 'active' | 'deactive';
     onClickContextMenuItem?: (option: PDSValueOption) => void;
     onClickDownloadIBtn?: () => void;
     onClickReactionBtn?: (type: ReactionType) => void;
+    onClickTranslateIBtn?: () => void;
 };
-declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, reactionBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickContextMenuItem, onClickDownloadIBtn, onClickReactionBtn }: ChatBubbleListItemProps): JSX.Element;
+declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, reactionBtnMode, reactionArray, reactionBubblePosition, translateIBtnMode, translateState, onClickContextMenuItem, onClickDownloadIBtn, onClickReactionBtn, onClickTranslateIBtn }: ChatBubbleListItemProps): JSX.Element;
 export default ChatBubbleListItem;

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

@@ -69,7 +69,7 @@ var profileImageBorderColorTheme = {
     transparent: 'ui_cpnt_list_chatbubble_base_transparent'
 };
 function ChatBubbleListItem(_a) {
-    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, _g = _a.reactionBtnMode, reactionBtnMode = _g === void 0 ? 'none' : _g, _h = _a.reactionBtnText, reactionBtnText = _h === void 0 ? '-' : _h, reactionArray = _a.reactionArray, _j = _a.reactionBubblePosition, reactionBubblePosition = _j === void 0 ? 'bottom' : _j, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn, onClickReactionBtn = _a.onClickReactionBtn;
+    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, _g = _a.reactionBtnMode, reactionBtnMode = _g === void 0 ? 'none' : _g, reactionArray = _a.reactionArray, _h = _a.reactionBubblePosition, reactionBubblePosition = _h === void 0 ? 'bottom' : _h, _j = _a.translateIBtnMode, translateIBtnMode = _j === void 0 ? 'none' : _j, translateState = _a.translateState, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn, onClickReactionBtn = _a.onClickReactionBtn, onClickTranslateIBtn = _a.onClickTranslateIBtn;
     var _k = (0, react_1.useState)(false), isContextMenuOpen = _k[0], setIsContextMenuOpen = _k[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
@@ -138,7 +138,9 @@ function ChatBubbleListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_BubbleWrapper, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ hasBottomElement: !!labelText || !!timeMode }, { children: [(0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ hasBottomElement: !!labelText || !!timeMode }, { children: [(0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })))] }), (0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: isMe, downloadIBtnMode: downloadIBtnMode, reactionBtnMode: reactionBtnMode, reactionBtnText: reactionBtnText, reactionArray: reactionArray, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn })] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] }))] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_BubbleWrapper, { children: [isMe && ((0, jsx_runtime_1.jsx)(S_Box, { children: (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] })) })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsx)(S_Box, { children: (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] })) }))] }), (0, jsx_runtime_1.jsxs)(S_BottomActionWrapper, { children: [!isMe && ((0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: false, isReactionButtonShow: reactionBtnMode === 'use', reactionArray: reactionArray, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn })), translateIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "line", baseColorKey: "ui_cpnt_sheet_base_02", iconColorKey: translateState === 'active'
+                                                        ? 'ui_cpnt_list_chatbubble_base_brand_primary'
+                                                        : 'ui_cpnt_icon_sys_grey_01', iconSize: 12, baseSize: "xsmall", iconName: "ic_translate", onClick: onClickTranslateIBtn })), downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_sheet_base_02", iconColorKey: "ui_cpnt_icon_sys_grey_01", iconSize: 12, baseSize: "xsmall", iconName: "ic_download", onClick: onClickDownloadIBtn })), isMe && ((0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: true, isReactionButtonShow: reactionBtnMode === 'use', reactionArray: reactionArray, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn }))] })] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] }))] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
 }
 var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -164,27 +166,17 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (te
     return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
 });
 var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  margin-left: ", ";\n  margin-right: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_a) {
-    var isMe = _a.isMe, theme = _a.theme;
-    return !isMe && theme.spacing.spacingB;
-}, function (_a) {
-    var isMe = _a.isMe, theme = _a.theme;
-    return isMe && theme.spacing.spacingB;
-});
-var S_Box = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: ", ";\n"])), function (_a) {
-    var hasBottomElement = _a.hasBottomElement;
-    return (hasBottomElement ? 'space-between' : 'center');
-});
-var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
+var S_Box = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n"])));
+var S_ChatBubbleBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
     var isMe = _a.isMe;
     return isMe && MyChatBubble;
 });
-var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  justify-content: flex-end;\n"], ["\n  justify-content: flex-end;\n"])));
-var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  max-width: fit-content;\n"], ["\n  align-items: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  max-width: fit-content;\n"])), function (_a) {
+var MyChatBubble = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  justify-content: flex-end;\n"], ["\n  justify-content: flex-end;\n"])));
+var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  max-width: fit-content;\n"], ["\n  align-items: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  max-width: fit-content;\n"])), function (_a) {
     var isMe = _a.isMe;
     return isMe && 'flex-end';
 });
-var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_TimeWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var isMe = _a.isMe;
     return isMe && 'flex-end';
 }, function (_a) {
@@ -200,7 +192,7 @@ var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templa
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
+var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
@@ -213,6 +205,10 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (temp
     var hoverMode = _a.hoverMode;
     return hoverMode === 'use' && '1';
 });
-var S_BubbleWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_BubbleWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_BottomActionWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  padding-top: 4px;\n  position: relative;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  padding-top: 4px;\n  position: relative;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
 exports.default = ChatBubbleListItem;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionRow.d.ts

@@ -7,12 +7,10 @@ type ReactionValueOption = {
 type ReactionArrayType = ReactionValueOption[];
 type Props = {
     isMe: boolean;
-    downloadIBtnMode: 'use' | 'none';
-    reactionBtnMode: 'use' | 'none';
-    reactionBtnText: string;
+    isReactionButtonShow: boolean;
     reactionArray?: ReactionArrayType;
     reactionBubblePosition: 'top' | 'bottom';
     onClickReactionBtn?: (type: ReactionType) => void;
 };
-declare function ReactionRow({ isMe, downloadIBtnMode, reactionBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
+declare function ReactionRow({ isMe, isReactionButtonShow, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
 export default ReactionRow;

package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionRow.js

@@ -21,11 +21,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var components_1 = require("../../../../hybrid/components");
-var TextLabel_1 = require("../../../components/TextLabel");
+var IconButton_1 = require("../../../components/IconButton");
 var styled_components_1 = __importDefault(require("styled-components"));
 var ReactionBubble_1 = __importDefault(require("./ReactionBubble"));
 function ReactionRow(_a) {
-    var isMe = _a.isMe, downloadIBtnMode = _a.downloadIBtnMode, reactionBtnMode = _a.reactionBtnMode, reactionBtnText = _a.reactionBtnText, reactionArray = _a.reactionArray, reactionBubblePosition = _a.reactionBubblePosition, onClickReactionBtn = _a.onClickReactionBtn;
+    var isMe = _a.isMe, isReactionButtonShow = _a.isReactionButtonShow, reactionArray = _a.reactionArray, reactionBubblePosition = _a.reactionBubblePosition, onClickReactionBtn = _a.onClickReactionBtn;
     var _b = (0, react_1.useState)(false), isOpenReactionBubble = _b[0], setIsOpenReactionBubble = _b[1];
     var bubbleRef = (0, react_1.useRef)(null);
     var buttonRef = (0, react_1.useRef)(null);
@@ -55,57 +55,44 @@ function ReactionRow(_a) {
         { iconName: 'ic_lottie_thumb_up', type: 'like' },
         { iconName: 'ic_lottie_confetti', type: 'confetti' }
     ];
-    var handleClickReactionButton = function () {
-        isOpenReactionBubble ? setIsOpenReactionBubble(false) : setIsOpenReactionBubble(true);
+    var handleOpenReactionBubble = function () {
+        if (!isOpenReactionBubble) {
+            setIsOpenReactionBubble(true);
+            return;
+        }
+        if (isOpenReactionBubble) {
+            setIsOpenReactionBubble(false);
+            return;
+        }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Wrapper, { children: [(0, jsx_runtime_1.jsxs)(S_ReactionWrapper, __assign({ isMe: isMe, downloadIBtnMode: downloadIBtnMode === 'use' }, { children: [(0, jsx_runtime_1.jsx)(S_ButtonWrapper, __assign({ ref: buttonRef }, { children: !isMe && reactionBtnMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ onClick: handleClickReactionButton }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_plus_circle", size: 12 }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: reactionBtnText, singleLineMode: "use", styleTheme: "caption2Bold" })] }))) })), reactionArray && ((0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: reactionArray.map(function (reaction, index) {
-                            var iconName = function () {
-                                switch (reaction.type) {
-                                    case 'heart':
-                                        return 'ic_lottie_heart';
-                                    case 'like':
-                                        return 'ic_lottie_thumb_up';
-                                    case 'confetti':
-                                        return 'ic_lottie_confetti';
-                                }
-                            };
-                            return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: iconName(), size: 16, autoplayMode: "none", loopMode: "none" }) }), index));
-                        }) }))] })), (0, jsx_runtime_1.jsx)(S_ReactionBubbleWrapper, __assign({ ref: bubbleRef, reactionBubblePosition: reactionBubblePosition }, { children: isOpenReactionBubble && ((0, jsx_runtime_1.jsx)(ReactionBubble_1.default, __assign({ pointingPosition: reactionBubblePosition === 'bottom' ? 'start_top' : 'start_bottom' }, { children: (0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: defaultReactions.map(function (reaction, index) { return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type, isButton: true, onClick: function () {
-                                onClickReactionBtn && onClickReactionBtn(reaction.type);
-                                setIsOpenReactionBubble(false);
-                            } }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: reaction.iconName, size: 16, autoplayMode: "none", loopMode: "none" }) }), index)); }) }) }))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(S_ReactionRowWrapper, { children: [reactionArray && ((0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: reactionArray.map(function (reaction, index) {
+                    var iconName = function () {
+                        switch (reaction.type) {
+                            case 'heart':
+                                return 'ic_lottie_heart';
+                            case 'like':
+                                return 'ic_lottie_thumb_up';
+                            case 'confetti':
+                                return 'ic_lottie_confetti';
+                        }
+                    };
+                    return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: iconName(), size: 12, autoplayMode: "none", loopMode: "none" }) }), index));
+                }) })), isReactionButtonShow && ((0, jsx_runtime_1.jsxs)(S_ButtonWrapper, __assign({ ref: buttonRef }, { children: [!isMe && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "line", baseColorKey: "ui_cpnt_sheet_base_02", iconColorKey: "ui_cpnt_icon_sys_grey_01", iconSize: 12, baseSize: "xsmall", iconName: "ic_face", onClick: handleOpenReactionBubble })), (0, jsx_runtime_1.jsx)(S_ReactionBubbleWrapper, __assign({ ref: bubbleRef, reactionBubblePosition: reactionBubblePosition }, { children: isOpenReactionBubble && ((0, jsx_runtime_1.jsx)(ReactionBubble_1.default, __assign({ pointingPosition: reactionBubblePosition === 'bottom' ? 'start_top' : 'start_bottom' }, { children: (0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: defaultReactions.map(function (reaction, index) { return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type, isButton: true, onClick: function () {
+                                        onClickReactionBtn && onClickReactionBtn(reaction.type);
+                                        setIsOpenReactionBubble(false);
+                                    } }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: reaction.iconName, size: 12, autoplayMode: "none", loopMode: "none" }) }), index)); }) }) }))) }))] })))] }));
 }
 exports.default = ReactionRow;
-var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  position: relative;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  position: relative;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-});
-var S_ReactionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  max-width: -webkit-fill-available;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  max-width: -webkit-fill-available;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100%;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-}, function (_a) {
-    var isMe = _a.isMe, downloadIBtnMode = _a.downloadIBtnMode;
-    return !isMe && (downloadIBtnMode ? '40px' : '34px');
-}, function (_a) {
+var S_ReactionRowWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n"], ["\n  display: flex;\n  gap: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var S_ButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var S_ReactionButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  gap: ", ";\n  height: 24px;\n  justify-content: center;\n  padding: 0 ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  gap: ", ";\n  height: 24px;\n  justify-content: center;\n  padding: 0 ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_sheet_base_02;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-});
-var S_ReactionBadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n"], ["\n  display: flex;\n  gap: ", ";\n"])), function (_a) {
+var S_ButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
+var S_ReactionBadgeWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var S_ReactionBadge = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 100%;\n  cursor: ", ";\n  display: flex;\n  height: 24px;\n  justify-content: center;\n  width: 24px;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 100%;\n  cursor: ", ";\n  display: flex;\n  height: 24px;\n  justify-content: center;\n  width: 24px;\n"])), function (_a) {
+var S_ReactionBadge = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 100%;\n  cursor: ", ";\n  display: flex;\n  height: 16px;\n  justify-content: center;\n  width: 16px;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 100%;\n  cursor: ", ";\n  display: flex;\n  height: 16px;\n  justify-content: center;\n  width: 16px;\n"])), function (_a) {
     var theme = _a.theme, type = _a.type;
     switch (type) {
         case 'heart':
@@ -119,8 +106,8 @@ var S_ReactionBadge = styled_components_1.default.div(templateObject_6 || (templ
     var isButton = _a.isButton;
     return isButton && 'pointer';
 });
-var S_ReactionBubbleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  left: 0;\n  position: absolute;\n  ", "\n  z-index: 10;\n"], ["\n  left: 0;\n  position: absolute;\n  ", "\n  z-index: 10;\n"])), function (_a) {
+var S_ReactionBubbleWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  left: 0;\n  position: absolute;\n  ", "\n  z-index: 10;\n"], ["\n  left: 0;\n  position: absolute;\n  ", "\n  z-index: 10;\n"])), function (_a) {
     var reactionBubblePosition = _a.reactionBubblePosition;
     return reactionBubblePosition === 'bottom' ? 'top: 28px;' : 'bottom: 24px;';
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/package.json

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

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.309]
+## [v2.2.311]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1421] 다양한 BULK케이스 대응
+* SNS line icon 추가

package/.idea/codeStyles/Project.xml

@@ -1,59 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <HTMLCodeStyleSettings>
-      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
-    </HTMLCodeStyleSettings>
-    <JSCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <TypeScriptCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </TypeScriptCodeStyleSettings>
-    <VueCodeStyleSettings>
-      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
-      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
-    </VueCodeStyleSettings>
-    <codeStyleSettings language="HTML">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-  </code_scheme>
-</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,7 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
-  </profile>
-</component>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/pds-dev-kit.iml" filepath="$PROJECT_DIR$/.idea/pds-dev-kit.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/pds-dev-kit.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/prettier.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PrettierConfiguration">
-    <option name="myConfigurationMode" value="AUTOMATIC" />
-    <option name="myRunOnSave" value="true" />
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>