pds-dev-kit-web-test 0.2.0-beta.0 → 0.2.0

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/MainButton/MainButton.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -22,11 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
 var styles_1 = require("../../common/styles");
@@ -135,20 +143,12 @@ function MainButton(_a) {
     };
     var MainButtonVariation = function () {
         if (isLoading) {
-            return (react_1.default.createElement(S_LoadingMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, state: "disabled", disabled: true }));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, state: "disabled", disabled: true }, void 0));
         }
         if (isSubmitting) {
-            return (react_1.default.createElement(S_SubmittingMainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, state: "normal", disabled: true },
-                react_1.default.createElement(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size })));
+            return ((0, jsx_runtime_1.jsx)(S_SubmittingMainButton, __assign({ shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, state: "normal", disabled: true }, { children: (0, jsx_runtime_1.jsx)(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size }, void 0) }), void 0));
         }
-        return (react_1.default.createElement(S_MainButton, { "x-pds-name": "MainButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
-            size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
-                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
-            size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
-                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
+        return ((0, jsx_runtime_1.jsxs)(S_MainButton, __assign({ "x-pds-name": "MainButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }, void 0)] }, void 0))] }), void 0));
     };
     return MainButtonVariation();
 }

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/TextButton/TextButton.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PDSTextType } from '../../common';
+/// <reference types="react" />
+import type { PDSTextType } from '../../common';
 export declare type TextButtonProps = {
     text?: PDSTextType;
     size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/TextButton/TextButton.js

@@ -44,11 +44,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 var textStyle = {
@@ -71,8 +68,7 @@ function TextButton(_a) {
             onClick(e);
         }
     };
-    return (react_1.default.createElement(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
+    return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0) }), void 0));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/TextLabel/TextLabel.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PDSTextType, UiColors } from '../../common';
+import type { PDSTextType, UiColors } from '../../common';
 export declare type TextLabelProps = {
     text: PDSTextType;
     tooltipText?: PDSTextType;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/TextLabel/TextLabel.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -23,7 +34,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../hybrid");
 function TextLabel(_a) {
@@ -32,185 +44,177 @@ function TextLabel(_a) {
     var handleTooltipToggle = function (value) {
         setIsTooltipOpen(value);
     };
-    return (react_1.default.createElement(S_TextLabel, { "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak },
-        text,
-        requirementMode === 'use' && (react_1.default.createElement(S_AfterTextBox, { styleTheme: styleTheme },
-            react_1.default.createElement(S_IconWrapper, null,
-                react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" })))),
-        tooltipText && (react_1.default.createElement(S_AfterTextBox, { styleTheme: styleTheme },
-            react_1.default.createElement(S_IconWrapper, { onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } },
-                react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: "ui_cpnt_icon_sys_grey_03" })),
-            react_1.default.createElement(S_TooltipWrapper, { className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, "" + tooltipText)))));
+    return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }, void 0) }, void 0) }), void 0)), tooltipText && ((0, jsx_runtime_1.jsxs)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsx)(S_IconWrapper, __assign({ onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: "ui_cpnt_icon_sys_grey_03" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, { children: "" + tooltipText }), void 0)] }), void 0))] }), void 0));
 }
-var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.displayHeading;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.displayHeading;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.displayHeading;
 });
-var headingBold = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var headingBold = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.heading;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.heading;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.heading;
 });
-var leadParaBold = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var leadParaBold = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.leadParagraph;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.leadParagraph;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.leadParagraph;
 });
-var leadParaRegular = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var leadParaRegular = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.leadParagraph;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.leadParagraph;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.leadParagraph;
 });
-var subTitleBold = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var subTitleBold = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.subtitle;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.subtitle;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.subtitle;
 });
-var subTitleRegular = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var subTitleRegular = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.subtitle;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.subtitle;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.subtitle;
 });
-var body1Bold = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var body1Bold = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.body1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.body1;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.body1;
 });
-var body1Regular = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var body1Regular = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.body1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.body1;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.body1;
 });
-var body2Bold = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var body2Bold = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.body2;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.body2;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.body2;
 });
-var body2Regular = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var body2Regular = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.body2;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.body2;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.body2;
 });
-var caption1Bold = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var caption1Bold = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.caption1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.caption1;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.caption1;
 });
-var caption1Regular = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var caption1Regular = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.caption1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.caption1;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.caption1;
 });
-var caption2Bold = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var caption2Bold = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.caption2;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.caption2;
+    return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.bold;
+    return theme.desktopLineHeight.caption2;
 });
-var caption2Regular = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var caption2Regular = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.caption2;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.caption2;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.caption2;
 });
