@uploadcare/file-uploader 0.50.1 → 1.1.0

package/blocks/CloudImageEditor/src/css/icons.css

@@ -1,4 +1,4 @@
-:where([lr-cloud-image-editor]) lr-icon {
+:where([uc-cloud-image-editor]) uc-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -6,7 +6,7 @@
   height: 100%;
 }
 
-:where([lr-cloud-image-editor]) lr-icon svg {
+:where([uc-cloud-image-editor]) uc-icon svg {
   width: calc(var(--uc-button-size) / 2);
   height: calc(var(--uc-button-size) / 2);
 }

package/blocks/CloudImageEditor/src/elements/button/{LrBtnUi.d.ts → BtnUi.d.ts}

@@ -1,4 +1,4 @@
-export class LrBtnUi extends Block {
+export class BtnUi extends Block {
     _iconReversed: boolean;
     _iconSingle: boolean;
     _iconHidden: boolean;
@@ -13,8 +13,8 @@ export class LrBtnUi extends Block {
     _iconCss(): string;
     set reverse(val: any);
 }
-export namespace LrBtnUi {
+export namespace BtnUi {
     let template: string;
 }
 import { Block } from '../../../../../abstract/Block.js';
-//# sourceMappingURL=LrBtnUi.d.ts.map
+//# sourceMappingURL=BtnUi.d.ts.map

package/blocks/CloudImageEditor/src/elements/button/BtnUi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BtnUi.d.ts","sourceRoot":"","sources":["BtnUi.js"],"names":[],"mappings":"AAGA;IAII,uBAA0B;IAC1B,qBAAwB;IACxB,qBAAwB;IAExB;;;;;;;MAQC;IAWH,mBAOC;IAkCD,sBAQC;CACF;;;;sBAhFqB,kCAAkC"}

package/blocks/CloudImageEditor/src/elements/button/{LrBtnUi.js → BtnUi.js}

@@ -1,7 +1,7 @@
 import { Block } from '../../../../../abstract/Block.js';
 import { classNames } from '../../lib/classNames.js';
 
-export class LrBtnUi extends Block {
+export class BtnUi extends Block {
   constructor() {
     super();
 
@@ -80,11 +80,11 @@ export class LrBtnUi extends Block {
   }
 }
 
-LrBtnUi.bindAttributes({ text: 'text', icon: 'icon', reverse: 'reverse', theme: 'theme' });
+BtnUi.bindAttributes({ text: 'text', icon: 'icon', reverse: 'reverse', theme: 'theme' });
 
-LrBtnUi.template = /* HTML */ `
+BtnUi.template = /* HTML */ `
   <button type="button" set="@role:aria-role; @aria-controls: aria-controls">
-    <lr-icon set="className: iconCss; @name: icon; @hidden: !icon"></lr-icon>
+    <uc-icon set="className: iconCss; @name: icon; @hidden: !icon"></uc-icon>
     <div class="uc-text">{{text}}</div>
   </button>
 `;

package/blocks/CloudImageEditor/src/index.d.ts

@@ -8,7 +8,7 @@ export { EditorImageFader } from "./EditorImageFader.js";
 export { EditorScroller } from "./EditorScroller.js";
 export { EditorSlider } from "./EditorSlider.js";
 export { EditorToolbar } from "./EditorToolbar.js";
-export { LrBtnUi } from "./elements/button/LrBtnUi.js";
+export { BtnUi } from "./elements/button/BtnUi.js";
 export { LineLoaderUi } from "./elements/line-loader/LineLoaderUi.js";
 export { PresenceToggle } from "./elements/presence-toggle/PresenceToggle.js";
 export { SliderUi } from "./elements/slider/SliderUi.js";

package/blocks/CloudImageEditor/src/index.js

@@ -8,7 +8,7 @@ export { EditorImageFader } from './EditorImageFader.js';
 export { EditorScroller } from './EditorScroller.js';
 export { EditorSlider } from './EditorSlider.js';
 export { EditorToolbar } from './EditorToolbar.js';
-export { LrBtnUi } from './elements/button/LrBtnUi.js';
+export { BtnUi } from './elements/button/BtnUi.js';
 export { LineLoaderUi } from './elements/line-loader/LineLoaderUi.js';
 export { PresenceToggle } from './elements/presence-toggle/PresenceToggle.js';
 export { SliderUi } from './elements/slider/SliderUi.js';

package/blocks/CloudImageEditor/src/template.js

@@ -4,32 +4,32 @@ import svgIconsSprite from './svg-sprite.js';
 export const TEMPLATE = /* HTML */ `
   ${svgIconsSprite}
   <div class="uc-wrapper uc-wrapper_desktop">
-    <lr-presence-toggle class="uc-network_problems_splash" set="visible: presence.networkProblems;">
+    <uc-presence-toggle class="uc-network_problems_splash" set="visible: presence.networkProblems;">
       <div class="uc-network_problems_content">
         <div class="uc-network_problems_icon">
-          <lr-icon name="sad"></lr-icon>
+          <uc-icon name="sad"></uc-icon>
         </div>
         <div class="uc-network_problems_text">Network error</div>
       </div>
       <div class="uc-network_problems_footer">
-        <lr-btn-ui theme="primary" text="Retry" set="onclick: *on.retryNetwork"></lr-btn-ui>
+        <uc-btn-ui theme="primary" text="Retry" set="onclick: *on.retryNetwork"></uc-btn-ui>
       </div>
-    </lr-presence-toggle>
+    </uc-presence-toggle>
     <div class="uc-viewport">
       <div class="uc-file_type_outer">
         <div class="uc-file_type">{{fileType}}</div>
       </div>
       <div class="uc-image_container" ref="img-container-el">
         <img src="${TRANSPARENT_PIXEL_SRC}" class="uc-image uc-image_visible_from_editor" ref="img-el" />
-        <lr-editor-image-cropper ref="cropper-el"></lr-editor-image-cropper>
-        <lr-editor-image-fader ref="fader-el"></lr-editor-image-fader>
+        <uc-editor-image-cropper ref="cropper-el"></uc-editor-image-cropper>
+        <uc-editor-image-fader ref="fader-el"></uc-editor-image-fader>
       </div>
       <div class="uc-info_pan">{{msg}}</div>
     </div>
     <div class="uc-toolbar">
-      <lr-line-loader-ui set="active: showLoader"></lr-line-loader-ui>
+      <uc-line-loader-ui set="active: showLoader"></uc-line-loader-ui>
       <div class="uc-toolbar_content uc-toolbar_content__editor">
-        <lr-editor-toolbar></lr-editor-toolbar>
+        <uc-editor-toolbar></uc-editor-toolbar>
       </div>
     </div>
   </div>

package/blocks/CloudImageEditor/src/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["util.js"],"names":[],"mappings":"AAGA,2FAeC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["util.js"],"names":[],"mappings":"AAIA,2FAgBC"}

package/blocks/CloudImageEditor/src/util.js

@@ -1,3 +1,4 @@
+import { PACKAGE_NAME, PACKAGE_VERSION } from '../../../env.js';
 import { createCdnUrl, createCdnUrlModifiers } from '../../../utils/cdn-utils.js';
 import { COMMON_OPERATIONS, transformationsToOperations } from './lib/transformationUtils.js';
 
@@ -14,6 +15,7 @@ export function viewerImageSrc(originalUrl, width, transformations) {
       transformationsToOperations(transformations),
       `quality/${quality}`,
       `stretch/off/-/resize/${size}x`,
+      `@clib/${PACKAGE_NAME}/${PACKAGE_VERSION}/uc-cloud-image-editor/`,
     ),
   );
 }

package/blocks/CloudImageEditorActivity/index.css

@@ -1,4 +1,4 @@
-lr-cloud-image-editor-activity {
+uc-cloud-image-editor-activity {
   position: relative;
   display: flex;
   width: 100%;
@@ -7,7 +7,7 @@ lr-cloud-image-editor-activity {
   background-color: var(--uc-background);
 }
 
-[lr-modal] lr-cloud-image-editor-activity {
+[uc-modal] uc-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%);
 }

package/blocks/Config/Config.d.ts

@@ -8,7 +8,7 @@
  *   'secureDeliveryProxyUrlResolver',
  *   'iconHrefResolver',
  *   'fileValidators',
- *   'collectionValidators'
+ *   'collectionValidators',
  * ]}
  */
 export const complexConfigKeys: [

package/blocks/Config/Config.js

@@ -20,7 +20,7 @@ const allConfigKeys = /** @type {(keyof import('../../types').ConfigType)[]} */
  *   'secureDeliveryProxyUrlResolver',
  *   'iconHrefResolver',
  *   'fileValidators',
- *   'collectionValidators'
+ *   'collectionValidators',
  * ]}
  */
 export const complexConfigKeys = [
@@ -30,7 +30,7 @@ export const complexConfigKeys = [
   'secureDeliveryProxyUrlResolver',
   'iconHrefResolver',
   'fileValidators',
-  'collectionValidators'
+  'collectionValidators',
 ];
 
 /** @type {(key: keyof import('../../types').ConfigType) => key is keyof import('../../types').ConfigComplexType} */
@@ -133,7 +133,7 @@ class ConfigClass extends Block {
     this._flushValueToAttribute(key, normalizedValue);
     this._flushValueToState(key, normalizedValue);
 
-    this.debugPrint(`[lr-config] "${key}"`, normalizedValue);
+    this.debugPrint(`[uc-config] "${key}"`, normalizedValue);
   }
 
   /**
@@ -160,13 +160,13 @@ class ConfigClass extends Block {
         JSON.stringify(nextValue) === JSON.stringify(previousValue)
       ) {
         console.warn(
-          `[lr-config] Option "${key}" value is the same as the previous one but the reference is different`,
+          `[uc-config] Option "${key}" value is the same as the previous one but the reference is different`,
         );
         console.warn(
-          `[lr-config] You should avoid changing the reference of the object to prevent unnecessary calculations`,
+          `[uc-config] You should avoid changing the reference of the object to prevent unnecessary calculations`,
         );
-        console.warn(`[lr-config] "${key}" previous value:`, previousValue);
-        console.warn(`[lr-config] "${key}" new value:`, nextValue);
+        console.warn(`[uc-config] "${key}" previous value:`, previousValue);
+        console.warn(`[uc-config] "${key}" new value:`, nextValue);
       }
     }
   }

package/blocks/Config/config.css

@@ -1,3 +1,3 @@
-lr-config {
+uc-config {
   display: none;
 }

package/blocks/Copyright/copyright.css

@@ -1,10 +1,10 @@
-lr-copyright {
+uc-copyright {
   display: flex;
   width: 100%;
   justify-content: center;
 }
 
-lr-copyright .uc-credits {
+uc-copyright .uc-credits {
   all: unset;
   position: absolute;
   bottom: 12px;
@@ -21,11 +21,11 @@ lr-copyright .uc-credits {
     background-color var(--uc-transition);
 }
 
-lr-copyright .uc-credits:focus-visible {
+uc-copyright .uc-credits:focus-visible {
   outline: 1px auto -webkit-focus-ring-color;
 }
 
-lr-copyright .uc-credits:hover {
+uc-copyright .uc-credits:hover {
   opacity: 1;
   background-color: var(--uc-muted);
 }

package/blocks/DropArea/DropArea.d.ts

@@ -7,7 +7,7 @@ export class DropArea extends UploaderBlock {
         isEnabled: boolean;
         isVisible: boolean;
         text: string;
-        "lr-drop-area/registry": null;
+        "uc-drop-area/registry": null;
         '*commonProgress': number;
         '*uploadList': never[];
         '*focusedEntry': null;

package/blocks/DropArea/DropArea.js

@@ -8,11 +8,11 @@ import { asBoolean } from '../Config/normalizeConfigValue.js';
 import { UploadSource } from '../utils/UploadSource.js';
 import { DropzoneState, addDropzone } from './addDropzone.js';
 
-const GLOBAL_CTX_NAME = 'lr-drop-area';
+const GLOBAL_CTX_NAME = 'uc-drop-area';
 const REGISTRY_KEY = `${GLOBAL_CTX_NAME}/registry`;
 
 export class DropArea extends UploaderBlock {
-  static styleAttrs = [...super.styleAttrs, 'lr-drop-area'];
+  static styleAttrs = [...super.styleAttrs, 'uc-drop-area'];
   constructor() {
     super();
 
@@ -251,8 +251,8 @@ DropArea.template = /* HTML */ `
     <div data-default-slot hidden></div>
     <div ref="content-wrapper" class="uc-content-wrapper" set="@hidden: !isVisible">
       <div class="uc-icon-container" set="@hidden: !withIcon">
-        <lr-icon name="default"></lr-icon>
-        <lr-icon name="arrow-down"></lr-icon>
+        <uc-icon name="default"></uc-icon>
+        <uc-icon name="arrow-down"></uc-icon>
       </div>
       <span class="uc-text">{{text}}</span>
     </div>

package/blocks/DropArea/drop-area.css

@@ -1,4 +1,4 @@
-:where([lr-drop-area]) {
+:where([uc-drop-area]) {
   padding: 2px;
   overflow: hidden;
   border: 1px dashed var(--uc-border);
@@ -8,8 +8,8 @@
     border-radius var(--uc-transition);
 }
 
-:where([lr-drop-area]),
-:where([lr-drop-area]) .uc-content-wrapper {
+:where([uc-drop-area]),
+:where([uc-drop-area]) .uc-content-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -17,58 +17,58 @@
   height: 100%;
 }
 
-:where([lr-drop-area]) .uc-text {
+:where([uc-drop-area]) .uc-text {
   position: relative;
   margin: var(--uc-padding);
   color: var(--uc-muted-foreground);
   transition: color var(--uc-transition);
 }
 
-:where([lr-drop-area])[ghost][drag-state='inactive'] {
+:where([uc-drop-area])[ghost][drag-state='inactive'] {
   display: none;
 }
 
-:where([lr-drop-area])[ghost]:not([fullscreen]):is([drag-state='active'], [drag-state='near'], [drag-state='over']) {
+:where([uc-drop-area])[ghost]:not([fullscreen]):is([drag-state='active'], [drag-state='near'], [drag-state='over']) {
   background: var(--uc-background);
 }
 
-:where([lr-drop-area])[with-icon]
+:where([uc-drop-area])[with-icon]
   > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
   :is(.uc-text, .uc-icon-container) {
   color: var(--uc-primary);
 }
 
-:where([lr-drop-area]):is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
+:where([uc-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);
 }
 
-:where([lr-drop-area]):is([drag-state='active'], [drag-state='near']) {
+:where([uc-drop-area]):is([drag-state='active'], [drag-state='near']) {
   opacity: 1;
 }
 
-:where([lr-drop-area])[drag-state='over'] {
+:where([uc-drop-area])[drag-state='over'] {
   border-color: var(--uc-primary);
   opacity: 1;
 }
 
-:where([lr-drop-area])[with-icon] {
+:where([uc-drop-area])[with-icon] {
   min-height: 180px;
 }
 
-:where([lr-drop-area])[with-icon] .uc-content-wrapper {
+:where([uc-drop-area])[with-icon] .uc-content-wrapper {
   display: flex;
   flex-direction: column;
 }
 
-:where([lr-drop-area])[with-icon] .uc-text {
+:where([uc-drop-area])[with-icon] .uc-text {
   color: var(--uc-foreground);
   font-weight: 500;
   font-size: 1.1em;
 }
 
-:where([lr-drop-area])[with-icon] .uc-icon-container {
+:where([uc-drop-area])[with-icon] .uc-icon-container {
   position: relative;
   width: 64px;
   height: 64px;
@@ -82,7 +82,7 @@
     background-color var(--uc-transition);
 }
 
-:where([lr-drop-area])[with-icon] lr-icon {
+:where([uc-drop-area])[with-icon] uc-icon {
   position: absolute;
   width: 32px;
   height: 32px;
@@ -91,53 +91,53 @@
   transition: transform var(--uc-transition);
 }
 
-:where([lr-drop-area])[with-icon] lr-icon:last-child {
+:where([uc-drop-area])[with-icon] uc-icon:last-child {
   transform: translateY(48px);
 }
 
-:where([lr-drop-area])[with-icon]:hover .uc-icon-container,
-:where([lr-drop-area])[with-icon]:hover .uc-text {
+:where([uc-drop-area])[with-icon]:hover .uc-icon-container,
+:where([uc-drop-area])[with-icon]:hover .uc-text {
   color: var(--uc-primary);
 }
 
-:where([lr-drop-area])[with-icon]:hover .uc-icon-container {
+:where([uc-drop-area])[with-icon]:hover .uc-icon-container {
   background-color: var(--uc-primary-transparent);
 }
 
-:where([lr-drop-area])[with-icon]
+:where([uc-drop-area])[with-icon]
   > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
   .uc-icon-container {
   color: var(--uc-primary-foreground);
   background-color: var(--uc-primary);
 }
 
-:where([lr-drop-area])[with-icon]
+:where([uc-drop-area])[with-icon]
   > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
   .uc-text {
   color: var(--uc-primary);
 }
 
-:where([lr-drop-area])[with-icon]
+:where([uc-drop-area])[with-icon]
   > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
-  lr-icon:first-child {
+  uc-icon:first-child {
   transform: translateY(-48px);
 }
 
-:where([lr-drop-area])[with-icon]
+:where([uc-drop-area])[with-icon]
   > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
-  lr-icon:last-child {
+  uc-icon:last-child {
   transform: translateY(0);
 }
 
-:where([lr-drop-area])[with-icon] > .uc-content-wrapper[drag-state='near'] lr-icon:last-child {
+:where([uc-drop-area])[with-icon] > .uc-content-wrapper[drag-state='near'] uc-icon:last-child {
   transform: scale(1.3);
 }
 
-:where([lr-drop-area])[with-icon] > .uc-content-wrapper[drag-state='over'] lr-icon:last-child {
+:where([uc-drop-area])[with-icon] > .uc-content-wrapper[drag-state='over'] uc-icon:last-child {
   transform: scale(1.5);
 }
 
-:where([lr-drop-area])[fullscreen] {
+:where([uc-drop-area])[fullscreen] {
   position: fixed;
   top: 0;
   right: 0;
@@ -152,7 +152,7 @@
   margin: var(--uc-padding);
 }
 
-:where([lr-drop-area])[fullscreen] .uc-content-wrapper {
+:where([uc-drop-area])[fullscreen] .uc-content-wrapper {
   width: 100%;
   max-width: calc(var(--uc-dialog-width) * 0.8);
   height: 180px;
@@ -168,21 +168,21 @@
     transform var(--uc-transition);
 }
 
-:where([lr-drop-area])[with-icon][fullscreen][drag-state='active'] > .uc-content-wrapper,
-:where([lr-drop-area])[with-icon][fullscreen][drag-state='near'] > .uc-content-wrapper {
+:where([uc-drop-area])[with-icon][fullscreen][drag-state='active'] > .uc-content-wrapper,
+:where([uc-drop-area])[with-icon][fullscreen][drag-state='near'] > .uc-content-wrapper {
   transform: translateY(10px);
   opacity: 0;
 }
 
-:where([lr-drop-area])[with-icon][fullscreen][drag-state='over'] > .uc-content-wrapper {
+:where([uc-drop-area])[with-icon][fullscreen][drag-state='over'] > .uc-content-wrapper {
   transform: translateY(0px);
   opacity: 1;
 }
 
-:is(:where([lr-drop-area])[with-icon][fullscreen]) > .uc-content-wrapper lr-icon:first-child {
+:is(:where([uc-drop-area])[with-icon][fullscreen]) > .uc-content-wrapper uc-icon:first-child {
   transform: translateY(-48px);
 }
 
-:where([lr-drop-area])[clickable] {
+:where([uc-drop-area])[clickable] {
   cursor: pointer;
 }

package/blocks/ExternalSource/ExternalSource.js

@@ -239,18 +239,18 @@ export class ExternalSource extends UploaderBlock {
 }
 
 ExternalSource.template = /* HTML */ `
-  <lr-activity-header>
+  <uc-activity-header>
     <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
-      <lr-icon name="back"></lr-icon>
+      <uc-icon name="back"></uc-icon>
     </button>
     <div>
-      <lr-icon set="@name: activityIcon"></lr-icon>
+      <uc-icon set="@name: activityIcon"></uc-icon>
       <span>{{activityCaption}}</span>
     </div>
     <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *historyBack">
-      <lr-icon name="close"></lr-icon>
+      <uc-icon name="close"></uc-icon>
     </button>
-  </lr-activity-header>
+  </uc-activity-header>
   <div class="uc-content">
     <div ref="iframeWrapper" class="uc-iframe-wrapper"></div>
     <div class="uc-toolbar">

package/blocks/ExternalSource/external-source.css

@@ -1,4 +1,4 @@
-lr-external-source {
+uc-external-source {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -7,7 +7,7 @@ lr-external-source {
   overflow: hidden;
 }
 
-[lr-modal] lr-external-source {
+[uc-modal] uc-external-source {
   width: min(
     calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
     calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2)
@@ -16,7 +16,7 @@ lr-external-source {
   max-height: var(--modal-max-content-height);
 }
 
-lr-external-source > .uc-content {
+uc-external-source > .uc-content {
   position: relative;
   display: grid;
   flex: 1;
@@ -24,24 +24,24 @@ lr-external-source > .uc-content {
 }
 
 @media only screen and (max-width: 430px) {
-  lr-external-source {
+  uc-external-source {
     width: calc(100vw - var(--uc-padding) * 2);
     height: var(--modal-content-height-fill, 100%);
   }
 }
 
-lr-external-source iframe {
+uc-external-source iframe {
   display: block;
   width: 100%;
   height: 100%;
   border: none;
 }
 
-lr-external-source .uc-iframe-wrapper {
+uc-external-source .uc-iframe-wrapper {
   overflow: hidden;
 }
 
-lr-external-source .uc-toolbar {
+uc-external-source .uc-toolbar {
   display: grid;
   grid-gap: var(--uc-padding);
   grid-template-columns: max-content 1fr max-content max-content;
@@ -51,11 +51,11 @@ lr-external-source .uc-toolbar {
   border-top: 1px solid var(--uc-border);
 }
 
-lr-external-source .uc-back-btn {
+uc-external-source .uc-back-btn {
   padding-left: 0;
 }
 
-lr-external-source .uc-selected-counter {
+uc-external-source .uc-selected-counter {
   display: flex;
   grid-gap: var(--uc-padding);
   align-items: center;

package/blocks/FileItem/FileItem.js

@@ -426,7 +426,7 @@ FileItem.template = /* HTML */ `
   <div class="uc-inner" set="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
     <div class="uc-thumb" set="style.backgroundImage: thumbUrl">
       <div class="uc-badge">
-        <lr-icon set="@name: badgeIcon"></lr-icon>
+        <uc-icon set="@name: badgeIcon"></uc-icon>
       </div>
     </div>
     <div class="uc-file-name-wrapper">
@@ -440,7 +440,7 @@ FileItem.template = /* HTML */ `
         class="uc-edit-btn uc-mini-btn"
         set="onclick: onEdit; @hidden: !isEditable"
       >
-        <lr-icon name="edit-file"></lr-icon>
+        <uc-icon name="edit-file"></uc-icon>
       </button>
       <button
         type="button"
@@ -448,13 +448,13 @@ FileItem.template = /* HTML */ `
         class="uc-remove-btn uc-mini-btn"
         set="onclick: onRemove;"
       >
-        <lr-icon name="remove-file"></lr-icon>
+        <uc-icon name="remove-file"></uc-icon>
       </button>
       <button type="button" class="uc-upload-btn uc-mini-btn" set="onclick: onUpload;">
-        <lr-icon name="upload"></lr-icon>
+        <uc-icon name="upload"></uc-icon>
       </button>
     </div>
-    <lr-progress-bar class="uc-progress-bar" set="value: progressValue; visible: progressVisible;"> </lr-progress-bar>
+    <uc-progress-bar class="uc-progress-bar" set="value: progressValue; visible: progressVisible;"> </uc-progress-bar>
   </div>
 `;
 FileItem.activeInstances = new Set();