Merge branch '4.0.0-dev' into update-plyr-library

Author: sazedul-haque

.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import { Global, css } from '@emotion/react';
+import { css, Global } from '@emotion/react';
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 import { type Preview } from 'storybook-react-rsbuild';
 

.vscode/settings.json

@@ -28,7 +28,7 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
     "source.fixAll.tslint": "always",
-    "source.organizeImports": "explicit"
+    "source.organizeImports": "never"
   },
   "prettier.enable": true,
   "eslint.enable": true,

assets/core/scss/components/_progress.scss

@@ -12,6 +12,7 @@
 
   &-fill {
     --tutor-progress-width: 0%;
+    --tutor-progress-start: 0%;
     height: 100%;
     width: 100%;
     transform: translateX(calc(var(--tutor-progress-width) - 100%));
@@ -85,7 +86,7 @@
 
 @keyframes tutor-progress-fill-animate {
   from {
-    transform: translateX(-100%);
+    transform: translateX(calc(var(--tutor-progress-start, 0%) - 100%));
   }
   to {
     transform: translateX(calc(var(--tutor-progress-width) - 100%));

assets/core/scss/mixins/_avatars.scss

@@ -15,6 +15,8 @@
 }
 
 @mixin tutor-avatar-image {
+  position: absolute;
+  inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;

assets/core/scss/tokens/_colors.scss

@@ -6,16 +6,16 @@
 // =============================================================================
 
 // Brand Colors
-$tutor-brand-100: #f6f8fe;
-$tutor-brand-200: #e4ebfc;
-$tutor-brand-300: #dbe4fa;
-$tutor-brand-400: #a4bcf4;
-$tutor-brand-500: #4979e8;
-$tutor-brand-600: #3e64de;
-$tutor-brand-700: #2b49ca;
-$tutor-brand-800: #293da4;
-$tutor-brand-900: #263782;
-$tutor-brand-950: #1c234f;
+$tutor-brand-100: var(--tutor-brand-100, #f6f8fe);
+$tutor-brand-200: var(--tutor-brand-200, #e4ebfc);
+$tutor-brand-300: var(--tutor-brand-300, #dbe4fa);
+$tutor-brand-400: var(--tutor-brand-400, #a4bcf4);
+$tutor-brand-500: var(--tutor-brand-500, #4979e8);
+$tutor-brand-600: var(--tutor-brand-600, #3e64de);
+$tutor-brand-700: var(--tutor-brand-700, #2b49ca);
+$tutor-brand-800: var(--tutor-brand-800, #293da4);
+$tutor-brand-900: var(--tutor-brand-900, #263782);
+$tutor-brand-950: var(--tutor-brand-950, #1c234f);
 
 // Gray Colors
 $tutor-gray-1: #ffffff;

assets/core/ts/ComponentRegistry.ts

@@ -1,6 +1,7 @@
+import { type Alpine } from 'alpinejs';
+
 import { type AlpineComponentMeta, type LazyComponentLoader, type ServiceMeta, type TutorCore } from '@Core/ts/types';
 import { makeFirstCharacterUpperCase } from '@Core/ts/utils/string';
-import { type Alpine } from 'alpinejs';
 
 interface RegisterAllOptions {
   components?: AlpineComponentMeta[];

assets/core/ts/components/calendar.ts

@@ -1,10 +1,11 @@
 import { __ } from '@wordpress/i18n';
 import dayjs from 'dayjs';
+import { type Calendar, Calendar as VanillaCalendar, type Options } from 'vanilla-calendar-pro';
 
 import { DateFormats } from '@Core/ts/date-formats';
 import { type AlpineComponentMeta } from '@Core/ts/types';
+
 import { tutorConfig } from '@TutorShared/config/config';
-import { type Calendar, type Options, Calendar as VanillaCalendar } from 'vanilla-calendar-pro';
 
 // @ts-ignore
 import 'vanilla-calendar-pro/styles/index.css';

assets/core/ts/components/file-uploader.ts

@@ -4,6 +4,7 @@ import { type FormControlMethods, type SetValueOptions, type ValidationRules } f
 import { type WPMedia, type WPMediaType } from '@Core/ts/services/WPMedia';
 import { type AlpineComponentMeta } from '@Core/ts/types';
 import { formatBytes } from '@Core/ts/utils/format';
+
 import { tutorConfig } from '@TutorShared/config/config';
 
 type FileUploaderVariant = 'file-uploader' | 'image-uploader';

assets/core/ts/components/icon.ts

@@ -1,4 +1,5 @@
 import { type AlpineComponentMeta } from '@Core/ts/types';
+
 import { tutorConfig } from '@TutorShared/config/config';
 
 interface IconCacheEntry {

assets/core/ts/components/password-input.ts

@@ -1,6 +1,7 @@
-import { type AlpineComponentMeta } from '@Core/ts/types';
 import { __ } from '@wordpress/i18n';
 
+import { type AlpineComponentMeta } from '@Core/ts/types';
+
 export interface PasswordInputProps {
   showStrength?: boolean;
   minStrength?: number;