diginet-core-ui 1.3.89 → 1.3.90

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

@@ -0,0 +1,13 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_847_46)">
+<path d="M18.6998 0H15.7998C14.9998 0 14.2998 0.7 14.2998 1.5V5.9C14.2998 6.7 14.9998 7.4 15.7998 7.4H18.6998C19.4998 7.4 20.1998 6.7 20.1998 5.9V1.5C20.1998 0.7 19.4998 0 18.6998 0Z" fill="#2680EB"/>
+<path d="M27.5998 11.8C27.5998 7.7 25.1998 4.2 21.6998 2.5V5.9C21.6998 7.5 20.3998 8.8 18.7998 8.8H15.8998C14.2998 8.8 12.9998 7.5 12.9998 5.9V2.5C9.39982 4.1 6.99982 7.7 6.99982 11.8C6.19982 11.8 5.49982 12.5 5.49982 13.3V14.8C5.49982 15.6 6.19982 16.3 6.99982 16.3H27.5998C28.3998 16.3 29.0998 15.6 29.0998 14.8V13.3C28.9998 12.4 28.3998 11.8 27.5998 11.8Z" fill="#2680EB"/>
+<path d="M33.4998 21.4C33.2998 21 32.8998 20.8 32.4998 20.8C32.2998 20.8 31.8998 20.9 31.5998 21.2C31.3998 21.5 30.9998 21.9 30.6998 22.2C29.8998 23.1 28.8998 24.3 28.4998 24.6C28.3998 24.7 28.2998 24.7 28.1998 24.7C28.0998 24.7 27.9998 24.6 27.9998 24.5C27.9998 24.4 27.9998 24.3 28.0998 24.2C28.2998 24 28.8998 23.4 29.4998 22.7C30.2998 21.8 31.2998 20.7 31.6998 20.3C31.9998 20 32.0998 19.5 31.8998 19.1C31.6998 18.7 31.3998 18.4 30.8998 18.4C30.5998 18.4 30.2998 18.5 29.9998 18.8C28.8998 19.9 26.6998 22.2 26.3998 22.5C26.2998 22.6 26.1998 22.6 26.0998 22.6C25.9998 22.6 25.8998 22.6 25.8998 22.5C25.8998 22.5 25.8998 22.4 25.9998 22.2C26.2998 21.9 26.6998 21.4 27.2998 20.8C27.8998 20.2 28.4998 19.5 28.9998 18.9C29.3998 18.5 29.4998 18 29.2998 17.6C29.0998 17.2 28.6998 17 28.2998 17C27.8998 17 27.5998 17.2 27.2998 17.4C27.0998 17.6 26.6998 18.1 26.2998 18.6C25.2998 19.9 23.8998 21.6 22.7998 22.2C22.6998 22.2 22.4998 22.4 21.7998 22.3C20.9998 22.2 20.4998 20.8 20.3998 20C20.2998 19.6 20.2998 19.2 20.0998 19C19.8998 18.6 19.2998 18.3 18.6998 18.3C18.2998 18.3 17.9998 18.4 17.7998 18.7C17.6998 18.9 17.4998 19.2 17.5998 19.7C17.6998 20 17.7998 20.3 17.8998 20.7C18.1998 21.9 18.6998 23.8 18.4998 26C18.3998 26.7 18.0998 27.4 17.4998 28C16.4998 27.1 15.8998 26.2 15.7998 25.4C15.7998 23.5 16.0998 22.3 16.3998 21.3C16.4998 21 16.5998 20.7 16.5998 20.3C16.7998 19.6 16.4998 19.2 16.2998 18.9C15.9998 18.6 15.5998 18.4 15.0998 18.4C14.3998 18.4 13.6998 18.8 13.3998 19.3C13.1998 19.7 13.0998 20.1 13.0998 20.5C12.9998 21.2 12.8998 21.8 11.9998 22.3C11.9998 22.3 11.8998 22.3 11.7998 22.3C10.8998 21.8 9.29982 20.2 8.29982 18.9C7.89982 18.4 7.49982 17.9 7.29982 17.7C6.89982 17.3 6.49982 17.1 5.99982 17.1C5.39982 17.1 4.79982 17.4 4.59982 18C4.49982 18.2 4.49982 18.5 4.49982 18.7C4.19982 18.5 3.89982 18.4 3.59982 18.4C2.99982 18.4 2.49982 18.8 2.19982 19.3C1.99982 19.7 1.99982 20.1 2.19982 20.4H2.39982C1.79982 20.4 1.29982 20.7 0.999824 21.3C0.799824 21.7 0.799824 22.3 1.19982 22.7C0.799824 22.8 0.399824 23.1 0.199824 23.5C-0.100176 24 -0.000176042 24.6 0.399824 25.1C0.899824 26.1 12.9998 38.7 12.9998 38.7C13.0998 38.9 13.2998 39 13.4998 39H13.5998C13.7998 39 13.8998 38.9 13.9998 38.8L17.2998 35.8L19.0998 37.4C19.3998 31.8 23.5998 27.4 29.0998 26.8V26.1C29.0998 25.3 29.4998 24.7 30.1998 24.3C30.4998 24.1 30.7998 24.1 31.0998 24.1C31.2998 24.1 31.4998 24.1 31.6998 24.2C32.2998 23.6 32.8998 22.9 33.2998 22.4C33.5998 22 33.6998 21.7 33.4998 21.4ZM13.7998 32.5L16.4998 35.1L13.5998 37.8C12.9998 37 1.69982 25.5 1.09982 24.7C0.999824 24.6 0.899824 24.4 0.999824 24.2C0.999824 24 1.19982 23.9 1.39982 23.9C1.49982 23.9 1.59982 24 1.69982 24.1C2.39982 24.9 3.89982 26.5 4.19982 26.8C4.89982 27.5 5.69982 26.8 5.09982 26.1C4.59982 25.6 2.89982 23.7 1.99982 22.6C1.29982 21.7 2.29982 21.1 2.89982 22C3.09982 22.3 5.49982 25 5.89982 25.3C6.09982 25.5 6.29982 25.6 6.49982 25.6C6.79982 25.6 7.09982 25.4 7.19982 25.2C7.29982 24.9 7.19982 24.6 6.99982 24.4C6.89982 24.3 5.89982 23.3 4.89982 22.3C3.89982 21.1 3.29982 20.6 3.49982 20.2C3.59982 20 3.79982 19.9 3.99982 19.9C4.19982 19.9 4.39982 20.1 4.49982 20.2C5.49982 21.2 7.59982 23.4 7.89982 23.7C8.09982 23.8 8.29982 24 8.49982 24C8.79982 24 8.99982 23.8 9.09982 23.6C9.19982 23.4 9.19982 23.2 8.89982 22.8C8.59982 22.5 8.19982 22 7.69982 21.4C6.99982 20.6 6.39982 20 5.89982 19.4C5.79982 19.3 5.59982 18.9 5.69982 18.7C5.79982 18.5 5.99982 18.3 6.29982 18.3C6.49982 18.3 6.69982 18.4 6.89982 18.6C7.09982 18.8 7.49982 19.3 7.79982 19.7C8.59982 20.7 10.1998 22.5 11.3998 23.2C11.7998 23.4 12.2998 23.6 12.6998 23.3C13.9998 22.6 14.1998 21.6 14.2998 20.8C14.2998 20.5 14.3998 20.2 14.4998 20C14.6998 19.7 14.9998 19.5 15.3998 19.5C15.5998 19.5 15.7998 19.6 15.8998 19.8C15.9998 19.9 15.9998 20.1 15.9998 20.4C15.8998 20.7 15.7998 21 15.7998 21.3C15.4998 22.4 15.1998 23.6 15.1998 25.4C15.1998 26 15.2998 26.2 15.3998 26.6C15.6998 27.4 16.2998 28.2 17.0998 29C15.4998 30.7 13.8998 32.2 13.8998 32.3C13.7998 32.4 13.7998 32.5 13.7998 32.5ZM34.3998 23.7C34.1998 23.3 33.8998 23.1 33.4998 23.1C33.2998 23.1 33.0998 23.2 32.7998 23.4C32.5998 23.7 32.2998 24 31.8998 24.3C31.9998 24.3 31.9998 24.4 32.0998 24.4L33.5998 25.4C33.8998 25.1 34.0998 24.8 34.1998 24.8C34.5998 24.5 34.5998 24.1 34.3998 23.7Z" fill="#2680EB"/>
+<path d="M30.1 35.5C30.1 35.9 30.3 36.2 30.7 36.4C30.8 36.5 31 36.5 31.2 36.5C31.4 36.5 31.6 36.4 31.8 36.3L38.7 31.5C38.9 31.3 39.1 31 39.1 30.7C39.1 30.4 38.9 30.1 38.7 29.9L31.8 25.2C31.6 25.1 31.4 25 31.2 25C31 25 30.9 25 30.7 25.1C30.4 25.3 30.2 25.6 30.1 26V27.6C24.5 27.9 20 32.4 20 38V38.1C20 38.5 20.3 38.8 20.6 38.9C20.7 38.9 20.8 38.9 20.8 38.9C21.1 38.9 21.4 38.7 21.5 38.5C23.3 35.6 26.5 33.8 30 33.7L30.1 35.5Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_847_46">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,14 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_847_51)">
+<path d="M15.1002 6.8H17.9002C18.7002 6.8 19.3002 6.2 19.3002 5.4V1.4C19.3002 0.7 18.7002 0 17.9002 0H15.1002C14.3002 0 13.7002 0.6 13.7002 1.4V5.5C13.7002 6.2 14.3002 6.8 15.1002 6.8Z" fill="#2680EB"/>
+<path d="M27.7002 12.2V13.6C27.7002 14.4 27.1002 15 26.3002 15H6.70022C5.90022 15 5.30022 14.4 5.30022 13.6V12.2C5.30022 11.4 5.90022 10.8 6.70022 10.8C6.70022 7 9.00022 3.8 12.3002 2.2V5.3C12.3002 6.8 13.6002 8 15.1002 8H17.9002C19.4002 8 20.7002 6.8 20.7002 5.3V2.3C22.5002 3.1 24.0002 4.5 25.0002 6.2C23.3002 7.7 22.3002 9.9 22.3002 12.4V12.5C22.3002 13.2 22.8002 13.9 23.5002 14.1C23.6002 14.1 23.8002 14.2 23.9002 14.2C24.5002 14.2 25.0002 13.9 25.3002 13.5C25.8002 12.7 26.5002 12 27.3002 11.5C27.6002 11.5 27.7002 11.8 27.7002 12.2Z" fill="#2680EB"/>
+<path d="M30.5002 17.8C30.3002 17.4 30.0002 17.2 29.6002 17.2C29.3002 17.2 29.0002 17.3 28.7002 17.6C27.7002 18.6 25.5002 20.8 25.3002 21C25.2002 21.1 25.2002 21.1 25.0002 21.1C24.9002 21.1 24.8002 21.1 24.8002 21C24.8002 21 24.8002 20.9 24.9002 20.7C25.2002 20.4 25.6002 19.9 26.1002 19.4C26.6002 18.9 27.2002 18.2 27.7002 17.7C28.1002 17.3 28.2002 16.9 28.0002 16.5C27.8002 16.2 27.5002 15.9 27.0002 15.9C26.7002 15.9 26.3002 16.1 26.0002 16.3C25.8002 16.5 25.4002 17 25.0002 17.4C24.1002 18.6 22.7002 20.2 21.7002 20.7C21.6002 20.7 21.4002 20.9 20.7002 20.8C19.9002 20.7 19.5002 19.4 19.4002 18.7C19.3002 18.3 19.3002 18 19.1002 17.7C18.9002 17.3 18.3002 17.1 17.8002 17.1C17.4002 17.1 17.1002 17.2 16.9002 17.4C16.8002 17.6 16.6002 17.9 16.8002 18.4C16.9002 18.7 16.9002 19 17.0002 19.3C17.3002 20.4 17.7002 22.1 17.6002 24.2C17.5002 24.9 17.2002 25.5 16.7002 26.1C15.7002 25.2 15.2002 24.4 15.1002 23.7C15.1002 22 15.4002 20.8 15.6002 19.9C15.7002 19.6 15.8002 19.3 15.8002 19C16.0002 18.3 15.8002 17.9 15.6002 17.7C15.3002 17.4 14.9002 17.2 14.4002 17.2C13.7002 17.2 13.1002 17.5 12.8002 18C12.6002 18.3 12.5002 18.7 12.5002 19.1C12.4002 19.8 12.3002 20.3 11.5002 20.7C11.5002 20.7 11.4002 20.8 11.3002 20.7C10.4002 20.2 8.90022 18.7 8.00022 17.6C7.60022 17.1 7.30022 16.7 7.00022 16.5C6.70022 16.2 6.20022 16 5.70022 16C5.10022 16 4.60022 16.3 4.30022 16.8C4.20022 17 4.20022 17.2 4.20022 17.4C3.90022 17.2 3.70022 17.1 3.40022 17.1C2.80022 17.1 2.30022 17.4 2.10022 18C2.00022 18.3 2.00022 18.7 2.10022 19H2.30022C1.70022 19 1.20022 19.3 1.00022 19.8C0.800219 20.2 0.900219 20.7 1.20022 21.1C0.800219 21.2 0.400219 21.5 0.200219 21.9C0.000218511 22.4 0.000218511 22.9 0.400219 23.4C1.00022 24.1 12.5002 35.7 12.5002 35.7C12.6002 35.8 12.8002 35.9 12.9002 36H13.0002C13.2002 36 13.3002 35.9 13.4002 35.8L16.5002 33L19.6002 35.7H19.7002C19.8002 35.7 19.8002 35.7 19.8002 35.6C19.8002 35.6 20.3002 35.1 21.1002 34.4C20.9002 34 20.7002 33.6 20.6002 33.3C20.3002 32.5 20.1002 31.6 20.0002 30.8C20.0002 30.5 20.0002 30.3 20.0002 29.9C20.0002 28.8 20.2002 27.7 20.5002 26.7C20.5002 26.6 20.6002 26.5 20.6002 26.5C20.6002 26.4 20.6002 26.4 20.7002 26.3C21.0002 25.5 21.4002 24.8 21.8002 24.2C22.2002 23.6 22.6002 23.1 23.1002 22.7C23.7002 22.1 24.3002 21.6 25.1002 21.2H25.2002C25.3002 21.1 25.4002 21.1 25.5002 21C25.8002 20.9 26.1002 20.7 26.4002 20.6C26.8002 20.4 27.3002 20.3 27.6002 20.2C28.0002 20.1 28.4002 20 28.8002 20C29.0002 20 29.1002 20 29.3002 19.9C29.8002 19.4 30.2002 19 30.5002 18.7C30.6002 18.6 30.7002 18.2 30.5002 17.8ZM13.2002 30L15.8002 32.4L13.0002 35C12.4002 34.2 1.60022 23.5 1.00022 22.8C0.900219 22.7 0.800218 22.5 0.900218 22.3C1.00022 22.1 1.10022 22 1.30022 22C1.40022 22 1.50022 22 1.60022 22.1C2.20022 22.8 3.70022 24.3 4.00022 24.6C4.70022 25.2 5.40022 24.6 4.80022 24C4.30022 23.5 2.70022 21.8 1.80022 20.8C1.10022 20 2.10022 19.4 2.70022 20.2C2.90022 20.4 5.20022 23 5.50022 23.3C5.70022 23.5 5.90022 23.6 6.10022 23.6C6.40022 23.6 6.60022 23.4 6.70022 23.2C6.80022 22.9 6.70022 22.7 6.50022 22.5C6.40022 22.4 5.50022 21.5 4.50022 20.5C3.50022 19.4 3.00022 18.9 3.20022 18.5C3.30022 18.3 3.50022 18.2 3.60022 18.2C3.80022 18.2 4.00022 18.3 4.10022 18.5C5.10022 19.4 7.10022 21.5 7.30022 21.7C7.50022 21.8 7.70022 22 7.90022 22C8.20022 22 8.40022 21.8 8.50022 21.6C8.60022 21.4 8.60022 21.2 8.30022 20.9C8.00022 20.6 7.60022 20.2 7.10022 19.6C6.60022 19.1 6.10022 18.5 5.60022 18C5.50022 17.9 5.30022 17.6 5.40022 17.4C5.50022 17.2 5.70022 17.1 5.90022 17.1C6.10022 17.1 6.30022 17.2 6.50022 17.4C6.70022 17.6 7.00022 18 7.40022 18.4C8.20022 19.3 9.70022 21 10.8002 21.7C11.1002 21.9 11.6002 22 12.1002 21.8C13.3002 21.1 13.5002 20.2 13.6002 19.5C13.7002 19.2 13.7002 18.9 13.8002 18.8C14.0002 18.5 14.2002 18.3 14.6002 18.3C14.8002 18.3 15.0002 18.4 15.1002 18.5C15.2002 18.6 15.2002 18.8 15.2002 19C15.1002 19.3 15.1002 19.5 15.0002 19.8C14.7002 20.8 14.4002 21.9 14.4002 23.6C14.4002 24.1 14.5002 24.4 14.6002 24.7C14.9002 25.4 15.4002 26.2 16.3002 26.9C14.8002 28.5 13.3002 29.9 13.2002 29.9C13.1002 29.9 13.2002 30 13.2002 30ZM32.0002 19.7C31.8002 19.4 31.5002 19.2 31.1002 19.2C30.9002 19.2 30.6002 19.3 30.3002 19.6C30.2002 19.7 30.0002 19.9 29.9002 20.1C30.0002 20.1 30.0002 20.1 30.1002 20.1C30.8002 20.1 31.5002 20.2 32.2002 20.3C32.1002 20 32.1002 19.9 32.0002 19.7Z" fill="#2680EB"/>
+<path d="M30.5999 10.5C30.5999 10.8 30.7999 11 30.9999 11.2C31.0999 11.3 31.1999 11.3 31.2999 11.3C31.3999 11.3 31.5999 11.3 31.6999 11.2L36.6999 7.7C36.8999 7.5 36.9999 7.3 36.9999 7.1C36.9999 6.9 36.8999 6.7 36.6999 6.6L31.6999 3.2C31.5999 3 31.4999 3 31.2999 3C31.1999 3 31.0999 3 30.9999 3.1C30.7999 3.2 30.5999 3.5 30.5999 3.7V4.9C26.5999 5 23.3999 8.3 23.3999 12.3V12.4C23.3999 12.7 23.5999 12.9 23.8999 13C23.9999 13 23.9999 13 24.0999 13C24.2999 13 24.4999 12.9 24.5999 12.7C25.8999 10.6 28.1999 9.3 30.6999 9.3L30.5999 10.5Z" fill="#FF8C00"/>
+<path d="M36.3 23.6C35.8 23.2 35.4 22.8 34.8 22.4C33.4 21.5 31.8 21 30 21C29.6 21 29.2 21 28.8 21.1C28.4 21.1 28.1 21.2 27.7 21.3C27.3 21.4 27 21.5 26.6 21.7C26.3 21.8 26 21.9 25.8 22.1C25.7 22.1 25.6 22.2 25.5 22.3C24.9 22.7 24.3 23.1 23.8 23.6C23.4 24 23 24.4 22.7 24.9C22.3 25.5 22 26.1 21.7 26.8C21.7 26.9 21.6 27.1 21.6 27.2C21.2 28 21 29 21 30C21 30.3 21 30.5 21 30.8C21.1 31.6 21.2 32.3 21.5 33.1C21.9 34.1 22.4 35 23 35.8C24.7 37.8 27.1 39.1 29.9 39.1C33 39.1 35.7 37.6 37.3 35.2C38.3 33.7 38.9 32 38.9 30.1C39 27.5 38 25.2 36.3 23.6ZM35.6 27.1L31.2 33L30.2 34.3C30 34.8 29.5 35 29 35H28.9C28.4 35 27.9 34.8 27.6 34.4L26.3 33L24.5 31C24 30.5 24 29.6 24.6 29.1C24.9 28.9 25.2 28.7 25.5 28.7C25.9 28.7 26.2 28.9 26.5 29.2L28.7 31.6L28.8 31.7C28.9 31.7 28.9 31.7 28.9 31.6L33.4 25.5C33.7 25.1 34.1 25 34.5 25C34.8 25 35 25.1 35.3 25.3C35.9 25.7 36 26.5 35.6 27.1Z" fill="#1CA261"/>
+</g>
+<defs>
+<clipPath id="clip0_847_51">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/breadcrumb/index.js

