Fix CSS & JS deprecation warnings following node upgrade

.gitignore

@@ -52,3 +52,6 @@ cloudinary-image-management-and-manipulation-in-the-cloud-cdn.zip
 cloudinary-wordpress-v2.zip
 cloudinary-wordpress-v3.zip
 package/dist
+
+# AI generated files
+.claude/

js/gallery.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '6da83dfb91692f575603');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '9cc411f20e1aa5754b7f');

src/css/components/_brand.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 @font-face {
 	font-family: cloudinary;
 	src: url(fonts/cloudinary.eot);

src/css/components/_edit_overlay.scss

@@ -1,4 +1,5 @@
-@import '../variables';
+@use "sass:color";
+@use "../variables" as *;
 
 .edit-overlay {
 	&-grid {
@@ -79,7 +80,7 @@
 				border: 2px solid $color-red;
 
 				&:hover {
-					background-color: darken($color-red, 5%);
+					background-color: color.adjust($color-red, $lightness: -5%);
 					color: $color-white;
 				}
 			}

src/css/components/_settings.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .settings {
 
 	&-image {

src/css/components/_sync.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .sync {
 
 	.spinner {

src/css/components/_terms_order.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .cld {
 
 	&-tax {

src/css/components/_ui.scss

@@ -1,30 +1,45 @@
-.cld {
-	@import "ui/ui-components";
-	@import "ui/grid";
-	@import "ui/page";
-	@import "ui/panel";
-	@import "ui/loading";
-	@import "ui/sidebar";
-	@import "ui/charts";
-	@import "ui/asset-table";
-	@import "ui/links";
-	@import "ui/tooltips";
-	@import "ui/notice";
-	@import "ui/grid";
-	@import "ui/media";
-	@import "ui/group";
-	@import "ui/input";
-	@import "ui/gallery";
-	@import "ui/tables";
-	@import "ui/modal";
-	@import "ui/sidebar";
-	@import "ui/plan";
-	@import "ui/wizard";
-	@import "ui/import";
-	@import "ui/sizes-preview";
-	@import "ui/cron";
-}
+@use "../variables" as *;
 
+// UI Components - using @forward to re-export all UI modules.
+@forward "ui/ui-components";
+@forward "ui/grid";
+@forward "ui/page";
+@forward "ui/tabs";
+@forward "ui/panel";
+@forward "ui/panels/legacy";
+@forward "ui/panels/panel-short";
+@forward "ui/panels/infobox";
+@forward "ui/panels/submit-switch-cloud";
+@forward "ui/panels/optimize";
+@forward "ui/loading";
+@forward "ui/sidebar";
+@forward "ui/charts";
+@forward "ui/asset-table";
+@forward "ui/links";
+@forward "ui/tooltips";
+@forward "ui/notice";
+@forward "ui/media";
+@forward "ui/group";
+@forward "ui/input";
+@forward "ui/controls/text";
+@forward "ui/controls/select";
+@forward "ui/controls/on-off";
+@forward "ui/controls/icon-toggle";
+@forward "ui/controls/excluded_types";
+@forward "ui/controls/input-tags";
+@forward "ui/gallery";
+@forward "ui/tables";
+@forward "ui/modal";
+@forward "ui/plan";
+@forward "ui/wizard";
+@forward "ui/wizard/tabs";
+@forward "ui/wizard/intro";
+@forward "ui/wizard/connect";
+@forward "ui/wizard/optimize";
+@forward "ui/wizard/complete";
+@forward "ui/import";
+@forward "ui/sizes-preview";
+@forward "ui/cron";
 
 // Extras.
 .tippy-box[data-theme~="cloudinary"] {

src/css/components/ui/_asset-table.scss

@@ -1,6 +1,9 @@
+@use "../../variables" as *;
+
+
 // Non-media library assets.
 
-&-pagenav {
+.cld-pagenav {
 	margin-top: 5px;
 	line-height: 2.4em;
 	color: #555;
@@ -10,19 +13,19 @@
 	}
 }
 
-&-delete {
+.cld-delete {
 	color: $color-red;
 	cursor: pointer;
 	float: right;
 }
 
-&-apply {
+.cld-apply {
 	&-action {
 		float: right;
 	}
 }
 
-&-table {
+.cld-table {
 	thead {
 		tr {
 			th.cld-table-th {
@@ -33,7 +36,7 @@
 
 }
 
-&-asset {
+.cld-asset {
 	.cld-input-on-off {
 		display: inline-block;
 	}

src/css/components/ui/_charts.scss

@@ -1,6 +1,9 @@
+@use "../../variables" as *;
+
+
 // Chart & Lines styles.
 
-&-chart {
+.cld-chart {
 	&-stat {
 		padding-bottom: 2em;
 
@@ -11,7 +14,7 @@
 	}
 }
 
-&-progress {
+.cld-progress {
 	&-circular {
 		display: block;
 		width: 160px;
@@ -97,7 +100,7 @@
 	}
 }
 
-&-line {
+.cld-line {
 	&-stat {
 		margin-bottom: 15px;
 	}

src/css/components/ui/_cron.scss

@@ -1,6 +1,8 @@
+@use "panel" as panel;
+
 // Cron.
-&-cron {
-	@extend .cld-panel;
+.cld-cron {
+	@include panel.panel-base;
 
 	padding-inline: 16px;
 	padding-block: 13px;

src/css/components/ui/_gallery.scss

@@ -1,5 +1,8 @@
+@use "../../variables" as *;
+
+
 // Gallery styles.
-&-gallery-settings {
+.cld-gallery-settings {
 	width: 100%;
 	display: flex;
 	flex-wrap: wrap;

src/css/components/ui/_grid.scss

@@ -1,5 +1,8 @@
+@use "../../variables" as *;
+
+
 // Grid : rows and columns.
-&-row {
+.cld-row {
 	margin: 0;
 	clear: both;
 	display: flex;
@@ -15,7 +18,7 @@
 	}
 }
 
-&-column {
+.cld-column {
 	width: 100%;
 	box-sizing: border-box;
 	padding: 0 0 0 $size-padding-column;
@@ -65,7 +68,7 @@
 	}
 }
 
-&-center {
+.cld-center {
 	&-column {
 		&.cld-info-text {
 			padding-left: 2em;

src/css/components/ui/_group.scss

@@ -1,5 +1,5 @@
 // Group component.
-&-group {
+.cld-group {
 
 	.cld-group .cld-group {
 		padding-left: 4px;

src/css/components/ui/_import.scss

@@ -1,4 +1,4 @@
-&-import {
+.cld-import {
 	width: 200px;
 	height: 100%;
 	position: absolute;

src/css/components/ui/_input.scss

@@ -1,3 +1,6 @@
+@use "../../variables" as *;
+
+
 // Inputs for forms etc.
 @mixin input {
 	margin: 0 0 23px;
@@ -31,16 +34,9 @@
 	}
 }
 
-&-input {
+.cld-input {
 	@include input;
 
-	@import "controls/text";
-	@import "controls/select";
-	@import "controls/on-off";
-	@import "controls/icon-toggle";
-	@import "controls/excluded_types";
-	@import "controls/input-tags";
-
 	.prefixed {
 		width: 40%;
 		margin-left: 6px;

src/css/components/ui/_links.scss

@@ -1,6 +1,9 @@
+@use "../../variables" as *;
+
+
 // Links - button styled.
 
-&-link {
+.cld-link {
 	&-button {
 		background-color: $color-cld-blue;
 		color: #fff;

src/css/components/ui/_loading.scss

@@ -1,6 +1,9 @@
+@use "../../variables" as *;
+
+
 // Loading/activity animations.
 
-&-loading {
+.cld-loading {
 	background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Bpbm5lciIgdmlld0JveD0iLTQgLTQgMTUxIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbCiAgICAgIEBrZXlmcmFtZXMgY29sb3JzIHsKICAgICAgICAwJSB7IHN0cm9rZTogIzAwNzhGRjsgfQogICAgICAgICAgNTAlIHsgc3Ryb2tlOiAjMGUyZjVhOyB9CiAgICAgICAgICAxMDAlIHsgc3Ryb2tlOiAjMDA3OEZGOyB9CiAgICAgIH0KCiAgICAgIEBrZXlmcmFtZXMgZGFzaCB7CiAgICAgICAwJSB7IHN0cm9rZS1kYXNob2Zmc2V0OiA1NjA7IH0KICAgICAgIDUwJSB7CiAgICAgICAgICBzdHJva2UtZGFzaG9mZnNldDogMDsKICAgICAgIH0KICAgICAgIDEwMCUgeyAgIHN0cm9rZS1kYXNob2Zmc2V0OiA1NjA7IH0KICAgICAgfQogICAgICBALXdlYmtpdC1rZXlmcmFtZXMgY29sb3JzIHsKICAgICAgICAwJSB7IHN0cm9rZTogIzAwNzhmZjsgfQogICAgICAgICAgNTAlIHsgc3Ryb2tlOiAjMGUyZjVhOyB9CiAgICAgICAgICAxMDAlIHsgc3Ryb2tlOiAjMDA3OGZmOyB9CiAgICAgIH0KCiAgICAgIEAtd2Via2l0LWtleWZyYW1lcyBkYXNoIHsKICAgICAgIDAlIHsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDU2MDsgfQogICAgICAgNTAlIHsKICAgICAgICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAwOwogICAgICAgfQogICAgICAgMTAwJSB7ICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDU2MDsKICAgICAgIH0KICAgICAgfQogICAgICAucGF0aCB7CiAgICAgICAgc3Ryb2tlLWRhc2hhcnJheTogMjgwOwogICAgICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAwOwogICAgICAgIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlcjsKICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjoKICAgICAgICAgIGRhc2ggMnMgZWFzZS1pbi1vdXQgaW5maW5pdGUsIGNvbG9ycyA4cyBlYXNlLWluLW91dCBpbmZpbml0ZTsKICAgICAgICBhbmltYXRpb246CiAgICAgICAgICBkYXNoIDJzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvcnMgOHMgZWFzZS1pbi1vdXQgaW5maW5pdGU7CiAgICAgIH0KICAgIF1dPjwvc3R5bGU+CiAgPHBhdGggY2xhc3M9InBhdGgiIGQ9Ik0xMjEuNjYzIDkwLjYzOGMtMS43OTYgMC05OS4zMy0uNDk4LTEwMS40NzQtMS40NzhDOC42ODUgODMuODc3IDEuMjUgNzIuMTk2IDEuMjUgNTkuMzk2YzAtMTYuNjU2IDEyLjc5Ny0zMC42MSAyOS4wNTItMzIuMzIzIDcuNDktMTUuNzA2IDIzLjE4Ni0yNS43MDcgNDAuNzE0LTI1LjcwNyAyMC45OCAwIDM5LjIxNSAxNC43NTIgNDMuOTQ1IDM0LjkwNyAxNS4wOS4yNDUgMjcuMjkgMTIuNjMgMjcuMjkgMjcuODIyIDAgMTEuOTY4LTcuNzM4IDIyLjU1LTE5LjI1NiAyNi4zMyIgc3Ryb2tlLXdpZHRoPSI5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K);
 	background-repeat: no-repeat;
 	background-size: 50px 50px;
@@ -14,7 +17,7 @@
 	}
 }
 
-&-syncing {
+.cld-syncing {
 	background: url("./images/loading.svg") no-repeat center center;
 	width: 30px;
 	height: 20px;
@@ -23,7 +26,7 @@
 	display: inline-block;
 }
 
-&-dashboard {
+.cld-dashboard {
 	&-placeholder {
 		background-color: #eff5f8;
 		min-height: 120px;

src/css/components/ui/_media.scss

@@ -1,8 +1,11 @@
+@use "../../variables" as *;
+
+
 // Media styles : Images, breakpoints ,and videos previews
-&-image,
-&-video,
-&-breakpoints,
-&-lazyload{
+.cld-image,
+.cld-video,
+.cld-breakpoints,
+.cld-lazyload {
 
 
 	&-preview {
@@ -27,11 +30,11 @@
 	}
 }
 
-&.cld-ui-preview {
+.cld-ui-preview {
 	max-width: 322px;
 }
 
-&-breakpoints, &-lazyload {
+.cld-breakpoints, .cld-lazyload {
 	&-preview {
 		.cld-image-preview-wrapper:hover{
 			.preview-image {
@@ -81,7 +84,7 @@
 		}
 	}
 }
-&-lazyload{
+.cld-lazyload {
 	&-preview {
 		.progress-bar{
 			height: 2px;

src/css/components/ui/_modal.scss

@@ -1,4 +1,7 @@
-&-modal {
+@use "../../variables" as *;
+
+
+.cld-modal {
 	visibility: hidden;
 	background-color: rgba(0, 0, 0, 0.8);
 	position: fixed;

src/css/components/ui/_notice.scss

@@ -1,5 +1,8 @@
+@use "../../variables" as *;
+
+
 // Notices and alerts.
-&-notice-box {
+.cld-notice-box {
 	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
 	position: relative;
 	margin-right: 20px;
@@ -81,7 +84,7 @@
 	}
 }
 
-&-connection {
+.cld-connection {
 	&-box {
 		display: flex;
 		max-width: 500px;