pds-dev-kit-web-test 0.0.10 → 0.0.12

package/dist/src/desktop/panels/SectionSheet/SectionSheet.js

@@ -0,0 +1,134 @@
+"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;
+};
+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 = __importStar(require("styled-components"));
+var backgroundColorTheme = {
+    transparent: 'ui_cpnt_sheet_base_03',
+    white: 'ui_cpnt_sheet_base_white',
+    black: 'ui_cpnt_sheet_base_black',
+    base1: 'ui_cpnt_sheet_base_01',
+    base2: 'ui_cpnt_sheet_base_02',
+    base3: 'ui_cpnt_sheet_base'
+};
+var borderColorTheme = {
+    grey: 'ui_cpnt_sheet_border_01',
+    blue: 'ui_cpnt_sheet_border_02',
+    green: 'ui_cpnt_sheet_border_03'
+};
+var paddingSpacing = {
+    spacing_a: 'spacingA',
+    spacing_b: 'spacingB',
+    spacing_c: 'spacingC',
+    spacing_d: 'spacingD',
+    spacing_e: 'spacingE',
+    spacing_f: 'spacingF',
+    spacing_g: 'spacingG',
+    spacing_h: 'spacingH',
+    spacing_i: 'spacingI',
+    spacing_j: 'spacingJ',
+    spacing_k: 'spacingK',
+    spacing_l: 'spacingL',
+    spacing_m: 'spacingM',
+    spacing_n: 'spacingN'
+};
+function SectionSheet(_a) {
+    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, onClick = _a.onClick;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    return (react_1.default.createElement(S_SectionSheet, { "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, children));
+}
+var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
+    var $radius = _a.$radius;
+    return $radius + "px";
+});
+var paddingTopStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingTop = _a.paddingTop;
+    return paddingTop && (paddingTop === 'none' ? 0 : theme.spacing[paddingSpacing[paddingTop]]);
+});
+var paddingRightStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingRight = _a.paddingRight;
+    return paddingRight && (paddingRight === 'none' ? 0 : theme.spacing[paddingSpacing[paddingRight]]);
+});
+var paddingBottomStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-bottom: ", ";\n"], ["\n  padding-bottom: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingBottom = _a.paddingBottom;
+    return paddingBottom && (paddingBottom === 'none' ? 0 : theme.spacing[paddingSpacing[paddingBottom]]);
+});
+var paddingLeftStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingLeft = _a.paddingLeft;
+    return paddingLeft && (paddingLeft === 'none' ? 0 : theme.spacing[paddingSpacing[paddingLeft]]);
+});
+var advancedCSS = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
+    return overrideBackgroundColorKey && theme[overrideBackgroundColorKey];
+}, function (_a) {
+    var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
+    return overrideBorderColorKey && theme[overrideBorderColorKey];
+});
+var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var $width = _a.$width;
+    return $width;
+}, function (_a) {
+    var $height = _a.$height;
+    return $height;
+}, function (_a) {
+    var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
+    return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
+}, function (_a) {
+    var borderMode = _a.borderMode;
+    return (borderMode === 'use' ? 'solid' : 'none');
+}, function (_a) {
+    var $borderWidth = _a.$borderWidth;
+    return $borderWidth + "px";
+}, function (_a) {
+    var theme = _a.theme, $borderColorTheme = _a.$borderColorTheme;
+    return $borderColorTheme && theme[borderColorTheme[$borderColorTheme]];
+}, function (_a) {
+    var hasOnClick = _a.hasOnClick;
+    return (hasOnClick ? 'pointer' : 'default');
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType === 'round' && radiusStyle;
+}, function (_a) {
+    var paddingTop = _a.paddingTop;
+    return paddingTop !== 'none' && paddingTopStyle;
+}, function (_a) {
+    var paddingRight = _a.paddingRight;
+    return paddingRight !== 'none' && paddingRightStyle;
+}, function (_a) {
+    var paddingBottom = _a.paddingBottom;
+    return paddingBottom !== 'none' && paddingBottomStyle;
+}, function (_a) {
+    var paddingLeft = _a.paddingLeft;
+    return paddingLeft !== 'none' && paddingLeftStyle;
+}, advancedCSS);
+exports.default = SectionSheet;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

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

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

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

@@ -1,3 +1,6 @@
+import { AnnotationSheet } from './AnnotationSheet';
+import { ContentSheet } from './ContentSheet';
 import { DesktopBasicModal } from './DesktopBasicModal';
 import { DesktopHeadlessModal } from './DesktopHeadlessModal';
-export { DesktopBasicModal, DesktopHeadlessModal };
+import { SectionSheet } from './SectionSheet';
+export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopHeadlessModal, SectionSheet };

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

@@ -1,7 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesktopHeadlessModal = exports.DesktopBasicModal = void 0;
+exports.SectionSheet = exports.DesktopHeadlessModal = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
+var AnnotationSheet_1 = require("./AnnotationSheet");
+Object.defineProperty(exports, "AnnotationSheet", { enumerable: true, get: function () { return AnnotationSheet_1.AnnotationSheet; } });
+var ContentSheet_1 = require("./ContentSheet");
+Object.defineProperty(exports, "ContentSheet", { enumerable: true, get: function () { return ContentSheet_1.ContentSheet; } });
 var DesktopBasicModal_1 = require("./DesktopBasicModal");
 Object.defineProperty(exports, "DesktopBasicModal", { enumerable: true, get: function () { return DesktopBasicModal_1.DesktopBasicModal; } });
 var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
 Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });
+var SectionSheet_1 = require("./SectionSheet");
+Object.defineProperty(exports, "SectionSheet", { enumerable: true, get: function () { return SectionSheet_1.SectionSheet; } });

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

@@ -3,7 +3,7 @@ export declare type DividerProps = {
     displayType?: 'line' | 'area';
     direction?: 'vertical' | 'horizontal';
     height?: number;
-    colorTheme?: 'none' | 'divider1';
+    colorTheme?: 'none' | 'divider1' | 'divider2';
 };
 declare function Divider({ displayType, direction, height, colorTheme }: DividerProps): JSX.Element;
 export default Divider;

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

@@ -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, { color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } })) : (react_1.default.createElement(DefaultIcon, { 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, { "$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 })))));
+    };
+    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, { 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, { 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

@@ -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,11 +36,15 @@ 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;
@@ -76,7 +80,7 @@ function BasicChatListItem(_a) {
                 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_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,

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;
+    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(react_1.default.Fragment, null,
-        (titleText || captionText) && (react_1.default.createElement(S_TitleBox, null,
+        (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;