diginet-core-ui 1.4.21 → 1.4.23-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/assets/images/menu/dhr/MHRP39N0020.svg +9 -0
  2. package/assets/images/menu/dhr/MHRP39N0021.svg +7 -0
  3. package/assets/images/menu/eo/WEO76LIS0005.svg +6 -0
  4. package/assets/images/menu/eo/WEO76LIS0006.svg +14 -0
  5. package/assets/images/menu/eo/WEO76LIS0007.svg +19 -0
  6. package/assets/images/menu/eo/WEO76REQ0003.svg +15 -0
  7. package/components/accordion/details.js +12 -14
  8. package/components/accordion/group.js +12 -14
  9. package/components/accordion/index.js +36 -38
  10. package/components/accordion/summary.js +50 -51
  11. package/components/chip/index.js +61 -69
  12. package/components/form-control/calendar/function.js +1 -1
  13. package/components/form-control/date-input/DateField.js +189 -0
  14. package/components/form-control/date-input/index.js +301 -0
  15. package/components/form-control/date-input/useControlled.js +14 -0
  16. package/components/form-control/date-input/useDateInputState.js +132 -0
  17. package/components/form-control/date-input/useIsFocused.js +20 -0
  18. package/components/form-control/date-input/useKeyboardInputEvent.js +41 -0
  19. package/components/form-control/date-input/utils.js +286 -0
  20. package/components/form-control/date-picker/index.js +143 -422
  21. package/components/form-control/dropdown/index.js +259 -602
  22. package/components/form-control/input-base/UncontrolledInputBase.js +451 -0
  23. package/components/form-control/number-input/index2.js +4 -1
  24. package/components/form-control/time-picker/v2/index.js +792 -0
  25. package/components/image/index.js +22 -24
  26. package/components/index.js +2 -1
  27. package/components/modal/body.js +9 -11
  28. package/components/modal/footer.js +8 -10
  29. package/components/modal/header.js +27 -25
  30. package/components/modal/modal.js +33 -32
  31. package/components/tab/tab-container.js +57 -49
  32. package/components/tab/tab-header.js +72 -65
  33. package/components/tab/tab-panel.js +38 -32
  34. package/components/tab/tab.js +69 -61
  35. package/global/index.js +4 -0
  36. package/icons/effect.js +63 -58
  37. package/package.json +65 -33
  38. package/readme.md +17 -4
  39. package/theme/settings.js +78 -0
