pds-dev-kit-web-test 0.0.11 → 0.0.13

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

@@ -30,7 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 function Divider(_a) {
     var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
-    return (react_1.default.createElement(S_Divider, { displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
+    return (react_1.default.createElement(S_Divider, { "x-pds-name": "Divider", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
 }
 var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  background-color: ", ";\n  width: 100%;\n"], ["\n  height: ", ";\n  background-color: ", ";\n  width: 100%;\n"])), function (_a) {
     var displayType = _a.displayType;
@@ -54,15 +54,28 @@ var vertical = (0, styled_components_1.css)(templateObject_2 || (templateObject_
     var $height = _a.$height;
     return ($height ? $height + "px" : '100%');
 });
-var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
+var divider1Color = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider_white_opacity30;
+});
+var divider2Color = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider_white_opacity00;
+});
+var S_Divider = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var $direction = _a.$direction;
     return $direction === 'horizontal' && horizontal;
 }, function (_a) {
     var $direction = _a.$direction, displayType = _a.displayType;
     return $direction === 'vertical' && displayType === 'line' && vertical;
 }, function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    return colorTheme === 'divider1' && "background-color: " + theme.ui_cpnt_divider_white_opacity30 + ";";
+    var colorTheme = _a.colorTheme;
+    return colorTheme &&
+        {
+            divider1: divider1Color,
+            divider2: divider2Color,
+            none: ''
+        }[colorTheme];
 });
 exports.default = Divider;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -10,9 +10,10 @@ var line_1 = __importDefault(require("../../../common/assets/icons/line"));
 var Icon = function (_a) {
     var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e;
     var theme = (0, styled_components_1.useTheme)();
+    var DefaultIcon = line_1.default.ic_unavailable;
     var SelectedIcon = fillType === 'line'
         ? line_1.default[iconName] || fill_1.default[iconName]
         : fill_1.default[iconName] || line_1.default[iconName];
-    return (react_1.default.createElement(SelectedIcon, { color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } }));
+    return SelectedIcon ? (react_1.default.createElement(SelectedIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } })) : (react_1.default.createElement(DefaultIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } }));
 };
 exports.default = Icon;

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

@@ -7,10 +7,11 @@ export declare type ImageViewProps = {
     height?: number | 'responsive';
     noImageHeight?: number;
     noImageWidth?: number;
-    ratio?: '16_9' | '9_16' | '16_10' | '10_16' | '4_3' | '3_4' | '1_1' | 'auto';
+    ratio?: '16_9' | '9_16' | '16_10' | '10_16' | '4_3' | '3_4' | '3_2' | '2_3' | '1_1' | 'auto';
     scaleType?: 'fill' | 'contain' | 'cover' | 'none';
     borderMode?: 'use' | 'none';
     backgroundFillMode?: 'use' | 'none';
+    isLoading?: boolean;
 };
-declare const ImageView: ({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode }: ImageViewProps) => JSX.Element;
+declare const ImageView: ({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: ImageViewProps) => JSX.Element;
 export default ImageView;

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

@@ -28,10 +28,39 @@ 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 styles_1 = require("../../../common/styles");
 var ImageView = function (_a) {
-    var src = _a.src, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g;
-    return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, src && (react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode },
-        react_1.default.createElement(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio })))));
+    var src = _a.src, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g, isLoading = _a.isLoading;
+    var LoadingAutoImageView = function () {
+        if (width && !height && !noImageHeight) {
+            return (react_1.default.createElement(S_LoadingRatioImageViewWrapper, { "$width": width, shapeType: shapeType, "$radius": radius },
+                react_1.default.createElement(S_LoadingRatioImageView, { ratio: "4_3" })));
+        }
+        if (height && height !== 'responsive' && !width && !noImageWidth) {
+            return (react_1.default.createElement(S_LoadingRatioImageViewWrapper, { "$width": (height * 4) / 3, shapeType: shapeType, "$radius": radius },
+                react_1.default.createElement(S_LoadingRatioImageView, { ratio: "4_3" })));
+        }
+        if (height === 'responsive' && !width && !noImageWidth) {
+            return (react_1.default.createElement(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": 300, shapeType: shapeType, "$radius": radius }));
+        }
+        return (react_1.default.createElement(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, shapeType: shapeType, "$radius": radius }));
+    };
+    var LoadingRatioImageView = (react_1.default.createElement(S_LoadingRatioImageViewWrapper, { "$width": width, shapeType: shapeType, "$radius": radius },
+        react_1.default.createElement(S_LoadingRatioImageView, { ratio: ratio })));
+    var LoadingImageView = function () {
+        if (ratio === 'auto') {
+            return LoadingAutoImageView();
+        }
+        return LoadingRatioImageView;
+    };
+    var ImageViewVariation = function () {
+        if (isLoading) {
+            return LoadingImageView();
+        }
+        return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, src && (react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode },
+            react_1.default.createElement(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio })))));
+    };
+    return ImageViewVariation();
 };
 var wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, backgroundFillMode = _a.backgroundFillMode;
