@digitalc/dxp-ui 0.0.5-alpha.10 → 0.0.5-alpha.11

package/lib/components/Navigation/index.js

@@ -76,7 +76,8 @@ var Navigation = (_a) => {
     goBack,
     isInverse,
     titleIconBadge,
-    imgBackground
+    imgBackground,
+    noRight = false
   } = _b, restProps = __objRest(_b, [
     "hideBorder",
     "className",
@@ -86,7 +87,8 @@ var Navigation = (_a) => {
     "goBack",
     "isInverse",
     "titleIconBadge",
-    "imgBackground"
+    "imgBackground",
+    "noRight"
   ]);
   var _a2;
   const {
@@ -111,6 +113,7 @@ var Navigation = (_a) => {
         padding-left: ${spacingTopNavigationPaddingHorizontal}px;
         padding-right: ${spacingTopNavigationPaddingHorizontal}px;
         padding-bottom: ${spacingTopNavigationPaddingBottom}px;
+        padding-top: ${spacingTopNavigationPaddingBottom}px;  // TODO：设计稿上没有暂时加的
         border-bottom: 1px solid ${colorTopNavigationBorderBottom};
         background-color:${colorTopNavigationBackground};
         &.inverse {
@@ -122,6 +125,13 @@ var Navigation = (_a) => {
         &.hideBorder {
           border-bottom:none;
         }
+        &.noRight{
+          justify-content:center !important;
+          .${import_constants.cssClasses.PREFIX}-header-back {
+            position:absolute;
+            left: ${spacingTopNavigationPaddingHorizontal}px;
+          }
+        }
       }
       .${import_constants.cssClasses.PREFIX}-title {
           color:${colorTopNavigationTitleStandard};
@@ -149,12 +159,15 @@ var Navigation = (_a) => {
         ${hideBorder ? "hideBorder" : ""} 
         ${isInverse ? "inverse" : ""} 
         ${imgBackground ? "imgBackground" : ""}
+        ${noRight ? "noRight" : ""}
         ${className || ""}
       `
     }, restProps),
-    /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { inverse: isInverse, size: "medium", name: "icon-a-Backarrow-copy", onClick: onGoBack }),
-    /* @__PURE__ */ import_react.default.createElement("div", null, !(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" }, name: titleIconBadge.iconName }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "ContentC14Bold", 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: "ContentC14Bold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, title)),
-    /* @__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 }))
+    /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { className: `${import_constants.cssClasses.PREFIX}-header-back`, inverse: isInverse, size: "medium", name: "icon-a-Backarrow-copy", onClick: onGoBack }),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `
+        ${import_constants.cssClasses.PREFIX}-title-warp
+      ` }, !(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" }, name: titleIconBadge.iconName }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "ContentC14Bold", 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: "ContentC14Bold", 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 }))
   );
 };
 var Navigation_default = Navigation;

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

@@ -13,6 +13,13 @@
   z-index: 999;
   box-shadow: 0px -2px 10px 0px rgba(26, 24, 134, 0.1);
 
+
+  .@{prefix}-title-warp {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .@{prefix}-title {
     white-space: nowrap;
     overflow: hidden;

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

@@ -8,6 +8,9 @@ export interface StickyFooterProps {
     priceStrikethrough?: string;
     style?: React.CSSProperties;
     [key: string]: any;
+    onDropDownClick?: React.MouseEventHandler;
+    onRightBtnClick?: React.MouseEventHandler;
+    onBtnClick?: React.MouseEventHandler;
 }
 declare const StickyFooter: (props: StickyFooterProps) => React.JSX.Element;
 export default StickyFooter;

package/lib/components/StickyFooter/index.js

@@ -74,7 +74,10 @@ var StickyFooter = (props) => {
     title,
     position,
     size,
-    children
+    children,
+    onDropDownClick,
+    onRightBtnClick,
+    onBtnClick
   } = _a, attr = __objRest(_a, [
     "type",
     "price",
@@ -83,7 +86,10 @@ var StickyFooter = (props) => {
     "title",
     "position",
     "size",
-    "children"
+    "children",
+    "onDropDownClick",
+    "onRightBtnClick",
+    "onBtnClick"
   ]);
   const {
     padding,
@@ -115,7 +121,7 @@ var StickyFooter = (props) => {
       className: `${import_constants.cssClasses.PREFIX}-stickyFooter ${import_constants.cssClasses.PREFIX}-stickyFooter-${type}`,
       onClick: props.onClick
     }, attr),
-    type === "default" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import__.Button, { type: "primary", block: true }, buttonText)),
+    type === "default" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import__.Button, { type: "primary", block: true, onClick: onBtnClick }, buttonText)),
     type === "priceVariant1" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
       import__.Amount,
       {
@@ -125,10 +131,11 @@ var StickyFooter = (props) => {
         colorStrikethrough,
         title,
         position,
-        size
+        size,
+        onDropDownClick
       },
       price
-    ), /* @__PURE__ */ import_react.default.createElement(import__.Button, { type: "primary" }, buttonText)),
+    ), /* @__PURE__ */ import_react.default.createElement(import__.Button, { type: "primary", onClick: onRightBtnClick }, buttonText)),
     children
   );
 };

package/lib/components/Tabs/index.js

@@ -136,7 +136,7 @@ var Tabs = (props) => {
         items: item,
         onTabClick: handleTabClick,
         type: type === "fill" ? "card" : "line",
-        className: `${prefixCls}-fill`
+        className: type === "fill" ? `${prefixCls}-fill` : ""
       }),
       children
     )

package/lib/components/Text/designTokens.d.ts

@@ -41,5 +41,11 @@ declare const otherDesignTokens: {
     fontSizeMobileTitleT41: string;
     fontSizeMobileTitleT45: string;
     fontSizeMobileNavigation: string;
+    fontFamilyPromaryRegular: any;
+    fontFamilyPromarySemiBold: any;
+    fontFamilyPromaryBold: any;
+    fontFamilySecondaryRegular: any;
+    fontFamilySecondarySemiBold: any;
+    fontFamilySecondaryBold: any;
 };
 export { otherDesignTokens };

package/lib/components/Text/designTokens.js

@@ -65,5 +65,11 @@ var otherDesignTokens = {
   fontSizeMobileTitleT34: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT34")}px`,
   fontSizeMobileTitleT41: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT41")}px`,
   fontSizeMobileTitleT45: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT45")}px`,
-  fontSizeMobileNavigation: `${(0, import_tokenHelper.getToken)("fontSizeMobileNavigation")}px`
+  fontSizeMobileNavigation: `${(0, import_tokenHelper.getToken)("fontSizeMobileNavigation")}px`,
+  fontFamilyPromaryRegular: (0, import_tokenHelper.getToken)("fontFamilyPromaryRegular"),
+  fontFamilyPromarySemiBold: (0, import_tokenHelper.getToken)("fontFamilyPromarySemiBold"),
+  fontFamilyPromaryBold: (0, import_tokenHelper.getToken)("fontFamilyPromaryBold"),
+  fontFamilySecondaryRegular: (0, import_tokenHelper.getToken)("fontFamilySecondaryRegular"),
+  fontFamilySecondarySemiBold: (0, import_tokenHelper.getToken)("fontFamilySecondarySemiBold"),
+  fontFamilySecondaryBold: (0, import_tokenHelper.getToken)("fontFamilySecondaryBold")
 };

package/lib/components/Text/index.js

@@ -121,10 +121,24 @@ var Text = (props) => {
     // fontSizeMobileTitleT25,
     fontSizeMobileTitleT32,
     // fontSizeMobileTitleT34,
-    fontSizeMobileTitleT41
+    fontSizeMobileTitleT41,
     // fontSizeMobileTitleT45,
     // fontSizeMobileNavigation,
+    // fontFamilyPromaryRegular,
+    // fontFamilyPromarySemiBold,
+    fontFamilyPromaryBold,
+    fontFamilySecondaryRegular,
+    fontFamilySecondarySemiBold,
+    fontFamilySecondaryBold
   } = import_designTokens.otherDesignTokens;
+  const fontFamilyMap = {
+    fontFamilyPromaryRegular: "Regular",
+    fontFamilyPromarySemiBold: "SemiBold",
+    fontFamilyPromaryBold: "Bold",
+    fontFamilySecondaryRegular: "Regular",
+    fontFamilySecondarySemiBold: "SemiBold",
+    fontFamilySecondaryBold: "Bold"
+  };
   const useCustomButtonStyle = () => {
     const hashId = (0, import_cssinjs.useStyleRegister)({
       theme: import_theme.theme,
@@ -134,43 +148,44 @@ var Text = (props) => {
       .${prefixCls}-mobile.${prefixCls}-size-TitleT41Bold {
         font-size: ${fontSizeMobileTitleT41};
         line-height: 1.2;
-        font-family: Poppins-Blod;
+        font-family: ${fontFamilyPromaryBold}-${fontFamilyMap.fontFamilyPromaryBold};
+        // font-family:  ${fontFamilyPromaryBold}-${fontFamilyMap.fontFamilyPromaryBold};
         font-weight: bold;
       }
       .${prefixCls}-mobile.${prefixCls}-size-TitleT32Bold {
         font-size: ${fontSizeMobileTitleT32};
         line-height: 1.2;
-        font-family: Poppins-Blod;
+        font-family: ${fontFamilyPromaryBold}-${fontFamilyMap.fontFamilyPromaryBold};
         font-weight: bold;
       }
       .${prefixCls}-mobile.${prefixCls}-size-TitleT23Bold {
         font-size: ${fontSizeMobileTitleT23};
         line-height: 1.2;
-        font-family: Poppins-Blod;
+        font-family: ${fontFamilyPromaryBold}-${fontFamilyMap.fontFamilyPromaryBold};
         font-weight: bold;
       }
       .${prefixCls}-mobile.${prefixCls}-size-TitleT21Bold {
         font-size: ${fontSizeMobileTitleT21};
         line-height: 1.25;
-        font-family: Poppins-Blod;
+        font-family: ${fontFamilyPromaryBold}-${fontFamilyMap.fontFamilyPromaryBold};
         font-weight: bold;
       }
       .${prefixCls}-mobile.${prefixCls}-size-TitleT15Bold {
         font-size: ${fontSizeMobileTitleT15};
         line-height: 1.25;
-        font-family: Poppins-Blod;
+        font-family: ${fontFamilyPromaryBold}-${fontFamilyMap.fontFamilyPromaryBold};
         font-weight: bold;
       }
       .${prefixCls}-mobile.${prefixCls}-size-ContentC14Bold {
         font-size: ${fontSizeMobileContentC14};
         line-height: 1.5;
-        font-family: Roboto-Bold;
+        font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         font-weight: bold;
       }
       .${prefixCls}-mobile.${prefixCls}-size-ContentC14Regular {
         font-size: ${fontSizeMobileContentC14};
         line-height: 1.5;
-        font-family: Roboto-Regular;
+        font-family: ${fontFamilySecondaryRegular}-${fontFamilyMap.fontFamilySecondaryRegular};
         font-weight: normal;
         letter-spacing: 0.1px;
       }
@@ -178,14 +193,14 @@ var Text = (props) => {
         color: #757575;
         font-size: ${fontSizeMobileContentC14};
         line-height: 1.5;
-        font-family: Roboto-Regular;
+        font-family: ${fontFamilySecondaryRegular}-${fontFamilyMap.fontFamilySecondaryRegular};
         font-weight: normal;
         text-decoration: line-through;
         letter-spacing: 0.1px;
       }
       .${prefixCls}-mobile.${prefixCls}-size-ContentC14TextLink {
         color: #4E28E8;
-        font-family: Roboto-Bold;
+        font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         font-weight: bold;
         font-size: ${fontSizeMobileContentC14};
         line-height: 1.5;
@@ -195,13 +210,13 @@ var Text = (props) => {
       .${prefixCls}-mobile.${prefixCls}-size-ContentC13Bold {
         font-size: ${fontSizeMobileContentC13};
         line-height: 1.5;
-        font-family: Roboto-Bold;
+        font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         font-weight: bold;
       }
       .${prefixCls}-mobile.${prefixCls}-size-ContentC13Regular {
         font-size: ${fontSizeMobileContentC13};
         line-height: 1.5;
-        font-family: Roboto-Regular;
+        font-family: ${fontFamilySecondaryRegular}-${fontFamilyMap.fontFamilySecondaryRegular};
         font-weight: normal;
         letter-spacing: 0.1px;
       }
@@ -209,14 +224,14 @@ var Text = (props) => {
         color: #757575;
         font-size: ${fontSizeMobileContentC13};
         line-height: 1.5;
-        font-family: Roboto-Regular;
+        font-family: ${fontFamilySecondaryRegular}-${fontFamilyMap.fontFamilySecondaryRegular};
         font-weight: normal;
         text-decoration: line-through;
         letter-spacing: 0.1px;
       }
       .${prefixCls}-mobile.${prefixCls}-size-ContentC13TextLink {
         color: #4E28E8;
-        font-family: Roboto-Bold;
+        font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         font-weight: bold;
         font-size: ${fontSizeMobileContentC13};
         line-height: 1.5;
@@ -224,7 +239,7 @@ var Text = (props) => {
         letter-spacing: 0.1px;
       }
       .${prefixCls}-mobile.${prefixCls}-size-ContentC12Regular {
-        font-family: Roboto-Regular;
+        font-family: ${fontFamilySecondaryRegular}-${fontFamilyMap.fontFamilySecondaryRegular};
         font-weight: normal;
         font-size: ${fontSizeMobileContentC12};
         line-height: 1.5;
@@ -232,7 +247,7 @@ var Text = (props) => {
       }
       .${prefixCls}-mobile.${prefixCls}-size-ContentC12Strikethrough {
         color: #757575;
-        font-family: Roboto-Regular;
+        font-family: ${fontFamilySecondaryRegular}-${fontFamilyMap.fontFamilySecondaryRegular};
         font-weight: normal;
         font-size: ${fontSizeMobileContentC12};
         line-height: 1.5;
@@ -240,14 +255,14 @@ var Text = (props) => {
         letter-spacing: 0.2px;
       }
       .${prefixCls}-mobile.${prefixCls}-size-ContentC12SemiBold {
-        font-family: Roboto-SemiBold;
+        font-family: ${fontFamilySecondarySemiBold}-${fontFamilyMap.fontFamilySecondarySemiBold};
         font-weight: bold;
         font-size: ${fontSizeMobileContentC12};
         line-height: 1.5;
         letter-spacing: 0.2px;
       }
       .${prefixCls}-mobile.${prefixCls}-size-ContentC12Bold {
-        font-family: Roboto-Bold;
+        font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         font-weight: bold;
         font-size: ${fontSizeMobileContentC12};
         line-height: 1.5;
@@ -255,7 +270,7 @@ var Text = (props) => {
       }
       .${prefixCls}-mobile.${prefixCls}-size-ContentC12TextLink  {
         color: #4E28E8;
-        font-family: Roboto-Bold;
+        font-family: ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         font-weight: bold;
         font-size: ${fontSizeMobileContentC12};
         line-height: 1.5;
@@ -265,43 +280,43 @@ var Text = (props) => {
       .${prefixCls}-desktop.${prefixCls}-size-TitleT41Bold {
         font-size: ${fontSizeDesktopTitleT41};
         line-height: 1.2;
-        font-family: Poppins-Blod;
+        font-family: ${fontFamilyPromaryBold}-${fontFamilyMap.fontFamilyPromaryBold};
         font-weight: bold;
       }
       .${prefixCls}-desktop.${prefixCls}-size-TitleT32Bold {
         font-size: ${fontSizeDesktopTitleT32};
         line-height: 1.2;
-        font-family: Poppins-Blod;
+        font-family:  ${fontFamilyPromaryBold}-${fontFamilyMap.fontFamilyPromaryBold};
         font-weight: bold;
       }
       .${prefixCls}-desktop.${prefixCls}-size-TitleT23Bold {
         font-size: ${fontSizeDesktopTitleT23};
         line-height: 1.2;
-        font-family: Poppins-Blod;
+        font-family:  ${fontFamilyPromaryBold}-${fontFamilyMap.fontFamilyPromaryBold};
         font-weight: bold;
       }
       .${prefixCls}-desktop.${prefixCls}-size-TitleT21Bold {
         font-size: ${fontSizeDesktopTitleT21};
         line-height: 1.25;
-        font-family: Poppins-Blod;
+        font-family:  ${fontFamilyPromaryBold}-${fontFamilyMap.fontFamilyPromaryBold};
         font-weight: bold;
       }
       .${prefixCls}-desktop.${prefixCls}-size-TitleT15Bold {
         font-size: ${fontSizeDesktopTitleT15};
         line-height: 1.25;
-        font-family: Poppins-Blod;
+        font-family:  ${fontFamilyPromaryBold}-${fontFamilyMap.fontFamilyPromaryBold};
         font-weight: bold;
       }
       .${prefixCls}-desktop.${prefixCls}-size-ContentC14Bold {
         font-size: ${fontSizeDesktopContentC14};
         line-height: 1.5;
-        font-family: Roboto-Bold;
+        font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         font-weight: bold;
       }
       .${prefixCls}-desktop.${prefixCls}-size-ContentC14Regular {
         font-size: ${fontSizeDesktopContentC14};
         line-height: 1.5;
-        font-family: Roboto-Regular;
+        font-family:  ${fontFamilySecondaryRegular}-${fontFamilyMap.fontFamilySecondaryRegular};
         font-weight: normal;
         letter-spacing: 0.1px;
       }
@@ -309,14 +324,14 @@ var Text = (props) => {
         color: #757575;
         font-size: ${fontSizeDesktopContentC14};
         line-height: 1.5;
-        font-family: Roboto-Regular;
+        font-family: ${fontFamilySecondaryRegular}-${fontFamilyMap.fontFamilySecondaryRegular};
         font-weight: normal;
         text-decoration: line-through;
         letter-spacing: 0.1px;
       }
       .${prefixCls}-desktop.${prefixCls}-size-ContentC14TextLink {
         color: #4E28E8;
-        font-family: Roboto-Bold;
+        font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         font-weight: bold;
         font-size: ${fontSizeDesktopContentC14};
         line-height: 1.5;
@@ -326,13 +341,13 @@ var Text = (props) => {
       .${prefixCls}-desktop.${prefixCls}-size-ContentC13Bold {
         font-size: ${fontSizeDesktopContentC13};
         line-height: 1.5;
-        font-family: Roboto-Bold;
+        font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         font-weight: bold;
       }
       .${prefixCls}-desktop.${prefixCls}-size-ContentC13Regular {
         font-size: ${fontSizeDesktopContentC13};
         line-height: 1.5;
-        font-family: Roboto-Regular;
+        font-family: ${fontFamilySecondaryRegular}-${fontFamilyMap.fontFamilySecondaryRegular};
         font-weight: normal;
         letter-spacing: 0.1px;
       }
@@ -340,14 +355,14 @@ var Text = (props) => {
         color: #757575;
         font-size: ${fontSizeDesktopContentC13};
         line-height: 1.5;
-        font-family: Roboto-Regular;
+        font-family: ${fontFamilySecondaryRegular}-${fontFamilyMap.fontFamilySecondaryRegular};
         font-weight: normal;
         text-decoration: line-through;
         letter-spacing: 0.1px;
       }
       .${prefixCls}-desktop.${prefixCls}-size-ContentC13TextLink {
         color: #4E28E8;
-        font-family: Roboto-Bold;
+        font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         font-weight: bold;
         font-size: ${fontSizeDesktopContentC13};
         line-height: 1.5;
@@ -355,7 +370,7 @@ var Text = (props) => {
         letter-spacing: 0.1px;
       }
       .${prefixCls}-desktop.${prefixCls}-size-ContentC12Regular {
-        font-family: Roboto-Regular;
+        font-family: ${fontFamilySecondaryRegular}-${fontFamilyMap.fontFamilySecondaryRegular};
         font-weight: normal;
         font-size: ${fontSizeDesktopContentC12};
         line-height: 1.5;
@@ -363,7 +378,7 @@ var Text = (props) => {
       }
       .${prefixCls}-desktop.${prefixCls}-size-ContentC12Strikethrough {
         color: #757575;
-        font-family: Roboto-Regular;
+        font-family: ${fontFamilySecondaryRegular}-${fontFamilyMap.fontFamilySecondaryRegular};
         font-weight: normal;
         font-size: ${fontSizeDesktopContentC12};
         line-height: 1.5;
@@ -371,14 +386,14 @@ var Text = (props) => {
         letter-spacing: 0.2px;
       }
       .${prefixCls}-desktop.${prefixCls}-size-ContentC12SemiBold {
-        font-family: Roboto-SemiBold;
+        font-family: ${fontFamilySecondarySemiBold}-${fontFamilyMap.fontFamilySecondarySemiBold};
         font-weight: bold;
         font-size: ${fontSizeDesktopContentC12};
         line-height: 1.5;
         letter-spacing: 0.2px;
       }
       .${prefixCls}-desktop.${prefixCls}-size-ContentC12Bold {
-        font-family: Roboto-Bold;
+        font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         font-weight: bold;
         font-size: ${fontSizeDesktopContentC12};
         line-height: 1.5;
@@ -386,7 +401,7 @@ var Text = (props) => {
       }
       .${prefixCls}-desktop.${prefixCls}-size-ContentC12TextLink  {
         color: #4E28E8;
-        font-family: Roboto-Bold;
+        font-family:  ${fontFamilySecondaryBold}-${fontFamilyMap.fontFamilySecondaryBold};
         font-weight: bold;
         font-size: ${fontSizeDesktopContentC12};
         line-height: 1.5;

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

@@ -13,7 +13,7 @@ export interface ITextLinkProps {
     iconSize?: string | number;
     text?: string;
     inverse?: boolean;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     className?: string;
 }
 declare const TextLink: (props: ITextLinkProps) => React.JSX.Element;

package/lib/components/index.d.ts

@@ -28,6 +28,7 @@ export { default as Toggle } from './Toggle';
 export type { IToggleProps } from './Toggle';
 export { default as Image } from './Image';
 export type { IImageProps } from './Image';
+export { BackImageEunm } from './Image';
 export { default as Icon } from './Icon';
 export type { IIconProps } from './Icon';
 export { default as TextLink, TextLinkEnum } from './TextLink';
@@ -44,3 +45,5 @@ export type { BottomDrawerProps, DrawerType } from './Drawer';
 export { DrawerTypeEnum } from './Drawer';
 export { default as Navigation } from './Navigation';
 export type { RightLinkConfig, RightIcon, TitleIconBadgeConfig, INavigationProps } from './Navigation';
+export { default as ListItem } from './ListItem';
+export { ListItemTypes, TAPPABLE_AREAS } from './ListItem';

package/lib/components/index.js

@@ -32,6 +32,7 @@ var components_exports = {};
 __export(components_exports, {
   Accordion: () => import_Accordion.default,
   Amount: () => import_Amount.default,
+  BackImageEunm: () => import_Image2.BackImageEunm,
   Button: () => import_Button.default,
   Chip: () => import_Chip.default,
   Divider: () => import_Divider.default,
@@ -41,11 +42,14 @@ __export(components_exports, {
   IconButton: () => import_IconButton.default,
   IconButtonGroup: () => import_IconButtonGroup.default,
   Image: () => import_Image.default,
+  ListItem: () => import_ListItem.default,
+  ListItemTypes: () => import_ListItem2.ListItemTypes,
   Modal: () => import_Modal.default,
   Navigation: () => import_Navigation.default,
   Search: () => import_Search.default,
   Stepper: () => import_Stepper.default,
   StickyFooter: () => import_StickyFooter.default,
+  TAPPABLE_AREAS: () => import_ListItem2.TAPPABLE_AREAS,
   Tabs: () => import_Tabs.default,
   Tag: () => import_Tag.default,
   Text: () => import_Text.default,
@@ -72,6 +76,7 @@ var import_Search = __toESM(require("./Search"));
 var import_Accordion = __toESM(require("./Accordion"));
 var import_Toggle = __toESM(require("./Toggle"));
 var import_Image = __toESM(require("./Image"));
+var import_Image2 = require("./Image");
 var import_Icon = __toESM(require("./Icon"));
 var import_TextLink = __toESM(require("./TextLink"));
 var import_Toast = require("./Toast");
@@ -81,3 +86,5 @@ var import_IconButtonGroup = __toESM(require("./IconButtonGroup"));
 var import_Drawer = __toESM(require("./Drawer"));
 var import_Drawer2 = require("./Drawer");
 var import_Navigation = __toESM(require("./Navigation"));
+var import_ListItem = __toESM(require("./ListItem"));
+var import_ListItem2 = require("./ListItem");