@@ -0,0 +1,9 @@
1
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M24.1 26.4C24.1 25.8 23.6 25.3 22.9 25.3H9.1C8.5 25.3 7.9 25.8 7.9 26.4C7.9 27 8.4 27.5 9.1 27.5H23C23.6 27.6 24.1 27 24.1 26.4Z" fill="#2680EB"/>
3
+ <path d="M23 20.7H9.1C8.5 20.7 7.9 21.2 7.9 21.8C7.9 22.4 8.4 23 9.1 23H23C23.6 23 24.2 22.5 24.2 21.9C24.2 21.3 23.6 20.7 23 20.7Z" fill="#2680EB"/>
4
+ <path d="M9.1 29.8C8.5 29.8 7.9 30.3 7.9 30.9C7.9 31.5 8.4 32 9.1 32H18.3C18.9 32 19.5 31.5 19.5 30.9C19.5 30.3 19 29.8 18.3 29.8H9.1Z" fill="#2680EB"/>
5
+ <path d="M29.7 34.6V35.6C29.7 36.2 29.2 36.7 28.5 36.7H5.5C4.9 36.7 4.3 36.2 4.3 35.6V3.4C4.3 2.8 4.8 2.3 5.5 2.3H20.5V8C20.5 9.9 22.1 11.4 24 11.4H32V10.3C32 10 31.9 9.7 31.7 9.5L22.5 0.4C22.3 0.1 22 0 21.7 0H5.5C3.6 0 2 1.5 2 3.4V35.5C2 37.5 3.6 39 5.5 39H28.6C30.5 39 32.1 37.5 32.1 35.6V34.6H29.7ZM22.8 3.9L28.1 9.1H24C23.4 9.1 22.8 8.6 22.8 8V3.9Z" fill="#2680EB"/>
6
+ <path d="M36.0001 17.9C35.8001 17.9 35.8001 17.9 35.7001 17.9L35.2001 18.4C35.2001 18.4 35.1001 18.5 35.1001 18.6V20.4C35.1001 20.7 35.0001 21 34.8001 21.2C34.6001 21.4 34.3001 21.5 34.0001 21.5H28.1001C27.8001 21.5 27.5001 21.4 27.3001 21.2C27.1001 21 27.0001 20.7 27.0001 20.4V14.5C27.0001 14.2 27.1001 13.9 27.3001 13.7C27.5001 13.5 27.8001 13.4 28.1001 13.4H34.0001C34.1001 13.4 34.2001 13.4 34.3001 13.4H34.4001C34.5001 13.4 34.5001 13.4 34.6001 13.3L35.0001 13C35.1001 12.9 35.1001 12.9 35.1001 12.8C35.1001 12.7 35.0001 12.7 35.0001 12.6C34.7001 12.5 34.5001 12.4 34.2001 12.4H28.3001C27.7001 12.4 27.2001 12.6 26.8001 13C26.4001 13.4 26.2001 13.9 26.2001 14.4V20.3C26.2001 20.9 26.4001 21.3 26.8001 21.7C27.2001 22.1 27.7001 22.3 28.3001 22.3H34.2001C34.8001 22.3 35.3001 22.1 35.7001 21.7C36.1001 21.3 36.3001 20.8 36.3001 20.3V18C36.1001 18 36.1001 17.9 36.0001 17.9ZM37.8001 13.8L37.0001 13C36.9001 12.9 36.7001 12.8 36.6001 12.8C36.4001 12.8 36.3001 12.9 36.2001 13L31.6001 17.6L29.7001 15.7C29.6001 15.6 29.4001 15.5 29.3001 15.5C29.1001 15.5 29.0001 15.6 28.9001 15.7L28.1001 16.5C28.0001 16.6 27.9001 16.8 27.9001 16.9C27.9001 17.1 28.0001 17.2 28.1001 17.3L31.2001 20.3C31.3001 20.4 31.5001 20.5 31.6001 20.5C31.8001 20.5 31.9001 20.4 32.0001 20.3L37.8001 14.5C37.9001 14.4 38.0001 14.2 38.0001 14.1C37.9001 14.1 37.9001 13.9 37.8001 13.8Z" fill="#F58B1F"/>
7
+ <path d="M36.0001 29.1C35.8001 29.1 35.8001 29.1 35.7001 29.2L35.2001 29.6C35.2001 29.6 35.1001 29.7 35.1001 29.8V31.6C35.1001 31.9 35.0001 32.2 34.8001 32.4C34.6001 32.6 34.3001 32.7 34.0001 32.7H28.0001C27.7001 32.7 27.4001 32.6 27.2001 32.4C27.0001 32.2 26.9001 31.9 26.9001 31.6V25.7C26.9001 25.4 27.0001 25.1 27.2001 24.9C27.4001 24.7 27.7001 24.6 28.0001 24.6H33.9001C34.0001 24.6 34.1001 24.6 34.2001 24.6H34.3001C34.4001 24.6 34.4001 24.6 34.5001 24.5L34.9001 24.1C35.0001 24 35.0001 24 35.0001 23.9C35.0001 23.8 34.9001 23.8 34.9001 23.7C34.6001 23.6 34.4001 23.5 34.1001 23.5H28.2001C27.6001 23.5 27.1001 23.7 26.7001 24.1C26.3001 24.5 26.1001 25 26.1001 25.5V31.4C26.1001 32 26.3001 32.4 26.7001 32.8C27.1001 33.2 27.6001 33.4 28.2001 33.4H34.1001C34.7001 33.4 35.2001 33.2 35.6001 32.8C36.0001 32.4 36.2001 31.9 36.2001 31.4V29.1C36.2001 29.2 36.1001 29.1 36.0001 29.1ZM37.8001 25L37.0001 24.2C36.9001 24.1 36.7001 24 36.6001 24C36.4001 24 36.3001 24.1 36.2001 24.2L31.6001 28.8L29.7001 26.9C29.6001 26.8 29.4001 26.7 29.3001 26.7C29.1001 26.7 29.0001 26.8 28.9001 26.9L28.1001 27.7C28.0001 27.8 28.0001 28 28.0001 28.1C28.0001 28.2 28.1001 28.4 28.2001 28.5L31.3001 31.5C31.4001 31.6 31.6001 31.7 31.7001 31.7C31.9001 31.7 32.0001 31.6 32.1001 31.5L37.9001 25.7C38.0001 25.6 38.1001 25.4 38.1001 25.3C38.1001 25.2 37.9001 25.1 37.8001 25Z" fill="#F58B1F"/>
8
+ <path d="M19 17H18.2V6.8C18.2 6.2 17.7 5.7 17.1 5.7H15C14.9 5.3 14.5 5 14.1 5H8.9C8.5 5 8.1 5.4 8.1 5.8V17H7C6.7 17 6.5 17.2 6.5 17.5C6.5 17.8 6.7 18 7 18H14.1C14.6 18 14.9 17.6 14.9 17.2V6.6H17C17.1 6.6 17.2 6.7 17.2 6.7V17.4C17.2 17.7 17.4 17.9 17.7 17.9H19C19.3 17.9 19.5 17.7 19.5 17.4C19.5 17.2 19.3 17 19 17ZM13 12C12.5 12 12 11.5 12 11C12 10.5 12.5 10 13 10C13.5 10 14 10.5 14 11C14 11.5 13.5 12 13 12Z" fill="#2680EB"/>
9
+ </svg>
@@ -0,0 +1,7 @@
1
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M31.4 9.5L22.3 0.3C22 0.1 21.7 0 21.4 0H5.4C3.5 0 2 1.5 2 3.4V35.5C2 37.5 3.5 39 5.4 39H24.4C23.2 38.4 22.1 37.7 21.1 36.7H5.4C4.8 36.7 4.3 36.2 4.3 35.6V3.4C4.3 2.8 4.8 2.3 5.4 2.3H20.3V8C20.3 9.9 21.8 11.4 23.7 11.4H29.4V18C30.2 18 30.9 18.1 31.7 18.3V10.2C31.7 10 31.6 9.7 31.4 9.5ZM23.7 9.1C23.1 9.1 22.6 8.6 22.6 8V3.9L27.8 9.1H23.7Z" fill="#2680EB"/>
3
+ <path d="M19 17H18.2V6.8C18.2 6.2 17.7 5.7 17.1 5.7H15C14.9 5.3 14.5 5 14.1 5H8.9C8.5 5 8.1 5.4 8.1 5.8V17H7C6.7 17 6.5 17.2 6.5 17.5C6.5 17.8 6.7 18 7 18H14.1C14.6 18 14.9 17.6 14.9 17.2V6.6H17C17.1 6.6 17.2 6.7 17.2 6.7V17.4C17.2 17.7 17.4 17.9 17.7 17.9H19C19.3 17.9 19.5 17.7 19.5 17.4C19.5 17.2 19.3 17 19 17ZM13 12C12.5 12 12 11.5 12 11C12 10.5 12.5 10 13 10C13.5 10 14 10.5 14 11C14 11.5 13.5 12 13 12Z" fill="#2680EB"/>
4
+ <path d="M14 23.9C13.9 23.9 13.8 23.9 13.8 23.9L13.5 24.2V25.6C13.5 25.8 13.4 26 13.3 26.2C13.1 26.4 12.9 26.4 12.7 26.4H8.4C8.2 26.4 8 26.3 7.8 26.2C7.6 26 7.6 25.9 7.6 25.6V21.4C7.6 21.2 7.7 21 7.8 20.8C8 20.6 8.2 20.6 8.4 20.6H12.6C12.7 20.6 12.8 20.6 12.8 20.6H12.9L13.2 20.4C13.2 20.4 13.3 20.3 13.2 20.3C13.2 20.2 13.2 20.2 13.1 20.2C13.1 20 12.9 20 12.6 20H8.4C8 20 7.7 20.1 7.4 20.4C7.1 20.7 7 21 7 21.4V25.6C7 26 7.1 26.3 7.4 26.6C7.7 26.9 8 27 8.4 27H12.6C13 27 13.3 26.9 13.6 26.6C13.9 26.3 14 26 14 25.6V24C14.1 24 14.1 23.9 14 23.9ZM15.3 21L14.7 20.4C14.6 20.3 14.5 20.3 14.4 20.3C14.3 20.3 14.2 20.3 14.1 20.4L10.8 23.6L9.5 22.3C9.4 22.2 9.3 22.2 9.2 22.2C9.1 22.2 9 22.2 8.9 22.3L8.3 22.9C8.2 23 8.2 23.1 8.2 23.2C8.2 23.3 8.2 23.4 8.3 23.5L10.5 25.7C10.6 25.8 10.7 25.8 10.8 25.8C10.9 25.8 11 25.8 11.1 25.7L15.2 21.6C15.3 21.5 15.3 21.4 15.3 21.3C15.3 21.2 15.4 21.1 15.3 21Z" fill="#F58B1F"/>
5
+ <path d="M14 31.8C13.9 31.8 13.8 31.8 13.8 31.8L13.5 32.1V33.5C13.5 33.7 13.4 33.9 13.3 34.1C13.1 34.3 12.9 34.3 12.7 34.3H8.5C8.3 34.3 8.1 34.2 7.9 34.1C7.7 33.9 7.7 33.8 7.7 33.5V29.3C7.7 29.1 7.8 28.9 7.9 28.7C8.1 28.5 8.3 28.5 8.5 28.5H12.7C12.8 28.5 12.9 28.5 12.9 28.5H13L13.3 28.3C13.3 28.3 13.4 28.2 13.3 28.2C13.3 28.1 13.3 28.1 13.2 28.1C13 28 12.8 28 12.6 28H8.5C8.1 28 7.8 28.1 7.5 28.4C7.2 28.7 7 29 7 29.4V33.6C7 34 7.1 34.3 7.4 34.6C7.7 34.9 8 35 8.4 35H12.6C13 35 13.3 34.9 13.6 34.6C13.9 34.3 14 34 14 33.6V32C14.1 31.9 14.1 31.8 14 31.8ZM15.3 28.9L14.7 28.3C14.6 28.2 14.5 28.2 14.4 28.2C14.3 28.2 14.2 28.2 14.1 28.3L10.8 31.5L9.5 30.2C9.4 30.1 9.3 30.1 9.2 30.1C9.1 30.1 9 30.1 8.9 30.2L8.3 30.8C8.2 30.9 8.2 31 8.2 31.1C8.2 31.2 8.2 31.3 8.3 31.4L10.5 33.6C10.6 33.7 10.7 33.7 10.8 33.7C10.9 33.7 11 33.7 11.1 33.6L15.2 29.5C15.3 29.4 15.3 29.3 15.3 29.2C15.4 29.1 15.4 29 15.3 28.9Z" fill="#F58B1F"/>
6
+ <path d="M34.4 20.6C32.8 19.6 31 19 29 19C28.5 19 28.1 19 27.7 19.1C26.9 19.2 26 19.4 25.3 19.7C24.9 19.9 24.4 20.1 24 20.3C22 21.4 20.5 23.2 19.7 25.3C19.2 26.5 19 27.7 19 29C19 34.5 23.5 39 29 39C34.5 39 39 34.5 39 29C39 25.5 37.1 22.3 34.4 20.6ZM35.2 25.8L29.3 33.8C29 34.3 28.4 34.6 27.8 34.6H27.7C27.2 34.6 26.6 34.4 26.3 34L22.8 30.2C22.3 29.6 22.3 28.7 22.9 28.1C23.2 27.8 23.5 27.7 23.9 27.7C24.3 27.7 24.7 27.9 25 28.2L27.5 30.9L27.6 31C27.7 31 27.7 31 27.7 30.9L32.7 24.1C33 23.7 33.4 23.5 33.9 23.5C34.2 23.5 34.5 23.6 34.8 23.8C35.6 24.2 35.7 25.1 35.2 25.8Z" fill="#1CA261"/>
7
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M34 2H33.5C32.8 0.8 31.5 0 30 0H8C5.8 0 4 1.8 4 4V7H5.5C5.7 7 5.8 7 6 7.1C7.1 7.3 8 8.3 8 9.5C8 10.7 7.1 11.7 6 11.9C5.8 12 5.7 12 5.5 12H4V17H5.5C5.7 17 5.8 17 6 17.1C7.1 17.3 8 18.3 8 19.5C8 20.7 7.1 21.7 6 21.9C5.8 22 5.7 22 5.5 22H4V27H5.5C5.7 27 5.8 27 6 27.1C7.1 27.3 8 28.3 8 29.5C8 30.7 7.1 31.7 6 31.9C5.8 32 5.7 32 5.5 32H4V35C4 37.2 5.8 39 8 39H30C31.5 39 32.8 38.2 33.5 37H34C36.2 37 38 35.2 38 33V6C38 3.8 36.2 2 34 2ZM30.6 27.1C29.1 28.8 27.3 30.1 25.1 29.9C23.1 29.9 21.6 29.4 20.2 28.5C16.5 26.1 13.7 22.9 11.9 18.9C11 17 10.7 15 11.3 12.8C11.8 10.9 13.2 9.7 14.7 8.6C15.2 8.2 15.9 8.3 16.3 8.8C17.2 10.1 18.1 11.4 18.8 12.8C19.2 13.6 18.8 14.4 18.2 15C17.9 15.3 17.5 15.6 17.2 15.9C16.2 16.7 15.9 17.3 16.4 18.4C17.5 20.7 19.1 22.6 21.2 24C22.3 24.7 22.9 24.5 23.8 23.6C24.1 23.3 24.5 23 24.8 22.7C25.5 22.1 26.4 21.9 27.1 22.4C28.4 23.3 29.5 24.3 30.6 25.4C31.1 25.8 31.1 26.6 30.6 27.1ZM36 33C36 34.1 35.1 35 34 35V4C35.1 4 36 4.9 36 6V33Z" fill="#2680EB"/>
3
+ <path d="M5.5 11H2.5C1.7 11 1 10.3 1 9.5C1 8.7 1.7 8 2.5 8H5.5C6.3 8 7 8.7 7 9.5C7 10.3 6.3 11 5.5 11Z" fill="#2680EB"/>
4
+ <path d="M5.5 21H2.5C1.7 21 1 20.3 1 19.5C1 18.7 1.7 18 2.5 18H5.5C6.3 18 7 18.7 7 19.5C7 20.3 6.3 21 5.5 21Z" fill="#2680EB"/>
5
+ <path d="M5.5 31H2.5C1.7 31 1 30.3 1 29.5C1 28.7 1.7 28 2.5 28H5.5C6.3 28 7 28.7 7 29.5C7 30.3 6.3 31 5.5 31Z" fill="#2680EB"/>
6
+ </svg>
@@ -0,0 +1,14 @@
1
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_1652_10)">
3
+ <path d="M19.6504 0.398977C19.6504 0.299233 19.6504 0.299233 19.6504 0.299233C19.6504 0.0997443 19.5501 0 19.3496 0C19.2493 0 19.2493 0 19.1491 0.0997443L19.0488 0.199489C19.0488 0.199489 19.0488 0.299233 18.9486 0.299233C18.347 0.997443 18.0462 1.69565 17.8457 2.59335C17.6452 3.69054 17.946 4.88747 18.7481 5.98466C19.3496 6.9821 19.8509 8.57801 19.4498 9.57545C19.4498 9.67519 19.4498 9.77494 19.5501 9.87468C19.6504 9.87468 19.6504 9.97443 19.7506 9.97443H19.9511C20.0514 9.97443 20.0514 9.87468 20.1516 9.87468L20.0514 9.77494C20.1516 9.67519 20.2519 9.57545 20.3522 9.37596C21.5552 7.97954 21.3547 5.88491 19.8509 3.98977C19.1491 2.99233 19.4498 1.69565 19.6504 0.398977Z" fill="#2680EB"/>
4
+ <path d="M12.1311 0.398977C12.1311 0.299233 12.1311 0.299233 12.1311 0.299233C12.1311 0.0997443 12.0308 0 11.8303 0C11.7301 0 11.7301 0 11.6298 0.0997443L11.5295 0.199489C11.4293 0.299233 11.329 0.299233 11.329 0.398977C10.7275 0.997443 10.4267 1.7954 10.2262 2.59335C10.0257 3.69054 10.3265 4.88747 11.1285 5.98466C11.7301 6.9821 12.2313 8.57801 11.8303 9.57545C11.8303 9.67519 11.8303 9.77494 11.9306 9.87468C12.0308 9.87468 12.0308 9.97443 12.1311 9.97443H12.3316C12.4319 9.97443 12.4319 9.87468 12.5321 9.87468L12.6324 9.77494C12.7326 9.67519 12.8329 9.57545 12.9331 9.37596C14.036 7.97954 13.8355 5.88491 12.3316 3.98977C11.6298 2.99233 11.8303 1.69565 12.1311 0.398977Z" fill="#2680EB"/>
5
+ <path d="M26.5681 3.98977C25.766 2.99233 26.0668 1.69565 26.3676 0.398977V0.299233C26.3676 0.0997443 26.2673 0 26.0668 0C25.9666 0 25.9666 0 25.8663 0.0997443L25.766 0.199489C25.6658 0.299233 25.5655 0.299233 25.5655 0.398977C25.0642 0.997443 24.6632 1.69565 24.4627 2.59335C24.2622 3.69054 24.563 4.88747 25.365 5.98466C25.9666 6.9821 26.4678 8.57801 26.0668 9.57545C26.0668 9.67519 26.0668 9.77494 26.1671 9.87468C26.0668 9.97442 26.1671 9.97443 26.2673 9.97443H26.4678C26.5681 9.97443 26.5681 9.87468 26.6684 9.87468L26.7686 9.77494C26.8689 9.67519 26.9691 9.57545 27.0694 9.37596C28.1722 7.97954 28.072 5.88491 26.5681 3.98977Z" fill="#2680EB"/>
6
+ <path d="M37.7969 22.9412H1.30335C0.501292 22.9412 -0.10025 23.6394 6.59097e-06 24.3376C0.701806 29.9233 5.41389 34.711 11.9306 36.8056V38.0026C11.9306 38.601 12.3316 39 12.9332 39H25.9666C26.5681 39 26.9692 38.601 26.9692 38.0026V36.8056C33.4859 34.711 38.2982 30.023 38.8997 24.3376C39.1003 23.6394 38.4987 22.9412 37.7969 22.9412Z" fill="#2680EB"/>
7
+ <path d="M2.90743 21.2455H36.0925C36.3933 21.2455 36.5938 21.1458 36.7943 20.9463C36.9948 20.7468 37.0951 20.4476 37.0951 20.2481C37.0951 18.5524 36.293 17.4552 35.6915 16.8568C34.9897 16.0588 34.0874 15.3606 32.8843 14.8619C30.9794 14.0639 28.874 13.7647 26.7686 14.0639C26.1671 13.3657 25.365 12.7673 24.563 12.2685C21.7558 10.8721 18.7481 10.5729 15.6401 11.5703C14.036 12.0691 12.8329 12.867 11.8303 13.9642C9.82517 13.7647 7.92029 14.0639 6.0154 14.8619C5.11309 15.2609 3.70949 16.0588 2.70692 17.555C2.20563 18.3529 1.90486 19.2506 1.90486 20.1483C1.90486 20.4476 2.00512 20.6471 2.20563 20.8465C2.40615 21.1458 2.70692 21.2455 2.90743 21.2455ZM4.41129 18.6522C5.01283 17.7545 5.71463 17.2558 6.81746 16.6573C8.32132 15.9591 9.92543 15.7596 11.6298 15.9591C12.3316 16.0588 12.8329 15.7596 13.3342 15.2609C14.036 14.3632 14.9383 13.8645 16.2416 13.4655C18.8483 12.6675 21.2545 12.867 23.6606 14.0639C24.3624 14.3632 24.8637 14.8619 25.4653 15.5601C25.766 15.9591 26.3676 16.1586 26.8689 16.0588C28.7738 15.7596 30.5784 15.9591 32.1825 16.6573C33.0848 17.0563 33.7866 17.4552 34.2879 18.1535C34.5887 18.5524 34.8894 18.8517 34.9897 19.2506H4.11052C4.21078 19.0512 4.31103 18.8517 4.41129 18.6522Z" fill="#2680EB"/>
8
+ </g>
9
+ <defs>
10
+ <clipPath id="clip0_1652_10">
11
+ <rect width="39" height="39" fill="white"/>
12
+ </clipPath>
13
+ </defs>
14
+ </svg>
@@ -0,0 +1,19 @@
1
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_1652_29)">
3
+ <path d="M37.1 11.5C36.6 12.9 35.8 13.9 34.7 14.8C34.2 14.5 33.7 14.2 33.2 14C31.7 13.3 30 13 28.3 13C27.9 13 27.5 13 27.1 13.1C26.5 12.4 25.7 11.9 25 11.5C24.8 11.4 24.6 11.3 24.4 11.2C24.4 11.1 24.3 11 24.3 10.9C23.5 7.69999 25.4 4.29999 28.6 3.19999C29 3.09999 29.3 2.99999 29.5 3.39999C29.8 3.69999 29.6 3.99999 29.4 4.29999C27.7 7.19999 29.2 10.6 32.4 11.4C33.6 11.7 34.7 11.5 35.8 10.9C35.9 10.8 36 10.8 36.1 10.7C36.4 10.5 36.7 10.5 36.9 10.7C37.2 10.9 37.2 11.1 37.1 11.5Z" fill="#8A43BF"/>
4
+ <path d="M16.1 9C16.1 9.5 16 10 15.9 10.5C15.7 10.5 15.5 10.6 15.4 10.6C13.8 11.1 12.5 11.9 11.5 12.9C11.2 12.9 11 12.9 10.7 12.9C9.9 12.9 9.2 13 8.4 13.1C6.9 12.3 6 10.7 6 9C6 6.2 8.2 4 11 4C13.8 4 16.1 6.2 16.1 9Z" fill="#FFAA00"/>
5
+ <path d="M11 3C11.6 3 12 2.6 12 2V1C12 0.4 11.6 0 11 0C10.4 0 10 0.4 10 1V2C10 2.6 10.5 3 11 3Z" fill="#FFAA00"/>
6
+ <path d="M5 9C5 8.4 4.6 8 4 8H3C2.5 8 2 8.4 2 9C2 9.6 2.4 10 3 10H4C4.6 10 5 9.6 5 9Z" fill="#FFAA00"/>
7
+ <path d="M19.1 8H18.1C17.5 8 17.1 8.4 17.1 9C17.1 9.6 17.5 10 18.1 10H19.1C19.7 10 20.1 9.6 20.1 9C20.1 8.4 19.6 8 19.1 8Z" fill="#FFAA00"/>
8
+ <path d="M5.4 4.7C5.6 4.9 5.9 5 6.1 5C6.4 5 6.6 4.9 6.8 4.7C7.2 4.3 7.2 3.7 6.8 3.3L5.8 2.2C5.4 1.8 4.8 1.8 4.4 2.2C4 2.6 4 3.2 4.4 3.6L5.4 4.7Z" fill="#FFAA00"/>
9
+ <path d="M17.7 2.2C17.3 1.8 16.7 1.8 16.3 2.2L15.2 3.3C14.8 3.7 14.8 4.3 15.2 4.7C15.4 4.9 15.7 5 15.9 5C16.1 5 16.4 4.9 16.6 4.7L17.7 3.6C18.1 3.3 18.1 2.6 17.7 2.2Z" fill="#FFAA00"/>
10
+ <path d="M7.1 13.5C6.6 13.7 6.1 13.8 5.6 14.1C5.1 14.3 4.6 14.6 4 15C4 14.8 4.1 14.6 4.3 14.4L5.4 13.3C5.8 12.9 6.4 12.9 6.8 13.3C6.9 13.3 7 13.3 7.1 13.5Z" fill="#FFAA00"/>
11
+ <path d="M37.7 23H1.29998C0.499978 23 -0.100021 23.7 -2.1439e-05 24.4C0.699979 30 5.39998 34.7 12 36.8V38C12 38.6 12.4 39 13 39H26C26.6 39 27 38.6 27 38V36.8C33.5 34.7 38.3 30 39 24.4C39.1 23.7 38.5 23 37.7 23Z" fill="#2680EB"/>
12
+ <path d="M2.89998 21.3H36C36.3 21.3 36.5 21.2 36.7 21C36.9 20.8 37 20.5 37 20.3C37 18.6 36.2 17.5 35.6 16.9C34.9 16.1 34 15.4 32.8 14.9C30.9 14.1 28.8 13.8 26.7 14.1C26.1 13.4 25.3 12.8 24.5 12.3C21.7 10.9 18.7 10.6 15.6 11.6C14 12.1 12.8 12.9 11.8 14C9.79998 13.8 7.89998 14.1 5.99998 14.9C5.09998 15.3 3.69998 16 2.69998 17.6C2.19998 18.4 1.89998 19.3 1.89998 20.2C1.89998 20.5 1.99998 20.7 2.19998 20.9C2.39998 21.1 2.69998 21.3 2.89998 21.3ZM4.39998 18.7C4.99998 17.8 5.69998 17.3 6.79998 16.7C8.29998 16 9.89998 15.8 11.6 16C12.3 16.1 12.8 15.8 13.3 15.3C14 14.4 14.9 13.9 16.2 13.5C18.8 12.7 21.2 12.9 23.6 14.1C24.3 14.4 24.8 14.9 25.4 15.6C25.7 16 26.3 16.2 26.8 16.1C28.7 15.8 30.5 16 32.2 16.7C33.1 17.1 33.8 17.5 34.3 18.2C34.6 18.6 34.9 18.9 35 19.3H4.09998C4.19998 19.1 4.29998 18.9 4.39998 18.7Z" fill="#2680EB"/>
13
+ </g>
14
+ <defs>
15
+ <clipPath id="clip0_1652_29">
16
+ <rect width="39" height="39" fill="white"/>
17
+ </clipPath>
18
+ </defs>
19
+ </svg>
@@ -0,0 +1,15 @@
1
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_1652_43)">
3
+ <path d="M38.7 23.4L34.6 19.3C34.4 19.1 34.2 19 33.9 19C33.8 19 33.7 19 33.6 19C33.5 19 33.3 19.1 33.2 19.2L29.5 23L20.1 32.4C20 32.5 19.9 32.7 19.8 32.9L19.6 34.3L19.4 35.6L19.1 37.5L19 37.9C18.9 38.2 19 38.5 19.3 38.7C19.4 38.8 19.6 38.9 19.8 39C19.9 39 19.9 39 20 39C20 39 20.1 39 20.2 39L25.2 38.2C25.4 38.2 25.6 38.1 25.7 37.9L38.8 24.8C39 24.6 39.1 24.4 39.1 24.1C39 23.8 38.9 23.6 38.7 23.4ZM33.9 22L36 24.1L34.3 25.8L32.2 23.7L33.9 22ZM24.2 35.9L22.3 36.2L21.7 36.3L22.1 33.8L30.2 25.7L32.3 27.8L24.2 35.9Z" fill="#FF8C00"/>
4
+ <path d="M30.1 9.5L21 0.3C20.7 0.1 20.5 0 20.1 0H3.4C1.5 0 0 1.5 0 3.4V35.5C0 37.5 1.5 39 3.4 39H18.2C18 38.6 18 38.2 18 37.7V37.4L18.1 36.7H3.4C2.8 36.7 2.3 36.2 2.3 35.6V3.4C2.3 2.8 2.8 2.3 3.4 2.3H19V8C19 9.9 20.5 11.4 22.4 11.4H28.1V22.9L28.8 22.2L30.3 20.6V10.3C30.4 10 30.3 9.7 30.1 9.5ZM22.4 9.1C21.8 9.1 21.3 8.6 21.3 8V3.9L26.5 9.1H22.4Z" fill="#2680EB"/>
5
+ <path d="M26 25.1L19.4 31.7C19.1 32 18.9 32.4 18.8 32.8L18.6 34H11.5C11.2 34 10.9 33.7 10.9 33.4V32.7C7.29999 31.4 4.59999 28.6 4.19999 25.2C4.09999 24.8 4.49999 24.4 4.89999 24.4H25.2C25.7 24.3 26 24.7 26 25.1Z" fill="#2680EB"/>
6
+ <path d="M24.1 20.5C23.7 20 23.2 19.6 22.5 19.3C21.5 18.8 20.3 18.6 19.2 18.8C18.8 18.4 18.4 18 18 17.8C16.4 16.9 14.8 16.8 13 17.4C12.1 17.7 11.4 18.2 10.9 18.8C9.79999 18.7 8.69999 18.9 7.69999 19.4C7.19999 19.6 6.39999 20 5.89999 21C5.59999 21.5 5.39999 22.1 5.39999 22.6C5.39999 22.8 5.49999 23 5.59999 23.1C5.69999 23.2 5.89999 23.3 6.09999 23.3H24.2C24.4 23.3 24.6 23.2 24.7 23.1C24.8 23 24.9 22.8 24.9 22.6C24.9 21.6 24.4 20.9 24.1 20.5ZM6.99999 21.9C7.29999 21.3 7.69999 21 8.29999 20.7C9.09999 20.3 9.99999 20.1 10.8 20.3C11.2 20.3 11.6 20.2 11.8 19.8C12.2 19.3 12.6 19 13.3 18.8C14.7 18.3 16 18.4 17.2 19.1C17.6 19.3 17.9 19.6 18.1 19.9C18.3 20.2 18.6 20.3 19 20.3C20 20.1 21 20.2 21.8 20.6C22.3 20.8 22.6 21.1 22.9 21.4C23 21.5 23.1 21.7 23.2 21.8H6.99999V21.9Z" fill="#2680EB"/>
7
+ <path d="M14 10H6C5.4 10 5 9.6 5 9C5 8.4 5.4 8 6 8H14C14.6 8 15 8.4 15 9C15 9.6 14.6 10 14 10Z" fill="#2680EB"/>
8
+ <path d="M18 14H6C5.4 14 5 13.6 5 13C5 12.4 5.4 12 6 12H18C18.6 12 19 12.4 19 13C19 13.6 18.6 14 18 14Z" fill="#2680EB"/>
9
+ </g>
10
+ <defs>
11
+ <clipPath id="clip0_1652_43">
12
+ <rect width="39" height="39" fill="white"/>
13
+ </clipPath>
14
+ </defs>
15
+ </svg>
@@ -2,7 +2,7 @@
2
2
  /** @jsx jsx */
