diginet-core-ui 1.3.63 → 1.3.65-beta.1

package/assets/images/menu/dhr/MHRP39N0009.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 3.00006L3 10.5301V11.5101L9.84 14.1601L12.48 21.0001H13.46L21 3.00006Z" fill="#7F828E"/>
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39 0L0 16.315V18.4383L14.82 24.18L20.54 39H22.6633L39 0Z" fill="#FFAA00"/>
 </svg>

package/assets/images/menu/dhr/MHRP39N0010.svg

@@ -1,7 +1,7 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 9.50006C17.46 9.50006 18.78 10.0701 19.76 11.0001H21V9.00006H3V11.0001H12.24C13.22 10.0701 14.54 9.50006 16 9.50006Z" fill="#7F828E"/>
-<path d="M21 5.00006H3V7.00006H21V5.00006Z" fill="#7F828E"/>
-<path d="M10.88 17.0001H3V19.0001H12.24C11.65 18.4501 11.18 17.7701 10.88 17.0001Z" fill="#7F828E"/>
-<path d="M10.88 13.0001H3V15.0001H10.5C10.5 14.2901 10.64 13.6201 10.88 13.0001Z" fill="#7F828E"/>
-<path d="M19.43 17.0201C19.79 16.4301 20 15.7401 20 15.0001C20 12.7901 18.21 11.0001 16 11.0001C13.79 11.0001 12 12.7901 12 15.0001C12 17.2101 13.79 19.0001 16 19.0001C16.74 19.0001 17.43 18.7801 18.02 18.4301L20.59 21.0001L22 19.5901L19.43 17.0201ZM16 17.0001C14.9 17.0001 14 16.1001 14 15.0001C14 13.9001 14.9 13.0001 16 13.0001C17.1 13.0001 18 13.9001 18 15.0001C18 16.1001 17.1 17.0001 16 17.0001Z" fill="#7F828E"/>
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.6842 15.0263C29.6811 15.0263 32.3906 16.1964 34.4021 18.1053H36.9474V14H0V18.1053H18.9663C20.9779 16.1964 23.6874 15.0263 26.6842 15.0263Z" fill="#2680EB"/>
+<path d="M36.9474 5.78943H0V9.8947H36.9474V5.78943Z" fill="#2680EB"/>
+<path d="M16.1748 30.4211H0V34.5264H18.9663C17.7553 33.3975 16.7905 32.0017 16.1748 30.4211Z" fill="#2680EB"/>
+<path d="M16.1748 22.2106H0V26.3159H15.3948C15.3948 24.8585 15.6821 23.4833 16.1748 22.2106Z" fill="#2680EB"/>
+<path d="M33.7247 30.4622C34.4637 29.2512 34.8947 27.8349 34.8947 26.3159C34.8947 21.7796 31.2205 18.1054 26.6842 18.1054C22.1479 18.1054 18.4737 21.7796 18.4737 26.3159C18.4737 30.8522 22.1479 34.5264 26.6842 34.5264C28.2032 34.5264 29.6195 34.0749 30.8305 33.3564L36.1058 38.6317L39 35.7375L33.7247 30.4622ZM26.6842 30.4212C24.4263 30.4212 22.5789 28.5738 22.5789 26.3159C22.5789 24.058 24.4263 22.2106 26.6842 22.2106C28.9421 22.2106 30.7895 24.058 30.7895 26.3159C30.7895 28.5738 28.9421 30.4212 26.6842 30.4212Z" fill="#2680EB"/>
 </svg>

package/assets/images/menu/dhr/MHRP39N0011.svg