-var form1Regular = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var form1Regular = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.form1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.form1;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.form1;
 });
-var form2Regular = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var form2Regular = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.form2;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.form2;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.form2;
 });
-var blog1Regular = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var blog1Regular = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.blog1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.blog1;
+    return theme.fontWeight.normal;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.desktopLineHeight.blog1;
 });
 var sysTextPrimary = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -256,7 +260,7 @@ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_28 || (t
     var theme = _a.theme;
     return theme.ui_cpnt_textlabel_usr_brandonprimary;
 });
-var customFontStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: 1.5;\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: 1.5;\n  font-weight: ", ";\n"])), function (_a) {
+var customFontStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.5;\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.5;\n"])), function (_a) {
     var customFontSize = _a.customFontSize;
     return customFontSize;
 }, function (_a) {
@@ -267,17 +271,17 @@ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_30 || (temp
     var colorOverride = _a.colorOverride, theme = _a.theme;
     return colorOverride && theme[colorOverride];
 });
-var ellipsisStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __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_31 || (templateObject_31 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: ", ";\n  display: -webkit-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: ", ";\n  display: -webkit-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_a) {
     var lineLimit = _a.lineLimit;
     return lineLimit;
 });
-var userSelectModeStyle = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"])));
-var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    position: absolute;\n    left: 0;\n    width: 16px;\n  }\n"], ["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    position: absolute;\n    left: 0;\n    width: 16px;\n  }\n"])));
-var tooltipLeftTop = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  right: 0;\n  bottom: 20px;\n"], ["\n  right: 0;\n  bottom: 20px;\n"])));
+var userSelectModeStyle = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  -khtml-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  -khtml-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"])));
+var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    left: 0;\n    position: absolute;\n    width: 16px;\n  }\n"], ["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    left: 0;\n    position: absolute;\n    width: 16px;\n  }\n"])));
+var tooltipLeftTop = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  bottom: 20px;\n  right: 0;\n"], ["\n  bottom: 20px;\n  right: 0;\n"])));
 var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  right: 0;\n  top: 20px;\n"], ["\n  right: 0;\n  top: 20px;\n"])));
-var tooltipRightTop = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  left: 0;\n  bottom: 20px;\n"], ["\n  left: 0;\n  bottom: 20px;\n"])));
+var tooltipRightTop = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  bottom: 20px;\n  left: 0;\n"], ["\n  bottom: 20px;\n  left: 0;\n"])));
 var tooltipRightBottom = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  left: 0;\n  top: 20px;\n"], ["\n  left: 0;\n  top: 20px;\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -371,7 +375,7 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_39 || (templ
             return 'vertical-align: middle';
     }
 });
-var S_IconWrapper = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"])));
+var S_IconWrapper = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"])));
 var S_TooltipWrapper = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../common';
+import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../common';
 export declare type IconProps = {
     iconName?: FillIconNameKeys | LineIconNameKeys;
     size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Icon/Icon.js

@@ -3,7 +3,7 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = require("styled-components");
 var fill_1 = __importDefault(require("../../common/assets/icons/fill"));
 var line_1 = __importDefault(require("../../common/assets/icons/line"));
@@ -14,6 +14,6 @@ var Icon = function (_a) {
     var SelectedIcon = fillType === 'line'
         ? line_1.default[iconName] || fill_1.default[iconName]
         : fill_1.default[iconName] || line_1.default[iconName];
-    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 } }));
+    return SelectedIcon ? ((0, jsx_runtime_1.jsx)(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 } }, void 0)) : ((0, jsx_runtime_1.jsx)(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 } }, void 0));
 };
 exports.default = Icon;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/ImageView/ImageView.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -22,31 +33,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 jsx_runtime_1 = require("react/jsx-runtime");
 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, 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" })));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": width, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: "4_3" }, void 0) }), void 0));
         }
         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" })));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": (height * 4) / 3, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: "4_3" }, void 0) }), void 0));
         }
         if (height === 'responsive' && !width && !noImageWidth) {
-            return (react_1.default.createElement(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": 300, shapeType: shapeType, "$radius": radius }));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": 300, shapeType: shapeType, "$radius": radius }, void 0));
         }
-        return (react_1.default.createElement(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, shapeType: shapeType, "$radius": radius }));
+        return ((0, jsx_runtime_1.jsx)(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, shapeType: shapeType, "$radius": radius }, void 0));
     };
-    var LoadingRatioImageView = (react_1.default.createElement(S_LoadingRatioImageViewWrapper, { "$width": width, shapeType: shapeType, "$radius": radius },
-        react_1.default.createElement(S_LoadingRatioImageView, { ratio: ratio })));
+    var LoadingRatioImageView = ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": width, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: ratio }, void 0) }), void 0));
     var LoadingImageView = function () {
         if (ratio === 'auto') {
             return LoadingAutoImageView();
@@ -57,12 +62,11 @@ var ImageView = function (_a) {
         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 ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ratio === 'auto' ? ((0, jsx_runtime_1.jsx)(S_AutoImageViewWrapper, __assign({ "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 }, { children: src && ((0, jsx_runtime_1.jsx)(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType }, void 0)) }), void 0)) : ((0, jsx_runtime_1.jsx)(S_RatioImageViewWrapper, __assign({ "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode }, { children: (0, jsx_runtime_1.jsx)(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio }, void 0) }), void 0)) }, void 0));
     };
     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 wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, backgroundFillMode = _a.backgroundFillMode;
     return backgroundFillMode === 'use' ? "background-color: " + theme.ui_temp_grey_04 : '';
 }, function (_a) {
@@ -112,15 +116,15 @@ var S_RatioImageView = styled_components_1.default.div(templateObject_3 || (temp
             '1_1': 'padding-top: 100%'
         }[ratio];
 });
-var onlyWidthWrapperStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
+var onlyWidthWrapperStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
+    var noImageHeight = _a.noImageHeight, $src = _a.$src;
+    return (!$src && noImageHeight ? noImageHeight + "px" : 'auto');
+}, function (_a) {
     var noImageHeight = _a.noImageHeight, $src = _a.$src;
     return !$src && noImageHeight ? noImageHeight + "px" : 'auto';
 }, function (_a) {
     var $width = _a.$width;
     return ($width === 'responsive' ? '100%' : $width + "px");
-}, function (_a) {
-    var noImageHeight = _a.noImageHeight, $src = _a.$src;
-    return (!$src && noImageHeight ? noImageHeight + "px" : 'auto');
 }, function (_a) {
     var $width = _a.$width;
     return ($width === 'responsive' ? '100%' : $width + "px");
@@ -128,23 +132,23 @@ var onlyWidthWrapperStyle = (0, styled_components_1.css)(templateObject_4 || (te
     var theme = _a.theme, noImageHeight = _a.noImageHeight, $src = _a.$src;
     return !$src && noImageHeight ? "background-color: " + theme.ui_temp_grey_04 : '';
 });
-var onlyHeightWrapperStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
+var onlyHeightWrapperStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var $height = _a.$height;
     return ($height === 'responsive' ? '100%' : $height + "px");
-}, function (_a) {
-    var noImageWidth = _a.noImageWidth, $src = _a.$src;
-    return (!$src && noImageWidth ? noImageWidth + "px" : 'auto');
 }, function (_a) {
     var $height = _a.$height;
     return ($height === 'responsive' ? '100%' : $height + "px");
 }, function (_a) {
     var noImageWidth = _a.noImageWidth, $src = _a.$src;
     return (!$src && noImageWidth ? noImageWidth + "px" : 'auto');
+}, function (_a) {
+    var noImageWidth = _a.noImageWidth, $src = _a.$src;
+    return (!$src && noImageWidth ? noImageWidth + "px" : 'auto');
 }, function (_a) {
     var theme = _a.theme, noImageWidth = _a.noImageWidth, $src = _a.$src;
     return !$src && noImageWidth ? "background-color: " + theme.ui_temp_grey_04 : '';
 });
-var bothWrapperStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-height: ", ";\n  height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
+var bothWrapperStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var $height = _a.$height;
     return ($height === 'responsive' ? '100%' : $height + "px");
 }, function (_a) {
@@ -160,9 +164,9 @@ var bothWrapperStyle = (0, styled_components_1.css)(templateObject_6 || (templat
     var theme = _a.theme, $src = _a.$src;
     return (!$src ? "background-color: " + theme.ui_temp_grey_04 : '');
 });
-var onlyWidthStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n"], ["\n  width: 100%;\n  height: auto;\n"])));
-var onlyHeightStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: auto;\n  height: 100%;\n"], ["\n  width: auto;\n  height: 100%;\n"])));
-var bothStyle = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
+var onlyWidthStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: auto;\n  width: 100%;\n"], ["\n  height: auto;\n  width: 100%;\n"])));
+var onlyHeightStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 100%;\n  width: auto;\n"], ["\n  height: 100%;\n  width: auto;\n"])));
+var bothStyle = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
 var S_AutoImageViewWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  ", "\n  ", ";\n  ", ";\n  ", ";\n"])), wrapperStyle, function (_a) {
     var $width = _a.$width, $height = _a.$height;
     return $width && !$height && onlyWidthWrapperStyle;