3
3
  import { css, jsx } from '@emotion/core';
4
4
  import PropTypes from 'prop-types';
5
- import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
5
+ import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
6
6
  import { boxBorder, overflowHidden, parseHeight, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../styles/general";
7
7
  import { useTheme } from "../../theme";
8
8
  import useThemeProps from "../../theme/utils/useThemeProps";
@@ -35,17 +35,15 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, re
35
35
  currentRef.instance = _instance;
36
36
  return currentRef;
37
37
  });
38
- return useMemo(() => {
39
- return jsx("div", {
40
- css: _DetailsRootCSS,
41
- className: 'DGN-UI-Accordion-Details',
42
- ref: ref,
43
- id: id
44
- }, jsx("div", {
45
- style: style,
46
- className: classNames('DGN-UI-Accordion-Details-Content', className)
47
- }, children));
48
- }, [children, className, id, style, theme]);
38
+ return jsx("div", {
39
+ css: _DetailsRootCSS,
40
+ className: 'DGN-UI-Accordion-Details',
41
+ ref: ref,
42
+ id: id
43
+ }, jsx("div", {
44
+ style: style,
45
+ className: classNames('DGN-UI-Accordion-Details-Content', className)
46
+ }, children));
49
47
  }));
50
48
  const DetailsRootCSS = ({
51
49
  colors,
@@ -77,9 +75,9 @@ const DetailsRootCSS = ({
77
75
  AccordionDetails.propTypes = {
78
76
  /** The content of the component. */
79
77
  children: PropTypes.node,
80
- /** Class for component. */
78
+ /** CSS class for the component. */
81
79
  className: PropTypes.string,
82
- /** Style inline of component. */
80
+ /** Inline style object for the component. */
83
81
  style: PropTypes.object
84
82
  };
85
83
  export default AccordionDetails;
@@ -2,7 +2,7 @@
2
2
  /** @jsx jsx */
3
3
  import { css, jsx } from '@emotion/core';
4
4
  import PropTypes from 'prop-types';
5
- import { Children, cloneElement, forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
5
+ import { Children, cloneElement, forwardRef, memo, useImperativeHandle, useRef } from 'react';
6
6
  import { borderRadius, borderRadius4px } from "../../styles/general";
7
7
  import { useTheme } from "../../theme";
8
8
  import useThemeProps from "../../theme/utils/useThemeProps";
@@ -47,16 +47,14 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, refe
47
47
  currentRef.instance = _instance;
48
48
  return currentRef;
49
49
  });
50
- return useMemo(() => {
51
- return jsx("div", {
52
- css: _AccordionGroupRootCSS,
53
- ref: ref,
54
- style: style,
55
- className: classNames('DGN-UI-Accordion-Group', className)
56
- }, Children.map(children, child => child && /*#__PURE__*/cloneElement(child, {
57
- onExpand: e => onCollapseOther(e, child.props.onExpand)
58
- })));
59
- }, [children, className, collapseOther, style]);
50
+ return jsx("div", {
51
+ css: _AccordionGroupRootCSS,
52
+ ref: ref,
53
+ style: style,
54
+ className: classNames('DGN-UI-Accordion-Group', className)
55
+ }, Children.map(children, child => child && /*#__PURE__*/cloneElement(child, {
56
+ onExpand: e => onCollapseOther(e, child.props.onExpand)
57
+ })));
60
58
  }));