@@ -78,6 +107,8 @@ var S_RatioImageView = styled_components_1.default.div(templateObject_3 || (temp
             '10_16': 'padding-top: 159.74%',
             '4_3': 'padding-top: 75%',
             '3_4': 'padding-top: 133.33%',
+            '3_2': 'padding-top: 66.66%',
+            '2_3': 'padding-top: 150%',
             '1_1': 'padding-top: 100%'
         }[ratio];
 });
@@ -155,5 +186,8 @@ var S_AutoImageView = styled_components_1.default.img(templateObject_11 || (temp
     var $width = _a.$width, $height = _a.$height;
     return $width && $height && bothStyle;
 });
+var S_LoadingAutoImageViewWrapper = (0, styled_components_1.default)(S_AutoImageViewWrapper)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_LoadingRatioImageViewWrapper = (0, styled_components_1.default)(S_RatioImageViewWrapper)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_LoadingRatioImageView = (0, styled_components_1.default)(S_RatioImageView)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
 exports.default = ImageView;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+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/hybrid/components/LinearProgress/LinearProgress.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type LinearProgressProps = {
+    value?: number;
+};
+declare function LinearProgress({ value }: LinearProgressProps): JSX.Element;
+export default LinearProgress;

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

@@ -0,0 +1,29 @@
+"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 react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function LinearProgress(_a) {
+    var _b = _a.value, value = _b === void 0 ? 0 : _b;
+    return (react_1.default.createElement(S_LinearProgressWrapper, { "x-pds-name": "LinearProgress", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", value: value },
+        react_1.default.createElement(S_LinearProgressBar, { value: value })));
+}
+var S_LinearProgressWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  position: relative;\n  overflow: hidden;\n  height: 4px;\n"], ["\n  background-color: ", ";\n  position: relative;\n  overflow: hidden;\n  height: 4px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_loading_linear_base;
+});
+var S_LinearProgressBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  position: absolute;\n  width: ", "%;\n  height: 100%;\n  transition: width 0.2s ease 0s;\n"], ["\n  background-color: ", ";\n  position: absolute;\n  width: ", "%;\n  height: 100%;\n  transition: width 0.2s ease 0s;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_loading_linear_bar;
+}, function (_a) {
+    var value = _a.value;
+    return value;
+});
+exports.default = LinearProgress;
+var templateObject_1, templateObject_2;

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

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

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

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, { "x-pds-name": "LottieIcon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", 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/Spacing/Spacing.js

@@ -30,7 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 function Spacing(_a) {
     var size = _a.size, _b = _a.spacingType, spacingType = _b === void 0 ? 'height' : _b;
-    return react_1.default.createElement(S_Spacing, { size: size, spacingType: spacingType });
+    return (react_1.default.createElement(S_Spacing, { "x-pds-name": "Spacing", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", size: size, spacingType: spacingType }));
 }
 var spacing_a = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -14,7 +14,7 @@ function Switch(_a) {
     var handleChange = function (e) {
         onClick && onClick(e.target.checked);
     };
-    return (react_1.default.createElement(S_Switch, null,
+    return (react_1.default.createElement(S_Switch, { "x-pds-name": "Switch", "x-pds-element-type": "component", "x-pds-device-type": "hybrid" },
         react_1.default.createElement(S_Input, { type: "checkbox", hidden: true, id: name, checked: status === 'on', disabled: state === 'disabled', onChange: handleChange }),
         react_1.default.createElement(S_Label, { htmlFor: name, disabled: state === 'disabled' })));
 }

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

@@ -1,6 +1,8 @@
 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, Spacing, Switch };
+export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch };

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

@@ -1,12 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = exports.Spacing = 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");
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });
 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, Spacing, Switch } from './components';
-export { Divider, Icon, ImageView, 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,11 +2,13 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = exports.Spacing = 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; } });

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -16,7 +16,7 @@ export declare type TextFieldBaseProps = {
     autoMaxRows?: number;
     inputType?: string;
     state?: 'normal' | 'read_only' | 'disabled';
-    colorTheme?: 'none' | 'dark';
+    colorTheme?: 'none' | 'dark' | 'transparent';
     min?: number;
     max?: number;
     maxLength?: number;

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js

@@ -194,7 +194,8 @@ var read_only = (0, styled_components_1.css)(templateObject_2 || (templateObject
     return colorTheme &&
         {
             none: theme.ui_cpnt_textfield_text_disabled,
-            dark: theme.ui_cpnt_textfield_text_darktheme_disabled
+            dark: theme.ui_cpnt_textfield_text_darktheme_disabled,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_readonly
         }[colorTheme];
 });
 var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  pointer-events: none;\n"], ["\n  color: ", ";\n  pointer-events: none;\n"])), function (_a) {
@@ -202,7 +203,8 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
     return colorTheme &&
         {
             none: theme.ui_cpnt_textfield_text_disabled,
-            dark: theme.ui_cpnt_textfield_text_darktheme_disabled
+            dark: theme.ui_cpnt_textfield_text_darktheme_disabled,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_disabled
         }[colorTheme];
 });
 var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
