pds-dev-kit-web-test 0.2.29 → 0.2.31

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type DesktopHeadlessModalProps = {
+type DesktopHeadlessModalProps = {
     body: React.ReactNode;
     size?: 'large' | 'medium' | 'small' | 'rlarge';
     dimmedClickCloseMode?: 'use' | 'none';

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -83,7 +87,7 @@ function DesktopHeadlessModal(_a) {
             clearTimeout(isScrolling);
         };
     }, []);
-    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { "x-pds-name": "DesktopHeadlessModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", onMouseDown: handleClickOutside }, void 0), (0, jsx_runtime_1.jsx)(S_ModalWrapper, __assign({ size: size }, { children: (0, jsx_runtime_1.jsx)(S_Body, __assign({ ref: targetRef, scrollVisibleType: scrollVisibleType }, { children: body && body }), void 0) }), void 0)] }, void 0), container);
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { "x-pds-name": "DesktopHeadlessModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", onMouseDown: handleClickOutside }), (0, jsx_runtime_1.jsx)(S_ModalWrapper, __assign({ size: size }, { children: (0, jsx_runtime_1.jsx)(S_Body, __assign({ ref: targetRef, scrollVisibleType: scrollVisibleType }, { children: body && body })) }))] }), container);
 }
 var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/panels/DesktopTutorialModal/Components/SideTab/SideTab.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { PDSTabItemOption } from '../../../../../common/types';
-export declare type ItemType = PDSTabItemOption;
-declare type SideTabProps = {
+export type ItemType = PDSTabItemOption;
+type SideTabProps = {
     itemArray: ItemType[];
 };
 declare function SideTab({ itemArray }: SideTabProps): JSX.Element;

package/dist/src/desktop/panels/DesktopTutorialModal/Components/SideTab/SideTab.js

@@ -29,8 +29,8 @@ function SideTab(_a) {
         }
     };
     return ((0, jsx_runtime_1.jsx)("div", { children: itemArray.map(function (item, index) {
-            return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ onClick: function (e) { return handleClickTabItem(item, e); } }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: item.title, styleTheme: item.isActive ? 'subTitleBold' : 'subTitleRegular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary' }, void 0) }), index));
-        }) }, void 0));
+            return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ onClick: function (e) { return handleClickTabItem(item, e); } }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: item.title, styleTheme: item.isActive ? 'subTitleBold' : 'subTitleRegular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary' }) }), index));
+        }) }));
 }
 var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  & div {\n    line-height: 1.3;\n  }\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  & div {\n    line-height: 1.3;\n  }\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
