diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
index 99ff09b8f..497259778 100644
--- a/.stylelintrc.cjs
+++ b/.stylelintrc.cjs
@@ -40,11 +40,6 @@ module.exports = {
       files: ['blocks/**/*.css', 'solutions/**/*.css'],
       ignoreFiles: ['**/test/**/*.css'],
       plugins: ['./stylelint-force-app-name-prefix.cjs'],
-      rules: {
-        'plugin/stylelint-force-app-name-prefix': {
-          appName: 'lr',
-        },
-      },
     },
   ],
 };
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6aafccbb5..a6de96aaf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,81 @@
-# [0.43.0](https://github.com/uploadcare/blocks/compare/v0.42.1...v0.43.0) (2024-06-14)
+# [0.49.0](https://github.com/uploadcare/blocks/compare/v0.48.1...v0.49.0) (2024-07-03)
+
+### BEAKING CHANGES
+
+- **styles:** Added the `uc-` prefix to all class selectors ([#683](https://github.com/uploadcare/blocks/issues/683)) ([a3929d5](https://github.com/uploadcare/blocks/commit/a3929d599e23e221b2fe88b2d2489a35c8ee7899)).
+
+See the [migration guide](https://uploadcare.com/docs/file-uploader/migration-to-0.49.0/) for details.
+
+## [0.48.1](https://github.com/uploadcare/blocks/compare/v0.48.0...v0.48.1) (2024-07-02)
+
+### Bug Fixes
+
+- **a11y:** Added a type for the button ([#695](https://github.com/uploadcare/blocks/issues/695)) ([af1d6b6](https://github.com/uploadcare/blocks/commit/af1d6b63112cc383bcad52d099d84460da937ffa))
+
+## [0.48.0](https://github.com/uploadcare/blocks/compare/v0.47.0...v0.48.0) (2024-07-02)
+
+# [0.47.0](https://github.com/uploadcare/blocks/compare/v0.46.3...v0.47.0) (2024-07-02)
+
+### BEAKING CHANGES
+
+- Extract public api to the composition class at the Uploader API instance that you can get using `getAPI()` method of the `lr-upload-ctx-provider` block. ([#676](https://github.com/uploadcare/blocks/issues/676)) ([ea29dd2](https://github.com/uploadcare/blocks/commit/ea29dd2ebfc5b5897c7db8f6dbda608604eea86c)).
+
+See the [migration guide](https://uploadcare.com/docs/file-uploader/migration-to-0.47.0/) for details.
+
+## [0.46.3](https://github.com/uploadcare/blocks/compare/v0.46.2...v0.46.3) (2024-07-01)
+
+### Bug Fixes
+
+- **icons:** Added currentColor to icon edit-file ([#689](https://github.com/uploadcare/blocks/issues/689)) ([617d3cd](https://github.com/uploadcare/blocks/commit/617d3cd8e0cde8ecadd6024ce321b7ba507009f1))
+
+## [0.46.2](https://github.com/uploadcare/blocks/compare/v0.46.1...v0.46.2) (2024-07-01)
+
+### Bug Fixes
+
+- **icons:** added icon edit file ([#687](https://github.com/uploadcare/blocks/issues/687)) ([2a869ab](https://github.com/uploadcare/blocks/commit/2a869abfdbe571aff52ccc5687a8c66e0d829cb5))
+
+## [0.46.1](https://github.com/uploadcare/blocks/compare/v0.46.0...v0.46.1) (2024-06-28)
+
+### Bug Fixes
+
+- **events:** Added status after deleting files in idle ([#684](https://github.com/uploadcare/blocks/issues/684)) ([0e07ee3](https://github.com/uploadcare/blocks/commit/0e07ee3d82a326e56cab343dafdf7472f2d73216))
+
+# [0.46.0](https://github.com/uploadcare/blocks/compare/v0.45.0...v0.46.0) (2024-06-24)
 
 ### Features
 
-- added `collectionValidators` and `fileValidators`: Custom validators are now supported for collections and files. This enhancement allows for the addition of necessary checks for uploaded files and collections, providing flexibility and control over compliance with requirements ([#667](https://github.com/uploadcare/blocks/issues/667)) ([d3260b0](https://github.com/uploadcare/blocks/commit/d3260b0cce5ac6ca7cfd0aeb8aff0c9fc35036ed)). See docs [here](https://uploadcare.com/docs/file-uploader/validators). 
+- Significant improvements to accessibility and keyboard navigation, enhancing user experience and inclusivity ([#671](https://github.com/uploadcare/blocks/issues/671)) ([4acb8a0](https://github.com/uploadcare/blocks/commit/4acb8a0b7ea9c7a95be415627f7d4e1eb748fcf2))
+
+# [0.45.0](https://github.com/uploadcare/blocks/compare/v0.44.0...v0.45.0) (2024-06-23)
+
+### BEAKING CHANGES
+
+- The previously deprecated API method `setUploadMetadata` has been removed. Use `metadata` instance property on `lr-config` block instead. See [metadata](https://uploadcare.com/docs/file-uploader/options/#metadata) for more details.
+- The previously deprecated API method `addFiles` has been removed. Use `addFileFromObject`, `addFileFromUrl` or `addFileFromUuid` instead. See [File Uploader API](https://uploadcare.com/docs/file-uploader/api/#add-file-from-object) for more details.
+
+See the [migration guide](https://uploadcare.com/docs/file-uploader/migration-to-0.45.0/) for details.
+
+# [0.44.0](https://github.com/uploadcare/blocks/compare/v0.43.0...v0.44.0) (2024-06-21)
+
+### BEAKING CHANGES
+
+- All theme variables of the previous version are deprecated and won't affect the look anymore.
+- The default button that opens the uploader dialog (SimpleBtn) component now uses independent variables.
+- By default, the theme now uses OKLCH color space. You can still override it using other color spaces, but we recommend converting your colors to OKLCH.
+
+See the [migration guide](https://uploadcare.com/docs/file-uploader/migration-to-0.44.0/) for details.
+
+Full styling docs are available [here](https://uploadcare.com/docs/file-uploader/styling/).
+
+### Features
+
+- updated theming mechanics with oklch colors and reworked css properties ([#662](https://github.com/uploadcare/blocks/issues/662)) ([ee90e66](https://github.com/uploadcare/blocks/commit/ee90e66c076e21e1ee92b2f4c60f8eb955a7d5bc))
+
+# [0.43.0](https://github.com/uploadcare/blocks/compare/v0.42.1...v0.43.0) (2024-06-14)
+
+### Features
 
+- added `collectionValidators` and `fileValidators`: Custom validators are now supported for collections and files. This enhancement allows for the addition of necessary checks for uploaded files and collections, providing flexibility and control over compliance with requirements ([#667](https://github.com/uploadcare/blocks/issues/667)) ([d3260b0](https://github.com/uploadcare/blocks/commit/d3260b0cce5ac6ca7cfd0aeb8aff0c9fc35036ed)). See docs [here](https://uploadcare.com/docs/file-uploader/validators).
 
 ## [0.42.1](https://github.com/uploadcare/blocks/compare/v0.42.0...v0.42.1) (2024-05-30)
 
diff --git a/README.md b/README.md
index 81d4d5a66..ec138ac17 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ and [even more](<(https://uploadcare.com/features/?ref=github-readme)>).
 
 See Uploadcare Blocks [in action](https://codesandbox.io/p/devbox/github/uploadcare/blocks-examples/tree/main/examples/js-uploader)!
 
-<img alt="Uploadcare Blocks examples" src="https://ucarecdn.com/8035cdc7-f0b9-4ea9-8c15-05816f315481/">
+<img alt="Uploadcare Blocks examples" src="https://ucarecdn.com/2883da9f-6962-49db-9947-f91a3e25be2f/-/preview/">
 
 ## Core features
 
diff --git a/abstract/ActivityBlock.js b/abstract/ActivityBlock.js
index 99e0c453d..2dbbbc1bc 100644
--- a/abstract/ActivityBlock.js
+++ b/abstract/ActivityBlock.js
@@ -8,7 +8,9 @@ const ACTIVE_ATTR = 'active';
 const ACTIVE_PROP = '___ACTIVITY_IS_ACTIVE___';
 
 export class ActivityBlock extends Block {
+  /** @protected */
   historyTracked = false;
+
   init$ = activityBlockCtx(this);
 
   _debouncedHistoryFlush = debounce(this._historyFlush.bind(this), 10);
@@ -37,6 +39,7 @@ export class ActivityBlock extends Block {
     });
   }
 
+  /** @protected */
   initCallback() {
     super.initCallback();
     if (this.hasAttribute('current-activity')) {
@@ -131,6 +134,7 @@ export class ActivityBlock extends Block {
     ActivityBlock._activityCallbacks.delete(this);
   }
 
+  /** @protected */
   destroyCallback() {
     super.destroyCallback();
     this._isActivityRegistered() && this.unregisterActivity();
@@ -138,14 +142,13 @@ export class ActivityBlock extends Block {
     /** @type {string | null} */
     const currentActivity = this.$['*currentActivity'];
 
-    /** @type {Set<import('./Block').Block>} */
-    let blocksRegistry = this.$['*blocksRegistry'];
-    const hasCurrentActivityInCtx = !![...blocksRegistry].find(
+    const hasCurrentActivityInCtx = !![...this.blocksRegistry].find(
       (block) => block instanceof ActivityBlock && block.activityType === currentActivity,
     );
 
     if (!hasCurrentActivityInCtx) {
       this.$['*currentActivity'] = null;
+      this.setOrAddState('*modalActive', false);
     }
   }
 
@@ -177,10 +180,8 @@ export class ActivityBlock extends Block {
       }
       let couldOpenActivity = !!nextActivity;
       if (nextActivity) {
-        /** @type {Set<ActivityBlock>} */
-        let blocksRegistry = this.$['*blocksRegistry'];
-        const nextActivityBlock = [...blocksRegistry].find((block) => block.activityType === nextActivity);
-        couldOpenActivity = nextActivityBlock?.couldOpenActivity ?? false;
+        const nextActivityBlock = [...this.blocksRegistry].find((block) => block.activityType === nextActivity);
+        couldOpenActivity = /** @type {ActivityBlock} */ (nextActivityBlock)?.couldOpenActivity ?? false;
       }
       nextActivity = couldOpenActivity ? nextActivity : undefined;
       this.$['*currentActivity'] = nextActivity;
@@ -198,10 +199,9 @@ ActivityBlock.activities = Object.freeze({
   DRAW: 'draw',
   UPLOAD_LIST: 'upload-list',
   URL: 'url',
-  CONFIRMATION: 'confirmation',
   CLOUD_IMG_EDIT: 'cloud-image-edit',
   EXTERNAL: 'external',
   DETAILS: 'details',
 });
 
-/** @typedef {(typeof ActivityBlock)['activities'][keyof (typeof ActivityBlock)['activities']] | null} ActivityType */
+/** @typedef {(typeof ActivityBlock)['activities'][keyof (typeof ActivityBlock)['activities']] | (string & {}) | null} ActivityType */
diff --git a/abstract/Block.js b/abstract/Block.js
index bfa658b23..7bb841a46 100644
--- a/abstract/Block.js
+++ b/abstract/Block.js
@@ -12,6 +12,7 @@ import { blockCtx } from './CTX.js';
 import { LocaleManager, localeStateKey } from './LocaleManager.js';
 import { l10nProcessor } from './l10nProcessor.js';
 import { sharedConfigKey } from './sharedConfigKey.js';
+import { A11y } from './a11y.js';
 
 const TAG_PREFIX = 'lr-';
 
@@ -19,9 +20,13 @@ const TAG_PREFIX = 'lr-';
 export class Block extends BaseComponent {
   /** @type {string | null} */
   static StateConsumerScope = null;
-  static className = '';
+
+  /** @type {string[]} */
+  static styleAttrs = [];
+
+  /** @protected */
   requireCtxName = false;
-  allowCustomTemplate = true;
+
   /** @type {import('./ActivityBlock.js').ActivityType} */
   activityType = null;
 
@@ -49,6 +54,7 @@ export class Block extends BaseComponent {
   }
 
   /**
+   * @private
    * @param {string} key
    * @param {number} count
    * @returns {string}
@@ -62,6 +68,7 @@ export class Block extends BaseComponent {
   /**
    * @param {string} key
    * @param {() => void} resolver
+   * @protected
    */
   bindL10n(key, resolver) {
     this.localeManager?.bindL10n(this, key, resolver);
@@ -94,10 +101,7 @@ export class Block extends BaseComponent {
    * @returns {Boolean}
    */
   hasBlockInCtx(callback) {
-    // @ts-ignore TODO: fix this
-    /** @type {Set} */
-    let blocksRegistry = this.$['*blocksRegistry'];
-    for (let block of blocksRegistry) {
+    for (let block of this.blocksRegistry) {
       if (callback(block)) {
         return true;
       }
@@ -118,20 +122,12 @@ export class Block extends BaseComponent {
     );
   }
 
-  /** @param {import('./ActivityBlock.js').ActivityType} activityType */
-  setActivity(activityType) {
-    if (this.hasBlockInCtx((b) => b.activityType === activityType)) {
-      this.$['*currentActivity'] = activityType;
-      return;
-    }
-    console.warn(`Activity type "${activityType}" not found in the context`);
-  }
-
+  /** @protected */
   connectedCallback() {
-    const className = /** @type {typeof Block} */ (this.constructor).className;
-    if (className) {
-      this.classList.toggle(`${TAG_PREFIX}${className}`, true);
-    }
+    const styleAttrs = /** @type {typeof Block} */ (this.constructor).styleAttrs;
+    styleAttrs.forEach((attr) => {
+      this.setAttribute(attr, '');
+    });
 
     if (this.hasAttribute('retpl')) {
       // @ts-ignore TODO: fix this
@@ -158,11 +154,13 @@ export class Block extends BaseComponent {
     WindowHeightTracker.registerClient(this);
   }
 
+  /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
     WindowHeightTracker.unregisterClient(this);
   }
 
+  /** @protected */
   initCallback() {
     if (!this.has('*blocksRegistry')) {
       this.add('*blocksRegistry', new Set());
@@ -178,20 +176,41 @@ export class Block extends BaseComponent {
       this.add('*localeManager', new LocaleManager(this));
     }
 
+    if (!this.has('*a11y')) {
+      this.add('*a11y', new A11y());
+    }
+
     this.sub(localeStateKey('locale-id'), (localeId) => {
-      this.style.direction = getLocaleDirection(localeId);
+      const direction = getLocaleDirection(localeId);
+      this.style.direction = direction === 'ltr' ? '' : direction;
     });
   }
 
-  /** @returns {LocaleManager | null} */
+  /**
+   * @private
+   * @returns {LocaleManager | null}
+   */
   get localeManager() {
     return this.has('*localeManager') ? this.$['*localeManager'] : null;
   }
 
+  /**
+   * @returns {A11y | null}
+   * @protected
+   */
+  get a11y() {
+    return this.has('*a11y') ? this.$['*a11y'] : null;
+  }
+
+  /** @type {Set<Block>} */
+  get blocksRegistry() {
+    return this.$['*blocksRegistry'];
+  }
+
+  /** @protected */
   destroyCallback() {
-    /** @type {Set<Block>} */
-    let blocksRegistry = this.$['*blocksRegistry'];
-    blocksRegistry.delete(this);
+    let blocksRegistry = this.blocksRegistry;
+    blocksRegistry?.delete(this);
 
     this.localeManager?.destroyL10nBindings(this);
     this.l10nProcessorSubs = new Map();
@@ -200,7 +219,7 @@ export class Block extends BaseComponent {
     // TODO: this should be done inside symbiote
     Data.deleteCtx(this);
 
-    if (blocksRegistry.size === 0) {
+    if (blocksRegistry?.size === 0) {
       setTimeout(() => {
         // Destroy global context after all blocks are destroyed and all callbacks are run
         this.destroyCtxCallback();
@@ -220,25 +239,10 @@ export class Block extends BaseComponent {
   }
 
   /**
-   * @param {Number} bytes
-   * @param {Number} [decimals]
+   * @param {String} url
+   * @returns {Promise<String>}
+   * @protected
    */
-  fileSizeFmt(bytes, decimals = 2) {
-    let units = ['B', 'KB', 'MB', 'GB', 'TB'];
-    /**
-     * @param {String} str
-     * @returns {String}
-     */
-    if (bytes === 0) {
-      return `0 ${units[0]}`;
-    }
-    let k = 1024;
-    let dm = decimals < 0 ? 0 : decimals;
-    let i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / k ** i).toFixed(dm)) + ' ' + units[i];
-  }
-
-  /** @param {string} url */
   async proxyUrl(url) {
     if (this.cfg.secureDeliveryProxy && this.cfg.secureDeliveryProxyUrlResolver) {
       console.warn(
diff --git a/abstract/CTX.js b/abstract/CTX.js
index fd349d240..4462de40b 100644
--- a/abstract/CTX.js
+++ b/abstract/CTX.js
@@ -6,14 +6,14 @@ export const blockCtx = () => ({});
 /** @param {import('./Block').Block} fnCtx */
 export const activityBlockCtx = (fnCtx) => ({
   ...blockCtx(),
-  '*currentActivity': '',
+  '*currentActivity': null,
   '*currentActivityParams': {},
   '*history': [],
   '*historyBack': null,
   '*closeModal': () => {
     fnCtx.set$({
+      '*currentActivity': null,
       '*modalActive': false,
-      '*currentActivity': '',
     });
   },
 });
@@ -24,9 +24,7 @@ export const uploaderBlockCtx = (fnCtx) => ({
   '*commonProgress': 0,
   '*uploadList': [],
   '*focusedEntry': null,
-  '*uploadMetadata': null,
   '*uploadQueue': new Queue(1),
-  '*uploadCollection': null,
   /** @type {ReturnType<import('../types').OutputErrorCollection>[]} */
   '*collectionErrors': [],
   /** @type {import('../types').OutputCollectionState | null} */
diff --git a/abstract/SolutionBlock.js b/abstract/SolutionBlock.js
index d0d5ed423..4f5e7eed7 100644
--- a/abstract/SolutionBlock.js
+++ b/abstract/SolutionBlock.js
@@ -1,12 +1,18 @@
-import { uploaderBlockCtx } from './CTX.js';
 import svgIconsSprite from '../blocks/themes/lr-basic/svg-sprite.js';
 import { Block } from './Block.js';
+import { uploaderBlockCtx } from './CTX.js';
 
 export class SolutionBlock extends Block {
+  static styleAttrs = ['lr-wgt-common'];
   requireCtxName = true;
   init$ = uploaderBlockCtx(this);
   _template = null;
 
+  initCallback() {
+    super.initCallback();
+    this.a11y?.registerBlock(this);
+  }
+
   static set template(value) {
     this._template = svgIconsSprite + value + /** HTML */ `<slot></slot>`;
   }
diff --git a/abstract/UploaderBlock.js b/abstract/UploaderBlock.js
index fadb23975..efc04d298 100644
--- a/abstract/UploaderBlock.js
+++ b/abstract/UploaderBlock.js
@@ -6,54 +6,26 @@ import { uploadFileGroup } from '@uploadcare/upload-client';
 import { calculateMaxCenteredCropFrame } from '../blocks/CloudImageEditor/src/crop-utils.js';
 import { parseCropPreset } from '../blocks/CloudImageEditor/src/lib/parseCropPreset.js';
 import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
-import { UploadSource } from '../blocks/utils/UploadSource.js';
-import { serializeCsv } from '../blocks/utils/comma-separated.js';
 import { debounce } from '../blocks/utils/debounce.js';
 import { customUserAgent } from '../blocks/utils/userAgent.js';
 import { createCdnUrl, createCdnUrlModifiers } from '../utils/cdn-utils.js';
-import { IMAGE_ACCEPT_LIST, fileIsImage, mergeFileTypes } from '../utils/fileTypes.js';
-import { stringToArray } from '../utils/stringToArray.js';
-import { warnOnce } from '../utils/warnOnce.js';
 import { uploaderBlockCtx } from './CTX.js';
-import { TypedCollection } from './TypedCollection.js';
-import { buildOutputCollectionState } from './buildOutputCollectionState.js';
-import { uploadEntrySchema } from './uploadEntrySchema.js';
-import { parseCdnUrl } from '../utils/parseCdnUrl.js';
 import { SecureUploadsManager } from './SecureUploadsManager.js';
+import { TypedCollection } from './TypedCollection.js';
+import { UploaderPublicApi } from './UploaderPublicApi.js';
 import { ValidationManager } from './ValidationManager.js';
+import { uploadEntrySchema } from './uploadEntrySchema.js';
 
 export class UploaderBlock extends ActivityBlock {
+  /** @protected */
   couldBeCtxOwner = false;
+
+  /** @private */
   isCtxOwner = false;
 
   init$ = uploaderBlockCtx(this);
 
   /** @private */
-  __initialUploadMetadata = null;
-
-  /**
-   * This is Public JS API method. Could be called before block initialization, so we need to delay state interactions
-   * until block init.
-   *
-   * TODO: If we add more public methods, it is better to use the single queue instead of tons of private fields per
-   * each method. See https://github.com/uploadcare/blocks/pull/162/
-   *
-   * @deprecated Use `metadata` instance property on `lr-config` block instead.
-   * @param {import('@uploadcare/upload-client').Metadata} metadata
-   * @public
-   */
-  setUploadMetadata(metadata) {
-    warnOnce(
-      'setUploadMetadata is deprecated. Use `metadata` instance property on `lr-config` block instead. See migration guide: https://uploadcare.com/docs/file-uploader/migration-to-0.25.0/',
-    );
-    if (!this.connectedOnce) {
-      // @ts-ignore TODO: fix this
-      this.__initialUploadMetadata = metadata;
-    } else {
-      this.$['*uploadMetadata'] = metadata;
-    }
-  }
-
   get hasCtxOwner() {
     return this.hasBlockInCtx((block) => {
       if (block instanceof UploaderBlock) {
@@ -63,17 +35,22 @@ export class UploaderBlock extends ActivityBlock {
     });
   }
 
+  /** @protected */
   initCallback() {
     super.initCallback();
 
-    if (!this.$['*uploadCollection']) {
+    if (!this.has('*uploadCollection')) {
       let uploadCollection = new TypedCollection({
         typedSchema: uploadEntrySchema,
         watchList: ['uploadProgress', 'uploadError', 'fileInfo', 'errors', 'cdnUrl', 'isUploading'],
       });
-      this.$['*uploadCollection'] = uploadCollection;
+      this.add('*uploadCollection', uploadCollection);
     }
-    //
+
+    if (!this.has('*publicApi')) {
+      this.add('*publicApi', new UploaderPublicApi(this));
+    }
+
     if (!this.has('*validationManager')) {
       this.add('*validationManager', new ValidationManager(this));
     }
@@ -83,11 +60,38 @@ export class UploaderBlock extends ActivityBlock {
     }
   }
 
-  /** @returns {ValidationManager | null} */
+  /**
+   * @returns {ValidationManager}
+   * @protected
+   */
   get validationManager() {
-    return this.has('*validationManager') ? this.$['*validationManager'] : null;
+    if (!this.has('*validationManager')) {
+      throw new Error('Unexpected error: ValidationManager is not initialized');
+    }
+    return this.$['*validationManager'];
+  }
+
+  /** @returns {UploaderPublicApi} */
+  get api() {
+    if (!this.has('*publicApi')) {
+      throw new Error('Unexpected error: UploaderPublicApi is not initialized');
+    }
+    return this.$['*publicApi'];
+  }
+
+  getAPI() {
+    return this.api;
   }
 
+  /** @returns {TypedCollection} */
+  get uploadCollection() {
+    if (!this.has('*uploadCollection')) {
+      throw new Error('Unexpected error: TypedCollection is not initialized');
+    }
+    return this.$['*uploadCollection'];
+  }
+
+  /** @protected */
   destroyCtxCallback() {
     this._unobserveCollectionProperties?.();
     this._unobserveCollection?.();
@@ -97,6 +101,7 @@ export class UploaderBlock extends ActivityBlock {
     super.destroyCtxCallback();
   }
 
+  /** @private */
   initCtxOwner() {
     this.isCtxOwner = true;
 
@@ -112,240 +117,19 @@ export class UploaderBlock extends ActivityBlock {
       this.$['*uploadQueue'].concurrency = Number(value) || 1;
     });
 
-    if (this.__initialUploadMetadata) {
-      this.$['*uploadMetadata'] = this.__initialUploadMetadata;
-    }
-
     if (!this.$['*secureUploadsManager']) {
       this.$['*secureUploadsManager'] = new SecureUploadsManager(this);
     }
-  }
-
-  // TODO: Probably we should not allow user to override `source` property
-
-  /**
-   * @param {string} url
-   * @param {{ silent?: boolean; fileName?: string; source?: string }} [options]
-   * @returns {import('../types').OutputFileEntry<'idle'>}
-   */
-  addFileFromUrl(url, { silent, fileName, source } = {}) {
-    const internalId = this.uploadCollection.add({
-      externalUrl: url,
-      fileName: fileName ?? null,
-      silent: silent ?? false,
-      source: source ?? UploadSource.API,
-    });
-    return this.getOutputItem(internalId);
-  }
-
-  /**
-   * @param {string} uuid
-   * @param {{ silent?: boolean; fileName?: string; source?: string }} [options]
-   * @returns {import('../types').OutputFileEntry<'idle'>}
-   */
-  addFileFromUuid(uuid, { silent, fileName, source } = {}) {
-    const internalId = this.uploadCollection.add({
-      uuid,
-      fileName: fileName ?? null,
-      silent: silent ?? false,
-      source: source ?? UploadSource.API,
-    });
-    return this.getOutputItem(internalId);
-  }
-
-  /**
-   * @param {string} cdnUrl
-   * @param {{ silent?: boolean; fileName?: string; source?: string }} [options]
-   * @returns {import('../types').OutputFileEntry<'idle'>}
-   */
-  addFileFromCdnUrl(cdnUrl, { silent, fileName, source } = {}) {
-    const parsedCdnUrl = parseCdnUrl({ url: cdnUrl, cdnBase: this.cfg.cdnCname });
-    if (!parsedCdnUrl) {
-      throw new Error('Invalid CDN URL');
-    }
-    const internalId = this.uploadCollection.add({
-      uuid: parsedCdnUrl.uuid,
-      cdnUrl,
-      cdnUrlModifiers: parsedCdnUrl.cdnUrlModifiers,
-      fileName: fileName ?? parsedCdnUrl.filename ?? null,
-      silent: silent ?? false,
-      source: source ?? UploadSource.API,
-    });
-    return this.getOutputItem(internalId);
-  }
-
-  /**
-   * @param {File} file
-   * @param {{ silent?: boolean; fileName?: string; source?: string; fullPath?: string }} [options]
-   * @returns {import('../types').OutputFileEntry<'idle'>}
-   */
-  addFileFromObject(file, { silent, fileName, source, fullPath } = {}) {
-    const internalId = this.uploadCollection.add({
-      file,
-      isImage: fileIsImage(file),
-      mimeType: file.type,
-      fileName: fileName ?? file.name,
-      fileSize: file.size,
-      silent: silent ?? false,
-      source: source ?? UploadSource.API,
-      fullPath: fullPath ?? null,
-    });
-    return this.getOutputItem(internalId);
-  }
-
-  /**
-   * @deprecated Will be removed in the near future. Please use `addFileFromObject`, `addFileFromUrl` or
-   *   `addFileFromUuid` instead.
-   * @param {File[]} files
-   * @returns {import('../types').OutputFileEntry<'idle'>[]}
-   */
-  addFiles(files) {
-    console.warn(
-      '`addFiles` method is deprecated. Please use `addFileFromObject`, `addFileFromUrl` or `addFileFromUuid` instead.',
-    );
-    return files.map((/** @type {File} */ file) => {
-      const internalId = this.uploadCollection.add({
-        file,
-        isImage: fileIsImage(file),
-        mimeType: file.type,
-        fileName: file.name,
-        fileSize: file.size,
-      });
-      return this.getOutputItem(internalId);
-    });
-  }
-
-  /** @param {string} internalId */
-  removeFileByInternalId(internalId) {
-    if (!this.uploadCollection.read(internalId)) {
-      throw new Error(`File with internalId ${internalId} not found`);
-    }
-    this.uploadCollection.remove(internalId);
-  }
-
-  removeAllFiles() {
-    this.uploadCollection.clearAll();
-  }
-
-  uploadAll = () => {
-    const itemsToUpload = this.uploadCollection.items().filter((id) => {
-      const entry = this.uploadCollection.read(id);
-      return !entry.getValue('isRemoved') && !entry.getValue('isUploading') && !entry.getValue('fileInfo');
-    });
-
-    if (itemsToUpload.length === 0) {
-      return;
-    }
-
-    this.$['*uploadTrigger'] = new Set(itemsToUpload);
-    this.emit(
-      EventType.COMMON_UPLOAD_START,
-      /** @type {import('../types').OutputCollectionState<'uploading'>} */ (this.getOutputCollectionState()),
-    );
-  };
-
-  /** @param {{ captureCamera?: boolean }} options */
-  openSystemDialog(options = {}) {
-    let accept = serializeCsv(mergeFileTypes([this.cfg.accept ?? '', ...(this.cfg.imgOnly ? IMAGE_ACCEPT_LIST : [])]));
-
-    if (this.cfg.accept && !!this.cfg.imgOnly) {
-      console.warn(
-        'There could be a mistake.\n' +
-          'Both `accept` and `imgOnly` parameters are set.\n' +
-          'The value of `accept` will be concatenated with the internal image mime types list.',
-      );
-    }
-    this.fileInput = document.createElement('input');
-    this.fileInput.type = 'file';
-    this.fileInput.multiple = this.cfg.multiple;
-    if (options.captureCamera) {
-      this.fileInput.capture = this.cfg.cameraCapture;
-      this.fileInput.accept = 'image/*';
-    } else {
-      this.fileInput.accept = accept;
-    }
-    this.fileInput.dispatchEvent(new MouseEvent('click'));
-    this.fileInput.onchange = () => {
-      // @ts-ignore TODO: fix this
-      [...this.fileInput['files']].forEach((file) =>
-        this.addFileFromObject(file, { source: options.captureCamera ? UploadSource.CAMERA : UploadSource.LOCAL }),
-      );
-      // To call uploadTrigger UploadList should draw file items first:
-      this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
-      this.setOrAddState('*modalActive', true);
-      // @ts-ignore TODO: fix this
-      this.fileInput['value'] = '';
-      this.fileInput = null;
-    };
-  }
 
-  /** @type {string[]} */
-  get sourceList() {
-    /** @type {string[]} */
-    let list = [];
-    if (this.cfg.sourceList) {
-      list = stringToArray(this.cfg.sourceList);
-    }
-    // @ts-ignore TODO: fix this
-    return list;
-  }
-
-  /** @param {Boolean} [force] */
-  initFlow(force = false) {
-    if (this.uploadCollection.size > 0 && !force) {
-      this.set$({
-        '*currentActivity': ActivityBlock.activities.UPLOAD_LIST,
-      });
-      this.setOrAddState('*modalActive', true);
-    } else {
-      if (this.sourceList?.length === 1) {
-        const srcKey = this.sourceList[0];
-
-        // TODO: We should refactor those handlers
-        if (srcKey === 'local') {
-          this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
-          this?.['openSystemDialog']();
-          return;
+    if (this.has('*modalActive')) {
+      this.sub('*modalActive', (modalActive) => {
+        if (modalActive && !this.$['*currentActivity']) {
+          this.$['*modalActive'] = false;
         }
-
-        /** @type {Set<import('./Block').Block>} */
-        const blocksRegistry = this.$['*blocksRegistry'];
-        /**
-         * @param {import('./Block').Block} block
-         * @returns {block is import('../blocks/SourceBtn/SourceBtn.js').SourceBtn}
-         */
-        const isSourceBtn = (block) => 'type' in block && block.type === srcKey;
-        const sourceBtnBlock = [...blocksRegistry].find(isSourceBtn);
-        // TODO: This is weird that we have this logic inside UI component, we should consider to move it somewhere else
-        sourceBtnBlock?.activate();
-        if (this.$['*currentActivity']) {
-          this.setOrAddState('*modalActive', true);
-        }
-      } else {
-        // Multiple sources case:
-        this.set$({
-          '*currentActivity': ActivityBlock.activities.START_FROM,
-        });
-        this.setOrAddState('*modalActive', true);
-      }
-    }
-  }
-
-  doneFlow() {
-    this.set$({
-      '*currentActivity': this.doneActivity,
-      '*history': this.doneActivity ? [this.doneActivity] : [],
-    });
-    if (!this.$['*currentActivity']) {
-      this.setOrAddState('*modalActive', false);
+      });
     }
   }
 
-  /** @returns {TypedCollection} */
-  get uploadCollection() {
-    return this.$['*uploadCollection'];
-  }
-
   /**
    * @private
    * @param {import('../types').OutputCollectionState} collectionState
@@ -363,10 +147,10 @@ export class UploaderBlock extends ActivityBlock {
     }
     this.$['*groupInfo'] = resp;
     const collectionStateWithGroup = /** @type {import('../types').OutputCollectionState<'success', 'has-group'>} */ (
-      this.getOutputCollectionState()
+      this.api.getOutputCollectionState()
     );
     this.emit(EventType.GROUP_CREATED, collectionStateWithGroup);
-    this.emit(EventType.CHANGE, () => this.getOutputCollectionState(), { debounce: true });
+    this.emit(EventType.CHANGE, () => this.api.getOutputCollectionState(), { debounce: true });
     this.$['*collectionState'] = collectionStateWithGroup;
   }
 
@@ -376,9 +160,9 @@ export class UploaderBlock extends ActivityBlock {
     if (data.length !== this.uploadCollection.size) {
       return;
     }
-    const collectionState = this.getOutputCollectionState();
+    const collectionState = this.api.getOutputCollectionState();
     this.$['*collectionState'] = collectionState;
-    this.emit(EventType.CHANGE, () => this.getOutputCollectionState(), { debounce: true });
+    this.emit(EventType.CHANGE, () => this.api.getOutputCollectionState(), { debounce: true });
 
     if (this.cfg.groupOutput && collectionState.totalCount > 0 && collectionState.status === 'success') {
       this._createGroup(collectionState);
@@ -394,14 +178,12 @@ export class UploaderBlock extends ActivityBlock {
     if (added.size || removed.size) {
       this.$['*groupInfo'] = null;
     }
-    if (this.validationManager) {
-      this.validationManager.runFileValidators();
-      this.validationManager.runCollectionValidators();
-    }
+    this.validationManager.runFileValidators();
+    this.validationManager.runCollectionValidators();
 
     for (const entry of added) {
       if (!entry.getValue('silent')) {
-        this.emit(EventType.FILE_ADDED, this.getOutputItem(entry.uid));
+        this.emit(EventType.FILE_ADDED, this.api.getOutputItem(entry.uid));
       }
     }
 
@@ -416,7 +198,7 @@ export class UploaderBlock extends ActivityBlock {
         uploadProgress: 0,
       });
       URL.revokeObjectURL(entry?.getValue('thumbUrl'));
-      this.emit(EventType.FILE_REMOVED, this.getOutputItem(entry.uid));
+      this.emit(EventType.FILE_REMOVED, this.api.getOutputItem(entry.uid));
     }
 
     this.$['*uploadList'] = entries.map((uid) => {
@@ -447,14 +229,14 @@ export class UploaderBlock extends ActivityBlock {
     entriesToRunValidation.length > 0 &&
       setTimeout(() => {
         // We can't modify entry properties in the same tick, so we need to wait a bit
-        if (this.validationManager) this.validationManager.runFileValidators(entriesToRunValidation);
+        this.validationManager.runFileValidators(entriesToRunValidation);
       });
 
     if (changeMap.uploadProgress) {
       for (const entryId of changeMap.uploadProgress) {
         const { isUploading, silent } = Data.getCtx(entryId).store;
         if (isUploading && !silent) {
-          this.emit(EventType.FILE_UPLOAD_PROGRESS, this.getOutputItem(entryId));
+          this.emit(EventType.FILE_UPLOAD_PROGRESS, this.api.getOutputItem(entryId));
         }
       }
 
@@ -464,7 +246,7 @@ export class UploaderBlock extends ActivityBlock {
       for (const entryId of changeMap.isUploading) {
         const { isUploading, silent } = Data.getCtx(entryId).store;
         if (isUploading && !silent) {
-          this.emit(EventType.FILE_UPLOAD_START, this.getOutputItem(entryId));
+          this.emit(EventType.FILE_UPLOAD_START, this.api.getOutputItem(entryId));
         }
       }
     }
@@ -472,44 +254,50 @@ export class UploaderBlock extends ActivityBlock {
       for (const entryId of changeMap.fileInfo) {
         const { fileInfo, silent } = Data.getCtx(entryId).store;
         if (fileInfo && !silent) {
-          this.emit(EventType.FILE_UPLOAD_SUCCESS, this.getOutputItem(entryId));
+          this.emit(EventType.FILE_UPLOAD_SUCCESS, this.api.getOutputItem(entryId));
         }
       }
       if (this.cfg.cropPreset) {
         this.setInitialCrop();
       }
-      let loadedItems = uploadCollection.findItems((entry) => {
-        return !!entry.getValue('fileInfo');
-      });
-      let errorItems = uploadCollection.findItems((entry) => {
-        return entry.getValue('errors').length > 0;
-      });
-      if (errorItems.length === 0 && uploadCollection.size === loadedItems.length) {
-        this.emit(
-          EventType.COMMON_UPLOAD_SUCCESS,
-          /** @type {import('../types').OutputCollectionState<'success'>} */ (this.getOutputCollectionState()),
-        );
-      }
     }
     if (changeMap.errors) {
       for (const entryId of changeMap.errors) {
         const { errors } = Data.getCtx(entryId).store;
         if (errors.length > 0) {
-          this.emit(EventType.FILE_UPLOAD_FAILED, this.getOutputItem(entryId));
+          this.emit(EventType.FILE_UPLOAD_FAILED, this.api.getOutputItem(entryId));
           this.emit(
             EventType.COMMON_UPLOAD_FAILED,
-            () => /** @type {import('../types').OutputCollectionState<'failed'>} */ (this.getOutputCollectionState()),
+            () =>
+              /** @type {import('../types').OutputCollectionState<'failed'>} */ (this.api.getOutputCollectionState()),
             { debounce: true },
           );
         }
       }
+      const loadedItems = uploadCollection.findItems((entry) => {
+        return !!entry.getValue('fileInfo');
+      });
+      const errorItems = uploadCollection.findItems((entry) => {
+        return entry.getValue('errors').length > 0;
+      });
+      if (
+        uploadCollection.size > 0 &&
+        errorItems.length === 0 &&
+        uploadCollection.size === loadedItems.length &&
+        this.$['*collectionErrors'].length === 0
+      ) {
+        this.emit(
+          EventType.COMMON_UPLOAD_SUCCESS,
+          /** @type {import('../types').OutputCollectionState<'success'>} */ (this.api.getOutputCollectionState()),
+        );
+      }
     }
     if (changeMap.cdnUrl) {
       const uids = [...changeMap.cdnUrl].filter((uid) => {
         return !!this.uploadCollection.read(uid)?.getValue('cdnUrl');
       });
       uids.forEach((uid) => {
-        this.emit(EventType.FILE_URL_CHANGED, this.getOutputItem(uid));
+        this.emit(EventType.FILE_URL_CHANGED, this.api.getOutputItem(uid));
       });
 
       this.$['*groupInfo'] = null;
@@ -535,7 +323,7 @@ export class UploaderBlock extends ActivityBlock {
     this.$['*commonProgress'] = progress;
     this.emit(
       EventType.COMMON_UPLOAD_PROGRESS,
-      /** @type {import('../types').OutputCollectionState<'uploading'>} */ (this.getOutputCollectionState()),
+      /** @type {import('../types').OutputCollectionState<'uploading'>} */ (this.api.getOutputCollectionState()),
     );
   };
 
@@ -584,16 +372,19 @@ export class UploaderBlock extends ActivityBlock {
    * @protected
    */
   async getMetadataFor(entryId) {
-    const configValue = this.cfg.metadata ?? /** @type {import('../types').Metadata} */ (this.$['*uploadMetadata']);
+    const configValue = this.cfg.metadata || undefined;
     if (typeof configValue === 'function') {
-      const outputFileEntry = this.getOutputItem(entryId);
+      const outputFileEntry = this.api.getOutputItem(entryId);
       const metadata = await configValue(outputFileEntry);
       return metadata;
     }
     return configValue;
   }
 
-  /** @returns {Promise<import('@uploadcare/upload-client').FileFromOptions>} */
+  /**
+   * @returns {Promise<import('@uploadcare/upload-client').FileFromOptions>}
+   * @protected
+   */
   async getUploadClientOptions() {
     /** @type {SecureUploadsManager} */
     const secureUploadsManager = this.$['*secureUploadsManager'];
@@ -620,69 +411,12 @@ export class UploaderBlock extends ActivityBlock {
     return options;
   }
 
-  /**
-   * @template {import('../types').OutputFileStatus} TStatus
-   * @param {string} entryId
-   * @returns {import('../types/exported.js').OutputFileEntry<TStatus>}
-   */
-  getOutputItem(entryId) {
-    const uploadEntryData = /** @type {import('./uploadEntrySchema.js').UploadEntry} */ (Data.getCtx(entryId).store);
-
-    /** @type {import('@uploadcare/upload-client').UploadcareFile?} */
-    const fileInfo = uploadEntryData.fileInfo;
-
-    /** @type {import('../types').OutputFileEntry['status']} */
-    let status = uploadEntryData.isRemoved
-      ? 'removed'
-      : uploadEntryData.errors.length > 0
-        ? 'failed'
-        : !!uploadEntryData.fileInfo
-          ? 'success'
-          : uploadEntryData.isUploading
-            ? 'uploading'
-            : 'idle';
-
-    /** @type {unknown} */
-    const outputItem = {
-      uuid: fileInfo?.uuid ?? uploadEntryData.uuid ?? null,
-      internalId: entryId,
-      name: fileInfo?.originalFilename ?? uploadEntryData.fileName,
-      size: fileInfo?.size ?? uploadEntryData.fileSize,
-      isImage: fileInfo?.isImage ?? uploadEntryData.isImage,
-      mimeType: fileInfo?.mimeType ?? uploadEntryData.mimeType,
-      file: uploadEntryData.file,
-      externalUrl: uploadEntryData.externalUrl,
-      cdnUrlModifiers: uploadEntryData.cdnUrlModifiers,
-      cdnUrl: uploadEntryData.cdnUrl ?? fileInfo?.cdnUrl ?? null,
-      fullPath: uploadEntryData.fullPath,
-      uploadProgress: uploadEntryData.uploadProgress,
-      fileInfo: fileInfo ?? null,
-      metadata: uploadEntryData.metadata ?? fileInfo?.metadata ?? null,
-      isSuccess: status === 'success',
-      isUploading: status === 'uploading',
-      isFailed: status === 'failed',
-      isRemoved: status === 'removed',
-      errors: /** @type {import('../types/exported.js').OutputFileEntry['errors']} */ (uploadEntryData.errors),
-      status,
-    };
-
-    return /** @type {import('../types/exported.js').OutputFileEntry<TStatus>} */ (outputItem);
-  }
-
-  /**
-   * @param {(item: import('./TypedData.js').TypedData) => Boolean} [checkFn]
-   * @returns {import('../types/exported.js').OutputFileEntry[]}
-   */
-  getOutputData(checkFn) {
-    const entriesIds = checkFn ? this.uploadCollection.findItems(checkFn) : this.uploadCollection.items();
-    const data = entriesIds.map((itemId) => this.getOutputItem(itemId));
+  /** @returns {import('../types/exported.js').OutputFileEntry[]} */
+  getOutputData() {
+    const entriesIds = this.uploadCollection.items();
+    const data = entriesIds.map((itemId) => this.api.getOutputItem(itemId));
     return data;
   }
-
-  /** @template {import('../types').OutputCollectionStatus} TStatus */
-  getOutputCollectionState() {
-    return /** @type {ReturnType<typeof buildOutputCollectionState<TStatus>>} */ (buildOutputCollectionState(this));
-  }
 }
 
 /** @enum {String} */
diff --git a/abstract/UploaderPublicApi.js b/abstract/UploaderPublicApi.js
new file mode 100644
index 000000000..daef7e8a9
--- /dev/null
+++ b/abstract/UploaderPublicApi.js
@@ -0,0 +1,316 @@
+// @ts-check
+import { ActivityBlock } from './ActivityBlock.js';
+
+import { Data } from '@symbiotejs/symbiote';
+import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
+import { UploadSource } from '../blocks/utils/UploadSource.js';
+import { serializeCsv } from '../blocks/utils/comma-separated.js';
+import { IMAGE_ACCEPT_LIST, fileIsImage, mergeFileTypes } from '../utils/fileTypes.js';
+import { parseCdnUrl } from '../utils/parseCdnUrl.js';
+import { buildOutputCollectionState } from './buildOutputCollectionState.js';
+import { stringToArray } from '../utils/stringToArray.js';
+
+export class UploaderPublicApi {
+  /**
+   * @private
+   * @type {import('./UploaderBlock.js').UploaderBlock}
+   */
+  _ctx;
+
+  /** @param {import('./UploaderBlock.js').UploaderBlock} ctx */
+  constructor(ctx) {
+    this._ctx = ctx;
+  }
+
+  /** @private */
+  get _uploadCollection() {
+    return this._ctx.uploadCollection;
+  }
+
+  get cfg() {
+    return this._ctx.cfg;
+  }
+
+  get l10n() {
+    return this._ctx.l10n.bind(this._ctx);
+  }
+
+  /**
+   * TODO: Probably we should not allow user to override `source` property
+   *
+   * @param {string} url
+   * @param {{ silent?: boolean; fileName?: string; source?: string }} [options]
+   * @returns {import('../types').OutputFileEntry<'idle'>}
+   */
+  addFileFromUrl = (url, { silent, fileName, source } = {}) => {
+    const internalId = this._uploadCollection.add({
+      externalUrl: url,
+      fileName: fileName ?? null,
+      silent: silent ?? false,
+      source: source ?? UploadSource.API,
+    });
+    return this.getOutputItem(internalId);
+  };
+
+  /**
+   * @param {string} uuid
+   * @param {{ silent?: boolean; fileName?: string; source?: string }} [options]
+   * @returns {import('../types').OutputFileEntry<'idle'>}
+   */
+  addFileFromUuid = (uuid, { silent, fileName, source } = {}) => {
+    const internalId = this._uploadCollection.add({
+      uuid,
+      fileName: fileName ?? null,
+      silent: silent ?? false,
+      source: source ?? UploadSource.API,
+    });
+    return this.getOutputItem(internalId);
+  };
+
+  /**
+   * @param {string} cdnUrl
+   * @param {{ silent?: boolean; fileName?: string; source?: string }} [options]
+   * @returns {import('../types').OutputFileEntry<'idle'>}
+   */
+  addFileFromCdnUrl = (cdnUrl, { silent, fileName, source } = {}) => {
+    const parsedCdnUrl = parseCdnUrl({ url: cdnUrl, cdnBase: this.cfg.cdnCname });
+    if (!parsedCdnUrl) {
+      throw new Error('Invalid CDN URL');
+    }
+    const internalId = this._uploadCollection.add({
+      uuid: parsedCdnUrl.uuid,
+      cdnUrl,
+      cdnUrlModifiers: parsedCdnUrl.cdnUrlModifiers,
+      fileName: fileName ?? parsedCdnUrl.filename ?? null,
+      silent: silent ?? false,
+      source: source ?? UploadSource.API,
+    });
+    return this.getOutputItem(internalId);
+  };
+
+  /**
+   * @param {File} file
+   * @param {{ silent?: boolean; fileName?: string; source?: string; fullPath?: string }} [options]
+   * @returns {import('../types').OutputFileEntry<'idle'>}
+   */
+  addFileFromObject = (file, { silent, fileName, source, fullPath } = {}) => {
+    const internalId = this._uploadCollection.add({
+      file,
+      isImage: fileIsImage(file),
+      mimeType: file.type,
+      fileName: fileName ?? file.name,
+      fileSize: file.size,
+      silent: silent ?? false,
+      source: source ?? UploadSource.API,
+      fullPath: fullPath ?? null,
+    });
+    return this.getOutputItem(internalId);
+  };
+
+  /** @param {string} internalId */
+  removeFileByInternalId = (internalId) => {
+    if (!this._uploadCollection.read(internalId)) {
+      throw new Error(`File with internalId ${internalId} not found`);
+    }
+    this._uploadCollection.remove(internalId);
+  };
+
+  removeAllFiles() {
+    this._uploadCollection.clearAll();
+  }
+
+  uploadAll = () => {
+    const itemsToUpload = this._uploadCollection.items().filter((id) => {
+      const entry = this._uploadCollection.read(id);
+      return !entry.getValue('isRemoved') && !entry.getValue('isUploading') && !entry.getValue('fileInfo');
+    });
+
+    if (itemsToUpload.length === 0) {
+      return;
+    }
+
+    this._ctx.$['*uploadTrigger'] = new Set(itemsToUpload);
+    this._ctx.emit(
+      EventType.COMMON_UPLOAD_START,
+      /** @type {import('../types').OutputCollectionState<'uploading'>} */ (this.getOutputCollectionState()),
+    );
+  };
+
+  /** @param {{ captureCamera?: boolean }} options */
+  openSystemDialog = (options = {}) => {
+    let accept = serializeCsv(mergeFileTypes([this.cfg.accept ?? '', ...(this.cfg.imgOnly ? IMAGE_ACCEPT_LIST : [])]));
+
+    if (this.cfg.accept && !!this.cfg.imgOnly) {
+      console.warn(
+        'There could be a mistake.\n' +
+          'Both `accept` and `imgOnly` parameters are set.\n' +
+          'The value of `accept` will be concatenated with the internal image mime types list.',
+      );
+    }
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.multiple = this.cfg.multiple;
+    if (options.captureCamera) {
+      fileInput.capture = this.cfg.cameraCapture;
+      fileInput.accept = 'image/*';
+    } else {
+      fileInput.accept = accept;
+    }
+    fileInput.dispatchEvent(new MouseEvent('click'));
+    fileInput.onchange = () => {
+      // @ts-ignore TODO: fix this
+      [...fileInput['files']].forEach((file) =>
+        this.addFileFromObject(file, { source: options.captureCamera ? UploadSource.CAMERA : UploadSource.LOCAL }),
+      );
+      // To call uploadTrigger UploadList should draw file items first:
+      this._ctx.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+      this._ctx.setOrAddState('*modalActive', true);
+      // @ts-ignore TODO: fix this
+      fileInput['value'] = '';
+    };
+  };
+
+  /**
+   * @template {import('../types').OutputFileStatus} TStatus
+   * @param {string} entryId
+   * @returns {import('../types/exported.js').OutputFileEntry<TStatus>}
+   */
+  getOutputItem = (entryId) => {
+    const uploadEntryData = /** @type {import('./uploadEntrySchema.js').UploadEntry} */ (Data.getCtx(entryId).store);
+
+    /** @type {import('@uploadcare/upload-client').UploadcareFile?} */
+    const fileInfo = uploadEntryData.fileInfo;
+
+    /** @type {import('../types').OutputFileEntry['status']} */
+    let status = uploadEntryData.isRemoved
+      ? 'removed'
+      : uploadEntryData.errors.length > 0
+        ? 'failed'
+        : !!uploadEntryData.fileInfo
+          ? 'success'
+          : uploadEntryData.isUploading
+            ? 'uploading'
+            : 'idle';
+
+    /** @type {unknown} */
+    const outputItem = {
+      uuid: fileInfo?.uuid ?? uploadEntryData.uuid ?? null,
+      internalId: entryId,
+      name: fileInfo?.originalFilename ?? uploadEntryData.fileName,
+      size: fileInfo?.size ?? uploadEntryData.fileSize,
+      isImage: fileInfo?.isImage ?? uploadEntryData.isImage,
+      mimeType: fileInfo?.mimeType ?? uploadEntryData.mimeType,
+      file: uploadEntryData.file,
+      externalUrl: uploadEntryData.externalUrl,
+      cdnUrlModifiers: uploadEntryData.cdnUrlModifiers,
+      cdnUrl: uploadEntryData.cdnUrl ?? fileInfo?.cdnUrl ?? null,
+      fullPath: uploadEntryData.fullPath,
+      uploadProgress: uploadEntryData.uploadProgress,
+      fileInfo: fileInfo ?? null,
+      metadata: uploadEntryData.metadata ?? fileInfo?.metadata ?? null,
+      isSuccess: status === 'success',
+      isUploading: status === 'uploading',
+      isFailed: status === 'failed',
+      isRemoved: status === 'removed',
+      errors: /** @type {import('../types/exported.js').OutputFileEntry['errors']} */ (uploadEntryData.errors),
+      status,
+    };
+
+    return /** @type {import('../types/exported.js').OutputFileEntry<TStatus>} */ (outputItem);
+  };
+
+  /** @template {import('../types').OutputCollectionStatus} TStatus */
+  getOutputCollectionState = () => {
+    return /** @type {ReturnType<typeof buildOutputCollectionState<TStatus>>} */ (
+      buildOutputCollectionState(this._ctx)
+    );
+  };
+
+  /** @param {Boolean} [force] */
+  initFlow = (force = false) => {
+    if (this._uploadCollection.size > 0 && !force) {
+      this._ctx.set$({
+        '*currentActivity': ActivityBlock.activities.UPLOAD_LIST,
+      });
+      this._ctx.setOrAddState('*modalActive', true);
+    } else {
+      if (this._sourceList?.length === 1) {
+        const srcKey = this._sourceList[0];
+
+        // TODO: We should refactor those handlers
+        if (srcKey === 'local') {
+          this._ctx.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+          this.openSystemDialog();
+          return;
+        }
+
+        /** @type {Set<import('./Block').Block>} */
+        const blocksRegistry = this._ctx.$['*blocksRegistry'];
+        /**
+         * @param {import('./Block').Block} block
+         * @returns {block is import('../blocks/SourceBtn/SourceBtn.js').SourceBtn}
+         */
+        const isSourceBtn = (block) => 'type' in block && block.type === srcKey;
+        const sourceBtnBlock = [...blocksRegistry].find(isSourceBtn);
+        // TODO: This is weird that we have this logic inside UI component, we should consider to move it somewhere else
+        sourceBtnBlock?.activate();
+        if (this._ctx.$['*currentActivity']) {
+          this._ctx.setOrAddState('*modalActive', true);
+        }
+      } else {
+        // Multiple sources case:
+        this._ctx.set$({
+          '*currentActivity': ActivityBlock.activities.START_FROM,
+        });
+        this._ctx.setOrAddState('*modalActive', true);
+      }
+    }
+  };
+
+  doneFlow = () => {
+    this._ctx.set$({
+      '*currentActivity': this._ctx.doneActivity,
+      '*history': this._ctx.doneActivity ? [this._ctx.doneActivity] : [],
+    });
+    if (!this._ctx.$['*currentActivity']) {
+      this._ctx.setOrAddState('*modalActive', false);
+    }
+  };
+
+  /**
+   * @param {import('./ActivityBlock.js').ActivityType} activityType
+   * @param {import('../blocks/ExternalSource/ExternalSource.js').ActivityParams | {}} [params]
+   */
+  setCurrentActivity = (activityType, params = {}) => {
+    if (this._ctx.hasBlockInCtx((b) => b.activityType === activityType)) {
+      this._ctx.set$({
+        '*currentActivityParams': params,
+        '*currentActivity': activityType,
+      });
+      return;
+    }
+    console.warn(`Activity type "${activityType}" not found in the context`);
+  };
+
+  /** @param {boolean} opened */
+  setModalState = (opened) => {
+    if (opened && !this._ctx.$['*currentActivity']) {
+      console.warn(`Can't open modal without current activity. Please use "setCurrentActivity" method first.`);
+      return;
+    }
+    this._ctx.setOrAddState('*modalActive', opened);
+  };
+
+  /**
+   * @private
+   * @type {string[]}
+   */
+  get _sourceList() {
+    /** @type {string[]} */
+    let list = [];
+    if (this.cfg.sourceList) {
+      list = stringToArray(this.cfg.sourceList);
+    }
+    return list;
+  }
+}
diff --git a/abstract/ValidationManager.js b/abstract/ValidationManager.js
index 045573bfa..0574a15dd 100644
--- a/abstract/ValidationManager.js
+++ b/abstract/ValidationManager.js
@@ -11,7 +11,7 @@ import { validateMultiple, validateCollectionUploadError } from '../utils/valida
 /**
  * @typedef {(
  *   outputEntry: import('../types').OutputFileEntry,
- *   ctx: import('./UploaderBlock.js').UploaderBlock,
+ *   api: import('./UploaderPublicApi.js').UploaderPublicApi,
  * ) => undefined | import('../types').OutputErrorFile} FuncFileValidator
  */
 
@@ -22,7 +22,7 @@ import { validateMultiple, validateCollectionUploadError } from '../utils/valida
  *       import('../types').OutputCollectionStatus
  *     >
  *   >,
- *   ctx: import('./UploaderBlock.js').UploaderBlock,
+ *   api: import('./UploaderPublicApi.js').UploaderPublicApi,
  * ) => undefined | import('../types').OutputErrorCollection} FuncCollectionValidator
  */
 
@@ -76,7 +76,7 @@ export class ValidationManager {
   }
 
   runCollectionValidators() {
-    const collection = this._blockInstance.getOutputCollectionState();
+    const collection = this._blockInstance.api.getOutputCollectionState();
     const errors = [];
 
     for (const validator of [
@@ -84,7 +84,7 @@ export class ValidationManager {
       ...this._addCustomTypeToValidators(this._blockInstance.cfg.collectionValidators),
     ]) {
       try {
-        const errorOrErrors = validator(collection, this._blockInstance);
+        const errorOrErrors = validator(collection, this._blockInstance.api);
         if (!errorOrErrors) {
           continue;
         }
@@ -107,7 +107,7 @@ export class ValidationManager {
         EventType.COMMON_UPLOAD_FAILED,
         () =>
           /** @type {import('../types').OutputCollectionState<'failed'>} */ (
-            this._blockInstance.getOutputCollectionState()
+            this._blockInstance.api.getOutputCollectionState()
           ),
         { debounce: true },
       );
@@ -119,7 +119,7 @@ export class ValidationManager {
    * @param {import('./TypedData.js').TypedData} entry
    */
   _runFileValidatorsForEntry(entry) {
-    const outputEntry = this._blockInstance.getOutputItem(entry.uid);
+    const outputEntry = this._blockInstance.api.getOutputItem(entry.uid);
     const errors = [];
 
     for (const validator of [
@@ -127,7 +127,7 @@ export class ValidationManager {
       ...this._addCustomTypeToValidators(this._blockInstance.cfg.fileValidators),
     ]) {
       try {
-        const error = validator(outputEntry, this._blockInstance);
+        const error = validator(outputEntry, this._blockInstance.api);
         if (!error) {
           continue;
         }
diff --git a/abstract/a11y.js b/abstract/a11y.js
new file mode 100644
index 000000000..f29f1dce6
--- /dev/null
+++ b/abstract/a11y.js
@@ -0,0 +1,118 @@
+// @ts-check
+import { startKeyUX, hiddenKeyUX, jumpKeyUX, focusGroupKeyUX, pressKeyUX } from 'keyux';
+
+/**
+ * MinimalWindow interface is not exported by keyux, so we import it here using tricky way.
+ *
+ * @typedef {Parameters<import('keyux').KeyUXModule>[0]} MinimalWindow
+ */
+
+/**
+ * This is global window wrapper that allows to scope event listeners to a specific part of the DOM.
+ *
+ * It is used to scope the key UX to the widget.
+ *
+ * @implements {MinimalWindow}
+ */
+class ScopedMinimalWindow {
+  /**
+   * @private
+   * @type {Map<Function, (event: Event) => void>}
+   */
+  _listeners = new Map();
+
+  /**
+   * @private
+   * @type {Node[]}
+   */
+  _scope = [];
+
+  /**
+   * @param {'keydown' | 'keyup'} type
+   * @param {(event: Event) => void} listener
+   */
+  addEventListener(type, listener) {
+    /** @param {Event} e */
+    const wrappedListener = (e) => {
+      const target = e.target;
+      if (!target) return;
+      if (this._scope.some((el) => el === e.target || el.contains(/** @type {Node} */ (target)))) {
+        listener(e);
+      }
+    };
+    this._listeners.set(listener, wrappedListener);
+    window.addEventListener(type, wrappedListener);
+  }
+
+  /**
+   * @param {'keydown' | 'keyup'} type
+   * @param {(event: {}) => void} listener
+   */
+  removeEventListener(type, listener) {
+    const wrappedListener = this._listeners.get(listener);
+    if (wrappedListener) {
+      window.removeEventListener(type, wrappedListener);
+    }
+    this._listeners.delete(listener);
+  }
+
+  get CustomEvent() {
+    return window.CustomEvent;
+  }
+
+  get document() {
+    return window.document;
+  }
+
+  get navigator() {
+    return window.navigator;
+  }
+
+  /** @param {Node} scope */
+  registerScope(scope) {
+    this._scope.push(scope);
+  }
+
+  destroy() {
+    this._scope = [];
+    this._listeners.forEach((listener, originalListener) => {
+      window.removeEventListener('keydown', listener);
+      window.removeEventListener('keyup', listener);
+      this._listeners.delete(originalListener);
+    });
+  }
+}
+
+export class A11y {
+  /**
+   * @private
+   * @type {(() => void) | undefined}
+   */
+  _destroyKeyUX;
+
+  /**
+   * @private
+   * @type {ScopedMinimalWindow}
+   */
+  _scopedWindow;
+
+  constructor() {
+    this._scopedWindow = new ScopedMinimalWindow();
+    this._destroyKeyUX = startKeyUX(this._scopedWindow, [
+      focusGroupKeyUX(),
+      pressKeyUX('is-pressed'),
+      jumpKeyUX(),
+      hiddenKeyUX(),
+    ]);
+  }
+
+  /** @param {import('./Block.js').Block} scope */
+  registerBlock(scope) {
+    this._scopedWindow.registerScope(scope);
+  }
+
+  destroy() {
+    this._destroyKeyUX?.();
+    this._scopedWindow.destroy();
+  }
+}
diff --git a/abstract/buildOutputCollectionState.js b/abstract/buildOutputCollectionState.js
index f49b5ccba..9ae9f4787 100644
--- a/abstract/buildOutputCollectionState.js
+++ b/abstract/buildOutputCollectionState.js
@@ -75,7 +75,11 @@ export function buildOutputCollectionState(uploaderBlock) {
     },
 
     isSuccess: () => {
-      return state.errors.length === 0 && state.successEntries.length === state.allEntries.length;
+      return (
+        state.allEntries.length > 0 &&
+        state.errors.length === 0 &&
+        state.successEntries.length === state.allEntries.length
+      );
     },
 
     isUploading: () => {
diff --git a/blocks/ActivityHeader/activity-header.css b/blocks/ActivityHeader/activity-header.css
index 50a236602..94f19bf92 100644
--- a/blocks/ActivityHeader/activity-header.css
+++ b/blocks/ActivityHeader/activity-header.css
@@ -1,34 +1,14 @@
 lr-activity-header {
   display: flex;
-  gap: var(--gap-mid);
   justify-content: space-between;
-  padding: var(--gap-mid);
-  color: var(--clr-txt);
+  gap: var(--uc-padding);
+  padding: var(--uc-padding);
+  color: var(--uc-foreground);
   font-weight: 500;
   font-size: 1em;
-  line-height: var(--ui-size);
-}
-
-lr-activity-header lr-icon {
-  height: var(--ui-size);
 }
 
 lr-activity-header > * {
   display: flex;
   align-items: center;
 }
-
-lr-activity-header button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--clr-txt-mid);
-}
-
-lr-activity-header button:hover {
-  background-color: var(--clr-background);
-}
-
-lr-activity-header button:active {
-  background-color: var(--clr-background-dark);
-}
diff --git a/blocks/CameraSource/CameraSource.js b/blocks/CameraSource/CameraSource.js
index af01923aa..5ce68f2e3 100644
--- a/blocks/CameraSource/CameraSource.js
+++ b/blocks/CameraSource/CameraSource.js
@@ -66,7 +66,7 @@ export class CameraSource extends UploaderBlock {
    * @param {'granted' | 'denied' | 'prompt'} state
    */
   _setPermissionsState = debounce((state) => {
-    this.classList.toggle('initialized', state === 'granted');
+    this.classList.toggle('uc-initialized', state === 'granted');
 
     if (state === 'granted') {
       this.set$({
@@ -171,7 +171,7 @@ export class CameraSource extends UploaderBlock {
         lastModified: date,
         type: format,
       });
-      this.addFileFromObject(file, { source: UploadSource.CAMERA });
+      this.api.addFileFromObject(file, { source: UploadSource.CAMERA });
       this.set$({
         '*currentActivity': ActivityBlock.activities.UPLOAD_LIST,
       });
@@ -215,7 +215,7 @@ export class CameraSource extends UploaderBlock {
 
 CameraSource.template = /* HTML */ `
   <lr-activity-header>
-    <button type="button" class="mini-btn" set="onclick: *historyBack">
+    <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
       <lr-icon name="back"></lr-icon>
     </button>
     <div set="@hidden: !cameraSelectHidden">
@@ -223,22 +223,22 @@ CameraSource.template = /* HTML */ `
       <span l10n="caption-camera"></span>
     </div>
     <lr-select
-      class="camera-select"
+      class="uc-camera-select"
       set="$.options: cameraSelectOptions; @hidden: cameraSelectHidden; onchange: onCameraSelectChange"
     >
     </lr-select>
-    <button type="button" class="mini-btn close-btn" set="onclick: *closeModal">
+    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
       <lr-icon name="close"></lr-icon>
     </button>
   </lr-activity-header>
-  <div class="content">
+  <div class="uc-content">
     <video
       autoplay
       playsinline
       set="srcObject: video; style.transform: videoTransformCss; @hidden: videoHidden"
       ref="video"
     ></video>
-    <div class="message-box" set="@hidden: messageHidden">
+    <div class="uc-message-box" set="@hidden: messageHidden">
       <span l10n="l10nMessage"></span>
       <button
         type="button"
@@ -246,7 +246,7 @@ CameraSource.template = /* HTML */ `
         l10n="camera-permissions-request"
       ></button>
     </div>
-    <button type="button" class="shot-btn" set="onclick: onShot; @disabled: shotBtnDisabled">
+    <button type="button" class="uc-shot-btn" set="onclick: onShot; @disabled: shotBtnDisabled">
       <lr-icon name="camera"></lr-icon>
     </button>
   </div>
diff --git a/blocks/CameraSource/camera-source.css b/blocks/CameraSource/camera-source.css
index 15353cd75..a8b3ddaaf 100644
--- a/blocks/CameraSource/camera-source.css
+++ b/blocks/CameraSource/camera-source.css
@@ -6,23 +6,23 @@ lr-camera-source {
   height: 100%;
   max-height: 100%;
   overflow: hidden;
-  background-color: var(--clr-background-light);
-  border-radius: var(--border-radius-element);
+  background-color: var(--uc-background);
+  border-radius: var(--uc-radius);
 }
 
-lr-modal lr-camera-source {
-  width: min(calc(var(--modal-max-w) - var(--gap-mid) * 2), calc(100vw - var(--gap-mid) * 2));
+[lr-modal] lr-camera-source {
+  width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
   height: 100vh;
   max-height: var(--modal-max-content-height);
 }
 
-lr-camera-source.initialized {
+lr-camera-source.uc-initialized {
   height: max-content;
 }
 
 @media only screen and (max-width: 430px) {
   lr-camera-source {
-    width: calc(100vw - var(--gap-mid) * 2);
+    width: calc(100vw - var(--uc-padding) * 2);
     height: var(--modal-content-height-fill, 100%);
   }
 }
@@ -33,74 +33,75 @@ lr-camera-source video {
   max-height: 100%;
   object-fit: contain;
   object-position: center center;
-  background-color: var(--clr-background-dark);
-  border-radius: var(--border-radius-element);
+  background-color: var(--uc-muted);
+  border-radius: var(--uc-radius);
 }
 
-lr-camera-source .toolbar {
+lr-camera-source .uc-toolbar {
   position: absolute;
   bottom: 0;
   display: flex;
   justify-content: space-between;
   width: 100%;
-  padding: var(--gap-mid);
-  background-color: var(--clr-background-light);
+  padding: var(--uc-padding);
+  background-color: var(--uc-background);
 }
 
-lr-camera-source .content {
+lr-camera-source .uc-content {
   display: flex;
   flex: 1;
   justify-content: center;
   width: 100%;
-  padding: var(--gap-mid);
+  padding: var(--uc-padding);
   padding-top: 0;
   overflow: hidden;
 }
 
-lr-camera-source .message-box {
-  --padding: calc(var(--gap-max) * 2);
-
+lr-camera-source .uc-message-box {
   display: flex;
   flex-direction: column;
-  grid-gap: var(--gap-max);
+  grid-gap: 40px;
   align-items: center;
   justify-content: center;
-  padding: var(--padding) var(--padding) 0 var(--padding);
-  color: var(--clr-txt);
+  padding: 40px 40px 0;
+  color: var(--uc-foreground);
 }
 
-lr-camera-source .message-box button {
-  color: var(--clr-btn-txt-primary);
-  background-color: var(--clr-btn-bgr-primary);
+lr-camera-source .uc-message-box button {
+  color: var(--uc-primary-foreground);
+  background-color: var(--uc-primary);
 }
 
-lr-camera-source .shot-btn {
+lr-camera-source .uc-shot-btn {
   position: absolute;
-  bottom: var(--gap-max);
-  width: calc(var(--ui-size) * 1.8);
-  height: calc(var(--ui-size) * 1.8);
-  color: var(--clr-background-light);
-  background-color: var(--clr-txt);
+  bottom: 20px;
+  width: 58px;
+  height: 58px;
+  color: var(--uc-background);
+  background-color: var(--uc-foreground);
   border-radius: 50%;
   opacity: 0.85;
-  transition: var(--transition-duration) ease;
+  transition:
+    bottom var(--uc-transition),
+    opacity var(--uc-transition),
+    transform var(--uc-transition);
 }
 
-lr-camera-source .shot-btn:hover {
+lr-camera-source .uc-shot-btn:hover {
   transform: scale(1.05);
   opacity: 1;
 }
 
-lr-camera-source .shot-btn:active {
-  background-color: var(--clr-txt-mid);
+lr-camera-source .uc-shot-btn:active {
+  transform: scale(1);
   opacity: 1;
 }
 
-lr-camera-source .shot-btn[disabled] {
-  bottom: calc(var(--gap-max) * -1 - var(--gap-mid) - var(--ui-size) * 2);
+lr-camera-source .uc-shot-btn[disabled] {
+  bottom: -80px;
 }
 
-lr-camera-source .shot-btn lr-icon svg {
-  width: calc(var(--ui-size) / 1.5);
-  height: calc(var(--ui-size) / 1.5);
+lr-camera-source .uc-shot-btn lr-icon svg {
+  width: 20px;
+  height: 20px;
 }
diff --git a/blocks/CloudImageEditor/src/CloudImageEditorBlock.js b/blocks/CloudImageEditor/src/CloudImageEditorBlock.js
index 036b74e51..2f824abe5 100644
--- a/blocks/CloudImageEditor/src/CloudImageEditorBlock.js
+++ b/blocks/CloudImageEditor/src/CloudImageEditorBlock.js
@@ -19,7 +19,7 @@ import { TabId } from './toolbar-constants.js';
 
 export class CloudImageEditorBlock extends Block {
   ctxOwner = true;
-  static className = 'cloud-image-editor';
+  static styleAttrs = ['lr-cloud-image-editor'];
 
   constructor() {
     super();
@@ -173,13 +173,13 @@ export class CloudImageEditorBlock extends Block {
     );
 
     this.sub('*tabId', (tabId) => {
-      this.ref['img-el'].className = classNames('image', {
-        image_hidden_to_cropper: tabId === TabId.CROP,
-        image_hidden_effects: tabId !== TabId.CROP,
+      this.ref['img-el'].className = classNames('uc-image', {
+        'uc-image_hidden_to_cropper': tabId === TabId.CROP,
+        'uc-image_hidden_effects': tabId !== TabId.CROP,
       });
     });
 
-    this.classList.add('editor_ON');
+    this.classList.add('uc-editor_ON');
 
     this.sub('*networkProblems', (networkProblems) => {
       this.$['presence.networkProblems'] = networkProblems;
diff --git a/blocks/CloudImageEditor/src/CropFrame.js b/blocks/CloudImageEditor/src/CropFrame.js
index 26e483216..334afd647 100644
--- a/blocks/CloudImageEditor/src/CropFrame.js
+++ b/blocks/CloudImageEditor/src/CropFrame.js
@@ -187,9 +187,9 @@ export class CropFrame extends Block {
       let disableThumb = this._shouldThumbBeDisabled(direction);
       groupNode.setAttribute(
         'class',
-        classNames('thumb', {
-          'thumb--hidden': disableThumb,
-          'thumb--visible': !disableThumb,
+        classNames('uc-thumb', {
+          'uc-thumb--hidden': disableThumb,
+          'uc-thumb--visible': !disableThumb,
         }),
       );
     }
@@ -220,7 +220,7 @@ export class CropFrame extends Block {
       for (let j = 0; j < 3; j++) {
         let direction = /** @type {import('./types.js').Direction} */ (`${['n', '', 's'][i]}${['w', '', 'e'][j]}`);
         let groupNode = createSvgNode('g');
-        groupNode.classList.add('thumb');
+        groupNode.classList.add('uc-thumb');
         groupNode.setAttribute('with-effects', '');
         let interactionNode = createSvgNode('rect', {
           fill: 'transparent',
@@ -256,7 +256,7 @@ export class CropFrame extends Block {
       width: '100%',
       height: '100%',
       fill: 'none',
-      stroke: '#000000',
+      stroke: 'currentColor',
       'stroke-width': GUIDE_STROKE_WIDTH,
       'stroke-opacity': 0.5,
     });
@@ -268,7 +268,7 @@ export class CropFrame extends Block {
         y1: `0%`,
         x2: `${GUIDE_THIRD * i}%`,
         y2: `100%`,
-        stroke: '#000000',
+        stroke: 'currentColor',
         'stroke-width': GUIDE_STROKE_WIDTH,
         'stroke-opacity': 0.3,
       });
@@ -281,14 +281,14 @@ export class CropFrame extends Block {
         y1: `${GUIDE_THIRD * i}%`,
         x2: `100%`,
         y2: `${GUIDE_THIRD * i}%`,
-        stroke: '#000000',
+        stroke: 'currentColor',
         'stroke-width': GUIDE_STROKE_WIDTH,
         'stroke-opacity': 0.3,
       });
       svg.appendChild(line);
     }
 
-    svg.classList.add('guides', 'guides--semi-hidden');
+    svg.classList.add('uc-guides', 'uc-guides--semi-hidden');
 
     return svg;
   }
@@ -452,9 +452,9 @@ export class CropFrame extends Block {
       .forEach((groupNode) => {
         groupNode.setAttribute(
           'class',
-          classNames('thumb', {
-            'thumb--hidden': !visible,
-            'thumb--visible': visible,
+          classNames('uc-thumb', {
+            'uc-thumb--hidden': !visible,
+            'uc-thumb--visible': visible,
           }),
         );
       });
@@ -488,9 +488,9 @@ export class CropFrame extends Block {
       this._frameGuides.setAttribute(
         'class',
         classNames({
-          'guides--hidden': this._guidesHidden,
-          'guides--visible': !this._guidesHidden && dragging,
-          'guides--semi-hidden': !this._guidesHidden && !dragging,
+          'uc-guides--hidden': this._guidesHidden,
+          'uc-guides--visible': !this._guidesHidden && dragging,
+          'uc-guides--semi-hidden': !this._guidesHidden && !dragging,
         }),
       );
     });
@@ -508,4 +508,4 @@ export class CropFrame extends Block {
   }
 }
 
-CropFrame.template = /* HTML */ ` <svg class="svg" ref="svg-el" xmlns="http://www.w3.org/2000/svg"></svg> `;
+CropFrame.template = /* HTML */ ` <svg class="uc-svg" ref="svg-el" xmlns="http://www.w3.org/2000/svg"></svg> `;
diff --git a/blocks/CloudImageEditor/src/EditorButtonControl.js b/blocks/CloudImageEditor/src/EditorButtonControl.js
index e8cf27665..82ecff6f5 100644
--- a/blocks/CloudImageEditor/src/EditorButtonControl.js
+++ b/blocks/CloudImageEditor/src/EditorButtonControl.js
@@ -16,11 +16,6 @@ export class EditorButtonControl extends Block {
     this._titleEl = this.ref['title-el'];
     this._iconEl = this.ref['icon-el'];
 
-    this.setAttribute('role', 'button');
-    if (this.tabIndex === -1) {
-      this.tabIndex = 0;
-    }
-
     this.sub('title', (title) => {
       let titleEl = this._titleEl;
       if (titleEl) {
@@ -30,8 +25,8 @@ export class EditorButtonControl extends Block {
 
     this.sub('active', (active) => {
       this.className = classNames({
-        active: active,
-        not_active: !active,
+        'uc-active': active,
+        'uc-not_active': !active,
       });
     });
 
@@ -42,7 +37,8 @@ export class EditorButtonControl extends Block {
 }
 
 EditorButtonControl.template = /* HTML */ `
-  <div class="before"></div>
-  <lr-icon set="@name: icon;"></lr-icon>
-  <div class="title" ref="title-el">{{title}}</div>
+  <button type="button" role="option">
+    <lr-icon set="@name: icon;"></lr-icon>
+    <div class="uc-title" ref="title-el">{{title}}</div>
+  </button>
 `;
diff --git a/blocks/CloudImageEditor/src/EditorFilterControl.js b/blocks/CloudImageEditor/src/EditorFilterControl.js
index 2c0ed8572..f706191e1 100644
--- a/blocks/CloudImageEditor/src/EditorFilterControl.js
+++ b/blocks/CloudImageEditor/src/EditorFilterControl.js
@@ -110,7 +110,7 @@ export class EditorFilterControl extends EditorButtonControl {
     this._originalUrl = originalUrl;
 
     if (this.$.isOriginal) {
-      this.ref['icon-el'].classList.add('original-icon');
+      this.ref['icon-el'].classList.add('uc-original-icon');
     } else {
       this._observer.observe(this);
     }
@@ -158,7 +158,8 @@ export class EditorFilterControl extends EditorButtonControl {
 }
 
 EditorFilterControl.template = /* HTML */ `
-  <div class="before"></div>
-  <div class="preview" ref="preview-el"></div>
-  <lr-icon ref="icon-el" set="@name: icon; @size: iconSize;"></lr-icon>
+  <button type="button" role="option">
+    <div class="uc-preview" ref="preview-el"></div>
+    <lr-icon ref="icon-el" set="@name: icon; @size: iconSize;"></lr-icon>
+  </button>
 `;
diff --git a/blocks/CloudImageEditor/src/EditorImageCropper.js b/blocks/CloudImageEditor/src/EditorImageCropper.js
index 4c9a59706..039d6b5ab 100644
--- a/blocks/CloudImageEditor/src/EditorImageCropper.js
+++ b/blocks/CloudImageEditor/src/EditorImageCropper.js
@@ -258,9 +258,9 @@ export class EditorImageCropper extends Block {
       this._transitionToImage();
       setTimeout(() => {
         this.className = classNames({
-          active_from_viewer: fromViewer,
-          active_from_editor: !fromViewer,
-          inactive_to_editor: false,
+          'uc-active_from_viewer': fromViewer,
+          'uc-active_from_editor': !fromViewer,
+          'uc-inactive_to_editor': false,
         });
       });
     }
@@ -413,9 +413,9 @@ export class EditorImageCropper extends Block {
     this._transitionToCrop();
 
     this.className = classNames({
-      active_from_viewer: false,
-      active_from_editor: false,
-      inactive_to_editor: true,
+      'uc-active_from_viewer': false,
+      'uc-active_from_editor': false,
+      'uc-inactive_to_editor': true,
     });
 
     this.ref['frame-el'].toggleThumbs(false);
@@ -546,6 +546,6 @@ export class EditorImageCropper extends Block {
 }
 
 EditorImageCropper.template = /* HTML */ `
-  <canvas class="canvas" ref="canvas-el"></canvas>
+  <canvas class="uc-canvas" ref="canvas-el"></canvas>
   <lr-crop-frame ref="frame-el"></lr-crop-frame>
 `;
diff --git a/blocks/CloudImageEditor/src/EditorImageFader.js b/blocks/CloudImageEditor/src/EditorImageFader.js
index d46f956c9..e93c4f0a6 100644
--- a/blocks/CloudImageEditor/src/EditorImageFader.js
+++ b/blocks/CloudImageEditor/src/EditorImageFader.js
@@ -88,7 +88,7 @@ export class EditorImageFader extends Block {
     /** @private */
     this._addKeypointDebounced = debounce(this._addKeypoint.bind(this), 600);
 
-    this.classList.add('inactive_to_cropper');
+    this.classList.add('uc-inactive_to_cropper');
   }
 
   /**
@@ -201,7 +201,7 @@ export class EditorImageFader extends Block {
     image.addEventListener('load', stop, { once: true });
     image.addEventListener('error', stop, { once: true });
     keypoint.image = image;
-    image.classList.add('fader-image');
+    image.classList.add('uc-fader-image');
 
     image.addEventListener(
       'load',
@@ -264,7 +264,7 @@ export class EditorImageFader extends Block {
   /** @private */
   _createPreviewImage() {
     let image = new Image();
-    image.classList.add('fader-image', 'fader-image--preview');
+    image.classList.add('uc-fader-image', 'uc-fader-image--preview');
     image.style.opacity = '0';
     return image;
   }
@@ -298,7 +298,7 @@ export class EditorImageFader extends Block {
       this._container = container;
       this._keypoints.forEach((kp, idx) => {
         let kpImage = images[idx];
-        kpImage.classList.add('fader-image');
+        kpImage.classList.add('uc-fader-image');
         kp.image = kpImage;
         this._container.appendChild(kpImage);
       });
@@ -354,10 +354,11 @@ export class EditorImageFader extends Block {
     if (image.src === src) {
       image.style.opacity = '1';
       image.style.transform = 'scale(1)';
+
       this.className = classNames({
-        active_from_viewer: this._fromViewer,
-        active_from_cropper: !this._fromViewer,
-        inactive_to_cropper: false,
+        'uc-active_from_viewer': this._fromViewer,
+        'uc-active_from_cropper': !this._fromViewer,
+        'uc-inactive_to_cropper': false,
       });
       return;
     }
@@ -372,10 +373,11 @@ export class EditorImageFader extends Block {
         if (image) {
           image.style.opacity = '1';
           image.style.transform = 'scale(1)';
+
           this.className = classNames({
-            active_from_viewer: this._fromViewer,
-            active_from_cropper: !this._fromViewer,
-            inactive_to_cropper: false,
+            'uc-active_from_viewer': this._fromViewer,
+            'uc-active_from_cropper': !this._fromViewer,
+            'uc-inactive_to_cropper': false,
           });
         }
       },
@@ -434,10 +436,11 @@ export class EditorImageFader extends Block {
       if (this._previewImage) {
         this._previewImage.style.transform = 'scale(1)';
       }
+
       this.className = classNames({
-        active_from_viewer: false,
-        active_from_cropper: false,
-        inactive_to_cropper: true,
+        'uc-active_from_viewer': false,
+        'uc-active_from_cropper': false,
+        'uc-inactive_to_cropper': true,
       });
       this.addEventListener(
         'transitionend',
diff --git a/blocks/CloudImageEditor/src/EditorScroller.js b/blocks/CloudImageEditor/src/EditorScroller.js
index 8338f417e..ccdb9f6c2 100644
--- a/blocks/CloudImageEditor/src/EditorScroller.js
+++ b/blocks/CloudImageEditor/src/EditorScroller.js
@@ -6,14 +6,26 @@ export class EditorScroller extends Block {
   initCallback() {
     super.initCallback();
 
-    this.addEventListener('wheel', (e) => {
-      e.preventDefault();
-      let { deltaY, deltaX } = e;
-      if (Math.abs(deltaX) > X_THRESHOLD) {
-        this.scrollLeft += deltaX;
-      } else {
-        this.scrollLeft += deltaY;
-      }
+    this.addEventListener(
+      'wheel',
+      (e) => {
+        e.preventDefault();
+
+        let { deltaY, deltaX } = e;
+        if (Math.abs(deltaX) > X_THRESHOLD) {
+          this.scrollLeft += deltaX;
+        } else {
+          this.scrollLeft += deltaY;
+        }
+      },
+      {
+        passive: false,
+      },
+    );
+
+    // This fixes some strange bug on MacOS - wheel event doesn't fire for physical mouse wheel if no scroll event attached also
+    this.addEventListener('scroll', () => {}, {
+      passive: true,
     });
   }
 }
diff --git a/blocks/CloudImageEditor/src/EditorToolbar.js b/blocks/CloudImageEditor/src/EditorToolbar.js
index 9a70d8631..19c7d76f0 100644
--- a/blocks/CloudImageEditor/src/EditorToolbar.js
+++ b/blocks/CloudImageEditor/src/EditorToolbar.js
@@ -19,14 +19,16 @@ import { viewerImageSrc } from './util.js';
 /** @param {String} id */
 function renderTabToggle(id) {
   return /* HTML */ `
-    <lr-presence-toggle class="tab-toggle" set="visible: presence.tabToggle.${id}; styles: presence.tabToggleStyles;">
+    <lr-presence-toggle
+      class="uc-tab-toggle"
+      set="visible: presence.tabToggle.${id}; styles: presence.tabToggleStyles;"
+    >
       <lr-btn-ui
-        theme="boring"
+        theme="tab"
         ref="tab-toggle-${id}"
         data-id="${id}"
         icon="${id}"
-        tabindex="0"
-        set="onclick: on.clickTab;"
+        set="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_${id}"
       >
       </lr-btn-ui>
     </lr-presence-toggle>
@@ -36,10 +38,19 @@ function renderTabToggle(id) {
 /** @param {String} id */
 function renderTabContent(id) {
   return /* HTML */ `
-    <lr-presence-toggle class="tab-content" set="visible: presence.tabContent.${id}; styles: presence.tabContentStyles">
+    <lr-presence-toggle
+      id="tab_${id}"
+      class="uc-tab-content"
+      set="visible: presence.tabContent.${id}; styles: presence.tabContentStyles"
+    >
       <lr-editor-scroller hidden-scrollbar>
-        <div class="controls-list_align">
-          <div class="controls-list_inner" ref="controls-list-${id}"></div>
+        <div class="uc-controls-list_align">
+          <div
+            role="listbox"
+            aria-orientation="horizontal"
+            class="uc-controls-list_inner"
+            ref="controls-list-${id}"
+          ></div>
         </div>
       </lr-editor-scroller>
     </lr-presence-toggle>
@@ -74,24 +85,24 @@ export class EditorToolbar extends Block {
       'presence.tabToggle.tuning': true,
       'presence.tabToggle.filters': true,
       'presence.subTopToolbarStyles': {
-        hidden: 'sub-toolbar--top-hidden',
-        visible: 'sub-toolbar--visible',
+        hidden: 'uc-sub-toolbar--top-hidden',
+        visible: 'uc-sub-toolbar--visible',
       },
       'presence.subBottomToolbarStyles': {
-        hidden: 'sub-toolbar--bottom-hidden',
-        visible: 'sub-toolbar--visible',
+        hidden: 'uc-sub-toolbar--bottom-hidden',
+        visible: 'uc-sub-toolbar--visible',
       },
       'presence.tabContentStyles': {
-        hidden: 'tab-content--hidden',
-        visible: 'tab-content--visible',
+        hidden: 'uc-tab-content--hidden',
+        visible: 'uc-tab-content--visible',
       },
       'presence.tabToggleStyles': {
-        hidden: 'tab-toggle--hidden',
-        visible: 'tab-toggle--visible',
+        hidden: 'uc-tab-toggle--hidden',
+        visible: 'uc-tab-toggle--visible',
       },
       'presence.tabTogglesStyles': {
-        hidden: 'tab-toggles--hidden',
-        visible: 'tab-toggles--visible',
+        hidden: 'uc-tab-toggles--hidden',
+        visible: 'uc-tab-toggles--visible',
       },
       'on.cancel': () => {
         this._cancelPreload?.();
@@ -115,6 +126,10 @@ export class EditorToolbar extends Block {
           this._activateTab(id, { fromViewer: false });
         }
       },
+      tab_role: 'tab',
+      [`tab_${TabId.TUNING}`]: `tab_${TabId.TUNING}`,
+      [`tab_${TabId.CROP}`]: `tab_${TabId.CROP}`,
+      [`tab_${TabId.FILTERS}`]: `tab_${TabId.FILTERS}`,
     };
 
     /** @private */
@@ -126,7 +141,7 @@ export class EditorToolbar extends Block {
   _onSliderClose() {
     this.$['*showSlider'] = false;
     if (this.$['*tabId'] === TabId.TUNING) {
-      this.ref['tooltip-el'].classList.toggle('info-tooltip_visible', false);
+      this.ref['tooltip-el'].classList.toggle('uc-info-tooltip_visible', false);
     }
   }
 
@@ -197,7 +212,7 @@ export class EditorToolbar extends Block {
 
     [...fr.children].forEach((el, idx) => {
       if (idx === fr.childNodes.length - 1) {
-        el.classList.add('controls-list_last-item');
+        el.classList.add('uc-controls-list_last-item');
       }
     });
 
@@ -300,7 +315,7 @@ export class EditorToolbar extends Block {
     if (visible) {
       this.$['*operationTooltip'] = text;
     }
-    this.ref['tooltip-el'].classList.toggle('info-tooltip_visible', visible);
+    this.ref['tooltip-el'].classList.toggle('uc-info-tooltip_visible', visible);
   }, 0);
 
   initCallback() {
@@ -386,29 +401,39 @@ export class EditorToolbar extends Block {
 
 EditorToolbar.template = /* HTML */ `
   <lr-line-loader-ui set="active: showLoader"></lr-line-loader-ui>
-  <div class="info-tooltip_container">
-    <div class="info-tooltip_wrapper">
-      <div ref="tooltip-el" class="info-tooltip info-tooltip_hidden">{{*operationTooltip}}</div>
+  <div class="uc-info-tooltip_container">
+    <div class="uc-info-tooltip_wrapper">
+      <div ref="tooltip-el" class="uc-info-tooltip uc-info-tooltip_hidden">{{*operationTooltip}}</div>
     </div>
   </div>
-  <div class="toolbar-container">
-    <lr-presence-toggle class="sub-toolbar" set="visible: presence.mainToolbar; styles: presence.subTopToolbarStyles">
-      <div class="tab-content-row">${ALL_TABS.map(renderTabContent).join('')}</div>
-      <div class="controls-row">
-        <lr-btn-ui theme="boring" icon="closeMax" set="onclick: on.cancel"> </lr-btn-ui>
-        <lr-presence-toggle class="tab-toggles" set="visible: presence.tabToggles; styles: presence.tabTogglesStyles">
-          <div ref="tabs-indicator" class="tab-toggles_indicator"></div>
+  <div class="uc-toolbar-container">
+    <lr-presence-toggle
+      role="tablist"
+      class="uc-sub-toolbar"
+      set="visible: presence.mainToolbar; styles: presence.subTopToolbarStyles"
+    >
+      <div class="uc-tab-content-row">${ALL_TABS.map(renderTabContent).join('')}</div>
+      <div class="uc-controls-row">
+        <lr-presence-toggle
+          class="uc-tab-toggles"
+          set="visible: presence.tabToggles; styles: presence.tabTogglesStyles"
+        >
+          <div ref="tabs-indicator" class="uc-tab-toggles_indicator"></div>
           ${ALL_TABS.map(renderTabToggle).join('')}
         </lr-presence-toggle>
-        <lr-btn-ui theme="primary" icon="done" set="onclick: on.apply"> </lr-btn-ui>
+        <lr-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" set="onclick: on.cancel"> </lr-btn-ui>
+        <lr-btn-ui theme="primary-icon" icon="done" set="onclick: on.apply"> </lr-btn-ui>
       </div>
     </lr-presence-toggle>
-    <lr-presence-toggle class="sub-toolbar" set="visible: presence.subToolbar; styles: presence.subBottomToolbarStyles">
-      <div class="slider">
+    <lr-presence-toggle
+      class="uc-sub-toolbar"
+      set="visible: presence.subToolbar; styles: presence.subBottomToolbarStyles"
+    >
+      <div class="uc-slider">
         <lr-editor-slider ref="slider-el"></lr-editor-slider>
       </div>
-      <div class="controls-row">
-        <lr-btn-ui theme="boring" set="onclick: on.cancelSlider;" l10n="@text:cancel"> </lr-btn-ui>
+      <div class="uc-controls-row">
+        <lr-btn-ui theme="secondary" set="onclick: on.cancelSlider;" l10n="@text:cancel"> </lr-btn-ui>
         <lr-btn-ui theme="primary" set="onclick: on.applySlider;" l10n="@text:apply"> </lr-btn-ui>
       </div>
     </lr-presence-toggle>
diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css
index 09b4060d9..c224c83c9 100644
--- a/blocks/CloudImageEditor/src/css/common.css
+++ b/blocks/CloudImageEditor/src/css/common.css
@@ -1,67 +1,39 @@
 /* TODO: we shuoud use basic theme there  */
 
-:host(.lr-cloud-image-editor),
-.lr-cloud-image-editor {
-  /* Theme settings >>> */
-  --rgb-primary-accent: 6, 2, 196;
-  --rgb-text-base: 0, 0, 0;
-  --rgb-text-accent-contrast: 255, 255, 255;
-  --rgb-fill-contrast: 255, 255, 255;
-  --rgb-fill-shaded: 245, 245, 245;
-  --rgb-shadow: 0, 0, 0;
-  --rgb-error: 209, 81, 81;
-  --opacity-shade-mid: 0.2;
-
-  /* <<< Theme settings */
-
-  --color-primary-accent: rgb(var(--rgb-primary-accent));
-  --color-text-base: rgb(var(--rgb-text-base));
-  --color-text-accent-contrast: rgb(var(--rgb-text-accent-contrast));
-  --color-text-soft: rgb(var(--rgb-fill-contrast));
-  --color-text-error: rgb(var(--rgb-error));
-  --color-fill-contrast: rgb(var(--rgb-fill-contrast));
-  --color-modal-backdrop: rgba(var(--rgb-fill-shaded), 0.95);
-  --color-image-background: rgba(var(--rgb-fill-shaded));
-  --color-outline: rgba(var(--rgb-text-base), var(--opacity-shade-mid));
-  --color-underline: rgba(var(--rgb-text-base), 0.08);
-  --color-shade: rgba(var(--rgb-text-base), 0.02);
+[lr-cloud-image-editor] {
+  --color-primary-accent: var(--uc-primary);
+  --color-text-base: var(--uc-foreground);
+  --color-text-accent-contrast: var(--uc-background);
+  --color-fill-contrast: var(--uc-background);
+  --color-modal-backdrop: oklch(0 0 0 / 0.1);
+  --color-image-background: var(--uc-muted);
   --color-focus-ring: var(--color-primary-accent);
-  --color-input-placeholder: rgba(var(--rgb-text-base), 0.32);
-  --color-error: rgb(var(--rgb-error));
+  --color-crop-guides: var(--uc-foreground);
 
-  --font-size-ui: 16px;
-  --font-size-title: 18px;
-  --font-weight-title: 500;
-  --font-size-soft: 14px;
+  --font-size-ui: var(--uc-font-size);
 
-  --size-touch-area: 40px;
-  --size-panel-heading: 66px;
+  --size-touch-area: var(--uc-button-size);
+  --size-panel-heading: calc(var(--uc-button-size) + var(--uc-padding) * 2);
   --size-ui-min-width: 130px;
   --size-line-width: 1px;
   --size-modal-width: 650px;
+  --size-icon: calc(var(--uc-button-size) / 2); /* TODO: remove icon size overrides */
 
-  --border-radius-connect: 2px;
-  --border-radius-editor: 3px;
-  --border-radius-thumb: 4px;
-  --border-radius-ui: 5px;
-  --border-radius-base: 6px;
+  --border-radius-editor: var(--uc-radius);
+  --border-radius-thumb: var(--uc-radius);
+  --border-radius-ui: var(--uc-radius);
+  --border-radius-base: var(--uc-radius);
 
   --cldtr-gap-min: 5px;
   --cldtr-gap-mid-1: 10px;
   --cldtr-gap-mid-2: 15px;
   --cldtr-gap-max: 20px;
 
-  --opacity-min: var(--opacity-shade-mid);
-  --opacity-mid: 0.1;
-  --opacity-max: 0.05;
-
   --transition-duration-2: var(--transition-duration-all, 0.2s);
   --transition-duration-3: var(--transition-duration-all, 0.3s);
   --transition-duration-4: var(--transition-duration-all, 0.4s);
   --transition-duration-5: var(--transition-duration-all, 0.5s);
 
-  --shadow-base: 0px 5px 15px rgba(var(--rgb-shadow), 0.1), 0px 1px 4px rgba(var(--rgb-shadow), 0.15);
-
   --modal-header-opacity: 1;
   --modal-header-height: var(--size-panel-heading);
   --modal-toolbar-height: var(--size-panel-heading);
@@ -74,61 +46,54 @@
   max-height: 100%;
 }
 
-:host(.lr-cloud-image-editor) :is([can-handle-paste]:hover, [can-handle-paste]:focus),
-.lr-cloud-image-editor :is([can-handle-paste]:hover, [can-handle-paste]:focus) {
+[lr-cloud-image-editor] :is([can-handle-paste]:hover, [can-handle-paste]:focus) {
   --can-handle-paste: 'true';
 }
 
-:host(.lr-cloud-image-editor)
-  :is([tabindex][focus-visible], [tabindex]:hover, [with-effects][focus-visible], [with-effects]:hover),
-.lr-cloud-image-editor
+[lr-cloud-image-editor]
   :is([tabindex][focus-visible], [tabindex]:hover, [with-effects][focus-visible], [with-effects]:hover) {
   --filter-effect: var(--hover-filter) !important;
   --opacity-effect: var(--hover-opacity) !important;
   --color-effect: var(--hover-color-rgb) !important;
+  --background-effect: var(--hover-background) !important;
 }
 
-:host(.lr-cloud-image-editor) :is([tabindex]:active, [with-effects]:active),
-.lr-cloud-image-editor :is([tabindex]:active, [with-effects]:active) {
+[lr-cloud-image-editor] :is([tabindex]:active, [with-effects]:active) {
   --filter-effect: var(--down-filter) !important;
   --opacity-effect: var(--down-opacity) !important;
   --color-effect: var(--down-color-rgb) !important;
+  --background-effect: var(--down-background) !important;
 }
 
-:host(.lr-cloud-image-editor) :is([tabindex][active], [with-effects][active]),
-.lr-cloud-image-editor :is([tabindex][active], [with-effects][active]) {
+[lr-cloud-image-editor] :is([tabindex][active], [with-effects][active]) {
   --filter-effect: var(--active-filter) !important;
   --opacity-effect: var(--active-opacity) !important;
   --color-effect: var(--active-color-rgb) !important;
+  --background-effect: var(--active-background) !important;
 }
 
-:host(.lr-cloud-image-editor) [hidden-scrollbar]::-webkit-scrollbar,
-.lr-cloud-image-editor [hidden-scrollbar]::-webkit-scrollbar {
+[lr-cloud-image-editor] [hidden-scrollbar]::-webkit-scrollbar {
   display: none;
 }
 
-:host(.lr-cloud-image-editor) [hidden-scrollbar],
-.lr-cloud-image-editor [hidden-scrollbar] {
+[lr-cloud-image-editor] [hidden-scrollbar] {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
 
-:host(.lr-cloud-image-editor.editor_ON),
-.lr-cloud-image-editor.editor_ON {
+[lr-cloud-image-editor].uc-editor_ON {
   --modal-header-opacity: 0;
   --modal-header-height: 0px;
   --modal-toolbar-height: calc(var(--size-panel-heading) * 2);
 }
 
-:host(.lr-cloud-image-editor.editor_OFF),
-.lr-cloud-image-editor.editor_OFF {
+[lr-cloud-image-editor].uc-editor_OFF {
   --modal-header-opacity: 1;
   --modal-header-height: var(--size-panel-heading);
   --modal-toolbar-height: var(--size-panel-heading);
 }
 
-:host(.lr-cloud-image-editor) > .wrapper,
-.lr-cloud-image-editor > .wrapper {
+[lr-cloud-image-editor] > .uc-wrapper {
   --l-min-img-height: var(--modal-toolbar-height);
   --l-max-img-height: 100%;
   --l-edit-button-width: 120px;
@@ -143,23 +108,20 @@
 }
 
 @media only screen and (max-width: 800px) {
-  :host(.lr-cloud-image-editor) > .wrapper,
-  .lr-cloud-image-editor > .wrapper {
+  [lr-cloud-image-editor] > .uc-wrapper {
     --l-edit-button-width: 70px;
     --l-toolbar-horizontal-padding: var(--cldtr-gap-min);
   }
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .viewport,
-.lr-cloud-image-editor > .wrapper > .viewport {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport {
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .viewport > .image_container > .image,
-.lr-cloud-image-editor > .wrapper > .viewport > .image_container > .image {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image {
   --viewer-image-opacity: 1;
 
   position: absolute;
@@ -178,15 +140,13 @@
   pointer-events: auto;
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .viewport > .image_container > .image.image_visible_viewer,
-.lr-cloud-image-editor > .wrapper > .viewport > .image_container > .image.image_visible_viewer {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_visible_viewer {
   transition:
     opacity var(--transition-duration-3) ease-in-out,
     transform var(--transition-duration-4);
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .viewport > .image_container > .image.image_hidden_to_cropper,
-.lr-cloud-image-editor > .wrapper > .viewport > .image_container > .image.image_hidden_to_cropper {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_hidden_to_cropper {
   --viewer-image-opacity: 0;
 
   background-image: var(--transparent-pixel);
@@ -197,8 +157,7 @@
   pointer-events: none;
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .viewport > .image_container > .image.image_hidden_effects,
-.lr-cloud-image-editor > .wrapper > .viewport > .image_container > .image.image_hidden_effects {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_hidden_effects {
   --viewer-image-opacity: 0;
 
   transform: scale(1);
@@ -208,8 +167,7 @@
   pointer-events: none;
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .viewport > .image_container,
-.lr-cloud-image-editor > .wrapper > .viewport > .image_container {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container {
   position: relative;
   display: block;
   width: 100%;
@@ -218,14 +176,12 @@
   transition: var(--transition-duration-3);
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .toolbar,
-.lr-cloud-image-editor > .wrapper > .toolbar {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-toolbar {
   position: relative;
   transition: 0.3s;
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .toolbar > .toolbar_content,
-.lr-cloud-image-editor > .wrapper > .toolbar > .toolbar_content {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content {
   position: absolute;
   bottom: 0px;
   left: 0px;
@@ -236,8 +192,7 @@
   background-color: var(--color-fill-contrast);
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .toolbar > .toolbar_content.toolbar_content__viewer,
-.lr-cloud-image-editor > .wrapper > .toolbar > .toolbar_content.toolbar_content__viewer {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content.uc-toolbar_content__viewer {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -246,19 +201,16 @@
   padding-left: var(--l-toolbar-horizontal-padding);
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .toolbar > .toolbar_content.toolbar_content__editor,
-.lr-cloud-image-editor > .wrapper > .toolbar > .toolbar_content.toolbar_content__editor {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content.uc-toolbar_content__editor {
   display: flex;
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .viewport > .info_pan,
-.lr-cloud-image-editor > .wrapper > .viewport > .info_pan {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-info_pan {
   position: absolute;
   user-select: none;
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .viewport > .file_type_outer,
-.lr-cloud-image-editor > .wrapper > .viewport > .file_type_outer {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-file_type_outer {
   position: absolute;
   z-index: 2;
   display: flex;
@@ -267,13 +219,11 @@
   user-select: none;
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .viewport > .file_type_outer > .file_type,
-.lr-cloud-image-editor > .wrapper > .viewport > .file_type_outer > .file_type {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-file_type_outer > .uc-file_type {
   padding: 4px 0.8em;
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .network_problems_splash,
-.lr-cloud-image-editor > .wrapper > .network_problems_splash {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash {
   position: absolute;
   z-index: 4;
   display: flex;
@@ -283,8 +233,7 @@
   background-color: var(--color-fill-contrast);
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .network_problems_splash > .network_problems_content,
-.lr-cloud-image-editor > .wrapper > .network_problems_splash > .network_problems_content {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_content {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -292,41 +241,39 @@
   justify-content: center;
 }
 
-:host(.lr-cloud-image-editor)
-  > .wrapper
-  > .network_problems_splash
-  > .network_problems_content
-  > .network_problems_icon,
-.lr-cloud-image-editor > .wrapper > .network_problems_splash > .network_problems_content > .network_problems_icon {
+[lr-cloud-image-editor]
+  > .uc-wrapper
+  > .uc-network_problems_splash
+  > .uc-network_problems_content
+  > .uc-network_problems_icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
-  color: rgba(var(--rgb-text-base), 0.6);
-  background-color: rgba(var(--rgb-fill-shaded));
+  color: var(--uc-foreground);
+  background-color: var(--uc-muted);
   border-radius: 50%;
 }
 
-:host(.lr-cloud-image-editor)
-  > .wrapper
-  > .network_problems_splash
-  > .network_problems_content
-  > .network_problems_text,
-.lr-cloud-image-editor > .wrapper > .network_problems_splash > .network_problems_content > .network_problems_text {
+[lr-cloud-image-editor]
+  > .uc-wrapper
+  > .uc-network_problems_splash
+  > .uc-network_problems_content
+  > .uc-network_problems_text {
   margin-top: var(--cldtr-gap-max);
   font-size: var(--font-size-ui);
+  color: var(--uc-foreground);
 }
 
-:host(.lr-cloud-image-editor) > .wrapper > .network_problems_splash > .network_problems_footer,
-.lr-cloud-image-editor > .wrapper > .network_problems_splash > .network_problems_footer {
+[lr-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_footer {
   display: flex;
   align-items: center;
   justify-content: center;
   height: var(--size-panel-heading);
 }
 
-lr-crop-frame > .svg {
+lr-crop-frame > .uc-svg {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -339,7 +286,7 @@ lr-crop-frame > .svg {
   transition: var(--transition-duration-3);
 }
 
-lr-crop-frame > .thumb {
+lr-crop-frame > .uc-thumb {
   --idle-color-rgb: var(--color-text-base);
   --hover-color-rgb: var(--color-primary-accent);
   --focus-color-rgb: var(--color-primary-accent);
@@ -352,29 +299,29 @@ lr-crop-frame > .thumb {
     opacity var(--transition-duration-3);
 }
 
-lr-crop-frame > .thumb--visible {
+lr-crop-frame > .uc-thumb--visible {
   opacity: 1;
   pointer-events: auto;
 }
 
-lr-crop-frame > .thumb--hidden {
+lr-crop-frame > .uc-thumb--hidden {
   opacity: 0;
   pointer-events: none;
 }
 
-lr-crop-frame > .guides {
+lr-crop-frame > .uc-guides {
   transition: var(--transition-duration-3);
 }
 
-lr-crop-frame > .guides--hidden {
+lr-crop-frame > .uc-guides--hidden {
   opacity: 0;
 }
 
-lr-crop-frame > .guides--semi-hidden {
+lr-crop-frame > .uc-guides--semi-hidden {
   opacity: 0.2;
 }
 
-lr-crop-frame > .guides--visible {
+lr-crop-frame > .uc-guides--visible {
   opacity: 1;
 }
 
@@ -382,28 +329,40 @@ lr-editor-button-control,
 lr-editor-crop-button-control,
 lr-editor-filter-control,
 lr-editor-operation-control {
-  --l-base-min-width: 40px;
-  --l-base-height: var(--l-base-min-width);
+  --l-base-min-width: var(--uc-button-size);
+  --l-base-height: var(--uc-button-size);
   --opacity-effect: var(--idle-opacity);
   --color-effect: var(--idle-color-rgb);
+  --background-effect: var(--idle-background);
   --filter-effect: var(--idle-filter);
-  --idle-color-rgb: var(--rgb-text-base);
-  --idle-opacity: 0.05;
+
+  --idle-color-rgb: var(--uc-secondary-foreground);
+  --idle-opacity: 1;
   --idle-filter: 1;
-  --hover-color-rgb: var(--idle-color-rgb);
-  --hover-opacity: 0.08;
+  --idle-background: var(--uc-secondary);
+  --hover-color-rgb: var(--uc-secondary-foreground);
+  --hover-opacity: 1;
   --hover-filter: 0.8;
+  --hover-background: var(--uc-secondary-hover);
   --down-color-rgb: var(--hover-color-rgb);
-  --down-opacity: 0.12;
+  --down-opacity: 1;
   --down-filter: 0.6;
+  --down-background: var(--uc-secondary);
+}
 
+lr-editor-button-control > button,
+lr-editor-crop-button-control > button,
+lr-editor-filter-control > button,
+lr-editor-operation-control > button {
+  all: unset;
   position: relative;
   display: grid;
   grid-template-columns: var(--l-base-min-width) auto;
   grid-template-rows: 100%;
   align-items: center;
   height: var(--l-base-height);
-  color: rgba(var(--idle-color-rgb));
+  color: var(--color-effect);
+  opacity: var(--opacity-effect);
   outline: none;
   cursor: pointer;
   transition: var(--l-width-transition);
@@ -412,67 +371,73 @@ lr-editor-operation-control {
 :where(lr-editor-button-control, lr-editor-crop-button-control, lr-editor-filter-control, lr-editor-operation-control)
   > lr-icon
   > svg {
-  width: 20px;
-  height: 20px;
+  width: var(--size-icon);
+  height: var(--size-icon);
 }
 
-lr-editor-filter-control > lr-icon.original-icon > svg {
+lr-editor-filter-control > lr-icon.uc-original-icon > svg {
   width: 100%;
   height: 100%;
 }
 
-lr-editor-button-control.active,
-lr-editor-operation-control.active,
-lr-editor-crop-button-control.active,
-lr-editor-filter-control.active {
-  --idle-color-rgb: var(--rgb-primary-accent);
+lr-editor-button-control.uc-active,
+lr-editor-operation-control.uc-active,
+lr-editor-crop-button-control.uc-active,
+lr-editor-filter-control.uc-active {
+  --idle-color-rgb: var(--uc-primary);
+  --idle-background: var(--uc-primary-transparent);
+  --idle-opacity: 0.9;
+  --hover-color-rgb: var(--uc-primary);
+  --hover-background: var(--uc-primary-transparent);
+  --hover-opacity: 1;
 }
 
-lr-editor-filter-control.not_active .preview[loaded] {
+lr-editor-filter-control.uc-not_active .uc-preview[loaded] {
   opacity: 1;
 }
 
-lr-editor-filter-control.active .preview {
+lr-editor-filter-control.uc-active .uc-preview {
   opacity: 0;
 }
 
-lr-editor-button-control.not_active,
-lr-editor-operation-control.not_active,
-lr-editor-crop-button-control.not_active,
-lr-editor-filter-control.not_active {
-  --idle-color-rgb: var(--rgb-text-base);
+lr-editor-button-control.uc-not_active,
+lr-editor-operation-control.uc-not_active,
+lr-editor-crop-button-control.uc-not_active,
+lr-editor-filter-control.uc-not_active {
+  --idle-color-rgb: var(--uc-secondary-foreground);
 }
 
-lr-editor-button-control > .before,
-lr-editor-operation-control > .before,
-lr-editor-crop-button-control > .before,
-lr-editor-filter-control > .before {
+lr-editor-button-control > button::before,
+lr-editor-operation-control > button::before,
+lr-editor-crop-button-control > button::before,
+lr-editor-filter-control > button::before {
   position: absolute;
-  right: 0px;
-  left: 0px;
+  content: '';
+  right: 0;
+  left: 0;
   z-index: -1;
   width: 100%;
   height: 100%;
-  background-color: rgba(var(--color-effect), var(--opacity-effect));
+  background-color: var(--background-effect);
   border-radius: var(--border-radius-editor);
   transition: var(--transition-duration-3);
 }
 
-lr-editor-button-control > .title,
-lr-editor-operation-control > .title,
-lr-editor-crop-button-control > .title,
-lr-editor-filter-control > .title {
+lr-editor-button-control > button .uc-title,
+lr-editor-operation-control > button .uc-title,
+lr-editor-crop-button-control > button .uc-title,
+lr-editor-filter-control > button .uc-title {
   padding-right: var(--cldtr-gap-mid-1);
   font-size: 0.7em;
   letter-spacing: 1.004px;
   text-transform: uppercase;
 }
 
-lr-editor-filter-control > .preview {
+lr-editor-filter-control > button .uc-preview {
   position: absolute;
-  right: 0px;
-  left: 0px;
-  z-index: 1;
+  right: 0;
+  left: 0;
+  z-index: -1;
   width: 100%;
   height: var(--l-base-height);
   background-repeat: no-repeat;
@@ -483,8 +448,8 @@ lr-editor-filter-control > .preview {
   transition: var(--transition-duration-3);
 }
 
-lr-editor-filter-control > .original-icon {
-  color: var(--color-text-base);
+lr-editor-filter-control > .uc-original-icon {
+  color: var(--color-effect);
   opacity: 0.3;
 }
 
@@ -499,9 +464,10 @@ lr-editor-image-cropper {
   opacity: 0;
   pointer-events: none;
   touch-action: none;
+  color: var(--color-crop-guides);
 }
 
-lr-editor-image-cropper.active_from_editor {
+lr-editor-image-cropper.uc-active_from_editor {
   transform: scale(1) translate(0px, 0px);
   opacity: 1;
   transition:
@@ -510,7 +476,7 @@ lr-editor-image-cropper.active_from_editor {
   pointer-events: auto;
 }
 
-lr-editor-image-cropper.active_from_viewer {
+lr-editor-image-cropper.uc-active_from_viewer {
   transform: scale(1) translate(0px, 0px);
   opacity: 1;
   transition:
@@ -519,7 +485,7 @@ lr-editor-image-cropper.active_from_viewer {
   pointer-events: auto;
 }
 
-lr-editor-image-cropper.inactive_to_editor {
+lr-editor-image-cropper.uc-inactive_to_editor {
   opacity: 0;
   transition:
     transform var(--transition-duration-4) cubic-bezier(0.37, 0, 0.63, 1),
@@ -527,7 +493,7 @@ lr-editor-image-cropper.inactive_to_editor {
   pointer-events: none;
 }
 
-lr-editor-image-cropper > .canvas {
+lr-editor-image-cropper > .uc-canvas {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -546,7 +512,7 @@ lr-editor-image-fader {
   height: 100%;
 }
 
-lr-editor-image-fader.active_from_viewer {
+lr-editor-image-fader.uc-active_from_viewer {
   z-index: 3;
   transform: scale(1);
   opacity: 1;
@@ -556,7 +522,7 @@ lr-editor-image-fader.active_from_viewer {
   pointer-events: auto;
 }
 
-lr-editor-image-fader.active_from_cropper {
+lr-editor-image-fader.uc-active_from_cropper {
   z-index: 3;
   transform: scale(1);
   opacity: 1;
@@ -566,7 +532,7 @@ lr-editor-image-fader.active_from_cropper {
   pointer-events: auto;
 }
 
-lr-editor-image-fader.inactive_to_cropper {
+lr-editor-image-fader.uc-inactive_to_cropper {
   z-index: 3;
   transform: scale(1);
   opacity: 0;
@@ -576,7 +542,7 @@ lr-editor-image-fader.inactive_to_cropper {
   pointer-events: none;
 }
 
-lr-editor-image-fader .fader-image {
+lr-editor-image-fader .uc-fader-image {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -589,7 +555,7 @@ lr-editor-image-fader .fader-image {
   content-visibility: auto;
 }
 
-lr-editor-image-fader .fader-image--preview {
+lr-editor-image-fader .uc-fader-image--preview {
   background-color: var(--color-image-background);
   border-top-left-radius: var(--border-radius-base);
   border-top-right-radius: var(--border-radius-base);
@@ -611,7 +577,7 @@ lr-editor-slider {
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 66px;
+  height: var(--size-panel-heading);
 }
 
 lr-editor-toolbar {
@@ -623,27 +589,27 @@ lr-editor-toolbar {
 @media only screen and (max-width: 600px) {
   lr-editor-toolbar {
     --l-tab-gap: var(--cldtr-gap-mid-1);
-    --l-slider-padding: var(--cldtr-gap-min);
-    --l-controls-padding: var(--cldtr-gap-min);
+    --l-slider-padding: var(--uc-padding);
+    --l-controls-padding: var(--uc-padding);
   }
 }
 
 @media only screen and (min-width: 601px) {
   lr-editor-toolbar {
-    --l-tab-gap: calc(var(--cldtr-gap-mid-1) + var(--cldtr-gap-max));
-    --l-slider-padding: var(--cldtr-gap-mid-1);
-    --l-controls-padding: var(--cldtr-gap-mid-1);
+    --l-tab-gap: var(--cldtr-gap-max);
+    --l-slider-padding: var(--uc-padding);
+    --l-controls-padding: var(--uc-padding);
   }
 }
 
-lr-editor-toolbar > .toolbar-container {
+lr-editor-toolbar > .uc-toolbar-container {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar {
+lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar {
   position: absolute;
   display: grid;
   grid-template-rows: 1fr 1fr;
@@ -656,25 +622,25 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar {
     visibility var(--transition-duration-3) ease-in-out;
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar.sub-toolbar--visible {
+lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--visible {
   transform: translateY(0px);
   opacity: 1;
   pointer-events: auto;
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar.sub-toolbar--top-hidden {
+lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--top-hidden {
   transform: translateY(100%);
   opacity: 0;
   pointer-events: none;
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar.sub-toolbar--bottom-hidden {
+lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--bottom-hidden {
   transform: translateY(-100%);
   opacity: 0;
   pointer-events: none;
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row {
+lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -682,7 +648,7 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row {
   padding-left: var(--l-controls-padding);
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-toggles {
+lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles {
   position: relative;
   display: grid;
   grid-auto-flow: column;
@@ -691,22 +657,27 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-tog
   height: 100%;
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-toggles > .tab-toggles_indicator {
+lr-editor-toolbar
+  > .uc-toolbar-container
+  > .uc-sub-toolbar
+  > .uc-controls-row
+  > .uc-tab-toggles
+  > .uc-tab-toggles_indicator {
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: var(--size-touch-area);
   height: 2px;
-  background-color: var(--color-primary-accent);
+  background-color: var(--uc-secondary-foreground);
   transform: translateX(0px);
   transition: transform var(--transition-duration-3);
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row {
+lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row {
   position: relative;
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab-content {
+lr-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row > .uc-tab-content {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -718,75 +689,113 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab-
   content-visibility: auto;
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab-content.tab-content--visible {
+lr-editor-toolbar
+  > .uc-toolbar-container
+  > .uc-sub-toolbar
+  > .uc-tab-content-row
+  > .uc-tab-content.uc-tab-content--visible {
   opacity: 1;
   pointer-events: auto;
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab-content.tab-content--hidden {
+lr-editor-toolbar
+  > .uc-toolbar-container
+  > .uc-sub-toolbar
+  > .uc-tab-content-row
+  > .uc-tab-content.uc-tab-content--hidden {
   opacity: 0;
   pointer-events: none;
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-toggles > .tab-toggle.tab-toggle--visible {
+lr-editor-toolbar
+  > .uc-toolbar-container
+  > .uc-sub-toolbar
+  > .uc-controls-row
+  > .uc-tab-toggles
+  > .uc-tab-toggle.uc-tab-toggle--visible {
   display: contents;
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-toggles > .tab-toggle.tab-toggle--hidden {
+lr-editor-toolbar
+  > .uc-toolbar-container
+  > .uc-sub-toolbar
+  > .uc-controls-row
+  > .uc-tab-toggles
+  > .uc-tab-toggle.uc-tab-toggle--hidden {
   display: none;
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-toggles.tab-toggles--hidden {
+lr-editor-toolbar
+  > .uc-toolbar-container
+  > .uc-sub-toolbar
+  > .uc-controls-row
+  > .uc-tab-toggles.uc-tab-toggles--hidden {
   display: none;
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-toggles > .tab-toggle > lr-btn-ui {
-  width: 40px;
+lr-editor-toolbar
+  > .uc-toolbar-container
+  > .uc-sub-toolbar
+  > .uc-controls-row
+  > .uc-tab-toggles
+  > .uc-tab-toggle
+  > lr-btn-ui {
+  width: var(--uc-button-size);
 }
 
 lr-editor-toolbar
-  > .toolbar-container
-  > .sub-toolbar
-  > .controls-row
-  > .tab-toggles
-  > .tab-toggle
+  > .uc-toolbar-container
+  > .uc-sub-toolbar
+  > .uc-controls-row
+  > .uc-tab-toggles
+  > .uc-tab-toggle
   > lr-btn-ui
   > lr-icon
   > svg {
-  width: 100%;
-  height: 100%;
+  width: var(--size-icon);
+  height: var(--size-icon);
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab-content .controls-list_align {
+lr-editor-toolbar
+  > .uc-toolbar-container
+  > .uc-sub-toolbar
+  > .uc-tab-content-row
+  > .uc-tab-content
+  .uc-controls-list_align {
   display: grid;
   grid-template-areas: '. inner .';
   grid-template-columns: 1fr auto 1fr;
   box-sizing: border-box;
   min-width: 100%;
-  padding-left: var(--cldtr-gap-max);
+  padding-left: var(--uc-padding);
 }
 
-lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab-content .controls-list_inner {
+lr-editor-toolbar
+  > .uc-toolbar-container
+  > .uc-sub-toolbar
+  > .uc-tab-content-row
+  > .uc-tab-content
+  .uc-controls-list_inner {
   display: grid;
   grid-area: inner;
   grid-auto-flow: column;
-  grid-gap: calc((var(--cldtr-gap-min) - 1px) * 3);
+  gap: 6px;
 }
 
 lr-editor-toolbar
-  > .toolbar-container
-  > .sub-toolbar
-  > .tab-content-row
-  > .tab-content
-  .controls-list_inner:last-child {
-  padding-right: var(--cldtr-gap-max);
+  > .uc-toolbar-container
+  > .uc-sub-toolbar
+  > .uc-tab-content-row
+  > .uc-tab-content
+  .uc-controls-list_inner:last-child {
+  padding-right: var(--uc-padding);
 }
 
-lr-editor-toolbar .controls-list_last-item {
+lr-editor-toolbar .uc-controls-list_last-item {
   margin-right: var(--cldtr-gap-max);
 }
 
-lr-editor-toolbar .info-tooltip_container {
+lr-editor-toolbar .uc-info-tooltip_container {
   position: absolute;
   display: flex;
   align-items: flex-start;
@@ -795,7 +804,7 @@ lr-editor-toolbar .info-tooltip_container {
   height: 100%;
 }
 
-lr-editor-toolbar .info-tooltip_wrapper {
+lr-editor-toolbar .uc-info-tooltip_wrapper {
   position: absolute;
   top: calc(-100% - var(--cldtr-gap-mid-2));
   display: flex;
@@ -805,12 +814,9 @@ lr-editor-toolbar .info-tooltip_wrapper {
   pointer-events: none;
 }
 
-lr-editor-toolbar .info-tooltip {
+lr-editor-toolbar .uc-info-tooltip {
   z-index: 3;
-  padding-top: calc(var(--cldtr-gap-min) / 2);
-  padding-right: var(--cldtr-gap-min);
-  padding-bottom: calc(var(--cldtr-gap-min) / 2);
-  padding-left: var(--cldtr-gap-min);
+  padding: 3px 6px;
   color: var(--color-text-base);
   font-size: 0.7em;
   letter-spacing: 1px;
@@ -822,29 +828,40 @@ lr-editor-toolbar .info-tooltip {
   transition: var(--transition-duration-3);
 }
 
-lr-editor-toolbar .info-tooltip_visible {
+lr-editor-toolbar .uc-info-tooltip_visible {
   transform: translateY(0px);
   opacity: 1;
 }
 
-lr-editor-toolbar .slider {
+lr-editor-toolbar .uc-slider {
   padding-right: var(--l-slider-padding);
   padding-left: var(--l-slider-padding);
 }
 
-lr-btn-ui {
+lr-btn-ui > button {
   --filter-effect: var(--idle-brightness);
   --opacity-effect: var(--idle-opacity);
   --color-effect: var(--idle-color-rgb);
-  --l-transition-effect: var(--css-transition, color var(--transition-duration-2), filter var(--transition-duration-2));
-
+  --background-effect: var(--idle-background);
+  --l-transition-effect: var(
+    --css-transition,
+    color var(--transition-duration-2),
+    background-color var(--transition-duration-2),
+    filter var(--transition-duration-2)
+  );
+
+  all: unset;
   display: inline-flex;
   align-items: center;
   box-sizing: var(--css-box-sizing, border-box);
-  height: var(--css-height, var(--size-touch-area));
-  padding-right: var(--css-padding-right, var(--cldtr-gap-mid-1));
-  padding-left: var(--css-padding-left, var(--cldtr-gap-mid-1));
-  color: rgba(var(--color-effect), var(--opacity-effect));
+  height: var(--css-height, var(--uc-button-size));
+  padding-right: var(--css-padding-right, 14px);
+  padding-left: var(--css-padding-left, 14px);
+  font-size: 1em;
+  color: var(--color-effect);
+  background-color: var(--background-effect);
+  border-radius: var(--uc-radius);
+  opacity: var(--opacity-effect);
   outline: none;
   cursor: pointer;
   filter: brightness(var(--filter-effect));
@@ -852,82 +869,160 @@ lr-btn-ui {
   user-select: none;
 }
 
-lr-btn-ui .text {
+lr-btn-ui .uc-text {
   white-space: nowrap;
 }
 
-lr-btn-ui .icon {
+lr-btn-ui .uc-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgba(var(--color-effect), var(--opacity-effect));
+  color: var(--color-effect);
   filter: brightness(var(--filter-effect));
   transition: var(--l-transition-effect);
 }
 
-lr-btn-ui .icon_left {
+lr-btn-ui .uc-icon_left {
   margin-right: var(--cldtr-gap-mid-1);
   margin-left: 0px;
 }
 
-lr-btn-ui .icon_right {
+lr-btn-ui .uc-icon_right {
   margin-right: 0px;
   margin-left: var(--cldtr-gap-mid-1);
 }
 
-lr-btn-ui .icon_single {
+lr-btn-ui .uc-icon_single {
   margin-right: 0px;
   margin-left: 0px;
 }
 
-lr-btn-ui .icon_hidden {
+lr-btn-ui .uc-icon_hidden {
   display: none;
   margin: 0;
 }
 
-lr-btn-ui.primary {
-  --idle-color-rgb: var(--rgb-primary-accent);
+lr-btn-ui.uc-primary > button {
+  --idle-color-rgb: var(--uc-primary-foreground);
   --idle-brightness: 1;
-  --idle-opacity: 0.6;
-  --hover-color-rgb: var(--idle-color-rgb);
+  --idle-opacity: 1;
+  --idle-background: var(--uc-primary);
+  --hover-color-rgb: var(--uc-primary-foreground);
   --hover-brightness: 1;
   --hover-opacity: 1;
-  --down-color-rgb: var(--hover-color-rgb);
+  --hover-background: var(--uc-primary-hover);
+  --down-color-rgb: var(--uc-primary-foreground);
   --down-brightness: 0.75;
   --down-opacity: 1;
-  --active-color-rgb: var(--rgb-primary-accent);
+  --down-background: var(--uc-primary);
+  --active-color-rgb: var(--uc-primary-foreground);
   --active-brightness: 1;
   --active-opacity: 1;
+  --active-background: var(--uc-primary);
 }
 
-lr-btn-ui.boring {
-  --idle-color-rgb: var(--rgb-text-base);
+lr-btn-ui.uc-primary-icon > button {
+  --idle-color-rgb: var(--uc-primary);
   --idle-brightness: 1;
-  --idle-opacity: 0.6;
-  --hover-color-rgb: var(--rgb-text-base);
+  --idle-opacity: 1;
+  --idle-background: transparent;
+  --hover-color-rgb: var(--uc-primary);
   --hover-brightness: 1;
   --hover-opacity: 1;
-  --down-color-rgb: var(--hover-color-rgb);
+  --hover-background: var(--uc-primary-transparent);
+  --down-color-rgb: var(--uc-primary);
+  --down-brightness: 0.75;
+  --down-opacity: 1;
+  --down-background: var(--uc-primary-transparent);
+  --active-color-rgb: var(--uc-primary-foreground);
+  --active-brightness: 1;
+  --active-opacity: 1;
+  --active-background: var(--uc-primary);
+
+  padding: 0;
+  width: var(--uc-button-size);
+}
+
+lr-btn-ui.uc-secondary > button {
+  --idle-color-rgb: var(--uc-secondary-foreground);
+  --idle-brightness: 1;
+  --idle-opacity: 1;
+  --idle-background: var(--uc-secondary);
+  --hover-color-rgb: var(--uc-secondary-foreground);
+  --hover-brightness: 1;
+  --hover-opacity: 1;
+  --hover-background: var(--uc-secondary-hover);
+  --down-color-rgb: var(--uc-secondary-foreground);
   --down-brightness: 1;
   --down-opacity: 1;
-  --active-color-rgb: var(--rgb-primary-accent);
+  --down-background: var(--uc-secondary-hover);
+  --active-color-rgb: var(--uc-secondary-foreground);
   --active-brightness: 1;
   --active-opacity: 1;
+  --active-background: transparent;
 }
 
-lr-btn-ui.default {
-  --idle-color-rgb: var(--rgb-text-base);
+lr-btn-ui.uc-secondary-icon > button {
+  --idle-color-rgb: var(--uc-secondary-foreground);
   --idle-brightness: 1;
-  --idle-opacity: 0.6;
-  --hover-color-rgb: var(--rgb-primary-accent);
+  --idle-opacity: 1;
+  --idle-background: transparent;
+  --hover-color-rgb: var(--uc-secondary-foreground);
   --hover-brightness: 1;
   --hover-opacity: 1;
-  --down-color-rgb: var(--hover-color-rgb);
+  --hover-background: var(--uc-secondary);
+  --down-color-rgb: var(--uc-secondary-foreground);
+  --down-brightness: 1;
+  --down-opacity: 1;
+  --down-background: var(--uc-secondary);
+  --active-color-rgb: var(--uc-secondary-foreground);
+  --active-brightness: 1;
+  --active-opacity: 1;
+  --active-background: transparent;
+
+  padding: 0;
+  width: var(--uc-button-size);
+}
+
+lr-btn-ui.uc-tab > button {
+  --idle-color-rgb: var(--uc-secondary-foreground);
+  --idle-brightness: 1;
+  --idle-opacity: 1;
+  --idle-background: transparent;
+  --hover-color-rgb: var(--uc-secondary-foreground);
+  --hover-brightness: 1;
+  --hover-opacity: 1;
+  --hover-background: var(--uc-secondary);
+  --down-color-rgb: var(--uc-secondary-foreground);
+  --down-brightness: 1;
+  --down-opacity: 1;
+  --down-background: var(--uc-secondary);
+  --active-color-rgb: var(--uc-secondary-foreground);
+  --active-brightness: 1;
+  --active-opacity: 1;
+  --active-background: transparent;
+
+  padding: 0;
+  width: var(--uc-button-size);
+}
+
+lr-btn-ui.uc-default > button {
+  --idle-color-rgb: var(--uc-secondary-foreground);
+  --idle-brightness: 1;
+  --idle-opacity: 1;
+  --idle-background: var(--uc-secondary);
+  --hover-color-rgb: var(--uc-secondary-foreground);
+  --hover-brightness: 1;
+  --hover-opacity: 1;
+  --hover-background: var(--uc-secondary-hover);
+  --down-color-rgb: var(--uc-secondary-foreground);
   --down-brightness: 0.75;
   --down-opacity: 1;
-  --active-color-rgb: var(--rgb-primary-accent);
+  --down-background: var(--uc-secondary);
+  --active-color-rgb: var(--uc-primary);
   --active-brightness: 1;
   --active-opacity: 1;
+  --active-background: var(--uc-primary-transparent);
 }
 
 lr-line-loader-ui {
@@ -940,16 +1035,16 @@ lr-line-loader-ui {
   opacity: 0.5;
 }
 
-lr-line-loader-ui .inner {
+lr-line-loader-ui .uc-inner {
   width: 25%;
   max-width: 200px;
   height: 100%;
 }
 
-lr-line-loader-ui .line {
+lr-line-loader-ui .uc-line {
   width: 100%;
   height: 100%;
-  background-color: var(--color-primary-accent);
+  background-color: var(--uc-primary);
   transform: translateX(-101%);
   transition: transform 1s;
 }
@@ -958,11 +1053,11 @@ lr-slider-ui {
   --l-thumb-size: 24px;
   --l-zero-dot-size: 5px;
   --l-zero-dot-offset: 2px;
-  --idle-color-rgb: var(--rgb-text-base);
-  --hover-color-rgb: var(--rgb-primary-accent);
-  --down-color-rgb: var(--rgb-primary-accent);
+  --idle-color-rgb: var(--uc-foreground);
+  --hover-color-rgb: var(--uc-primary);
+  --down-color-rgb: var(--uc-primary);
   --color-effect: var(--idle-color-rgb);
-  --l-color: rgb(var(--color-effect));
+  --l-color: var(--color-effect);
 
   position: relative;
   display: flex;
@@ -972,7 +1067,7 @@ lr-slider-ui {
   height: calc(var(--l-thumb-size) + (var(--l-zero-dot-size) + var(--l-zero-dot-offset)) * 2);
 }
 
-lr-slider-ui .thumb {
+lr-slider-ui .uc-thumb {
   position: absolute;
   left: 0px;
   width: var(--l-thumb-size);
@@ -981,10 +1076,12 @@ lr-slider-ui .thumb {
   border-radius: 50%;
   transform: translateX(0px);
   opacity: 1;
-  transition: opacity var(--transition-duration-2);
+  transition:
+    opacity var(--transition-duration-2),
+    background-color var(--transition-duration-2);
 }
 
-lr-slider-ui .steps {
+lr-slider-ui .uc-steps {
   position: absolute;
   display: flex;
   align-items: center;
@@ -996,23 +1093,23 @@ lr-slider-ui .steps {
   padding-left: calc(var(--l-thumb-size) / 2);
 }
 
-lr-slider-ui .border-step {
+lr-slider-ui .uc-border-step {
   width: 0px;
   height: 10px;
   border-right: 1px solid var(--l-color);
   opacity: 0.6;
-  transition: var(--transition-duration-2);
+  transition: border-color var(--transition-duration-2);
 }
 
-lr-slider-ui .minor-step {
+lr-slider-ui .uc-minor-step {
   width: 0px;
   height: 4px;
   border-right: 1px solid var(--l-color);
   opacity: 0.2;
-  transition: var(--transition-duration-2);
+  transition: border-color var(--transition-duration-2);
 }
 
-lr-slider-ui .zero-dot {
+lr-slider-ui .uc-zero-dot {
   position: absolute;
   top: calc(100% - var(--l-zero-dot-offset) * 2);
   left: calc(var(--l-thumb-size) / 2 - var(--l-zero-dot-size) / 2);
@@ -1024,7 +1121,7 @@ lr-slider-ui .zero-dot {
   transition: var(--transition-duration-3);
 }
 
-lr-slider-ui .input {
+lr-slider-ui .uc-input {
   position: absolute;
   width: calc(100% - 10px);
   height: 100%;
@@ -1033,35 +1130,28 @@ lr-slider-ui .input {
   opacity: 0;
 }
 
-lr-presence-toggle.transition {
+lr-presence-toggle.uc-transition {
   transition:
     opacity var(--transition-duration-3),
     visibility var(--transition-duration-3);
 }
 
-lr-presence-toggle.visible {
+lr-presence-toggle.uc-visible {
   opacity: 1;
   pointer-events: inherit;
 }
 
-lr-presence-toggle.hidden {
+lr-presence-toggle.uc-hidden {
   opacity: 0;
   pointer-events: none;
 }
 
-/* TODO: remove ctx-provider */
-/* stylelint-disable-next-line plugin/stylelint-force-app-name-prefix */
-ctx-provider {
-  --color-text-base: black;
-  --color-primary-accent: blue;
+lr-presence-toggle.uc-initial {
+  display: none !important;
+  transition: none !important;
+}
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 190px;
-  height: 40px;
-  padding-right: 10px;
-  padding-left: 10px;
-  background-color: #f5f5f5;
-  border-radius: 3px;
+[lr-cloud-image-editor] [role='button']:focus-visible,
+[lr-cloud-image-editor] button:focus-visible {
+  outline: 1px auto -webkit-focus-ring-color;
 }
diff --git a/blocks/CloudImageEditor/src/css/icons.css b/blocks/CloudImageEditor/src/css/icons.css
index bedf8eb19..7fa07e5fa 100644
--- a/blocks/CloudImageEditor/src/css/icons.css
+++ b/blocks/CloudImageEditor/src/css/icons.css
@@ -1,7 +1,12 @@
-.lr-cloud-image-editor lr-icon {
+:where([lr-cloud-image-editor]) lr-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
 }
+
+:where([lr-cloud-image-editor]) lr-icon svg {
+  width: calc(var(--uc-button-size) / 2);
+  height: calc(var(--uc-button-size) / 2);
+}
diff --git a/blocks/CloudImageEditor/src/elements/button/LrBtnUi.js b/blocks/CloudImageEditor/src/elements/button/LrBtnUi.js
index 993954036..ca09ce851 100644
--- a/blocks/CloudImageEditor/src/elements/button/LrBtnUi.js
+++ b/blocks/CloudImageEditor/src/elements/button/LrBtnUi.js
@@ -15,6 +15,8 @@ export class LrBtnUi extends Block {
       icon: '',
       iconCss: this._iconCss(),
       theme: null,
+      'aria-role': '',
+      'aria-controls': '',
     };
 
     this.defineAccessor('active', (active) => {
@@ -27,11 +29,11 @@ export class LrBtnUi extends Block {
   }
 
   _iconCss() {
-    return classNames('icon', {
-      icon_left: !this._iconReversed,
-      icon_right: this._iconReversed,
-      icon_hidden: this._iconHidden,
-      icon_single: this._iconSingle,
+    return classNames('uc-icon', {
+      'uc-icon_left': !this._iconReversed,
+      'uc-icon_right': this._iconReversed,
+      'uc-icon_hidden': this._iconHidden,
+      'uc-icon_single': this._iconSingle,
     });
   }
 
@@ -46,7 +48,7 @@ export class LrBtnUi extends Block {
 
     this.sub('theme', (theme) => {
       if (theme !== 'custom') {
-        this.className = theme;
+        this.className = `uc-${theme}`;
       }
     });
 
@@ -54,13 +56,17 @@ export class LrBtnUi extends Block {
       this._iconSingle = false;
     });
 
-    this.setAttribute('role', 'button');
-    if (this.tabIndex === -1) {
-      this.tabIndex = 0;
-    }
     if (!this.hasAttribute('theme')) {
       this.setAttribute('theme', 'default');
     }
+
+    this.defineAccessor('aria-role', (value) => {
+      this.$['aria-role'] = value || '';
+    });
+
+    this.defineAccessor('aria-controls', (value) => {
+      this.$['aria-controls'] = value || '';
+    });
   }
 
   set reverse(val) {
@@ -73,9 +79,12 @@ export class LrBtnUi extends Block {
     }
   }
 }
+
 LrBtnUi.bindAttributes({ text: 'text', icon: 'icon', reverse: 'reverse', theme: 'theme' });
 
 LrBtnUi.template = /* HTML */ `
-  <lr-icon set="className: iconCss; @name: icon; @hidden: !icon"></lr-icon>
-  <div class="text">{{text}}</div>
+  <button type="button" set="@role:aria-role; @aria-controls: aria-controls">
+    <lr-icon set="className: iconCss; @name: icon; @hidden: !icon"></lr-icon>
+    <div class="uc-text">{{text}}</div>
+  </button>
 `;
diff --git a/blocks/CloudImageEditor/src/elements/line-loader/LineLoaderUi.js b/blocks/CloudImageEditor/src/elements/line-loader/LineLoaderUi.js
index e66cadfb3..6cb45e6d4 100644
--- a/blocks/CloudImageEditor/src/elements/line-loader/LineLoaderUi.js
+++ b/blocks/CloudImageEditor/src/elements/line-loader/LineLoaderUi.js
@@ -46,7 +46,7 @@ export class LineLoaderUi extends Block {
 }
 
 LineLoaderUi.template = /* HTML */ `
-  <div class="inner">
-    <div class="line" ref="line-el"></div>
+  <div class="uc-inner">
+    <div class="uc-line" ref="line-el"></div>
   </div>
 `;
diff --git a/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js b/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js
index 35b16e57c..b53453378 100644
--- a/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js
+++ b/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js
@@ -10,9 +10,9 @@ import { Block } from '../../../../../abstract/Block.js';
 
 /** @type {Style} */
 const DEFAULT_STYLE = {
-  transition: 'transition',
-  visible: 'visible',
-  hidden: 'hidden',
+  transition: 'uc-transition',
+  visible: 'uc-visible',
+  hidden: 'uc-hidden',
 };
 
 export class PresenceToggle extends Block {
@@ -55,14 +55,17 @@ export class PresenceToggle extends Block {
 
   initCallback() {
     super.initCallback();
-    this.setAttribute('hidden', '');
+
+    this.classList.toggle('uc-initial', true);
 
     if (!this._externalTransitions) {
       this.classList.add(DEFAULT_STYLE.transition);
     }
 
     this._handleVisible();
-    setTimeout(() => this.removeAttribute('hidden'), 0);
+    setTimeout(() => {
+      this.classList.toggle('uc-initial', false);
+    }, 0);
   }
 }
-PresenceToggle.template = /* HTML */ ` <slot></slot> `;
+PresenceToggle.template = /* HTML */ `<slot></slot> `;
diff --git a/blocks/CloudImageEditor/src/elements/slider/SliderUi.js b/blocks/CloudImageEditor/src/elements/slider/SliderUi.js
index bab0180bc..4548c34b2 100644
--- a/blocks/CloudImageEditor/src/elements/slider/SliderUi.js
+++ b/blocks/CloudImageEditor/src/elements/slider/SliderUi.js
@@ -167,13 +167,12 @@ export class SliderUi extends Block {
   }
 }
 SliderUi.template = /* HTML */ `
-  <div class="steps" ref="steps-el"></div>
-  <div ref="thumb-el" class="thumb"></div>
+  <div class="uc-steps" ref="steps-el"></div>
+  <div ref="thumb-el" class="uc-thumb"></div>
   <input
-    class="input"
+    class="uc-input"
     type="range"
     ref="input-el"
-    tabindex="0"
     set="oninput: on.sliderInput; onchange: on.sliderChange; @min: min; @max: max; @value: defaultValue;"
   />
 `;
diff --git a/blocks/CloudImageEditor/src/icons/closeMax.svg b/blocks/CloudImageEditor/src/icons/closeMax.svg
index 3e621f4de..88e57184c 100644
--- a/blocks/CloudImageEditor/src/icons/closeMax.svg
+++ b/blocks/CloudImageEditor/src/icons/closeMax.svg
@@ -1,3 +1,3 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
-  <path stroke-linejoin="round" fill="none" stroke="currentColor" stroke-width="1.2" fill-rule="evenodd" d="M3 3l14 14m0-14L3 17"></path>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
+  <path fill-rule="evenodd" d="M8.232 10 3.585 5.353l1.768-1.768L10 8.232l4.648-4.647 1.767 1.768L11.768 10l4.647 4.648-1.767 1.767L10 11.768l-4.647 4.647-1.768-1.767L8.232 10Z" clip-rule="evenodd"/>
 </svg>
diff --git a/blocks/CloudImageEditor/src/icons/done.svg b/blocks/CloudImageEditor/src/icons/done.svg
index 87a628a61..78ff9b54e 100644
--- a/blocks/CloudImageEditor/src/icons/done.svg
+++ b/blocks/CloudImageEditor/src/icons/done.svg
@@ -1,3 +1,3 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
-  <path stroke-linejoin="round" fill="none" stroke="currentColor" stroke-width="1.2" fill-rule="evenodd" d="M1 10.6316l5.68421 5.6842L19 4"></path>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
+  <path fill-rule="evenodd" d="m18.057 6.333-9.365 9.125a1.25 1.25 0 0 1-1.768-.023L1.92 10.296l1.791-1.744 4.132 4.243 8.47-8.253 1.744 1.79Z" clip-rule="evenodd"/>
 </svg>
diff --git a/blocks/CloudImageEditor/src/icons/edit-file.svg b/blocks/CloudImageEditor/src/icons/edit-file.svg
new file mode 100644
index 000000000..c88b71952
--- /dev/null
+++ b/blocks/CloudImageEditor/src/icons/edit-file.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="currentColor" viewBox="0 0 25 24">
+  <path fill-rule="evenodd" d="M18.558 2.804a.78.78 0 0 0-.557.235l-.008.007-2.472 2.46 3.847 3.848 2.46-2.473.004-.003a.78.78 0 0 0 0-1.108l-.004-.003-2.712-2.728a.78.78 0 0 0-.558-.235Zm-.248 7.613-3.852-3.852-8.93 8.887-1.516 5.41 5.41-1.515 8.888-8.93Zm-.636-8.934a2.28 2.28 0 0 1 2.512.505l2.702 2.717.002.002a2.278 2.278 0 0 1 0 3.234l-.002.002-12.541 12.602a.75.75 0 0 1-.33.193l-6.884 1.928a.75.75 0 0 1-.925-.924l1.928-6.885a.75.75 0 0 1 .193-.33l12.603-12.54a2.28 2.28 0 0 1 .742-.504Z" clip-rule="evenodd"/>
+</svg>
diff --git a/blocks/CloudImageEditor/src/icons/original.svg b/blocks/CloudImageEditor/src/icons/original.svg
index abe71893a..906db13f9 100644
--- a/blocks/CloudImageEditor/src/icons/original.svg
+++ b/blocks/CloudImageEditor/src/icons/original.svg
@@ -1,3 +1,3 @@
 <svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
-  <path stroke-linejoin="round" fill="none" stroke="currentColor" stroke-width="1.2" fill-rule="evenodd" d="M0 40L40-.00000133"></path>
+  <path stroke-linejoin="round" fill="none" stroke="currentColor" stroke-width="1.5" fill-rule="evenodd" d="M0 40L40-.00000133"></path>
 </svg>
diff --git a/blocks/CloudImageEditor/src/svg-sprite.js b/blocks/CloudImageEditor/src/svg-sprite.js
index 89542dbfc..832ac3c9a 100644
--- a/blocks/CloudImageEditor/src/svg-sprite.js
+++ b/blocks/CloudImageEditor/src/svg-sprite.js
@@ -1 +1 @@
-export default "<svg width='0' height='0' style='position:absolute'><symbol viewBox='0 0 20 20' id='uc-icon-brightness' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M15 10a5 5 0 0 1-5 5m5-5a5 5 0 0 0-5-5m5 5h-5m0 5a5 5 0 0 1 0-10m0 10V5m0 15v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05m-.626 2.45H10m4.324 5H10'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-closeMax' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='m3 3 14 14m0-14L3 17'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-contrast' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 10a8 8 0 1 0 16 0 8 8 0 1 0-16 0m8-8v16m8-8h-8m7.598 2.5H10m6.24 2.5H10m7.6-7.5H10M16.242 5H10'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-crop' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M20 14H7.005C6.45 14 6 13.55 6 12.995V0M0 6h13.067c.515 0 .933.418.933.933V20M14.5.4 13 2l1.5 1.6M13 2h2a3 3 0 0 1 3 3v2M5.5 19.6 7 18l-1.5-1.6M7 18H5a3 3 0 0 1-3-3v-2'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-done' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='m1 10.632 5.684 5.684L19 4'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-enhance' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19 13h-2m0 0a4 4 0 0 1-4-4m4 4a4 4 0 0 0-4 4m0-8V7m0 2a4 4 0 0 1-4 4m-2 0h2m0 0a4 4 0 0 1 4 4m0 0v2M8 8.5H6.5m0 0a2 2 0 0 1-2-2m2 2a2 2 0 0 0-2 2m0-4V5m0 1.5a2 2 0 0 1-2 2M1 8.5h1.5m0 0a2 2 0 0 1 2 2m0 0V12M12 3h-1m0 0a1 1 0 0 1-1-1m1 1a1 1 0 0 0-1 1m0-2V1m0 1a1 1 0 0 1-1 1M8 3h1m0 0a1 1 0 0 1 1 1m0 0v1'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-exposure' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M10 20v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05M5 10a5 5 0 1 0 10 0 5 5 0 1 0-10 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-filters' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M4.5 6.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m-3.5 6a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m7 0a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-flip' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19.6 5 18 3.5 16.4 5m3.2 10L18 16.5 16.4 15M18 3.523v12.954M3.3 8.5h10.654c.301 0 .415-.395.159-.554L3.459 1.286A.3.3 0 0 0 3 1.542V8.2a.3.3 0 0 0 .3.3zm0 3h10.654c.301 0 .415.395.159.554l-10.654 6.66A.3.3 0 0 1 3 18.458v-6.66a.3.3 0 0 1 .3-.3z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-gamma' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M17 3C9 6 2.5 11.5 2.5 17.5m0 0h1m-1 0v-1m14 1h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3-14v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-mirror' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M5 .4 3.5 2 5 3.6M15 .4 16.5 2 15 3.6M3.52 2h12.957M8.5 16.7V6.046c0-.301-.394-.415-.554-.159L1.287 16.541a.3.3 0 0 0 .255.459H8.2a.3.3 0 0 0 .3-.3zm3 0V6.046c0-.301.395-.415.555-.159l6.659 10.654a.3.3 0 0 1-.255.459H11.8a.3.3 0 0 1-.3-.3z'/></symbol><symbol viewBox='0 0 40 40' id='uc-icon-original' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M0 40 40 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-rotate' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M13.5.4 12 2l1.5 1.6M12.023 2H14.4A3.6 3.6 0 0 1 18 5.6V8M4 17h9a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-sad' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 17c4.418-4 11.582-4 16 0M16.5 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-11 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-saturation' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='ouc-icon-id__a' x1='10.001' y1='1' x2='10.001' y2='19' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs><circle cx='10.001' cy='10' r='9' transform='rotate(90 10 10)' fill='url(#ouc-icon-id__a)'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-slider' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M0 10h11m0 0a2 2 0 1 0 4 0m-4 0a2 2 0 1 1 4 0m0 0h5'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-tuning' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M8 10h11M1 10h4M1 4.5h11m3 0h4m-18 11h11m3 0h4m-7-11a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0M5 10a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0m7 5.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-vibrance' xmlns='http://www.w3.org/2000/svg'><path d='M2.125 5.64A8.96 8.96 0 0 0 1.001 10a8.96 8.96 0 0 0 1.124 4.36V5.64z' fill='url(#ruc-icon-id__a)'/><path d='M2.875 15.499V4.502a9.053 9.053 0 0 1 1.75-1.72v14.437a9.05 9.05 0 0 1-1.75-1.72z' fill='url(#ruc-icon-id__b)'/><path d='M5.375 17.722c.548.33 1.134.601 1.75.809V1.469a8.956 8.956 0 0 0-1.75.81v15.443z' fill='url(#ruc-icon-id__c)'/><path d='M7.875 1.253v17.495c.564.136 1.15.22 1.75.244V1.008a9 9 0 0 0-1.75.245z' fill='url(#ruc-icon-id__d)'/><path d='M10.375 1.008v17.984a9 9 0 0 0 1.75-.244V1.252a9 9 0 0 0-1.75-.244z' fill='url(#ruc-icon-id__e)'/><path d='M12.875 1.469V18.53a8.957 8.957 0 0 0 1.75-.808V2.277a8.957 8.957 0 0 0-1.75-.808z' fill='url(#ruc-icon-id__f)'/><path d='M15.375 2.78v14.44a9.053 9.053 0 0 0 1.75-1.72v-11a9.054 9.054 0 0 0-1.75-1.72z' fill='url(#ruc-icon-id__g)'/><path d='M17.875 5.638v8.724A8.959 8.959 0 0 0 19.001 10a8.96 8.96 0 0 0-1.126-4.362z' fill='url(#ruc-icon-id__h)'/><defs><linearGradient id='ruc-icon-id__a' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='ruc-icon-id__b' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='ruc-icon-id__c' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='ruc-icon-id__d' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='ruc-icon-id__e' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='ruc-icon-id__f' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='ruc-icon-id__g' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='ruc-icon-id__h' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs></symbol><symbol viewBox='0 0 20 20' id='uc-icon-warmth' xmlns='http://www.w3.org/2000/svg'><path d='m7.5 13.05.429.42.171-.175v-.244h-.6zm5 0h-.6v.245l.172.175.428-.42zM8.1 3.5c0-1.05.85-1.9 1.9-1.9V.4a3.1 3.1 0 0 0-3.1 3.1h1.2zm0 9.55V3.5H6.9v9.55h1.2zm-1 2.45c0-.79.315-1.506.829-2.03l-.858-.84A4.088 4.088 0 0 0 5.9 15.5h1.2zm2.9 2.9a2.9 2.9 0 0 1-2.9-2.9H5.9a4.1 4.1 0 0 0 4.1 4.1v-1.2zm2.9-2.9a2.9 2.9 0 0 1-2.9 2.9v1.2a4.1 4.1 0 0 0 4.1-4.1h-1.2zm-.829-2.03c.514.524.829 1.24.829 2.03h1.2c0-1.117-.447-2.13-1.171-2.87l-.858.84zM11.9 3.5v9.55h1.2V3.5h-1.2zM10 1.6c1.05 0 1.9.85 1.9 1.9h1.2A3.1 3.1 0 0 0 10 .4v1.2z' fill='currentColor'/><path d='M10 14V8' stroke='currentColor' stroke-width='1.2' stroke-linecap='round'/><path d='M14 3h3m-3 3h3m-3 3h3m-8 6.5a1 1 0 1 0 2 0 1 1 0 1 0-2 0' stroke='currentColor' stroke-width='1.2'/></symbol></svg>";
+export default "<svg width='0' height='0' style='position:absolute'><symbol viewBox='0 0 20 20' id='uc-icon-brightness' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M15 10a5 5 0 0 1-5 5m5-5a5 5 0 0 0-5-5m5 5h-5m0 5a5 5 0 0 1 0-10m0 10V5m0 15v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05m-.626 2.45H10m4.324 5H10'/></symbol><symbol fill='currentColor' viewBox='0 0 20 20' id='uc-icon-closeMax' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8.232 10 3.585 5.353l1.768-1.768L10 8.232l4.648-4.647 1.767 1.768L11.768 10l4.647 4.648-1.767 1.767L10 11.768l-4.647 4.647-1.768-1.767L8.232 10Z' clip-rule='evenodd'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-contrast' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 10a8 8 0 1 0 16 0 8 8 0 1 0-16 0m8-8v16m8-8h-8m7.598 2.5H10m6.24 2.5H10m7.6-7.5H10M16.242 5H10'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-crop' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M20 14H7.005C6.45 14 6 13.55 6 12.995V0M0 6h13.067c.515 0 .933.418.933.933V20M14.5.4 13 2l1.5 1.6M13 2h2a3 3 0 0 1 3 3v2M5.5 19.6 7 18l-1.5-1.6M7 18H5a3 3 0 0 1-3-3v-2'/></symbol><symbol fill='currentColor' viewBox='0 0 20 20' id='uc-icon-done' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='m18.057 6.333-9.365 9.125a1.25 1.25 0 0 1-1.768-.023L1.92 10.296l1.791-1.744 4.132 4.243 8.47-8.253 1.744 1.79Z' clip-rule='evenodd'/></symbol><symbol fill='currentColor' viewBox='0 0 25 24' id='uc-icon-edit-file' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M18.558 2.804a.78.78 0 0 0-.557.235l-.008.007-2.472 2.46 3.847 3.848 2.46-2.473.004-.003a.78.78 0 0 0 0-1.108l-.004-.003-2.712-2.728a.78.78 0 0 0-.558-.235Zm-.248 7.613-3.852-3.852-8.93 8.887-1.516 5.41 5.41-1.515 8.888-8.93Zm-.636-8.934a2.28 2.28 0 0 1 2.512.505l2.702 2.717.002.002a2.278 2.278 0 0 1 0 3.234l-.002.002-12.541 12.602a.75.75 0 0 1-.33.193l-6.884 1.928a.75.75 0 0 1-.925-.924l1.928-6.885a.75.75 0 0 1 .193-.33l12.603-12.54a2.28 2.28 0 0 1 .742-.504Z' clip-rule='evenodd'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-enhance' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19 13h-2m0 0a4 4 0 0 1-4-4m4 4a4 4 0 0 0-4 4m0-8V7m0 2a4 4 0 0 1-4 4m-2 0h2m0 0a4 4 0 0 1 4 4m0 0v2M8 8.5H6.5m0 0a2 2 0 0 1-2-2m2 2a2 2 0 0 0-2 2m0-4V5m0 1.5a2 2 0 0 1-2 2M1 8.5h1.5m0 0a2 2 0 0 1 2 2m0 0V12M12 3h-1m0 0a1 1 0 0 1-1-1m1 1a1 1 0 0 0-1 1m0-2V1m0 1a1 1 0 0 1-1 1M8 3h1m0 0a1 1 0 0 1 1 1m0 0v1'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-exposure' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M10 20v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05M5 10a5 5 0 1 0 10 0 5 5 0 1 0-10 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-filters' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M4.5 6.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m-3.5 6a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m7 0a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-flip' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19.6 5 18 3.5 16.4 5m3.2 10L18 16.5 16.4 15M18 3.523v12.954M3.3 8.5h10.654c.301 0 .415-.395.159-.554L3.459 1.286A.3.3 0 0 0 3 1.542V8.2a.3.3 0 0 0 .3.3zm0 3h10.654c.301 0 .415.395.159.554l-10.654 6.66A.3.3 0 0 1 3 18.458v-6.66a.3.3 0 0 1 .3-.3z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-gamma' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M17 3C9 6 2.5 11.5 2.5 17.5m0 0h1m-1 0v-1m14 1h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3-14v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-mirror' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M5 .4 3.5 2 5 3.6M15 .4 16.5 2 15 3.6M3.52 2h12.957M8.5 16.7V6.046c0-.301-.394-.415-.554-.159L1.287 16.541a.3.3 0 0 0 .255.459H8.2a.3.3 0 0 0 .3-.3zm3 0V6.046c0-.301.395-.415.555-.159l6.659 10.654a.3.3 0 0 1-.255.459H11.8a.3.3 0 0 1-.3-.3z'/></symbol><symbol viewBox='0 0 40 40' id='uc-icon-original' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.5' d='M0 40 40 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-rotate' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M13.5.4 12 2l1.5 1.6M12.023 2H14.4A3.6 3.6 0 0 1 18 5.6V8M4 17h9a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-sad' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 17c4.418-4 11.582-4 16 0M16.5 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-11 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-saturation' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='puc-icon-id__a' x1='10.001' y1='1' x2='10.001' y2='19' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs><circle cx='10.001' cy='10' r='9' transform='rotate(90 10 10)' fill='url(#puc-icon-id__a)'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-slider' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M0 10h11m0 0a2 2 0 1 0 4 0m-4 0a2 2 0 1 1 4 0m0 0h5'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-tuning' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M8 10h11M1 10h4M1 4.5h11m3 0h4m-18 11h11m3 0h4m-7-11a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0M5 10a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0m7 5.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-vibrance' xmlns='http://www.w3.org/2000/svg'><path d='M2.125 5.64A8.96 8.96 0 0 0 1.001 10a8.96 8.96 0 0 0 1.124 4.36V5.64z' fill='url(#suc-icon-id__a)'/><path d='M2.875 15.499V4.502a9.053 9.053 0 0 1 1.75-1.72v14.437a9.05 9.05 0 0 1-1.75-1.72z' fill='url(#suc-icon-id__b)'/><path d='M5.375 17.722c.548.33 1.134.601 1.75.809V1.469a8.956 8.956 0 0 0-1.75.81v15.443z' fill='url(#suc-icon-id__c)'/><path d='M7.875 1.253v17.495c.564.136 1.15.22 1.75.244V1.008a9 9 0 0 0-1.75.245z' fill='url(#suc-icon-id__d)'/><path d='M10.375 1.008v17.984a9 9 0 0 0 1.75-.244V1.252a9 9 0 0 0-1.75-.244z' fill='url(#suc-icon-id__e)'/><path d='M12.875 1.469V18.53a8.957 8.957 0 0 0 1.75-.808V2.277a8.957 8.957 0 0 0-1.75-.808z' fill='url(#suc-icon-id__f)'/><path d='M15.375 2.78v14.44a9.053 9.053 0 0 0 1.75-1.72v-11a9.054 9.054 0 0 0-1.75-1.72z' fill='url(#suc-icon-id__g)'/><path d='M17.875 5.638v8.724A8.959 8.959 0 0 0 19.001 10a8.96 8.96 0 0 0-1.126-4.362z' fill='url(#suc-icon-id__h)'/><defs><linearGradient id='suc-icon-id__a' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__b' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__c' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__d' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__e' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__f' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__g' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__h' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs></symbol><symbol viewBox='0 0 20 20' id='uc-icon-warmth' xmlns='http://www.w3.org/2000/svg'><path d='m7.5 13.05.429.42.171-.175v-.244h-.6zm5 0h-.6v.245l.172.175.428-.42zM8.1 3.5c0-1.05.85-1.9 1.9-1.9V.4a3.1 3.1 0 0 0-3.1 3.1h1.2zm0 9.55V3.5H6.9v9.55h1.2zm-1 2.45c0-.79.315-1.506.829-2.03l-.858-.84A4.088 4.088 0 0 0 5.9 15.5h1.2zm2.9 2.9a2.9 2.9 0 0 1-2.9-2.9H5.9a4.1 4.1 0 0 0 4.1 4.1v-1.2zm2.9-2.9a2.9 2.9 0 0 1-2.9 2.9v1.2a4.1 4.1 0 0 0 4.1-4.1h-1.2zm-.829-2.03c.514.524.829 1.24.829 2.03h1.2c0-1.117-.447-2.13-1.171-2.87l-.858.84zM11.9 3.5v9.55h1.2V3.5h-1.2zM10 1.6c1.05 0 1.9.85 1.9 1.9h1.2A3.1 3.1 0 0 0 10 .4v1.2z' fill='currentColor'/><path d='M10 14V8' stroke='currentColor' stroke-width='1.2' stroke-linecap='round'/><path d='M14 3h3m-3 3h3m-3 3h3m-8 6.5a1 1 0 1 0 2 0 1 1 0 1 0-2 0' stroke='currentColor' stroke-width='1.2'/></symbol></svg>";
diff --git a/blocks/CloudImageEditor/src/template.js b/blocks/CloudImageEditor/src/template.js
index 0d69e4cba..6f3e042e5 100644
--- a/blocks/CloudImageEditor/src/template.js
+++ b/blocks/CloudImageEditor/src/template.js
@@ -3,32 +3,32 @@ import svgIconsSprite from './svg-sprite.js';
 
 export const TEMPLATE = /* HTML */ `
   ${svgIconsSprite}
-  <div class="wrapper wrapper_desktop">
-    <lr-presence-toggle class="network_problems_splash" set="visible: presence.networkProblems;">
-      <div class="network_problems_content">
-        <div class="network_problems_icon">
+  <div class="uc-wrapper uc-wrapper_desktop">
+    <lr-presence-toggle class="uc-network_problems_splash" set="visible: presence.networkProblems;">
+      <div class="uc-network_problems_content">
+        <div class="uc-network_problems_icon">
           <lr-icon name="sad"></lr-icon>
         </div>
-        <div class="network_problems_text">Network error</div>
+        <div class="uc-network_problems_text">Network error</div>
       </div>
-      <div class="network_problems_footer">
+      <div class="uc-network_problems_footer">
         <lr-btn-ui theme="primary" text="Retry" set="onclick: *on.retryNetwork"></lr-btn-ui>
       </div>
     </lr-presence-toggle>
-    <div class="viewport">
-      <div class="file_type_outer">
-        <div class="file_type">{{fileType}}</div>
+    <div class="uc-viewport">
+      <div class="uc-file_type_outer">
+        <div class="uc-file_type">{{fileType}}</div>
       </div>
-      <div class="image_container" ref="img-container-el">
-        <img src="${TRANSPARENT_PIXEL_SRC}" class="image image_visible_from_editor" ref="img-el" />
+      <div class="uc-image_container" ref="img-container-el">
+        <img src="${TRANSPARENT_PIXEL_SRC}" class="uc-image uc-image_visible_from_editor" ref="img-el" />
         <lr-editor-image-cropper ref="cropper-el"></lr-editor-image-cropper>
         <lr-editor-image-fader ref="fader-el"></lr-editor-image-fader>
       </div>
-      <div class="info_pan">{{msg}}</div>
+      <div class="uc-info_pan">{{msg}}</div>
     </div>
-    <div class="toolbar">
+    <div class="uc-toolbar">
       <lr-line-loader-ui set="active: showLoader"></lr-line-loader-ui>
-      <div class="toolbar_content toolbar_content__editor">
+      <div class="uc-toolbar_content uc-toolbar_content__editor">
         <lr-editor-toolbar></lr-editor-toolbar>
       </div>
     </div>
diff --git a/blocks/CloudImageEditorActivity/index.css b/blocks/CloudImageEditorActivity/index.css
index 58dd3fb84..8ad271e8d 100644
--- a/blocks/CloudImageEditorActivity/index.css
+++ b/blocks/CloudImageEditorActivity/index.css
@@ -4,10 +4,10 @@ lr-cloud-image-editor-activity {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background-color: var(--clr-background-light);
+  background-color: var(--uc-background);
 }
 
-lr-modal lr-cloud-image-editor-activity {
-  width: min(calc(var(--modal-max-w) - var(--gap-mid) * 2), calc(100vw - var(--gap-mid) * 2));
+[lr-modal] lr-cloud-image-editor-activity {
+  width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
   height: var(--modal-content-height-fill, 100%);
 }
diff --git a/blocks/Color/Color.js b/blocks/Color/Color.js
deleted file mode 100644
index 479d30d0e..000000000
--- a/blocks/Color/Color.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Block } from '../../abstract/Block.js';
-
-export class Color extends Block {
-  init$ = {
-    ...this.init$,
-    inputOpacity: 0,
-    '*selectedColor': '#f00',
-    onChange: () => {
-      this.$['*selectedColor'] = this.ref.input['value'];
-    },
-  };
-}
-
-Color.template = /* HTML */ `
-  <input ref="input" type="color" set="oninput: onChange; style.opacity: inputOpacity" />
-  <div class="current-color" set="style.backgroundColor: *selectedColor"></div>
-`;
diff --git a/blocks/Color/color.css b/blocks/Color/color.css
deleted file mode 100644
index a79312818..000000000
--- a/blocks/Color/color.css
+++ /dev/null
@@ -1,32 +0,0 @@
-lr-color {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--ui-size);
-  height: var(--ui-size);
-  overflow: hidden;
-  background-color: var(--clr-background);
-  cursor: pointer;
-}
-
-lr-color[current] {
-  background-color: var(--clr-txt);
-}
-
-lr-color input[type='color'] {
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-}
-
-lr-color .current-color {
-  position: absolute;
-  width: 50%;
-  height: 50%;
-  border: 2px solid #fff;
-  border-radius: 100%;
-  pointer-events: none;
-}
diff --git a/blocks/ConfirmationDialog/ConfirmationDialog.js b/blocks/ConfirmationDialog/ConfirmationDialog.js
deleted file mode 100644
index 8391f9028..000000000
--- a/blocks/ConfirmationDialog/ConfirmationDialog.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import { ActivityBlock } from '../../abstract/ActivityBlock.js';
-
-export class UiConfirmation {
-  captionL10nStr = 'confirm-your-action';
-  messageL10Str = 'are-you-sure';
-  confirmL10nStr = 'yes';
-  denyL10nStr = 'no';
-  confirmAction() {
-    console.log('Confirmed');
-  }
-  denyAction() {
-    this['historyBack']();
-  }
-}
-
-export class ConfirmationDialog extends ActivityBlock {
-  activityType = ActivityBlock.activities.CONFIRMATION;
-
-  /** @private */
-  _defaults = new UiConfirmation();
-
-  init$ = {
-    ...this.init$,
-    activityCaption: '',
-    messageTxt: '',
-    confirmBtnTxt: '',
-    denyBtnTxt: '',
-    '*confirmation': null,
-    onConfirm: this._defaults.confirmAction,
-    onDeny: this._defaults.denyAction.bind(this),
-  };
-
-  initCallback() {
-    super.initCallback();
-    this.set$({
-      messageTxt: this.l10n(this._defaults.messageL10Str),
-      confirmBtnTxt: this.l10n(this._defaults.confirmL10nStr),
-      denyBtnTxt: this.l10n(this._defaults.denyL10nStr),
-    });
-    this.sub('*confirmation', (/** @type {UiConfirmation} */ cfn) => {
-      if (!cfn) {
-        return;
-      }
-      this.set$({
-        '*currentActivity': ActivityBlock.activities.CONFIRMATION,
-        activityCaption: this.l10n(cfn.captionL10nStr),
-        messageTxt: this.l10n(cfn.messageL10Str),
-        confirmBtnTxt: this.l10n(cfn.confirmL10nStr),
-        denyBtnTxt: this.l10n(cfn.denyL10nStr),
-        onDeny: () => {
-          cfn.denyAction();
-        },
-        onConfirm: () => {
-          cfn.confirmAction();
-        },
-      });
-    });
-  }
-}
-
-ConfirmationDialog.template = /* HTML */ `
-  <lr-activity-header>
-    <button type="button" class="mini-btn" set="onclick: *historyBack">
-      <lr-icon name="back"></lr-icon>
-    </button>
-    <span>{{activityCaption}}</span>
-    <button type="button" class="mini-btn close-btn" set="onclick: *closeModal">
-      <lr-icon name="close"></lr-icon>
-    </button>
-  </lr-activity-header>
-
-  <div class="message">{{messageTxt}}</div>
-  <div class="toolbar">
-    <button type="button" class="deny-btn secondary-btn" set="onclick: onDeny">{{denyBtnTxt}}</button>
-    <button type="button" class="confirm-btn primary-btn" set="onclick: onConfirm">{{confirmBtnTxt}}</button>
-  </div>
-`;
diff --git a/blocks/ConfirmationDialog/confirmation.css b/blocks/ConfirmationDialog/confirmation.css
deleted file mode 100644
index f84b3a22d..000000000
--- a/blocks/ConfirmationDialog/confirmation.css
+++ /dev/null
@@ -1,21 +0,0 @@
-lr-confirmation-dialog {
-  display: block;
-  padding: var(--gap-mid);
-  padding-top: var(--gap-max);
-}
-
-lr-confirmation-dialog .message {
-  display: flex;
-  justify-content: center;
-  padding: var(--gap-mid);
-  padding-bottom: var(--gap-max);
-  font-weight: 500;
-  font-size: 1.1em;
-}
-
-lr-confirmation-dialog .toolbar {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--gap-mid);
-  margin-top: var(--gap-mid);
-}
diff --git a/blocks/Copyright/Copyright.js b/blocks/Copyright/Copyright.js
index df14c0b2f..30db0a2de 100644
--- a/blocks/Copyright/Copyright.js
+++ b/blocks/Copyright/Copyright.js
@@ -17,7 +17,7 @@ export class Copyright extends Block {
     <a
       href="https://uploadcare.com/?utm_source=copyright&utm_medium=referral&utm_campaign=v4"
       target="_blank noopener"
-      class="credits"
+      class="uc-credits"
       >Powered by Uploadcare</a
     >
   `;
diff --git a/blocks/Copyright/copyright.css b/blocks/Copyright/copyright.css
index 919645431..3be4083f4 100644
--- a/blocks/Copyright/copyright.css
+++ b/blocks/Copyright/copyright.css
@@ -1,17 +1,31 @@
 lr-copyright {
   display: flex;
-  align-items: flex-end;
+  width: 100%;
+  justify-content: center;
 }
 
-lr-copyright .credits {
-  padding: 0 var(--gap-mid) var(--gap-mid) calc(var(--gap-mid) * 1.5);
-  color: var(--clr-txt-lightest);
+lr-copyright .uc-credits {
+  all: unset;
+  position: absolute;
+  bottom: 12px;
+  background-color: var(--uc-background);
+  padding: 2px 5px;
+  border-radius: 6px;
+  color: var(--uc-muted-foreground);
   font-weight: normal;
-  font-size: 0.85em;
-  opacity: 0.7;
-  transition: var(--transition-duration) ease;
+  font-size: 12px;
+  opacity: 0.9;
+  cursor: pointer;
+  transition:
+    opacity var(--uc-transition),
+    background-color var(--uc-transition);
 }
 
-lr-copyright .credits:hover {
+lr-copyright .uc-credits:focus-visible {
+  outline: 1px auto -webkit-focus-ring-color;
+}
+
+lr-copyright .uc-credits:hover {
   opacity: 1;
+  background-color: var(--uc-muted);
 }
diff --git a/blocks/DropArea/DropArea.js b/blocks/DropArea/DropArea.js
index 01225a655..ebe5f600b 100644
--- a/blocks/DropArea/DropArea.js
+++ b/blocks/DropArea/DropArea.js
@@ -12,6 +12,7 @@ const GLOBAL_CTX_NAME = 'lr-drop-area';
 const REGISTRY_KEY = `${GLOBAL_CTX_NAME}/registry`;
 
 export class DropArea extends UploaderBlock {
+  static styleAttrs = [...super.styleAttrs, 'lr-drop-area'];
   constructor() {
     super();
 
@@ -108,9 +109,9 @@ export class DropArea extends UploaderBlock {
 
         items.forEach((/** @type {import('./getDropItems.js').DropItem} */ item) => {
           if (item.type === 'url') {
-            this.addFileFromUrl(item.url, { source: UploadSource.DROP_AREA });
+            this.api.addFileFromUrl(item.url, { source: UploadSource.DROP_AREA });
           } else if (item.type === 'file') {
-            this.addFileFromObject(item.file, { source: UploadSource.DROP_AREA, fullPath: item.fullPath });
+            this.api.addFileFromObject(item.file, { source: UploadSource.DROP_AREA, fullPath: item.fullPath });
           }
         });
         if (this.uploadCollection.size) {
@@ -164,10 +165,22 @@ export class DropArea extends UploaderBlock {
     });
 
     if (this.$.isClickable) {
-      // @private
-      this._onAreaClicked = () => {
-        this.openSystemDialog();
+      /**
+       * @private
+       * @param {KeyboardEvent | Event} event
+       */
+      this._onAreaClicked = (event) => {
+        if (event.type === 'keydown') {
+          // @ts-ignore
+          if (event.code === 'Space' || event.code === 'Enter') {
+            this.api.openSystemDialog();
+          }
+        } else if (event.type === 'click') {
+          this.api.openSystemDialog();
+        }
       };
+
+      this.addEventListener('keydown', this._onAreaClicked);
       this.addEventListener('click', this._onAreaClicked);
     }
   }
@@ -227,6 +240,7 @@ export class DropArea extends UploaderBlock {
     this._destroyDropzone?.();
     this._destroyContentWrapperDropzone?.();
     if (this._onAreaClicked) {
+      this.removeEventListener('keydown', this._onAreaClicked);
       this.removeEventListener('click', this._onAreaClicked);
     }
   }
@@ -235,12 +249,12 @@ export class DropArea extends UploaderBlock {
 DropArea.template = /* HTML */ `
   <slot>
     <div data-default-slot hidden></div>
-    <div ref="content-wrapper" class="content-wrapper" set="@hidden: !isVisible">
-      <div class="icon-container" set="@hidden: !withIcon">
+    <div ref="content-wrapper" class="uc-content-wrapper" set="@hidden: !isVisible">
+      <div class="uc-icon-container" set="@hidden: !withIcon">
         <lr-icon name="default"></lr-icon>
         <lr-icon name="arrow-down"></lr-icon>
       </div>
-      <span class="text">{{text}}</span>
+      <span class="uc-text">{{text}}</span>
     </div>
   </slot>
 `;
diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css
index 636fa1239..dc30eaea0 100644
--- a/blocks/DropArea/drop-area.css
+++ b/blocks/DropArea/drop-area.css
@@ -1,13 +1,15 @@
-lr-drop-area {
-  padding: var(--gap-min);
+:where([lr-drop-area]) {
+  padding: 2px;
   overflow: hidden;
-  border: var(--border-dashed);
-  border-radius: var(--border-radius-frame);
-  transition: var(--transition-duration) ease;
+  border: 1px dashed var(--uc-border);
+  border-radius: calc(var(--uc-radius) * 1.75);
+  transition:
+    border var(--uc-transition),
+    border-radius var(--uc-transition);
 }
 
-lr-drop-area,
-lr-drop-area .content-wrapper {
+:where([lr-drop-area]),
+:where([lr-drop-area]) .uc-content-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -15,122 +17,127 @@ lr-drop-area .content-wrapper {
   height: 100%;
 }
 
-lr-drop-area .text {
+:where([lr-drop-area]) .uc-text {
   position: relative;
-  margin: var(--gap-mid);
-  color: var(--clr-txt-light);
-  transition: var(--transition-duration) ease;
+  margin: var(--uc-padding);
+  color: var(--uc-muted-foreground);
+  transition: color var(--uc-transition);
 }
 
-lr-drop-area[ghost][drag-state='inactive'] {
+:where([lr-drop-area])[ghost][drag-state='inactive'] {
   display: none;
-  opacity: 0;
 }
 
-lr-drop-area[ghost]:not([fullscreen]):is([drag-state='active'], [drag-state='near'], [drag-state='over']) {
-  background: var(--clr-background);
+:where([lr-drop-area])[ghost]:not([fullscreen]):is([drag-state='active'], [drag-state='near'], [drag-state='over']) {
+  background: var(--uc-background);
 }
 
-lr-drop-area[with-icon]
-  > .content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
-  :is(.text, .icon-container) {
-  color: var(--clr-accent);
+:where([lr-drop-area])[with-icon]
+  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+  :is(.uc-text, .uc-icon-container) {
+  color: var(--uc-primary);
 }
 
-lr-drop-area:is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
-  color: var(--clr-accent);
-  background: var(--clr-accent-lightest);
-  border-color: var(--clr-accent-light);
+:where([lr-drop-area]):is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
+  color: var(--uc-primary);
+  background: var(--uc-primary-transparent);
+  border-color: var(--uc-primary-transparent);
 }
 
-lr-drop-area:is([drag-state='active'], [drag-state='near']) {
+:where([lr-drop-area]):is([drag-state='active'], [drag-state='near']) {
   opacity: 1;
 }
 
-lr-drop-area[drag-state='over'] {
-  border-color: var(--clr-accent);
+:where([lr-drop-area])[drag-state='over'] {
+  border-color: var(--uc-primary);
   opacity: 1;
 }
 
-lr-drop-area[with-icon] {
-  min-height: calc(var(--ui-size) * 6);
+:where([lr-drop-area])[with-icon] {
+  min-height: 180px;
 }
 
-lr-drop-area[with-icon] .content-wrapper {
+:where([lr-drop-area])[with-icon] .uc-content-wrapper {
   display: flex;
   flex-direction: column;
 }
 
-lr-drop-area[with-icon] .text {
-  color: var(--clr-txt);
+:where([lr-drop-area])[with-icon] .uc-text {
+  color: var(--uc-foreground);
   font-weight: 500;
   font-size: 1.1em;
 }
 
-lr-drop-area[with-icon] .icon-container {
+:where([lr-drop-area])[with-icon] .uc-icon-container {
   position: relative;
-  width: calc(var(--ui-size) * 2);
-  height: calc(var(--ui-size) * 2);
-  margin: var(--gap-mid);
+  width: 64px;
+  height: 64px;
+  margin: var(--uc-padding);
   overflow: hidden;
-  color: var(--clr-txt);
-  background-color: var(--clr-background);
+  color: var(--uc-foreground);
+  background-color: var(--uc-muted);
   border-radius: 50%;
-  transition: var(--transition-duration) ease;
+  transition:
+    color var(--uc-transition),
+    background-color var(--uc-transition);
 }
 
-lr-drop-area[with-icon] lr-icon {
+:where([lr-drop-area])[with-icon] lr-icon {
   position: absolute;
-  top: calc(50% - var(--ui-size) / 2);
-  left: calc(50% - var(--ui-size) / 2);
-  transition: var(--transition-duration) ease;
+  width: 32px;
+  height: 32px;
+  top: calc(50% - 16px);
+  left: calc(50% - 16px);
+  transition: transform var(--uc-transition);
 }
 
-lr-drop-area[with-icon] lr-icon:last-child {
-  transform: translateY(calc(var(--ui-size) * 1.5));
+:where([lr-drop-area])[with-icon] lr-icon:last-child {
+  transform: translateY(48px);
 }
 
-lr-drop-area[with-icon]:hover .icon-container,
-lr-drop-area[with-icon]:hover .text {
-  color: var(--clr-accent);
+:where([lr-drop-area])[with-icon]:hover .uc-icon-container,
+:where([lr-drop-area])[with-icon]:hover .uc-text {
+  color: var(--uc-primary);
 }
 
-lr-drop-area[with-icon]:hover .icon-container {
-  background-color: var(--clr-accent-lightest);
+:where([lr-drop-area])[with-icon]:hover .uc-icon-container {
+  background-color: var(--uc-primary-transparent);
 }
 
-lr-drop-area[with-icon]
-  > .content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
-  .icon-container {
-  color: white;
-  background-color: var(--clr-accent);
+:where([lr-drop-area])[with-icon]
+  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+  .uc-icon-container {
+  color: var(--uc-primary-foreground);
+  background-color: var(--uc-primary);
 }
 
-lr-drop-area[with-icon] > .content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over']) .text {
-  color: var(--clr-accent);
+:where([lr-drop-area])[with-icon]
+  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+  .uc-text {
+  color: var(--uc-primary);
 }
 
-lr-drop-area[with-icon]
-  > .content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+:where([lr-drop-area])[with-icon]
+  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
   lr-icon:first-child {
-  transform: translateY(calc(var(--ui-size) * -1.5));
+  transform: translateY(-48px);
 }
 
-lr-drop-area[with-icon]
-  > .content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+:where([lr-drop-area])[with-icon]
+  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
   lr-icon:last-child {
   transform: translateY(0);
 }
 
-lr-drop-area[with-icon] > .content-wrapper[drag-state='near'] lr-icon:last-child {
+:where([lr-drop-area])[with-icon] > .uc-content-wrapper[drag-state='near'] lr-icon:last-child {
   transform: scale(1.3);
 }
 
-lr-drop-area[with-icon] > .content-wrapper[drag-state='over'] lr-icon:last-child {
+:where([lr-drop-area])[with-icon] > .uc-content-wrapper[drag-state='over'] lr-icon:last-child {
   transform: scale(1.5);
 }
 
-lr-drop-area[fullscreen] {
+:where([lr-drop-area])[fullscreen] {
   position: fixed;
   top: 0;
   right: 0;
@@ -140,37 +147,42 @@ lr-drop-area[fullscreen] {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(100vw - var(--gap-mid) * 2);
-  height: calc(100vh - var(--gap-mid) * 2);
-  margin: var(--gap-mid);
+  width: calc(100vw - var(--uc-padding) * 2);
+  height: calc(100vh - var(--uc-padding) * 2);
+  margin: var(--uc-padding);
 }
 
-lr-drop-area[fullscreen] .content-wrapper {
+:where([lr-drop-area])[fullscreen] .uc-content-wrapper {
   width: 100%;
-  max-width: calc(var(--modal-normal-w) * 0.8);
-  height: calc(var(--ui-size) * 6);
-  color: var(--clr-txt);
-  background-color: var(--clr-background-light);
-  border-radius: var(--border-radius-frame);
-  box-shadow: var(--modal-shadow);
-  transition: var(--transition-duration) ease;
-}
-
-lr-drop-area[with-icon][fullscreen][drag-state='active'] > .content-wrapper,
-lr-drop-area[with-icon][fullscreen][drag-state='near'] > .content-wrapper {
-  transform: translateY(var(--gap-mid));
+  max-width: calc(var(--uc-dialog-width) * 0.8);
+  height: 180px;
+  color: var(--uc-foreground);
+  background-color: var(--uc-background);
+  border-radius: calc(var(--uc-radius) * 1.75);
+  box-shadow: var(--uc-dialog-shadow);
+  transition:
+    color var(--uc-transition),
+    background-color var(--uc-transition),
+    box-shadow var(--uc-transition),
+    border-radius var(--uc-transition),
+    transform var(--uc-transition);
+}
+
+:where([lr-drop-area])[with-icon][fullscreen][drag-state='active'] > .uc-content-wrapper,
+:where([lr-drop-area])[with-icon][fullscreen][drag-state='near'] > .uc-content-wrapper {
+  transform: translateY(10px);
   opacity: 0;
 }
 
-lr-drop-area[with-icon][fullscreen][drag-state='over'] > .content-wrapper {
+:where([lr-drop-area])[with-icon][fullscreen][drag-state='over'] > .uc-content-wrapper {
   transform: translateY(0px);
   opacity: 1;
 }
 
-:is(lr-drop-area[with-icon][fullscreen]) > .content-wrapper lr-icon:first-child {
-  transform: translateY(calc(var(--ui-size) * -1.5));
+:is(:where([lr-drop-area])[with-icon][fullscreen]) > .uc-content-wrapper lr-icon:first-child {
+  transform: translateY(-48px);
 }
 
-lr-drop-area[clickable] {
+:where([lr-drop-area])[clickable] {
   cursor: pointer;
 }
diff --git a/blocks/EditableCanvas/CanMan.js b/blocks/EditableCanvas/CanMan.js
deleted file mode 100644
index 2918f76c4..000000000
--- a/blocks/EditableCanvas/CanMan.js
+++ /dev/null
@@ -1,209 +0,0 @@
-// Canvas Manipulator
-import { applyStyles, applyAttributes } from '@symbiotejs/symbiote';
-const SVGNS = 'http://www.w3.org/2000/svg';
-
-export class CanMan {
-  _syncSvgSize() {
-    let rect = this.svgGroupEl.getBoundingClientRect();
-    applyAttributes(this.svgEl, {
-      viewBox: `0, 0, ${rect.width}, ${rect.height}`,
-      width: rect.width,
-      height: rect.height,
-    });
-  }
-
-  _syncCanvas() {
-    return new Promise((resolve, reject) => {
-      let url = URL.createObjectURL(
-        new Blob([this.svgEl.outerHTML], {
-          type: 'image/svg+xml',
-        }),
-      );
-      this.vImg.onload = () => {
-        this.can.height = this.vImg.height;
-        this.can.width = this.vImg.width;
-        this.ctx.drawImage(this.vImg, 0, 0, this.vImg.width, this.vImg.height);
-        resolve();
-      };
-      this.vImg.onerror = () => {
-        reject();
-      };
-      this.vImg.src = url;
-    });
-  }
-
-  _backSyncSvg() {
-    this.svgGroupEl.style.transform = null;
-    this.svgGroupEl.style.filter = null;
-    applyAttributes(this.svgEl, {
-      viewBox: `0, 0, ${this.can.width}, ${this.can.height}`,
-      width: this.can.width,
-      height: this.can.height,
-    });
-    applyAttributes(this.svgImgEl, {
-      href: this.can.toDataURL('image/png'),
-      width: this.can.width,
-      height: this.can.height,
-    });
-    this._addedObjects.forEach((obj) => {
-      obj.remove();
-    });
-    return new Promise((resolve, reject) => {
-      this.svgImgEl.onload = () => {
-        resolve();
-      };
-      this.svgImgEl.onerror = () => {
-        reject();
-      };
-    });
-  }
-
-  async _syncAll() {
-    this._syncSvgSize();
-    await this._syncCanvas();
-    await this._backSyncSvg();
-  }
-
-  /** @param {import('./EditableCanvas.js').RefMap} refMap */
-  constructor(refMap) {
-    /** @type {HTMLCanvasElement} */
-    this.can = refMap.canvas;
-    /** @type {SVGElement} */
-    this.svgEl = refMap.svg;
-    this.svgGroupEl = refMap.svgGroup;
-    this.svgImgEl = refMap.svgImg;
-    this.vImg = new Image();
-
-    this.ctx = refMap.canvCtx;
-
-    this.currentColor = CanMan.defaultColor;
-
-    this._addedObjects = new Set();
-
-    window.setTimeout(() => {
-      this._backSyncSvg();
-    }, 100);
-  }
-
-  applyCss(cssMap) {
-    applyStyles(this.svgGroupEl, cssMap);
-  }
-
-  getImg() {
-    let img = new Image();
-    img.src = this.can.toDataURL('image/png');
-    return new Promise((resolve, reject) => {
-      img.onload = () => {
-        resolve(img);
-      };
-      img.onerror = () => {
-        reject(img);
-      };
-    });
-  }
-
-  rotate() {
-    this.applyCss({
-      'transform-origin': '0 0',
-      transform: `rotate(90deg) translateY(-${this.can.height}px)`,
-    });
-    this._syncAll();
-  }
-
-  /** @param {'vertical' | 'horizontal'} type */
-  flip(type) {
-    this.applyCss({
-      'transform-origin': '50% 50%',
-      transform: `scale(${type === 'vertical' ? '1, -1' : '-1, 1'})`,
-    });
-    this._syncAll();
-  }
-
-  brightness(val) {
-    this.applyCss({
-      filter: `brightness(${val}%)`,
-    });
-  }
-
-  contrast(val) {
-    this.applyCss({
-      filter: `contrast(${val}%)`,
-    });
-  }
-
-  saturate(val) {
-    this.applyCss({
-      filter: `saturate(${val}%)`,
-    });
-  }
-
-  setColor(val) {
-    this.currentColor = val;
-  }
-
-  startText() {
-    let onStart = (e) => {
-      let text = document.createElementNS(SVGNS, 'text');
-      // @ts-ignore
-      applyAttributes(text, {
-        fill: this.currentColor,
-        x: e.offsetX,
-        y: e.offsetY,
-      });
-      (text.textContent = 'TEXT'), this.svgGroupEl.appendChild(text);
-      this._addedObjects.add(text);
-      text.focus();
-      this.svgEl.removeEventListener('mousedown', onStart);
-    };
-    this.svgEl.addEventListener('mousedown', onStart);
-  }
-
-  stopText() {
-    this.bake();
-  }
-
-  startDraw() {
-    this.svgEl.addEventListener('mousedown', (e) => {
-      let pLine = document.createElementNS(SVGNS, 'polyline');
-      // @ts-ignore
-      applyAttributes(pLine, {
-        fill: 'none',
-        stroke: this.currentColor,
-        'stroke-width': '4px',
-      });
-      this.svgGroupEl.appendChild(pLine);
-      this._addedObjects.add(pLine);
-      let points = [];
-      this.svgEl.onmousemove = (e) => {
-        points.push(`${e.offsetX},${e.offsetY}`);
-        pLine.setAttribute('points', points.join(' '));
-      };
-    });
-    window.addEventListener('mouseup', () => {
-      this.svgEl.onmousemove = null;
-      this.bake();
-    });
-    window.addEventListener('mouseleave', () => {
-      this.svgEl.onmousemove = null;
-      this.bake();
-    });
-  }
-
-  /** @param {Boolean} val */
-  removeMode(val) {
-    if (val) {
-    }
-  }
-
-  resize() {}
-
-  crop() {}
-
-  bake() {
-    this._syncAll();
-  }
-
-  restore() {}
-}
-
-CanMan.defaultColor = '#f00';
diff --git a/blocks/EditableCanvas/EditableCanvas.js b/blocks/EditableCanvas/EditableCanvas.js
deleted file mode 100644
index d42b76ea5..000000000
--- a/blocks/EditableCanvas/EditableCanvas.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Block } from '../../abstract/Block.js';
-import { applyStyles } from '@symbiotejs/symbiote';
-import { checkerboardCssBg } from '../svg-backgrounds/svg-backgrounds.js';
-
-/**
- * @typedef {Object} RefMap
- * @property {import('./EditableCanvas.js').EditableCanvas} parent
- * @property {HTMLCanvasElement} canvas
- * @property {CanvasRenderingContext2D} canvCtx
- * @property {SVGElement} svg
- * @property {SVGElement} svgGroup
- * @property {SVGImageElement} svgImg
- */
-
-export class EditableCanvas extends Block {
-  init$ = {
-    ...this.init$,
-    refMap: null,
-    disabled: true,
-    toolbarHidden: true,
-    checkerboard: false,
-  };
-
-  constructor() {
-    super();
-    applyStyles(this, {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-    });
-  }
-
-  initCallback() {
-    super.initCallback();
-    this.sub('disabled', () => {
-      this.$.toolbarHidden = this.hasAttribute('disabled') && this.getAttribute('disabled') !== 'false';
-    });
-    this.sub('checkerboard', () => {
-      this.style.backgroundImage = this.hasAttribute('checkerboard') ? `url(${checkerboardCssBg()})` : 'unset';
-    });
-    /** @type {HTMLCanvasElement} */
-    // @ts-ignore
-    this.canvas = this.ref.cvs;
-    this.canvCtx = this.canvas.getContext('2d');
-    this.$.refMap = {
-      parent: this,
-      canvas: this.canvas,
-      canvCtx: this.canvCtx,
-      svg: this.ref.svg,
-      svgGroup: this.ref.svg_g,
-      svgImg: this.ref.svg_img,
-    };
-  }
-
-  /** @param {HTMLImageElement} img */
-  setImage(img) {
-    if (img.height && img.width) {
-      this.canvas.height = img.height;
-      this.canvas.width = img.width;
-      this.canvCtx.drawImage(img, 0, 0, img.width, img.height);
-    } else {
-      this.clear();
-      img.onload = () => {
-        this.canvas.height = img.height;
-        this.canvas.width = img.width;
-        this.canvCtx.drawImage(img, 0, 0, img.width, img.height);
-      };
-    }
-  }
-
-  /** @param {File} imgFile */
-  setImageFile(imgFile) {
-    let img = new Image();
-    let url = URL.createObjectURL(imgFile);
-    img.src = url;
-    this.setImage(img);
-  }
-
-  /** @param {String} url */
-  setImageUrl(url) {
-    let img = new Image();
-    img.src = url;
-    this.setImage(img);
-  }
-
-  clear() {
-    this.canvCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-  }
-}
-
-EditableCanvas.template = /* HTML */ `
-  <canvas class="img-view" ref="cvs"></canvas>
-  <svg class="img-view" xmlns="http://www.w3.org/2000/svg" ref="svg">
-    <g ref="svg_g">
-      <image ref="svg_img" x="0" y="0"></image>
-    </g>
-  </svg>
-  <editable-canvas-toolbar set="refMap: refMap; @hidden: toolbarHidden"> </editable-canvas-toolbar>
-`;
-
-EditableCanvas.bindAttributes({
-  disabled: 'disabled',
-  checkerboard: 'checkerboard',
-});
diff --git a/blocks/EditableCanvas/EditableCanvasToolbar.js b/blocks/EditableCanvas/EditableCanvasToolbar.js
deleted file mode 100644
index da4151b6f..000000000
--- a/blocks/EditableCanvas/EditableCanvasToolbar.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import { Block } from '../../abstract/Block.js';
-import { CanMan } from './CanMan.js';
-import { Range } from '../Range/Range.js';
-import { Color } from '../Color/Color.js';
-
-import { getButtons } from './buttons.js';
-
-// TODO: get rid of side effects
-Range.reg('range');
-Color.reg('color');
-
-const FS_ICON = {
-  FS: 'fullscreen',
-  EXIT: 'fullscreen-exit',
-};
-
-export class EditorToolbar extends Block {
-  get actionsMap() {
-    return {
-      fullscreen: () => {
-        if (document.fullscreenElement === this.rMap.parent) {
-          document.exitFullscreen();
-          this.$.fsIcon = FS_ICON.FS;
-        } else {
-          this.rMap.parent.requestFullscreen();
-          this.$.fsIcon = FS_ICON.EXIT;
-        }
-      },
-      rotate_cw: () => {
-        this.canMan.rotate();
-      },
-      flip_v: () => {
-        this.canMan.flip('vertical');
-      },
-      flip_h: () => {
-        this.canMan.flip('horizontal');
-      },
-      brightness: () => {
-        this.rangeCtx = 'brightness';
-        this.set$({
-          rangeActive: true,
-        });
-        this.bindL10n('rangeCaption', () => this.l10n('brightness'));
-      },
-      contrast: () => {
-        this.rangeCtx = 'contrast';
-        this.set$({
-          rangeActive: true,
-        });
-        this.bindL10n('rangeCaption', () => this.l10n('contrast'));
-      },
-      saturation: () => {
-        this.rangeCtx = 'saturate';
-        this.set$({
-          rangeActive: true,
-        });
-        this.bindL10n('rangeCaption', () => this.l10n('saturation'));
-      },
-      resize: () => {
-        this.canMan.resize();
-      },
-      crop: () => {
-        this.canMan.crop();
-      },
-      color: () => {
-        this.ref.color.dispatchEvent(new MouseEvent('click'));
-      },
-      text: () => {
-        this.canMan.startText();
-      },
-      draw: () => {
-        this.canMan.startDraw();
-      },
-      cancel: () => {
-        this.canMan.restore();
-      },
-    };
-  }
-
-  init$ = {
-    ...this.init$,
-    fsIcon: FS_ICON.FS,
-    rangeActive: false,
-    rangeCaption: '',
-
-    onBtnClick: (e) => {
-      this.canMan.stopText();
-      this.rangeCtx = null;
-
-      this.set$({
-        rangeActive: false,
-        rangeCaption: '',
-        '*rangeValue': 100,
-      });
-      /** @type {HTMLButtonElement} */
-      let btnEl = /** @type {Element} */ (e.target).closest('[action]');
-      if (btnEl) {
-        this.buttons.add(btnEl);
-        this.buttons.forEach((btn) => {
-          if (btn === btnEl) {
-            btn.setAttribute('current', '');
-          } else {
-            btn.removeAttribute('current', '');
-          }
-        });
-      }
-      let action = btnEl.getAttribute('action');
-      console.log(action);
-      if (!action) {
-        return;
-      }
-      this.actionsMap[action]();
-    },
-    onColor: () => false,
-  };
-
-  buttons = new Set();
-  /** @type {import('./EditableCanvas.js').EditableCanvas} */
-  editor = null;
-
-  initCallback() {
-    super.initCallback();
-    this.defineAccessor('refMap', (/** @type {import('./EditableCanvas.js').RefMap} */ rMap) => {
-      if (!rMap) {
-        return;
-      }
-      this.rMap = rMap;
-      /** @type {CanMan} */
-      this.canMan = new CanMan(rMap);
-      // console.log(rMap);
-    });
-    this.sub('*rangeValue', (val) => {
-      this.canMan?.[this.rangeCtx]?.(val);
-    });
-    this.sub('*selectedColor', (val) => {
-      this.canMan?.setColor(val);
-    });
-  }
-}
-EditorToolbar.template = /* HTML */ `
-  <div class="btns" ref="btns" set="onclick: onBtnClick">${getButtons()}</div>
-  <lr-range min="0" max="200" ref="range" set="@visible: rangeActive; $.caption: rangeCaption"> </lr-range>
-`;
diff --git a/blocks/EditableCanvas/buttons.js b/blocks/EditableCanvas/buttons.js
deleted file mode 100644
index 1abdfb725..000000000
--- a/blocks/EditableCanvas/buttons.js
+++ /dev/null
@@ -1,109 +0,0 @@
-export const buttonsModel = [
-  {
-    action: 'fullscreen',
-    icon: '',
-    l10n_name: 'toggle-fullscreen',
-    set: '@name: fsIcon',
-  },
-  // {
-  //   action: 'guides',
-  //   icon: 'edit-guides',
-  //   l10n_name: 'toggle-guides',
-  //   set: '',
-  // },
-  {
-    action: 'rotate_cw',
-    icon: 'edit-rotate',
-    l10n_name: 'rotate',
-    set: '',
-  },
-  {
-    action: 'flip_v',
-    icon: 'edit-flip-v',
-    l10n_name: 'flip-vertical',
-    set: '',
-  },
-  {
-    action: 'flip_h',
-    icon: 'edit-flip-h',
-    l10n_name: 'flip-horizontal',
-    set: '',
-  },
-  {
-    action: 'brightness',
-    icon: 'edit-brightness',
-    l10n_name: 'brightness',
-    set: '',
-  },
-  {
-    action: 'contrast',
-    icon: 'edit-contrast',
-    l10n_name: 'contrast',
-    set: '',
-  },
-  {
-    action: 'saturation',
-    icon: 'edit-saturation',
-    l10n_name: 'saturation',
-    set: '',
-  },
-  // {
-  //   action: 'resize',
-  //   icon: 'edit-resize',
-  //   l10n_name: 'resize',
-  //   set: '',
-  // },
-  // {
-  //   action: 'crop',
-  //   icon: 'edit-crop',
-  //   l10n_name: 'crop',
-  //   set: '',
-  // },
-  {
-    clr: true,
-  },
-  {
-    action: 'text',
-    icon: 'edit-text',
-    l10n_name: 'text',
-    set: '',
-  },
-  {
-    action: 'draw',
-    icon: 'edit-draw',
-    l10n_name: 'draw',
-    set: '',
-  },
-  {
-    action: 'cancel',
-    icon: 'close',
-    l10n_name: 'cancel-edit',
-    set: '',
-  },
-];
-
-function getBthHtml(btn) {
-  return /* HTML */ `<button
-  type="button"
-  action="${btn.action}"
-  ref="${btn.ref}"
-  l10n="title:${btn.l10n_name}">
-  <lr-icon
-    set="${btn.set}"
-    name="${btn.icon}">
-  </lr-icon>
-</button>`.trim();
-}
-
-const clrHtml = /* HTML */ `<lr-color
-  ref="color"
-  action="color"
-  set="onchange: onColor"
-  l10n="title:select-color"
-></lr-color>`;
-
-export function getButtons() {
-  return buttonsModel.reduce((acc, btn) => {
-    return (acc += btn.clr ? clrHtml : getBthHtml(btn));
-  }, '');
-}
diff --git a/blocks/EditableCanvas/editable-canvas.css b/blocks/EditableCanvas/editable-canvas.css
deleted file mode 100644
index 2808e694a..000000000
--- a/blocks/EditableCanvas/editable-canvas.css
+++ /dev/null
@@ -1,80 +0,0 @@
-lr-editable-canvas {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-lr-editable-canvas > .img-view {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  max-height: 100%;
-  object-fit: scale-down;
-}
-
-lr-editable-canvas-toolbar {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 10000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  pointer-events: none;
-}
-
-lr-editable-canvas-toolbar .btns {
-  position: absolute;
-  left: var(--gap-mid);
-  display: grid;
-  pointer-events: all;
-}
-
-lr-editable-canvas-toolbar .btns > button {
-  display: inline-flex;
-  width: var(--ui-size);
-  height: var(--ui-size);
-  color: var(--clr-txt);
-  background-color: var(--clr-background);
-  border-radius: 0;
-}
-
-lr-editable-canvas-toolbar .btns > button:first-of-type {
-  border-top-left-radius: var(--border-radius-element);
-  border-top-right-radius: var(--border-radius-element);
-}
-
-lr-editable-canvas-toolbar .btns > button:last-of-type {
-  border-bottom-right-radius: var(--border-radius-element);
-  border-bottom-left-radius: var(--border-radius-element);
-}
-
-lr-editable-canvas-toolbar .btns > button[current] {
-  color: var(--clr-txt);
-  background-color: var(--clr-background);
-}
-
-lr-editable-canvas-toolbar > lr-range {
-  position: absolute !important;
-  bottom: 0;
-  width: 100%;
-  transition: 0.2s;
-  pointer-events: all;
-}
-
-lr-editable-canvas-toolbar > lr-range:not([visible]) {
-  transform: translateY(60px);
-}
diff --git a/blocks/EditableCanvas/test/test.htm b/blocks/EditableCanvas/test/test.htm
deleted file mode 100644
index 62b40b5ba..000000000
--- a/blocks/EditableCanvas/test/test.htm
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>LocalEditor</title>
-    <link rel="stylesheet" href="../../../site/css/dark-en.css" />
-    <script src="./test.js" type="module"></script>
-    <style>
-      html,
-      body {
-        padding: 0;
-        margin: 0;
-        background-color: #ccc;
-      }
-      lr-editable-canvas {
-        display: flex;
-        min-height: 100vh;
-        justify-content: center;
-        align-items: center;
-      }
-      canvas {
-        background-color: #0f0;
-      }
-      svg[canman] {
-        background-color: #f00;
-      }
-    </style>
-  </head>
-  <body>
-    <lr-editable-canvas></lr-editable-canvas>
-  </body>
-</html>
diff --git a/blocks/EditableCanvas/test/test.jpg b/blocks/EditableCanvas/test/test.jpg
deleted file mode 100644
index f5b07c5fe..000000000
Binary files a/blocks/EditableCanvas/test/test.jpg and /dev/null differ
diff --git a/blocks/ExternalSource/ExternalSource.js b/blocks/ExternalSource/ExternalSource.js
index 136e4f5c2..70e8225a9 100644
--- a/blocks/ExternalSource/ExternalSource.js
+++ b/blocks/ExternalSource/ExternalSource.js
@@ -49,7 +49,7 @@ export class ExternalSource extends UploaderBlock {
           const url = this.extractUrlFromMessage(message);
           const { filename } = message;
           const { externalSourceType } = this.activityParams;
-          this.addFileFromUrl(url, { fileName: filename, source: externalSourceType });
+          this.api.addFileFromUrl(url, { fileName: filename, source: externalSourceType });
         }
 
         this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
@@ -72,6 +72,13 @@ export class ExternalSource extends UploaderBlock {
       onActivate: () => {
         let { externalSourceType } = /** @type {ActivityParams} */ (this.activityParams);
 
+        if (!externalSourceType) {
+          this.$['*currentActivity'] = null;
+          this.setOrAddState('*modalActive', false);
+          console.error(`Param "externalSourceType" is required for activity "${this.activityType}"`);
+          return;
+        }
+
         this.set$({
           activityCaption: `${externalSourceType?.[0].toUpperCase()}${externalSourceType?.slice(1)}`,
           activityIcon: externalSourceType,
@@ -80,6 +87,13 @@ export class ExternalSource extends UploaderBlock {
         this.mountIframe();
       },
     });
+    this.sub('*currentActivityParams', (val) => {
+      if (!this.isActivityActive) {
+        return;
+      }
+      this.unmountIframe();
+      this.mountIframe();
+    });
     this.sub('*currentActivity', (val) => {
       if (val !== this.activityType) {
         this.unmountIframe();
@@ -154,11 +168,16 @@ export class ExternalSource extends UploaderBlock {
   /** @private */
   applyStyles() {
     let colors = {
-      backgroundColor: this.getCssValue('--clr-background-light'),
-      textColor: this.getCssValue('--clr-txt'),
-      shadeColor: this.getCssValue('--clr-shade-lv1'),
-      linkColor: '#157cfc',
-      linkColorHover: '#3891ff',
+      radius: this.getCssValue('--uc-radius'),
+      backgroundColor: this.getCssValue('--uc-background'),
+      textColor: this.getCssValue('--uc-foreground'),
+      secondaryColor: this.getCssValue('--uc-secondary'),
+      secondaryForegroundColor: this.getCssValue('--uc-secondary-foreground'),
+      secondaryHover: this.getCssValue('--uc-secondary-hover'),
+      linkColor: this.getCssValue('--uc-primary'),
+      linkColorHover: this.getCssValue('--uc-primary-hover'),
+      fontFamily: this.getCssValue('--uc-font-family'),
+      fontSize: this.getCssValue('--uc-font-size'),
     };
 
     this.sendMessage({
@@ -221,26 +240,29 @@ export class ExternalSource extends UploaderBlock {
 
 ExternalSource.template = /* HTML */ `
   <lr-activity-header>
-    <button type="button" class="mini-btn" set="onclick: *historyBack">
+    <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
       <lr-icon name="back"></lr-icon>
     </button>
     <div>
       <lr-icon set="@name: activityIcon"></lr-icon>
       <span>{{activityCaption}}</span>
     </div>
-    <button type="button" class="mini-btn close-btn" set="onclick: *historyBack">
+    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *historyBack">
       <lr-icon name="close"></lr-icon>
     </button>
   </lr-activity-header>
-  <div class="content">
-    <div ref="iframeWrapper" class="iframe-wrapper"></div>
-    <div class="toolbar">
-      <button type="button" class="cancel-btn secondary-btn" set="onclick: onCancel" l10n="cancel"></button>
+  <div class="uc-content">
+    <div ref="iframeWrapper" class="uc-iframe-wrapper"></div>
+    <div class="uc-toolbar">
+      <button type="button" class="uc-cancel-btn uc-secondary-btn" set="onclick: onCancel" l10n="cancel"></button>
       <div></div>
-      <div set="@hidden: !multiple" class="selected-counter"><span l10n="selected-count"></span>{{counter}}</div>
-      <button type="button" class="done-btn primary-btn" set="onclick: onDone; @disabled: !counter">
-        <lr-icon name="check"></lr-icon>
-      </button>
+      <div set="@hidden: !multiple" class="uc-selected-counter"><span l10n="selected-count"></span>{{counter}}</div>
+      <button
+        type="button"
+        class="uc-done-btn uc-primary-btn"
+        set="onclick: onDone; @disabled: !counter"
+        l10n="done"
+      ></button>
     </div>
   </div>
 `;
diff --git a/blocks/ExternalSource/buildStyles.js b/blocks/ExternalSource/buildStyles.js
index 7ebb7af1a..388d349f4 100644
--- a/blocks/ExternalSource/buildStyles.js
+++ b/blocks/ExternalSource/buildStyles.js
@@ -1,8 +1,14 @@
-let styleToCss = (style) => {
-  let css = Object.keys(style).reduce((acc, selector) => {
-    let propertiesObj = style[selector];
-    let propertiesStr = Object.keys(propertiesObj).reduce((acc, prop) => {
-      let value = propertiesObj[prop];
+// @ts-check
+
+/**
+ * @param {Record<string, Record<string, string>>} style
+ * @returns
+ */
+const styleToCss = (style) => {
+  const css = Object.keys(style).reduce((acc, selector) => {
+    const propertiesObj = style[selector];
+    const propertiesStr = Object.keys(propertiesObj).reduce((acc, prop) => {
+      const value = propertiesObj[prop];
       return acc + `${prop}: ${value};`;
     }, '');
     return acc + `${selector}{${propertiesStr}}`;
@@ -10,14 +16,41 @@ let styleToCss = (style) => {
   return css;
 };
 
-export function buildStyles({ textColor, backgroundColor, linkColor, linkColorHover, shadeColor }) {
-  let border = `solid 1px ${shadeColor}`;
+/**
+ * @param {{
+ *   textColor: string;
+ *   backgroundColor: string;
+ *   linkColor: string;
+ *   linkColorHover: string;
+ *   secondaryColor: string;
+ *   secondaryHover: string;
+ *   secondaryForegroundColor: string;
+ *   fontFamily: string;
+ *   fontSize: string;
+ *   radius: string;
+ * }} options
+ */
+export function buildStyles({
+  textColor,
+  backgroundColor,
+  linkColor,
+  linkColorHover,
+  secondaryColor,
+  secondaryHover,
+  secondaryForegroundColor,
+  fontFamily,
+  fontSize,
+  radius,
+}) {
+  const border = `solid 1px ${secondaryColor}`;
 
   // TODO: we need to update source source styles, add css custom properties to control theme
   return styleToCss({
     body: {
       color: textColor,
       'background-color': backgroundColor,
+      'font-family': fontFamily,
+      'font-size': fontSize,
     },
     '.side-bar': {
       background: 'inherit',
@@ -36,7 +69,7 @@ export function buildStyles({ textColor, backgroundColor, linkColor, linkColorHo
       color: 'inherit',
     },
     '.list-table-row:hover': {
-      background: shadeColor,
+      background: secondaryColor,
     },
     '.list-table-row .list-table-cell-a, .list-table-row .list-table-cell-b': {
       'border-top': border,
@@ -55,7 +88,7 @@ export function buildStyles({ textColor, backgroundColor, linkColor, linkColorHo
       'background-size': '25px 25px',
     },
     '.list-icons-item': {
-      'background-color': shadeColor,
+      'background-color': secondaryColor,
     },
     '.source-gdrive .side-bar-menu a, .source-gphotos .side-bar-menu a': {
       color: linkColor,
@@ -80,5 +113,21 @@ export function buildStyles({ textColor, backgroundColor, linkColor, linkColorHo
       color: linkColorHover,
       background: 'none',
     },
+    'input[type=submit], .button, button': {
+      color: secondaryForegroundColor,
+      background: secondaryColor,
+      'box-shadow': 'none',
+      border: 'none',
+      'border-radius': radius,
+    },
+    'input[type=submit]:hover, .button:hover, button:hover': {
+      background: secondaryHover,
+    },
+    '.text-field, input[type=search], input[type=text], input[type=url], textarea': {
+      color: secondaryForegroundColor,
+      'border-radius': radius,
+      background: secondaryColor,
+      border,
+    },
   });
 }
diff --git a/blocks/ExternalSource/external-source.css b/blocks/ExternalSource/external-source.css
index 1739a0588..694c3a469 100644
--- a/blocks/ExternalSource/external-source.css
+++ b/blocks/ExternalSource/external-source.css
@@ -3,17 +3,20 @@ lr-external-source {
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background-color: var(--clr-background-light);
+  background-color: var(--uc-background);
   overflow: hidden;
 }
 
-lr-modal lr-external-source {
-  width: min(calc(var(--modal-max-w) - var(--gap-mid) * 2), calc(100vw - var(--gap-mid) * 2));
+[lr-modal] lr-external-source {
+  width: min(
+    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
+    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2)
+  );
   height: var(--modal-content-height-fill, 100%);
   max-height: var(--modal-max-content-height);
 }
 
-lr-external-source > .content {
+lr-external-source > .uc-content {
   position: relative;
   display: grid;
   flex: 1;
@@ -22,7 +25,7 @@ lr-external-source > .content {
 
 @media only screen and (max-width: 430px) {
   lr-external-source {
-    width: calc(100vw - var(--gap-mid) * 2);
+    width: calc(100vw - var(--uc-padding) * 2);
     height: var(--modal-content-height-fill, 100%);
   }
 }
@@ -34,29 +37,29 @@ lr-external-source iframe {
   border: none;
 }
 
-lr-external-source .iframe-wrapper {
+lr-external-source .uc-iframe-wrapper {
   overflow: hidden;
 }
 
-lr-external-source .toolbar {
+lr-external-source .uc-toolbar {
   display: grid;
-  grid-gap: var(--gap-mid);
+  grid-gap: var(--uc-padding);
   grid-template-columns: max-content 1fr max-content max-content;
   align-items: center;
   width: 100%;
-  padding: var(--gap-mid);
-  border-top: var(--border-light);
+  padding: var(--uc-padding);
+  border-top: 1px solid var(--uc-border);
 }
 
-lr-external-source .back-btn {
+lr-external-source .uc-back-btn {
   padding-left: 0;
 }
 
-lr-external-source .selected-counter {
+lr-external-source .uc-selected-counter {
   display: flex;
-  grid-gap: var(--gap-mid);
+  grid-gap: var(--uc-padding);
   align-items: center;
   justify-content: space-between;
-  padding: var(--gap-mid);
-  color: var(--clr-txt-light);
+  padding: var(--uc-padding);
+  color: var(--uc-muted-foreground);
 }
diff --git a/blocks/FileItem/FileItem.js b/blocks/FileItem/FileItem.js
index 95b2002fd..5cbf8ad28 100644
--- a/blocks/FileItem/FileItem.js
+++ b/blocks/FileItem/FileItem.js
@@ -155,11 +155,11 @@ export class FileItem extends UploaderBlock {
         let thumbUrl = await generateThumb(entry.getValue('file'), this.cfg.thumbSize);
         entry.setValue('thumbUrl', thumbUrl);
       } catch (err) {
-        let color = window.getComputedStyle(this).getPropertyValue('--clr-generic-file-icon');
+        let color = window.getComputedStyle(this).getPropertyValue('--uc-muted-foreground');
         entry.setValue('thumbUrl', fileCssBg(color));
       }
     } else {
-      let color = window.getComputedStyle(this).getPropertyValue('--clr-generic-file-icon');
+      let color = window.getComputedStyle(this).getPropertyValue('--uc-muted-foreground');
       entry.setValue('thumbUrl', fileCssBg(color));
     }
   }
@@ -310,8 +310,6 @@ export class FileItem extends UploaderBlock {
 
     /** @private */
     this._observer = new window.IntersectionObserver(this._observerCallback.bind(this), {
-      root: this.parentElement,
-      rootMargin: '50% 0px 50% 0px',
       threshold: [0, 1],
     });
     this._observer.observe(this);
@@ -425,28 +423,38 @@ export class FileItem extends UploaderBlock {
 }
 
 FileItem.template = /* HTML */ `
-  <div class="inner" set="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
-    <div class="thumb" set="style.backgroundImage: thumbUrl">
-      <div class="badge">
+  <div class="uc-inner" set="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
+    <div class="uc-thumb" set="style.backgroundImage: thumbUrl">
+      <div class="uc-badge">
         <lr-icon set="@name: badgeIcon"></lr-icon>
       </div>
     </div>
-    <div class="file-name-wrapper">
-      <span class="file-name" set="@title: itemName">{{itemName}}</span>
-      <span class="file-error" set="@hidden: !errorText">{{errorText}}</span>
+    <div class="uc-file-name-wrapper">
+      <span class="uc-file-name" set="@title: itemName">{{itemName}}</span>
+      <span class="uc-file-error" set="@hidden: !errorText">{{errorText}}</span>
     </div>
-    <div class="file-actions">
-      <button type="button" class="edit-btn mini-btn" set="onclick: onEdit; @hidden: !isEditable">
+    <div class="uc-file-actions">
+      <button
+        type="button"
+        l10n="@title:file-item-edit-button"
+        class="uc-edit-btn uc-mini-btn"
+        set="onclick: onEdit; @hidden: !isEditable"
+      >
         <lr-icon name="edit-file"></lr-icon>
       </button>
-      <button type="button" class="remove-btn mini-btn" set="onclick: onRemove;">
+      <button
+        type="button"
+        l10n="@title:file-item-remove-button"
+        class="uc-remove-btn uc-mini-btn"
+        set="onclick: onRemove;"
+      >
         <lr-icon name="remove-file"></lr-icon>
       </button>
-      <button type="button" class="upload-btn mini-btn" set="onclick: onUpload;">
+      <button type="button" class="uc-upload-btn uc-mini-btn" set="onclick: onUpload;">
         <lr-icon name="upload"></lr-icon>
       </button>
     </div>
-    <lr-progress-bar class="progress-bar" set="value: progressValue; visible: progressVisible;"> </lr-progress-bar>
+    <lr-progress-bar class="uc-progress-bar" set="value: progressValue; visible: progressVisible;"> </lr-progress-bar>
   </div>
 `;
 FileItem.activeInstances = new Set();
diff --git a/blocks/FileItem/file-item.css b/blocks/FileItem/file-item.css
index 30c2157d8..9f52c0907 100644
--- a/blocks/FileItem/file-item.css
+++ b/blocks/FileItem/file-item.css
@@ -1,136 +1,140 @@
 lr-file-item {
+  --uc-file-item-gap: 4px;
+  --uc-file-item-height: calc(var(--uc-preview-size) + var(--uc-padding) * 2 + var(--uc-file-item-gap));
+
   display: block;
+  overflow: hidden;
+  min-height: var(--uc-file-item-height);
+}
+
+lr-file-item:last-of-type {
+  --uc-file-item-gap: 0;
 }
-lr-file-item > .inner {
+
+lr-file-item > .uc-inner {
   position: relative;
   display: grid;
-  grid-template-columns: 32px 1fr max-content;
-  gap: var(--gap-min);
+  grid-template-columns: var(--uc-preview-size) 1fr max-content;
+  gap: 2px;
   align-items: center;
-  margin-bottom: var(--gap-small);
-  padding: var(--gap-mid);
+  margin-bottom: var(--uc-file-item-gap);
+  padding: var(--uc-padding);
   overflow: hidden;
-  font-size: 0.95em;
-  background-color: var(--clr-background);
-  border-radius: var(--border-radius-element);
-  transition: var(--transition-duration);
+  font-size: 0.925em;
+  background-color: var(--uc-muted);
+  border-radius: var(--uc-radius);
+  transition: background-color var(--uc-transition);
 }
 
-lr-file-item:last-of-type > .inner {
-  margin-bottom: 0;
-}
-
-lr-file-item > .inner[focused] {
+lr-file-item > .uc-inner[focused] {
   background-color: transparent;
 }
 
-lr-file-item > .inner[uploading] .edit-btn {
+lr-file-item > .uc-inner[uploading] .uc-edit-btn {
   display: none;
 }
 
-lr-file-item > :where(.inner[failed], .inner[limit-overflow]) {
-  background-color: var(--clr-error-lightest);
+lr-file-item > :where(.uc-inner[failed], .uc-inner[limit-overflow]) {
+  background-color: var(--uc-destructive);
 }
 
-lr-file-item .thumb {
+lr-file-item .uc-thumb {
   position: relative;
   display: inline-flex;
-  width: var(--ui-size);
-  height: var(--ui-size);
-  background-color: var(--clr-shade-lv1);
+  width: var(--uc-preview-size);
+  height: var(--uc-preview-size);
+  background-color: var(--uc-secondary);
   background-position: center center;
   background-size: cover;
-  border-radius: var(--border-radius-thumb);
+  border-radius: var(--uc-radius);
 }
 
-lr-file-item .file-name-wrapper {
+lr-file-item .uc-file-name-wrapper {
+  text-align: left;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   max-width: 100%;
-  padding-right: var(--gap-mid);
-  padding-left: var(--gap-mid);
+  padding-right: var(--uc-padding);
+  padding-left: var(--uc-padding);
   overflow: hidden;
-  color: var(--clr-txt-light);
-  transition: color var(--transition-duration);
+  color: var(--uc-muted-foreground);
 }
 
-lr-file-item .file-name {
+lr-file-item .uc-file-name {
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-lr-file-item .file-error {
+lr-file-item .uc-file-error {
   display: none;
-  color: var(--clr-error);
+  color: var(--uc-destructive-foreground);
   font-size: 0.85em;
-  line-height: 130%;
 }
 
-lr-file-item button.remove-btn,
-lr-file-item button.edit-btn {
-  color: var(--clr-txt-lightest) !important; /* todo: remove after refactoring of common.css */
+lr-file-item button.uc-remove-btn,
+lr-file-item button.uc-edit-btn {
+  color: var(--uc-muted-foreground);
 }
 
-lr-file-item button.upload-btn {
-  display: none;
+lr-file-item button svg {
+  pointer-events: none;
 }
 
-lr-file-item button:hover {
-  color: var(--clr-txt-light);
+lr-file-item button.uc-upload-btn {
+  display: none;
 }
 
-lr-file-item .badge {
+lr-file-item .uc-badge {
   position: absolute;
-  top: calc(var(--ui-size) * -0.13);
-  right: calc(var(--ui-size) * -0.13);
-  width: calc(var(--ui-size) * 0.44);
-  height: calc(var(--ui-size) * 0.44);
-  color: var(--clr-background-light);
-  background-color: var(--clr-txt);
+  bottom: 2px;
+  right: 2px;
+  width: 14px;
+  height: 14px;
+  color: var(--uc-background);
+  background-color: var(--uc-foreground);
   border-radius: 50%;
   transform: scale(0.3);
   opacity: 0;
-  transition: var(--transition-duration) ease;
+  transition:
+    opacity var(--uc-transition),
+    transform var(--uc-transition);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-lr-file-item > .inner:where([failed], [limit-overflow], [finished]) .badge {
+lr-file-item > .uc-inner:where([failed], [limit-overflow], [finished]) .uc-badge {
   transform: scale(1);
   opacity: 1;
 }
 
-lr-file-item > .inner[finished] .badge {
-  background-color: var(--clr-confirm);
-}
-
-lr-file-item > .inner:where([failed], [limit-overflow]) .badge {
-  background-color: var(--clr-error);
+lr-file-item > .uc-inner:where([failed], [limit-overflow]) .uc-badge {
+  background-color: var(--uc-destructive-foreground);
 }
 
-lr-file-item > .inner:where([failed], [limit-overflow]) .file-error {
+lr-file-item > .uc-inner:where([failed], [limit-overflow]) .uc-file-error {
   display: block;
 }
 
-lr-file-item .badge lr-icon,
-lr-file-item .badge lr-icon svg {
+lr-file-item .uc-badge lr-icon,
+lr-file-item .uc-badge lr-icon svg {
   width: 100%;
   height: 100%;
 }
 
-lr-file-item .progress-bar {
+lr-file-item .uc-progress-bar {
+  opacity: 0.5;
   top: calc(100% - 2px);
   height: 2px;
 }
 
-lr-file-item .file-actions {
+lr-file-item .uc-file-actions {
   display: flex;
-  gap: var(--gap-min);
+  gap: 2px;
   align-items: center;
   justify-content: center;
 }
diff --git a/blocks/FilePreview/FilePreview.js b/blocks/FilePreview/FilePreview.js
deleted file mode 100644
index 1bcfef193..000000000
--- a/blocks/FilePreview/FilePreview.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Block } from '../../abstract/Block.js';
-import { checkerboardCssBg } from '../svg-backgrounds/svg-backgrounds.js';
-import { TRANSPARENT_PIXEL_SRC } from '../../utils/transparentPixelSrc.js';
-
-export class FilePreview extends Block {
-  init$ = {
-    ...this.init$,
-    checkerboard: false,
-    src: TRANSPARENT_PIXEL_SRC,
-  };
-
-  constructor() {
-    super();
-  }
-
-  initCallback() {
-    super.initCallback();
-    this.sub('checkerboard', () => {
-      this.style.backgroundImage = this.hasAttribute('checkerboard') ? `url(${checkerboardCssBg()})` : 'unset';
-    });
-  }
-
-  destroyCallback() {
-    super.destroyCallback();
-    URL.revokeObjectURL(this._lastObjectUrl);
-  }
-
-  /** @param {HTMLImageElement} img */
-  setImage(img) {
-    this.$.src = img.src;
-  }
-
-  /** @param {File} imgFile */
-  setImageFile(imgFile) {
-    let url = URL.createObjectURL(imgFile);
-    this.$.src = url;
-    this._lastObjectUrl = url;
-  }
-
-  /** @param {String} url */
-  setImageUrl(url) {
-    this.$.src = url;
-  }
-
-  clear() {
-    URL.revokeObjectURL(this._lastObjectUrl);
-    this.$.src = TRANSPARENT_PIXEL_SRC;
-  }
-}
-
-FilePreview.template = /* HTML */ ` <lr-img class="img-view" ref="img" set="@src: src; style.aa: src;" /> `;
-
-FilePreview.bindAttributes({
-  checkerboard: 'checkerboard',
-});
diff --git a/blocks/FilePreview/file-preview.css b/blocks/FilePreview/file-preview.css
deleted file mode 100644
index 266baa4c5..000000000
--- a/blocks/FilePreview/file-preview.css
+++ /dev/null
@@ -1,27 +0,0 @@
-lr-file-preview {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-lr-file-preview > lr-img {
-  display: contents;
-}
-
-lr-file-preview > lr-img > .img-view {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  max-height: 100%;
-  object-fit: scale-down;
-}
diff --git a/blocks/Icon/icon.css b/blocks/Icon/icon.css
index 8259f816f..032c266d5 100644
--- a/blocks/Icon/icon.css
+++ b/blocks/Icon/icon.css
@@ -2,11 +2,11 @@ lr-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--ui-size);
-  height: var(--ui-size);
+  width: var(--uc-button-size);
+  height: var(--uc-button-size);
 }
 
 lr-icon svg {
-  width: calc(var(--ui-size) / 2);
-  height: calc(var(--ui-size) / 2);
+  width: calc(var(--uc-button-size) / 2);
+  height: calc(var(--uc-button-size) / 2);
 }
diff --git a/blocks/LiveHtml/LiveHtml.js b/blocks/LiveHtml/LiveHtml.js
deleted file mode 100644
index 6b0c52c70..000000000
--- a/blocks/LiveHtml/LiveHtml.js
+++ /dev/null
@@ -1,273 +0,0 @@
-import { Block } from '../../abstract/Block.js';
-
-const INIT_HTML = /* HTML */ `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-</head>
-<body>
-  CONTENT
-</body>
-</html>
-`.trim();
-
-class Caret {
-  static getPosition(parentElement) {
-    let selection = window.getSelection();
-    let charCount = -1;
-    let node;
-
-    if (selection.focusNode) {
-      if (Caret._isChildOf(selection.focusNode, parentElement)) {
-        node = selection.focusNode;
-        charCount = selection.focusOffset;
-
-        while (node) {
-          if (node === parentElement) {
-            break;
-          }
-          if (node.previousSibling) {
-            node = node.previousSibling;
-            charCount += node.textContent.length;
-          } else {
-            node = node.parentNode;
-            if (node === null) {
-              break;
-            }
-          }
-        }
-      }
-    }
-    return charCount;
-  }
-
-  static setPosition(chars, element) {
-    if (chars >= 0) {
-      let selection = window.getSelection();
-
-      let range = Caret._createRange(element, {
-        count: chars,
-      });
-
-      if (range) {
-        range.collapse(false);
-        selection.removeAllRanges();
-        selection.addRange(range);
-      }
-    }
-  }
-
-  static _createRange(node, chars, range) {
-    if (!range) {
-      range = document.createRange();
-      range.selectNode(node);
-      range.setStart(node, 0);
-    }
-
-    if (chars.count === 0) {
-      range.setEnd(node, chars.count);
-    } else if (node && chars.count > 0) {
-      if (node.nodeType === Node.TEXT_NODE) {
-        if (node.textContent.length < chars.count) {
-          chars.count -= node.textContent.length;
-        } else {
-          range.setEnd(node, chars.count);
-          chars.count = 0;
-        }
-      } else {
-        for (let lp = 0; lp < node.childNodes.length; lp++) {
-          range = Caret._createRange(node.childNodes[lp], chars, range);
-
-          if (chars.count === 0) {
-            break;
-          }
-        }
-      }
-    }
-    return range;
-  }
-
-  static _isChildOf(node, parentElement) {
-    while (node !== null) {
-      if (node === parentElement) {
-        return true;
-      }
-      node = node.parentNode;
-    }
-    return false;
-  }
-}
-
-const headerHtml = /* HTML */ `
-  <script>
-    window.__IS_REF__ = true;
-    window.addEventListener('DOMContentLoaded', () => {
-      const pageHtml = document.head.innerHTML + document.body.innerHTML;
-      //
-      if (['--darkmode:' + ' 1', '--darkmode:' + '1'].some((substr) => pageHtml.includes(substr))) {
-        document.body.style.background = 'white';
-        document.body.style.transition = 'background .3s ease-in-out';
-        document.body.style.background = 'black';
-      }
-    });
-  </script>
-`;
-
-export class LiveHtml extends Block {
-  async hl() {
-    let offset = Caret.getPosition(this.ref.editor);
-
-    this.ref.editor.textContent = this.ref.editor.textContent;
-
-    let html = this.ref.editor.textContent;
-    let hljs = await import(
-      'https://cdn.skypack.dev/pin/highlight.js@v11.6.0-4W1e4sNTmpsDP0C1l7xy/mode=imports,min/optimized/highlightjs.js'
-    );
-    // @ts-ignore
-    html = hljs.default.highlight(this.ref.editor.textContent, { language: 'html' }).value;
-    this.ref.editor.innerHTML = html;
-
-    Caret.setPosition(offset, this.ref.editor);
-    // this.ref.editor.focus();
-  }
-
-  sync() {
-    this.hl();
-    if (this._updTimeout) {
-      window.clearTimeout(this._updTimeout);
-    }
-    this._updTimeout = window.setTimeout(() => {
-      // @ts-ignore
-      this.ref.vp.srcdoc = headerHtml + (this.importmapHtml || '') + this.ref.editor.textContent;
-      if (this.hasAttribute('console-output')) {
-        /** @type {Window} */
-        // @ts-ignore
-        let docWin = this.ref.vp.contentWindow;
-        this.ref.vp.onload = () => {
-          console.dirxml(docWin.document.body);
-        };
-      }
-    }, 300);
-  }
-
-  init$ = {
-    ...this.init$,
-    src: '',
-    code: INIT_HTML,
-    spellcheck: false,
-    onInput: () => {
-      this.sync();
-    },
-    onKeydown: (e) => {
-      if (e.keyCode === 13) {
-        e.preventDefault();
-        document.execCommand('insertHTML', false, '\n');
-      } else if (e.keyCode === 9) {
-        e.preventDefault();
-        document.execCommand('insertHTML', false, '  ');
-      }
-    },
-    onNewTabClick: () => {
-      const url = new URL(document.location.toString());
-      url.hash = '';
-      const baseUrl = url.toString();
-
-      const code = `
-      <!DOCTYPE html>
-<html lang="en">
-<base href="${baseUrl}" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-${this.ref.vp.srcdoc}
-</html>
-      `;
-      const winUrl = URL.createObjectURL(new Blob([code], { type: 'text/html' }));
-      window.open(winUrl);
-    },
-    // onPaste: (e) => {
-    //   e.preventDefault();
-    //   let text = e.clipboardData.getData('text/plain');
-    //   document.execCommand('insertText', false, text);
-    // },
-  };
-
-  connectedCallback() {
-    if (this.innerHTML.trim()) {
-      let lines = this.innerHTML.split('\n');
-      let commonTabSize = 1000;
-      lines.forEach((line) => {
-        if (!line.trim()) {
-          return;
-        }
-        if (!line.startsWith(' ')) {
-          commonTabSize = 0;
-          return;
-        }
-        let tabs = line.match(/^ +/);
-        if (tabs) {
-          commonTabSize = Math.min(commonTabSize, tabs[0].length);
-        }
-      });
-      /** @private */
-      this.__innerHtml = lines
-        .map((line) => {
-          for (let i = 0; i < commonTabSize; i++) {
-            if (line.startsWith(' ')) {
-              line = line.replace(' ', '');
-            }
-          }
-          return line;
-        })
-        .join('\n');
-      this.innerHTML = '';
-    }
-    super.connectedCallback();
-  }
-
-  initCallback() {
-    let docImportMap = document.querySelector('script[type="importmap"]');
-    if (docImportMap) {
-      let shimScriptHtml = '';
-      let shimScriptEl = document.querySelector('script[src*="es-module-shims.js"]');
-      if (shimScriptEl) {
-        shimScriptHtml = shimScriptEl.outerHTML;
-      }
-      this.importmapHtml = shimScriptHtml + docImportMap.outerHTML;
-    }
-    if (this.hasAttribute('src')) {
-      this.sub('src', (val) => {
-        if (val) {
-          window.fetch(val).then(async (resp) => {
-            let code = await resp.text();
-            this.$.code = code;
-            this.sync();
-          });
-        } else {
-          this.$.code = INIT_HTML;
-        }
-      });
-    } else if (this.__innerHtml) {
-      this.$.code = this.__innerHtml;
-      this.sync();
-    } else {
-      this.$.code = INIT_HTML;
-    }
-  }
-}
-
-LiveHtml.bindAttributes({
-  src: 'src',
-});
-
-LiveHtml.template = /* HTML */ `
-  <div
-    ref="editor"
-    contenteditable="true"
-    set="textContent:code; oninput:onInput; onkeydown:onKeydown; spellcheck:spellcheck"
-  ></div>
-  <iframe ref="vp"></iframe>
-  <button class="open-new-tab-btn" set="onclick: onNewTabClick">Open in the new tab</button>
-`;
diff --git a/blocks/LiveHtml/live-html.css b/blocks/LiveHtml/live-html.css
deleted file mode 100644
index 9d43e2dfd..000000000
--- a/blocks/LiveHtml/live-html.css
+++ /dev/null
@@ -1,68 +0,0 @@
-lr-live-html {
-  position: relative;
-  display: grid;
-  grid-template-columns: 50% 50%;
-  box-shadow: 0 5px 16px rgb(0 0 0 / 60%);
-}
-
-lr-live-html [contenteditable] {
-  padding: 20px;
-  overflow: auto;
-  color: rgb(255 255 255);
-  font-size: 14px;
-  font-family: monospace;
-  white-space: pre;
-  background-color: #000;
-  outline: none;
-}
-
-lr-live-html [contenteditable] .hljs-string {
-  color: rgb(251, 182, 79);
-}
-lr-live-html [contenteditable] .hljs-comment {
-  color: rgb(149, 149, 149);
-  font-style: italic;
-}
-lr-live-html [contenteditable] .hljs-attr {
-  color: rgb(138, 218, 172);
-}
-lr-live-html [contenteditable] .hljs-function {
-  color: rgb(239, 235, 149);
-}
-lr-live-html [contenteditable] .hljs-variable {
-  color: rgb(121, 183, 255);
-}
-lr-live-html [contenteditable] .hljs-title {
-  color: rgb(180, 243, 255);
-}
-lr-live-html [contenteditable] .hljs-property {
-  color: rgb(238, 131, 252);
-}
-lr-live-html [contenteditable] .hljs-keyword {
-  color: rgb(254, 165, 176);
-}
-lr-live-html [contenteditable] .hljs-tag {
-  color: rgb(254, 165, 176);
-}
-lr-live-html [contenteditable] .hljs-name {
-  color: rgb(165, 245, 254);
-}
-
-lr-live-html iframe {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-  border: 0;
-}
-
-lr-live-html > .open-new-tab-btn {
-  position: absolute;
-  top: 6px;
-  left: 6px;
-  display: none;
-}
-
-lr-live-html:hover > .open-new-tab-btn {
-  display: block;
-}
diff --git a/blocks/Modal/Modal.js b/blocks/Modal/Modal.js
index cd7e96c20..1f06eb5c4 100644
--- a/blocks/Modal/Modal.js
+++ b/blocks/Modal/Modal.js
@@ -2,6 +2,7 @@
 import { Block } from '../../abstract/Block.js';
 
 export class Modal extends Block {
+  static styleAttrs = [...super.styleAttrs, 'lr-modal'];
   static StateConsumerScope = 'modal';
 
   constructor() {
diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css
index 593ae5200..50491fb46 100644
--- a/blocks/Modal/modal.css
+++ b/blocks/Modal/modal.css
@@ -1,9 +1,11 @@
-lr-modal {
-  --modal-max-content-height: calc(var(--uploadcare-blocks-window-height, 100vh) - 4 * var(--gap-mid) - var(--ui-size));
+:where([lr-modal]) {
+  --modal-max-content-height: calc(
+    var(--uploadcare-blocks-window-height, 100vh) - 4 * var(--uc-padding) - var(--uc-button-size)
+  );
   --modal-content-height-fill: var(--uploadcare-blocks-window-height, 100vh);
 }
 
-lr-modal[dialog-fallback] {
+:where([lr-modal])[dialog-fallback] {
   --lr-z-max: 2147483647;
 
   position: fixed;
@@ -17,12 +19,12 @@ lr-modal[dialog-fallback] {
   inset: 0;
 }
 
-lr-modal[dialog-fallback] dialog[open] {
+:where([lr-modal])[dialog-fallback] dialog[open] {
   z-index: var(--lr-z-max);
   pointer-events: auto;
 }
 
-lr-modal[dialog-fallback] dialog[open] + .backdrop {
+:where([lr-modal])[dialog-fallback] dialog[open] + .uc-backdrop {
   position: fixed;
   top: 0px;
   left: 0px;
@@ -31,58 +33,60 @@ lr-modal[dialog-fallback] dialog[open] + .backdrop {
   justify-content: center;
   width: 100vw;
   height: 100vh;
-  background-color: var(--clr-curtain);
+  background-color: oklch(0 0 0 / 0.1);
   pointer-events: auto;
 }
 
-lr-modal[strokes][dialog-fallback] dialog[open] + .backdrop {
+:where([lr-modal])[strokes][dialog-fallback] dialog[open] + .uc-backdrop {
   background-image: var(--modal-backdrop-background-image);
 }
 
 @supports selector(dialog::backdrop) {
-  lr-modal > dialog::backdrop {
+  :where([lr-modal]) > dialog::backdrop {
     /* backdrop don't inherit theme properties */
-    background-color: rgba(0, 0, 0, 10%);
+    background-color: oklch(0 0 0 / 0.1);
   }
-  lr-modal[strokes] > dialog::backdrop {
+  :where([lr-modal])[strokes] > dialog::backdrop {
     /* TODO: it's not working, fix it */
     background-image: var(--modal-backdrop-background-image);
   }
 }
 
-lr-modal > dialog[open] {
+:where([lr-modal]) > dialog[open] {
   transform: translateY(0px);
   visibility: visible;
   opacity: 1;
 }
 
-lr-modal > dialog:not([open]) {
+:where([lr-modal]) > dialog:not([open]) {
   transform: translateY(20px);
   visibility: hidden;
   opacity: 0;
 }
 
-lr-modal > dialog {
+:where([lr-modal]) > dialog {
   display: flex;
   flex-direction: column;
 
   /* there was `fit-content` but it doesn't reduce width after activity change */
   width: max-content;
-  max-width: min(calc(100% - var(--gap-mid) * 2), calc(var(--modal-max-w) - var(--gap-mid) * 2));
-  min-height: var(--ui-size);
-  max-height: calc(var(--modal-max-h) - var(--gap-mid) * 2);
+  max-width: min(calc(100% - var(--uc-padding) * 2), calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2));
+  min-height: var(--uc-button-size);
+  max-height: calc(var(--uc-dialog-max-height) - var(--uc-padding) * 2);
   margin: auto;
   padding: 0;
   overflow: hidden;
-  background-color: var(--clr-background-light);
+  background-color: var(--uc-background);
   border: 0;
-  border-radius: var(--border-radius-frame);
-  box-shadow: var(--modal-shadow);
-  transition: transform calc(var(--transition-duration) * 2);
+  border-radius: calc(var(--uc-radius) * 1.75);
+  box-shadow: var(--uc-dialog-shadow);
+  transition:
+    transform 0.4s ease,
+    opacity 0.4s ease;
 }
 
 @media only screen and (max-width: 430px), only screen and (max-height: 600px) {
-  lr-modal > dialog > .content {
+  :where([lr-modal]) > dialog > .uc-content {
     height: var(--modal-max-content-height);
   }
 }
diff --git a/blocks/ProgressBar/ProgressBar.js b/blocks/ProgressBar/ProgressBar.js
index da09bfca3..a8e0f8688 100644
--- a/blocks/ProgressBar/ProgressBar.js
+++ b/blocks/ProgressBar/ProgressBar.js
@@ -30,9 +30,9 @@ export class ProgressBar extends Block {
     });
 
     this.defineAccessor('visible', (visible) => {
-      this.ref.line.classList.toggle('progress--hidden', !visible);
+      this.ref.line.classList.toggle('uc-progress--hidden', !visible);
     });
   }
 }
 
-ProgressBar.template = /* HTML */ ` <div ref="line" class="progress"></div> `;
+ProgressBar.template = /* HTML */ ` <div ref="line" class="uc-progress"></div> `;
diff --git a/blocks/ProgressBar/progress-bar.css b/blocks/ProgressBar/progress-bar.css
index 896e55097..0e3d4bab3 100644
--- a/blocks/ProgressBar/progress-bar.css
+++ b/blocks/ProgressBar/progress-bar.css
@@ -9,10 +9,10 @@ lr-progress-bar {
   pointer-events: none;
 }
 
-lr-progress-bar .progress {
+lr-progress-bar .uc-progress {
   width: calc(var(--l-width) * 1%);
   height: 100%;
-  background-color: var(--clr-accent-light);
+  background-color: var(--uc-primary);
   transform: translateX(0);
   opacity: 1;
   transition:
@@ -20,6 +20,6 @@ lr-progress-bar .progress {
     opacity 0.3s;
 }
 
-lr-progress-bar .progress--hidden {
+lr-progress-bar .uc-progress--hidden {
   opacity: 0;
 }
diff --git a/blocks/ProgressBarCommon/progress-bar-common.css b/blocks/ProgressBarCommon/progress-bar-common.css
index 297bcb164..a9de92ebd 100644
--- a/blocks/ProgressBarCommon/progress-bar-common.css
+++ b/blocks/ProgressBarCommon/progress-bar-common.css
@@ -5,8 +5,8 @@ lr-progress-bar-common {
   left: 0;
   z-index: 10000;
   display: block;
-  height: var(--gap-mid);
-  background-color: var(--clr-background);
+  height: 10px;
+  background-color: var(--uc-background);
   transition: opacity 0.3s;
 }
 
diff --git a/blocks/Range/Range.js b/blocks/Range/Range.js
index 3c89a4f07..5b51b33a1 100644
--- a/blocks/Range/Range.js
+++ b/blocks/Range/Range.js
@@ -34,10 +34,10 @@ export class Range extends BaseComponent {
 }
 
 Range.template = /* HTML */ `
-  <div class="track-wrapper">
-    <div class="track"></div>
-    <div class="bar" set -style.width="cssLeft" -@active="barActive"></div>
-    <div class="slider" set -style.left="cssLeft"></div>
+  <div class="uc-track-wrapper">
+    <div class="uc-track"></div>
+    <div class="uc-bar" set -style.width="cssLeft" -@active="barActive"></div>
+    <div class="uc-slider" set -style.left="cssLeft"></div>
   </div>
 
   <input type="range" ref="range" set -@value="value" -oninput="onChange" />
diff --git a/blocks/Range/range.css b/blocks/Range/range.css
index 418a698fc..5c57b9a48 100644
--- a/blocks/Range/range.css
+++ b/blocks/Range/range.css
@@ -3,7 +3,7 @@ lr-range {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: var(--ui-size);
+  height: var(--uc-button-size);
 }
 
 lr-range datalist {
@@ -16,7 +16,7 @@ lr-range input {
   opacity: 0;
 }
 
-lr-range .track-wrapper {
+lr-range .uc-track-wrapper {
   position: absolute;
   right: 10px;
   left: 10px;
@@ -28,7 +28,7 @@ lr-range .track-wrapper {
   pointer-events: none;
 }
 
-lr-range .track {
+lr-range .uc-track {
   position: absolute;
   right: 0;
   left: 0;
@@ -41,7 +41,7 @@ lr-range .track {
   opacity: 0.5;
 }
 
-lr-range .slider {
+lr-range .uc-slider {
   position: absolute;
   width: 16px;
   height: 16px;
@@ -50,7 +50,7 @@ lr-range .slider {
   transform: translateX(-50%);
 }
 
-lr-range .bar {
+lr-range .uc-bar {
   position: absolute;
   left: 0;
   height: 100%;
@@ -58,7 +58,7 @@ lr-range .bar {
   border-radius: 2px;
 }
 
-lr-range .caption {
+lr-range .uc-caption {
   position: absolute;
   display: inline-flex;
   justify-content: center;
diff --git a/blocks/Select/Select.js b/blocks/Select/Select.js
index 695de6509..ad3c149a6 100644
--- a/blocks/Select/Select.js
+++ b/blocks/Select/Select.js
@@ -32,10 +32,4 @@ export class Select extends Block {
   }
 }
 
-Select.template = /* HTML */ `
-  <button>
-    {{currentText}}
-    <lr-icon name="select"></lr-icon>
-    <select ref="select" set="innerHTML: selectHtml; onchange: onSelect"></select>
-  </button>
-`;
+Select.template = /* HTML */ ` <select ref="select" set="innerHTML: selectHtml; onchange: onSelect"></select> `;
diff --git a/blocks/Select/select.css b/blocks/Select/select.css
index f688b1d29..b4558f913 100644
--- a/blocks/Select/select.css
+++ b/blocks/Select/select.css
@@ -2,20 +2,21 @@ lr-select {
   display: inline-flex;
 }
 
-lr-select > button {
+lr-select select {
   position: relative;
   display: inline-flex;
   align-items: center;
-  padding-right: 0 !important; /* todo: get rid of important */
-  color: var(--clr-btn-txt-secondary);
-  background-color: var(--clr-btn-bgr-secondary);
-  box-shadow: var(--shadow-btn-secondary);
-}
-
-lr-select > button > select {
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
+  justify-content: center;
+  height: var(--uc-button-size);
+  padding: 0 14px;
+  font-size: 1em;
+  font-family: inherit;
+  white-space: nowrap;
+  border: none;
+  border-radius: var(--uc-radius);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--uc-transition);
+  color: var(--uc-secondary-foreground);
+  background-color: var(--uc-secondary);
 }
diff --git a/blocks/SimpleBtn/SimpleBtn.js b/blocks/SimpleBtn/SimpleBtn.js
index 31121093b..80cf5517f 100644
--- a/blocks/SimpleBtn/SimpleBtn.js
+++ b/blocks/SimpleBtn/SimpleBtn.js
@@ -3,6 +3,7 @@ import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { asBoolean } from '../Config/normalizeConfigValue.js';
 
 export class SimpleBtn extends UploaderBlock {
+  static styleAttrs = [...super.styleAttrs, 'lr-simple-btn'];
   couldBeCtxOwner = true;
   constructor() {
     super();
@@ -11,7 +12,7 @@ export class SimpleBtn extends UploaderBlock {
       ...this.init$,
       withDropZone: true,
       onClick: () => {
-        this.initFlow();
+        this.api.initFlow();
       },
       'button-text': '',
     };
@@ -42,7 +43,7 @@ SimpleBtn.template = /* HTML */ `
       <lr-icon name="upload"></lr-icon>
       <span l10n="button-text"></span>
       <slot></slot>
-      <div class="visual-drop-area" l10n="drop-files-here"></div>
+      <div class="uc-visual-drop-area" l10n="drop-files-here"></div>
     </button>
   </lr-drop-area>
 `;
diff --git a/blocks/SimpleBtn/simple-btn.css b/blocks/SimpleBtn/simple-btn.css
index 0c8e3a756..d8c01957e 100644
--- a/blocks/SimpleBtn/simple-btn.css
+++ b/blocks/SimpleBtn/simple-btn.css
@@ -1,32 +1,37 @@
-lr-simple-btn {
+:where([lr-simple-btn]) {
   position: relative;
   display: inline-flex;
 }
 
-lr-simple-btn button {
-  padding-left: 0.2em !important;
-  color: var(--clr-btn-txt-secondary);
-  background-color: var(--clr-btn-bgr-secondary);
-  box-shadow: var(--shadow-btn-secondary);
+:where([lr-simple-btn]) button {
+  height: auto;
+  gap: 0.5em;
+  padding: var(--uc-simple-btn-padding);
+  background-color: var(--uc-simple-btn);
+  color: var(--uc-simple-btn-foreground);
+  font-size: var(--uc-simple-btn-font-size);
+  font-family: var(--uc-simple-btn-font-family);
 }
 
-lr-simple-btn button lr-icon svg {
-  transform: scale(0.8);
+:where([lr-simple-btn]) button lr-icon {
+  width: auto;
+  height: auto;
 }
 
-lr-simple-btn button:hover {
-  background-color: var(--clr-btn-bgr-secondary-hover);
+:where([lr-simple-btn]) button lr-icon svg {
+  width: 0.9em;
+  height: 0.9em;
 }
 
-lr-simple-btn button:active {
-  background-color: var(--clr-btn-bgr-secondary-active);
+:where([lr-simple-btn]) button:hover {
+  background-color: var(--uc-simple-btn-hover);
 }
 
-lr-simple-btn > lr-drop-area {
+:where([lr-simple-btn]) > lr-drop-area {
   display: contents;
 }
 
-lr-simple-btn .visual-drop-area {
+:where([lr-simple-btn]) .uc-visual-drop-area {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -35,55 +40,25 @@ lr-simple-btn .visual-drop-area {
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: var(--gap-min);
-  border: var(--border-dashed);
+  padding: var(--uc-simple-btn-padding);
+  background-color: transparent;
+  color: transparent;
+  font-size: var(--uc-simple-btn-font-size);
+  border: 1px dashed var(--uc-simple-btn-foreground);
   border-radius: inherit;
   opacity: 0;
-  transition:
-    border-color var(--transition-duration) ease,
-    background-color var(--transition-duration) ease,
-    opacity var(--transition-duration) ease;
+  transition: opacity var(--uc-transition);
 }
 
-lr-simple-btn .visual-drop-area::before {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: var(--clr-txt-light);
-  background-color: var(--clr-background);
-  border-radius: inherit;
-}
-
-lr-simple-btn > lr-drop-area[drag-state='active'] .visual-drop-area {
-  background-color: var(--clr-accent-lightest);
+:where([lr-simple-btn]) > lr-drop-area[drag-state='active'] .uc-visual-drop-area {
   opacity: 1;
 }
-lr-simple-btn > lr-drop-area[drag-state='inactive'] .visual-drop-area {
-  background-color: var(--clr-shade-lv1);
+:where([lr-simple-btn]) > lr-drop-area[drag-state='inactive'] .uc-visual-drop-area {
   opacity: 0;
 }
-lr-simple-btn > lr-drop-area[drag-state='near'] .visual-drop-area {
-  background-color: var(--clr-accent-lightest);
-  border-color: var(--clr-accent-light);
+:where([lr-simple-btn]) > lr-drop-area[drag-state='near'] .uc-visual-drop-area {
   opacity: 1;
 }
-lr-simple-btn > lr-drop-area[drag-state='over'] .visual-drop-area {
-  background-color: var(--clr-accent-lightest);
-  border-color: var(--clr-accent);
+:where([lr-simple-btn]) > lr-drop-area[drag-state='over'] .uc-visual-drop-area {
   opacity: 1;
 }
-
-lr-simple-btn
-  > :where(lr-drop-area[drag-state='active'], lr-drop-area[drag-state='near'], lr-drop-area[drag-state='over'])
-  button {
-  box-shadow: none;
-}
-
-lr-simple-btn > lr-drop-area::after {
-  content: '';
-}
diff --git a/blocks/SourceBtn/SourceBtn.js b/blocks/SourceBtn/SourceBtn.js
index 3eeeddddb..b0781df64 100644
--- a/blocks/SourceBtn/SourceBtn.js
+++ b/blocks/SourceBtn/SourceBtn.js
@@ -39,7 +39,7 @@ export class SourceBtn extends UploaderBlock {
     this.registerType({
       type: UploaderBlock.sourceTypes.LOCAL,
       activate: () => {
-        this.openSystemDialog();
+        this.api.openSystemDialog();
         return false;
       },
     });
@@ -54,7 +54,7 @@ export class SourceBtn extends UploaderBlock {
       activate: () => {
         const supportsCapture = 'capture' in document.createElement('input');
         if (supportsCapture) {
-          this.openSystemDialog({ captureCamera: true });
+          this.api.openSystemDialog({ captureCamera: true });
         }
         return !supportsCapture;
       },
@@ -80,7 +80,6 @@ export class SourceBtn extends UploaderBlock {
     super.initCallback();
     this.initTypes();
 
-    this.setAttribute('role', 'button');
     this.defineAccessor(
       'type',
       /** @param {string} val */
@@ -133,9 +132,12 @@ export class SourceBtn extends UploaderBlock {
     };
   }
 }
+
 SourceBtn.template = /* HTML */ `
-  <lr-icon set="@name: iconName"></lr-icon>
-  <div class="txt" l10n="src-type"></div>
+  <button type="button">
+    <lr-icon set="@name: iconName"></lr-icon>
+    <div class="uc-txt" l10n="src-type"></div>
+  </button>
 `;
 SourceBtn.bindAttributes({
   // @ts-expect-error symbiote types bug
diff --git a/blocks/SourceBtn/source-btn.css b/blocks/SourceBtn/source-btn.css
index 1412153a5..c956bdfbe 100644
--- a/blocks/SourceBtn/source-btn.css
+++ b/blocks/SourceBtn/source-btn.css
@@ -1,41 +1,44 @@
-lr-source-btn {
+lr-source-btn > button {
   display: flex;
   align-items: center;
-  margin-bottom: var(--gap-min);
-  padding: var(--gap-min) var(--gap-mid);
-  color: var(--clr-txt-mid);
-  border-radius: var(--border-radius-element);
+  margin-bottom: 2px;
+  padding: 2px var(--uc-padding);
+  color: var(--uc-foreground);
+  border-radius: var(--uc-radius);
   cursor: pointer;
-  transition-duration: var(--transition-duration);
-  transition-property: background-color, color;
+  transition:
+    background-color var(--uc-transition),
+    color var(--uc-transition);
   user-select: none;
+  width: 100%;
+  background-color: unset;
+  height: unset;
 }
 
-lr-source-btn:hover {
-  color: var(--clr-accent);
-  background-color: var(--clr-accent-lightest);
+lr-source-btn:last-child > button {
+  margin-bottom: 0;
 }
 
-lr-source-btn:active {
-  color: var(--clr-accent);
-  background-color: var(--clr-accent-light);
+lr-source-btn > button:hover {
+  color: var(--uc-primary);
+  background-color: var(--uc-primary-transparent);
 }
 
 lr-source-btn lr-icon {
   display: inline-flex;
   flex-grow: 1;
   justify-content: center;
-  min-width: var(--ui-size);
-  margin-right: var(--gap-mid);
+  min-width: var(--uc-button-size);
+  margin-right: var(--uc-padding);
   opacity: 0.8;
 }
 
-lr-source-btn .txt {
+lr-source-btn .uc-txt {
   display: flex;
   align-items: center;
   box-sizing: border-box;
   width: 100%;
-  height: var(--ui-size);
+  height: var(--uc-button-size);
   padding: 0;
   white-space: nowrap;
   border: none;
diff --git a/blocks/StartFrom/StartFrom.js b/blocks/StartFrom/StartFrom.js
index 18ac4a098..fa9900a77 100644
--- a/blocks/StartFrom/StartFrom.js
+++ b/blocks/StartFrom/StartFrom.js
@@ -11,4 +11,4 @@ export class StartFrom extends ActivityBlock {
   }
 }
 
-StartFrom.template = /* HTML */ ` <div class="content"><slot></slot></div> `;
+StartFrom.template = /* HTML */ ` <div class="uc-content"><slot></slot></div> `;
diff --git a/blocks/StartFrom/start-from.css b/blocks/StartFrom/start-from.css
index a7e518f3e..9a350e1cc 100644
--- a/blocks/StartFrom/start-from.css
+++ b/blocks/StartFrom/start-from.css
@@ -3,16 +3,30 @@ lr-start-from {
   overflow-y: auto;
 }
 
-lr-start-from .content {
+lr-start-from .uc-content {
   display: grid;
   grid-auto-flow: row;
-  gap: var(--gap-max);
+  gap: calc(var(--uc-padding) * 2);
   width: 100%;
   height: 100%;
-  padding: var(--gap-max);
-  background-color: var(--clr-background-light);
+  padding: calc(var(--uc-padding) * 2);
+  background-color: var(--uc-background);
 }
 
-lr-modal lr-start-from {
-  width: min(calc(var(--modal-normal-w) - var(--gap-mid) * 2), calc(100vw - var(--gap-mid) * 2));
+[lr-modal] lr-start-from {
+  width: min(
+    calc(var(--uc-dialog-width) - var(--uc-padding) * 2),
+    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
+    calc(100vw - var(--uc-padding) * 2)
+  );
+}
+
+[lr-modal] lr-start-from lr-drop-area {
+  border-radius: var(--uc-radius);
+}
+
+@media only screen and (max-width: 430px) {
+  [lr-modal] lr-start-from lr-drop-area {
+    display: none;
+  }
 }
diff --git a/blocks/Tabs/Tabs.js b/blocks/Tabs/Tabs.js
deleted file mode 100644
index a5b1e6790..000000000
--- a/blocks/Tabs/Tabs.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Block } from '../../abstract/Block.js';
-import { create } from '@symbiotejs/symbiote';
-import { stringToArray } from '../../utils/stringToArray.js';
-
-export class Tabs extends Block {
-  /** @param {String} tabL10nStr */
-  setCurrentTab(tabL10nStr) {
-    if (!tabL10nStr) {
-      return;
-    }
-    let ctxList = [...this.ref.context.querySelectorAll('[tab-ctx]')];
-    ctxList.forEach((ctxEl) => {
-      if (ctxEl.getAttribute('tab-ctx') === tabL10nStr) {
-        ctxEl.removeAttribute('hidden');
-      } else {
-        ctxEl.setAttribute('hidden', '');
-      }
-    });
-    for (let lStr in this._tabMap) {
-      if (lStr === tabL10nStr) {
-        this._tabMap[lStr].setAttribute('current', '');
-      } else {
-        this._tabMap[lStr].removeAttribute('current');
-      }
-    }
-  }
-
-  initCallback() {
-    super.initCallback();
-    /**
-     * @private
-     * @type {Object<string, HTMLElement>}
-     */
-    this._tabMap = {};
-    this.defineAccessor('tab-list', (/** @type {String} */ val) => {
-      if (!val) {
-        return;
-      }
-      let tabList = stringToArray(val);
-      tabList.forEach((tabL10nStr) => {
-        let tabEl = create({
-          tag: 'div',
-          attributes: {
-            class: 'tab',
-          },
-          properties: {
-            onclick: () => {
-              this.setCurrentTab(tabL10nStr);
-            },
-          },
-        });
-        tabEl.textContent = this.l10n(tabL10nStr);
-        this.ref.row.appendChild(tabEl);
-        this._tabMap[tabL10nStr] = tabEl;
-      });
-    });
-
-    this.defineAccessor('default', (val) => {
-      this.setCurrentTab(val);
-    });
-
-    if (!this.hasAttribute('default')) {
-      this.setCurrentTab(Object.keys(this._tabMap)[0]);
-    }
-  }
-}
-
-Tabs.bindAttributes({
-  'tab-list': null,
-  default: null,
-});
-
-Tabs.template = /* HTML */ `
-  <div ref="row" class="tabs-row"></div>
-  <div ref="context" class="tabs-context">
-    <slot></slot>
-  </div>
-`;
diff --git a/blocks/Tabs/tabs.css b/blocks/Tabs/tabs.css
deleted file mode 100644
index 12593cf7b..000000000
--- a/blocks/Tabs/tabs.css
+++ /dev/null
@@ -1,33 +0,0 @@
-lr-tabs {
-  display: grid;
-  grid-template-rows: min-content minmax(var(--ui-size), auto);
-  height: 100%;
-  overflow: hidden;
-  color: var(--clr-txt-lightest);
-}
-
-lr-tabs > .tabs-row {
-  display: flex;
-  grid-template-columns: minmax();
-  background-color: var(--clr-background-light);
-}
-
-lr-tabs > .tabs-context {
-  overflow-y: auto;
-}
-
-lr-tabs .tabs-row > .tab {
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  justify-content: center;
-  height: var(--ui-size);
-  border-bottom: var(--border-light);
-  cursor: pointer;
-  transition: var(--transition-duration);
-}
-
-lr-tabs .tabs-row > .tab[current] {
-  color: var(--clr-txt);
-  border-color: var(--clr-txt);
-}
diff --git a/blocks/UploadList/UploadList.js b/blocks/UploadList/UploadList.js
index 57daa1345..58be9ee4f 100644
--- a/blocks/UploadList/UploadList.js
+++ b/blocks/UploadList/UploadList.js
@@ -35,16 +35,16 @@ export class UploadList extends UploaderBlock {
 
       hasFiles: false,
       onAdd: () => {
-        this.initFlow(true);
+        this.api.initFlow(true);
       },
       onUpload: () => {
         this.emit(EventType.UPLOAD_CLICK);
-        this.uploadAll();
+        this.api.uploadAll();
         this._throttledHandleCollectionUpdate();
       },
       onDone: () => {
-        this.emit(EventType.DONE_CLICK, this.getOutputCollectionState());
-        this.doneFlow();
+        this.emit(EventType.DONE_CLICK, this.api.getOutputCollectionState());
+        this.api.doneFlow();
       },
       onCancel: () => {
         this.uploadCollection.clearAll();
@@ -66,7 +66,7 @@ export class UploadList extends UploaderBlock {
 
   /** @private */
   _updateUploadsState() {
-    const collectionState = this.getOutputCollectionState();
+    const collectionState = this.api.getOutputCollectionState();
     /** @type {Summary} */
     const summary = {
       total: collectionState.totalCount,
@@ -163,7 +163,7 @@ export class UploadList extends UploaderBlock {
         });
 
         if (!this.cfg.confirmUpload) {
-          this.uploadAll();
+          this.api.uploadAll();
         }
       },
       false,
@@ -195,39 +195,39 @@ export class UploadList extends UploaderBlock {
 
 UploadList.template = /* HTML */ `
   <lr-activity-header>
-    <span class="header-text">{{headerText}}</span>
-    <button type="button" class="mini-btn close-btn" set="onclick: *closeModal">
+    <span class="uc-header-text">{{headerText}}</span>
+    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
       <lr-icon name="close"></lr-icon>
     </button>
   </lr-activity-header>
 
-  <div class="no-files" set="@hidden: hasFiles">
+  <div class="uc-no-files" set="@hidden: hasFiles">
     <slot name="empty"><span l10n="no-files"></span></slot>
   </div>
 
-  <div class="files" repeat="*uploadList" repeat-item-tag="lr-file-item"></div>
+  <div class="uc-files" repeat="*uploadList" repeat-item-tag="lr-file-item"></div>
 
-  <div class="common-error" set="@hidden: !commonErrorMessage; textContent: commonErrorMessage;"></div>
+  <div class="uc-common-error" set="@hidden: !commonErrorMessage; textContent: commonErrorMessage;"></div>
 
-  <div class="toolbar">
-    <button type="button" class="cancel-btn secondary-btn" set="onclick: onCancel;" l10n="clear"></button>
-    <div class="toolbar-spacer"></div>
+  <div class="uc-toolbar">
+    <button type="button" class="uc-cancel-btn uc-secondary-btn" set="onclick: onCancel;" l10n="clear"></button>
+    <div class="uc-toolbar-spacer"></div>
     <button
       type="button"
-      class="add-more-btn secondary-btn"
+      class="uc-add-more-btn uc-secondary-btn"
       set="onclick: onAdd; @disabled: !addMoreBtnEnabled; @hidden: !addMoreBtnVisible"
     >
       <lr-icon name="add"></lr-icon><span l10n="add-more"></span>
     </button>
     <button
       type="button"
-      class="upload-btn primary-btn"
+      class="uc-upload-btn uc-primary-btn"
       set="@hidden: !uploadBtnVisible; onclick: onUpload;"
       l10n="upload"
     ></button>
     <button
       type="button"
-      class="done-btn primary-btn"
+      class="uc-done-btn uc-primary-btn"
       set="@hidden: !doneBtnVisible; onclick: onDone;  @disabled: !doneBtnEnabled"
       l10n="done"
     ></button>
diff --git a/blocks/UploadList/upload-list.css b/blocks/UploadList/upload-list.css
index 842eac64b..e2b79bf5e 100644
--- a/blocks/UploadList/upload-list.css
+++ b/blocks/UploadList/upload-list.css
@@ -4,42 +4,42 @@ lr-upload-list {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background-color: var(--clr-background-light);
-  transition: opacity var(--transition-duration);
+  background-color: var(--uc-background);
+  transition: opacity var(--uc-transition);
 }
 
-lr-modal lr-upload-list {
-  width: min(calc(var(--modal-normal-w) - var(--gap-mid) * 2), calc(100vw - var(--gap-mid) * 2));
+[lr-modal] lr-upload-list {
+  width: min(
+    calc(var(--uc-dialog-width) - var(--uc-padding) * 2),
+    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
+    calc(100vw - var(--uc-padding) * 2)
+  );
   height: max-content;
   max-height: var(--modal-max-content-height);
 }
 
-lr-upload-list .no-files {
-  height: var(--ui-size);
-  padding: var(--gap-max);
+lr-upload-list .uc-no-files {
+  height: 32px;
+  padding: 20px;
 }
 
-lr-upload-list .files {
+lr-upload-list .uc-files {
   display: block;
   flex: 1;
-  min-height: var(--ui-size);
-  padding: 0 var(--gap-mid);
+  min-height: 32px;
+  padding: 0 var(--uc-padding);
   overflow: auto;
 }
 
-lr-upload-list .toolbar {
+lr-upload-list .uc-toolbar {
   display: flex;
-  gap: var(--gap-small);
+  gap: 4px;
   justify-content: space-between;
-  padding: var(--gap-mid);
-  background-color: var(--clr-background-light);
+  padding: var(--uc-padding);
+  background-color: var(--uc-background);
 }
 
-lr-upload-list .toolbar .add-more-btn {
-  padding-left: 0.2em;
-}
-
-lr-upload-list .toolbar-spacer {
+lr-upload-list .uc-toolbar-spacer {
   flex: 1;
 }
 
@@ -47,24 +47,28 @@ lr-upload-list lr-drop-area {
   position: absolute;
   top: 0;
   left: 0;
-  width: calc(100% - var(--gap-mid) * 2);
-  height: calc(100% - var(--gap-mid) * 2);
-  margin: var(--gap-mid);
-  border-radius: var(--border-radius-element);
+  width: calc(100% - var(--uc-padding) * 2);
+  height: calc(100% - var(--uc-padding) * 2);
+  margin: var(--uc-padding);
+  border-radius: var(--uc-radius);
 }
 
-lr-upload-list lr-activity-header > .header-text {
-  padding: 0 var(--gap-mid);
+lr-upload-list lr-activity-header > .uc-header-text {
+  padding: 0 var(--uc-padding);
 }
 
-lr-upload-list .common-error {
-  border-radius: var(--border-radius-element);
-  color: var(--clr-error);
-  background-color: var(--clr-error-message-bgr);
+lr-upload-list .uc-common-error {
+  border-radius: var(--uc-radius);
+  color: var(--uc-destructive-foreground);
+  background-color: var(--uc-destructive);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--gap-mid);
-  margin: var(--gap-small) var(--gap-mid) 0 var(--gap-mid);
-  font-size: 0.95em;
+  padding: var(--uc-padding);
+  margin: 4px var(--uc-padding) 0 var(--uc-padding);
+  font-size: 0.925em;
+}
+
+lr-upload-list .uc-add-more-btn lr-icon {
+  display: none;
 }
diff --git a/blocks/UrlSource/UrlSource.js b/blocks/UrlSource/UrlSource.js
index d71d79008..b10554f98 100644
--- a/blocks/UrlSource/UrlSource.js
+++ b/blocks/UrlSource/UrlSource.js
@@ -13,7 +13,7 @@ export class UrlSource extends UploaderBlock {
       e.preventDefault();
 
       let url = this.ref.input['value'];
-      this.addFileFromUrl(url, { source: UploadSource.URL_TAB });
+      this.api.addFileFromUrl(url, { source: UploadSource.URL_TAB });
       this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
     },
     onCancel: () => {
@@ -38,22 +38,22 @@ export class UrlSource extends UploaderBlock {
 
 UrlSource.template = /* HTML */ `
   <lr-activity-header>
-    <button type="button" class="mini-btn" set="onclick: *historyBack">
+    <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
       <lr-icon name="back"></lr-icon>
     </button>
     <div>
       <lr-icon name="url"></lr-icon>
       <span l10n="caption-from-url"></span>
     </div>
-    <button type="button" class="mini-btn close-btn" set="onclick: *closeModal">
+    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
       <lr-icon name="close"></lr-icon>
     </button>
   </lr-activity-header>
-  <form class="content">
-    <input placeholder="https://" class="url-input" type="text" ref="input" set="oninput: onInput" />
+  <form class="uc-content">
+    <input placeholder="https://" class="uc-url-input" type="text" ref="input" set="oninput: onInput" />
     <button
       type="submit"
-      class="url-upload-btn primary-btn"
+      class="uc-url-upload-btn uc-primary-btn"
       set="onclick: onUpload; @disabled: importDisabled"
       l10n="upload-url"
     ></button>
diff --git a/blocks/UrlSource/url-source.css b/blocks/UrlSource/url-source.css
index fa3c9ff33..9b854bdbd 100644
--- a/blocks/UrlSource/url-source.css
+++ b/blocks/UrlSource/url-source.css
@@ -1,20 +1,24 @@
 lr-url-source {
   display: block;
-  background-color: var(--clr-background-light);
+  background-color: var(--uc-background);
 }
 
-lr-modal lr-url-source {
-  width: min(calc(var(--modal-normal-w) - var(--gap-mid) * 2), calc(100vw - var(--gap-mid) * 2));
+[lr-modal] lr-url-source {
+  width: min(
+    calc(var(--uc-dialog-width) - var(--uc-padding) * 2),
+    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
+    calc(100vw - var(--uc-padding) * 2)
+  );
 }
 
-lr-url-source > .content {
+lr-url-source > .uc-content {
   display: grid;
-  grid-gap: var(--gap-small);
+  grid-gap: 4px;
   grid-template-columns: 1fr min-content;
-  padding: var(--gap-mid);
+  padding: var(--uc-padding);
   padding-top: 0;
 }
 
-lr-url-source .url-input {
+lr-url-source .uc-url-input {
   display: flex;
 }
diff --git a/blocks/Video/Video.js b/blocks/Video/Video.js
deleted file mode 100644
index 93f9539a1..000000000
--- a/blocks/Video/Video.js
+++ /dev/null
@@ -1,299 +0,0 @@
-import { Block } from '../../abstract/Block.js';
-
-/** @enum {String} */
-const ICO_MAP = {
-  PLAY: 'play',
-  PAUSE: 'pause',
-  FS_ON: 'fullscreen-on',
-  FS_OFF: 'fullscreen-off',
-  VOL_ON: 'unmute',
-  VOL_OFF: 'mute',
-  CAP_ON: 'captions',
-  CAP_OFF: 'captions-off',
-};
-
-// TODO: refactor and move fullscreen adapter to utils:
-const FSAPI = {
-  requestFullscreen: (el) => {
-    if (el.requestFullscreen) {
-      el.requestFullscreen();
-    } else if (el.webkitRequestFullscreen) {
-      el.webkitRequestFullscreen();
-    }
-  },
-  exitFullscreen: () => {
-    if (document.exitFullscreen) {
-      document.exitFullscreen();
-    } else if (document['webkitExitFullscreen']) {
-      document['webkitExitFullscreen']();
-    }
-  },
-};
-
-export class Video extends Block {
-  togglePlay() {
-    if (this._video.paused || this._video.ended) {
-      this._video.play();
-    } else {
-      this._video.pause();
-    }
-  }
-
-  toggleFullscreen() {
-    if ((document.fullscreenElement || document['webkitFullscreenElement']) === this) {
-      FSAPI.exitFullscreen();
-    } else {
-      FSAPI.requestFullscreen(this);
-    }
-  }
-
-  toggleCaptions() {
-    if (this.$.capIcon === ICO_MAP.CAP_OFF) {
-      this.$.capIcon = ICO_MAP.CAP_ON;
-      this._video.textTracks[0].mode = 'showing';
-      window.localStorage.setItem(Video.is + ':captions', '1');
-    } else {
-      this.$.capIcon = ICO_MAP.CAP_OFF;
-      this._video.textTracks[0].mode = 'hidden';
-      window.localStorage.removeItem(Video.is + ':captions');
-    }
-  }
-
-  toggleSound() {
-    if (this.$.volIcon === ICO_MAP.VOL_ON) {
-      this.$.volIcon = ICO_MAP.VOL_OFF;
-      this.$.volumeDisabled = true;
-      this._video.muted = true;
-    } else {
-      this.$.volIcon = ICO_MAP.VOL_ON;
-      this.$.volumeDisabled = false;
-      this._video.muted = false;
-    }
-  }
-
-  setVolume(val) {
-    window.localStorage.setItem(Video.is + ':volume', val);
-    let volume = val ? val / 100 : 0;
-    this._video.volume = volume;
-  }
-
-  /** @type {HTMLElement} */
-  get progress() {
-    return this.ref.progress;
-  }
-
-  init$ = {
-    ...this.init$,
-    src: '',
-    ppIcon: ICO_MAP.PLAY,
-    fsIcon: ICO_MAP.FS_ON,
-    volIcon: ICO_MAP.VOL_ON,
-    capIcon: ICO_MAP.CAP_OFF,
-    totalTime: '00:00',
-    currentTime: '00:00',
-    progressCssWidth: '0',
-    hasSubtitles: false,
-    volumeDisabled: false,
-    volumeValue: 0,
-    onPP: () => {
-      this.togglePlay();
-    },
-    onFs: () => {
-      this.toggleFullscreen();
-    },
-    onCap: () => {
-      this.toggleCaptions();
-    },
-    onMute: () => {
-      this.toggleSound();
-    },
-    onVolChange: (e) => {
-      // TODO: cast range.value instead of range.$.value
-      let val = parseFloat(e.currentTarget.$.value);
-      this.setVolume(val);
-    },
-    progressClicked: (e) => {
-      let progressRect = this.progress.getBoundingClientRect();
-      this._video.currentTime = this._video.duration * (e.offsetX / progressRect.width);
-    },
-  };
-
-  /**
-   * @private
-   * @param {String} input
-   */
-  _getUrl(input) {
-    return input.includes('/') ? input : `https://ucarecdn.com/${input}/`;
-  }
-
-  /**
-   * @private
-   * @param {Object<string, any>} desc
-   */
-  _desc2attrs(desc) {
-    let attrs = [];
-    for (let attr in desc) {
-      let val = attr === 'src' ? this._getUrl(desc[attr]) : desc[attr];
-      attrs.push(`${attr}="${val}"`);
-    }
-    return attrs.join(' ');
-  }
-
-  /**
-   * @private
-   * @param {Number} seconds
-   */
-  _timeFmt(seconds) {
-    // TODO: add hours
-    let date = new Date(Math.round(seconds) * 1000);
-    return [date.getMinutes(), date.getSeconds()]
-      .map((n) => {
-        return n < 10 ? '0' + n : n;
-      })
-      .join(':');
-  }
-
-  /** @private */
-  _initTracks() {
-    [...this._video.textTracks].forEach((track) => {
-      track.mode = 'hidden';
-    });
-    if (window.localStorage.getItem(Video.is + ':captions')) {
-      this.toggleCaptions();
-    }
-  }
-
-  /** @private */
-  _castAttributes() {
-    let toCast = ['autoplay', 'loop', 'muted'];
-    [...this.attributes].forEach((attr) => {
-      if (toCast.includes(attr.name)) {
-        this._video.setAttribute(attr.name, attr.value);
-      }
-    });
-  }
-
-  initCallback() {
-    super.initCallback();
-    /**
-     * @private
-     * @type {HTMLVideoElement}
-     */
-    this._video = this.ref.video;
-
-    this._castAttributes();
-
-    this._video.addEventListener('play', () => {
-      this.$.ppIcon = ICO_MAP.PAUSE;
-      this.setAttribute('playback', '');
-    });
-
-    this._video.addEventListener('pause', () => {
-      this.$.ppIcon = ICO_MAP.PLAY;
-      this.removeAttribute('playback');
-    });
-
-    this.addEventListener('fullscreenchange', (e) => {
-      console.log(e);
-      if (document.fullscreenElement === this) {
-        this.$.fsIcon = ICO_MAP.FS_OFF;
-      } else {
-        this.$.fsIcon = ICO_MAP.FS_ON;
-      }
-    });
-
-    this.sub('src', (src) => {
-      if (!src) {
-        return;
-      }
-      let url = this._getUrl(src);
-      this._video.src = url;
-    });
-
-    this.sub('video', async (descPath) => {
-      if (!descPath) {
-        return;
-      }
-      let desc = await (await window.fetch(this._getUrl(descPath))).json();
-
-      if (desc.poster) {
-        this._video.poster = this._getUrl(desc.poster);
-      }
-
-      let html = '';
-      desc?.sources.forEach((srcDesc) => {
-        html += /* HTML */ `<source ${this._desc2attrs(srcDesc)} />`;
-      });
-
-      if (desc.tracks) {
-        desc.tracks.forEach((trackDesc) => {
-          html += /* HTML */ `<track ${this._desc2attrs(trackDesc)} />`;
-        });
-        this.$.hasSubtitles = true;
-      }
-
-      this._video.innerHTML += html;
-
-      this._initTracks();
-      console.log(desc);
-    });
-
-    this._video.addEventListener('loadedmetadata', (e) => {
-      this.$.currentTime = this._timeFmt(this._video.currentTime);
-      this.$.totalTime = this._timeFmt(this._video.duration);
-    });
-
-    this._video.addEventListener('timeupdate', (e) => {
-      let perc = Math.round(100 * (this._video.currentTime / this._video.duration));
-      this.$.progressCssWidth = perc + '%';
-      this.$.currentTime = this._timeFmt(this._video.currentTime);
-    });
-
-    let volume = window.localStorage.getItem(Video.is + ':volume');
-    if (volume) {
-      let vol = parseFloat(volume);
-      this.setVolume(vol);
-      this.$.volumeValue = vol;
-    }
-  }
-}
-
-Video.template = /* HTML */ `
-  <div class="video-wrapper">
-    <video ref="video" preload="metadata" crossorigin="anonymous"></video>
-  </div>
-
-  <div class="toolbar">
-    <div class="progress" ref="progress" set -onclick="progressClicked">
-      <div class="bar" set -style.width="progressCssWidth"></div>
-    </div>
-
-    <div class="tb-block">
-      <button set -onclick="onPP">
-        <lr-icon set -@name="ppIcon"></lr-icon>
-      </button>
-      <div class="timer">{{currentTime}} / {{totalTime}}</div>
-    </div>
-
-    <div class="tb-block">
-      <button set -onclick="onCap" -@hidden="!hasSubtitles">
-        <lr-icon set -@name="capIcon"></lr-icon>
-      </button>
-
-      <button set -onclick="onMute">
-        <lr-icon set -@name="volIcon"></lr-icon>
-      </button>
-
-      <lr-range type="range" set -onchange="onVolChange" -@disabled="volumeDisabled" -value="volumeValue"> </lr-range>
-
-      <button set -onclick="onFs">
-        <lr-icon set -@name="fsIcon"></lr-icon>
-      </button>
-    </div>
-  </div>
-`;
-
-Video.bindAttributes({
-  video: 'video',
-  src: 'src',
-});
diff --git a/blocks/Video/test-track.vtt b/blocks/Video/test-track.vtt
deleted file mode 100644
index 1141e5b6a..000000000
--- a/blocks/Video/test-track.vtt
+++ /dev/null
@@ -1,10 +0,0 @@
-WEBVTT
-
-00:01.000 --> 00:04.000
-- Hello lr-video!
-
-00:05.000 --> 00:15.000
-- This is subtitles test.
-
-00:16.000 --> 00:30.000
-- Try to turn off and then turn on subtitles...
\ No newline at end of file
diff --git a/blocks/Video/video.css b/blocks/Video/video.css
deleted file mode 100644
index 85499ee3c..000000000
--- a/blocks/Video/video.css
+++ /dev/null
@@ -1,106 +0,0 @@
-@import url('../Range/range.css');
-
-lr-video {
-  --color-accent: rgb(196, 243, 255);
-
-  display: inline-grid;
-  grid-template-rows: 1fr min-content;
-  max-height: var(--uploadcare-blocks-window-height, 100vh);
-  overflow: hidden;
-  font-family: monospace;
-  background-color: #000;
-  border-radius: 6px;
-}
-
-lr-video [hidden] {
-  display: none !important;
-}
-
-lr-video lr-range[disabled] {
-  opacity: 0.4;
-  pointer-events: none;
-}
-
-lr-video .video-wrapper {
-  overflow: hidden;
-}
-
-lr-video video {
-  display: inline-block;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  background-color: #ccc;
-  background-color: #000;
-}
-
-lr-video lr-icon {
-  --icon-play: 'M8,5.14V19.14L19,12.14L8,5.14Z';
-  --icon-pause: 'M14,19H18V5H14M6,19H10V5H6V19Z';
-  --icon-mute: 'M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z';
-  --icon-unmute: 'M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z';
-  --icon-fullscreen-on: 'M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z';
-  --icon-fullscreen-off: 'M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z';
-  --icon-captions: 'M18,11H16.5V10.5H14.5V13.5H16.5V13H18V14A1,1 0 0,1 17,15H14A1,1 0 0,1 13,14V10A1,1 0 0,1 14,9H17A1,1 0 0,1 18,10M11,11H9.5V10.5H7.5V13.5H9.5V13H11V14A1,1 0 0,1 10,15H7A1,1 0 0,1 6,14V10A1,1 0 0,1 7,9H10A1,1 0 0,1 11,10M19,4H5C3.89,4 3,4.89 3,6V18A2,2 0 0,0 5,20H19A2,2 0 0,0 21,18V6C21,4.89 20.1,4 19,4Z';
-  --icon-captions-off: 'M5,4C4.45,4 4,4.18 3.59,4.57C3.2,4.96 3,5.44 3,6V18C3,18.56 3.2,19.04 3.59,19.43C4,19.82 4.45,20 5,20H19C19.5,20 20,19.81 20.39,19.41C20.8,19 21,18.53 21,18V6C21,5.47 20.8,5 20.39,4.59C20,4.19 19.5,4 19,4H5M4.5,5.5H19.5V18.5H4.5V5.5M7,9C6.7,9 6.47,9.09 6.28,9.28C6.09,9.47 6,9.7 6,10V14C6,14.3 6.09,14.53 6.28,14.72C6.47,14.91 6.7,15 7,15H10C10.27,15 10.5,14.91 10.71,14.72C10.91,14.53 11,14.3 11,14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11,9.7 10.91,9.47 10.71,9.28C10.5,9.09 10.27,9 10,9H7M14,9C13.73,9 13.5,9.09 13.29,9.28C13.09,9.47 13,9.7 13,10V14C13,14.3 13.09,14.53 13.29,14.72C13.5,14.91 13.73,15 14,15H17C17.3,15 17.53,14.91 17.72,14.72C17.91,14.53 18,14.3 18,14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18,9.7 17.91,9.47 17.72,9.28C17.53,9.09 17.3,9 17,9H14Z';
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  fill: currentColor;
-}
-
-lr-video:not([controls]) .toolbar {
-  display: none;
-}
-
-lr-video .toolbar {
-  position: relative;
-  z-index: 10000;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: var(--color-accent);
-  background-color: #000;
-  transition: 0.4s;
-}
-lr-video[playback] .toolbar {
-  opacity: 0.2;
-}
-lr-video .toolbar:hover {
-  opacity: 1;
-}
-
-lr-video .toolbar .tb-block {
-  display: flex;
-  align-items: center;
-}
-
-lr-video .toolbar .tb-block button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 40px;
-  height: 40px;
-  color: var(--color-accent);
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-}
-lr-video .progress {
-  position: absolute;
-  top: -18px;
-  right: 0;
-  left: 0;
-  display: flex;
-  align-items: flex-end;
-  height: 20px;
-  cursor: pointer;
-}
-lr-video .progress .bar {
-  height: 2px;
-  background-color: var(--color-accent);
-  transition: 0.5s;
-}
diff --git a/blocks/Video/video.json b/blocks/Video/video.json
deleted file mode 100644
index 180578666..000000000
--- a/blocks/Video/video.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "sources": [
-    {
-      "label": "HQ",
-      "src": "d52902bb-c7d3-4e00-9f80-ed489dda9a3f",
-      "type": "video/mp4"
-    },
-    {
-      "label": "MQ",
-      "src": "d52902bb-c7d3-4e00-9f80-ed489dda9a3f",
-      "type": "video/mp4"
-    },
-    {
-      "label": "LQ",
-      "src": "d52902bb-c7d3-4e00-9f80-ed489dda9a3f",
-      "type": "video/mp4"
-    }
-  ],
-  "tracks": [
-    {
-      "kind": "subtitles",
-      "src": "bd8fd88a-a2ea-49a7-825b-4a68c355667c",
-      "srclang": "en",
-      "label": "EN",
-      "default": true
-    }
-  ],
-  "poster": "89409d82-8939-4c6f-8410-d4b6bcb404d9"
-}
diff --git a/blocks/svg-backgrounds/svg-backgrounds.js b/blocks/svg-backgrounds/svg-backgrounds.js
index 5d35812f7..042fc17c9 100644
--- a/blocks/svg-backgrounds/svg-backgrounds.js
+++ b/blocks/svg-backgrounds/svg-backgrounds.js
@@ -39,7 +39,7 @@ export function strokesCssBg(color = 'rgba(0, 0, 0, .1)') {
 export function fileCssBg(color = 'hsl(209, 21%, 65%)', width = 32, height = 32) {
   return createSvgBlobUrl(/*svg*/ `
   <svg width="${width}" height="${height}" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill="currentColor" fill-rule="evenodd" fill="${color}" d="M9.68848 8.70068C9.68848 8.42454 9.91233 8.20068 10.1885 8.20068H15.0885C15.2211 8.20068 15.3483 8.25336 15.442 8.34713L20.342 13.2471C20.4358 13.3409 20.4885 13.4681 20.4885 13.6007V21.3007C20.4885 21.5768 20.2646 21.8007 19.9885 21.8007H10.1885C9.91233 21.8007 9.68848 21.5768 9.68848 21.3007V8.70068ZM10.6885 9.20068V20.8007H19.4885V14.1007L15.0885 14.1007C14.8123 14.1007 14.5885 13.8768 14.5885 13.6007L14.5885 9.20068H10.6885ZM15.5885 9.90779L18.7814 13.1007L15.5885 13.1007L15.5885 9.90779Z"/>
+    <path fill-rule="evenodd" fill="${color}" d="M9.68848 8.70068C9.68848 8.42454 9.91233 8.20068 10.1885 8.20068H15.0885C15.2211 8.20068 15.3483 8.25336 15.442 8.34713L20.342 13.2471C20.4358 13.3409 20.4885 13.4681 20.4885 13.6007V21.3007C20.4885 21.5768 20.2646 21.8007 19.9885 21.8007H10.1885C9.91233 21.8007 9.68848 21.5768 9.68848 21.3007V8.70068ZM10.6885 9.20068V20.8007H19.4885V14.1007L15.0885 14.1007C14.8123 14.1007 14.5885 13.8768 14.5885 13.6007L14.5885 9.20068H10.6885ZM15.5885 9.90779L18.7814 13.1007L15.5885 13.1007L15.5885 9.90779Z"/>
   </svg>
   `);
 }
diff --git a/blocks/themes/lr-basic/README.md b/blocks/themes/lr-basic/README.md
deleted file mode 100644
index 81b41591f..000000000
--- a/blocks/themes/lr-basic/README.md
+++ /dev/null
@@ -1,77 +0,0 @@
-# Basic theme for blocks
-
-There are 4 levels of abstraction:
-
-- [Base values](#base-values)
-- [Derivative values](#derivative-values])
-- [Common styles](#common-styles)
-- [Component styles](#component-styles)
-
-### HSL color space
-
-We use HSL color space because it allows us to easily calculate derivative colors. That's what prefixes `--h-`, `--s-`, and `--l-` are stand for.
-
-### Quick styling
-
-In most cases switching the dark mode on or off and changing the accent color is enough to make blocks match your design.
-
-<!-- If you want to do a deeper styling, see this guide
-TODO: write a guide. -->
-
-```css
---darkmode: 1;
-```
-
-```css
---h-accent: 211;
---s-accent: 100%;
---l-accent: calc(50% - 5% * var(--darkmode));
-```
-
-## Base values
-
-- `--darkmode` — `1`: dark mode enabled, `0`: disabled;
-- `--*-foreground` — text color, borders, and shaders. It should be in contrast to the background;
-- `--*-background` — background color and its variations;
-- `--*-accent` — colors of buttons, links, and text input borders (hover and focus). It should be in contrast to the background;
-- `--*-confirm` — the color of confirmation notifications and badges;
-- `--*-error` — the color of error notifications and badges;
-- `--opacity-*` — opacity of different states of small icon buttons;
-- `--ui-size` — minimum size of a clickable element. Also used to calculate the size of the elements, which should be proportional to it;
-- `--gap-*` — paddings and margins;
-- `--gap-table` — the gap between elements in lists (for example, in upload-list);
-- `--borders` — `1`: borders enabled, `0`: disabled. Can be fractional, for example, 0.5 will make borders half as opaque;
-- `--border-radius-element` — border radius of buttons and inputs;
-- `--border-radius-frame` — border radius of modal windows and drop area;
-- `--border-radius-thumb` — border radius of thumbnails;
-- `--transition-duration` — duration of all animated transitions;
-- `--shadows` — `1`: shadows enabled, `0`: disabled. Can be fractional, for example 0.5, will make shadows half as opaque;
-- `--*-shadow` — the color of box shadows;
-- `--modal-max-w`, `--modal-max-h` — the maximum size of the modal window.
-
-## Derivative values
-
-Derivative values are calculated from the base values.
-
-- `--darkmode-minus` — used for dark mode color calculations. Gives `-1` when dark mode is enabled, `1` when disabled;
-- `--clr-background*` — lightness variations of the background color;
-- `--clr-accent*` — opacity variations of the accent color;
-- `--clr-confirm` — confirmation notifications color;
-- `--clr-error` — opacity and lighness variations of the error notifications color;
-- `--clr-txt*` — lightness variations of the text color;
-- `--clr-shade-lv*` — shading colors (foreground color with a low opacity variations);
-- `--border-*` — border variations;
-- `--clr-curtain` — color of the background behind the modal window;
-- `--clr-btn-bgr-primary*`, `--clr-btn-txt-primary`, `--shadow-btn-primary` — primary action button values;
-- `--clr-btn-bgr-secondary*`, `--clr-btn-txt-secondary`, `--shadow-btn-secondary` — secondary action button values;
-- `--clr-btn-bgr-disabled`, `--clr-btn-txt-disabled`, `--shadow-btn-disabled` — disabled button values.
-
-## Common styles
-
-Common styles define similar UI elements across different blocks: buttons, inputs, and links.
-
-## Component styles
-
-Component styles are the most specific.
-
-<!-- TODO: decide about recommendations here -->
diff --git a/blocks/themes/lr-basic/common.css b/blocks/themes/lr-basic/common.css
index a9ec63f5f..74be65242 100644
--- a/blocks/themes/lr-basic/common.css
+++ b/blocks/themes/lr-basic/common.css
@@ -1,167 +1,116 @@
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular) {
-  color: var(--clr-txt);
-
-  /* font-size and family for testing purposes, to be removed */
-  font-size: 14px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-    'Helvetica Neue', sans-serif;
+:where([lr-wgt-common]) {
+  color: var(--uc-foreground);
+  font-size: var(--uc-font-size);
+  line-height: var(--uc-line-height);
+  font-family: var(--uc-font-family);
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular) * {
+:where([lr-wgt-common]) * {
   box-sizing: border-box;
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  [hidden] {
+:where([lr-wgt-common]) [hidden] {
   display: none !important;
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  [activity]:not([active]) {
+:where([lr-wgt-common]) [activity]:not([active]) {
   display: none;
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  dialog:not([open])
-  [activity] {
+:where([lr-wgt-common]) dialog:not([open]) [activity] {
   display: none;
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  button {
+:where([lr-wgt-common]) button {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: var(--ui-size);
-  padding-right: 1.4em;
-  padding-left: 1.4em;
+  height: var(--uc-button-size);
+  padding-right: 14px;
+  padding-left: 14px;
   font-size: 1em;
   font-family: inherit;
   white-space: nowrap;
   border: none;
-  border-radius: var(--border-radius-element);
+  border-radius: var(--uc-radius);
   cursor: pointer;
   user-select: none;
+  transition: background-color var(--uc-transition);
 }
 
-@media only screen and (max-width: 800px) {
-  :where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-    button {
-    padding-right: 1em;
-    padding-left: 1em;
-  }
-}
-
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  button.primary-btn {
-  color: var(--clr-btn-txt-primary);
-  background-color: var(--clr-btn-bgr-primary);
-  box-shadow: var(--shadow-btn-primary);
-  transition: background-color var(--transition-duration);
-}
-
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  button.primary-btn:hover {
-  background-color: var(--clr-btn-bgr-primary-hover);
-}
-
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  button.primary-btn:active {
-  background-color: var(--clr-btn-bgr-primary-active);
+:where([lr-wgt-common]) button.uc-primary-btn {
+  color: var(--uc-primary-foreground);
+  background-color: var(--uc-primary);
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  button.secondary-btn {
-  color: var(--clr-btn-txt-secondary);
-  background-color: var(--clr-btn-bgr-secondary);
-  box-shadow: var(--shadow-btn-secondary);
-  transition: background-color var(--transition-duration);
+:where([lr-wgt-common]) button.uc-primary-btn:hover {
+  background-color: var(--uc-primary-hover);
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  button.secondary-btn:hover {
-  background-color: var(--clr-btn-bgr-secondary-hover);
+:where([lr-wgt-common]) button.uc-secondary-btn {
+  color: var(--uc-secondary-foreground);
+  background-color: var(--uc-secondary);
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  button.secondary-btn:active {
-  background-color: var(--clr-btn-bgr-secondary-active);
+:where([lr-wgt-common]) button.uc-secondary-btn:hover {
+  background-color: var(--uc-secondary-hover);
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  button.mini-btn {
-  width: var(--ui-size);
-  height: var(--ui-size);
+:where([lr-wgt-common]) button.uc-mini-btn {
+  height: var(--uc-button-size);
   padding: 0;
   background-color: transparent;
-  border: none;
-  cursor: pointer;
-  transition: var(--transition-duration) ease;
-  color: var(--clr-txt);
-}
-
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  button.mini-btn:hover {
-  background-color: var(--clr-shade-lv1);
+  color: var(--uc-secondary-foreground);
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  button.mini-btn:active {
-  background-color: var(--clr-shade-lv2);
+:where([lr-wgt-common]) button.uc-mini-btn:hover {
+  background-color: var(--uc-secondary);
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  :is(button[disabled], button.primary-btn[disabled], button.secondary-btn[disabled]) {
-  color: var(--clr-btn-txt-disabled);
-  background-color: var(--clr-btn-bgr-disabled);
-  box-shadow: var(--shadow-btn-disabled);
+:where([lr-wgt-common]) :is(button[disabled], button.uc-primary-btn[disabled], button.uc-secondary-btn[disabled]) {
+  opacity: 0.5;
   pointer-events: none;
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular) a {
-  color: var(--clr-accent);
+:where([lr-wgt-common]) a {
+  color: var(--uc-primary);
   text-decoration: none;
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  a[disabled] {
+/* TODO: if we're using disabled <a> somewhere, we should stop */
+:where([lr-wgt-common]) a[disabled] {
   pointer-events: none;
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  input[type='text'] {
+:where([lr-wgt-common]) input[type='text'] {
   display: flex;
   width: 100%;
-  height: var(--ui-size);
-  padding-right: 0.6em;
-  padding-left: 0.6em;
-  color: var(--clr-txt);
+  height: var(--uc-button-size);
+  padding-right: 10px;
+  padding-left: 10px;
+  color: var(--uc-foreground);
   font-size: 1em;
   font-family: inherit;
-  background-color: var(--clr-background-light);
-  border: var(--border-light);
-  border-radius: var(--border-radius-element);
-  transition: var(--transition-duration);
-}
-
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  input[type='text']::placeholder {
-  color: var(--clr-txt-lightest);
+  background-color: var(--uc-background);
+  border: 1px solid var(--uc-border);
+  outline: 1px solid transparent;
+  border-radius: var(--uc-radius);
+  transition:
+    border-color var(--uc-transition),
+    outline-color var(--uc-transition);
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  input[type='text']:hover {
-  border-color: var(--clr-accent-light);
+:where([lr-wgt-common]) input[type='text']::placeholder {
+  color: var(--uc-muted-foreground);
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  input[type='text']:focus {
-  border-color: var(--clr-accent);
-  outline: none;
+:where([lr-wgt-common]) input[type='text']:focus {
+  outline-color: var(--uc-primary-hover);
+  border-color: var(--uc-primary-hover);
 }
 
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular)
-  input[disabled] {
+/* TODO: check if there's any necessity of disabled input */
+:where([lr-wgt-common]) input[disabled] {
   opacity: 0.6;
   pointer-events: none;
 }
diff --git a/blocks/themes/lr-basic/config.css b/blocks/themes/lr-basic/config.css
index 36e30bc6e..06b54affb 100644
--- a/blocks/themes/lr-basic/config.css
+++ b/blocks/themes/lr-basic/config.css
@@ -1,47 +1,4 @@
-:where(.lr-wgt-cfg, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular) {
-  --cfg-pubkey: 'YOUR_PUBLIC_KEY';
-  --cfg-multiple: 1;
-  --cfg-multiple-min: 0;
-  --cfg-multiple-max: 0;
-
-  --cfg-confirm-upload: 0;
-  --cfg-img-only: 0;
-  --cfg-accept: '';
-  --cfg-external-sources-preferred-types: '';
-  --cfg-store: 'auto';
-  --cfg-camera-mirror: 1;
-  --cfg-source-list: 'local, url, camera, dropbox, gdrive';
-  --cfg-max-local-file-size-bytes: 0;
-  --cfg-thumb-size: 76;
-  --cfg-show-empty-list: 0;
-  --cfg-use-local-image-editor: 0;
-  --cfg-use-cloud-image-editor: 1;
-  --cfg-remove-copyright: 0;
-
-  --cfg-modal-scroll-lock: 1;
-  --cfg-modal-backdrop-strokes: 0;
-
-  --cfg-source-list-wrap: 1;
-
+:where([lr-wgt-common]) {
   --cfg-init-activity: 'start-from';
   --cfg-done-activity: '';
-
-  --cfg-remote-tab-session-key: '';
-  --cfg-cdn-cname: 'https://ucarecdn.com';
-  --cfg-base-url: 'https://upload.uploadcare.com';
-  --cfg-social-base-url: 'https://social.uploadcare.com';
-  --cfg-secure-signature: '';
-  --cfg-secure-expire: '';
-  --cfg-secure-delivery-proxy: '';
-  --cfg-retry-throttled-request-max-times: 1;
-  --cfg-multipart-min-file-size: 26214400; /* 25MB */
-  --cfg-multipart-chunk-size: 5242880; /* 5MB */
-  --cfg-max-concurrent-requests: 10;
-  --cfg-multipart-max-concurrent-requests: 4;
-  --cfg-multipart-max-attempts: 3;
-  --cfg-check-for-url-duplicates: 0;
-  --cfg-save-url-for-recurrent-uploads: 0;
-
-  --cfg-group-output: 0;
-  --cfg-user-agent-integration: '';
 }
diff --git a/blocks/themes/lr-basic/icons/check.svg b/blocks/themes/lr-basic/icons/check.svg
deleted file mode 100644
index c09d48bb7..000000000
--- a/blocks/themes/lr-basic/icons/check.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="m12 22c5.5228 0 10-4.4772 10-10 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.5228 4.47715 10 10 10zm4.7071-11.4929-5.9071 5.9071-3.50711-3.5071c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.3906 1.02369-.3906 1.41422 0l2.09289 2.0929 4.4929-4.49294c.3905-.39052 1.0237-.39052 1.4142 0 .3905.39053.3905 1.02374 0 1.41424z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/detail.svg b/blocks/themes/lr-basic/icons/detail.svg
deleted file mode 100644
index 55759bca2..000000000
--- a/blocks/themes/lr-basic/icons/detail.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M5,3C3.89,3 3,3.89 3,5V19C3,20.11 3.89,21 5,21H19C20.11,21 21,20.11 21,19V5C21,3.89 20.11,3 19,3H5M5,5H19V19H5V5M7,7V9H17V7H7M7,11V13H17V11H7M7,15V17H14V15H7Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/dots.svg b/blocks/themes/lr-basic/icons/dots.svg
deleted file mode 100644
index f5b2f365e..000000000
--- a/blocks/themes/lr-basic/icons/dots.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/edit-brightness.svg b/blocks/themes/lr-basic/icons/edit-brightness.svg
deleted file mode 100644
index dde83dd28..000000000
--- a/blocks/themes/lr-basic/icons/edit-brightness.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/edit-color.svg b/blocks/themes/lr-basic/icons/edit-color.svg
deleted file mode 100644
index 72ba8de67..000000000
--- a/blocks/themes/lr-basic/icons/edit-color.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/edit-contrast.svg b/blocks/themes/lr-basic/icons/edit-contrast.svg
deleted file mode 100644
index af76cee71..000000000
--- a/blocks/themes/lr-basic/icons/edit-contrast.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/edit-crop.svg b/blocks/themes/lr-basic/icons/edit-crop.svg
deleted file mode 100644
index 64e3c5b4d..000000000
--- a/blocks/themes/lr-basic/icons/edit-crop.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/edit-draw.svg b/blocks/themes/lr-basic/icons/edit-draw.svg
deleted file mode 100644
index fe1d72141..000000000
--- a/blocks/themes/lr-basic/icons/edit-draw.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="m21.879394 2.1631238c-1.568367-1.62768627-4.136546-1.53831744-5.596267.1947479l-8.5642801 10.1674753c-1.4906533-.224626-3.061232.258204-4.2082427 1.448604-1.0665468 1.106968-1.0997707 2.464806-1.1203996 3.308068-.00142.05753-.00277.113001-.00439.16549-.02754.894146-.08585 1.463274-.5821351 2.069648l-.80575206.98457.88010766.913285c1.0539516 1.093903 2.6691689 1.587048 4.1744915 1.587048 1.5279113 0 3.2235468-.50598 4.4466094-1.775229 1.147079-1.190514 1.612375-2.820653 1.395772-4.367818l9.796763-8.8879697c1.669907-1.5149954 1.75609-4.1802333.187723-5.8079195zm-16.4593821 13.7924592c.8752943-.908358 2.2944227-.908358 3.1697054 0 .8752942.908358.8752942 2.381259 0 3.289617-.5909138.61325-1.5255389.954428-2.53719.954428-.5223687 0-.9935663-.09031-1.3832112-.232762.3631253-.915463.3952949-1.77626.4154309-2.429737.032192-1.045425.072224-1.308557.3352649-1.581546z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/edit-file.svg b/blocks/themes/lr-basic/icons/edit-file.svg
index 9188f9785..6bfad309a 100644
--- a/blocks/themes/lr-basic/icons/edit-file.svg
+++ b/blocks/themes/lr-basic/icons/edit-file.svg
@@ -1,3 +1,3 @@
 <svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="m12.1109 6c.3469-1.69213 1.8444-2.96484 3.6391-2.96484s3.2922 1.27271 3.6391 2.96484h2.314c.4142 0 .75.33578.75.75 0 .41421-.3358.75-.75.75h-2.314c-.3469 1.69213-1.8444 2.9648-3.6391 2.9648s-3.2922-1.27267-3.6391-2.9648h-9.81402c-.41422 0-.75001-.33579-.75-.75 0-.41422.33578-.75.75-.75zm3.6391-1.46484c-1.2232 0-2.2148.99162-2.2148 2.21484s.9916 2.21484 2.2148 2.21484 2.2148-.99162 2.2148-2.21484-.9916-2.21484-2.2148-2.21484zm-11.1391 11.96484c.34691-1.6921 1.84437-2.9648 3.6391-2.9648 1.7947 0 3.2922 1.2727 3.6391 2.9648h9.814c.4142 0 .75.3358.75.75s-.3358.75-.75.75h-9.814c-.3469 1.6921-1.8444 2.9648-3.6391 2.9648-1.79473 0-3.29219-1.2727-3.6391-2.9648h-2.31402c-.41422 0-.75-.3358-.75-.75s.33578-.75.75-.75zm3.6391-1.4648c-1.22322 0-2.21484.9916-2.21484 2.2148s.99162 2.2148 2.21484 2.2148 2.2148-.9916 2.2148-2.2148-.99158-2.2148-2.2148-2.2148z"></path>
-</svg>
\ No newline at end of file
+  <path fill="currentColor" fill-rule="evenodd" d="M18.558 2.804a.78.78 0 0 0-.557.235l-.008.007-2.472 2.46 3.847 3.848 2.46-2.473.004-.003a.78.78 0 0 0 0-1.108l-.004-.003-2.712-2.728a.78.78 0 0 0-.558-.235Zm-.248 7.613-3.852-3.852-8.93 8.887-1.516 5.41 5.41-1.515 8.888-8.93Zm-.636-8.934a2.28 2.28 0 0 1 2.512.505l2.702 2.717.002.002a2.278 2.278 0 0 1 0 3.234l-.002.002-12.541 12.602a.75.75 0 0 1-.33.193l-6.884 1.928a.75.75 0 0 1-.925-.924l1.928-6.885a.75.75 0 0 1 .193-.33l12.603-12.54a2.28 2.28 0 0 1 .742-.504Z" clip-rule="evenodd"/>
+</svg>
diff --git a/blocks/themes/lr-basic/icons/edit-flip-h.svg b/blocks/themes/lr-basic/icons/edit-flip-h.svg
deleted file mode 100644
index f44f858ad..000000000
--- a/blocks/themes/lr-basic/icons/edit-flip-h.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M15 21H17V19H15M19 9H21V7H19M3 5V19C3 20.1 3.9 21 5 21H9V19H5V5H9V3H5C3.9 3 3 3.9 3 5M19 3V5H21C21 3.9 20.1 3 19 3M11 23H13V1H11M19 17H21V15H19M15 5H17V3H15M19 13H21V11H19M19 21C20.1 21 21 20.1 21 19H19Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/edit-flip-v.svg b/blocks/themes/lr-basic/icons/edit-flip-v.svg
deleted file mode 100644
index b1794aa6b..000000000
--- a/blocks/themes/lr-basic/icons/edit-flip-v.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M3 15V17H5V15M15 19V21H17V19M19 3H5C3.9 3 3 3.9 3 5V9H5V5H19V9H21V5C21 3.9 20.1 3 19 3M21 19H19V21C20.1 21 21 20.1 21 19M1 11V13H23V11M7 19V21H9V19M19 15V17H21V15M11 19V21H13V19M3 19C3 20.1 3.9 21 5 21V19Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/edit-guides.svg b/blocks/themes/lr-basic/icons/edit-guides.svg
deleted file mode 100644
index 8b392fc93..000000000
--- a/blocks/themes/lr-basic/icons/edit-guides.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M1.39,18.36L3.16,16.6L4.58,18L5.64,16.95L4.22,15.54L5.64,14.12L8.11,16.6L9.17,15.54L6.7,13.06L8.11,11.65L9.53,13.06L10.59,12L9.17,10.59L10.59,9.17L13.06,11.65L14.12,10.59L11.65,8.11L13.06,6.7L14.47,8.11L15.54,7.05L14.12,5.64L15.54,4.22L18,6.7L19.07,5.64L16.6,3.16L18.36,1.39L22.61,5.64L5.64,22.61L1.39,18.36Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/edit-resize.svg b/blocks/themes/lr-basic/icons/edit-resize.svg
deleted file mode 100644
index 759ccc880..000000000
--- a/blocks/themes/lr-basic/icons/edit-resize.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M10.59,12L14.59,8H11V6H18V13H16V9.41L12,13.41V16H20V4H8V12H10.59M22,2V18H12V22H2V12H6V2H22M10,14H4V20H10V14Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/edit-rotate.svg b/blocks/themes/lr-basic/icons/edit-rotate.svg
deleted file mode 100644
index be7ac2f30..000000000
--- a/blocks/themes/lr-basic/icons/edit-rotate.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/edit-saturation.svg b/blocks/themes/lr-basic/icons/edit-saturation.svg
deleted file mode 100644
index 3b26e45ef..000000000
--- a/blocks/themes/lr-basic/icons/edit-saturation.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M3,13A9,9 0 0,0 12,22C12,17 7.97,13 3,13M12,5.5A2.5,2.5 0 0,1 14.5,8A2.5,2.5 0 0,1 12,10.5A2.5,2.5 0 0,1 9.5,8A2.5,2.5 0 0,1 12,5.5M5.6,10.25A2.5,2.5 0 0,0 8.1,12.75C8.63,12.75 9.12,12.58 9.5,12.31C9.5,12.37 9.5,12.43 9.5,12.5A2.5,2.5 0 0,0 12,15A2.5,2.5 0 0,0 14.5,12.5C14.5,12.43 14.5,12.37 14.5,12.31C14.88,12.58 15.37,12.75 15.9,12.75C17.28,12.75 18.4,11.63 18.4,10.25C18.4,9.25 17.81,8.4 16.97,8C17.81,7.6 18.4,6.74 18.4,5.75C18.4,4.37 17.28,3.25 15.9,3.25C15.37,3.25 14.88,3.41 14.5,3.69C14.5,3.63 14.5,3.56 14.5,3.5A2.5,2.5 0 0,0 12,1A2.5,2.5 0 0,0 9.5,3.5C9.5,3.56 9.5,3.63 9.5,3.69C9.12,3.41 8.63,3.25 8.1,3.25A2.5,2.5 0 0,0 5.6,5.75C5.6,6.74 6.19,7.6 7.03,8C6.19,8.4 5.6,9.25 5.6,10.25M12,22A9,9 0 0,0 21,13C16,13 12,17 12,22Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/edit-text.svg b/blocks/themes/lr-basic/icons/edit-text.svg
deleted file mode 100644
index 7f351d4f0..000000000
--- a/blocks/themes/lr-basic/icons/edit-text.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/edit.svg b/blocks/themes/lr-basic/icons/edit.svg
deleted file mode 100644
index 5dc4b2ebf..000000000
--- a/blocks/themes/lr-basic/icons/edit.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M3.96371 14.4792c-.15098.151-.25578.3419-.3021.5504L2.52752 20.133c-.17826.8021.53735 1.5177 1.33951 1.3395l5.10341-1.1341c.20844-.0463.39934-.1511.55032-.3021l8.05064-8.0507-5.557-5.55702-8.05069 8.05062ZM13.4286 5.01437l5.557 5.55703 2.0212-2.02111c.6576-.65765.6576-1.72393 0-2.38159l-3.1755-3.17546c-.6577-.65765-1.7239-.65765-2.3816 0l-2.0211 2.02113Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/fullscreen-exit.svg b/blocks/themes/lr-basic/icons/fullscreen-exit.svg
deleted file mode 100644
index b6003ee18..000000000
--- a/blocks/themes/lr-basic/icons/fullscreen-exit.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/fullscreen.svg b/blocks/themes/lr-basic/icons/fullscreen.svg
deleted file mode 100644
index 09d822573..000000000
--- a/blocks/themes/lr-basic/icons/fullscreen.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/remove.svg b/blocks/themes/lr-basic/icons/remove.svg
deleted file mode 100644
index d21bfd88e..000000000
--- a/blocks/themes/lr-basic/icons/remove.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="m6.35673 9.71429c-.76333 0-1.35856.66121-1.27865 1.42031l1.01504 9.6429c.06888.6543.62067 1.1511 1.27865 1.1511h9.25643c.658 0 1.2098-.4968 1.2787-1.1511l1.015-9.6429c.0799-.7591-.5153-1.42031-1.2786-1.42031zm.50041-4.5v.32142h-2.57143c-.71008 0-1.28571.57564-1.28571 1.28572s.57563 1.28571 1.28571 1.28571h15.42859c.7101 0 1.2857-.57563 1.2857-1.28571s-.5756-1.28572-1.2857-1.28572h-2.5714v-.32142c0-1.77521-1.4391-3.21429-3.2143-3.21429h-3.8572c-1.77517 0-3.21426 1.43908-3.21426 3.21429zm7.07146-.64286c.355 0 .6428.28782.6428.64286v.32142h-5.14283v-.32142c0-.35504.28782-.64286.64283-.64286z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/icons/trash-file.svg b/blocks/themes/lr-basic/icons/trash-file.svg
deleted file mode 100644
index d21bfd88e..000000000
--- a/blocks/themes/lr-basic/icons/trash-file.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg ref="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="currentColor" fill-rule="evenodd" d="m6.35673 9.71429c-.76333 0-1.35856.66121-1.27865 1.42031l1.01504 9.6429c.06888.6543.62067 1.1511 1.27865 1.1511h9.25643c.658 0 1.2098-.4968 1.2787-1.1511l1.015-9.6429c.0799-.7591-.5153-1.42031-1.2786-1.42031zm.50041-4.5v.32142h-2.57143c-.71008 0-1.28571.57564-1.28571 1.28572s.57563 1.28571 1.28571 1.28571h15.42859c.7101 0 1.2857-.57563 1.2857-1.28571s-.5756-1.28572-1.2857-1.28572h-2.5714v-.32142c0-1.77521-1.4391-3.21429-3.2143-3.21429h-3.8572c-1.77517 0-3.21426 1.43908-3.21426 3.21429zm7.07146-.64286c.355 0 .6428.28782.6428.64286v.32142h-5.14283v-.32142c0-.35504.28782-.64286.64283-.64286z"></path>
-</svg>
\ No newline at end of file
diff --git a/blocks/themes/lr-basic/index.css b/blocks/themes/lr-basic/index.css
index 91190d231..a6c16b8ec 100644
--- a/blocks/themes/lr-basic/index.css
+++ b/blocks/themes/lr-basic/index.css
@@ -9,9 +9,7 @@
 
 /* UI COMPONENTS: */
 @import url('../../Icon/icon.css');
-@import url('../../Tabs/tabs.css');
 @import url('../../Range/range.css');
-@import url('../../Color/color.css');
 
 /* BLOCKS: */
 @import url('../../Config/config.css');
@@ -25,10 +23,6 @@
 @import url('../../UploadList/upload-list.css');
 @import url('../../StartFrom/start-from.css');
 @import url('../../FileItem/file-item.css');
-
-/* @import url('../../EditableCanvas/editable-canvas.css'); */
-@import url('../../FilePreview/file-preview.css');
-@import url('../../ConfirmationDialog/confirmation.css');
 @import url('../../ProgressBarCommon/progress-bar-common.css');
 @import url('../../ProgressBar/progress-bar.css');
 @import url('../../ActivityHeader/activity-header.css');
diff --git a/blocks/themes/lr-basic/svg-sprite.js b/blocks/themes/lr-basic/svg-sprite.js
index 2171ed888..f67fa0a4e 100644
--- a/blocks/themes/lr-basic/svg-sprite.js
+++ b/blocks/themes/lr-basic/svg-sprite.js
@@ -1 +1 @@
-export default "<svg width='0' height='0' style='position:absolute'><symbol viewBox='0 0 24 24' id='uc-icon-about' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M11.152 14.12v.1h1.523v-.1c.007-.409.053-.752.138-1.028.086-.277.22-.517.405-.72.188-.202.434-.397.735-.586.32-.191.593-.412.82-.66.232-.249.41-.531.533-.847.125-.32.187-.678.187-1.076 0-.579-.137-1.085-.41-1.518a2.717 2.717 0 0 0-1.14-1.018c-.49-.245-1.062-.367-1.715-.367-.597 0-1.142.114-1.636.34-.49.228-.884.564-1.182 1.008-.299.44-.46.98-.485 1.619h1.62c.024-.377.118-.684.282-.922a1.48 1.48 0 0 1 .617-.532c.25-.114.51-.17.784-.17.301 0 .575.063.82.191.248.124.447.302.597.533.149.23.223.504.223.82 0 .263-.05.502-.149.72a1.91 1.91 0 0 1-.405.574 3.48 3.48 0 0 1-.575.453 4.22 4.22 0 0 0-.847.66c-.234.242-.415.558-.543.949-.125.39-.19.916-.197 1.577Zm.053 3.03c.21.206.46.31.75.31.196 0 .374-.049.534-.144a1.1 1.1 0 0 0 .383-.384c.1-.163.15-.343.15-.538a1 1 0 0 0-.32-.746 1.019 1.019 0 0 0-.746-.314c-.291 0-.542.105-.751.314-.21.206-.314.455-.314.746 0 .295.104.547.314.756ZM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Zm-1.5 0c0 5.799-4.701 10.5-10.5 10.5S1.5 17.799 1.5 12 6.201 1.5 12 1.5 22.5 6.201 22.5 12Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-add' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M12.75 21a.75.75 0 0 1-1.5 0v-8.25H3a.75.75 0 0 1 0-1.5h8.25V3a.75.75 0 0 1 1.5 0v8.25H21a.75.75 0 0 1 0 1.5h-8.25V21Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-arrow-down' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M11.5 23.03a.75.75 0 0 0 .999 0l9.29-8.276a.75.75 0 0 0-.998-1.12l-8.042 7.164V1.53a.75.75 0 0 0-1.5 0v19.267l-8.04-7.163a.75.75 0 0 0-.998 1.12z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-back' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M20.251 12a.75.75 0 0 1-.75.75H6.067l5.72 5.85a.75.75 0 1 1-1.072 1.05L4.136 12.92a1.292 1.292 0 0 1 0-1.842l6.579-6.728a.75.75 0 1 1 1.072 1.048l-5.72 5.851H19.5a.75.75 0 0 1 .75.75Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-badge-error' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M13.6 18.4a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0zM12 4.5A1.5 1.5 0 0 1 13.5 6v7a1.5 1.5 0 0 1-3 0V6A1.5 1.5 0 0 1 12 4.5z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-badge-success' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='m10.5 18.204 7.6-8.183a1.5 1.5 0 0 0-2.2-2.042l-5.4 5.817-2.4-2.586a1.5 1.5 0 1 0-2.2 2.041l4.6 4.953Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-box' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M1.01 4.148a.75.75 0 0 1 .75.75v4.348a4.437 4.437 0 0 1 2.988-1.153c1.734 0 3.23.992 3.978 2.438a4.478 4.478 0 0 1 3.978-2.438c2.49 0 4.488 2.044 4.488 4.543 0 2.5-1.999 4.544-4.488 4.544a4.478 4.478 0 0 1-3.978-2.438 4.478 4.478 0 0 1-3.978 2.438C2.26 17.18.26 15.135.26 12.636V4.898a.75.75 0 0 1 .75-.75Zm.75 8.488c0 1.692 1.348 3.044 2.988 3.044s2.989-1.352 2.989-3.044c0-1.691-1.349-3.043-2.989-3.043S1.76 10.945 1.76 12.636Zm10.944-3.043c-1.64 0-2.988 1.352-2.988 3.043 0 1.692 1.348 3.044 2.988 3.044s2.988-1.352 2.988-3.044c0-1.69-1.348-3.043-2.988-3.043Zm4.328-1.23a.75.75 0 0 1 1.052.128l2.333 2.983 2.333-2.983a.75.75 0 0 1 1.181.924l-2.562 3.277 2.562 3.276a.75.75 0 1 1-1.181.924l-2.333-2.983-2.333 2.983a.75.75 0 1 1-1.181-.924l2.562-3.276-2.562-3.277a.75.75 0 0 1 .129-1.052Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-brightness' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M15 10a5 5 0 0 1-5 5m5-5a5 5 0 0 0-5-5m5 5h-5m0 5a5 5 0 0 1 0-10m0 10V5m0 15v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05m-.626 2.45H10m4.324 5H10'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-camera' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M7.65 2.55a.75.75 0 0 1 .6-.3h7.5a.75.75 0 0 1 .6.3l2.025 2.7H21a3 3 0 0 1 3 3v10.5a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V8.25a3 3 0 0 1 3-3h2.625zm.975 1.2L6.6 6.45a.75.75 0 0 1-.6.3H3a1.5 1.5 0 0 0-1.5 1.5v10.5a1.5 1.5 0 0 0 1.5 1.5h18a1.5 1.5 0 0 0 1.5-1.5V8.25a1.5 1.5 0 0 0-1.5-1.5h-3a.75.75 0 0 1-.6-.3l-2.025-2.7zm3.375 6a3.375 3.375 0 1 0 0 6.75 3.375 3.375 0 0 0 0-6.75zm-4.875 3.375a4.875 4.875 0 1 1 9.75 0 4.875 4.875 0 0 1-9.75 0z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-check' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm4.707-11.493L10.8 16.414l-3.507-3.507a1 1 0 1 1 1.414-1.414l2.093 2.093 4.493-4.493a1 1 0 1 1 1.414 1.414z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-close' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M4.604 4.604a.75.75 0 0 1 1.06 0L12 10.939l6.335-6.335a.75.75 0 1 1 1.061 1.06L13.061 12l6.335 6.335a.75.75 0 1 1-1.06 1.061L12 13.061l-6.335 6.335a.75.75 0 0 1-1.061-1.06L10.939 12 4.604 5.665a.75.75 0 0 1 0-1.061z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-closeMax' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='m3 3 14 14m0-14L3 17'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-collapse' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M3.116 12a.75.75 0 0 1 .75-.75h16.268a.75.75 0 0 1 0 1.5H3.866a.75.75 0 0 1-.75-.75Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-contrast' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 10a8 8 0 1 0 16 0 8 8 0 1 0-16 0m8-8v16m8-8h-8m7.598 2.5H10m6.24 2.5H10m7.6-7.5H10M16.242 5H10'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-crop' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M20 14H7.005C6.45 14 6 13.55 6 12.995V0M0 6h13.067c.515 0 .933.418.933.933V20M14.5.4 13 2l1.5 1.6M13 2h2a3 3 0 0 1 3 3v2M5.5 19.6 7 18l-1.5-1.6M7 18H5a3 3 0 0 1-3-3v-2'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-default' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M11.501.392a.75.75 0 0 1 .998 0l6.704 5.972a.75.75 0 0 1-.998 1.12l-5.455-4.86v13.439a.75.75 0 0 1-1.5 0V2.625l-5.454 4.86a.75.75 0 1 1-.998-1.12zM.857 16.73a.75.75 0 0 1 .75.75v4.914h20.786v-4.914a.75.75 0 0 1 1.5 0v5.664a.75.75 0 0 1-.75.75H.857a.75.75 0 0 1-.75-.75v-5.664a.75.75 0 0 1 .75-.75z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-detail' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M5 3c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2H5m0 2h14v14H5V5m2 2v2h10V7H7m0 4v2h10v-2H7m0 4v2h7v-2H7Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-done' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='m1 10.632 5.684 5.684L19 4'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-dots' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M16 12a2 2 0 0 1 2-2 2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-dropbox' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M6.019 1.92a.75.75 0 0 1 .806 0L12 5.219l5.176-3.297a.75.75 0 0 1 .806 0l5.577 3.553a.75.75 0 0 1 0 1.265l-4.574 2.914 4.574 2.914a.75.75 0 0 1 0 1.265l-5.577 3.554a.75.75 0 0 1-.806 0L12 14.089l-5.175 3.297a.75.75 0 0 1-.806 0L.44 13.833a.75.75 0 0 1 0-1.266l4.575-2.914L.44 6.74a.75.75 0 0 1 0-1.265zm.403 8.616L2.24 13.2l4.182 2.664 4.181-2.664zm6.975 2.664 4.182 2.664L21.76 13.2l-4.181-2.664zm2.776-3.547L12 12.311 7.828 9.653 12 6.995zm1.406-.882 4.181-2.664-4.181-2.664-4.182 2.664zm-6.976-2.664L6.422 3.443 2.24 6.107 6.422 8.77zM5.791 18.544a.75.75 0 0 1 1.035-.23l5.175 3.297 5.175-3.297a.75.75 0 1 1 .806 1.265l-5.578 3.554a.75.75 0 0 1-.806 0L6.02 19.579a.75.75 0 0 1-.23-1.035z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M3.964 14.48a1.123 1.123 0 0 0-.302.55l-1.134 5.103a1.123 1.123 0 0 0 1.339 1.34l5.103-1.135c.209-.046.4-.15.55-.302l8.051-8.05-5.557-5.557-8.05 8.05Zm9.465-9.466 5.557 5.557 2.02-2.02a1.684 1.684 0 0 0 0-2.382l-3.175-3.176a1.684 1.684 0 0 0-2.381 0l-2.021 2.021Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit-brightness' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M12 18a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-2.69L23.31 12 20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit-color' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M17.5 12a1.5 1.5 0 0 1-1.5-1.5A1.5 1.5 0 0 1 17.5 9a1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5m-3-4A1.5 1.5 0 0 1 13 6.5 1.5 1.5 0 0 1 14.5 5 1.5 1.5 0 0 1 16 6.5 1.5 1.5 0 0 1 14.5 8m-5 0A1.5 1.5 0 0 1 8 6.5 1.5 1.5 0 0 1 9.5 5 1.5 1.5 0 0 1 11 6.5 1.5 1.5 0 0 1 9.5 8m-3 4A1.5 1.5 0 0 1 5 10.5 1.5 1.5 0 0 1 6.5 9 1.5 1.5 0 0 1 8 10.5 1.5 1.5 0 0 1 6.5 12M12 3a9 9 0 0 0-9 9 9 9 0 0 0 9 9 1.5 1.5 0 0 0 1.5-1.5c0-.39-.15-.74-.39-1-.23-.27-.38-.62-.38-1a1.5 1.5 0 0 1 1.5-1.5H16a5 5 0 0 0 5-5c0-4.42-4.03-8-9-8Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit-contrast' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M12 20c-2.21 0-4.21-.9-5.66-2.34L17.66 6.34A8.014 8.014 0 0 1 20 12a8 8 0 0 1-8 8M6 8h2V6h1.5v2h2v1.5h-2v2H8v-2H6M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 14h5v-1.5h-5V16Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit-crop' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M7 17V1H5v4H1v2h4v10a2 2 0 0 0 2 2h10v4h2v-4h4v-2m-6-2h2V7a2 2 0 0 0-2-2H9v2h8v8Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit-draw' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M21.88 2.163a3.739 3.739 0 0 0-5.597.195L7.72 12.525a4.824 4.824 0 0 0-4.208 1.449c-1.067 1.107-1.1 2.465-1.12 3.308l-.005.166c-.028.894-.086 1.463-.582 2.07l-.806.984.88.913c1.054 1.094 2.67 1.587 4.175 1.587 1.527 0 3.223-.506 4.446-1.775 1.147-1.19 1.613-2.82 1.396-4.368l9.797-8.888c1.67-1.515 1.756-4.18.187-5.808zM5.42 15.956a2.184 2.184 0 0 1 3.17 0 2.389 2.389 0 0 1 0 3.29c-.591.612-1.526.954-2.537.954-.523 0-.994-.09-1.384-.233.363-.916.396-1.776.416-2.43.032-1.045.072-1.308.335-1.581z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit-file' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M12.11 6a3.716 3.716 0 0 1 7.28 0h2.313a.75.75 0 0 1 0 1.5H19.39a3.716 3.716 0 0 1-7.278 0H2.297a.75.75 0 1 1 0-1.5zm3.64-1.465a2.215 2.215 0 1 0 0 4.43 2.215 2.215 0 0 0 0-4.43zM4.61 16.5a3.716 3.716 0 0 1 7.28 0h9.813a.75.75 0 0 1 0 1.5H11.89a3.716 3.716 0 0 1-7.278 0H2.297a.75.75 0 0 1 0-1.5zm3.64-1.465a2.215 2.215 0 1 0 0 4.43 2.215 2.215 0 0 0 0-4.43z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit-flip-h' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M15 21h2v-2h-2m4-10h2V7h-2M3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2m16-2v2h2c0-1.1-.9-2-2-2m-8 20h2V1h-2m8 16h2v-2h-2M15 5h2V3h-2m4 10h2v-2h-2m0 10c1.1 0 2-.9 2-2h-2Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit-flip-v' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M3 15v2h2v-2m10 4v2h2v-2m2-16H5c-1.1 0-2 .9-2 2v4h2V5h14v4h2V5c0-1.1-.9-2-2-2m2 16h-2v2c1.1 0 2-.9 2-2M1 11v2h22v-2M7 19v2h2v-2m10-4v2h2v-2m-10 4v2h2v-2M3 19c0 1.1.9 2 2 2v-2Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit-guides' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='m1.39 18.36 1.77-1.76L4.58 18l1.06-1.05-1.42-1.41 1.42-1.42 2.47 2.48 1.06-1.06-2.47-2.48 1.41-1.41 1.42 1.41L10.59 12l-1.42-1.41 1.42-1.42 2.47 2.48 1.06-1.06-2.47-2.48 1.41-1.41 1.41 1.41 1.07-1.06-1.42-1.41 1.42-1.42L18 6.7l1.07-1.06-2.47-2.48 1.76-1.77 4.25 4.25L5.64 22.61l-4.25-4.25Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit-resize' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='m10.59 12 4-4H11V6h7v7h-2V9.41l-4 4V16h8V4H8v8h2.59M22 2v16H12v4H2V12h4V2h16M10 14H4v6h6v-6Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit-rotate' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='m16.89 15.5 1.42 1.39c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.5M13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03m6.93-6.9a7.906 7.906 0 0 0-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47m-2.36-5.45L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit-saturation' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M3 13a9 9 0 0 0 9 9c0-5-4.03-9-9-9m9-7.5A2.5 2.5 0 0 1 14.5 8a2.5 2.5 0 0 1-2.5 2.5A2.5 2.5 0 0 1 9.5 8 2.5 2.5 0 0 1 12 5.5m-6.4 4.75a2.5 2.5 0 0 0 2.5 2.5c.53 0 1.02-.17 1.4-.44v.19A2.5 2.5 0 0 0 12 15a2.5 2.5 0 0 0 2.5-2.5v-.19c.38.27.87.44 1.4.44a2.5 2.5 0 0 0 2.5-2.5c0-1-.59-1.85-1.43-2.25.84-.4 1.43-1.26 1.43-2.25a2.5 2.5 0 0 0-2.5-2.5c-.53 0-1.02.16-1.4.44V3.5A2.5 2.5 0 0 0 12 1a2.5 2.5 0 0 0-2.5 2.5v.19c-.38-.28-.87-.44-1.4-.44a2.5 2.5 0 0 0-2.5 2.5c0 .99.59 1.85 1.43 2.25-.84.4-1.43 1.25-1.43 2.25M12 22a9 9 0 0 0 9-9c-5 0-9 4-9 9Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-edit-text' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='m18.5 4 1.16 4.35-.96.26c-.45-.87-.91-1.74-1.44-2.18C16.73 6 16.11 6 15.5 6H13v10.5c0 .5 0 1 .33 1.25.34.25 1 .25 1.67.25v1H9v-1c.67 0 1.33 0 1.67-.25.33-.25.33-.75.33-1.25V6H8.5c-.61 0-1.23 0-1.76.43-.53.44-.99 1.31-1.44 2.18l-.96-.26L5.5 4h13Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-enhance' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19 13h-2m0 0a4 4 0 0 1-4-4m4 4a4 4 0 0 0-4 4m0-8V7m0 2a4 4 0 0 1-4 4m-2 0h2m0 0a4 4 0 0 1 4 4m0 0v2M8 8.5H6.5m0 0a2 2 0 0 1-2-2m2 2a2 2 0 0 0-2 2m0-4V5m0 1.5a2 2 0 0 1-2 2M1 8.5h1.5m0 0a2 2 0 0 1 2 2m0 0V12M12 3h-1m0 0a1 1 0 0 1-1-1m1 1a1 1 0 0 0-1 1m0-2V1m0 1a1 1 0 0 1-1 1M8 3h1m0 0a1 1 0 0 1 1 1m0 0v1'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-error' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-evernote' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M9.804 2.27v-.048c.055-.263.313-.562.85-.562h.44c.142 0 .325.014.526.033.066.009.124.023.267.06l.13.032h.002c.319.079.515.275.644.482a1.461 1.461 0 0 1 .16.356l.004.012a.75.75 0 0 0 .603.577l1.191.207a1988.512 1988.512 0 0 0 2.332.402c.512.083 1.1.178 1.665.442.64.3 1.19.795 1.376 1.77.548 2.931.657 5.829.621 8a39.233 39.233 0 0 1-.125 2.602 17.518 17.518 0 0 1-.092.849.735.735 0 0 0-.024.112c-.378 2.705-1.269 3.796-2.04 4.27-.746.457-1.53.451-2.217.447h-.192c-.46 0-1.073-.23-1.581-.635-.518-.412-.763-.87-.763-1.217 0-.45.188-.688.355-.786.161-.095.436-.137.796.087a.75.75 0 1 0 .792-1.274c-.766-.476-1.64-.52-2.345-.108-.7.409-1.098 1.188-1.098 2.08 0 .996.634 1.84 1.329 2.392.704.56 1.638.96 2.515.96l.185.002c.667.009 1.874.025 3.007-.67 1.283-.786 2.314-2.358 2.733-5.276a4.213 4.213 0 0 0 .056-.335c.023-.184.051-.445.079-.772.055-.655.111-1.585.13-2.704.037-2.234-.074-5.239-.647-8.301v-.002c-.294-1.544-1.233-2.391-2.215-2.85-.777-.363-1.623-.496-2.129-.576a8.872 8.872 0 0 1-.25-.041l-.006-.001-1.99-.345-.761-.132a2.93 2.93 0 0 0-.182-.338A2.532 2.532 0 0 0 12.379.329l-.091-.023a3.967 3.967 0 0 0-.493-.103L11.769.2a7.846 7.846 0 0 0-.675-.04h-.44c-.733 0-1.368.284-1.795.742L2.416 7.431c-.468.428-.751 1.071-.751 1.81 0 .02 0 .041.003.062l.003.034c.017.21.038.468.096.796.107.715.275 1.47.391 1.994.029.13.055.245.075.342l.002.008c.258 1.141.641 1.94.978 2.466.168.263.323.456.444.589a2.808 2.808 0 0 0 .192.194c1.536 1.562 3.713 2.196 5.731 2.08.13-.005.35-.032.537-.073a2.627 2.627 0 0 0 .652-.24c.425-.26.75-.661.992-1.046.184-.294.342-.61.473-.915a3.8 3.8 0 0 0 .627.493 5.022 5.022 0 0 0 1.97.709l.023.002.018.003.11.016c.088.014.205.035.325.058l.056.014c.088.022.164.04.235.061a1.736 1.736 0 0 1 .145.048l.03.014c.765.34 1.302 1.09 1.302 1.871a.75.75 0 0 0 1.5 0c0-1.456-.964-2.69-2.18-3.235a3.595 3.595 0 0 0-.679-.217l-.063-.015a10.616 10.616 0 0 0-.606-.105l-.02-.003-.03-.003h-.002a3.542 3.542 0 0 1-1.331-.485c-.471-.298-.788-.692-.828-1.234a.75.75 0 0 0-1.48-.106l-.001.003-.004.017a8.23 8.23 0 0 1-.092.352 9.963 9.963 0 0 1-.298.892c-.132.34-.29.68-.47.966-.174.276-.339.454-.478.549a1.178 1.178 0 0 1-.221.072 1.949 1.949 0 0 1-.241.036h-.013l-.032.002c-1.684.1-3.423-.437-4.604-1.65a.746.746 0 0 0-.053-.05L4.84 14.6a1.348 1.348 0 0 1-.07-.073 2.99 2.99 0 0 1-.293-.392c-.242-.379-.558-1.014-.778-1.985a54.1 54.1 0 0 0-.083-.376 27.494 27.494 0 0 1-.367-1.872l-.003-.02a6.791 6.791 0 0 1-.08-.67c.004-.277.086-.475.2-.609l.067-.067a.63.63 0 0 1 .292-.145h.05c.18 0 1.095.055 2.013.115l1.207.08.534.037a.747.747 0 0 0 .052.002c.782 0 1.349-.206 1.759-.585l.005-.005c.553-.52.622-1.225.622-1.76V6.24l-.026-.565A774.97 774.97 0 0 1 9.885 4.4c-.042-.961-.081-1.939-.081-2.13ZM4.995 6.953a251.126 251.126 0 0 1 2.102.137l.508.035c.48-.004.646-.122.715-.185.07-.068.146-.209.147-.649l-.024-.548a791.69 791.69 0 0 1-.095-2.187L4.995 6.953Zm16.122 9.996Zm-5.479-5.323a.75.75 0 0 0 1.014.31 2.04 2.04 0 0 1 .304-.089 1.84 1.84 0 0 1 .544-.039c.215.023.321.06.37.085.033.016.039.026.047.04a.75.75 0 0 0 1.289-.767c-.337-.567-.906-.783-1.552-.85a3.334 3.334 0 0 0-1.002.062c-.27.056-.531.14-.705.234a.75.75 0 0 0-.31 1.014Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-expand' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='m12 8.337-8.47 8.47a.75.75 0 0 1-1.06-1.06l8.605-8.606a1.29 1.29 0 0 1 1.85 0l8.605 8.605a.75.75 0 1 1-1.06 1.06L12 8.338Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-exposure' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M10 20v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05M5 10a5 5 0 1 0 10 0 5 5 0 1 0-10 0'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-external-source-placeholder' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M6.341 3.27a10.5 10.5 0 0 1 5.834-1.77.75.75 0 0 0 0-1.5 12 12 0 1 0 12 12 .75.75 0 0 0-1.5 0A10.5 10.5 0 1 1 6.34 3.27Zm14.145 1.48a.75.75 0 1 0-1.06-1.062L9.925 13.19V7.95a.75.75 0 1 0-1.5 0V15c0 .414.336.75.75.75h7.05a.75.75 0 0 0 0-1.5h-5.24l9.501-9.5Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-facebook' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M12 1.5C6.201 1.5 1.5 6.201 1.5 12c0 4.943 3.416 9.089 8.016 10.204v-6.108H7.383a.75.75 0 0 1-.75-.75v-3.281a.75.75 0 0 1 .75-.75h2.133V9.393c0-.958.225-2.511 1.38-3.65 1.194-1.177 3.174-1.718 6.254-1.056a.75.75 0 0 1 .592.733v2.754a.75.75 0 0 1-.75.75c-.692 0-1.203.026-1.584.082-.387.057-.578.137-.675.202-.109.073-.237.205-.237 1.029v1.078h2.39a.75.75 0 0 1 .742.866l-.516 3.281a.75.75 0 0 1-.74.634h-1.876v6.106C19.09 21.082 22.5 16.939 22.5 12c0-5.799-4.701-10.5-10.5-10.5zM0 12C0 5.373 5.373 0 12 0s12 5.373 12 12c0 5.995-4.395 10.961-10.138 11.856a.75.75 0 0 1-.866-.74v-7.77a.75.75 0 0 1 .75-.75h1.984l.28-1.781h-2.264a.75.75 0 0 1-.75-.75v-1.828c0-.829.089-1.729.9-2.274.363-.244.807-.37 1.293-.441a9.623 9.623 0 0 1 1.053-.086V6.04c-2.41-.405-3.645.132-4.293.771-.737.728-.933 1.793-.933 2.582v2.672a.75.75 0 0 1-.75.75H8.133v1.78h2.133a.75.75 0 0 1 .75.75v7.772a.75.75 0 0 1-.865.741C4.4 22.968 0 18 0 12z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-file' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M2.895 1.201c0-.473.383-.857.857-.857h8.4c.227 0 .445.09.606.251l8.4 8.4c.16.16.25.379.25.606v13.2a.857.857 0 0 1-.856.857h-16.8a.857.857 0 0 1-.857-.857zm1.714.857v19.886h15.085V10.458h-7.542a.857.857 0 0 1-.858-.857V2.058zm8.4 1.213 5.473 5.473H13.01z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-filters' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M4.5 6.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m-3.5 6a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m7 0a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-flickr' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M5.959 7.926c-2.298 0-4.14 1.834-4.14 4.073 0 2.241 1.842 4.075 4.14 4.075 2.302 0 4.145-1.834 4.145-4.075 0-2.238-1.843-4.073-4.145-4.073Zm-5.64 4.073c0-3.086 2.533-5.573 5.64-5.573 3.11 0 5.645 2.486 5.645 5.573 0 3.089-2.535 5.575-5.645 5.575-3.107 0-5.64-2.487-5.64-5.575Zm18.07-4.073c-2.301 0-4.144 1.835-4.144 4.073 0 2.24 1.843 4.075 4.145 4.075 2.299 0 4.141-1.834 4.141-4.075 0-2.239-1.842-4.073-4.141-4.073Zm-5.644 4.073c0-3.087 2.535-5.573 5.645-5.573 3.108 0 5.641 2.487 5.641 5.573 0 3.088-2.533 5.575-5.641 5.575-3.11 0-5.645-2.486-5.645-5.575Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-flip' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19.6 5 18 3.5 16.4 5m3.2 10L18 16.5 16.4 15M18 3.523v12.954M3.3 8.5h10.654c.301 0 .415-.395.159-.554L3.459 1.286A.3.3 0 0 0 3 1.542V8.2a.3.3 0 0 0 .3.3zm0 3h10.654c.301 0 .415.395.159.554l-10.654 6.66A.3.3 0 0 1 3 18.458v-6.66a.3.3 0 0 1 .3-.3z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-fullscreen' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M5 5h5v2H7v3H5V5m9 0h5v5h-2V7h-3V5m3 9h2v5h-5v-2h3v-3m-7 3v2H5v-5h2v3h3Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-fullscreen-exit' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M14 14h5v2h-3v3h-2v-5m-9 0h5v5H8v-3H5v-2m3-9h2v5H5V8h3V5m11 3v2h-5V5h2v3h3Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-gamma' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M17 3C9 6 2.5 11.5 2.5 17.5m0 0h1m-1 0v-1m14 1h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3-14v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-gdrive' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M7.736 1.818a.75.75 0 0 1 .647-.37h7.587a.75.75 0 0 1 .655.383l7.233 12.946a.75.75 0 0 1-.003.737l-3.794 6.66a.75.75 0 0 1-.651.378H4.59a.75.75 0 0 1-.651-.378l-3.794-6.66a.75.75 0 0 1 .005-.75zm.64 1.876L1.663 15.148l2.93 5.145 6.655-11.581zm3.736 6.526-2.398 4.173H14.5zm4.116 4.173h5.697L15.53 2.947H9.677zm5.685 1.5H8.852l-2.966 5.16h13.088z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-gphotos' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M12.51 0c-.702 0-1.272.57-1.272 1.273V7.35A6.381 6.381 0 0 0 0 11.489c0 .703.57 1.273 1.273 1.273H7.35A6.381 6.381 0 0 0 11.488 24c.704 0 1.274-.57 1.274-1.273V16.65A6.381 6.381 0 0 0 24 12.51c0-.703-.57-1.273-1.273-1.273H16.65A6.381 6.381 0 0 0 12.511 0Zm.252 11.232V1.53a4.857 4.857 0 0 1 0 9.702Zm-1.53.006H1.53a4.857 4.857 0 0 1 9.702 0Zm1.536 1.524a4.857 4.857 0 0 0 9.702 0h-9.702Zm-6.136 4.857c0-2.598 2.04-4.72 4.606-4.85v9.7a4.857 4.857 0 0 1-4.606-4.85Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-huddle' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M6.204 2.002c-.252.23-.357.486-.357.67V21.07c0 .15.084.505.313.812.208.28.499.477.929.477.519 0 .796-.174.956-.365.178-.212.286-.535.286-.924v-.013l.117-6.58c.004-1.725 1.419-3.883 3.867-3.883 1.33 0 2.332.581 2.987 1.364.637.762.95 1.717.95 2.526v6.47c0 .392.11.751.305.995.175.22.468.41 1.008.41.52 0 .816-.198 1.002-.437.207-.266.31-.633.31-.969V14.04c0-2.81-1.943-5.108-4.136-5.422a5.971 5.971 0 0 0-3.183.41c-.912.393-1.538.96-1.81 1.489a.75.75 0 0 1-1.417-.344v-7.5c0-.587-.47-1.031-1.242-1.031-.315 0-.638.136-.885.36ZM5.194.892A2.844 2.844 0 0 1 7.09.142c1.328 0 2.742.867 2.742 2.53v5.607a6.358 6.358 0 0 1 1.133-.629 7.47 7.47 0 0 1 3.989-.516c3.056.436 5.425 3.482 5.425 6.906v6.914c0 .602-.177 1.313-.627 1.89-.47.605-1.204 1.016-2.186 1.016-.96 0-1.698-.37-2.179-.973-.46-.575-.633-1.294-.633-1.933v-6.469c0-.456-.19-1.071-.602-1.563-.394-.471-.986-.827-1.836-.827-1.447 0-2.367 1.304-2.367 2.39v.014l-.117 6.58c-.001.64-.177 1.333-.637 1.881-.48.57-1.2.9-2.105.9-.995 0-1.7-.5-2.132-1.081-.41-.552-.61-1.217-.61-1.708V2.672c0-.707.366-1.341.847-1.78Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-info' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2v6Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-instagram' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M6.225 12a5.775 5.775 0 1 1 11.55 0 5.775 5.775 0 0 1-11.55 0zM12 7.725a4.275 4.275 0 1 0 0 8.55 4.275 4.275 0 0 0 0-8.55zm6.425-.75a1.4 1.4 0 1 0 0-2.8 1.4 1.4 0 0 0 0 2.8zm-6.467-6.8h.084c2.152 0 3.823 0 5.152.132 1.35.134 2.427.41 3.362 1.013a7.15 7.15 0 0 1 2.124 2.124c.604.935.88 2.012 1.013 3.362.132 1.329.132 3 .132 5.152v.084c0 2.152 0 3.823-.132 5.152-.134 1.35-.41 2.427-1.013 3.362a7.15 7.15 0 0 1-2.124 2.124c-.935.604-2.012.88-3.362 1.013-1.329.132-3 .132-5.152.132h-.084c-2.152 0-3.824 0-5.153-.132-1.35-.134-2.427-.409-3.36-1.013a7.15 7.15 0 0 1-2.125-2.124C.716 19.62.44 18.544.307 17.194c-.132-1.329-.132-3-.132-5.152v-.084c0-2.152 0-3.823.132-5.152.133-1.35.409-2.427 1.013-3.362A7.15 7.15 0 0 1 3.444 1.32C4.378.716 5.456.44 6.805.307c1.33-.132 3-.132 5.153-.132zM6.953 1.799c-1.234.123-2.043.36-2.695.78A5.65 5.65 0 0 0 2.58 4.26c-.42.65-.657 1.46-.78 2.695C1.676 8.2 1.675 9.797 1.675 12s0 3.8.124 5.046c.123 1.235.36 2.044.78 2.696a5.649 5.649 0 0 0 1.68 1.678c.65.421 1.46.658 2.694.78 1.247.124 2.844.125 5.047.125s3.8 0 5.046-.124c1.235-.123 2.044-.36 2.695-.78a5.648 5.648 0 0 0 1.68-1.68c.42-.65.657-1.46.78-2.694.123-1.247.124-2.844.124-5.047s-.001-3.8-.125-5.046c-.122-1.235-.359-2.044-.78-2.695a5.65 5.65 0 0 0-1.679-1.68c-.651-.42-1.46-.657-2.695-.78-1.246-.123-2.843-.124-5.046-.124-2.203 0-3.8 0-5.047.124z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-local' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M3 3.75a1.5 1.5 0 0 0-1.5 1.5v13.5a1.5 1.5 0 0 0 1.5 1.5h18a1.5 1.5 0 0 0 1.5-1.5V9A1.5 1.5 0 0 0 21 7.5h-9a.75.75 0 0 1-.643-.364L9.325 3.75zm-3 1.5a3 3 0 0 1 3-3h6.75a.75.75 0 0 1 .643.364L12.425 6H21a3 3 0 0 1 3 3v9.75a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-mirror' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M5 .4 3.5 2 5 3.6M15 .4 16.5 2 15 3.6M3.52 2h12.957M8.5 16.7V6.046c0-.301-.394-.415-.554-.159L1.287 16.541a.3.3 0 0 0 .255.459H8.2a.3.3 0 0 0 .3-.3zm3 0V6.046c0-.301.395-.415.555-.159l6.659 10.654a.3.3 0 0 1-.255.459H11.8a.3.3 0 0 1-.3-.3z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-onedrive' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M13.616 4.147a7.689 7.689 0 0 0-7.642 3.285A6.299 6.299 0 0 0 1.455 17.3c.684.894 2.473 2.658 5.17 2.658h12.141c.95 0 1.882-.256 2.697-.743.815-.486 1.514-1.247 1.964-2.083a5.26 5.26 0 0 0-3.713-7.612 7.69 7.69 0 0 0-6.098-5.373ZM3.34 17.15c.674.63 1.761 1.308 3.284 1.308h12.142a3.76 3.76 0 0 0 2.915-1.383l-7.494-4.489L3.34 17.15Zm10.875-6.25 2.47-1.038a5.239 5.239 0 0 1 1.427-.389 6.19 6.19 0 0 0-10.3-1.952 6.338 6.338 0 0 1 2.118.813l4.285 2.567Zm4.55.033c-.512 0-1.019.104-1.489.307l-.006.003-1.414.594 6.521 3.906a3.76 3.76 0 0 0-3.357-4.8l-.254-.01ZM4.097 9.617A4.799 4.799 0 0 1 6.558 8.9c.9 0 1.84.25 2.587.713l3.4 2.037-10.17 4.28a4.799 4.799 0 0 1 1.721-6.312Z'/></symbol><symbol viewBox='0 0 40 40' id='uc-icon-original' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M0 40 40 0'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-remove' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M6.357 9.714c-.764 0-1.359.661-1.279 1.42l1.015 9.643c.069.655.62 1.152 1.279 1.152h9.256c.658 0 1.21-.497 1.279-1.151l1.015-9.643c.08-.76-.515-1.42-1.279-1.42zm.5-4.5v.322H4.286a1.286 1.286 0 0 0 0 2.571h15.428a1.286 1.286 0 1 0 0-2.571h-2.571v-.322A3.214 3.214 0 0 0 13.929 2H10.07a3.214 3.214 0 0 0-3.214 3.214zm7.072-.643c.355 0 .642.288.642.643v.322H9.43v-.322c0-.355.287-.643.642-.643z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-remove-file' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M11.955 3.3A2.969 2.969 0 0 0 8.998 6h5.914a2.97 2.97 0 0 0-2.957-2.7zM16.416 6a4.47 4.47 0 0 0-8.922 0h-2.32a.755.755 0 0 0-.111.008H3.075a.75.75 0 1 0 0 1.5h1.35V19.35a2.85 2.85 0 0 0 2.85 2.85h9.45a2.85 2.85 0 0 0 2.85-2.85V7.508h1.35a.75.75 0 0 0 0-1.5h-1.989A.754.754 0 0 0 18.825 6zM5.925 7.508V19.35a1.35 1.35 0 0 0 1.35 1.35h9.45a1.35 1.35 0 0 0 1.35-1.35V7.508z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-rotate' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M13.5.4 12 2l1.5 1.6M12.023 2H14.4A3.6 3.6 0 0 1 18 5.6V8M4 17h9a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-sad' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 17c4.418-4 11.582-4 16 0M16.5 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-11 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-saturation' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='aouc-icon-id__a' x1='10.001' y1='1' x2='10.001' y2='19' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs><circle cx='10.001' cy='10' r='9' transform='rotate(90 10 10)' fill='url(#aouc-icon-id__a)'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-select' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='m7 10 5 5 5-5H7Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-slider' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M0 10h11m0 0a2 2 0 1 0 4 0m-4 0a2 2 0 1 1 4 0m0 0h5'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-trash-file' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M6.357 9.714c-.764 0-1.359.661-1.279 1.42l1.015 9.643c.069.655.62 1.152 1.279 1.152h9.256c.658 0 1.21-.497 1.279-1.151l1.015-9.643c.08-.76-.515-1.42-1.279-1.42zm.5-4.5v.322H4.286a1.286 1.286 0 0 0 0 2.571h15.428a1.286 1.286 0 1 0 0-2.571h-2.571v-.322A3.214 3.214 0 0 0 13.929 2H10.07a3.214 3.214 0 0 0-3.214 3.214zm7.072-.643c.355 0 .642.288.642.643v.322H9.43v-.322c0-.355.287-.643.642-.643z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-tuning' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M8 10h11M1 10h4M1 4.5h11m3 0h4m-18 11h11m3 0h4m-7-11a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0M5 10a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0m7 5.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-upload' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M11.501.392a.75.75 0 0 1 .998 0l6.704 5.972a.75.75 0 0 1-.998 1.12l-5.455-4.86v13.439a.75.75 0 0 1-1.5 0V2.625l-5.454 4.86a.75.75 0 1 1-.998-1.12zM.857 16.73a.75.75 0 0 1 .75.75v4.914h20.786v-4.914a.75.75 0 0 1 1.5 0v5.664a.75.75 0 0 1-.75.75H.857a.75.75 0 0 1-.75-.75v-5.664a.75.75 0 0 1 .75-.75z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-upload-error' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-url' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M19.11 3.67c-1.71-1.709-4.578-1.682-6.408.148l-2.22 2.22a.75.75 0 0 1-1.062-1.06l2.222-2.221C14.018.381 17.836.276 20.17 2.61l1.22 1.22c2.335 2.334 2.23 6.153-.147 8.529l-2.22 2.22a.75.75 0 0 1-1.062-1.06l2.222-2.221c1.83-1.83 1.856-4.698.147-6.408zm-3.36 4.58a.75.75 0 0 1 0 1.06l-6.439 6.44a.75.75 0 0 1-1.06-1.06l6.439-6.44a.75.75 0 0 1 1.06 0zM6.04 9.42a.75.75 0 0 1 0 1.061l-2.222 2.222c-1.83 1.83-1.856 4.698-.147 6.407l1.22 1.22c1.71 1.71 4.578 1.683 6.408-.147l2.221-2.221a.75.75 0 1 1 1.06 1.06l-2.22 2.222c-2.377 2.376-6.195 2.481-8.53.147l-1.22-1.22c-2.334-2.334-2.228-6.153.148-8.53l2.221-2.22a.75.75 0 0 1 1.06 0z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-vibrance' xmlns='http://www.w3.org/2000/svg'><path d='M2.125 5.64A8.96 8.96 0 0 0 1.001 10a8.96 8.96 0 0 0 1.124 4.36V5.64z' fill='url(#aruc-icon-id__a)'/><path d='M2.875 15.499V4.502a9.053 9.053 0 0 1 1.75-1.72v14.437a9.05 9.05 0 0 1-1.75-1.72z' fill='url(#aruc-icon-id__b)'/><path d='M5.375 17.722c.548.33 1.134.601 1.75.809V1.469a8.956 8.956 0 0 0-1.75.81v15.443z' fill='url(#aruc-icon-id__c)'/><path d='M7.875 1.253v17.495c.564.136 1.15.22 1.75.244V1.008a9 9 0 0 0-1.75.245z' fill='url(#aruc-icon-id__d)'/><path d='M10.375 1.008v17.984a9 9 0 0 0 1.75-.244V1.252a9 9 0 0 0-1.75-.244z' fill='url(#aruc-icon-id__e)'/><path d='M12.875 1.469V18.53a8.957 8.957 0 0 0 1.75-.808V2.277a8.957 8.957 0 0 0-1.75-.808z' fill='url(#aruc-icon-id__f)'/><path d='M15.375 2.78v14.44a9.053 9.053 0 0 0 1.75-1.72v-11a9.054 9.054 0 0 0-1.75-1.72z' fill='url(#aruc-icon-id__g)'/><path d='M17.875 5.638v8.724A8.959 8.959 0 0 0 19.001 10a8.96 8.96 0 0 0-1.126-4.362z' fill='url(#aruc-icon-id__h)'/><defs><linearGradient id='aruc-icon-id__a' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='aruc-icon-id__b' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='aruc-icon-id__c' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='aruc-icon-id__d' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='aruc-icon-id__e' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='aruc-icon-id__f' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='aruc-icon-id__g' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='aruc-icon-id__h' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs></symbol><symbol viewBox='0 0 24 24' id='uc-icon-vk' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M6.341 3.27a10.5 10.5 0 0 1 5.834-1.77.75.75 0 0 0 0-1.5 12 12 0 1 0 12 12 .75.75 0 0 0-1.5 0A10.5 10.5 0 1 1 6.34 3.27Zm14.145 1.48a.75.75 0 1 0-1.06-1.062L9.925 13.19V7.95a.75.75 0 1 0-1.5 0V15c0 .414.336.75.75.75h7.05a.75.75 0 0 0 0-1.5h-5.24l9.501-9.5Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-warmth' xmlns='http://www.w3.org/2000/svg'><path d='m7.5 13.05.429.42.171-.175v-.244h-.6zm5 0h-.6v.245l.172.175.428-.42zM8.1 3.5c0-1.05.85-1.9 1.9-1.9V.4a3.1 3.1 0 0 0-3.1 3.1h1.2zm0 9.55V3.5H6.9v9.55h1.2zm-1 2.45c0-.79.315-1.506.829-2.03l-.858-.84A4.088 4.088 0 0 0 5.9 15.5h1.2zm2.9 2.9a2.9 2.9 0 0 1-2.9-2.9H5.9a4.1 4.1 0 0 0 4.1 4.1v-1.2zm2.9-2.9a2.9 2.9 0 0 1-2.9 2.9v1.2a4.1 4.1 0 0 0 4.1-4.1h-1.2zm-.829-2.03c.514.524.829 1.24.829 2.03h1.2c0-1.117-.447-2.13-1.171-2.87l-.858.84zM11.9 3.5v9.55h1.2V3.5h-1.2zM10 1.6c1.05 0 1.9.85 1.9 1.9h1.2A3.1 3.1 0 0 0 10 .4v1.2z' fill='currentColor'/><path d='M10 14V8' stroke='currentColor' stroke-width='1.2' stroke-linecap='round'/><path d='M14 3h3m-3 3h3m-3 3h3m-8 6.5a1 1 0 1 0 2 0 1 1 0 1 0-2 0' stroke='currentColor' stroke-width='1.2'/></symbol></svg>";
+export default "<svg width='0' height='0' style='position:absolute'><symbol viewBox='0 0 24 24' id='uc-icon-about' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M11.152 14.12v.1h1.523v-.1c.007-.409.053-.752.138-1.028.086-.277.22-.517.405-.72.188-.202.434-.397.735-.586.32-.191.593-.412.82-.66.232-.249.41-.531.533-.847.125-.32.187-.678.187-1.076 0-.579-.137-1.085-.41-1.518a2.717 2.717 0 0 0-1.14-1.018c-.49-.245-1.062-.367-1.715-.367-.597 0-1.142.114-1.636.34-.49.228-.884.564-1.182 1.008-.299.44-.46.98-.485 1.619h1.62c.024-.377.118-.684.282-.922a1.48 1.48 0 0 1 .617-.532c.25-.114.51-.17.784-.17.301 0 .575.063.82.191.248.124.447.302.597.533.149.23.223.504.223.82 0 .263-.05.502-.149.72a1.91 1.91 0 0 1-.405.574 3.48 3.48 0 0 1-.575.453 4.22 4.22 0 0 0-.847.66c-.234.242-.415.558-.543.949-.125.39-.19.916-.197 1.577Zm.053 3.03c.21.206.46.31.75.31.196 0 .374-.049.534-.144a1.1 1.1 0 0 0 .383-.384c.1-.163.15-.343.15-.538a1 1 0 0 0-.32-.746 1.019 1.019 0 0 0-.746-.314c-.291 0-.542.105-.751.314-.21.206-.314.455-.314.746 0 .295.104.547.314.756ZM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Zm-1.5 0c0 5.799-4.701 10.5-10.5 10.5S1.5 17.799 1.5 12 6.201 1.5 12 1.5 22.5 6.201 22.5 12Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-add' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M12.75 21a.75.75 0 0 1-1.5 0v-8.25H3a.75.75 0 0 1 0-1.5h8.25V3a.75.75 0 0 1 1.5 0v8.25H21a.75.75 0 0 1 0 1.5h-8.25V21Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-arrow-down' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M11.5 23.03a.75.75 0 0 0 .999 0l9.29-8.276a.75.75 0 0 0-.998-1.12l-8.042 7.164V1.53a.75.75 0 0 0-1.5 0v19.267l-8.04-7.163a.75.75 0 0 0-.998 1.12z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-back' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M20.251 12a.75.75 0 0 1-.75.75H6.067l5.72 5.85a.75.75 0 1 1-1.072 1.05L4.136 12.92a1.292 1.292 0 0 1 0-1.842l6.579-6.728a.75.75 0 1 1 1.072 1.048l-5.72 5.851H19.5a.75.75 0 0 1 .75.75Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-badge-error' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M13.6 18.4a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0zM12 4.5A1.5 1.5 0 0 1 13.5 6v7a1.5 1.5 0 0 1-3 0V6A1.5 1.5 0 0 1 12 4.5z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-badge-success' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='m10.5 18.204 7.6-8.183a1.5 1.5 0 0 0-2.2-2.042l-5.4 5.817-2.4-2.586a1.5 1.5 0 1 0-2.2 2.041l4.6 4.953Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-box' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M1.01 4.148a.75.75 0 0 1 .75.75v4.348a4.437 4.437 0 0 1 2.988-1.153c1.734 0 3.23.992 3.978 2.438a4.478 4.478 0 0 1 3.978-2.438c2.49 0 4.488 2.044 4.488 4.543 0 2.5-1.999 4.544-4.488 4.544a4.478 4.478 0 0 1-3.978-2.438 4.478 4.478 0 0 1-3.978 2.438C2.26 17.18.26 15.135.26 12.636V4.898a.75.75 0 0 1 .75-.75Zm.75 8.488c0 1.692 1.348 3.044 2.988 3.044s2.989-1.352 2.989-3.044c0-1.691-1.349-3.043-2.989-3.043S1.76 10.945 1.76 12.636Zm10.944-3.043c-1.64 0-2.988 1.352-2.988 3.043 0 1.692 1.348 3.044 2.988 3.044s2.988-1.352 2.988-3.044c0-1.69-1.348-3.043-2.988-3.043Zm4.328-1.23a.75.75 0 0 1 1.052.128l2.333 2.983 2.333-2.983a.75.75 0 0 1 1.181.924l-2.562 3.277 2.562 3.276a.75.75 0 1 1-1.181.924l-2.333-2.983-2.333 2.983a.75.75 0 1 1-1.181-.924l2.562-3.276-2.562-3.277a.75.75 0 0 1 .129-1.052Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-brightness' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M15 10a5 5 0 0 1-5 5m5-5a5 5 0 0 0-5-5m5 5h-5m0 5a5 5 0 0 1 0-10m0 10V5m0 15v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05m-.626 2.45H10m4.324 5H10'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-camera' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M7.65 2.55a.75.75 0 0 1 .6-.3h7.5a.75.75 0 0 1 .6.3l2.025 2.7H21a3 3 0 0 1 3 3v10.5a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V8.25a3 3 0 0 1 3-3h2.625zm.975 1.2L6.6 6.45a.75.75 0 0 1-.6.3H3a1.5 1.5 0 0 0-1.5 1.5v10.5a1.5 1.5 0 0 0 1.5 1.5h18a1.5 1.5 0 0 0 1.5-1.5V8.25a1.5 1.5 0 0 0-1.5-1.5h-3a.75.75 0 0 1-.6-.3l-2.025-2.7zm3.375 6a3.375 3.375 0 1 0 0 6.75 3.375 3.375 0 0 0 0-6.75zm-4.875 3.375a4.875 4.875 0 1 1 9.75 0 4.875 4.875 0 0 1-9.75 0z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-close' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M4.604 4.604a.75.75 0 0 1 1.06 0L12 10.939l6.335-6.335a.75.75 0 1 1 1.061 1.06L13.061 12l6.335 6.335a.75.75 0 1 1-1.06 1.061L12 13.061l-6.335 6.335a.75.75 0 0 1-1.061-1.06L10.939 12 4.604 5.665a.75.75 0 0 1 0-1.061z'/></symbol><symbol fill='currentColor' viewBox='0 0 20 20' id='uc-icon-closeMax' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8.232 10 3.585 5.353l1.768-1.768L10 8.232l4.648-4.647 1.767 1.768L11.768 10l4.647 4.648-1.767 1.767L10 11.768l-4.647 4.647-1.768-1.767L8.232 10Z' clip-rule='evenodd'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-collapse' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M3.116 12a.75.75 0 0 1 .75-.75h16.268a.75.75 0 0 1 0 1.5H3.866a.75.75 0 0 1-.75-.75Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-contrast' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 10a8 8 0 1 0 16 0 8 8 0 1 0-16 0m8-8v16m8-8h-8m7.598 2.5H10m6.24 2.5H10m7.6-7.5H10M16.242 5H10'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-crop' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M20 14H7.005C6.45 14 6 13.55 6 12.995V0M0 6h13.067c.515 0 .933.418.933.933V20M14.5.4 13 2l1.5 1.6M13 2h2a3 3 0 0 1 3 3v2M5.5 19.6 7 18l-1.5-1.6M7 18H5a3 3 0 0 1-3-3v-2'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-default' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M11.501.392a.75.75 0 0 1 .998 0l6.704 5.972a.75.75 0 0 1-.998 1.12l-5.455-4.86v13.439a.75.75 0 0 1-1.5 0V2.625l-5.454 4.86a.75.75 0 1 1-.998-1.12zM.857 16.73a.75.75 0 0 1 .75.75v4.914h20.786v-4.914a.75.75 0 0 1 1.5 0v5.664a.75.75 0 0 1-.75.75H.857a.75.75 0 0 1-.75-.75v-5.664a.75.75 0 0 1 .75-.75z'/></symbol><symbol fill='currentColor' viewBox='0 0 20 20' id='uc-icon-done' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='m18.057 6.333-9.365 9.125a1.25 1.25 0 0 1-1.768-.023L1.92 10.296l1.791-1.744 4.132 4.243 8.47-8.253 1.744 1.79Z' clip-rule='evenodd'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-dropbox' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M6.019 1.92a.75.75 0 0 1 .806 0L12 5.219l5.176-3.297a.75.75 0 0 1 .806 0l5.577 3.553a.75.75 0 0 1 0 1.265l-4.574 2.914 4.574 2.914a.75.75 0 0 1 0 1.265l-5.577 3.554a.75.75 0 0 1-.806 0L12 14.089l-5.175 3.297a.75.75 0 0 1-.806 0L.44 13.833a.75.75 0 0 1 0-1.266l4.575-2.914L.44 6.74a.75.75 0 0 1 0-1.265zm.403 8.616L2.24 13.2l4.182 2.664 4.181-2.664zm6.975 2.664 4.182 2.664L21.76 13.2l-4.181-2.664zm2.776-3.547L12 12.311 7.828 9.653 12 6.995zm1.406-.882 4.181-2.664-4.181-2.664-4.182 2.664zm-6.976-2.664L6.422 3.443 2.24 6.107 6.422 8.77zM5.791 18.544a.75.75 0 0 1 1.035-.23l5.175 3.297 5.175-3.297a.75.75 0 1 1 .806 1.265l-5.578 3.554a.75.75 0 0 1-.806 0L6.02 19.579a.75.75 0 0 1-.23-1.035z'/></symbol><symbol fill='currentColor' viewBox='0 0 25 24' id='uc-icon-edit-file' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M18.558 2.804a.78.78 0 0 0-.557.235l-.008.007-2.472 2.46 3.847 3.848 2.46-2.473.004-.003a.78.78 0 0 0 0-1.108l-.004-.003-2.712-2.728a.78.78 0 0 0-.558-.235Zm-.248 7.613-3.852-3.852-8.93 8.887-1.516 5.41 5.41-1.515 8.888-8.93Zm-.636-8.934a2.28 2.28 0 0 1 2.512.505l2.702 2.717.002.002a2.278 2.278 0 0 1 0 3.234l-.002.002-12.541 12.602a.75.75 0 0 1-.33.193l-6.884 1.928a.75.75 0 0 1-.925-.924l1.928-6.885a.75.75 0 0 1 .193-.33l12.603-12.54a2.28 2.28 0 0 1 .742-.504Z' clip-rule='evenodd'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-enhance' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19 13h-2m0 0a4 4 0 0 1-4-4m4 4a4 4 0 0 0-4 4m0-8V7m0 2a4 4 0 0 1-4 4m-2 0h2m0 0a4 4 0 0 1 4 4m0 0v2M8 8.5H6.5m0 0a2 2 0 0 1-2-2m2 2a2 2 0 0 0-2 2m0-4V5m0 1.5a2 2 0 0 1-2 2M1 8.5h1.5m0 0a2 2 0 0 1 2 2m0 0V12M12 3h-1m0 0a1 1 0 0 1-1-1m1 1a1 1 0 0 0-1 1m0-2V1m0 1a1 1 0 0 1-1 1M8 3h1m0 0a1 1 0 0 1 1 1m0 0v1'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-error' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-evernote' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M9.804 2.27v-.048c.055-.263.313-.562.85-.562h.44c.142 0 .325.014.526.033.066.009.124.023.267.06l.13.032h.002c.319.079.515.275.644.482a1.461 1.461 0 0 1 .16.356l.004.012a.75.75 0 0 0 .603.577l1.191.207a1988.512 1988.512 0 0 0 2.332.402c.512.083 1.1.178 1.665.442.64.3 1.19.795 1.376 1.77.548 2.931.657 5.829.621 8a39.233 39.233 0 0 1-.125 2.602 17.518 17.518 0 0 1-.092.849.735.735 0 0 0-.024.112c-.378 2.705-1.269 3.796-2.04 4.27-.746.457-1.53.451-2.217.447h-.192c-.46 0-1.073-.23-1.581-.635-.518-.412-.763-.87-.763-1.217 0-.45.188-.688.355-.786.161-.095.436-.137.796.087a.75.75 0 1 0 .792-1.274c-.766-.476-1.64-.52-2.345-.108-.7.409-1.098 1.188-1.098 2.08 0 .996.634 1.84 1.329 2.392.704.56 1.638.96 2.515.96l.185.002c.667.009 1.874.025 3.007-.67 1.283-.786 2.314-2.358 2.733-5.276a4.213 4.213 0 0 0 .056-.335c.023-.184.051-.445.079-.772.055-.655.111-1.585.13-2.704.037-2.234-.074-5.239-.647-8.301v-.002c-.294-1.544-1.233-2.391-2.215-2.85-.777-.363-1.623-.496-2.129-.576a8.872 8.872 0 0 1-.25-.041l-.006-.001-1.99-.345-.761-.132a2.93 2.93 0 0 0-.182-.338A2.532 2.532 0 0 0 12.379.329l-.091-.023a3.967 3.967 0 0 0-.493-.103L11.769.2a7.846 7.846 0 0 0-.675-.04h-.44c-.733 0-1.368.284-1.795.742L2.416 7.431c-.468.428-.751 1.071-.751 1.81 0 .02 0 .041.003.062l.003.034c.017.21.038.468.096.796.107.715.275 1.47.391 1.994.029.13.055.245.075.342l.002.008c.258 1.141.641 1.94.978 2.466.168.263.323.456.444.589a2.808 2.808 0 0 0 .192.194c1.536 1.562 3.713 2.196 5.731 2.08.13-.005.35-.032.537-.073a2.627 2.627 0 0 0 .652-.24c.425-.26.75-.661.992-1.046.184-.294.342-.61.473-.915a3.8 3.8 0 0 0 .627.493 5.022 5.022 0 0 0 1.97.709l.023.002.018.003.11.016c.088.014.205.035.325.058l.056.014c.088.022.164.04.235.061a1.736 1.736 0 0 1 .145.048l.03.014c.765.34 1.302 1.09 1.302 1.871a.75.75 0 0 0 1.5 0c0-1.456-.964-2.69-2.18-3.235a3.595 3.595 0 0 0-.679-.217l-.063-.015a10.616 10.616 0 0 0-.606-.105l-.02-.003-.03-.003h-.002a3.542 3.542 0 0 1-1.331-.485c-.471-.298-.788-.692-.828-1.234a.75.75 0 0 0-1.48-.106l-.001.003-.004.017a8.23 8.23 0 0 1-.092.352 9.963 9.963 0 0 1-.298.892c-.132.34-.29.68-.47.966-.174.276-.339.454-.478.549a1.178 1.178 0 0 1-.221.072 1.949 1.949 0 0 1-.241.036h-.013l-.032.002c-1.684.1-3.423-.437-4.604-1.65a.746.746 0 0 0-.053-.05L4.84 14.6a1.348 1.348 0 0 1-.07-.073 2.99 2.99 0 0 1-.293-.392c-.242-.379-.558-1.014-.778-1.985a54.1 54.1 0 0 0-.083-.376 27.494 27.494 0 0 1-.367-1.872l-.003-.02a6.791 6.791 0 0 1-.08-.67c.004-.277.086-.475.2-.609l.067-.067a.63.63 0 0 1 .292-.145h.05c.18 0 1.095.055 2.013.115l1.207.08.534.037a.747.747 0 0 0 .052.002c.782 0 1.349-.206 1.759-.585l.005-.005c.553-.52.622-1.225.622-1.76V6.24l-.026-.565A774.97 774.97 0 0 1 9.885 4.4c-.042-.961-.081-1.939-.081-2.13ZM4.995 6.953a251.126 251.126 0 0 1 2.102.137l.508.035c.48-.004.646-.122.715-.185.07-.068.146-.209.147-.649l-.024-.548a791.69 791.69 0 0 1-.095-2.187L4.995 6.953Zm16.122 9.996Zm-5.479-5.323a.75.75 0 0 0 1.014.31 2.04 2.04 0 0 1 .304-.089 1.84 1.84 0 0 1 .544-.039c.215.023.321.06.37.085.033.016.039.026.047.04a.75.75 0 0 0 1.289-.767c-.337-.567-.906-.783-1.552-.85a3.334 3.334 0 0 0-1.002.062c-.27.056-.531.14-.705.234a.75.75 0 0 0-.31 1.014Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-expand' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='m12 8.337-8.47 8.47a.75.75 0 0 1-1.06-1.06l8.605-8.606a1.29 1.29 0 0 1 1.85 0l8.605 8.605a.75.75 0 1 1-1.06 1.06L12 8.338Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-exposure' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M10 20v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05M5 10a5 5 0 1 0 10 0 5 5 0 1 0-10 0'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-external-source-placeholder' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M6.341 3.27a10.5 10.5 0 0 1 5.834-1.77.75.75 0 0 0 0-1.5 12 12 0 1 0 12 12 .75.75 0 0 0-1.5 0A10.5 10.5 0 1 1 6.34 3.27Zm14.145 1.48a.75.75 0 1 0-1.06-1.062L9.925 13.19V7.95a.75.75 0 1 0-1.5 0V15c0 .414.336.75.75.75h7.05a.75.75 0 0 0 0-1.5h-5.24l9.501-9.5Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-facebook' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M12 1.5C6.201 1.5 1.5 6.201 1.5 12c0 4.943 3.416 9.089 8.016 10.204v-6.108H7.383a.75.75 0 0 1-.75-.75v-3.281a.75.75 0 0 1 .75-.75h2.133V9.393c0-.958.225-2.511 1.38-3.65 1.194-1.177 3.174-1.718 6.254-1.056a.75.75 0 0 1 .592.733v2.754a.75.75 0 0 1-.75.75c-.692 0-1.203.026-1.584.082-.387.057-.578.137-.675.202-.109.073-.237.205-.237 1.029v1.078h2.39a.75.75 0 0 1 .742.866l-.516 3.281a.75.75 0 0 1-.74.634h-1.876v6.106C19.09 21.082 22.5 16.939 22.5 12c0-5.799-4.701-10.5-10.5-10.5zM0 12C0 5.373 5.373 0 12 0s12 5.373 12 12c0 5.995-4.395 10.961-10.138 11.856a.75.75 0 0 1-.866-.74v-7.77a.75.75 0 0 1 .75-.75h1.984l.28-1.781h-2.264a.75.75 0 0 1-.75-.75v-1.828c0-.829.089-1.729.9-2.274.363-.244.807-.37 1.293-.441a9.623 9.623 0 0 1 1.053-.086V6.04c-2.41-.405-3.645.132-4.293.771-.737.728-.933 1.793-.933 2.582v2.672a.75.75 0 0 1-.75.75H8.133v1.78h2.133a.75.75 0 0 1 .75.75v7.772a.75.75 0 0 1-.865.741C4.4 22.968 0 18 0 12z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-file' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M2.895 1.201c0-.473.383-.857.857-.857h8.4c.227 0 .445.09.606.251l8.4 8.4c.16.16.25.379.25.606v13.2a.857.857 0 0 1-.856.857h-16.8a.857.857 0 0 1-.857-.857zm1.714.857v19.886h15.085V10.458h-7.542a.857.857 0 0 1-.858-.857V2.058zm8.4 1.213 5.473 5.473H13.01z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-filters' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M4.5 6.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m-3.5 6a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m7 0a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-flickr' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M5.959 7.926c-2.298 0-4.14 1.834-4.14 4.073 0 2.241 1.842 4.075 4.14 4.075 2.302 0 4.145-1.834 4.145-4.075 0-2.238-1.843-4.073-4.145-4.073Zm-5.64 4.073c0-3.086 2.533-5.573 5.64-5.573 3.11 0 5.645 2.486 5.645 5.573 0 3.089-2.535 5.575-5.645 5.575-3.107 0-5.64-2.487-5.64-5.575Zm18.07-4.073c-2.301 0-4.144 1.835-4.144 4.073 0 2.24 1.843 4.075 4.145 4.075 2.299 0 4.141-1.834 4.141-4.075 0-2.239-1.842-4.073-4.141-4.073Zm-5.644 4.073c0-3.087 2.535-5.573 5.645-5.573 3.108 0 5.641 2.487 5.641 5.573 0 3.088-2.533 5.575-5.641 5.575-3.11 0-5.645-2.486-5.645-5.575Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-flip' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19.6 5 18 3.5 16.4 5m3.2 10L18 16.5 16.4 15M18 3.523v12.954M3.3 8.5h10.654c.301 0 .415-.395.159-.554L3.459 1.286A.3.3 0 0 0 3 1.542V8.2a.3.3 0 0 0 .3.3zm0 3h10.654c.301 0 .415.395.159.554l-10.654 6.66A.3.3 0 0 1 3 18.458v-6.66a.3.3 0 0 1 .3-.3z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-gamma' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M17 3C9 6 2.5 11.5 2.5 17.5m0 0h1m-1 0v-1m14 1h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3-14v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-gdrive' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M7.736 1.818a.75.75 0 0 1 .647-.37h7.587a.75.75 0 0 1 .655.383l7.233 12.946a.75.75 0 0 1-.003.737l-3.794 6.66a.75.75 0 0 1-.651.378H4.59a.75.75 0 0 1-.651-.378l-3.794-6.66a.75.75 0 0 1 .005-.75zm.64 1.876L1.663 15.148l2.93 5.145 6.655-11.581zm3.736 6.526-2.398 4.173H14.5zm4.116 4.173h5.697L15.53 2.947H9.677zm5.685 1.5H8.852l-2.966 5.16h13.088z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-gphotos' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M12.51 0c-.702 0-1.272.57-1.272 1.273V7.35A6.381 6.381 0 0 0 0 11.489c0 .703.57 1.273 1.273 1.273H7.35A6.381 6.381 0 0 0 11.488 24c.704 0 1.274-.57 1.274-1.273V16.65A6.381 6.381 0 0 0 24 12.51c0-.703-.57-1.273-1.273-1.273H16.65A6.381 6.381 0 0 0 12.511 0Zm.252 11.232V1.53a4.857 4.857 0 0 1 0 9.702Zm-1.53.006H1.53a4.857 4.857 0 0 1 9.702 0Zm1.536 1.524a4.857 4.857 0 0 0 9.702 0h-9.702Zm-6.136 4.857c0-2.598 2.04-4.72 4.606-4.85v9.7a4.857 4.857 0 0 1-4.606-4.85Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-huddle' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M6.204 2.002c-.252.23-.357.486-.357.67V21.07c0 .15.084.505.313.812.208.28.499.477.929.477.519 0 .796-.174.956-.365.178-.212.286-.535.286-.924v-.013l.117-6.58c.004-1.725 1.419-3.883 3.867-3.883 1.33 0 2.332.581 2.987 1.364.637.762.95 1.717.95 2.526v6.47c0 .392.11.751.305.995.175.22.468.41 1.008.41.52 0 .816-.198 1.002-.437.207-.266.31-.633.31-.969V14.04c0-2.81-1.943-5.108-4.136-5.422a5.971 5.971 0 0 0-3.183.41c-.912.393-1.538.96-1.81 1.489a.75.75 0 0 1-1.417-.344v-7.5c0-.587-.47-1.031-1.242-1.031-.315 0-.638.136-.885.36ZM5.194.892A2.844 2.844 0 0 1 7.09.142c1.328 0 2.742.867 2.742 2.53v5.607a6.358 6.358 0 0 1 1.133-.629 7.47 7.47 0 0 1 3.989-.516c3.056.436 5.425 3.482 5.425 6.906v6.914c0 .602-.177 1.313-.627 1.89-.47.605-1.204 1.016-2.186 1.016-.96 0-1.698-.37-2.179-.973-.46-.575-.633-1.294-.633-1.933v-6.469c0-.456-.19-1.071-.602-1.563-.394-.471-.986-.827-1.836-.827-1.447 0-2.367 1.304-2.367 2.39v.014l-.117 6.58c-.001.64-.177 1.333-.637 1.881-.48.57-1.2.9-2.105.9-.995 0-1.7-.5-2.132-1.081-.41-.552-.61-1.217-.61-1.708V2.672c0-.707.366-1.341.847-1.78Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-info' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2v6Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-instagram' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M6.225 12a5.775 5.775 0 1 1 11.55 0 5.775 5.775 0 0 1-11.55 0zM12 7.725a4.275 4.275 0 1 0 0 8.55 4.275 4.275 0 0 0 0-8.55zm6.425-.75a1.4 1.4 0 1 0 0-2.8 1.4 1.4 0 0 0 0 2.8zm-6.467-6.8h.084c2.152 0 3.823 0 5.152.132 1.35.134 2.427.41 3.362 1.013a7.15 7.15 0 0 1 2.124 2.124c.604.935.88 2.012 1.013 3.362.132 1.329.132 3 .132 5.152v.084c0 2.152 0 3.823-.132 5.152-.134 1.35-.41 2.427-1.013 3.362a7.15 7.15 0 0 1-2.124 2.124c-.935.604-2.012.88-3.362 1.013-1.329.132-3 .132-5.152.132h-.084c-2.152 0-3.824 0-5.153-.132-1.35-.134-2.427-.409-3.36-1.013a7.15 7.15 0 0 1-2.125-2.124C.716 19.62.44 18.544.307 17.194c-.132-1.329-.132-3-.132-5.152v-.084c0-2.152 0-3.823.132-5.152.133-1.35.409-2.427 1.013-3.362A7.15 7.15 0 0 1 3.444 1.32C4.378.716 5.456.44 6.805.307c1.33-.132 3-.132 5.153-.132zM6.953 1.799c-1.234.123-2.043.36-2.695.78A5.65 5.65 0 0 0 2.58 4.26c-.42.65-.657 1.46-.78 2.695C1.676 8.2 1.675 9.797 1.675 12s0 3.8.124 5.046c.123 1.235.36 2.044.78 2.696a5.649 5.649 0 0 0 1.68 1.678c.65.421 1.46.658 2.694.78 1.247.124 2.844.125 5.047.125s3.8 0 5.046-.124c1.235-.123 2.044-.36 2.695-.78a5.648 5.648 0 0 0 1.68-1.68c.42-.65.657-1.46.78-2.694.123-1.247.124-2.844.124-5.047s-.001-3.8-.125-5.046c-.122-1.235-.359-2.044-.78-2.695a5.65 5.65 0 0 0-1.679-1.68c-.651-.42-1.46-.657-2.695-.78-1.246-.123-2.843-.124-5.046-.124-2.203 0-3.8 0-5.047.124z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-local' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M3 3.75a1.5 1.5 0 0 0-1.5 1.5v13.5a1.5 1.5 0 0 0 1.5 1.5h18a1.5 1.5 0 0 0 1.5-1.5V9A1.5 1.5 0 0 0 21 7.5h-9a.75.75 0 0 1-.643-.364L9.325 3.75zm-3 1.5a3 3 0 0 1 3-3h6.75a.75.75 0 0 1 .643.364L12.425 6H21a3 3 0 0 1 3 3v9.75a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-mirror' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M5 .4 3.5 2 5 3.6M15 .4 16.5 2 15 3.6M3.52 2h12.957M8.5 16.7V6.046c0-.301-.394-.415-.554-.159L1.287 16.541a.3.3 0 0 0 .255.459H8.2a.3.3 0 0 0 .3-.3zm3 0V6.046c0-.301.395-.415.555-.159l6.659 10.654a.3.3 0 0 1-.255.459H11.8a.3.3 0 0 1-.3-.3z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-onedrive' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M13.616 4.147a7.689 7.689 0 0 0-7.642 3.285A6.299 6.299 0 0 0 1.455 17.3c.684.894 2.473 2.658 5.17 2.658h12.141c.95 0 1.882-.256 2.697-.743.815-.486 1.514-1.247 1.964-2.083a5.26 5.26 0 0 0-3.713-7.612 7.69 7.69 0 0 0-6.098-5.373ZM3.34 17.15c.674.63 1.761 1.308 3.284 1.308h12.142a3.76 3.76 0 0 0 2.915-1.383l-7.494-4.489L3.34 17.15Zm10.875-6.25 2.47-1.038a5.239 5.239 0 0 1 1.427-.389 6.19 6.19 0 0 0-10.3-1.952 6.338 6.338 0 0 1 2.118.813l4.285 2.567Zm4.55.033c-.512 0-1.019.104-1.489.307l-.006.003-1.414.594 6.521 3.906a3.76 3.76 0 0 0-3.357-4.8l-.254-.01ZM4.097 9.617A4.799 4.799 0 0 1 6.558 8.9c.9 0 1.84.25 2.587.713l3.4 2.037-10.17 4.28a4.799 4.799 0 0 1 1.721-6.312Z'/></symbol><symbol viewBox='0 0 40 40' id='uc-icon-original' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.5' d='M0 40 40 0'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-remove-file' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M11.955 3.3A2.969 2.969 0 0 0 8.998 6h5.914a2.97 2.97 0 0 0-2.957-2.7zM16.416 6a4.47 4.47 0 0 0-8.922 0h-2.32a.755.755 0 0 0-.111.008H3.075a.75.75 0 1 0 0 1.5h1.35V19.35a2.85 2.85 0 0 0 2.85 2.85h9.45a2.85 2.85 0 0 0 2.85-2.85V7.508h1.35a.75.75 0 0 0 0-1.5h-1.989A.754.754 0 0 0 18.825 6zM5.925 7.508V19.35a1.35 1.35 0 0 0 1.35 1.35h9.45a1.35 1.35 0 0 0 1.35-1.35V7.508z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-rotate' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M13.5.4 12 2l1.5 1.6M12.023 2H14.4A3.6 3.6 0 0 1 18 5.6V8M4 17h9a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-sad' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 17c4.418-4 11.582-4 16 0M16.5 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-11 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-saturation' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='apuc-icon-id__a' x1='10.001' y1='1' x2='10.001' y2='19' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs><circle cx='10.001' cy='10' r='9' transform='rotate(90 10 10)' fill='url(#apuc-icon-id__a)'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-select' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='m7 10 5 5 5-5H7Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-slider' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M0 10h11m0 0a2 2 0 1 0 4 0m-4 0a2 2 0 1 1 4 0m0 0h5'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-tuning' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M8 10h11M1 10h4M1 4.5h11m3 0h4m-18 11h11m3 0h4m-7-11a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0M5 10a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0m7 5.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-upload' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M11.501.392a.75.75 0 0 1 .998 0l6.704 5.972a.75.75 0 0 1-.998 1.12l-5.455-4.86v13.439a.75.75 0 0 1-1.5 0V2.625l-5.454 4.86a.75.75 0 1 1-.998-1.12zM.857 16.73a.75.75 0 0 1 .75.75v4.914h20.786v-4.914a.75.75 0 0 1 1.5 0v5.664a.75.75 0 0 1-.75.75H.857a.75.75 0 0 1-.75-.75v-5.664a.75.75 0 0 1 .75-.75z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-upload-error' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-url' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M19.11 3.67c-1.71-1.709-4.578-1.682-6.408.148l-2.22 2.22a.75.75 0 0 1-1.062-1.06l2.222-2.221C14.018.381 17.836.276 20.17 2.61l1.22 1.22c2.335 2.334 2.23 6.153-.147 8.529l-2.22 2.22a.75.75 0 0 1-1.062-1.06l2.222-2.221c1.83-1.83 1.856-4.698.147-6.408zm-3.36 4.58a.75.75 0 0 1 0 1.06l-6.439 6.44a.75.75 0 0 1-1.06-1.06l6.439-6.44a.75.75 0 0 1 1.06 0zM6.04 9.42a.75.75 0 0 1 0 1.061l-2.222 2.222c-1.83 1.83-1.856 4.698-.147 6.407l1.22 1.22c1.71 1.71 4.578 1.683 6.408-.147l2.221-2.221a.75.75 0 1 1 1.06 1.06l-2.22 2.222c-2.377 2.376-6.195 2.481-8.53.147l-1.22-1.22c-2.334-2.334-2.228-6.153.148-8.53l2.221-2.22a.75.75 0 0 1 1.06 0z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-vibrance' xmlns='http://www.w3.org/2000/svg'><path d='M2.125 5.64A8.96 8.96 0 0 0 1.001 10a8.96 8.96 0 0 0 1.124 4.36V5.64z' fill='url(#asuc-icon-id__a)'/><path d='M2.875 15.499V4.502a9.053 9.053 0 0 1 1.75-1.72v14.437a9.05 9.05 0 0 1-1.75-1.72z' fill='url(#asuc-icon-id__b)'/><path d='M5.375 17.722c.548.33 1.134.601 1.75.809V1.469a8.956 8.956 0 0 0-1.75.81v15.443z' fill='url(#asuc-icon-id__c)'/><path d='M7.875 1.253v17.495c.564.136 1.15.22 1.75.244V1.008a9 9 0 0 0-1.75.245z' fill='url(#asuc-icon-id__d)'/><path d='M10.375 1.008v17.984a9 9 0 0 0 1.75-.244V1.252a9 9 0 0 0-1.75-.244z' fill='url(#asuc-icon-id__e)'/><path d='M12.875 1.469V18.53a8.957 8.957 0 0 0 1.75-.808V2.277a8.957 8.957 0 0 0-1.75-.808z' fill='url(#asuc-icon-id__f)'/><path d='M15.375 2.78v14.44a9.053 9.053 0 0 0 1.75-1.72v-11a9.054 9.054 0 0 0-1.75-1.72z' fill='url(#asuc-icon-id__g)'/><path d='M17.875 5.638v8.724A8.959 8.959 0 0 0 19.001 10a8.96 8.96 0 0 0-1.126-4.362z' fill='url(#asuc-icon-id__h)'/><defs><linearGradient id='asuc-icon-id__a' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='asuc-icon-id__b' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='asuc-icon-id__c' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='asuc-icon-id__d' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='asuc-icon-id__e' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='asuc-icon-id__f' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='asuc-icon-id__g' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='asuc-icon-id__h' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs></symbol><symbol viewBox='0 0 24 24' id='uc-icon-vk' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' fill-rule='evenodd' d='M6.341 3.27a10.5 10.5 0 0 1 5.834-1.77.75.75 0 0 0 0-1.5 12 12 0 1 0 12 12 .75.75 0 0 0-1.5 0A10.5 10.5 0 1 1 6.34 3.27Zm14.145 1.48a.75.75 0 1 0-1.06-1.062L9.925 13.19V7.95a.75.75 0 1 0-1.5 0V15c0 .414.336.75.75.75h7.05a.75.75 0 0 0 0-1.5h-5.24l9.501-9.5Z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-warmth' xmlns='http://www.w3.org/2000/svg'><path d='m7.5 13.05.429.42.171-.175v-.244h-.6zm5 0h-.6v.245l.172.175.428-.42zM8.1 3.5c0-1.05.85-1.9 1.9-1.9V.4a3.1 3.1 0 0 0-3.1 3.1h1.2zm0 9.55V3.5H6.9v9.55h1.2zm-1 2.45c0-.79.315-1.506.829-2.03l-.858-.84A4.088 4.088 0 0 0 5.9 15.5h1.2zm2.9 2.9a2.9 2.9 0 0 1-2.9-2.9H5.9a4.1 4.1 0 0 0 4.1 4.1v-1.2zm2.9-2.9a2.9 2.9 0 0 1-2.9 2.9v1.2a4.1 4.1 0 0 0 4.1-4.1h-1.2zm-.829-2.03c.514.524.829 1.24.829 2.03h1.2c0-1.117-.447-2.13-1.171-2.87l-.858.84zM11.9 3.5v9.55h1.2V3.5h-1.2zM10 1.6c1.05 0 1.9.85 1.9 1.9h1.2A3.1 3.1 0 0 0 10 .4v1.2z' fill='currentColor'/><path d='M10 14V8' stroke='currentColor' stroke-width='1.2' stroke-linecap='round'/><path d='M14 3h3m-3 3h3m-3 3h3m-8 6.5a1 1 0 1 0 2 0 1 1 0 1 0-2 0' stroke='currentColor' stroke-width='1.2'/></symbol></svg>";
diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css
index fc711339c..0673d3ad4 100644
--- a/blocks/themes/lr-basic/theme.css
+++ b/blocks/themes/lr-basic/theme.css
@@ -1,181 +1,232 @@
-:where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular) {
-  /* Base values */
-
-  --darkmode: 0;
-
-  --h-foreground: 208;
-  --s-foreground: 4%;
-  --l-foreground: calc(10% + 78% * var(--darkmode));
-
-  --h-background: 208;
-  --s-background: 4%;
-  --l-background: calc(97% - 85% * var(--darkmode));
-
-  --h-accent: 211;
-  --s-accent: 100%;
-  --l-accent: calc(50% - 5% * var(--darkmode));
-
-  --h-confirm: 137;
-  --s-confirm: 85%;
-  --l-confirm: 53%;
-
-  --h-error: 358;
-  --s-error: 100%;
-  --l-error: 66%;
-
-  --shadows: 1;
-
-  --h-shadow: 0;
-  --s-shadow: 0%;
-  --l-shadow: 0%;
-
-  --opacity-normal: 0.6;
-  --opacity-hover: 0.9;
-  --opacity-active: 1;
-
-  --ui-size: 32px;
-
-  --gap-min: 2px;
-  --gap-small: 4px;
-  --gap-mid: 10px;
-  --gap-max: 20px;
-  --gap-table: 0px;
-
-  --borders: 1;
-
-  --border-radius-element: 8px;
-  --border-radius-frame: 12px;
-  --border-radius-thumb: 6px;
-
-  --transition-duration: 0.2s;
-
-  --modal-max-w: 800px;
-  --modal-max-h: 600px;
-  --modal-normal-w: 430px;
-
-  /* Derivative values */
-
-  --darkmode-minus: calc(1 + var(--darkmode) * -2);
-
-  --clr-background: hsl(var(--h-background), var(--s-background), var(--l-background));
-  --clr-background-dark: hsl(
-    var(--h-background),
-    var(--s-background),
-    calc(var(--l-background) - 3% * var(--darkmode-minus))
-  );
-  --clr-background-light: hsl(
-    var(--h-background),
-    var(--s-background),
-    calc(var(--l-background) + 3% * var(--darkmode-minus))
-  );
-
-  --clr-accent: hsl(var(--h-accent), var(--s-accent), calc(var(--l-accent) + 15% * var(--darkmode)));
-  --clr-accent-light: hsla(var(--h-accent), var(--s-accent), var(--l-accent), 30%);
-  --clr-accent-lightest: hsla(var(--h-accent), var(--s-accent), var(--l-accent), 10%);
-  --clr-accent-light-opaque: hsl(var(--h-accent), var(--s-accent), calc(var(--l-accent) + 45% * var(--darkmode-minus)));
-  --clr-accent-lightest-opaque: hsl(
-    var(--h-accent),
-    var(--s-accent),
-    calc(var(--l-accent) + 47% * var(--darkmode-minus))
-  );
-
-  --clr-confirm: hsl(var(--h-confirm), var(--s-confirm), var(--l-confirm));
-
-  --clr-error: hsl(var(--h-error), var(--s-error), var(--l-error));
-  --clr-error-light: hsla(var(--h-error), var(--s-error), var(--l-error), 15%);
-  --clr-error-lightest: hsla(var(--h-error), var(--s-error), var(--l-error), 5%);
-  --clr-error-message-bgr: hsl(var(--h-error), var(--s-error), calc(var(--l-error) + 31% * var(--darkmode-minus)));
-
-  --clr-txt: hsl(var(--h-foreground), var(--s-foreground), var(--l-foreground));
-  --clr-txt-mid: hsl(var(--h-foreground), var(--s-foreground), calc(var(--l-foreground) + 20% * var(--darkmode-minus)));
-  --clr-txt-light: hsl(
-    var(--h-foreground),
-    var(--s-foreground),
-    calc(var(--l-foreground) + 30% * var(--darkmode-minus))
-  );
-  --clr-txt-lightest: hsl(
-    var(--h-foreground),
-    var(--s-foreground),
-    calc(var(--l-foreground) + 50% * var(--darkmode-minus))
-  );
-
-  --clr-shade-lv1: hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), 5%);
-  --clr-shade-lv2: hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), 8%);
-  --clr-shade-lv3: hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), 12%);
-
-  --clr-generic-file-icon: var(--clr-txt-lightest);
-
-  --border-light: 1px solid
-    hsla(
-      var(--h-foreground),
-      var(--s-foreground),
-      var(--l-foreground),
-      calc((0.1 - 0.05 * var(--darkmode)) * var(--borders))
-    );
-  --border-mid: 1px solid
-    hsla(
-      var(--h-foreground),
-      var(--s-foreground),
-      var(--l-foreground),
-      calc((0.2 - 0.1 * var(--darkmode)) * var(--borders))
-    );
-  --border-accent: 1px solid hsla(var(--h-accent), var(--s-accent), var(--l-accent), 1 * var(--borders));
-  --border-dashed: 1px dashed
-    hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), calc(0.2 * var(--borders)));
-
-  --clr-curtain: hsla(var(--h-background), var(--s-background), calc(var(--l-background)), 60%);
-
-  --hsl-shadow: var(--h-shadow), var(--s-shadow), var(--l-shadow);
-
-  --modal-shadow: 0px 0px 1px hsla(var(--hsl-shadow), calc((0.3 + 0.65 * var(--darkmode)) * var(--shadows))),
-    0px 6px 20px hsla(var(--hsl-shadow), calc((0.1 + 0.4 * var(--darkmode)) * var(--shadows)));
-
-  --clr-btn-bgr-primary: var(--clr-accent);
-  --clr-btn-bgr-primary-hover: hsl(
-    var(--h-accent),
-    var(--s-accent),
-    calc(var(--l-accent) - 4% * var(--darkmode-minus))
-  );
-  --clr-btn-bgr-primary-active: hsl(
-    var(--h-accent),
-    var(--s-accent),
-    calc(var(--l-accent) - 8% * var(--darkmode-minus))
-  );
-  --clr-btn-txt-primary: hsl(var(--h-accent), var(--s-accent), 98%);
-  --shadow-btn-primary: none;
+:where([lr-wgt-common]) {
+  /* Font */
+  --uc-font-family: system-ui;
+  --uc-font-size: 14px;
+  --uc-line-height: normal;
+  --uc-simple-btn-font-family: system-ui;
+  --uc-simple-btn-font-size: 14px;
+
+  /* Sizes */
+  --uc-button-size: 32px;
+  --uc-preview-size: 32px;
+  --uc-padding: 10px;
+  --uc-radius: 8px;
+  --uc-transition: 0.2s ease;
+  --uc-dialog-width: 430px;
+  --uc-dialog-max-width: 800px;
+  --uc-dialog-max-height: 600px;
+  --uc-simple-btn-padding: 7px 14px;
+
+  /* Default colors, in case of media query failure */
+  --uc-background: var(--uc-background-light);
+  --uc-foreground: var(--uc-foreground-light);
+  --uc-primary: var(--uc-primary-light);
+  --uc-primary-hover: var(--uc-primary-hover-light);
+  --uc-primary-transparent: var(--uc-primary-transparent-light);
+  --uc-primary-foreground: var(--uc-primary-foreground-light);
+  --uc-secondary: var(--uc-secondary-light);
+  --uc-secondary-hover: var(--uc-secondary-hover-light);
+  --uc-secondary-foreground: var(--uc-secondary-foreground-light);
+  --uc-muted: var(--uc-muted-light);
+  --uc-muted-foreground: var(--uc-muted-foreground-light);
+  --uc-destructive: var(--uc-destructive-light);
+  --uc-destructive-foreground: var(--uc-destructive-foreground-light);
+  --uc-border: var(--uc-border-light);
+  --uc-dialog-shadow: var(--uc-dialog-shadow-light);
+  --uc-simple-btn: var(--uc-simple-btn-light);
+  --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
+  --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
+}
 
-  --clr-btn-bgr-secondary: hsl(
-    var(--h-background),
-    var(--s-background),
-    calc(var(--l-background) - 3% * var(--darkmode-minus))
-  );
-  --clr-btn-bgr-secondary-hover: hsl(
-    var(--h-background),
-    var(--s-background),
-    calc(var(--l-background) - 7% * var(--darkmode-minus))
-  );
-  --clr-btn-bgr-secondary-active: hsl(
-    var(--h-background),
-    var(--s-background),
-    calc(var(--l-background) - 12% * var(--darkmode-minus))
-  );
-  --clr-btn-txt-secondary: var(--clr-txt-mid);
-  --shadow-btn-secondary: none;
+@supports not (color: oklch(0% 0 0)) {
+  :where([lr-wgt-common]) {
+    /* Light colors RGB fallback */
+    --uc-primary-rgb-light: 54 112 253;
+    --uc-primary-light: rgb(var(--uc-primary-rgb-light));
+    --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
+    --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
+    --uc-background-light: rgb(255 255 255);
+    --uc-foreground-light: rgb(24 24 24);
+    --uc-primary-foreground-light: #fff;
+    --uc-secondary-light: rgb(24 24 24 / 5%);
+    --uc-secondary-hover-light: rgb(24 24 24 / 8%);
+    --uc-secondary-foreground-light: rgb(24 24 24);
+    --uc-muted-light: rgb(245 245 245);
+    --uc-muted-foreground-light: rgb(113 113 113);
+    --uc-destructive-light: rgb(232 19 20 / 5%);
+    --uc-destructive-foreground-light: rgb(232 19 20);
+    --uc-border-light: rgb(228 228 232);
+    --uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%);
+    --uc-simple-btn-light: rgb(235 235 235);
+    --uc-simple-btn-hover-light: rgb(228 228 228);
+    --uc-simple-btn-foreground-light: rgb(24 24 24);
+
+    /* Dark colors RGB fallback */
+    --uc-primary-rgb-dark: 87 154 255;
+    --uc-primary-dark: rgb(var(--uc-primary-rgb-dark));
+    --uc-primary-hover-dark: rgb(var(--uc-primary-rgb-dark) / 90%);
+    --uc-primary-transparent-dark: rgb(var(--uc-primary-rgb-dark) / 7%);
+    --uc-background-dark: rgb(27 27 27);
+    --uc-foreground-dark: rgb(225 225 225);
+    --uc-primary-foreground-dark: rgb(0 0 0);
+    --uc-secondary-dark: rgb(225 225 225 / 7%);
+    --uc-secondary-hover-dark: rgb(225 225 225 / 10%);
+    --uc-secondary-foreground-dark: rgb(225 225 225);
+    --uc-muted-dark: rgb(36 36 36);
+    --uc-muted-foreground-dark: rgb(152 152 152);
+    --uc-destructive-dark: rgb(244 90 79 / 10%);
+    --uc-destructive-foreground-dark: rgb(244 90 79);
+    --uc-border-dark: rgb(61 61 61);
+    --uc-dialog-shadow-dark: 0px 6px 20px rgb(0 0 0 / 25%);
+    --uc-simple-btn-dark: rgb(36 36 36);
+    --uc-simple-btn-hover-dark: rgb(43 43 43);
+    --uc-simple-btn-foreground-dark: rgb(255 255 255);
+  }
+}
 
-  --clr-btn-bgr-disabled: var(--clr-background);
-  --clr-btn-txt-disabled: var(--clr-txt-lightest);
-  --shadow-btn-disabled: none;
+@supports (color: oklch(0% 0 0)) {
+  :where([lr-wgt-common]) {
+    /* Light colors OKLCH */
+    --uc-primary-oklch-light: 59% 0.22 264; /* Quick customization: change this value to your brand color */
+    --uc-primary-light: oklch(var(--uc-primary-oklch-light));
+    --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
+    --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 10%);
+    --uc-background-light: oklch(100% 0 0);
+    --uc-foreground-light: oklch(21% 0 0);
+    --uc-primary-foreground-light: oklch(100% 0 0);
+    --uc-secondary-light: oklch(21% 0 0 / 0.05);
+    --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
+    --uc-secondary-foreground-light: oklch(21% 0 0);
+    --uc-muted-light: oklch(97% 0 0);
+    --uc-muted-foreground-light: oklch(55% 0 0);
+    --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
+    --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
+    --uc-border-light: oklch(92% 0 0);
+    --uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / 0.1);
+    --uc-simple-btn-light: oklch(94% 0 0);
+    --uc-simple-btn-hover-light: oklch(92% 0 0);
+    --uc-simple-btn-foreground-light: oklch(20% 0 0);
+
+    /* Dark colors OKLCH */
+    --uc-primary-oklch-dark: 69% 0.1768 258.4; /* Quick customization: change this value to your brand color */
+    --uc-primary-dark: oklch(var(--uc-primary-oklch-dark));
+    --uc-primary-hover-dark: oklch(var(--uc-primary-oklch-dark) / 90%);
+    --uc-primary-transparent-dark: oklch(var(--uc-primary-oklch-dark) / 7%);
+    --uc-background-dark: oklch(22% 0 0);
+    --uc-foreground-dark: oklch(91% 0 0);
+    --uc-primary-foreground-dark: oklch(0% 0 0);
+    --uc-secondary-dark: oklch(91% 0 0 / 0.07);
+    --uc-secondary-hover-dark: oklch(91% 0 0 / 0.1);
+    --uc-secondary-foreground-dark: oklch(91% 0 0);
+    --uc-muted-dark: oklch(26% 0 0);
+    --uc-muted-foreground-dark: oklch(68% 0 0);
+    --uc-destructive-dark: oklch(67% 0.191 27.5 / 0.1);
+    --uc-destructive-foreground-dark: oklch(67% 0.191 27.5);
+    --uc-border-dark: oklch(36% 0 0);
+    --uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / 0.25);
+    --uc-simple-btn-dark: oklch(26% 0 0);
+    --uc-simple-btn-hover-dark: oklch(29% 0 0);
+    --uc-simple-btn-foreground-dark: oklch(100% 0 0);
+  }
 }
 
 @media only screen and (max-height: 600px) {
-  :where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular) {
-    --modal-max-h: 100%;
+  :where([lr-wgt-common]) {
+    --uc-dialog-max-height: 100%;
   }
 }
 
 @media only screen and (max-width: 430px) {
-  :where(.lr-wgt-theme, .lr-wgt-common, lr-file-uploader-minimal, lr-file-uploader-inline, lr-file-uploader-regular) {
-    --modal-max-w: 100vw;
-    --modal-max-h: var(--uploadcare-blocks-window-height);
+  :where([lr-wgt-common]) {
+    --uc-dialog-max-width: 100vw;
+    --uc-dialog-max-height: var(--uploadcare-blocks-window-height);
   }
 }
+
+@media (prefers-color-scheme: light) {
+  :where([lr-wgt-common]) {
+    --uc-background: var(--uc-background-light);
+    --uc-foreground: var(--uc-foreground-light);
+    --uc-primary: var(--uc-primary-light);
+    --uc-primary-hover: var(--uc-primary-hover-light);
+    --uc-primary-transparent: var(--uc-primary-transparent-light);
+    --uc-primary-foreground: var(--uc-primary-foreground-light);
+    --uc-secondary: var(--uc-secondary-light);
+    --uc-secondary-hover: var(--uc-secondary-hover-light);
+    --uc-secondary-foreground: var(--uc-secondary-foreground-light);
+    --uc-muted: var(--uc-muted-light);
+    --uc-muted-foreground: var(--uc-muted-foreground-light);
+    --uc-destructive: var(--uc-destructive-light);
+    --uc-destructive-foreground: var(--uc-destructive-foreground-light);
+    --uc-border: var(--uc-border-light);
+    --uc-dialog-shadow: var(--uc-dialog-shadow-light);
+    --uc-simple-btn: var(--uc-simple-btn-light);
+    --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
+    --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :where([lr-wgt-common]) {
+    --uc-background: var(--uc-background-dark);
+    --uc-foreground: var(--uc-foreground-dark);
+    --uc-primary: var(--uc-primary-dark);
+    --uc-primary-hover: var(--uc-primary-hover-dark);
+    --uc-primary-transparent: var(--uc-primary-transparent-dark);
+    --uc-primary-foreground: var(--uc-primary-foreground-dark);
+    --uc-secondary: var(--uc-secondary-dark);
+    --uc-secondary-hover: var(--uc-secondary-hover-dark);
+    --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
+    --uc-muted: var(--uc-muted-dark);
+    --uc-muted-foreground: var(--uc-muted-foreground-dark);
+    --uc-destructive: var(--uc-destructive-dark);
+    --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
+    --uc-border: var(--uc-border-dark);
+    --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
+    --uc-simple-btn: var(--uc-simple-btn-dark);
+    --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
+    --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
+  }
+}
+
+:where(.uc-light) {
+  --uc-background: var(--uc-background-light);
+  --uc-foreground: var(--uc-foreground-light);
+  --uc-primary: var(--uc-primary-light);
+  --uc-primary-hover: var(--uc-primary-hover-light);
+  --uc-primary-transparent: var(--uc-primary-transparent-light);
+  --uc-primary-foreground: var(--uc-primary-foreground-light);
+  --uc-secondary: var(--uc-secondary-light);
+  --uc-secondary-hover: var(--uc-secondary-hover-light);
+  --uc-secondary-foreground: var(--uc-secondary-foreground-light);
+  --uc-muted: var(--uc-muted-light);
+  --uc-muted-foreground: var(--uc-muted-foreground-light);
+  --uc-destructive: var(--uc-destructive-light);
+  --uc-destructive-foreground: var(--uc-destructive-foreground-light);
+  --uc-border: var(--uc-border-light);
+  --uc-dialog-shadow: var(--uc-dialog-shadow-light);
+  --uc-simple-btn: var(--uc-simple-btn-light);
+  --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
+  --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
+}
+
+:where(.uc-dark) {
+  --uc-background: var(--uc-background-dark);
+  --uc-foreground: var(--uc-foreground-dark);
+  --uc-primary: var(--uc-primary-dark);
+  --uc-primary-hover: var(--uc-primary-hover-dark);
+  --uc-primary-transparent: var(--uc-primary-transparent-dark);
+  --uc-primary-foreground: var(--uc-primary-foreground-dark);
+  --uc-secondary: var(--uc-secondary-dark);
+  --uc-secondary-hover: var(--uc-secondary-hover-dark);
+  --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
+  --uc-muted: var(--uc-muted-dark);
+  --uc-muted-foreground: var(--uc-muted-foreground-dark);
+  --uc-destructive: var(--uc-destructive-dark);
+  --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
+  --uc-border: var(--uc-border-dark);
+  --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
+  --uc-simple-btn: var(--uc-simple-btn-dark);
+  --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
+  --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
+}
diff --git a/build-svg-sprite.js b/build-svg-sprite.js
index 64d3580f1..36d2e1f1c 100644
--- a/build-svg-sprite.js
+++ b/build-svg-sprite.js
@@ -69,7 +69,9 @@ DATA.forEach((item) => {
         throw error;
       }
 
-      const jsTemplate = `export default "${result.symbol.sprite.contents.toString().replace(/\"/g, "'")}";`;
+      const jsTemplate = `export default "${result.symbol.sprite.contents.toString().replace(/\"/g, "'")}";`
+        .trim()
+        .concat('\n');
 
       fs.writeFileSync(item.output, jsTemplate);
     });
diff --git a/demo/cloud-image-editor.html b/demo/cloud-image-editor.html
index cdffa5e61..811ebbe9a 100644
--- a/demo/cloud-image-editor.html
+++ b/demo/cloud-image-editor.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <base href="../../" />
 
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="stylesheet" href="./solutions/cloud-image-editor/index.css">
+  <link rel="stylesheet" href="./solutions/cloud-image-editor/index.css" />
   <script
     async=""
     src="https://cdn.skypack.dev/-/es-module-shims@v1.5.8-O0uWfhbenfjMbv6D3d8E/dist=es2020,mode=raw,min/dist/es-module-shims.js"
@@ -13,7 +13,8 @@
       "imports": {
         "@symbiotejs/symbiote": "./node_modules/@symbiotejs/symbiote/build/symbiote.js",
         "@uploadcare/upload-client": "./node_modules/@uploadcare/upload-client/dist/esm/index.browser.mjs",
-        "@uploadcare/image-shrink": "./node_modules/@uploadcare/image-shrink/dist/esm/index.browser.mjs"
+        "@uploadcare/image-shrink": "./node_modules/@uploadcare/image-shrink/dist/esm/index.browser.mjs",
+        "keyux": "./node_modules/keyux/index.js"
       }
     }
   </script>
@@ -24,13 +25,20 @@
     LR.defineLocale('ru', () => import('./locales/file-uploader/ru.js').then((m) => m.default));
   </script>
   <style>
-    lr-cloud-image-editor {
+    .lr-cloud-image-editor {
       width: 100vw;
       height: 100vh;
     }
+    body {
+      margin: 0;
+    }
   </style>
 </head>
 
-
 <lr-config ctx-name="my-editor" pubkey="demopublickey" locale-name="ru"></lr-config>
-<lr-cloud-image-editor uuid="f4dc9ebc-ed6d-4b4d-83d1-863bf1e4bb7f" ctx-name="my-editor" tabs="tuning,filters,crop"></lr-cloud-image-editor>
+<lr-cloud-image-editor
+  uuid="f4dc9ebc-ed6d-4b4d-83d1-863bf1e4bb7f"
+  ctx-name="my-editor"
+  tabs="tuning,filters,crop"
+  class="uc-light"
+></lr-cloud-image-editor>
diff --git a/demo/form.html b/demo/form.html
index 090432cff..15d42b2e1 100644
--- a/demo/form.html
+++ b/demo/form.html
@@ -30,15 +30,16 @@
   </script>
 </head>
 
-<lr-config ctx-name="my-uploader" pubkey="demopublickey" multiple-min="1" multiple-max="10" img-only></lr-config>
+<lr-config ctx-name="my-uploader" pubkey="demopublickey" multiple-min="1" multiple-max="10" img-only group-output></lr-config>
+<lr-file-uploader-regular headless class="uc-light" ctx-name="my-uploader">
+  <lr-form-input
+    style="position: absolute; bottom: 0px; left: 50%; pointer-events: none;"
+    ctx-name="my-uploader"
+  ></lr-form-input>
+</lr-file-uploader-regular>
 
 <form>
-  <lr-file-uploader-regular style="position: relative; display: inline-block;" ctx-name="my-uploader">
-    <lr-form-input
-      style="position: absolute; bottom: 0px; left: 50%; pointer-events: none;"
-      ctx-name="my-uploader"
-    ></lr-form-input>
-  </lr-file-uploader-regular>
+  <lr-simple-btn ctx-name="my-uploader" lr-wgt-common class="uc-light"></lr-simple-btn>
   <br />
   <br />
   <button type="submit">Submit</button>
diff --git a/demo/inline-mode.html b/demo/inline-mode.html
deleted file mode 100644
index 66a71b121..000000000
--- a/demo/inline-mode.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<base href="../../" />
-
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<style>
-  @import url(./blocks/themes/lr-basic/index.css);
-  .lr-wgt-common {
-    --ctx-name: 'my-uploader';
-    --cfg-pubkey: 'demopublickey';
-    --darkmode: 0;
-  }
-</style>
-<script src="./blocks/index.js" type="module"></script>
-
-<style>
-  .uploader {
-    display: grid;
-    grid-template-rows: min-content 400px min-content;
-    margin: 40px;
-    grid-gap: 20px;
-    width: 600px;
-  }
-
-  .header {
-    border: 1px solid black;
-    padding: 20px;
-    display: grid;
-    grid-gap: 20px;
-    grid-template-columns: min-content max-content;
-    align-items: center;
-  }
-
-  lr-inline {
-    border: 1px solid black;
-  }
-  .output {
-    border: 1px solid black;
-  }
-</style>
-
-<div class="uploader lr-wgt-common">
-  <lr-inline class="lr-wgt-common">
-    <lr-source-select>
-      <lr-source-list wrap></lr-source-list>
-      <lr-drop-area></lr-drop-area>
-    </lr-source-select>
-    <lr-upload-list></lr-upload-list>
-    <lr-camera-source></lr-camera-source>
-    <lr-url-source></lr-url-source>
-    <lr-external-source></lr-external-source>
-    <lr-cloud-image-editor-activity></lr-cloud-image-editor-activity>
-  </lr-inline>
-</div>
-
-<lr-progress-bar-common class="lr-wgt-common"></lr-progress-bar-common>
diff --git a/demo/raw-build.html b/demo/raw-build.html
deleted file mode 100644
index 8a5f2099a..000000000
--- a/demo/raw-build.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<base href="../../" />
-
-<link rel="stylesheet" href="./solutions/file-uploader/regular/index.css">
-<style>
-  @import url(./blocks/themes/lr-basic/index.css);
-
-  .config {
-    --ctx-name: 'my-uploader';
-    --cfg-pubkey: 'demopublickey';
-    --darkmode: 0;
-  }
-</style>
-
-<script src="./web/blocks-browser.min.js" type="module"></script>
-
-<lr-file-uploader-regular class="config"></lr-file-uploader-regular>
diff --git a/demo/raw-inline.html b/demo/raw-inline.html
index c14256f9b..1c76c07ef 100644
--- a/demo/raw-inline.html
+++ b/demo/raw-inline.html
@@ -5,10 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" href="./solutions/file-uploader/inline/index.css">
   <style>
-    .config {
-      --ctx-name: 'my-uploader';
-      --cfg-pubkey: 'demopublickey';
-      --darkmode: 0;
+    @media (prefers-color-scheme: dark) {
+      body {
+        background-color: #121213;
+      }
     }
   </style>
   <script
@@ -20,7 +20,8 @@
       "imports": {
         "@symbiotejs/symbiote": "./node_modules/@symbiotejs/symbiote/build/symbiote.js",
         "@uploadcare/upload-client": "./node_modules/@uploadcare/upload-client/dist/esm/index.browser.mjs",
-        "@uploadcare/image-shrink": "./node_modules/@uploadcare/image-shrink/dist/esm/index.browser.mjs"
+        "@uploadcare/image-shrink": "./node_modules/@uploadcare/image-shrink/dist/esm/index.browser.mjs",
+        "keyux": "./node_modules/keyux/index.js"
       }
     }
   </script>
diff --git a/demo/raw-minimal.html b/demo/raw-minimal.html
index 215ad36bf..0d30c6652 100644
--- a/demo/raw-minimal.html
+++ b/demo/raw-minimal.html
@@ -4,6 +4,13 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" href="./solutions/file-uploader/minimal/index.css">
+  <style>
+    @media (prefers-color-scheme: dark) {
+      body {
+        background-color: #121213;
+      }
+    }
+  </style>
   <script
     async=""
     src="https://cdn.skypack.dev/-/es-module-shims@v1.5.8-O0uWfhbenfjMbv6D3d8E/dist=es2020,mode=raw,min/dist/es-module-shims.js"
@@ -13,7 +20,8 @@
       "imports": {
         "@symbiotejs/symbiote": "./node_modules/@symbiotejs/symbiote/build/symbiote.js",
         "@uploadcare/upload-client": "./node_modules/@uploadcare/upload-client/dist/esm/index.browser.mjs",
-        "@uploadcare/image-shrink": "./node_modules/@uploadcare/image-shrink/dist/esm/index.browser.mjs"
+        "@uploadcare/image-shrink": "./node_modules/@uploadcare/image-shrink/dist/esm/index.browser.mjs",
+        "keyux": "./node_modules/keyux/index.js"
       }
     }
   </script>
diff --git a/demo/raw-regular.html b/demo/raw-regular.html
index e5f6c4a84..cb6cc9539 100644
--- a/demo/raw-regular.html
+++ b/demo/raw-regular.html
@@ -4,6 +4,13 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" href="./solutions/file-uploader/regular/index.css">
+  <style>
+    @media (prefers-color-scheme: dark) {
+      body {
+        background-color: #121213;
+      }
+    }
+  </style>
   <script
     async=""
     src="https://cdn.skypack.dev/-/es-module-shims@v1.5.8-O0uWfhbenfjMbv6D3d8E/dist=es2020,mode=raw,min/dist/es-module-shims.js"
@@ -13,7 +20,8 @@
       "imports": {
         "@symbiotejs/symbiote": "./node_modules/@symbiotejs/symbiote/build/symbiote.js",
         "@uploadcare/upload-client": "./node_modules/@uploadcare/upload-client/dist/esm/index.browser.mjs",
-        "@uploadcare/image-shrink": "./node_modules/@uploadcare/image-shrink/dist/esm/index.browser.mjs"
+        "@uploadcare/image-shrink": "./node_modules/@uploadcare/image-shrink/dist/esm/index.browser.mjs",
+        "keyux": "./node_modules/keyux/index.js"
       }
     }
   </script>
diff --git a/env.js b/env.js
index fe31176d0..5627d1382 100644
--- a/env.js
+++ b/env.js
@@ -1,3 +1,3 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME = 'blocks';
-export const PACKAGE_VERSION = '0.43.0';
+export const PACKAGE_VERSION = '0.49.0';
diff --git a/index.js b/index.js
index 1ff9ae6d5..567a644dd 100644
--- a/index.js
+++ b/index.js
@@ -4,6 +4,7 @@ export { BaseComponent, Data, UID } from '@symbiotejs/symbiote';
 
 // Abstract:
 export { Block } from './abstract/Block.js';
+export { SolutionBlock } from './abstract/SolutionBlock.js';
 export { ActivityBlock } from './abstract/ActivityBlock.js';
 export { UploaderBlock } from './abstract/UploaderBlock.js';
 export { Config } from './blocks/Config/Config.js';
@@ -22,19 +23,14 @@ export { UploadList } from './blocks/UploadList/UploadList.js';
 export { UrlSource } from './blocks/UrlSource/UrlSource.js';
 export { CameraSource } from './blocks/CameraSource/CameraSource.js';
 export { UploadCtxProvider } from './blocks/UploadCtxProvider/UploadCtxProvider.js';
-export { ConfirmationDialog } from './blocks/ConfirmationDialog/ConfirmationDialog.js';
 export { ProgressBarCommon } from './blocks/ProgressBarCommon/ProgressBarCommon.js';
 export { ProgressBar } from './blocks/ProgressBar/ProgressBar.js';
-// export { EditableCanvas } from './blocks/EditableCanvas/EditableCanvas.js';
-export { FilePreview } from './blocks/FilePreview/FilePreview.js';
 export * from './blocks/CloudImageEditor/index.js';
 export { CloudImageEditorActivity } from './blocks/CloudImageEditorActivity/CloudImageEditorActivity.js';
 export { ExternalSource } from './blocks/ExternalSource/ExternalSource.js';
-export { Tabs } from './blocks/Tabs/Tabs.js';
 export { FormInput } from './blocks/FormInput/FormInput.js';
 export { ActivityHeader } from './blocks/ActivityHeader/ActivityHeader.js';
 export { Select } from './blocks/Select/Select.js';
-export { Video } from './blocks/Video/Video.js';
 export { Copyright } from './blocks/Copyright/Copyright.js';
 
 // Solutions:
diff --git a/locales/file-uploader/ar.js b/locales/file-uploader/ar.js
index afb6b6568..c66d40c07 100644
--- a/locales/file-uploader/ar.js
+++ b/locales/file-uploader/ar.js
@@ -108,4 +108,6 @@ export default {
   'images-only-accepted': 'يتم قبول ملفات الصور فقط.',
   'file-type-not-allowed': 'رفع هذه أنواع الملفات غير مسموح به.',
   'some-files-were-not-uploaded': 'لم يتم رفع بعض الملفات.',
+  'file-item-edit-button': 'زر التحرير',
+  'file-item-remove-button': 'زر الإزالة',
 };
diff --git a/locales/file-uploader/az.js b/locales/file-uploader/az.js
index 85458955c..ff03049fe 100644
--- a/locales/file-uploader/az.js
+++ b/locales/file-uploader/az.js
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': 'Yalnız şəkil faylları qəbul edilir.',
   'file-type-not-allowed': 'Bu fayl növlərinin yüklənməsinə icazə verilmir.',
   'some-files-were-not-uploaded': 'Bəzi fayllar yüklənmədi.',
+  'file-item-edit-button': 'Düzəliş düyməsi',
+  'file-item-remove-button': 'Sil düyməsi',
 };
diff --git a/locales/file-uploader/ca.js b/locales/file-uploader/ca.js
index aabba7237..47623d000 100644
--- a/locales/file-uploader/ca.js
+++ b/locales/file-uploader/ca.js
@@ -103,4 +103,6 @@ export default {
   'images-only-accepted': "Només s'accepten fitxers d'imatge.",
   'file-type-not-allowed': "No està permès pujar fitxers d'aquest tipus.",
   'some-files-were-not-uploaded': "Alguns fitxers no s'han pujat.",
+  'file-item-edit-button': "Botó d'edició",
+  'file-item-remove-button': 'Botó de supressió',
 };
diff --git a/locales/file-uploader/cs.js b/locales/file-uploader/cs.js
index 3b6a9df2d..3191d4973 100644
--- a/locales/file-uploader/cs.js
+++ b/locales/file-uploader/cs.js
@@ -105,4 +105,6 @@ export default {
   'images-only-accepted': 'Přijímány jsou pouze obrázkové soubory.',
   'file-type-not-allowed': 'Nahrávání těchto typů souborů není povoleno.',
   'some-files-were-not-uploaded': 'Některé soubory nebyly nahrány.',
+  'file-item-edit-button': 'Tlačítko upravit',
+  'file-item-remove-button': 'Tlačítko odstranit',
 };
diff --git a/locales/file-uploader/da.js b/locales/file-uploader/da.js
index b751b580d..bacde66df 100644
--- a/locales/file-uploader/da.js
+++ b/locales/file-uploader/da.js
@@ -101,4 +101,6 @@ export default {
   'images-only-accepted': 'Kun billedfiler accepteres.',
   'file-type-not-allowed': 'Upload af denne filtype er ikke tilladt.',
   'some-files-were-not-uploaded': 'Nogle filer blev ikke uploadet.',
+  'file-item-edit-button': 'Redigeringsknap',
+  'file-item-remove-button': 'Fjernknap',
 };
diff --git a/locales/file-uploader/de.js b/locales/file-uploader/de.js
index b8a18b6c0..ae74b0a43 100644
--- a/locales/file-uploader/de.js
+++ b/locales/file-uploader/de.js
@@ -102,4 +102,6 @@ export default {
   'images-only-accepted': 'Nur Bilddateien werden akzeptiert.',
   'file-type-not-allowed': 'Das Hochladen dieser Dateitypen ist nicht erlaubt.',
   'some-files-were-not-uploaded': 'Einige Dateien wurden nicht hochgeladen.',
+  'file-item-edit-button': 'Bearbeiten-Taste',
+  'file-item-remove-button': 'Entfernen-Taste',
 };
diff --git a/locales/file-uploader/el.js b/locales/file-uploader/el.js
index ad4bb0f27..1efa060b8 100644
--- a/locales/file-uploader/el.js
+++ b/locales/file-uploader/el.js
@@ -102,4 +102,6 @@ export default {
   'images-only-accepted': 'Επιτρέπονται μόνο αρχεία εικόνων.',
   'file-type-not-allowed': 'Η μεταφόρτωση αυτών των τύπων αρχείων δεν επιτρέπεται.',
   'some-files-were-not-uploaded': 'Κάποια αρχεία δεν μεταφορτώθηκαν.',
+  'file-item-edit-button': 'Κουμπί επεξεργασίας',
+  'file-item-remove-button': 'Κουμπί αφαίρεσης',
 };
diff --git a/locales/file-uploader/en.js b/locales/file-uploader/en.js
index 34b12595e..a3ea59e09 100644
--- a/locales/file-uploader/en.js
+++ b/locales/file-uploader/en.js
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': 'Only image files are accepted.',
   'file-type-not-allowed': 'Uploading of these file types is not allowed.',
   'some-files-were-not-uploaded': 'Some files were not uploaded.',
+  'file-item-edit-button': 'Edit button',
+  'file-item-remove-button': 'Remove button',
 };
diff --git a/locales/file-uploader/es.js b/locales/file-uploader/es.js
index 97710287e..1165729f4 100644
--- a/locales/file-uploader/es.js
+++ b/locales/file-uploader/es.js
@@ -103,4 +103,6 @@ export default {
   'images-only-accepted': 'Solo se aceptan archivos de imagen.',
   'file-type-not-allowed': 'No se permite la subida de estos tipos de archivos.',
   'some-files-were-not-uploaded': 'Algunos archivos no fueron subidos.',
+  'file-item-edit-button': 'Botón de edición',
+  'file-item-remove-button': 'Botón de eliminación',
 };
diff --git a/locales/file-uploader/et.js b/locales/file-uploader/et.js
index 810c8df46..591d774f7 100644
--- a/locales/file-uploader/et.js
+++ b/locales/file-uploader/et.js
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': 'Aktsepteeritud on ainult pildifailid.',
   'file-type-not-allowed': 'Nende failitüüpide üleslaadimine pole lubatud.',
   'some-files-were-not-uploaded': 'Mõned failid ei laetud üles.',
+  'file-item-edit-button': 'Muuda nupp',
+  'file-item-remove-button': 'Eemalda nupp',
 };
diff --git a/locales/file-uploader/fr.js b/locales/file-uploader/fr.js
index b7962eaf6..b25224a41 100644
--- a/locales/file-uploader/fr.js
+++ b/locales/file-uploader/fr.js
@@ -103,4 +103,6 @@ export default {
   'images-only-accepted': 'Seuls les fichiers image sont acceptés.',
   'file-type-not-allowed': "Le téléchargement de ces types de fichiers n'est pas autorisé.",
   'some-files-were-not-uploaded': "Certains fichiers n'ont pas été téléchargés.",
+  'file-item-edit-button': "Bouton d'édition",
+  'file-item-remove-button': 'Bouton de suppression',
 };
diff --git a/locales/file-uploader/he.js b/locales/file-uploader/he.js
index 472b5db82..cd0cd44a3 100644
--- a/locales/file-uploader/he.js
+++ b/locales/file-uploader/he.js
@@ -102,4 +102,6 @@ export default {
   'images-only-accepted': 'מתקבלים רק קבצי תמונות.',
   'file-type-not-allowed': 'העלאת סוגי קבצים אלו אינה מורשית.',
   'some-files-were-not-uploaded': 'חלק מהקבצים לא הועלו.',
+  'file-item-edit-button': 'כפתור עריכה',
+  'file-item-remove-button': 'כפתור הסרה',
 };
diff --git a/locales/file-uploader/hy.js b/locales/file-uploader/hy.js
index 65cc725a8..a67b827e5 100644
--- a/locales/file-uploader/hy.js
+++ b/locales/file-uploader/hy.js
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': 'Միայն պատկերային ֆայլերը ընդունվում են։',
   'file-type-not-allowed': 'Այս ֆայլի տեսակների բեռնումը թույլատրված չէ։',
   'some-files-were-not-uploaded': 'Որոշ ֆայլեր բեռնված չեն։',
+  'file-item-edit-button': 'Խմբագրել կոճակը',
+  'file-item-remove-button': 'Հեռացման կոճակը',
 };
diff --git a/locales/file-uploader/is.js b/locales/file-uploader/is.js
index 5bbd9e842..bfa5080d3 100644
--- a/locales/file-uploader/is.js
+++ b/locales/file-uploader/is.js
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': 'Aðeins myndaskrár eru samþykktar.',
   'file-type-not-allowed': 'Ekki er leyft að hlaða upp þessum skráartegundum.',
   'some-files-were-not-uploaded': 'Sumar skrár voru ekki hlaðnar upp.',
+  'file-item-edit-button': 'Breyta hnappur',
+  'file-item-remove-button': 'Fjarlægja hnappur',
 };
diff --git a/locales/file-uploader/it.js b/locales/file-uploader/it.js
index bc2dfca02..5077ef43b 100644
--- a/locales/file-uploader/it.js
+++ b/locales/file-uploader/it.js
@@ -103,4 +103,6 @@ export default {
   'images-only-accepted': 'Sono accettati solo file immagine.',
   'file-type-not-allowed': 'Il caricamento di questo tipo di file non è permesso.',
   'some-files-were-not-uploaded': 'Alcuni file non sono stati caricati.',
+  'file-item-edit-button': 'Pulsante di modifica',
+  'file-item-remove-button': 'Pulsante di rimozione',
 };
diff --git a/locales/file-uploader/ja.js b/locales/file-uploader/ja.js
index a37be2096..497a1c3b1 100644
--- a/locales/file-uploader/ja.js
+++ b/locales/file-uploader/ja.js
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': '画像ファイルのみ受け付けます。',
   'file-type-not-allowed': 'このファイルタイプのアップロードは許可されていません。',
   'some-files-were-not-uploaded': '一部のファイルはアップロードされませんでした。',
+  'file-item-edit-button': '編集ボタン',
+  'file-item-remove-button': '削除ボタン',
 };
diff --git a/locales/file-uploader/ka.js b/locales/file-uploader/ka.js
index d0ea2e4b0..5d5e64b20 100644
--- a/locales/file-uploader/ka.js
+++ b/locales/file-uploader/ka.js
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': 'მხოლოდ სურათის ფაილები იღება.',
   'file-type-not-allowed': 'ამ ფაილის ტიპების ატვირთვა არ არის დასაშვები.',
   'some-files-were-not-uploaded': 'ზოგიერთი ფაილი არ ატვირთულა.',
+  'file-item-edit-button': 'რედაქტირების ღილაკი',
+  'file-item-remove-button': 'წაშლის ღილაკი',
 };
diff --git a/locales/file-uploader/kk.js b/locales/file-uploader/kk.js
index d46b9d54e..c73b45f6a 100644
--- a/locales/file-uploader/kk.js
+++ b/locales/file-uploader/kk.js
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': 'Тек сурет файлдары қабылданады.',
   'file-type-not-allowed': 'Осы файл түрлерін жүктеуге рұқсат етілмейді.',
   'some-files-were-not-uploaded': 'Кейбір файлдар жүктелген жоқ.',
+  'file-item-edit-button': 'Өңдеу түймесі',
+  'file-item-remove-button': 'Жою түймесі',
 };
diff --git a/locales/file-uploader/ko.js b/locales/file-uploader/ko.js
index 6a32ddb83..f4ad486ae 100644
--- a/locales/file-uploader/ko.js
+++ b/locales/file-uploader/ko.js
@@ -99,4 +99,6 @@ export default {
   'images-only-accepted': '이미지 파일만 허용됩니다.',
   'file-type-not-allowed': '이 파일 유형의 업로드가 허용되지 않습니다.',
   'some-files-were-not-uploaded': '일부 파일이 업로드되지 않았습니다.',
+  'file-item-edit-button': '편집 버튼',
+  'file-item-remove-button': '제거 버튼',
 };
diff --git a/locales/file-uploader/lv.js b/locales/file-uploader/lv.js
index 466540a2d..55aa64ccb 100644
--- a/locales/file-uploader/lv.js
+++ b/locales/file-uploader/lv.js
@@ -102,4 +102,6 @@ export default {
   'images-only-accepted': 'Tiek pieņemti tikai attēlu faili.',
   'file-type-not-allowed': 'Šāda tipa failu augšupielāde nav atļauta.',
   'some-files-were-not-uploaded': 'Daži faili netika augšupielādēti.',
+  'file-item-edit-button': 'Rediģēšanas poga',
+  'file-item-remove-button': 'Noņemšanas poga',
 };
diff --git a/locales/file-uploader/nb.js b/locales/file-uploader/nb.js
index 1b5e0f454..07c621f2b 100644
--- a/locales/file-uploader/nb.js
+++ b/locales/file-uploader/nb.js
@@ -32,9 +32,9 @@ export default {
   'no-files': 'Ingen filer valgt',
   browse: 'Bla gjennom',
   'not-uploaded-yet': 'Ikke lastet opp ennå...',
-  file__one: 'fil', // Norwegian Bokmål uses 'one' for singular
-  file__other: 'filer', // and 'other' for plural
-  error__one: 'feil', // Similarly for errors
+  file__one: 'fil',
+  file__other: 'filer',
+  error__one: 'feil',
   error__other: 'feil',
   'header-uploading': 'Laster opp {{count}} {{plural:file(count)}}',
   'header-failed': '{{count}} {{plural:error(count)}}',
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': 'Kun bildefiler er akseptert.',
   'file-type-not-allowed': 'Opplasting av disse filtypene er ikke tillatt.',
   'some-files-were-not-uploaded': 'Noen filer ble ikke lastet opp.',
+  'file-item-edit-button': 'Redigeringsknapp',
+  'file-item-remove-button': 'Fjerningsknapp',
 };
diff --git a/locales/file-uploader/nl.js b/locales/file-uploader/nl.js
index 19274e316..8762c6bab 100644
--- a/locales/file-uploader/nl.js
+++ b/locales/file-uploader/nl.js
@@ -101,4 +101,6 @@ export default {
   'images-only-accepted': 'Alleen afbeeldingsbestanden worden geaccepteerd.',
   'file-type-not-allowed': 'Dit bestandstype is niet toegestaan.',
   'some-files-were-not-uploaded': 'Sommige bestanden zijn niet geüpload.',
+  'file-item-edit-button': 'Bewerkknop',
+  'file-item-remove-button': 'Verwijderknop',
 };
diff --git a/locales/file-uploader/pl.js b/locales/file-uploader/pl.js
index ac7d5c7d0..82a82ca70 100644
--- a/locales/file-uploader/pl.js
+++ b/locales/file-uploader/pl.js
@@ -104,4 +104,6 @@ export default {
   'images-only-accepted': 'Akceptowane są tylko pliki obrazów.',
   'file-type-not-allowed': 'Przesyłanie tego typu plików jest niedozwolone.',
   'some-files-were-not-uploaded': 'Niektóre pliki nie zostały przesłane.',
+  'file-item-edit-button': 'Przycisk edycji',
+  'file-item-remove-button': 'Przycisk usuwania',
 };
diff --git a/locales/file-uploader/pt.js b/locales/file-uploader/pt.js
index bb7599d92..98f3b1c28 100644
--- a/locales/file-uploader/pt.js
+++ b/locales/file-uploader/pt.js
@@ -103,4 +103,6 @@ export default {
   'images-only-accepted': 'Apenas arquivos de imagem são aceitos.',
   'file-type-not-allowed': 'O upload desses tipos de arquivo não é permitido.',
   'some-files-were-not-uploaded': 'Alguns arquivos não foram carregados.',
+  'file-item-edit-button': 'Botão de edição',
+  'file-item-remove-button': 'Botão de remoção',
 };
diff --git a/locales/file-uploader/ro.js b/locales/file-uploader/ro.js
index f6394c727..e96fe363f 100644
--- a/locales/file-uploader/ro.js
+++ b/locales/file-uploader/ro.js
@@ -103,4 +103,6 @@ export default {
   'images-only-accepted': 'Doar fișierele de tip imagine sunt acceptate.',
   'file-type-not-allowed': 'Încărcarea acestor tipuri de fișiere nu este permisă.',
   'some-files-were-not-uploaded': 'Unele fișiere nu au fost încărcate.',
+  'file-item-edit-button': 'Buton de editare',
+  'file-item-remove-button': 'Buton de ștergere',
 };
diff --git a/locales/file-uploader/ru.js b/locales/file-uploader/ru.js
index 15c90ae40..7b8990660 100644
--- a/locales/file-uploader/ru.js
+++ b/locales/file-uploader/ru.js
@@ -104,4 +104,6 @@ export default {
   'images-only-accepted': 'Принимаются только изображения.',
   'file-type-not-allowed': 'Загрузка файлов этого типа не разрешена.',
   'some-files-were-not-uploaded': 'Некоторые файлы не были загружены.',
+  'file-item-edit-button': 'Кнопка редактирования',
+  'file-item-remove-button': 'Кнопка удаления',
 };
diff --git a/locales/file-uploader/sk.js b/locales/file-uploader/sk.js
index 5a6462761..5abfb7992 100644
--- a/locales/file-uploader/sk.js
+++ b/locales/file-uploader/sk.js
@@ -104,4 +104,6 @@ export default {
   'images-only-accepted': 'Sú akceptované len obrázkové súbory.',
   'file-type-not-allowed': 'Nahrávanie tohto typu súborov nie je povolené.',
   'some-files-were-not-uploaded': 'Niektoré súbory neboli nahrané.',
+  'file-item-edit-button': 'Tlačidlo upraviť',
+  'file-item-remove-button': 'Tlačidlo odstrániť',
 };
diff --git a/locales/file-uploader/sr.js b/locales/file-uploader/sr.js
index 22ceace26..5be5121f1 100644
--- a/locales/file-uploader/sr.js
+++ b/locales/file-uploader/sr.js
@@ -102,4 +102,6 @@ export default {
   'images-only-accepted': 'Прихваћене су само слике.',
   'file-type-not-allowed': 'Отпремање овог типа датотека није дозвољено.',
   'some-files-were-not-uploaded': 'Неке датотеке нису отпремљене.',
+  'file-item-edit-button': 'Дугме за уређивање',
+  'file-item-remove-button': 'Дугме за уклањање',
 };
diff --git a/locales/file-uploader/sv.js b/locales/file-uploader/sv.js
index bc4dbf66a..7b6e30fb3 100644
--- a/locales/file-uploader/sv.js
+++ b/locales/file-uploader/sv.js
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': 'Endast bildfiler accepteras.',
   'file-type-not-allowed': 'Uppladdning av dessa filtyper är inte tillåten.',
   'some-files-were-not-uploaded': 'Vissa filer laddades inte upp.',
+  'file-item-edit-button': 'Redigeringsknapp',
+  'file-item-remove-button': 'Raderingsknapp',
 };
diff --git a/locales/file-uploader/tr.js b/locales/file-uploader/tr.js
index fbdd71a00..ce99c5851 100644
--- a/locales/file-uploader/tr.js
+++ b/locales/file-uploader/tr.js
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': 'Yalnızca resim dosyaları kabul edilir.',
   'file-type-not-allowed': 'Bu dosya türlerinin yüklenmesine izin verilmiyor.',
   'some-files-were-not-uploaded': 'Bazı dosyalar yüklenemedi.',
+  'file-item-edit-button': 'Düzenle düğmesi',
+  'file-item-remove-button': 'Silme düğmesi',
 };
diff --git a/locales/file-uploader/uk.js b/locales/file-uploader/uk.js
index a9304357c..c78087cea 100644
--- a/locales/file-uploader/uk.js
+++ b/locales/file-uploader/uk.js
@@ -104,4 +104,6 @@ export default {
   'images-only-accepted': 'Приймаються тільки зображення.',
   'file-type-not-allowed': 'Завантаження файлів цього типу заборонено.',
   'some-files-were-not-uploaded': 'Деякі файли не були завантажені.',
+  'file-item-edit-button': 'Кнопка редагування',
+  'file-item-remove-button': 'Кнопка видалення',
 };
diff --git a/locales/file-uploader/vi.js b/locales/file-uploader/vi.js
index 3483dad35..6186b2ccf 100644
--- a/locales/file-uploader/vi.js
+++ b/locales/file-uploader/vi.js
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': 'Chỉ chấp nhận tệp ảnh.',
   'file-type-not-allowed': 'Không cho phép tải lên loại tệp này.',
   'some-files-were-not-uploaded': 'Một số tệp chưa được tải lên.',
+  'file-item-edit-button': 'Nút chỉnh sửa',
+  'file-item-remove-button': 'Nút xóa',
 };
diff --git a/locales/file-uploader/zh-TW.js b/locales/file-uploader/zh-TW.js
index 1fc1bd402..acf49ac60 100644
--- a/locales/file-uploader/zh-TW.js
+++ b/locales/file-uploader/zh-TW.js
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': '僅接受圖片檔案。',
   'file-type-not-allowed': '不允許上傳這些檔案類型。',
   'some-files-were-not-uploaded': '部分檔案未上傳。',
+  'file-item-edit-button': '編輯按鈕',
+  'file-item-remove-button': '刪除按鈕',
 };
diff --git a/locales/file-uploader/zh.js b/locales/file-uploader/zh.js
index d8ddb1a74..2199e6d3b 100644
--- a/locales/file-uploader/zh.js
+++ b/locales/file-uploader/zh.js
@@ -100,4 +100,6 @@ export default {
   'images-only-accepted': '只接受图像文件。',
   'file-type-not-allowed': '不允许上传这些文件类型。',
   'some-files-were-not-uploaded': '有些文件未上传。',
+  'file-item-edit-button': '編輯按鈕',
+  'file-item-remove-button': '刪除按鈕',
 };
diff --git a/package-lock.json b/package-lock.json
index 8b542d156..7c8dc4809 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,18 @@
 {
   "name": "@uploadcare/blocks",
-  "version": "0.43.0",
+  "version": "0.49.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@uploadcare/blocks",
-      "version": "0.43.0",
+      "version": "0.49.0",
       "license": "MIT",
       "dependencies": {
         "@symbiotejs/symbiote": "^1.11.7",
         "@uploadcare/image-shrink": "^6.14.1",
-        "@uploadcare/upload-client": "^6.14.1"
+        "@uploadcare/upload-client": "^6.14.1",
+        "keyux": "^0.7.1"
       },
       "devDependencies": {
         "@babel/eslint-parser": "^7.23.3",
@@ -8728,6 +8729,20 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/keyux": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/keyux/-/keyux-0.7.1.tgz",
+      "integrity": "sha512-4i0awjBLTiSMNyQluM5+yOQT1zjYe+iXA9lqb3fzBjAO9GxnVfscjaUHbBh8kvq9LmMnSD77K7MmLQJPt2n//w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -20891,6 +20906,11 @@
         "tsscmp": "1.0.6"
       }
     },
+    "keyux": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/keyux/-/keyux-0.7.1.tgz",
+      "integrity": "sha512-4i0awjBLTiSMNyQluM5+yOQT1zjYe+iXA9lqb3fzBjAO9GxnVfscjaUHbBh8kvq9LmMnSD77K7MmLQJPt2n//w=="
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
diff --git a/package.json b/package.json
index e246b8d2e..7d289edab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/blocks",
-  "version": "0.43.0",
+  "version": "0.49.0",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",
@@ -136,6 +136,7 @@
   "dependencies": {
     "@symbiotejs/symbiote": "^1.11.7",
     "@uploadcare/image-shrink": "^6.14.1",
-    "@uploadcare/upload-client": "^6.14.1"
+    "@uploadcare/upload-client": "^6.14.1",
+    "keyux": "^0.7.1"
   }
 }
diff --git a/solutions/cloud-image-editor/CloudImageEditor.js b/solutions/cloud-image-editor/CloudImageEditor.js
index 6c1522e90..2d155f19e 100644
--- a/solutions/cloud-image-editor/CloudImageEditor.js
+++ b/solutions/cloud-image-editor/CloudImageEditor.js
@@ -2,22 +2,11 @@
 import { CloudImageEditorBlock } from '../../blocks/CloudImageEditor/src/CloudImageEditorBlock.js';
 
 export class CloudImageEditor extends CloudImageEditorBlock {
+  static styleAttrs = [...super.styleAttrs, 'lr-wgt-common'];
+
   initCallback() {
     super.initCallback();
 
-    /** @private */
-    this.__shadowReady = true;
-
-    this.$['*faderEl'] = this.ref['fader-el'];
-    this.$['*cropperEl'] = this.ref['cropper-el'];
-    this.$['*imgContainerEl'] = this.ref['img-container-el'];
-
-    this.initEditor();
-  }
-
-  async initEditor() {
-    if (this.__shadowReady) {
-      await super.initEditor();
-    }
+    this.a11y?.registerBlock(this);
   }
 }
diff --git a/solutions/cloud-image-editor/index.css b/solutions/cloud-image-editor/index.css
index 120220c34..a195b8735 100644
--- a/solutions/cloud-image-editor/index.css
+++ b/solutions/cloud-image-editor/index.css
@@ -1 +1,2 @@
+@import url('../../blocks/themes/lr-basic/theme.css');
 @import url('../../blocks/CloudImageEditor/index.css');
diff --git a/solutions/file-uploader/inline/FileUploaderInline.js b/solutions/file-uploader/inline/FileUploaderInline.js
index def7a33b1..d337bd175 100644
--- a/solutions/file-uploader/inline/FileUploaderInline.js
+++ b/solutions/file-uploader/inline/FileUploaderInline.js
@@ -3,6 +3,8 @@ import { ActivityBlock } from '../../../abstract/ActivityBlock.js';
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
 
 export class FileUploaderInline extends SolutionBlock {
+  static styleAttrs = [...super.styleAttrs, 'lr-file-uploader-inline'];
+
   constructor() {
     super();
 
@@ -60,7 +62,7 @@ FileUploaderInline.template = /* HTML */ ` <lr-start-from>
     <button
       type="button"
       l10n="start-from-cancel"
-      class="cancel-btn secondary-btn"
+      class="uc-cancel-btn uc-secondary-btn"
       set="onclick: cancel; @hidden: !couldCancel"
     ></button>
     <lr-copyright></lr-copyright>
diff --git a/solutions/file-uploader/inline/index.css b/solutions/file-uploader/inline/index.css
index 483b908dd..cc7c30713 100644
--- a/solutions/file-uploader/inline/index.css
+++ b/solutions/file-uploader/inline/index.css
@@ -1,60 +1,54 @@
 @import url('../../../blocks/themes/lr-basic/index.css');
 
-.lr-file-uploader-inline lr-start-from,
-lr-file-uploader-inline lr-start-from {
+[lr-file-uploader-inline] lr-start-from {
   height: 100%;
   container-type: inline-size;
 }
 
-.lr-file-uploader-inline,
-lr-file-uploader-inline {
+[lr-file-uploader-inline] {
   --cfg-done-activity: 'start-from';
   --cfg-init-activity: 'start-from';
 
   flex: 1;
 }
 
-.lr-file-uploader-inline lr-activity-header::after,
-lr-file-uploader-inline lr-activity-header::after {
-  width: var(--ui-size);
-  height: var(--ui-size);
+[lr-file-uploader-inline] lr-activity-header::after {
+  width: var(--uc-button-size);
+  height: var(--uc-button-size);
   content: '';
 }
 
-.lr-file-uploader-inline close-btn,
-lr-file-uploader-inline lr-activity-header .close-btn {
+[lr-file-uploader-inline] lr-activity-header .uc-close-btn {
   display: none;
 }
 
+[lr-file-uploader-inline] lr-copyright .uc-credits {
+  position: static;
+}
+
 @container (min-width: 500px) {
-  .lr-file-uploader-inline lr-start-from .content,
-  lr-file-uploader-inline lr-start-from .content {
+  [lr-file-uploader-inline] lr-start-from .uc-content {
     grid-template-columns: 1fr max-content;
     height: 100%;
   }
 
-  .lr-file-uploader-inline lr-start-from lr-copyright,
-  lr-file-uploader-inline lr-start-from lr-copyright {
+  [lr-file-uploader-inline] lr-start-from lr-copyright {
     grid-column: 2;
   }
 
-  .lr-file-uploader-inline lr-start-from lr-drop-area,
-  lr-file-uploader-inline lr-start-from lr-drop-area {
+  [lr-file-uploader-inline] lr-start-from lr-drop-area {
     grid-row: span 3;
   }
 
-  .lr-file-uploader-inline lr-start-from:has(lr-copyright[hidden]) lr-drop-area,
-  lr-file-uploader-inline lr-start-from:has(lr-copyright[hidden]) lr-drop-area {
+  [lr-file-uploader-inline] lr-start-from:has(lr-copyright[hidden]) lr-drop-area {
     grid-row: span 2;
   }
 
-  .lr-file-uploader-inline lr-start-from:has(.cancel-btn[hidden]) lr-drop-area,
-  lr-file-uploader-inline lr-start-from:has(.cancel-btn[hidden]) lr-drop-area {
+  [lr-file-uploader-inline] lr-start-from:has(.uc-cancel-btn[hidden]) lr-drop-area {
     grid-row: span 2;
   }
 
-  .lr-file-uploader-inline lr-start-from:has(lr-copyright[hidden]):has(.cancel-btn[hidden]) lr-drop-area,
-  lr-file-uploader-inline lr-start-from:has(lr-copyright[hidden]):has(.cancel-btn[hidden]) lr-drop-area {
+  [lr-file-uploader-inline] lr-start-from:has(lr-copyright[hidden]):has(.uc-cancel-btn[hidden]) lr-drop-area {
     grid-row: span 1;
   }
 }
diff --git a/solutions/file-uploader/minimal/FileUploaderMinimal.js b/solutions/file-uploader/minimal/FileUploaderMinimal.js
index 74dbccf79..1402a1186 100644
--- a/solutions/file-uploader/minimal/FileUploaderMinimal.js
+++ b/solutions/file-uploader/minimal/FileUploaderMinimal.js
@@ -2,6 +2,8 @@ import { ActivityBlock } from '../../../abstract/ActivityBlock.js';
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
 
 export class FileUploaderMinimal extends SolutionBlock {
+  static styleAttrs = [...super.styleAttrs, 'lr-file-uploader-minimal'];
+
   initCallback() {
     super.initCallback();
 
@@ -37,7 +39,7 @@ export class FileUploaderMinimal extends SolutionBlock {
 
 FileUploaderMinimal.template = /* HTML */ `
   <lr-start-from>
-    <lr-drop-area clickable l10n="choose-file"></lr-drop-area>
+    <lr-drop-area tabindex="0" clickable l10n="choose-file"></lr-drop-area>
     <lr-copyright></lr-copyright>
   </lr-start-from>
   <lr-upload-list ref="uBlock"></lr-upload-list>
diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css
index 7c8ac5066..98976ff5b 100644
--- a/solutions/file-uploader/minimal/index.css
+++ b/solutions/file-uploader/minimal/index.css
@@ -16,27 +16,7 @@
 @import url('../../../blocks/Copyright/copyright.css');
 
 /* ICONS: */
-:where(.lr-wgt-icons, .lr-file-uploader-minimal, lr-file-uploader-minimal) {
-  --icon-arrow-down: 'm11.5009 23.0302c.2844.2533.7135.2533.9978 0l9.2899-8.2758c.3092-.2756.3366-.7496.0611-1.0589s-.7496-.3367-1.0589-.0612l-8.0417 7.1639v-19.26834c0-.41421-.3358-.749997-.75-.749997s-.75.335787-.75.749997v19.26704l-8.04025-7.1626c-.30928-.2755-.78337-.2481-1.05889.0612-.27553.3093-.24816.7833.06112 1.0589z';
-  --icon-default: 'm11.5014.392135c.2844-.253315.7134-.253315.9978 0l6.7037 5.971925c.3093.27552.3366.74961.0611 1.05889-.2755.30929-.7496.33666-1.0589.06113l-5.4553-4.85982v13.43864c0 .4142-.3358.75-.75.75s-.75-.3358-.75-.75v-13.43771l-5.45427 4.85889c-.30929.27553-.78337.24816-1.0589-.06113-.27553-.30928-.24816-.78337.06113-1.05889zm-10.644466 16.336765c.414216 0 .749996.3358.749996.75v4.9139h20.78567v-4.9139c0-.4142.3358-.75.75-.75.4143 0 .75.3358.75.75v5.6639c0 .4143-.3357.75-.75.75h-22.285666c-.414214 0-.75-.3357-.75-.75v-5.6639c0-.4142.335786-.75.75-.75z';
-  --icon-close: 'm4.60395 4.60395c.29289-.2929.76776-.2929 1.06066 0l6.33539 6.33535 6.3354-6.33535c.2929-.2929.7677-.2929 1.0606 0 .2929.29289.2929.76776 0 1.06066l-6.3353 6.33539 6.3353 6.3354c.2929.2929.2929.7677 0 1.0606s-.7677.2929-1.0606 0l-6.3354-6.3353-6.33539 6.3353c-.2929.2929-.76777.2929-1.06066 0-.2929-.2929-.2929-.7677 0-1.0606l6.33535-6.3354-6.33535-6.33539c-.2929-.2929-.2929-.76777 0-1.06066z';
-  --icon-info: 'M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z';
-  --icon-error: 'M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z';
-  --icon-remove: 'm6.35673 9.71429c-.76333 0-1.35856.66121-1.27865 1.42031l1.01504 9.6429c.06888.6543.62067 1.1511 1.27865 1.1511h9.25643c.658 0 1.2098-.4968 1.2787-1.1511l1.015-9.6429c.0799-.7591-.5153-1.42031-1.2786-1.42031zm.50041-4.5v.32142h-2.57143c-.71008 0-1.28571.57564-1.28571 1.28572s.57563 1.28571 1.28571 1.28571h15.42859c.7101 0 1.2857-.57563 1.2857-1.28571s-.5756-1.28572-1.2857-1.28572h-2.5714v-.32142c0-1.77521-1.4391-3.21429-3.2143-3.21429h-3.8572c-1.77517 0-3.21426 1.43908-3.21426 3.21429zm7.07146-.64286c.355 0 .6428.28782.6428.64286v.32142h-5.14283v-.32142c0-.35504.28782-.64286.64283-.64286z';
-  --icon-check: 'm12 22c5.5228 0 10-4.4772 10-10 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.5228 4.47715 10 10 10zm4.7071-11.4929-5.9071 5.9071-3.50711-3.5071c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.3906 1.02369-.3906 1.41422 0l2.09289 2.0929 4.4929-4.49294c.3905-.39052 1.0237-.39052 1.4142 0 .3905.39053.3905 1.02374 0 1.41424z';
-  --icon-remove-file: 'm11.9554 3.29999c-.7875 0-1.5427.31281-2.0995.86963-.49303.49303-.79476 1.14159-.85742 1.83037h5.91382c-.0627-.68878-.3644-1.33734-.8575-1.83037-.5568-.55682-1.312-.86963-2.0994-.86963zm4.461 2.7c-.0656-1.08712-.5264-2.11657-1.3009-2.89103-.8381-.83812-1.9749-1.30897-3.1601-1.30897-1.1853 0-2.32204.47085-3.16016 1.30897-.77447.77446-1.23534 1.80391-1.30087 2.89103h-2.31966c-.03797 0-.07529.00282-.11174.00827h-1.98826c-.41422 0-.75.33578-.75.75 0 .41421.33578.75.75.75h1.35v11.84174c0 .7559.30026 1.4808.83474 2.0152.53448.5345 1.25939.8348 2.01526.8348h9.44999c.7559 0 1.4808-.3003 2.0153-.8348.5344-.5344.8347-1.2593.8347-2.0152v-11.84174h1.35c.4142 0 .75-.33579.75-.75 0-.41422-.3358-.75-.75-.75h-1.9883c-.0364-.00545-.0737-.00827-.1117-.00827zm-10.49169 1.50827v11.84174c0 .358.14223.7014.3954.9546.25318.2532.59656.3954.9546.3954h9.44999c.358 0 .7014-.1422.9546-.3954s.3954-.5966.3954-.9546v-11.84174z';
-  --icon-trash-file: var(--icon-remove);
-  --icon-upload-error: var(--icon-error);
-  --icon-badge-success: 'M10.5 18.2044L18.0992 10.0207C18.6629 9.41362 18.6277 8.46452 18.0207 7.90082C17.4136 7.33711 16.4645 7.37226 15.9008 7.97933L10.5 13.7956L8.0992 11.2101C7.53549 10.603 6.5864 10.5679 5.97933 11.1316C5.37226 11.6953 5.33711 12.6444 5.90082 13.2515L10.5 18.2044Z';
-  --icon-badge-error: 'm13.6 18.4c0 .8837-.7164 1.6-1.6 1.6-.8837 0-1.6-.7163-1.6-1.6s.7163-1.6 1.6-1.6c.8836 0 1.6.7163 1.6 1.6zm-1.6-13.9c.8284 0 1.5.67157 1.5 1.5v7c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5v-7c0-.82843.6716-1.5 1.5-1.5z';
-  --icon-edit-file: 'm12.1109 6c.3469-1.69213 1.8444-2.96484 3.6391-2.96484s3.2922 1.27271 3.6391 2.96484h2.314c.4142 0 .75.33578.75.75 0 .41421-.3358.75-.75.75h-2.314c-.3469 1.69213-1.8444 2.9648-3.6391 2.9648s-3.2922-1.27267-3.6391-2.9648h-9.81402c-.41422 0-.75001-.33579-.75-.75 0-.41422.33578-.75.75-.75zm3.6391-1.46484c-1.2232 0-2.2148.99162-2.2148 2.21484s.9916 2.21484 2.2148 2.21484 2.2148-.99162 2.2148-2.21484-.9916-2.21484-2.2148-2.21484zm-11.1391 11.96484c.34691-1.6921 1.84437-2.9648 3.6391-2.9648 1.7947 0 3.2922 1.2727 3.6391 2.9648h9.814c.4142 0 .75.3358.75.75s-.3358.75-.75.75h-9.814c-.3469 1.6921-1.8444 2.9648-3.6391 2.9648-1.79473 0-3.29219-1.2727-3.6391-2.9648h-2.31402c-.41422 0-.75-.3358-.75-.75s.33578-.75.75-.75zm3.6391-1.4648c-1.22322 0-2.21484.9916-2.21484 2.2148s.99162 2.2148 2.21484 2.2148 2.2148-.9916 2.2148-2.2148-.99158-2.2148-2.2148-2.2148z';
-  --icon-upload: 'm11.5014.392135c.2844-.253315.7134-.253315.9978 0l6.7037 5.971925c.3093.27552.3366.74961.0611 1.05889-.2755.30929-.7496.33666-1.0589.06113l-5.4553-4.85982v13.43864c0 .4142-.3358.75-.75.75s-.75-.3358-.75-.75v-13.43771l-5.45427 4.85889c-.30929.27553-.78337.24816-1.0589-.06113-.27553-.30928-.24816-.78337.06113-1.05889zm-10.644466 16.336765c.414216 0 .749996.3358.749996.75v4.9139h20.78567v-4.9139c0-.4142.3358-.75.75-.75.4143 0 .75.3358.75.75v5.6639c0 .4143-.3357.75-.75.75h-22.285666c-.414214 0-.75-.3357-.75-.75v-5.6639c0-.4142.335786-.75.75-.75z';
-  --icon-add: 'M12.75 21C12.75 21.4142 12.4142 21.75 12 21.75C11.5858 21.75 11.25 21.4142 11.25 21V12.7499H3C2.58579 12.7499 2.25 12.4141 2.25 11.9999C2.25 11.5857 2.58579 11.2499 3 11.2499H11.25V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V11.2499H21C21.4142 11.2499 21.75 11.5857 21.75 11.9999C21.75 12.4141 21.4142 12.7499 21 12.7499H12.75V21Z';
-}
-
-:where(.lr-file-uploader-minimal, lr-file-uploader-minimal) {
-  --cfg-multiple: 1;
-  --cfg-confirm-upload: 0;
+:where([lr-file-uploader-minimal]) {
   --cfg-init-activity: 'start-from';
   --cfg-done-activity: 'upload-list';
 
@@ -44,125 +24,114 @@
   display: block;
 }
 
-.lr-file-uploader-minimal lr-start-from .content,
-lr-file-uploader-minimal lr-start-from .content {
+[lr-file-uploader-minimal] lr-start-from .uc-content {
   display: flex;
   flex-direction: column;
-  gap: var(--gap-min);
+  gap: 4px;
   padding: 0;
   overflow: hidden;
   align-items: center;
   background-color: transparent;
 }
 
-:where(.lr-file-uploader-minimal lr-drop-area, lr-file-uploader-minimal lr-drop-area) {
+:where([lr-file-uploader-minimal] lr-drop-area) {
   display: flex;
+  position: relative;
   align-items: center;
   justify-content: center;
   width: 100%;
-  min-height: calc(var(--ui-size) + var(--gap-mid) * 2 + var(--gap-min) * 4);
+  min-height: calc(var(--uc-preview-size) + var(--uc-padding) * 2 + 8px);
   padding: 0;
-  line-height: 140%;
   text-align: center;
-  background-color: var(--clr-background);
-  border-radius: var(--border-radius-frame);
+  background-color: var(--uc-muted);
+  border-radius: calc(var(--uc-radius) * 1.75);
+}
+
+/* hack to make transparent :hover colors work in any conditions */
+:where([lr-file-uploader-minimal] lr-drop-area)::before {
+  content: '';
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: var(--uc-background);
 }
 
-.lr-file-uploader-minimal lr-upload-list lr-activity-header,
-lr-file-uploader-minimal lr-upload-list lr-activity-header {
+[lr-file-uploader-minimal] lr-upload-list lr-activity-header {
   display: none;
 }
 
-.lr-file-uploader-minimal lr-upload-list > .toolbar,
-lr-file-uploader-minimal lr-upload-list > .toolbar {
+[lr-file-uploader-minimal] lr-upload-list > .uc-toolbar {
   background-color: transparent;
 }
 
-.lr-file-uploader-minimal lr-upload-list,
-lr-file-uploader-minimal lr-upload-list {
+[lr-file-uploader-minimal] lr-upload-list {
   width: 100%;
   height: unset;
-  padding: var(--gap-small);
-  background-color: transparent;
-  border: var(--border-dashed);
-  border-radius: var(--border-radius-frame);
+  padding: 4px;
+  background-color: var(--uc-background);
+  border: 1px dashed var(--uc-border);
+  border-radius: calc(var(--uc-radius) * 1.75);
 }
 
-.lr-file-uploader-minimal lr-upload-list .files,
-lr-file-uploader-minimal lr-upload-list .files {
+[lr-file-uploader-minimal] lr-upload-list .uc-files {
   padding: 0;
 }
 
-.lr-file-uploader-minimal lr-upload-list .toolbar,
-lr-file-uploader-minimal lr-upload-list .toolbar {
+[lr-file-uploader-minimal] lr-upload-list .uc-toolbar {
   display: block;
   padding: 0;
 }
 
-.lr-file-uploader-minimal lr-upload-list .toolbar .cancel-btn,
-lr-file-uploader-minimal lr-upload-list .toolbar .cancel-btn,
-.lr-file-uploader-minimal lr-upload-list .toolbar .upload-btn,
-lr-file-uploader-minimal lr-upload-list .toolbar .upload-btn,
-.lr-file-uploader-minimal lr-upload-list .toolbar .done-btn,
-lr-file-uploader-minimal lr-upload-list .toolbar .done-btn {
+[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-cancel-btn,
+[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-upload-btn,
+[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-done-btn {
   display: none;
 }
 
-.lr-file-uploader-minimal lr-upload-list .toolbar .add-more-btn,
-lr-file-uploader-minimal lr-upload-list .toolbar .add-more-btn {
+[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-add-more-btn {
   width: 100%;
-  height: calc(var(--ui-size) + var(--gap-mid) * 2);
-  margin-top: var(--gap-small);
-  background-color: var(--clr-background);
+  height: calc(var(--uc-preview-size) + var(--uc-padding) * 2);
+  margin-top: 4px;
 }
 
-.lr-file-uploader-minimal lr-upload-list .toolbar .add-more-btn[disabled],
-lr-file-uploader-minimal lr-upload-list .toolbar .add-more-btn[disabled] {
+[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-add-more-btn[disabled] {
   display: none;
 }
 
-.lr-file-uploader-minimal lr-upload-list .toolbar .add-more-btn:hover,
-lr-file-uploader-minimal lr-upload-list .toolbar .add-more-btn:hover {
-  background-color: var(--clr-background-dark);
-}
-
-.lr-file-uploader-minimal lr-upload-list .toolbar .add-more-btn > span,
-lr-file-uploader-minimal lr-upload-list .toolbar .add-more-btn > span {
+[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-add-more-btn > span {
   display: none;
 }
 
-.lr-file-uploader-minimal lr-file-item,
-lr-file-uploader-minimal lr-file-item {
-  background-color: var(--clr-background);
-  border-radius: var(--border-radius-element);
+[lr-file-uploader-minimal] lr-upload-list .uc-toolbar .uc-add-more-btn > lr-icon {
+  display: flex;
 }
 
-.lr-file-uploader-minimal lr-file-item .edit-btn,
-lr-file-uploader-minimal lr-file-item .edit-btn {
+[lr-file-uploader-minimal] lr-file-item .uc-edit-btn {
   display: none;
 }
 
-.lr-file-uploader-minimal lr-file-item lr-progress-bar,
-lr-file-uploader-minimal lr-file-item lr-progress-bar {
+[lr-file-uploader-minimal] lr-file-item lr-progress-bar {
   top: 0 !important;
   height: 100% !important;
 }
 
-.lr-file-uploader-minimal lr-file-item lr-progress-bar .progress,
-lr-file-uploader-minimal lr-file-item lr-progress-bar .progress {
-  background-color: var(--clr-accent-lightest);
-  border-radius: var(--border-radius-element);
+[lr-file-uploader-minimal] lr-file-item lr-progress-bar .uc-progress {
+  background-color: var(--uc-primary-transparent);
+  border-radius: var(--uc-radius);
 }
 
-.lr-file-uploader-minimal lr-upload-list lr-drop-area,
-lr-file-uploader-minimal lr-upload-list lr-drop-area {
+[lr-file-uploader-minimal] lr-upload-list lr-drop-area {
   width: 100%;
   height: 100%;
   margin: 0;
-  border-radius: var(--border-radius-frame);
+  border-radius: calc(var(--uc-radius) * 1.75);
+}
+
+[lr-file-uploader-minimal] lr-upload-list .uc-common-error {
+  margin: 4px 0 0;
 }
 
-.lr-file-uploader-minimal lr-upload-list .common-error,
-lr-file-uploader-minimal lr-upload-list .common-error {
-  margin: var(--gap-small) 0 0 0;
+[lr-file-uploader-minimal] lr-copyright .uc-credits {
+  position: static;
 }
diff --git a/solutions/file-uploader/regular/FileUploaderRegular.js b/solutions/file-uploader/regular/FileUploaderRegular.js
index cfb8a1e4d..7a010d0c4 100644
--- a/solutions/file-uploader/regular/FileUploaderRegular.js
+++ b/solutions/file-uploader/regular/FileUploaderRegular.js
@@ -1,9 +1,11 @@
 // @ts-check
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
-import { EventType } from '../../../blocks/UploadCtxProvider/EventEmitter.js';
 import { asBoolean } from '../../../blocks/Config/normalizeConfigValue.js';
+import { EventType } from '../../../blocks/UploadCtxProvider/EventEmitter.js';
 
 export class FileUploaderRegular extends SolutionBlock {
+  static styleAttrs = [...super.styleAttrs, 'lr-file-uploader-regular'];
+
   constructor() {
     super();
 
@@ -45,7 +47,7 @@ FileUploaderRegular.template = /* HTML */ `
     <lr-start-from>
       <lr-drop-area with-icon clickable></lr-drop-area>
       <lr-source-list wrap></lr-source-list>
-      <button type="button" l10n="start-from-cancel" class="secondary-btn" set="onclick: *historyBack"></button>
+      <button type="button" l10n="start-from-cancel" class="uc-secondary-btn" set="onclick: *historyBack"></button>
       <lr-copyright></lr-copyright>
     </lr-start-from>
     <lr-upload-list></lr-upload-list>
diff --git a/types/exported.d.ts b/types/exported.d.ts
index b4043ad89..d99654bf0 100644
--- a/types/exported.d.ts
+++ b/types/exported.d.ts
@@ -3,6 +3,7 @@ import type { complexConfigKeys } from '../blocks/Config/Config';
 import type { FuncFileValidator, FuncCollectionValidator } from '../abstract/ValidationManager';
 
 export type { FuncFileValidator, FuncCollectionValidator } from '../abstract/ValidationManager';
+export type { UploaderPublicApi } from '../abstract/UploaderPublicApi';
 
 export type UploadError = import('@uploadcare/upload-client').UploadError;
 export type UploadcareFile = import('@uploadcare/upload-client').UploadcareFile;
diff --git a/types/jsx.d.ts b/types/jsx.d.ts
index a0993ed44..e1e61b1a9 100644
--- a/types/jsx.d.ts
+++ b/types/jsx.d.ts
@@ -44,12 +44,9 @@ declare namespace JSX {
     'lr-upload-list': any;
     'lr-url-source': any;
     'lr-camera-source': any;
-    'lr-confirmation-dialog': any;
     'lr-progress-bar-common': any;
     'lr-progress-bar': any;
-    'lr-editable-canvas': any;
     'lr-external-source': any;
-    'lr-tabs': any;
     'lr-cloud-image-editor-activity': any;
     'lr-cloud-image-editor-block': CustomElement<
       CloudImageEditorBlock,
diff --git a/types/test/lr-config.test-d.tsx b/types/test/lr-config.test-d.tsx
index f5e8ca914..584f2e502 100644
--- a/types/test/lr-config.test-d.tsx
+++ b/types/test/lr-config.test-d.tsx
@@ -75,13 +75,13 @@ import { OutputFileEntry, FuncCollectionValidator, FuncFileValidator } from '../
   if (ref.current) {
     const config = ref.current;
 
-    const maxSize: FuncFileValidator = (outputEntry, block) => ({
-      message: block.l10n('images-only-accepted'),
+    const maxSize: FuncFileValidator = (outputEntry, api) => ({
+      message: api.l10n('images-only-accepted'),
       payload: { entry: outputEntry },
     })
 
-    const maxCollection: FuncCollectionValidator = (collection, block) => ({
-      message: block.l10n('some-files-were-not-uploaded'),
+    const maxCollection: FuncCollectionValidator = (collection, api) => ({
+      message: api.l10n('some-files-were-not-uploaded'),
     })
 
     config.fileValidators = [maxSize]
diff --git a/types/test/lr-upload-ctx-provider.test-d.tsx b/types/test/lr-upload-ctx-provider.test-d.tsx
index 994d39d8b..f6ea3c6bc 100644
--- a/types/test/lr-upload-ctx-provider.test-d.tsx
+++ b/types/test/lr-upload-ctx-provider.test-d.tsx
@@ -14,11 +14,12 @@ import { useRef } from 'react';
 import { UploadcareFile, UploadcareGroup } from '@uploadcare/upload-client';
 
 const instance = new UploadCtxProvider();
-
-instance.addFileFromUrl('https://example.com/image.png');
 instance.uploadCollection.size;
 instance.setOrAddState('fileId', 'uploading');
 
+const api = instance.getAPI();
+api.addFileFromUrl('https://example.com/image.png');
+
 instance.addEventListener('change', (e) => {
   expectType<EventMap['change']>(e);
 });
@@ -42,7 +43,7 @@ instance.addEventListener('change', (e) => {
     expectType<false>(state.isFailed);
     expectType<false>(state.isUploading);
     expectType<[]>(state.errors);
-    expectType<'success'>(state.allEntries[0].status)
+    expectType<'success'>(state.allEntries[0].status);
   } else if (state.isFailed) {
     expectType<'failed'>(state.status);
     expectType<false>(state.isSuccess);
@@ -61,7 +62,7 @@ instance.addEventListener('change', (e) => {
     expectType<false>(state.isFailed);
     expectType<false>(state.isUploading);
     expectType<[]>(state.errors);
-    expectType<'success' | 'idle'>(state.allEntries[0].status)
+    expectType<'success' | 'idle'>(state.allEntries[0].status);
   }
 });
 
@@ -204,7 +205,9 @@ instance.addEventListener('modal-open', (e) => {
 
 instance.addEventListener('activity-change', (e) => {
   const payload = e.detail;
-  expectType<(typeof ActivityBlock)['activities'][keyof (typeof ActivityBlock)['activities']] | null>(payload.activity);
+  expectType<(typeof ActivityBlock)['activities'][keyof (typeof ActivityBlock)['activities']] | null | (string & {})>(
+    payload.activity,
+  );
 });
 
 () => {
diff --git a/utils/validators/collection/validateCollectionUploadError.js b/utils/validators/collection/validateCollectionUploadError.js
index 56fe2d9c0..38af5a693 100644
--- a/utils/validators/collection/validateCollectionUploadError.js
+++ b/utils/validators/collection/validateCollectionUploadError.js
@@ -1,11 +1,11 @@
 // @ts-check
 
 /** @type {import('../../../abstract/ValidationManager.js').FuncCollectionValidator} */
-export const validateCollectionUploadError = (collection, block) => {
+export const validateCollectionUploadError = (collection, api) => {
   if (collection.failedCount > 0) {
     return {
       type: 'SOME_FILES_HAS_ERRORS',
-      message: block.l10n('some-files-were-not-uploaded'),
+      message: api.l10n('some-files-were-not-uploaded'),
     };
   }
 };
diff --git a/utils/validators/collection/validateMultiple.js b/utils/validators/collection/validateMultiple.js
index 5e0dee893..dba19c313 100644
--- a/utils/validators/collection/validateMultiple.js
+++ b/utils/validators/collection/validateMultiple.js
@@ -1,13 +1,13 @@
 //@ts-check
 
 /** @type {import('../../../abstract/ValidationManager.js').FuncCollectionValidator} */
-export const validateMultiple = (collection, block) => {
+export const validateMultiple = (collection, api) => {
   const total = collection.totalCount;
-  const multipleMin = block.cfg.multiple ? block.cfg.multipleMin : 0;
-  const multipleMax = block.cfg.multiple ? block.cfg.multipleMax : 1;
+  const multipleMin = api.cfg.multiple ? api.cfg.multipleMin : 0;
+  const multipleMax = api.cfg.multiple ? api.cfg.multipleMax : 1;
 
   if (multipleMin && total < multipleMin) {
-    const message = block.l10n('files-count-limit-error-too-few', {
+    const message = api.l10n('files-count-limit-error-too-few', {
       min: multipleMin,
       max: multipleMax,
       total,
@@ -25,7 +25,7 @@ export const validateMultiple = (collection, block) => {
   }
 
   if (multipleMax && total > multipleMax) {
-    const message = block.l10n('files-count-limit-error-too-many', {
+    const message = api.l10n('files-count-limit-error-too-many', {
       min: multipleMin,
       max: multipleMax,
       total,
diff --git a/utils/validators/file/validateFileType.js b/utils/validators/file/validateFileType.js
index c7ba28ff9..c47bcf581 100644
--- a/utils/validators/file/validateFileType.js
+++ b/utils/validators/file/validateFileType.js
@@ -2,9 +2,9 @@
 import { IMAGE_ACCEPT_LIST, matchExtension, matchMimeType, mergeFileTypes } from '../../fileTypes.js';
 
 /** @type {import('../../../abstract/ValidationManager.js').FuncFileValidator} */
-export const validateFileType = (outputEntry, block) => {
-  const imagesOnly = block.cfg.imgOnly;
-  const accept = block.cfg.accept;
+export const validateFileType = (outputEntry, api) => {
+  const imagesOnly = api.cfg.imgOnly;
+  const accept = api.cfg.accept;
   const allowedFileTypes = mergeFileTypes([...(imagesOnly ? IMAGE_ACCEPT_LIST : []), accept]);
   if (!allowedFileTypes.length) return;
 
@@ -23,7 +23,7 @@ export const validateFileType = (outputEntry, block) => {
     // Assume file type is not allowed if both mime and ext checks fail
     return {
       type: 'FORBIDDEN_FILE_TYPE',
-      message: block.l10n('file-type-not-allowed'),
+      message: api.l10n('file-type-not-allowed'),
       payload: { entry: outputEntry },
     };
   }
diff --git a/utils/validators/file/validateIsImage.js b/utils/validators/file/validateIsImage.js
index 0d9343ced..620092ea9 100644
--- a/utils/validators/file/validateIsImage.js
+++ b/utils/validators/file/validateIsImage.js
@@ -1,8 +1,8 @@
 // @ts-check
 
-/** @type import('../../../abstract/ValidationManager.js').FuncFileValidator */
-export const validateIsImage = (outputEntry, block) => {
-  const imagesOnly = block.cfg.imgOnly;
+/** @type {import('../../../abstract/ValidationManager.js').FuncFileValidator} */
+export const validateIsImage = (outputEntry, api) => {
+  const imagesOnly = api.cfg.imgOnly;
   const isImage = outputEntry.isImage;
 
   if (!imagesOnly || isImage) {
@@ -19,7 +19,7 @@ export const validateIsImage = (outputEntry, block) => {
 
   return {
     type: 'NOT_AN_IMAGE',
-    message: block.l10n('images-only-accepted'),
+    message: api.l10n('images-only-accepted'),
     payload: { entry: outputEntry },
   };
 };
diff --git a/utils/validators/file/validateMaxSizeLimit.js b/utils/validators/file/validateMaxSizeLimit.js
index d8f9d73a0..57226d57a 100644
--- a/utils/validators/file/validateMaxSizeLimit.js
+++ b/utils/validators/file/validateMaxSizeLimit.js
@@ -2,13 +2,13 @@
 import { prettyBytes } from '../../prettyBytes.js';
 
 /** @type {import('../../../abstract/ValidationManager.js').FuncFileValidator} */
-export const validateMaxSizeLimit = (outputEntry, block) => {
-  const maxFileSize = block.cfg.maxLocalFileSizeBytes;
+export const validateMaxSizeLimit = (outputEntry, api) => {
+  const maxFileSize = api.cfg.maxLocalFileSizeBytes;
   const fileSize = outputEntry.size;
   if (maxFileSize && fileSize && fileSize > maxFileSize) {
     return {
       type: 'FILE_SIZE_EXCEEDED',
-      message: block.l10n('files-max-size-limit-error', { maxFileSize: prettyBytes(maxFileSize) }),
+      message: api.l10n('files-max-size-limit-error', { maxFileSize: prettyBytes(maxFileSize) }),
       payload: { entry: outputEntry },
     };
   }
diff --git a/utils/validators/file/validateUploadError.js b/utils/validators/file/validateUploadError.js
index f9a6d9a0c..76687def3 100644
--- a/utils/validators/file/validateUploadError.js
+++ b/utils/validators/file/validateUploadError.js
@@ -2,11 +2,14 @@
 import { NetworkError, UploadError } from '@uploadcare/upload-client';
 
 /** @type {import('../../../abstract/ValidationManager.js').FuncFileValidator} */
-export const validateUploadError = (outputEntry, block) => {
+export const validateUploadError = (outputEntry, api) => {
   const { internalId } = outputEntry;
 
+  // @ts-expect-error Use private API that is not exposed in the types
+  const internalEntry = api._uploadCollection.read(internalId);
+
   /** @type {unknown} */
-  const cause = block.uploadCollection.read(internalId)?.getValue('uploadError');
+  const cause = internalEntry?.getValue('uploadError');
   if (!cause) {
     return;
   }