pds-dev-kit-web-test 2.7.167 → 2.7.168

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

@@ -0,0 +1,86 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importStar(require("styled-components"));
+/**
+ * @description ChatBubbleListItem에서의 사용 용례와 비슷한 사용 방식이 발생 한 경우, 별도의 PDS로 분리할 예정입니다.
+ */
+var ReactionBubble = function (_a) {
+    var _b = _a.pointingPosition, pointingPosition = _b === void 0 ? 'start_bottom' : _b, children = _a.children;
+    var theme = (0, styled_components_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(S_ContextBubbleArea, __assign({ "$position": pointingPosition }, { children: (0, jsx_runtime_1.jsxs)(S_ContextBubbleWrapper, __assign({ "$position": pointingPosition }, { children: [children, (0, jsx_runtime_1.jsxs)(Arrow, __assign({ "$position": pointingPosition, viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("polygon", { points: "9,10 3,0 15,0", fill: theme.ui_cpnt_sheet_base_01 }), (0, jsx_runtime_1.jsx)("path", { d: "M3,1 L9,10", stroke: theme.ui_cpnt_sheet_border_01, strokeWidth: "1", strokeLinecap: "butt" }), (0, jsx_runtime_1.jsx)("path", { d: "M15,1 L9,10", stroke: theme.ui_cpnt_sheet_border_01, strokeWidth: "1", strokeLinecap: "butt" }), (0, jsx_runtime_1.jsx)("path", { d: "M0,0 L15,0", strokeWidth: "1" })] }))] })) })));
+};
+exports.default = ReactionBubble;
+var S_ContextBubbleArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  ", "\n  position: relative;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  ", "\n  position: relative;\n"])), function (_a) {
+    var $position = _a.$position, theme = _a.theme;
+    var isTop = $position.includes('top');
+    return !isTop
+        ? "margin-bottom: ".concat(theme.spacing.spacingB, ";")
+        : "margin-top: ".concat(theme.spacing.spacingB, ";");
+});
+var S_ContextBubbleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 12px;\n  display: flex;\n  padding: ", ";\n  position: relative;\n  width: 'fit-content';\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 12px;\n  display: flex;\n  padding: ", ";\n  position: relative;\n  width: 'fit-content';\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_sheet_base_01;
+}, function (_a) {
+    var theme = _a.theme;
+    return "1px solid ".concat(theme.ui_cpnt_sheet_border_01);
+}, function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.spacing.spacingB, " ").concat(theme.spacing.spacingC);
+});
+var Arrow = styled_components_1.default.svg(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 12.6px;\n  position: absolute;\n  width: 15px;\n\n  ", "\n\n  ", "\n"], ["\n  height: 12.6px;\n  position: absolute;\n  width: 15px;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var $position = _a.$position;
+    var isTop = $position.includes('top');
+    if (isTop) {
+        return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        top: -10px;\n        transform: translateX(-50%) rotate(180deg);\n      "], ["\n        top: -10px;\n        transform: translateX(-50%) rotate(180deg);\n      "])));
+    }
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      bottom: -10px;\n      transform: translateX(-50%);\n    "], ["\n      bottom: -10px;\n      transform: translateX(-50%);\n    "])));
+}, function (_a) {
+    var $position = _a.$position;
+    if ($position.includes('center')) {
+        return "left: 50%;";
+    }
+    if ($position.includes('end')) {
+        return "right: 12px;";
+    }
+    return "left: 19.5px;";
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+type ReactionType = 'heart' | 'like' | 'confetti';
+type ReactionValueOption = {
+    type: ReactionType;
+    count: number;
+};
+type ReactionArrayType = ReactionValueOption[];
+type Props = {
+    isMe: boolean;
+    downloadIBtnMode: 'use' | 'none';
+    reactionBtnMode: 'use' | 'none';
+    reactionBtnText: string;
+    reactionArray?: ReactionArrayType;
+    reactionBubblePosition: 'top' | 'bottom';
+    onClickReactionBtn?: (type: ReactionType) => void;
+};
+declare function ReactionRow({ isMe, downloadIBtnMode, reactionBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
+export default ReactionRow;

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

@@ -0,0 +1,126 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 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 _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);
+    /**
+     * @when : 컴포넌트 렌더링 시
+     * @expected : ReactionBubble의 외부를 클릭하면 ReactionBubble가 닫히도록 클릭 이벤트를 등록합니다.
+     * @clear document의 클릭 이벤트를 제거합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        function handleClickOutside(event) {
+            var _a, _b;
+            event.stopPropagation();
+            if (event.target instanceof Node &&
+                (((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) || ((_b = bubbleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))))
+                return;
+            if (isOpenReactionBubble) {
+                setIsOpenReactionBubble(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpenReactionBubble]);
+    var defaultReactions = [
+        { iconName: 'ic_lottie_heart', type: 'heart' },
+        { iconName: 'ic_lottie_thumb_up', type: 'like' },
+        { iconName: 'ic_lottie_confetti', type: 'confetti' }
+    ];
+    var handleClickReactionButton = function () {
+        isOpenReactionBubble ? setIsOpenReactionBubble(false) : setIsOpenReactionBubble(true);
+    };
+    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)); }) }) }))) }))] }));
+}
+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 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 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 theme = _a.theme, type = _a.type;
+    switch (type) {
+        case 'heart':
+            return theme.ui_cpnt_message_reaction_base_01;
+        case 'like':
+            return theme.ui_cpnt_message_reaction_base_02;
+        case 'confetti':
+            return theme.ui_cpnt_message_reaction_base_03;
+    }
+}, function (_a) {
+    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 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;

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

@@ -0,0 +1 @@
+export { default as ReactionRow } from './ReactionRow';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactionRow = void 0;
+var ReactionRow_1 = require("./ReactionRow");
+Object.defineProperty(exports, "ReactionRow", { enumerable: true, get: function () { return __importDefault(ReactionRow_1).default; } });

package/dist/src/mobile/components/ChatList/Body.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Props as ChatListProps } from './ChatList';
-declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodyMBtnText" | "bodySpacingMode" | "bodyChildren"> & {
+declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodySpacingMode" | "bodyMBtnText" | "bodyChildren"> & {
     isSubmitted: boolean;
     callBackAfterScrollToBottom: () => void;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -7,9 +7,11 @@ type TextObj = {
 };
 type MobileTabBarProps = {
     itemArray?: PDSTabItemOption[];
+    /** @description styleTheme이 'main'일 때만 colorTheme이 존재합니다. */
     colorTheme?: MobileTabBarColorThemeType;
+    styleTheme?: 'main' | 'content';
     /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
     textArray?: TextObj[];
 };
-declare function MobileTabBar({ itemArray, colorTheme, textArray }: MobileTabBarProps): JSX.Element;
+declare function MobileTabBar({ itemArray, colorTheme, styleTheme, textArray }: MobileTabBarProps): JSX.Element;
 export default MobileTabBar;

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

@@ -32,22 +32,30 @@ var mobileTabBarThemes = {
         activeTextColor: 'sysTextPrimary',
         inActiveTextColor: 'sysTextTertiary',
         activeIndicatorBorderColor: 'ui_cpnt_tabbar_border_active_indicator'
+    },
+    content: {
+        activeTextColor: 'sysTextPrimary',
+        inActiveTextColor: 'sysTextTertiary'
     }
 };
 function MobileTabBar(_a) {
-    var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, textArray = _a.textArray;
+    var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'main' : _c, textArray = _a.textArray;
     var history = (0, react_router_dom_1.useHistory)();
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
     if (itemArray) {
-        var hasScroll_1 = itemArray.length > 3;
+        var hasScroll_1 = styleTheme === 'content' ? true : itemArray.length > 3;
         var handleClickTabItem_1 = function (item, e) {
             if (item.onClick) {
                 item.onClick(e);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_1 }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_1, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", wordBreak: hasScroll_1 ? 'keep_all' : 'normal', colorTheme: item.isActive
-                                ? mobileTabBarThemes[colorTheme].activeTextColor
-                                : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }), item.isActive && (0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme })] }), index)); }) })) }));
+        return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", styleTheme: styleTheme, hasScroll: hasScroll_1 }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_1, styleTheme: styleTheme, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: styleTheme === 'main' ? 'body2Bold' : 'caption1Bold', wordBreak: hasScroll_1 ? 'keep_all' : 'normal', colorTheme: styleTheme === 'content'
+                                ? item.isActive
+                                    ? mobileTabBarThemes.content.activeTextColor
+                                    : mobileTabBarThemes.content.inActiveTextColor
+                                : item.isActive
+                                    ? mobileTabBarThemes[colorTheme].activeTextColor
+                                    : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }), item.isActive && styleTheme !== 'content' && (0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme })] }), index)); }) })) })));
     }
     if (textArray) {
         var hasScroll_2 = textArray.length > 3;
@@ -56,7 +64,7 @@ function MobileTabBar(_a) {
                 history.push(value.path);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_2 }, { children: textArray.map(function (value) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_2, colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", wordBreak: hasScroll_2 ? 'keep_all' : 'normal', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }), pathname === value.path && (0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme })] }), value.path)); }) })) }));
+        return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_2, styleTheme: styleTheme }, { children: textArray.map(function (value) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_2, styleTheme: styleTheme, colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", wordBreak: hasScroll_2 ? 'keep_all' : 'normal', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }), pathname === value.path && styleTheme !== 'content' && ((0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme }))] }), value.path)); }) })) })));
     }
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
 }
@@ -68,25 +76,40 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
     var isActive = _a.isActive, theme = _a.theme;
     return isActive && theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
-    var theme = _a.theme;
-    return "1px solid ".concat(theme.ui_cpnt_divider);
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme === 'main' && "1px solid ".concat(theme.ui_cpnt_divider);
 }, function (_a) {
     var hasScroll = _a.hasScroll;
     return (hasScroll ? 'inline-flex' : 'flex');
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return (styleTheme === 'main' ? theme.spacing.spacingD : "10px");
 }, function (_a) {
     var hasScroll = _a.hasScroll;
-    return hasScroll && 'nowrap';
+    return (hasScroll ? 'nowrap' : 'normal');
 });
-var S_TabBarContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  overflow-x: auto;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  background-color: ", ";\n  overflow-x: auto;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
+var S_TabBarContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: ", ";\n  overflow-x: auto;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  background-color: ", ";\n  border-bottom: ", ";\n  overflow-x: auto;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme === 'content' && "1px solid ".concat(theme.ui_cpnt_divider);
 });
-var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: ", ";\n  height: 48px;\n  width: 100%;\n"], ["\n  box-sizing: border-box;\n  display: ", ";\n  height: 48px;\n  width: 100%;\n"])), function (_a) {
+var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: ", ";\n  height: ", ";\n  width: ", ";\n\n  & > :first-child {\n    padding-left: ", ";\n  }\n\n  & > :last-child {\n    padding-right: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: ", ";\n  height: ", ";\n  width: ", ";\n\n  & > :first-child {\n    padding-left: ", ";\n  }\n\n  & > :last-child {\n    padding-right: ", ";\n  }\n"])), function (_a) {
     var hasScroll = _a.hasScroll;
     return (hasScroll ? 'inline-flex' : 'flex');
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return (styleTheme === 'main' ? '48px' : '46px');
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return (styleTheme === 'main' ? '100%' : undefined);
+}, function (_a) {
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return styleTheme === 'content' && theme.spacing.spacingE;
+}, function (_a) {
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return styleTheme === 'content' && theme.spacing.spacingE;
 });
 exports.default = MobileTabBar;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { Path } from 'react-hook-form';
