@epam/ai-dial-ui-kit 0.4.0-rc.5 → 0.4.0-rc.51

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 (68) hide show
  1. package/dist/dial-ui-kit.cjs.js +28 -28
  2. package/dist/dial-ui-kit.es.js +8941 -7854
  3. package/dist/index.css +2 -2
  4. package/dist/src/components/AutocompleteInput/AutocompleteInputValue.d.ts +2 -0
  5. package/dist/src/components/Breadcrumb/BreadcrumbItem.d.ts +2 -2
  6. package/dist/src/components/Breadcrumb/constants.d.ts +4 -1
  7. package/dist/src/components/Checkbox/Checkbox.d.ts +2 -2
  8. package/dist/src/components/CollapsibleSidebar/CollapsibleSidebar.d.ts +7 -3
  9. package/dist/src/components/FileManager/FileManager.d.ts +47 -14
  10. package/dist/src/components/FileManager/FileManagerContext.d.ts +56 -0
  11. package/dist/src/components/FileManager/FileManagerProvider.d.ts +17 -0
  12. package/dist/src/components/FileManager/components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar.d.ts +53 -0
  13. package/dist/src/components/FileManager/components/FileManagerBulkActionsToolbar/constants.d.ts +3 -0
  14. package/dist/src/components/FileManager/components/FileManagerItemIcon/FileManagerItemIcon.d.ts +46 -0
  15. package/dist/src/components/FileManager/components/FileManagerItemName/FileManagerItemName.d.ts +48 -0
  16. package/dist/src/components/FileManager/components/FileManagerItemNameInput/FileManagerItemNameInput.d.ts +65 -0
  17. package/dist/src/components/FileManager/components/FileManagerToolbar/DialFileManagerToolbar.d.ts +27 -24
  18. package/dist/src/components/FileManager/components/FoldersTree/FoldersTree.d.ts +23 -3
  19. package/dist/src/components/FileManager/constants.d.ts +1 -1
  20. package/dist/src/components/FileManager/hooks/__tests__/use-current-path.spec.d.ts +1 -0
  21. package/dist/src/components/FileManager/hooks/__tests__/use-file-clipboard.spec.d.ts +1 -0
  22. package/dist/src/components/FileManager/hooks/__tests__/use-show-hidden-files.spec.d.ts +1 -0
  23. package/dist/src/components/FileManager/hooks/use-collapse-tree.d.ts +9 -0
  24. package/dist/src/components/FileManager/hooks/use-current-path.d.ts +10 -0
  25. package/dist/src/components/FileManager/hooks/use-file-clipboard.d.ts +20 -0
  26. package/dist/src/components/FileManager/hooks/use-file-manager-context.d.ts +5 -0
  27. package/dist/src/components/FileManager/hooks/use-item-renaming.d.ts +13 -0
  28. package/dist/src/components/FileManager/hooks/use-show-hidden-files.d.ts +5 -0
  29. package/dist/src/components/FileManager/utils.d.ts +1 -0
  30. package/dist/src/components/Grid/Grid.d.ts +9 -1
  31. package/dist/src/components/Grid/comparators/base-column-comparator.spec.d.ts +1 -0
  32. package/dist/src/components/Grid/constants.d.ts +0 -1
  33. package/dist/src/components/Grid/renderers/DateCellRenderer.d.ts +32 -0
  34. package/dist/src/components/Grid/renderers/constants.d.ts +3 -0
  35. package/dist/src/components/Grid/renderers/utils.d.ts +2 -0
  36. package/dist/src/components/Grid/renderers/utils.spec.d.ts +1 -0
  37. package/dist/src/components/Input/Input.d.ts +4 -1
  38. package/dist/src/components/InputPopup/InputPopup.d.ts +6 -2
  39. package/dist/src/components/NoDataContent/NoDataContent.d.ts +3 -0
  40. package/dist/src/components/Search/Search.d.ts +2 -0
  41. package/dist/src/components/Select/MultiSelectTags.d.ts +2 -2
  42. package/dist/src/components/Select/Select.d.ts +7 -0
  43. package/dist/src/components/Select/constants.d.ts +1 -1
  44. package/dist/src/components/SelectField/SelectField.d.ts +5 -0
  45. package/dist/src/components/Steps/tests/utils.spec.d.ts +1 -0
  46. package/dist/src/components/Tab/Tab.d.ts +1 -4
  47. package/dist/src/components/Tabs/Tabs.d.ts +27 -14
  48. package/dist/src/components/Tag/Tag.d.ts +2 -2
  49. package/dist/src/components/Tooltip/Tooltip.d.ts +2 -2
  50. package/dist/src/components/Tooltip/TooltipContent.d.ts +5 -2
  51. package/dist/src/components/Tooltip/TooltipTrigger.d.ts +6 -4
  52. package/dist/src/hooks/use-editable-item.d.ts +64 -0
  53. package/dist/src/hooks/use-flexible-actions.d.ts +86 -0
  54. package/dist/src/hooks/use-is-mobile-screen.d.ts +15 -0
  55. package/dist/src/hooks/use-screen-type.d.ts +19 -0
  56. package/dist/src/index.d.ts +10 -4
  57. package/dist/src/models/dropdown.d.ts +2 -2
  58. package/dist/src/models/select.d.ts +1 -0
  59. package/dist/src/models/tab.d.ts +1 -0
  60. package/dist/src/types/file-manager.d.ts +13 -0
  61. package/dist/src/types/flexible-actions.d.ts +4 -0
  62. package/dist/src/types/item.d.ts +4 -0
  63. package/dist/src/types/screen.d.ts +6 -0
  64. package/dist/src/types/select.d.ts +8 -0
  65. package/dist/src/types/tab.d.ts +4 -0
  66. package/dist/src/utils/merge-classes.spec.d.ts +1 -0
  67. package/dist/src/utils/mobile.d.ts +35 -0
  68. package/package.json +8 -8
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}}@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}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.-bottom-0\.5{bottom:-.125rem}.-left-0\.5{left:-.125rem}.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}.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}.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-\[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-\[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-\[10px\]{width:10px}.w-\[160px\]{width:160px}.w-\[18px\]{width:18px}.w-\[22px\]{width:22px}.w-\[250px\]{width:250px}.w-\[260px\]{width:260px}.w-\[280px\]{width:280px}.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-\[800px\]{width:800px}.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-\[1000px\]{max-width:1000px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1400px\]{max-width:1400px}.max-w-\[160px\]{max-width:160px}.max-w-\[200px\]{max-width:200px}.max-w-\[300px\]{max-width:300px}.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-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}.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-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-2,.border-b-\[2px\]{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-2{border-top-width:2px}.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-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-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-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-\[6px\]{padding-top:6px;padding-bottom:6px}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-\[6px\]{padding-bottom:6px}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-\[6px\]{padding-right:6px}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.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-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}.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-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)}.underline{text-decoration-line:underline}.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\: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-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}.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-\[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}.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-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}.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\: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,5 +1,6 @@
1
1
  import { FC } from 'react';
