diginet-core-ui 1.3.44 → 1.3.45

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

@@ -0,0 +1,11 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.67 17.51C29.78 17.63 29.89 17.75 30 17.86V10.16C30 9.93 29.9 9.69 29.74 9.52L20.35 0.26C20.17 0.1 19.93 0 19.7 0H3.26C1.47 0 0 1.45 0 3.22V35.78C0 37.55 1.47 39 3.26 39H26.74C28.53 39 30 37.55 30 35.78V34.2L29.28 33.48C29.14 33.33 29.01 33.17 28.86 32.95C28.56 32.47 28.4 31.92 28.41 31.35L28.16 31.1V35.78C28.16 36.56 27.52 37.19 26.74 37.19H3.26C2.48 37.19 1.84 36.56 1.84 35.78V3.22C1.84 2.44 2.48 1.81 3.26 1.81H18.78V7.85C18.78 9.62 20.24 11.07 22.04 11.07H26.22L27.9 11.06H28.16V16.33C28.71 16.66 29.21 17.06 29.67 17.51ZM22.04 9.26C21.26 9.26 20.61 8.63 20.61 7.85V3.09L21.05 3.52L26.43 8.82L26.87 9.26H22.04Z" fill="#2680EB"/>
+<path d="M15.71 27C16.01 27.72 16.41 28.39 16.92 29H5.94C5.42 29 5 28.55 5 28C5 27.45 5.42 27 5.94 27H15.71Z" fill="#2680EB"/>
+<path d="M15.11 25H5.94C5.42 25 5 24.55 5 24C5 23.45 5.42 23 5.94 23H15.02C15.01 23.2 15 23.39 15 23.59C15 24.07 15.04 24.54 15.11 25Z" fill="#2680EB"/>
+<path d="M5.94 19H16.32C15.92 19.63 15.61 20.3 15.4 21H5.94C5.42 21 5 20.55 5 20C5 19.45 5.42 19 5.94 19Z" fill="#2680EB"/>
+<path d="M14 31H6C5.45 31 5 31.45 5 32C5 32.55 5.45 33 6 33H14C14.55 33 15 32.55 15 32C15 31.45 14.55 31 14 31Z" fill="#2680EB"/>
+<path d="M38.42 35.64L32.77 29.99C32.38 29.6 31.88 29.41 31.38 29.41C31.24 29.41 31.11 29.43 30.99 29.45L29.71 28.18V28.08C31.66 25.42 31.67 21.77 29.71 19.11C29.5 18.8 29.24 18.5 28.96 18.22C28.49 17.75 27.97 17.36 27.42 17.05C26.24 16.34 24.91 16 23.59 16C21.64 16 19.7 16.74 18.22 18.22C17.97 18.47 17.75 18.73 17.55 19C17.07 19.62 16.71 20.29 16.46 21C16.22 21.65 16.07 22.32 16.02 23C15.97 23.67 16.01 24.34 16.13 25C16.26 25.69 16.48 26.36 16.81 27C17.16 27.71 17.63 28.37 18.22 28.96C18.23 28.97 18.25 28.99 18.26 29C19.73 30.45 21.67 31.18 23.59 31.18C24.91 31.18 26.24 30.83 27.42 30.13C27.67 30 27.91 29.84 28.14 29.67L29.45 30.98C29.35 31.47 29.44 31.99 29.71 32.42C29.79 32.54 29.88 32.66 29.99 32.77L35.64 38.42C36.03 38.81 36.53 39 37.03 39C37.54 39 38.04 38.81 38.42 38.42C39.19 37.66 39.19 36.41 38.42 35.64ZM27.42 27.42C26.37 28.48 24.98 29.01 23.59 29.01C23.45 29.01 23.29 29 23.15 28.99C23.14 28.99 23.14 28.99 23.13 28.99C21.9 28.89 20.69 28.36 19.75 27.42C19.62 27.28 19.49 27.14 19.37 27C18.89 26.4 18.55 25.72 18.36 25C18.18 24.35 18.13 23.67 18.2 23C18.28 22.31 18.48 21.63 18.83 21C19.06 20.55 19.37 20.13 19.75 19.75C20.04 19.46 20.36 19.21 20.7 19C21.58 18.45 22.59 18.17 23.59 18.17C24.98 18.17 26.37 18.7 27.42 19.75C29.54 21.87 29.54 25.31 27.42 27.42Z" fill="#1CA261"/>
+<path d="M27.93 21.59C27.95 21.88 27.85 22.16 27.65 22.38L23.45 26.98C23.25 27.2 22.96 27.34 22.65 27.34C22.35 27.34 22.04 27.21 21.84 26.99L19.6 24.61C19.39 24.39 19.29 24.12 19.3 23.82C19.31 23.53 19.44 23.26 19.64 23.06C19.84 22.87 20.11 22.78 20.39 22.78C20.7 22.78 21 22.89 21.2 23.11L22.51 24.5L22.63 24.62L22.74 24.49L26.02 20.9C26.22 20.68 26.52 20.55 26.85 20.55C27.13 20.55 27.39 20.64 27.58 20.82L27.6 20.84C27.8 21.05 27.92 21.31 27.93 21.59Z" fill="#1CA261"/>
+<path d="M13.19 9.05003C13.53 8.71003 13.85 8.38003 14.18 8.05003C14.46 7.78003 14.9 7.89003 14.99 8.25003C15 8.31003 15 8.37003 15 8.42003C15 9.74003 15 11.05 15 12.37C15 12.71 14.82 12.9 14.47 12.91C13.15 12.91 11.84 12.91 10.52 12.91C10.29 12.91 10.11 12.82 10.03 12.6C9.95003 12.39 10.01 12.21 10.17 12.05C10.49 11.73 10.82 11.41 11.16 11.07C10.7 10.62 10.25 10.18 9.79003 9.75003C9.44003 9.42003 9.05003 9.15003 8.62003 8.92003C7.73003 8.45003 6.86003 8.52003 6.02003 9.10003C5.43003 9.51003 4.96003 10.04 4.52003 10.6C4.50003 10.62 4.48003 10.65 4.47003 10.67C4.39003 10.79 4.28003 10.84 4.15003 10.78C4.03003 10.73 3.98003 10.61 4.02003 10.46C4.12003 10.08 4.21003 9.69003 4.33003 9.31003C4.56003 8.61003 4.87003 7.95003 5.38003 7.41003C5.76003 7.00003 6.20003 6.63003 6.71003 6.36003C7.72003 5.81003 8.75003 5.86003 9.78003 6.32003C10.7 6.73003 11.47 7.36003 12.18 8.05003C12.49 8.35003 12.8 8.66003 13.11 8.97003C13.13 8.99003 13.15 9.01003 13.19 9.05003Z" fill="#FF8C00"/>
+<path d="M17 10.49C17 11.54 17 12.58 17 13.63C17 14.4 16.74 15.04 16.13 15.52C15.73 15.83 15.28 16 14.77 16C12.58 16 10.39 16.01 8.21003 16C6.93003 16 5.96003 15.01 5.94003 13.73C5.93003 13.09 5.94003 12.44 5.94003 11.8C5.94003 11.63 6.02003 11.52 6.16003 11.5C6.29003 11.48 6.39003 11.56 6.46003 11.72C6.60003 12.05 6.75003 12.37 6.89003 12.7C6.92003 12.77 6.94003 12.86 6.94003 12.94C6.95003 13.21 6.94003 13.48 6.95003 13.75C6.97003 14.49 7.51003 15.01 8.24003 15.02C10.4 15.02 12.56 15.02 14.72 15.02C15.44 15.02 15.99 14.47 15.99 13.75C15.99 11.58 15.99 9.40003 15.99 7.23003C15.99 6.54003 15.45 6.00003 14.75 5.98003C14.22 5.97003 13.69 5.97003 13.15 5.98003C12.98 5.98003 12.87 5.93003 12.79 5.77003C12.73 5.64003 12.63 5.53003 12.54 5.42003C12.47 5.33003 12.43 5.24003 12.49 5.13003C12.54 5.02003 12.63 4.98003 12.75 4.98003C13.44 4.98003 14.12 4.97003 14.81 4.98003C15.95 5.00003 16.94 5.93003 16.98 7.07003C17.01 7.86003 16.99 8.66003 17 9.45003C17 9.78003 17 10.14 17 10.49Z" fill="#FF8C00"/>
+</svg>

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