-export declare type DesktopTutorialModalInfoType = {
+export type DesktopTutorialModalInfoType = {
     sideTabTitleText: PDSTextType;
     infoTitleText?: PDSTextType;
     infoDescText?: PDSTextType;
@@ -9,7 +9,7 @@ export declare type DesktopTutorialModalInfoType = {
     btn1Text?: PDSTextType;
     onClickBtn1?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare type DesktopTutorialModalProps = {
+type DesktopTutorialModalProps = {
     modalTitleText: PDSTextType;
     infoArray: DesktopTutorialModalInfoType[];
     onClose: (e: React.MouseEvent<HTMLButtonElement>) => void;

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

@@ -49,17 +49,17 @@ function DesktopTutorialModal(_a) {
             onClose(e);
         }
     };
-    var _b = (0, react_1.useState)(infoArray[0].sideTabTitleText + "0"), selectedItem = _b[0], setSelectedItem = _b[1];
+    var _b = (0, react_1.useState)("".concat(infoArray[0].sideTabTitleText, "0")), selectedItem = _b[0], setSelectedItem = _b[1];
     var sideTabTitleArray = infoArray.map(function (data, index) {
         return {
             title: data.sideTabTitleText,
-            isActive: selectedItem === "" + data.sideTabTitleText + index,
-            onClick: function () { return setSelectedItem("" + data.sideTabTitleText + index); }
+            isActive: selectedItem === "".concat(data.sideTabTitleText).concat(index),
+            onClick: function () { return setSelectedItem("".concat(data.sideTabTitleText).concat(index)); }
         };
     });
-    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}, void 0), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopTutorialModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftPanel, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: modalTitleText, lineLimit: 2, ellipsisMode: "use", styleTheme: "headingBold" }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)(S_SideTabWrapper, { children: [(0, jsx_runtime_1.jsx)(Components_1.SideTab, { itemArray: sideTabTitleArray }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_i" }, void 0)] }, void 0)] }, void 0), infoArray
-                        .filter(function (data, index) { return selectedItem === "" + data.sideTabTitleText + index; })
-                        .map(function (data, index) { return ((0, jsx_runtime_1.jsxs)(S_RightPanel, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: data.imageSrc, shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", backgroundFillMode: "use" }, void 0), (0, jsx_runtime_1.jsxs)(S_InfoBox, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoTitleText ? data.infoTitleText : data.sideTabTitleText, styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoDescText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary" }, void 0)] }, void 0), data.btnMode === 'btn_amount1' && ((0, jsx_runtime_1.jsx)(S_Footer, { children: (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: data.btn1Text, type: "button", size: "medium", onClick: data.onClickBtn1 }, void 0) }, void 0))] }, "" + data.sideTabTitleText + index)); }), (0, jsx_runtime_1.jsx)(S_IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_xmark", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickCloseBtn }, void 0) }, void 0)] }), void 0)] }, void 0), container);
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopTutorialModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftPanel, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: modalTitleText, lineLimit: 2, ellipsisMode: "use", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsxs)(S_SideTabWrapper, { children: [(0, jsx_runtime_1.jsx)(Components_1.SideTab, { itemArray: sideTabTitleArray }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_i" })] })] }), infoArray
+                        .filter(function (data, index) { return selectedItem === "".concat(data.sideTabTitleText).concat(index); })
+                        .map(function (data, index) { return ((0, jsx_runtime_1.jsxs)(S_RightPanel, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: data.imageSrc, shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", backgroundFillMode: "use" }), (0, jsx_runtime_1.jsxs)(S_InfoBox, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoTitleText ? data.infoTitleText : data.sideTabTitleText, styleTheme: "headingBold" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoDescText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary" })] }), data.btnMode === 'btn_amount1' && ((0, jsx_runtime_1.jsx)(S_Footer, { children: (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: data.btn1Text, type: "button", size: "medium", onClick: data.onClickBtn1 }) }))] }, "".concat(data.sideTabTitleText).concat(index))); }), (0, jsx_runtime_1.jsx)(S_IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_xmark", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickCloseBtn }) })] }))] }), container);
 }
 var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,7 +1,7 @@
 import type { UiColors } from '../../../common';
 import type { CSSProperties } from 'react';
-declare type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
-export declare type SectionSheetProps = {
+type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
+export type SectionSheetProps = {
     width: string;
     height: string;
     backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
@@ -20,7 +20,7 @@ export declare type SectionSheetProps = {
     children: React.ReactNode;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
-export declare type StyleProps = {
+export type StyleProps = {
     $width?: string;
     $height?: string;
     $backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -72,11 +76,11 @@ function SectionSheet(_a) {
             onClick(e);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, { children: children }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, { children: children })));
 }
 var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
     var $radius = _a.$radius;
-    return $radius + "px";
+    return "".concat($radius, "px");
 });
 var paddingTopStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, paddingTop = _a.paddingTop;
