pds-dev-kit-web 1.6.5 → 1.6.7

package/dist/src/common/assets/lotties/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Confetti_json_1 = __importDefault(require("./Confetti.json"));
+var Fire_json_1 = __importDefault(require("./Fire.json"));
+var Heart_json_1 = __importDefault(require("./Heart.json"));
+var Sad_json_1 = __importDefault(require("./Sad.json"));
+var ThumbUp_json_1 = __importDefault(require("./ThumbUp.json"));
+var lottieIcons = {
+    ic_lottie_confetti: Confetti_json_1.default,
+    ic_lottie_sad: Sad_json_1.default,
+    ic_lottie_fire: Fire_json_1.default,
+    ic_lottie_heart: Heart_json_1.default,
+    ic_lottie_thumb_up: ThumbUp_json_1.default
+};
+exports.default = lottieIcons;

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -206,5 +206,7 @@
     "sys_container_background_04": "white/opacity00",
     "sys_menu_button_base": "white",
     "sys_background_dimmed_03": "black/opacity30",
-    "sys_cpnt_sheet_base_03": "black/opacity80"
+    "sys_cpnt_sheet_base_03": "black/opacity80",
+    "sys_dimmed_gradient_01": "black",
+    "sys_dimmed_gradient_02": "black/opacity00"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -206,5 +206,7 @@
     "sys_container_background_04": "white/opacity00",
     "sys_menu_button_base": "white",
     "sys_background_dimmed_03": "black/opacity30",
-    "sys_cpnt_sheet_base_03": "white"
+    "sys_cpnt_sheet_base_03": "white",
+    "sys_dimmed_gradient_01": "black",
+    "sys_dimmed_gradient_02": "black/opacity00"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -600,5 +600,7 @@
     "ui_cpnt_sheet_base_05": "sys_cpnt_sheet_base_03",
     "ui_62": "sys_widget_black",
     "ui_cpnt_calendar_date_hover": "sys_widget_grey_05",
-    "ui_cpnt_calendar_date_pressed": "sys_widget_grey_04"
+    "ui_cpnt_calendar_date_pressed": "sys_widget_grey_04",
+    "ui_cpnt_imageview_dimmed_gradient_01": "sys_dimmed_gradient_01",
+    "ui_cpnt_imageview_dimmed_gradient_02": "sys_dimmed_gradient_02"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -280,6 +280,8 @@ declare const colorSet: {
         sys_menu_button_base: string;
         sys_background_dimmed_03: string;
         sys_cpnt_sheet_base_03: string;
+        sys_dimmed_gradient_01: string;
+        sys_dimmed_gradient_02: string;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
@@ -490,6 +492,8 @@ declare const colorSet: {
         sys_menu_button_base: string;
         sys_background_dimmed_03: string;
         sys_cpnt_sheet_base_03: string;
+        sys_dimmed_gradient_01: string;
+        sys_dimmed_gradient_02: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1094,6 +1098,8 @@ declare const colorSet: {
         ui_62: string;
         ui_cpnt_calendar_date_hover: string;
         ui_cpnt_calendar_date_pressed: string;
+        ui_cpnt_imageview_dimmed_gradient_01: string;
+        ui_cpnt_imageview_dimmed_gradient_02: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -601,4 +601,6 @@ export interface UITheme {
     ui_62: string;
     ui_cpnt_calendar_date_hover: string;
     ui_cpnt_calendar_date_pressed: string;
+    ui_cpnt_imageview_dimmed_gradient_01: string;
+    ui_cpnt_imageview_dimmed_gradient_02: string;
 }

package/dist/src/common/utils/numberHelper.d.ts

@@ -0,0 +1,2 @@
+export declare function formatCompactNumber(num: number): string;
+export declare function formatStandardNumber(num: number): string;

package/dist/src/common/utils/numberHelper.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatStandardNumber = exports.formatCompactNumber = void 0;
+function formatCompactNumber(num) {
+    return new Intl.NumberFormat('en', { notation: 'compact' }).format(num);
+}
+exports.formatCompactNumber = formatCompactNumber;
+function formatStandardNumber(num) {
+    return new Intl.NumberFormat('en', { notation: 'standard' }).format(num);
+}
+exports.formatStandardNumber = formatStandardNumber;

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

@@ -80,8 +80,9 @@ function Chip(_a) {
                         react_1.default.createElement(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
             default:
                 return (react_1.default.createElement(S_FilterSingleChip, { isActive: isActive, onClick: handleClickChip },
-                    filterIconMode === 'left' && (react_1.default.createElement(S_FilterIconWrapper, null,
-                        react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }))),
+                    filterIconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }),
+                        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
         }
     };
@@ -140,23 +141,19 @@ var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (te
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_FilterIconWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-});
-var S_LabelChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
+var S_LabelChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_line_border_01;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
+var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_base_playtime;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: bottom;\n  min-width: fit-content;\n"], ["\n  display: inline-block;\n  vertical-align: bottom;\n  min-width: fit-content;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var S_ChipWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: bottom;\n  min-width: fit-content;\n"], ["\n  display: inline-block;\n  vertical-align: bottom;\n  min-width: fit-content;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -0,0 +1,18 @@
+import React, { AnimationEventHandler } from 'react';
+import { PDSTextType, UiColors } from '../../../common';
+import { LottieIconNameKeys } from '../../../common/assets/lotties';
+export declare type LottieReactionButtonProps = {
+    text?: PDSTextType;
+    actionText?: PDSTextType;
+    iconName?: LottieIconNameKeys;
+    displayType?: 'icon_only' | 'icon_text';
+    backgroundColorTheme?: 'base1' | 'base2' | 'base3' | 'base4' | 'base5';
+    overrideBackgroundColorKey?: UiColors;
+    state?: 'normal' | 'view_only' | 'disabled';
+    type?: 'button' | 'submit';
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onComplete?: AnimationEventHandler | null;
+};
+declare function LottieReactionButton({ text, actionText, iconName, displayType, backgroundColorTheme, overrideBackgroundColorKey, type, state, onMouseDown, onClick, onComplete }: LottieReactionButtonProps): JSX.Element;
+export default LottieReactionButton;

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

