@epam/ai-dial-ui-kit 0.5.0-rc.7 → 0.5.0-rc.71

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 (109) hide show
  1. package/README.md +3 -3
  2. package/dist/dial-ui-kit.cjs.js +29 -29
  3. package/dist/dial-ui-kit.es.js +15182 -13066
  4. package/dist/index.css +2 -2
  5. package/dist/src/components/Alert/Alert.d.ts +2 -2
  6. package/dist/src/components/Alert/constants.d.ts +2 -2
  7. package/dist/src/components/AutocompleteInput/AutocompleteInput.d.ts +10 -10
  8. package/dist/src/components/AutocompleteInput/AutocompleteInputValue.d.ts +6 -6
  9. package/dist/src/components/Breadcrumb/Breadcrumb.d.ts +8 -8
  10. package/dist/src/components/Breadcrumb/BreadcrumbItem.d.ts +2 -2
  11. package/dist/src/components/Breadcrumb/constants.d.ts +10 -10
  12. package/dist/src/components/Button/Button.d.ts +10 -18
  13. package/dist/src/components/Checkbox/Checkbox.d.ts +2 -2
  14. package/dist/src/components/CloseButton/CloseButton.d.ts +5 -3
  15. package/dist/src/components/CollapsibleSidebar/CollapsibleSidebar.d.ts +6 -6
  16. package/dist/src/components/ConfirmationPopup/ConfirmationPopup.d.ts +3 -3
  17. package/dist/src/components/ConfirmationPopup/constants.d.ts +3 -3
  18. package/dist/src/components/DraggableItem/DraggableItem.d.ts +8 -8
  19. package/dist/src/components/DraggableItem/constants.d.ts +2 -2
  20. package/dist/src/components/Dropdown/Dropdown.d.ts +4 -2
  21. package/dist/src/components/Dropdown/constants.d.ts +7 -7
  22. package/dist/src/components/EllipsisTooltip/EllipsisTooltip.d.ts +4 -4
  23. package/dist/src/components/EllipsisTooltip/constants.d.ts +1 -1
  24. package/dist/src/components/Field/Field.d.ts +4 -6
  25. package/dist/src/components/FileIcon/FileIcon.d.ts +2 -2
  26. package/dist/src/components/FileManager/FileManager.d.ts +63 -10
  27. package/dist/src/components/FileManager/FileManagerContext.d.ts +41 -4
  28. package/dist/src/components/FileManager/FileManagerProvider.d.ts +1 -0
  29. package/dist/src/components/FileManager/components/ConflictResolutionPopup/ConflictResolutionPopup.d.ts +92 -0
  30. package/dist/src/components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.d.ts +4 -1
  31. package/dist/src/components/FileManager/components/DialFileManagerItemSummaryCell/DialFileManagerItemSummaryCell.d.ts +55 -0
  32. package/dist/src/components/FileManager/components/DialFileManagerItemSummaryCell/DialFileManagerItemSummaryCell.test.d.ts +1 -0
  33. package/dist/src/components/FileManager/components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar.d.ts +5 -3
  34. package/dist/src/components/FileManager/components/FileManagerItemIcon/FileManagerItemIcon.d.ts +1 -1
  35. package/dist/src/components/FileManager/components/FileManagerItemName/FileManagerItemName.d.ts +2 -1
  36. package/dist/src/components/FileManager/components/FileManagerItemNameInput/FileManagerItemNameInput.d.ts +4 -2
  37. package/dist/src/components/FileManager/components/FileManagerNavigationPanel/FileManagerNavigationPanel.d.ts +13 -11
  38. package/dist/src/components/FileManager/components/FileManagerNavigationPanel/constants.d.ts +3 -3
  39. package/dist/src/components/FileManager/components/FileManagerToolbar/DialFileManagerToolbar.d.ts +13 -13
  40. package/dist/src/components/FileManager/components/FoldersTree/FoldersTree.d.ts +3 -0
  41. package/dist/src/components/FileManager/components/FoldersTree/hooks/use-expanded-paths.d.ts +13 -0
  42. package/dist/src/components/FileManager/constants.d.ts +15 -7
  43. package/dist/src/components/FileManager/hooks/__tests__/use-conflict-resolution.spec.d.ts +1 -0
  44. package/dist/src/components/FileManager/hooks/__tests__/use-file-upload.spec.d.ts +1 -0
  45. package/dist/src/components/FileManager/hooks/use-bulk-actions.d.ts +22 -0
  46. package/dist/src/components/FileManager/hooks/use-conflict-resolution.d.ts +26 -0
  47. package/dist/src/components/FileManager/hooks/use-file-clipboard.d.ts +17 -3
  48. package/dist/src/components/FileManager/hooks/use-file-delete.d.ts +3 -2
  49. package/dist/src/components/FileManager/hooks/use-file-download.d.ts +2 -1
  50. package/dist/src/components/FileManager/hooks/use-file-upload.d.ts +34 -0
  51. package/dist/src/components/FileManager/hooks/use-folder-creation.d.ts +21 -0
  52. package/dist/src/components/FileManager/hooks/use-grid-actions-column.d.ts +10 -0
  53. package/dist/src/components/FileManager/hooks/use-grid-context-menu.d.ts +20 -0
  54. package/dist/src/components/FileManager/hooks/use-item-renaming.d.ts +8 -5
  55. package/dist/src/components/FileManager/hooks/use-new-actions.d.ts +16 -0
  56. package/dist/src/components/FileManager/hooks/use-tree-additional-buttons.d.ts +22 -0
  57. package/dist/src/components/FileManager/utils.d.ts +1 -1
  58. package/dist/src/components/FileName/FileName.d.ts +19 -5
  59. package/dist/src/components/FolderName/FolderName.d.ts +6 -3
  60. package/dist/src/components/FormItem/FormItem.d.ts +9 -9
  61. package/dist/src/components/FormItem/constants.d.ts +1 -1
  62. package/dist/src/components/FormPopup/FormPopup.d.ts +1 -1
  63. package/dist/src/components/FormPopup/constants.d.ts +1 -1
  64. package/dist/src/components/Grid/Grid.d.ts +12 -3
  65. package/dist/src/components/Grid/constants.d.ts +1 -1
  66. package/dist/src/components/Grid/hooks/use-grid-selection.d.ts +7 -4
  67. package/dist/src/components/Grid/renderers/DateCellRenderer.d.ts +2 -2
  68. package/dist/src/components/Grid/renderers/constants.d.ts +1 -1
  69. package/dist/src/components/Icon/Icon.d.ts +0 -1
  70. package/dist/src/components/Input/Input.d.ts +4 -4
  71. package/dist/src/components/InputField/InputField.d.ts +3 -3
  72. package/dist/src/components/InputPopup/InputPopup.d.ts +6 -6
  73. package/dist/src/components/Loader/Loader.d.ts +5 -5
  74. package/dist/src/components/Loader/constants.d.ts +2 -2
  75. package/dist/src/components/NoDataContent/NoDataContent.d.ts +6 -3
  76. package/dist/src/components/PasswordInput/PasswordInputField.d.ts +1 -1
  77. package/dist/src/components/Popup/Popup.d.ts +6 -6
  78. package/dist/src/components/Popup/constants.d.ts +3 -3
  79. package/dist/src/components/RadioButton/RadioButton.d.ts +6 -6
  80. package/dist/src/components/RadioGroup/RadioGroup.d.ts +20 -20
  81. package/dist/src/components/RadioGroup/constants.d.ts +3 -3
  82. package/dist/src/components/RadioGroupPopupField/RadioGroupPopupField.d.ts +2 -2
  83. package/dist/src/components/RemoveButton/RemoveButton.d.ts +6 -8
  84. package/dist/src/components/ResizableContainer/ConditionalResizableContainer.d.ts +33 -0
  85. package/dist/src/components/ResizableContainer/ResizableContainer.d.ts +69 -0
  86. package/dist/src/components/ResizableContainer/components/ResizeHandle.d.ts +10 -0
  87. package/dist/src/components/ResizableContainer/components/ResizeIcon.d.ts +8 -0
  88. package/dist/src/components/Search/Search.d.ts +4 -4
  89. package/dist/src/components/Search/constants.d.ts +4 -4
  90. package/dist/src/components/Select/Select.d.ts +9 -3
  91. package/dist/src/components/Select/constants.d.ts +7 -6
  92. package/dist/src/components/SelectField/SelectField.d.ts +6 -6
  93. package/dist/src/components/SharedEntityIndicator/SharedEntityIndicator.d.ts +2 -2
  94. package/dist/src/components/Tab/Tab.d.ts +4 -4
  95. package/dist/src/components/Tabs/Tabs.d.ts +9 -9
  96. package/dist/src/components/Tag/Tag.d.ts +2 -2
  97. package/dist/src/components/TextAreaField/TextAreaField.d.ts +3 -3
  98. package/dist/src/components/Textarea/Textarea.d.ts +4 -4
  99. package/dist/src/hooks/use-width-breakpoint.d.ts +23 -0
  100. package/dist/src/index.d.ts +5 -1
  101. package/dist/src/models/breadcrumb.d.ts +1 -1
  102. package/dist/src/models/dropdown.d.ts +1 -0
  103. package/dist/src/models/file-manager.d.ts +15 -0
  104. package/dist/src/models/tab.d.ts +2 -1
  105. package/dist/src/types/dropdown.d.ts +2 -1
  106. package/dist/src/types/file-manager.d.ts +12 -9
  107. package/dist/src/types/resizable-container.d.ts +4 -0
  108. package/dist/src/types/tab.d.ts +1 -1
  109. package/package.json +5 -4
