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

package/es/components/ListItem/index.js

@@ -0,0 +1,227 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["listType", "leftIcon", "leftImageSrc", "title", "subTitle", "onToggleChange", "toggleChecked", "showToggle", "showLink", "LinkName", "onLinkClick", "showStatus", "statusIconName", "statusIconColor", "subTitleUp", "tagName", "showTag", "subIconObj", "leftThumbnail", "showRightBtn", "onRightBtnClick", "rightBtnTxt", "showRightIcon", "rightIconName", "onRightIconClick", "tappableArea", "tappableAreaClick"];
+import React from 'react';
+import designTokens from "./designTokens";
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { isEmpty } from 'lodash';
+import { theme } from "../../utils/theme";
+import { Icon, Image, Text, Toggle, TextLink, TextLinkEnum, Tag, BackImageEunm, Button } from "../index";
+import { cssClasses } from "../../constants";
+import "./style/index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var ListItemTypes = {
+  ListItemIcon: 'ListItemIcon',
+  ListItemImage: 'ListItemImage',
+  ListItemOther: 'ListItemOther'
+};
+export var TAPPABLE_AREAS = {
+  ALL: 'ALL',
+  // 点击全部区域
+  EXPECT_IMAGE: 'EXPECT_IMAGE' // 除了坐车的图片区域
+};
+export var ListItemRightTypes = {
+  Toggle: 'Toggle',
+  Link: 'Link',
+  Status: 'Status',
+  Default: 'Default'
+};
+var ListItem = function ListItem(_ref) {
+  var listType = _ref.listType,
+    leftIcon = _ref.leftIcon,
+    leftImageSrc = _ref.leftImageSrc,
+    title = _ref.title,
+    subTitle = _ref.subTitle,
+    onToggleChange = _ref.onToggleChange,
+    toggleChecked = _ref.toggleChecked,
+    showToggle = _ref.showToggle,
+    showLink = _ref.showLink,
+    LinkName = _ref.LinkName,
+    onLinkClick = _ref.onLinkClick,
+    showStatus = _ref.showStatus,
+    _ref$statusIconName = _ref.statusIconName,
+    statusIconName = _ref$statusIconName === void 0 ? "icon-Attention" : _ref$statusIconName,
+    _ref$statusIconColor = _ref.statusIconColor,
+    statusIconColor = _ref$statusIconColor === void 0 ? "#BC1430" : _ref$statusIconColor,
+    _ref$subTitleUp = _ref.subTitleUp,
+    subTitleUp = _ref$subTitleUp === void 0 ? false : _ref$subTitleUp,
+    tagName = _ref.tagName,
+    _ref$showTag = _ref.showTag,
+    showTag = _ref$showTag === void 0 ? false : _ref$showTag,
+    subIconObj = _ref.subIconObj,
+    leftThumbnail = _ref.leftThumbnail,
+    _ref$showRightBtn = _ref.showRightBtn,
+    showRightBtn = _ref$showRightBtn === void 0 ? false : _ref$showRightBtn,
+    onRightBtnClick = _ref.onRightBtnClick,
+    rightBtnTxt = _ref.rightBtnTxt,
+    _ref$showRightIcon = _ref.showRightIcon,
+    showRightIcon = _ref$showRightIcon === void 0 ? false : _ref$showRightIcon,
+    rightIconName = _ref.rightIconName,
+    onRightIconClick = _ref.onRightIconClick,
+    tappableArea = _ref.tappableArea,
+    tappableAreaClick = _ref.tappableAreaClick,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var sizingListItemImageImage = designTokens.sizingListItemImageImage,
+    borderRadiusListItem = designTokens.borderRadiusListItem,
+    colorListItemBackground = designTokens.colorListItemBackground,
+    colorListItemIconBackground = designTokens.colorListItemIconBackground,
+    spacingListItemTextPaddingHorizontal = designTokens.spacingListItemTextPaddingHorizontal,
+    sizingListItemIconIcon = designTokens.sizingListItemIconIcon,
+    colorListItemTextTitle = designTokens.colorListItemTextTitle,
+    colorListItemTextSubtitle = designTokens.colorListItemTextSubtitle,
+    colorListItemIconSubtle = designTokens.colorListItemIconSubtle,
+    sizingListItemImageIcon = designTokens.sizingListItemImageIcon,
+    spacingListItemImageIconPaddingRight = designTokens.spacingListItemImageIconPaddingRight,
+    colorListItemTextPoints = designTokens.colorListItemTextPoints,
+    sizingListItemImageThumbnail = designTokens.sizingListItemImageThumbnail,
+    sizingListItemIconLg = designTokens.sizingListItemIconLg;
+
+  // console.log('designTokens', designTokens);
+
+  var useCustomButtonStyle = function useCustomButtonStyle() {
+    var hashId = useStyleRegister({
+      theme: theme,
+      token: {},
+      path: ["".concat(cssClasses.PREFIX, "-list-item ")]
+    }, function () {
+      return "\n      .".concat(cssClasses.PREFIX, "-list-item  {\n        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12);\n        border-radius: ").concat(borderRadiusListItem || 8, "px;\n        background-color:").concat(colorListItemBackground || '#fff', ";\n        &.noShadow{\n          box-shadow:none !important;\n        }\n        .").concat(cssClasses.PREFIX, "-icon-container {\n          background:").concat(colorListItemIconBackground || '#F5F5F8', ";\n          margin-right:").concat(spacingListItemTextPaddingHorizontal, "px;\n        }\n        .").concat(cssClasses.PREFIX, "-image-container {\n          margin-right:").concat(spacingListItemTextPaddingHorizontal, "px;\n        }\n      }\n      .").concat(cssClasses.PREFIX, "-item-right {\n        padding-right:").concat(spacingListItemTextPaddingHorizontal, "px;\n      }\n      .").concat(cssClasses.PREFIX, "-status-warp {\n        padding-left: ").concat(spacingListItemTextPaddingHorizontal, "px;\n      }\n      .").concat(cssClasses.PREFIX, "-item-title {\n        color:").concat(colorListItemTextTitle, ";\n      }\n      .").concat(cssClasses.PREFIX, "-item-subTitle {\n        color:").concat(colorListItemTextSubtitle, ";\n      }\n     \n      .").concat(cssClasses.PREFIX, "-sub-icon-title {\n        color:").concat(colorListItemTextPoints, ";\n        margin-left:").concat(spacingListItemImageIconPaddingRight, "px;\n      }\n      .").concat(cssClasses.PREFIX, "-right-btn {\n         min-width:60px !important;\n      }\n    ");
+    });
+    return hashId;
+  };
+  useCustomButtonStyle();
+  var onAllClick = function onAllClick() {
+    if (tappableArea === TAPPABLE_AREAS.ALL && tappableAreaClick) {
+      tappableAreaClick();
+    }
+    ;
+  };
+  var onExceptImgClick = function onExceptImgClick(e) {
+    if (tappableArea === TAPPABLE_AREAS.EXPECT_IMAGE && tappableAreaClick) {
+      e === null || e === void 0 || e.stopPropagation();
+      tappableAreaClick();
+    }
+    ;
+  };
+  var onTextLinkClick = function onTextLinkClick(e) {
+    e === null || e === void 0 || e.stopPropagation();
+    if (onLinkClick) {
+      onLinkClick();
+    }
+  };
+  var onSwicthChange = function onSwicthChange(checked, event) {
+    event === null || event === void 0 || event.stopPropagation();
+    if (onToggleChange) {
+      onToggleChange(checked, event);
+    }
+  };
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: "\n        ".concat(cssClasses.PREFIX, "-list-item \n        ").concat(listType === ListItemTypes.ListItemOther ? 'noShadow' : "", "\n      ")
+  }, restProps), {}, {
+    onClick: onAllClick,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "\n        ".concat(cssClasses.PREFIX, "-item-left \n      "),
+      children: [listType === ListItemTypes.ListItemIcon && !isEmpty(leftIcon) && /*#__PURE__*/_jsx("div", {
+        className: "".concat(cssClasses.PREFIX, "-icon-container"),
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: leftIcon ? leftIcon.iconName : '',
+          size: sizingListItemIconIcon,
+          style: leftIcon ? leftIcon.iconStyle : {}
+        })
+      }), listType === ListItemTypes.ListItemImage && leftImageSrc && /*#__PURE__*/_jsxs("div", {
+        className: "".concat(cssClasses.PREFIX, "-image-container"),
+        children: [/*#__PURE__*/_jsx(Image, {
+          radio: 1,
+          src: leftImageSrc,
+          imageSize: sizingListItemImageImage || 104
+        }), showTag && /*#__PURE__*/_jsx(Tag, {
+          types: "red",
+          style: {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            justifyContent: 'center'
+          },
+          block: true,
+          children: tagName
+        })]
+      }), listType === ListItemTypes.ListItemOther && leftThumbnail && /*#__PURE__*/_jsx("div", {
+        className: "".concat(cssClasses.PREFIX, "-image-container"),
+        children: /*#__PURE__*/_jsx(Image, {
+          radio: BackImageEunm.whRadio1,
+          src: leftThumbnail,
+          imageSize: sizingListItemImageThumbnail || 56,
+          style: {
+            borderRadius: "".concat(borderRadiusListItem, "px"),
+            margin: '10px 0'
+          }
+        })
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "\n        ".concat(cssClasses.PREFIX, "-item-right \n      "),
+      onClick: onExceptImgClick,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "".concat(cssClasses.PREFIX, "-title-sub-warp"),
+        children: [subTitleUp && /*#__PURE__*/_jsx(Text, {
+          size: "ContentC12Regular",
+          className: "".concat(cssClasses.PREFIX, "-item-subTitle"),
+          children: subTitle
+        }), /*#__PURE__*/_jsx(Text, {
+          size: "ContentC14Bold",
+          className: "".concat(cssClasses.PREFIX, "-item-title     \n               ").concat(subTitle ? 'line1' : 'line2', " \n              }"),
+          children: title
+        }), !subTitleUp && /*#__PURE__*/_jsx(Text, {
+          size: "ContentC12Regular",
+          className: "".concat(cssClasses.PREFIX, "-item-subTitle"),
+          children: subTitle
+        }), !isEmpty(subIconObj) && /*#__PURE__*/_jsxs("div", {
+          className: "".concat(cssClasses.PREFIX, "-sub-icon"),
+          children: [/*#__PURE__*/_jsx(Icon, {
+            name: subIconObj.iconName,
+            color: colorListItemIconSubtle,
+            size: sizingListItemImageIcon || 20
+          }), /*#__PURE__*/_jsx(Text, {
+            size: "ContentC12Regular",
+            className: "".concat(cssClasses.PREFIX, "-sub-icon-title"),
+            children: subIconObj.value
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "".concat(cssClasses.PREFIX, "-status-warp"),
+        children: [showToggle && /*#__PURE__*/_jsx(Toggle, {
+          size: "small",
+          checked: toggleChecked,
+          onChange: onSwicthChange
+        }), showLink && /*#__PURE__*/_jsx(TextLink, {
+          className: "".concat(cssClasses.PREFIX, "-right-link"),
+          type: TextLinkEnum.default,
+          text: LinkName,
+          onClick: onTextLinkClick
+        }), showStatus && /*#__PURE__*/_jsx(Icon, {
+          name: statusIconName || '',
+          size: sizingListItemIconIcon,
+          color: statusIconColor
+        }), showRightBtn && /*#__PURE__*/_jsx(Button, {
+          className: "".concat(cssClasses.PREFIX, "-right-btn"),
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            if (onRightBtnClick) {
+              onRightBtnClick();
+            }
+          },
+          children: rightBtnTxt
+        }), showRightIcon && /*#__PURE__*/_jsx(Icon, {
+          name: rightIconName || '',
+          size: sizingListItemIconLg,
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            if (onRightIconClick) {
+              onRightIconClick();
+            }
+          }
+        })]
+      })]
+    })]
+  }));
+};
+export default ListItem;