@@ -0,0 +1,154 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var numberHelper_1 = require("../../../common/utils/numberHelper");
+var hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+function LottieReactionButton(_a) {
+    var text = _a.text, actionText = _a.actionText, _b = _a.iconName, iconName = _b === void 0 ? 'ic_lottie_heart' : _b, _c = _a.displayType, displayType = _c === void 0 ? 'icon_text' : _c, _d = _a.backgroundColorTheme, backgroundColorTheme = _d === void 0 ? 'base1' : _d, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _e = _a.type, type = _e === void 0 ? 'button' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, onMouseDown = _a.onMouseDown, onClick = _a.onClick, onComplete = _a.onComplete;
+    var lottieRef = (0, react_1.useRef)(null);
+    var convertFormatHelper = function (value) {
+        if (typeof value !== 'number')
+            return value;
+        return (0, numberHelper_1.formatCompactNumber)(value);
+    };
+    var convertFormatText = convertFormatHelper(text);
+    var _g = (0, react_1.useState)(false), isAnimation = _g[0], setIsAnimation = _g[1];
+    var _h = (0, react_1.useState)(convertFormatText), textWord = _h[0], setTextWord = _h[1];
+    var handleTouchStart = function () {
+        setIsAnimation(false);
+    };
+    var handleTouchEnd = function (e) {
+        var _a, _b;
+        setIsAnimation(true);
+        (_a = lottieRef.current) === null || _a === void 0 ? void 0 : _a.playSegments([[0, 30]], true);
+        setTextWord((_b = actionText !== null && actionText !== void 0 ? actionText : convertFormatText) !== null && _b !== void 0 ? _b : '');
+        e.preventDefault();
+    };
+    var handleMouseDown = function (e) {
+        setIsAnimation(false);
+        if (onMouseDown) {
+            onMouseDown(e);
+        }
+    };
+    var handleClick = function (e) {
+        var _a, _b;
+        setIsAnimation(true);
+        (_a = lottieRef.current) === null || _a === void 0 ? void 0 : _a.playSegments([[0, 30]], true);
+        setTextWord((_b = actionText !== null && actionText !== void 0 ? actionText : convertFormatText) !== null && _b !== void 0 ? _b : '');
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    var handleLottieIconComplete = function (e) {
+        setTextWord(convertFormatText);
+        if (onComplete) {
+            onComplete(e);
+        }
+    };
+    return (react_1.default.createElement(S_Button, { displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation },
+        react_1.default.createElement(hybrid_1.LottieIcon, { iconName: iconName, lottieRef: lottieRef, autoplayMode: "none", loopMode: "none", onComplete: handleLottieIconComplete }),
+        displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: textWord, singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })))));
+}
+var disabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  cursor: default;\n"], ["\n  background-color: ", ";\n  cursor: default;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_disabled;
+});
+var normal = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n"], ["\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "background-image: linear-gradient(\n      to top,\n      " + theme.ui_cpnt_button_fill_on_base_hover + ",\n      " + theme.ui_cpnt_button_fill_on_base_hover + "\n      );";
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n    );";
+});
+var view_only = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
+var buttonAnimation = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  @keyframes gelatine {\n    from,\n    to {\n      transform: scale(1, 1);\n    }\n    25% {\n      transform: scale(0.95, 1.1);\n    }\n    50% {\n      transform: scale(1.05, 0.9);\n    }\n    75% {\n      transform: scale(0.97, 1.05);\n    }\n  }\n\n  animation: gelatine 1s 1;\n"], ["\n  @keyframes gelatine {\n    from,\n    to {\n      transform: scale(1, 1);\n    }\n    25% {\n      transform: scale(0.95, 1.1);\n    }\n    50% {\n      transform: scale(1.05, 0.9);\n    }\n    75% {\n      transform: scale(0.97, 1.05);\n    }\n  }\n\n  animation: gelatine 1s 1;\n"])));
+var icon_only = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n  min-height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  height: 32px;\n  width: 32px;\n  min-height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
+var icon_text = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 32px;\n  min-height: 32px;\n  min-width: 64px;\n  border-radius: 16px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  height: 32px;\n  min-height: 32px;\n  min-width: 64px;\n  border-radius: 16px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var base1 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_lottiereactionbutton_base_01;
+});
+var base2 = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_lottiereactionbutton_base_02;
+});
+var base3 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_lottiereactionbutton_base_03;
+});
+var base4 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_lottiereactionbutton_base_04;
+});
+var base5 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_lottiereactionbutton_base_05;
+});
+var overrideStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
+    return overrideBackgroundColorKey && theme[overrideBackgroundColorKey];
+});
+var S_Button = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+    var backgroundColorTheme = _a.backgroundColorTheme;
+    return backgroundColorTheme &&
+        {
+            base1: base1,
+            base2: base2,
+            base3: base3,
+            base4: base4,
+            base5: base5
+        }[backgroundColorTheme];
+}, function (_a) {
+    var isAnimation = _a.isAnimation;
+    return isAnimation && buttonAnimation;
+}, function (_a) {
+    var displayType = _a.displayType;
+    return displayType &&
+        {
+            icon_only: icon_only,
+            icon_text: icon_text
+        }[displayType];
+}, function (_a) {
+    var overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
+    return overrideBackgroundColorKey && overrideStyle;
+}, function (_a) {
+    var state = _a.state;
+    return state &&
+        {
+            normal: normal,
+            disabled: disabled,
+            view_only: view_only
+        }[state];
+});
+exports.default = LottieReactionButton;
+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;

