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

package/dist/src/desktop/components/DynamicDesktopNavBar/components/TextNav.js

@@ -3,19 +3,28 @@ 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 __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 = __importDefault(require("styled-components"));
 var __1 = require("../../..");
 var NavLink_1 = __importDefault(require("../../../../common/components/Navigations/NavLink"));
 function TextNav(_a) {
     var openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c, to = _a.to, text = _a.text;
-    return (react_1.default.createElement(S_Box, null, preventLineChange ? (react_1.default.createElement(NavLink_1.default, { to: to, openNewTab: openNewTab },
-        react_1.default.createElement(__1.D_TextLabel, { text: text, styleTheme: isActive ? 'body1Bold' : 'body1Regular', ellipsisMode: "use", lineLimit: 1 }))) : (react_1.default.createElement(NavLink_1.default, { to: to, openNewTab: openNewTab },
-        react_1.default.createElement(__1.D_TextLabel, { text: text, styleTheme: isActive ? 'body1Bold' : 'body1Regular' })))));
+    return ((0, jsx_runtime_1.jsx)(S_Box, { children: preventLineChange ? ((0, jsx_runtime_1.jsx)(NavLink_1.default, __assign({ to: to, openNewTab: openNewTab }, { children: (0, jsx_runtime_1.jsx)(__1.D_TextLabel, { text: text, styleTheme: isActive ? 'body1Bold' : 'body1Regular', ellipsisMode: "use", lineLimit: 1 }, void 0) }), void 0)) : ((0, jsx_runtime_1.jsx)(NavLink_1.default, __assign({ to: to, openNewTab: openNewTab }, { children: (0, jsx_runtime_1.jsx)(__1.D_TextLabel, { text: text, styleTheme: isActive ? 'body1Bold' : 'body1Regular' }, void 0) }), void 0)) }, void 0));
 }
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/DynamicDesktopNavBarTemplates.d.ts

@@ -1,4 +1,4 @@
-import { TemplateNamesType } from './types';
+import type { TemplateNamesType } from './types';
 declare class DynamicDesktopNavBarTemplates {
     private static data;
     private static names;

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/types.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties } from 'styled-components';
-import { TEMPLATES_DATA } from './constants';
+import type { TEMPLATES_DATA } from './constants';
+import type { CSSProperties } from 'styled-components';
 declare type MenuOptions = {
     showMenuAsIcon: boolean;
     maxLength: number;

package/dist/src/desktop/components/DynamicDesktopNavBar/types.d.ts

@@ -1,4 +1,4 @@
-import { PDSIconType } from '../../../common';
+import type { PDSIconType } from '../../../common';
 export type { DynamicDesktopTemplateType, TemplateNamesType, TemplatesDataType } from './templates/types';
 export declare type ParsedNode = {
     menuItemType: menuItemTypes;

package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+/// <reference types="react" />
 import { Path } from 'react-hook-form';
-import { PDSTextType, IFormValues } from '../../../common';
+import type { PDSTextType, IFormValues } from '../../../common';
 export declare type EditApplyTextFieldProps = {
     name: Path<IFormValues>;
     hintText?: PDSTextType;

package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.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,8 +34,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/jsx-no-bind */
-var react_1 = __importStar(require("react"));
+var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
@@ -135,25 +147,16 @@ function EditApplyTextField(_a) {
     };
     var S_TextFieldBase = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: size === 'large' || size === 'rlarge' ? 'form2' : 'heading', textWeight: size === 'large' || size === 'rlarge' ? 'normal' : 'bold', onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: handleChange, inputRef: ref }));