@@ -0,0 +1,18 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.79 28.13C30.79 27.5 30.27 26.99 29.64 26.99H19.23C18.59 26.99 18.08 27.5 18.08 28.13C18.08 28.76 18.6 29.27 19.23 29.27H29.64C30.27 29.27 30.79 28.76 30.79 28.13Z" fill="#FF8C00"/>
+<path d="M29.64 22.41H19.23C18.59 22.41 18.08 22.92 18.08 23.55C18.08 24.18 18.6 24.69 19.23 24.69H29.64C30.28 24.69 30.79 24.18 30.79 23.55C30.79 22.92 30.27 22.41 29.64 22.41Z" fill="#FF8C00"/>
+<path d="M19.23 31.56C18.59 31.56 18.08 32.07 18.08 32.7C18.08 33.33 18.6 33.84 19.23 33.84H25.02C25.66 33.84 26.17 33.33 26.17 32.7C26.17 32.07 25.65 31.56 25.02 31.56H19.23Z" fill="#FF8C00"/>
+<path d="M10.0601 25.8101H11.2001V23.5701H10.2401V22.8501C10.8601 22.7501 11.1701 22.6401 11.5201 22.4301H12.3901V25.8201H13.3301V26.7601H10.0601V25.8101Z" fill="#FF8C00"/>
+<path d="M14.8801 25.9401C14.8801 25.4501 15.2401 25.0501 15.7801 25.0501C16.3201 25.0501 16.6801 25.4501 16.6801 25.9401C16.6801 26.4301 16.3201 26.8301 15.7801 26.8301C15.2401 26.8301 14.8801 26.4301 14.8801 25.9401Z" fill="#FF8C00"/>
+<path d="M9.91999 33.17C11.09 32.23 11.94 31.5 11.94 30.91C11.94 30.52 11.69 30.34 11.3 30.34C10.98 30.34 10.72 30.55 10.49 30.75L9.85999 30.12C10.34 29.64 10.78 29.42 11.47 29.42C12.41 29.42 13.06 29.98 13.06 30.84C13.06 31.54 12.33 32.3 11.61 32.9C11.85 32.87 12.18 32.85 12.4 32.85H13.28V33.83H9.91999V33.17Z" fill="#FF8C00"/>
+<path d="M14.88 33.03C14.88 32.54 15.24 32.14 15.78 32.14C16.32 32.14 16.68 32.54 16.68 33.03C16.68 33.52 16.32 33.92 15.78 33.92C15.24 33.92 14.88 33.53 14.88 33.03Z" fill="#FF8C00"/>
+<path d="M11.76 10.3099C11.87 10.2599 11.97 10.1899 12.06 10.1199C12.14 10.0799 12.22 10.0299 12.28 9.96993L11.68 9.59993C11.64 9.57993 11.59 9.56993 11.54 9.55993C11.49 9.54993 11.44 9.55993 11.39 9.56993C11.34 9.57993 11.3 9.60993 11.26 9.63993C11.22 9.66993 11.19 9.70993 11.16 9.75993L11.01 10.0199L11.76 10.3099Z" fill="#FFC766"/>
+<path d="M9.65997 14.7999L9.46997 15.3199L11.79 16.1399L9.65997 14.7999Z" fill="#FFC766"/>
+<path d="M19.07 14.2799L16.75 13.4599L18.89 14.7899L19.07 14.2799Z" fill="#FFC766"/>
+<path d="M14.35 18.4299L16.82 19.9499C16.86 19.9799 16.91 19.9899 16.96 19.9999C17.01 20.0099 17.06 19.9999 17.11 19.9899C17.16 19.9799 17.2 19.9499 17.24 19.9199C17.28 19.8899 17.31 19.8499 17.34 19.7999L17.49 19.5399L14.35 18.4299Z" fill="#FFC766"/>
+<path d="M13.86 15.65L14.12 14.91C13.93 14.8 13.79 14.63 13.71 14.43C13.67 14.34 13.65 14.25 13.65 14.15C13.65 14.05 13.67 13.96 13.71 13.87C13.74 13.78 13.79 13.7 13.85 13.63C13.92 13.56 14 13.5 14.08 13.46C14.17 13.42 14.26 13.39 14.36 13.39C14.46 13.38 14.55 13.4 14.64 13.43L14.71 13.24L14.97 13.31L14.91 13.5C15.07 13.57 15.2 13.69 15.28 13.83C15.36 13.98 15.39 14.15 15.35 14.31L14.87 14.2C14.89 14.13 14.89 14.06 14.87 14C14.85 13.93 14.81 13.88 14.76 13.83L14.5 14.53C14.7 14.65 14.87 14.82 14.99 15.01C15.05 15.19 15.04 15.39 14.97 15.57C14.9 15.75 14.78 15.9 14.61 16.01C14.41 16.11 14.19 16.14 13.97 16.08L13.86 16.41L13.6 16.35L13.71 16.02C13.53 15.93 13.38 15.79 13.3 15.61C13.21 15.41 13.2 15.19 13.26 14.98L13.75 15.09C13.74 15.19 13.76 15.29 13.79 15.39C13.8 15.48 13.83 15.56 13.86 15.65ZM14.53 13.8C14.45 13.81 14.37 13.83 14.31 13.87C14.28 13.88 14.25 13.9 14.24 13.93C14.22 13.96 14.21 13.99 14.2 14.02C14.18 14.05 14.17 14.08 14.17 14.11C14.17 14.14 14.18 14.18 14.2 14.2C14.24 14.27 14.27 14.31 14.31 14.39L14.53 13.8ZM14.12 15.76C14.21 15.77 14.3 15.76 14.38 15.72C14.42 15.7 14.45 15.68 14.48 15.65C14.51 15.62 14.52 15.58 14.53 15.54C14.55 15.51 14.56 15.47 14.56 15.43C14.56 15.39 14.55 15.35 14.53 15.32C14.49 15.23 14.43 15.15 14.34 15.1L14.12 15.76Z" fill="#FFB330"/>
+<path d="M19.93 13.54L19.67 13.43C19.61 13.44 19.54 13.42 19.48 13.39C18.88 13.24 18.32 13.02 17.76 12.87C16.79 12.57 15.85 12.24 14.91 11.91L14.8 11.87C14.76 11.91 14.5 12.09 14.5 12.09C14.43 12.13 14.37 12.18 14.31 12.24L19.56 14.06L17.95 18.62L9.05997 15.5L10.45 11.64C10.47 11.52 10.51 11.41 10.56 11.31L10.71 10.94L10.86 10.98C10.96 10.87 11.08 10.77 11.2 10.68C11.27 10.61 11.35 10.57 11.39 10.49L10.75 10.27C10.7 10.25 10.65 10.25 10.6 10.25C10.55 10.25 10.5 10.27 10.45 10.29C10.4 10.31 10.36 10.35 10.33 10.39C10.3 10.43 10.27 10.48 10.26 10.53L8.49997 15.5C8.47997 15.55 8.46997 15.6 8.46997 15.65C8.46997 15.7 8.47997 15.76 8.49997 15.8C8.51997 15.85 8.54997 15.89 8.58997 15.93C8.62997 15.97 8.67997 15.99 8.72997 16.01L17.95 19.24C18 19.26 18.05 19.26 18.1 19.26C18.15 19.26 18.2 19.24 18.25 19.22C18.3 19.2 18.34 19.16 18.37 19.12C18.4 19.08 18.43 19.03 18.44 18.98L20.2 14.01C20.21 13.91 20.19 13.82 20.14 13.73C20.09 13.65 20.02 13.58 19.93 13.54Z" fill="#FFB330"/>
+<path d="M34.74 9.52L25.35 0.26C25.17 0.1 24.93 0 24.7 0H8.26C6.47 0 5 1.45 5 3.22V35.78C5 37.55 6.47 39 8.26 39H31.73C33.53 39 34.99 37.55 34.99 35.78V10.16C35 9.93 34.9 9.69 34.74 9.52ZM25.61 3.09L26.05 3.52L31.42 8.82L31.86 9.26H27.03C26.25 9.26 25.6 8.63 25.6 7.85V3.09H25.61ZM33.16 35.78C33.16 36.56 32.52 37.19 31.73 37.19H8.26C7.48 37.19 6.83 36.56 6.83 35.78V3.22C6.83 2.44 7.47 1.81 8.26 1.81H23.77V7.85C23.77 9.62 25.24 11.07 27.03 11.07H31.22L32.9 11.06H33.16V35.78Z" fill="#2680EB"/>
+<path d="M22.3699 10.2299L18.8099 7.14994C18.7399 7.08994 18.6999 7.00994 18.6899 6.91994C18.6799 6.82994 18.7099 6.73994 18.7699 6.66994L19.2599 6.10994C19.3199 6.04994 19.3999 6.00994 19.4899 5.99994C19.5799 5.98994 19.6699 6.01994 19.7399 6.07994L23.2999 9.15994C23.3699 9.21994 23.4099 9.29994 23.4199 9.38994C23.4299 9.47994 23.3999 9.56994 23.3399 9.63994L22.8499 10.1999C22.7899 10.2699 22.6999 10.3099 22.6099 10.3099C22.5299 10.3199 22.4399 10.2899 22.3699 10.2299Z" fill="#2680EB"/>
+<path d="M18.1299 7.52994C18.1199 7.52994 18.1099 7.52994 18.0999 7.53994C18.0999 7.54994 18.0999 7.55994 18.0999 7.56994C18.0199 7.63994 17.9299 7.70994 17.8399 7.75994C17.4699 8.05994 17.1299 8.38994 16.7499 8.68994C16.6499 8.76994 16.5399 8.81994 16.4099 8.83994C15.8499 8.85994 15.2799 8.89994 14.7199 8.89994C14.4299 8.90994 14.1499 8.92994 13.8599 8.97994C13.5599 9.04994 13.2699 9.18994 13.0399 9.38994C12.5499 9.82994 12.0999 10.2399 11.6499 10.6899C11.4299 10.9099 11.1599 11.0999 10.9399 11.3199C10.8599 11.3899 10.7999 11.4799 10.7599 11.5799C10.7199 11.6799 10.6999 11.7899 10.7099 11.8899C10.7199 11.9999 10.7499 12.0999 10.7999 12.1899C10.8499 12.2799 10.9299 12.3599 11.0099 12.4299C11.3299 12.6599 11.6999 12.7899 12.0999 12.7999C12.5899 12.8199 13.0699 12.6899 13.4899 12.4299C13.8399 12.1999 14.1799 11.9599 14.4999 11.6899C14.7599 11.4999 14.6499 11.4999 14.9899 11.6199C15.9299 11.9499 16.8599 12.2499 17.7999 12.5499C18.3999 12.7399 18.9599 12.9199 19.5599 13.0699C19.7299 13.1299 19.9099 13.1299 20.0799 13.0699C20.4199 12.9299 20.7399 12.7699 21.0499 12.5899C21.5499 12.2599 21.9499 11.7899 22.2099 11.2599C22.2099 11.2199 22.2499 11.1899 22.2499 11.1499L18.1299 7.52994Z" fill="#2680EB"/>
+</svg>

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