@@ -1,14 +1,7 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M16.08 11.5401H18.08V4.5401C18.08 3.4401 17.18 2.5401 16.08 2.5401H4.07996C2.97996 2.5401 2.07996 3.4401 2.07996 4.5401V16.5401C2.07996 17.6401 2.97996 18.5401 4.07996 18.5401H11.08V16.5401H4.07996V4.3201H16.08V11.5401Z" fill="#7F828E"/>
-<path d="M14.08 12.5401H6.07996V14.5401H14.08V12.5401Z" fill="#7F828E"/>
-<path d="M11.08 11.5401H14.08V9.5401H6.07996V11.5401H11.08Z" fill="#7F828E"/>
-<path d="M14.08 6.5401H6.07996V8.5401H14.08V6.5401Z" fill="#7F828E"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.39 21.4601L11.92 17.9601L13.32 16.5501L15.39 18.6301L20.52 13.4601L21.92 14.8701L15.39 21.4601Z" fill="#7F828E"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.3858 19.5953H31.298V5.90247C31.298 3.75074 29.5375 1.99023 27.3858 1.99023H3.91224C1.76051 1.99023 0 3.75074 0 5.90247V29.3759C0 31.5276 1.76051 33.2882 3.91224 33.2882H17.6052V29.3759H3.91224V5.47213H27.3858V19.5953Z" fill="#1CA261"/>
+<path d="M23.4736 21.5514H7.82455V25.4637H23.4736V21.5514Z" fill="#1CA261"/>
+<path d="M23.4736 19.5953V15.6831H7.82455V19.5953H23.4736Z" fill="#1CA261"/>
+<path d="M23.4736 9.81473H7.82455V13.727H23.4736V9.81473Z" fill="#1CA261"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.0363 39L19.2485 32.1536L21.9871 29.3954L26.0363 33.4642L36.0712 23.351L38.8097 26.1092L26.0363 39Z" fill="#1CA261"/>
 </svg>

package/assets/images/menu/dhr/MHRP39N0015.svg

@@ -1,5 +1,5 @@
-<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.7895 17.135L20.0096 19L19.1551 15.485L22 13.12L18.2536 12.815L16.7895 9.5L15.3253 12.815L11.5789 13.12L14.4239 15.485L13.5694 19L16.7895 17.135Z" fill="#7F828E"/>
-<path d="M9.26316 9.5C11.8221 9.5 13.8947 7.37438 13.8947 4.75C13.8947 2.12562 11.8221 0 9.26316 0C6.70421 0 4.63158 2.12562 4.63158 4.75C4.63158 7.37438 6.70421 9.5 9.26316 9.5Z" fill="#7F828E"/>
-<path d="M6.69907 12.1373C3.61621 12.7076 0 14.2071 0 16.625V19H11.2779L11.896 16.4575L6.69907 12.1373Z" fill="#7F828E"/>
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.7632 35.7608L35.4715 39L33.9567 32.895L39 28.7874L32.3587 28.2576L29.7632 22.5L27.1676 28.2576L20.5263 28.7874L25.5696 32.895L24.0548 39L29.7632 35.7608Z" fill="#FF8C00"/>
+<path d="M16.4211 22.5C20.9574 22.5 24.6316 18.8081 24.6316 14.25C24.6316 9.69187 20.9574 6 16.4211 6C11.8847 6 8.21053 9.69187 8.21053 14.25C8.21053 18.8081 11.8847 22.5 16.4211 22.5Z" fill="#FF8C00"/>
+<path d="M11.8756 27.0805C6.41056 28.0711 0 30.6754 0 34.875V39H19.9926L21.0884 34.584L11.8756 27.0805Z" fill="#FF8C00"/>
 </svg>

package/assets/images/menu/dhr/MHRP89N1000.svg

@@ -1,6 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-  <g id="Group_4" data-name="Group 4" transform="translate(-904.173 -528.063)">
-    <rect id="Rectangle_2" data-name="Rectangle 2" width="24" height="24" transform="translate(904.173 528.063)" fill="none"/>
-    <path id="Path_1" data-name="Path 1" d="M-14.66-100.938v20a10.017,10.017,0,0,1-9-10A10.017,10.017,0,0,1-14.66-100.938Zm2.03,0v8.99h8.97A10.044,10.044,0,0,0-12.63-100.938Zm0,11.011v8.989a10.034,10.034,0,0,0,8.97-8.989Z" transform="translate(929.832 631)"/>
-  </g>
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.55 0V39C7.66 38.03 0 29.66 0 19.5C0 9.34 7.66 0.98 17.55 0Z" fill="#1CA261"/>
+<path d="M21.5098 0V17.53H38.9998C38.0798 8.29 30.7298 0.92 21.5098 0Z" fill="#FF8C00"/>
+<path d="M21.5098 21.47V39C30.7498 38.08 38.0898 30.71 38.9998 21.47H21.5098Z" fill="#FF4444"/>
 </svg>

