diginet-core-ui 1.3.98 → 1.3.99

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

@@ -478,15 +478,18 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const checkExistingFile = newFile => {
-    const files = allNewAttached.getAll('files');
-    if (files && files.length) {
-      const length = files.length;
-      for (let i = 0; i < length; i++) {
-        if (parseStringify(newFile) === parseStringify(files[i])) return true;
-      }
-    }
-    return false;
+    const files = [...dataState, ...newDataState];
+    return files.some(file => ((file === null || file === void 0 ? void 0 : file.FileName) || (file === null || file === void 0 ? void 0 : file.name)) === ((newFile === null || newFile === void 0 ? void 0 : newFile.FileName) || (newFile === null || newFile === void 0 ? void 0 : newFile.name)) && ((file === null || file === void 0 ? void 0 : file.FileSize) || (file === null || file === void 0 ? void 0 : file.size)) === ((newFile === null || newFile === void 0 ? void 0 : newFile.FileSize) || (newFile === null || newFile === void 0 ? void 0 : newFile.size)));
+    // const files = allNewAttached.getAll('files');
+    // if (files && files.length) {
+    //     const length = files.length;
+    //     for (let i = 0; i < length; i++) {
+    //         if (parseStringify(newFile) === parseStringify(files[i])) return true;
+    //     }
+    // }
+    // return false;
   };
+
   const checkAcceptFileType = newFile => {
     if (!accept || !accept.length) return true;
     const type = typeof accept === 'string' ? accept : accept.join('-');
@@ -682,14 +685,17 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     document.removeEventListener('keydown', onKeyDown);
     document.removeEventListener('click', clickOutOfItem);
   };
