pds-dev-kit-web 0.3.35 → 0.3.39

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

@@ -97,11 +97,80 @@ declare const colorSet: {
         sys_on_base_black_opacity10: string;
         sys_component_base_05_opacity00: string;
         sys_papp_post_notice_link: string;
-        sys_sys_component_base_navy_light: string;
+        sys_component_base_navy_light: string;
         sys_component_base_orange: string;
         sys_component_base_grey: string;
         sys_component_base_black_opacity80: string;
         sys_text_darkgrey_02: string;
+        sys_border_line_darktheme_01: string;
+        sys_border_line_darktheme_02: string;
+        sys_component_base_darktheme_01: string;
+        sys_component_base_darktheme_02: string;
+        sys_component_base_darktheme_03: string;
+        sys_text_grey_darktheme_01: string;
+        sys_text_grey_darktheme_02: string;
+        sys_text_grey_darktheme_03: string;
+        sys_widget_grey_darktheme_01: string;
+        sys_widget_grey_darktheme_02: string;
+        sys_widget_grey_darktheme_03: string;
+        sys_component_base_green: string;
+        sys_text_error_darktheme_01: string;
+        sys_border_line_darktheme_03: string;
+        sys_border_line_darktheme_04: string;
+    };
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -201,65 +270,26 @@ declare const colorSet: {
         sys_on_base_black_opacity10: string;
         sys_component_base_05_opacity00: string;
         sys_papp_post_notice_link: string;
-        sys_sys_component_base_navy_light: string;
+        sys_component_base_navy_light: string;
         sys_component_base_orange: string;
         sys_component_base_grey: string;
         sys_component_base_black_opacity80: string;
         sys_text_darkgrey_02: string;
-    };
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
+        sys_border_line_darktheme_01: string;
+        sys_border_line_darktheme_02: string;
+        sys_component_base_darktheme_01: string;
+        sys_component_base_darktheme_02: string;
+        sys_component_base_darktheme_03: string;
+        sys_text_grey_darktheme_01: string;
+        sys_text_grey_darktheme_02: string;
+        sys_text_grey_darktheme_03: string;
+        sys_widget_grey_darktheme_01: string;
+        sys_widget_grey_darktheme_02: string;
+        sys_widget_grey_darktheme_03: string;
+        sys_component_base_green: string;
+        sys_text_error_darktheme_01: string;
+        sys_border_line_darktheme_03: string;
+        sys_border_line_darktheme_04: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -652,6 +682,44 @@ declare const colorSet: {
         ui_cpnt_list_base_area_translucent: string;
         ui_cpnt_list_base_area_transparent: string;
         ui_cpnt_list_text_caption_02: string;
+        ui_cpnt_button_line_border_darktheme_enabled: string;
+        ui_cpnt_button_line_border_darktheme_disabled: string;
+        ui_cpnt_button_line_base_darktheme_default: string;
+        ui_cpnt_button_line_base_darktheme_hover: string;
+        ui_cpnt_button_line_base_darktheme_pressed: string;
+        ui_cpnt_button_text_darktheme_enabled: string;
+        ui_cpnt_button_text_darktheme_disabled: string;
+        ui_cpnt_button_icon_darktheme_enabled: string;
+        ui_cpnt_button_icon_darktheme_disabled: string;
+        ui_cpnt_icon_sys_white: string;
+        ui_cpnt_button_fill_base_media: string;
+        ui_cpnt_textfield_text_darktheme_enabled: string;
+        ui_cpnt_textfield_text_darktheme_hint: string;
+        ui_cpnt_textfield_text_darktheme_disabled: string;
+        ui_cpnt_textfield_icon_darktheme_default: string;
+        ui_cpnt_textfield_icon_darktheme_disabled: string;
+        ui_cpnt_textfield_border_darktheme_normal: string;
+        ui_cpnt_textfield_border_darktheme_focus: string;
+        ui_cpnt_textfield_border_darktheme_error: string;
+        ui_cpnt_textfield_text_darktheme_error: string;
+        ui_cpnt_textfield_base_darktheme_disabled: string;
+        ui_cpnt_select_text_darktheme_enabled: string;
+        ui_cpnt_select_text_darktheme_hint: string;
+        ui_cpnt_select_text_darktheme_disabled: string;
+        ui_cpnt_select_icon_darktheme_default: string;
+        ui_cpnt_select_icon_darktheme_disabled: string;
+        ui_cpnt_select_border_darktheme_normal: string;
+        ui_cpnt_select_border_darktheme_focus: string;
+        ui_cpnt_select_base_darktheme_disabled: string;
+        ui_cpnt_dropdown_text_darktheme_enabled: string;
+        ui_cpnt_dropdown_text_darktheme_hint: string;
+        ui_cpnt_dropdown_text_darktheme_disabled: string;
+        ui_cpnt_dropdown_icon_darktheme_default: string;
+        ui_cpnt_dropdown_icon_darktheme_disabled: string;
+        ui_cpnt_dropdown_border_darktheme_normal: string;
+        ui_cpnt_dropdown_border_darktheme_focus: string;
+        ui_cpnt_dropdown_base_darktheme_disabled: string;
+        ui_cpnt_sheet_base: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
-var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
+var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
-    PaletteColor_light: PaletteColor_light_json_1.default,
     SemanticColor: SemanticColor_json_1.default,
+    PaletteColor_light: PaletteColor_light_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

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

@@ -389,4 +389,42 @@ export interface UITheme {
     ui_cpnt_list_base_area_translucent: string;
     ui_cpnt_list_base_area_transparent: string;
     ui_cpnt_list_text_caption_02: string;
+    ui_cpnt_button_line_border_darktheme_enabled: string;
+    ui_cpnt_button_line_border_darktheme_disabled: string;
+    ui_cpnt_button_line_base_darktheme_default: string;
+    ui_cpnt_button_line_base_darktheme_hover: string;
+    ui_cpnt_button_line_base_darktheme_pressed: string;
+    ui_cpnt_button_text_darktheme_enabled: string;
+    ui_cpnt_button_text_darktheme_disabled: string;
+    ui_cpnt_button_icon_darktheme_enabled: string;
+    ui_cpnt_button_icon_darktheme_disabled: string;
+    ui_cpnt_icon_sys_white: string;
+    ui_cpnt_button_fill_base_media: string;
+    ui_cpnt_textfield_text_darktheme_enabled: string;
+    ui_cpnt_textfield_text_darktheme_hint: string;
+    ui_cpnt_textfield_text_darktheme_disabled: string;
+    ui_cpnt_textfield_icon_darktheme_default: string;
+    ui_cpnt_textfield_icon_darktheme_disabled: string;
+    ui_cpnt_textfield_border_darktheme_normal: string;
+    ui_cpnt_textfield_border_darktheme_focus: string;
+    ui_cpnt_textfield_border_darktheme_error: string;
+    ui_cpnt_textfield_text_darktheme_error: string;
+    ui_cpnt_textfield_base_darktheme_disabled: string;
+    ui_cpnt_select_text_darktheme_enabled: string;
+    ui_cpnt_select_text_darktheme_hint: string;
+    ui_cpnt_select_text_darktheme_disabled: string;
+    ui_cpnt_select_icon_darktheme_default: string;
+    ui_cpnt_select_icon_darktheme_disabled: string;
+    ui_cpnt_select_border_darktheme_normal: string;
+    ui_cpnt_select_border_darktheme_focus: string;
+    ui_cpnt_select_base_darktheme_disabled: string;
+    ui_cpnt_dropdown_text_darktheme_enabled: string;
+    ui_cpnt_dropdown_text_darktheme_hint: string;
+    ui_cpnt_dropdown_text_darktheme_disabled: string;
+    ui_cpnt_dropdown_icon_darktheme_default: string;
+    ui_cpnt_dropdown_icon_darktheme_disabled: string;
+    ui_cpnt_dropdown_border_darktheme_normal: string;
+    ui_cpnt_dropdown_border_darktheme_focus: string;
+    ui_cpnt_dropdown_base_darktheme_disabled: string;
+    ui_cpnt_sheet_base: string;
 }

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

@@ -247,11 +247,11 @@ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_28 || (temp
     var colorOverride = _a.colorOverride;
     return colorOverride && common_1.uiColors[colorOverride];
 });