@@ -210,7 +212,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
     return colorTheme &&
         {
             none: theme.ui_cpnt_textfield_text_typed,
-            dark: theme.ui_cpnt_textfield_text_darktheme_enabled
+            dark: theme.ui_cpnt_textfield_text_darktheme_enabled,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_enabled
         }[colorTheme];
 }, function (_a) {
     var textSize = _a.textSize;
@@ -226,7 +229,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
     return colorTheme &&
         {
             none: theme.ui_cpnt_textfield_text_hint,
-            dark: theme.ui_cpnt_textfield_text_darktheme_hint
+            dark: theme.ui_cpnt_textfield_text_darktheme_hint,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_hint
         }[colorTheme];
 }, function (_a) {
     var textSize = _a.textSize;

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

@@ -8,7 +8,7 @@ declare type Props = {
     hoverMode?: 'none' | 'use';
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
-    colorTheme?: 'seller' | 'subscriber';
+    colorTheme?: 'seller' | 'subscriber' | 'seller_transparent' | 'subscriber_transparent';
     onClickContextMenuItem?: (option: PDSValueOption) => void;
 };
 declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;

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

@@ -36,18 +36,22 @@ var TextLabel_1 = require("../TextLabel");
 var Popup_1 = require("./Popup");
 var titleTextColors = {
     seller: 'usrTextBrandPrimary',
-    subscriber: 'sysTextSecondary'
+    subscriber: 'sysTextSecondary',
+    seller_transparent: 'usrTextBrandPrimary',
+    subscriber_transparent: 'sysTextWhite'
 };
 var backgroundColorTheme = {
     seller: 'ui_cpnt_list_base_area_seller',
-    subscriber: 'ui_cpnt_list_base_area'
+    subscriber: 'ui_cpnt_list_base_area',
+    seller_transparent: 'ui_cpnt_list_base_area_transparent_seller',
+    subscriber_transparent: 'ui_cpnt_list_base_area_transparent'
 };
 function BasicChatListItem(_a) {
     var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'subscriber' : _e;
     var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
-    var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
+    var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
     /**
      * @when contextMenu가 열려 있을 때
      * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
@@ -71,16 +75,17 @@ function BasicChatListItem(_a) {
         setIsContextMenuOpen(false);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme },
+        react_1.default.createElement(S_BasicChatListItem, { "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", colorTheme: colorTheme },
             leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
                 react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
+            react_1.default.createElement(S_TitleTextWrapper, null,
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] })),
             react_1.default.createElement(S_ContentTextWrapper, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary", wordBreak: "break_all" })),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" })),
             hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
                 react_1.default.createElement(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 }))),
             react_1.default.createElement(Popup_1.PopupProvider, null,
-                react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
+                react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
                     react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
 }
 var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
@@ -117,5 +122,6 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templ
     var hoverMode = _a.hoverMode;
     return hoverMode === 'use' && '1';
 });
+var S_TitleTextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  max-width: 120px;\n  min-width: 56px;\n"], ["\n  max-width: 120px;\n  min-width: 56px;\n"])));
 exports.default = BasicChatListItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -8,7 +8,7 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BasicFormGroup(_a) {
     var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm;
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement("div", { "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile" },
         titleText && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }),
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }))),

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

@@ -8,6 +8,7 @@ declare type BasicListProps = {
     columns?: 1 | 2 | 3 | 4 | 5 | 6;
     columnSpacing?: 0 | 16 | 24;
     rowSpacing?: 0 | 24 | 32 | 48 | 64;
+    spacingMode?: 'none' | 'use';
 };
-declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing }: BasicListProps): JSX.Element;
+declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing, spacingMode }: BasicListProps): JSX.Element;
 export default BasicList;

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

@@ -12,9 +12,9 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BasicList(_a) {
-    var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        (titleText || captionText) && (react_1.default.createElement(S_TitleBox, null,
+    var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e, _f = _a.spacingMode, spacingMode = _f === void 0 ? 'use' : _f;
+    return (react_1.default.createElement("div", { "x-pds-name": "BasicList", "x-pds-element-type": "component", "x-pds-device-type": "mobile" },
+        (titleText || captionText) && (react_1.default.createElement(S_TitleBox, { spacingMode: spacingMode },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }),
             titleText && captionText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
             captionText && react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" }))),
@@ -24,8 +24,8 @@ var S_TitleBox = styled_components_1.default.div(templateObject_1 || (templateOb
     var theme = _a.theme;
     return "" + theme.spacing.spacingD;
 }, function (_a) {
-    var theme = _a.theme;
-    return "0 " + theme.spacing.spacingE;
+    var spacingMode = _a.spacingMode, theme = _a.theme;
+    return spacingMode === 'use' && "0 " + theme.spacing.spacingE;
 });
 var S_BasicListWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  column-gap: ", ";\n  display: grid;\n  grid-template-columns: ", ";\n  row-gap: ", ";\n"], ["\n  column-gap: ", ";\n  display: grid;\n  grid-template-columns: ", ";\n  row-gap: ", ";\n"])), function (_a) {
     var columnSpacing = _a.columnSpacing;

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

@@ -28,6 +28,7 @@ export declare type BasicListItemProps = {
     switchName?: string;
     switchState?: 'normal' | 'disabled';
     switchStatus?: 'off' | 'on';
+    spacingMode?: 'none' | 'use';
     onClick?: () => void;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
@@ -42,6 +43,8 @@ export declare type StyleProps = {
     badgeStatus?: 'cancel' | 'active' | 'inactive';
     imageIconMode?: 'none' | 'image' | 'icon';
     displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
+    spacingMode?: 'none' | 'use';
+    onlyLeftArea?: boolean;
 };
-declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
+declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
 export default BasicListItem;