package/assets/images/menu/dhr/MHRP89N1001.svg

@@ -1,6 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-  <g id="Group_4" data-name="Group 4" transform="translate(-904.173 -528.063)">
-    <rect id="Rectangle_2" data-name="Rectangle 2" width="24" height="24" transform="translate(904.173 528.063)" fill="none"/>
-    <path id="Path_1" data-name="Path 1" d="M-14.66-100.938v20a10.017,10.017,0,0,1-9-10A10.017,10.017,0,0,1-14.66-100.938Zm2.03,0v8.99h8.97A10.044,10.044,0,0,0-12.63-100.938Zm0,11.011v8.989a10.034,10.034,0,0,0,8.97-8.989Z" transform="translate(929.832 631)"/>
-  </g>
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.55 0V39C7.66 38.03 0 29.66 0 19.5C0 9.34 7.66 0.98 17.55 0Z" fill="#1CA261"/>
+<path d="M21.5098 0V17.53H38.9998C38.0798 8.29 30.7298 0.92 21.5098 0Z" fill="#FF8C00"/>
+<path d="M21.5098 21.47V39C30.7498 38.08 38.0898 30.71 38.9998 21.47H21.5098Z" fill="#FF4444"/>
 </svg>

package/assets/images/menu/dhr/W09F2000.svg

