@ozdao/martyrs 0.2.570 → 0.2.572

package/dist/{web-CH5wzMHy.js → web-BqTV9va1.js}

@@ -1,4 +1,4 @@
-import { W as p } from "./main-BFvlam0J.js";
+import { W as p } from "./main-BfEQkhXS.js";
 class f extends p {
   constructor() {
     super(...arguments), this.group = "CapacitorStorage";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/martyrs",
-  "version": "0.2.570",
+  "version": "0.2.572",
   "description": "Fullstack framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",
@@ -72,8 +72,8 @@
     "build:builder:rspack": "rspack --config rspack.builder.config.js"
   },
   "dependencies": {
-    "@capacitor/core": "7.0.1",
-    "@capacitor/preferences": "7.0.0",
+    "@capacitor/core": "7.4.4",
+    "@capacitor/preferences": "7.0.2",
     "@googlemaps/google-maps-services-js": "3.4.0",
     "@vitejs/plugin-vue": "6.0.1",
     "bignumber.js": "9.1.2",
@@ -97,17 +97,15 @@
     "@aaroon/workbox-rspack-plugin": "0.3.2",
     "@rollup/plugin-commonjs": "28.0.3",
     "@rsdoctor/rspack-plugin": "0.4.13",
-    "@rspack/cli": "1.2.8",
-    "@rspack/core": "1.2.8",
+    "@rspack/cli": "1.5.3",
+    "@rspack/core": "1.5.3",
     "connect-history-api-fallback": "2.0.0",
-    "css-minimizer-webpack-plugin": "7.0.2",
+    "css-minimizer-webpack-plugin": "7.0.0",
     "dotenv-webpack": "8.1.0",
-    "glob-all": "3.3.1",
     "mustache": "4.2.0",
     "null-loader": "4.0.1",
     "postcss-import": "16.1.0",
     "postcss-url": "10.1.3",
-    "purgecss-webpack-plugin": "7.0.2",
     "rimraf": "6.0.1",
     "sass": "1.85.1",
     "webpack": "5.98.0",

package/src/builder/modes/ssr.prod.js

@@ -55,6 +55,7 @@ export default function createSsrProdServer(projectRoot, configs, createServer)
       const { html, meta, state, statusCode, usedModules, loadedModules } = await _renderApp({
         url: req.originalUrl,
         cookies: req.cookies,
+        headers: req.headers,
         languages: req.acceptsLanguages(),
         ssrContext
       });

package/src/builder/modes/ssr.rspack.dev.js

@@ -27,84 +27,70 @@ export default function createSsrDevServer(projectRoot, configs, createServer) {
   const measure1 = performance.getEntriesByName('loading-1')[0];
   console.log(`[LOADING 1] Compilers initialized in ${measure1?.duration?.toFixed(2)}ms`);
 
-  const createDevRenderer = (onUpdate) => {
-    const createHotReloadingServerRenderer = () => {
-      const progressPlugin = new ProgressPlugin((percentage, message, ...args) => {});
+  // SSR watcher и renderApp выносим наружу чтобы создать только ОДИН раз
+  let renderApp = null;
+  let ssrWatching = null;
 
-      ssr.plugins = ssr.plugins || [];
-      ssr.plugins.push(progressPlugin);
-      
-      let renderApp = null;
+  // [LOADING 2] Starting SSR compilation watch
+  performance.mark('loading-2-start');
+  console.log('[LOADING 2] Starting SSR compilation watch...');
 
-      // [LOADING 2] Starting SSR compilation watch
-      performance.mark('loading-2-start');
-      console.log('[LOADING 2] Starting SSR compilation watch...');
+  ssrWatching = ssrCompiler.watch(
+    {
+      "info-verbosity": "none",
+    },
+    async (error, stats) => {
+      if (error) {
+        console.error(chalk.red("Server critical error"));
+        console.error(JSON.stringify(error, null, 2));
+        throw error;
+      }
 
-      ssrCompiler.watch(
-        {
-          "info-verbosity": "none",
-        },
-        async (error, stats) => {
-          if (error) {
-            console.error(chalk.red("Server critical error"));
-            console.error(JSON.stringify(error, null, 2));
-            throw error;
+      const jsonStats = stats.toJson();
+
+      if (stats.hasErrors()) {
+        console.error(chalk.red("❌ Ошибка компиляции"));
+
+        jsonStats.errors.forEach((err, index) => {
+          console.error(chalk.red(`\n=== ОШИБКА ${index + 1} ===`));
+
+          // Основное сообщение ошибки
+          if (err.message) {
+            let message = err.message.replace(/\u001b\[[0-9;]*m/g, '');
+            console.error(chalk.red(message));
           }
 
-          const jsonStats = stats.toJson();
-
-          if (stats.hasErrors()) {
-            console.error(chalk.red("❌ Ошибка компиляции"));
-            
-            jsonStats.errors.forEach((err, index) => {
-              console.error(chalk.red(`\n=== ОШИБКА ${index + 1} ===`));
-              
-              // Основное сообщение ошибки
-              if (err.message) {
-                let message = err.message.replace(/\u001b\[[0-9;]*m/g, '');
-                console.error(chalk.red(message));
-              }
-              
-              // ФАЙЛ ГДЕ ОШИБКА
-              if (err.moduleName) {
-                console.error(chalk.yellow(`📄 ФАЙЛ: ${err.moduleName}`));
-              }
-              
-              console.error(''); // пустая строка для разделения
-            });
-            
-            return;
+          // ФАЙЛ ГДЕ ОШИБКА
+          if (err.moduleName) {
+            console.error(chalk.yellow(`📄 ФАЙЛ: ${err.moduleName}`));
           }
 
-          
-          const { entrypoints, outputPath } = jsonStats;
-          const { main: { assets: [mainChunkPath] } } = entrypoints;
-          const mainModulePath = path.resolve(outputPath, mainChunkPath.name);
-          
-          // Dynamic import for ESM compatibility with cache busting
-          // IMPORTANT: Add timestamp to force reimport after recompilation
-          const module = await import(`${mainModulePath}?t=${Date.now()}`);
-          renderApp = module._renderApp;
-
-          // [LOADING 3] SSR module successfully compiled
-          performance.mark('loading-3-end');
-          performance.measure('loading-3', 'loading-2-start', 'loading-3-end');
-          const measure3 = performance.getEntriesByName('loading-3')[0];
-          console.log(`[LOADING 3] SSR module compiled in ${measure3?.duration?.toFixed(2)}ms`);
-        }
-      );
-      
-      return async (stuff) => {
-        if (!renderApp) {
-          throw new Error('SSR module not compiled yet');
-        }
-        const result = await renderApp(stuff);
-        return result;
-      };
-    };
+          console.error(''); // пустая строка для разделения
+        });
 
-    const renderApp = createHotReloadingServerRenderer();
-    const renderHtml = createHtmlRenderer(onUpdate);
+        return;
+      }
+
+
+      const { entrypoints, outputPath } = jsonStats;
+      const { main: { assets: [mainChunkPath] } } = entrypoints;
+      const mainModulePath = path.resolve(outputPath, mainChunkPath.name);
+
+      // Dynamic import for ESM compatibility with cache busting
+      // IMPORTANT: Add timestamp to force reimport after recompilation
+      const module = await import(`${mainModulePath}?t=${Date.now()}`);
+      renderApp = module._renderApp;
+
+      // [LOADING 3] SSR module successfully compiled
+      performance.mark('loading-3-end');
+      performance.measure('loading-3', 'loading-2-start', 'loading-3-end');
+      const measure3 = performance.getEntriesByName('loading-3')[0];
+      console.log(`[LOADING 3] SSR module compiled in ${measure3?.duration?.toFixed(2)}ms`);
+    }
+  );
+
+  const createDevRenderer = () => {
+    const renderHtml = createHtmlRenderer();
 
     return async (stuff, { stats, outputFileSystem }) => {
       // [LOADING 4] Starting renderApp
@@ -226,9 +212,10 @@ export default function createSsrDevServer(projectRoot, configs, createServer) {
     cachedStatsJson = stats.toJson({
       assets: true,
       chunks: true,
-      modules: true,
+      modules: false,
       entrypoints: true,
-      chunkModules: true
+      chunkModules: false,
+      assetsByChunkName: true,
     });
   });
 
@@ -236,12 +223,17 @@ export default function createSsrDevServer(projectRoot, configs, createServer) {
     publicPath: client.output.publicPath,
     serverSideRender: true,
     stats: {
-      children: true,
+      preset: 'normal',
       assets: true,
-      chunks: true,
-      modules: true,
+      assetsSpace: 15,
+      chunks: false,
+      chunkModules: false,
+      modules: false,
+      children: false,
       entrypoints: true,
-      chunkModules: true
+      timings: true,
+      colors: true,
+      groupAssetsByPath: true,
     },
   });
 
@@ -266,14 +258,7 @@ export default function createSsrDevServer(projectRoot, configs, createServer) {
 
     // SSR client-side compilation
     if (!rendererInstance) {
-      rendererInstance = createDevRenderer(() => {
-        clientCompiler.hooks.done.tap("reload", () => {
-          setTimeout(() => {
-            // const client = await import("webpack-hot-middleware/client");
-            // client?.reload();
-          }, 500);
-        });
-      });
+      rendererInstance = createDevRenderer();
     }
 
     // Serve SSR content for all routes
@@ -282,6 +267,7 @@ export default function createSsrDevServer(projectRoot, configs, createServer) {
         {
           url: req.originalUrl,
           cookies: req.cookies,
+          headers: req.headers,
           languages: req.acceptsLanguages(),
         },
         res.locals.webpack.devMiddleware // Update to rspack middleware context
@@ -311,5 +297,17 @@ export default function createSsrDevServer(projectRoot, configs, createServer) {
     }
   };
 
+  // Cleanup watchers on process exit
+  process.on('SIGINT', () => {
+    console.log('\nClosing watchers...');
+    if (ssrWatching) ssrWatching.close(() => {});
+    process.exit(0);
+  });
+
+  process.on('SIGTERM', () => {
+    if (ssrWatching) ssrWatching.close(() => {});
+    process.exit(0);
+  });
+
   return startServer;
 }

package/src/builder/rspack/rspack.config.base.js

@@ -5,6 +5,7 @@ import { CleanWebpackPlugin } from "clean-webpack-plugin";
 import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import Dotenv from 'dotenv-webpack';
+import { MartyrsJitPlugin } from '../../jit/index.js';
 
 export default (projectRoot) => {
   return {
@@ -119,6 +120,12 @@ export default (projectRoot) => {
     },
     plugins: [
       ...(process.env.BUNDLE_ANALYZER ? [new RsdoctorRspackPlugin(), new BundleAnalyzerPlugin()] : []),
+      // Martyrs JIT CSS Engine
+      new MartyrsJitPlugin({
+        include: ['src', 'martyrs'],
+        extensions: ['.vue', '.js', '.jsx', '.ts', '.tsx'],
+        verbose: process.env.NODE_ENV !== 'production',
+      }),
       new VueLoaderPlugin(),
       // Используем CssExtractRspackPlugin в обоих режимах
       new rspack.CssExtractRspackPlugin({

package/src/builder/rspack/rspack.config.ssr.client.js

@@ -1,10 +1,8 @@
 import path from "path";
-import glob from 'glob-all';
 import { rspack } from '@rspack/core';
 import { merge } from "webpack-merge";
 import { StatsWriterPlugin } from "webpack-stats-plugin";
 import { GenerateSW, InjectManifest } from '@aaroon/workbox-rspack-plugin';
-import { PurgeCSSPlugin } from "purgecss-webpack-plugin";
 import { RspackManifestPlugin } from 'rspack-manifest-plugin';
 import baseConfig from './rspack.config.base.js';
 
@@ -49,47 +47,13 @@ export default (projectRoot) => {
           all: false,
           assets: true,
           chunks: true,
-          modules: true,
+          modules: false,        // не нужен - используем assetsByChunkName
           entrypoints: true,
-          chunkModules: true,
-          assetsByChunkName: true
+          chunkModules: false,   // экономит ~20MB
+          assetsByChunkName: true,
+          publicPath: true,
         }
       }),
-      new PurgeCSSPlugin({
-        paths: glob.sync([
-          path.join(projectRoot, 'src/**/*.vue'),
-          path.join(projectRoot, 'src/**/*.js'),
-          path.join(projectRoot, 'martyrs/src/**/*.vue'),
-          path.join(projectRoot, 'martyrs/src/**/*.js'),
-          path.join(projectRoot, '/node_modules/@ozdao/martyrs/**/*.css'),
-          path.join(projectRoot, '/node_modules/@ozdao/martyrs/**/*.scss'),
-          path.join(projectRoot, '/node_modules/@ozdao/martyrs/src/**/*.vue'),
-          path.join(projectRoot, '/node_modules/@ozdao/martyrs/src/**/*.js'),
-          path.join(projectRoot, '/node_modules/@vuepic/vue-datepicker/**/*.js')
-        ]),
-        safelist: { 
-          standard: ["safelisted", /^html/, /^:root/],
-          deep: [/^safelisted-deep-/, /^html/, /^:root/],
-            greedy: [/^data-v-/, /\[data-v-.*\]/, /\[data-v-[a-zA-Z0-9]*\]/] 
-        },
-        rejected: true, 
-        extractors: [
-          {
-            extractor: (content) => {
-              // Ищем классы и селекторы с префиксами Tailwind
-              const normalClasses = content.match(/[A-Za-z0-9-_:/]+/g) || [];
-              
-              // Дополнительно ищем Vue атрибуты data-v-*
-              // Это важно для правильного распознавания scoped стилей
-              const scopedAttrs = content.match(/\[data-v-[a-zA-Z0-9]*\]/g) || [];
-              
-              // Объединяем результаты
-              return [...normalClasses, ...scopedAttrs];
-            },
-            extensions: ['vue', 'js', 'css', 'scss'],
-          },
-        ],
-      }),
       // PWA PWA PWA PWA PWA
       // Simple RspackManifestPlugin configuration
       new RspackManifestPlugin({
@@ -206,12 +170,23 @@ export default (projectRoot) => {
       ],
     },
     stats: {
+      preset: 'normal',
       assets: true,
-      chunks: true,
-      modules: true,
-      ids: true,
+      assetsSpace: 15,
+      chunks: false,
+      chunkModules: false,
+      modules: false,
+      children: false,
       entrypoints: true,
-      chunkModules: true
+      timings: true,
+      colors: true,
+      version: true,
+      hash: false,
+      groupAssetsByChunk: false,
+      groupAssetsByEmitStatus: false,
+      groupAssetsByInfo: false,
+      groupAssetsByPath: true,
+      groupModulesByPath: false,
     },
   };
   return merge(baseConfig(projectRoot), config);

package/src/builder/templates/page.js

@@ -1,6 +1,27 @@
 export default `
   <html {{{ meta.htmlAttrs }}}>
     <head {{{ meta.headAttrs }}}>
+      <script>
+        // Blocking theme script для SPA (SSR уже добавил атрибуты через meta.htmlAttrs)
+        (function() {
+          var root = document.documentElement;
+          if (root.hasAttribute('data-theme')) return;
+          try {
+            var theme = (document.cookie.match(/theme=([^;]+)/) || [])[1];
+            if (theme === 'dark') {
+              root.classList.add('dark-theme');
+              root.setAttribute('data-theme', 'dark');
+              root.setAttribute('color-scheme', 'dark');
+            } else if (theme === 'light') {
+              root.classList.add('light-theme');
+              root.setAttribute('data-theme', 'light');
+              root.setAttribute('color-scheme', 'light');
+            } else {
+              root.setAttribute('color-scheme', 'light dark');
+            }
+          } catch(e) {}
+        })();
+      </script>
       {{{ meta.headTags }}}
       
       <meta charset="UTF-8">

package/src/components/Block/Block.vue

@@ -3,7 +3,7 @@
     class="bg-light pd-medium radius-medium"
   >
   	<div v-if="title || actions" class="mn-b-small flex-v-center flex-nowrap flex">
-  		<h4 v-if="title" class="mn-r-thin t-medium">{{title}}</h4>
+  		<h4 v-if="title" class="mn-r-thin fw-medium">{{title}}</h4>
   			
   		<button 
   			v-for="action in actions" 

package/src/components/BottomSheet/BottomSheet.vue

@@ -18,7 +18,7 @@
         @mouseup="endDrag"
         @touchend="endDrag"
         @mouseleave="endDrag"
-        class="bs-black pd-small br-b br-solid br-light pos-relative bg-white flex-center flex z-index-2"
+        class="bs-black pd-small br-b-1px br-light pos-relative bg-white flex-center flex z-index-2"
       >
         <div class="radius-extra pd-nano w-3r h-1r bg-light"></div>
       </div>

package/src/components/Calendar/Calendar.vue

@@ -527,7 +527,7 @@
 
 <template>
   <div class="t-noselect calendar" :aria-disabled="disabled"> 
-     <div v-if="allowRange && !disablePastDates" class="br-b br-solid br-grey-transp-25 gap-thin flex flex-nowrap pd-thin">
+     <div v-if="allowRange && !disablePastDates" class="br-b-1px br-grey-transp-25 gap-thin flex flex-nowrap pd-thin">
       <button @click="selectToday" class="font-second t-nowrap pd-thin bg-white radius-small">Today</button>
       <button @click="selectLastWeek" class="font-second t-nowrap pd-thin bg-white radius-small">Last Week</button>
       <button @click="selectLastMonth" class="font-second t-nowrap pd-thin bg-white radius-small">Last Month</button>
@@ -539,7 +539,7 @@
           <path d="M0.610352 10.0068C0.615885 9.81315 0.654622 9.63607 0.726562 9.47559C0.798503 9.3151 0.90918 9.16016 1.05859 9.01074L9.37598 0.958984C9.61393 0.721029 9.90723 0.602051 10.2559 0.602051C10.4883 0.602051 10.6986 0.657389 10.8867 0.768066C11.0804 0.878743 11.2326 1.02816 11.3433 1.21631C11.4595 1.40446 11.5176 1.61475 11.5176 1.84717C11.5176 2.19027 11.3875 2.49186 11.1274 2.75195L3.60693 9.99854L11.1274 17.2534C11.3875 17.519 11.5176 17.8206 11.5176 18.1582C11.5176 18.3962 11.4595 18.6092 11.3433 18.7974C11.2326 18.9855 11.0804 19.1349 10.8867 19.2456C10.6986 19.3618 10.4883 19.4199 10.2559 19.4199C9.90723 19.4199 9.61393 19.2982 9.37598 19.0547L1.05859 11.0029C0.903646 10.8535 0.790202 10.6986 0.718262 10.5381C0.646322 10.3721 0.610352 10.195 0.610352 10.0068Z" :fill="isPrevMonthDisabled ? '#303030' : '#007AFF'"/>
         </svg>
       </button>
-      <span class="t-semi">{{ monthYear }}</span>
+      <span class="fw-semi">{{ monthYear }}</span>
       <button @click.stop="nextMonth" class="aspect-1x1 pd-thin bg-white radius-extra">
         <svg class="i-regular " xmlns="http://www.w3.org/2000/svg" width="11" height="20" viewBox="0 0 11 20" fill="none">
           <path d="M10.9072 10.0151C10.9017 10.2088 10.863 10.3859 10.791 10.5464C10.7191 10.7069 10.6084 10.8618 10.459 11.0112L2.1416 19.063C1.90365 19.3009 1.61035 19.4199 1.26172 19.4199C1.0293 19.4199 0.81901 19.3646 0.630859 19.2539C0.437175 19.1432 0.284994 18.9938 0.174316 18.8057C0.0581055 18.6175 8.85326e-08 18.4072 1.08852e-07 18.1748C1.38846e-07 17.8317 0.130046 17.5301 0.390137 17.27L7.91065 10.0234L0.390138 2.76855C0.130047 2.50293 1.5053e-06 2.20133 1.53481e-06 1.86377C1.55561e-06 1.62581 0.058107 1.41276 0.174318 1.22461C0.284995 1.03646 0.437176 0.887043 0.630861 0.776366C0.819012 0.660155 1.0293 0.60205 1.26172 0.60205C1.61035 0.60205 1.90365 0.723795 2.1416 0.967284L10.459 9.01904C10.6139 9.16846 10.7274 9.3234 10.7993 9.48389C10.8713 9.6499 10.9072 9.82699 10.9072 10.0151Z" :fill="isPrevMonthDisabled ? '#303030' : '#007AFF'"/>
@@ -578,7 +578,7 @@
     </div>
 
     <!-- Time selection -->
-    <div v-if="enableTime" class="pd-thin br-t br-solid br-grey-transp-25 flex gap-thin">
+    <div v-if="enableTime" class="pd-thin br-t-1px br-grey-transp-25 flex gap-thin">
       <input
         type="number"
         :value="displayHours"
@@ -600,9 +600,9 @@
     </div>
 
     <!-- Selected date and actions -->
-    <div v-if="showSelected" class="pd-thin br-t br-solid br-grey-transp-25 flex flex-v-center gap-thin">
+    <div v-if="showSelected" class="pd-thin br-t-1px br-grey-transp-25 flex flex-v-center gap-thin">
       <span class="t-transp">selected:</span>
-      <span class="flex-1">{{ formattedSelectedDate || '---' }}</span>
+      <span class="flex-child-1">{{ formattedSelectedDate || '---' }}</span>
       <button @click="onCancel" class="pd-small radius-small bg-white">cancel</button>
       <button @click="onSelect" class="pd-small radius-small bg-black t-white">select</button>
     </div>

package/src/components/Checkbox/Checkbox.vue

@@ -55,7 +55,7 @@
     <div 
       class="cursor-pointer mn-l-thin flex-center field-wrapper"
       :class="{
-        'transition-elastic pd-thin h-2r w-4r radius-extra': mode === 'switch',
+        'ease-elastic pd-thin h-2r w-4r radius-extra': mode === 'switch',
         'w-2r h-2r radius-small': mode === 'checkbox',
         'bg-dark': !(Array.isArray(radio) ? radio.includes(value) : radio) && theme === 'dark' && mode === 'switch',
         'br-dark': theme === 'dark' && mode === 'checkbox',
@@ -67,7 +67,7 @@
       <!-- Switch toggle circle -->
       <div 
         v-if="mode === 'switch'"
-        class="transition-linear w-1r h-1r radius-extra bg-white"
+        class="ease-linear w-1r h-1r radius-extra bg-white"
         :class="{
           'mn-r-auto': !(Array.isArray(radio) ? radio.includes(value) : radio),
           'mn-l-auto': Array.isArray(radio) ? radio.includes(value) : radio,

package/src/components/Chips/Chips.vue

@@ -7,14 +7,14 @@
 			v-if="chips?.length"
 		  v-for="(chip,index) in chips" 
 		  :class="'p-regular font-main'"
-		 	class="mn-r-nano d-inline-block w-max p-regular pd-thin radius-thin t-medium bg-main" 
+		 	class="mn-r-nano d-inline-block w-max p-regular pd-thin radius-thin fw-medium bg-main" 
 		>
 			{{chip.text ? chip.text : chip}}
 		</p>
 
 		<div 
 			v-else
-			class="pd-b-micro pd-t-micro pd-r-thin pd-l-thin radius-small t-semi bg-white" 
+			class="pd-b-micro pd-t-micro pd-r-thin pd-l-thin radius-small fw-semi bg-white" 
 		>
 			<slot></slot>
 		</div>

package/src/components/Completion/Completion.vue

@@ -4,7 +4,7 @@
       <h4 class="t-nowrap  ">
         {{ text }}
 
-      <span class="uppercase radius-big t-nowrap t-medium t-white bg-black w-max pd-micro pd-l-thin pd-r-small">
+      <span class="uppercase radius-big t-nowrap fw-medium t-white bg-black w-max pd-micro pd-l-thin pd-r-small">
         {{ percentage || completionPercentage }}%
       </span>
 
@@ -19,7 +19,7 @@
         }"
       >
 
-        <span class="uppercase radius-big t-nowrap t-medium t-white bg-black w-max pd-micro pd-l-thin pd-r-small">
+        <span class="uppercase radius-big t-nowrap fw-medium t-white bg-black w-max pd-micro pd-l-thin pd-r-small">
           {{ text_cta }}
         </span>
       

package/src/components/Countdown/Countdown.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="gap-thin flex-nowrap flex flex-center">
-    <div v-if="isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-medium bg-blur-small bg-white-transp-5 radius-small">
+    <div v-if="isTimeOver" class="flex-child-grow-1  flex-shrink-0 flex-child-basis-auto pd-medium bg-blur-small bg-white-transp-5 radius-small">
       <p class="p-small t-transp">Offer is over</p>
     </div>
 
-    <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
+    <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
     	<p class="p-medium">{{ days }}</p>
     	<p class="p-small t-transp">Days</p>
     </div>
-     <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
+     <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
     	<p class="p-medium">{{ hours }}</p>
     	<p class="p-small t-transp">hours</p>
     </div>
-     <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
+     <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
     	<p class="p-medium">{{ minutes }}</p>
     	<p class="p-small t-transp">minutes</p>
     </div>
-     <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
+     <div  v-if="!isTimeOver" class="flex-child-grow-1  flex-shrink-0 flex-child-basis-auto pd-thin bg-blur-small bg-white-transp-5 radius-small">
     	<p class="p-medium">{{ seconds }}</p>
     	<p class="p-small t-transp">seconds</p>
     </div>

package/src/components/DatePicker/DatePicker.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div 
-      class="w-100 scroller o-x-scroll o-y-visible scroll-snap-type-x-mandatory scroll-pd-regular scroll-hide flex-nowrap flex" 
+      class="w-100 scroller o-x-scroll o-y-visible scroll-snap-x-mandatory scroll-pd-regular scroll-hide flex-nowrap flex" 
       ref="scrollContainer"
     >
       <template v-for="(date, index) in dates" :key="date.toString()">
@@ -13,7 +13,7 @@
           <span class="t-transp t-noselect p-small mn-b-thin">
             {{ String(date.getMonth() + 1).padStart(2, '0') }}/{{ date.getFullYear() }}
           </span>
-          <span class="t-noselect t-semi">
+          <span class="t-noselect fw-semi">
             {{ date.toLocaleDateString(props.locale || 'en', { month: 'short' }).toUpperCase() }}
           </span>
         </div>
@@ -25,13 +25,13 @@
             'bg-main t-white': selectedDate && selectedDate.toDateString() === date.toDateString(),
             'bg-second t-white': isHighlighted(date)
           }"
-          class="transition-ease-in-out hover-bg-light cursor-pointer o-y-visible scroll-snap-align-start mn-r-thin mn-l-thin pd-thin radius-thin flex-column flex-center flex"
+          class="ease-in-out hover:bg-light cursor-pointer o-y-visible scroll-snap-start mn-r-thin mn-l-thin pd-thin radius-thin flex-column flex-center flex"
         >
           <span class="t-transp t-noselect p-small mn-b-thin">
             {{ dayLetter(date) }}
           </span>
           <span 
-            class="t-noselect t-semi  day-number"
+            class="t-noselect fw-semi  day-number"
           >
             {{ date.getDate() }}
           </span>

package/src/components/EditImages/EditImages.vue

@@ -12,7 +12,7 @@
 		</VueDraggableNext>
     <div
       v-if="localImages.length > 0" 
-      class="i-extra uppercase flex-center flex radius-small o-hidden br-solid br-main br-2px pd-small"
+      class="i-extra uppercase flex-center flex radius-small o-hidden br-main br-2px pd-small"
       >
        <UploadImageMultiple   
         @update:images="onImagesUpdate"

package/src/components/Feed/Feed.old.vue

@@ -23,7 +23,7 @@
         props: { date: date }
       }" 
       :class="date.class || 'bg-light'"
-      class="flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-medium"
+      class="flex-child flex-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-medium"
       :align="search ? 'right' : 'left'"
     >
 

package/src/components/Feed/Feed.vue

@@ -23,7 +23,7 @@
         props: { date: date }
       }" 
       :class="date.class || 'bg-light'"
-      class="flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-medium"
+      class="flex-child flex-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-medium"
       :align="search ? 'right' : 'left'"
     >
 

package/src/components/FieldBig/FieldBig.vue

@@ -9,7 +9,7 @@
     :name="fieldName"
     :id="fieldId"
     :validation="validation"
-    class="radius-medium flex-nowrap flex  w-100 p-regular t-regular uppercase pd-thin"
+    class="radius-medium flex-nowrap flex  w-100 p-regular fw-regular uppercase pd-thin"
   >
     <slot></slot>
     <Button
@@ -18,7 +18,7 @@
       :showLoader="showLoader"
       :callback="callback"
       :callbackDelay="callbackDelay"
-      class="t-nowrap t-medium radius-small uppercase cursor-pointer flex flex-v-center pd-thin w-max hover-bg-fifth t-semi transition-linear transition-timing-1 t-black bg-main"
+      class="t-nowrap fw-medium radius-small uppercase cursor-pointer flex flex-v-center pd-thin w-max hover:bg-fifth fw-semi ease-linear t-black bg-main"
     >
       <span v-if="action" class="desktop-only mn-r-thin">{{action}}</span>
       <IconArrow class="i-medium"/>