package/es/components/ListItem/style/index.less

@@ -0,0 +1,77 @@
+@import './variables.less';
+
+.@{prefix}-list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+
+  .@{prefix}-item-left {
+
+    .@{prefix}-icon-container {
+      width: 80px;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .@{prefix}-image-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      position: relative;
+    }
+
+  }
+
+  .@{prefix}-item-right {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .@{prefix}-title-sub-warp {
+      flex: 1;
+      overflow: hidden;
+
+      .@{prefix}-item-title {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-box-orient: vertical;
+
+        &.line1 {
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+
+        &.line2 {
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+
+      .@{prefix}-item-subTitle {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .@{prefix}-sub-icon {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+}

package/es/components/ListItem/style/variables.less

@@ -0,0 +1 @@
+@import '../../../style/variables.less';

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

@@ -23,6 +23,7 @@ export interface INavigationProps {
     className?: string;
     goBack?: () => void;
     isInverse?: boolean;
+    noRight?: boolean;
 }
 declare const Navigation: React.FC<INavigationProps>;
 export default Navigation;

package/es/components/Navigation/index.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["hideBorder", "className", "rightIcons", "rightLink", "title", "goBack", "isInverse", "titleIconBadge", "imgBackground"];
+var _excluded = ["hideBorder", "className", "rightIcons", "rightLink", "title", "goBack", "isInverse", "titleIconBadge", "imgBackground", "noRight"];
 import React from 'react';
 import designTokens from "./designTokens";
 import { useStyleRegister } from '@ant-design/cssinjs';
@@ -21,6 +21,8 @@ var Navigation = function Navigation(_ref) {
     isInverse = _ref.isInverse,
     titleIconBadge = _ref.titleIconBadge,
     imgBackground = _ref.imgBackground,
+    _ref$noRight = _ref.noRight,
+    noRight = _ref$noRight === void 0 ? false : _ref$noRight,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var spacingTopNavigationPaddingHorizontal = designTokens.spacingTopNavigationPaddingHorizontal,
     spacingTopNavigationPaddingBottom = designTokens.spacingTopNavigationPaddingBottom,
@@ -38,7 +40,7 @@ var Navigation = function Navigation(_ref) {
       token: {},
       path: ["".concat(cssClasses.PREFIX, "-header")]
     }, function () {
-      return "\n      .".concat(cssClasses.PREFIX, "-header {\n        padding-left: ").concat(spacingTopNavigationPaddingHorizontal, "px;\n        padding-right: ").concat(spacingTopNavigationPaddingHorizontal, "px;\n        padding-bottom: ").concat(spacingTopNavigationPaddingBottom, "px;\n        border-bottom: 1px solid ").concat(colorTopNavigationBorderBottom, ";\n        background-color:").concat(colorTopNavigationBackground, ";\n        &.inverse {\n          background-color:").concat(colorTopNavigationBackgroundInverse, ";\n        }\n        &.imgBackground {\n          background:").concat(colorTopNavigationGradient, ";\n        }\n        &.hideBorder {\n          border-bottom:none;\n        }\n      }\n      .").concat(cssClasses.PREFIX, "-title {\n          color:").concat(colorTopNavigationTitleStandard, ";\n        &.inverse {\n          color:").concat(colorTopNavigationTitleInverse, ";\n        }\n      }\n      .").concat(cssClasses.PREFIX, "-right-link {\n        padding-right: ").concat(spacingTopNavigationTextLinkPaddingRight, "px;\n      }\n    ");
+      return "\n      .".concat(cssClasses.PREFIX, "-header {\n        padding-left: ").concat(spacingTopNavigationPaddingHorizontal, "px;\n        padding-right: ").concat(spacingTopNavigationPaddingHorizontal, "px;\n        padding-bottom: ").concat(spacingTopNavigationPaddingBottom, "px;\n        padding-top: ").concat(spacingTopNavigationPaddingBottom, "px;  // TODO\uFF1A\u8BBE\u8BA1\u7A3F\u4E0A\u6CA1\u6709\u6682\u65F6\u52A0\u7684\n        border-bottom: 1px solid ").concat(colorTopNavigationBorderBottom, ";\n        background-color:").concat(colorTopNavigationBackground, ";\n        &.inverse {\n          background-color:").concat(colorTopNavigationBackgroundInverse, ";\n        }\n        &.imgBackground {\n          background:").concat(colorTopNavigationGradient, ";\n        }\n        &.hideBorder {\n          border-bottom:none;\n        }\n        &.noRight{\n          justify-content:center !important;\n          .").concat(cssClasses.PREFIX, "-header-back {\n            position:absolute;\n            left: ").concat(spacingTopNavigationPaddingHorizontal, "px;\n          }\n        }\n      }\n      .").concat(cssClasses.PREFIX, "-title {\n          color:").concat(colorTopNavigationTitleStandard, ";\n        &.inverse {\n          color:").concat(colorTopNavigationTitleInverse, ";\n        }\n      }\n      .").concat(cssClasses.PREFIX, "-right-link {\n        padding-right: ").concat(spacingTopNavigationTextLinkPaddingRight, "px;\n      }\n    ");
     });
     return hashId;
   };
@@ -49,14 +51,16 @@ var Navigation = function Navigation(_ref) {
     }
   };
   return /*#__PURE__*/_jsxs("header", _objectSpread(_objectSpread({
-    className: "\n        ".concat(cssClasses.PREFIX, "-header \n        ").concat(hideBorder ? 'hideBorder' : '', " \n        ").concat(isInverse ? 'inverse' : '', " \n        ").concat(imgBackground ? 'imgBackground' : '', "\n        ").concat(className || '', "\n      ")
+    className: "\n        ".concat(cssClasses.PREFIX, "-header \n        ").concat(hideBorder ? 'hideBorder' : '', " \n        ").concat(isInverse ? 'inverse' : '', " \n        ").concat(imgBackground ? 'imgBackground' : '', "\n        ").concat(noRight ? 'noRight' : '', "\n        ").concat(className || '', "\n      ")
   }, restProps), {}, {
     children: [/*#__PURE__*/_jsx(IconButton, {
+      className: "".concat(cssClasses.PREFIX, "-header-back"),
       inverse: isInverse,
       size: "medium",
       name: "icon-a-Backarrow-copy",
       onClick: onGoBack
     }), /*#__PURE__*/_jsx("div", {
+      className: "\n        ".concat(cssClasses.PREFIX, "-title-warp\n      "),
       children: !isEmpty(titleIconBadge) ? /*#__PURE__*/_jsxs("div", {
         className: "".concat(cssClasses.PREFIX, "-title-badge"),
         children: [/*#__PURE__*/_jsx(Icon, {
@@ -81,7 +85,7 @@ var Navigation = function Navigation(_ref) {
         className: "".concat(cssClasses.PREFIX, "-title ").concat(isInverse ? 'inverse' : '', " "),
         children: title
       })
-    }), /*#__PURE__*/_jsxs(IconButtonGroup, {
+    }), !noRight && /*#__PURE__*/_jsxs(IconButtonGroup, {
       className: "".concat(cssClasses.PREFIX, "-rightWarp"),
       children: [rightIcons === null || rightIcons === void 0 || (_rightIcons$slice = rightIcons.slice(0, 3)) === null || _rightIcons$slice === void 0 ? void 0 : _rightIcons$slice.map(function (i, index) {
         return /*#__PURE__*/_jsx(IconButton, {

package/es/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/es/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/es/components/StickyFooter/index.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "price", "priceStrikethrough", "buttonText", "title", "position", "size", "children"];
+var _excluded = ["type", "price", "priceStrikethrough", "buttonText", "title", "position", "size", "children", "onDropDownClick", "onRightBtnClick", "onBtnClick"];
 import React from 'react';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { theme } from "../../utils/theme";
@@ -20,6 +20,9 @@ var StickyFooter = function StickyFooter(props) {
     position = props.position,
     size = props.size,
     children = props.children,
+    onDropDownClick = props.onDropDownClick,
+    onRightBtnClick = props.onRightBtnClick,
+    onBtnClick = props.onBtnClick,
     attr = _objectWithoutProperties(props, _excluded);
   var padding = designTokens.padding,
     borderTop = designTokens.borderTop,
@@ -49,6 +52,7 @@ var StickyFooter = function StickyFooter(props) {
       children: /*#__PURE__*/_jsx(Button, {
         type: "primary",
         block: true,
+        onClick: onBtnClick,
         children: buttonText
       })
     }), type === 'priceVariant1' && /*#__PURE__*/_jsxs(_Fragment, {
@@ -60,9 +64,11 @@ var StickyFooter = function StickyFooter(props) {
         title: title,
         position: position,
         size: size,
+        onDropDownClick: onDropDownClick,
         children: price
       }), /*#__PURE__*/_jsx(Button, {
         type: "primary",
+        onClick: onRightBtnClick,
         children: buttonText
       })]
     }), children]

package/es/components/Tabs/index.js

@@ -94,7 +94,7 @@ var Tabs = function Tabs(props) {
       items: item,
       onTabClick: handleTabClick,
       type: type === 'fill' ? "card" : "line",
-      className: "".concat(prefixCls, "-fill"),
+      className: type === 'fill' ? "".concat(prefixCls, "-fill") : '',
       children: children
     }))
   });

package/es/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/es/components/Text/designTokens.js

@@ -41,6 +41,12 @@ var otherDesignTokens = {
   fontSizeMobileTitleT34: "".concat(getToken('fontSizeMobileTitleT34'), "px"),
   fontSizeMobileTitleT41: "".concat(getToken('fontSizeMobileTitleT41'), "px"),
   fontSizeMobileTitleT45: "".concat(getToken('fontSizeMobileTitleT45'), "px"),
-  fontSizeMobileNavigation: "".concat(getToken('fontSizeMobileNavigation'), "px")
+  fontSizeMobileNavigation: "".concat(getToken('fontSizeMobileNavigation'), "px"),
+  fontFamilyPromaryRegular: getToken('fontFamilyPromaryRegular'),
+  fontFamilyPromarySemiBold: getToken('fontFamilyPromarySemiBold'),
+  fontFamilyPromaryBold: getToken('fontFamilyPromaryBold'),
+  fontFamilySecondaryRegular: getToken('fontFamilySecondaryRegular'),
+  fontFamilySecondarySemiBold: getToken('fontFamilySecondarySemiBold'),
+  fontFamilySecondaryBold: getToken('fontFamilySecondaryBold')
 };
 export { otherDesignTokens };

package/es/components/Text/index.js

@@ -36,7 +36,19 @@ var Text = function Text(props) {
     fontSizeMobileTitleT21 = otherDesignTokens.fontSizeMobileTitleT21,
     fontSizeMobileTitleT23 = otherDesignTokens.fontSizeMobileTitleT23,
     fontSizeMobileTitleT32 = otherDesignTokens.fontSizeMobileTitleT32,
-    fontSizeMobileTitleT41 = otherDesignTokens.fontSizeMobileTitleT41;
+    fontSizeMobileTitleT41 = otherDesignTokens.fontSizeMobileTitleT41,
+    fontFamilyPromaryBold = otherDesignTokens.fontFamilyPromaryBold,
+    fontFamilySecondaryRegular = otherDesignTokens.fontFamilySecondaryRegular,
+    fontFamilySecondarySemiBold = otherDesignTokens.fontFamilySecondarySemiBold,
+    fontFamilySecondaryBold = otherDesignTokens.fontFamilySecondaryBold;
+  var fontFamilyMap = {
+    fontFamilyPromaryRegular: "Regular",
+    fontFamilyPromarySemiBold: "SemiBold",
+    fontFamilyPromaryBold: "Bold",
+    fontFamilySecondaryRegular: "Regular",
+    fontFamilySecondarySemiBold: "SemiBold",
+    fontFamilySecondaryBold: "Bold"
+  };
   var useCustomButtonStyle = function useCustomButtonStyle() {
     var hashId = useStyleRegister({
       theme: theme,
@@ -45,7 +57,7 @@ var Text = function Text(props) {
       },
       path: ["".concat(prefixCls, "-size")]
     }, function () {
-      return "\n      .".concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT41Bold {\n        font-size: ").concat(fontSizeMobileTitleT41, ";\n        line-height: 1.2;\n        font-family: Poppins-Blod;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT32Bold {\n        font-size: ").concat(fontSizeMobileTitleT32, ";\n        line-height: 1.2;\n        font-family: Poppins-Blod;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT23Bold {\n        font-size: ").concat(fontSizeMobileTitleT23, ";\n        line-height: 1.2;\n        font-family: Poppins-Blod;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT21Bold {\n        font-size: ").concat(fontSizeMobileTitleT21, ";\n        line-height: 1.25;\n        font-family: Poppins-Blod;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT15Bold {\n        font-size: ").concat(fontSizeMobileTitleT15, ";\n        line-height: 1.25;\n        font-family: Poppins-Blod;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC14Bold {\n        font-size: ").concat(fontSizeMobileContentC14, ";\n        line-height: 1.5;\n        font-family: Roboto-Bold;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC14Regular {\n        font-size: ").concat(fontSizeMobileContentC14, ";\n        line-height: 1.5;\n        font-family: Roboto-Regular;\n        font-weight: normal;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC14Strikethrough {\n        color: #757575;\n        font-size: ").concat(fontSizeMobileContentC14, ";\n        line-height: 1.5;\n        font-family: Roboto-Regular;\n        font-weight: normal;\n        text-decoration: line-through;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC14TextLink {\n        color: #4E28E8;\n        font-family: Roboto-Bold;\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC14, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC13Bold {\n        font-size: ").concat(fontSizeMobileContentC13, ";\n        line-height: 1.5;\n        font-family: Roboto-Bold;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC13Regular {\n        font-size: ").concat(fontSizeMobileContentC13, ";\n        line-height: 1.5;\n        font-family: Roboto-Regular;\n        font-weight: normal;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC13Strikethrough {\n        color: #757575;\n        font-size: ").concat(fontSizeMobileContentC13, ";\n        line-height: 1.5;\n        font-family: Roboto-Regular;\n        font-weight: normal;\n        text-decoration: line-through;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC13TextLink {\n        color: #4E28E8;\n        font-family: Roboto-Bold;\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC13, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12Regular {\n        font-family: Roboto-Regular;\n        font-weight: normal;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12Strikethrough {\n        color: #757575;\n        font-family: Roboto-Regular;\n        font-weight: normal;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        text-decoration: line-through;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12SemiBold {\n        font-family: Roboto-SemiBold;\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12Bold {\n        font-family: Roboto-Bold;\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12TextLink  {\n        color: #4E28E8;\n        font-family: Roboto-Bold;\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT41Bold {\n        font-size: ").concat(fontSizeDesktopTitleT41, ";\n        line-height: 1.2;\n        font-family: Poppins-Blod;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT32Bold {\n        font-size: ").concat(fontSizeDesktopTitleT32, ";\n        line-height: 1.2;\n        font-family: Poppins-Blod;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT23Bold {\n        font-size: ").concat(fontSizeDesktopTitleT23, ";\n        line-height: 1.2;\n        font-family: Poppins-Blod;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT21Bold {\n        font-size: ").concat(fontSizeDesktopTitleT21, ";\n        line-height: 1.25;\n        font-family: Poppins-Blod;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT15Bold {\n        font-size: ").concat(fontSizeDesktopTitleT15, ";\n        line-height: 1.25;\n        font-family: Poppins-Blod;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC14Bold {\n        font-size: ").concat(fontSizeDesktopContentC14, ";\n        line-height: 1.5;\n        font-family: Roboto-Bold;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC14Regular {\n        font-size: ").concat(fontSizeDesktopContentC14, ";\n        line-height: 1.5;\n        font-family: Roboto-Regular;\n        font-weight: normal;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC14Strikethrough {\n        color: #757575;\n        font-size: ").concat(fontSizeDesktopContentC14, ";\n        line-height: 1.5;\n        font-family: Roboto-Regular;\n        font-weight: normal;\n        text-decoration: line-through;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC14TextLink {\n        color: #4E28E8;\n        font-family: Roboto-Bold;\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC14, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC13Bold {\n        font-size: ").concat(fontSizeDesktopContentC13, ";\n        line-height: 1.5;\n        font-family: Roboto-Bold;\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC13Regular {\n        font-size: ").concat(fontSizeDesktopContentC13, ";\n        line-height: 1.5;\n        font-family: Roboto-Regular;\n        font-weight: normal;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC13Strikethrough {\n        color: #757575;\n        font-size: ").concat(fontSizeDesktopContentC13, ";\n        line-height: 1.5;\n        font-family: Roboto-Regular;\n        font-weight: normal;\n        text-decoration: line-through;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC13TextLink {\n        color: #4E28E8;\n        font-family: Roboto-Bold;\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC13, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12Regular {\n        font-family: Roboto-Regular;\n        font-weight: normal;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12Strikethrough {\n        color: #757575;\n        font-family: Roboto-Regular;\n        font-weight: normal;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        text-decoration: line-through;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12SemiBold {\n        font-family: Roboto-SemiBold;\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12Bold {\n        font-family: Roboto-Bold;\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12TextLink  {\n        color: #4E28E8;\n        font-family: Roboto-Bold;\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.2px;\n      }\n    ");
+      return "\n      .".concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT41Bold {\n        font-size: ").concat(fontSizeMobileTitleT41, ";\n        line-height: 1.2;\n        font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        // font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT32Bold {\n        font-size: ").concat(fontSizeMobileTitleT32, ";\n        line-height: 1.2;\n        font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT23Bold {\n        font-size: ").concat(fontSizeMobileTitleT23, ";\n        line-height: 1.2;\n        font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT21Bold {\n        font-size: ").concat(fontSizeMobileTitleT21, ";\n        line-height: 1.25;\n        font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT15Bold {\n        font-size: ").concat(fontSizeMobileTitleT15, ";\n        line-height: 1.25;\n        font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC14Bold {\n        font-size: ").concat(fontSizeMobileContentC14, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC14Regular {\n        font-size: ").concat(fontSizeMobileContentC14, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC14Strikethrough {\n        color: #757575;\n        font-size: ").concat(fontSizeMobileContentC14, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        text-decoration: line-through;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC14TextLink {\n        color: #4E28E8;\n        font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC14, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC13Bold {\n        font-size: ").concat(fontSizeMobileContentC13, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC13Regular {\n        font-size: ").concat(fontSizeMobileContentC13, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC13Strikethrough {\n        color: #757575;\n        font-size: ").concat(fontSizeMobileContentC13, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        text-decoration: line-through;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC13TextLink {\n        color: #4E28E8;\n        font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC13, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12Regular {\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12Strikethrough {\n        color: #757575;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        text-decoration: line-through;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12SemiBold {\n        font-family: ").concat(fontFamilySecondarySemiBold, "-").concat(fontFamilyMap.fontFamilySecondarySemiBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12Bold {\n        font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12TextLink  {\n        color: #4E28E8;\n        font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT41Bold {\n        font-size: ").concat(fontSizeDesktopTitleT41, ";\n        line-height: 1.2;\n        font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT32Bold {\n        font-size: ").concat(fontSizeDesktopTitleT32, ";\n        line-height: 1.2;\n        font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT23Bold {\n        font-size: ").concat(fontSizeDesktopTitleT23, ";\n        line-height: 1.2;\n        font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT21Bold {\n        font-size: ").concat(fontSizeDesktopTitleT21, ";\n        line-height: 1.25;\n        font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT15Bold {\n        font-size: ").concat(fontSizeDesktopTitleT15, ";\n        line-height: 1.25;\n        font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC14Bold {\n        font-size: ").concat(fontSizeDesktopContentC14, ";\n        line-height: 1.5;\n        font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC14Regular {\n        font-size: ").concat(fontSizeDesktopContentC14, ";\n        line-height: 1.5;\n        font-family:  ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC14Strikethrough {\n        color: #757575;\n        font-size: ").concat(fontSizeDesktopContentC14, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        text-decoration: line-through;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC14TextLink {\n        color: #4E28E8;\n        font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC14, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC13Bold {\n        font-size: ").concat(fontSizeDesktopContentC13, ";\n        line-height: 1.5;\n        font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC13Regular {\n        font-size: ").concat(fontSizeDesktopContentC13, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC13Strikethrough {\n        color: #757575;\n        font-size: ").concat(fontSizeDesktopContentC13, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        text-decoration: line-through;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC13TextLink {\n        color: #4E28E8;\n        font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC13, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12Regular {\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12Strikethrough {\n        color: #757575;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        text-decoration: line-through;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12SemiBold {\n        font-family: ").concat(fontFamilySecondarySemiBold, "-").concat(fontFamilyMap.fontFamilySecondarySemiBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12Bold {\n        font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12TextLink  {\n        color: #4E28E8;\n        font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.2px;\n      }\n    ");
     });
     return hashId;
   };

package/es/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/es/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/es/components/index.js

@@ -15,6 +15,7 @@ export { default as Search } from "./Search";
 export { default as Accordion } from "./Accordion";
 export { default as Toggle } from "./Toggle";
 export { default as Image } from "./Image";
+export { BackImageEunm } from "./Image";
 export { default as Icon } from "./Icon";
 export { default as TextLink, TextLinkEnum } from "./TextLink";
 export { Toast } from "./Toast";
@@ -23,4 +24,6 @@ export { default as IconButton } from "./IconButton";
 export { default as IconButtonGroup } from "./IconButtonGroup";
 export { default as Drawer } from "./Drawer";
 export { DrawerTypeEnum } from "./Drawer";
-export { default as Navigation } from "./Navigation";
+export { default as Navigation } from "./Navigation";
+export { default as ListItem } from "./ListItem";
+export { ListItemTypes, TAPPABLE_AREAS } from "./ListItem";