+            return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: size === 'large' || size === 'rlarge' ? 'form2' : 'heading', textWeight: size === 'large' || size === 'rlarge' ? 'normal' : 'bold', onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: handleChange, inputRef: ref }, void 0));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: size === 'large' || size === 'rlarge' ? 'form2' : 'heading', textWeight: size === 'large' || size === 'rlarge' ? 'normal' : 'bold', onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: handleChange, inputRef: ref }));
+            return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: size === 'large' || size === 'rlarge' ? 'form2' : 'heading', textWeight: size === 'large' || size === 'rlarge' ? 'normal' : 'bold', onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: handleChange, inputRef: ref }, void 0));
         }
         if (textLineType === 'single') {
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: "use", textLineType: "single", inputType: inputType, state: state, min: min, max: max, maxLength: maxLength, textSize: size === 'large' || size === 'rlarge' ? 'form2' : 'heading', textWeight: size === 'large' || size === 'rlarge' ? 'normal' : 'bold', onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: handleChange, onKeyDown: handleKeyDown, inputRef: ref })));
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: "use", textLineType: "single", inputType: inputType, state: state, min: min, max: max, maxLength: maxLength, textSize: size === 'large' || size === 'rlarge' ? 'form2' : 'heading', textWeight: size === 'large' || size === 'rlarge' ? 'normal' : 'bold', onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: handleChange, onKeyDown: handleKeyDown, inputRef: ref }, void 0) }, void 0));
         }
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_EditApplyTextFieldWrapper, { "x-pds-name": "EditApplyTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth },
-            react_1.default.createElement(S_EditApplyTextField, null,
-                react_1.default.createElement(S_S_TextFieldBaseWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, customWidth: customWidth }, S_TextFieldBase()),
-                isOpen === true && (react_1.default.createElement(S_ButtonBox, null,
-                    react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }),
-                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                    react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" })))),
-            ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, { isFocused: isFocused }, errors[name].message))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_EditApplyTextFieldWrapper, __assign({ "x-pds-name": "EditApplyTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_EditApplyTextField, { children: [(0, jsx_runtime_1.jsx)(S_S_TextFieldBaseWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, customWidth: customWidth }, { children: S_TextFieldBase() }), void 0), isOpen === true && ((0, jsx_runtime_1.jsxs)(S_ButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" }, void 0)] }, void 0))] }, void 0), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && (0, jsx_runtime_1.jsx)(S_Error, __assign({ isFocused: isFocused }, { children: errors[name].message }), void 0)] }), void 0) }, void 0));
 }
 var S_EditApplyTextFieldWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n\n  ", "\n"], ["\n  width: ", ";\n\n  ", "\n"])), function (_a) {
     var size = _a.size, responsiveMode = _a.responsiveMode;
@@ -265,7 +268,7 @@ var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_11
     var state = _a.state;
     return state === 'normal' && normalActionColor;
 });