package/dist/index.css CHANGED
@@ -1,2 +1,2 @@
1
- .dial-h1{font-weight:600}.dial-h1,.dial-h2{font-size:20px;line-height:24px}.dial-h2{font-weight:400}.dial-h3{font-weight:600;line-height:18px}.dial-body,.dial-h3{font-size:16px}.dial-body{font-weight:400;line-height:28px}.dial-small{font-weight:400}.dial-small,.dial-small-semi{font-size:14px;line-height:16px}.dial-small-semi{font-weight:600}.dial-small-medium{font-weight:400;font-size:14px;line-height:16px}.dial-small-150{font-weight:400;font-size:14px;line-height:21px}.dial-tiny{line-height:14px}.dial-tiny,.dial-tiny-150{font-weight:400;font-size:12px}.dial-tiny-150{line-height:18px}.dial-caption{font-weight:400;font-size:10px;line-height:12px}h1{font-weight:600}h1,h2{font-size:20px;line-height:24px}h2{font-weight:400}h3{font-weight:600;font-size:16px;line-height:18px}.dial-base-button{display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px}.dial-base-button-disable{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}.dial-primary-button{background-color:var(--controls-bg-accent,#5c8dea);color:var(--controls-primary,#fcfcfc);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-hover,#4878d2)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-secondary-button{background-color:transparent;color:var(--text-primary,#f3f4f6);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;border-color:var(--stroke-primary,#333942);&:focus,&:hover{background-color:var(--bg-layer-4,#333942)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-tertiary-button{background-color:transparent;color:var(--text-accent-primary,#5c8dea);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-alpha,#5c8dea2b)}&:active,&:focus{border-color:var(--stroke-accent-primary,#5c8dea)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-danger-button{background-color:var(--bg-red-400,#f76464);color:var(--text-primary,#f3f4f6);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--bg-red-800,#ae2f2f)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-input{border-radius:3px;border-width:1px;border-style:solid;border-color:var(--stroke-primary,#333942);&:hover{border-color:var(--stroke-hover,#f3f4f6)}&:focus,&:focus-within{border-color:var(--stroke-accent-primary,#5c8dea)}}.dial-input,.dial-input-no-border{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;font-weight:400;font-size:14px;line-height:16px;width:100%;outline-width:0;&:not(:-moz-placeholder){color:var(--text-primary,#f3f4f6)}&:not(:placeholder-shown){color:var(--text-primary,#f3f4f6)}&:disabled{background-color:var(--bg-layer-3,#222932)}&:disabled:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}&:disabled,&:disabled:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}}.dial-input-disable,.dial-input-readonly{background-color:var(--bg-layer-3,#222932)}.dial-input-disable:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}.dial-input-disable,.dial-input-disable:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}.dial-input-error{border-color:var(--stroke-error,#f76464)}.dial-input-field{height:38px}input{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}&:focus{outline:none}}.dial-textarea{min-height:72px;resize:both;overflow:auto;white-space:normal}.dial-input-radio{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding:0;height:18px;width:18px;border-color:var(--stroke-hover,#f3f4f6);background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:currentColor;font:inherit;&:checked{border-color:var(--stroke-accent-primary,#5c8dea)}&:checked{&:after{height:10px;width:10px;background-color:var(--bg-accent-primary,#5c8dea);content:"";border-radius:18px}}&:focus,&:hover{border-width:1px;border-color:var(--stroke-accent-primary,#5c8dea);background-color:transparent}&:disabled{pointer-events:none}&:disabled{&:checked{border-color:var(--stroke-primary,#333942)}&:checked{&:after{background-color:var(--controls-bg-disable,#7f8792)}}}}div .dial-sm-popup{max-width:100%}@media (min-width:768px){div .dial-sm-popup{max-width:400px}}div .dial-md-popup{max-width:100%}@media (min-width:768px){div .dial-md-popup{max-width:800px}}div .dial-lg-popup{max-width:100%}@media (min-width:768px){div .dial-lg-popup{max-width:1200px}}div .dial-popup{position:relative;display:flex;height:100%;max-height:100%;width:100%;flex-direction:column;border-radius:3px;background-color:var(--bg-layer-3,#222932);--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:768px){div .dial-popup{height:auto}}div .dial-danger-popup{border-top-width:4px;border-color:var(--stroke-error,#f76464)}.ag-root-wrapper{.ag-root-wrapper-body{height:auto}.ag-filter-wrapper{.ag-input-field-input.ag-text-field-input{padding-left:1.25rem}}overflow-x:auto;.ag-header{.ag-header-cell.align-right{.ag-header-cell-label{justify-content:flex-end}}.ag-header-cell{.header-checkbox-container{display:flex;height:100%;width:100%;align-items:center;justify-content:center}}.ag-header-viewport,.ag-pinned-left-header{.ag-floating-filter{input{margin:0;padding:0;padding-left:.5rem;padding-right:.5rem;height:24px!important}}}}.ag-cell{display:flex;align-items:center}.ag-cell{&.ag-cell-focus,&.ag-grid-no-border{border-width:0}&.align-right{justify-content:flex-end}}.ag-error-row{background-color:var(--bg-error,#402027)}.ag-error-row{#editable-cell-renderer{border-color:var(--stroke-error,#f76464)}&.ag-error-border{border-width:1px;border-color:var(--stroke-error,#f76464);cursor:pointer}&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}.ag-new-row{background-color:var(--bg-success,#1d3841)}.ag-new-row{&.ag-new-border{border-width:1px;border-color:var(--stroke-accent-secondary,#37babc);cursor:pointer}&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}.ag-changed-row{background-color:var(--bg-info,#1c2c47)}.ag-changed-row{&.ag-changed-border{border-width:1px;border-color:var(--stroke-accent-primary,#5c8dea);cursor:pointer}&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}.ag-empty-row{&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}}.with-selection-column{.ag-row .dial-row-select{opacity:0;transition:opacity .12s ease}.ag-row-hover .dial-row-select,.ag-row-selected .dial-row-select{opacity:1}.header-checkbox-container .dial-header-select.unchecked{opacity:0;transition:opacity .12s ease}.ag-header-cell:hover .header-checkbox-container .dial-header-select.unchecked,.header-checkbox-container .dial-header-select.checked,.header-checkbox-container .dial-header-select.indeterminate{opacity:1}}.ag-layout-auto-height{.ag-center-cols-container,.ag-center-cols-viewport{min-height:0}}div .dial-step{border-top-width:2px}@layer ui{*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
2
- /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}::-webkit-scrollbar-corner,::-webkit-scrollbar-track,::-webkit-scrollbar-track:hover,:not(:hover)::-webkit-scrollbar-thumb{background-color:transparent}::-webkit-scrollbar-thumb{cursor:pointer;border-radius:3px;background-color:var(--bg-layer-4,#333942)}::-webkit-scrollbar{height:4px;width:4px}*{scrollbar-width:thin;scrollbar-color:transparent transparent}:hover{scrollbar-color:var(--bg-layer-4,#333942) transparent}.divide-y>:empty~:not([hidden]){border-top:none;border-bottom:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-bottom-0\.5{bottom:-.125rem}.-left-0\.5{left:-.125rem}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-0{z-index:0}.z-\[52\]{z-index:52}.z-\[53\]{z-index:53}.z-\[55\]{z-index:55}.m-0{margin:0}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-\[2px\]{margin-bottom:2px}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-\[26px\]{margin-left:26px}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.size-3{width:.75rem;height:.75rem}.size-full{width:100%;height:100%}.\!h-6{height:1.5rem!important}.\!h-\[600px\]{height:600px!important}.h-0{height:0}.h-11{height:2.75rem}.h-12{height:3rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\[100px\]{height:100px}.h-\[10px\]{height:10px}.h-\[120px\]{height:120px}.h-\[12\]{height:12}.h-\[18px\]{height:18px}.h-\[200px\]{height:200px}.h-\[22px\]{height:22px}.h-\[250px\]{height:250px}.h-\[300px\]{height:300px}.h-\[32px\]{height:32px}.h-\[34px\]{height:34px}.h-\[38px\]{height:38px}.h-\[400px\]{height:400px}.h-\[4px\]{height:4px}.h-\[500px\]{height:500px}.h-\[640px\]{height:640px}.h-auto{height:auto}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-4{min-height:1rem}.min-h-\[220px\]{min-height:220px}.min-h-\[25px\]{min-height:25px}.min-h-\[38px\]{min-height:38px}.min-h-\[42px\]{min-height:42px}.min-h-\[48px\]{min-height:48px}.min-h-\[72px\]{min-height:72px}.min-h-screen{min-height:100vh}.w-0{width:0}.w-12{width:3rem}.w-2{width:.5rem}.w-32{width:8rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-96{width:24rem}.w-\[1000px\]{width:1000px}.w-\[10px\]{width:10px}.w-\[160px\]{width:160px}.w-\[18px\]{width:18px}.w-\[22px\]{width:22px}.w-\[250px\]{width:250px}.w-\[260px\]{width:260px}.w-\[300px\]{width:300px}.w-\[320px\]{width:320px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[400px\]{width:400px}.w-\[420px\]{width:420px}.w-\[450px\]{width:450px}.w-\[480px\]{width:480px}.w-\[4px\]{width:4px}.w-\[500px\]{width:500px}.w-\[520px\]{width:520px}.w-\[600px\]{width:600px}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.min-w-0{min-width:0}.min-w-\[100px\]{min-width:100px}.min-w-\[160px\]{min-width:160px}.min-w-\[180px\]{min-width:180px}.min-w-\[400px\]{min-width:400px}.min-w-\[600px\]{min-width:600px}.min-w-\[800px\]{min-width:800px}.min-w-fit{min-width:-moz-fit-content;min-width:fit-content}.max-w-80{max-width:20rem}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1400px\]{max-width:1400px}.max-w-\[160px\]{max-width:160px}.max-w-\[180px\]{max-width:180px}.max-w-\[20\%\]{max-width:20%}.max-w-\[200px\]{max-width:200px}.max-w-\[300px\]{max-width:300px}.max-w-\[428px\]{max-width:428px}.max-w-\[80px\]{max-width:80px}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.grow-0{flex-grow:0}.basis-\[20\%\]{flex-basis:20%}.basis-auto{flex-basis:auto}.border-collapse{border-collapse:collapse}.rotate-180{--tw-rotate:180deg}.rotate-180,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate:90deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-steps{animation:spin .75s steps(8) infinite}.\!cursor-not-allowed{cursor:not-allowed!important}.cursor-default{cursor:default}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[minmax\(0\2c 100px\)_1fr\]{grid-template-columns:minmax(0,100px) 1fr}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-\[2px\]{gap:2px}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-\[160px\]{-moz-column-gap:160px;column-gap:160px}.gap-y-1{row-gap:.25rem}.gap-y-10{row-gap:2.5rem}.gap-y-3{row-gap:.75rem}.gap-y-6{row-gap:1.5rem}.gap-y-\[80px\]{row-gap:80px}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-tertiary>:not([hidden])~:not([hidden]){border-color:var(--stroke-tertiary,#090d13)}.self-end{align-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.rounded{border-radius:3px}.rounded-\[8px\]{border-radius:8px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-l-0{border-left-width:0}.border-l-2{border-left-width:2px}.border-l-4{border-left-width:4px}.border-r-0{border-right-width:0}.border-t{border-top-width:1px}.border-t-4{border-top-width:4px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-\[\#F4CE46\]{--tw-border-opacity:1;border-color:rgb(244 206 70/var(--tw-border-opacity,1))}.border-accent-primary{border-color:var(--stroke-accent-primary,#5c8dea)}.border-accent-secondary{border-color:var(--stroke-accent-secondary,#37babc)}.border-error{border-color:var(--stroke-error,#f76464)}.border-hover{border-color:var(--stroke-hover,#f3f4f6)}.border-icon-secondary{border-color:var(--icon-secondary,#7f8792)}.border-primary{border-color:var(--stroke-primary,#333942)}.border-red-900{border-color:var(--red-900,#402027)}.border-secondary{border-color:var(--stroke-secondary,#222932)}.border-tertiary{border-color:var(--stroke-tertiary,#090d13)}.border-transparent{border-color:transparent}.border-b-accent-primary{border-bottom-color:var(--stroke-accent-primary,#5c8dea)}.border-l-accent-primary{border-left-color:var(--stroke-accent-primary,#5c8dea)}.border-l-transparent{border-left-color:transparent}.\!bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)!important}.\!bg-layer-4{background-color:var(--bg-layer-4,#333942)!important}.bg-accent-primary{background-color:var(--bg-accent-primary,#5c8dea)}.bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#5c8dea2b)}.bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)}.bg-blackout{background-color:var(--bg-blackout,#090d13b3)}.bg-controls-accent{background-color:var(--controls-bg-accent,#5c8dea)}.bg-controls-disable{background-color:var(--controls-bg-disable,#7f8792)}.bg-controls-enable-primary{background-color:var(--controls-enable-primary,#fcfcfc)}.bg-error{background-color:var(--bg-error,#402027)}.bg-info{background-color:var(--bg-info,#1c2c47)}.bg-layer-0{background-color:var(--bg-layer-0,#000)}.bg-layer-1{background-color:var(--bg-layer-1,#090d13)}.bg-layer-2{background-color:var(--bg-layer-2,#141a23)}.bg-layer-3{background-color:var(--bg-layer-3,#222932)}.bg-layer-4{background-color:var(--bg-layer-4,#333942)}.bg-red-400{background-color:var(--bg-red-400,#f76464)}.bg-success{background-color:var(--bg-success,#1d3841)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--bg-warning,#3f3d25)}.stroke-primary{stroke:var(--stroke-primary,#333942)}.\!p-\[9px\]{padding:9px!important}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-\[6px\]{padding:6px}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[6px\]{padding-left:6px;padding-right:6px}.py-0{padding-top:0;padding-bottom:0}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-\[1px\]{padding-top:1px;padding-bottom:1px}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pl-\[7px\]{padding-left:7px}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-\[7px\]{padding-right:7px}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font{font-family:var(--theme-font,var(--font-inter))}.\!text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-4{line-height:1rem}.leading-none{line-height:1}.tracking-wider{letter-spacing:.05em}.\!text-error{color:var(--text-error,#f76464)!important}.text-\[var\(--bg-layer-0\2c _\#000000\)\]{color:var(--bg-layer-0,#000)}.text-accent-primary{color:var(--text-accent-primary,#5c8dea)}.text-accent-secondary{color:var(--text-accent-secondary,#37babc)}.text-accent-tertiary{color:var(--text-accent-tertiary,#a972ff)}.text-controls-disable{color:var(--controls-disable,#333942)}.text-error{color:var(--text-error,#f76464)}.text-icon-accent-primary{color:var(--icon-accent-primary,#5c8dea)}.text-icon-accent-secondary{color:var(--icon-accent-secondary,#37babc)}.text-icon-error{color:var(--icon-error,#f76464)}.text-icon-secondary{color:var(--icon-secondary,#7f8792)}.text-info{color:var(--text-info,#5c8dea)}.text-primary{color:var(--text-primary,#f3f4f6)}.text-secondary{color:var(--text-secondary,#7f8792)}.text-success{color:var(--text-success,#37babc)}.text-transparent{color:transparent}.text-warning{color:var(--text-warning,#f4ce46)}.text-white{color:var(--text-white,#fff)}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.shadow{--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-offset-0{outline-offset:0}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-sky-400{--tw-ring-opacity:1;--tw-ring-color:rgb(56 189 248/var(--tw-ring-opacity,1))}.ring-offset-1{--tw-ring-offset-width:1px}.ring-offset-2{--tw-ring-offset-width:2px}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.\[writing-mode\:tb-rl\]{writing-mode:tb-rl}}.before\:mr-2:before{content:var(--tw-content);margin-right:.5rem}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-\[18px\]:before{content:var(--tw-content);height:18px}.before\:w-\[18px\]:before{content:var(--tw-content);width:18px}.before\:rounded:before{content:var(--tw-content);border-radius:3px}.before\:border:before{content:var(--tw-content);border-width:1px}.before\:border-hover:before{content:var(--tw-content);border-color:var(--stroke-hover,#f3f4f6)}.before\:border-icon-secondary:before{content:var(--tw-content);border-color:var(--icon-secondary,#7f8792)}.before\:bg-layer-4:before{content:var(--tw-content);background-color:var(--bg-layer-4,#333942)}.before\:content-\[\"\"\]:before{--tw-content:"";content:var(--tw-content)}.hover\:border-hover:hover{border-color:var(--stroke-hover,#f3f4f6)}.hover\:bg-accent-primary-alpha:hover{background-color:var(--bg-accent-primary-alpha,#5c8dea2b)}.hover\:bg-layer-2:hover{background-color:var(--bg-layer-2,#141a23)}.hover\:text-accent-primary:hover{color:var(--text-accent-primary,#5c8dea)}.hover\:text-accent-tertiary:hover{color:var(--text-accent-tertiary,#a972ff)}.hover\:text-error:hover{color:var(--text-error,#f76464)}.hover\:text-icon-accent-primary:hover{color:var(--icon-accent-primary,#5c8dea)}.hover\:text-primary:hover{color:var(--text-primary,#f3f4f6)}.hover\:opacity-90:hover{opacity:.9}.focus\:bg-accent-primary-alpha:focus{background-color:var(--bg-accent-primary-alpha,#5c8dea2b)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:border-none:focus-visible{border-style:none}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:outline:focus-visible{outline-style:solid}.disabled\:opacity-60:disabled{opacity:.6}.group:hover .group-hover\:visible{visibility:visible}@media (min-width:640px){.sm\:inline{display:inline}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:768px){.md\:max-w-\[1200px\]{max-width:1200px}.md\:max-w-\[400px\]{max-width:400px}.md\:max-w-\[800px\]{max-width:800px}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:p-4{padding:1rem}}@media (min-width:1024px){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}
1
+ .dial-h1{font-weight:600}.dial-h1,.dial-h2{font-size:20px;line-height:24px}.dial-h2{font-weight:400}.dial-h3{font-weight:600;line-height:18px}.dial-body,.dial-h3{font-size:16px}.dial-body{font-weight:400;line-height:28px}.dial-small{font-weight:400}.dial-small,.dial-small-semi{font-size:14px;line-height:16px}.dial-small-semi{font-weight:600}.dial-small-medium{font-weight:400;font-size:14px;line-height:16px}.dial-small-150{font-weight:400;font-size:14px;line-height:21px}.dial-tiny{line-height:14px}.dial-tiny,.dial-tiny-150{font-weight:400;font-size:12px}.dial-tiny-150{line-height:18px}.dial-tiny-semi{font-weight:600;font-size:12px;line-height:14px}.dial-caption{font-weight:400;font-size:10px;line-height:12px}h1{font-weight:600}h1,h2{font-size:20px;line-height:24px}h2{font-weight:400}h3{font-weight:600;font-size:16px;line-height:18px}.dial-base-button{display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px}.dial-base-button-disable{cursor:not-allowed;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}.dial-primary-button{background-color:var(--controls-bg-accent,#5c8dea);color:var(--controls-primary,#fcfcfc);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-hover,#4878d2)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{cursor:not-allowed;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-secondary-button{background-color:transparent;color:var(--text-primary,#f3f4f6);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;border-color:var(--stroke-primary,#333942);&:focus,&:hover{background-color:var(--bg-layer-4,#333942)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{cursor:not-allowed;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-tertiary-button{background-color:transparent;color:var(--text-accent-primary,#5c8dea);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-alpha,#5c8dea2b)}&:active,&:focus{border-color:var(--stroke-accent-primary,#5c8dea)}&:disabled{cursor:not-allowed;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-danger-button{background-color:var(--bg-red-400,#f76464);color:var(--text-primary,#f3f4f6);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--bg-red-800,#ae2f2f)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{cursor:not-allowed;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-input{border-radius:3px;border-width:1px;border-style:solid;border-color:var(--stroke-primary,#333942);&:hover{border-color:var(--stroke-hover,#f3f4f6)}&:focus,&:focus-within{border-color:var(--stroke-accent-primary,#5c8dea)}}.dial-input,.dial-input-no-border{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;font-weight:400;font-size:14px;line-height:16px;width:100%;outline-width:0;&:not(:-moz-placeholder){color:var(--text-primary,#f3f4f6)}&:not(:placeholder-shown){color:var(--text-primary,#f3f4f6)}&:disabled{background-color:var(--bg-layer-3,#222932)}&:disabled:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}&:disabled,&:disabled:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}}.dial-input-disable,.dial-input-readonly{background-color:var(--bg-layer-3,#222932)}.dial-input-disable:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}.dial-input-disable,.dial-input-disable:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}.dial-input-error{border-color:var(--stroke-error,#f76464)}.dial-input-field{height:38px}input{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}&:focus{outline:none}}.dial-textarea{min-height:72px;resize:both;overflow:auto;white-space:normal}.dial-input-radio{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding:0;height:18px;width:18px;border-color:var(--stroke-hover,#f3f4f6);background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:currentColor;font:inherit;&:checked{border-color:var(--stroke-accent-primary,#5c8dea)}&:checked{&:after{height:10px;width:10px;background-color:var(--bg-accent-primary,#5c8dea);content:"";border-radius:18px}}&:focus,&:hover{border-width:1px;border-color:var(--stroke-accent-primary,#5c8dea);background-color:transparent}&:disabled{pointer-events:none}&:disabled{&:checked{border-color:var(--stroke-primary,#333942)}&:checked{&:after{background-color:var(--controls-bg-disable,#7f8792)}}}}div .dial-sm-popup{max-width:100%}@media (min-width:768px){div .dial-sm-popup{max-width:400px}}div .dial-md-popup{max-width:100%}@media (min-width:768px){div .dial-md-popup{max-width:800px}}div .dial-lg-popup{max-width:100%}@media (min-width:768px){div .dial-lg-popup{max-width:1200px}}div .dial-popup{position:relative;display:flex;height:100%;max-height:100%;width:100%;flex-direction:column;border-radius:3px;background-color:var(--bg-layer-3,#222932);--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:768px){div .dial-popup{height:auto}}div .dial-danger-popup{border-top-width:4px;border-color:var(--stroke-error,#f76464)}.ag-root-wrapper{.ag-root-wrapper-body{height:auto}.ag-filter-wrapper{.ag-input-field-input.ag-text-field-input{padding-left:1.25rem}}overflow-x:auto;.ag-header{.ag-header-cell.align-right{.ag-header-cell-label{justify-content:flex-end}}.ag-header-cell{.header-checkbox-container{display:flex;height:100%;width:100%;align-items:center;justify-content:center}}.ag-header-viewport,.ag-pinned-left-header{.ag-floating-filter{input{margin:0;padding:0;padding-left:.5rem;padding-right:.5rem;height:24px!important}}}}.ag-cell{display:flex;align-items:center}.ag-cell{&.ag-cell-focus,&.ag-grid-no-border{border-width:0}&.align-right{justify-content:flex-end}}.ag-error-row{background-color:var(--bg-error,#402027)}.ag-error-row{#editable-cell-renderer{border-color:var(--stroke-error,#f76464)}&.ag-error-border{border-width:1px;border-color:var(--stroke-error,#f76464);cursor:pointer}&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}.ag-new-row{background-color:var(--bg-success,#1d3841)}.ag-new-row{&.ag-new-border{border-width:1px;border-color:var(--stroke-accent-secondary,#37babc);cursor:pointer}&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}.ag-changed-row{background-color:var(--bg-info,#1c2c47)}.ag-changed-row{&.ag-changed-border{border-width:1px;border-color:var(--stroke-accent-primary,#5c8dea);cursor:pointer}&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}.ag-empty-row{&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}}.with-selection-column{.ag-row .dial-row-select{opacity:0;transition:opacity .12s ease}.ag-row .dial-row-select-visible,.ag-row-hover .dial-row-select,.ag-row-selected .dial-row-select{opacity:1}.header-checkbox-container .dial-header-select.unchecked:not(.dial-header-select-visible){opacity:0;transition:opacity .12s ease}.ag-header-cell:hover .header-checkbox-container .dial-header-select.unchecked,.header-checkbox-container .dial-header-select-visible,.header-checkbox-container .dial-header-select.checked,.header-checkbox-container .dial-header-select.indeterminate{opacity:1}}.dial-without-header-borders{.ag-header{.ag-header-cell{&:after{border-right-width:0}}}}.ag-layout-auto-height{.ag-center-cols-container,.ag-center-cols-viewport{min-height:0}}div .dial-step{border-top-width:2px}@layer ui{*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
2
+ /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}::-webkit-scrollbar-corner,::-webkit-scrollbar-track,::-webkit-scrollbar-track:hover,:not(:hover)::-webkit-scrollbar-thumb{background-color:transparent}::-webkit-scrollbar-thumb{cursor:pointer;border-radius:3px;background-color:var(--bg-layer-4,#333942)}::-webkit-scrollbar{height:4px;width:4px}*{scrollbar-width:thin;scrollbar-color:transparent transparent}:hover{scrollbar-color:var(--bg-layer-4,#333942) transparent}.divide-y>:empty~:not([hidden]){border-top:none;border-bottom:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-bottom-0\.5{bottom:-.125rem}.-left-0\.5{left:-.125rem}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-0{z-index:0}.z-\[52\]{z-index:52}.z-\[53\]{z-index:53}.z-\[55\]{z-index:55}.m-0{margin:0}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.-ml-6{margin-left:-1.5rem}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-\[2px\]{margin-bottom:2px}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-\[26px\]{margin-left:26px}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.size-3{width:.75rem;height:.75rem}.size-full{width:100%;height:100%}.\!h-10{height:2.5rem!important}.\!h-6{height:1.5rem!important}.\!h-9{height:2.25rem!important}.\!h-\[600px\]{height:600px!important}.h-0{height:0}.h-11{height:2.75rem}.h-12{height:3rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\[100px\]{height:100px}.h-\[10px\]{height:10px}.h-\[120px\]{height:120px}.h-\[12\]{height:12}.h-\[18px\]{height:18px}.h-\[200px\]{height:200px}.h-\[22px\]{height:22px}.h-\[250px\]{height:250px}.h-\[300px\]{height:300px}.h-\[32px\]{height:32px}.h-\[34px\]{height:34px}.h-\[38px\]{height:38px}.h-\[400px\]{height:400px}.h-\[4px\]{height:4px}.h-\[500px\]{height:500px}.h-\[640px\]{height:640px}.h-auto{height:auto}.h-full{height:100%}.max-h-\[352px\]{max-height:352px}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-4{min-height:1rem}.min-h-\[220px\]{min-height:220px}.min-h-\[25px\]{min-height:25px}.min-h-\[38px\]{min-height:38px}.min-h-\[42px\]{min-height:42px}.min-h-\[48px\]{min-height:48px}.min-h-\[72px\]{min-height:72px}.min-h-screen{min-height:100vh}.w-0{width:0}.w-0\.5{width:.125rem}.w-12{width:3rem}.w-2{width:.5rem}.w-32{width:8rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-96{width:24rem}.w-\[1000px\]{width:1000px}.w-\[10px\]{width:10px}.w-\[160px\]{width:160px}.w-\[18px\]{width:18px}.w-\[22px\]{width:22px}.w-\[250px\]{width:250px}.w-\[260px\]{width:260px}.w-\[300px\]{width:300px}.w-\[320px\]{width:320px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[38px\]{width:38px}.w-\[400px\]{width:400px}.w-\[420px\]{width:420px}.w-\[450px\]{width:450px}.w-\[480px\]{width:480px}.w-\[4px\]{width:4px}.w-\[500px\]{width:500px}.w-\[520px\]{width:520px}.w-\[600px\]{width:600px}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.min-w-0{min-width:0}.min-w-\[100px\]{min-width:100px}.min-w-\[160px\]{min-width:160px}.min-w-\[180px\]{min-width:180px}.min-w-\[400px\]{min-width:400px}.min-w-\[600px\]{min-width:600px}.min-w-\[800px\]{min-width:800px}.max-w-80{max-width:20rem}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1400px\]{max-width:1400px}.max-w-\[160px\]{max-width:160px}.max-w-\[180px\]{max-width:180px}.max-w-\[20\%\]{max-width:20%}.max-w-\[200px\]{max-width:200px}.max-w-\[300px\]{max-width:300px}.max-w-\[428px\]{max-width:428px}.max-w-\[80px\]{max-width:80px}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.grow-0{flex-grow:0}.basis-\[20\%\]{flex-basis:20%}.basis-auto{flex-basis:auto}.border-collapse{border-collapse:collapse}.rotate-180{--tw-rotate:180deg}.rotate-180,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate:90deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-steps{animation:spin .75s steps(8) infinite}.\!cursor-not-allowed{cursor:not-allowed!important}.cursor-col-resize{cursor:col-resize}.cursor-default{cursor:default}.cursor-move{cursor:move}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[minmax\(0\2c 100px\)_1fr\]{grid-template-columns:minmax(0,100px) 1fr}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-\[2px\]{gap:2px}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-\[160px\]{-moz-column-gap:160px;column-gap:160px}.gap-y-1{row-gap:.25rem}.gap-y-10{row-gap:2.5rem}.gap-y-3{row-gap:.75rem}.gap-y-6{row-gap:1.5rem}.gap-y-\[80px\]{row-gap:80px}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-tertiary>:not([hidden])~:not([hidden]){border-color:var(--stroke-tertiary,#090d13)}.self-end{align-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:3px}.rounded-\[8px\]{border-radius:8px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-l-0{border-left-width:0}.border-l-2{border-left-width:2px}.border-l-4{border-left-width:4px}.border-r-0{border-right-width:0}.border-t{border-top-width:1px}.border-t-4{border-top-width:4px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-\[\#F4CE46\]{--tw-border-opacity:1;border-color:rgb(244 206 70/var(--tw-border-opacity,1))}.border-accent-primary{border-color:var(--stroke-accent-primary,#5c8dea)}.border-accent-secondary{border-color:var(--stroke-accent-secondary,#37babc)}.border-error{border-color:var(--stroke-error,#f76464)}.border-hover{border-color:var(--stroke-hover,#f3f4f6)}.border-icon-secondary{border-color:var(--icon-secondary,#7f8792)}.border-primary{border-color:var(--stroke-primary,#333942)}.border-red-900{border-color:var(--red-900,#402027)}.border-secondary{border-color:var(--stroke-secondary,#222932)}.border-tertiary{border-color:var(--stroke-tertiary,#090d13)}.border-transparent{border-color:transparent}.border-b-accent-primary{border-bottom-color:var(--stroke-accent-primary,#5c8dea)}.border-l-accent-primary{border-left-color:var(--stroke-accent-primary,#5c8dea)}.border-l-transparent{border-left-color:transparent}.\!bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)!important}.\!bg-layer-4{background-color:var(--bg-layer-4,#333942)!important}.bg-accent-primary{background-color:var(--bg-accent-primary,#5c8dea)}.bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#5c8dea2b)}.bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)}.bg-blackout{background-color:var(--bg-blackout,#090d13b3)}.bg-controls-accent{background-color:var(--controls-bg-accent,#5c8dea)}.bg-controls-disable{background-color:var(--controls-bg-disable,#7f8792)}.bg-controls-enable-primary{background-color:var(--controls-enable-primary,#fcfcfc)}.bg-error{background-color:var(--bg-error,#402027)}.bg-info{background-color:var(--bg-info,#1c2c47)}.bg-layer-0{background-color:var(--bg-layer-0,#000)}.bg-layer-1{background-color:var(--bg-layer-1,#090d13)}.bg-layer-2{background-color:var(--bg-layer-2,#141a23)}.bg-layer-3{background-color:var(--bg-layer-3,#222932)}.bg-layer-4{background-color:var(--bg-layer-4,#333942)}.bg-red-400{background-color:var(--bg-red-400,#f76464)}.bg-success{background-color:var(--bg-success,#1d3841)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--bg-warning,#3f3d25)}.\!p-\[9px\]{padding:9px!important}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-\[10px\]{padding:10px}.p-\[6px\]{padding:6px}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[6px\]{padding-left:6px;padding-right:6px}.py-0{padding-top:0;padding-bottom:0}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-\[1px\]{padding-top:1px;padding-bottom:1px}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pl-\[7px\]{padding-left:7px}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-\[7px\]{padding-right:7px}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font{font-family:var(--theme-font,var(--font-inter))}.\!text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-4{line-height:1rem}.leading-none{line-height:1}.tracking-wider{letter-spacing:.05em}.\!text-error{color:var(--text-error,#f76464)!important}.text-\[var\(--bg-layer-0\2c _\#000000\)\]{color:var(--bg-layer-0,#000)}.text-accent-primary{color:var(--text-accent-primary,#5c8dea)}.text-accent-secondary{color:var(--text-accent-secondary,#37babc)}.text-accent-tertiary{color:var(--text-accent-tertiary,#a972ff)}.text-controls-disable{color:var(--controls-disable,#333942)}.text-error{color:var(--text-error,#f76464)}.text-info{color:var(--text-info,#5c8dea)}.text-primary{color:var(--text-primary,#f3f4f6)}.text-secondary{color:var(--text-secondary,#7f8792)}.text-success{color:var(--text-success,#37babc)}.text-transparent{color:transparent}.text-warning{color:var(--text-warning,#f4ce46)}.text-white{color:var(--text-white,#fff)}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-offset-0{outline-offset:0}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-sky-400{--tw-ring-opacity:1;--tw-ring-color:rgb(56 189 248/var(--tw-ring-opacity,1))}.ring-offset-1{--tw-ring-offset-width:1px}.ring-offset-2{--tw-ring-offset-width:2px}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.\[writing-mode\:tb-rl\]{writing-mode:tb-rl}}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-\[18px\]:before{content:var(--tw-content);height:18px}.before\:w-\[18px\]:before{content:var(--tw-content);width:18px}.before\:rounded:before{content:var(--tw-content);border-radius:3px}.before\:border:before{content:var(--tw-content);border-width:1px}.before\:border-hover:before{content:var(--tw-content);border-color:var(--stroke-hover,#f3f4f6)}.before\:border-icon-secondary:before{content:var(--tw-content);border-color:var(--icon-secondary,#7f8792)}.before\:bg-layer-4:before{content:var(--tw-content);background-color:var(--bg-layer-4,#333942)}.before\:content-\[\"\"\]:before{--tw-content:"";content:var(--tw-content)}.hover\:border-hover:hover{border-color:var(--stroke-hover,#f3f4f6)}.hover\:bg-accent-primary-alpha:hover{background-color:var(--bg-accent-primary-alpha,#5c8dea2b)}.hover\:bg-layer-2:hover{background-color:var(--bg-layer-2,#141a23)}.hover\:text-accent-primary:hover{color:var(--text-accent-primary,#5c8dea)}.hover\:text-accent-tertiary:hover{color:var(--text-accent-tertiary,#a972ff)}.hover\:text-controls-disable:hover{color:var(--controls-disable,#333942)}.hover\:text-error:hover{color:var(--text-error,#f76464)}.hover\:text-primary:hover{color:var(--text-primary,#f3f4f6)}.hover\:opacity-90:hover{opacity:.9}.focus\:bg-accent-primary-alpha:focus{background-color:var(--bg-accent-primary-alpha,#5c8dea2b)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:border-none:focus-visible{border-style:none}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:outline:focus-visible{outline-style:solid}.hover\:enabled\:text-accent-primary:enabled:hover{color:var(--text-accent-primary,#5c8dea)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-60:disabled{opacity:.6}.disabled\:hover\:cursor-default:hover:disabled{cursor:default}.group:hover .group-hover\:visible,.group\/item:hover .group-hover\/item\:visible{visibility:visible}@media (min-width:640px){.sm\:inline{display:inline}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:768px){.md\:\!h-\[800px\]{height:800px!important}.md\:max-w-\[1200px\]{max-width:1200px}.md\:max-w-\[400px\]{max-width:400px}.md\:max-w-\[800px\]{max-width:800px}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:p-4{padding:1rem}}@media (min-width:1024px){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}
package/dist/src/components/Alert/Alert.d.ts CHANGED
@@ -3,7 +3,7 @@ import { AlertVariant } from '../../types/alert';
3
3
  export interface DialAlertProps {
4
4
  variant?: AlertVariant;
5
5
  message: string | ReactNode;
6
- cssClass?: string;
6
+ className?: string;
7
7
  closable?: boolean;
8
8
  onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
9
9
  }
@@ -35,7 +35,7 @@ export interface DialAlertProps {
35
35
  *
36
36
  * @param [variant=AlertVariant.Info] - Defines the visual style and icon of the alert
37
37
  * @param message - Message text to display inside the alert
38
- * @param [cssClass] - Additional CSS classes applied to the alert container
38
+ * @param [className] - Additional CSS classes applied to the alert container
39
39
  * @param [closable=false] - Whether the alert has a close button
40
40
  * @param [onClose] - Callback fired when the close button is clicked
41
41
  */
package/dist/src/components/Alert/constants.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { AlertVariant } from '../../types/alert';
2
2
  import { ReactNode } from 'react';
3
3
  export declare const variantIcons: Record<AlertVariant, ReactNode>;
4
- export declare const alertVariantClassMap: Record<AlertVariant, string>;
5
- export declare const alertBaseClasses = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex";
4
+ export declare const alertVariantClassNameMap: Record<AlertVariant, string>;
5
+ export declare const alertBaseClassName = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex";
package/dist/src/components/AutocompleteInput/AutocompleteInput.d.ts CHANGED
@@ -3,8 +3,8 @@ import { DialAutocompleteInputValueProps } from './AutocompleteInputValue';
3
3
  export interface DialAutocompleteInputProps extends DialAutocompleteInputValueProps {
4
4
  placeholder?: string;
5
5
  updateSelected: (items: string[]) => void;
6
- containerCssClass?: string;
7
- inputCssClass?: string;
6
+ containerClassName?: string;
7
+ inputClassName?: string;
8
8
  }
9
9
  /**
10
10
  * A component that provides an interactive input field with autocomplete functionality. Users can
@@ -18,19 +18,19 @@ export interface DialAutocompleteInputProps extends DialAutocompleteInputValuePr
18
18
  * placeholder="Type to add items"
19
19
  * selectedItems={['Item 1', 'Item 2']}
20
20
  * updateSelected={(items) => console.log(items)}
21
- * containerCssClass="custom-container-class"
22
- * inputCssClass="custom-input-class"
23
- * listCssClass="custom-list-class"
24
- * listElementCssClass="custom-item-class"
21
+ * containerClassName="custom-container-class"
22
+ * inputClassName="custom-input-class"
23
+ * listClassName="custom-list-class"
24
+ * listElementClassName="custom-item-class"
25
25
  * />
26
26
  * ```
27
27
  *
28
28
  * @param [placeholder] - The placeholder text displayed in the input field when no items are selected.
29
29
  * @param [selectedItems=[]] - An array of strings representing the currently selected items.
30
30
  * @param updateSelected - A callback function that updates the list of selected items. Called when items are added or removed.
31
- * @param [listCssClass] - Additional CSS classes applied to the `<ul>` element containing the list of selected items.
32
- * @param [listElementCssClass] - Additional CSS classes applied to each `<li>` element representing an individual selected item.
33
- * @param [containerCssClass] - Additional CSS classes applied to the container `<div>` element wrapping the input and list.
34
- * @param [inputCssClass] - Additional CSS classes applied to the `<input>` element.
31
+ * @param [listClassName] - Additional CSS classes applied to the `<ul>` element containing the list of selected items.
32
+ * @param [listElementClassName] - Additional CSS classes applied to each `<li>` element representing an individual selected item.
33
+ * @param [containerClassName] - Additional CSS classes applied to the container `<div>` element wrapping the input and list.
34
+ * @param [inputClassName] - Additional CSS classes applied to the `<input>` element.
35
35
  */
36
36
  export declare const DialAutocompleteInput: FC<DialAutocompleteInputProps>;
package/dist/src/components/AutocompleteInput/AutocompleteInputValue.d.ts CHANGED
@@ -2,8 +2,8 @@ import { FC } from 'react';
2
2
  export interface DialAutocompleteInputValueProps {
3
3
  placeholder?: string;
4
4
  selectedItems?: string[];
5
- listCssClass?: string;
6
- listElementCssClass?: string;
5
+ listClassName?: string;
6
+ listElementClassName?: string;
7
7
  }
8
8
  /**
9
9
  * A component that displays a list of selected items in a customizable, styled list. Each item is
@@ -15,14 +15,14 @@ export interface DialAutocompleteInputValueProps {
15
15
  * ```tsx
16
16
  * <DialAutocompleteInputValue
17
17
  * selectedItems={['Item 1', 'Item 2', 'Item 3']}
18
- * listCssClass="custom-list-class"
19
- * listElementCssClass="custom-item-class"
18
+ * listClassName="custom-list-class"
19
+ * listElementClassName="custom-item-class"
20
20
  * />
21
21
  * ```
22
22
  *
23
23
  * @param [placeholder] - Placeholder text to display when no items are selected.
24
24
  * @param [selectedItems] - An array of strings representing the selected items to display. If empty or undefined, the component renders nothing.
25
- * @param [listCssClass] - Additional CSS classes applied to the `<ul>` element containing the list of selected items.
26
- * @param [listElementCssClass] - Additional CSS classes applied to each `<li>` element representing an individual selected item.
25
+ * @param [listClassName] - Additional CSS classes applied to the `<ul>` element containing the list of selected items.
26
+ * @param [listElementClassName] - Additional CSS classes applied to each `<li>` element representing an individual selected item.
27
27
  */
28
28
  export declare const DialAutocompleteInputValue: FC<DialAutocompleteInputValueProps>;
package/dist/src/components/Breadcrumb/Breadcrumb.d.ts CHANGED
@@ -4,9 +4,9 @@ export interface DialBreadcrumbProps {
4
4
  pathItems?: DialBreadcrumbPathItem[];
5
5
  separator?: ReactNode;
6
6
  ariaLabel?: string;
7
- cssClass?: string;
7
+ className?: string;
8
8
  children?: ReactNode;
9
- titleCssClass?: string;
9
+ titleClassName?: string;
10
10
  }
11
11
  /**
12
12
  * Breadcrumb navigation component with horizontal scroll on overflow.
@@ -31,11 +31,11 @@ export interface DialBreadcrumbProps {
31
31
  * </DialBreadcrumb>
32
32
  * ```
33
33
  *
34
- * @param pathItems - Array of breadcrumb pathItems (see `DialBreadcrumbItem`).
35
- * @param separator - Custom separator node (default: right chevron icon).
36
- * @param ariaLabel - Aria label for the `<nav>` element (default: "Breadcrumb").
37
- * @param cssClass - Additional CSS classes for the `<nav>` container.
38
- * @param children - Alternatively, compose with `<DialBreadcrumbItem/>` as children.
39
- * @param titleCssClass - Additional CSS classes applied to each item when using `pathItems` prop.
34
+ * @param [pathItems] - Array of breadcrumb pathItems (see `DialBreadcrumbItem`).
35
+ * @param [separator] - Custom separator node (default: right chevron icon).
36
+ * @param [ariaLabel] - Aria label for the `<nav>` element (default: "Breadcrumb").
37
+ * @param [className] - Additional CSS classes for the `<nav>` container.
38
+ * @param [children] - Alternatively, compose with `<DialBreadcrumbItem/>` as children.
39
+ * @param [titleClassName] - Additional CSS classes applied to each item when using `pathItems` prop.
40
40
  */
41
41
  export declare const DialBreadcrumb: FC<DialBreadcrumbProps>;
package/dist/src/components/Breadcrumb/BreadcrumbItem.d.ts CHANGED
@@ -5,8 +5,8 @@ export interface DialBreadcrumbItemProps {
5
5
  onClick?: MouseEventHandler<HTMLAnchorElement>;
6
6
  disabled?: boolean;
7
7
  iconBefore?: ReactNode;
8
- cssClass?: string;
9
- titleCssClass?: string;
8
+ className?: string;
9
+ titleClassName?: string;
10
10
  isLast?: boolean;
11
11
  separator?: ReactNode;
12
12
  }
package/dist/src/components/Breadcrumb/constants.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import { ReactNode } from 'react';
2
- export declare const breadcrumbBaseClasses = "w-full overflow-hidden";
3
- export declare const breadcrumbListClasses = "flex flex-nowrap items-center gap-2 min-w-0 px-0 py-0 whitespace-nowrap";
4
- export declare const breadcrumbItemBaseClasses = "flex items-center gap-2 min-w-0 shrink-0 dial-small";
5
- export declare const breadcrumbItemVisibleClasses = "max-w-[20%] basis-[20%] flex-none";
6
- export declare const breadcrumbItemLastClasses = "flex-1 min-w-0";
7
- export declare const breadcrumbLinkBaseClasses = "inline-flex items-center gap-1 min-w-0 transition-colors";
8
- export declare const breadcrumbLinkInteractiveClasses = "text-secondary hover:text-accent-primary";
9
- export declare const breadcrumbCurrentClasses = "text-primary cursor-default";
10
- export declare const breadcrumbSeparatorClasses = "flex-none inline-flex items-center leading-none text-icon-secondary";
11
- export declare const breadcrumbEllipsisButtonClasses = "items-center gap-1 min-w-0 transition-colors text-secondary hover:text-accent-primary";
2
+ export declare const breadcrumbBaseClassName = "w-full overflow-hidden";
3
+ export declare const breadcrumbListClassName = "flex flex-nowrap items-center gap-2 min-w-0 px-0 py-0 whitespace-nowrap";
4
+ export declare const breadcrumbItemBaseClassName = "flex items-center gap-2 min-w-0 shrink-0 dial-small";
5
+ export declare const breadcrumbItemVisibleClassName = "max-w-[20%] basis-[20%] flex-none";
6
+ export declare const breadcrumbItemLastClassName = "flex-1 min-w-0";
7
+ export declare const breadcrumbLinkBaseClassName = "inline-flex items-center gap-1 min-w-0 transition-colors";
8
+ export declare const breadcrumbLinkInteractiveClassName = "text-secondary hover:text-accent-primary";
9
+ export declare const breadcrumbCurrentClassName = "text-primary cursor-default";
10
+ export declare const breadcrumbSeparatorClassName = "flex-none inline-flex items-center leading-none text-secondary";
11
+ export declare const breadcrumbEllipsisButtonClassName = "items-center gap-1 min-w-0 transition-colors text-secondary hover:text-accent-primary";
12
12
  export declare const defaultSeparator: ReactNode;
package/dist/src/components/Button/Button.d.ts CHANGED
@@ -1,17 +1,12 @@
1
- import { FC, MouseEvent, ReactNode, Ref } from 'react';
1
+ import { ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from 'react';
2
2
  import { ButtonVariant } from '../../types/button';
3
- export interface DialButtonProps {
3
+ export interface DialButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
4
4
  variant?: ButtonVariant;
5
- cssClass?: string;
6
- textCssClass?: string;
7
- disable?: boolean;
8
- title?: string;
5
+ textClassName?: string;
6
+ label?: string;
9
7
  iconBefore?: ReactNode;
10
8
  iconAfter?: ReactNode;
11
- onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
12
- ref?: Ref<HTMLButtonElement>;
13
9
  hideTitleOnMobile?: boolean;
14
- ariaLabel?: string;
15
10
  }
16
11
  /**
17
12
  * A Button component with flexible icon and text positioning
@@ -19,23 +14,20 @@ export interface DialButtonProps {
19
14
  * @example
20
15
  * ```tsx
21
16
  * <DialButton
22
- * title="Click me"
17
+ * label="Click me"
23
18
  * onClick={handleClick}
24
19
  * iconBefore={<Icon />}
25
- * cssClass="custom-button"
20
+ * className="custom-button"
26
21
  * />
27
22
  * ```
28
23
  *
29
- * @param [title] - The text content of the button
24
+ * inherits all properties from the `ButtonHTMLAttributes<HTMLButtonElement>`
25
+ *
26
+ * @param [label] - The text content of the button
30
27
  * @param [variant=ButtonVariant.Primary] - Defines the visual style of the button
31
- * @param [cssClass] - Additional CSS classes to apply to the button
32
- * @param [textCssClass] - Additional CSS classes to apply specifically to the button text
33
- * @param [onClick] - Click event handler for the button
34
- * @param [disable=false] - Whether the button should be disabled
28
+ * @param [textClassName] - Additional CSS classes to apply specifically to the button text
35
29
  * @param [iconAfter] - Icon or element to display after the button text
36
30
  * @param [iconBefore] - Icon or element to display before the button text
37
31
  * @param [hideTitleOnMobile=false] - Whether to hide the title text on mobile devices
38
- * @param [ariaLabel] - Accessible label for screen readers when no title is provided
39
- * @param [ref] - Ref to access the button DOM element
40
32
  */
41
33
  export declare const DialButton: FC<DialButtonProps>;
package/dist/src/components/Checkbox/Checkbox.d.ts CHANGED
@@ -7,7 +7,7 @@ export interface DialCheckboxProps {
7
7
  indeterminate?: boolean;
8
8
  ariaLabel?: string;
9
9
  onChange?: (value?: boolean, id?: string) => void;
10
- cssClass?: string;
10
+ className?: string;
11
11
  }
12
12
  /**
13
13
  * A Checkbox component with styling options
@@ -30,6 +30,6 @@ export interface DialCheckboxProps {
30
30
  * @param [indeterminate=false] - indeterminate state
31
31
  * @param [ariaLabel] - Accessible label for screen readers when no title is provided
32
32
  * @param [onChange] - Callback function called when the checkbox value changes
33
- * @param [cssClass] - Additional CSS classes to apply to the checkbox wrapper
33
+ * @param [className] - Additional CSS classes to apply to the checkbox wrapper
34
34
  */
35
35
  export declare const DialCheckbox: FC<DialCheckboxProps>;
package/dist/src/components/CloseButton/CloseButton.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { FC, MouseEvent } from 'react';
2
2
  export interface DialCloseButtonProps {
3
3
  ariaLabel?: string;
4
- cssClass?: string;
4
+ className?: string;
5
5
  size?: number;
6
6
  onClose: (e: MouseEvent<HTMLButtonElement>) => void;
7
+ disabled?: boolean;
7
8
  }
8
9
  /**
9
10
  * A Close button component with a customizable icon and accessible label.
@@ -13,14 +14,15 @@ export interface DialCloseButtonProps {
13
14
  * <DialCloseButton
14
15
  * ariaLabel="Close dialog"
15
16
  * onClose={handleClose}
16
- * cssClass="custom-close"
17
+ * className="custom-close"
17
18
  * size={32}
18
19
  * />
19
20
  * ```
20
21
  *
21
22
  * @param [ariaLabel] - Accessible label for screen readers
22
- * @param [cssClass] - Additional CSS classes to apply to the button
23
+ * @param [className] - Additional CSS classes to apply to the button
23
24
  * @param [size=24] - Size of the close icon
24
25
  * @param onClose - Click event handler for the close button
26
+ * @param [disabled] - Whether the button is disabled
25
27
  */
26
28
  export declare const DialCloseButton: FC<DialCloseButtonProps>;
package/dist/src/components/CollapsibleSidebar/CollapsibleSidebar.d.ts CHANGED
@@ -3,8 +3,8 @@ export interface DialCollapsibleSidebarProps {
3
3
  children: ReactNode;
4
4
  width?: number;
5
5
  title: string;
6
- titleCssClass?: string;
7
- containerCssClass?: string;
6
+ titleClassName?: string;
7
+ containerClassName?: string;
8
8
  iconSize?: number;
9
9
  additionalButtons?: ReactNode;
10
10
  iconStroke?: number;
@@ -20,8 +20,8 @@ export interface DialCollapsibleSidebarProps {
20
20
  * <DialCollapsibleSidebar
21
21
  * width={300}
22
22
  * title="Menu"
23
- * titleCssClass="text-primary font-bold"
24
- * containerCssClass="bg-gray-100 shadow-md"
23
+ * titleClassName="text-primary font-bold"
24
+ * containerClassName="bg-gray-100 shadow-md"
25
25
  * iconSize={24}
26
26
  * additionalButtons={<button>Extra</button>}
27
27
  * >
@@ -32,8 +32,8 @@ export interface DialCollapsibleSidebarProps {
32
32
  * @param children - The content to display inside the collapsible bar when expanded
33
33
  * @param [width = 280] - The width of the bar when expanded
34
34
  * @param title - The title displayed when the bar is collapsed
35
- * @param [titleCssClass] - Additional CSS classes applied to the title element
36
- * @param [containerCssClass] - Additional CSS classes applied to the container element
35
+ * @param [titleClassName] - Additional CSS classes applied to the title element
36
+ * @param [containerClassName] - Additional CSS classes applied to the container element
37
37
  * @param [iconSize = 32] - The size of the toggle icons. Defaults to 32
38
38
  * @param [iconStroke = 1.5] - The stroke width of the toggle icons. Defaults to 1.5
39
39
  * @param [additionalButtons] - Additional buttons or elements displayed next to the toggle button when expanded
package/dist/src/components/ConfirmationPopup/ConfirmationPopup.d.ts CHANGED
@@ -3,7 +3,7 @@ import { DialPopupProps } from '../Popup/Popup';
3
3
  import { ConfirmationPopupVariant } from '../../types/confirmation-popup';
4
4
  export interface DialConfirmationPopupProps extends DialPopupProps {
5
5
  description?: string | ReactNode;
6
- descriptionCssClass?: string;
6
+ descriptionClassName?: string;
7
7
  confirmLabel?: string;
8
8
  cancelLabel?: string;
9
9
  isLoading?: boolean;
@@ -34,13 +34,13 @@ export interface DialConfirmationPopupProps extends DialPopupProps {
34
34
  *
35
35
  * @param title - Title content for the header
36
36
  * @param [description] - Secondary text (ignored when `children` set)
37
- * @param [descriptionCssClass] - Custom CSS class for the description
37
+ * @param [descriptionClassName] - Custom CSS class for the description
38
38
  * @param [open=false] - Controls visibility of the popup
39
39
  * @param [confirmLabel="Ok"] - Label for the confirm button
40
40
  * @param [cancelLabel="Cancel"] - Label for the cancel button
41
41
  * @param [isLoading=false] - Shows loader placeholder and hides actions
42
42
  * @param [disableConfirmButton=false] - Disables the confirm button
43
- * @param [cssClass] - Extra classes for the popup container
43
+ * @param [className] - Extra classes for the popup container
44
44
  * @param [confirmClassName] - Extra classes merged into the confirm button
45
45
  * @param onClose - Fired on close
46
46
  * @param onConfirm - Fired on confirm
package/dist/src/components/ConfirmationPopup/constants.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import { ButtonVariant } from '../../types/button';
2
2
  import { ConfirmationPopupVariant } from '../../types/confirmation-popup';
3
- export declare const actionsBaseClasses = "flex justify-end gap-2 px-6 py-4";
4
- export declare const descriptionBaseClasses = "text-secondary dial-small-150 px-6 py-4";
3
+ export declare const actionsBaseClassName = "flex justify-end gap-2 px-6 py-4";
4
+ export declare const descriptionBaseClassName = "text-secondary dial-small-150 px-6 py-4";
5
5
  export declare const defaultCancelLabel = "Cancel";
6
6
  export declare const defaultConfirmLabel = "Ok";
7
7
  export declare const variantConfig: Record<ConfirmationPopupVariant, {
8
8
  container?: string;
9
9
  confirmVariant: ButtonVariant;
10
- confirmClass?: string;
10
+ confirmClassName?: string;
11
11
  cancelVariant: ButtonVariant;
12
12
  }>;
package/dist/src/components/DraggableItem/DraggableItem.d.ts CHANGED
@@ -2,10 +2,10 @@ import { FC, ReactNode } from 'react';
2
2
  export interface DialDraggableItemProps {
3
3
  id: string;
4
4
  children: ReactNode;
5
- cssClass?: string;
6
- findItem?: (field: string) => number;
7
- moveItem?: (field: string, atIndex: number) => void;
8
- handleAriaLabel?: string;
5
+ className?: string;
6
+ ariaLabel?: string;
7
+ onFind?: (field: string) => number;
8
+ onMove?: (field: string, atIndex: number) => void;
9
9
  }
10
10
  /**
11
11
  * A lightweight wrapper that makes its children sortable via drag-and-drop.
@@ -23,9 +23,9 @@ export interface DialDraggableItemProps {
23
23
  *
24
24
  * @param id - Unique identifier of the draggable item
25
25
  * @param children - Content rendered within the draggable row
26
- * @param [cssClass] - Additional CSS classes applied to the root container
27
- * @param [findItem] - Function to resolve an item's current index by id
28
- * @param [moveItem] - Function to move an item (by id) to a target index
29
- * @param [handleAriaLabel='Drag item'] - Accessible label for the handle
26
+ * @param [className] - Additional CSS classes applied to the root container
27
+ * @param [onFind] - Function to resolve an item's current index by id
28
+ * @param [onMove] - Function to move an item (by id) to a target index
29
+ * @param [ariaLabel='Drag item'] - Accessible label for the handle
30
30
  */
31
31
  export declare const DialDraggableItem: FC<DialDraggableItemProps>;
package/dist/src/components/DraggableItem/constants.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export declare const DRAG_TYPE = "column";
2
- export declare const containerBaseClasses = "flex items-center";
3
- export declare const handleBaseClasses = "mr-3 cursor-move text-secondary";
2
+ export declare const containerBaseClassName = "flex items-center";
3
+ export declare const handleBaseClassName = "mr-3 cursor-move text-secondary";
package/dist/src/components/Dropdown/Dropdown.d.ts CHANGED
@@ -24,12 +24,13 @@ export interface DialDropdownProps {
24
24
  onOpenChange?: (open: boolean) => void;
25
25
  closable?: boolean;
26
26
  onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
27
- cssClass?: string;
27
+ className?: string;
28
28
  listClassName?: string;
29
29
  outsidePressIgnoreRef?: RefObject<HTMLElement | null>;
30
30
  outsideClosable?: boolean;
31
31
  anchorToMouse?: boolean;
32
32
  matchReferenceWidth?: boolean;
33
+ maxDropdownHeight?: number | null;
33
34
  }
34
35
  /**
35
36
  *
@@ -68,11 +69,12 @@ export interface DialDropdownProps {
68
69
  * @param [onOpenChange] - Fired whenever the open state changes
69
70
  * @param [closable=false] - Whether the overlay shows an internal close button
70
71
  * @param [onClose] - Fired when the close button inside the overlay is clicked
71
- * @param [cssClass] - Additional CSS classes applied to the trigger wrapper
72
+ * @param [className] - Additional CSS classes applied to the trigger wrapper
72
73
  * @param [listClassName] - Additional CSS classes applied to the floating overlay
73
74
  * @param [outsidePressIgnoreRef] - Ref to an element that should not trigger outside press behavior
74
75
  * @param [outsideClosable=true] - Whether clicks outside the overlay should close it
75
76
  * @param [anchorToMouse=false] - Whether to anchor the dropdown to the mouse position
76
77
  * @param [matchReferenceWidth=false] - Whether to match the reference element's width
78
+ * @param [maxDropdownHeight] - Maximum height of the dropdown menu; when omitted, no limit is applied
77
79
  */
78
80
  export declare const DialDropdown: FC<DialDropdownProps>;
package/dist/src/components/Dropdown/constants.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- export declare const dropdownBaseClasses: string;
2
- export declare const dropdownListBaseClasses: string;
3
- export declare const dropdownItemBaseClasses: string;
4
- export declare const dropdownItemDisabledClasses = "opacity-75 !cursor-not-allowed";
5
- export declare const dropdownItemDangerClasses = "text-error";
6
- export declare const dropdownDividerClasses = "my-1 border-t border-hover border-secondary";
7
- export declare const dropdownGap = 8;
1
+ export declare const dropdownBaseClassName: string;
2
+ export declare const dropdownListBaseClassName: string;
3
+ export declare const dropdownItemBaseClassName: string;
4
+ export declare const dropdownItemDisabledClassName = "opacity-75 !cursor-not-allowed";
5
+ export declare const dropdownItemDangerClassName = "text-error";
6
+ export declare const dropdownDividerClassName = "my-1 border-t border-hover border-secondary";
7
+ export declare const dropdownGap = 4;
8
8
  export declare const submenuCaretIcon: import("react/jsx-runtime").JSX.Element;
package/dist/src/components/EllipsisTooltip/EllipsisTooltip.d.ts CHANGED
@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
2
2
  import { DialTooltipContainerOptions } from '../Tooltip/TooltipContext';
3
3
  export interface DialEllipsisTooltipProps extends DialTooltipContainerOptions {
4
4
  text: string | ReactNode;
5
- cssClass?: string;
5
+ className?: string;
6
6
  contentClassName?: string;
7
7
  hideTooltip?: boolean;
8
8
  }
@@ -11,19 +11,19 @@ export interface DialEllipsisTooltipProps extends DialTooltipContainerOptions {
11
11
  * If the text fits, tooltip content is empty and the popup stays hidden.
12
12
  *
13
13
  * Important: width must be finite for truncation.
14
- * Consumers can override via `cssClass`.
14
+ * Consumers can override via `className`.
15
15
  *
16
16
  * a11y: when truncated, the full text is exposed via `aria-label` on the reference node.
17
17
  *
18
18
  * @example
19
19
  * ```tsx
20
20
  * <DialEllipsisTooltip text="Very long message that will be truncated" />
21
- * <DialEllipsisTooltip text={<span className="font-medium">Custom node</span>} cssClass="max-w-[160px]" />
21
+ * <DialEllipsisTooltip text={<span className="font-medium">Custom node</span>} className="max-w-[160px]" />
22
22
  * <DialEllipsisTooltip text="Tooltip disabled even if truncated" hideTooltip />
23
23
  * ```
24
24
  *
25
25
  * @param text The text or node to display (truncated with ellipsis if too long).
26
- * @param cssClass Optional additional CSS classes for the text container (e.g. to set width).
26
+ * @param className Optional additional CSS classes for the text container (e.g. to set width).
27
27
  * @param contentClassName Optional additional CSS classes for the tooltip content.
28
28
  * @param hideTooltip If true, disables the tooltip even if text is truncated.
29
29
  * @param tooltipProps Additional props to pass to the underlying DialTooltipContainer.
package/dist/src/components/EllipsisTooltip/constants.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const tooltipContentBaseClasses = "text-primary";
1
+ export declare const tooltipContentBaseClassName = "text-primary";