61
59
  const AccordionGroupRootCSS = ({
62
60
  spacing
@@ -131,11 +129,11 @@ const AccordionGroupRootCSS = ({
131
129
  AccordionGroup.propTypes = {
132
130
  /** The content of the component. */
133
131
  children: PropTypes.node,
134
- /** Class for component. */
132
+ /** CSS class for the component. */
135
133
  className: PropTypes.string,
136
- /** If `true`, collapse other when expand */
134
+ /** If `true`, collapses others when one is expanded. */
137
135
  collapseOther: PropTypes.bool,
138
- /** Style inline of component. */
136
+ /** Inline style object for the component. */
139
137
  style: PropTypes.object
140
138
  };
141
139
  export default AccordionGroup;
@@ -3,7 +3,7 @@
3
3
  import { css, jsx } from '@emotion/core';
4
4
  import { Divider } from "./..";
5
5
  import PropTypes from 'prop-types';
6
- import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
6
+ import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
7
7
  import { bgColor, borderRadius4px, cursorNotAllowed, displayBlock, parseHeight, parseWidth, positionRelative, shadowNone } from "../../styles/general";
8
8
  import { useTheme } from "../../theme";
9
9
  import useThemeProps from "../../theme/utils/useThemeProps";
@@ -30,6 +30,7 @@ const handleTransition = (timer, el, beginHeight, endHeight = null) => {
30
30
  }, duration);
31
31
  };
32
32
  const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
33
+ var _ref$current;
33
34
  if (!reference) reference = useRef(null);
34
35
  const theme = useTheme();
35
36
 
@@ -87,34 +88,31 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
87
88
  currentRef.instance = _instance;
88
89
  return currentRef;
89
90
  });