-var S_Error = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
+var S_Error = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_text_error;
 }, function (_a) {
@@ -277,12 +280,12 @@ var S_Error = styled_components_1.default.div(templateObject_12 || (templateObje
 }, function (_a) {
     var theme = _a.theme;
     return theme.desktopLineHeight.caption2;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
 }, function (_a) {
     var theme = _a.theme, isFocused = _a.isFocused;
     return isFocused ? theme.spacing.spacingI : theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
 });
 var S_ButtonBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  bottom: -36px;\n  display: flex;\n  position: absolute;\n  right: 0;\n  z-index: 1;\n"], ["\n  bottom: -36px;\n  display: flex;\n  position: absolute;\n  right: 0;\n  z-index: 1;\n"])));
 exports.default = EditApplyTextField;

package/dist/src/desktop/components/FilterBar/FilterBar.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { Path } from 'react-hook-form';
-import { IFormValues, PDSTextType, PDSValueOption } from '../../../common';
+import type { IFormValues, PDSTextType, PDSValueOption } from '../../../common';
+import type { Path } from 'react-hook-form';
 export declare type FilterBarProps = {
     displayType?: 'chips' | 'searchfield' | 'filterchips_searchfield';
     textArray: PDSValueOption[];

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

@@ -3,11 +3,22 @@ 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 __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 = __importDefault(require("styled-components"));
 var Chip_1 = require("../Chip");
 var TextField_1 = require("../TextField");
@@ -17,22 +28,19 @@ function FilterBar(_a) {
         if (displayType === 'chips' || displayType === 'filterchips_searchfield') {
             return textArray.map(function (option) {
                 var _a;
-                return (react_1.default.createElement(S_ChipWrapper, { key: option.value },
-                    react_1.default.createElement(Chip_1.Chip, { displayType: "filter_single", text: option.text, value: value === null || value === void 0 ? void 0 : value.value, id: option.value, onClickChip: function () { return onClickChip && onClickChip(option); }, activeChipId: activeChipId, chipId: (_a = option.value) === null || _a === void 0 ? void 0 : _a.toString() })));
+                return ((0, jsx_runtime_1.jsx)(S_ChipWrapper, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { displayType: "filter_single", text: option.text, value: value === null || value === void 0 ? void 0 : value.value, id: option.value, onClickChip: function () { return onClickChip && onClickChip(option); }, activeChipId: activeChipId, chipId: (_a = option.value) === null || _a === void 0 ? void 0 : _a.toString() }, void 0) }, option.value));
             });
         }
     };
     var renderingTextField = function () {
         if (displayType === 'filterchips_searchfield' || displayType === 'searchfield') {
-            return (name && (react_1.default.createElement(TextField_1.TextField, { name: name, size: "small", hintText: hintText, enterSubmitMode: "use", validationPoint: "onChange" })));
+            return (name && ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { name: name, size: "small", hintText: hintText, enterSubmitMode: "use", validationPoint: "onChange" }, void 0)));
         }
     };
-    return (react_1.default.createElement(S_FilterBarBox, { "x-pds-name": "FilterBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
-        react_1.default.createElement(S_ChipBox, null, renderingChip()),
-        renderingTextField()));
+    return ((0, jsx_runtime_1.jsxs)(S_FilterBarBox, __assign({ "x-pds-name": "FilterBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_ChipBox, { children: renderingChip() }, void 0), renderingTextField()] }), void 0));
 }
 exports.default = FilterBar;
-var S_FilterBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var S_FilterBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n"])));
 var S_ChipBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  margin-right: ", ";\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;

package/dist/src/desktop/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+/// <reference types="react" />
+import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
 export declare type FloatingActionButtonProps = {
     text?: PDSTextType;
     displayType?: 'icon_only' | 'text_only' | 'icon_text';

package/dist/src/desktop/components/FloatingActionButton/FloatingActionButton.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 transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
@@ -53,15 +61,7 @@ function FloatingActionButton(_a) {
         }
         return 'ui_cpnt_button_icon_on_primary';
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        displayType === 'icon_only' && (react_1.default.createElement(S_ButtonIconOnly, { "x-pds-name": "FloatingActionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
-            react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' ? 20 : 24, colorKey: iconColor(), fillType: iconFillType }))),
-        displayType !== 'icon_only' && (react_1.default.createElement(S_Button, { "x-pds-name": "FloatingActionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
-            displayType === 'text_only' && (react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })),
-            displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: 20, colorKey: iconColor(), fillType: iconFillType }),
-                react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })))))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'icon_only' && ((0, jsx_runtime_1.jsx)(S_ButtonIconOnly, __assign({ "x-pds-name": "FloatingActionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' ? 20 : 24, colorKey: iconColor(), fillType: iconFillType }, void 0) }), void 0)), displayType !== 'icon_only' && ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "FloatingActionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown }, { children: [displayType === 'text_only' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined }, void 0)), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: 20, colorKey: iconColor(), fillType: iconFillType }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined }, void 0)] }, void 0))] }), void 0))] }, void 0));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 24px;\n  height: 48px;\n  width: 48px;\n"], ["\n  border-radius: 24px;\n  height: 48px;\n  width: 48px;\n"])));
 var xlarge = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 32px;\n  height: 64px;\n  width: 64px;\n"], ["\n  border-radius: 32px;\n  height: 64px;\n  width: 64px;\n"])));