@@ -112,7 +116,7 @@ var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templa
     return (borderMode === 'use' ? 'solid' : 'none');
 }, function (_a) {
     var $borderWidth = _a.$borderWidth;
-    return $borderWidth + "px";
+    return "".concat($borderWidth, "px");
 }, function (_a) {
     var hasOnClick = _a.hasOnClick;
     return (hasOnClick ? 'pointer' : 'default');

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type DividerProps = {
+export type DividerProps = {
     displayType?: 'line' | 'area';
     direction?: 'vertical' | 'horizontal';
     height?: number;

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

@@ -5,7 +5,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -27,7 +31,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 function Divider(_a) {
     var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
-    return ((0, jsx_runtime_1.jsx)(S_Divider, { "x-pds-name": "Divider", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }, void 0));
+    return ((0, jsx_runtime_1.jsx)(S_Divider, { "x-pds-name": "Divider", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
 }
 var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: ", ";\n  width: 100%;\n"], ["\n  background-color: ", ";\n  height: ", ";\n  width: 100%;\n"])), function (_a) {
     var displayType = _a.displayType, theme = _a.theme;
@@ -49,7 +53,7 @@ var vertical = (0, styled_components_1.css)(templateObject_2 || (templateObject_
     return theme.ui_cpnt_divider;
 }, function (_a) {
     var $height = _a.$height;
-    return ($height ? $height + "px" : '100%');
+    return ($height ? "".concat($height, "px") : '100%');
 });
 var divider1Color = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

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

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

@@ -14,6 +14,6 @@ var Icon = function (_a) {
     var SelectedIcon = fillType === 'line'
         ? line_1.default[iconName] || fill_1.default[iconName]
         : fill_1.default[iconName] || line_1.default[iconName];
-    return SelectedIcon ? ((0, jsx_runtime_1.jsx)(SelectedIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } }, void 0)) : ((0, jsx_runtime_1.jsx)(DefaultIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } }, void 0));
+    return SelectedIcon ? ((0, jsx_runtime_1.jsx)(SelectedIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } })) : ((0, jsx_runtime_1.jsx)(DefaultIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } }));
 };
 exports.default = Icon;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type ImageViewProps = {
+export type ImageViewProps = {
     src?: string;
     shapeType?: 'round' | 'circular' | 'rectangle';
     radius?: 8 | 16 | 24;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -41,17 +45,17 @@ var ImageView = function (_a) {
     var src = _a.src, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g, isLoading = _a.isLoading;
     var LoadingAutoImageView = function () {
         if (width && !height && !noImageHeight) {
-            return ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": width, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: "4_3" }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": width, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: "4_3" }) })));
         }
         if (height && height !== 'responsive' && !width && !noImageWidth) {
-            return ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": (height * 4) / 3, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: "4_3" }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": (height * 4) / 3, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: "4_3" }) })));
         }
         if (height === 'responsive' && !width && !noImageWidth) {
-            return ((0, jsx_runtime_1.jsx)(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": 300, shapeType: shapeType, "$radius": radius }, void 0));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": 300, shapeType: shapeType, "$radius": radius }));
         }
-        return ((0, jsx_runtime_1.jsx)(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, shapeType: shapeType, "$radius": radius }, void 0));
+        return ((0, jsx_runtime_1.jsx)(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, shapeType: shapeType, "$radius": radius }));
     };
-    var LoadingRatioImageView = ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": width, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: ratio }, void 0) }), void 0));
+    var LoadingRatioImageView = ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": width, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: ratio }) })));
     var LoadingImageView = function () {
         if (ratio === 'auto') {
             return LoadingAutoImageView();
@@ -62,42 +66,42 @@ var ImageView = function (_a) {
         if (isLoading) {
             return LoadingImageView();
         }
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ratio === 'auto' ? ((0, jsx_runtime_1.jsx)(S_AutoImageViewWrapper, __assign({ "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, { children: src && ((0, jsx_runtime_1.jsx)(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType }, void 0)) }), void 0)) : ((0, jsx_runtime_1.jsx)(S_RatioImageViewWrapper, __assign({ "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode }, { children: (0, jsx_runtime_1.jsx)(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio }, void 0) }), void 0)) }, void 0));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ratio === 'auto' ? ((0, jsx_runtime_1.jsx)(S_AutoImageViewWrapper, __assign({ "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, { children: src && ((0, jsx_runtime_1.jsx)(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })) }))) : ((0, jsx_runtime_1.jsx)(S_RatioImageViewWrapper, __assign({ "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode }, { children: (0, jsx_runtime_1.jsx)(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio }) }))) }));
     };
     return ImageViewVariation();
 };
 var wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, backgroundFillMode = _a.backgroundFillMode;
