diginet-core-ui 1.4.6 → 1.4.7-beta.2

package/assets/images/menu/eo/W00F0001.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 6.5V13H35.75V6.5H3.25ZM35.75 32.5H3.25V26H35.75V32.5ZM9.75 27.625H6.5V30.875H9.75V27.625ZM6.5 11.375H9.75V8.125H6.5V11.375ZM3.25 22.75H35.75V16.25H3.25V22.75ZM9.75 17.875H6.5V21.125H9.75V17.875Z" fill="#2680EB"/>
+</svg>

package/assets/images/menu/eo/W00F0002.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 6.5H32.5C34.2875 6.5 35.75 7.9625 35.75 9.75V29.25C35.75 31.0375 34.2875 32.5 32.5 32.5H6.5C4.7125 32.5 3.25 31.0375 3.25 29.25L3.26625 9.75C3.26625 7.9625 4.7125 6.5 6.5 6.5ZM19.5 21.125L32.5 13V9.75L19.5 17.875L6.5 9.75V13L19.5 21.125Z" fill="#2680EB"/>
+</svg>

package/assets/images/menu/eo/W00F0003.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26 9.75H32.5C34.3037 9.75 35.75 11.1962 35.75 13V30.875C35.75 32.6787 34.3037 34.125 32.5 34.125H6.5C4.69625 34.125 3.25 32.6787 3.25 30.875L3.26625 13C3.26625 11.1962 4.69625 9.75 6.5 9.75H13V6.5C13 4.69625 14.4462 3.25 16.25 3.25H22.75C24.5537 3.25 26 4.69625 26 6.5V9.75ZM16.25 9.75H22.75V6.5H16.25V9.75Z" fill="#2680EB"/>
+</svg>

package/assets/images/menu/eo/W00F0004.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.6876 19.5C31.6876 20.0525 31.6389 20.5725 31.5739 21.0925L35.0026 23.7738C35.3114 24.0175 35.3926 24.4563 35.1976 24.8138L31.9476 30.4362C31.7526 30.7937 31.3301 30.94 30.9564 30.7938L26.9101 29.1687C26.0651 29.8025 25.1551 30.355 24.1639 30.7612L23.5464 35.0675C23.4976 35.4575 23.1564 35.75 22.7501 35.75H16.2501C15.8439 35.75 15.5026 35.4575 15.4539 35.0675L14.8364 30.7612C13.8451 30.355 12.9351 29.8188 12.0901 29.1687L8.04386 30.7938C7.68636 30.9238 7.24761 30.7937 7.05261 30.4362L3.80261 24.8138C3.60761 24.4563 3.68886 24.0175 3.99761 23.7738L7.42636 21.0925C7.36136 20.5725 7.31261 20.0362 7.31261 19.5C7.31261 18.9637 7.36136 18.4275 7.42636 17.9075L3.99761 15.2262C3.68886 14.9825 3.59136 14.5437 3.80261 14.1862L7.05261 8.56375C7.24761 8.20625 7.67011 8.06 8.04386 8.20625L12.0901 9.83125C12.9351 9.1975 13.8451 8.645 14.8364 8.23875L15.4539 3.9325C15.5026 3.5425 15.8439 3.25 16.2501 3.25H22.7501C23.1564 3.25 23.4976 3.5425 23.5464 3.9325L24.1639 8.23875C25.1551 8.645 26.0651 9.18125 26.9101 9.83125L30.9564 8.20625C31.3139 8.07625 31.7526 8.20625 31.9476 8.56375L35.1976 14.1862C35.3926 14.5437 35.3114 14.9825 35.0026 15.2262L31.5739 17.9075C31.6389 18.4275 31.6876 18.9475 31.6876 19.5ZM13.8126 19.5C13.8126 22.6362 16.3639 25.1875 19.5001 25.1875C22.6364 25.1875 25.1876 22.6362 25.1876 19.5C25.1876 16.3638 22.6364 13.8125 19.5001 13.8125C16.3639 13.8125 13.8126 16.3638 13.8126 19.5Z" fill="#2680EB"/>
+</svg>