@@ -69,7 +69,7 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {

package/dist/src/desktop/components/Hero/Hero.d.ts

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

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

@@ -1,18 +1,21 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function Hero(_a) {
     var heroText = _a.heroText, leadText = _a.leadText, _b = _a.leadTextColorTheme, leadTextColorTheme = _b === void 0 ? 'normal' : _b;
-    return (react_1.default.createElement("div", { "x-pds-name": "Hero", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
-        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_h" }),
-        react_1.default.createElement(TextLabel_1.TextLabel, { styleTheme: "displayBold", colorTheme: "sysTextPrimary", text: heroText }),
-        leadText && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_f" }),
-            react_1.default.createElement(TextLabel_1.TextLabel, { styleTheme: "leadParaRegular", colorTheme: leadTextColorTheme === 'emphasis' ? 'sysTextPrimary' : 'sysTextSecondary', text: leadText })))));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "Hero", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_h" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "displayBold", colorTheme: "sysTextPrimary", text: heroText }, void 0), leadText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "leadParaRegular", colorTheme: leadTextColorTheme === 'emphasis' ? 'sysTextPrimary' : 'sysTextSecondary', text: leadText }, void 0)] }, void 0))] }), void 0));
 }
 exports.default = Hero;

package/dist/src/desktop/components/HorizontalFormGroup/HorizontalFormGroup.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
+import type { PDSTextType } from '../../../common';
 declare type HorizontalFormGroupProps = {
     labelText: PDSTextType;
     captionText?: PDSTextType;

package/dist/src/desktop/components/HorizontalFormGroup/HorizontalFormGroup.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,29 +33,21 @@ 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 hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function HorizontalFormGroup(_a) {
     var labelText = _a.labelText, captionText = _a.captionText, inputForm = _a.inputForm, _b = _a.labelAlignType, labelAlignType = _b === void 0 ? 'center' : _b, labelTopSpacing = _a.labelTopSpacing;
-    return (react_1.default.createElement(S_HorizontalFormGroupBox, { "x-pds-name": "HorizontalFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", labelAlignType: labelAlignType },
-        react_1.default.createElement(S_LabelWrapper, { labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, labelAlignType === 'center' ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" }))),
-        react_1.default.createElement(S_InputFormWrapper, null, inputForm),
-        captionText && (react_1.default.createElement(S_CaptionWrapper, null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" })))));
+    return ((0, jsx_runtime_1.jsxs)(S_HorizontalFormGroupBox, __assign({ "x-pds-name": "HorizontalFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", labelAlignType: labelAlignType }, { children: [(0, jsx_runtime_1.jsx)(S_LabelWrapper, __assign({ labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, { children: labelAlignType === 'center' ? ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 }, void 0)) : ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" }, void 0)) }), void 0), (0, jsx_runtime_1.jsx)(S_InputFormWrapper, { children: inputForm }, void 0), captionText && ((0, jsx_runtime_1.jsxs)(S_CaptionWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" }, void 0)] }, void 0))] }), void 0));
 }
 var centerArea = "\n'label inputForm'\n'.     caption'";
 var topArea = "\n'label inputForm'\n'label caption'";
 var small = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 10px;\n"], ["\n  margin-top: 10px;\n"])));
 var large = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 14px;\n"], ["\n  margin-top: 14px;\n"])));
-var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  grid-column-gap: ", ";\n  grid-template-columns: 112px auto;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"], ["\n  display: grid;\n  grid-column-gap: ", ";\n  grid-template-columns: 112px auto;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"])), function (_a) {
+var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  grid-column-gap: ", ";\n  grid-template-areas: ", ";\n  grid-template-columns: 112px auto;\n  grid-template-rows: auto 1fr;\n"], ["\n  display: grid;\n  grid-column-gap: ", ";\n  grid-template-areas: ", ";\n  grid-template-columns: 112px auto;\n  grid-template-rows: auto 1fr;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {

package/dist/src/desktop/components/IconButton/IconButton.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
+/// <reference types="react" />
+import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
 export declare type IconButtonProps = {
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle';

package/dist/src/desktop/components/IconButton/IconButton.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 transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
@@ -65,8 +73,7 @@ function IconButton(_a) {
         }
         return iconStateColorObj[fillType];
     };
-    return (react_1.default.createElement(S_IconButton, { "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown },
-        react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType })));
+    return ((0, jsx_runtime_1.jsx)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0) }), void 0));
 }
 var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;

