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

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/Drawer/style/variables.less

@@ -2,6 +2,7 @@
 
 
 @mask-zindex: 99999;
+@navagition-index: 999;
 @transition-duration: 0.3s;
 @easing-function: cubic-bezier(0.4, 0, 0.2, 1);
 @border-radius: 16px;

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/Navigation/style/index.less

@@ -10,7 +10,7 @@
   top: 0;
   right: 0;
   margin: 0 auto;
-  z-index: 999;
+  z-index: @navagition-index;
 
 
   .@{prefix}-title-warp {

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,99 +156,83 @@ var Text = (props) => {
       .${prefixCls}-mobile {
         &.${prefixCls}-size-NavigationBold {
           font-size: ${fontSizeMobileNavigation};
-          line-height: 1.25;
-          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
+          line-height: 1.5;
+          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         }
         &.${prefixCls}-size-TitleT41Bold {
           font-size: ${fontSizeMobileTitleT41};
           line-height: 1.25;
           font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-TitleT34Bold {
           font-size: ${fontSizeMobileTitleT34};
           line-height: 1.25;
           font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-TitleT32Bold {
           font-size: ${fontSizeMobileTitleT32};
           line-height: 1.25;
           font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-TitleT23Bold {
           font-size: ${fontSizeMobileTitleT23};
           line-height: 1.25;
           font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-TitleT21Bold {
           font-size: ${fontSizeMobileTitleT21};
           line-height: 1.25;
           font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-TitleT16Bold {
           font-size: ${fontSizeMobileTitleT16};
           line-height: ${lineHeightT16M};
           font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-TitleT15Bold {
           font-size: ${fontSizeMobileTitleT15};
           line-height: ${lineHeightT15M};
-          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
+          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         }
         &.${prefixCls}-size-TitleT14Bold {
           font-size: ${fontSizeMobileTitleT14};
           line-height: 1.5;
-          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
+          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         }
         &.${prefixCls}-size-TitleT13Bold {
           font-size: ${fontSizeMobileTitleT13};
           line-height: 1.5;
-          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
+          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         }
         &.${prefixCls}-size-TitleT12Bold {
           font-size: ${fontSizeMobileTitleT12};
           line-height: 1.5;
-          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
+          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         }
         &.${prefixCls}-size-ContentC23Bold {
           font-size: ${fontSizeMobileContentC23};
           line-height: 1.25;
-          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
+          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
         }
         &.${prefixCls}-size-ContentC21Bold {
           font-size: ${fontSizeMobileContentC21};
           line-height: ${lineHeightC21M};
-          font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
+          font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
         }
         &.${prefixCls}-size-ContentC16Bold {
           font-size: ${fontSizeMobileContentC16};
           line-height: ${lineHeightC16M};
           font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-ContentC15Bold {
           font-size: ${fontSizeMobileContentC15};
           line-height: ${lineHeightC15M};
           font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-ContentC14Bold {
           font-size: ${fontSizeMobileContentC14};
           line-height: 1.5;
           font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-ContentC14Regular {
           font-size: ${fontSizeMobileContentC14};
@@ -269,7 +253,6 @@ var Text = (props) => {
         &.${prefixCls}-size-ContentC14TextLink {
           color: #4E28E8;
           font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
           font-size: ${fontSizeMobileContentC14};
           line-height: 1.5;
           text-decoration: underline;
@@ -279,7 +262,6 @@ var Text = (props) => {
           font-size: ${fontSizeMobileContentC13};
           line-height: 1.5;
           font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-ContentC13Regular {
           font-size: ${fontSizeMobileContentC13};
@@ -300,7 +282,6 @@ var Text = (props) => {
         &.${prefixCls}-size-ContentC13TextLink {
           color: #4E28E8;
           font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
           font-size: ${fontSizeMobileContentC13};
           line-height: 1.5;
           text-decoration: underline;
@@ -324,14 +305,12 @@ var Text = (props) => {
         }
         &.${prefixCls}-size-ContentC12SemiBold {
           font-family: ${fontFamilySecondarySemiBold}-${fontFamilyMap.fontFamilySecondarySemiBold};
-          font-weight: bold;
           font-size: ${fontSizeMobileContentC12};
           line-height: 1.5;
           letter-spacing: 0.2px;
         }
         &.${prefixCls}-size-ContentC12Bold {
           font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
           font-size: ${fontSizeMobileContentC12};
           line-height: 1.5;
           letter-spacing: 0.2px;
@@ -339,7 +318,6 @@ var Text = (props) => {
         &.${prefixCls}-size-ContentC12TextLink  {
           color: #4E28E8;
           font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
           font-size: ${fontSizeMobileContentC12};
           line-height: 1.5;
           text-decoration: underline;
@@ -351,91 +329,76 @@ var Text = (props) => {
           font-size: ${fontSizeDesktopTitleT41};
           line-height: 1.25;
           font-family: ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-TitleT34Bold {
           font-size: ${fontSizeDesktopTitleT34};
           line-height: 1.25;
           font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-TitleT32Bold {
           font-size: ${fontSizeDesktopTitleT32};
           line-height: 1.25;
           font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-TitleT23Bold {
           font-size: ${fontSizeDesktopTitleT23};
           line-height: 1.25;
           font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-TitleT21Bold {
           font-size: ${fontSizeDesktopTitleT21};
           line-height: 1.25;
           font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-TitleT16Bold {
           font-size: ${fontSizeDesktopTitleT16};
           line-height: ${lineHeightT16};
           font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-TitleT15Bold {
           font-size: ${fontSizeDesktopTitleT15};
           line-height: ${lineHeightT15};
-          font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
+          font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         }
         &.${prefixCls}-size-TitleT14Bold {
           font-size: ${fontSizeDesktopTitleT14};
           line-height: 1.5;
-          font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
+          font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         }
         &.${prefixCls}-size-TitleT13Bold {
           font-size: ${fontSizeDesktopTitleT13};
           line-height: 1.5;
-          font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
+          font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         }
         &.${prefixCls}-size-TitleT12Bold {
           font-size: ${fontSizeDesktopTitleT12};
           line-height: 1.5;
-          font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
-          font-weight: bold;
+          font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         }
         &.${prefixCls}-size-ContentC23Bold {
           font-size: ${fontSizeDesktopContentC23};
           line-height: 1.25;
-          font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
+          font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
         }
         &.${prefixCls}-size-ContentC21Bold {
           font-size: ${fontSizeDesktopContentC21};
           line-height: ${lineHeightC21};
-          font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
+          font-family:  ${fontFamilyPrimaryBold}-${fontFamilyMap.fontFamilyPrimaryBold};
         }
         &.${prefixCls}-size-ContentC16Bold {
           font-size: ${fontSizeDesktopContentC16};
           line-height: ${lineHeightC16};
           font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-ContentC15Bold {
           font-size: ${fontSizeDesktopContentC15};
           line-height: ${lineHeightC15};
           font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-ContentC14Bold {
           font-size: ${fontSizeDesktopContentC14};
           line-height: ${lineHeightC14};
           font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-ContentC14Regular {
           font-size: ${fontSizeDesktopContentC14};
@@ -456,7 +419,6 @@ var Text = (props) => {
         &.${prefixCls}-size-ContentC14TextLink {
           color: #4E28E8;
           font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
           font-size: ${fontSizeDesktopContentC14};
           line-height: ${lineHeightC14};
           text-decoration: underline;
@@ -466,7 +428,6 @@ var Text = (props) => {
           font-size: ${fontSizeDesktopContentC13};
           line-height: 1.5;
           font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
         }
         &.${prefixCls}-size-ContentC13Regular {
           font-size: ${fontSizeDesktopContentC13};
@@ -487,7 +448,6 @@ var Text = (props) => {
         &.${prefixCls}-size-ContentC13TextLink {
           color: #4E28E8;
           font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
           font-size: ${fontSizeDesktopContentC13};
           line-height: 1.5;
           text-decoration: underline;
@@ -511,14 +471,12 @@ var Text = (props) => {
         }
         &.${prefixCls}-size-ContentC12SemiBold {
           font-family: ${fontFamilySecondarySemiBold}-${fontFamilyMap.fontFamilySecondarySemiBold};
-          font-weight: bold;
           font-size: ${fontSizeDesktopContentC12};
           line-height: 1.5;
           letter-spacing: 0.2px;
         }
         &.${prefixCls}-size-ContentC12Bold {
           font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
           font-size: ${fontSizeDesktopContentC12};
           line-height: 1.5;
           letter-spacing: 0.2px;
@@ -526,7 +484,6 @@ var Text = (props) => {
         &.${prefixCls}-size-ContentC12TextLink  {
           color: #4E28E8;
           font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
-          font-weight: bold;
           font-size: ${fontSizeDesktopContentC12};
           line-height: 1.5;
           text-decoration: underline;

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';