@@ -0,0 +1,144 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Typography } from "./..";
+import { Icon } from "../../icons/effect";
+import OptionWrapper from "../others/option-wrapper";
+import PropTypes from 'prop-types';
+import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { displayFlex, flexWrap, itemsCenter, mg, mgx, pd, userSelectNone } from "../../styles/general";
+import { classNames } from "../../utils";
+const insertSeparators = (items, separator) => {
+  return items.reduce((acc, current, index) => {
+    if (index < items.length - 1) {
+      acc = acc.concat(current, jsx("li", {
+        css: BreadcrumbSeparatorCSS,
+        "aria-hidden": true,
+        key: `separator-${index}`,
+        className: 'DGN-UI-Breadcrumb-separator'
+      }, separator));
+    } else {
+      acc.push(current);
+    }
+    return acc;
+  }, []);
+};
+const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  children,
+  className,
+  data,
+  id,
+  itemsAfterCollapse,
+  itemsBeforeCollapse,
+  maxItems,
+  separator,
+  style
+}, reference) => {
+  if (!reference) reference = useRef(null);
+  const ref = useRef(null);
+  const [expanded, setExpanded] = React.useState(false);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  const renderItemsBeforeAndAfter = allItems => {
+    const handleClickExpand = () => {
+      setExpanded(true);
+    };
+    if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
+      return allItems;
+    }
+    return [...allItems.slice(0, itemsBeforeCollapse), jsx(ButtonIcon, {
+      key: "ellipsis",
+      name: 'MoreHoriz',
+      width: 24,
+      height: 16,
+      onClick: handleClickExpand
+    }), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
+  };
+  const allItems = data !== null && data !== void 0 && data.length ? data.map((item, idx) => {
+    var _data$onClick;
+    return jsx("li", {
+      className: 'DGN-UI-Breadcrumb-li',
+      key: `child-${idx}`
+    }, jsx(Typography, {
+      type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? 'h5' : 'p3',
+      mapping: 'a',
+      color: 'text.sub',
+      href: data === null || data === void 0 ? void 0 : data.href,
+      onClick: data === null || data === void 0 ? void 0 : (_data$onClick = data.onClick) === null || _data$onClick === void 0 ? void 0 : _data$onClick.call(data)
+    }, item === null || item === void 0 ? void 0 : item.name));
+  }) : React.Children.toArray(children).filter(child => {
+    return /*#__PURE__*/React.isValidElement(child);
+  }).map((child, idx) => jsx("li", {
+    className: 'DGN-UI-Breadcrumb-li',
+    key: `child-${idx}`
+  }, child));
+  return useMemo(() => {
+    return jsx("nav", {
+      ref: ref,
+      id: id,
+      style: style,
+      className: classNames('DGN-UI-Breadcrumb', className)
+    }, jsx("ol", {
+      css: BreadcrumbOlCSS,
+      className: 'DGN-UI-Breadcrumb-ol'
+    }, insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), separator)));
+  }, [children, className, data, id, itemsAfterCollapse, itemsBeforeCollapse, maxItems, separator, style, expanded]);
+}));
+const BreadcrumbOlCSS = css`
+    ${displayFlex};
+    ${flexWrap};
+    ${itemsCenter};
+    ${pd(0)};
+    ${mg(0)};
+    list-style: none;
+`;
+const BreadcrumbSeparatorCSS = css`
+    ${displayFlex};
+    ${userSelectNone};
+    ${mgx([2])};
+`;
+Breadcrumb.defaultProps = {
+  className: '',
+  itemsBeforeCollapse: 1,
+  itemsAfterCollapse: 1,
+  maxItems: 8,
+  separator: jsx(Icon, {
+    name: 'ArrowRight',
+    width: 16,
+    height: 16
+  }),
+  style: {}
+};
+Breadcrumb.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** Class for component. */
+  className: PropTypes.string,
+  /** Class for component. */
+  data: PropTypes.PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    href: PropTypes.string,
+    onClick: PropTypes.func
+  })),
+  /** Class for component. */
+  itemsBeforeCollapse: PropTypes.number,
+  /** Class for component. */
+  itemsAfterCollapse: PropTypes.number,
+  /** Class for component. */
+  maxItems: PropTypes.number,
+  /**	Custom separator node. */
+  separator: PropTypes.node,
+  /** Style inline of component. */
+  style: PropTypes.object
+};
+export { Breadcrumb };
+export default OptionWrapper(Breadcrumb);