-  const parseStringify = fileInfo => JSON.stringify({
-    lastModified: fileInfo.lastModified,
-    lastModifiedDate: fileInfo.lastModifiedDate,
-    name: fileInfo.name,
-    size: fileInfo.size,
-    type: fileInfo.type,
-    webkitRelativePath: fileInfo.webkitRelativePath
-  });
+
+  // const parseStringify = fileInfo =>
+  //     JSON.stringify({
+  //         lastModified: fileInfo.lastModified,
+  //         lastModifiedDate: fileInfo.lastModifiedDate,
+  //         name: fileInfo.name,
+  //         size: fileInfo.size,
+  //         type: fileInfo.type,
+  //         webkitRelativePath: fileInfo.webkitRelativePath,
+  //     });
+
   const mountDomain = item => {
     if (!item) return item;
     const cloneItem = JSON.parse(JSON.stringify(item));
@@ -777,6 +783,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [data]);
+  useEffect(() => {
+    setNewDataState([]);
+  }, [dataState]);
   useEffect(() => {
     if (inputProps && Object.keys(inputProps).length) {
       Object.keys(inputProps).forEach(name => {

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

@@ -382,12 +382,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       //     if (handleRenderBySearch(data, pattern)) continue;
       // } else if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
 
-      if (renderItem && typeof renderItem === 'function') {
-        displayText = renderItem({
-          data,
-          index
-        });
-      } else if (subText) {
+      if (subText) {
         displayText = jsx(Fragment, null, jsx(Typography, {
           className: 'DGN-UI-Dropdown-PrimaryText',
           type: 'p1'
@@ -403,7 +398,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const value = typeof data === 'object' ? data[valueExpr] : data;
       let itemDisabled = typeof data === 'object' ? data['disabled'] : false;
       const icon = getIconFromData(data);
-      const text = jsx(Typography, {
+      const text = renderItem && typeof renderItem === 'function' ? renderItem({
+        data,
+        index
+      }) : jsx(Typography, {
         type: 'p1'
       }, displayText);
       if (multiple && selectBox) {
@@ -961,11 +959,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, content);
     if (typeof renderSelectedItem === 'function') {
       inputRef.current.innerHTML = '';
-      const item = renderContent(renderSelectedItem({
+      const item = renderSelectedItem({
         data
-      }));
+      });
       const el = document.createElement('div');
       el.style.display = 'flex';
+      el.style.width = '100%';
       el.style.minHeight = '24px';
       if (!multilineSelectedItem) el.style.maxHeight = '24px';
       ReactDOM.render(item, inputRef.current.appendChild(el));

package/components/tab/tab-container.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { displayFlex, flexCol, flexRow, parseWidth, positionRelative, typographyTypes } from "../../styles/general";
-import { classNames, randomString } from "../../utils";
+import { classNames } from "../../utils";
 import TabContext from "./context";
 const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -23,10 +23,6 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     value
   } = props;
   const [tabIndexState, setTabIndexState] = useState(tabIndex || value);
-  const [id] = useState(randomString(6, {
-    allowNumber: false,
-    allowSymbol: false
-  }));
   if (level === 'level1') level = 'h3';
   if (level === 'level2') level = 'p1';
   const _TabContainerCSS = TabContainerCSS(direction, width);
@@ -47,7 +43,6 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return jsx("div", {
       css: _TabContainerCSS,
       ref: ref,
-      id: `DGN-${id}-tab-button-container`,
       className: classNames('DGN-UI-Tab-Container', className),
       style: style,
       ...props
@@ -93,9 +88,5 @@ TabContainer.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Any props else. */
   props: PropTypes.any
-  /**
-   * Ref methods.
-   */
 };
-
 export default TabContainer;

package/components/tab/tab-header.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/core';
 import { ButtonIcon } from "./..";
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { boxBorder, displayFlex, displayNone, flexCol, flexRow, justifyCenter, mg, overflowHidden, parseMaxWidth, parseWidth, parseWidthHeight, pd, positionRelative, selfCenter, whiteSpaceNoWrap } from "../../styles/general";
+import { boxBorder, displayFlex, displayNone, flexCol, flexRow, justifyCenter, mg, overflowHidden, parseWidth, parseWidthHeight, pd, positionRelative, selfCenter, whiteSpaceNoWrap } from "../../styles/general";
 import { classNames } from "../../utils";
 import TabContext from "./context";
 const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -50,11 +50,10 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return useMemo(() => {
     return jsx("div", {
       css: _ContainerCSS,
-      id: `DGN-control`,
       className: classNames('DGN-UI-Tab-Header-Container', className),
       style: style,
       ...props
-    }, scrollButtons && !isVertical && jsx(ButtonIcon, {
+    }, scrollButtons && !isVertical ? jsx(ButtonIcon, {
       css: ScrollLeftButtonCSS,
       name: isVertical ? 'ArrowUp' : 'ArrowLeft',
       viewType: 'text',
@@ -62,7 +61,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       viewBox: true,
       disabled: !showScrollLeftButton,
       onClick: () => _onClickScrollButton(true)
-    }), jsx("div", {
+    }) : null, jsx("div", {
       css: [_TabHeaderCSS, !isVertical && TabHeaderHorizontalCSS],
       className: 'DGN-UI-Tab-Header',
       ref: ref,
@@ -72,7 +71,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
       level
-    }))), scrollButtons && !isVertical && jsx(ButtonIcon, {
+    }))), scrollButtons && !isVertical ? jsx(ButtonIcon, {
       css: ScrollRightButtonCSS,
       name: isVertical ? 'ArrowDown' : 'ArrowRight',
       viewType: 'text',
@@ -80,7 +79,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       viewBox: true,
       disabled: !showScrollRightButton,
       onClick: () => _onClickScrollButton(false)
-    }));
+    }) : null);
   }, [centered, children, className, level, props, scrollButtons, style, width, direction, isVertical, scrollLeft]);
 }));
 const ContainerCSS = (centered, isVertical, width) => css`
@@ -91,7 +90,6 @@ const ContainerCSS = (centered, isVertical, width) => css`
     ${parseWidthHeight(width, 'auto')};
     ${centered && justifyCenter};
     ${isVertical ? flexCol : flexRow};
-    ${parseMaxWidth(isVertical ? 'max-content' : '100%')};
     ${pd(0)};
 `;
 const TabHeaderCSS = width => css`
@@ -100,6 +98,7 @@ const TabHeaderCSS = width => css`
     ${parseWidth(width)};
 `;
 const TabHeaderHorizontalCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${whiteSpaceNoWrap};
@@ -142,9 +141,5 @@ TabHeader.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Any props else. */
   props: PropTypes.any
-  /**
-   * Ref methods.
-   */
 };
-
 export default TabHeader;

package/components/tab/tab-panel.js

@@ -23,8 +23,8 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [isRendered, setIsRendered] = useState(false);
   const ref = useRef(null);
   const isVertical = direction === 'vertical';
-  const isActive = index === tabIndexState;
-  const _TabPanelCSS = TabPanelCSS(isVertical, isActive);
+  const isSelected = index === tabIndexState;
+  const _TabPanelCSS = TabPanelCSS(isVertical, isSelected);
   useEffect(() => {
     if (isRendered) return;else if (index === tabIndexState) setIsRendered(true);
   }, [tabIndexState]);
@@ -42,23 +42,20 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return jsx("div", {
       css: _TabPanelCSS,
       ref: ref,
-      role: 'tab-panel',
-      "aria-labelledby": `tab-${index}`,
-      id: `tab-panel-${index}`,
       className: classNames('DGN-UI-Tab-Panel', className),
       style: style,
       ...props
-    }, isActive || !lazyLoading || isRendered ? children : null);
-  }, [children, className, index, lazyLoading, props, style, isActive, isRendered, tabIndexState]);
+    }, isSelected || !lazyLoading || isRendered ? children : null);
+  }, [children, className, index, lazyLoading, props, style, isSelected, isRendered, tabIndexState]);
 }));