2
2
  export interface DialAutocompleteInputValueProps {
3
+ placeholder?: string;
3
4
  selectedItems?: string[];
4
5
  listCssClass?: string;
5
6
  listElementCssClass?: string;
@@ -19,6 +20,7 @@ export interface DialAutocompleteInputValueProps {
19
20
  * />
20
21
  * ```
21
22
  *
23
+ * @param [placeholder] - Placeholder text to display when no items are selected.
22
24
  * @param [selectedItems] - An array of strings representing the selected items to display. If empty or undefined, the component renders nothing.
23
25
  * @param [listCssClass] - Additional CSS classes applied to the `<ul>` element containing the list of selected items.
24
26
  * @param [listElementCssClass] - Additional CSS classes applied to each `<li>` element representing an individual selected item.
@@ -1,8 +1,8 @@
1
- import { FC, ReactNode } from 'react';
1
+ import { FC, MouseEventHandler, ReactNode } from 'react';
2
2
  export interface DialBreadcrumbItemProps {
3
3
  title: ReactNode;
4
4
  href?: string;
5
- onClick?: React.MouseEventHandler<HTMLAnchorElement>;
5
+ onClick?: MouseEventHandler<HTMLAnchorElement>;
6
6
  disabled?: boolean;
7
7
  iconBefore?: ReactNode;
8
8
  cssClass?: string;
@@ -1,9 +1,12 @@
1
1
  import { ReactNode } from 'react';
2
- export declare const breadcrumbBaseClasses = "w-full overflow-x-auto";
2
+ export declare const breadcrumbBaseClasses = "w-full overflow-hidden";
3
3
  export declare const breadcrumbListClasses = "flex flex-nowrap items-center gap-2 min-w-0 px-0 py-0 whitespace-nowrap";
4
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";
5
7
  export declare const breadcrumbLinkBaseClasses = "inline-flex items-center gap-1 min-w-0 transition-colors";
6
8
  export declare const breadcrumbLinkInteractiveClasses = "text-secondary hover:text-accent-primary";
7
9
  export declare const breadcrumbCurrentClasses = "text-primary cursor-default";
8
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";
9
12
  export declare const defaultSeparator: ReactNode;
@@ -1,7 +1,7 @@
1
- import { FC } from 'react';
1
+ import { FC, ReactNode } from 'react';
2
2
  export interface DialCheckboxProps {
3
3
  id: string;
4
- label?: string | React.ReactNode;
4
+ label?: string | ReactNode;
5
5
  checked: boolean;
6
6
  disabled?: boolean;
7
7
  indeterminate?: boolean;
@@ -1,13 +1,15 @@
1
- import { FC, ReactNode } from 'react';
1
+ import { FC, ReactNode, MouseEvent } from 'react';
2
2
  export interface DialCollapsibleSidebarProps {
3
3
  children: ReactNode;
4
- width: number;
4
+ width?: number;
5
5
  title: string;
6
6
  titleCssClass?: string;
7
7
  containerCssClass?: string;
8
8
  iconSize?: number;
9
9
  additionalButtons?: ReactNode;
10
10
  iconStroke?: number;
11
+ isOpened?: boolean;
12
+ onToggle?: (nextOpened: boolean, e: MouseEvent<HTMLButtonElement>) => void;
11
13
  }
12
14
  /**
13
15
  * A collapsible horizontal bar component that allows toggling between an expanded and collapsed state.
@@ -28,12 +30,14 @@ export interface DialCollapsibleSidebarProps {
28
30
  * ```
29
31
  *
30
32
  * @param children - The content to display inside the collapsible bar when expanded
31
- * @param width - The width of the bar when expanded
33
+ * @param [width = 280] - The width of the bar when expanded
32
34
  * @param title - The title displayed when the bar is collapsed
33
35
  * @param [titleCssClass] - Additional CSS classes applied to the title element
34
36
  * @param [containerCssClass] - Additional CSS classes applied to the container element
35
37
  * @param [iconSize = 32] - The size of the toggle icons. Defaults to 32
36
38
  * @param [iconStroke = 1.5] - The stroke width of the toggle icons. Defaults to 1.5
37
39
  * @param [additionalButtons] - Additional buttons or elements displayed next to the toggle button when expanded
40
+ * @param [isOpened] - When provided, the component becomes controlled by this value
41
+ * @param [onToggle] - Fired when user clicks the toggle in controlled mode, with the next state
38
42
  */
39
43
  export declare const DialCollapsibleSidebar: FC<DialCollapsibleSidebarProps>;
@@ -1,41 +1,54 @@
1
1
  import { FC, ReactNode } from 'react';
2
2
  import { ColDef } from 'ag-grid-community';
3
- import { DialFile, DialFileNodeType } from '../../models/file';
3
+ import { DialFile } from '../../models/file';
4
4
  import { DialFoldersTreeProps } from './components/FoldersTree/FoldersTree';
5
5
  import { DialFileManagerNavigationPanelProps } from './components/FileManagerNavigationPanel/FileManagerNavigationPanel';
6
6
  import { DialGridProps } from '../Grid/Grid';
7
7
  import { DialFileManagerToolbarProps } from './components/FileManagerToolbar/DialFileManagerToolbar';
8
- interface GridRow {
9
- id: string;
10
- name: string;
11
- updatedAt?: string;
12
- size?: string;
13
- author?: string;
14
- path: string;
15
- nodeType: DialFileNodeType;
16
- extension?: string;
17
- }
8
+ import { DialFileManagerBulkActionsToolbarProps } from './components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar';
9
+ import { DialFileManagerActions, DialCopiedItem } from '../../types/file-manager';
10
+ import { FileManagerGridRow } from './FileManagerContext';
11
+ type GridRow = FileManagerGridRow;
18
12
  export interface FileTreeOptions extends Omit<DialFoldersTreeProps, 'items' | 'selectedPath' | 'onItemClick'> {
19
13
  width?: number;
20
14
  title?: string;
21
15
  containerCssClass?: string;
22
16
  additionalButtons?: ReactNode;
17
+ collapsed?: boolean;
18
+ onCollapseChange?: (collapsed: boolean) => void;
19
+ actionLabels?: {
20
+ [DialFileManagerActions.Copy]?: string;
21
+ [DialFileManagerActions.Cut]?: string;
22
+ [DialFileManagerActions.Paste]?: string;
23
+ [DialFileManagerActions.Rename]?: string;
24
+ };
23
25
  }
24
26
  export type NavigationPanelOptions = Omit<DialFileManagerNavigationPanelProps, 'path' | 'makeHref' | 'onItemClick'>;
25
27
  export interface GridOptions extends Omit<DialGridProps<GridRow>, 'rowData' | 'columnDefs'> {
26
28
  columnDefs?: ColDef<GridRow>[];
27
29
  filterable?: boolean;
30
+ dateLocale?: Intl.LocalesArgument;
31
+ dateOptions?: Intl.DateTimeFormatOptions;
28
32
  }
33
+ export type ToolbarOptions = Omit<DialFileManagerToolbarProps, 'areHiddenFilesVisible' | 'onToggleHiddenFiles'>;
34
+ export type BulkActionsToolbarOptions = Omit<DialFileManagerBulkActionsToolbarProps, 'onClearSelection'>;
29
35
  export interface DialFileManagerProps {
30
36
  path?: string;
31
37
  cssClass?: string;
32
38
  items?: DialFile[];
33
39
  treeOptions?: FileTreeOptions;
34
- toolbarOptions?: DialFileManagerToolbarProps;
40
+ toolbarOptions?: ToolbarOptions;
35
41
  navigationPanelOptions?: NavigationPanelOptions;
36
42
  gridOptions?: GridOptions;
43
+ bulkActionsToolbarOptions?: BulkActionsToolbarOptions;
37
44
  onPathChange?: (nextPath?: string) => void;
38
45
  onTableFileClick?: (file: GridRow) => void;
46
+ onCopyFiles?: (items: DialCopiedItem[]) => void;
47
+ onMoveToFiles?: (items: DialCopiedItem[]) => void;
48
+ onRename?: (itemPath: string) => void;
49
+ onRenameSave?: (value: string) => void;
50
+ onRenameCancel?: () => void;
51
+ onRenameValidate?: (value: string, item: DialFile) => string | null;
39
52
  }
40
53
  /**
41
54
  * File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.
@@ -45,6 +58,7 @@ export interface DialFileManagerProps {
45
58
  * - The grid shows children of the current folder. When a search query is present, it scans all nested descendants.
46
59
  * - Pluggable tree, navigation panel, and grid behaviors via `treeOptions`, `navigationPanelOptions`, and `gridOptions`.
47
60
  * - Optional filters toggle via `gridOptions.filterable` (default `true`).
61
+ * - Supports bulk actions toolbar when items are selected.
48
62
  *
49
63
  * @example
50
64
  * ```tsx
@@ -69,17 +83,36 @@ export interface DialFileManagerProps {
69
83
  * items={files}
70
84
  * treeOptions={{ width: 300, title: 'Explorer', showFiles: true }}
71
85
  * />
86
+ *
87
+ * // With explicit provider (advanced apps)
88
+ * <FileManagerProvider items={files} path="/All files">
89
+ * <MyCustomHeader />
90
+ * <DialFileManagerView /> // internal view
91
+ * <MyCustomFooter />
92
+ * </FileManagerProvider>
72
93
  * ```
73
94
  *
74
- * @param [path] - Absolute path of the current location (e.g., "/All files/Design/Icons")
95
+ * @param [path] - Absolute path of the current location (e.g. "/All files/Design/Icons")
75
96
  * @param [cssClass] - Additional classes for the root container
76
97
  * @param [items] - Full hierarchical list of files and folders used by both tree and grid
98
+ *
77
99
  * @param [treeOptions] - Options that configure the collapsible sidebar and folders tree
78
100
  * @param [navigationPanelOptions] - Options for the breadcrumb and search panel (value/onSearchChange for controlled search)
79
101
  * @param [toolbarOptions] - Options for the file manager toolbar
80
- * @param [gridOptions] - Options forwarded to `DialGrid`; supports `columnDefs` override and `filterable` flag
102
+ * @param [gridOptions] - Options forwarded to `DialGrid`; supports `columnDefs` override and `filterable` flag and date locale/options
103
+ * @param [bulkActionsToolbarOptions] - Options for the bulk actions toolbar shown when items are selected
104
+ *
81
105
  * @param [onPathChange] - Callback fired when user navigates via tree or breadcrumb
82
106
  * @param [onTableFileClick] - Callback fired when a file row is clicked in the grid
107
+ *
108
+ * @param [onCopyFiles] - Callback fired when files copy-paste
109
+ * @param [onMoveToFiles] - Callback fired when files cut-paste or rename
83
110
  */
84
111
  export declare const DialFileManager: FC<DialFileManagerProps>;
112
+ /**
113
+ * Internal view-only component.
114
+ * Reads all data from FileManagerContext and renders the actual layout.
115
+ * This is what apps can reuse if they want to control the provider manually.
116
+ */
117
+ export declare const DialFileManagerView: FC;
85
118
  export {};
@@ -0,0 +1,56 @@
1
+ import { DialFile, DialFileNodeType } from '../../models/file';
2
+ import { FileTreeOptions, NavigationPanelOptions, GridOptions, ToolbarOptions, BulkActionsToolbarOptions, DialFileManagerProps } from './FileManager';
3
+ export interface FileManagerGridRow {
4
+ id: string;
5
+ name: string;
6
+ updatedAt?: string;
7
+ size?: string;
8
+ author?: string;
9
+ path: string;
10
+ nodeType: DialFileNodeType;
11
+ extension?: string;
12
+ }
13
+ export interface FileManagerContextValue {
14
+ cssClass?: string;
15
+ items: DialFile[];
16
+ treeOptions?: FileTreeOptions;
17
+ navigationPanelOptions?: NavigationPanelOptions;
18
+ gridOptions?: GridOptions;
19
+ toolbarOptions?: ToolbarOptions;
20
+ bulkActionsToolbarOptions?: BulkActionsToolbarOptions;
21
+ currentPath?: string;
22
+ setCurrentPath: (p?: string) => void;
23
+ searchValue: string;
24
+ effectiveSearchValue: string;
25
+ setSearchValue: (v: string) => void;
26
+ areHiddenFilesVisible: boolean;
27
+ toggleHiddenFilesVisibility: () => void;
28
+ isTreeCollapsed: boolean;
29
+ toggleTreeCollapse: () => void;
30
+ setIsTreeCollapsed: (value: boolean) => void;
31
+ selectedIds: Set<string>;
32
+ setSelectedIds: (next: Set<string>) => void;
33
+ clearSelection: () => void;
34
+ currentFolder?: DialFile;
35
+ gridRows: FileManagerGridRow[];
36
+ clipboard: {
37
+ copied: Set<string>;
38
+ cut: Set<string>;
39
+ hasItems: boolean;
40
+ };
41
+ onCopy: (files: string[]) => void;
42
+ onCut: (files: string[]) => void;
43
+ onPaste: (overwrite?: boolean) => void;
44
+ renamedPath?: string;
45
+ onRename: (file: string) => void;
46
+ onRenameSave: (value: string) => void;
47
+ onRenameCancel: () => void;
48
+ onRenameValidate: (value: string, item: DialFile) => string | null;
49
+ handlePathChange: (nextPath?: string) => void;
50
+ handleTreeItemClick: (item: DialFile) => void;
51
+ handleBreadcrumbItemClick: (href?: string) => void;
52
+ handleSearchChange: (value?: string) => void;
53
+ handleTableRowClick: (row: FileManagerGridRow) => void;
54
+ onTableFileClick?: DialFileManagerProps['onTableFileClick'];
55
+ }
56
+ export declare const FileManagerContext: import('react').Context<FileManagerContextValue | undefined>;
@@ -0,0 +1,17 @@
1
+ import { FC, ReactNode } from 'react';
2
+ import { DialFileManagerProps } from './FileManager';
3
+ export interface FileManagerProviderProps extends Omit<DialFileManagerProps, 'children'> {
4
+ children: ReactNode;
5
+ }
6
+ /**
7
+ * Provider that encapsulates all File Manager business logic:
8
+ * - path & navigation
9
+ * - search (controlled + uncontrolled)
10
+ * - hidden files toggle
11
+ * - tree collapsed state
12
+ * - selection
13
+ * - clipboard (copy / cut / paste)
14
+ * - computed grid rows
15
+ *
16
+ */
17
+ export declare const FileManagerProvider: FC<FileManagerProviderProps>;
@@ -0,0 +1,53 @@
1
+ import { FC } from 'react';
2
+ import { DropdownItem } from '../../../../models/dropdown';
3
+ export interface DialActionDropdownItem extends DropdownItem {
4
+ title: string;
5
+ }
6
+ export interface DialFileManagerBulkActionsToolbarProps {
7
+ selectionLabel: string;
8
+ onClearSelection: () => void;
9
+ actions: DialActionDropdownItem[];
10
+ }
11
+ /**
12
+ * A responsive toolbar component displayed when files or items are selected
13
+ * in the file manager. It shows a label with the number or name of selected
14
+ * items and provides contextual action buttons.
15
+ *
16
+ * On smaller screens or when there’s not enough horizontal space,
17
+ * some action buttons are automatically moved into a dropdown menu.
18
+ *
19
+ * **Key Features:**
20
+ * - Dynamically measures available container width to determine how many actions
21
+ * can fit inline.
22
+ * - Uses a hidden measurement container to precisely calculate button widths.
23
+ * - Automatically moves overflow actions into a "More" dropdown (`IconDotsVertical`).
24
+ * - Responsive design with support for mobile layout via `useIsMobileScreen`.
25
+ *
26
+ * **Layout logic:**
27
+ * - `measureRef`: hidden element used to measure the width of each button.
28
+ * - `containerRef`: visible container where the toolbar is rendered.
29
+ * - `leftSectionRef`: left section containing the "selected items" button.
30
+ * - `visibleCount`: dynamically updated number of visible actions.
31
+ * - Uses `ResizeObserver` + `requestAnimationFrame` to update layout on resize.
32
+ *
33
+ * @example
34
+ * ```tsx
35
+ * <DialFileManagerSelectionToolbar
36
+ * selectionLabel="3 files selected"
37
+ * onClearSelection={() => console.log('Cleared')}
38
+ * actions={[
39
+ * { key: 'download', title: 'Download', icon: <IconDownload />, onClick: () => {} },
40
+ * { key: 'delete', title: 'Delete', icon: <IconTrash />, onClick: () => {} },
41
+ * ]}
42
+ * />
43
+ * ```
44
+ *
45
+ * @param {object} props
46
+ * @param {string} props.selectionLabel - Label showing current selection status (e.g., "3 files selected").
47
+ * @param {() => void} props.onClearSelection - Callback invoked when the clear selection button is clicked.
48
+ * @param {DialActionDropdownItem[]} props.actions - List of available toolbar actions.
49
+ * Each action defines a title, icon, key, and optional click handler.
50
+ *
51
+ * @returns {JSX.Element} A responsive toolbar that adjusts visible actions based on available width.
52
+ */
53
+ export declare const DialFileManagerBulkActionsToolbar: FC<DialFileManagerBulkActionsToolbarProps>;
@@ -0,0 +1,3 @@
1
+ export declare const ACTIONS_GAP = 12;
2
+ export declare const MORE_BUTTON_WIDTH = 18;
3
+ export declare const CONTAINER_PADDING = 8;
@@ -0,0 +1,46 @@
1
+ import { FC } from 'react';
2
+ import { DialFileIconProps } from '../../../FileIcon/FileIcon';
3
+ import { DialItemType } from '../../../../types/item';
4
+ export interface DialFileManagerItemIconProps extends Omit<DialFileIconProps, 'extension'> {
5
+ type: DialItemType;
6
+ name: string;
7
+ shared?: boolean;
8
+ loading?: boolean;
9
+ }
10
+ /**
11
+ * Renders an icon representing either a file or folder entity in the Dial system.
12
+ *
13
+ * Displays:
14
+ * - A file icon based on its extension (via `DialFileIcon`)
15
+ * - A folder icon (via `IconFolder`)
16
+ * - A loading spinner if `loading` is true
17
+ * - A shared indicator if the entity is marked as shared
18
+ *
19
+ * @example
20
+ * ```tsx
21
+ * <DialFileManagerItemIcon
22
+ * name="document.pdf"
23
+ * type={DialItemType.File}
24
+ * shared
25
+ * />
26
+ *
27
+ * <DialFileManagerItemIcon
28
+ * name="My Folder"
29
+ * type={DialItemType.Folder}
30
+ * loading
31
+ * />
32
+ * ```
33
+ *
34
+ * @param {Object} props
35
+ * @param {string} props.name - The name of the file or folder (used to determine extension for files).
36
+ * @param {DialItemType} props.type - The type of the item (`file` or `folder`).
37
+ * @param {boolean} [props.shared=false] - Whether the item is shared.
38
+ * @param {boolean} [props.loading=false] - Whether to display the loading state.
39
+ * @param {number} [props.size] - Optional icon size override.
40
+ * @param {number} [props.stroke] - Optional icon stroke width override.
41
+ * @param {string} [props.cssClass] - Optional CSS class for styling.
42
+ * @param {boolean} [props.decorative] - Whether the icon is decorative (for accessibility).
43
+ * @param {string} [props.label] - Accessible label for screen readers.
44
+ * @param {ReactNode} [props.indicator] - Optional indicator to display over the icon.
45
+ */
46
+ export declare const DialFileManagerItemIcon: FC<DialFileManagerItemIconProps>;
@@ -0,0 +1,48 @@
1
+ import { FC } from 'react';
2
+ import { DialFileManagerItemNameInputProps } from '../FileManagerItemNameInput/FileManagerItemNameInput';
3
+ import { DialItemType } from '../../../../types/item';
4
+ export interface DialFileManagerItemNameProps extends DialFileManagerItemNameInputProps {
5
+ name: string;
6
+ type: DialItemType;
7
+ elementId: string;
8
+ editing?: boolean;
9
+ loading?: boolean;
10
+ shared?: boolean;
11
+ validate?: (value: string) => string | null;
12
+ onSave?: (value: string) => void;
13
+ onCancel?: () => void;
14
+ }
15
+ /**
16
+ * A component that renders a file or folder name with optional edit mode.
17
+ *
18
+ * When `editing` is `false`, it displays a read-only name via:
19
+ * - `DialFolderName` for folders
20
+ * - `DialFileName` for files
21
+ *
22
+ * When `editing` is `true`, it renders an editable input using `DialItemNameInput`,
23
+ * driven by validation and change logic from the `useEditableItem` hook.
24
+ *
25
+ * @example
26
+ * ```tsx
27
+ * import { DialFileManagerItemName } from '@/components/DialFileManagerItemName/DialFileManagerItemName';
28
+ * import { DialItemType } from '@/types/item';
29
+ *
30
+ * function Example() {
31
+ * return (
32
+ * <DialFileManagerItemName
33
+ * name="Project"
34
+ * type={DialItemType.Folder}
35
+ * elementId="folder-123"
36
+ * editing={true}
37
+ * validate={(value) => (value.trim() ? null : 'Name cannot be empty')}
38
+ * onSave={(newName) => console.log('Saved:', newName)}
39
+ * onCancel={() => console.log('Canceled')}
40
+ * />
41
+ * );
42
+ * }
43
+ * ```
44
+ *
45
+ * @param props - Component props.
46
+ * @returns Rendered file or folder name element (editable or static).
47
+ */
48
+ export declare const DialFileManagerItemName: FC<DialFileManagerItemNameProps>;
@@ -0,0 +1,65 @@
1
+ import { FC, ReactNode, Ref } from 'react';
2
+ import { DialItemType } from '../../../../types/item';
3
+ export interface DialFileManagerItemNameInputProps {
4
+ type: DialItemType;
5
+ name: string;
6
+ shared?: boolean;
7
+ loading?: boolean;
8
+ elementId: string;
9
+ iconSize?: number;
10
+ iconStroke?: number;
11
+ iconCssClass?: string;
12
+ iconLabel?: string;
13
+ iconIndicator?: ReactNode;
14
+ inputInvalid?: boolean;
15
+ inputInvalidMessage?: string;
16
+ inputIconAfter?: ReactNode;
17
+ inputRef?: Ref<HTMLInputElement>;
18
+ onChange?: (value?: string) => void;
19
+ }
20
+ /**
21
+ * Combines a file/folder icon with an editable text input.
22
+ *
23
+ * Used for renaming or labeling file/folder entities within the File Manager.
24
+ * Displays:
25
+ * - The item icon (with optional loading/shared state)
26
+ * - An inline text input
27
+ * - A validation tooltip when `inputInvalid` is `true`
28
+ *
29
+ * @example
30
+ * ```tsx
31
+ * <DialFileManagerItemNameInput
32
+ * type={DialItemType.File}
33
+ * name="report.pdf"
34
+ * elementId="file-input-1"
35
+ * shared
36
+ * onChange={(value) => console.log('New name:', value)}
37
+ * />
38
+ *
39
+ * <DialFileManagerItemNameInput
40
+ * type={DialItemType.Folder}
41
+ * name="Project A"
42
+ * elementId="folder-input-2"
43
+ * inputInvalid
44
+ * inputInvalidMessage="Invalid name"
45
+ * />
46
+ * ```
47
+ *
48
+ * @param {Object} props
49
+ * @param {DialItemType} props.type - The type of item (file or folder).
50
+ * @param {string} props.name - Current name of the entity.
51
+ * @param {string} props.elementId - Unique ID for the input element.
52
+ * @param {boolean} [props.shared=false] - Whether the entity is shared.
53
+ * @param {boolean} [props.loading=false] - Whether the icon is loading.
54
+ * @param {number} [props.iconSize] - Optional size override for the icon.
55
+ * @param {number} [props.iconStroke] - Optional stroke width override for the icon.
56
+ * @param {string} [props.iconCssClass] - Optional CSS class for the icon.
57
+ * @param {string} [props.iconLabel] - Optional accessible label for the icon.
58
+ * @param {ReactNode} [props.iconIndicator] - Optional indicator to render over the icon.
59
+ * @param {boolean} [props.inputInvalid=false] - Marks the input as invalid.
60
+ * @param {string} [props.inputInvalidMessage] - Tooltip message shown when invalid.
61
+ * @param {ReactNode} [props.inputIconAfter] - Optional icon shown after the input (defaults to an error icon).
62
+ * @param {Ref<HTMLInputElement>} [props.inputRef] - Ref to access the underlying input element.
63
+ * @param {(value: string) => void} [props.onChange] - Callback fired when input value changes.
64
+ */
65
+ export declare const DialFileManagerItemNameInput: FC<DialFileManagerItemNameInputProps>;