@@ -0,0 +1,13 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.74 9.52L25.35 0.26C25.17 0.1 24.93 0 24.7 0H8.26C6.47 0 5 1.45 5 3.22V35.78C5 37.55 6.47 39 8.26 39H31.73C33.53 39 34.99 37.55 34.99 35.78V10.16C35 9.93 34.9 9.69 34.74 9.52ZM25.61 3.09L26.05 3.52L31.42 8.82L31.86 9.26H27.03C26.25 9.26 25.6 8.63 25.6 7.85V3.09H25.61ZM33.16 35.78C33.16 36.56 32.52 37.19 31.73 37.19H8.26C7.48 37.19 6.83 36.56 6.83 35.78V3.22C6.83 2.44 7.47 1.81 8.26 1.81H23.77V7.85C23.77 9.62 25.24 11.07 27.03 11.07H31.22L32.9 11.06H33.16V35.78Z" fill="#2680EB"/>
+<path d="M18.1801 13H17.8001C16.8101 13 16.0001 13.81 16.0001 14.8V19.2C16.0001 19.31 16.0101 19.42 16.0301 19.52C15.7201 19.64 15.4101 19.76 15.0901 19.85C14.1401 20.13 13.2201 19.99 12.3201 19.63C11.3301 19.23 10.4101 18.7 9.56011 18.05C9.09011 17.69 8.90011 17.19 9.01011 16.61C9.19011 15.61 9.39011 14.61 9.58011 13.62C9.71011 13.01 10.1601 12.64 10.7701 12.64H17.2501C17.6501 12.64 17.9701 12.76 18.1801 13Z" fill="#2680EB"/>
+<path d="M14.0301 11.53C11.9801 11.52 10.3301 9.83004 10.3301 7.75004C10.3401 5.67004 12.0101 3.99004 14.0501 4.00004C16.0901 4.01004 17.7501 5.71004 17.7401 7.79004C17.7301 9.85004 16.0601 11.54 14.0301 11.53Z" fill="#2680EB"/>
+<path d="M30.7901 28.13C30.7901 27.5 30.2701 26.99 29.6401 26.99H19.2301C18.5901 26.99 18.0801 27.5 18.0801 28.13C18.0801 28.76 18.6001 29.27 19.2301 29.27H29.6401C30.2701 29.27 30.7901 28.76 30.7901 28.13Z" fill="#FF8C00"/>
+<path d="M29.6401 22.41H19.2301C18.5901 22.41 18.0801 22.92 18.0801 23.55C18.0801 24.18 18.6001 24.69 19.2301 24.69H29.6401C30.2801 24.69 30.7901 24.18 30.7901 23.55C30.7901 22.92 30.2701 22.41 29.6401 22.41Z" fill="#FF8C00"/>
+<path d="M19.2301 31.56C18.5901 31.56 18.0801 32.07 18.0801 32.7C18.0801 33.33 18.6001 33.84 19.2301 33.84H25.0201C25.6601 33.84 26.1701 33.33 26.1701 32.7C26.1701 32.07 25.6501 31.56 25.0201 31.56H19.2301Z" fill="#FF8C00"/>
+<path d="M10.0601 25.8101H11.2001V23.5701H10.2401V22.8501C10.8601 22.7501 11.1701 22.6401 11.5201 22.4301H12.3901V25.8201H13.3301V26.7601H10.0601V25.8101Z" fill="#FF8C00"/>
+<path d="M14.8801 25.9401C14.8801 25.4501 15.2401 25.0501 15.7801 25.0501C16.3201 25.0501 16.6801 25.4501 16.6801 25.9401C16.6801 26.4301 16.3201 26.8301 15.7801 26.8301C15.2401 26.8301 14.8801 26.4301 14.8801 25.9401Z" fill="#FF8C00"/>
+<path d="M9.92011 33.17C11.0901 32.23 11.9401 31.5 11.9401 30.91C11.9401 30.52 11.6901 30.34 11.3001 30.34C10.9801 30.34 10.7201 30.55 10.4901 30.75L9.86011 30.12C10.3401 29.64 10.7801 29.42 11.4701 29.42C12.4101 29.42 13.0601 29.98 13.0601 30.84C13.0601 31.54 12.3301 32.3 11.6101 32.9C11.8501 32.87 12.1801 32.85 12.4001 32.85H13.2801V33.83H9.92011V33.17Z" fill="#FF8C00"/>
+<path d="M14.8801 33.03C14.8801 32.54 15.2401 32.14 15.7801 32.14C16.3201 32.14 16.6801 32.54 16.6801 33.03C16.6801 33.52 16.3201 33.92 15.7801 33.92C15.2401 33.92 14.8801 33.53 14.8801 33.03Z" fill="#FF8C00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2 14H22.6V13.2C22.6 12.76 22.24 12.4 21.8 12.4H20.2C19.76 12.4 19.4 12.76 19.4 13.2V14H17.8C17.36 14 17 14.35 17 14.8V19.2C17 19.65 17.36 20 17.8 20H24.2C24.65 20 25 19.65 25 19.2V14.8C25 14.35 24.65 14 24.2 14ZM20.2 13.2H21.8V14H20.2V13.2ZM23.04 16.72C22.94 16.82 22.85 16.9 22.75 17C22.58 17.17 22.41 17.34 22.24 17.5C22.18 17.56 22.16 17.63 22.17 17.72C22.23 18.08 22.3 18.45 22.36 18.82C22.37 18.89 22.34 18.96 22.29 19C22.23 19.04 22.16 19.05 22.11 19.01C21.93 18.92 21.75 18.83 21.57 18.74C21.42 18.66 21.27 18.58 21.11 18.5C21.04 18.46 20.96 18.46 20.89 18.5C20.57 18.67 20.24 18.84 19.92 19C19.83 19.05 19.76 19.04 19.7 18.99C19.64 18.94 19.63 18.89 19.64 18.82C19.7 18.45 19.77 18.08 19.83 17.72C19.84 17.64 19.82 17.58 19.77 17.51C19.52 17.27 19.27 17.03 19.02 16.79C19 16.77 18.98 16.74 18.96 16.72C18.91 16.66 18.9 16.61 18.93 16.54C18.95 16.48 19 16.44 19.07 16.43C19.43 16.38 19.79 16.33 20.16 16.28C20.26 16.26 20.32 16.22 20.36 16.13C20.52 15.8 20.68 15.47 20.85 15.15C20.88 15.09 20.94 15.05 21.01 15.05C21.08 15.06 21.14 15.09 21.17 15.15C21.32 15.46 21.47 15.77 21.63 16.08C21.64 16.1 21.65 16.12 21.65 16.14C21.69 16.22 21.76 16.27 21.85 16.28C22.11 16.31 22.39 16.35 22.65 16.39C22.74 16.41 22.83 16.42 22.93 16.43C23 16.44 23.06 16.48 23.08 16.54C23.1 16.6 23.1 16.66 23.04 16.72Z" fill="#FF8C00"/>
+</svg>

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

@@ -0,0 +1,11 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.79 28.13C30.79 27.5 30.27 26.99 29.64 26.99H19.23C18.59 26.99 18.08 27.5 18.08 28.13C18.08 28.76 18.6 29.27 19.23 29.27H29.64C30.27 29.27 30.79 28.76 30.79 28.13Z" fill="#FF8C00"/>
+<path d="M29.64 22.41H19.23C18.59 22.41 18.08 22.92 18.08 23.55C18.08 24.18 18.6 24.69 19.23 24.69H29.64C30.28 24.69 30.79 24.18 30.79 23.55C30.79 22.92 30.27 22.41 29.64 22.41Z" fill="#FF8C00"/>
+<path d="M19.23 31.56C18.59 31.56 18.08 32.07 18.08 32.7C18.08 33.33 18.6 33.84 19.23 33.84H25.02C25.66 33.84 26.17 33.33 26.17 32.7C26.17 32.07 25.65 31.56 25.02 31.56H19.23Z" fill="#FF8C00"/>
+<path d="M10.0601 25.8101H11.2001V23.5701H10.2401V22.8501C10.8601 22.7501 11.1701 22.6401 11.5201 22.4301H12.3901V25.8201H13.3301V26.7601H10.0601V25.8101Z" fill="#FF8C00"/>
+<path d="M14.8801 25.9401C14.8801 25.4501 15.2401 25.0501 15.7801 25.0501C16.3201 25.0501 16.6801 25.4501 16.6801 25.9401C16.6801 26.4301 16.3201 26.8301 15.7801 26.8301C15.2401 26.8301 14.8801 26.4301 14.8801 25.9401Z" fill="#FF8C00"/>
+<path d="M9.91999 33.17C11.09 32.23 11.94 31.5 11.94 30.91C11.94 30.52 11.69 30.34 11.3 30.34C10.98 30.34 10.72 30.55 10.49 30.75L9.85999 30.12C10.34 29.64 10.78 29.42 11.47 29.42C12.41 29.42 13.06 29.98 13.06 30.84C13.06 31.54 12.33 32.3 11.61 32.9C11.85 32.87 12.18 32.85 12.4 32.85H13.28V33.83H9.91999V33.17Z" fill="#FF8C00"/>
+<path d="M14.88 33.03C14.88 32.54 15.24 32.14 15.78 32.14C16.32 32.14 16.68 32.54 16.68 33.03C16.68 33.52 16.32 33.92 15.78 33.92C15.24 33.92 14.88 33.53 14.88 33.03Z" fill="#FF8C00"/>
+<path d="M20 5H11C10.45 5 10 5.45 10 6V18C10 18.55 10.45 19 11 19H20C20.55 19 21 18.55 21 18V6C21 5.45 20.55 5 20 5ZM15.51 6C16.4 6 17.13 6.75 17.12 7.66C17.12 8.56 16.38 9.3 15.5 9.29C14.6 9.29 13.88 8.55 13.88 7.64C13.88 6.73 14.61 6 15.51 6ZM13.55 10.21C13.6 9.94 13.8 9.78 14.07 9.78H16.91C17.21 9.78 17.4 9.94 17.45 10.24C17.54 10.66 17.62 11.08 17.7 11.5C17.74 11.75 17.68 11.97 17.48 12.13C17.02 12.48 16.52 12.77 15.96 12.93C15.54 13.06 15.14 12.99 14.75 12.84C14.32 12.66 13.91 12.43 13.54 12.15C13.34 11.99 13.25 11.77 13.3 11.52C13.38 11.08 13.46 10.64 13.55 10.21ZM19 17H12C11.72 17 11.5 16.78 11.5 16.5C11.5 16.22 11.72 16 12 16H19C19.28 16 19.5 16.22 19.5 16.5C19.5 16.78 19.28 17 19 17ZM19 15H12C11.72 15 11.5 14.78 11.5 14.5C11.5 14.22 11.72 14 12 14H19C19.28 14 19.5 14.22 19.5 14.5C19.5 14.78 19.28 15 19 15Z" fill="#2680EB"/>
+<path d="M34.74 9.52L25.35 0.26C25.17 0.1 24.93 0 24.7 0H8.26C6.47 0 5 1.45 5 3.22V35.78C5 37.55 6.47 39 8.26 39H31.73C33.53 39 34.99 37.55 34.99 35.78V10.16C35 9.93 34.9 9.69 34.74 9.52ZM25.61 3.09L26.05 3.52L31.42 8.82L31.86 9.26H27.03C26.25 9.26 25.6 8.63 25.6 7.85V3.09H25.61ZM33.16 35.78C33.16 36.56 32.52 37.19 31.73 37.19H8.26C7.48 37.19 6.83 36.56 6.83 35.78V3.22C6.83 2.44 7.47 1.81 8.26 1.81H23.77V7.85C23.77 9.62 25.24 11.07 27.03 11.07H31.22L32.9 11.06H33.16V35.78Z" fill="#2680EB"/>
+</svg>

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