-const TabPanelCSS = (isVertical, isActive) => css`
+const TabPanelCSS = (isVertical, isSelected) => css`
     ${displayFlex};
     ${flexCol};
     ${boxBorder};
     ${positionRelative};
-    ${isActive ? flexCol : displayNone};
+    ${isSelected ? flexCol : displayNone};
     ${parseWidthHeight('100%', isVertical ? 300 : '100%')};
-    ${textColor('text.main')};
+    ${textColor('text/main')};
     ${pd([0, isVertical ? 3 : 2.5])};
 `;
 TabPanel.defaultProps = {
@@ -79,9 +76,5 @@ TabPanel.propTypes = {
   style: PropTypes.object,
   /** Any props else. */
   props: PropTypes.any
-  /**
-   * Ref methods.
-   */
 };
-
 export default TabPanel;

package/components/tab/tab.js

@@ -5,7 +5,7 @@ import { Icon, Typography } from "./..";
 import Ripple from "../button/ripple-effect";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, bgTransparent, borderRadius, boxBorder, breakWord, cursorDefault, cursorPointer, displayFlex, flexRow, itemsCenter, justifyCenter, justifyStart, mgl, mgr, outlineNone, overflowHidden, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, pd, pointerEventsAuto, pointerEventsNone, positionAbsolute, positionRelative, shadowNone, textCenter, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
+import { bgColor, borderRadius, bottom, boxBorder, breakWord, cursorDefault, cursorPointer, displayFlex, flexRow, itemsCenter, justifyCenter, justifyStart, left, mgl, mgr, outlineNone, overflowHidden, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, pd, pointerEventsAuto, pointerEventsNone, positionAbsolute, positionRelative, shadowNone, textCenter, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
 import { classNames } from "../../utils";
 import TabContext from "./context";
 const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -59,8 +59,7 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
     return jsx("span", {
-      css: IconCSS,
-      className: isEndIcon ? 'end-icon' : ''
+      css: [IconCSS, isEndIcon && EndIconCSS]
     }, node);
   };
   return useMemo(() => {
@@ -100,7 +99,6 @@ const TabItemCSS = (color, isVertical) => css`
     ${whiteSpaceNoWrap};
     ${shadowNone};
     ${!isVertical && textCenter};