90
- return useMemo(() => {
91
- var _ref$current;
92
- return jsx("div", {
93
- id: id,
94
- css: [_AccordionRootCSS, boxShadow && AccordionRootBoxShadowCSS, disabled && AccordionRootDisabledCSS],
95
- ref: ref,
96
- style: style,
97
- className: classNames('DGN-UI-Accordion', disabled && 'disabled', expandState && 'expanding', className)
98
- }, jsx(AccordionContext.Provider, {
99
- value: {
100
- expanded,
101
- expandState,
102
- disabled,
103
- onClickAccordion: onClick ? onClickAccordion : null,
104
- onExpand,
105
- onCollapse,
106
- setExpandState,
107
- handleTransition,
108
- fullHeight: fullHeight ? ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) || 0 : 0
109
- }
110
- }, children, jsx(Divider, {
111
- color: 'line/category',
112
- style: {
113
- margin: 0,
114
- display: 'none'
115
- }
116
- })));
117
- }, [boxShadow, children, className, disabled, expand, expanded, fullHeight, id, onClick, onCollapse, onExpand, style, expandState, theme]);
91
+ return jsx("div", {
92
+ id: id,
93
+ css: [_AccordionRootCSS, boxShadow && AccordionRootBoxShadowCSS, disabled && AccordionRootDisabledCSS],
94
+ ref: ref,
95
+ style: style,
96
+ className: classNames('DGN-UI-Accordion', disabled && 'disabled', expandState && 'expanding', className)
97
+ }, jsx(AccordionContext.Provider, {
98
+ value: {
99
+ expanded,
100
+ expandState,
101
+ disabled,
102
+ onClickAccordion: onClick ? onClickAccordion : null,
103
+ onExpand,
104
+ onCollapse,
105
+ setExpandState,
106
+ handleTransition,
107
+ fullHeight: fullHeight ? ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) || 0 : 0
108
+ }
109
+ }, children, jsx(Divider, {
110
+ color: 'line/category',
111
+ style: {
112
+ margin: 0,
113
+ display: 'none'
114
+ }
115
+ })));
118
116
  }));
