diginet-core-ui 1.3.96-beta.4 → 1.3.97

package/components/breadcrumb/index.js

@@ -87,24 +87,27 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     // <ButtonIcon key="ellipsis" name={'MoreHoriz'} width={24} height={16} onClick={handleClickExpand} />,
     ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
   };
-  const allItems = data !== null && data !== void 0 && data.length ? data.map((item, idx) => jsx("li", {
-    css: _BreadcrumbLiCSS,
-    className: 'DGN-UI-Breadcrumb-li',
-    key: `child-${idx}`
-  }, item !== null && item !== void 0 && item.icon ? jsx(Icon, {
-    className: 'DGN-UI-Breadcrumb-li-icon',
-    name: item === null || item === void 0 ? void 0 : item.icon,
-    color: color,
-    width: sizeIcon,
-    height: sizeIcon
-  }) : null, jsx(Typography, {
-    className: 'DGN-UI-Breadcrumb-li-label',
-    type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? sizeTypographyH : sizeTypographyP,
-    mapping: 'a',
-    color: 'currentColor',
-    href: item === null || item === void 0 ? void 0 : item.href,
-    onClick: item === null || item === void 0 ? void 0 : item.onClick
-  }, (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name)), (data === null || data === void 0 ? void 0 : data.length) !== idx + 1 ? renderSeparator : null)) : React.Children.toArray(children).filter(child => {
+  const allItems = data !== null && data !== void 0 && data.length ? data.map((item, idx) => {
+    var _item$onClick2;
+    return jsx("li", {
+      css: _BreadcrumbLiCSS,
+      className: 'DGN-UI-Breadcrumb-li',
+      key: `child-${idx}`
+    }, item !== null && item !== void 0 && item.icon ? jsx(Icon, {
+      className: 'DGN-UI-Breadcrumb-li-icon',
+      name: item === null || item === void 0 ? void 0 : item.icon,
+      color: color,
+      width: sizeIcon,
+      height: sizeIcon
+    }) : null, jsx(Typography, {
+      className: 'DGN-UI-Breadcrumb-li-label',
+      type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? sizeTypographyH : sizeTypographyP,
+      mapping: 'a',
+      color: 'currentColor',
+      href: item === null || item === void 0 ? void 0 : item.href,
+      onClick: item === null || item === void 0 ? void 0 : (_item$onClick2 = item.onClick) === null || _item$onClick2 === void 0 ? void 0 : _item$onClick2.call(item)
+    }, (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name)), (data === null || data === void 0 ? void 0 : data.length) !== idx + 1 ? renderSeparator : null);
+  }) : React.Children.toArray(children).filter(child => {
     return /*#__PURE__*/React.isValidElement(child);
   }).map((child, idx) => {
     var _React$Children$toArr;
@@ -181,7 +184,6 @@ Breadcrumb.propTypes = {
   /** Class for component. */
   data: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
-    icon: PropTypes.string,
     href: PropTypes.string,
     onClick: PropTypes.func
   })),

package/components/form-control/attachment/index.js

@@ -1299,7 +1299,6 @@ Attachment.defaultProps = {
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
   },
-  viewType: 'detail',
   ...getGlobal(['components', 'attachment', 'defaultProps'])
 };
 Attachment.propTypes = {

package/components/form-control/dropdown/index.js

@@ -306,10 +306,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //     }
   // };
 
-  /**
-   * So sánh text đầu vào cáo map với txtSearch
-   * @param text
-   * @return {boolean}
+  /**
+   * So sánh text đầu vào cáo map với txtSearch
+   * @param text
+   * @return {boolean}
    */
   const handleRenderBySearch = (text = '') => {
     if (!txtSearch || typeof text !== 'string') return true;
@@ -320,10 +320,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else return text.toLowerCase().includes(txtSearch.toLowerCase());
   };
 
-  /**
-   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
-   * @param data {object} rowData of dataSource
-   * @return {string}
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
    */
   const displayValue = data => {
     let text = '';
@@ -1634,9 +1634,9 @@ Dropdown.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** Field name used for text display in dropdown list.<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** Field name used for text display in dropdown list.<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /**  Style inline of dropdown items. */
@@ -1645,14 +1645,14 @@ Dropdown.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
   helperTextProps: PropTypes.object,
-  /** Field name used for icon display.<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** Field name used for icon display.<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1686,8 +1686,8 @@ Dropdown.propTypes = {
   onChange: PropTypes.func,
   /** Callback fired when dropdown closed. */
   onClosed: PropTypes.func,
-  /** Callback fired when the input value changes.<br/>
-   * if undefined: the filter function will run (default)
+  /** Callback fired when the input value changes.<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
   /** Callback fired when key down input */
@@ -1698,21 +1698,21 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */
   readOnly: PropTypes.bool,
-  /** Function displays items by custom.<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** Function displays items by custom.<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
-  /** Function or field name used for display selected items, example:<br/>
-   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** Function or field name used for display selected items, example:<br/>
+   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
-  /**
-   * Duration wait enter search content on search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, used default delayOnInput.
+  /**
+   * Duration wait enter search content on search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, used default delayOnInput.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   /** Specifies a data object's field name or an expression whose value is compared to the search string. */
@@ -1739,19 +1739,19 @@ Dropdown.propTypes = {
   valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   /**The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
 };
 

package/components/image/index.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx, keyframes } from '@emotion/core';
-import ImageDefault from "../../assets/image/default.jpg";
+import AvatarDefault from "../../assets/avatar/default.svg";
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { animation, borderRadius, displayInlineFlex, itemsCenter, objectCover, overflowHidden, parseWidthHeight, positionRelative } from "../../styles/general";
+import { borderRadius, displayInlineFlex, itemsCenter, objectCover, overflowHidden, parseWidthHeight, positionRelative } from "../../styles/general";
 import { classNames, useIntersection } from "../../utils";
 const blurKeyframe = keyframes`
     0% { -webkit-filter: blur(4px);}
@@ -29,7 +29,7 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width
 }, reference) => {
   if (!reference) reference = useRef(null);
-  if (!defaultSrc) defaultSrc = ImageDefault;
+  if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
   const [srcState, setSrcState] = useState(src);
   const [isInView, setIsInView] = useState(false);
@@ -106,10 +106,7 @@ const ImageCSS = (width, height, circular) => css`
     ${circular && borderRadius('50%')};
 `;
 const blurAnimationCSS = css`
-    ${animation({
-  keyframes: blurKeyframe,
-  duration: '1s'
-})}
+    animation: ${blurKeyframe} 1s ease;
 `;
 Image.defaultProps = {
   circular: false,

package/components/modal/modal.js

@@ -7,7 +7,7 @@ import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useS
 import { createPortal } from 'react-dom';
 import { animations } from "../../styles/animation";
 import { bgColor, borderRadius, boxBorder, cursorMove, displayFlex, flexCol, flexRow, justifyCenter, left, parseMaxWidthHeight, parseMinWidth, parseWidthHeight, pdt, positionAbsolute, positionRelative, top } from "../../styles/general";
-import { makeStyles, useTheme } from "../../theme";
+import { useTheme } from "../../theme";
 import { classNames, useDelayUnmount } from "../../utils";
 import ModalContext from "./context";
 const {
@@ -16,12 +16,6 @@ const {
   },
   zIndex: zIndexCORE
 } = useTheme();
-const useStyles = makeStyles({
-  noScroll: {
-    key: props => `DGN-Modal-${props}`,
-    overflow: 'hidden'
-  }
-});
 const fadeInDown = animations.fadeInDown;
 const fadeOutUp = animations.fadeOutUp;
 const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -44,8 +38,7 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   if (!reference) reference = useRef(null);
   const ref = useRef(null);
-
-  // const overflow = useRef(null);
+  const overflow = useRef(null);
   const modalBoxRef = useRef(null);
   const [openState, setOpenState] = useState(open);
   const showModal = useDelayUnmount(openState, 200);
@@ -55,6 +48,7 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setOpenState(true);
   };
   const onCloseModal = () => {
+    document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
     onClose && onClose();
     setOpenState(false);
   };
@@ -115,34 +109,36 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       modalBoxRef.current.style.left = newLeft + 'px';
     };
   };
+  useEffect(() => {
+    return () => {
+      document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
+    };
+  }, []);
   useEffect(() => {
     setOpenState(open);
   }, [open]);
   useEffect(() => {
-    if (openState && ref.current) {
-      const modals = document.querySelectorAll('.DGN-UI-Modal');
-      if (!darkTheme && modals && modals.length > 1) {
-        ref.current.style.backgroundColor = 'transparent';
-      }
-      if (autoFocus) {
-        if (!ref.current.contains(document.activeElement)) {
-          ref.current.tabIndex = -1;
-          ref.current.focus();
+    if (openState) {
+      if (ref.current) {
+        const modals = document.querySelectorAll('.DGN-UI-Modal');
+        if (!darkTheme && modals && modals.length > 1) {
+          ref.current.style.backgroundColor = 'transparent';
+        }
+        if (autoFocus) {
+          if (!ref.current.contains(document.activeElement)) {
+            ref.current.tabIndex = -1;
+            ref.current.focus();
+          }
         }
       }
-      const timestamp = Date.now();
-      const classes = useStyles(timestamp);
-      const noScrollClass = classes.noScroll.split(' ');
-      document.body.classList.add(...noScrollClass);
-      // overflow.current = document.body.style.overflow; // overflow of <body /> before open modal
-      // document.body.style.overflow = 'hidden';
+      overflow.current = document.body.style.overflow; // overflow of <body /> before open modal
+      document.body.style.overflow = 'hidden';
       // Allow press ESC to close popup
       if (pressESCToClose) {
         document.addEventListener('keydown', pressESCHandler);
       }
       return () => {
-        document.body.classList.remove(...noScrollClass);
-        // document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
+        document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
         if (pressESCToClose) {
           document.removeEventListener('keydown', pressESCHandler);
         }

package/components/popover/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { bgColor, borderBottom, borderRadius4px, displayFlex, displayNone, flexCol, inset, justifyBetween, overflowAuto, parseMaxWidthHeight, parseMinWidthHeight, parseWidthHeight, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative } from "../../styles/general";
-import { makeStyles, useTheme } from "../../theme";
+import { useTheme } from "../../theme";
 import { classNames, isMobile, refType as ref } from "../../utils";
 const {
   typography: {
@@ -15,12 +15,6 @@ const {
   spacing,
   zIndex: zIndexCORE
 } = useTheme();
-const useStyles = makeStyles({
-  noScroll: {
-    key: props => `DGN-Popover-${props}`,
-    overflow: 'hidden'
-  }
-});
 const eventMap = new Map([['click', ['click']], ['hover', ['mouseenter', 'mouseleave']], ['focus', ['focus', 'blur']]]);
 const getArrowPosition = (anchorOrigin, transformOrigin, translate) => {
   if (anchorOrigin.horizontal === 'right' && transformOrigin.horizontal === 'left') {
@@ -145,7 +139,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (isMobile.any() && trigger === 'hover') trigger = 'click';
   const ref = useRef(null);
   const arrowRef = useRef(null);
-  // const overflow = useRef(null);
+  const overflow = useRef(null);
   const anchorRef = useRef(anchor);
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
@@ -412,14 +406,10 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [open]);
   useEffect(() => {
     if (openState && ref.current) {
-      // if (document.body.style.overflow !== 'hidden') {
-      //     overflow.current = document.body.style.overflow; // store overflow of <body /> before open
-      //     document.body.style.overflow = 'hidden';
-      // }
-      const timestamp = Date.now();
-      const classes = useStyles(timestamp);
-      const noScrollClass = classes.noScroll.split(' ');
-      document.body.classList.add(...noScrollClass);
+      if (document.body.style.overflow !== 'hidden') {
+        overflow.current = document.body.style.overflow; // store overflow of <body /> before open
+        document.body.style.overflow = 'hidden';
+      }
       // Position's anchor
       updatePositionPopover();
 
@@ -434,8 +424,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       window.addEventListener('resize', updatePositionPopover);
       if (trigger === 'hover') ref.current.addEventListener('mouseleave', handleEventTrigger, false);
       return () => {
-        document.body.classList.remove(...noScrollClass);
-        // document.body.style.overflow = overflow.current; // reset overflow of <body /> before open
+        document.body.style.overflow = overflow.current; // reset overflow of <body /> before open
         if (pressESCToClose) {
           document.removeEventListener('keydown', pressESCHandler);
         }
@@ -443,10 +432,9 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         window.removeEventListener('resize', updatePositionPopover);
         if (trigger === 'hover' && ref.current) ref.current.removeEventListener('mouseleave', handleEventTrigger, false);
       };
+    } else if (!openState) {
+      document.documentElement.style.overflow = overflow.current;
     }
-    // else if (!openState) {
-    //     document.documentElement.style.overflow = overflow.current;
-    // }
   }, [openState]);
   useEffect(() => {
     clickOutsideToClose ? document.addEventListener('click', onClickOutside) : document.removeEventListener('click', onClickOutside);

package/components/typography/index.js

@@ -5,15 +5,24 @@ import { Popover } from "./..";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { breakAll, breakWord, cursorPointer, displayBlock, displayInlineBlock, italic, overflowHidden, parseHeight, parseMaxWidth, parseMinWidth, pd, positionRelative, textCapitalize, textCenter, textColor, textLineThrough, textLowercase, textSentence, textUnderline, textUppercase, whiteSpaceBreakSpaces } from "../../styles/general";
-import { useTypography as typography } from "../../theme";
+import { useTheme, useTypography as typography } from "../../theme";
 import { classNames, renderHTML } from "../../utils";
-const colorMap = new Map([['default', 'text/main']]);
+const {
+  colors: {
+    text: {
+      main: textMain
+    },
+    fill: {
+      tooltip: fillTooltip
+    }
+  }
+} = useTheme();
+const colorMap = new Map([['default', textMain]]);
 const formatMap = new Map([['capitalize', textCapitalize], ['uppercase', textUppercase], ['lowercase', textLowercase], ['italic', italic], ['line-through', textLineThrough], ['underline', textUnderline], ['sentence', textSentence]]);
 const isTextClamped = elm => (elm === null || elm === void 0 ? void 0 : elm.scrollHeight) > (elm === null || elm === void 0 ? void 0 : elm.clientHeight);
 const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   capitalize,
-  // deprecated
   center,
   children,
   className,
@@ -28,20 +37,17 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   tooltipDirection,
   type,
   uppercase,
-  // deprecated
   ...props
 }, reference) => {
   var _ref$current;
   if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const formatCSS = [];
-  if (Array.isArray(format)) {
-    format.forEach(item => {
-      formatCSS.push(formatMap.get(item));
-    });
-  }
+  format.forEach(item => {
+    formatCSS.push(formatMap.get(item));
+  });
   const [openTooltip, setOpenTooltip] = useState(false);
-  const _TextRootCSS = [TextRootCSS(color, type, lineClamp, onClick, hoverTooltip, center, fullWidth, uppercase, capitalize), ...formatCSS];
+  const _TextRootCSS = [TextRootCSS(color, type, lineClamp, onClick, hoverTooltip), ...formatCSS];
   const showTooltip = () => {
     if (!hoverTooltip) return;
     if (isTextClamped(ref.current)) {
@@ -64,26 +70,26 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  const classes = classNames('DGN-UI-Typography', `DGN-UI-Typography-${type}`, className);
+  const classes = (inTooltip = false) => classNames('DGN-UI-Typography', center && 'DGN-Typography-center', fullWidth && 'DGN-Typography-fullWidth', `DGN-Typography-${type}`, uppercase && `DGN-Typography-Uppercase`, capitalize && 'DGN-Typography-Capitalize', !inTooltip && lineClamp && 'DGN-Typography-Clamp', className);
   const content = Array.isArray(children) && !children.some(node => node && String(node.$$typeof) === 'Symbol(react.element)') ? children.join('') : children;
   const renderTooltip = hoverTooltip ? jsx(Popover, {
-    css: parseMinWidth(300),
+    css: [parseMinWidth(300)],
     open: openTooltip,
     pressESCToClose: false,
     fullScreen: false,
-    bgColor: 'fill/tooltip',
+    bgColor: fillTooltip,
     anchor: ref,
     width: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth) || 'max-content',
     direction: tooltipDirection
   }, renderHTML(content, mapping, {
     css: [_TextRootCSS, PopoverContentCSS],
-    className: classes
+    className: classes(true)
   })) : null;
   return useMemo(() => {
     return jsx(Fragment, null, renderHTML(content, mapping, {
       ref: ref,
-      css: [_TextRootCSS, lineClamp && ClampCSS(lineClamp)],
-      className: classes,
+      css: _TextRootCSS,
+      className: classes(),
       onMouseEnter: showTooltip,
       onMouseLeave: hideTooltip,
       onClick: onClick,
@@ -91,7 +97,7 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }), renderTooltip);
   }, [capitalize, center, children, className, color, format, fullWidth, hoverTooltip, italic, lineClamp, mapping, onClick, props, tooltipDirection, type, uppercase, openTooltip]);
 }));
-const TextRootCSS = (color, type, lineClamp, onClick, hoverTooltip, center, fullWidth, uppercase, capitalize) => css`
+const TextRootCSS = (color, type, lineClamp, onClick, hoverTooltip) => css`
     ${displayInlineBlock};
     ${positionRelative};
     ${onClick && cursorPointer};
@@ -100,22 +106,28 @@ const TextRootCSS = (color, type, lineClamp, onClick, hoverTooltip, center, full
     ${textColor(colorMap.get(color) || color)};
     ${parseMaxWidth('max-content')};
     ${type !== 'inherit' && typography[type]};
-    ${center && textCenter};
-    ${uppercase && textUppercase};
-    ${capitalize && textCapitalize};
-    ${fullWidth && css`
+    &.DGN-Typography-center {
+        ${textCenter};
+    }
+    &.DGN-Typography-fullWidth {
         ${displayBlock};
         ${parseMaxWidth('initial')};
-    `}
-`;
-const ClampCSS = lineClamp => css`
-    ${overflowHidden};
-    display: -webkit-box;
-    -webkit-line-clamp: ${lineClamp};
-    -webkit-box-orient: vertical;
+    }
+    &.DGN-Typography-Uppercase {
+        ${textUppercase};
+    }
+    &.DGN-Typography-Capitalize {
+        ${textCapitalize};
+    }
+    &.DGN-Typography-Clamp {
+        ${overflowHidden};
+        display: -webkit-box;
+        -webkit-line-clamp: ${lineClamp};
+        -webkit-box-orient: vertical;
+    }
 `;
 const PopoverContentCSS = css`
-    ${textColor('text/tooltip')};
+    ${textColor('text.tooltip')};
     ${pd([1, 1.5])};
     ${parseHeight('fit-content')};
 `;