@smwb/ui-react 2.6.1 → 2.6.3

package/dist/assets/styles/less/components/chip/chip.entry.css

@@ -1 +1 @@
-.smwb-chip{position:relative;user-select:none;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border-radius:6px;cursor:pointer;transition:all .15s ease-in-out;color:var(--smui-primaryTextColor)}.smwb-chip.smwb-disabled{opacity:.8;pointer-events:none;background-color:var(--smui-disabledBgColor);border-color:var(--smui-disabledBgColor);color:var(--smui-disabledTextColor)}.smwb-chip.smwb-disabled.smwb-outlined{border:1px solid var(--smui-disabledBgColor);background:none}.smwb-chip.smwb-disabled i{color:var(--smui-disabledTextColor)}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled){background-color:var(--smui-chipsBg);box-shadow:0 3px 5px -1px #0000001c,0 1px 1px #00000024,0 2px 3px #0000001f}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled):hover{background-color:var(--smui-chipsHoverBg)}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled):active{background-color:var(--smui-chipsActiveBg);box-shadow:0 3px 5px -1px #00000029,0 1px 1px #00000024,0 2px 3px #0000001f}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled).smwb-selected{background-color:var(--smui-chipsSelectedBg)}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled){border:1px solid var(--smui-chipsOutlinedBorder)}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled):hover{background-color:var(--smui-chipsHoverBg)}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled):active{background-color:var(--smui-chipsActiveBg);box-shadow:0 3px 5px -1px #0000001c,0 1px 1px #00000024,0 2px 3px #0000001f}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled).smwb-selected{background-color:var(--smui-chipsSelectedBg)}.smwb-chip__delete-icon{display:inline-flex;align-items:center;justify-content:center}.smwb-chip__delete-icon svg{fill:var(--smui-chipsIconColor);transition:all .15s ease-in-out}.smwb-chip__delete-icon svg:hover{fill:var(--smui-chipsIconColorHover)}.smwb-chip__icon{display:inline-flex;align-items:center;justify-content:center}.smwb-chip__delete-icon{background:transparent;border:0;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer}.smwb-chip_size-small{height:24px;padding:0 8px;font-size:.75rem}.smwb-chip.smwb-chip_color-primary.smwb-filled{background-color:var(--smui-primaryColor);color:var(--smui-onPrimaryColor)}.smwb-chip.smwb-chip_color-primary.smwb-filled:hover{background-color:var(--smui-primaryColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-primary.smwb-filled:active{background-color:var(--smui-primaryColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-primary.smwb-outlined{color:var(--smui-primaryColor);border:1px solid var(--smui-primaryColor);background:transparent}.smwb-chip.smwb-chip_color-secondary.smwb-filled{background-color:var(--smui-secondaryColor);color:var(--smui-onSecondaryColor)}.smwb-chip.smwb-chip_color-secondary.smwb-filled:hover{background-color:var(--smui-secondaryColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-secondary.smwb-filled:active{background-color:var(--smui-secondaryColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-secondary.smwb-outlined{color:var(--smui-secondaryColor);border:1px solid var(--smui-secondaryColor);background:transparent}.smwb-chip.smwb-chip_color-error.smwb-filled{background-color:var(--smui-errorColor);color:var(--smui-onErrorColor)}.smwb-chip.smwb-chip_color-error.smwb-filled:hover{background-color:var(--smui-errorColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-error.smwb-filled:active{background-color:var(--smui-errorColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-error.smwb-outlined{color:var(--smui-errorColor);border:1px solid var(--smui-errorColor);background:transparent}.smwb-chip.smwb-chip_color-success.smwb-filled{background-color:var(--smui-successColor);color:var(--smui-onSuccessColor)}.smwb-chip.smwb-chip_color-success.smwb-filled:hover{background-color:var(--smui-successColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-success.smwb-filled:active{background-color:var(--smui-successColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-success.smwb-outlined{color:var(--smui-successColor);border:1px solid var(--smui-successColor);background:transparent}.smwb-chip.smwb-chip_color-warning.smwb-filled{background-color:var(--smui-warningColor);color:var(--smui-onWarningColor)}.smwb-chip.smwb-chip_color-warning.smwb-filled:hover{background-color:var(--smui-warningColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-warning.smwb-filled:active{background-color:var(--smui-warningColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-warning.smwb-outlined{color:var(--smui-warningColor);border:1px solid var(--smui-warningColor);background:transparent}.smwb-chip.smwb-chip_color-info.smwb-filled{background-color:var(--smui-infoColor);color:var(--smui-onInfoColor)}.smwb-chip.smwb-chip_color-info.smwb-filled:hover{background-color:var(--smui-infoColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-info.smwb-filled:active{background-color:var(--smui-infoColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-info.smwb-outlined{color:var(--smui-infoColor);border:1px solid var(--smui-infoColor);background:transparent}
+.smwb-chip{position:relative;user-select:none;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border-radius:6px;cursor:pointer;transition:all .15s ease-in-out;color:var(--smui-primaryTextColor)}.smwb-chip.smwb-disabled{opacity:.8;pointer-events:none;background-color:var(--smui-disabledBgColor);border-color:var(--smui-disabledBgColor);color:var(--smui-disabledTextColor)}.smwb-chip.smwb-disabled.smwb-outlined{border:1px solid var(--smui-disabledBgColor);background:none}.smwb-chip.smwb-disabled i{color:var(--smui-disabledTextColor)}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled){background-color:var(--smui-chipsBg);box-shadow:0 3px 5px -1px #0000001c,0 1px 1px #00000024,0 2px 3px #0000001f}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled):hover{background-color:var(--smui-chipsHoverBg)}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled):active{background-color:var(--smui-chipsActiveBg);box-shadow:0 3px 5px -1px #00000029,0 1px 1px #00000024,0 2px 3px #0000001f}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled).smwb-selected{background-color:var(--smui-chipsSelectedBg)}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled){border:1px solid var(--smui-chipsOutlinedBorder)}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled):hover{background-color:var(--smui-chipsHoverBg)}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled):active{background-color:var(--smui-chipsActiveBg);box-shadow:0 3px 5px -1px #0000001c,0 1px 1px #00000024,0 2px 3px #0000001f}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled).smwb-selected{background-color:var(--smui-chipsSelectedBg)}.smwb-chip__delete-icon{display:inline-flex;align-items:center;justify-content:center}.smwb-chip__delete-icon svg{fill:var(--smui-chipsIconColor);transition:all .15s ease-in-out}.smwb-chip__delete-icon svg:hover{fill:var(--smui-chipsIconColorHover)}.smwb-chip__icon{display:inline-flex;align-items:center;justify-content:center}.smwb-chip__delete-icon{background:transparent;border:0;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer}.smwb-chip_size-small{height:24px;padding:0 8px;font-size:.75rem}.smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-filled{background-color:var(--smui-primaryColor);color:var(--smui-onPrimaryColor)}.smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-filled:hover{background-color:var(--smui-primaryColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-filled:active{background-color:var(--smui-primaryColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-outlined{color:var(--smui-primaryColor);border-color:var(--smui-primaryColor)}.smwb-chip.smwb-chip_color-secondary:not(.smwb-chip.smwb-disabled).smwb-filled{background-color:var(--smui-secondaryColor);color:var(--smui-onSecondaryColor)}.smwb-chip.smwb-chip_color-secondary:not(.smwb-chip.smwb-disabled).smwb-filled:hover{background-color:var(--smui-secondaryColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-secondary:not(.smwb-chip.smwb-disabled).smwb-filled:active{background-color:var(--smui-secondaryColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-secondary:not(.smwb-chip.smwb-disabled).smwb-outlined{color:var(--smui-secondaryColor);border-color:var(--smui-secondaryColor)}.smwb-chip.smwb-chip_color-error:not(.smwb-chip.smwb-disabled).smwb-filled{background-color:var(--smui-errorColor);color:var(--smui-onErrorColor)}.smwb-chip.smwb-chip_color-error:not(.smwb-chip.smwb-disabled).smwb-filled:hover{background-color:var(--smui-errorColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-error:not(.smwb-chip.smwb-disabled).smwb-filled:active{background-color:var(--smui-errorColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-error:not(.smwb-chip.smwb-disabled).smwb-outlined{color:var(--smui-errorColor);border-color:var(--smui-errorColor)}.smwb-chip.smwb-chip_color-success:not(.smwb-chip.smwb-disabled).smwb-filled{background-color:var(--smui-successColor);color:var(--smui-onSuccessColor)}.smwb-chip.smwb-chip_color-success:not(.smwb-chip.smwb-disabled).smwb-filled:hover{background-color:var(--smui-successColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-success:not(.smwb-chip.smwb-disabled).smwb-filled:active{background-color:var(--smui-successColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-success:not(.smwb-chip.smwb-disabled).smwb-outlined{color:var(--smui-successColor);border-color:var(--smui-successColor)}.smwb-chip.smwb-chip_color-warning:not(.smwb-chip.smwb-disabled).smwb-filled{background-color:var(--smui-warningColor);color:var(--smui-onWarningColor)}.smwb-chip.smwb-chip_color-warning:not(.smwb-chip.smwb-disabled).smwb-filled:hover{background-color:var(--smui-warningColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-warning:not(.smwb-chip.smwb-disabled).smwb-filled:active{background-color:var(--smui-warningColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-warning:not(.smwb-chip.smwb-disabled).smwb-outlined{color:var(--smui-warningColor);border-color:var(--smui-warningColor)}.smwb-chip.smwb-chip_color-info:not(.smwb-chip.smwb-disabled).smwb-filled{background-color:var(--smui-infoColor);color:var(--smui-onInfoColor)}.smwb-chip.smwb-chip_color-info:not(.smwb-chip.smwb-disabled).smwb-filled:hover{background-color:var(--smui-infoColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-info:not(.smwb-chip.smwb-disabled).smwb-filled:active{background-color:var(--smui-infoColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-info:not(.smwb-chip.smwb-disabled).smwb-outlined{color:var(--smui-infoColor);border-color:var(--smui-infoColor)}

package/dist/assets/styles/less/components/modal/modal.entry.css

@@ -1 +1 @@
-.smwb-modal{display:flex;flex-direction:column;min-height:150px;border-radius:16px;line-height:1.5;overflow-y:auto;color:var(--smui-onSurfaceColor);background-color:var(--smui-surfaceBackground);box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.smwb-modal__header{padding:20px 20px 10px}.smwb-modal__content{padding:10px 20px;flex-grow:1;overflow:hidden auto}.smwb-modal__footer{padding:10px 20px 20px}.smwb-modal.smwb-small{width:25%;height:25%}.smwb-modal.smwb-medium{width:min(480px,90vw);height:auto;max-height:min(560px,90vh)}.smwb-modal.smwb-large{width:50%;height:50%}.smwb-modal.smwb-fullscreen{width:100%;height:100%;border-radius:0}.smwb-modal__overlay{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;min-width:100%;min-height:100%;z-index:1001;overflow:hidden}.smwb-modal__overlay-appear .smwb-modal.smwb-fade,.smwb-modal__overlay-enter .smwb-modal.smwb-fade{opacity:0}.smwb-modal__overlay-appear .smwb-modal.smwb-scale,.smwb-modal__overlay-enter .smwb-modal.smwb-scale{opacity:0;transform:scale(0)}.smwb-modal__overlay-appear .smwb-modal.smwb-drop,.smwb-modal__overlay-enter .smwb-modal.smwb-drop{opacity:0;transform:translateY(-100%)}@media(min-width:800px){.smwb-modal__overlay-appear-active:not(.smwb-fullscreen).smwb-dark,.smwb-modal__overlay-enter-active:not(.smwb-fullscreen).smwb-dark{background-color:#00000080;transition:background-color 225ms ease-in-out}.smwb-modal__overlay-appear-active:not(.smwb-fullscreen).smwb-blured,.smwb-modal__overlay-enter-active:not(.smwb-fullscreen).smwb-blured{backdrop-filter:blur(5px);transition:backdrop-filter 225ms ease-in-out}.smwb-modal__overlay-appear-active:not(.smwb-fullscreen).smwb-darkBlured,.smwb-modal__overlay-enter-active:not(.smwb-fullscreen).smwb-darkBlured{background-color:#00000080;backdrop-filter:blur(5px);transition:backdrop-filter 225ms ease-in-out,background-color 225ms ease-in-out}}.smwb-modal__overlay-appear-active .smwb-modal.smwb-fade,.smwb-modal__overlay-enter-active .smwb-modal.smwb-fade{opacity:1;transition:opacity 225ms ease-in-out}.smwb-modal__overlay-appear-active .smwb-modal.smwb-scale,.smwb-modal__overlay-enter-active .smwb-modal.smwb-scale{opacity:1;transform:scale(1);transition:opacity 225ms ease-in-out,transform 225ms ease-in-out}.smwb-modal__overlay-appear-active .smwb-modal.smwb-drop,.smwb-modal__overlay-enter-active .smwb-modal.smwb-drop{opacity:1;transform:translateY(0);transition:opacity 225ms ease-in-out,transform 225ms ease-in-out}@media(min-width:800px){.smwb-modal__overlay-appear-done:not(.smwb-fullscreen).smwb-dark,.smwb-modal__overlay-enter-done:not(.smwb-fullscreen).smwb-dark,.smwb-modal__overlay-exit:not(.smwb-fullscreen).smwb-dark{background-color:#00000080}.smwb-modal__overlay-appear-done:not(.smwb-fullscreen).smwb-blured,.smwb-modal__overlay-enter-done:not(.smwb-fullscreen).smwb-blured,.smwb-modal__overlay-exit:not(.smwb-fullscreen).smwb-blured{backdrop-filter:blur(5px)}.smwb-modal__overlay-appear-done:not(.smwb-fullscreen).smwb-darkBlured,.smwb-modal__overlay-enter-done:not(.smwb-fullscreen).smwb-darkBlured,.smwb-modal__overlay-exit:not(.smwb-fullscreen).smwb-darkBlured{background-color:#00000080;backdrop-filter:blur(5px)}}@media(min-width:800px){.smwb-modal__overlay-exit-active:not(.smwb-fullscreen).smwb-dark{background-color:transparent;transition:background-color .15s ease-in-out}.smwb-modal__overlay-exit-active:not(.smwb-fullscreen).smwb-blured{backdrop-filter:blur(0);transition:backdrop-filter .15s ease-in-out}.smwb-modal__overlay-exit-active:not(.smwb-fullscreen).smwb-darkBlured{background-color:transparent;backdrop-filter:blur(0);transition:backdrop-filter .15s ease-in-out,background-color .15s ease-in-out}}.smwb-modal__overlay-exit-active .smwb-modal.smwb-fade{opacity:0;transition:opacity .15s ease-in-out}.smwb-modal__overlay-exit-active .smwb-modal.smwb-scale{opacity:0;transform:scale(0);transition:opacity .15s ease-in-out,transform .15s ease-in-out}.smwb-modal__overlay-exit-active .smwb-modal.smwb-drop{opacity:0;transform:translateY(-100%);transition:opacity .15s ease-in-out,transform .15s ease-in-out}@media(max-width:800px){.smwb-modal.smwb-small,.smwb-modal.smwb-medium,.smwb-modal.smwb-large,.smwb-modal.smwb-fullscreen{width:100%;height:100%;border-radius:0}}@media(max-height:600px){.smwb-modal{min-height:250px;min-width:280px}}.smwb-scrollbar::-webkit-scrollbar-thumb{background-color:var(--smui-scrollThumbColor);border-radius:999px}.smwb-scrollbar::-webkit-scrollbar{width:6px;height:6px}.smwb-scrollbar::-webkit-scrollbar-track{background-color:transparent}
+.smwb-modal{display:flex;flex-direction:column;min-height:150px;border-radius:16px;line-height:1.5;overflow-y:auto;color:var(--smui-onSurfaceColor);background-color:var(--smui-surfaceBackground);box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.smwb-modal__header{padding:20px 20px 10px}.smwb-modal__content{padding:10px 20px;flex-grow:1;overflow:hidden auto}.smwb-modal__footer{padding:10px 20px 20px}.smwb-modal.smwb-small{width:25%;height:25%}.smwb-modal.smwb-medium{width:min(480px,90vw);height:auto;max-height:min(560px,90vh)}.smwb-modal.smwb-large{width:50%;height:50%}.smwb-modal.smwb-fullscreen{width:100%;height:100%;border-radius:0}.smwb-modal__overlay{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;min-width:100%;min-height:100%;z-index:1001;overflow:hidden}.smwb-modal__overlay-appear .smwb-modal.smwb-fade,.smwb-modal__overlay-enter .smwb-modal.smwb-fade{opacity:0}.smwb-modal__overlay-appear .smwb-modal.smwb-scale,.smwb-modal__overlay-enter .smwb-modal.smwb-scale{opacity:0;transform:scale(0)}.smwb-modal__overlay-appear .smwb-modal.smwb-drop,.smwb-modal__overlay-enter .smwb-modal.smwb-drop{opacity:0;transform:translateY(-100%)}@media(min-width:800px){.smwb-modal__overlay-appear-active:not(.smwb-fullscreen).smwb-dark,.smwb-modal__overlay-enter-active:not(.smwb-fullscreen).smwb-dark{background-color:#00000080;transition:background-color 225ms ease-in-out}.smwb-modal__overlay-appear-active:not(.smwb-fullscreen).smwb-blured,.smwb-modal__overlay-enter-active:not(.smwb-fullscreen).smwb-blured{backdrop-filter:blur(5px);transition:backdrop-filter 225ms ease-in-out}.smwb-modal__overlay-appear-active:not(.smwb-fullscreen).smwb-darkBlured,.smwb-modal__overlay-enter-active:not(.smwb-fullscreen).smwb-darkBlured{background-color:#00000080;backdrop-filter:blur(5px);transition:backdrop-filter 225ms ease-in-out,background-color 225ms ease-in-out}}.smwb-modal__overlay-appear-active .smwb-modal.smwb-fade,.smwb-modal__overlay-enter-active .smwb-modal.smwb-fade{opacity:1;transition:opacity 225ms ease-in-out}.smwb-modal__overlay-appear-active .smwb-modal.smwb-scale,.smwb-modal__overlay-enter-active .smwb-modal.smwb-scale{opacity:1;transform:scale(1);transition:opacity 225ms ease-in-out,transform 225ms ease-in-out}.smwb-modal__overlay-appear-active .smwb-modal.smwb-drop,.smwb-modal__overlay-enter-active .smwb-modal.smwb-drop{opacity:1;transform:translateY(0);transition:opacity 225ms ease-in-out,transform 225ms ease-in-out}@media(min-width:800px){.smwb-modal__overlay-appear-done:not(.smwb-fullscreen).smwb-dark,.smwb-modal__overlay-enter-done:not(.smwb-fullscreen).smwb-dark,.smwb-modal__overlay-exit:not(.smwb-fullscreen).smwb-dark{background-color:#00000080}.smwb-modal__overlay-appear-done:not(.smwb-fullscreen).smwb-blured,.smwb-modal__overlay-enter-done:not(.smwb-fullscreen).smwb-blured,.smwb-modal__overlay-exit:not(.smwb-fullscreen).smwb-blured{backdrop-filter:blur(5px)}.smwb-modal__overlay-appear-done:not(.smwb-fullscreen).smwb-darkBlured,.smwb-modal__overlay-enter-done:not(.smwb-fullscreen).smwb-darkBlured,.smwb-modal__overlay-exit:not(.smwb-fullscreen).smwb-darkBlured{background-color:#00000080;backdrop-filter:blur(5px)}}@media(min-width:800px){.smwb-modal__overlay-exit-active:not(.smwb-fullscreen).smwb-dark{background-color:transparent;transition:background-color .15s ease-in-out}.smwb-modal__overlay-exit-active:not(.smwb-fullscreen).smwb-blured{backdrop-filter:blur(0);transition:backdrop-filter .15s ease-in-out}.smwb-modal__overlay-exit-active:not(.smwb-fullscreen).smwb-darkBlured{background-color:transparent;backdrop-filter:blur(0);transition:backdrop-filter .15s ease-in-out,background-color .15s ease-in-out}}.smwb-modal__overlay-exit-active .smwb-modal.smwb-fade{opacity:0;transition:opacity .15s ease-in-out}.smwb-modal__overlay-exit-active .smwb-modal.smwb-scale{opacity:0;transform:scale(0);transition:opacity .15s ease-in-out,transform .15s ease-in-out}.smwb-modal__overlay-exit-active .smwb-modal.smwb-drop{opacity:0;transform:translateY(-100%);transition:opacity .15s ease-in-out,transform .15s ease-in-out}@media(max-width:800px){.smwb-modal.smwb-small,.smwb-modal.smwb-medium,.smwb-modal.smwb-large,.smwb-modal.smwb-fullscreen{width:100%;height:100%;max-height:none;border-radius:0}}@media(max-height:600px){.smwb-modal{min-height:250px;min-width:280px}}.smwb-scrollbar::-webkit-scrollbar-thumb{background-color:var(--smui-scrollThumbColor);border-radius:999px}.smwb-scrollbar::-webkit-scrollbar{width:6px;height:6px}.smwb-scrollbar::-webkit-scrollbar-track{background-color:transparent}

package/dist/assets/styles/less/components/overflowMenu/overflowMenu.entry.css

@@ -1 +1 @@
-.smwb-overflow-menu{display:inline-flex}.smwb-overflow-menu__item--danger{color:var(--smui-errorColor)}
+.smwb-overflow-menu{display:inline-flex}.smwb-overflow-menu__item--danger:not(.smwb-menu__item--disabled){color:var(--smui-errorColor)}

package/dist/assets/styles/less/components/table/table.entry.css

@@ -1 +1 @@
-.smwb-table{width:100%;white-space:nowrap;border-collapse:collapse;overflow:scroll}.smwb-table.smwb-hovered tbody tr:hover{background:var(--smui-onSurfaceHover);cursor:pointer}.smwb-table__error{margin-bottom:10px}.smwb-table__container{display:flex;overflow-x:auto;border:1px solid var(--smui-tableBorderColor);border-radius:4px;flex-direction:column}.smwb-table__container.smwb-withPagination{border-radius:4px 4px 0 0}.smwb-table__wrapper{display:flex;flex-direction:column;background-color:var(--smui-surfaceBackground)}.smwb-table__wrapper_loading{pointer-events:none}.smwb-table__cell{position:relative;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:nowrap;padding:0 16px;height:52px;vertical-align:middle;overflow:hidden;word-wrap:break-word}.smwb-table__cell.smwb-head-cell{height:56px;text-align:left;font-weight:500}.smwb-table__cell.smwb-head-cell.smwb-sortable{cursor:pointer}.smwb-table__cell.smwb-head-cell .smwb-head-cell__content{align-items:center;display:inline-flex;vertical-align:middle;gap:5px;user-select:none}.smwb-table__cell.smwb-head-cell .smwb-head-cell__content input{font-weight:500}.smwb-table__cell.smwb-head-cell.smwb-align_left{text-align:left}.smwb-table__cell.smwb-head-cell.smwb-align_center{text-align:center}.smwb-table__cell.smwb-head-cell.smwb-align_right{text-align:right}.smwb-table__cell.smwb-head-cell .smwb-head-cell__icon{flex-shrink:0;display:none;transition:all .15s ease-in-out;fill:var(--smui-primaryTextColor)}.smwb-table__cell.smwb-head-cell.smwb-sorted_asc .smwb-head-cell__icon{display:inline-flex;transform:rotate(0)}.smwb-table__cell.smwb-head-cell.smwb-sorted_desc .smwb-head-cell__icon{display:inline-flex;transform:rotate(180deg)}.smwb-table__head .smwb-table__row{border-top:none}.smwb-table__row{border-top:1px solid var(--smui-tableBorderColor)}.smwb-table.smwb-dense .smwb-table__cell{padding:0 16px;height:36px;vertical-align:middle}.smwb-table.smwb-dense .smwb-table__cell.smwb-head-cell{height:40px}.smwb-table.smwb-dense .smwb-table__row{border-top:1px solid var(--smui-tableBorderColor)}.smwb-table__loader{width:100%;display:flex;align-items:center;justify-content:center;position:absolute;height:100%;top:50%;left:50%;transform:translate(-50%,-50%)}.smwb-table__loader__row{height:100px;position:relative}.smwb-scrollbar::-webkit-scrollbar-thumb{background-color:var(--smui-scrollThumbColor);border-radius:999px}.smwb-scrollbar::-webkit-scrollbar{width:6px;height:6px}.smwb-scrollbar::-webkit-scrollbar-track{background-color:transparent}.smwb-head-cell_sortable .smwb-head-cell__content{cursor:pointer;user-select:none;outline:none}.smwb-head-cell_sortable .smwb-head-cell__content:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:2px}.smwb-table__row_selected{background-color:var(--smui-onSurfaceHover)}.smwb-table__caption{caption-side:top;text-align:left;padding:8px 12px;color:var(--smui-onSurfaceVariant)}.smwb-table_sticky-header{overflow:visible}.smwb-table__container:has(.smwb-table_sticky-header){overflow:visible}.smwb-table_sticky-header .smwb-table__head .smwb-table__cell{position:sticky;top:0;z-index:2;background-color:var(--smui-surfaceBackground)}
+.smwb-table{width:100%;white-space:nowrap;border-collapse:collapse;overflow:scroll}.smwb-table.smwb-hovered tbody tr:hover{background:var(--smui-onSurfaceHover);cursor:pointer}.smwb-table__error{margin-bottom:10px}.smwb-table__container{display:flex;overflow-x:auto;border:1px solid var(--smui-tableBorderColor);border-radius:4px;flex-direction:column}.smwb-table__container.smwb-withPagination{border-radius:4px 4px 0 0}.smwb-table__wrapper{display:flex;flex-direction:column;background-color:var(--smui-surfaceBackground)}.smwb-table__wrapper_loading{pointer-events:none}.smwb-table__cell{position:relative;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:nowrap;padding:0 16px;height:52px;vertical-align:middle;overflow:hidden;word-wrap:break-word}.smwb-table__cell.smwb-head-cell{height:56px;text-align:left;font-weight:500}.smwb-table__cell.smwb-head-cell.smwb-sortable,.smwb-table__cell.smwb-head-cell.smwb-head-cell_sortable{cursor:pointer}.smwb-table__cell.smwb-head-cell .smwb-head-cell__content{align-items:center;display:inline-flex;vertical-align:middle;gap:5px;user-select:none}.smwb-table__cell.smwb-head-cell .smwb-head-cell__content input{font-weight:500}.smwb-table__cell.smwb-head-cell.smwb-align_left{text-align:left}.smwb-table__cell.smwb-head-cell.smwb-align_center{text-align:center}.smwb-table__cell.smwb-head-cell.smwb-align_right{text-align:right}.smwb-table__cell.smwb-head-cell .smwb-head-cell__icon{flex-shrink:0;transition:opacity .15s ease-in-out;opacity:.4}.smwb-table__cell.smwb-head-cell.smwb-head-cell_sorted .smwb-head-cell__icon,.smwb-table__cell.smwb-head-cell.smwb-head-cell_sortable:hover .smwb-head-cell__icon,.smwb-table__cell.smwb-head-cell .smwb-head-cell__content:focus-visible .smwb-head-cell__icon{opacity:1}.smwb-table__cell.smwb-head-cell.smwb-sorted_asc .smwb-head-cell__icon{opacity:1;transform:rotate(0)}.smwb-table__cell.smwb-head-cell.smwb-sorted_desc .smwb-head-cell__icon{opacity:1;transform:rotate(180deg)}.smwb-table__head .smwb-table__row{border-top:none}.smwb-table__row{border-top:1px solid var(--smui-tableBorderColor)}.smwb-table.smwb-dense .smwb-table__cell{padding:0 16px;height:36px;vertical-align:middle}.smwb-table.smwb-dense .smwb-table__cell.smwb-head-cell{height:40px}.smwb-table.smwb-dense .smwb-table__row{border-top:1px solid var(--smui-tableBorderColor)}.smwb-table__loader{width:100%;display:flex;align-items:center;justify-content:center;position:absolute;height:100%;top:50%;left:50%;transform:translate(-50%,-50%)}.smwb-table__loader__row{height:100px;position:relative}.smwb-scrollbar::-webkit-scrollbar-thumb{background-color:var(--smui-scrollThumbColor);border-radius:999px}.smwb-scrollbar::-webkit-scrollbar{width:6px;height:6px}.smwb-scrollbar::-webkit-scrollbar-track{background-color:transparent}.smwb-head-cell_sortable .smwb-head-cell__content{cursor:pointer;user-select:none;outline:none}.smwb-head-cell_sortable .smwb-head-cell__content:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:2px}.smwb-table__row_selected{background-color:var(--smui-onSurfaceHover)}.smwb-table__caption{caption-side:top;text-align:left;padding:8px 12px;color:var(--smui-onSurfaceVariant)}.smwb-table_sticky-header{overflow:visible}.smwb-table__container:has(.smwb-table_sticky-header){overflow:visible}.smwb-table_sticky-header .smwb-table__head .smwb-table__cell{position:sticky;top:0;z-index:2;background-color:var(--smui-surfaceBackground)}

package/dist/components/dataDisplay/table/tableHeadCell.js

@@ -1,5 +1,5 @@
-import { jsx as o, jsxs as _ } from "react/jsx-runtime";
-import h from "clsx";
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import p from "clsx";
 import { Icon as x } from "../../base/icon/icon.js";
 const y = ({
   children: i,
@@ -10,21 +10,22 @@ const y = ({
   sortable: e,
   sortDirection: d,
   onSort: s,
-  ...r
+  ..._
 }) => {
-  const n = d !== void 0 ? d : m ? "asc" : t ? "desc" : !1, f = e ? n === "asc" ? "ascending" : n === "desc" ? "descending" : "none" : void 0, p = n === "asc" ? "expand_more" : n === "desc" ? "expand_less" : "", w = (c) => {
+  const n = d !== void 0 ? d : m ? "asc" : t ? "desc" : !1, r = e ? n === "asc" ? "ascending" : n === "desc" ? "descending" : "none" : void 0, f = n === "asc" ? "expand_more" : n === "desc" ? "expand_less" : "unfold_more", w = (c) => {
     e && s && (c.key === "Enter" || c.key === " ") && (c.preventDefault(), s());
   };
   return /* @__PURE__ */ o(
     "th",
     {
-      ...r,
-      "aria-sort": f,
-      className: h("smwb-table__cell", "smwb-head-cell", l, {
+      ..._,
+      "aria-sort": r,
+      className: p("smwb-table__cell", "smwb-head-cell", l, {
         [`smwb-align_${a}`]: !!a,
-        "smwb-head-cell_sortable": e
+        "smwb-head-cell_sortable": e,
+        "smwb-head-cell_sorted": !!e && n !== !1
       }),
-      children: /* @__PURE__ */ _(
+      children: /* @__PURE__ */ h(
         "span",
         {
           className: "smwb-head-cell__content",
@@ -34,7 +35,7 @@ const y = ({
           tabIndex: e ? 0 : void 0,
           children: [
             i,
-            /* @__PURE__ */ o(x, { name: p, size: 18, weight: 800 })
+            e && /* @__PURE__ */ o(x, { className: "smwb-head-cell__icon", name: f, size: 18, weight: 800 })
           ]
         }
       )

package/dist/components/dataDisplay/table/tableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableHeadCell.js","sources":["../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, ThHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n}\n\nconst TableHeadCell = ({\n  children,\n  className,\n  cellAlign = \"left\",\n  isSortedByAsc,\n  isSortedByDesc,\n  sortable,\n  sortDirection,\n  onSort,\n  ...props\n}: PropsWithChildren<TableHeadCellProps>) => {\n  const direction: SortDirection =\n    sortDirection !== undefined ? sortDirection : isSortedByAsc ? \"asc\" : isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = sortable\n    ? direction === \"asc\"\n      ? \"ascending\"\n      : direction === \"desc\"\n        ? \"descending\"\n        : \"none\"\n    : undefined;\n\n  const iconName = direction === \"asc\" ? \"expand_more\" : direction === \"desc\" ? \"expand_less\" : \"\";\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    if (sortable && onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onSort();\n    }\n  };\n\n  return (\n    <th\n      {...props}\n      aria-sort={ariaSort}\n      className={cn(\"smwb-table__cell\", \"smwb-head-cell\", className, {\n        [`smwb-align_${cellAlign}`]: !!cellAlign,\n        \"smwb-head-cell_sortable\": sortable,\n      })}\n    >\n      <span\n        className=\"smwb-head-cell__content\"\n        onClick={sortable ? onSort : undefined}\n        onKeyDown={sortable ? onKeyDown : undefined}\n        role={sortable ? \"button\" : undefined}\n        tabIndex={sortable ? 0 : undefined}\n      >\n        {children}\n        <Icon name={iconName} size={18} weight={800} />\n      </span>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["TableHeadCell","children","className","cellAlign","isSortedByAsc","isSortedByDesc","sortable","sortDirection","onSort","props","direction","ariaSort","iconName","onKeyDown","event","jsx","cn","jsxs","Icon"],"mappings":";;;AAqBA,MAAMA,IAAgB,CAAC;AAAA,EACrB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,MAA6C;AAC3C,QAAMC,IACJH,MAAkB,SAAYA,IAAgBH,IAAgB,QAAQC,IAAiB,SAAS,IAE5FM,IAAWL,IACbI,MAAc,QACZ,cACAA,MAAc,SACZ,eACA,SACJ,QAEEE,IAAWF,MAAc,QAAQ,gBAAgBA,MAAc,SAAS,gBAAgB,IAExFG,IAAY,CAACC,MAAgD;AACjE,IAAIR,KAAYE,MAAWM,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SAChEA,EAAM,eAAA,GACNN,EAAA;AAAA,EAEJ;AAEA,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,aAAWE;AAAA,MACX,WAAWK,EAAG,oBAAoB,kBAAkBd,GAAW;AAAA,QAC7D,CAAC,cAAcC,CAAS,EAAE,GAAG,CAAC,CAACA;AAAA,QAC/B,2BAA2BG;AAAA,MAAA,CAC5B;AAAA,MAED,UAAA,gBAAAW;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASX,IAAWE,IAAS;AAAA,UAC7B,WAAWF,IAAWO,IAAY;AAAA,UAClC,MAAMP,IAAW,WAAW;AAAA,UAC5B,UAAUA,IAAW,IAAI;AAAA,UAExB,UAAA;AAAA,YAAAL;AAAA,8BACAiB,GAAA,EAAK,MAAMN,GAAU,MAAM,IAAI,QAAQ,IAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/C;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"tableHeadCell.js","sources":["../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, ThHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n}\n\nconst TableHeadCell = ({\n  children,\n  className,\n  cellAlign = \"left\",\n  isSortedByAsc,\n  isSortedByDesc,\n  sortable,\n  sortDirection,\n  onSort,\n  ...props\n}: PropsWithChildren<TableHeadCellProps>) => {\n  const direction: SortDirection =\n    sortDirection !== undefined ? sortDirection : isSortedByAsc ? \"asc\" : isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = sortable\n    ? direction === \"asc\"\n      ? \"ascending\"\n      : direction === \"desc\"\n        ? \"descending\"\n        : \"none\"\n    : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = direction === \"asc\" ? \"expand_more\" : direction === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    if (sortable && onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onSort();\n    }\n  };\n\n  return (\n    <th\n      {...props}\n      aria-sort={ariaSort}\n      className={cn(\"smwb-table__cell\", \"smwb-head-cell\", className, {\n        [`smwb-align_${cellAlign}`]: !!cellAlign,\n        \"smwb-head-cell_sortable\": sortable,\n        \"smwb-head-cell_sorted\": !!sortable && direction !== false,\n      })}\n    >\n      <span\n        className=\"smwb-head-cell__content\"\n        onClick={sortable ? onSort : undefined}\n        onKeyDown={sortable ? onKeyDown : undefined}\n        role={sortable ? \"button\" : undefined}\n        tabIndex={sortable ? 0 : undefined}\n      >\n        {children}\n        {sortable && <Icon className=\"smwb-head-cell__icon\" name={iconName} size={18} weight={800} />}\n      </span>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["TableHeadCell","children","className","cellAlign","isSortedByAsc","isSortedByDesc","sortable","sortDirection","onSort","props","direction","ariaSort","iconName","onKeyDown","event","jsx","cn","jsxs","Icon"],"mappings":";;;AAqBA,MAAMA,IAAgB,CAAC;AAAA,EACrB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,MAA6C;AAC3C,QAAMC,IACJH,MAAkB,SAAYA,IAAgBH,IAAgB,QAAQC,IAAiB,SAAS,IAE5FM,IAAWL,IACbI,MAAc,QACZ,cACAA,MAAc,SACZ,eACA,SACJ,QASEE,IAAWF,MAAc,QAAQ,gBAAgBA,MAAc,SAAS,gBAAgB,eAExFG,IAAY,CAACC,MAAgD;AACjE,IAAIR,KAAYE,MAAWM,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SAChEA,EAAM,eAAA,GACNN,EAAA;AAAA,EAEJ;AAEA,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,aAAWE;AAAA,MACX,WAAWK,EAAG,oBAAoB,kBAAkBd,GAAW;AAAA,QAC7D,CAAC,cAAcC,CAAS,EAAE,GAAG,CAAC,CAACA;AAAA,QAC/B,2BAA2BG;AAAA,QAC3B,yBAAyB,CAAC,CAACA,KAAYI,MAAc;AAAA,MAAA,CACtD;AAAA,MAED,UAAA,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASX,IAAWE,IAAS;AAAA,UAC7B,WAAWF,IAAWO,IAAY;AAAA,UAClC,MAAMP,IAAW,WAAW;AAAA,UAC5B,UAAUA,IAAW,IAAI;AAAA,UAExB,UAAA;AAAA,YAAAL;AAAA,YACAK,KAAY,gBAAAS,EAACG,GAAA,EAAK,WAAU,wBAAuB,MAAMN,GAAU,MAAM,IAAI,QAAQ,IAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7F;AAAA,EAAA;AAGN;"}

package/dist/components/feedBack/confirmDialog/confirmDialog.js

@@ -1,39 +1,39 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/confirmDialog/confirmDialog.entry.css';/* empty css                                                                     */
 import { useId as p } from "react";
 import j from "clsx";
-import { Modal as e } from "../modal/modal.js";
+import { Modal as r } from "../modal/modal.js";
 import { Typography as b } from "../../dataDisplay/typography/typography.js";
 import { Button as f } from "../../inputs/button/button.js";
 function _(u) {
-  const { open: y, title: t, subject: n, message: i, confirmLabel: C, cancelLabel: l, danger: h, busy: r, onConfirm: g, onCancel: s, className: x } = u, c = p(), d = p(), m = [n ? c : "", i ? d : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a(
-    e,
+  const { open: y, title: t, subject: i, message: n, confirmLabel: C, cancelLabel: a, danger: h, busy: e, onConfirm: g, onCancel: c, className: x } = u, s = p(), d = p(), m = [i ? s : "", n ? d : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l(
+    r,
     {
       open: y,
-      onClose: s,
-      size: "small",
+      onClose: c,
+      size: "medium",
       role: "alertdialog",
       backdrop: "dark",
-      closeOnEsc: !r,
-      closeOnOutsideClick: !r,
+      closeOnEsc: !e,
+      closeOnOutsideClick: !e,
       "aria-label": t,
       ...m ? { "aria-describedby": m } : {},
       children: [
-        /* @__PURE__ */ o(e.Header, { children: t }),
-        /* @__PURE__ */ o(e.Content, { children: /* @__PURE__ */ a("div", { className: j("smwb-confirm-dialog__body", x), children: [
-          n ? /* @__PURE__ */ o(b, { id: c, variant: "body2", color: "textPrimary", component: "span", children: n }) : null,
-          i ? /* @__PURE__ */ o(b, { id: d, variant: "caption", color: "textSecondary", component: "span", children: i }) : null
+        /* @__PURE__ */ o(r.Header, { children: t }),
+        /* @__PURE__ */ o(r.Content, { children: /* @__PURE__ */ l("div", { className: j("smwb-confirm-dialog__body", x), children: [
+          i ? /* @__PURE__ */ o(b, { id: s, variant: "body2", color: "textPrimary", component: "span", children: i }) : null,
+          n ? /* @__PURE__ */ o(b, { id: d, variant: "caption", color: "textSecondary", component: "span", children: n }) : null
         ] }) }),
-        /* @__PURE__ */ a(e.Footer, { children: [
-          /* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!r, onClick: s, label: l != null ? l : "Cancel" }),
+        /* @__PURE__ */ l(r.Footer, { children: [
+          /* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!e, onClick: c, label: a != null ? a : "Cancel" }),
           /* @__PURE__ */ o(
             f,
             {
               variant: "contained",
               size: "small",
               color: h ? "error" : "primary",
-              disabled: !!r,
+              disabled: !!e,
               onClick: g,
               label: C
             }

package/dist/components/feedBack/confirmDialog/confirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirmDialog.js","sources":["../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n  subject?: string;\n  /** A secondary explanatory line (e.g. \"can't be undone\"). */\n  message?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  /** Style the confirm button as destructive (red). */\n  danger?: boolean;\n  /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n  busy?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n  className?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): React.ReactElement {\n  const { open, title, subject, message, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, className } =\n    props;\n\n  const subjectId = useId();\n  const messageId = useId();\n  // Only describe when there IS something to describe — an empty aria-describedby would point a\n  // screen reader at nothing.\n  const describedBy = [subject ? subjectId : \"\", message ? messageId : \"\"].filter(Boolean).join(\" \");\n\n  return (\n    <Modal\n      open={open}\n      onClose={onCancel}\n      size=\"small\"\n      role=\"alertdialog\"\n      backdrop=\"dark\"\n      closeOnEsc={!busy}\n      closeOnOutsideClick={!busy}\n      aria-label={title}\n      {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n    >\n      <Modal.Header>{title}</Modal.Header>\n      <Modal.Content>\n        <div className={cn(\"smwb-confirm-dialog__body\", className)}>\n          {subject ? (\n            <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n              {subject}\n            </Typography>\n          ) : null}\n          {message ? (\n            <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n              {message}\n            </Typography>\n          ) : null}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" size=\"small\" disabled={!!busy} onClick={onCancel} label={cancelLabel ?? \"Cancel\"} />\n        <Button\n          variant=\"contained\"\n          size=\"small\"\n          color={danger ? \"error\" : \"primary\"}\n          disabled={!!busy}\n          onClick={onConfirm}\n          label={confirmLabel}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","props","open","title","subject","message","confirmLabel","cancelLabel","danger","busy","onConfirm","onCancel","className","subjectId","useId","messageId","describedBy","jsxs","Modal","jsx","cn","Typography","Button"],"mappings":";;;;;;;AAgCO,SAASA,EAAcC,GAA+C;AAC3E,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,GAAS,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,WAAAC,EAAA,IACnGX,GAEIY,IAAYC,EAAA,GACZC,IAAYD,EAAA,GAGZE,IAAc,CAACZ,IAAUS,IAAY,IAAIR,IAAUU,IAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjG,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAhB;AAAA,MACA,SAASS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,YAAY,CAACF;AAAA,MACb,qBAAqB,CAACA;AAAA,MACtB,cAAYN;AAAA,MACX,GAAIa,IAAc,EAAE,oBAAoBA,EAAA,IAAgB,CAAA;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAG,EAACD,EAAM,QAAN,EAAc,UAAAf,EAAA,CAAM;AAAA,QACrB,gBAAAgB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,6BAA6BR,CAAS,GACtD,UAAA;AAAA,UAAAR,IACC,gBAAAe,EAACE,GAAA,EAAW,IAAIR,GAAW,SAAQ,SAAQ,OAAM,eAAc,WAAU,QACtE,UAAAT,EAAA,CACH,IACE;AAAA,UACHC,IACC,gBAAAc,EAACE,GAAA,EAAW,IAAIN,GAAW,SAAQ,WAAU,OAAM,iBAAgB,WAAU,QAC1E,UAAAV,EAAA,CACH,IACE;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,QACA,gBAAAY,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAO,SAAQ,QAAO,MAAK,SAAQ,UAAU,CAAC,CAACb,GAAM,SAASE,GAAU,OAAOJ,KAAA,OAAAA,IAAe,UAAU;AAAA,UACzG,gBAAAY;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAOd,IAAS,UAAU;AAAA,cAC1B,UAAU,CAAC,CAACC;AAAA,cACZ,SAASC;AAAA,cACT,OAAOJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"confirmDialog.js","sources":["../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n  subject?: string;\n  /** A secondary explanatory line (e.g. \"can't be undone\"). */\n  message?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  /** Style the confirm button as destructive (red). */\n  danger?: boolean;\n  /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n  busy?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n  className?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): React.ReactElement {\n  const { open, title, subject, message, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, className } =\n    props;\n\n  const subjectId = useId();\n  const messageId = useId();\n  // Only describe when there IS something to describe — an empty aria-describedby would point a\n  // screen reader at nothing.\n  const describedBy = [subject ? subjectId : \"\", message ? messageId : \"\"].filter(Boolean).join(\" \");\n\n  return (\n    <Modal\n      open={open}\n      onClose={onCancel}\n      size=\"medium\"\n      role=\"alertdialog\"\n      backdrop=\"dark\"\n      closeOnEsc={!busy}\n      closeOnOutsideClick={!busy}\n      aria-label={title}\n      {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n    >\n      <Modal.Header>{title}</Modal.Header>\n      <Modal.Content>\n        <div className={cn(\"smwb-confirm-dialog__body\", className)}>\n          {subject ? (\n            <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n              {subject}\n            </Typography>\n          ) : null}\n          {message ? (\n            <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n              {message}\n            </Typography>\n          ) : null}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" size=\"small\" disabled={!!busy} onClick={onCancel} label={cancelLabel ?? \"Cancel\"} />\n        <Button\n          variant=\"contained\"\n          size=\"small\"\n          color={danger ? \"error\" : \"primary\"}\n          disabled={!!busy}\n          onClick={onConfirm}\n          label={confirmLabel}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","props","open","title","subject","message","confirmLabel","cancelLabel","danger","busy","onConfirm","onCancel","className","subjectId","useId","messageId","describedBy","jsxs","Modal","jsx","cn","Typography","Button"],"mappings":";;;;;;;AAgCO,SAASA,EAAcC,GAA+C;AAC3E,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,GAAS,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,WAAAC,EAAA,IACnGX,GAEIY,IAAYC,EAAA,GACZC,IAAYD,EAAA,GAGZE,IAAc,CAACZ,IAAUS,IAAY,IAAIR,IAAUU,IAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjG,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAhB;AAAA,MACA,SAASS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,YAAY,CAACF;AAAA,MACb,qBAAqB,CAACA;AAAA,MACtB,cAAYN;AAAA,MACX,GAAIa,IAAc,EAAE,oBAAoBA,EAAA,IAAgB,CAAA;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAG,EAACD,EAAM,QAAN,EAAc,UAAAf,EAAA,CAAM;AAAA,QACrB,gBAAAgB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,6BAA6BR,CAAS,GACtD,UAAA;AAAA,UAAAR,IACC,gBAAAe,EAACE,GAAA,EAAW,IAAIR,GAAW,SAAQ,SAAQ,OAAM,eAAc,WAAU,QACtE,UAAAT,EAAA,CACH,IACE;AAAA,UACHC,IACC,gBAAAc,EAACE,GAAA,EAAW,IAAIN,GAAW,SAAQ,WAAU,OAAM,iBAAgB,WAAU,QAC1E,UAAAV,EAAA,CACH,IACE;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,QACA,gBAAAY,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAO,SAAQ,QAAO,MAAK,SAAQ,UAAU,CAAC,CAACb,GAAM,SAASE,GAAU,OAAOJ,KAAA,OAAAA,IAAe,UAAU;AAAA,UACzG,gBAAAY;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAOd,IAAS,UAAU;AAAA,cAC1B,UAAU,CAAC,CAACC;AAAA,cACZ,SAASC;AAAA,cACT,OAAOJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js

@@ -1,55 +1,56 @@
-import { jsxs as u, jsx as i } from "react/jsx-runtime";
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/saveAssetDialog/saveAssetDialog.entry.css';/* empty css                                                                         */
-import T from "clsx";
+import S from "clsx";
 import { Modal as l } from "../modal/modal.js";
-import { TextField as c } from "../../inputs/textField/textField.js";
-import { Button as w } from "../../inputs/button/button.js";
+import { TextField as T } from "../../inputs/textField/textField.js";
+import { Button as h } from "../../inputs/button/button.js";
 function H({
-  open: k,
+  open: e,
   title: o,
   nameLabel: t,
   name: d,
   onNameChange: s,
-  previewSrc: _,
-  onCapture: f,
+  previewSrc: p,
+  onCapture: w,
   captureLabel: v,
   busy: r,
-  confirmLabel: x,
-  cancelLabel: p,
-  onConfirm: F,
-  onClose: h,
-  children: j,
-  className: m
+  confirmLabel: u,
+  cancelLabel: x,
+  onConfirm: k,
+  onClose: _,
+  children: m,
+  className: F
 }) {
-  const z = s !== void 0 || d !== void 0;
-  return /* @__PURE__ */ u(l, { open: k, onClose: h, size: "small", children: [
+  const j = s !== void 0 || d !== void 0;
+  return /* @__PURE__ */ f(l, { open: e, onClose: _, size: "medium", children: [
     /* @__PURE__ */ i(l.Header, { children: o != null ? o : "Save" }),
-    /* @__PURE__ */ i(l.Content, { children: /* @__PURE__ */ u("div", { className: T("smwb-save-asset-dialog__body", m), children: [
-      z ? /* @__PURE__ */ i(
-        c,
+    /* @__PURE__ */ i(l.Content, { children: /* @__PURE__ */ f("div", { className: S("smwb-save-asset-dialog__body", F), children: [
+      j ? /* @__PURE__ */ i(
+        T,
         {
           label: t != null ? t : "Name",
           value: d != null ? d : "",
+          fullWidth: !0,
           disabled: !!r,
-          onChange: (S) => s == null ? void 0 : s(S.currentTarget.value)
+          onChange: (z) => s == null ? void 0 : s(z.currentTarget.value)
         }
       ) : null,
-      _ ? /* @__PURE__ */ i("div", { className: "smwb-save-asset-dialog__preview", children: /* @__PURE__ */ i("img", { src: _, alt: "" }) }) : null,
-      f ? /* @__PURE__ */ i(
-        w,
+      p ? /* @__PURE__ */ i("div", { className: "smwb-save-asset-dialog__preview", children: /* @__PURE__ */ i("img", { src: p, alt: "" }) }) : null,
+      w ? /* @__PURE__ */ i(
+        h,
         {
           variant: "outlined",
           size: "small",
           disabled: !!r,
-          onClick: () => f(),
+          onClick: () => w(),
           label: v != null ? v : "Capture preview"
         }
       ) : null,
-      j
+      m
     ] }) }),
-    /* @__PURE__ */ u(l.Footer, { children: [
-      /* @__PURE__ */ i(w, { variant: "text", disabled: !!r, onClick: () => h(), label: p != null ? p : "Cancel" }),
-      /* @__PURE__ */ i(w, { variant: "contained", disabled: !!r, onClick: () => F(), label: x != null ? x : "Save" })
+    /* @__PURE__ */ f(l.Footer, { children: [
+      /* @__PURE__ */ i(h, { variant: "text", disabled: !!r, onClick: () => _(), label: x != null ? x : "Cancel" }),
+      /* @__PURE__ */ i(h, { variant: "contained", disabled: !!r, onClick: () => k(), label: u != null ? u : "Save" })
     ] })
   ] });
 }

package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"saveAssetDialog.js","sources":["../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n  open: boolean;\n  title?: string;\n  /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n  nameLabel?: string;\n  name?: string;\n  onNameChange?: (name: string) => void;\n  /** Preview image URL (e.g. a freshly captured thumbnail). */\n  previewSrc?: string;\n  /** Shows a Capture button when provided. */\n  onCapture?: () => void;\n  captureLabel?: string;\n  /** Disables the actions + name field while a save/capture is in flight. */\n  busy?: boolean;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  onConfirm: () => void;\n  onClose: () => void;\n  /** Extra content between the name field/preview and the actions. */\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog({\n  open,\n  title,\n  nameLabel,\n  name,\n  onNameChange,\n  previewSrc,\n  onCapture,\n  captureLabel,\n  busy,\n  confirmLabel,\n  cancelLabel,\n  onConfirm,\n  onClose,\n  children,\n  className,\n}: SaveAssetDialogProps): React.ReactElement {\n  const showNameField = onNameChange !== undefined || name !== undefined;\n\n  return (\n    <Modal open={open} onClose={onClose} size=\"small\">\n      <Modal.Header>{title ?? \"Save\"}</Modal.Header>\n      <Modal.Content>\n        <div className={cn(\"smwb-save-asset-dialog__body\", className)}>\n          {showNameField ? (\n            <TextField\n              label={nameLabel ?? \"Name\"}\n              value={name ?? \"\"}\n              disabled={!!busy}\n              onChange={(event) => onNameChange?.(event.currentTarget.value)}\n            />\n          ) : null}\n          {previewSrc ? (\n            <div className=\"smwb-save-asset-dialog__preview\">\n              <img src={previewSrc} alt=\"\" />\n            </div>\n          ) : null}\n          {onCapture ? (\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={!!busy}\n              onClick={() => onCapture()}\n              label={captureLabel ?? \"Capture preview\"}\n            />\n          ) : null}\n          {children}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" disabled={!!busy} onClick={() => onClose()} label={cancelLabel ?? \"Cancel\"} />\n        <Button variant=\"contained\" disabled={!!busy} onClick={() => onConfirm()} label={confirmLabel ?? \"Save\"} />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default SaveAssetDialog;\n"],"names":["SaveAssetDialog","open","title","nameLabel","name","onNameChange","previewSrc","onCapture","captureLabel","busy","confirmLabel","cancelLabel","onConfirm","onClose","children","className","showNameField","jsxs","Modal","jsx","cn","TextField","event","Button"],"mappings":";;;;;;AAmCO,SAASA,EAAgB;AAAA,EAC9B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA6C;AAC3C,QAAMC,IAAgBX,MAAiB,UAAaD,MAAS;AAE7D,SACE,gBAAAa,EAACC,GAAA,EAAM,MAAAjB,GAAY,SAAAY,GAAkB,MAAK,SACxC,UAAA;AAAA,IAAA,gBAAAM,EAACD,EAAM,QAAN,EAAc,UAAAhB,KAAA,OAAAA,IAAS,QAAO;AAAA,IAC/B,gBAAAiB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,gCAAgCL,CAAS,GACzD,UAAA;AAAA,MAAAC,IACC,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAOlB,KAAA,OAAAA,IAAa;AAAA,UACpB,OAAOC,KAAA,OAAAA,IAAQ;AAAA,UACf,UAAU,CAAC,CAACK;AAAA,UACZ,UAAU,CAACa,MAAUjB,KAAA,gBAAAA,EAAeiB,EAAM,cAAc;AAAA,QAAK;AAAA,MAAA,IAE7D;AAAA,MACHhB,IACC,gBAAAa,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAKb,GAAY,KAAI,GAAA,CAAG,EAAA,CAC/B,IACE;AAAA,MACHC,IACC,gBAAAY;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU,CAAC,CAACd;AAAA,UACZ,SAAS,MAAMF,EAAA;AAAA,UACf,OAAOC,KAAA,OAAAA,IAAgB;AAAA,QAAA;AAAA,MAAA,IAEvB;AAAA,MACHM;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,IACA,gBAAAG,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACI,GAAA,EAAO,SAAQ,QAAO,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMI,EAAA,GAAW,OAAOF,KAAA,OAAAA,IAAe,SAAA,CAAU;AAAA,MACnG,gBAAAQ,EAACI,GAAA,EAAO,SAAQ,aAAY,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMG,EAAA,GAAa,OAAOF,KAAA,OAAAA,IAAgB,OAAA,CAAQ;AAAA,IAAA,EAAA,CAC3G;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"saveAssetDialog.js","sources":["../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n  open: boolean;\n  title?: string;\n  /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n  nameLabel?: string;\n  name?: string;\n  onNameChange?: (name: string) => void;\n  /** Preview image URL (e.g. a freshly captured thumbnail). */\n  previewSrc?: string;\n  /** Shows a Capture button when provided. */\n  onCapture?: () => void;\n  captureLabel?: string;\n  /** Disables the actions + name field while a save/capture is in flight. */\n  busy?: boolean;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  onConfirm: () => void;\n  onClose: () => void;\n  /** Extra content between the name field/preview and the actions. */\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog({\n  open,\n  title,\n  nameLabel,\n  name,\n  onNameChange,\n  previewSrc,\n  onCapture,\n  captureLabel,\n  busy,\n  confirmLabel,\n  cancelLabel,\n  onConfirm,\n  onClose,\n  children,\n  className,\n}: SaveAssetDialogProps): React.ReactElement {\n  const showNameField = onNameChange !== undefined || name !== undefined;\n\n  return (\n    <Modal open={open} onClose={onClose} size=\"medium\">\n      <Modal.Header>{title ?? \"Save\"}</Modal.Header>\n      <Modal.Content>\n        <div className={cn(\"smwb-save-asset-dialog__body\", className)}>\n          {showNameField ? (\n            <TextField\n              label={nameLabel ?? \"Name\"}\n              value={name ?? \"\"}\n              fullWidth\n              disabled={!!busy}\n              onChange={(event) => onNameChange?.(event.currentTarget.value)}\n            />\n          ) : null}\n          {previewSrc ? (\n            <div className=\"smwb-save-asset-dialog__preview\">\n              <img src={previewSrc} alt=\"\" />\n            </div>\n          ) : null}\n          {onCapture ? (\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={!!busy}\n              onClick={() => onCapture()}\n              label={captureLabel ?? \"Capture preview\"}\n            />\n          ) : null}\n          {children}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" disabled={!!busy} onClick={() => onClose()} label={cancelLabel ?? \"Cancel\"} />\n        <Button variant=\"contained\" disabled={!!busy} onClick={() => onConfirm()} label={confirmLabel ?? \"Save\"} />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default SaveAssetDialog;\n"],"names":["SaveAssetDialog","open","title","nameLabel","name","onNameChange","previewSrc","onCapture","captureLabel","busy","confirmLabel","cancelLabel","onConfirm","onClose","children","className","showNameField","jsxs","Modal","jsx","cn","TextField","event","Button"],"mappings":";;;;;;AAmCO,SAASA,EAAgB;AAAA,EAC9B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA6C;AAC3C,QAAMC,IAAgBX,MAAiB,UAAaD,MAAS;AAE7D,SACE,gBAAAa,EAACC,GAAA,EAAM,MAAAjB,GAAY,SAAAY,GAAkB,MAAK,UACxC,UAAA;AAAA,IAAA,gBAAAM,EAACD,EAAM,QAAN,EAAc,UAAAhB,KAAA,OAAAA,IAAS,QAAO;AAAA,IAC/B,gBAAAiB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,gCAAgCL,CAAS,GACzD,UAAA;AAAA,MAAAC,IACC,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAOlB,KAAA,OAAAA,IAAa;AAAA,UACpB,OAAOC,KAAA,OAAAA,IAAQ;AAAA,UACf,WAAS;AAAA,UACT,UAAU,CAAC,CAACK;AAAA,UACZ,UAAU,CAACa,MAAUjB,KAAA,gBAAAA,EAAeiB,EAAM,cAAc;AAAA,QAAK;AAAA,MAAA,IAE7D;AAAA,MACHhB,IACC,gBAAAa,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAKb,GAAY,KAAI,GAAA,CAAG,EAAA,CAC/B,IACE;AAAA,MACHC,IACC,gBAAAY;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU,CAAC,CAACd;AAAA,UACZ,SAAS,MAAMF,EAAA;AAAA,UACf,OAAOC,KAAA,OAAAA,IAAgB;AAAA,QAAA;AAAA,MAAA,IAEvB;AAAA,MACHM;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,IACA,gBAAAG,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACI,GAAA,EAAO,SAAQ,QAAO,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMI,EAAA,GAAW,OAAOF,KAAA,OAAAA,IAAe,SAAA,CAAU;AAAA,MACnG,gBAAAQ,EAACI,GAAA,EAAO,SAAQ,aAAY,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMG,EAAA,GAAa,OAAOF,KAAA,OAAAA,IAAgB,OAAA,CAAQ;AAAA,IAAA,EAAA,CAC3G;AAAA,EAAA,GACF;AAEJ;"}

package/dist/headless/components/dataDisplay/table/tableHeadCell.js

@@ -1,5 +1,5 @@
-import { jsx as o, jsxs as _ } from "react/jsx-runtime";
-import h from "clsx";
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import p from "clsx";
 import { Icon as x } from "../../base/icon/icon.js";
 const y = ({
   children: i,
@@ -10,21 +10,22 @@ const y = ({
   sortable: e,
   sortDirection: d,
   onSort: s,
-  ...r
+  ..._
 }) => {
-  const n = d !== void 0 ? d : m ? "asc" : t ? "desc" : !1, f = e ? n === "asc" ? "ascending" : n === "desc" ? "descending" : "none" : void 0, p = n === "asc" ? "expand_more" : n === "desc" ? "expand_less" : "", w = (c) => {
+  const n = d !== void 0 ? d : m ? "asc" : t ? "desc" : !1, r = e ? n === "asc" ? "ascending" : n === "desc" ? "descending" : "none" : void 0, f = n === "asc" ? "expand_more" : n === "desc" ? "expand_less" : "unfold_more", w = (c) => {
     e && s && (c.key === "Enter" || c.key === " ") && (c.preventDefault(), s());
   };
   return /* @__PURE__ */ o(
     "th",
     {
-      ...r,
-      "aria-sort": f,
-      className: h("smwb-table__cell", "smwb-head-cell", l, {
+      ..._,
+      "aria-sort": r,
+      className: p("smwb-table__cell", "smwb-head-cell", l, {
         [`smwb-align_${a}`]: !!a,
-        "smwb-head-cell_sortable": e
+        "smwb-head-cell_sortable": e,
+        "smwb-head-cell_sorted": !!e && n !== !1
       }),
-      children: /* @__PURE__ */ _(
+      children: /* @__PURE__ */ h(
         "span",
         {
           className: "smwb-head-cell__content",
@@ -34,7 +35,7 @@ const y = ({
           tabIndex: e ? 0 : void 0,
           children: [
             i,
-            /* @__PURE__ */ o(x, { name: p, size: 18, weight: 800 })
+            e && /* @__PURE__ */ o(x, { className: "smwb-head-cell__icon", name: f, size: 18, weight: 800 })
           ]
         }
       )

package/dist/headless/components/dataDisplay/table/tableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableHeadCell.js","sources":["../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, ThHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n}\n\nconst TableHeadCell = ({\n  children,\n  className,\n  cellAlign = \"left\",\n  isSortedByAsc,\n  isSortedByDesc,\n  sortable,\n  sortDirection,\n  onSort,\n  ...props\n}: PropsWithChildren<TableHeadCellProps>) => {\n  const direction: SortDirection =\n    sortDirection !== undefined ? sortDirection : isSortedByAsc ? \"asc\" : isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = sortable\n    ? direction === \"asc\"\n      ? \"ascending\"\n      : direction === \"desc\"\n        ? \"descending\"\n        : \"none\"\n    : undefined;\n\n  const iconName = direction === \"asc\" ? \"expand_more\" : direction === \"desc\" ? \"expand_less\" : \"\";\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    if (sortable && onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onSort();\n    }\n  };\n\n  return (\n    <th\n      {...props}\n      aria-sort={ariaSort}\n      className={cn(\"smwb-table__cell\", \"smwb-head-cell\", className, {\n        [`smwb-align_${cellAlign}`]: !!cellAlign,\n        \"smwb-head-cell_sortable\": sortable,\n      })}\n    >\n      <span\n        className=\"smwb-head-cell__content\"\n        onClick={sortable ? onSort : undefined}\n        onKeyDown={sortable ? onKeyDown : undefined}\n        role={sortable ? \"button\" : undefined}\n        tabIndex={sortable ? 0 : undefined}\n      >\n        {children}\n        <Icon name={iconName} size={18} weight={800} />\n      </span>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["TableHeadCell","children","className","cellAlign","isSortedByAsc","isSortedByDesc","sortable","sortDirection","onSort","props","direction","ariaSort","iconName","onKeyDown","event","jsx","cn","jsxs","Icon"],"mappings":";;;AAqBA,MAAMA,IAAgB,CAAC;AAAA,EACrB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,MAA6C;AAC3C,QAAMC,IACJH,MAAkB,SAAYA,IAAgBH,IAAgB,QAAQC,IAAiB,SAAS,IAE5FM,IAAWL,IACbI,MAAc,QACZ,cACAA,MAAc,SACZ,eACA,SACJ,QAEEE,IAAWF,MAAc,QAAQ,gBAAgBA,MAAc,SAAS,gBAAgB,IAExFG,IAAY,CAACC,MAAgD;AACjE,IAAIR,KAAYE,MAAWM,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SAChEA,EAAM,eAAA,GACNN,EAAA;AAAA,EAEJ;AAEA,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,aAAWE;AAAA,MACX,WAAWK,EAAG,oBAAoB,kBAAkBd,GAAW;AAAA,QAC7D,CAAC,cAAcC,CAAS,EAAE,GAAG,CAAC,CAACA;AAAA,QAC/B,2BAA2BG;AAAA,MAAA,CAC5B;AAAA,MAED,UAAA,gBAAAW;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASX,IAAWE,IAAS;AAAA,UAC7B,WAAWF,IAAWO,IAAY;AAAA,UAClC,MAAMP,IAAW,WAAW;AAAA,UAC5B,UAAUA,IAAW,IAAI;AAAA,UAExB,UAAA;AAAA,YAAAL;AAAA,8BACAiB,GAAA,EAAK,MAAMN,GAAU,MAAM,IAAI,QAAQ,IAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/C;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"tableHeadCell.js","sources":["../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, ThHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n}\n\nconst TableHeadCell = ({\n  children,\n  className,\n  cellAlign = \"left\",\n  isSortedByAsc,\n  isSortedByDesc,\n  sortable,\n  sortDirection,\n  onSort,\n  ...props\n}: PropsWithChildren<TableHeadCellProps>) => {\n  const direction: SortDirection =\n    sortDirection !== undefined ? sortDirection : isSortedByAsc ? \"asc\" : isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = sortable\n    ? direction === \"asc\"\n      ? \"ascending\"\n      : direction === \"desc\"\n        ? \"descending\"\n        : \"none\"\n    : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = direction === \"asc\" ? \"expand_more\" : direction === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    if (sortable && onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onSort();\n    }\n  };\n\n  return (\n    <th\n      {...props}\n      aria-sort={ariaSort}\n      className={cn(\"smwb-table__cell\", \"smwb-head-cell\", className, {\n        [`smwb-align_${cellAlign}`]: !!cellAlign,\n        \"smwb-head-cell_sortable\": sortable,\n        \"smwb-head-cell_sorted\": !!sortable && direction !== false,\n      })}\n    >\n      <span\n        className=\"smwb-head-cell__content\"\n        onClick={sortable ? onSort : undefined}\n        onKeyDown={sortable ? onKeyDown : undefined}\n        role={sortable ? \"button\" : undefined}\n        tabIndex={sortable ? 0 : undefined}\n      >\n        {children}\n        {sortable && <Icon className=\"smwb-head-cell__icon\" name={iconName} size={18} weight={800} />}\n      </span>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["TableHeadCell","children","className","cellAlign","isSortedByAsc","isSortedByDesc","sortable","sortDirection","onSort","props","direction","ariaSort","iconName","onKeyDown","event","jsx","cn","jsxs","Icon"],"mappings":";;;AAqBA,MAAMA,IAAgB,CAAC;AAAA,EACrB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,MAA6C;AAC3C,QAAMC,IACJH,MAAkB,SAAYA,IAAgBH,IAAgB,QAAQC,IAAiB,SAAS,IAE5FM,IAAWL,IACbI,MAAc,QACZ,cACAA,MAAc,SACZ,eACA,SACJ,QASEE,IAAWF,MAAc,QAAQ,gBAAgBA,MAAc,SAAS,gBAAgB,eAExFG,IAAY,CAACC,MAAgD;AACjE,IAAIR,KAAYE,MAAWM,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SAChEA,EAAM,eAAA,GACNN,EAAA;AAAA,EAEJ;AAEA,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,aAAWE;AAAA,MACX,WAAWK,EAAG,oBAAoB,kBAAkBd,GAAW;AAAA,QAC7D,CAAC,cAAcC,CAAS,EAAE,GAAG,CAAC,CAACA;AAAA,QAC/B,2BAA2BG;AAAA,QAC3B,yBAAyB,CAAC,CAACA,KAAYI,MAAc;AAAA,MAAA,CACtD;AAAA,MAED,UAAA,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASX,IAAWE,IAAS;AAAA,UAC7B,WAAWF,IAAWO,IAAY;AAAA,UAClC,MAAMP,IAAW,WAAW;AAAA,UAC5B,UAAUA,IAAW,IAAI;AAAA,UAExB,UAAA;AAAA,YAAAL;AAAA,YACAK,KAAY,gBAAAS,EAACG,GAAA,EAAK,WAAU,wBAAuB,MAAMN,GAAU,MAAM,IAAI,QAAQ,IAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7F;AAAA,EAAA;AAGN;"}

package/dist/headless/components/feedBack/confirmDialog/confirmDialog.js

@@ -1,17 +1,17 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import { useId as p } from "react";
 import j from "clsx";
 import { Modal as r } from "../modal/modal.js";
 import { Typography as b } from "../../dataDisplay/typography/typography.js";
 import { Button as f } from "../../inputs/button/button.js";
 function N(u) {
-  const { open: y, title: t, subject: n, message: i, confirmLabel: C, cancelLabel: l, danger: h, busy: e, onConfirm: g, onCancel: s, className: x } = u, c = p(), d = p(), m = [n ? c : "", i ? d : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a(
+  const { open: y, title: t, subject: n, message: i, confirmLabel: C, cancelLabel: a, danger: h, busy: e, onConfirm: g, onCancel: c, className: x } = u, s = p(), d = p(), m = [n ? s : "", i ? d : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l(
     r,
     {
       open: y,
-      onClose: s,
-      size: "small",
+      onClose: c,
+      size: "medium",
       role: "alertdialog",
       backdrop: "dark",
       closeOnEsc: !e,
@@ -20,12 +20,12 @@ function N(u) {
       ...m ? { "aria-describedby": m } : {},
       children: [
         /* @__PURE__ */ o(r.Header, { children: t }),
-        /* @__PURE__ */ o(r.Content, { children: /* @__PURE__ */ a("div", { className: j("smwb-confirm-dialog__body", x), children: [
-          n ? /* @__PURE__ */ o(b, { id: c, variant: "body2", color: "textPrimary", component: "span", children: n }) : null,
+        /* @__PURE__ */ o(r.Content, { children: /* @__PURE__ */ l("div", { className: j("smwb-confirm-dialog__body", x), children: [
+          n ? /* @__PURE__ */ o(b, { id: s, variant: "body2", color: "textPrimary", component: "span", children: n }) : null,
           i ? /* @__PURE__ */ o(b, { id: d, variant: "caption", color: "textSecondary", component: "span", children: i }) : null
         ] }) }),
-        /* @__PURE__ */ a(r.Footer, { children: [
-          /* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!e, onClick: s, label: l != null ? l : "Cancel" }),
+        /* @__PURE__ */ l(r.Footer, { children: [
+          /* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!e, onClick: c, label: a != null ? a : "Cancel" }),
           /* @__PURE__ */ o(
             f,
             {

package/dist/headless/components/feedBack/confirmDialog/confirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirmDialog.js","sources":["../../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n  subject?: string;\n  /** A secondary explanatory line (e.g. \"can't be undone\"). */\n  message?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  /** Style the confirm button as destructive (red). */\n  danger?: boolean;\n  /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n  busy?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n  className?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): React.ReactElement {\n  const { open, title, subject, message, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, className } =\n    props;\n\n  const subjectId = useId();\n  const messageId = useId();\n  // Only describe when there IS something to describe — an empty aria-describedby would point a\n  // screen reader at nothing.\n  const describedBy = [subject ? subjectId : \"\", message ? messageId : \"\"].filter(Boolean).join(\" \");\n\n  return (\n    <Modal\n      open={open}\n      onClose={onCancel}\n      size=\"small\"\n      role=\"alertdialog\"\n      backdrop=\"dark\"\n      closeOnEsc={!busy}\n      closeOnOutsideClick={!busy}\n      aria-label={title}\n      {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n    >\n      <Modal.Header>{title}</Modal.Header>\n      <Modal.Content>\n        <div className={cn(\"smwb-confirm-dialog__body\", className)}>\n          {subject ? (\n            <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n              {subject}\n            </Typography>\n          ) : null}\n          {message ? (\n            <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n              {message}\n            </Typography>\n          ) : null}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" size=\"small\" disabled={!!busy} onClick={onCancel} label={cancelLabel ?? \"Cancel\"} />\n        <Button\n          variant=\"contained\"\n          size=\"small\"\n          color={danger ? \"error\" : \"primary\"}\n          disabled={!!busy}\n          onClick={onConfirm}\n          label={confirmLabel}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","props","open","title","subject","message","confirmLabel","cancelLabel","danger","busy","onConfirm","onCancel","className","subjectId","useId","messageId","describedBy","jsxs","Modal","jsx","cn","Typography","Button"],"mappings":";;;;;;AA+BO,SAASA,EAAcC,GAA+C;AAC3E,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,GAAS,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,WAAAC,EAAA,IACnGX,GAEIY,IAAYC,EAAA,GACZC,IAAYD,EAAA,GAGZE,IAAc,CAACZ,IAAUS,IAAY,IAAIR,IAAUU,IAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjG,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAhB;AAAA,MACA,SAASS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,YAAY,CAACF;AAAA,MACb,qBAAqB,CAACA;AAAA,MACtB,cAAYN;AAAA,MACX,GAAIa,IAAc,EAAE,oBAAoBA,EAAA,IAAgB,CAAA;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAG,EAACD,EAAM,QAAN,EAAc,UAAAf,EAAA,CAAM;AAAA,QACrB,gBAAAgB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,6BAA6BR,CAAS,GACtD,UAAA;AAAA,UAAAR,IACC,gBAAAe,EAACE,GAAA,EAAW,IAAIR,GAAW,SAAQ,SAAQ,OAAM,eAAc,WAAU,QACtE,UAAAT,EAAA,CACH,IACE;AAAA,UACHC,IACC,gBAAAc,EAACE,GAAA,EAAW,IAAIN,GAAW,SAAQ,WAAU,OAAM,iBAAgB,WAAU,QAC1E,UAAAV,EAAA,CACH,IACE;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,QACA,gBAAAY,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAO,SAAQ,QAAO,MAAK,SAAQ,UAAU,CAAC,CAACb,GAAM,SAASE,GAAU,OAAOJ,KAAA,OAAAA,IAAe,UAAU;AAAA,UACzG,gBAAAY;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAOd,IAAS,UAAU;AAAA,cAC1B,UAAU,CAAC,CAACC;AAAA,cACZ,SAASC;AAAA,cACT,OAAOJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"confirmDialog.js","sources":["../../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n  subject?: string;\n  /** A secondary explanatory line (e.g. \"can't be undone\"). */\n  message?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  /** Style the confirm button as destructive (red). */\n  danger?: boolean;\n  /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n  busy?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n  className?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): React.ReactElement {\n  const { open, title, subject, message, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, className } =\n    props;\n\n  const subjectId = useId();\n  const messageId = useId();\n  // Only describe when there IS something to describe — an empty aria-describedby would point a\n  // screen reader at nothing.\n  const describedBy = [subject ? subjectId : \"\", message ? messageId : \"\"].filter(Boolean).join(\" \");\n\n  return (\n    <Modal\n      open={open}\n      onClose={onCancel}\n      size=\"medium\"\n      role=\"alertdialog\"\n      backdrop=\"dark\"\n      closeOnEsc={!busy}\n      closeOnOutsideClick={!busy}\n      aria-label={title}\n      {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n    >\n      <Modal.Header>{title}</Modal.Header>\n      <Modal.Content>\n        <div className={cn(\"smwb-confirm-dialog__body\", className)}>\n          {subject ? (\n            <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n              {subject}\n            </Typography>\n          ) : null}\n          {message ? (\n            <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n              {message}\n            </Typography>\n          ) : null}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" size=\"small\" disabled={!!busy} onClick={onCancel} label={cancelLabel ?? \"Cancel\"} />\n        <Button\n          variant=\"contained\"\n          size=\"small\"\n          color={danger ? \"error\" : \"primary\"}\n          disabled={!!busy}\n          onClick={onConfirm}\n          label={confirmLabel}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","props","open","title","subject","message","confirmLabel","cancelLabel","danger","busy","onConfirm","onCancel","className","subjectId","useId","messageId","describedBy","jsxs","Modal","jsx","cn","Typography","Button"],"mappings":";;;;;;AA+BO,SAASA,EAAcC,GAA+C;AAC3E,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,GAAS,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,WAAAC,EAAA,IACnGX,GAEIY,IAAYC,EAAA,GACZC,IAAYD,EAAA,GAGZE,IAAc,CAACZ,IAAUS,IAAY,IAAIR,IAAUU,IAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjG,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAhB;AAAA,MACA,SAASS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,YAAY,CAACF;AAAA,MACb,qBAAqB,CAACA;AAAA,MACtB,cAAYN;AAAA,MACX,GAAIa,IAAc,EAAE,oBAAoBA,EAAA,IAAgB,CAAA;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAG,EAACD,EAAM,QAAN,EAAc,UAAAf,EAAA,CAAM;AAAA,QACrB,gBAAAgB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,6BAA6BR,CAAS,GACtD,UAAA;AAAA,UAAAR,IACC,gBAAAe,EAACE,GAAA,EAAW,IAAIR,GAAW,SAAQ,SAAQ,OAAM,eAAc,WAAU,QACtE,UAAAT,EAAA,CACH,IACE;AAAA,UACHC,IACC,gBAAAc,EAACE,GAAA,EAAW,IAAIN,GAAW,SAAQ,WAAU,OAAM,iBAAgB,WAAU,QAC1E,UAAAV,EAAA,CACH,IACE;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,QACA,gBAAAY,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAO,SAAQ,QAAO,MAAK,SAAQ,UAAU,CAAC,CAACb,GAAM,SAASE,GAAU,OAAOJ,KAAA,OAAAA,IAAe,UAAU;AAAA,UACzG,gBAAAY;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAOd,IAAS,UAAU;AAAA,cAC1B,UAAU,CAAC,CAACC;AAAA,cACZ,SAASC;AAAA,cACT,OAAOJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/headless/components/feedBack/saveAssetDialog/saveAssetDialog.js

@@ -1,54 +1,55 @@
-import { jsxs as w, jsx as i } from "react/jsx-runtime";
-import c from "clsx";
-import { Modal as r } from "../modal/modal.js";
-import { TextField as e } from "../../inputs/textField/textField.js";
-import { Button as _ } from "../../inputs/button/button.js";
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import S from "clsx";
+import { Modal as l } from "../modal/modal.js";
+import { TextField as T } from "../../inputs/textField/textField.js";
+import { Button as h } from "../../inputs/button/button.js";
 function D({
-  open: p,
+  open: k,
   title: o,
   nameLabel: t,
   name: d,
   onNameChange: s,
-  previewSrc: f,
-  onCapture: h,
+  previewSrc: w,
+  onCapture: _,
   captureLabel: v,
-  busy: l,
-  confirmLabel: x,
-  cancelLabel: u,
-  onConfirm: F,
-  onClose: k,
-  children: j,
-  className: z
+  busy: r,
+  confirmLabel: u,
+  cancelLabel: x,
+  onConfirm: p,
+  onClose: e,
+  children: F,
+  className: j
 }) {
-  const S = s !== void 0 || d !== void 0;
-  return /* @__PURE__ */ w(r, { open: p, onClose: k, size: "small", children: [
-    /* @__PURE__ */ i(r.Header, { children: o != null ? o : "Save" }),
-    /* @__PURE__ */ i(r.Content, { children: /* @__PURE__ */ w("div", { className: c("smwb-save-asset-dialog__body", z), children: [
-      S ? /* @__PURE__ */ i(
-        e,
+  const m = s !== void 0 || d !== void 0;
+  return /* @__PURE__ */ f(l, { open: k, onClose: e, size: "medium", children: [
+    /* @__PURE__ */ i(l.Header, { children: o != null ? o : "Save" }),
+    /* @__PURE__ */ i(l.Content, { children: /* @__PURE__ */ f("div", { className: S("smwb-save-asset-dialog__body", j), children: [
+      m ? /* @__PURE__ */ i(
+        T,
         {
           label: t != null ? t : "Name",
           value: d != null ? d : "",
-          disabled: !!l,
-          onChange: (T) => s == null ? void 0 : s(T.currentTarget.value)
+          fullWidth: !0,
+          disabled: !!r,
+          onChange: (z) => s == null ? void 0 : s(z.currentTarget.value)
         }
       ) : null,
-      f ? /* @__PURE__ */ i("div", { className: "smwb-save-asset-dialog__preview", children: /* @__PURE__ */ i("img", { src: f, alt: "" }) }) : null,
-      h ? /* @__PURE__ */ i(
-        _,
+      w ? /* @__PURE__ */ i("div", { className: "smwb-save-asset-dialog__preview", children: /* @__PURE__ */ i("img", { src: w, alt: "" }) }) : null,
+      _ ? /* @__PURE__ */ i(
+        h,
         {
           variant: "outlined",
           size: "small",
-          disabled: !!l,
-          onClick: () => h(),
+          disabled: !!r,
+          onClick: () => _(),
           label: v != null ? v : "Capture preview"
         }
       ) : null,
-      j
+      F
     ] }) }),
-    /* @__PURE__ */ w(r.Footer, { children: [
-      /* @__PURE__ */ i(_, { variant: "text", disabled: !!l, onClick: () => k(), label: u != null ? u : "Cancel" }),
-      /* @__PURE__ */ i(_, { variant: "contained", disabled: !!l, onClick: () => F(), label: x != null ? x : "Save" })
+    /* @__PURE__ */ f(l.Footer, { children: [
+      /* @__PURE__ */ i(h, { variant: "text", disabled: !!r, onClick: () => e(), label: x != null ? x : "Cancel" }),
+      /* @__PURE__ */ i(h, { variant: "contained", disabled: !!r, onClick: () => p(), label: u != null ? u : "Save" })
     ] })
   ] });
 }