-var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_a) {
+var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n"])), function (_a) {
     var lineLimit = _a.lineLimit;
     return lineLimit;
 });
-var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {

package/dist/src/desktop/layout/LayoutWT/Containers/PageMenuContainer/variation/TopPageMenu.js

@@ -62,6 +62,6 @@ var S_TopPageMenuArea = styled_components_1.default.div(templateObject_3 || (tem
     var areaLine = _a.areaLine;
     return areaLine && areaLineStyle;
 });
-var S_TopPageMenuContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 64px;\n  overflow: hidden;\n"], ["\n  height: 64px;\n  overflow: hidden;\n"])));
+var S_TopPageMenuContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: 64px;\n"], ["\n  min-height: 64px;\n"])));
 exports.default = TopPageMenu;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import fillIcons from '../../../common/assets/icons/fill';
+import lineIcons from '../../../common/assets/icons/line';
+import { uiColors } from '../../../common/styles/ui-colors';
+export declare type FillIconNameKeys = keyof typeof fillIcons;
+export declare type LineIconNameKeys = keyof typeof lineIcons;
+export declare type UiColors = keyof typeof uiColors;
+export declare type IconProps = {
+    iconName: FillIconNameKeys | LineIconNameKeys;
+    size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;
+    colorKey: UiColors;
+    fillType?: 'line' | 'fill';
+} & Record<string, any>;
+declare const Icon: ({ iconName, size, colorKey, fillType, ...rest }: IconProps) => JSX.Element;
+export default Icon;

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

@@ -0,0 +1,39 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 fill_1 = __importDefault(require("../../../common/assets/icons/fill"));
+var line_1 = __importDefault(require("../../../common/assets/icons/line"));
+var ui_colors_1 = require("../../../common/styles/ui-colors");
+var Icon = function (_a) {
+    var iconName = _a.iconName, _b = _a.size, size = _b === void 0 ? 24 : _b, colorKey = _a.colorKey, _c = _a.fillType, fillType = _c === void 0 ? 'line' : _c, rest = __rest(_a, ["iconName", "size", "colorKey", "fillType"]);
+    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, __assign({ color: ui_colors_1.uiColors[colorKey], size: size }, rest));
+};
+exports.default = Icon;

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

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

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

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare type ImageViewProps = {
+    src?: string;
+    shapeType?: 'round' | 'circular' | 'rectangle';
+    radius?: 8 | 16 | 24;
+    width?: number | 'responsive';
+    height?: number;
+    ratio?: '16_9' | '9_16' | '16_10' | '10_16' | '4_3' | '3_4' | '1_1' | 'auto';
+    scaleType?: 'fill' | 'contain' | 'cover' | 'none';
+    borderMode?: 'use' | 'none';
+};
+declare const ImageView: ({ src, shapeType, radius, width, height, ratio, scaleType, borderMode }: ImageViewProps) => JSX.Element;
+export default ImageView;

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