-    return backgroundFillMode === 'use' ? "background-color: " + theme.ui_temp_grey_04 : '';
+    return backgroundFillMode === 'use' ? "background-color: ".concat(theme.ui_temp_grey_04) : '';
 }, function (_a) {
     var borderMode = _a.borderMode, theme = _a.theme;
-    return borderMode === 'use' && "border: 1px solid " + theme.ui_profile_image_border;
+    return borderMode === 'use' && "border: 1px solid ".concat(theme.ui_profile_image_border);
 }, function (_a) {
     var shapeType = _a.shapeType, $radius = _a.$radius;
     return shapeType &&
         {
-            round: "border-radius: " + $radius + "px",
+            round: "border-radius: ".concat($radius, "px"),
             circular: 'border-radius: 50%',
             rectangle: ''
         }[shapeType];
 });
 var S_RatioImageViewWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  min-width: ", ";\n  width: ", ";\n"], ["\n  ", "\n  min-width: ", ";\n  width: ", ";\n"])), wrapperStyle, function (_a) {
     var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : $width + "px");
+    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
 }, function (_a) {
     var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : $width + "px");
+    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
 });
 var S_RatioImageView = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-position: center;\n  background-repeat: no-repeat;\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  background-position: center;\n  background-repeat: no-repeat;\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, $src = _a.$src;
-    return $src ? "background-image: url(" + $src + ")" : "background-color: " + theme.ui_temp_grey_04;
+    return $src ? "background-image: url(".concat($src, ")") : "background-color: ".concat(theme.ui_temp_grey_04);
 }, function (_a) {
     var scaleType = _a.scaleType;
     return scaleType &&
         {
             fill: 'background-size: 100% 100%',
-            contain: "background-size: " + scaleType,
-            cover: "background-size: " + scaleType,
+            contain: "background-size: ".concat(scaleType),
+            cover: "background-size: ".concat(scaleType),
             none: 'background-size: auto'
         }[scaleType];
 }, function (_a) {
@@ -118,51 +122,51 @@ var S_RatioImageView = styled_components_1.default.div(templateObject_3 || (temp
 });
 var onlyWidthWrapperStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var noImageHeight = _a.noImageHeight, $src = _a.$src;
-    return (!$src && noImageHeight ? noImageHeight + "px" : 'auto');
+    return (!$src && noImageHeight ? "".concat(noImageHeight, "px") : 'auto');
 }, function (_a) {
     var noImageHeight = _a.noImageHeight, $src = _a.$src;
-    return !$src && noImageHeight ? noImageHeight + "px" : 'auto';
+    return !$src && noImageHeight ? "".concat(noImageHeight, "px") : 'auto';
 }, function (_a) {
     var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : $width + "px");
+    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
 }, function (_a) {
     var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : $width + "px");
+    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
 }, function (_a) {
     var theme = _a.theme, noImageHeight = _a.noImageHeight, $src = _a.$src;
-    return !$src && noImageHeight ? "background-color: " + theme.ui_temp_grey_04 : '';
+    return !$src && noImageHeight ? "background-color: ".concat(theme.ui_temp_grey_04) : '';
 });
 var onlyHeightWrapperStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var $height = _a.$height;
-    return ($height === 'responsive' ? '100%' : $height + "px");
+    return ($height === 'responsive' ? '100%' : "".concat($height, "px"));
 }, function (_a) {
     var $height = _a.$height;
-    return ($height === 'responsive' ? '100%' : $height + "px");
+    return ($height === 'responsive' ? '100%' : "".concat($height, "px"));
 }, function (_a) {
     var noImageWidth = _a.noImageWidth, $src = _a.$src;
-    return (!$src && noImageWidth ? noImageWidth + "px" : 'auto');
+    return (!$src && noImageWidth ? "".concat(noImageWidth, "px") : 'auto');
 }, function (_a) {
     var noImageWidth = _a.noImageWidth, $src = _a.$src;
-    return (!$src && noImageWidth ? noImageWidth + "px" : 'auto');
+    return (!$src && noImageWidth ? "".concat(noImageWidth, "px") : 'auto');
 }, function (_a) {
     var theme = _a.theme, noImageWidth = _a.noImageWidth, $src = _a.$src;
-    return !$src && noImageWidth ? "background-color: " + theme.ui_temp_grey_04 : '';
+    return !$src && noImageWidth ? "background-color: ".concat(theme.ui_temp_grey_04) : '';
 });
 var bothWrapperStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var $height = _a.$height;