package/dist/src/desktop/components/LottieReactionButton/index.d.ts

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

package/dist/src/desktop/components/LottieReactionButton/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.LottieReactionButton = void 0;
+var LottieReactionButton_1 = require("./LottieReactionButton");
+Object.defineProperty(exports, "LottieReactionButton", { enumerable: true, get: function () { return __importDefault(LottieReactionButton_1).default; } });

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import { PDSTextType } from '../../../common';
 export declare type ReactionButtonProps = {
-    text: PDSTextType;
+    text?: PDSTextType;
     iconName?: 'ic_thumb_up' | 'ic_heart' | 'ic_thumb_down' | 'ic_reply';
     status?: 'default' | 'select';
     colorTheme?: 'none' | 'dark';
+    displayType?: 'icon_only' | 'icon_text';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function ReactionButton({ text, iconName, status, colorTheme, onClick, onMouseDown }: ReactionButtonProps): JSX.Element;
+declare function ReactionButton({ text, iconName, status, colorTheme, displayType, onClick, onMouseDown }: ReactionButtonProps): JSX.Element;
 export default ReactionButton;

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

@@ -28,10 +28,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var numberHelper_1 = require("../../../common/utils/numberHelper");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function ReactionButton(_a) {
-    var text = _a.text, _b = _a.iconName, iconName = _b === void 0 ? 'ic_thumb_up' : _b, _c = _a.status, status = _c === void 0 ? 'default' : _c, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var text = _a.text, _b = _a.iconName, iconName = _b === void 0 ? 'ic_thumb_up' : _b, _c = _a.status, status = _c === void 0 ? 'default' : _c, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, _e = _a.displayType, displayType = _e === void 0 ? 'icon_text' : _e, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
@@ -79,28 +80,17 @@ function ReactionButton(_a) {
         }
         return;
     };
-    // TODO : 추 후 유틸로 편성 예정
-    var convertFormatHelper = function (value) {
+    var convertTextFormatHelper = function (value) {
         if (typeof value !== 'number')
             return value;
-        switch (true) {
-            case value >= 1000 && value < 1000000:
-                return Math.floor(value / 1000)
-                    .toString()
-                    .replace(/\.0$/, '') + "K";
-            case value >= 1000000:
-                return Math.floor(value / 1000000)
-                    .toString()
-                    .replace(/\.0$/, '') + "M";
-            default:
-                return value;
-        }
+        return (0, numberHelper_1.formatCompactNumber)(value);
     };
     return (react_1.default.createElement(S_ReactionButton, { onClick: handleClick, onMouseDown: handleMouseDown },
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
         react_1.default.createElement(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }),
-        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }),
+        displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }))),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })));
 }
 var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  height: 32px;\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  height: 32px;\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {

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

@@ -27,6 +27,7 @@ import { Hero } from './Hero';
 import { HorizontalFormGroup } from './HorizontalFormGroup';
 import { IconButton } from './IconButton';
 import { ImageSlide } from './ImageSlide';
+import { LottieReactionButton } from './LottieReactionButton';
 import { MainButton } from './MainButton';
 import { PageTitleTextGroup } from './PageTitleTextGroup';
 import { Radio } from './Radio';
@@ -42,4 +43,4 @@ import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
 import { UserDesktopSideTab } from './UserDesktopSideTab';
 import { UserDesktopTabBar } from './UserDesktopTabBar';
-export { AdminList, AdminListHeader, AdminListItem, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };
+export { AdminList, AdminListHeader, AdminListItem, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
+exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
 var AdminList_1 = require("./AdminList");
 Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
 var AdminListHeader_1 = require("./AdminListHeader");
@@ -60,6 +60,8 @@ var IconButton_1 = require("./IconButton");
 Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return IconButton_1.IconButton; } });
 var ImageSlide_1 = require("./ImageSlide");
 Object.defineProperty(exports, "ImageSlide", { enumerable: true, get: function () { return ImageSlide_1.ImageSlide; } });