package/dist/src/desktop/components/ImageSlide/ImageSlide.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]; } });
@@ -35,8 +46,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 var nuka_carousel_1 = __importDefault(require("nuka-carousel"));
-var react_1 = __importStar(require("react"));
+var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var ImageSlide = function (_a) {
@@ -44,15 +56,11 @@ var ImageSlide = function (_a) {
     var renderDotControls = function (_a) {
         var currentSlide = _a.currentSlide, slideCount = _a.slideCount;
         var dotList = __spreadArray([], Array(slideCount), true).map(function (x, i) { return ({ id: i }); });
-        return (react_1.default.createElement(react_1.default.Fragment, null, dotList.map(function (item, i) { return (react_1.default.createElement(S_Dot, { key: item.id, currentSlide: currentSlide, i: i })); })));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: dotList.map(function (item, i) { return ((0, jsx_runtime_1.jsx)(S_Dot, { currentSlide: currentSlide, i: i }, item.id)); }) }, void 0));
     };
-    return (react_1.default.createElement(S_ImageSlideWrapper, { "x-pds-name": "ImageSlide", "x-pds-element-type": "component", "x-pds-device-type": "desktop", imageWidth: imageWidth },
-        react_1.default.createElement(nuka_carousel_1.default, { cellSpacing: 24, cellAlign: "center", slideWidth: imageWidth === 'responsive' ? 1 : imageWidth + "px", renderCenterLeftControls: null, renderCenterRightControls: null, renderBottomCenterControls: function (props) { return renderDotControls(props); }, slidesToShow: 1, wrapAround: true }, src &&
-            src.length > 0 &&
-            src.map(function (imageSrc, i) { return (react_1.default.createElement(react_1.Fragment, { key: i.toString() },
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement(S_BottomGradient, { imageShapeType: imageShapeType, imageWidth: imageWidth, radius: radius }),
-                    react_1.default.createElement(hybrid_1.ImageView, { src: status === 'active' ? imageSrc : '', shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: "cover", radius: radius, borderMode: borderMode })))); }))));
+    return ((0, jsx_runtime_1.jsx)(S_ImageSlideWrapper, __assign({ "x-pds-name": "ImageSlide", "x-pds-element-type": "component", "x-pds-device-type": "desktop", imageWidth: imageWidth }, { children: (0, jsx_runtime_1.jsx)(nuka_carousel_1.default, __assign({ cellSpacing: 24, cellAlign: "center", slideWidth: imageWidth === 'responsive' ? 1 : imageWidth + "px", renderCenterLeftControls: null, renderCenterRightControls: null, renderBottomCenterControls: function (props) { return renderDotControls(props); }, slidesToShow: 1, wrapAround: true }, { children: src &&
+                src.length > 0 &&
+                src.map(function (imageSrc, i) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(S_BottomGradient, { imageShapeType: imageShapeType, imageWidth: imageWidth, radius: radius }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: status === 'active' ? imageSrc : '', shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: "cover", radius: radius, borderMode: borderMode }, void 0)] }, void 0) }, i.toString())); }) }), void 0) }), void 0));
 };
 var S_Dot = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 8px;\n  display: inline-block;\n  height: 8px;\n  margin: ", ";\n  width: 8px;\n\n  ", "\n"], ["\n  border-radius: 8px;\n  display: inline-block;\n  height: 8px;\n  margin: ", ";\n  width: 8px;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/LottieReactionButton/LottieReactionButton.d.ts