package/components/button/icon.js

@@ -124,6 +124,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: [_ButtonRootCSS, _ButtonSizeCSS, disabled && ButtonDisabledCSS],
       ref: ref,
       id: id,
+      disabled: disabled,
       style: style,
       onClick: _onClick,
       className: classNames('DGN-UI-ButtonIcon', viewType, getClassNameFromColor(colorProp), size, loading && 'button-icon--loading', className)

package/components/index.js

@@ -30,6 +30,9 @@ export { default as Badge } from "./badge";
 export { default as Button } from "./button";
 export { default as ButtonIcon } from "./button/icon";
 
+// BREADCRUMB
+export { default as Breadcrumb } from "./breadcrumb";
+
 // CARD
 export { default as Card } from "./card";
 export { default as CardHeader } from "./card/header";

package/components/popover/index.js

@@ -5,15 +5,10 @@ import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { borderRadius4px, displayBlock, flexCol, justifyBetween, overflowAuto, parseMaxWidthHeight, parseMinWidthHeight, parseWidthHeight, positionAbsolute, positionFixed, positionRelative } from "../../styles/general";
+import { bgColor, borderBottom, borderRadius4px, displayFlex, displayNone, flexCol, inset, justifyBetween, overflowAuto, parseMaxWidthHeight, parseMinWidthHeight, parseWidthHeight, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, isMobile, refType as ref } from "../../utils";
 const {
-  colors: {
-    system: {
-      white: systemWhite
-    }
-  },
   typography: {
     paragraph1
   },
@@ -139,16 +134,18 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   zIndex
 }, reference) => {
+  if (!reference) reference = useRef(null);
   if (isMobile.any() && trigger === 'hover') trigger = 'click';
   const ref = useRef(null);
   const arrowRef = useRef(null);
   const overflow = useRef(null);
+  const anchorRef = useRef(anchor);
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
+  const arrowSize = arrow ? 6 : 0;
   const _PortalPopoverCSS = PortalPopoverCSS(zIndex, fullScreen);
   const _PopoverContainerCSS = PopoverContainerCSS(bgColor, width, height);
-  const _PopoverArrowCSS = PopoverArrowCSS(bgColor);
-  const arrowSize = arrow ? 6 : 0;
+  const _PopoverArrowCSS = PopoverArrowCSS(bgColor, arrowSize);
   if (direction) {
     const directionObject = getDirectionPopover(direction);
     anchorOrigin = directionObject.anchorOrigin;
@@ -193,7 +190,9 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       verticalCenter = 0,
       horizontal = 0,
       horizontalCenter = 0,
-      arrowPosition = {},
+      arrowPosition = {
+        display: 'block'
+      },
       translate = {
         left: 0,
         top: 0
@@ -212,7 +211,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         var _anchor5, _anchor$current;
         anchor = ((_anchor5 = anchor) === null || _anchor5 === void 0 ? void 0 : _anchor5.element) || ((_anchor$current = anchor.current) === null || _anchor$current === void 0 ? void 0 : _anchor$current.element) || anchor.current;
       }
-      if (!anchor) return;
+      if (!document.body.contains(anchor)) return;
       if (arrow && anchorOrigin.vertical !== anchorOrigin.horizontal && transformOrigin.vertical !== transformOrigin.horizontal) {
         aPosition = getArrowPosition(anchorOrigin, transformOrigin, translate);
       }
@@ -386,8 +385,12 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, []);
   useEffect(() => {
-    var _anchor8, _anchor9;
+    anchorRef.current = anchor;
+  }, [anchor]);
+  useEffect(() => {
+    var _anchor8, _anchor9, _anchorRef$current, _anchorRef$current$pr;
     const anchorEl = ((_anchor8 = anchor) === null || _anchor8 === void 0 ? void 0 : _anchor8.element) || ((_anchor9 = anchor) === null || _anchor9 === void 0 ? void 0 : _anchor9.current) || anchor;
+    if (anchorEl !== null && anchorEl !== void 0 && anchorEl.disabled || (_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && (_anchorRef$current$pr = _anchorRef$current.props) !== null && _anchorRef$current$pr !== void 0 && _anchorRef$current$pr.disabled) return;
     const eventArr = eventMap.get(trigger) || [];
     if (anchorEl && open === undefined && (eventArr === null || eventArr === void 0 ? void 0 : eventArr.length) > 0) {
       eventArr.forEach(evt => anchorEl.addEventListener(evt, handleEventTrigger, false));
@@ -395,14 +398,16 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         eventArr.forEach(evt => anchorEl.removeEventListener(evt, handleEventTrigger, false));
       };
     }
-  }, [trigger, openState]);
+  }, [anchor, trigger, openState]);
   useEffect(() => {
     if (open !== undefined) setOpenState(open);
   }, [open]);
   useEffect(() => {
     if (openState && ref.current) {
-      overflow.current = document.body.style.overflow; // store overflow of <body /> before open
-      document.body.style.overflow = 'hidden';
+      if (document.body.style.overflow !== 'hidden') {
+        overflow.current = document.body.style.overflow; // store overflow of <body /> before open
+        document.body.style.overflow = 'hidden';
+      }
       // Position's anchor
       updatePositionPopover();
 
@@ -483,10 +488,10 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         ref: ref,
         style: style,
         className: classNames('DGN-UI-Popover-Container', className)
-      }, children), arrow && jsx("span", {
+      }, children), arrow ? jsx("span", {
         ref: arrowRef,
         css: _PopoverArrowCSS
-      }));
+      }) : null);
       return /*#__PURE__*/createPortal(node, document.body);
     }
     return null;