package/assets/images/menu/eo/WTM76ACC0001.svg

@@ -0,0 +1,11 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1066_64)">
+<path d="M36.1 27.9L30 25.3C29.8 25.2 29.7 25 29.6 24.8H33.7C33.7 24.8 33.9 24.8 34.3 24.8C35.2 24.8 36 24.7 36.8 24.3C37.8 23.9 38.2 22.8 37.8 21.8C37.8 21.7 37.7 21.6 37.6 21.5C36.4 19.8 33.7 15.4 33.6 11C33.6 10.9 33.3 3.3 25.8 3.3C25.7 3.3 25.6 3.3 25.5 3.3C25.4 3.3 25.3 3.3 25.2 3.3C25.1 3.3 25.1 3.3 25.1 3.3C25.6 4.4 25.8 5.7 25.7 6.9V9.8C26.1 10.5 26.4 11.4 26.4 12.2V14.9C26.4 16.4 25.7 17.8 24.5 18.7C24 20 23.3 21.3 22.5 22.4C22.5 22.5 22.4 22.5 22.4 22.6V24.1L28.8 27.3C31.6 28.7 33.3 31.5 33.3 34.6V39H39V32.6C39 30.6 37.9 28.8 36.1 27.9Z" fill="#7BC0F9"/>
+<path d="M27.8 29L21.3 25.8C20.7 25.5 20.3 24.9 20.3 24.2V21.9C20.5 21.7 20.6 21.5 20.8 21.3C21.7 20.1 22.3 18.8 22.8 17.4C23.8 17 24.4 16 24.4 15V12.3C24.4 11.6 24.2 11 23.7 10.5V6.8C23.8 5.2 23.3 3.6 22.3 2.4C20.9 0.8 18.6 0 15.6 0C12.6 0 10.3 0.8 8.90001 2.4C7.90001 3.6 7.40001 5.2 7.50001 6.8V10.4C7.10001 10.9 6.80001 11.5 6.80001 12.2V14.9C6.80001 15.7 7.20001 16.5 7.80001 17C8.30001 18.8 9.10001 20.4 10.2 21.9V24.1C10.2 24.8 9.80001 25.4 9.30001 25.7L3.30001 29C1.30001 30.1 0.100006 32.1 0.100006 34.4V39H31.3V34.5C31.2 32.2 29.9 30.1 27.8 29Z" fill="#2680EB"/>
+</g>
+<defs>
+<clipPath id="clip0_1066_64">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/eo/WTM76INF0001.svg