@@ -1,6 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="26.293" height="24.102" viewBox="0 0 26.293 24.102">
-  <g id="hosonhanvien_mss" transform="translate(0 -2.5)">
-    <path id="Path_3972" data-name="Path 3972" d="M17.973,21.295,13.787,19.2a1.153,1.153,0,0,1-.64-1.036V16.684c.1-.123.206-.262.315-.417a10.029,10.029,0,0,0,1.294-2.541,1.739,1.739,0,0,0,1.02-1.585V10.388a1.748,1.748,0,0,0-.438-1.15V6.907a3.928,3.928,0,0,0-.917-2.859A5.516,5.516,0,0,0,10.079,2.5,5.517,5.517,0,0,0,5.737,4.047,3.929,3.929,0,0,0,4.82,6.906V9.237a1.748,1.748,0,0,0-.438,1.15V12.14A1.743,1.743,0,0,0,5.038,13.5a9.2,9.2,0,0,0,1.535,3.171v1.45a1.158,1.158,0,0,1-.6,1.017L2.06,21.273A3.953,3.953,0,0,0,0,24.745V26.6H20.158V24.83A3.932,3.932,0,0,0,17.973,21.295Z" transform="translate(0)" fill="#707070"/>
-    <path id="Path_3973" data-name="Path 3973" d="M42,24.679l-4.261-1.845a.868.868,0,0,1-.308-.338l2.859,0s.165.016.422.016a4.6,4.6,0,0,0,1.753-.31,1.3,1.3,0,0,0,.545-1.941c-.817-1.163-2.725-4.2-2.784-7.284,0-.053-.174-5.295-5.351-5.337a6.5,6.5,0,0,0-1.478.181,4.734,4.734,0,0,1,.291,2.005V11.9a2.394,2.394,0,0,1,.438,1.376v1.753a2.409,2.409,0,0,1-1.142,2.043,10.651,10.651,0,0,1-1.292,2.463q-.1.14-.194.265v1.253a.492.492,0,0,0,.277.448l4.186,2.093a4.585,4.585,0,0,1,2.548,4.124v1.773h5.478v-1.62A3.543,3.543,0,0,0,42,24.679Z" transform="translate(-17.696 -2.886)" fill="#707070"/>
-  </g>
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.1201 27.93L29.9501 25.26C29.7601 25.14 29.6101 24.97 29.5001 24.77H33.6401C33.6401 24.77 33.8801 24.79 34.2501 24.79C35.1201 24.81 35.9801 24.65 36.7901 24.34C37.7401 23.92 38.1801 22.81 37.7601 21.86C37.7101 21.75 37.6501 21.64 37.5801 21.53C36.4001 19.84 33.6301 15.44 33.5501 10.98C33.5501 10.9 33.3001 3.32 25.8001 3.25C25.7101 3.25 25.6301 3.26 25.5401 3.27C25.4501 3.27 25.3701 3.25 25.2801 3.25C25.2301 3.25 25.1801 3.26 25.1301 3.26C25.6001 4.4 25.8001 5.62 25.7101 6.87V9.75C26.1501 10.47 26.3801 11.31 26.3901 12.16V14.87C26.3901 16.39 25.6501 17.8 24.4501 18.67C23.9401 19.99 23.2701 21.24 22.4501 22.4C22.4101 22.46 22.3701 22.51 22.3301 22.57V24.05L28.6801 27.22C31.4501 28.6 33.1701 31.38 33.1601 34.48V38.98H39.0001V32.53C39.0001 30.58 37.8901 28.79 36.1201 27.93Z" fill="#6AD2FF"/>
+<path d="M27.78 29.03L21.31 25.8C20.7 25.5 20.32 24.88 20.32 24.2V21.9C20.47 21.71 20.64 21.49 20.8 21.26C21.65 20.05 22.32 18.73 22.8 17.33C23.76 16.89 24.38 15.94 24.38 14.88V12.18C24.38 11.53 24.14 10.89 23.7 10.4V6.8C23.83 5.2 23.32 3.61 22.29 2.38C20.9 0.8 18.64 0 15.58 0C12.52 0 10.26 0.8 8.87 2.39C7.83 3.62 7.32 5.2 7.45 6.81V10.41C7.02 10.9 6.78 11.53 6.77 12.19V14.89C6.77 15.71 7.14 16.48 7.78 16.99C8.25 18.76 9.05 20.42 10.15 21.89V24.13C10.15 24.78 9.79 25.39 9.22 25.7L3.18 28.99C1.22 30.06 0 32.12 0 34.35V39H31.16V34.49C31.17 32.17 29.86 30.05 27.78 29.03Z" fill="#199FFF"/>
 </svg>

package/components/accordion/css.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/core';
 import theme from '../../theme/settings';