@@ -495,33 +500,34 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 const PortalPopoverCSS = (zIndex, fullScreen) => css`
     ${positionFixed};
+    ${fullScreen ? pointerEventsInitial : pointerEventsNone};
+    ${inset(0)};
     z-index: ${zIndex};
-    pointer-events: ${fullScreen ? 'initial' : 'none'};
-    inset: 0;
 `;
-const PopoverContainerCSS = (bgColor, width, height) => css`
+const PopoverContainerCSS = (bgCl, width, height) => css`
+    ${displayFlex};
     ${flexCol};
     ${positionRelative};
     ${justifyBetween};
     ${overflowAuto};
     ${borderRadius4px};
     ${paragraph1};
+    ${pointerEventsInitial};
     ${parseWidthHeight(width, height)};
     ${parseMinWidthHeight(spacing([4]))};
     ${parseMaxWidthHeight(`calc(100% - ${spacing([8])})`)};
+    ${bgColor(bgCl)};
     transition: opacity 0.3s ease;
-    pointer-events: initial;
     opacity: 0;
-    background-color: ${bgColor};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 `;
-const PopoverArrowCSS = bgColor => css`
-    ${displayBlock};
+const PopoverArrowCSS = (bgCl, arrowSize) => css`
+    ${displayNone};
     ${positionAbsolute};
     ${parseWidthHeight(0)};
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-bottom: 6px solid ${bgColor};
+    ${borderBottom(arrowSize, bgCl)};
+    border-left: ${arrowSize}px solid transparent;
+    border-right: ${arrowSize}px solid transparent;
 `;
 Popover.defaultProps = {
   anchorOrigin: {
@@ -529,7 +535,7 @@ Popover.defaultProps = {
     horizontal: 'center'
   },
   arrow: false,
-  bgColor: systemWhite,
+  bgColor: 'system.white',
   className: '',
   clickOutsideToClose: true,
   fullScreen: true,
@@ -546,10 +552,6 @@ Popover.defaultProps = {
   zIndex: zIndexCORE(1)
 };
 Popover.propTypes = {
-  /** If `true`, the component is shown. */
-  open: PropTypes.bool,
-  /** Trigger mode of the component. Will not work when use with `open` prop. */
-  trigger: PropTypes.oneOf(['click', 'hover', 'focus']),
   /** An HTML element, or a function that returns one. It's used to set the position of the popover. */
   anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object, PropTypes.node, ref]),
   /**
@@ -586,6 +588,8 @@ Popover.propTypes = {
   marginThreshold: PropTypes.number,
   /** Callback fired when the component requests to be closed. */
   onClose: PropTypes.func,
+  /** If `true`, the component is shown. */
+  open: PropTypes.bool,
   /** If `true`, hitting escape will close component. */
   pressESCToClose: PropTypes.bool,
   /** Style inline of component. */
@@ -598,6 +602,8 @@ Popover.propTypes = {
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
   }),