@@ -0,0 +1,12 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1066_65)">
+<path d="M36 20H34V24H35C35.6 24 36 24.4 36 25V29C36 29.6 35.6 30 35 30H34V36C34 37.2 33.5 38.3 32.6 39H36C37.7 39 39 37.7 39 36V23C39 21.3 37.7 20 36 20Z" fill="#7BC0F9"/>
+<path d="M6 36V30H5C4.4 30 4 29.6 4 29V25C4 24.4 4.4 24 5 24H6V20H5C4.4 20 4 19.6 4 19V15C4 14.4 4.4 14 5 14H6V10H3C1.3 10 0 11.3 0 13V36C0 37.7 1.3 39 3 39H7.4C6.5 38.3 6 37.2 6 36Z" fill="#7BC0F9"/>
+<path d="M30 0H10C8.3 0 7 1.3 7 3V36C7 37.7 8.3 39 10 39H15V26C15 25.4 15.4 25 16 25H24C24.6 25 25 25.4 25 26V39H30C31.7 39 33 37.7 33 36V3C33 1.3 31.7 0 30 0ZM18 19C18 19.6 17.6 20 17 20H13C12.4 20 12 19.6 12 19V15C12 14.4 12.4 14 13 14H17C17.6 14 18 14.4 18 15V19ZM18 9C18 9.6 17.6 10 17 10H13C12.4 10 12 9.6 12 9V5C12 4.4 12.4 4 13 4H17C17.6 4 18 4.4 18 5V9ZM28 19C28 19.6 27.6 20 27 20H23C22.4 20 22 19.6 22 19V15C22 14.4 22.4 14 23 14H27C27.6 14 28 14.4 28 15V19ZM28 9C28 9.6 27.6 10 27 10H23C22.4 10 22 9.6 22 9V5C22 4.4 22.4 4 23 4H27C27.6 4 28 4.4 28 5V9Z" fill="#2680EB"/>
+</g>
+<defs>
+<clipPath id="clip0_1066_65">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/eo/WTM76PRO0001.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="M30 2H25.8C25.8 0.9 24.9 0 23.8 0H15.3C14.2 0 13.3 0.9 13.3 2H9C7.3 2 6 3.4 6 5V35.9C6 37.6 7.4 38.9 9 38.9H30C31.7 38.9 33 37.5 33 35.9V5.1C33 3.4 31.6 2 30 2ZM15.3 2H23.8V4H15.3V2ZM31 35.9C31 36.5 30.5 36.9 30 36.9H9C8.4 36.9 8 36.4 8 35.9V5.1C8 4.5 8.5 4.1 9 4.1H13.2C13.2 5.2 14.1 6.1 15.2 6.1H23.7C24.8 6.1 25.7 5.2 25.7 4.1H30C30.6 4.1 31 4.6 31 5.1V35.9Z" fill="#2680EB"/>
+<path d="M18.2 9.7L17.6 9.1C17.6 9 17.5 9 17.3 9C17.2 9 17.1 9 17 9.1L13.6 12.5L12.2 11.1C12.2 11.1 12.1 11 12 11C11.9 11 11.8 11.1 11.7 11.1L11.1 11.7C11.1 11.8 11 11.9 11 12C11 12.1 11 12.2 11.1 12.3L13.3 14.5C13.4 14.6 13.5 14.6 13.6 14.6C13.7 14.6 13.8 14.6 13.9 14.5L18.1 10.3C18.2 10.2 18.2 10.1 18.2 10C18.3 9.9 18.3 9.8 18.2 9.7ZM16.9 12.7C16.8 12.7 16.7 12.7 16.7 12.7L16.4 13L16.3 13.1V14.4C16.3 14.6 16.2 14.8 16.1 15C15.9 15.2 15.7 15.2 15.5 15.2H11.2C11 15.2 10.8 15.1 10.6 15C10.4 14.8 10.3 14.6 10.3 14.4V10.1C10.3 9.9 10.4 9.7 10.6 9.5C10.8 9.3 11 9.3 11.2 9.3H15.5C15.6 9.3 15.7 9.3 15.7 9.3C15.7 9.3 15.7 9.3 15.8 9.3C15.8 9.3 15.9 9.3 15.9 9.2L16.2 8.9C16.2 8.9 16.3 8.8 16.2 8.8C16.2 8.7 16.2 8.7 16.1 8.7C15.9 8.7 15.7 8.7 15.5 8.7H11.2C10.8 8.7 10.4 8.8 10.1 9.1C9.8 9.4 9.7 9.7 9.7 10.2V14.5C9.7 14.9 9.8 15.3 10.1 15.6C10.4 15.9 10.8 16 11.2 16H15.5C15.9 16 16.3 15.8 16.6 15.6C16.9 15.3 17 15 17 14.5V12.8C17 12.8 17 12.7 16.9 12.7Z" fill="#F58B1F"/>
+<path d="M28.7 10.5H20C19.7 10.5 19.4 10.2 19.4 9.9C19.4 9.6 19.7 9.3 20 9.3H28.8C29.1 9.3 29.4 9.6 29.4 9.9C29.3 10.2 29.1 10.5 28.7 10.5Z" fill="#2680EB"/>
+<path d="M28.7 13H20C19.7 13 19.4 12.7 19.4 12.4C19.4 12.1 19.7 11.8 20 11.8H28.8C29.1 11.8 29.4 12.1 29.4 12.4C29.3 12.7 29.1 13 28.7 13Z" fill="#2680EB"/>
+<path d="M28.7 15.5H20C19.7 15.5 19.4 15.2 19.4 14.9C19.4 14.6 19.7 14.3 20 14.3H28.8C29.1 14.3 29.4 14.6 29.4 14.9C29.3 15.2 29.1 15.5 28.7 15.5Z" fill="#2680EB"/>
+<path d="M18.2 19.2L17.6 18.6C17.5 18.5 17.4 18.5 17.3 18.5C17.2 18.5 17.1 18.5 17 18.6L13.7 22L12.3 20.6C12.2 20.5 12.1 20.5 12 20.5C11.9 20.5 11.8 20.5 11.7 20.6L11.1 21.2C11.1 21.3 11 21.4 11 21.5C11 21.6 11 21.7 11.1 21.8L13.4 24C13.5 24.1 13.6 24.1 13.7 24.1C13.8 24.1 13.9 24.1 14 24L18.2 19.8C18.3 19.7 18.3 19.6 18.3 19.5C18.3 19.4 18.3 19.3 18.2 19.2ZM16.9 22.2C16.8 22.2 16.7 22.2 16.7 22.2L16.4 22.5L16.3 22.6V24C16.3 24.2 16.2 24.4 16.1 24.6C15.9 24.8 15.7 24.8 15.5 24.8H11.2C11 24.8 10.8 24.7 10.6 24.6C10.4 24.4 10.3 24.2 10.3 24V19.7C10.3 19.5 10.4 19.3 10.6 19.1C10.8 18.9 11 18.9 11.2 18.9H15.5C15.6 18.9 15.7 18.9 15.7 18.9C15.7 18.9 15.7 18.9 15.8 18.9C15.8 18.9 15.9 18.9 15.9 18.8L16.2 18.5C16.2 18.5 16.3 18.4 16.2 18.3C16.2 18.2 16.2 18.2 16.1 18.2C15.9 18.1 15.7 18.1 15.5 18.1H11.2C10.8 18.1 10.4 18.2 10.1 18.5C9.8 18.8 9.7 19.1 9.7 19.6V24C9.7 24.4 9.8 24.8 10.1 25.1C10.4 25.4 10.7 25.5 11.2 25.5H15.5C15.9 25.5 16.3 25.3 16.6 25.1C16.9 24.8 17 24.5 17 24V22.3C17 22.3 17 22.2 16.9 22.2Z" fill="#F58B1F"/>
+<path d="M28.7 20H20C19.7 20 19.4 19.7 19.4 19.4C19.4 19.1 19.7 18.8 20 18.8H28.8C29.1 18.8 29.4 19.1 29.4 19.4C29.3 19.7 29.1 20 28.7 20Z" fill="#2680EB"/>
+<path d="M28.7 22.5H20C19.7 22.5 19.4 22.2 19.4 21.9C19.4 21.6 19.7 21.3 20 21.3H28.8C29.1 21.3 29.4 21.6 29.4 21.9C29.3 22.2 29.1 22.5 28.7 22.5Z" fill="#2680EB"/>
+<path d="M28.7 25H20C19.7 25 19.4 24.7 19.4 24.4C19.4 24.1 19.7 23.8 20 23.8H28.8C29.1 23.8 29.4 24.1 29.4 24.4C29.3 24.7 29.1 25 28.7 25Z" fill="#2680EB"/>
+<path d="M16.9 31.7C16.8 31.7 16.8 31.7 16.7 31.7L16.4 32V32.1V33.4C16.4 33.6 16.3 33.8 16.2 34C16 34.2 15.8 34.2 15.6 34.2H11.2C11 34.2 10.8 34.1 10.6 34C10.4 33.8 10.4 33.6 10.4 33.4V29.1C10.4 28.9 10.5 28.7 10.6 28.5C10.8 28.3 11 28.3 11.2 28.3H15.5C15.6 28.3 15.7 28.3 15.7 28.3C15.7 28.3 15.8 28.3 15.8 28.2L16.1 27.9C16.1 27.9 16.2 27.8 16.1 27.7C16.1 27.6 16.1 27.6 16 27.6C15.8 27.5 15.6 27.5 15.4 27.5H11.2C10.8 27.5 10.4 27.6 10.1 27.9C9.8 28.2 9.7 28.5 9.7 29V33.3C9.7 33.7 9.8 34.1 10.1 34.4C10.4 34.9 10.8 35 11.2 35H15.5C15.9 35 16.3 34.9 16.6 34.6C16.9 34.3 17 34 17 33.5V31.8C17 31.8 17 31.8 16.9 31.7ZM18.2 28.7L17.6 28.1C17.5 28 17.4 28 17.3 28C17.2 28 17.1 28 17 28.1L13.6 31.5L12.2 30.1C12.2 30.1 12.1 30 12 30C11.9 30 11.8 30 11.7 30.1L11.1 30.7C11.1 30.8 11 30.9 11 31C11 31.1 11 31.2 11.1 31.3L13.3 33.5C13.4 33.6 13.5 33.6 13.6 33.6C13.7 33.6 13.8 33.6 13.9 33.5L18.1 29.3C18.2 29.2 18.2 29.1 18.2 29C18.3 28.9 18.3 28.8 18.2 28.7Z" fill="#F58B1F"/>
+<path d="M28.7 29.5H20C19.7 29.5 19.4 29.2 19.4 28.9C19.4 28.6 19.7 28.3 20 28.3H28.8C29.1 28.3 29.4 28.6 29.4 28.9C29.3 29.2 29.1 29.5 28.7 29.5Z" fill="#2680EB"/>
+<path d="M28.7 32H20C19.7 32 19.4 31.7 19.4 31.4C19.4 31.1 19.7 30.8 20 30.8H28.8C29.1 30.8 29.4 31.1 29.4 31.4C29.3 31.7 29.1 32 28.7 32Z" fill="#2680EB"/>
+<path d="M28.7 34.5H20C19.7 34.5 19.4 34.2 19.4 33.9C19.4 33.6 19.7 33.3 20 33.3H28.8C29.1 33.3 29.4 33.6 29.4 33.9C29.3 34.2 29.1 34.5 28.7 34.5Z" fill="#2680EB"/>
+</svg>

