@digitalc/dxp-ui 0.0.6-alpha.1 → 0.0.6-alpha.10

package/lib/components/Drawer/index.js

@@ -67,7 +67,8 @@ var BottomDrawer = ({
   visible,
   onClose,
   children,
-  height,
+  width = "400px",
+  height = "auto",
   title,
   drawerType = DrawerTypeEnum.DrawerTypeDefault,
   bottomBtnText,
@@ -78,7 +79,9 @@ var BottomDrawer = ({
   imageSrc,
   onLinkClick,
   onBottomBtnClick,
-  btnDisabled
+  btnDisabled,
+  extra,
+  placement = "bottom"
 }) => {
   const originalBodyOverflow = (0, import_react.useRef)("");
   const [isMounted, setIsMounted] = (0, import_react.useState)(false);
@@ -141,9 +144,6 @@ var BottomDrawer = ({
       }
       .${prefix}-content {
         background: ${colorDrawerBackgroundStandard};
-        border-top-left-radius: ${borderTopLeftRadius}px;
-        border-top-right-radius:${borderTopRightRadius}px;
-        height:${height}px;
       }
       .${prefix}-inner {
         padding-left: ${spacingDrawerPaddingHorizontal}px;
@@ -172,6 +172,28 @@ var BottomDrawer = ({
         padding-left: ${spacingDrawerPaddingHorizontal}px;
         padding-right: ${spacingDrawerPaddingHorizontal}px;
       }
+      .${prefix}-bottom {
+        .${prefix}-content {
+          border-top-left-radius: ${borderTopLeftRadius}px;
+          border-top-right-radius: ${borderTopRightRadius}px;
+          height: ${height};
+        }
+      }
+      .${prefix}-right {
+        .${prefix}-content {
+          border-radius: 0;
+          height: 100%;
+          width: ${width};
+          right: 0;
+          left: auto;
+          top: 0;
+          bottom: auto;
+          max-height: 100%;
+        }
+        .dxp-stickyFooter {
+          position: absolute;
+        }
+      }
     `);
     return hashId;
   };
@@ -194,7 +216,7 @@ var BottomDrawer = ({
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      className: `${prefix}-mask ${visible ? "visible" : ""} ${className || ""}`,
+      className: `${prefix}-mask ${visible ? "visible" : ""} ${className || ""} ${prefix}-${placement}`,
       onClick: onClose
     },
     /* @__PURE__ */ import_react.default.createElement(
@@ -203,7 +225,7 @@ var BottomDrawer = ({
         className: `${prefix}-content ${visible ? "active" : ""}`,
         onClick: (e) => e.stopPropagation()
       },
-      drawerType !== DrawerTypeEnum.DrawerTypeHandler && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-close-warp` }, TitleCom, showClose && /* @__PURE__ */ import_react.default.createElement(import__.Icon, { className: `${prefix}-icon-close`, type: "icon-Close", onClick: onClose })),
+      drawerType !== DrawerTypeEnum.DrawerTypeHandler && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-close-warp` }, extra, TitleCom, showClose && /* @__PURE__ */ import_react.default.createElement(import__.Icon, { className: `${prefix}-icon-close`, type: "icon-Close", onClick: onClose })),
       /* @__PURE__ */ import_react.default.createElement(
         "div",
         {

package/lib/components/Drawer/style/index.less

@@ -63,6 +63,7 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: flex-start;
   }
 
   .drawer-link {

package/lib/components/IconButton/index.js

@@ -144,12 +144,14 @@ var IconButton = (props) => {
         width: ${designTokens.sizingIconButtonMedium}px;
         height: ${designTokens.sizingIconButtonMedium}px;
         padding:  ${designTokens.spacingIconButtonPaddingHorizontal}px ${designTokens.spacingIconButtonPaddingVertical}px;
+        box-sizing: content-box;
       }
 
       .${prefixCls}-small {
         width: ${designTokens.sizingIconButtonSmall}px;
         height: ${designTokens.sizingIconButtonSmall}px;
         padding: ${designTokens.spacingIconButtonPaddingHorizontalSm}px ${designTokens.spacingIconButtonPaddingVerticalSm}px;
+        box-sizing: content-box;
       }
 
       .${prefixCls}-container:hover {

package/lib/components/Modal/index.js

@@ -78,7 +78,7 @@ var Modal = (props) => {
     breakpoint = "mobile",
     size = "50%",
     prefix = `${import_constants.cssClasses.PREFIX}-modal`,
-    footerAlign = "right",
+    footerAlign = "center",
     footer = null,
     className = "",
     centered

package/lib/components/Modal/style/index.less

@@ -74,7 +74,6 @@
       background: #fff;
       border-bottom-right-radius: var(~"--@{prefix}-border-radius-lg");
       border-bottom-left-radius: var(~"--@{prefix}-border-radius-lg");
-      text-align: center;
     }
   }
 

package/lib/components/Navigation/index.d.ts

@@ -20,6 +20,7 @@ export interface INavigationProps {
     hidegoback?: boolean;
     rightLink?: RightLinkConfig;
     titleIconBadge?: TitleIconBadgeConfig;
+    titleStyle?: React.CSSProperties;
     title?: string;
     hideBorder?: boolean;
     className?: string;

package/lib/components/Navigation/index.js

@@ -81,7 +81,8 @@ var Navigation = (_a) => {
     noRight = false,
     leftIconName,
     leftIconSize,
-    hidegoback = false
+    hidegoback = false,
+    titleStyle = {}
   } = _b, restProps = __objRest(_b, [
     "hideBorder",
     "className",
@@ -95,7 +96,8 @@ var Navigation = (_a) => {
     "noRight",
     "leftIconName",
     "leftIconSize",
-    "hidegoback"
+    "hidegoback",
+    "titleStyle"
   ]);
   var _a2;
   const designTokens = (0, import_designTokens.useDesignTokens)();
@@ -177,8 +179,8 @@ var Navigation = (_a) => {
         className
       )
     }, restProps),
-    !hidegoback && /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { className: `${import_constants.cssClasses.PREFIX}-header-back`, customeIconSize: leftIconSize, inverse: isInverse, size: "medium", name: leftIconName || "icon-a-Backarrow-copy", onClick: onGoBack }),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${import_constants.cssClasses.PREFIX}-title-warp`, { hasIconBage: !(0, import_lodash.isEmpty)(titleIconBadge) }) }, !(0, import_lodash.isEmpty)(titleIconBadge) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-title-badge` }, /* @__PURE__ */ import_react.default.createElement(import__.Icon, { inverse: isInverse, size: 24, style: { marginRight: "4px" }, type: titleIconBadge.iconName }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "NavigationBold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, titleIconBadge.title), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-badge` }, +titleIconBadge.badge > 99 ? "99+" : titleIconBadge.badge)) : /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "NavigationBold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, title)),
+    !hidegoback && /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { className: `${import_constants.cssClasses.PREFIX}-header-back`, customIconSize: leftIconSize, inverse: isInverse, size: "medium", name: leftIconName || "icon-a-Backarrow-copy", onClick: onGoBack }),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${import_constants.cssClasses.PREFIX}-title-warp`, { hasIconBage: !(0, import_lodash.isEmpty)(titleIconBadge) }) }, !(0, import_lodash.isEmpty)(titleIconBadge) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-title-badge` }, /* @__PURE__ */ import_react.default.createElement(import__.Icon, { inverse: isInverse, size: 24, style: { marginRight: "4px" }, type: titleIconBadge.iconName }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { style: titleStyle, inverse: isInverse, size: "NavigationBold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, titleIconBadge.title), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-badge` }, +titleIconBadge.badge > 99 ? "99+" : titleIconBadge.badge)) : /* @__PURE__ */ import_react.default.createElement(import__.Text, { style: titleStyle, inverse: isInverse, size: "NavigationBold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, title)),
     !noRight && /* @__PURE__ */ import_react.default.createElement(import__.IconButtonGroup, { className: `${import_constants.cssClasses.PREFIX}-rightWarp` }, (_a2 = rightIcons == null ? void 0 : rightIcons.slice(0, 3)) == null ? void 0 : _a2.map((i, index) => /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { inverse: isInverse, key: index, name: i.iconName, size: "medium", onClick: i.onIconClick })), !(0, import_lodash.isEmpty)(rightLink) && /* @__PURE__ */ import_react.default.createElement(import__.TextLink, { inverse: isInverse, className: `${import_constants.cssClasses.PREFIX}-right-link`, type: import__.TextLinkEnum.default, text: rightLink.linkText, onClick: rightLink.onLinkClick }))
   );
 };