-    return ($height === 'responsive' ? '100%' : $height + "px");
+    return ($height === 'responsive' ? '100%' : "".concat($height, "px"));
 }, function (_a) {
     var $height = _a.$height;
-    return ($height === 'responsive' ? '100%' : $height + "px");
+    return ($height === 'responsive' ? '100%' : "".concat($height, "px"));
 }, function (_a) {
     var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : $width + "px");
+    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
 }, function (_a) {
     var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : $width + "px");
+    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
 }, function (_a) {
     var theme = _a.theme, $src = _a.$src;
-    return (!$src ? "background-color: " + theme.ui_temp_grey_04 : '');
+    return (!$src ? "background-color: ".concat(theme.ui_temp_grey_04) : '');
 });
 var onlyWidthStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: auto;\n  width: 100%;\n"], ["\n  height: auto;\n  width: 100%;\n"])));
 var onlyHeightStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 100%;\n  width: auto;\n"], ["\n  height: 100%;\n  width: auto;\n"])));
@@ -179,7 +183,7 @@ var S_AutoImageViewWrapper = styled_components_1.default.div(templateObject_10 |
 });
 var S_AutoImageView = styled_components_1.default.img(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var scaleType = _a.scaleType;
-    return (scaleType !== 'none' ? "object-fit: " + scaleType + ";" : '');
+    return (scaleType !== 'none' ? "object-fit: ".concat(scaleType, ";") : '');
 }, function (_a) {
     var $width = _a.$width, $height = _a.$height;
     return $width && !$height && onlyWidthStyle;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type LinearProgressProps = {
+export type LinearProgressProps = {
     value?: number;
 };
 declare function LinearProgress({ value }: LinearProgressProps): JSX.Element;

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

@@ -22,7 +22,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 function LinearProgress(_a) {
     var _b = _a.value, value = _b === void 0 ? 0 : _b;
-    return ((0, jsx_runtime_1.jsx)(S_LinearProgressWrapper, __assign({ "x-pds-name": "LinearProgress", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", value: value }, { children: (0, jsx_runtime_1.jsx)(S_LinearProgressBar, { value: value }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_LinearProgressWrapper, __assign({ "x-pds-name": "LinearProgress", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", value: value }, { children: (0, jsx_runtime_1.jsx)(S_LinearProgressBar, { value: value }) })));
 }
 var S_LinearProgressWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 4px;\n  overflow: hidden;\n  position: relative;\n"], ["\n  background-color: ", ";\n  height: 4px;\n  overflow: hidden;\n  position: relative;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,7 +1,7 @@
 import { LottieRef } from 'lottie-react';
 import { LottieIconNameKeys } from '../../../common/assets/lotties';
 import type { AnimationEventHandler } from 'react';
-export declare type LottieIconProps = {
+export type LottieIconProps = {
     iconName?: LottieIconNameKeys;
     size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;
     autoplayMode?: 'none' | 'use';

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

@@ -14,20 +14,20 @@ var lotties_1 = __importDefault(require("../../../common/assets/lotties"));
 var LottieIcon = function (_a) {
     var _b = _a.iconName, iconName = _b === void 0 ? 'ic_lottie_heart' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.autoplayMode, autoplayMode = _d === void 0 ? 'use' : _d, _e = _a.loopMode, loopMode = _e === void 0 ? 'use' : _e, lottieRef = _a.lottieRef, onComplete = _a.onComplete;
     var animationData = lotties_1.default[iconName];
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_Lottie, { "x-pds-name": "LottieIcon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", animationData: animationData, lottieRef: lottieRef, autoplay: autoplayMode === 'use' ? true : false, loop: loopMode === 'use' ? true : false, "$size": size, onComplete: onComplete }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_Lottie, { "x-pds-name": "LottieIcon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", animationData: animationData, lottieRef: lottieRef, autoplay: autoplayMode === 'use' ? true : false, loop: loopMode === 'use' ? true : false, "$size": size, onComplete: onComplete }) }));
 };
 var S_Lottie = (0, styled_components_1.default)(lottie_react_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
     var $size = _a.$size;
-    return $size + "px";
+    return "".concat($size, "px");
 }, function (_a) {
     var $size = _a.$size;
-    return $size + "px";
+    return "".concat($size, "px");
 }, function (_a) {
     var $size = _a.$size;
-    return $size + "px";
+    return "".concat($size, "px");
 }, function (_a) {
     var $size = _a.$size;
-    return $size + "px";
+    return "".concat($size, "px");
 });
 exports.default = LottieIcon;
 var templateObject_1;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type SpacingProps = {
+export type SpacingProps = {
     size: 'spacing_a' | 'spacing_b' | 'spacing_c' | 'spacing_d' | 'spacing_e' | 'spacing_f' | 'spacing_g' | 'spacing_h' | 'spacing_i' | 'spacing_j' | 'spacing_k' | 'spacing_l' | 'spacing_m' | 'spacing_n';
     spacingType?: 'height' | 'width';
 };

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

@@ -5,7 +5,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -27,7 +31,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 function Spacing(_a) {
     var size = _a.size, _b = _a.spacingType, spacingType = _b === void 0 ? 'height' : _b;
-    return ((0, jsx_runtime_1.jsx)(S_Spacing, { "x-pds-name": "Spacing", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", size: size, spacingType: spacingType }, void 0));
+    return ((0, jsx_runtime_1.jsx)(S_Spacing, { "x-pds-name": "Spacing", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", size: size, spacingType: spacingType }));
 }
 var spacing_a = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type SwitchProps = {
+type SwitchProps = {
     name: string;
     status?: 'off' | 'on';
     state?: 'normal' | 'disabled';

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

@@ -25,7 +25,7 @@ function Switch(_a) {
     var handleChange = function (e) {
         onClick && onClick(e.target.checked);
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Switch, __assign({ "x-pds-name": "Switch", "x-pds-element-type": "component", "x-pds-device-type": "hybrid" }, { children: [(0, jsx_runtime_1.jsx)(S_Input, { type: "checkbox", hidden: true, id: name, checked: status === 'on', disabled: state === 'disabled', onChange: handleChange }, void 0), (0, jsx_runtime_1.jsx)(S_Label, { htmlFor: name, disabled: state === 'disabled' }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_Switch, __assign({ "x-pds-name": "Switch", "x-pds-element-type": "component", "x-pds-device-type": "hybrid" }, { children: [(0, jsx_runtime_1.jsx)(S_Input, { type: "checkbox", hidden: true, id: name, checked: status === 'on', disabled: state === 'disabled', onChange: handleChange }), (0, jsx_runtime_1.jsx)(S_Label, { htmlFor: name, disabled: state === 'disabled' })] })));
 }
 var S_Switch = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 32px;\n  position: relative;\n  width: 56px;\n"], ["\n  height: 32px;\n  position: relative;\n  width: 56px;\n"])));
 var S_Label = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 24px;\n  cursor: ", ";\n  height: 32px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 56px;\n\n  &::after {\n    background: ", ";\n    border-radius: 24px;\n    content: '';\n    display: block;\n    height: 24px;\n    margin: ", ";\n    width: 24px;\n  }\n"], ["\n  background: ", ";\n  border-radius: 24px;\n  cursor: ", ";\n  height: 32px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 56px;\n\n  &::after {\n    background: ", ";\n    border-radius: 24px;\n    content: '';\n    display: block;\n    height: 24px;\n    margin: ", ";\n    width: 24px;\n  }\n"])), function (_a) {

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
 import { DesktopFontSize, FontWeight, IFormValues, PDSTextType, UiColors } from '../../../../common';
-export declare type TextFieldBaseProps = {
+export type TextFieldBaseProps = {
     name: Path<IFormValues>;
     hintText?: PDSTextType;
     defaultText?: PDSTextType;