+import { CurrencyCode } from '../../../core/pricing';
+import type { IFormValues, PDSTextType } from '../../../common';
+import type { TextFieldBaseProps } from '../../common/components/TextFieldBase/TextFieldBase';
+export declare const DEFAULT_DECIMAL_PLACES: {
+    readonly KRW: 0;
+    readonly USD: 2;
+};
+type Props = {
+    name: Path<IFormValues>;
+    hintText?: PDSTextType;
+    defaultAmount?: number;
+    size?: 'large' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
+    state?: 'normal' | 'read_only' | 'disabled';
+    dropdownState?: 'normal' | 'read_only';
+    customWidth?: string;
+    baseCurrency?: CurrencyCode;
+    currencies?: CurrencyCode[];
+    decimalPlaces?: Record<string, number>;
+    exchangeRates?: {
+        [key: string]: number;
+    };
+    hintTextFontWeight?: 'normal' | 'bold';
+    validation?: any;
+    useRequiredValidation?: 'none' | 'use';
+    useDotBadge?: 'none' | 'use';
+    deleteBtnMode?: 'none' | 'use';
+    minPriceAmount?: string | number;
+    onChange?: (value: string) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
+    onCurrencyChange?: (selectedCurrency: string) => void;
+    onValueChange?: (data: {
+        selectedCurrency: string;
+        baseCurrencyValue: number;
+        calculatedValue: number;
+        displayValue: string;
+    }) => void;
+} & Omit<Partial<TextFieldBaseProps>, 'textAlign' | 'preventBlankMode' | 'enterSubmitMode' | 'multiRows' | 'colorTheme'>;
+declare function PriceTextField({ name, hintText, defaultAmount, colorTheme, size, fontWeight, hintTextFontWeight, responsiveMode, state, dropdownState, customWidth, baseCurrency, currencies, decimalPlaces, exchangeRates, textAlign, validation, useRequiredValidation, useDotBadge, deleteBtnMode, minPriceAmount, onChange, onBlur, onFocus, onTarget, onCurrencyChange, onValueChange }: Props): JSX.Element;
+export default PriceTextField;