-    ${bgColor('system.white')};
     ${textColor(color)};
     ${parseMinWidth(80)};
     ${parseMaxWidth(isVertical ? '100%' : 287)};
@@ -108,29 +106,26 @@ const TabItemCSS = (color, isVertical) => css`
     ${pointerEventsAuto};
     ${userSelectNone};
     flex: 0 0 auto;
-    border: 0;
     transition: all 0.2s ease-in-out, background-color 0.2s ease-in-out;
     :hover:not(.selected):not(.disabled),
     :focus {
-        ${bgColor('system.white')};
-        ${textColor('system.rest')};
+        ${textColor('system/rest')};
         .Indicator {
-            ${bgColor('system.rest')};
+            ${bgColor('system/rest')};
             transform: scale(1);
         }
     }
 `;
 const TabItemDisabledCSS = css`
     ${pointerEventsNone};
-    ${bgTransparent};
     ${cursorDefault};
-    ${textColor('system.disabled')};
+    ${bgColor('transparent')};
+    ${textColor('system/disabled')};
 `;
 const TabItemSelectedCSS = css`
-    ${bgColor('system.white')};
-    ${textColor('system.active')};
+    ${textColor('system/active')};
     .Indicator {
-        ${bgColor('system.active')};
+        ${bgColor('system/active')};
         transform: scale(1);
     }
 `;
@@ -139,12 +134,13 @@ const IndicatorCSS = isVertical => css`
     ${parseHeight(isVertical ? '100%' : 4)};
     ${parseWidth(isVertical ? 4 : '100%')}
     ${borderRadius(1)};
-    bottom: 0;
-    left: 0;
+    ${bottom(0)};
+    ${left(0)};
     transform: ${isVertical ? 'scaleY(0)' : 'scaleX(0)'};
     transition: transform 0.2s ease-in-out;
 `;
 const IconCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${itemsCenter};
     ${justifyCenter};