package/lib/components/Notification/style/index.less

@@ -24,7 +24,7 @@
         height: 16px;
         width: 8px;
         position: absolute;
-        z-index: 99;
+        z-index: 8;
         top: -8px;
         border: 1px solid #d5d5d5;
       }

package/lib/components/Selector/ESelector.js

@@ -113,8 +113,8 @@ var ESelector = (props) => {
       path: [`${prefix}-warp`]
     }, () => `
       .${prefix}-warp {
-        div + div {
-          margin-top:${gap || 16}px;
+        > div + div {
+          margin-top: ${gap || 16}px;
         }
         .itemSelect {
           .filterOptions {
@@ -167,7 +167,7 @@ var ESelector = (props) => {
         ),
         onClick: () => !(disabled || item.disabled) && handleChangeSelectValue(item[idKey], item)
       },
-      /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { className: "select-tick", type: "icon-Tick", size: 32, color: "#fff" }),
+      /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { className: "select-tick", type: "icon-Tick", size: 14, color: "#fff" }),
       hasImg ? /* @__PURE__ */ import_react.default.createElement("div", { className: "imgStyle" }, item.image && /* @__PURE__ */ import_react.default.createElement("img", { alt: "", src: item.image }), /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 78 } }, item[labelKey])) : item[labelKey]
     )
   )));

package/lib/components/Selector/style/index.less

@@ -44,14 +44,11 @@
     &.active {
       &.showActiveIcon {
         .select-tick {
-          width: 16px;
-          height: 16px;
           display: block;
           position: absolute;
-          right: 8px;
-          bottom: 4px;
+          right: 2px;
+          bottom: 0;
           z-index: 2;
-          transform: scale(0.5, 0.5);
         }
 
         &:before {
@@ -61,12 +58,12 @@
         &:after {
           position: absolute;
           content: '';
-          width: 64px;
-          height: 64px;
+          width: 48px;
+          height: 48px;
           overflow: hidden;
           border-radius: 10000px;
-          bottom: -32px;
-          right: -32px;
+          bottom: -24px;
+          right: -24px;
           border-radius: 10000px;
           z-index: 1;
         }

package/lib/components/SelectorItem/index.d.ts

@@ -9,6 +9,7 @@ export interface ISelectorItemProps {
     children?: React.ReactNode;
     prefix?: string;
     onChange?: () => void;
+    style?: React.CSSProperties;
 }
 declare const SelectorItem: React.FC<ISelectorItemProps>;
 export default SelectorItem;

package/lib/components/SelectorItem/index.js

@@ -48,6 +48,7 @@ var SelectorItem = (props) => {
     showActiveIcon = false,
     children,
     prefix = `${import_constants.cssClasses.PREFIX}-selectorItem`,
+    style,
     onChange
   } = props;
   const designTokens = (0, import_designTokens.useDesignTokens)();
@@ -112,9 +113,10 @@ var SelectorItem = (props) => {
         if (!disabled && onChange) {
           onChange();
         }
-      }
+      },
+      style
     },
-    /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { className: "select-tick", type: "icon-Tick", size: 32, color: "#fff" }),
+    /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { className: "select-tick", type: "icon-Tick", size: 14, color: "#fff" }),
     children
   );
 };

package/lib/components/SelectorItem/style/index.less

@@ -23,14 +23,11 @@
   &.active {
     &.showActiveIcon {
       .select-tick {
-        width: 16px;
-        height: 16px;
         display: block;
         position: absolute;
-        right: 8px;
-        bottom: 4px;
+        right: 2px;
+        bottom: 0;
         z-index: 2;
-        transform: scale(0.5, 0.5);
       }
 
       &:before {
@@ -40,12 +37,12 @@
       &:after {
         position: absolute;
         content: '';
-        width: 64px;
-        height: 64px;
+        width: 48px;
+        height: 48px;
         overflow: hidden;
         border-radius: 10000px;
-        bottom: -32px;
-        right: -32px;
+        bottom: -24px;
+        right: -24px;
         border-radius: 10000px;
         z-index: 1;
       }

package/lib/components/Stepper/index.js

@@ -125,8 +125,9 @@ var Stepper = (_a) => {
   const { title, nextStep } = (0, import_react.useMemo)(() => {
     var _a2, _b2;
     const hasNextStep = items && current !== void 0 && current < items.length - 1;
+    const curStep = items && current !== void 0;
     return {
-      title: hasNextStep ? ((_a2 = items[current]) == null ? void 0 : _a2.title) || "" : "",
+      title: curStep ? ((_a2 = items[current]) == null ? void 0 : _a2.title) || "" : "",
       nextStep: hasNextStep ? ((_b2 = items[current + 1]) == null ? void 0 : _b2.title) || "" : ""
     };
   }, [items, current]);

package/lib/components/Tabs/index.js

@@ -102,24 +102,25 @@ var Tabs = (props) => {
   const subTitleActiveColor = inverse ? otherDesignToken.colorTabsTextSubtitleInverse : otherDesignToken.colorTabsTextSubtitle;
   const iconColor = inverse ? otherDesignToken.colorTabsIconInactiveInverse : otherDesignToken.colorTabsIconInactive;
   const iconActiveColor = inverse ? otherDesignToken.colorTabsIconActiveInverse : otherDesignToken.colorTabsIconActive;
+  const per = `${import_constants.BASE_CLASS_PREFIX}-tabs`;
   const useCustomButtonStyle = () => {
     const hashId = (0, import_cssinjs.useStyleRegister)({
       theme: import_theme.theme,
       token: {},
       path: [`${prefixCls}`]
     }, () => `