@@ -0,0 +1,15 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.74 9.52L25.35 0.26C25.17 0.1 24.93 0 24.7 0H8.26C6.47 0 5 1.45 5 3.22V35.78C5 37.55 6.47 39 8.26 39H31.73C33.53 39 34.99 37.55 34.99 35.78V10.16C35 9.93 34.9 9.69 34.74 9.52ZM25.61 3.09L26.05 3.52L31.42 8.82L31.86 9.26H27.03C26.25 9.26 25.6 8.63 25.6 7.85V3.09H25.61ZM33.16 35.78C33.16 36.56 32.52 37.19 31.73 37.19H8.26C7.48 37.19 6.83 36.56 6.83 35.78V3.22C6.83 2.44 7.47 1.81 8.26 1.81H23.77V7.85C23.77 9.62 25.24 11.07 27.03 11.07H31.22L32.9 11.06H33.16V35.78Z" fill="#2680EB"/>
+<path d="M25.64 16.06L23.39 14.32L22.27 13.46L20.17 11.83C20.81 10.98 21.16 9.97 21.17 8.92C21.17 7.61 20.64 6.36 19.68 5.44C18.73 4.52 17.44 4 16.09 4C14.74 4 13.44 4.52 12.49 5.44C11.54 6.36 11 7.61 11 8.92C11 9.21 11.03 9.5 11.09 9.78C11.23 9.61 11.45 9.5 11.69 9.5H12.02C11.99 9.31 11.97 9.12 11.97 8.92C11.96 8.13 12.2 7.36 12.65 6.7C13.1 6.04 13.74 5.53 14.49 5.22C15 5.02 15.54 4.91 16.09 4.91C16.35 4.91 16.61 4.94 16.87 4.99C17.67 5.14 18.41 5.51 18.98 6.06C19.57 6.62 19.96 7.33 20.13 8.1C20.29 8.87 20.21 9.68 19.9 10.4C19.59 11.13 19.07 11.76 18.39 12.19C17.72 12.64 16.92 12.87 16.11 12.88H16.09C15.75 12.88 15.42 12.84 15.1 12.75V13.44L15.76 13.45C16.04 13.46 16.28 13.6 16.42 13.84C17.28 13.79 18.11 13.53 18.84 13.07L23.26 18.39C23.3 18.43 23.35 18.47 23.39 18.51C23.78 18.83 24.25 19 24.69 19C25.12 19 25.52 18.85 25.84 18.55C26.48 17.93 26.4 16.8 25.64 16.06Z" fill="#2680EB"/>
+<path d="M18.34 11.6C18.27 11.66 18.2 11.71 18.12 11.76C17.53 12.15 16.83 12.37 16.11 12.37H16.09C15.75 12.37 15.42 12.32 15.1 12.23V10.3C15.1 10.09 15.02 9.89 14.88 9.75H17.53C17.83 9.75 18.02 9.91 18.08 10.22C18.17 10.64 18.25 11.07 18.33 11.5C18.34 11.54 18.34 11.57 18.34 11.6Z" fill="#2680EB"/>
+<path d="M16.09 9.25C15.18 9.25 14.44 8.49 14.44 7.57C14.44 6.64 15.19 5.89 16.1 5.9C17.01 5.9 17.75 6.66 17.74 7.59C17.74 8.51 16.99 9.26 16.09 9.25Z" fill="#2680EB"/>
+<path d="M30.79 28.13C30.79 27.5 30.27 26.99 29.64 26.99H19.23C18.59 26.99 18.08 27.5 18.08 28.13C18.08 28.76 18.6 29.27 19.23 29.27H29.64C30.27 29.27 30.79 28.76 30.79 28.13Z" fill="#FF8C00"/>
+<path d="M29.64 22.41H19.23C18.59 22.41 18.08 22.92 18.08 23.55C18.08 24.18 18.6 24.69 19.23 24.69H29.64C30.28 24.69 30.79 24.18 30.79 23.55C30.79 22.92 30.27 22.41 29.64 22.41Z" fill="#FF8C00"/>
+<path d="M19.23 31.5601C18.59 31.5601 18.08 32.0701 18.08 32.7001C18.08 33.3301 18.6 33.8401 19.23 33.8401H25.02C25.66 33.8401 26.17 33.3301 26.17 32.7001C26.17 32.0701 25.65 31.5601 25.02 31.5601H19.23Z" fill="#FF8C00"/>
+<path d="M10.0601 25.8101H11.2001V23.5701H10.2401V22.8501C10.8601 22.7501 11.1701 22.6401 11.5201 22.4301H12.3901V25.8201H13.3301V26.7601H10.0601V25.8101Z" fill="#FF8C00"/>
+<path d="M14.88 25.9401C14.88 25.4501 15.24 25.05 15.78 25.05C16.32 25.05 16.68 25.4501 16.68 25.9401C16.68 26.4301 16.32 26.83 15.78 26.83C15.24 26.83 14.88 26.4301 14.88 25.9401Z" fill="#FF8C00"/>
+<path d="M9.91999 33.17C11.09 32.23 11.94 31.5 11.94 30.91C11.94 30.52 11.69 30.34 11.3 30.34C10.98 30.34 10.72 30.55 10.49 30.75L9.85999 30.12C10.34 29.64 10.78 29.42 11.47 29.42C12.41 29.42 13.06 29.98 13.06 30.84C13.06 31.54 12.33 32.3 11.61 32.9C11.85 32.87 12.18 32.85 12.4 32.85H13.28V33.83H9.91999V33.17Z" fill="#FF8C00"/>
+<path d="M14.88 33.03C14.88 32.54 15.24 32.14 15.78 32.14C16.32 32.14 16.68 32.54 16.68 33.03C16.68 33.52 16.32 33.92 15.78 33.92C15.24 33.92 14.88 33.53 14.88 33.03Z" fill="#FF8C00"/>
+<path d="M16.5 19H9.5C9.22 19 9 18.78 9 18.5C9 18.22 9.22 18 9.5 18H16.5C16.78 18 17 18.22 17 18.5C17 18.78 16.78 19 16.5 19Z" fill="#FF8C00"/>
+<path d="M13 17.28C12.92 17.28 12.85 17.25 12.79 17.19L10.04 14.45C9.95003 14.36 9.93003 14.24 9.98003 14.13C10.03 14.02 10.14 13.95 10.25 13.94H11.39V10.3C11.39 10.14 11.52 10 11.68 10H14.3C14.47 10 14.6 10.13 14.6 10.3V13.94H15.74C15.86 13.94 15.96 14.02 16.01 14.12C16.06 14.23 16.03 14.36 15.95 14.44L13.21 17.18C13.16 17.25 13.08 17.28 13 17.28Z" fill="#FF8C00"/>
+</svg>

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