+  /** Trigger mode of the component. Will not work when use with `open` prop. */
+  trigger: PropTypes.oneOf(['click', 'hover', 'focus']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Config z-index of the component. */

package/components/tab/tab-container.js

@@ -1,12 +1,11 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import React, { forwardRef, useState, memo, useEffect, useRef, useImperativeHandle, useMemo } from 'react';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { displayFlex, flexCol, flexRow, parseWidth, positionRelative, typographyTypes } from "../../styles/general";
 import { classNames, randomString, refType as ref } from "../../utils";
 import TabContext from "./context";
-import { isNumeric } from "../../utils/type";
-import { flexCol, flexRow, positionRelative, parseWidth, typographyTypes } from "../../styles/general";
 const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -18,6 +17,7 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const {
     value
@@ -31,7 +31,7 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (level === 'level2') level = 'p1';
   const _TabContainerCSS = TabContainerCSS(direction, width);
   useEffect(() => {
-    if (isNumeric(value)) setTabIndexState(value);else setTabIndexState(tabIndex);
+    if (typeof value === 'number') setTabIndexState(value);else setTabIndexState(tabIndex);
   }, [value, tabIndex]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -63,6 +63,7 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [children, className, direction, level, props, style, tabIndex, width, tabIndexState, value]);
 }));
 const TabContainerCSS = (direction, width) => css`
+    ${displayFlex};
     ${direction === 'vertical' ? flexRow : flexCol};
     ${positionRelative};
     ${parseWidth(width)};

package/components/tab/tab-header.js

@@ -1,16 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import React, { memo, forwardRef, useContext, useRef, useState, useImperativeHandle, useMemo } from 'react';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon } from "./..";
 import PropTypes from 'prop-types';
-import TabContext from "./context";
-import ButtonIcon from "../button/icon";
-import { boxBorder, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, parseWidth, parseWidthHeight, positionRelative, whiteSpaceNoWrap } from "../../styles/general";
+import React, { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { boxBorder, displayFlex, displayNone, flexCol, flexRow, justifyCenter, mg, overflowHidden, parseMaxWidth, parseWidth, parseWidthHeight, pd, positionRelative, selfCenter, whiteSpaceNoWrap } from "../../styles/general";
 import { classNames, refType as ref } from "../../utils";
-import theme from "../../theme/settings";
-const {
-  spacing
-} = theme;
+import TabContext from "./context";
 const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   centered,
@@ -26,15 +22,16 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const {
     direction
   } = useContext(TabContext);
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const [scrollLeft, setScrollLeft] = useState(0);
   const isVertical = direction === 'vertical';
   let showScrollLeftButton = !isVertical && scrollLeft > 0;
   let showScrollRightButton = !isVertical && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) + scrollLeft < (ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollWidth);
   const _ContainerCSS = ContainerCSS(centered, isVertical, width);
-  const _TabHeaderCSS = TabHeaderCSS(isVertical, width);
-  const scrollLeftButtonCSS = scrollButtonCSS(true, showScrollLeftButton, showScrollRightButton);
-  const scrollRightButtonCSS = scrollButtonCSS(false, showScrollLeftButton, showScrollRightButton);
+  const _TabHeaderCSS = TabHeaderCSS(width);
+  const ScrollLeftButtonCSS = ScrollButtonCSS(true, showScrollLeftButton, showScrollRightButton);
+  const ScrollRightButtonCSS = ScrollButtonCSS(false, showScrollLeftButton, showScrollRightButton);
   const _onClickScrollButton = scrollPrevious => {
     let scrollValue = scrollPrevious ? ref.current.scrollLeft - (ref.current.offsetWidth + 30) : ref.current.scrollLeft + (ref.current.offsetWidth + 30);
     ref.current.scrollLeft = scrollValue;
@@ -58,7 +55,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: style,
       ...props
     }, scrollButtons && !isVertical && jsx(ButtonIcon, {
-      css: scrollLeftButtonCSS,
+      css: ScrollLeftButtonCSS,
       name: isVertical ? 'ArrowUp' : 'ArrowLeft',
       viewType: 'text',
       size: 'tiny',
@@ -66,7 +63,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disabled: !showScrollLeftButton,
       onClick: () => _onClickScrollButton(true)
     }), jsx("div", {
-      css: _TabHeaderCSS,
+      css: [_TabHeaderCSS, !isVertical && TabHeaderHorizontalCSS],
       className: 'DGN-UI-Tab-Header',
       ref: ref,
       onScroll: e => {
@@ -76,7 +73,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
       level
     }))), scrollButtons && !isVertical && jsx(ButtonIcon, {
-      css: scrollRightButtonCSS,
+      css: ScrollRightButtonCSS,
       name: isVertical ? 'ArrowDown' : 'ArrowRight',
       viewType: 'text',
       size: 'tiny',
@@ -87,45 +84,41 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [centered, children, className, level, props, scrollButtons, style, width, direction, isVertical, scrollLeft]);
 }));
 const ContainerCSS = (centered, isVertical, width) => css`
-    ${flexRow};
+    ${displayFlex};
     ${overflowHidden};
     ${positionRelative};
     ${boxBorder};
     ${parseWidthHeight(width, 'auto')};
     ${centered && justifyCenter};