119
117
  const AccordionRootCSS = (fullHeight, expandState, {
120
118
  colors
@@ -145,25 +143,25 @@ const AccordionRootDisabledCSS = css`
145
143
  // };
146
144
 
147
145
  Accordion.propTypes = {
148
- /** The box-shadow of component. */
146
+ /** The box-shadow of the component. */
149
147
  boxShadow: PropTypes.bool,
150
- /** The content of the component (insist <AccordionSummary />, <AccordionDetails />). */
148
+ /** The content of the component (consists of <AccordionSummary /> and <AccordionDetails />). */
151
149
  children: PropTypes.node,
152
- /** Class for component. */
150
+ /** CSS class for the component. */
153
151
  className: PropTypes.string,
154
152
  /** If `true`, the component is disabled. */
155
153
  disabled: PropTypes.bool,
156
- /** If `true`, expand immediate after render (shouldn't use this). */
154
+ /** If `true`, expands immediately after render (without state management) (shouldn't use this). */
157
155
  expand: PropTypes.bool,
158
- /** Expand state of accordion (should use this). */
156
+ /** The expanded state of the accordion (with state management) (should use this). */
159
157
  expanded: PropTypes.bool,
160
- /** If `true`, Accordion height will 100% of it parent. */
158
+ /** If `true`, the Accordion will have a height of 100% of its parent. */
161
159
  fullHeight: PropTypes.bool,
162
- /** Callback fired when Accordion is collapsed. */
160
+ /** Callback function fired when the Accordion is collapsed. */
163
161
  onCollapse: PropTypes.func,
164
- /** Callback fired when Accordion is expanded. */
162
+ /** Callback function fired when the Accordion is expanded. */
165
163
  onExpand: PropTypes.func,
166
- /** Style inline of component. */
164
+ /** Inline style object for the component. */
167
165
  style: PropTypes.object
168
166
  };
169
167
  export default Accordion;
@@ -3,12 +3,12 @@
3
3
  import { css, jsx } from '@emotion/core';
4
4
  import { ButtonIcon, Typography } from "./..";
5
5
  import PropTypes from 'prop-types';
6
- import { forwardRef, memo, useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
6
+ import { forwardRef, memo, useContext, useEffect, useImperativeHandle, useRef } from 'react';
7
7
  import { bgColor, bgTransparent, borderRadius4px, boxBorder, breakWord, cursorPointer, displayFlex, displayInlineBlock, displayInlineFlex, flexRow, flexRowReverse, inset, itemsCenter, justifyBetween, justifyCenter, justifyEnd, parseMaxWidthHeight, parseMinHeight, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionRelative, textColor, userSelectNone } from "../../styles/general";
8
8
  import { useTheme } from "../../theme";
9
+ import useThemeProps from "../../theme/utils/useThemeProps";
9
10
  import { classNames, getProp } from "../../utils";
10
11
  import AccordionContext from "./context";
11
- import useThemeProps from "../../theme/utils/useThemeProps";
12
12
  const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
13
13
  if (!reference) reference = useRef(null);
14
14
  const theme = useTheme();
@@ -28,7 +28,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, re
28
28
  children,
29
29
  className,
30
30
  collapseIcon,
31
- expandIcon,
31
+ expandIcon: expandIconProp,
32
32
  expandIconAt,
33
33
  expandIconProps,
34
34
  id,
@@ -47,6 +47,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, re
47
47
  handleTransition,
48
48
  fullHeight
49
49
  } = useContext(AccordionContext);
50
+ const expandIcon = expandIconProp === true ? 'ArrowRight' : expandIconProp;
50
51
  const ref = useRef(null);
51
52
  const expandIconRef = useRef(null);
52
53
  const timer = useRef(null);
@@ -104,44 +105,42 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, re
104
105
  currentRef.instance = _instance;
105
106
  return currentRef;
106
107
  });
107
- return useMemo(() => {
108
- return jsx("div", {
109
- id: id,
110
- css: _SummaryRootCSS,
111
- ref: ref,
112
- tabIndex: "-1",
113
- onClick: _onClick,
114
- style: style,
115
- className: classNames('DGN-UI-Accordion-Summary', disabled && 'disabled', expandIcon && expandIconAt, expandState && 'expanding', className)
116
- }, jsx("div", {
117
- className: 'DGN-UI-Accordion-Summary-Content'
118
- }, jsx(Typography, {
119
- type: 'h3',
120
- lineClamp: 2,
121
- color: disabled ? 'system/disabled' : 'system/active',
122
- style: {
123
- marginRight: children && title ? spacing([4]) : 0
124
- }
125
- }, title || ''), children), !!expandIcon && jsx("div", {
126
- className: 'Accordion-Icon-Root'
127
- }, jsx("div", {
128
- ...expandIconProps,
129
- ref: expandIconRef,
130
- className: classNames('Accordion-Icon', !collapseIcon && 'rotate-able', expandIconProps === null || expandIconProps === void 0 ? void 0 : expandIconProps.className)
131
- }, typeof expandIcon === 'string' ? jsx(ButtonIcon, {
132
- viewType: 'ghost',
133
- name: expandIcon,
134
- className: 'Accordion-Expand-Icon'
135
- }) : jsx("span", {
136
- className: 'Accordion-Expand-Icon effect'
137
- }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? jsx(ButtonIcon, {
138
- viewType: 'ghost',
139
- name: collapseIcon,
140
- className: 'Accordion-Collapse-Icon'
141
- }) : jsx("span", {
142
- className: 'Accordion-Collapse-Icon effect'
143
- }, collapseIcon)))));
144
- }, [children, className, collapseIcon, expandIcon, expandIconAt, expandIconProps, id, onClick, style, title, background, disabled, expanded, expandState, onClickAccordion, theme, onCollapse, onExpand]);
108
+ return jsx("div", {
109
+ id: id,
110
+ css: _SummaryRootCSS,
111
+ ref: ref,
112
+ tabIndex: "-1",
113
+ onClick: _onClick,
114
+ style: style,
115
+ className: classNames('DGN-UI-Accordion-Summary', disabled && 'disabled', expandIcon && expandIconAt, expandState && 'expanding', className)
116
+ }, jsx("div", {
117
+ className: 'DGN-UI-Accordion-Summary-Content'
118
+ }, jsx(Typography, {
119
+ type: 'h3',
120
+ lineClamp: 2,
121
+ color: disabled ? 'system/disabled' : 'system/active',
122
+ style: {
123
+ marginRight: children && title ? spacing([4]) : 0
124
+ }
125
+ }, title || ''), children), !!expandIcon && jsx("div", {
126
+ className: 'Accordion-Icon-Root'
127
+ }, jsx("div", {
128
+ ...expandIconProps,
129
+ ref: expandIconRef,
130
+ className: classNames('Accordion-Icon', !collapseIcon && 'rotate-able', expandIconProps === null || expandIconProps === void 0 ? void 0 : expandIconProps.className)
131
+ }, typeof expandIcon === 'string' ? jsx(ButtonIcon, {
132
+ viewType: 'ghost',
133
+ name: expandIcon,
134
+ className: 'Accordion-Expand-Icon'
135
+ }) : jsx("span", {
136
+ className: 'Accordion-Expand-Icon effect'
137
+ }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? jsx(ButtonIcon, {
138
+ viewType: 'ghost',
139
+ name: collapseIcon,
140
+ className: 'Accordion-Collapse-Icon'
141
+ }) : jsx("span", {
142
+ className: 'Accordion-Collapse-Icon effect'
143
+ }, collapseIcon)))));
145
144
  }));
146
145
  const SummaryRootCSS = (background, {
147
146
  colors,
@@ -308,23 +307,23 @@ const SummaryRootCSS = (background, {
308
307
  // };
309
308
 
310
309
  AccordionSummary.propTypes = {
311
- /** Background for label summary. */
310
+ /** Background color for the label summary. */
312
311
  background: PropTypes.string,
313
312
  /** The content of the component. */
314
313
  children: PropTypes.node,
315
- /** Class for component. */
314
+ /** CSS class for the component. */
316
315
  className: PropTypes.string,
317
- /** Icon display for collapse icon. */
318
- collapseIcon: PropTypes.any,
319
- /** Icon display for expand icon. */
320
- expandIcon: PropTypes.any,
321
- /** Position to render icon. */
316
+ /** Icon to display for the collapse action. If `false`, the collapse icon is hidden. */
317
+ collapseIcon: PropTypes.oneOfType([PropTypes.bool, PropTypes.node, PropTypes.string]),
318
+ /** Icon to display for the expand action. If `false`, the expand icon is hidden. */
319
+ expandIcon: PropTypes.oneOfType([PropTypes.bool, PropTypes.node, PropTypes.string]),
320
+ /** Position to render the icon. */
322
321
  expandIconAt: PropTypes.oneOf(['start', 'end']),
323
- /** Other props of icons. */
322
+ /** Additional props for the icon. */
324
323
  expandIconProps: PropTypes.any,
325
- /** Callback fired when the component is clicked. */
324
+ /** Callback function fired when the component is clicked. */
326
325
  onClick: PropTypes.func,
327
- /** Style inline of component. */
326
+ /** Inline style object for the component. */
328
327
  style: PropTypes.object,
329
328
  /** The title of the component. */
330
329
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])