package/assets/images/menu/eo/WTM76SYS0001.svg

@@ -0,0 +1,11 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1066_67)">
+<path d="M22.1 19.4C21.9 19 21.6 18.7 21.3 18.3C21 18 20.7 17.6 20.4 17.4L21.1 13.9C21.2 13.6 21 13.3 20.7 13.1L15.7 11.3C15.4 11.2 15 11.3 14.9 11.6L13.2 14.8C12.3 14.8 11.5 15 10.6 15.3L7.9 12.9C7.6 12.7 7.3 12.7 7 12.9L3 16.4C2.7 16.6 2.7 17 2.9 17.3L4.8 20.3C4.3 21 4 21.9 3.9 22.7L0.500001 23.8C0.100001 24 -0.0999988 24.3 1.2219e-06 24.6L1 29.9C1.1 30.2 1.3 30.5 1.7 30.4L5.3 30.3C5.5 30.6 5.7 31 6 31.3C6.3 31.6 6.6 32 6.9 32.2L6.2 35.7C6.1 36 6.3 36.3 6.6 36.5L11.6 38.3C11.9 38.4 12.3 38.3 12.4 38L14.1 34.8C15 34.8 15.8 34.6 16.7 34.3L19.4 36.7C19.7 36.9 20 36.9 20.3 36.7L24.4 33.2C24.7 33 24.7 32.6 24.5 32.3L22.6 29.3C23 28.5 23.3 27.7 23.5 26.8L26.9 25.7C27.2 25.6 27.4 25.3 27.3 24.9L26.4 19.6C26.3 19.3 26.1 19 25.7 19.1L22.1 19.4ZM16.9 28.7C14.8 30.5 11.6 30.2 9.8 28.1C8 26 8.3 22.8 10.4 21C12.5 19.2 15.7 19.5 17.5 21.6C19.3 23.7 19 26.9 16.9 28.7Z" fill="#2680EB"/>
+<path d="M33.9 16C34.1 15.9 34.3 15.7 34.6 15.5C34.8 15.3 35 15.1 35.2 14.9L37.4 15.4C37.6 15.4 37.8 15.3 37.9 15.1L39 11.9C39.1 11.7 39 11.5 38.8 11.4L36.8 10.3C36.8 9.7 36.7 9.2 36.5 8.7L38 7C38.1 6.8 38.1 6.6 38 6.4L35.8 3.8C35.7 3.6 35.4 3.6 35.3 3.7L33.3 5C32.8 4.7 32.3 4.6 31.7 4.4L31 2.3C31 2.1 30.8 2 30.6 2L27.3 2.6C27.1 2.6 26.9 2.8 27 3V5.3C26.8 5.4 26.5 5.6 26.3 5.8C26.1 6 25.9 6.2 25.7 6.4L23.5 5.9C23.3 5.9 23 6 23 6.2L21.9 9.4C21.8 9.6 21.9 9.8 22.1 9.9L24 11C24 11.6 24.1 12.1 24.3 12.6L22.8 14.3C22.7 14.5 22.7 14.7 22.8 14.9L25 17.5C25.1 17.7 25.4 17.7 25.5 17.6L27.4 16.4C27.9 16.7 28.4 16.8 29 17L29.7 19.2C29.8 19.4 30 19.5 30.2 19.5L33.5 18.9C33.7 18.9 33.9 18.7 33.8 18.5L33.9 16ZM28 12.7C26.9 11.4 27 9.3 28.4 8.2C29.7 7.1 31.8 7.2 32.9 8.6C34 9.9 33.9 12 32.5 13.1C31.1 14.2 29.1 14.1 28 12.7Z" fill="#2680EB"/>
+</g>
+<defs>
+<clipPath id="clip0_1066_67">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/avatar/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { forwardRef, Fragment, isValidElement, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { borderNone, borderRadius, boxContent, cursorInherit, cursorPointer, displayBlock, displayFlex, displayInlineFlex, displayNone, flexCol, itemsCenter, overflowHidden, parseMinWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, userSelectNone, z } from "../../styles/general";
 import { useTheme } from "../../theme";
-import { classNames, isMobile } from "../../utils";
+import { classNames, isMobile, refType as ref } from "../../utils";
 const {
   colors: {
     system: {
@@ -364,7 +364,7 @@ Avatar.propTypes = {
   /** the error to show on wrong type */
   wrongTypeError: PropTypes.string,
   /**
-   * ref methods
+   * ref methods (ref.current.instance.*method*)
    *
    * * option(): Gets all UI component properties
    *  * Returns value - object
@@ -377,9 +377,7 @@ Avatar.propTypes = {
    * * option(options): Updates the values of several properties
    *  * @param {options} - object
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  ref: ref
 };
 export { Avatar };
 export default OptionWrapper(Avatar);

package/components/button/icon.js

@@ -98,10 +98,9 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: [_ButtonRootCSS, _ButtonSizeCSS],
       ref: ref,
       id: id,
-      disabled: disabled,
       style: style,
       onClick: _onClick,
-      className: classNames('DGN-UI-ButtonIcon', viewType, size, className)
+      className: classNames('DGN-UI-ButtonIcon', disabled && 'disabled', viewType, size, className)
     }, loading && IconLoadingView(iconSize), !loading && jsx("span", {
       className: 'DGN-UI-ButtonIcon-Icon',
       css: _ButtonIconCSS
@@ -181,7 +180,7 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
                         }
                     `)}// &:hover | &:focus | &:active
         `}
-        :disabled {
+        &.disabled {
             ${borderColor('system/disabled')};
             ${bgColor('transparent')};
         }
@@ -210,9 +209,8 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
                 ${bgColor(colorHover)};
             }
         `}
-        :disabled {
+        &.disabled {
             ${bgColor('fill/disabled')};
-            filter: brightness(1);
         }
     `}
     ${viewType === 'text' && css`
@@ -238,7 +236,7 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
                         }
                     `)}
         `}
-        :disabled {
+        &.disabled {
             ${bgColor('transparent')};
         }
     `}
@@ -265,9 +263,10 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
             }
         `}
     `}
-    :disabled {
+    &.disabled {
         ${cursorNotAllowed};
         ${textColor('system/disabled')};
+        filter: brightness(1);
     }
 `;
 ButtonIcon.defaultProps = {

package/components/button/index.js

@@ -193,8 +193,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: _onClick,
       id: id,
       type: type,
-      disabled: disabled,
-      className: classNames('DGN-UI-Button', viewType, size, className),
+      className: classNames('DGN-UI-Button', disabled && 'disabled', viewType, size, className),
       href: urlState || null,
       ...props
     }, start, jsx(Typography, {
@@ -282,7 +281,7 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
                         }
                     `)} // &:hover | &:focus | &:active
         `}
-        :disabled {
+        &.disabled {
             ${borderColor('system/disabled')};
             ${bgColor('transparent')};
         }
@@ -311,9 +310,8 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
                 ${bgColor('system/active')};
             }
         `}
-        :disabled {
+        &.disabled {
             ${bgColor('fill/disabled')};
-            filter: brightness(1);
         }
     `}
     ${viewType === 'text' && css`
@@ -339,7 +337,7 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
                         }
                     `)}
         `}
-        :disabled {
+        &.disabled {
             ${bgColor('transparent')};
         }
     `}
@@ -357,13 +355,11 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
         &:active {
             filter: brightness(0.7);
         }
-        :disabled {
-            filter: brightness(1);
-        }
     `}
-    :disabled {
+    &.disabled {
         ${cursorNotAllowed};
         ${textColor('system/disabled')};
+        filter: brightness(1);
     }
 `;
 Button.defaultProps = {

package/components/card/body.js

@@ -4,7 +4,7 @@ import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
-import { classNames } from "../../utils";
+import { classNames, refType as ref } from "../../utils";
 const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -45,7 +45,22 @@ CardBody.propTypes = {
   /** If `true`, will have divider between body and footer. */
   style: PropTypes.object,
   /** The title of the component's header. */
-  title: PropTypes.string
+  title: PropTypes.string,
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
+   */
+  ref: ref
 };
 export { CardBody };
 export default OptionWrapper(CardBody);

package/components/card/extra.js

@@ -4,7 +4,7 @@ import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
-import { classNames } from "../../utils";
+import { classNames, refType as ref } from "../../utils";
 const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -45,7 +45,22 @@ CardExtra.propTypes = {
   /** If `true`, will have divider between body and footer. */
   style: PropTypes.object,
   /** The title of the component's header. */
-  title: PropTypes.string
+  title: PropTypes.string,
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
+   */
+  ref: ref
 };
 export { CardExtra };
 export default OptionWrapper(CardExtra);

package/components/card/footer.js

@@ -4,7 +4,7 @@ import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
-import { classNames } from "../../utils";
+import { classNames, refType as ref } from "../../utils";
 const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -45,7 +45,22 @@ CardFooter.propTypes = {
   /** If `true`, will have divider between body and footer. */
   style: PropTypes.object,
   /** The title of the component's header. */
-  title: PropTypes.string
+  title: PropTypes.string,
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
+   */
+  ref: ref
 };
 export { CardFooter };
 export default OptionWrapper(CardFooter);

package/components/card/header.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
 import Typography from "../typography";
-import { classNames } from "../../utils";
+import { classNames, refType as ref } from "../../utils";
 const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -48,7 +48,22 @@ CardHeader.propTypes = {
   /** If `true`, will have divider between body and footer. */
   style: PropTypes.object,
   /** The title of the component's header. */
-  title: PropTypes.string
+  title: PropTypes.string,
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
+   */
+  ref: ref
 };
 export { CardHeader };
 export default OptionWrapper(CardHeader);

package/components/card/index.js

@@ -10,7 +10,7 @@ import CardHeader from "./header";
 import { CardFooter } from "./footer";
 import { CardBody } from "./body";
 import { getColor } from "../../styles/utils";
-import { classNames } from "../../utils";
+import { classNames, refType as ref } from "../../utils";
 const {
   colors: {
     system: {
@@ -173,7 +173,22 @@ Card.propTypes = {
   /** The title of the component's header. */
   title: PropTypes.string,
   /** Width of the component. */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
+   */
+  ref: ref
 };
 export { Card };
 export default OptionWrapper(Card);