-import { alignCenter, alignStart, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+import { alignCenter, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
 const {
   colors: {
     system: {
@@ -24,13 +24,13 @@ export const SummaryRootCSS = background => css`
     ${flexRow};
     ${positionRelative};
     ${justifyBetween};
-    ${alignStart};
+    ${alignCenter};
     ${cursorPointer};
     ${borderBox};
     ${borderRadius4px};
     width: 100%;
     min-height: 56px;
-    padding: ${spacing(4)}px ${spacing(6)}px;
+    padding: ${spacing([4, 6])};
     ${background && `background-color: ${background === true ? headerbar : theme.colors[background] || background};`};
     .Accordion-Expand-Icon,
     .Accordion-Collapse-Icon {
@@ -61,7 +61,7 @@ export const SummaryRootCSS = background => css`
         ${flexRowReverse};
         ${justifyEnd};
         .Accordion-Icon.rotate-able {
-            margin-right: ${spacing(2)}px;
+            margin-right: ${spacing([2])};
             &.TreeView {
                 transform: rotateZ(-90deg);
             }
@@ -69,7 +69,7 @@ export const SummaryRootCSS = background => css`
     }
     &.end {
         .Accordion-Icon.rotate-able {
-            margin-left: ${spacing(2)}px;
+            margin-left: ${spacing([2])};
             &.TreeView {
                 transform: rotateZ(90deg);
             }
@@ -131,10 +131,10 @@ export const SummaryRootCSS = background => css`
         ${heading3};
         ${flexRow};
         ${positionRelative};
-        ${alignCenter};
         ${breakWord};
         ${userSelectNone};
         ${borderBox}
+        ${alignCenter};
         color: ${active};
         width: 100%;
         min-height: 24px;

package/components/accordion/details.js

@@ -20,19 +20,14 @@ const {
 const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
-  style,
-  id
+  id,
+  style
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx("div", {
       css: DetailsRootCSS,
@@ -54,7 +49,7 @@ const DetailsRootCSS = css`
     .DGN-UI-Accordion-Details-Content {
         ${borderBox};
         ${paragraph1};
-        padding: 0 ${spacing(6)}px ${spacing(4)}px ${spacing(6)}px;
+        padding: ${spacing([0, 6, 4, 6])};
         color: ${main};
         &.disabled {
             ${pointerEventsNone}
@@ -64,17 +59,17 @@ const DetailsRootCSS = css`
 `;
 AccordionDetails.defaultProps = {
   className: '',
-  style: {},
-  id: ''
+  id: '',
+  style: {}
 };
 AccordionDetails.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
-  className: PropTypes.string
+  className: PropTypes.string,
+
+  /** Style inline of component. */
+  style: PropTypes.object
 };
 export default AccordionDetails;

package/components/accordion/group.js

@@ -5,9 +5,13 @@ import { memo, useRef, forwardRef, Children, cloneElement, useMemo, useImperativ
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { borderRadius4px } from '../../styles/general';
+import theme from '../../theme/settings';
+const {
+  spacing
+} = theme;
 const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  className,
   children,
+  className,
   collapseOther,
   style
 }, reference) => {
@@ -26,15 +30,10 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx("div", {
       css: AccordionGroupRootCSS,
@@ -56,7 +55,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: 0 0 16px 0;
+                margin: ${spacing([0, 0, 4, 0])};
                 .DGN-UI-Divider {
                     display: none !important;
                 }
@@ -69,7 +68,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: 16px 0 0 0;
+                margin: ${spacing([4, 0, 0, 0])};
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }
@@ -85,7 +84,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: 16px 0;
+                margin: ${spacing([4, 0])};
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }
@@ -116,13 +115,13 @@ AccordionGroup.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
 
   /** If `true`, collapse other when expand */
-  collapseOther: PropTypes.bool
+  collapseOther: PropTypes.bool,
+
+  /** Style inline of component. */
+  style: PropTypes.object
 };
 export default AccordionGroup;

package/components/accordion/index.js

@@ -16,16 +16,16 @@ const {
   }
 } = theme;
 const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  id,
+  boxShadow,
+  children,
+  className,
   disabled,
   expand,
   expanded,
+  id,
   onClick,
-  onExpand,
   onCollapse,
-  boxShadow,
-  className,
-  children,
+  onExpand,
   style
 }, reference) => {
   const ref = useRef(null);
@@ -49,22 +49,17 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   };
 
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx("div", {
       id: id,
       css: AccordionRootCSS,
       ref: ref,
       style: style,
-      className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', className, boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
+      className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx(AccordionContext.Provider, {
       value: {
         expanded,
@@ -106,12 +101,12 @@ Accordion.defaultProps = {
   style: {}
 };
 Accordion.propTypes = {
+  /** The box-shadow of component. */
+  boxShadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
   /** The content of the component (insist <AccordionSummary />, <AccordionDetails />). */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
 
@@ -124,13 +119,13 @@ Accordion.propTypes = {
   /** Expand state of accordion (should use this). */
   expanded: PropTypes.bool,
 
-  /** The box-shadow of component. */
-  boxShadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Callback fired when Accordion is collapsed. */
+  onCollapse: PropTypes.func,
 
   /** Callback fired when Accordion is expanded. */
   onExpand: PropTypes.func,
 
-  /** Callback fired when Accordion is collapsed. */
-  onCollapse: PropTypes.func
+  /** Style inline of component. */
+  style: PropTypes.object
 };
 export default Accordion;

package/components/accordion/summary.js

@@ -4,20 +4,31 @@
 import { memo, useEffect, useRef, useContext, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import { renderIcon } from '../../utils';
 import { SummaryRootCSS } from './css';
 import AccordionContext from './context';
+import { ButtonIcon, Typography } from '..';
+import theme from '../../theme/settings';
+const {
+  colors: {
+    system: {
+      active,
+      disabled: systemDisabled
+    }
+  },
+  spacing
+} = theme;
 const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  id,
-  expandIcon,
-  collapseIcon,
-  expandIconAt,
   background,
-  className,
-  onClick,
   children,
+  className,
+  collapseIcon,
+  expandIcon,
+  expandIconAt,
   expandIconProps,
-  style
+  id,
+  onClick,
+  style,
+  title
 }, reference) => {
   const {
     expanded,
@@ -102,15 +113,10 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       showHideDetailHandler('hide');
     }
   }, [expandState]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx("div", {
       id: id,
@@ -122,16 +128,27 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx("div", {
       className: 'DGN-UI-Accordion-Summary-Content'
-    }, children), !!expandIcon && jsx("div", {
+    }, jsx(Typography, {
+      type: 'h3',
+      lineClamp: 2,
+      color: disabled ? systemDisabled : active,
+      style: {
+        marginRight: children && title ? spacing([4]) : 0
+      }
+    }, title || ''), children), !!expandIcon && jsx("div", {
       className: 'Accordion-Icon-Root'
     }, jsx("div", { ...expandIconProps,
       ref: expandIconRef,
       className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim().replace(/\s+/g, ' ')
-    }, typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
+    }, typeof expandIcon === 'string' ? jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: expandIcon,
       className: 'Accordion-Expand-Icon'
     }) : jsx("span", {
       className: 'Accordion-Expand-Icon effect'
-    }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? renderIcon(collapseIcon, 'effect', {
+    }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: collapseIcon,
       className: 'Accordion-Collapse-Icon'
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
@@ -139,35 +156,41 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, style, expandState, disabled]);
 }));
 AccordionSummary.defaultProps = {
-  expandIconAt: 'start',
-  expandIconProps: {},
   className: '',
   expandIcon: 'ArrowRight',
+  expandIconAt: 'start',
+  expandIconProps: {},
   style: {}
 };
 AccordionSummary.propTypes = {
+  /** Background for label summary. */
+  background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
 
-  /** Icon display for expand icon. */
-  expandIcon: PropTypes.any,
-
   /** Icon display for collapse icon. */
   collapseIcon: PropTypes.any,
 
+  /** Icon display for expand icon. */
+  expandIcon: PropTypes.any,
+
   /** Position to render icon. */
   expandIconAt: PropTypes.oneOf(['start', 'end']),
 
-  /** Background for label summary. */
-  background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-
   /** Other props of icons. */
-  expandIconProps: PropTypes.any
+  expandIconProps: PropTypes.any,
+
+  /** Callback fired when the component is clicked. */
+  onClick: PropTypes.func,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** The title of the component. */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 export default AccordionSummary;

package/components/avatar/index.js

@@ -241,15 +241,10 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   }, [src]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx(Fragment, null, jsx("div", {
       css: _AvatarContainerCSS,

package/components/badge/index.js

@@ -98,15 +98,10 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS);
 
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     let node = children;
 

package/components/button/icon.js

@@ -104,15 +104,10 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _ButtonRootCSS = ButtonRootCSS(circular, size, width, _width, height, _height, buttonSize, iconSize, colorHover, color, _color, name);
 
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
 
   const _onClick = event => {
     event.persist();
@@ -367,6 +362,9 @@ ButtonIcon.propTypes = {
   /** If `true`, the loading indicator is shown. */
   loading: PropTypes.bool,
 
+  /** Callback fired when the component is clicked. */
+  onClick: PropTypes.func,
+
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,