-      .${prefixCls}-card.${prefixCls}-fill>.${prefixCls}-nav .${prefixCls}-tab {
+      .${per}-card.${prefixCls}-fill>.${per}-nav .${per}-tab {
         border-radius: 32px;
         height:40px;
       }
-      .${prefixCls}-card.${prefixCls}-fill .${prefixCls}-nav-list {
+      .${per}-card.${prefixCls}-fill .${per}-nav-list {
         background: ${designFillTokens.colorFillAlter};
         border-radius: 32px;
       }
-      .${prefixCls}-tab-active .${prefixCls}-item-title {
+      .${per}-tab-active .${prefixCls}-item-title {
         font-family:${fontFamilySecondaryBold}-Bold;
       }
-      .${prefixCls}-fill .${prefixCls}-tab-active .${prefixCls}-item-title {
+      .${prefixCls}-fill .${per}-tab-active .${prefixCls}-item-title {
         font-family:${fontFamilySecondaryBold}-Bold;
         font-size: ${fontSizeMobileContentC14};
       }

package/lib/components/Text/index.js

@@ -156,8 +156,8 @@ var Text = (props) => {
       .${prefixCls}-mobile {
         &.${prefixCls}-size-NavigationBold {
           font-size: ${fontSizeMobileNavigation};
-          line-height: 1.25;
-          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
+          line-height: 1.5;
+          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
           font-weight: bold;
         }
         &.${prefixCls}-size-TitleT41Bold {
@@ -199,37 +199,37 @@ var Text = (props) => {
         &.${prefixCls}-size-TitleT15Bold {
           font-size: ${fontSizeMobileTitleT15};
           line-height: ${lineHeightT15M};
-          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
+          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
           font-weight: bold;
         }
         &.${prefixCls}-size-TitleT14Bold {
           font-size: ${fontSizeMobileTitleT14};
           line-height: 1.5;
-          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
+          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
           font-weight: bold;
         }
         &.${prefixCls}-size-TitleT13Bold {
           font-size: ${fontSizeMobileTitleT13};
           line-height: 1.5;
-          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
+          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
           font-weight: bold;
         }
         &.${prefixCls}-size-TitleT12Bold {
           font-size: ${fontSizeMobileTitleT12};
           line-height: 1.5;
-          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
+          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
           font-weight: bold;
         }
         &.${prefixCls}-size-ContentC23Bold {
           font-size: ${fontSizeMobileContentC23};
           line-height: 1.25;
-          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
+          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
           font-weight: bold;
         }
         &.${prefixCls}-size-ContentC21Bold {
           font-size: ${fontSizeMobileContentC21};
           line-height: ${lineHeightC21M};
-          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
+          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
           font-weight: bold;
         }
         &.${prefixCls}-size-ContentC16Bold {
@@ -386,37 +386,37 @@ var Text = (props) => {
         &.${prefixCls}-size-TitleT15Bold {
           font-size: ${fontSizeDesktopTitleT15};
           line-height: ${lineHeightT15};
-          font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
+          font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
           font-weight: bold;
         }
         &.${prefixCls}-size-TitleT14Bold {
           font-size: ${fontSizeDesktopTitleT14};
           line-height: 1.5;
-          font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
+          font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
           font-weight: bold;
         }
         &.${prefixCls}-size-TitleT13Bold {
           font-size: ${fontSizeDesktopTitleT13};
           line-height: 1.5;
-          font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
+          font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
           font-weight: bold;
         }
         &.${prefixCls}-size-TitleT12Bold {
           font-size: ${fontSizeDesktopTitleT12};
           line-height: 1.5;
-          font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
+          font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
           font-weight: bold;
         }
         &.${prefixCls}-size-ContentC23Bold {
           font-size: ${fontSizeDesktopContentC23};
           line-height: 1.25;
-          font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
+          font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
           font-weight: bold;
         }
         &.${prefixCls}-size-ContentC21Bold {
           font-size: ${fontSizeDesktopContentC21};
           line-height: ${lineHeightC21};
-          font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
+          font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
           font-weight: bold;
         }
         &.${prefixCls}-size-ContentC16Bold {

package/lib/components/index.d.ts

@@ -67,3 +67,4 @@ export { default as AppStyleWrapper } from './AppStyleWrapper';
 export { default as Row } from './Row';
 export { default as Col } from './Col';
 export { default as GlobalTokenProvider } from './GlobalTokenProvider';
+export { default as BaseSpin } from './BaseSpin';

package/lib/components/index.js

@@ -37,6 +37,7 @@ __export(components_exports, {
   AmountTitleTypes: () => import_Amount.AmountTitleTypes,
   AppStyleWrapper: () => import_AppStyleWrapper.default,
   BackImageEnum: () => import_Image2.BackImageEnum,
+  BaseSpin: () => import_BaseSpin.default,
   Button: () => import_Button.default,
   Card: () => import_Card.default,
   Checkbox: () => import_Checkbox.default,
@@ -122,3 +123,4 @@ var import_AppStyleWrapper = __toESM(require("./AppStyleWrapper"));
 var import_Row = __toESM(require("./Row"));
 var import_Col = __toESM(require("./Col"));
 var import_GlobalTokenProvider = __toESM(require("./GlobalTokenProvider"));
+var import_BaseSpin = __toESM(require("./BaseSpin"));

package/lib/tokens/DXPGlobal.js

@@ -33,5 +33,5 @@ __export(DXPGlobal_exports, {
 });
 module.exports = __toCommonJS(DXPGlobal_exports);
 var import_token = __toESM(require("../assets/token.json"));
-var dxpToken = import_token.default.tm;
+var dxpToken = import_token.default.eSales;
 var DXPGlobal_default = dxpToken;

package/lib/utils/deviceType.js

@@ -33,7 +33,9 @@ var checkIsMobile = () => {
   if (typeof window === "undefined") {
     return false;
   }
-  if (navigator.maxTouchPoints > 0) {
+  const hasTouch = navigator.maxTouchPoints > 0;
+  const isSmallScreen = window.matchMedia("(max-width: 768px)").matches;
+  if (hasTouch && isSmallScreen) {
     return true;
   }
   const userAgent = navigator.userAgent || navigator.vendor || window.opera;

package/lib/utils/scaleTool.js

@@ -27,6 +27,7 @@ __export(scaleTool_exports, {
   wScale: () => wScale
 });
 module.exports = __toCommonJS(scaleTool_exports);
+var import_deviceType = require("./deviceType");
 var getViewportSize = () => {
   var _a, _b, _c, _d;
   if (typeof document === "undefined") {
@@ -42,14 +43,14 @@ var DesignHeight = 812;
 var viewportSize = () => getViewportSize();
 var wScale = (size) => {
   const { width } = getViewportSize();
-  if (width < 375 || width > 768) {
+  if (width < 375 || width > 768 || !(0, import_deviceType.checkIsMobile)()) {
     return size || 0;
   }
   return parseFloat((width / DesignWidth * (size || 0)).toFixed(1));
 };
 var hScale = (size) => {
   const { height, width } = getViewportSize();
-  if (width < 375 || width > 768) {
+  if (width < 375 || width > 768 || !(0, import_deviceType.checkIsMobile)()) {
     return size;
   }
   return parseFloat((height / DesignHeight * size).toFixed(1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalc/dxp-ui",
-  "version": "0.0.6-alpha.1",
+  "version": "0.0.6-alpha.10",
   "description": "A UI library of Digitalc Design React Component",
   "type": "module",
   "keywords": [