@@ -1,6 +1,6 @@
-import React, { AnimationEventHandler } from 'react';
-import { PDSTextType, UiColors } from '../../../common';
-import { LottieIconNameKeys } from '../../../common/assets/lotties';
+import { AnimationEventHandler } from 'react';
+import type { PDSTextType, UiColors } from '../../../common';
+import type { LottieIconNameKeys } from '../../../common/assets/lotties';
 export declare type LottieReactionButtonProps = {
     text?: PDSTextType;
     actionText?: PDSTextType;

package/dist/src/desktop/components/LottieReactionButton/LottieReactionButton.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 transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var numberHelper_1 = require("../../../common/utils/numberHelper");
@@ -68,17 +80,13 @@ function LottieReactionButton(_a) {
             onComplete(e);
         }
     };
-    return (react_1.default.createElement(S_Button, { "x-pds-name": "LottieReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation, isDefaultBackgroundColor: state === 'view_only' || isBackgroundColor },
-        react_1.default.createElement(hybrid_1.LottieIcon, { iconName: iconName, lottieRef: lottieRef, autoplayMode: "none", loopMode: "none", onComplete: handleLottieIconComplete }),
-        displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: isActionText && actionText ? actionText : convertFormatText, singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })))));
+    return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "LottieReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation, isDefaultBackgroundColor: state === 'view_only' || isBackgroundColor }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.LottieIcon, { iconName: iconName, lottieRef: lottieRef, autoplayMode: "none", loopMode: "none", onComplete: handleLottieIconComplete }, void 0), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: isActionText && actionText ? actionText : convertFormatText, singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0)] }, void 0))] }), void 0));
 }
 var disabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  cursor: default;\n"], ["\n  background-color: ", ";\n  cursor: default;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var normal = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  border: none;\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n"], ["\n  cursor: pointer;\n  border: none;\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n"])), transitionStyle_1.ButtonTransition, function (_a) {
+var normal = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: none;\n  cursor: pointer;\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n"], ["\n  border: none;\n  cursor: pointer;\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n"])), transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_on_base_hover;
 }, function (_a) {
@@ -87,8 +95,8 @@ var normal = (0, styled_components_1.css)(templateObject_2 || (templateObject_2
 });
 var view_only = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
 var buttonAnimation = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  @keyframes gelatine {\n    from,\n    to {\n      transform: scale(1, 1);\n    }\n    25% {\n      transform: scale(0.95, 1.1);\n    }\n    50% {\n      transform: scale(1.05, 0.9);\n    }\n    75% {\n      transform: scale(0.97, 1.05);\n    }\n  }\n\n  animation: gelatine 1s 1;\n"], ["\n  @keyframes gelatine {\n    from,\n    to {\n      transform: scale(1, 1);\n    }\n    25% {\n      transform: scale(0.95, 1.1);\n    }\n    50% {\n      transform: scale(1.05, 0.9);\n    }\n    75% {\n      transform: scale(0.97, 1.05);\n    }\n  }\n\n  animation: gelatine 1s 1;\n"])));
-var icon_only = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n  min-height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  height: 32px;\n  width: 32px;\n  min-height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
-var icon_text = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 32px;\n  min-height: 32px;\n  min-width: 64px;\n  border-radius: 16px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  height: 32px;\n  min-height: 32px;\n  min-width: 64px;\n  border-radius: 16px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+var icon_only = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-radius: 16px;\n  height: 32px;\n  min-height: 32px;\n  min-width: 32px;\n  width: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 16px;\n  height: 32px;\n  min-height: 32px;\n  min-width: 32px;\n  width: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
+var icon_text = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 16px;\n  height: 32px;\n  min-height: 32px;\n  min-width: 64px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 16px;\n  height: 32px;\n  min-height: 32px;\n  min-width: 64px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });