pds-dev-kit-web-test 0.1.4 → 0.1.6

package/dist/src/sub/DynamicLayout/components/desktop/Item/Item.js

@@ -45,7 +45,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 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 dynamicLayoutContext_1 = require("../../../dynamicLayoutContext");
 var pdsOriginal_1 = require("../../pdsOriginal");
@@ -64,7 +65,7 @@ function Item(_a) {
         typeof navigationHandler === 'function' &&
             navigationHandler(props.properties.linkType, props.properties.linkSrc);
     };
-    return (react_1.default.createElement(S_Item, { "x-dlayout-section-element-name": "Item", isClickable: isItemClickable, onClick: isItemClickable ? handleClickButton : undefined }, children));
+    return ((0, jsx_runtime_1.jsx)(S_Item, __assign({ "x-dlayout-section-element-name": "Item", isClickable: isItemClickable, onClick: isItemClickable ? handleClickButton : undefined }, { children: children }), void 0));
 }
 var S_Item = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), function (_a) {
     var isClickable = _a.isClickable;
@@ -72,8 +73,7 @@ var S_Item = styled_components_1.default.div(templateObject_1 || (templateObject
 });
 function Title(_a) {
     var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.5 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
-    return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-item-element-name": "Title", color: color, lineHeight: lineHeight },
-        react_1.default.createElement(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
+    return ((0, jsx_runtime_1.jsx)(S_TitleStyleWrapper, __assign({ "x-dlayout-item-element-name": "Title", color: color, lineHeight: lineHeight }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps), void 0) }), void 0));
 }
 var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
@@ -84,8 +84,7 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (t
 });
 function Description(_a) {
     var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return (react_1.default.createElement(S_DescriptionStyleWrapper, { "x-dlayout-item-element-name": "Description", color: color },
-        react_1.default.createElement(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps))));
+    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-item-element-name": "Description", color: color }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
 }
 var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"], ["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"])), function (_a) {
     var color = _a.color;
@@ -93,7 +92,7 @@ var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3
 });
 function Image(_a) {
     var imageViewProps = __rest(_a, []);
-    return react_1.default.createElement(pdsOriginal_1.ImageView, __assign({ "x-dlayout-item-element-name": "Image", scaleType: "cover" }, imageViewProps));
+    return (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, __assign({ "x-dlayout-item-element-name": "Image", scaleType: "cover" }, imageViewProps), void 0);
 }
 function Button(_a) {
     var buttonType = _a.buttonType, backgroundColor = _a.backgroundColor, textColor = _a.textColor, text = _a.text, _b = _a.linkType, linkType = _b === void 0 ? 'NONE' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.linkMethod, linkMethod = _d === void 0 ? 'CLICK_BUTTON_IN_ITEM' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, borderColor = _a.borderColor;
@@ -106,40 +105,37 @@ function Button(_a) {
         typeof navigationHandler === 'function' && navigationHandler(linkType, src);
     };
     if (!src || linkMethod !== 'CLICK_BUTTON_IN_ITEM')
-        return react_1.default.createElement(react_1.default.Fragment, null);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     switch (buttonType) {
         case 'A':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'B':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'C':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'D':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'E':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'F':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'G':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'H':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'I':
-            return (react_1.default.createElement(S_TextButtonBox, { color: textColor, state: state },
-                react_1.default.createElement(pdsOriginal_1.D_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state })));
+            return ((0, jsx_runtime_1.jsx)(S_TextButtonBox, __assign({ color: textColor, state: state }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state }, void 0) }), void 0));
         default:
-            return react_1.default.createElement("button", { type: "button" }, "wrong type");
+            return (0, jsx_runtime_1.jsx)("button", __assign({ type: "button" }, { children: "wrong type" }), void 0);
     }
 }