@@ -0,0 +1,14 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.74 9.52L25.35 0.26C25.17 0.1 24.93 0 24.7 0H8.26C6.47 0 5 1.45 5 3.22V35.78C5 37.55 6.47 39 8.26 39H31.73C33.53 39 34.99 37.55 34.99 35.78V10.16C35 9.93 34.9 9.69 34.74 9.52ZM25.61 3.09L26.05 3.52L31.42 8.82L31.86 9.26H27.03C26.25 9.26 25.6 8.63 25.6 7.85V3.09H25.61ZM33.16 35.78C33.16 36.56 32.52 37.19 31.73 37.19H8.26C7.48 37.19 6.83 36.56 6.83 35.78V3.22C6.83 2.44 7.47 1.81 8.26 1.81H23.77V7.85C23.77 9.62 25.24 11.07 27.03 11.07H31.22L32.9 11.06H33.16V35.78Z" fill="#2680EB"/>
+<path d="M25.64 16.06L23.39 14.32L22.27 13.46L20.17 11.83C20.81 10.98 21.16 9.97 21.17 8.92C21.17 7.61 20.64 6.36 19.68 5.44C18.73 4.52 17.44 4 16.09 4C14.74 4 13.44 4.52 12.49 5.44C11.54 6.36 11 7.61 11 8.92C11 9.04 11.01 9.17 11.02 9.29C11.32 9.16 11.64 9.08 11.98 9.04C11.97 9 11.97 8.96 11.97 8.92C11.96 8.13 12.2 7.36 12.65 6.7C13.1 6.04 13.74 5.53 14.49 5.22C15 5.02 15.54 4.91 16.09 4.91C16.35 4.91 16.61 4.94 16.87 4.99C17.67 5.14 18.41 5.51 18.98 6.06C19.57 6.62 19.96 7.33 20.13 8.1C20.29 8.87 20.21 9.68 19.9 10.4C19.59 11.13 19.07 11.76 18.39 12.19C17.83 12.57 17.17 12.79 16.49 12.86C16.5 12.91 16.5 12.95 16.5 13C16.5 13.27 16.47 13.55 16.4 13.84C17.27 13.8 18.11 13.53 18.84 13.07L23.26 18.39C23.3 18.43 23.35 18.47 23.39 18.51C23.78 18.83 24.25 19 24.69 19C25.12 19 25.52 18.85 25.84 18.55C26.48 17.93 26.4 16.8 25.64 16.06Z" fill="#2680EB"/>
+<path d="M18.34 11.6C18.27 11.66 18.2 11.71 18.12 11.76C17.62 12.09 17.04 12.3 16.44 12.35C16.27 11.27 15.67 10.35 14.82 9.75H17.53C17.83 9.75 18.02 9.91 18.08 10.22C18.17 10.64 18.25 11.07 18.33 11.5C18.34 11.54 18.34 11.57 18.34 11.6Z" fill="#2680EB"/>
+<path d="M16.09 9.25C15.18 9.25 14.44 8.49 14.44 7.57C14.44 6.64 15.19 5.89 16.1 5.9C17.01 5.9 17.75 6.66 17.74 7.59C17.74 8.51 16.99 9.26 16.09 9.25Z" fill="#2680EB"/>
+<path d="M30.79 28.13C30.79 27.5 30.27 26.99 29.64 26.99H19.23C18.59 26.99 18.08 27.5 18.08 28.13C18.08 28.76 18.6 29.27 19.23 29.27H29.64C30.27 29.27 30.79 28.76 30.79 28.13Z" fill="#FF8C00"/>
+<path d="M29.64 22.41H19.23C18.59 22.41 18.08 22.92 18.08 23.55C18.08 24.18 18.6 24.69 19.23 24.69H29.64C30.28 24.69 30.79 24.18 30.79 23.55C30.79 22.92 30.27 22.41 29.64 22.41Z" fill="#FF8C00"/>
+<path d="M19.23 31.56C18.59 31.56 18.08 32.07 18.08 32.7C18.08 33.33 18.6 33.84 19.23 33.84H25.02C25.66 33.84 26.17 33.33 26.17 32.7C26.17 32.07 25.65 31.56 25.02 31.56H19.23Z" fill="#FF8C00"/>
+<path d="M10.0601 25.8101H11.2001V23.5701H10.2401V22.8501C10.8601 22.7501 11.1701 22.6401 11.5201 22.4301H12.3901V25.8201H13.3301V26.7601H10.0601V25.8101Z" fill="#FF8C00"/>
+<path d="M14.8801 25.9401C14.8801 25.4501 15.2401 25.0501 15.7801 25.0501C16.3201 25.0501 16.6801 25.4501 16.6801 25.9401C16.6801 26.4301 16.3201 26.8301 15.7801 26.8301C15.2401 26.8301 14.8801 26.4301 14.8801 25.9401Z" fill="#FF8C00"/>
+<path d="M9.91999 33.17C11.09 32.23 11.94 31.5 11.94 30.91C11.94 30.52 11.69 30.34 11.3 30.34C10.98 30.34 10.72 30.55 10.49 30.75L9.85999 30.12C10.34 29.64 10.78 29.42 11.47 29.42C12.41 29.42 13.06 29.98 13.06 30.84C13.06 31.54 12.33 32.3 11.61 32.9C11.85 32.87 12.18 32.85 12.4 32.85H13.28V33.83H9.91999V33.17Z" fill="#FF8C00"/>
+<path d="M14.88 33.03C14.88 32.54 15.24 32.14 15.78 32.14C16.32 32.14 16.68 32.54 16.68 33.03C16.68 33.52 16.32 33.92 15.78 33.92C15.24 33.92 14.88 33.53 14.88 33.03Z" fill="#FF8C00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 13C9 11.07 10.57 9.5 12.5 9.5C14.43 9.5 16 11.07 16 13C16 15.63 12.5 19.5 12.5 19.5C12.5 19.5 9 15.63 9 13ZM11.25 13C11.25 13.69 11.81 14.25 12.5 14.25C13.19 14.25 13.75 13.69 13.75 13C13.75 12.31 13.19 11.75 12.5 11.75C11.81 11.75 11.25 12.31 11.25 13Z" fill="#FF8C00"/>
+</svg>

