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 a36b0c793..4d9b39101 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,34 @@
+# [0.46.0](https://github.com/uploadcare/blocks/compare/v0.45.0...v0.46.0) (2024-06-24)
+
+### Features
+
+- 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
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 7e6b742bf..6878ed45e 100644
--- a/abstract/ActivityBlock.js
+++ b/abstract/ActivityBlock.js
@@ -1,6 +1,6 @@
-import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
 // @ts-check
 import { debounce } from '../blocks/utils/debounce.js';
+import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
 import { Block } from './Block.js';
 import { activityBlockCtx } from './CTX.js';
 
@@ -15,7 +15,7 @@ export class ActivityBlock extends Block {
 
   /** @private */
   _deactivate() {
-    const actDesc = ActivityBlock._activityCallbacks.get(this);
+    let actDesc = ActivityBlock._activityCallbacks.get(this);
     this[ACTIVE_PROP] = false;
     this.removeAttribute(ACTIVE_ATTR);
     actDesc?.deactivateCallback?.();
@@ -23,7 +23,7 @@ export class ActivityBlock extends Block {
 
   /** @private */
   _activate() {
-    const actDesc = ActivityBlock._activityCallbacks.get(this);
+    let actDesc = ActivityBlock._activityCallbacks.get(this);
     this.$['*historyBack'] = this.historyBack.bind(this);
     /** @private */
     this[ACTIVE_PROP] = true;
@@ -138,9 +138,7 @@ export class ActivityBlock extends Block {
     /** @type {string | null} */
     const currentActivity = this.$['*currentActivity'];
 
-    /** @type {Set<import('./Block').Block>} */
-    const blocksRegistry = this.$['*blocksRegistry'];
-    const hasCurrentActivityInCtx = !![...blocksRegistry].find(
+    const hasCurrentActivityInCtx = !![...this.blocksRegistry].find(
       (block) => block instanceof ActivityBlock && block.activityType === currentActivity,
     );
 
@@ -169,7 +167,7 @@ export class ActivityBlock extends Block {
 
   historyBack() {
     /** @type {String[]} */
-    const history = this.$['*history'];
+    let history = this.$['*history'];
     if (history) {
       let nextActivity = history.pop();
       while (nextActivity === this.activityType) {
@@ -177,10 +175,8 @@ export class ActivityBlock extends Block {
       }
       let couldOpenActivity = !!nextActivity;
       if (nextActivity) {
-        /** @type {Set<ActivityBlock>} */
-        const 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,7 +194,6 @@ ActivityBlock.activities = Object.freeze({
   DRAW: 'draw',
   UPLOAD_LIST: 'upload-list',
   URL: 'url',
-  CONFIRMATION: 'confirmation',
   CLOUD_IMG_EDIT: 'cloud-image-edit',
   EXTERNAL: 'external',
   DETAILS: 'details',
diff --git a/abstract/Block.js b/abstract/Block.js
index 44e68d399..f4e68c554 100644
--- a/abstract/Block.js
+++ b/abstract/Block.js
@@ -3,7 +3,7 @@ import { BaseComponent, Data } from '@symbiotejs/symbiote';
 import { initialConfig } from '../blocks/Config/initialConfig.js';
 import { EventEmitter } from '../blocks/UploadCtxProvider/EventEmitter.js';
 import { WindowHeightTracker } from '../utils/WindowHeightTracker.js';
-import { extractCdnUrlModifiers, extractFilename, extractUuid } from '../utils/cdn-utils.js';
+import { extractFilename, extractCdnUrlModifiers, extractUuid } from '../utils/cdn-utils.js';
 import { getLocaleDirection } from '../utils/getLocaleDirection.js';
 import { getPluralForm } from '../utils/getPluralForm.js';
 import { applyTemplateData, getPluralObjects } from '../utils/template-utils.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,7 +20,9 @@ const TAG_PREFIX = 'lr-';
 export class Block extends BaseComponent {
   /** @type {string | null} */
   static StateConsumerScope = null;
-  static className = '';
+
+  /** @type {string[]} */
+  static styleAttrs = [];
   requireCtxName = false;
   allowCustomTemplate = true;
   /** @type {import('./ActivityBlock.js').ActivityType} */
@@ -36,15 +39,15 @@ export class Block extends BaseComponent {
     if (!str) {
       return '';
     }
-    const template = this.$[localeStateKey(str)] || str;
-    const pluralObjects = getPluralObjects(template);
-    for (const pluralObject of pluralObjects) {
+    let template = this.$[localeStateKey(str)] || str;
+    let pluralObjects = getPluralObjects(template);
+    for (let pluralObject of pluralObjects) {
       variables[pluralObject.variable] = this.pluralize(
         pluralObject.pluralKey,
         Number(variables[pluralObject.countVariable]),
       );
     }
-    const result = applyTemplateData(template, variables);
+    let result = applyTemplateData(template, variables);
     return result;
   }
 
@@ -94,10 +97,7 @@ export class Block extends BaseComponent {
    * @returns {Boolean}
    */
   hasBlockInCtx(callback) {
-    // @ts-ignore TODO: fix this
-    /** @type {Set} */
-    const blocksRegistry = this.$['*blocksRegistry'];
-    for (const block of blocksRegistry) {
+    for (let block of this.blocksRegistry) {
       if (callback(block)) {
         return true;
       }
@@ -128,14 +128,14 @@ export class Block extends BaseComponent {
   }
 
   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
-      this.constructor.template = null;
+      this.constructor['template'] = null;
       this.processInnerHtml = true;
     }
     if (this.requireCtxName) {
@@ -168,7 +168,7 @@ export class Block extends BaseComponent {
       this.add('*blocksRegistry', new Set());
     }
 
-    const blocksRegistry = this.$['*blocksRegistry'];
+    let blocksRegistry = this.$['*blocksRegistry'];
     blocksRegistry.add(this);
 
     if (!this.has('*eventEmitter')) {
@@ -178,8 +178,13 @@ 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;
     });
   }
 
@@ -188,9 +193,18 @@ export class Block extends BaseComponent {
     return this.has('*localeManager') ? this.$['*localeManager'] : null;
   }
 
+  /** @returns {A11y | null} */
+  get a11y() {
+    return this.has('*a11y') ? this.$['*a11y'] : null;
+  }
+
+  /** @type {Set<Block>} */
+  get blocksRegistry() {
+    return this.$['*blocksRegistry'];
+  }
+
   destroyCallback() {
-    /** @type {Set<Block>} */
-    const blocksRegistry = this.$['*blocksRegistry'];
+    let blocksRegistry = this.blocksRegistry;
     blocksRegistry.delete(this);
 
     this.localeManager?.destroyL10nBindings(this);
@@ -217,6 +231,7 @@ export class Block extends BaseComponent {
     Data.deleteCtx(this.ctxName);
 
     this.localeManager?.destroy();
+    this.a11y?.destroy();
   }
 
   /**
@@ -224,7 +239,7 @@ export class Block extends BaseComponent {
    * @param {Number} [decimals]
    */
   fileSizeFmt(bytes, decimals = 2) {
-    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let units = ['B', 'KB', 'MB', 'GB', 'TB'];
     /**
      * @param {String} str
      * @returns {String}
@@ -232,10 +247,10 @@ export class Block extends BaseComponent {
     if (bytes === 0) {
       return `0 ${units[0]}`;
     }
-    const k = 1024;
-    const dm = decimals < 0 ? 0 : decimals;
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${units[i]}`;
+    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];
   }
 
   /**
@@ -268,7 +283,7 @@ export class Block extends BaseComponent {
   /** @returns {import('../types').ConfigType} } */
   get cfg() {
     if (!this.__cfgProxy) {
-      const o = Object.create(null);
+      let o = Object.create(null);
       /** @private */
       this.__cfgProxy = new Proxy(o, {
         set: (obj, key, value) => {
@@ -327,10 +342,10 @@ export class Block extends BaseComponent {
   /** @param {String} [name] */
   static reg(name) {
     if (!name) {
-      Block.reg();
+      super.reg();
       return;
     }
-    Block.reg(name.startsWith(TAG_PREFIX) ? name : TAG_PREFIX + name);
+    super.reg(name.startsWith(TAG_PREFIX) ? name : TAG_PREFIX + name);
   }
 }
 
diff --git a/abstract/CTX.js b/abstract/CTX.js
index fd349d240..520a8abc7 100644
--- a/abstract/CTX.js
+++ b/abstract/CTX.js
@@ -24,7 +24,6 @@ export const uploaderBlockCtx = (fnCtx) => ({
   '*commonProgress': 0,
   '*uploadList': [],
   '*focusedEntry': null,
-  '*uploadMetadata': null,
   '*uploadQueue': new Queue(1),
   '*uploadCollection': null,
   /** @type {ReturnType<import('../types').OutputErrorCollection>[]} */
diff --git a/abstract/SolutionBlock.js b/abstract/SolutionBlock.js
index 112ed3dd2..f9c883587 100644
--- a/abstract/SolutionBlock.js
+++ b/abstract/SolutionBlock.js
@@ -3,10 +3,16 @@ 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) {
     SolutionBlock._template = `${svgIconsSprite + value}<slot></slot>`;
   }
diff --git a/abstract/UploaderBlock.js b/abstract/UploaderBlock.js
index ed7efbb72..0aff20aa7 100644
--- a/abstract/UploaderBlock.js
+++ b/abstract/UploaderBlock.js
@@ -14,7 +14,6 @@ import { createCdnUrl, createCdnUrlModifiers } from '../utils/cdn-utils.js';
 import { IMAGE_ACCEPT_LIST, fileIsImage, mergeFileTypes } from '../utils/fileTypes.js';
 import { parseCdnUrl } from '../utils/parseCdnUrl.js';
 import { stringToArray } from '../utils/stringToArray.js';
-import { warnOnce } from '../utils/warnOnce.js';
 import { uploaderBlockCtx } from './CTX.js';
 import { SecureUploadsManager } from './SecureUploadsManager.js';
 import { TypedCollection } from './TypedCollection.js';
@@ -28,32 +27,6 @@ export class UploaderBlock extends ActivityBlock {
 
   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) {
@@ -112,10 +85,6 @@ 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);
     }
@@ -193,28 +162,6 @@ export class UploaderBlock extends ActivityBlock {
     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)) {
@@ -311,8 +258,7 @@ export class UploaderBlock extends ActivityBlock {
           return;
         }
 
-        /** @type {Set<import('./Block').Block>} */
-        const blocksRegistry = this.$['*blocksRegistry'];
+        const blocksRegistry = this.blocksRegistry;
         /**
          * @param {import('./Block').Block} block
          * @returns {block is import('../blocks/SourceBtn/SourceBtn.js').SourceBtn}
@@ -586,7 +532,7 @@ 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 metadata = await configValue(outputFileEntry);
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/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/camera-source.css b/blocks/CameraSource/camera-source.css
index 15353cd75..c2ad41e75 100644
--- a/blocks/CameraSource/camera-source.css
+++ b/blocks/CameraSource/camera-source.css
@@ -6,12 +6,12 @@ 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);
 }
@@ -22,7 +22,7 @@ lr-camera-source.initialized {
 
 @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,8 +33,8 @@ 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 {
@@ -43,8 +43,8 @@ lr-camera-source .toolbar {
   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 {
@@ -52,38 +52,39 @@ lr-camera-source .content {
   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);
-
   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);
+  color: var(--uc-primary-foreground);
+  background-color: var(--uc-primary);
 }
 
 lr-camera-source .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 {
@@ -92,15 +93,15 @@ lr-camera-source .shot-btn:hover {
 }
 
 lr-camera-source .shot-btn:active {
-  background-color: var(--clr-txt-mid);
+  transform: scale(1);
   opacity: 1;
 }
 
 lr-camera-source .shot-btn[disabled] {
-  bottom: calc(var(--gap-max) * -1 - var(--gap-mid) - var(--ui-size) * 2);
+  bottom: -80px;
 }
 
 lr-camera-source .shot-btn lr-icon svg {
-  width: calc(var(--ui-size) / 1.5);
-  height: calc(var(--ui-size) / 1.5);
+  width: 20px;
+  height: 20px;
 }
diff --git a/blocks/CloudImageEditor/src/CloudImageEditorBlock.js b/blocks/CloudImageEditor/src/CloudImageEditorBlock.js
index 46c340647..f9d93127a 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();
diff --git a/blocks/CloudImageEditor/src/CropFrame.js b/blocks/CloudImageEditor/src/CropFrame.js
index d001184c7..8b1f79842 100644
--- a/blocks/CloudImageEditor/src/CropFrame.js
+++ b/blocks/CloudImageEditor/src/CropFrame.js
@@ -49,7 +49,7 @@ export class CropFrame extends Block {
    * @param {import('./types.js').Direction} direction
    */
   _shouldThumbBeDisabled(direction) {
-    const imageBox = this.$['*imageBox'];
+    let imageBox = this.$['*imageBox'];
     if (!imageBox) {
       return;
     }
@@ -58,30 +58,30 @@ export class CropFrame extends Block {
       return true;
     }
 
-    const tooHigh = imageBox.height <= MIN_CROP_SIZE && (direction.includes('n') || direction.includes('s'));
-    const tooWide = imageBox.width <= MIN_CROP_SIZE && (direction.includes('e') || direction.includes('w'));
+    let tooHigh = imageBox.height <= MIN_CROP_SIZE && (direction.includes('n') || direction.includes('s'));
+    let tooWide = imageBox.width <= MIN_CROP_SIZE && (direction.includes('e') || direction.includes('w'));
     return tooHigh || tooWide;
   }
 
   /** @private */
   _createBackdrop() {
     /** @type {import('./types.js').Rectangle} */
-    const cropBox = this.$['*cropBox'];
+    let cropBox = this.$['*cropBox'];
     if (!cropBox) {
       return;
     }
-    const { x, y, width, height } = cropBox;
-    const svg = this.ref['svg-el'];
+    let { x, y, width, height } = cropBox;
+    let svg = this.ref['svg-el'];
 
-    const mask = createSvgNode('mask', { id: 'backdrop-mask' });
-    const maskRectOuter = createSvgNode('rect', {
+    let mask = createSvgNode('mask', { id: 'backdrop-mask' });
+    let maskRectOuter = createSvgNode('rect', {
       x: 0,
       y: 0,
       width: '100%',
       height: '100%',
       fill: 'white',
     });
-    const maskRectInner = createSvgNode('rect', {
+    let maskRectInner = createSvgNode('rect', {
       x,
       y,
       width,
@@ -91,7 +91,7 @@ export class CropFrame extends Block {
     mask.appendChild(maskRectOuter);
     mask.appendChild(maskRectInner);
 
-    const backdropRect = createSvgNode('rect', {
+    let backdropRect = createSvgNode('rect', {
       x: 0,
       y: 0,
       width: '100%',
@@ -126,11 +126,11 @@ export class CropFrame extends Block {
   /** @private */
   _updateBackdrop() {
     /** @type {import('./types.js').Rectangle} */
-    const cropBox = this.$['*cropBox'];
+    let cropBox = this.$['*cropBox'];
     if (!cropBox) {
       return;
     }
-    const { x, y, width, height } = cropBox;
+    let { x, y, width, height } = cropBox;
 
     this._backdropMaskInner && setSvgNodeAttrs(this._backdropMaskInner, { x, y, width, height });
   }
@@ -138,16 +138,16 @@ export class CropFrame extends Block {
   /** @private */
   _updateFrame() {
     /** @type {import('./types.js').Rectangle} */
-    const cropBox = this.$['*cropBox'];
+    let cropBox = this.$['*cropBox'];
 
     if (!cropBox || !this._frameGuides || !this._frameThumbs) {
       return;
     }
-    for (const thumb of Object.values(this._frameThumbs)) {
-      const { direction, pathNode, interactionNode, groupNode } = thumb;
-      const isCenter = direction === '';
-      const isCorner = direction.length === 2;
-      const { x, y, width, height } = cropBox;
+    for (let thumb of Object.values(this._frameThumbs)) {
+      let { direction, pathNode, interactionNode, groupNode } = thumb;
+      let isCenter = direction === '';
+      let isCorner = direction.length === 2;
+      let { x, y, width, height } = cropBox;
 
       if (isCenter) {
         const moveThumbRect = {
@@ -164,7 +164,7 @@ export class CropFrame extends Block {
           1,
         );
 
-        const { d, center } = isCorner
+        let { d, center } = isCorner
           ? cornerPath(cropBox, direction, thumbSizeMultiplier)
           : sidePath(
               cropBox,
@@ -184,7 +184,7 @@ export class CropFrame extends Block {
         setSvgNodeAttrs(pathNode, { d });
       }
 
-      const disableThumb = this._shouldThumbBeDisabled(direction);
+      let disableThumb = this._shouldThumbBeDisabled(direction);
       groupNode.setAttribute(
         'class',
         classNames('thumb', {
@@ -218,14 +218,14 @@ export class CropFrame extends Block {
 
     for (let i = 0; i < 3; i++) {
       for (let j = 0; j < 3; j++) {
-        const direction = /** @type {import('./types.js').Direction} */ (`${['n', '', 's'][i]}${['w', '', 'e'][j]}`);
-        const groupNode = createSvgNode('g');
+        let direction = /** @type {import('./types.js').Direction} */ (`${['n', '', 's'][i]}${['w', '', 'e'][j]}`);
+        let groupNode = createSvgNode('g');
         groupNode.classList.add('thumb');
         groupNode.setAttribute('with-effects', '');
-        const interactionNode = createSvgNode('rect', {
+        let interactionNode = createSvgNode('rect', {
           fill: 'transparent',
         });
-        const pathNode = createSvgNode('path', {
+        let pathNode = createSvgNode('path', {
           stroke: 'currentColor',
           fill: 'none',
           'stroke-width': THUMB_STROKE_WIDTH,
@@ -248,27 +248,27 @@ export class CropFrame extends Block {
 
   /** @private */
   _createGuides() {
-    const svg = createSvgNode('svg');
+    let svg = createSvgNode('svg');
 
-    const rect = createSvgNode('rect', {
+    let rect = createSvgNode('rect', {
       x: 0,
       y: 0,
       width: '100%',
       height: '100%',
       fill: 'none',
-      stroke: '#000000',
+      stroke: 'currentColor',
       'stroke-width': GUIDE_STROKE_WIDTH,
       'stroke-opacity': 0.5,
     });
     svg.appendChild(rect);
 
     for (let i = 1; i <= 2; i++) {
-      const line = createSvgNode('line', {
+      let line = createSvgNode('line', {
         x1: `${GUIDE_THIRD * i}%`,
-        y1: '0%',
+        y1: `0%`,
         x2: `${GUIDE_THIRD * i}%`,
-        y2: '100%',
-        stroke: '#000000',
+        y2: `100%`,
+        stroke: 'currentColor',
         'stroke-width': GUIDE_STROKE_WIDTH,
         'stroke-opacity': 0.3,
       });
@@ -276,12 +276,12 @@ export class CropFrame extends Block {
     }
 
     for (let i = 1; i <= 2; i++) {
-      const line = createSvgNode('line', {
-        x1: '0%',
+      let line = createSvgNode('line', {
+        x1: `0%`,
         y1: `${GUIDE_THIRD * i}%`,
-        x2: '100%',
+        x2: `100%`,
         y2: `${GUIDE_THIRD * i}%`,
-        stroke: '#000000',
+        stroke: 'currentColor',
         'stroke-width': GUIDE_STROKE_WIDTH,
         'stroke-opacity': 0.3,
       });
@@ -295,14 +295,14 @@ export class CropFrame extends Block {
 
   /** @private */
   _createFrame() {
-    const svg = this.ref['svg-el'];
-    const fr = document.createDocumentFragment();
+    let svg = this.ref['svg-el'];
+    let fr = document.createDocumentFragment();
 
-    const frameGuides = this._createGuides();
+    let frameGuides = this._createGuides();
     fr.appendChild(frameGuides);
 
-    const frameThumbs = this._createThumbs();
-    for (const { groupNode } of Object.values(frameThumbs)) {
+    let frameThumbs = this._createThumbs();
+    for (let { groupNode } of Object.values(frameThumbs)) {
       fr.appendChild(groupNode);
     }
 
@@ -318,15 +318,15 @@ export class CropFrame extends Block {
    */
   _handlePointerDown(direction, e) {
     if (!this._frameThumbs) return;
-    const thumb = this._frameThumbs[direction];
+    let thumb = this._frameThumbs[direction];
     if (this._shouldThumbBeDisabled(direction)) {
       return;
     }
 
-    const cropBox = this.$['*cropBox'];
-    const { x: svgX, y: svgY } = this.ref['svg-el'].getBoundingClientRect();
-    const x = e.x - svgX;
-    const y = e.y - svgY;
+    let cropBox = this.$['*cropBox'];
+    let { x: svgX, y: svgY } = this.ref['svg-el'].getBoundingClientRect();
+    let x = e.x - svgX;
+    let y = e.y - svgY;
 
     this.$.dragging = true;
     this._draggingThumb = thumb;
@@ -362,13 +362,13 @@ export class CropFrame extends Block {
     e.stopPropagation();
     e.preventDefault();
 
-    const svg = this.ref['svg-el'];
-    const { x: svgX, y: svgY } = svg.getBoundingClientRect();
-    const x = e.x - svgX;
-    const y = e.y - svgY;
-    const dx = x - this._dragStartPoint[0];
-    const dy = y - this._dragStartPoint[1];
-    const { direction } = this._draggingThumb;
+    let svg = this.ref['svg-el'];
+    let { x: svgX, y: svgY } = svg.getBoundingClientRect();
+    let x = e.x - svgX;
+    let y = e.y - svgY;
+    let dx = x - this._dragStartPoint[0];
+    let dy = y - this._dragStartPoint[1];
+    let { direction } = this._draggingThumb;
 
     const movedCropBox = this._calcCropBox(direction, [dx, dy]);
     if (movedCropBox) {
@@ -384,7 +384,7 @@ export class CropFrame extends Block {
   _calcCropBox(direction, delta) {
     const [dx, dy] = delta;
     /** @type {import('./types.js').Rectangle} */
-    const imageBox = this.$['*imageBox'];
+    let imageBox = this.$['*imageBox'];
     let rect = /** @type {import('./types.js').Rectangle} */ (this._dragStartCrop) ?? this.$['*cropBox'];
     /** @type {import('./types.js').CropPresetList[0]} */
     const cropPreset = this.$['*cropPresetList']?.[0];
@@ -412,19 +412,19 @@ export class CropFrame extends Block {
   _handleSvgPointerMove_(e) {
     if (!this._frameThumbs) return;
 
-    const hoverThumb = Object.values(this._frameThumbs).find((thumb) => {
+    let hoverThumb = Object.values(this._frameThumbs).find((thumb) => {
       if (this._shouldThumbBeDisabled(thumb.direction)) {
         return false;
       }
-      const node = thumb.interactionNode;
-      const bounds = node.getBoundingClientRect();
-      const rect = {
+      let node = thumb.interactionNode;
+      let bounds = node.getBoundingClientRect();
+      let rect = {
         x: bounds.x,
         y: bounds.y,
         width: bounds.width,
         height: bounds.height,
       };
-      const hover = rectContainsPoint(rect, [e.x, e.y]);
+      let hover = rectContainsPoint(rect, [e.x, e.y]);
       return hover;
     });
 
@@ -434,7 +434,7 @@ export class CropFrame extends Block {
 
   /** @private */
   _updateCursor() {
-    const hoverThumb = this._hoverThumb;
+    let hoverThumb = this._hoverThumb;
     this.ref['svg-el'].style.cursor = hoverThumb ? thumbCursor(hoverThumb.direction) : 'initial';
   }
 
@@ -447,17 +447,17 @@ export class CropFrame extends Block {
   /** @param {boolean} visible */
   toggleThumbs(visible) {
     if (!this._frameThumbs) return;
-
-    for (const thumb of Object.values(this._frameThumbs)) {
-      const { groupNode } = thumb;
-      groupNode.setAttribute(
-        'class',
-        classNames('thumb', {
-          'thumb--hidden': !visible,
-          'thumb--visible': visible,
-        }),
-      );
-    }
+    Object.values(this._frameThumbs)
+      .map(({ groupNode }) => groupNode)
+      .forEach((groupNode) => {
+        groupNode.setAttribute(
+          'class',
+          classNames('thumb', {
+            'thumb--hidden': !visible,
+            'thumb--visible': visible,
+          }),
+        );
+      });
   }
 
   initCallback() {
diff --git a/blocks/CloudImageEditor/src/EditorButtonControl.js b/blocks/CloudImageEditor/src/EditorButtonControl.js
index 287b2fa25..9571dc29d 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) => {
       const titleEl = this._titleEl;
       if (titleEl) {
@@ -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 role="option">
+    <lr-icon set="@name: icon;"></lr-icon>
+    <div class="title" ref="title-el">{{title}}</div>
+  </button>
 `;
diff --git a/blocks/CloudImageEditor/src/EditorFilterControl.js b/blocks/CloudImageEditor/src/EditorFilterControl.js
index a15a88784..4ec49e3f0 100644
--- a/blocks/CloudImageEditor/src/EditorFilterControl.js
+++ b/blocks/CloudImageEditor/src/EditorFilterControl.js
@@ -148,7 +148,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 role="option">
+    <div class="preview" ref="preview-el"></div>
+    <lr-icon ref="icon-el" set="@name: icon; @size: iconSize;"></lr-icon>
+  </button>
 `;
diff --git a/blocks/CloudImageEditor/src/EditorScroller.js b/blocks/CloudImageEditor/src/EditorScroller.js
index d4bccaff2..ccdb9f6c2 100644
--- a/blocks/CloudImageEditor/src/EditorScroller.js
+++ b/blocks/CloudImageEditor/src/EditorScroller.js
@@ -6,16 +6,28 @@ export class EditorScroller extends Block {
   initCallback() {
     super.initCallback();
 
-    this.addEventListener('wheel', (e) => {
-      e.preventDefault();
-      const { 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,
     });
   }
 }
 
-EditorScroller.template = /* HTML */ ' <slot></slot> ';
+EditorScroller.template = /* HTML */ ` <slot></slot> `;
diff --git a/blocks/CloudImageEditor/src/EditorToolbar.js b/blocks/CloudImageEditor/src/EditorToolbar.js
index 7297c04c3..587ec51f1 100644
--- a/blocks/CloudImageEditor/src/EditorToolbar.js
+++ b/blocks/CloudImageEditor/src/EditorToolbar.js
@@ -21,12 +21,11 @@ function renderTabToggle(id) {
   return /* HTML */ `
     <lr-presence-toggle class="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 +35,14 @@ 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="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 role="listbox" aria-orientation="horizontal" class="controls-list_inner" ref="controls-list-${id}"></div>
         </div>
       </lr-editor-scroller>
     </lr-presence-toggle>
@@ -115,6 +118,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 */
@@ -387,15 +394,19 @@ EditorToolbar.template = /* HTML */ `
     </div>
   </div>
   <div class="toolbar-container">
-    <lr-presence-toggle class="sub-toolbar" set="visible: presence.mainToolbar; styles: presence.subTopToolbarStyles">
+    <lr-presence-toggle
+      role="tablist"
+      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>
           ${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">
@@ -403,7 +414,7 @@ EditorToolbar.template = /* HTML */ `
         <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>
+        <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..67d0e0ca6 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].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].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] > .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] > .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] > .wrapper > .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] > .wrapper > .viewport > .image_container > .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] > .wrapper > .viewport > .image_container > .image.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] > .wrapper > .viewport > .image_container > .image.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] > .wrapper > .viewport > .image_container > .image.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] > .wrapper > .viewport > .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] > .wrapper > .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] > .wrapper > .toolbar > .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] > .wrapper > .toolbar > .toolbar_content.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] > .wrapper > .toolbar > .toolbar_content.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] > .wrapper > .viewport > .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] > .wrapper > .viewport > .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] > .wrapper > .viewport > .file_type_outer > .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] > .wrapper > .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] > .wrapper > .network_problems_splash > .network_problems_content {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -292,34 +241,24 @@
   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] > .wrapper > .network_problems_splash > .network_problems_content > .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] > .wrapper > .network_problems_splash > .network_problems_content > .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] > .wrapper > .network_problems_splash > .network_problems_footer {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -382,28 +321,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,8 +363,8 @@ 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 {
@@ -425,7 +376,12 @@ 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);
+  --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] {
@@ -440,39 +396,40 @@ 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);
+  --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 .title,
+lr-editor-operation-control > button .title,
+lr-editor-crop-button-control > button .title,
+lr-editor-filter-control > button .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 .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;
@@ -484,7 +441,7 @@ lr-editor-filter-control > .preview {
 }
 
 lr-editor-filter-control > .original-icon {
-  color: var(--color-text-base);
+  color: var(--color-effect);
   opacity: 0.3;
 }
 
@@ -499,6 +456,7 @@ lr-editor-image-cropper {
   opacity: 0;
   pointer-events: none;
   touch-action: none;
+  color: var(--color-crop-guides);
 }
 
 lr-editor-image-cropper.active_from_editor {
@@ -611,7 +569,7 @@ lr-editor-slider {
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 66px;
+  height: var(--size-panel-heading);
 }
 
 lr-editor-toolbar {
@@ -623,16 +581,16 @@ 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);
   }
 }
 
@@ -697,7 +655,7 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-tog
   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);
 }
@@ -741,7 +699,7 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-tog
 }
 
 lr-editor-toolbar > .toolbar-container > .sub-toolbar > .controls-row > .tab-toggles > .tab-toggle > lr-btn-ui {
-  width: 40px;
+  width: var(--uc-button-size);
 }
 
 lr-editor-toolbar
@@ -753,8 +711,8 @@ lr-editor-toolbar
   > 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 {
@@ -763,14 +721,14 @@ lr-editor-toolbar > .toolbar-container > .sub-toolbar > .tab-content-row > .tab-
   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 {
   display: grid;
   grid-area: inner;
   grid-auto-flow: column;
-  grid-gap: calc((var(--cldtr-gap-min) - 1px) * 3);
+  gap: 6px;
 }
 
 lr-editor-toolbar
@@ -779,7 +737,7 @@ lr-editor-toolbar
   > .tab-content-row
   > .tab-content
   .controls-list_inner:last-child {
-  padding-right: var(--cldtr-gap-max);
+  padding-right: var(--uc-padding);
 }
 
 lr-editor-toolbar .controls-list_last-item {
@@ -807,10 +765,7 @@ lr-editor-toolbar .info-tooltip_wrapper {
 
 lr-editor-toolbar .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;
@@ -832,19 +787,30 @@ lr-editor-toolbar .slider {
   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));
@@ -860,7 +826,7 @@ lr-btn-ui .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);
 }
@@ -885,49 +851,127 @@ lr-btn-ui .icon_hidden {
   margin: 0;
 }
 
-lr-btn-ui.primary {
-  --idle-color-rgb: var(--rgb-primary-accent);
+lr-btn-ui.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.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.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.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.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.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 {
@@ -949,7 +993,7 @@ lr-line-loader-ui .inner {
 lr-line-loader-ui .line {
   width: 100%;
   height: 100%;
-  background-color: var(--color-primary-accent);
+  background-color: var(--uc-primary);
   transform: translateX(-101%);
   transition: transform 1s;
 }
@@ -958,11 +1002,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;
@@ -981,7 +1025,9 @@ 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 {
@@ -1001,7 +1047,7 @@ lr-slider-ui .border-step {
   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 {
@@ -1009,7 +1055,7 @@ lr-slider-ui .minor-step {
   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 {
@@ -1049,19 +1095,12 @@ lr-presence-toggle.hidden {
   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.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..971036316 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) => {
@@ -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 set="@role:aria-role; @aria-controls: aria-controls">
+    <lr-icon set="className: iconCss; @name: icon; @hidden: !icon"></lr-icon>
+    <div class="text">{{text}}</div>
+  </button>
 `;
diff --git a/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js b/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js
index c516afc0a..575aabe53 100644
--- a/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js
+++ b/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js
@@ -1,5 +1,5 @@
-import { Block } from '../../../../../abstract/Block.js';
 import { applyClassNames } from '../../lib/classNames.js';
+import { Block } from '../../../../../abstract/Block.js';
 
 /**
  * @typedef {Object} Style
@@ -55,14 +55,17 @@ export class PresenceToggle extends Block {
 
   initCallback() {
     super.initCallback();
-    this.setAttribute('hidden', '');
+
+    this.classList.toggle('initial', true);
 
     if (!this._externalTransitions) {
       this.classList.add(DEFAULT_STYLE.transition);
     }
 
     this._handleVisible();
-    setTimeout(() => this.removeAttribute('hidden'), 0);
+    setTimeout(() => {
+      this.classList.toggle('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 0cd02cfb8..86944a639 100644
--- a/blocks/CloudImageEditor/src/elements/slider/SliderUi.js
+++ b/blocks/CloudImageEditor/src/elements/slider/SliderUi.js
@@ -173,7 +173,6 @@ SliderUi.template = /* HTML */ `
     class="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..ac2f498be 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>";
\ No newline at end of file
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 6410f84f3..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 626fb32da..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.css b/blocks/Copyright/copyright.css
index 919645431..713c10171 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);
+  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:focus-visible {
+  outline: 1px auto -webkit-focus-ring-color;
 }
 
 lr-copyright .credits:hover {
   opacity: 1;
+  background-color: var(--uc-muted);
 }
diff --git a/blocks/DropArea/DropArea.js b/blocks/DropArea/DropArea.js
index 4c5197168..371632aac 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();
 
@@ -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.openSystemDialog();
+          }
+        } else if (event.type === 'click') {
+          this.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);
     }
   }
diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css
index 636fa1239..2e44584be 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]) .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]) .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]
+:where([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);
+  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] .content-wrapper {
   display: flex;
   flex-direction: column;
 }
 
-lr-drop-area[with-icon] .text {
-  color: var(--clr-txt);
+:where([lr-drop-area])[with-icon] .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] .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 .icon-container,
+:where([lr-drop-area])[with-icon]:hover .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 .icon-container {
+  background-color: var(--uc-primary-transparent);
 }
 
-lr-drop-area[with-icon]
+:where([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);
+  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]
+  > .content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+  .text {
+  color: var(--uc-primary);
 }
 
-lr-drop-area[with-icon]
+:where([lr-drop-area])[with-icon]
   > .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]
+:where([lr-drop-area])[with-icon]
   > .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] > .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] > .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] .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'] > .content-wrapper,
+:where([lr-drop-area])[with-icon][fullscreen][drag-state='near'] > .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'] > .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]) > .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 613c261f4..000000000
--- a/blocks/EditableCanvas/CanMan.js
+++ /dev/null
@@ -1,210 +0,0 @@
-// Canvas Manipulator
-import { applyAttributes, applyStyles } from '@symbiotejs/symbiote';
-const SVGNS = 'http://www.w3.org/2000/svg';
-
-export class CanMan {
-  _syncSvgSize() {
-    const 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) => {
-      const 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,
-    });
-    for (const obj of this._addedObjects) {
-      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() {
-    const 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() {
-    const onStart = (e) => {
-      const 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) => {
-      const 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);
-      const 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 efcf18918..000000000
--- a/blocks/EditableCanvas/EditableCanvas.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { applyStyles } from '@symbiotejs/symbiote';
-import { Block } from '../../abstract/Block.js';
-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) {
-    const img = new Image();
-    const url = URL.createObjectURL(imgFile);
-    img.src = url;
-    this.setImage(img);
-  }
-
-  /** @param {String} url */
-  setImageUrl(url) {
-    const 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 5f8073749..000000000
--- a/blocks/EditableCanvas/EditableCanvasToolbar.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import { Block } from '../../abstract/Block.js';
-import { Color } from '../Color/Color.js';
-import { Range } from '../Range/Range.js';
-import { CanMan } from './CanMan.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} */
-      const btnEl = /** @type {Element} */ (e.target).closest('[action]');
-      if (btnEl) {
-        this.buttons.add(btnEl);
-
-        for (const btn of this.buttons) {
-          if (btn === btnEl) {
-            btn.setAttribute('current', '');
-          } else {
-            btn.removeAttribute('current', '');
-          }
-        }
-      }
-      const 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 4638323f9..000000000
--- a/blocks/EditableCanvas/buttons.js
+++ /dev/null
@@ -1,111 +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) => {
-    // biome-ignore lint/suspicious/noAssignInExpressions: It will be removed soon
-    // biome-ignore lint/style/noParameterAssign: It will be removed soon
-    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 7d2953137..871e63675 100644
--- a/blocks/ExternalSource/ExternalSource.js
+++ b/blocks/ExternalSource/ExternalSource.js
@@ -70,7 +70,7 @@ export class ExternalSource extends UploaderBlock {
     super.initCallback();
     this.registerActivity(this.activityType, {
       onActivate: () => {
-        const { externalSourceType } = /** @type {ActivityParams} */ (this.activityParams);
+        let { externalSourceType } = /** @type {ActivityParams} */ (this.activityParams);
 
         this.set$({
           activityCaption: `${externalSourceType?.[0].toUpperCase()}${externalSourceType?.slice(1)}`,
@@ -147,18 +147,23 @@ export class ExternalSource extends UploaderBlock {
    * @param {string} propName
    */
   getCssValue(propName) {
-    const style = window.getComputedStyle(this);
+    let style = window.getComputedStyle(this);
     return style.getPropertyValue(propName).trim();
   }
 
   /** @private */
   applyStyles() {
-    const colors = {
-      backgroundColor: this.getCssValue('--clr-background-light'),
-      textColor: this.getCssValue('--clr-txt'),
-      shadeColor: this.getCssValue('--clr-shade-lv1'),
-      linkColor: '#157cfc',
-      linkColorHover: '#3891ff',
+    let colors = {
+      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({
@@ -188,7 +193,7 @@ export class ExternalSource extends UploaderBlock {
   mountIframe() {
     /** @type {HTMLIFrameElement} */
     // @ts-ignore
-    const iframe = create({
+    let iframe = create({
       tag: 'iframe',
       attributes: {
         src: this.remoteUrl(),
@@ -238,9 +243,12 @@ ExternalSource.template = /* HTML */ `
       <button type="button" class="cancel-btn 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>
+      <button
+        type="button"
+        class="done-btn 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 3fc43f3f3..388d349f4 100644
--- a/blocks/ExternalSource/buildStyles.js
+++ b/blocks/ExternalSource/buildStyles.js
@@ -1,23 +1,56 @@
+// @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 + `${prop}: ${value};`;
     }, '');
-    return `${acc}${selector}{${propertiesStr}}`;
+    return acc + `${selector}{${propertiesStr}}`;
   }, '');
   return css;
 };
 
-export function buildStyles({ textColor, backgroundColor, linkColor, linkColorHover, shadeColor }) {
-  const 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..53cec0065 100644
--- a/blocks/ExternalSource/external-source.css
+++ b/blocks/ExternalSource/external-source.css
@@ -3,12 +3,15 @@ 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);
 }
@@ -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%);
   }
 }
@@ -40,12 +43,12 @@ lr-external-source .iframe-wrapper {
 
 lr-external-source .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 {
@@ -54,9 +57,9 @@ lr-external-source .back-btn {
 
 lr-external-source .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 e0337f26d..9ff9f7a81 100644
--- a/blocks/FileItem/FileItem.js
+++ b/blocks/FileItem/FileItem.js
@@ -1,13 +1,13 @@
-import { shrinkFile } from '@uploadcare/image-shrink';
 // @ts-check
 import { CancelError, uploadFile } from '@uploadcare/upload-client';
+import { shrinkFile } from '@uploadcare/image-shrink';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { createCdnUrl, createCdnUrlModifiers, createOriginalUrl } from '../../utils/cdn-utils.js';
-import { parseShrink } from '../../utils/parseShrink.js';
 import { fileCssBg } from '../svg-backgrounds/svg-backgrounds.js';
 import { debounce } from '../utils/debounce.js';
 import { generateThumb } from '../utils/resizeImage.js';
+import { parseShrink } from '../../utils/parseShrink.js';
 
 const FileItemState = Object.freeze({
   FINISHED: Symbol(0),
@@ -75,7 +75,7 @@ export class FileItem extends UploaderBlock {
   }
 
   _reset() {
-    for (const sub of this._entrySubs) {
+    for (let sub of this._entrySubs) {
       sub.remove();
     }
 
@@ -90,7 +90,7 @@ export class FileItem extends UploaderBlock {
    * @param {IntersectionObserverEntry[]} entries
    */
   _observerCallback(entries) {
-    const [entry] = entries;
+    let [entry] = entries;
     this._isIntersecting = entry.isIntersecting;
 
     if (entry.isIntersecting && !this._renderedOnce) {
@@ -109,7 +109,7 @@ export class FileItem extends UploaderBlock {
     if (!this._entry) {
       return;
     }
-    const entry = this._entry;
+    let entry = this._entry;
     let state = FileItemState.IDLE;
 
     if (entry.getValue('errors').length > 0) {
@@ -128,17 +128,17 @@ export class FileItem extends UploaderBlock {
     if (!this._entry) {
       return;
     }
-    const entry = this._entry;
+    let entry = this._entry;
 
     if (entry.getValue('fileInfo') && entry.getValue('isImage')) {
-      const size = this.cfg.thumbSize;
-      const thumbUrl = this.proxyUrl(
+      let size = this.cfg.thumbSize;
+      let thumbUrl = this.proxyUrl(
         createCdnUrl(
           createOriginalUrl(this.cfg.cdnCname, this._entry.getValue('uuid')),
           createCdnUrlModifiers(entry.getValue('cdnUrlModifiers'), `scale_crop/${size}x${size}/center`),
         ),
       );
-      const currentThumbUrl = entry.getValue('thumbUrl');
+      let currentThumbUrl = entry.getValue('thumbUrl');
       if (currentThumbUrl !== thumbUrl) {
         entry.setValue('thumbUrl', thumbUrl);
         currentThumbUrl?.startsWith('blob:') && URL.revokeObjectURL(currentThumbUrl);
@@ -152,14 +152,14 @@ export class FileItem extends UploaderBlock {
 
     if (entry.getValue('file')?.type.includes('image')) {
       try {
-        const thumbUrl = await generateThumb(entry.getValue('file'), this.cfg.thumbSize);
+        let thumbUrl = await generateThumb(entry.getValue('file'), this.cfg.thumbSize);
         entry.setValue('thumbUrl', thumbUrl);
       } catch (err) {
-        const color = window.getComputedStyle(this).getPropertyValue('--clr-generic-file-icon');
+        let color = window.getComputedStyle(this).getPropertyValue('--uc-muted-foreground');
         entry.setValue('thumbUrl', fileCssBg(color));
       }
     } else {
-      const color = window.getComputedStyle(this).getPropertyValue('--clr-generic-file-icon');
+      let color = window.getComputedStyle(this).getPropertyValue('--uc-muted-foreground');
       entry.setValue('thumbUrl', fileCssBg(color));
     }
   }
@@ -170,7 +170,7 @@ export class FileItem extends UploaderBlock {
    * @param {(value: any) => void} handler
    */
   _subEntry(prop, handler) {
-    const sub = this._entry.subscribe(
+    let sub = this._entry.subscribe(
       prop,
       /** @param {any} value */ (value) => {
         if (this.isConnected) {
@@ -189,7 +189,7 @@ export class FileItem extends UploaderBlock {
     this._reset();
 
     /** @type {import('../../abstract/TypedData.js').TypedData} */
-    const entry = this.uploadCollection?.read(id);
+    let entry = this.uploadCollection?.read(id);
     this._entry = entry;
 
     if (!entry) {
@@ -251,13 +251,13 @@ export class FileItem extends UploaderBlock {
     this.subConfigValue('useCloudImageEditor', () => this._debouncedCalculateState());
 
     this.onclick = () => {
-      for (const instance of FileItem.activeInstances) {
-        if (instance === this) {
-          instance.setAttribute('focused', '');
+      FileItem.activeInstances.forEach((inst) => {
+        if (inst === this) {
+          inst.setAttribute('focused', '');
         } else {
-          instance.removeAttribute('focused');
+          inst.removeAttribute('focused');
         }
-      }
+      });
     };
 
     this.sub(
@@ -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);
@@ -337,7 +335,7 @@ export class FileItem extends UploaderBlock {
   }
 
   async upload() {
-    const entry = this._entry;
+    let entry = this._entry;
 
     if (!this.uploadCollection.read(entry.uid)) {
       return;
@@ -356,7 +354,7 @@ export class FileItem extends UploaderBlock {
     entry.setValue('errors', []);
 
     try {
-      const abortController = new AbortController();
+      let abortController = new AbortController();
       entry.setValue('abortController', abortController);
 
       const uploadTask = async () => {
@@ -374,7 +372,7 @@ export class FileItem extends UploaderBlock {
           source: entry.getValue('source'),
           onProgress: (progress) => {
             if (progress.isComputable) {
-              const percentage = progress.value * 100;
+              let percentage = progress.value * 100;
               entry.setValue('uploadProgress', percentage);
             }
           },
@@ -386,7 +384,7 @@ export class FileItem extends UploaderBlock {
       };
 
       /** @type {import('@uploadcare/upload-client').UploadcareFile} */
-      const fileInfo = await this.$['*uploadQueue'].add(uploadTask);
+      let fileInfo = await this.$['*uploadQueue'].add(uploadTask);
       entry.setMultipleValues({
         fileInfo,
         isUploading: false,
@@ -436,10 +434,15 @@ FileItem.template = /* HTML */ `
       <span class="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">
+      <button
+        type="button"
+        l10n="@title:file-item-edit-button"
+        class="edit-btn 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="remove-btn mini-btn" set="onclick: onRemove;">
         <lr-icon name="remove-file"></lr-icon>
       </button>
       <button type="button" class="upload-btn mini-btn" set="onclick: onUpload;">
diff --git a/blocks/FileItem/file-item.css b/blocks/FileItem/file-item.css
index 30c2157d8..2a800c41e 100644
--- a/blocks/FileItem/file-item.css
+++ b/blocks/FileItem/file-item.css
@@ -1,23 +1,31 @@
 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;
+  content-visibility: auto;
+  height: var(--uc-file-item-height);
+  contain-intrinsic-size: auto var(--uc-file-item-height);
+  overflow: hidden;
+}
+
+lr-file-item:last-of-type {
+  --uc-file-item-gap: 0;
 }
+
 lr-file-item > .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);
-}
-
-lr-file-item:last-of-type > .inner {
-  margin-bottom: 0;
+  font-size: 0.925em;
+  background-color: var(--uc-muted);
+  border-radius: var(--uc-radius);
+  transition: background-color var(--uc-transition);
 }
 
 lr-file-item > .inner[focused] {
@@ -29,18 +37,18 @@ lr-file-item > .inner[uploading] .edit-btn {
 }
 
 lr-file-item > :where(.inner[failed], .inner[limit-overflow]) {
-  background-color: var(--clr-error-lightest);
+  background-color: var(--uc-destructive);
 }
 
 lr-file-item .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 {
@@ -49,11 +57,10 @@ lr-file-item .file-name-wrapper {
   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 {
@@ -65,36 +72,37 @@ lr-file-item .file-name {
 
 lr-file-item .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 */
+  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.upload-btn {
+  display: none;
 }
 
 lr-file-item .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;
@@ -105,12 +113,8 @@ lr-file-item > .inner:where([failed], [limit-overflow], [finished]) .badge {
   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);
+  background-color: var(--uc-destructive-foreground);
 }
 
 lr-file-item > .inner:where([failed], [limit-overflow]) .file-error {
@@ -124,13 +128,14 @@ lr-file-item .badge lr-icon svg {
 }
 
 lr-file-item .progress-bar {
+  opacity: 0.5;
   top: calc(100% - 2px);
   height: 2px;
 }
 
 lr-file-item .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 b21963313..000000000
--- a/blocks/FilePreview/FilePreview.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Block } from '../../abstract/Block.js';
-import { TRANSPARENT_PIXEL_SRC } from '../../utils/transparentPixelSrc.js';
-import { checkerboardCssBg } from '../svg-backgrounds/svg-backgrounds.js';
-
-export class FilePreview extends Block {
-  init$ = {
-    ...this.init$,
-    checkerboard: false,
-    src: TRANSPARENT_PIXEL_SRC,
-  };
-
-  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) {
-    const 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 8386e40c3..000000000
--- a/blocks/LiveHtml/LiveHtml.js
+++ /dev/null
@@ -1,279 +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();
-
-// biome-ignore lint/complexity/noStaticOnlyClass: It will be removed soon
-class Caret {
-  static getPosition(parentElement) {
-    const 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) {
-      const selection = window.getSelection();
-
-      const range = Caret._createRange(element, {
-        count: chars,
-      });
-
-      if (range) {
-        range.collapse(false);
-        selection.removeAllRanges();
-        selection.addRange(range);
-      }
-    }
-  }
-
-  static _createRange(node, chars, range) {
-    if (!range) {
-      // biome-ignore lint/style/noParameterAssign: It will be removed soon
-      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++) {
-          // biome-ignore lint/style/noParameterAssign: It will be removed soon
-          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;
-      }
-      // biome-ignore lint/style/noParameterAssign: It will be removed soon
-      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() {
-    const offset = Caret.getPosition(this.ref.editor);
-
-    this.ref.editor.textContent = this.ref.editor.textContent;
-
-    let html = this.ref.editor.textContent;
-    const 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
-        const 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()) {
-      const lines = this.innerHTML.split('\n');
-      let commonTabSize = 1000;
-      // biome-ignore lint/complexity/noForEach: It will be removed soon
-      lines.forEach((line) => {
-        if (!line.trim()) {
-          return;
-        }
-        if (!line.startsWith(' ')) {
-          commonTabSize = 0;
-          return;
-        }
-        const 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(' ')) {
-              // biome-ignore lint/style/noParameterAssign: It will be removed soon
-              line = line.replace(' ', '');
-            }
-          }
-          return line;
-        })
-        .join('\n');
-      this.innerHTML = '';
-    }
-    super.connectedCallback();
-  }
-
-  initCallback() {
-    const docImportMap = document.querySelector('script[type="importmap"]');
-    if (docImportMap) {
-      let shimScriptHtml = '';
-      const 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) => {
-            const 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 e911c564a..141b6a5e8 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..ced041b1d 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] + .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] + .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 > .content {
     height: var(--modal-max-content-height);
   }
 }
diff --git a/blocks/ProgressBar/progress-bar.css b/blocks/ProgressBar/progress-bar.css
index 896e55097..7a82eaeb4 100644
--- a/blocks/ProgressBar/progress-bar.css
+++ b/blocks/ProgressBar/progress-bar.css
@@ -12,7 +12,7 @@ lr-progress-bar {
 lr-progress-bar .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:
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.css b/blocks/Range/range.css
index 418a698fc..d190cd664 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 {
diff --git a/blocks/Select/Select.js b/blocks/Select/Select.js
index 036e32a13..3af9dd81c 100644
--- a/blocks/Select/Select.js
+++ b/blocks/Select/Select.js
@@ -34,10 +34,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..236ea9668 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();
diff --git a/blocks/SimpleBtn/simple-btn.css b/blocks/SimpleBtn/simple-btn.css
index 0c8e3a756..3173e637c 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]) .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'] .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'] .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'] .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'] .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 929d0d1f9..36283c08a 100644
--- a/blocks/SourceBtn/SourceBtn.js
+++ b/blocks/SourceBtn/SourceBtn.js
@@ -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>
+    <lr-icon set="@name: iconName"></lr-icon>
+    <div class="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..d208b300d 100644
--- a/blocks/SourceBtn/source-btn.css
+++ b/blocks/SourceBtn/source-btn.css
@@ -1,32 +1,35 @@
-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;
 }
 
@@ -35,7 +38,7 @@ lr-source-btn .txt {
   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/start-from.css b/blocks/StartFrom/start-from.css
index a7e518f3e..889319b44 100644
--- a/blocks/StartFrom/start-from.css
+++ b/blocks/StartFrom/start-from.css
@@ -6,13 +6,27 @@ lr-start-from {
 lr-start-from .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 a1b676b03..000000000
--- a/blocks/Tabs/Tabs.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { create } from '@symbiotejs/symbiote';
-import { Block } from '../../abstract/Block.js';
-import { stringToArray } from '../../utils/stringToArray.js';
-
-export class Tabs extends Block {
-  /** @param {String} tabL10nStr */
-  setCurrentTab(tabL10nStr) {
-    if (!tabL10nStr) {
-      return;
-    }
-    const ctxList = [...this.ref.context.querySelectorAll('[tab-ctx]')];
-    for (const ctxEl of ctxList) {
-      if (ctxEl.getAttribute('tab-ctx') === tabL10nStr) {
-        ctxEl.removeAttribute('hidden');
-      } else {
-        ctxEl.setAttribute('hidden', '');
-      }
-    }
-    for (const 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;
-      }
-      const tabList = stringToArray(val);
-      for (const tabL10nStr of tabList) {
-        const 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/upload-list.css b/blocks/UploadList/upload-list.css
index 842eac64b..01fba9992 100644
--- a/blocks/UploadList/upload-list.css
+++ b/blocks/UploadList/upload-list.css
@@ -4,39 +4,39 @@ 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);
+  height: 32px;
+  padding: 20px;
 }
 
 lr-upload-list .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 {
   display: flex;
-  gap: var(--gap-small);
+  gap: 4px;
   justify-content: space-between;
-  padding: var(--gap-mid);
-  background-color: var(--clr-background-light);
-}
-
-lr-upload-list .toolbar .add-more-btn {
-  padding-left: 0.2em;
+  padding: var(--uc-padding);
+  background-color: var(--uc-background);
 }
 
 lr-upload-list .toolbar-spacer {
@@ -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);
+  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);
+  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 .add-more-btn lr-icon {
+  display: none;
 }
diff --git a/blocks/UrlSource/url-source.css b/blocks/UrlSource/url-source.css
index fa3c9ff33..ba3e33b4d 100644
--- a/blocks/UrlSource/url-source.css
+++ b/blocks/UrlSource/url-source.css
@@ -1,17 +1,21 @@
 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 {
   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;
 }
 
diff --git a/blocks/Video/Video.js b/blocks/Video/Video.js
deleted file mode 100644
index 1168217bf..000000000
--- a/blocks/Video/Video.js
+++ /dev/null
@@ -1,301 +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);
-    const 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
-      const val = Number.parseFloat(e.currentTarget.$.value);
-      this.setVolume(val);
-    },
-    progressClicked: (e) => {
-      const 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) {
-    const attrs = [];
-    for (const attr in desc) {
-      const 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
-    const date = new Date(Math.round(seconds) * 1000);
-    return [date.getMinutes(), date.getSeconds()]
-      .map((n) => {
-        return n < 10 ? `0${n}` : n;
-      })
-      .join(':');
-  }
-
-  /** @private */
-  _initTracks() {
-    for (const track of this._video.textTracks) {
-      track.mode = 'hidden';
-    }
-    if (window.localStorage.getItem(`${Video.is}:captions`)) {
-      this.toggleCaptions();
-    }
-  }
-
-  /** @private */
-  _castAttributes() {
-    const toCast = ['autoplay', 'loop', 'muted'];
-    for (const attr of this.attributes) {
-      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;
-      }
-      const url = this._getUrl(src);
-      this._video.src = url;
-    });
-
-    this.sub('video', async (descPath) => {
-      if (!descPath) {
-        return;
-      }
-      const desc = await (await window.fetch(this._getUrl(descPath))).json();
-
-      if (desc.poster) {
-        this._video.poster = this._getUrl(desc.poster);
-      }
-
-      let html = '';
-      if (desc.sources) {
-        for (const srcDesc of desc.sources) {
-          html += /* HTML */ `<source ${this._desc2attrs(srcDesc)} />`;
-        }
-      }
-
-      if (desc.tracks) {
-        for (const trackDesc of desc.tracks) {
-          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) => {
-      const perc = Math.round(100 * (this._video.currentTime / this._video.duration));
-      this.$.progressCssWidth = `${perc}%`;
-      this.$.currentTime = this._timeFmt(this._video.currentTime);
-    });
-
-    const volume = window.localStorage.getItem(`${Video.is}:volume`);
-    if (volume) {
-      const vol = Number.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 ec4aa7477..9f04c22ef 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..748d2d343 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.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.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.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.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.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.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.primary-btn[disabled], button.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
deleted file mode 100644
index 9188f9785..000000000
--- a/blocks/themes/lr-basic/icons/edit-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="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
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..c5906653f 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>";
\ No newline at end of file
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/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..87d845be8 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.46.0';
diff --git a/index.js b/index.js
index c7cfe32e7..7ebce2c3b 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 bd269c497..3018ca15f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,18 @@
 {
   "name": "@uploadcare/blocks",
-  "version": "0.43.0",
+  "version": "0.46.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@uploadcare/blocks",
-      "version": "0.43.0",
+      "version": "0.46.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/preset-env": "^7.21.4",
@@ -8023,6 +8024,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",
@@ -19473,6 +19488,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 004e0c0e5..58a5df924 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/blocks",
-  "version": "0.43.0",
+  "version": "0.46.0",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",
@@ -133,6 +133,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 e437ddf95..0d2617355 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();
 
diff --git a/solutions/file-uploader/inline/index.css b/solutions/file-uploader/inline/index.css
index 483b908dd..ff3ebcf8d 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 .close-btn {
   display: none;
 }
 
+[lr-file-uploader-inline] lr-copyright .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 .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(.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(.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..3a31992ed 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 .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 > .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 .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 .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 .toolbar .cancel-btn,
+[lr-file-uploader-minimal] lr-upload-list .toolbar .upload-btn,
+[lr-file-uploader-minimal] lr-upload-list .toolbar .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 .toolbar .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 .toolbar .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 .toolbar .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 .toolbar .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 .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 .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 .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 .credits {
+  position: static;
 }
diff --git a/solutions/file-uploader/regular/FileUploaderRegular.js b/solutions/file-uploader/regular/FileUploaderRegular.js
index 8012bc4f7..5c15e67f7 100644
--- a/solutions/file-uploader/regular/FileUploaderRegular.js
+++ b/solutions/file-uploader/regular/FileUploaderRegular.js
@@ -4,6 +4,8 @@ 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();
 
diff --git a/types/jsx.d.ts b/types/jsx.d.ts
index 0c8563162..e1e61b1a9 100644
--- a/types/jsx.d.ts
+++ b/types/jsx.d.ts
@@ -15,45 +15,39 @@ type CommonHtmlAttributes<T> = Partial<
   Pick<React.HTMLAttributes<T>, 'id' | 'children' | 'hidden'> & { class: React.HTMLAttributes<T>['className'] }
 >;
 
-type CustomElement<C, A> = React.DetailedHTMLProps<CommonHtmlAttributes<C>, C> & A;
-
-// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-type UntypedElement = any;
+type CustomElement<C, A = {}> = React.DetailedHTMLProps<CommonHtmlAttributes<C>, C> & A;
 
 declare namespace JSX {
   interface IntrinsicElements {
-    'lr-crop-frame': UntypedElement;
-    'lr-editor-crop-button-control': UntypedElement;
-    'lr-editor-filter-control': UntypedElement;
-    'lr-editor-operation-control': UntypedElement;
-    'lr-editor-image-cropper': UntypedElement;
-    'lr-editor-image-fader': UntypedElement;
-    'lr-editor-scroller': UntypedElement;
-    'lr-editor-slider': UntypedElement;
-    'lr-editor-toolbar': UntypedElement;
-    'lr-lr-btn-ui': UntypedElement;
-    'lr-line-loader-ui': UntypedElement;
-    'lr-presence-toggle': UntypedElement;
-    'lr-slider-ui': UntypedElement;
-    'lr-icon': UntypedElement;
-    'lr-img': UntypedElement;
-    'lr-simple-btn': UntypedElement;
-    'lr-start-from': UntypedElement;
-    'lr-drop-area': UntypedElement;
-    'lr-source-btn': UntypedElement;
-    'lr-source-list': UntypedElement;
-    'lr-file-item': UntypedElement;
-    'lr-modal': UntypedElement;
-    'lr-upload-list': UntypedElement;
-    'lr-url-source': UntypedElement;
-    'lr-camera-source': UntypedElement;
-    'lr-confirmation-dialog': UntypedElement;
-    'lr-progress-bar-common': UntypedElement;
-    'lr-progress-bar': UntypedElement;
-    'lr-editable-canvas': UntypedElement;
-    'lr-external-source': UntypedElement;
-    'lr-tabs': UntypedElement;
-    'lr-cloud-image-editor-activity': UntypedElement;
+    'lr-crop-frame': any;
+    'lr-editor-crop-button-control': any;
+    'lr-editor-filter-control': any;
+    'lr-editor-operation-control': any;
+    'lr-editor-image-cropper': any;
+    'lr-editor-image-fader': any;
+    'lr-editor-scroller': any;
+    'lr-editor-slider': any;
+    'lr-editor-toolbar': any;
+    'lr-lr-btn-ui': any;
+    'lr-line-loader-ui': any;
+    'lr-presence-toggle': any;
+    'lr-slider-ui': any;
+    'lr-icon': any;
+    'lr-img': any;
+    'lr-simple-btn': any;
+    'lr-start-from': any;
+    'lr-drop-area': any;
+    'lr-source-btn': any;
+    'lr-source-list': any;
+    'lr-file-item': any;
+    'lr-modal': any;
+    'lr-upload-list': any;
+    'lr-url-source': any;
+    'lr-camera-source': any;
+    'lr-progress-bar-common': any;
+    'lr-progress-bar': any;
+    'lr-external-source': any;
+    'lr-cloud-image-editor-activity': any;
     'lr-cloud-image-editor-block': CustomElement<
       CloudImageEditorBlock,
       CtxAttributes & ({ uuid: string } | { 'cdn-url': string }) & Partial<{ tabs: string; 'crop-preset': string }>