@@ -152,14 +148,14 @@ const IconCSS = css`
     ${boxBorder};
     ${parseMaxWidthHeight(24)};
     ${mgr([1])};
-    &.end-icon {
-        ${mgr('unset')};
-        ${mgl([1])};
-    }
+`;
+const EndIconCSS = css`
+    ${mgr('unset')};
+    ${mgl([1])};
 `;
 TabItem.defaultProps = {
   className: '',
-  color: 'system.rest',
+  color: 'system/rest',
   disabled: false,
   label: '',
   style: {}
@@ -189,9 +185,5 @@ TabItem.propTypes = {
   style: PropTypes.object,
   /** Any props else. */
   props: PropTypes.any
-  /**
-   * Ref methods.
-   */
 };
-
 export default TabItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.98",
+  "version": "1.3.99",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,12 @@ npm test
 ```
 
 ## Changelog
+## 1.3.99
+- \[Changed\]: Typography – Add new text style
+- \[Fixed\]: Tab – Fix background UI not match design
+- \[Fixed\]: Dropdown – Fix case renderItem, renderSelectedItem inside Typography
+- \[Fixed\]: Attachment – Fix bug not reset new upload data
+
 ## 1.3.98
 - \[Changed\]: Image – Change default image
 - \[Changed\]: Icon – Update Image, Another, Compressed, Presentation, Sheet, Word, PDF

package/styles/general.js

@@ -51,6 +51,9 @@ const animation = ({
 }) => css`
     animation: ${keyframes} ${duration} ${timingFunction};
 `;
+const aspectSquare = css`
+    aspect-ratio: 1 / 1;
+`;
 const bgColor = cl => css`
     background-color: ${getColor(cl)};
 `;
@@ -90,6 +93,9 @@ const borderRadius4px = css`
 const borderRadius50 = css`
     border-radius: 50%;
 `;
+const borderRight = (withVl, colorVl) => css`
+    border-right: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system/dark')};
+`;
 const borderTop = (withVl, colorVl) => css`
     border-top: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system/dark')};
 `;
@@ -481,4 +487,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { animation, bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderDashed, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, borderTop, borderTopColor, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, listNone, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, overflowXHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { animation, aspectSquare, bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderDashed, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, borderRight, borderTop, borderTopColor, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, listNone, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, overflowXHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };

package/styles/typography.js

@@ -13,9 +13,12 @@ const fontNormal = css`
 const fontWeightBold = css`
     font-weight: 700;
 `;
-const fontWeightRegular = css`
+const fontWeightMedium = css`
     font-weight: 500;
 `;
+const fontWeightRegular = css`
+    font-weight: 400;
+`;
 const fontWeightNormal = css`
     font-weight: normal;
 `;
@@ -28,7 +31,7 @@ const getFontSize = size => css`
 const title1 = css`
     ${fontNormal};
     ${fontWeightBold};
-    ${getFontSize(parseInt(fontSize) + 16)}; //32
+    ${getFontSize(parseInt(fontSize) + 12)}; //28
 `;
 const title2 = css`
     ${fontNormal};
@@ -72,22 +75,52 @@ const heading5 = css`
 `;
 const heading6 = css`
     ${fontNormal};
-    ${fontWeightRegular}
+    ${fontWeightMedium};
     ${getFontSize(parseInt(fontSize) - 4)}; //12
 `;
+const body1 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 12)}; //28
+`;
+const body2 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 10)}; //26
+`;
+const body3 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 8)}; //24
+`;
+const body4 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 6)}; //22
+`;
+const body5 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 4)}; //20
+`;
+const body6 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 2)}; //18
+`;
 const paragraph1 = css`
     ${fontNormal};
-    ${fontWeightNormal};
+    ${fontWeightRegular};
     ${getFontSize(parseInt(fontSize))}; //16
 `;
 const paragraph2 = css`
     ${fontNormal};
-    ${fontWeightNormal};
+    ${fontWeightRegular};
     ${getFontSize(parseInt(fontSize) - 2)}; //14
 `;
 const paragraph3 = css`
     ${fontNormal};
-    ${fontWeightNormal};
+    ${fontWeightRegular};
     ${getFontSize(parseInt(fontSize) - 4)}; //12
 `;
 const uppercase = css`
@@ -101,7 +134,7 @@ const helperText = css`
     font-size: ${parseInt(fontSize) - 4}px; //12
     ${fontWeightNormal}
 `;
-export const typography = [[title1, ['title1', 't1']], [title2, ['title2', 't2']], [title3, ['title3', 't3']], [title4, ['title4', 't4']], [heading1, ['heading1', 'h1']], [heading2, ['heading2', 'h2']], [heading3, ['heading3', 'h3']], [heading4, ['heading4', 'h4']], [heading5, ['heading5', 'h5']], [heading6, ['heading6', 'h6']], [paragraph1, ['paragraph1', 'p1']], [paragraph2, ['paragraph2', 'p2']], [paragraph3, ['paragraph3', 'p3']], [uppercase, ['uppercase']], [label, ['label']], [helperText, ['helperText']]].reduce((obj, [value, keys]) => {
+export const typography = [[title1, ['title1', 't1']], [title2, ['title2', 't2']], [title3, ['title3', 't3']], [title4, ['title4', 't4']], [heading1, ['heading1', 'h1']], [heading2, ['heading2', 'h2']], [heading3, ['heading3', 'h3']], [heading4, ['heading4', 'h4']], [heading5, ['heading5', 'h5']], [heading6, ['heading6', 'h6']], [body1, ['body1', 'b1']], [body2, ['body2', 'b2']], [body3, ['body3', 'b3']], [body4, ['body4', 'b4']], [body5, ['body5', 'b5']], [body6, ['body6', 'b6']], [paragraph1, ['paragraph1', 'p1']], [paragraph2, ['paragraph2', 'p2']], [paragraph3, ['paragraph3', 'p3']], [uppercase, ['uppercase']], [label, ['label']], [helperText, ['helperText']]].reduce((obj, [value, keys]) => {
   for (const key of keys) {
     obj = {
       ...obj,