package/components/chart/line/Axis.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 
 const Axis = ({
@@ -10,27 +10,28 @@ const Axis = ({
   axisWidth,
   getX,
   getY,
-  maxX,
-  maxY,
+  // maxX,
+  // maxY,
   minX,
-  minY,
-  unitWidth
+  minY // unitWidth,
+
 }) => {
-  // drawn Oxygen coordinate systems for width and height are entered or by default 
+  // drawn Oxygen coordinate systems for width and height are entered or by default
   return axisVisible ? jsx("g", {
-    className: 'DGN-Axis-LineChart',
+    className: 'DGN-UI-LineChart-Axis',
     stroke: axisColor,
     strokeWidth: axisWidth
   }, jsx("line", {
     x1: getX(minX),
-    y1: getY(minY),
-    x2: getX(maxX + unitWidth + 0.5),
+    y1: getY(minY) // x2={getX(maxX + unitWidth + 0.5)}
+    ,
+    x2: '100%',
     y2: getY(minY)
   }), jsx("line", {
     x1: getX(minX),
     y1: getY(minX),
     x2: getX(minX),
-    y2: getY(maxY + 10)
+    y2: '-10%'
   })) : null;
 };
 

package/components/chart/line/Grid.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 
 const Grid = ({
@@ -36,8 +36,9 @@ const Grid = ({
     gridY.push(jsx("line", {
       key: i,
       x1: getX(minX),
-      y1: getY(i),
-      x2: getX(maxX + unitWidth + 0.5),
+      y1: getY(i) // x2={getX(maxX + unitWidth + 0.5)}
+      ,
+      x2: '100%',
       y2: getY(i)
     }));
   }

package/components/chart/line/Path.js

@@ -1,8 +1,9 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
+import { color as colors } from '../../../styles/colors';
 
 const Path = ({
   data,
@@ -26,18 +27,18 @@ const Path = ({
     return colors;
   });
   const PathCSS = css`
-        stroke: ${pathColor};
+        stroke: ${colors[pathColor] || pathColor};
         stroke-width: ${STROKE};
         stroke-linecap: round;
         stroke-linejoin: round;
         /* &:hover {
             cursor: pointer;
-            stroke: ${pathColor};
+            stroke: ${colors[pathColor] || pathColor};
             stroke-linecap: round;
             stroke-linejoin: round;
             stroke-width: ${STROKEHover};
         } */
-    `; // Properties of a line 
+    `; // Properties of a line
   // I:  - pointA (array) [x,y]: coordinates
   //     - pointB (array) [x,y]: coordinates
   // O:  - (object) { length: l, angle: a }: properties of the line
@@ -62,7 +63,7 @@ const Path = ({
       length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
       angle
     };
-  }; // Position of a control point 
+  }; // Position of a control point
   // I:  - current (array) [x, y]: current point coordinates
   //     - previous (array) [x, y]: previous point coordinates
   //     - next (array) [x, y]: next point coordinates
@@ -102,7 +103,7 @@ const Path = ({
     return jsx("path", {
       d: d,
       css: PathCSS,
-      fill: "none"
+      fill: 'none'
     });
   };
 
@@ -110,13 +111,13 @@ const Path = ({
 
   const svgPath = points => {
     // build the d attributes by looping over the points
-    const d = points.reduce((acc, point, i, a) => i === 0 // if first point
-    ? `M ${point[0]},${point[1]}` // else
-    : `${acc} ${command(point, i, a)}`, '');
+    const d = points.reduce((acc, point, i, a) => i === 0 ? // if first point
+    `M ${point[0]},${point[1]}` : // else
+    `${acc} ${command(point, i, a)}`, '');
     return jsx("path", {
       d: d,
       css: PathCSS,
-      fill: "none"
+      fill: 'none'
     });
   };
 

package/components/chart/line/Point.js

@@ -1,9 +1,10 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { typography } from "../../../styles/typography";
+import { typography } from '../../../styles/typography';
+import { color as colors } from '../../../styles/colors';
 
 const Points = ({
   data,
@@ -23,16 +24,17 @@ const Points = ({
   pointsVisible,
   strokeWidth,
   onClick,
-  unitWidth
+  unitWidth,
+  pointHoverAlignment
 }) => {
   const PointCSS = css`
-        fill: ${pointsColor};
+        fill: ${colors[pointsColor] || pointsColor};
         stroke: ${pointsStrokeColor};
         stroke-width: ${strokeWidth};
         &:hover {
             cursor: pointer;
             fill: #fff;
-            stroke: ${pointsColor};
+            stroke: ${colors[pointsColor] || pointsColor};
             stroke-width: ${pointsStrokeHover};
         }
     `;
@@ -170,78 +172,69 @@ const Points = ({
       Width += 90;
     }
 
-    if (getX(point.x + unitWidth / 1.5) < 20) {
-      return jsx("g", {
-        id: `tooltipLine` + i,
-        className: 'DGN-Tooltip-Bar',
-        style: {
-          display: 'none'
-        },
-        transform: `translate(${getX(point.x + unitWidth / 1.5) + 4}, ${getY(point.quantity)})`
-      }, jsx("path", {
-        d: rightTooltipPath(Width, 20, 6, 4),
-        fill: pointsColor,
-        stroke: pointsColor,
-        style: {
-          filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
-        }
-      }), jsx("text", {
-        x: x,
-        y: y,
-        dy: "1em",
-        css: textChartCSS,
-        fill: "#fff"
-      }, point.quantity));
-    }
-
-    if (getX(point.x + unitWidth / 1.5) > viewBoxWidth) {
-      return jsx("g", {
-        id: `tooltipLine` + i,
-        className: 'DGN-Tooltip-Bar',
-        style: {
-          display: 'none'
-        },
-        transform: `translate(${getX(point.x + unitWidth / 1.5) - 4}, ${getY(point.quantity)})`
-      }, jsx("path", {
-        d: leftTooltipPath(Width, 20, 6, 4),
-        fill: pointsColor,
-        stroke: pointsColor,
-        style: {
-          filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
-        }
-      }), jsx("text", {
-        x: x1,
-        y: y1,
-        dy: "1em",
-        css: textChartCSS,
-        fill: "#fff"
-      }, point.quantity));
-    }
-
-    if (getY(point.quantity) > 10) {
-      return jsx("g", {
-        id: `tooltipLine` + i,
-        className: 'DGN-Tooltip-Bar',
-        style: {
-          display: 'none'
-        },
-        transform: `translate(${getX(point.x + unitWidth / 1.5)}, ${getY(point.quantity) - 4})`
-      }, jsx("path", {
-        d: topTooltipPath(Width, 20, 6, 4),
-        fill: pointsColor,
-        stroke: pointsColor,
-        style: {
-          filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
-        }
-      }), jsx("text", {
-        y: "-23",
-        dy: "1em",
-        css: textChartCSS,
-        fill: "#fff"
-      }, point.quantity));
-    }
-
-    return jsx("g", {
+    const toolTipRight = jsx("g", {
+      id: `tooltipLine` + i,
+      className: 'DGN-Tooltip-Bar',
+      style: {
+        display: 'none'
+      },
+      transform: `translate(${getX(point.x + unitWidth / 1.5) + 4}, ${getY(point.quantity)})`
+    }, jsx("path", {
+      d: rightTooltipPath(Width, 20, 6, 4),
+      fill: colors[pointsColor] || pointsColor,
+      stroke: colors[pointsColor] || pointsColor,
+      style: {
+        filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
+      }
+    }), jsx("text", {
+      x: x,
+      y: y,
+      dy: "1em",
+      css: textChartCSS,
+      fill: "#fff"
+    }, point.quantity));
+    const toolTipLeft = jsx("g", {
+      id: `tooltipLine` + i,
+      className: 'DGN-Tooltip-Bar',
+      style: {
+        display: 'none'
+      },
+      transform: `translate(${getX(point.x + unitWidth / 1.5) - 4}, ${getY(point.quantity)})`
+    }, jsx("path", {
+      d: leftTooltipPath(Width, 20, 6, 4),
+      fill: colors[pointsColor] || pointsColor,
+      stroke: colors[pointsColor] || pointsColor,
+      style: {
+        filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
+      }
+    }), jsx("text", {
+      x: x1,
+      y: y1,
+      dy: "1em",
+      css: textChartCSS,
+      fill: "#fff"
+    }, point.quantity));
+    const toolTipTop = jsx("g", {
+      id: `tooltipLine` + i,
+      className: 'DGN-Tooltip-Bar',
+      style: {
+        display: 'none'
+      },
+      transform: `translate(${getX(point.x + unitWidth / 1.5)}, ${getY(point.quantity) - 4})`
+    }, jsx("path", {
+      d: topTooltipPath(Width, 20, 6, 4),
+      fill: colors[pointsColor] || pointsColor,
+      stroke: colors[pointsColor] || pointsColor,
+      style: {
+        filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
+      }
+    }), jsx("text", {
+      y: "-23",
+      dy: "1em",
+      css: textChartCSS,
+      fill: "#fff"
+    }, point.quantity));
+    const toolTipBottom = jsx("g", {
       id: `tooltipLine` + i,
       className: 'DGN-Tooltip-Bar',
       style: {
@@ -250,8 +243,8 @@ const Points = ({
       transform: `translate(${getX(point.x + unitWidth / 1.5)}, ${getY(point.quantity) + 4})`
     }, jsx("path", {
       d: bottomTooltipPath(Width, 20, 6, 4),
-      fill: pointsColor,
-      stroke: pointsColor,
+      fill: colors[pointsColor] || pointsColor,
+      stroke: colors[pointsColor] || pointsColor,
       style: {
         filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15))'
       }
@@ -261,6 +254,37 @@ const Points = ({
       css: textChartCSS,
       fill: "#fff"
     }, point.quantity));
+
+    if (pointHoverAlignment) {
+      switch (pointHoverAlignment) {
+        case 'right':
+          return toolTipRight;
+
+        case 'left':
+          return toolTipLeft;
+
+        case 'top':
+          return toolTipTop;
+
+        case 'bottom':
+        default:
+          return toolTipBottom;
+      }
+    } else {
+      if (getX(point.x + unitWidth / 1.5) < 20) {
+        return toolTipRight;
+      }
+
+      if (getX(point.x + unitWidth / 1.5) > viewBoxWidth) {
+        return toolTipLeft;
+      }
+
+      if (getY(point.quantity) > 10) {
+        return toolTipTop;
+      }
+
+      return toolTipBottom;
+    }
   };
 
   return pointsVisible ? jsx("g", {
@@ -332,7 +356,10 @@ Points.propTypes = {
   pointsVisible: PropTypes.bool,
 
   /** the unitWidth */
-  unitWidth: PropTypes.number
+  unitWidth: PropTypes.number,
+
+  /** the direction to display tootip */
+  pointHoverAlignment: PropTypes.oneOf(['top', 'bottom', 'left', 'right'])
 };
 Points.defaultProps = {
   getX: x => x,

package/components/chart/line/index.js

@@ -1,17 +1,17 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from "prop-types";
-import { memo, forwardRef } from "react";
+import PropTypes from 'prop-types';
+import { memo, forwardRef } from 'react';
 import { jsx } from '@emotion/core';
 import Axis from './Axis';
 import Labels from './Labels';
 import Grid from './Grid';
-import Points from './Point';
-import Title from './Title';
+import Points from './Point'; // import Title from './Title';
+
 import Path from './Path';
 import { randomString } from '../../../utils';
-const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const LineChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   labelsVisible,
   labelsCharacterWidth,
   labelsCountY,
@@ -21,8 +21,9 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewBoxWidth,
   labelsOffsetX,
   labelsHeightX,
-  unitWidth,
+  // unitWidth,
   style,
+  className,
   ...props
 }, ref) => {
   const colors = ['#FFD600', '#FFA800', '#FF7A00', '#FF0000', '#B61414', '#8FFF00', '#629000', '#019A5A', '#00C875', '#00FFD1', '#4200FF', '#0075FF', '#0095FF', '#00C2FF', '#00E0FF', '#8F00FF', '#BD00FF', '#FA00FF', '#FF00B8', '#FF3D71'];
@@ -41,7 +42,9 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const getMinX = () => {
-    return dataSource.length > 0 ? dataSource[0].x : 0;
+    var _dataSource$;
+
+    return (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 ? (_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : _dataSource$.x : 0;
   };
 
   const getMinY = () => {
@@ -49,12 +52,16 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const getMaxX = () => {
-    return dataSource.length > 0 ? dataSource[dataSource.length - 1].x : 0;
+    var _dataSource;
+
+    return (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 ? (_dataSource = dataSource[(dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) - 1]) === null || _dataSource === void 0 ? void 0 : _dataSource.x : 0;
   };
 
   const getMaxY = () => {
+    var _dataSource$2;
+
     const yStep = labelsCountY > 0 ? labelsCountY : 1;
-    const maxY = dataSource.length > 0 ? dataSource.reduce((max, point) => point.quantity > max ? point.quantity : max, dataSource[0].quantity) : 0;
+    const maxY = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 ? dataSource.reduce((max, point) => point.quantity > max ? point.quantity : max, (_dataSource$2 = dataSource[0]) === null || _dataSource$2 === void 0 ? void 0 : _dataSource$2.quantity) : 0;
     return maxY ? Math.ceil(maxY / yStep) * yStep : yStep;
   };
 
@@ -94,13 +101,15 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   return jsx("svg", {
     id: id,
-    className: 'DGN-CUI-LineChart',
+    className: ['DGN-CUI-LineChart', className].join(' ').trim().replace(/\s+/g, ' '),
     viewBox: `0 0 ${Math.abs(viewBoxWidth)} ${Math.abs(viewBoxHeight)}`,
     style: {
       display: 'block',
       overflow: 'visible',
-      margin: `${getLabelsYWidth() * 2}`
-    }
+      margin: `${getLabelsYWidth() * 2}`,
+      ...style
+    },
+    ref: ref
   }, jsx(Axis, { ...props,
     ...commonProps
   }), jsx(Grid, { ...props,
@@ -121,7 +130,9 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...commonProps
   }));
 }));
-BarChart.defaultProps = {
+LineChart.defaultProps = {
+  style: {},
+  className: '',
   data: [],
   viewBoxHeight: 200,
   viewBoxWidth: 500,
@@ -130,7 +141,12 @@ BarChart.defaultProps = {
   ...Points.defaultProps,
   ...Grid.defaultProps
 };
-BarChart.propTypes = {
+LineChart.propTypes = {
+  /** style inline for component */
+  style: PropTypes.object,
+
+  /** className for component */
+  className: PropTypes.string,
   data: PropTypes.array.isRequired,
 
   /** drawn Ratio of viewBoxHeight entered by user, default is: 200px */
@@ -154,7 +170,7 @@ BarChart.propTypes = {
   /** show data information when hovering in the area containing the column */
   pointsIsHoverOnZone: PropTypes.bool,
 
-  /** show or hiden point */
+  /** show or hidden point */
   pointsVisible: PropTypes.bool,
 
   /** change the inner color of the point button  */
@@ -172,11 +188,14 @@ BarChart.propTypes = {
   /** The color of the line drawn is the default color according to the data returned from the API, otherwise it will be generated by the design. */
   pathColor: PropTypes.string,
 
-  /** show or hiden the line to be drawn smooth */
+  /** show or hidden the line to be drawn smooth */
   Smooth: PropTypes.bool,
+
+  /** the direction to display tootip */
+  pointHoverAlignment: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
   ...Axis.propTypes,
   ...Labels.propTypes,
   ...Points.propTypes,
   ...Grid.propTypes
 };
-export default BarChart;
+export default LineChart;

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

@@ -459,7 +459,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const icon = getIconFromData(data);
 
       if (multiple && selectBox) {
-        const checked = currentValue[unique].includes(value);
+        const checked = Array.isArray(currentValue[unique]) ? currentValue[unique].includes(value) : [currentValue[unique]].includes(value);
         items.push(jsx("div", {
           key: index,
           css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
@@ -616,7 +616,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       let item = null;
 
       if (multiple && selectBox) {
-        const checked = currentValue[unique].includes(value);
+        const checked = Array.isArray(currentValue[unique]) ? currentValue[unique].includes(value) : [currentValue[unique]].includes(value);
         item = jsx(Checkbox, {
           defaultChecked: checked,
           style: {
@@ -899,7 +899,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    if (closeAfterSelect) {
+    if (closeAfterSelect === true || closeAfterSelect === undefined && !multiple) {
       closeDropdown();
     }
   };
@@ -1757,7 +1757,6 @@ Dropdown.defaultProps = {
   multiple: false,
   allowSearch: false,
   selectBox: false,
-  closeAfterSelect: true,
   inputProps: {},
   formStyle: {},
   dataSource: [],

package/components/form-control/helper-text/index.js

@@ -5,66 +5,68 @@ import { memo, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Typography } from '../../';
-import theme from '../../../theme/settings';
 import { getGlobal } from '../../../global';
+import theme from '../../../theme/settings';
+const {
+  colors: {
+    system: {
+      disabled: systemDisabled
+    },
+    semantic: {
+      success,
+      warning,
+      danger,
+      info
+    }
+  },
+  spacing
+} = theme;
+const colorMap = new Map([['default', danger], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
 const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   status,
   className,
+  style,
   children,
-  ...props
+  id
 }, ref) => {
-  /* Start styled */
-  const HelperTextRoot = css`
-        margin-top: 4px;
-        &.info {
-            color: ${theme.colors.info};
-        }
-        &.success {
-            color: ${theme.colors.success};
-        }
-        &.warning {
-            color: ${theme.colors.warning};
-        }
-        &.danger {
-            color: ${theme.colors.danger};
-        }
-        &.disabled {
-            color: ${theme.colors.disabled};
-        }
-    `;
-  /* End styled */
-
+  const color = colorMap.get(status);
   return jsx(Typography, {
     ref: ref,
+    id: id,
     type: 'p3',
-    color: theme.colors.danger,
+    color: disabled ? systemDisabled : color,
     fullWidth: false,
-    css: HelperTextRoot,
-    className: ['DGN-UI-HelperText', className, status, disabled ? 'disabled' : ''].join(' ').trim(),
-    ...props
+    css: HelperTextRootCSS,
+    className: ['DGN-UI-HelperText', className].join(' ').trim().replace(/\s+/g, ' '),
+    style: style,
+    lineClamp: 1
   }, typeof children === 'boolean' ? getGlobal('thisFieldIsRequired') : children);
 }));
+const HelperTextRootCSS = css`
+    margin-top: ${spacing()}px;
+`;
 HelperText.defaultProps = {
   disabled: false,
   status: 'default',
   className: '',
+  style: {},
   children: ''
 };
 HelperText.propTypes = {
-  /** prevent all event if true */
+  /** If true, the component is disabled. */
   disabled: PropTypes.bool,
 
   /** status type to display color for input (only available for type is inform) */
   status: PropTypes.oneOf(['default', 'warning', 'success', 'danger', 'info']),
 
-  /** class use in for helper text */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** the content to display in HelperText */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** any props else */
-  props: PropTypes.any
+  /** Content to display in component. */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
 export default HelperText;

package/components/form-control/number-input/index2.js

@@ -221,14 +221,14 @@ const NumberInput = /*#__PURE__*/forwardRef(({
       e.preventDefault();
     } // key arrow down
     else if (keyCode === 40) {
-        _onInput({ ...e,
-          target: { ...e.target,
-            value: Number(convertMoneyToNumber(value) || 0) - step
-          }
-        });
+      _onInput({ ...e,
+        target: { ...e.target,
+          value: Number(convertMoneyToNumber(value) || 0) - step
+        }
+      });
 
-        e.preventDefault();
-      } // disabled negative
+      e.preventDefault();
+    } // disabled negative
 
 
     const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-')); // Block event if include conditions

package/components/form-control/time-picker/index.js

@@ -3,8 +3,9 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 import { Cancel as CancelIcon, Clock as ClockIcon } from '../../../icons';
+import HelperText from '../helper-text';
 import { randomString, useOnClickOutside } from '../../../utils';
 import theme from '../../../theme/settings';
 import Swiper from './swiper';
@@ -432,21 +433,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         }
                     `
     },
-    error: {
-      outlined: css`
-                        color: ${theme.colors.danger};
-                        ${typography.paragraph3};
-                        margin-top: 8px;
-                        pointer-events: none;
-                    `,
-      underlined: css`
-                        color: ${theme.colors.danger};
-                        ${typography.paragraph3};
-                        bottom: -20px;
-                        position: absolute;
-                        pointer-events: none;
-                    `
-    },
+    error: css`
+                    position: absolute;
+                    top: 100%;
+                `,
     clock: {
       container: css`
                         background-color: white;
@@ -762,9 +752,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onChange: selected => setInputSecond(selected),
     parentNode: swiperWrapperSecondsRef
   })) : null), [activeHeight, activeWidth, allowSeconds, defaultValue, disabled, error, value, viewType]);
-  const ErrorMemo = useMemo(() => error && jsx("span", {
-    css: styles.error[viewType]
-  }, error), [error]);
+  const ErrorMemo = useMemo(() => error && jsx(HelperText, {
+    css: styles.error,
+    disabled: disabled
+  }, error), [error, disabled]);
   const MainMemo = useMemo(() => jsx("div", {
     className: IDs.main,
     css: styles.main[viewType],

package/components/tree-view/css.js

@@ -1,8 +1,9 @@
 import { css } from '@emotion/core';
+import { alignCenter, borderBox, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from '../../styles/general';
 import theme from '../../theme/settings';
-export const TreeViewRoot = css`
-    display: block;
-    position: relative;
+export const TreeViewRootCSS = css`
+    ${displayBlock};
+    ${positionRelative};
     .DGN-UI-Accordion {
         box-shadow: none !important;
         .DGN-UI-Accordion-Summary {
@@ -10,20 +11,19 @@ export const TreeViewRoot = css`
             padding: 0;
             border-radius: 0;
             &.focus {
-            background-color: ${theme.colors.focus};
+                background-color: ${theme.colors.focus};
             }
             .Accordion-Icon-Root {
-                display: flex;
+                ${flexRow};
                 margin-right: 4px;
             }
         }
         .DGN-UI-Accordion-Details-Content {
             padding: 0;
-            margin-left: 16px;
             border-radius: 0;
         }
         .Accordion-Icon-Root {
-            display: flex;
+            ${flexRow};
             transition: opacity 0.2s ease-out;
             opacity: 1;
             &.DGN-Invisible {
@@ -36,29 +36,30 @@ export const TreeViewRoot = css`
     }
     .TreeView-All,
     .TreeView-Content {
-        display: block;
-        position: relative;
+        ${displayBlock};
+        ${positionRelative};
         .DGN-UI-Accordion {
             margin-bottom: 0;
         }
     }
     .TreeView-Item-Checkbox {
-        display: inline-block;
-        position: relative;
+        ${displayInlineBlock};
+        ${positionRelative};
         height: 100%;
         margin-right: 8px;
     }
     .TreeView-Item {
-        display: flex;
-        position: relative;
-        align-items: center;
+        ${flexRow};
+        ${positionRelative};
+        ${alignCenter};
+        ${borderBox};
         min-height: 40px;
         text-align: left;
         color: ${theme.colors.text.main};
-        box-sizing: border-box;
+        width: 100%;
         &.non-child {
+            ${cursorPointer};
             transition: background-color 300ms ease;
-            cursor: pointer;
             &.disabled {
                 color: ${theme.colors.disabled};
                 cursor: no-drop;

package/components/tree-view/index.js

@@ -5,7 +5,7 @@ import { memo, useMemo, useState, useEffect, useRef, forwardRef, Fragment, useIm
 import { render } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import { TreeViewRoot } from './css';
+import { TreeViewRootCSS } from './css';
 import { Accordion, AccordionSummary, AccordionDetails, Typography, Checkbox, Divider, InputBase, ButtonIcon } from '..';
 import { mapParent, randomString, removeUnicode } from '../../utils';
 import { getGlobal } from '../../global';
@@ -63,7 +63,8 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       input.nextElementSibling.classList[determinate ? 'add' : 'remove']('determinate');
       input.nextElementSibling.classList[determinate ? 'remove' : 'add']('indeterminate');
     }
-  };
+  }; // eslint-disable-next-line no-unused-vars
+
 
   const triggerCheckboxRecursion = (nodes, isChecked) => {
     nodes.forEach(el => {
@@ -77,7 +78,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const checkedParentFollowValue = nodes => {
-    if (nodes && nodes.length) {
+    if (nodes && nodes !== null && nodes !== void 0 && nodes.length) {
       nodes.forEach(node => {
         if (!node.classList.contains('non-child')) {
           const input = node.firstChild.querySelector('input');
@@ -147,7 +148,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               } else {
                 input.checked = true;
 
-                if (checkedQuantity === childNodes.length && checkedQuantity === determinateQuantity) {
+                if (checkedQuantity === (childNodes === null || childNodes === void 0 ? void 0 : childNodes.length) && checkedQuantity === determinateQuantity) {
                   if (!input.classList.contains('determinate')) {
                     determinateCheckbox(input, true);
                   }
@@ -238,10 +239,12 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       node = node.parentNode;
 
       if (node.classList.contains('DGN-UI-Accordion') && node.firstChild.classList.contains('DGN-UI-Accordion-Summary')) {
+        var _node$querySelectorAl;
+
         const checkbox = node.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild; // Trường hợp phải set về false để xét các input đã check không bao gồm node này
 
         checkbox.firstChild.checked = isChecked;
-        const mustDisabled = !!node.querySelectorAll('input:checked').length; // Nếu có ít nhất một input con được check thì phải checked cho input này
+        const mustDisabled = !!((_node$querySelectorAl = node.querySelectorAll('input:checked')) !== null && _node$querySelectorAl !== void 0 && _node$querySelectorAl.length); // Nếu có ít nhất một input con được check thì phải checked cho input này
 
         checkbox.firstChild.checked = mustDisabled;
         determinateCheckbox(checkbox.firstChild, !mustDisabled);
@@ -261,9 +264,11 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const setValue = (data, isChecked) => {
     if (multiple && multipleValueMode !== 'single') {
+      var _data$childItems;
+
       currentValue[unique][typeof data === 'object' ? data[valueExpr] : data] = isChecked;
 
-      if (data.childItems && data.childItems.length) {
+      if (data.childItems && (_data$childItems = data.childItems) !== null && _data$childItems !== void 0 && _data$childItems.length) {
         data.childItems.forEach(d => {
           setValue(d, isChecked);
         });
@@ -287,7 +292,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setValueIntoInput = data => {
-    if (!data || !data.length) {
+    if (!data || !(data !== null && data !== void 0 && data.length)) {
       inputValueRef.current.value = '';
       clearIconRef.current.style.opacity = 0;
       return;
@@ -334,6 +339,8 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const checkBoxEl = currentTarget.querySelector('.TreeView-Item-Checkbox');
 
     if (multiple) {
+      var _value;
+
       let checked = false;
       let inputEl = null; // Click on text (not checkbox)
 
@@ -378,7 +385,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       result.push(...Object.keys(currentValue[unique]).filter(v => currentValue[unique][v]));
       value = result;
 
-      if (value.length) {
+      if ((_value = value) !== null && _value !== void 0 && _value.length) {
         data = dataSource.filter(obj => value.includes(typeof obj === 'object' ? obj[valueExpr] : obj));
       } else {
         data = [];
@@ -529,7 +536,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           if (entry.classList.contains('TreeView-Item-contain-children-active')) {
             const hiddenEls = entry.querySelectorAll('.DGN-Hidden, .DGN-Invisible');
 
-            if (hiddenEls && hiddenEls.length) {
+            if (hiddenEls && hiddenEls !== null && hiddenEls !== void 0 && hiddenEls.length) {
               hiddenEls.forEach(hiddenEl => hiddenEl.classList.remove('DGN-Hidden', 'DGN-Invisible'));
             }
           }
@@ -545,7 +552,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
       const activeEls = ref.current.querySelectorAll('.TreeView-Item-active');
 
-      if (!disabledBoldResult && activeEls && activeEls.length) {
+      if (!disabledBoldResult && activeEls && activeEls !== null && activeEls !== void 0 && activeEls.length) {
         activeEls.forEach(activeEl => {
           activeEl.classList.remove('TreeView-Item-active', 'TreeView-Item-contain-children-active');
         });
@@ -580,12 +587,12 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const renderData = (data, keyArr) => {
-    const pattern = keyArr.join('|').replace(/([\{\}])/g, '\\$1');
+    const pattern = keyArr.join('|').replace(/([{}])/g, '\\$1');
     const separatorArr = displayExpr.split(new RegExp(pattern));
     let str = '';
     let i = 0;
 
-    for (i; i < keyArr.length; i++) {
+    for (i; i < (keyArr === null || keyArr === void 0 ? void 0 : keyArr.length); i++) {
       str += separatorArr[i] + (data[keyArr[i].replace(/\W/g, '')] !== undefined ? data[keyArr[i].replace(/\W/g, '')] : keyArr[i]);
     }
 
@@ -630,7 +637,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const focusClass = isTrue && !selectBox && !multiple ? 'focus' : '';
     const childItems = data.childItems; // is Summary
 
-    if (childItems && childItems.length) {
+    if (childItems && childItems !== null && childItems !== void 0 && childItems.length) {
       const id = randomString(6, {
         allowSymbol: false,
         allowNumber: false
@@ -647,7 +654,10 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           className: 'TreeView'
         },
         className: focusClass,
-        onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined
+        onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined,
+        style: {
+          paddingLeft: 16 * level
+        }
       }, jsx("div", {
         className: 'TreeView-Item'
       }, (selectBox || multiple) && jsx("span", {
@@ -665,6 +675,9 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     return jsx("div", {
       className: 'TreeView-Item non-child ' + focusClass,
+      style: {
+        paddingLeft: 34 + 16 * level
+      },
       onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined,
       key: index,
       tabIndex: "-1"
@@ -701,11 +714,13 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, [searchDelayTime]);
   useEffect(() => {
+    var _value2;
+
     dataSource.forEach(data => {
       currentValue[unique][typeof data === 'object' ? data[valueExpr] : data] = false;
     });
 
-    if (value && value.length) {
+    if (value && (_value2 = value) !== null && _value2 !== void 0 && _value2.length) {
       value.forEach(v => {
         currentValue[unique][v] = true;
       });
@@ -720,7 +735,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (multipleValueMode !== 'single') {
         const childNodes = Array.from(ref.current.childNodes);
 
-        if (childNodes && childNodes.length) {
+        if (childNodes && childNodes !== null && childNodes !== void 0 && childNodes.length) {
           checkedParentFollowValue(childNodes);
         }
 
@@ -780,7 +795,9 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, [disabled]);
   useEffect(() => {
-    if (Object.keys(itemsRenderAsync[unique]).length) {
+    var _Object$keys;
+
+    if ((_Object$keys = Object.keys(itemsRenderAsync[unique])) !== null && _Object$keys !== void 0 && _Object$keys.length) {
       Object.keys(itemsRenderAsync[unique]).forEach(async key => {
         await renderDataAsync(key, itemsRenderAsync[unique][key]);
       });
@@ -798,19 +815,21 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     handleCheckbox,
     get: () => ref.current
   }));
-  const TreeViewComp = useMemo(() => {
+  return useMemo(() => {
+    var _value3;
+
     if (typeof value === 'string') {
       value = [value];
     }
 
-    if (!multiple && value.length > 1) {
+    if (!multiple && ((_value3 = value) === null || _value3 === void 0 ? void 0 : _value3.length) > 1) {
       value.length = 1;
     }
 
     itemsRenderAsync[unique] = {};
-    const sync = dataSource.length > renderAsyncWithLength;
+    const sync = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > renderAsyncWithLength;
     return jsx("div", {
-      css: TreeViewRoot,
+      css: TreeViewRootCSS,
       className: 'DGN-UI-TreeView' + (disabled ? ' disabled' : '')
     }, showSelectedItems && jsx(InputBase, {
       inputRef: inputValueRef,
@@ -845,10 +864,9 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     })), jsx(Divider, null)), jsx("div", {
       ref: ref,
       ...props,
-      className: ['TreeView-Content', disabled ? 'disabled' : '', className].join(' ').trim()
+      className: ['TreeView-Content', disabled ? 'disabled' : '', className].join(' ').trim().replace(/\s+/g, ' ')
     }, disabledMap ? dataSource : mapParent(dataSource, id, parentID, true).map((data, index) => renderTreeView(data, index.toString(), 0, sync))));
   }, [dataSource, value, multiple, selectBox, disabledBoldResult, autoExpandToResult, showChildrenOfResult, searchMode, onChange, searchProps]);
-  return TreeViewComp;
 }));
 TreeView.defaultProps = {
   expand: false,

package/package.json

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

package/readme.md

@@ -38,6 +38,14 @@ npm test
 ```
 
 ## Changelog
+## 1.3.45
+- \[Added\]: MenuIcon – MHRM00N0005, MHRM09N1015, MHRM09N1400, MHRP25L0101, MHRP25L0501, MHRM09N1020
+- \[Changed\]: LineChart – Allow pointsColor, pathColor use CORE colors; Add prop className, style, pointHoverAlignment
+- \[Changed\]: HelperText – Add truncates text 1 line
+- \[Fixed\]: TreeView – Fix css
+- \[Fixed\]: Dropdown – Fix bug when multiple or selectBox value not array
+- \[Fixed\]: Dropdown – Fix bug closeAfterSelect when multiple is true
+
 ## 1.3.44
 - \[Added\]: MenuIcon – MHRP09N0033
 - \[Changed\]: Modal – Add prop className