-    flex-direction: ${isVertical ? 'column' : 'row'};
-    max-width: ${isVertical ? 'max-content' : '100%'};
-    padding: 0;
+    ${isVertical ? flexCol : flexRow};
+    ${parseMaxWidth(isVertical ? 'max-content' : '100%')};
+    ${pd(0)};
 `;
-const TabHeaderCSS = (isVertical, width) => isVertical ? css`
-              ${flexCol};
-              ${parseWidth(width)};
-          ` : css`
-              ${flexRow};
-              ${positionRelative};
-              ${whiteSpaceNoWrap};
-              ${parseWidth(width)};
-              margin: 0;
-              overflow-x: auto;
-              scroll-behavior: smooth;
-              scroll-snap-type: x mandatory;
-              scroll-padding: 50%;
-              transition: 0.3s ease-in-out 0.3s;
-              &::-webkit-scrollbar {
-                  ${displayNone};
-              }
-          `;
-const scrollButtonCSS = (scrollPrevious, showScrollLeftButton, showScrollRightButton) => css`
+const TabHeaderCSS = width => css`
+    ${displayFlex};
+    ${flexCol};
+    ${parseWidth(width)};
+`;
+const TabHeaderHorizontalCSS = css`
+    ${flexRow};
+    ${positionRelative};
+    ${whiteSpaceNoWrap};
+    ${mg(0)};
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+    scroll-padding: 50%;
+    transition: 0.3s ease-in-out 0.3s;
+    &::-webkit-scrollbar {
+        ${displayNone};
+    }
+`;
+const ScrollButtonCSS = (scrollPrevious, showScrollLeftButton, showScrollRightButton) => css`
     ${parseWidthHeight(24, 24)};
+    ${selfCenter};
+    ${mg(scrollPrevious ? [0, 2, 0, 0] : [0, 0, 0, 2])}
     overflow: initial;
-    align-self: center;
-    margin: ${scrollPrevious ? spacing([0, 2, 0, 0]) : spacing([0, 0, 0, 2])};
     opacity: ${scrollPrevious && showScrollLeftButton || !scrollPrevious && showScrollRightButton ? '1' : '0'};
-    :disabled {
-        span {
-            cursor: default !important;
-        }
-    }
 `;
 TabHeader.defaultProps = {
   centered: false,

package/components/tab/tab-panel.js

@@ -1,20 +1,11 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, forwardRef, useContext, useRef, useEffect, useState, useImperativeHandle, useMemo } from 'react';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import TabContext from "./context";
-import { boxBorder, displayNone, flexCol, parseWidthHeight, positionRelative } from "../../styles/general";
-import theme from "../../theme/settings";
+import { forwardRef, memo, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { boxBorder, displayFlex, displayNone, flexCol, parseWidthHeight, pd, positionRelative, textColor } from "../../styles/general";
 import { classNames, refType as ref } from "../../utils";
-const {
-  colors: {
-    text: {
-      main
-    }
-  },
-  spacing
-} = theme;
+import TabContext from "./context";
 const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -28,6 +19,7 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     tabIndexState,
     direction
   } = useContext(TabContext);
+  if (!reference) reference = useRef(null);
   const [isRendered, setIsRendered] = useState(false);
   const ref = useRef(null);
   const isVertical = direction === 'vertical';
@@ -60,13 +52,14 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [children, className, index, lazyLoading, props, style, isActive, isRendered, tabIndexState]);
 }));
 const TabPanelCSS = (isVertical, isActive) => css`
+    ${displayFlex};
     ${flexCol};
     ${boxBorder};
     ${positionRelative};
     ${isActive ? flexCol : displayNone};
-    ${parseWidthHeight('100%', isVertical ? 300 : '100%')}
-    color: ${main};
-    padding: ${spacing([0, isVertical ? 3 : 2.5])};
+    ${parseWidthHeight('100%', isVertical ? 300 : '100%')};
+    ${textColor('text.main')};
+    ${pd([0, isVertical ? 3 : 2.5])};
 `;
 TabPanel.defaultProps = {
   className: '',

package/components/tab/tab.js

@@ -1,26 +1,13 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { forwardRef, memo, useMemo, useContext, useRef, useImperativeHandle } from 'react';
-import { jsx, css } from '@emotion/core';
-import PropTypes from 'prop-types';
-import Icon from "../../icons";
-import { useTheme, useColor as colors } from "../../theme";
+import { css, jsx } from '@emotion/core';
+import { Icon, Typography } from "./..";
 import Ripple from "../button/ripple-effect";
-import Typography from "../typography";
-import TabContext from "./context";
-import { itemsCenter, bgTransparent, boxBorder, shadowNone, breakWord, cursorDefault, cursorPointer, flexRow, justifyCenter, justifyStart, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative, textCenter, whiteSpaceNoWrap } from "../../styles/general";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
+import { bgColor, bgTransparent, borderRadius, boxBorder, breakWord, cursorDefault, cursorPointer, displayFlex, flexRow, itemsCenter, justifyCenter, justifyStart, mgl, mgr, outlineNone, overflowHidden, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, pd, pointerEventsAuto, pointerEventsNone, positionAbsolute, positionRelative, shadowNone, textCenter, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
 import { classNames, refType as ref } from "../../utils";
-const {
-  colors: {
-    system: {
-      active,
-      disabled: systemDisabled,
-      rest,
-      white
-    }
-  },
-  spacing
-} = useTheme();
+import TabContext from "./context";
 const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -42,13 +29,16 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setTabIndexState,
     direction
   } = useContext(TabContext);
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
+  const rippleRef = useRef(null);
   const isVertical = direction === 'vertical';
-  const _TabButtonCSS = TabButtonCSS(color, isVertical);
+  const _TabItemCSS = TabItemCSS(color, isVertical);
   const _IndicatorCSS = IndicatorCSS(isVertical);
-  const _onClick = event => {
+  const _onClick = e => {
     if (disabled) return;
-    onClick ? onClick(event, index) : setTabIndexState(index);
+    rippleRef.current.start(e);
+    onClick ? onClick(e, index) : setTabIndexState(index);
   };
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -60,50 +50,44 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  const StartIcon = useMemo(() => {
-    let node = startIcon;
-    if (typeof node === 'string') {
-      node = jsx(Icon, {
-        color: 'currentColor',
-        name: startIcon
-      });
-    }
-    return jsx("span", {
-      css: ButtonIconCSS
-    }, " ", node, " ");
-  }, [startIcon]);
-  const EndIcon = useMemo(() => {
-    let node = endIcon;
+  const renderIcon = (icon, isEndIcon) => {
+    let node = icon;
     if (typeof node === 'string') {
       node = jsx(Icon, {
         color: 'currentColor',
-        name: endIcon
+        name: icon
       });
     }
     return jsx("span", {
-      css: ButtonIconCSS,
-      className: 'end-icon'
-    }, ' ', node, ' ');
-  }, [endIcon]);
+      css: IconCSS,
+      className: isEndIcon ? 'end-icon' : ''
+    }, node);
+  };
   return useMemo(() => {
     return jsx("div", {
-      css: _TabButtonCSS,
+      css: [_TabItemCSS, disabled && TabItemDisabledCSS, index === tabIndexState && !disabled && TabItemSelectedCSS],
       ref: ref,
       className: classNames('DGN-UI-Tab-Item', disabled && 'disabled', index === tabIndexState && !disabled && 'selected', className),
       style: style,
       onClick: _onClick,
       ...props
-    }, startIcon && StartIcon, jsx(Typography, {
-      ...labelProps,
+    }, startIcon && renderIcon(startIcon), jsx(Typography, {
       type: level,
-      color: 'inherit'
-    }, label), children, endIcon && EndIcon, jsx(Ripple, null), jsx("span", {
+      color: 'inherit',
+      lineClamp: 1,
+      hoverTooltip: true,
+      ...labelProps
+    }, label), children, endIcon && renderIcon(endIcon, true), jsx(Ripple, {
+      ref: rippleRef,
+      css: pointerEventsNone
+    }), jsx("span", {
       css: _IndicatorCSS,
       className: 'Indicator'
     }));
-  }, [children, className, color, disabled, endIcon, index, label, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
+  }, [children, className, color, disabled, endIcon, index, label, labelProps, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
 }));
-const TabButtonCSS = (color, isVertical) => css`
+const TabItemCSS = (color, isVertical) => css`
+    ${displayFlex};
     ${flexRow};
     ${overflowHidden};
     ${itemsCenter};