+var LottieReactionButton_1 = require("./LottieReactionButton");
+Object.defineProperty(exports, "LottieReactionButton", { enumerable: true, get: function () { return LottieReactionButton_1.LottieReactionButton; } });
 var MainButton_1 = require("./MainButton");
 Object.defineProperty(exports, "MainButton", { enumerable: true, get: function () { return MainButton_1.MainButton; } });
 var PageTitleTextGroup_1 = require("./PageTitleTextGroup");

package/dist/src/desktop/index.d.ts

@@ -9,7 +9,7 @@ import { LayoutWT } from './layout/LayoutWT';
 import { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
 import { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
-export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
+import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
+export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
 import { AnnotationSheet as D_AnnotationSheet, ContentSheet as D_ContentSheet, DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal, SectionSheet as D_SectionSheet } from './panels';
 export { D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_SectionSheet };

package/dist/src/desktop/index.js

@@ -2,8 +2,8 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
-exports.D_SectionSheet = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = void 0;
+exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
+exports.D_SectionSheet = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -55,6 +55,7 @@ Object.defineProperty(exports, "D_Hero", { enumerable: true, get: function () {
 Object.defineProperty(exports, "D_HorizontalFormGroup", { enumerable: true, get: function () { return components_1.HorizontalFormGroup; } });
 Object.defineProperty(exports, "D_IconButton", { enumerable: true, get: function () { return components_1.IconButton; } });
 Object.defineProperty(exports, "D_ImageSlide", { enumerable: true, get: function () { return components_1.ImageSlide; } });
+Object.defineProperty(exports, "D_LottieReactionButton", { enumerable: true, get: function () { return components_1.LottieReactionButton; } });
 Object.defineProperty(exports, "D_MainButton", { enumerable: true, get: function () { return components_1.MainButton; } });
 Object.defineProperty(exports, "D_PageTitleTextGroup", { enumerable: true, get: function () { return components_1.PageTitleTextGroup; } });
 Object.defineProperty(exports, "D_Radio", { enumerable: true, get: function () { return components_1.Radio; } });

package/dist/src/hybrid/components/LottieIcon/LottieIcon.d.ts

@@ -0,0 +1,13 @@
+import { LottieRef } from 'lottie-react';
+import { AnimationEventHandler } from 'react';
+import { LottieIconNameKeys } from '../../../common/assets/lotties';
+export declare type LottieIconProps = {
+    iconName?: LottieIconNameKeys;
+    size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;
+    autoplayMode?: 'none' | 'use';
+    loopMode?: 'none' | 'use';
+    lottieRef?: LottieRef;
+    onComplete?: AnimationEventHandler | null;
+} & Record<string, any>;
+declare const LottieIcon: ({ iconName, size, autoplayMode, loopMode, lottieRef, onComplete }: LottieIconProps) => JSX.Element;
+export default LottieIcon;

package/dist/src/hybrid/components/LottieIcon/LottieIcon.js

@@ -0,0 +1,34 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var lottie_react_1 = __importDefault(require("lottie-react"));
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var lotties_1 = __importDefault(require("../../../common/assets/lotties"));
+var LottieIcon = function (_a) {
+    var _b = _a.iconName, iconName = _b === void 0 ? 'ic_lottie_heart' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.autoplayMode, autoplayMode = _d === void 0 ? 'use' : _d, _e = _a.loopMode, loopMode = _e === void 0 ? 'use' : _e, lottieRef = _a.lottieRef, onComplete = _a.onComplete;
+    var animationData = lotties_1.default[iconName];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_Lottie, { animationData: animationData, lottieRef: lottieRef, autoplay: autoplayMode === 'use' ? true : false, loop: loopMode === 'use' ? true : false, "$size": size, onComplete: onComplete })));
+};
+var S_Lottie = (0, styled_components_1.default)(lottie_react_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  min-height: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  min-height: ", ";\n"])), function (_a) {
+    var $size = _a.$size;
+    return $size + "px";
+}, function (_a) {
+    var $size = _a.$size;
+    return $size + "px";
+}, function (_a) {
+    var $size = _a.$size;
+    return $size + "px";
+}, function (_a) {
+    var $size = _a.$size;
+    return $size + "px";
+});
+exports.default = LottieIcon;
+var templateObject_1;

package/dist/src/hybrid/components/LottieIcon/index.d.ts

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

package/dist/src/hybrid/components/LottieIcon/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.LottieIcon = void 0;
+var LottieIcon_1 = require("./LottieIcon");
+Object.defineProperty(exports, "LottieIcon", { enumerable: true, get: function () { return __importDefault(LottieIcon_1).default; } });

package/dist/src/hybrid/components/index.d.ts

@@ -2,6 +2,7 @@ import { Divider } from './Divider';
 import { Icon } from './Icon';
 import { ImageView } from './ImageView';
 import { LinearProgress } from './LinearProgress';
+import { LottieIcon } from './LottieIcon';
 import { Spacing } from './Spacing';
 import { Switch } from './Switch';
-export { Divider, Icon, ImageView, LinearProgress, Spacing, Switch };
+export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch };

package/dist/src/hybrid/components/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = exports.Spacing = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
+exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
 var Divider_1 = require("./Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
 var Icon_1 = require("./Icon");
@@ -9,6 +9,8 @@ var ImageView_1 = require("./ImageView");
 Object.defineProperty(exports, "ImageView", { enumerable: true, get: function () { return ImageView_1.ImageView; } });
 var LinearProgress_1 = require("./LinearProgress");
 Object.defineProperty(exports, "LinearProgress", { enumerable: true, get: function () { return LinearProgress_1.LinearProgress; } });
+var LottieIcon_1 = require("./LottieIcon");
+Object.defineProperty(exports, "LottieIcon", { enumerable: true, get: function () { return LottieIcon_1.LottieIcon; } });
 var Spacing_1 = require("./Spacing");
 Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return Spacing_1.Spacing; } });
 var Switch_1 = require("./Switch");

package/dist/src/hybrid/index.d.ts

@@ -1,2 +1,2 @@
-import { Divider, Icon, ImageView, LinearProgress, Spacing, Switch } from './components';
-export { Divider, Icon, ImageView, LinearProgress, Spacing, Switch };
+import { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch } from './components';
+export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch };

package/dist/src/hybrid/index.js

@@ -2,12 +2,13 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = exports.Spacing = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
+exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
 // component
 var components_1 = require("./components");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return components_1.Divider; } });
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return components_1.Icon; } });
 Object.defineProperty(exports, "ImageView", { enumerable: true, get: function () { return components_1.ImageView; } });
 Object.defineProperty(exports, "LinearProgress", { enumerable: true, get: function () { return components_1.LinearProgress; } });
+Object.defineProperty(exports, "LottieIcon", { enumerable: true, get: function () { return components_1.LottieIcon; } });
 Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return components_1.Spacing; } });
 Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return components_1.Switch; } });