-var S_MainButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > button {\n    border: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"], ["\n  & > button {\n    border: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+var S_MainButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n    border-radius: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"], ["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n    border-radius: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme, backgroundColor = _a.backgroundColor, state = _a.state;
+    if (backgroundColor && state === 'normal') {
+        return backgroundColor;
+    }
+    return theme.ui_cpnt_button_fill_base_disabled;
+}, function (_a) {
     var borderWidth = _a.borderWidth, borderColor = _a.borderColor, state = _a.state, type = _a.type, theme = _a.theme;
     if (type === 'E' || type === 'F' || type === 'G' || type === 'H') {
         if (borderWidth && borderColor && state === 'normal') {
@@ -153,12 +149,6 @@ var S_MainButtonBox = styled_components_1.default.div(templateObject_4 || (templ
 }, function (_a) {
     var radius = _a.radius;
     return radius + "px";
-}, function (_a) {
-    var theme = _a.theme, backgroundColor = _a.backgroundColor, state = _a.state;
-    if (backgroundColor && state === 'normal') {
-        return backgroundColor;
-    }
-    return theme.ui_cpnt_button_fill_base_disabled;
 }, function (_a) {
     var color = _a.color, state = _a.state, theme = _a.theme;
     if (state === 'normal') {
@@ -166,7 +156,7 @@ var S_MainButtonBox = styled_components_1.default.div(templateObject_4 || (templ
     }
     return theme.ui_cpnt_textlabel_sys_tertiary;
 });
-var S_TextButtonBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  & > button {\n    box-sizing: border-box;\n    background: none;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"], ["\n  & > button {\n    box-sizing: border-box;\n    background: none;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"])), function (_a) {
+var S_TextButtonBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  & > button {\n    background: none;\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"], ["\n  & > button {\n    background: none;\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"])), function (_a) {
     var color = _a.color, state = _a.state, theme = _a.theme;
     if (state === 'normal') {
         return color;
@@ -189,11 +179,14 @@ function HTMLReader(_a) {
             contentRef.current.innerHTML = doc.documentElement.innerHTML;
         }
     }, [data]);
-    return (react_1.default.createElement(S_Content, { ref: contentRef, styleTheme: styleTheme, colorTheme: colorTheme, color: color, textAlign: textAlign, isPreview: isPreview !== null && isPreview !== void 0 ? isPreview : mode === 'PREVIEW' }));
+    return ((0, jsx_runtime_1.jsx)(S_Content, { ref: contentRef, styleTheme: styleTheme, colorTheme: colorTheme, color: color, textAlign: textAlign, isPreview: isPreview !== null && isPreview !== void 0 ? isPreview : mode === 'PREVIEW' }, void 0));
 }
-var S_Content = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n  ", "\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n  text-align: ", ";\n"], ["\n  color: ", ";\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n  ", "\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n  text-align: ", ";\n"])), function (_a) {
+var S_Content = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  line-height: 1.5;\n  text-align: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  ", "\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n  word-break: break-word;\n"], ["\n  color: ", ";\n  line-height: 1.5;\n  text-align: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  ", "\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n  word-break: break-word;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_temp_grey_01;
+}, function (_a) {
+    var textAlign = _a.textAlign;
+    return textAlign;
 }, function (_a) {
     var isPreview = _a.isPreview;
     return isPreview && 'pointer-events: none;';
@@ -244,179 +237,176 @@ var S_Content = styled_components_1.default.div(templateObject_6 || (templateObj
 }, function (_a) {
     var color = _a.color;
     return color && "color: " + color + ";";
-}, function (_a) {
-    var textAlign = _a.textAlign;
-    return textAlign;
 });
-var displayBold = (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 displayBold = (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.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_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 headingBold = (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.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_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 leadParaBold = (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.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_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 leadParaRegular = (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.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_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 subTitleBold = (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.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_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 subTitleRegular = (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.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_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 body1Bold = (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.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_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 body1Regular = (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.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_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 body2Bold = (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.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_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 body2Regular = (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.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_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 caption1Bold = (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.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_18 || (templateObject_18 = __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_18 || (templateObject_18 = __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_19 || (templateObject_19 = __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_19 || (templateObject_19 = __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_20 || (templateObject_20 = __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_20 || (templateObject_20 = __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_21 || (templateObject_21 = __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_21 || (templateObject_21 = __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_22 || (templateObject_22 = __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_22 || (templateObject_22 = __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_23 || (templateObject_23 = __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_23 || (templateObject_23 = __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_24 || (templateObject_24 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/sub/DynamicLayout/components/desktop/Section/Section.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { ISectionTitle, ISectionDescription, ISectionButton } from '../../../types';
-import { TextLabelProps } from '../../pdsOriginal/desktop/TextLabel/TextLabel';
-import { ImageViewProps } from '../../pdsOriginal/hybrid/ImageView/ImageView';
+/// <reference types="react" />
+import type { ISectionTitle, ISectionDescription, ISectionButton } from '../../../types';
+import type { TextLabelProps } from '../../pdsOriginal/desktop/TextLabel/TextLabel';
+import type { ImageViewProps } from '../../pdsOriginal/hybrid/ImageView/ImageView';
 export declare function SectionTitle({ text, color, lineHeight, ...textLabelProps }: ISectionTitle & TextLabelProps & {
     lineHeight?: number;
 }): JSX.Element;

package/dist/src/sub/DynamicLayout/components/desktop/Section/Section.js

@@ -14,25 +14,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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]; } });
-}) : (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 __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)
@@ -49,15 +30,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionButton = exports.SectionImage = exports.SectionDescription = exports.SectionTitle = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var dynamicLayoutContext_1 = require("../../../dynamicLayoutContext");
 var pdsOriginal_1 = require("../../pdsOriginal");
 // TITLE
 function SectionTitle(_a) {
     var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.3 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
-    return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-section-element-name": "Title", color: color, lineHeight: lineHeight },
-        react_1.default.createElement(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
+    return ((0, jsx_runtime_1.jsx)(S_TitleStyleWrapper, __assign({ "x-dlayout-section-element-name": "Title", color: color, lineHeight: lineHeight }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps), void 0) }), void 0));
 }
 exports.SectionTitle = SectionTitle;
 var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
@@ -70,8 +51,7 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_1 || (t
 // DESCRIPTION
 function SectionDescription(_a) {
     var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
-    return (react_1.default.createElement(S_DescriptionStyleWrapper, { "x-dlayout-section-element-name": "Description", color: color, fontWeight: fontWeight },
-        react_1.default.createElement(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
+    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-section-element-name": "Description", color: color, fontWeight: fontWeight }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps), void 0) }), void 0));
 }
 exports.SectionDescription = SectionDescription;
 var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"])), function (_a) {
@@ -84,7 +64,7 @@ var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_2
 // IMAGE
 function SectionImage(_a) {
     var imageViewProps = __rest(_a, []);
-    return react_1.default.createElement(pdsOriginal_1.ImageView, __assign({ "x-dlayout-section-element-name": "Image" }, imageViewProps, { scaleType: "cover" }));
+    return (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, __assign({ "x-dlayout-section-element-name": "Image" }, imageViewProps, { scaleType: "cover" }), void 0);
 }
 exports.SectionImage = SectionImage;
 // BUTTON
@@ -100,38 +80,35 @@ function SectionButton(_a) {
     };
     switch (buttonType) {
         case 'A':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'B':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'C':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'D':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'E':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'F':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'G':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'H':
-            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }, void 0) }), void 0));
         case 'I':
-            return (react_1.default.createElement(S_TextButtonBox, { color: textColor, state: state },
-                react_1.default.createElement(pdsOriginal_1.D_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state })));
+            return ((0, jsx_runtime_1.jsx)(S_TextButtonBox, __assign({ color: textColor, state: state }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state }, void 0) }), void 0));
         default:
-            return react_1.default.createElement("button", { type: "button" }, "wrong type");
+            return (0, jsx_runtime_1.jsx)("button", __assign({ type: "button" }, { children: "wrong type" }), void 0);
     }
 }
 exports.SectionButton = SectionButton;
-var S_MainButtonBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > button {\n    border: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"], ["\n  & > button {\n    border: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+var S_MainButtonBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n    border-radius: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"], ["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n    border-radius: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme, backgroundColor = _a.backgroundColor, state = _a.state;
+    if (backgroundColor && state === 'normal') {
+        return backgroundColor;
+    }
+    return theme.ui_cpnt_button_fill_base_disabled;
+}, function (_a) {
     var borderWidth = _a.borderWidth, borderColor = _a.borderColor, state = _a.state, type = _a.type, theme = _a.theme;
     if (type === 'E' || type === 'F' || type === 'G' || type === 'H') {
         if (borderWidth && borderColor && state === 'normal') {
@@ -145,12 +122,6 @@ var S_MainButtonBox = styled_components_1.default.div(templateObject_3 || (templ
 }, function (_a) {
     var radius = _a.radius;
     return radius + "px";
-}, function (_a) {
-    var theme = _a.theme, backgroundColor = _a.backgroundColor, state = _a.state;
-    if (backgroundColor && state === 'normal') {
-        return backgroundColor;
-    }
-    return theme.ui_cpnt_button_fill_base_disabled;
 }, function (_a) {
     var color = _a.color, state = _a.state, theme = _a.theme;
     if (state === 'normal') {
@@ -158,7 +129,7 @@ var S_MainButtonBox = styled_components_1.default.div(templateObject_3 || (templ
     }
     return theme.ui_cpnt_textlabel_sys_tertiary;
 });
-var S_TextButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > button {\n    box-sizing: border-box;\n    background: none;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"], ["\n  & > button {\n    box-sizing: border-box;\n    background: none;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"])), function (_a) {
+var S_TextButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > button {\n    background: none;\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"], ["\n  & > button {\n    background: none;\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"])), function (_a) {
     var color = _a.color, state = _a.state, theme = _a.theme;
     if (state === 'normal') {
         return color;