@@ -116,65 +100,66 @@ const TabButtonCSS = (color, isVertical) => css`
     ${whiteSpaceNoWrap};
     ${shadowNone};
     ${!isVertical && textCenter};
+    ${bgColor('system.white')};
+    ${textColor(color)};
+    ${parseMinWidth(80)};
+    ${parseMaxWidth(isVertical ? '100%' : 287)};
+    ${pd(isVertical ? [3.5, 4] : [2, 4])}
+    ${pointerEventsAuto};
+    ${userSelectNone};
     flex: 0 0 auto;
-    background-color: ${white};
     border: 0;
-    color: ${colors[color] || color || rest};
-    max-width: ${isVertical ? '100%' : '287px'};
-    min-width: 80px;
-    padding: ${isVertical ? spacing([3.5, 4]) : spacing([2.5, 4])};
-    pointer-events: auto;
     transition: all 0.2s ease-in-out, background-color 0.2s ease-in-out;
-    &.disabled {
-        ${pointerEventsNone};
-        ${bgTransparent};
-        ${cursorDefault};
-        color: ${systemDisabled};
-    }
-    :hover,
-    :focus:not(.selected):not(:disabled) {
-        background-color: ${white};
-        color: ${rest};
+    :hover:not(.selected):not(.disabled),
+    :focus {
+        ${bgColor('system.white')};
+        ${textColor('system.rest')};
         .Indicator {
-            background-color: ${rest};
+            ${bgColor('system.rest')};
             transform: scale(1);
         }
     }
-    &.selected {
-        background-color: ${white};
-        color: ${active};
-        .Indicator {
-            background-color: ${active};
-            transform: scale(1);
-        }
+`;
+const TabItemDisabledCSS = css`
+    ${pointerEventsNone};
+    ${bgTransparent};
+    ${cursorDefault};
+    ${textColor('system.disabled')};
+`;
+const TabItemSelectedCSS = css`
+    ${bgColor('system.white')};
+    ${textColor('system.active')};
+    .Indicator {
+        ${bgColor('system.active')};
+        transform: scale(1);
     }
 `;
 const IndicatorCSS = isVertical => css`
     ${positionAbsolute};
-    height: ${isVertical ? '100%' : '4px'};
-    width: ${isVertical ? '4px' : '100%'};
+    ${parseHeight(isVertical ? '100%' : 4)};
+    ${parseWidth(isVertical ? 4 : '100%')}
+    ${borderRadius(1)};
     bottom: 0;
     left: 0;
     transform: ${isVertical ? 'scaleY(0)' : 'scaleX(0)'};
     transition: transform 0.2s ease-in-out;
-    border-radius: 1px;
 `;
-const ButtonIconCSS = css`
+const IconCSS = css`
     ${flexRow};
     ${itemsCenter};
     ${justifyCenter};
     ${positionRelative};
     ${boxBorder};
-    max-height: 24px;
-    max-width: 24px;
-    margin-right: ${spacing([1])};
+    ${parseMaxWidthHeight(24)};
+    ${mgr([1])};
     &.end-icon {
-        margin-right: unset;
-        margin-left: ${spacing([1])};
+        ${mgr('unset')};
+        ${mgl([1])};
     }
 `;
 TabItem.defaultProps = {
   className: '',
+  color: 'system.rest',
   disabled: false,
   label: '',
   style: {}

package/icons/basic.js

@@ -1156,6 +1156,34 @@ export const Block = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Cake = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 6C13.11 6 14 5.1 14 4C14 3.62 13.9 3.27 13.71 2.97L12 0L10.29 2.97C10.1 3.27 10 3.62 10 4C10 5.1 10.9 6 12 6ZM16.6 15.99L15.53 14.92L14.45 15.99C13.15 17.29 10.87 17.3 9.56 15.99L8.49 14.92L7.4 15.99C6.75 16.64 5.88 17 4.96 17C4.23 17 3.56 16.77 3 16.39V21C3 21.55 3.45 22 4 22H20C20.55 22 21 21.55 21 21V16.39C20.44 16.77 19.77 17 19.04 17C18.12 17 17.25 16.64 16.6 15.99ZM13 9H18C19.66 9 21 10.34 20.99 12V13.54C20.99 14.62 20.11 15.5 19.03 15.5C18.51 15.5 18.02 15.3 17.65 14.93L15.52 12.8L13.38 14.93C12.64 15.67 11.35 15.67 10.61 14.93L8.48 12.8L6.34 14.93C5.98 15.3 5.48 15.5 4.96 15.5C3.88 15.5 3 14.62 3 13.54V12C3 10.34 4.34 9 6 9H11V7H13V9Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 22,
+    viewBox: "0 0 18 22",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9 6C10.11 6 11 5.1 11 4C11 3.62 10.9 3.27 10.71 2.97L9 0L7.29 2.97C7.1 3.27 7 3.62 7 4C7 5.1 7.9 6 9 6ZM13.6 15.99L12.53 14.92L11.45 15.99C10.15 17.29 7.87 17.3 6.56 15.99L5.49 14.92L4.4 15.99C3.75 16.64 2.88 17 1.96 17C1.23 17 0.56 16.77 0 16.39V21C0 21.55 0.45 22 1 22H17C17.55 22 18 21.55 18 21V16.39C17.44 16.77 16.77 17 16.04 17C15.12 17 14.25 16.64 13.6 15.99ZM10 9H15C16.66 9 18 10.34 17.99 12V13.54C17.99 14.62 17.11 15.5 16.03 15.5C15.51 15.5 15.02 15.3 14.65 14.93L12.52 12.8L10.38 14.93C9.64 15.67 8.35 15.67 7.61 14.93L5.48 12.8L3.34 14.93C2.98 15.3 2.48 15.5 1.96 15.5C0.88 15.5 0 14.62 0 13.54V12C0 10.34 1.34 9 3 9H8V7H10V9Z",
+    fill: colors[color] || color
+  }));
+});
 export const Calculate = /*#__PURE__*/memo(({
   width,
   height,
@@ -1412,6 +1440,34 @@ export const Chat = /*#__PURE__*/memo(({
     fill: '#FFF'
   }));
 });
+export const ChatAnswer = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17 3V12C17 12.55 16.55 13 16 13H6L2 17V3C2 2.45 2.45 2 3 2H16C16.55 2 17 2.45 17 3ZM19 6H21C21.55 6 22 6.45 22 7V22L18 18H7C6.45 18 6 17.55 6 17V15H19V6Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 20,
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15 1V10C15 10.55 14.55 11 14 11H4L0 15V1C0 0.45 0.45 0 1 0H14C14.55 0 15 0.45 15 1ZM17 4H19C19.55 4 20 4.45 20 5V20L16 16H5C4.45 16 4 15.55 4 15V13H17V4Z",
+    fill: colors[color] || color
+  }));
+});
 export const ChatBubble = /*#__PURE__*/memo(({
   width,
   height,
@@ -4295,6 +4351,34 @@ export const PaperZoom = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Pause = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 19H6V5H10V19ZM14 19V5H18V19H14Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 12,
+    height: height || 14,
+    viewBox: "0 0 12 14",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4 14H0V0H4V14ZM8 14V0H12V14H8Z",
+    fill: colors[color] || color
+  }));
+});
 export const Payment = /*#__PURE__*/memo(({
   width,
   height,
@@ -5083,6 +5167,30 @@ export const Printer = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Question = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11.07 12.85C11.84 11.46 13.32 10.64 14.18 9.41C15.09 8.12 14.58 5.71 12 5.71C10.31 5.71 9.48004 6.99 9.13004 8.05L6.54004 6.96C7.25004 4.83 9.18004 3 11.99 3C14.34 3 15.95 4.07 16.77 5.41C17.47 6.56 17.88 8.71 16.8 10.31C15.6 12.08 14.45 12.62 13.83 13.76C13.58 14.22 13.48 14.52 13.48 16H10.59C10.58 15.22 10.46 13.95 11.07 12.85ZM14 20C14 21.1 13.1 22 12 22C10.9 22 10 21.1 10 20C10 18.9 10.9 18 12 18C13.1 18 14 18.9 14 20Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 12,
+    height: height || 19,
+    viewBox: "0 0 12 19",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5.07004 9.85C5.84004 8.46 7.32004 7.64 8.18004 6.41C9.09004 5.12 8.58004 2.71 6.00004 2.71C4.31004 2.71 3.48004 3.99 3.13004 5.05L0.540039 3.96C1.25004 1.83 3.18004 0 5.99004 0C8.34004 0 9.95004 1.07 10.77 2.41C11.47 3.56 11.88 5.71 10.8 7.31C9.60004 9.08 8.45004 9.62 7.83004 10.76C7.58004 11.22 7.48004 11.52 7.48004 13H4.59004C4.58004 12.22 4.46004 10.95 5.07004 9.85ZM8.00004 17C8.00004 18.1 7.10004 19 6.00004 19C4.90004 19 4.00004 18.1 4.00004 17C4.00004 15.9 4.90004 15 6.00004 15C7.10004 15 8.00004 15.9 8.00004 17Z",
+    fill: colors[color] || color
+  }));
+});
 export const QuestionMark = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

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

package/readme.md

@@ -38,6 +38,15 @@ npm test
 ```
 
 ## Changelog
