@memobit/libs 3.6.0 → 3.8.0

package/dist/components/ControlPanel/ControlPanelFilter.js

@@ -285,7 +285,7 @@ var H = 3, f = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
       },
       options: t,
       placeholder: e.placeholder,
-      searchable: e.searchable ?? !1,
+      searchable: e.searchable ?? !0,
       selectedCountDisplay: "inline",
       usePortal: !1,
       value: typeof e.value == "boolean" ? null : e.value

package/dist/components/Dropdown/Dropdown.css

@@ -1 +1 @@
-.dropdown-container{width:100%;position:relative}.dropdown-container.disabled{cursor:not-allowed;pointer-events:none;opacity:.6}.dropdown-container .dropdown-label{margin-bottom:var(--spacing-8);color:var(--form-control-label-color,var(--body-color));font-size:var(--form-control-label-font-size,var(--font-size-sm));font-weight:var(--form-control-label-font-weight,var(--font-weight-medium));letter-spacing:var(--form-control-label-letter-spacing,normal);text-transform:var(--form-control-label-text-transform,none);display:block}.dropdown-container .dropdown-input-container{--dropdown-actions-space:var(--spacing-48);background-color:var(--dropdown-header-background-color);width:100%;color:var(--dropdown-header-color);position:relative;overflow:hidden;container-type:inline-size}.dropdown-container .dropdown-input-container .input-text{background-color:#0000}.dropdown-container .dropdown-input-container--clearable{--dropdown-actions-space:calc(var(--spacing-80) + var(--spacing-12))}.dropdown-container .dropdown-input-container:not(.dropdown-input-container--chips) input[type=text]{padding-right:var(--dropdown-actions-space);text-overflow:ellipsis}.dropdown-container .dropdown-input-container--has-prefix-icon input[type=text]{padding-left:var(--spacing-40)}.dropdown-container .dropdown-input-container .dropdown-selected-icon{color:var(--dropdown-header-color);align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-selected-icon--prefix{top:50%;left:var(--spacing-12);z-index:1;pointer-events:none;position:absolute;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-selected-icon--suffix{padding:0 var(--spacing-4);pointer-events:none}.dropdown-container .dropdown-input-container input[type=text]{transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.dropdown-container .dropdown-input-container .dropdown-value-chip{box-sizing:border-box;top:50%;left:var(--spacing-12);z-index:1;align-items:center;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-8);border-radius:var(--radius-full);border:var(--spacing-1) solid var(--chip-selected-border-color,var(--body-accent-color));background:var(--chip-selected-background-color,var(--card-background-accent-color));color:var(--chip-selected-color,var(--body-accent-color));font-size:var(--font-size-xs);max-width:calc(100% - var(--spacing-12) - var(--dropdown-actions-space));cursor:pointer;display:inline-flex;position:absolute;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-value-chip__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-container .dropdown-input-container .dropdown-value-chip svg{width:var(--spacing-12);height:var(--spacing-12);flex-shrink:0}.dropdown-container .dropdown-input-container--chips{align-items:center;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-80) var(--spacing-4) var(--spacing-8);flex-wrap:nowrap;display:flex;overflow:auto hidden}.dropdown-container .dropdown-input-container--chips::-webkit-scrollbar{height:var(--scrollbar-size)}.dropdown-container .dropdown-input-container--chips .input-text-wrapper{flex:1 1 var(--spacing-80);min-width:var(--spacing-80)}.dropdown-container .dropdown-input-container--chips input[type=text]{padding:var(--spacing-4);border:none}.dropdown-container .dropdown-input-container--chips-multiline{min-height:var(--spacing-40);flex-wrap:wrap;overflow:visible}.dropdown-container .dropdown-input-container--chips-multiline .dropdown-actions-buttons{top:var(--spacing-4);transform:none}.dropdown-container .dropdown-input-container .dropdown-chip{align-items:center;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-8);border-radius:var(--radius-full);border:var(--spacing-1) solid var(--chip-selected-border-color,var(--body-accent-color));background:var(--chip-selected-background-color,var(--card-background-accent-color));color:var(--chip-selected-color,var(--body-accent-color));font-size:var(--font-size-xs);flex-shrink:0;max-width:100%;display:inline-flex}.dropdown-container .dropdown-input-container .dropdown-chip__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-container .dropdown-input-container .dropdown-chip__remove{cursor:pointer;color:inherit;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.dropdown-container .dropdown-input-container .dropdown-chip__remove svg{width:var(--spacing-12);height:var(--spacing-12)}.dropdown-container .dropdown-input-container .dropdown-selected-count{font-size:var(--font-size-xs);color:var(--body-color-muted);pointer-events:none;position:absolute;bottom:-20px;left:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons{z-index:1;justify-content:center;align-items:center;height:calc(100% - 2px);padding:0 6px;display:flex;position:absolute;top:50%;right:1px;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons:before{content:"";opacity:.9;z-index:-1;position:absolute;inset:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button{justify-content:center;align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button{padding:var(--spacing-8);border-radius:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button span{justify-content:center;align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button:hover{background-color:var(--dropdown-action-hover-background-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button svg{fill:var(--dropdown-action-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button svg:hover{fill:var(--dropdown-action-hover-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-clear-button:focus{box-shadow:0 0 0 var(--spacing-2) var(--form-control-focus-ring);outline:none}@media (width<=768px){.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-clear-button{width:var(--spacing-40);height:var(--spacing-40);right:var(--spacing-40)}}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button button{border-radius:0 var(--radius-sm) var(--radius-sm) 0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button svg{width:var(--spacing-16);height:var(--spacing-16);transition:transform .2s ease-in-out}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button:focus{box-shadow:inset 0 0 0 var(--spacing-2) var(--form-control-focus-ring);outline:none}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button.open svg{transform:rotate(180deg)}.dropdown-container.dropdown-highlighted .dropdown-input-container input[type=text]{border-color:var(--form-control-focus-border-color)}.dropdown-container.dropdown-error .dropdown-input-container{background-color:var(--form-control-error-background-color)}.dropdown-container.dropdown-error .dropdown-input-container input[type=text]{background-color:var(--form-control-error-background-color);border-color:var(--form-control-error-border-color);color:var(--form-control-error-color)}.dropdown-container.dropdown-error .dropdown-input-container input[type=text]:focus{background-color:var(--form-control-error-background-color);border-color:var(--form-control-error-border-color);box-shadow:0 0 0 var(--spacing-2) var(--box-shadow)}.dropdown-container .dropdown-error-message{font-size:var(--font-size-xs);color:var(--form-control-error-color)}.dropdown-container.dropdown-success .dropdown-input-container{background-color:var(--form-control-success-background-color)}.dropdown-container.dropdown-success .dropdown-input-container input[type=text]{background-color:var(--form-control-success-background-color);border-color:var(--form-control-success-border-color);color:var(--form-control-success-color)}.dropdown-container.dropdown-success .dropdown-input-container input[type=text]:focus{background-color:var(--form-control-success-background-color);border-color:var(--form-control-success-border-color);box-shadow:0 0 0 var(--spacing-2) var(--box-shadow)}.dropdown-container .dropdown-success-message{font-size:var(--font-size-xs);color:var(--form-control-success-color)}.dropdown-container.multiple .dropdown-input-container,.dropdown-container.multiple input[type=text]{min-height:var(--spacing-40)}.dropdown-container.multiple .dropdown-input-container--chips input[type=text]{min-height:var(--spacing-24)}.dropdown-container.count-display-floating .dropdown-input-container{overflow:visible}.dropdown-menu{z-index:1000;width:100%;margin-top:var(--spacing-4);background-color:var(--dropdown-options-background-color);color:var(--dropdown-options-color);border:var(--spacing-1) solid var(--dropdown-border-color);border-radius:var(--radius-sm);box-shadow:0 var(--spacing-8) var(--spacing-16) -3px var(--box-shadow), 0 var(--spacing-4) var(--spacing-8) -2px var(--box-shadow);max-height:240px;position:absolute;overflow-y:auto}.dropdown-menu--portal{margin-top:var(--spacing-4)}.dropdown-menu--upward{margin-top:0;margin-bottom:var(--spacing-4);top:auto;bottom:100%}.dropdown-menu::-webkit-scrollbar{width:var(--scrollbar-size)}.dropdown-menu::-webkit-scrollbar-track{background:var(--scrollbar-track-color);border-radius:var(--scrollbar-radius)}.dropdown-menu::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-radius)}.dropdown-menu::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}.dropdown-menu .dropdown-options-list{padding:var(--spacing-4) 0;margin:0;list-style:none}.dropdown-menu .dropdown-options-list .dropdown-option{padding:var(--spacing-12) var(--spacing-12);cursor:pointer;border-left:var(--spacing-4) solid transparent;align-items:center;transition:background-color .2s ease-in-out;display:flex}.dropdown-menu .dropdown-options-list .dropdown-option.focused{color:var(--dropdown-options-hover-color);background-color:var(--dropdown-options-hover-background-color);outline:none}.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled{opacity:.45;cursor:not-allowed}.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled:hover,.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled.focused{color:inherit;background-color:#0000}.dropdown-menu .dropdown-options-list .dropdown-option.selected{background-color:var(--dropdown-options-selected-background-color);color:var(--dropdown-options-selected-color)}.dropdown-menu .dropdown-options-list .dropdown-option.selected:hover,.dropdown-menu .dropdown-options-list .dropdown-option.selected.focused{color:var(--dropdown-options-hover-color);background-color:var(--dropdown-options-hover-background-color);opacity:.9}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox{margin-right:var(--spacing-8);flex-shrink:0}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox .checkbox{width:var(--spacing-16);height:var(--spacing-16);border:var(--spacing-2) solid var(--form-control-selection-border-color);border-radius:var(--spacing-4);background-color:#0000;justify-content:center;align-items:center;transition:all .2s ease-in-out;display:flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox .checkbox.checked{background-color:var(--form-control-selection-background-color);color:var(--form-control-selection-color)}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content{flex:1;min-width:0}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-label{align-items:center;gap:var(--spacing-8);min-width:0;display:inline-flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-prefix{flex:none;justify-content:center;align-items:center;display:inline-flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-details{width:100%;font-size:var(--font-size-xs);margin-top:var(--spacing-2);display:block}@media (width<=768px){.dropdown-menu .dropdown-options-list .dropdown-option{padding:var(--spacing-16) var(--spacing-12)}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content{font-size:var(--font-size-md)}}.dropdown-menu .dropdown-no-options{padding:var(--spacing-12);text-align:center;font-style:italic}.dropdown-menu .dropdown-options-list .dropdown-option--create{color:var(--body-accent-color);border-top:1px solid var(--delimiter-color);font-weight:var(--font-weight-medium)}@media (width<=768px){.dropdown-menu{max-height:var(--spacing-300)}.dropdown-menu .dropdown-options-list .dropdown-option{min-height:var(--spacing-48)}}@container (width<=160px){.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button.dropdown-clear-button{display:none}.dropdown-container .dropdown-input-container .dropdown-value-chip{max-width:calc(100% - var(--spacing-12) - var(--spacing-48))}.dropdown-container .dropdown-input-container:not(.dropdown-input-container--chips) input[type=text]{padding-right:var(--spacing-48)}}
+.dropdown-container{width:100%;position:relative}.dropdown-container.disabled{cursor:not-allowed;pointer-events:none;opacity:.6}.dropdown-container .dropdown-label{margin-bottom:var(--spacing-8);color:var(--form-control-label-color,var(--body-color));font-size:var(--form-control-label-font-size,var(--font-size-sm));font-weight:var(--form-control-label-font-weight,var(--font-weight-medium));letter-spacing:var(--form-control-label-letter-spacing,normal);text-transform:var(--form-control-label-text-transform,none);display:block}.dropdown-container .dropdown-input-container{--dropdown-actions-space:var(--spacing-48);background-color:var(--dropdown-header-background-color);width:100%;color:var(--dropdown-header-color);position:relative;overflow:hidden;container-type:inline-size}.dropdown-container .dropdown-input-container .input-text{background-color:#0000}.dropdown-container .dropdown-input-container .input-text:read-only:not(:disabled){cursor:pointer}.dropdown-container .dropdown-input-container--clearable{--dropdown-actions-space:calc(var(--spacing-80) + var(--spacing-12))}.dropdown-container .dropdown-input-container:not(.dropdown-input-container--chips) input[type=text]{padding-right:var(--dropdown-actions-space);text-overflow:ellipsis}.dropdown-container .dropdown-input-container--has-prefix-icon input[type=text]{padding-left:var(--spacing-40)}.dropdown-container .dropdown-input-container .dropdown-selected-icon{color:var(--dropdown-header-color);align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-selected-icon--prefix{top:50%;left:var(--spacing-12);z-index:1;pointer-events:none;position:absolute;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-selected-icon--suffix{padding:0 var(--spacing-4);pointer-events:none}.dropdown-container .dropdown-input-container input[type=text]{transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.dropdown-container .dropdown-input-container .dropdown-value-chip{box-sizing:border-box;top:50%;left:var(--spacing-12);z-index:1;align-items:center;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-8);border-radius:var(--radius-full);border:var(--spacing-1) solid var(--chip-selected-border-color,var(--body-accent-color));background:var(--chip-selected-background-color,var(--card-background-accent-color));color:var(--chip-selected-color,var(--body-accent-color));font-size:var(--font-size-xs);max-width:calc(100% - var(--spacing-12) - var(--dropdown-actions-space));cursor:pointer;display:inline-flex;position:absolute;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-value-chip__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-container .dropdown-input-container .dropdown-value-chip svg{width:var(--spacing-12);height:var(--spacing-12);flex-shrink:0}.dropdown-container .dropdown-input-container--chips{align-items:center;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-80) var(--spacing-4) var(--spacing-8);flex-wrap:nowrap;display:flex;overflow:auto hidden}.dropdown-container .dropdown-input-container--chips::-webkit-scrollbar{height:var(--scrollbar-size)}.dropdown-container .dropdown-input-container--chips .input-text-wrapper{flex:1 1 var(--spacing-80);min-width:var(--spacing-80)}.dropdown-container .dropdown-input-container--chips input[type=text]{padding:var(--spacing-4);border:none}.dropdown-container .dropdown-input-container--chips-multiline{min-height:var(--spacing-40);flex-wrap:wrap;overflow:visible}.dropdown-container .dropdown-input-container--chips-multiline .dropdown-actions-buttons{top:var(--spacing-4);transform:none}.dropdown-container .dropdown-input-container .dropdown-chip{align-items:center;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-8);border-radius:var(--radius-full);border:var(--spacing-1) solid var(--chip-selected-border-color,var(--body-accent-color));background:var(--chip-selected-background-color,var(--card-background-accent-color));color:var(--chip-selected-color,var(--body-accent-color));font-size:var(--font-size-xs);flex-shrink:0;max-width:100%;display:inline-flex}.dropdown-container .dropdown-input-container .dropdown-chip__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-container .dropdown-input-container .dropdown-chip__remove{cursor:pointer;color:inherit;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.dropdown-container .dropdown-input-container .dropdown-chip__remove svg{width:var(--spacing-12);height:var(--spacing-12)}.dropdown-container .dropdown-input-container .dropdown-selected-count{font-size:var(--font-size-xs);color:var(--body-color-muted);pointer-events:none;position:absolute;bottom:-20px;left:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons{z-index:1;justify-content:center;align-items:center;height:calc(100% - 2px);padding:0 6px;display:flex;position:absolute;top:50%;right:1px;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons:before{content:"";opacity:.9;z-index:-1;position:absolute;inset:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button{justify-content:center;align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button{padding:var(--spacing-8);border-radius:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button span{justify-content:center;align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button:hover{background-color:var(--dropdown-action-hover-background-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button svg{fill:var(--dropdown-action-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button svg:hover{fill:var(--dropdown-action-hover-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-clear-button:focus{box-shadow:0 0 0 var(--spacing-2) var(--form-control-focus-ring);outline:none}@media (width<=768px){.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-clear-button{width:var(--spacing-40);height:var(--spacing-40);right:var(--spacing-40)}}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button button{border-radius:0 var(--radius-sm) var(--radius-sm) 0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button svg{width:var(--spacing-16);height:var(--spacing-16);transition:transform .2s ease-in-out}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button:focus{box-shadow:inset 0 0 0 var(--spacing-2) var(--form-control-focus-ring);outline:none}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button.open svg{transform:rotate(180deg)}.dropdown-container.dropdown-highlighted .dropdown-input-container input[type=text]{border-color:var(--form-control-focus-border-color)}.dropdown-container.dropdown-error .dropdown-input-container{background-color:var(--form-control-error-background-color)}.dropdown-container.dropdown-error .dropdown-input-container input[type=text]{background-color:var(--form-control-error-background-color);border-color:var(--form-control-error-border-color);color:var(--form-control-error-color)}.dropdown-container.dropdown-error .dropdown-input-container input[type=text]:focus{background-color:var(--form-control-error-background-color);border-color:var(--form-control-error-border-color);box-shadow:0 0 0 var(--spacing-2) var(--box-shadow)}.dropdown-container .dropdown-error-message{font-size:var(--font-size-xs);color:var(--form-control-error-color)}.dropdown-container.dropdown-success .dropdown-input-container{background-color:var(--form-control-success-background-color)}.dropdown-container.dropdown-success .dropdown-input-container input[type=text]{background-color:var(--form-control-success-background-color);border-color:var(--form-control-success-border-color);color:var(--form-control-success-color)}.dropdown-container.dropdown-success .dropdown-input-container input[type=text]:focus{background-color:var(--form-control-success-background-color);border-color:var(--form-control-success-border-color);box-shadow:0 0 0 var(--spacing-2) var(--box-shadow)}.dropdown-container .dropdown-success-message{font-size:var(--font-size-xs);color:var(--form-control-success-color)}.dropdown-container.multiple .dropdown-input-container,.dropdown-container.multiple input[type=text]{min-height:var(--spacing-40)}.dropdown-container.multiple .dropdown-input-container--chips input[type=text]{min-height:var(--spacing-24)}.dropdown-container.count-display-floating .dropdown-input-container{overflow:visible}.dropdown-menu{z-index:1000;width:100%;margin-top:var(--spacing-4);background-color:var(--dropdown-options-background-color);color:var(--dropdown-options-color);border:var(--spacing-1) solid var(--dropdown-border-color);border-radius:var(--radius-sm);box-shadow:0 var(--spacing-8) var(--spacing-16) -3px var(--box-shadow), 0 var(--spacing-4) var(--spacing-8) -2px var(--box-shadow);max-height:240px;position:absolute;overflow-y:auto}.dropdown-menu--portal{margin-top:var(--spacing-4)}.dropdown-menu--upward{margin-top:0;margin-bottom:var(--spacing-4);top:auto;bottom:100%}.dropdown-menu::-webkit-scrollbar{width:var(--scrollbar-size)}.dropdown-menu::-webkit-scrollbar-track{background:var(--scrollbar-track-color);border-radius:var(--scrollbar-radius)}.dropdown-menu::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-radius)}.dropdown-menu::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}.dropdown-menu .dropdown-options-list{padding:var(--spacing-4) 0;margin:0;list-style:none}.dropdown-menu .dropdown-options-list .dropdown-option{padding:var(--spacing-12) var(--spacing-12);cursor:pointer;border-left:var(--spacing-4) solid transparent;align-items:center;transition:background-color .2s ease-in-out;display:flex}.dropdown-menu .dropdown-options-list .dropdown-option.focused{color:var(--dropdown-options-hover-color);background-color:var(--dropdown-options-hover-background-color);outline:none}.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled{opacity:.45;cursor:not-allowed}.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled:hover,.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled.focused{color:inherit;background-color:#0000}.dropdown-menu .dropdown-options-list .dropdown-option.selected{background-color:var(--dropdown-options-selected-background-color);color:var(--dropdown-options-selected-color)}.dropdown-menu .dropdown-options-list .dropdown-option.selected:hover,.dropdown-menu .dropdown-options-list .dropdown-option.selected.focused{color:var(--dropdown-options-hover-color);background-color:var(--dropdown-options-hover-background-color);opacity:.9}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox{margin-right:var(--spacing-8);flex-shrink:0}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox .checkbox{width:var(--spacing-16);height:var(--spacing-16);border:var(--spacing-2) solid var(--form-control-selection-border-color);border-radius:var(--spacing-4);background-color:#0000;justify-content:center;align-items:center;transition:all .2s ease-in-out;display:flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox .checkbox.checked{background-color:var(--form-control-selection-background-color);color:var(--form-control-selection-color)}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content{flex:1;min-width:0}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-label{align-items:center;gap:var(--spacing-8);min-width:0;display:inline-flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-prefix{flex:none;justify-content:center;align-items:center;display:inline-flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-details{width:100%;font-size:var(--font-size-xs);margin-top:var(--spacing-2);display:block}@media (width<=768px){.dropdown-menu .dropdown-options-list .dropdown-option{padding:var(--spacing-16) var(--spacing-12)}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content{font-size:var(--font-size-md)}}.dropdown-menu .dropdown-no-options{padding:var(--spacing-12);text-align:center;font-style:italic}.dropdown-menu .dropdown-options-list .dropdown-option--create{color:var(--body-accent-color);border-top:1px solid var(--delimiter-color);font-weight:var(--font-weight-medium)}@media (width<=768px){.dropdown-menu{max-height:var(--spacing-300)}.dropdown-menu .dropdown-options-list .dropdown-option{min-height:var(--spacing-48)}}@container (width<=160px){.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button.dropdown-clear-button{display:none}.dropdown-container .dropdown-input-container .dropdown-value-chip{max-width:calc(100% - var(--spacing-12) - var(--spacing-48))}.dropdown-container .dropdown-input-container:not(.dropdown-input-container--chips) input[type=text]{padding-right:var(--spacing-48)}}

package/dist/components/Dropdown/Dropdown2.js

@@ -1,40 +1,40 @@
 import './Dropdown.css';
 import { Icon as I } from "../Icon/Icon2.js";
-import { Button as le } from "../Button/Button2.js";
-import { Tooltip as Ae } from "../Tooltip/Tooltip2.js";
-import { InputText as Ce } from "../InputText/InputText2.js";
-import { foldDiacritics as ae } from "../../helpers/Search.js";
+import { Button as ae } from "../Button/Button2.js";
+import { Tooltip as He } from "../Tooltip/Tooltip2.js";
+import { InputText as je } from "../InputText/InputText2.js";
+import { foldDiacritics as fe } from "../../helpers/Search.js";
 /* empty css         */
-import { useEffect as E, useId as He, useRef as D, useState as k } from "react";
+import { useEffect as E, useId as Ce, useRef as D, useState as k } from "react";
 import { jsx as c, jsxs as g } from "react/jsx-runtime";
-import { createPortal as je } from "react-dom";
-import { caretDown as _e, clear as fe } from "@memobit/icons";
-var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", disabled: x = !1, error: A, highlighted: we = !1, id: he, label: J, maxVisibleSelectedLabels: me = 1, multilineChips: ge = !1, multiple: o = !1, name: N, onChange: u, onSearchChange: ve, options: m, placeholder: C = "Select an option", searchable: f = !0, searchValue: M, selectedCountDisplay: H = "inline", showChips: j = !1, sortSelectedFirst: Q = !1, success: _, usePortal: $ = !0, value: d, valueAsChip: be = !0 }) => {
-  const [p, v] = k(!1), [s, l] = k(M || ""), [a, X] = k(m), [L, S] = k(-1), [i, w] = k([]), [R, xe] = k({
+import { createPortal as _e } from "react-dom";
+import { caretDown as ze, clear as pe } from "@memobit/icons";
+var Ze = ({ allowCustomValue: h = !1, autofocus: ue = !1, className: we = "", disabled: x = !1, error: A, highlighted: he = !1, id: me, label: J, maxVisibleSelectedLabels: ge = 1, multilineChips: ve = !1, multiple: i = !1, name: N, onChange: u, onSearchChange: be, options: m, placeholder: H = "Select an option", searchable: f = !0, searchValue: M, selectedCountDisplay: j = "inline", showChips: C = !1, sortSelectedFirst: Q = !1, success: _, usePortal: $ = !0, value: d, valueAsChip: xe = !0 }) => {
+  const [p, v] = k(!1), [s, l] = k(M || ""), [a, X] = k(m), [L, O] = k(-1), [o, w] = k([]), [R, Ne] = k({
     top: 0,
     bottom: 0,
     left: 0,
     width: 0,
     maxHeight: 300
-  }), [z, Ne] = k(!1), O = D(null), y = D([]), F = D(null), $e = D(null), Y = He(), Z = he ?? `dropdown-${Y}`, U = D(null);
+  }), [z, $e] = k(!1), S = D(null), y = D([]), F = D(null), ke = D(null), Y = Ce(), Z = me ?? `dropdown-${Y}`, U = D(null);
   E(() => {
-    if (p && Q && o) {
-      const n = new Set(i.map((r) => r.value)), e = [], t = [];
+    if (p && Q && i) {
+      const n = new Set(o.map((r) => r.value)), e = [], t = [];
       m.forEach((r) => (n.has(r.value) ? e : t).push(r)), U.current = [...e, ...t];
     } else p || (U.current = null);
   }, [
     p,
     Q,
-    o,
+    i,
     m
   ]), E(() => {
     const n = U.current ?? m;
     if (!f || !s) X(n);
     else {
-      const e = ae(s), t = n.filter((r) => ae(r.label).includes(e));
+      const e = fe(s), t = n.filter((r) => fe(r.label).includes(e));
       X(t);
     }
-    S(-1);
+    O(-1);
   }, [
     s,
     m,
@@ -50,19 +50,19 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
       e && (w([]), l(""));
       return;
     }
-    if (o && Array.isArray(d) && d.length === 0) {
+    if (i && Array.isArray(d) && d.length === 0) {
       e && (w([]), l(""));
       return;
     }
-    if (!o && d === "") {
+    if (!i && d === "") {
       e && (w([]), l(""));
       return;
     }
     if (m.length > 0) {
-      if (o && Array.isArray(d)) {
+      if (i && Array.isArray(d)) {
         const t = m.filter((r) => typeof r.value == "number" ? d.includes(r.value) : d.includes(r.value.toString()));
         w(t), e && l("");
-      } else if (!o && (typeof d == "string" || typeof d == "number")) {
+      } else if (!i && (typeof d == "string" || typeof d == "number")) {
         const t = m.find((r) => typeof r.value == "number" && typeof d == "number" ? r.value === d : r.value.toString() === d.toString());
         if (t)
           w([t]), e && l(t.label);
@@ -75,7 +75,7 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
           w([r]), e && l(d.trim());
         } else e && (w([]), l(""));
       }
-    } else if (h && !o && typeof d == "string" && d.trim()) {
+    } else if (h && !i && typeof d == "string" && d.trim()) {
       const t = {
         label: d.trim(),
         value: d.trim(),
@@ -86,24 +86,24 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
   }, [
     d,
     m,
-    o,
+    i,
     f,
     h
   ]), E(() => {
     f && M !== void 0 && l(M);
   }, [M, f]), E(() => {
-    if (!p || !O.current) return;
+    if (!p || !S.current) return;
     const n = () => {
-      if (!O.current) return;
-      const t = O.current.getBoundingClientRect(), r = window.visualViewport, T = r?.offsetTop ?? 0, Be = T + (r?.height ?? window.innerHeight), se = 300, Me = 8, G = Be - t.bottom, ce = t.top - T, de = G < se && ce > G;
-      if (Ne(de), $) {
-        const Te = Math.max(0, (de ? ce : G) - Me);
-        xe({
+      if (!S.current) return;
+      const t = S.current.getBoundingClientRect(), r = window.visualViewport, T = r?.offsetTop ?? 0, Me = T + (r?.height ?? window.innerHeight), ce = 300, Te = 8, G = Me - t.bottom, de = t.top - T, le = G < ce && de > G;
+      if ($e(le), $) {
+        const Ae = Math.max(0, (le ? de : G) - Te);
+        Ne({
           top: t.bottom,
           bottom: window.innerHeight - t.top,
           left: t.left,
           width: t.width,
-          maxHeight: Math.min(se, Te)
+          maxHeight: Math.min(ce, Ae)
         });
       }
     };
@@ -114,12 +114,12 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
     };
   }, [p, $]), E(() => {
     const n = (e) => {
-      if (O.current && !O.current.contains(e.target)) {
+      if (S.current && !S.current.contains(e.target)) {
         if ($ && p) {
           const t = document.querySelector(".dropdown-menu--portal");
           if (t && t.contains(e.target)) return;
         }
-        if (h && !o && s.trim() && !(i.length > 0 && i[0].label.toLowerCase() === s.trim().toLowerCase())) {
+        if (h && !i && s.trim() && !(o.length > 0 && o[0].label.toLowerCase() === s.trim().toLowerCase())) {
           const t = m.find((r) => r.label.toLowerCase() === s.toLowerCase() || r.value.toString() === s) || {
             label: s.trim(),
             value: s.trim(),
@@ -128,7 +128,7 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
           w([t]), l(t.label), v(!1), u && u(t, N);
           return;
         }
-        v(!1), !o && i.length > 0 ? l(i[0].label) : o && f && l("");
+        v(!1), !i && o.length > 0 ? l(o[0].label) : i && f && l("");
       }
     };
     return document.addEventListener("mousedown", n), () => {
@@ -138,20 +138,20 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
     h,
     s,
     p,
-    o,
+    i,
     N,
     u,
     m,
     f,
-    i,
+    o,
     $
   ]);
   const K = (n) => {
     if (!n.disabled)
-      if (o) {
-        const e = i.some((r) => r.value === n.value);
+      if (i) {
+        const e = o.some((r) => r.value === n.value);
         let t;
-        e ? t = i.filter((r) => r.value !== n.value) : t = [...i, n], w(t), f && l(""), u && u(t, N);
+        e ? t = o.filter((r) => r.value !== n.value) : t = [...o, n], w(t), f && l(""), u && u(t, N);
       } else
         l(n.label), w([n]), v(!1), u && u(n, N);
   }, P = () => {
@@ -166,23 +166,23 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
       value: s.trim(),
       className: "custom-option"
     };
-    if (o) {
-      const t = [...i, e];
+    if (i) {
+      const t = [...o, e];
       w(t), l(""), u && u(t, N);
     } else
       w([e]), l(e.label), v(!1), u && u(e, N);
   }, ee = (n) => {
-    const e = i.filter((t) => t.value !== n.value);
-    w(e), u && (o ? u(e, N) : (u(null, N), f || l("")));
-  }, ke = () => {
-    w([]), (!f || !o) && l(""), v(!1), u && u(o ? [] : null, N);
-  }, Le = (n) => {
-    l(n), p || v(!0), ve?.(n);
+    const e = o.filter((t) => t.value !== n.value);
+    w(e), u && (i ? u(e, N) : (u(null, N), f || l("")));
+  }, Le = () => {
+    w([]), (!f || !i) && l(""), v(!1), u && u(i ? [] : null, N);
+  }, Oe = (n) => {
+    l(n), p || v(!0), be?.(n);
   }, ne = () => {
-    x || (v(!0), !o && f && i.length > 0 && l(""), (o || f) && F.current?.focus());
+    x || (v(!0), !i && f && o.length > 0 && l(""), (i || f) && F.current?.focus());
   }, Se = () => {
-    x || (v(!p), p || (S(-1), !o && f && i.length > 0 && l(""), (o || f) && F.current?.focus()));
-  }, Oe = (n) => {
+    x || (v(!p), p || (O(-1), !i && f && o.length > 0 && l(""), (i || f) && F.current?.focus()));
+  }, ye = (n) => {
     if (!x) {
       if (!p) {
         (n.key === "ArrowDown" || n.key === "Enter") && (v(!0), n.preventDefault());
@@ -191,14 +191,14 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
       switch (n.key) {
         case "ArrowDown":
           if (n.preventDefault(), h && s && a.length === 0) return;
-          S((e) => {
+          O((e) => {
             const t = e < (h && s && !a.some((r) => r.label.toLowerCase() === s.toLowerCase()) ? a.length : a.length - 1) ? e + 1 : 0;
             return t < a.length && y.current[t] && y.current[t]?.scrollIntoView({ block: "nearest" }), t;
           });
           break;
         case "ArrowUp":
           if (n.preventDefault(), h && s && a.length === 0) return;
-          S((e) => {
+          O((e) => {
             const t = h && s && !a.some((T) => T.label.toLowerCase() === s.toLowerCase()) ? a.length : a.length - 1, r = e > 0 ? e - 1 : t;
             return r < a.length && y.current[r] && y.current[r]?.scrollIntoView({ block: "nearest" }), r;
           });
@@ -207,25 +207,25 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
           n.preventDefault(), L >= 0 && L < a.length ? K(a[L]) : (h && s && L === a.length || h && s && a.length === 0) && P();
           break;
         case "Escape":
-          n.preventDefault(), v(!1), !o && i.length > 0 ? l(i[0].label) : o && f && l("");
+          n.preventDefault(), v(!1), !i && o.length > 0 ? l(o[0].label) : i && f && l("");
           break;
         case "Backspace":
-          o && s === "" && i.length > 0 && (n.preventDefault(), ee(i[i.length - 1]));
+          i && s === "" && o.length > 0 && (n.preventDefault(), ee(o[o.length - 1]));
       }
     }
-  }, q = (n) => i.some((e) => e.value === n.value), ye = () => {
-    if (i.length === 0) return "";
-    const n = Math.max(1, me);
-    if (i.length <= n) return i.map((r) => r.label).join(", ");
-    const e = i.slice(0, n).map((r) => r.label).join(", "), t = i.length - n;
+  }, q = (n) => o.some((e) => e.value === n.value), Ie = () => {
+    if (o.length === 0) return "";
+    const n = Math.max(1, ge);
+    if (o.length <= n) return o.map((r) => r.label).join(", ");
+    const e = o.slice(0, n).map((r) => r.label).join(", "), t = o.length - n;
     return `${e} (+${t} ${t === 1 ? "other" : "others"})`;
-  }, Ie = () => o && j || f && p ? s : i.length > 0 ? o ? ye() : i[0].label : "", Ee = () => o && j ? i.length > 0 ? "" : C : p && f ? C : i.length > 0 ? "" : C, De = () => !o || i.length === 0 || H === "none" ? null : H === "floating" ? /* @__PURE__ */ g("div", {
+  }, Ee = () => i && C || f && p ? s : o.length > 0 ? i ? Ie() : o[0].label : "", De = () => i && C ? o.length > 0 ? "" : H : p && f ? H : o.length > 0 ? "" : H, Re = () => !i || o.length === 0 || j === "none" ? null : j === "floating" ? /* @__PURE__ */ g("div", {
     className: "dropdown-selected-count",
-    children: [i.length, " selected"]
-  }) : null, te = () => !!(h && s && s.trim() && !a.some((n) => n.label.toLowerCase() === s.toLowerCase() || n.value.toString() === s)), Re = () => {
+    children: [o.length, " selected"]
+  }) : null, te = () => !!(h && s && s.trim() && !a.some((n) => n.label.toLowerCase() === s.toLowerCase() || n.value.toString() === s)), Be = () => {
     if (!p || x) return null;
     const n = /* @__PURE__ */ c("div", {
-      ref: $e,
+      ref: ke,
       className: `dropdown-menu ${$ ? "dropdown-menu--portal" : ""} ${z ? "dropdown-menu--upward" : ""}`,
       style: $ ? {
         position: "fixed",
@@ -244,9 +244,9 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
           },
           className: `dropdown-option ${e.className || ""} ${L === t ? "focused" : ""} ${q(e) ? "selected" : ""} ${e.disabled ? "dropdown-option--disabled" : ""}`,
           onClick: () => K(e),
-          onMouseEnter: () => S(t),
+          onMouseEnter: () => O(t),
           title: e.tooltip,
-          children: [o && /* @__PURE__ */ c("div", {
+          children: [i && /* @__PURE__ */ c("div", {
             className: "dropdown-option-checkbox",
             children: /* @__PURE__ */ c("div", {
               className: `checkbox ${q(e) ? "checked" : ""}`,
@@ -288,7 +288,7 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
           },
           className: `dropdown-option dropdown-option--create ${L === a.length ? "focused" : ""}`,
           onClick: P,
-          onMouseEnter: () => S(a.length),
+          onMouseEnter: () => O(a.length),
           children: /* @__PURE__ */ c("div", {
             className: "dropdown-option-content",
             children: /* @__PURE__ */ g("span", {
@@ -306,11 +306,11 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
         children: "No options found"
       })
     });
-    return $ ? je(n, document.body) : n;
-  }, b = !o && i.length === 1 ? i[0] : null, B = be && !p && !o && i.length > 0, re = !!(b?.icon && !s && !B), oe = !!(b?.suffixIcon && !B), W = o && j, ie = i.length > 0;
+    return $ ? _e(n, document.body) : n;
+  }, b = !i && o.length === 1 ? o[0] : null, B = xe && !p && !i && o.length > 0, re = !!(b?.icon && !s && !B), oe = !!(b?.suffixIcon && !B), W = i && C, ie = o.length > 0, se = f || h;
   return /* @__PURE__ */ g("div", {
-    className: `dropdown-container ${A ? "dropdown-error" : ""} ${_ ? "dropdown-success" : ""} ${we ? "dropdown-highlighted" : ""} ${o ? "multiple" : ""} ${x ? "disabled" : ""} ${o ? `count-display-${H}` : ""} ${ue}`,
-    ref: O,
+    className: `dropdown-container ${A ? "dropdown-error" : ""} ${_ ? "dropdown-success" : ""} ${he ? "dropdown-highlighted" : ""} ${i ? "multiple" : ""} ${x ? "disabled" : ""} ${i ? `count-display-${j}` : ""} ${we}`,
+    ref: S,
     children: [
       J && /* @__PURE__ */ c("label", {
         htmlFor: Z,
@@ -318,7 +318,7 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
         children: J
       }),
       /* @__PURE__ */ g("div", {
-        className: `dropdown-input-container ${re ? "dropdown-input-container--has-prefix-icon" : ""} ${oe ? "dropdown-input-container--has-suffix-icon" : ""} ${W ? "dropdown-input-container--chips" : ""} ${W && ge ? "dropdown-input-container--chips-multiline" : ""} ${ie ? "dropdown-input-container--clearable" : ""}`,
+        className: `dropdown-input-container ${re ? "dropdown-input-container--has-prefix-icon" : ""} ${oe ? "dropdown-input-container--has-suffix-icon" : ""} ${W ? "dropdown-input-container--chips" : ""} ${W && ve ? "dropdown-input-container--chips-multiline" : ""} ${ie ? "dropdown-input-container--clearable" : ""}`,
         children: [
           re && b?.icon && /* @__PURE__ */ c("span", {
             className: "dropdown-selected-icon dropdown-selected-icon--prefix",
@@ -332,12 +332,12 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
               children: b.label
             })]
           }),
-          W && i.map((n) => /* @__PURE__ */ g("span", {
+          W && o.map((n) => /* @__PURE__ */ g("span", {
             className: "dropdown-chip",
             children: [/* @__PURE__ */ c("span", {
               className: "dropdown-chip__label",
               children: n.label
-            }), /* @__PURE__ */ c(Ae, {
+            }), /* @__PURE__ */ c(He, {
               title: "Remove",
               children: /* @__PURE__ */ c("button", {
                 type: "button",
@@ -346,22 +346,22 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
                 onClick: (e) => {
                   e.stopPropagation(), ee(n);
                 },
-                children: fe
+                children: pe
               })
             })]
           }, `dd-chip-${n.value}`)),
-          /* @__PURE__ */ c(Ce, {
+          /* @__PURE__ */ c(je, {
             ref: F,
             id: Z,
-            placeholder: B ? "" : Ee(),
-            value: B ? "" : Ie(),
-            onChange: f || o ? Le : () => {
-            },
+            placeholder: B ? "" : De(),
+            value: B ? "" : Ee(),
+            onChange: se ? Oe : void 0,
             onClick: ne,
-            onKeyDown: Oe,
+            onKeyDown: ye,
             autoComplete: "off",
-            autoFocus: pe,
-            disabled: x
+            autoFocus: ue,
+            disabled: x,
+            readOnly: !se
           }),
           /* @__PURE__ */ g("div", {
             className: "dropdown-actions-buttons",
@@ -372,28 +372,28 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
               }),
               ie && /* @__PURE__ */ c("span", {
                 className: "dropdown-action-button dropdown-clear-button",
-                children: /* @__PURE__ */ c(le, {
+                children: /* @__PURE__ */ c(ae, {
                   variant: "plain",
-                  onClick: ke,
+                  onClick: Le,
                   disabled: x,
-                  children: fe
+                  children: pe
                 })
               }),
               /* @__PURE__ */ c("span", {
                 className: `dropdown-action-button dropdown-toggle-button ${p ? "open" : ""}`,
-                children: /* @__PURE__ */ c(le, {
+                children: /* @__PURE__ */ c(ae, {
                   variant: "plain",
                   onClick: Se,
                   disabled: x,
-                  children: _e
+                  children: ze
                 })
               })
             ]
           }),
-          De()
+          Re()
         ]
       }),
-      Re(),
+      Be(),
       A && /* @__PURE__ */ c("span", {
         className: "dropdown-error-message",
         children: A
@@ -406,5 +406,5 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
   });
 };
 export {
-  Ye as Dropdown
+  Ze as Dropdown
 };

package/dist/helpers/Images.js

@@ -1,19 +1,25 @@
-var s = "/data-files/images", g = () => `${s}/default.jpg`, i = (t) => `${s}/category/${t}.jpg`, c = (t, a) => typeof t != "string" ? URL.createObjectURL(t) : t ? t.includes("/data-files/images") || t.startsWith("blob:") || t.startsWith("http") ? t : `${s}/specific/${t}` : a ? i(a) : g(), l = (t, a) => {
-  const r = g(), e = a ? i(a) : r;
-  return t ? t.endsWith(r) ? null : t.includes("/data-files/images/category/") ? r : e : e;
-}, u = (t, a) => {
-  const r = t.currentTarget, e = l(r.src, a);
-  if (e && !r.src.endsWith(e)) {
-    r.src = e;
-    return;
-  }
-  r.onerror = null;
+var u = "/data-files", p = (l) => {
+  const e = `${u}/${l.replace(/^\/+|\/+$/g, "")}`, c = () => `${e}/default.jpg`, g = (t) => `${e}/category/${t}.jpg`, o = (t, a) => typeof t != "string" ? URL.createObjectURL(t) : t ? t.includes(e) || t.startsWith("blob:") || t.startsWith("http") ? t : `${e}/specific/${t}` : a ? g(a) : c(), n = (t, a) => {
+    const r = c(), s = a ? g(a) : r;
+    return t ? t.endsWith(r) ? null : t.includes(`${e}/category/`) ? r : s : s;
+  };
+  return {
+    basePath: e,
+    getDefaultImageUrl: c,
+    getCategoryImageUrl: g,
+    getImageUrl: o,
+    getNextImageFallback: n,
+    applyImageFallback: (t, a) => {
+      const r = t.currentTarget, s = n(r.src, a);
+      if (s && !r.src.endsWith(s)) {
+        r.src = s;
+        return;
+      }
+      r.onerror = null;
+    }
+  };
 };
 export {
-  s as IMAGES_BASE_PATH,
-  u as applyImageFallback,
-  i as getCategoryImageUrl,
-  g as getDefaultImageUrl,
-  c as getImageUrl,
-  l as getNextImageFallback
+  u as DATA_FILES_PATH,
+  p as createImagePaths
 };

package/dist/helpers/VersionInfo.js

@@ -23,7 +23,7 @@ var r = (i) => {
   const o = {
     ...i,
     lib: d,
-    libBuildNumber: 484,
+    libBuildNumber: 488,
     libCommit: n,
     libBuildDate: t
   };

package/dist/index.d.ts

@@ -152,8 +152,6 @@ export declare interface AppHeaderProps {
     showSeparator?: boolean;
 }
 
-export declare const applyImageFallback: (event: SyntheticEvent<HTMLImageElement>, categoryKey?: string) => void;
-
 export declare interface AppPersistenceDefaults<TPages, TTheme> {
     pages?: TPages;
     theme: TTheme;
@@ -772,6 +770,7 @@ export declare interface ControlPanelFilter {
     count?: number | string;
     placeholder?: string;
     multiple?: boolean;
+    /** Dropdown filters are searchable unless set to false; chips filters only show a search box when true. */
     searchable?: boolean;
     min?: number;
     max?: number;
@@ -1031,8 +1030,19 @@ declare interface CountryWithFlagProps {
  */
 export declare const createApiClient: ({ baseUrl, loginPath }: ApiClientConfig) => ApiClient;
 
+/**
+ * Image paths for one entity folder under /data-files, laid out as:
+ *   default.jpg            — fallback for the whole folder
+ *   category/<key>.jpg     — per-category fallback
+ *   specific/<filename>    — uploaded images
+ * The folder is named after what it holds (e.g. 'books'), never after the app.
+ */
+export declare const createImagePaths: (folder: string) => ImagePaths;
+
 export declare const CSRF_HEADER = "X-CSRF-Token";
 
+export declare const DATA_FILES_PATH = "/data-files";
+
 declare function DataView_2<T>({ columns, data, rowKey, pinnedIds, selectable, onSelectionChange, selectedIds: controlledSelectedIds, pageSizeOptions, initialPageSize, showPageSize, card, actions, actionsWidth, timeline, onRowClick, rowHref, rowClassName, rowDetail, empty, initialSortKey, initialSortDirection, sortKey: controlledSortKey, sortDirection: controlledSortDirection, onSortChange, miniSort, showCardSortControls, desktopView, cardMaxWidth, className, onPageChange, onPageSizeChange, currentPage: controlledCurrentPage, totalItems: controlledTotalItems, group, showResultsCount, totalCount, itemNoun, columnSelector, }: DataViewProps<T>): default_2.JSX.Element;
 export { DataView_2 as DataView }
 
@@ -1702,8 +1712,6 @@ export declare const formatSecondsToMediaTime: (seconds: number | undefined) =>
 
 export declare const fuzzyMatch: (text: string, query: string) => boolean;
 
-export declare const getCategoryImageUrl: (categoryKey: string) => string;
-
 export declare const getCsrfToken: () => string | null;
 
 /**
@@ -1711,17 +1719,6 @@ export declare const getCsrfToken: () => string | null;
  */
 export declare const getDaysInMonth: (year: number, month: number) => number;
 
-export declare const getDefaultImageUrl: () => string;
-
-/**
- * Resolves what an <img> should show for a stored image value:
- * - a File (new, unsaved upload) → a blob URL
- * - a full URL, blob URL or already-prefixed path → unchanged
- * - empty → the category fallback, else the app default
- * - a bare filename → its path under specific/
- */
-export declare const getImageUrl: (filename: string | File, categoryKey?: string) => string;
-
 export declare const getIndicatorColor: (bmi: number, ranges: BMIRange[]) => string;
 
 export declare const getIndicatorPosition: (bmi: number, ranges: BMIRange[]) => number;
@@ -1739,8 +1736,6 @@ export declare const getIsoWeek: (date: Date) => number;
  */
 export declare const getMonthMatrix: (year: number, month: number, firstDayOfWeek?: 0 | 1) => Date[][];
 
-export declare const getNextImageFallback: (currentSrc: string, categoryKey?: string) => string | null;
-
 export declare const getPediatricRanges: (p5: number, p85: number, p95: number) => BMIRange[];
 
 export declare const getPercent: (value: number, total: number) => number;
@@ -1906,7 +1901,14 @@ export declare type IconSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
 
 export declare type IconVariant = 'default' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
 
-export declare const IMAGES_BASE_PATH = "/data-files/images";
+export declare interface ImagePaths {
+    basePath: string;
+    getDefaultImageUrl: () => string;
+    getCategoryImageUrl: (categoryKey: string) => string;
+    getImageUrl: (filename: string | File, categoryKey?: string) => string;
+    getNextImageFallback: (currentSrc: string, categoryKey?: string) => string | null;
+    applyImageFallback: (event: SyntheticEvent<HTMLImageElement>, categoryKey?: string) => void;
+}
 
 export declare const InfiniteScroll: ({ children, onLoadMore, hasMore, isLoading, threshold, rootMargin, height, onScrollChange, endMessage, className, }: InfiniteScrollProps) => JSX.Element;
 

package/dist/index.js

@@ -1,37 +1,37 @@
 import { Icon as o } from "./components/Icon/Icon2.js";
 import { Accordion as m } from "./components/Accordion/Accordion2.js";
 import { useBodyScrollLock as e } from "./hooks/useBodyScrollLock.js";
-import { ThemeContext as a } from "./components/ThemeSettings/ThemeContextValue.js";
+import { ThemeContext as f } from "./components/ThemeSettings/ThemeContextValue.js";
 import { useTheme as n } from "./components/ThemeSettings/useTheme.js";
 import { useComponentEffect as s } from "./hooks/useComponentEffect.js";
-import { Button as g } from "./components/Button/Button2.js";
-import { Tooltip as c } from "./components/Tooltip/Tooltip2.js";
+import { Button as d } from "./components/Button/Button2.js";
+import { Tooltip as g } from "./components/Tooltip/Tooltip2.js";
 import { Modal as S } from "./components/Modal/Modal2.js";
 import { AlertDialog as P } from "./components/AlertDialog/AlertDialog2.js";
 import { AnalogClock as D } from "./components/AnalogClock/AnalogClock2.js";
-import { AngleSlider as M } from "./components/AngleSlider/AngleSlider2.js";
+import { AngleSlider as A } from "./components/AngleSlider/AngleSlider2.js";
 import { Separator as B } from "./components/Separator/Separator2.js";
 import { AppHeader as E } from "./components/AppHeader/AppHeader2.js";
-import { AvatarInitials as R } from "./components/AvatarInitials/AvatarInitials2.js";
-import { Badge as b } from "./components/Badge/Badge2.js";
+import { AvatarInitials as y } from "./components/AvatarInitials/AvatarInitials2.js";
+import { Badge as _ } from "./components/Badge/Badge2.js";
 import { Banner as v } from "./components/Banner/Banner2.js";
 import { Blockquote as H } from "./components/Blockquote/Blockquote2.js";
-import { ADULT_RANGES as N, PEDIATRIC_THRESHOLDS as U, calculateBMI as w, getIndicatorColor as O, getIndicatorPosition as V, getPediatricRanges as W, getRangeLabel as Q } from "./components/BMI/bmiUtils.js";
+import { ADULT_RANGES as N, PEDIATRIC_THRESHOLDS as w, calculateBMI as O, getIndicatorColor as U, getIndicatorPosition as V, getPediatricRanges as W, getRangeLabel as Q } from "./components/BMI/bmiUtils.js";
 import { BMI as G } from "./components/BMI/BMI2.js";
 import { Breadcrumb as j } from "./components/Breadcrumb/Breadcrumb2.js";
 import { BulkActionBar as K } from "./components/BulkActionBar/BulkActionBar2.js";
-import { APP_DATE_FORMAT as Y, APP_DATE_TIME_FORMAT as Z, addDays as $, addMonths as rr, formatAppDate as or, formatAppDateTime as tr, formatDate as mr, formatDateLocale as ir, formatDuration as er, formatRelativeDuration as pr, formatRelativeTime as ar, formatSecondsToMediaTime as fr, getDaysInMonth as nr, getIsoWeek as lr, getMonthMatrix as sr, getTodayDateString as ur, isAfter as gr, isBefore as dr, isDateInRange as cr, isSameDay as Tr, isToday as Sr, isWeekend as Ir } from "./helpers/Datetime.js";
+import { APP_DATE_FORMAT as Y, APP_DATE_TIME_FORMAT as Z, addDays as $, addMonths as rr, formatAppDate as or, formatAppDateTime as tr, formatDate as mr, formatDateLocale as ir, formatDuration as er, formatRelativeDuration as pr, formatRelativeTime as fr, formatSecondsToMediaTime as ar, getDaysInMonth as nr, getIsoWeek as lr, getMonthMatrix as sr, getTodayDateString as ur, isAfter as dr, isBefore as cr, isDateInRange as gr, isSameDay as Tr, isToday as Sr, isWeekend as Ir } from "./helpers/Datetime.js";
 import { Calendar as Cr } from "./components/Calendar/Calendar2.js";
-import { CalendarHeatmap as Ar } from "./components/CalendarHeatmap/CalendarHeatmap2.js";
-import { Card as hr } from "./components/Card/Card2.js";
+import { CalendarHeatmap as hr } from "./components/CalendarHeatmap/CalendarHeatmap2.js";
+import { Card as Mr } from "./components/Card/Card2.js";
 import { Checkbox as kr } from "./components/Checkbox/Checkbox2.js";
-import { Chip as yr } from "./components/Chip/Chip2.js";
+import { Chip as Rr } from "./components/Chip/Chip2.js";
 import { CollapsibleSection as Lr } from "./components/CollapsibleSection/CollapsibleSection2.js";
-import { InputNumber as _r } from "./components/InputNumber/InputNumber2.js";
+import { InputNumber as br } from "./components/InputNumber/InputNumber2.js";
 import { InputText as xr } from "./components/InputText/InputText2.js";
 import { ColorPicker as Fr } from "./components/ColorPicker/ColorPicker2.js";
-import { CommandPalette as Ur } from "./components/CommandPalette/CommandPalette2.js";
-import { Confetti as Or } from "./components/Confetti/Confetti2.js";
+import { CommandPalette as wr } from "./components/CommandPalette/CommandPalette2.js";
+import { Confetti as Ur } from "./components/Confetti/Confetti2.js";
 import Wr from "./components/ConfirmDialog/ConfirmDialog2.js";
 import { usePopover as zr } from "./components/Popover/hooks/Popover.hook.js";
 import { Popover as qr } from "./components/Popover/Popover2.js";
@@ -39,22 +39,22 @@ import { ConfirmPopover as Jr } from "./components/ConfirmPopover/ConfirmPopover
 import { ContextMenu as Xr } from "./components/ContextMenu/ContextMenu2.js";
 import { ToastContainer as Zr, ToastProvider as $r, useToast as ro } from "./components/ContextToast/ContextToast2.js";
 import { breakpoints as to, useBreakpoint as mo } from "./hooks/useBreakpoint.js";
-import { ControlPanelProvider as eo, useControlPanel as po, useControlPanelContext as ao } from "./components/ControlPanel/ControlPanelContext.js";
+import { ControlPanelProvider as eo, useControlPanel as po, useControlPanelContext as fo } from "./components/ControlPanel/ControlPanelContext.js";
 import { TimePicker as no } from "./components/TimePicker/TimePicker2.js";
 import { DatePicker as so } from "./components/DatePicker/DatePicker2.js";
-import { foldDiacritics as go, fuzzyMatch as co } from "./helpers/Search.js";
+import { foldDiacritics as co, fuzzyMatch as go } from "./helpers/Search.js";
 import { Dropdown as So } from "./components/Dropdown/Dropdown2.js";
 import { InputDate as Po } from "./components/InputDate/InputDate2.js";
 import { InputSearch as Do } from "./components/InputSearch/InputSearch2.js";
-import { Rating as Mo } from "./components/Rating/Rating2.js";
+import { Rating as Ao } from "./components/Rating/Rating2.js";
 import { Slider as Bo } from "./components/Slider/Slider2.js";
 import { ControlPanel as Eo } from "./components/ControlPanel/ControlPanel2.js";
-import { CopyButton as Ro } from "./components/CopyButton/CopyButton2.js";
-import { Flag as bo } from "./components/Flag/Flag2.js";
+import { CopyButton as yo } from "./components/CopyButton/CopyButton2.js";
+import { Flag as _o } from "./components/Flag/Flag2.js";
 import { CountryWithFlag as vo } from "./components/CountryWithFlag/CountryWithFlag2.js";
 import { getResultsCount as Ho } from "./helpers/Pagination.js";
 import { EmptyState as No } from "./components/EmptyState/EmptyState2.js";
-import { Pagination as wo } from "./components/Pagination/Pagination2.js";
+import { Pagination as Oo } from "./components/Pagination/Pagination2.js";
 import { TimelineMarkerDot as Vo, TimelineMarkers as Wo, TimelineMobileSeparator as Qo, calculateTimelineMarkers as zo } from "./components/TimelineMarkers/TimelineMarkers2.js";
 import { MiniSort as qo } from "./components/MiniSort/MiniSort2.js";
 import { DataView as Jo } from "./components/DataView/DataView2.js";
@@ -64,22 +64,22 @@ import { Drawer as rt } from "./components/Drawer/Drawer2.js";
 import { DayAgenda as tt } from "./components/DayAgenda/DayAgenda2.js";
 import { DiffViewer as it } from "./components/DiffViewer/DiffViewer2.js";
 import { EmojiPicker as pt } from "./components/EmojiPicker/EmojiPicker2.js";
-import { ErrorBoundary as ft } from "./components/ErrorBoundary/ErrorBoundary2.js";
+import { ErrorBoundary as at } from "./components/ErrorBoundary/ErrorBoundary2.js";
 import { ToggleButtons as lt } from "./components/ToggleButtons/ToggleButtons2.js";
 import { EventCalendar as ut } from "./components/EventCalendar/EventCalendar2.js";
-import { FileDropzone as dt } from "./components/FileDropzone/FileDropzone2.js";
+import { FileDropzone as ct } from "./components/FileDropzone/FileDropzone2.js";
 import { FloatButton as Tt } from "./components/FloatButton/FloatButton2.js";
 import { FloatingWindow as It } from "./components/FloatingWindow/FloatingWindow2.js";
 import { Loading as Ct } from "./components/Loading/Loading2.js";
-import { FolderBrowserModal as At } from "./components/FolderBrowserModal/FolderBrowserModal2.js";
-import { Col as ht } from "./components/Grid/Col.js";
+import { FolderBrowserModal as ht } from "./components/FolderBrowserModal/FolderBrowserModal2.js";
+import { Col as Mt } from "./components/Grid/Col.js";
 import { Grid as kt } from "./components/Grid/Grid2.js";
-import { IconPicker as yt } from "./components/IconPicker/IconPicker2.js";
+import { IconPicker as Rt } from "./components/IconPicker/IconPicker2.js";
 import { InfiniteScroll as Lt } from "./components/InfiniteScroll/InfiniteScroll2.js";
-import { InputEmail as _t, validateEmail as vt } from "./components/InputEmail/InputEmail2.js";
+import { InputEmail as bt, validateEmail as vt } from "./components/InputEmail/InputEmail2.js";
 import { InputFile as Ht } from "./components/InputFile/InputFile2.js";
-import { InputMask as Nt, InputMaskPresets as Ut } from "./components/InputMask/InputMask2.js";
-import { InputPassword as Ot } from "./components/InputPassword/InputPassword2.js";
+import { InputMask as Nt, InputMaskPresets as wt } from "./components/InputMask/InputMask2.js";
+import { InputPassword as Ut } from "./components/InputPassword/InputPassword2.js";
 import { InputPhone as Wt } from "./components/InputPhone/InputPhone2.js";
 import { InputPIN as zt } from "./components/InputPIN/InputPIN2.js";
 import { InputTextarea as qt } from "./components/InputTextarea/InputTextarea2.js";
@@ -90,20 +90,20 @@ import { List as rm } from "./components/List/List2.js";
 import { MenuHamburger as tm } from "./components/MenuHamburger/MenuHamburger2.js";
 import { Minimap as im } from "./components/Minimap/Minimap2.js";
 import { MiniStatsCard as pm } from "./components/MiniStatsCard/MiniStatsCard2.js";
-import { NavBar as fm } from "./components/NavBar/NavBar2.js";
+import { NavBar as am } from "./components/NavBar/NavBar2.js";
 import { NotificationPanel as lm } from "./components/NotificationPanel/NotificationPanel2.js";
 import { PieChart as um } from "./components/PieChart/PieChart2.js";
-import { clamp as dm, format2Digits as cm, getPercent as Tm, getPercentsOf2Numbers as Sm } from "./helpers/Numbers.js";
+import { clamp as cm, format2Digits as gm, getPercent as Tm, getPercentsOf2Numbers as Sm } from "./helpers/Numbers.js";
 import { ProgressBar as Pm } from "./components/ProgressBar/ProgressBar2.js";
 import { ProgressRing as Dm } from "./components/ProgressRing/ProgressRing2.js";
-import { QuantitySelector as Mm } from "./components/QuantitySelector/QuantitySelector2.js";
+import { QuantitySelector as Am } from "./components/QuantitySelector/QuantitySelector2.js";
 import { QuickAdd as Bm } from "./components/QuickAdd/QuickAdd2.js";
 import { QuickNumberUpdate as Em } from "./components/QuickNumberUpdate/QuickNumberUpdate2.js";
-import { Radio as Rm } from "./components/Radio/Radio2.js";
-import { QuickOptionUpdate as bm } from "./components/QuickOptionUpdate/QuickOptionUpdate2.js";
+import { Radio as ym } from "./components/Radio/Radio2.js";
+import { QuickOptionUpdate as _m } from "./components/QuickOptionUpdate/QuickOptionUpdate2.js";
 import { RangeSlider as vm } from "./components/RangeSlider/RangeSlider2.js";
-import { ensureHtml as Hm, htmlToMarkdown as Fm, htmlToPlainText as Nm, splitHtmlIntoSteps as Um } from "./helpers/HtmlContent.js";
-import { RichTextEditor as Om } from "./components/RichTextEditor/RichTextEditor2.js";
+import { ensureHtml as Hm, htmlToMarkdown as Fm, htmlToPlainText as Nm, splitHtmlIntoSteps as wm } from "./helpers/HtmlContent.js";
+import { RichTextEditor as Um } from "./components/RichTextEditor/RichTextEditor2.js";
 import { RollingNumber as Wm } from "./components/RollingNumber/RollingNumber2.js";
 import { ScrollToTop as zm } from "./components/ScrollToTop/ScrollToTop2.js";
 import { SidebarProvider as qm, useSidebar as jm } from "./components/Sidebar/SidebarContext.js";
@@ -113,40 +113,40 @@ import { Skeleton as $m } from "./components/Skeleton/Skeleton2.js";
 import { SplitPanel as oi } from "./components/SplitPanel/SplitPanel2.js";
 import { Splitter as mi } from "./components/Splitter/Splitter2.js";
 import { StackedBar as ei } from "./components/StackedBar/StackedBar2.js";
-import { Stats as ai } from "./components/Stats/Stats2.js";
+import { Stats as fi } from "./components/Stats/Stats2.js";
 import { StickyBar as ni } from "./components/StickyBar/StickyBar2.js";
 import { SuggestionsList as si } from "./components/SuggestionsList/SuggestionsList2.js";
-import { THEME_CONFIGS as gi, getThemeConfig as di } from "./components/ThemeSettings/themeConfig.js";
+import { THEME_CONFIGS as di, getThemeConfig as ci } from "./components/ThemeSettings/themeConfig.js";
 import { ThemeProvider as Ti } from "./components/ThemeSettings/ThemeContext.js";
 import { ToggleSwitch as Ii } from "./components/ToggleSwitch/ToggleSwitch2.js";
 import { ThemeSettings as Ci } from "./components/ThemeSettings/ThemeSettings2.js";
-import { Timeline as Ai } from "./components/Timeline/Timeline2.js";
-import { TipsOfTheDay as hi } from "./components/TipsOfTheDay/TipsOfTheDay2.js";
+import { Timeline as hi } from "./components/Timeline/Timeline2.js";
+import { TipsOfTheDay as Mi } from "./components/TipsOfTheDay/TipsOfTheDay2.js";
 import { Toast as ki } from "./components/Toast/Toast2.js";
-import { Toolbar as yi } from "./components/Toolbar/Toolbar2.js";
+import { Toolbar as Ri } from "./components/Toolbar/Toolbar2.js";
 import { TourHud as Li } from "./components/TourHud/TourHud2.js";
-import { Transition as _i } from "./components/Transition/Transition2.js";
+import { Transition as bi } from "./components/Transition/Transition2.js";
 import { Tree as xi } from "./components/Tree/Tree2.js";
 import { VirtualList as Fi } from "./components/VirtualList/VirtualList2.js";
-import { WHtR as Ui } from "./components/WHtR/WHtR2.js";
-import { ApiError as Oi, CSRF_HEADER as Vi, HttpMethod as Wi, HttpStatus as Qi, buildRequestHeaders as zi, createApiClient as Gi, getCsrfToken as qi, isClientErrorStatus as ji, isServerErrorStatus as Ji, isSuccessStatus as Ki, readErrorMessage as Xi } from "./helpers/Http.js";
+import { WHtR as wi } from "./components/WHtR/WHtR2.js";
+import { ApiError as Ui, CSRF_HEADER as Vi, HttpMethod as Wi, HttpStatus as Qi, buildRequestHeaders as zi, createApiClient as Gi, getCsrfToken as qi, isClientErrorStatus as ji, isServerErrorStatus as Ji, isSuccessStatus as Ki, readErrorMessage as Xi } from "./helpers/Http.js";
 import { AuthContext as Zi, AuthProvider as $i } from "./contexts/AuthContext/AuthContext.js";
 import { useAuth as oe } from "./hooks/useAuth/useAuth.js";
 import { ChangePasswordModal as me } from "./components/Auth/ChangePasswordModal/ChangePasswordModal2.js";
 import { Login as ee } from "./components/Auth/Login/Login2.js";
-import { useAccountMenu as ae } from "./hooks/useAccountMenu.js";
+import { useAccountMenu as fe } from "./hooks/useAccountMenu.js";
 import { AppPersistenceStorage as ne } from "./helpers/AppPersistenceStorage.js";
 import { useAppPersistence as se } from "./hooks/useAppPersistence.js";
-import { chartColors as ge, chartTooltipStyle as de } from "./helpers/Charts.js";
+import { chartColors as de, chartTooltipStyle as ce } from "./helpers/Charts.js";
 import { formatBigNumber as Te, formatBytes as Se, formatMoney as Ie } from "./helpers/Format.js";
 import { highlightText as Ce } from "./helpers/Highlight.js";
-import { IMAGES_BASE_PATH as Ae, applyImageFallback as Me, getCategoryImageUrl as he, getDefaultImageUrl as Be, getImageUrl as ke, getNextImageFallback as Ee } from "./helpers/Images.js";
-import { matchStringsByLogicalOperator as Re } from "./helpers/LogicalOperators.js";
-import { shortenText as be, slugify as _e, truncateText as ve } from "./helpers/Strings.js";
-import { extractDomainFromUrl as He, stripQueryString as Fe, stripTrackingParams as Ne } from "./helpers/Urls.js";
-import { LIB_BUILD_DATE as we, LIB_BUILD_ID as Oe, LIB_BUILD_NUMBER as Ve, LIB_COMMIT as We, LIB_VERSION as Qe } from "./version.js";
-import { initVersionInfo as Ge } from "./helpers/VersionInfo.js";
-import { validateVin as je } from "./validators/Vin.js";
+import { DATA_FILES_PATH as he, createImagePaths as Ae } from "./helpers/Images.js";
+import { matchStringsByLogicalOperator as Be } from "./helpers/LogicalOperators.js";
+import { shortenText as Ee, slugify as Re, truncateText as ye } from "./helpers/Strings.js";
+import { extractDomainFromUrl as _e, stripQueryString as be, stripTrackingParams as ve } from "./helpers/Urls.js";
+import { LIB_BUILD_DATE as He, LIB_BUILD_ID as Fe, LIB_BUILD_NUMBER as Ne, LIB_COMMIT as we, LIB_VERSION as Oe } from "./version.js";
+import { initVersionInfo as Ve } from "./helpers/VersionInfo.js";
+import { validateVin as Qe } from "./validators/Vin.js";
 export {
   N as ADULT_RANGES,
   Y as APP_DATE_FORMAT,
@@ -154,40 +154,41 @@ export {
   m as Accordion,
   P as AlertDialog,
   D as AnalogClock,
-  M as AngleSlider,
-  Oi as ApiError,
+  A as AngleSlider,
+  Ui as ApiError,
   E as AppHeader,
   ne as AppPersistenceStorage,
   Zi as AuthContext,
   ee as AuthLogin,
   $i as AuthProvider,
-  R as AvatarInitials,
+  y as AvatarInitials,
   G as BMI,
-  b as Badge,
+  _ as Badge,
   v as Banner,
   H as Blockquote,
   j as Breadcrumb,
   K as BulkActionBar,
-  g as Button,
+  d as Button,
   Vi as CSRF_HEADER,
   Cr as Calendar,
-  Ar as CalendarHeatmap,
-  hr as Card,
+  hr as CalendarHeatmap,
+  Mr as Card,
   me as ChangePasswordModal,
   kr as Checkbox,
-  yr as Chip,
-  ht as Col,
+  Rr as Chip,
+  Mt as Col,
   Lr as CollapsibleSection,
   Fr as ColorPicker,
-  Ur as CommandPalette,
-  Or as Confetti,
+  wr as CommandPalette,
+  Ur as Confetti,
   Wr as ConfirmDialog,
   Jr as ConfirmPopover,
   Xr as ContextMenu,
   Eo as ControlPanel,
   eo as ControlPanelProvider,
-  Ro as CopyButton,
+  yo as CopyButton,
   vo as CountryWithFlag,
+  he as DATA_FILES_PATH,
   Jo as DataView,
   so as DatePicker,
   Xo as DateRangePicker,
@@ -197,28 +198,27 @@ export {
   So as Dropdown,
   pt as EmojiPicker,
   No as EmptyState,
-  ft as ErrorBoundary,
+  at as ErrorBoundary,
   ut as EventCalendar,
-  dt as FileDropzone,
-  bo as Flag,
+  ct as FileDropzone,
+  _o as Flag,
   Tt as FloatButton,
   It as FloatingWindow,
-  At as FolderBrowserModal,
+  ht as FolderBrowserModal,
   kt as Grid,
   Wi as HttpMethod,
   Qi as HttpStatus,
-  Ae as IMAGES_BASE_PATH,
   o as Icon,
-  yt as IconPicker,
+  Rt as IconPicker,
   Lt as InfiniteScroll,
   Po as InputDate,
-  _t as InputEmail,
+  bt as InputEmail,
   Ht as InputFile,
   Nt as InputMask,
-  Ut as InputMaskPresets,
-  _r as InputNumber,
+  wt as InputMaskPresets,
+  br as InputNumber,
   zt as InputPIN,
-  Ot as InputPassword,
+  Ut as InputPassword,
   Wt as InputPhone,
   Do as InputSearch,
   xr as InputText,
@@ -226,11 +226,11 @@ export {
   Jt as InputTime,
   Xt as InputUrl,
   Zt as JourneyWizard,
-  we as LIB_BUILD_DATE,
-  Oe as LIB_BUILD_ID,
-  Ve as LIB_BUILD_NUMBER,
-  We as LIB_COMMIT,
-  Qe as LIB_VERSION,
+  He as LIB_BUILD_DATE,
+  Fe as LIB_BUILD_ID,
+  Ne as LIB_BUILD_NUMBER,
+  we as LIB_COMMIT,
+  Oe as LIB_VERSION,
   rm as List,
   Ct as Loading,
   tm as MenuHamburger,
@@ -238,22 +238,22 @@ export {
   pm as MiniStatsCard,
   im as Minimap,
   S as Modal,
-  fm as NavBar,
+  am as NavBar,
   lm as NotificationPanel,
-  U as PEDIATRIC_THRESHOLDS,
-  wo as Pagination,
+  w as PEDIATRIC_THRESHOLDS,
+  Oo as Pagination,
   um as PieChart,
   qr as Popover,
   Pm as ProgressBar,
   Dm as ProgressRing,
-  Mm as QuantitySelector,
+  Am as QuantitySelector,
   Bm as QuickAdd,
   Em as QuickNumberUpdate,
-  bm as QuickOptionUpdate,
-  Rm as Radio,
+  _m as QuickOptionUpdate,
+  ym as Radio,
   vm as RangeSlider,
-  Mo as Rating,
-  Om as RichTextEditor,
+  Ao as Rating,
+  Um as RichTextEditor,
   Wm as RollingNumber,
   zm as ScrollToTop,
   B as Separator,
@@ -265,46 +265,46 @@ export {
   oi as SplitPanel,
   mi as Splitter,
   ei as StackedBar,
-  ai as Stats,
+  fi as Stats,
   ni as StickyBar,
   si as SuggestionsList,
-  gi as THEME_CONFIGS,
-  a as ThemeContext,
+  di as THEME_CONFIGS,
+  f as ThemeContext,
   Ti as ThemeProvider,
   Ci as ThemeSettings,
   no as TimePicker,
-  Ai as Timeline,
+  hi as Timeline,
   Vo as TimelineMarkerDot,
   Wo as TimelineMarkers,
   Qo as TimelineMobileSeparator,
-  hi as TipsOfTheDay,
+  Mi as TipsOfTheDay,
   ki as Toast,
   Zr as ToastContainer,
   $r as ToastProvider,
   lt as ToggleButtons,
   Ii as ToggleSwitch,
-  yi as Toolbar,
-  c as Tooltip,
+  Ri as Toolbar,
+  g as Tooltip,
   Li as TourHud,
-  _i as Transition,
+  bi as Transition,
   xi as Tree,
   Fi as VirtualList,
-  Ui as WHtR,
+  wi as WHtR,
   $ as addDays,
   rr as addMonths,
-  Me as applyImageFallback,
   to as breakpoints,
   zi as buildRequestHeaders,
-  w as calculateBMI,
+  O as calculateBMI,
   zo as calculateTimelineMarkers,
-  ge as chartColors,
-  de as chartTooltipStyle,
-  dm as clamp,
+  de as chartColors,
+  ce as chartTooltipStyle,
+  cm as clamp,
   Gi as createApiClient,
+  Ae as createImagePaths,
   Hm as ensureHtml,
-  He as extractDomainFromUrl,
-  go as foldDiacritics,
-  cm as format2Digits,
+  _e as extractDomainFromUrl,
+  co as foldDiacritics,
+  gm as format2Digits,
   or as formatAppDate,
   tr as formatAppDateTime,
   Te as formatBigNumber,
@@ -314,60 +314,56 @@ export {
   er as formatDuration,
   Ie as formatMoney,
   pr as formatRelativeDuration,
-  ar as formatRelativeTime,
-  fr as formatSecondsToMediaTime,
-  co as fuzzyMatch,
-  he as getCategoryImageUrl,
+  fr as formatRelativeTime,
+  ar as formatSecondsToMediaTime,
+  go as fuzzyMatch,
   qi as getCsrfToken,
   nr as getDaysInMonth,
-  Be as getDefaultImageUrl,
-  ke as getImageUrl,
-  O as getIndicatorColor,
+  U as getIndicatorColor,
   V as getIndicatorPosition,
   lr as getIsoWeek,
   sr as getMonthMatrix,
-  Ee as getNextImageFallback,
   W as getPediatricRanges,
   Tm as getPercent,
   Sm as getPercentsOf2Numbers,
   Q as getRangeLabel,
   Ho as getResultsCount,
-  di as getThemeConfig,
+  ci as getThemeConfig,
   ur as getTodayDateString,
   Ce as highlightText,
   Fm as htmlToMarkdown,
   Nm as htmlToPlainText,
-  Ge as initVersionInfo,
-  gr as isAfter,
-  dr as isBefore,
+  Ve as initVersionInfo,
+  dr as isAfter,
+  cr as isBefore,
   ji as isClientErrorStatus,
-  cr as isDateInRange,
+  gr as isDateInRange,
   Tr as isSameDay,
   Ji as isServerErrorStatus,
   Ki as isSuccessStatus,
   Sr as isToday,
   Ir as isWeekend,
-  Re as matchStringsByLogicalOperator,
+  Be as matchStringsByLogicalOperator,
   Xi as readErrorMessage,
-  be as shortenText,
-  _e as slugify,
-  Um as splitHtmlIntoSteps,
-  Fe as stripQueryString,
-  Ne as stripTrackingParams,
-  ve as truncateText,
-  ae as useAccountMenu,
+  Ee as shortenText,
+  Re as slugify,
+  wm as splitHtmlIntoSteps,
+  be as stripQueryString,
+  ve as stripTrackingParams,
+  ye as truncateText,
+  fe as useAccountMenu,
   se as useAppPersistence,
   oe as useAuth,
   e as useBodyScrollLock,
   mo as useBreakpoint,
   s as useComponentEffect,
   po as useControlPanel,
-  ao as useControlPanelContext,
+  fo as useControlPanelContext,
   zr as usePopover,
   jm as useSidebar,
   Zo as useSwipe,
   n as useTheme,
   ro as useToast,
   vt as validateEmail,
-  je as validateVin
+  Qe as validateVin
 };

package/dist/version.js

@@ -1,4 +1,4 @@
-var I = "3.6.0", B = 484, L = "40a4ef2", _ = "2026-10-10T06:47:22.564Z", a = "484";
+var I = "3.8.0", B = 488, L = "e4aa259", _ = "2026-10-12T07:30:32.085Z", a = "488";
 export {
   _ as LIB_BUILD_DATE,
   a as LIB_BUILD_ID,

package/dist/version.json

@@ -1,6 +1,6 @@
 {
-  "version": "3.6.0",
-  "buildNumber": 484,
-  "commit": "40a4ef2",
-  "buildDate": "2026-10-10T06:47:22.564Z"
+  "version": "3.8.0",
+  "buildNumber": 488,
+  "commit": "e4aa259",
+  "buildDate": "2026-10-12T07:30:32.085Z"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memobit/libs",
-  "version": "3.6.0",
+  "version": "3.8.0",
   "description": "React component library powering the Memobit apps — 100+ components, helpers and hooks. Icons ship as @memobit/icons and themes as @memobit/themes. TypeScript-first, ESM-only, React 19.",
   "keywords": [
     "react",