@@ -0,0 +1,75 @@
+"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"));
+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, _d = _a.width, width = _d === void 0 ? 'responsive' : _d, height = _a.height, _e = _a.ratio, ratio = _e === void 0 ? 'auto' : _e, _f = _a.scaleType, scaleType = _f === void 0 ? 'none' : _f, _g = _a.borderMode, borderMode = _g === void 0 ? 'none' : _g;
+    return (react_1.default.createElement(S_ImageViewWrapper, { "$width": width },
+        react_1.default.createElement(S_ImageView, { "$src": src, shapeType: shapeType, radius: radius, "$width": width, "$height": height, ratio: ratio, scaleType: scaleType, borderMode: borderMode }, ratio === 'auto' && react_1.default.createElement(S_ImageViewImg, { src: src, scaleType: scaleType }))));
+};
+var S_ImageViewWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: ", ";\n  width: ", ";\n"], ["\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+});
+var S_ImageView = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-position: center;\n  background-repeat: no-repeat;\n  box-sizing: border-box;\n  overflow: hidden;\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  background-position: center;\n  background-repeat: no-repeat;\n  box-sizing: border-box;\n  overflow: hidden;\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme, $src = _a.$src;
+    return !$src && "background-color: " + theme.ui_temp_grey_04;
+}, function (_a) {
+    var $src = _a.$src, ratio = _a.ratio;
+    return ratio !== 'auto' && "background-image: url(" + $src + ")";
+}, function (_a) {
+    var $height = _a.$height, ratio = _a.ratio;
+    return ratio === 'auto' && $height && "height: " + $height + "px";
+}, function (_a) {
+    var $height = _a.$height, ratio = _a.ratio;
+    return ratio === 'auto' && $height && "min-height: " + $height + "px";
+}, function (_a) {
+    var borderMode = _a.borderMode, theme = _a.theme;
+    return borderMode === 'use' && "border: 1px solid " + theme.ui_profile_image_border;
+}, function (_a) {
+    var shapeType = _a.shapeType, radius = _a.radius;
+    return shapeType &&
+        {
+            round: "border-radius: " + radius + "px",
+            circular: 'border-radius: 50%',
+            rectangle: ''
+        }[shapeType];
+}, function (_a) {
+    var scaleType = _a.scaleType;
+    return scaleType &&
+        {
+            fill: 'background-size: 100% 100%',
+            contain: "background-size: " + scaleType,
+            cover: "background-size: " + scaleType,
+            none: 'background-size: auto'
+        }[scaleType];
+}, function (_a) {
+    var ratio = _a.ratio;
+    return ratio &&
+        {
+            '16_9': 'padding-top: 56.25%',
+            '9_16': 'padding-top: 177.77%',
+            '16_10': 'padding-top: 62.5%',
+            '10_16': 'padding-top: 159.74%',
+            '4_3': 'padding-top: 75%',
+            '3_4': 'padding-top: 133.33%',
+            '1_1': 'padding-top: 100%',
+            auto: ''
+        }[ratio];
+});
+var S_ImageViewImg = styled_components_1.default.img(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  ", ";\n"], ["\n  display: block;\n  width: 100%;\n  ", ";\n"])), function (_a) {
+    var scaleType = _a.scaleType;
+    return (scaleType !== 'none' ? "object-fit: " + scaleType + ";height: 100%;" : '');
+});
+exports.default = ImageView;
+var templateObject_1, templateObject_2, templateObject_3;

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

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

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

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