+## 1.3.90
+- \[Added\]: Breadcrumb – Add component Breadcrumb
+- \[Added\]: Icon – Question, Pause, Cake, ChatAnswer
+- \[Added\]: IconMenu – MHRP51N0003
+- \[Fixed\]: Popover – Fix bug css overflow hidden of document body
+- \[Fixed\]: TAB – Fix UI not match design, fix missing ripple effect
+- \[Fixed\]: Popover – Fix bug popover still open when ButtonIcon disabled
+- \[Fixed\]: Popover – Fix bug update wrong position if anchor not exists
+
 ## 1.3.89
 - \[Added\]: COLORS – Replace base colors with design system colors
 - \[Added\]: UTILS – Add storybook for utils

package/styles/colors.js

@@ -323,6 +323,7 @@ color.line = {
   tab: color.dark2
 };
 color.primary = color.system.active;
+color.secondary = color.system.rest;
 color.success = color.semantic.success;
 color.warning = color.semantic.warning;
 color.danger = color.semantic.danger;

package/styles/general.js

@@ -1,5 +1,4 @@
 import { css } from '@emotion/core';
-import { color } from "./colors";
 import { getColor, parseCSSValue, parseToPixel } from "./utils";
 export const rootSpacing = 4;
 export let rootZIndex = 1500;
@@ -49,7 +48,16 @@ const bgTransparent = css`
     background-color: transparent;
 `;
 const border = (withVl, colorVl) => css`
-    border: ${parseToPixel(withVl)} solid ${colorVl || color.dark};
+    border: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system.dark')};
+`;
+const borderBottom = (withVl, colorVl) => css`
+    border-bottom: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system.dark')};
+`;
+const borderBottomColor = cl => css`
+    border-bottom-color: ${getColor(cl)};
+`;
+const borderColor = cl => css`
+    border-color: ${getColor(cl)};
 `;
 const borderNone = css`
     border: none;
@@ -66,15 +74,15 @@ const borderRadius4px = css`
 const borderRadius50 = css`
     border-radius: 50%;
 `;
+const bottom = vl => css`
+    bottom: ${parseCSSValue(vl)};
+`;
 const boxBorder = css`
     box-sizing: border-box;
 `;
 const boxContent = css`
     box-sizing: content-box;
 `;
-const shadowNone = css`
-    box-shadow: none;
-`;
 const breakAll = css`
     word-break: break-all;
 `;
@@ -117,6 +125,9 @@ const displayFlex = css`
 const displayNone = css`
     display: none;
 `;
+const fill = cl => css`
+    fill: ${getColor(cl)};
+`;
 const flexCol = css`
     display: flex;
     flex-direction: column;
@@ -176,6 +187,9 @@ const insetY = vl => css`
     top: ${parseCSSValue(vl)};
     bottom: ${parseCSSValue(vl)};
 `;
+const invisible = css`
+    visibility: hidden;
+`;
 const italic = css`
     font-style: italic;
 `;
@@ -206,6 +220,9 @@ const justifyEvenly = css`
 const justifyStart = css`
     justify-content: flex-start;
 `;
+const left = vl => css`
+    left: ${parseCSSValue(vl)};
+`;
 const mg = vl => css`
     margin: ${getSpacing(vl)};
 `;
@@ -265,29 +282,6 @@ const overflowAuto = css`
 const overflowHidden = css`
     overflow: hidden;
 `;
-const pd = vl => css`
-    padding: ${getSpacing(vl)};
-`;
-const pdb = vl => css`
-    padding-bottom: ${getSpacing(vl)};
-`;
-const pdl = vl => css`
-    padding-left: ${getSpacing(vl)};
-`;
-const pdr = vl => css`
-    padding-right: ${getSpacing(vl)};
-`;
-const pdt = vl => css`
-    padding-top: ${getSpacing(vl)};
-`;
-const pdx = vl => css`
-    padding-left: ${getSpacing(vl)};
-    padding-right: ${getSpacing(vl)};
-`;
-const pdy = vl => css`
-    padding-top: ${getSpacing(vl)};
-    padding-bottom: ${getSpacing(vl)};
-`;
 const parseHeight = height => css`
     height: ${parseCSSValue(height)};
 `;
@@ -318,6 +312,29 @@ const parseWidthHeight = (width, height = width) => css`
     width: ${parseCSSValue(width)};
     height: ${parseCSSValue(height)};
 `;
+const pd = vl => css`
+    padding: ${getSpacing(vl)};
+`;
+const pdb = vl => css`
+    padding-bottom: ${getSpacing(vl)};
+`;
+const pdl = vl => css`
+    padding-left: ${getSpacing(vl)};
+`;
+const pdr = vl => css`
+    padding-right: ${getSpacing(vl)};
+`;
+const pdt = vl => css`
+    padding-top: ${getSpacing(vl)};
+`;
+const pdx = vl => css`
+    padding-left: ${getSpacing(vl)};
+    padding-right: ${getSpacing(vl)};
+`;
+const pdy = vl => css`
+    padding-top: ${getSpacing(vl)};
+    padding-bottom: ${getSpacing(vl)};
+`;
 const pointerEventsAuto = css`
     pointer-events: auto;
 `;
@@ -342,6 +359,18 @@ const positionRelative = css`
 const positionSticky = css`
     position: sticky;
 `;
+const right = vl => css`
+    right: ${parseCSSValue(vl)};
+`;
+const scale = vl => css`
+    transform: scale(${vl});
+`;
+const scaleX = vl => css`
+    transform: scaleX(${vl});
+`;
+const scaleY = vl => css`
+    transform: scaleY(${vl});
+`;
 const selfCenter = css`
     align-self: center;
 `;
@@ -351,6 +380,9 @@ const selfEnd = css`
 const selfStart = css`
     align-self: flex-start;
 `;
+const shadowNone = css`
+    box-shadow: none;
+`;
 const textCapitalize = css`
     text-transform: capitalize;
 `;
@@ -384,6 +416,9 @@ const textunderline = css`
 const textUppercase = css`
     text-transform: uppercase;
 `;
+const top = vl => css`
+    top: ${parseCSSValue(vl)};
+`;
 const truncate = css`
     overflow: hidden;
     text-overflow: ellipsis;
@@ -392,6 +427,9 @@ const truncate = css`
 const userSelectNone = css`
     user-select: none;
 `;
+const visible = css`
+    visibility: visible;
+`;
 const whiteSpaceBreakSpaces = css`
     white-space: break-spaces;
 `;
@@ -404,4 +442,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { bgColor, bgCurrent, bgTransparent, border, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, flexCol, flexColReverse, shadowNone, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, pd, pdb, pdl, pdr, pdt, pdx, pdy, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, selfCenter, selfEnd, selfStart, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textunderline, textUppercase, truncate, userSelectNone, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textunderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };

package/styles/utils.js

@@ -28,6 +28,7 @@ export const parseToPixel = vl => {
  * @returns {string}
  */
 export const getColor = cl => {
+  if (typeof cl !== 'string') return;
   // example param cl: primary, info, system.rest, text.main, red, #333333,...
   return cl.split('.').reduce((p, c) => p && p[c] || null, colors) || cl;
 };