@@ -0,0 +1,4 @@
+import { Icon } from './Icon';
+import { ImageView } from './ImageView';
+import { Spacing } from './Spacing';
+export { Icon, ImageView, Spacing };

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacing = exports.ImageView = exports.Icon = void 0;
+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 Spacing_1 = require("./Spacing");
+Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return Spacing_1.Spacing; } });

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

@@ -0,0 +1,2 @@
+import { Icon, ImageView, Spacing } from './components';
+export { Icon, ImageView, Spacing };

package/dist/src/hybrid/index.js

@@ -0,0 +1,10 @@
+"use strict";
+/* eslint-disable import/order */
+/* eslint-disable import/first */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacing = exports.ImageView = exports.Icon = void 0;
+// component
+var components_1 = require("./components");
+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, "Spacing", { enumerable: true, get: function () { return components_1.Spacing; } });

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

@@ -247,11 +247,11 @@ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_28 || (temp
     var colorOverride = _a.colorOverride;
     return colorOverride && common_1.uiColors[colorOverride];
 });
-var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_a) {
+var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n"])), function (_a) {
     var lineLimit = _a.lineLimit;
     return lineLimit;
 });
-var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {

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

@@ -1,9 +1,17 @@
 import { LayoutMF } from './layout/LayoutMF';
 import { ContainersBox as MFContainersBox } from './layout/LayoutMF/ContainersBox';
 export { LayoutMF, MFContainersBox };
+import { LayoutMM } from './layout/LayoutMM';
+import { NavigationContainer as MMNavigationContainer } from './layout/LayoutMM/Containers';
+import { ContainersBox as MMContainersBox } from './layout/LayoutMM/ContainersBox';
+export { LayoutMM, MMNavigationContainer, MMContainersBox };
 import { LayoutMP } from './layout/LayoutMP';
-import { NavigationContainer as MPGlobalMenuContainer } from './layout/LayoutMP/Containers';
+import { NavigationContainer as MPNavigationContainer, TabContainer as MPTabContainer } from './layout/LayoutMP/Containers';
 import { ContainersBox as MPContainersBox } from './layout/LayoutMP/ContainersBox';
-export { LayoutMP, MPGlobalMenuContainer, MPContainersBox };
+export { LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox };
+import { LayoutMS } from './layout/LayoutMS';
+import { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
+import { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
+export { LayoutMS, MSNavigationContainer, MSContainersBox };
 import { TextLabel as M_TextLabel } from './components';
 export { M_TextLabel };

package/dist/src/mobile/index.js

@@ -2,19 +2,34 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.M_TextLabel = exports.MPContainersBox = exports.MPGlobalMenuContainer = exports.LayoutMP = exports.MFContainersBox = exports.LayoutMF = void 0;
+exports.M_TextLabel = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
 // layoutMF
 var LayoutMF_1 = require("./layout/LayoutMF");
 Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
 var ContainersBox_1 = require("./layout/LayoutMF/ContainersBox");
 Object.defineProperty(exports, "MFContainersBox", { enumerable: true, get: function () { return ContainersBox_1.ContainersBox; } });
+// layoutMM
+var LayoutMM_1 = require("./layout/LayoutMM");
+Object.defineProperty(exports, "LayoutMM", { enumerable: true, get: function () { return LayoutMM_1.LayoutMM; } });
+var Containers_1 = require("./layout/LayoutMM/Containers");
+Object.defineProperty(exports, "MMNavigationContainer", { enumerable: true, get: function () { return Containers_1.NavigationContainer; } });
+var ContainersBox_2 = require("./layout/LayoutMM/ContainersBox");
+Object.defineProperty(exports, "MMContainersBox", { enumerable: true, get: function () { return ContainersBox_2.ContainersBox; } });
 // layoutMP
 var LayoutMP_1 = require("./layout/LayoutMP");
 Object.defineProperty(exports, "LayoutMP", { enumerable: true, get: function () { return LayoutMP_1.LayoutMP; } });
-var Containers_1 = require("./layout/LayoutMP/Containers");
-Object.defineProperty(exports, "MPGlobalMenuContainer", { enumerable: true, get: function () { return Containers_1.NavigationContainer; } });
-var ContainersBox_2 = require("./layout/LayoutMP/ContainersBox");
-Object.defineProperty(exports, "MPContainersBox", { enumerable: true, get: function () { return ContainersBox_2.ContainersBox; } });
+var Containers_2 = require("./layout/LayoutMP/Containers");
+Object.defineProperty(exports, "MPNavigationContainer", { enumerable: true, get: function () { return Containers_2.NavigationContainer; } });
+Object.defineProperty(exports, "MPTabContainer", { enumerable: true, get: function () { return Containers_2.TabContainer; } });
+var ContainersBox_3 = require("./layout/LayoutMP/ContainersBox");
+Object.defineProperty(exports, "MPContainersBox", { enumerable: true, get: function () { return ContainersBox_3.ContainersBox; } });
+// layoutMS
+var LayoutMS_1 = require("./layout/LayoutMS");
+Object.defineProperty(exports, "LayoutMS", { enumerable: true, get: function () { return LayoutMS_1.LayoutMS; } });
+var Containers_3 = require("./layout/LayoutMS/Containers");
+Object.defineProperty(exports, "MSNavigationContainer", { enumerable: true, get: function () { return Containers_3.NavigationContainer; } });
+var ContainersBox_4 = require("./layout/LayoutMS/ContainersBox");
+Object.defineProperty(exports, "MSContainersBox", { enumerable: true, get: function () { return ContainersBox_4.ContainersBox; } });
 // components
 var components_1 = require("./components");
 Object.defineProperty(exports, "M_TextLabel", { enumerable: true, get: function () { return components_1.TextLabel; } });

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -2,7 +2,7 @@
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'MFB_1';
+    layoutType: 'MFA_1' | 'MFB_1' | 'MFB_2' | 'MFC_1' | 'MFD_1' | 'MFE_1' | 'MFE_2';
     containerColor?: string;
     areaColor?: string;
 };

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/ContentsContainer.js

@@ -8,7 +8,13 @@ var variation_1 = require("./variation");
 var ContentsContainer = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
     return (react_1.default.createElement(react_1.default.Fragment, null, {
-        MFB_1: (react_1.default.createElement(variation_1.MFB, { layoutType: "MFB_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
+        MFA_1: react_1.default.createElement(variation_1.MFA, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        MFB_1: (react_1.default.createElement(variation_1.MFB, { layoutType: "MFB_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        MFB_2: (react_1.default.createElement(variation_1.MFB, { layoutType: "MFB_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        MFC_1: react_1.default.createElement(variation_1.MFC, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        MFD_1: react_1.default.createElement(variation_1.MFD, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        MFE_1: (react_1.default.createElement(variation_1.MFE, { layoutType: "MFE_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        MFE_2: (react_1.default.createElement(variation_1.MFE, { layoutType: "MFE_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFA.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type MFAProps = {
+    content1?: JSX.Element;
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const MFA: ({ content1, containerColor, areaColor }: MFAProps) => JSX.Element;
+export default MFA;