tp-react-elements-dev 1.12.32 → 1.12.33

package/dist/assets/icons/flaticon_hvc.css

@@ -1,195 +1,195 @@
-/*!
-*    ______ _       _   _
-*    |  ____| |     | | (_)
-*    | |__  | | __ _| |_ _  ___ ___  _ __
-*    |  __| | |/ _` | __| |/ __/ _ \| '_ \
-*    | |    | | (_| | |_| | (_| (_) | | | |
-*    |_|    |_|\__,_|\__|_|\___\___/|_| |_|
-*
-*         https://www.flaticon.com
-*/
-
-@font-face {
-  font-family: 'flaticon_hvc';
-  src:
-    url('./flaticon_hvc.woff2?09127989b5c99a4f290cd7bb7c4bad12') format('woff2'),
-    url('./flaticon_hvc.woff?09127989b5c99a4f290cd7bb7c4bad12') format('woff'),
-    url('./flaticon_hvc.eot?09127989b5c99a4f290cd7bb7c4bad12#iefix') format('embedded-opentype'),
-    url('./flaticon_hvc.ttf?09127989b5c99a4f290cd7bb7c4bad12') format('truetype'),
-    url('./flaticon_hvc.svg?09127989b5c99a4f290cd7bb7c4bad12#flaticon_hvc') format('svg');
-}
-
-i[class^='flaticon-']:before,
-i[class*=' flaticon-']:before {
-  font-family: flaticon_hvc !important;
-  font-style: normal;
-  font-weight: normal !important;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.flaticon-setting:before {
-  content: '\f101';
-}
-.flaticon-refresh:before {
-  content: '\f102';
-}
-.flaticon-setting-1:before {
-  content: '\f103';
-}
-.flaticon-check:before {
-  content: '\f104';
-}
-.flaticon-bank:before {
-  content: '\f105';
-}
-.flaticon-user:before {
-  content: '\f106';
-}
-.flaticon-user-1:before {
-  content: '\f107';
-}
-.flaticon-info-sign:before {
-  content: '\f108';
-}
-.flaticon-clipboard:before {
-  content: '\f109';
-}
-.flaticon-right-arrow:before {
-  content: '\f10a';
-}
-.flaticon-home:before {
-  content: '\f10b';
-}
-.flaticon-search:before {
-  content: '\f10c';
-}
-.flaticon-eye:before {
-  content: '\f10d';
-}
-.flaticon-edit:before {
-  content: '\f10e';
-}
-.flaticon-delete:before {
-  content: '\f10f';
-}
-.flaticon-add-1:before {
-  content: '\f110';
-}
-.flaticon-plus-1:before {
-  content: '\f111';
-}
-.flaticon-compose:before {
-  content: '\f112';
-}
-.flaticon-trash:before {
-  content: '\f113';
-}
-.flaticon-download:before {
-  content: '\f114';
-}
-.flaticon-downloading:before {
-  content: '\f115';
-}
-.flaticon-upload:before {
-  content: '\f116';
-}
-.flaticon-right-arrow-1:before {
-  content: '\f117';
-}
-.flaticon-user-2:before {
-  content: '\f118';
-}
-.flaticon-man-in-suit-and-tie:before {
-  content: '\f119';
-}
-.flaticon-cancel:before {
-  content: '\f11a';
-}
-.flaticon-check-mark:before {
-  content: '\f11b';
-}
-.flaticon-bars:before {
-  content: '\f11c';
-}
-.flaticon-copy:before {
-  content: '\f11d';
-}
-.flaticon-printer:before {
-  content: '\f11e';
-}
-.flaticon-file:before {
-  content: '\f11f';
-}
-.flaticon-file-1:before {
-  content: '\f120';
-}
-.flaticon-file-2:before {
-  content: '\f121';
-}
-.flaticon-eye-1:before {
-  content: '\f122';
-}
-.flaticon-upload-1:before {
-  content: '\f123';
-}
-.flaticon-production:before {
-  content: '\f124';
-}
-.flaticon-cube:before {
-  content: '\f125';
-}
-.flaticon-rotation:before {
-  content: '\f126';
-}
-.flaticon-rotation-1:before {
-  content: '\f127';
-}
-.flaticon-spinning:before {
-  content: '\f128';
-}
-.flaticon-spinning-1:before {
-  content: '\f129';
-}
-.flaticon-ready-stock:before {
-  content: '\f12a';
-}
-.flaticon-ready-stock-1:before {
-  content: '\f12b';
-}
-.flaticon-visible:before {
-  content: '\f12c';
-}
-.flaticon-printing:before {
-  content: '\f12d';
-}
-.flaticon-like:before {
-  content: '\f12e';
-}
-.flaticon-thumb-up:before {
-  content: '\f12f';
-}
-.flaticon-thumbs-up:before {
-  content: '\f130';
-}
-.flaticon-thumb-down:before {
-  content: '\f131';
-}
-.flaticon-dislike:before {
-  content: '\f132';
-}
-.flaticon-thumb-down-1:before {
-  content: '\f133';
-}
-.flaticon-pointing-right:before {
-  content: '\f134';
-}
-.flaticon-point:before {
-  content: '\f135';
-}
-.flaticon-history:before {
-  content: '\f136';
-}
+/*!
+*    ______ _       _   _
+*    |  ____| |     | | (_)
+*    | |__  | | __ _| |_ _  ___ ___  _ __
+*    |  __| | |/ _` | __| |/ __/ _ \| '_ \
+*    | |    | | (_| | |_| | (_| (_) | | | |
+*    |_|    |_|\__,_|\__|_|\___\___/|_| |_|
+*
+*         https://www.flaticon.com
+*/
+
+@font-face {
+  font-family: 'flaticon_hvc';
+  src:
+    url('./flaticon_hvc.woff2?09127989b5c99a4f290cd7bb7c4bad12') format('woff2'),
+    url('./flaticon_hvc.woff?09127989b5c99a4f290cd7bb7c4bad12') format('woff'),
+    url('./flaticon_hvc.eot?09127989b5c99a4f290cd7bb7c4bad12#iefix') format('embedded-opentype'),
+    url('./flaticon_hvc.ttf?09127989b5c99a4f290cd7bb7c4bad12') format('truetype'),
+    url('./flaticon_hvc.svg?09127989b5c99a4f290cd7bb7c4bad12#flaticon_hvc') format('svg');
+}
+
+i[class^='flaticon-']:before,
+i[class*=' flaticon-']:before {
+  font-family: flaticon_hvc !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.flaticon-setting:before {
+  content: '\f101';
+}
+.flaticon-refresh:before {
+  content: '\f102';
+}
+.flaticon-setting-1:before {
+  content: '\f103';
+}
+.flaticon-check:before {
+  content: '\f104';
+}
+.flaticon-bank:before {
+  content: '\f105';
+}
+.flaticon-user:before {
+  content: '\f106';
+}
+.flaticon-user-1:before {
+  content: '\f107';
+}
+.flaticon-info-sign:before {
+  content: '\f108';
+}
+.flaticon-clipboard:before {
+  content: '\f109';
+}
+.flaticon-right-arrow:before {
+  content: '\f10a';
+}
+.flaticon-home:before {
+  content: '\f10b';
+}
+.flaticon-search:before {
+  content: '\f10c';
+}
+.flaticon-eye:before {
+  content: '\f10d';
+}
+.flaticon-edit:before {
+  content: '\f10e';
+}
+.flaticon-delete:before {
+  content: '\f10f';
+}
+.flaticon-add-1:before {
+  content: '\f110';
+}
+.flaticon-plus-1:before {
+  content: '\f111';
+}
+.flaticon-compose:before {
+  content: '\f112';
+}
+.flaticon-trash:before {
+  content: '\f113';
+}
+.flaticon-download:before {
+  content: '\f114';
+}
+.flaticon-downloading:before {
+  content: '\f115';
+}
+.flaticon-upload:before {
+  content: '\f116';
+}
+.flaticon-right-arrow-1:before {
+  content: '\f117';
+}
+.flaticon-user-2:before {
+  content: '\f118';
+}
+.flaticon-man-in-suit-and-tie:before {
+  content: '\f119';
+}
+.flaticon-cancel:before {
+  content: '\f11a';
+}
+.flaticon-check-mark:before {
+  content: '\f11b';
+}
+.flaticon-bars:before {
+  content: '\f11c';
+}
+.flaticon-copy:before {
+  content: '\f11d';
+}
+.flaticon-printer:before {
+  content: '\f11e';
+}
+.flaticon-file:before {
+  content: '\f11f';
+}
+.flaticon-file-1:before {
+  content: '\f120';
+}
+.flaticon-file-2:before {
+  content: '\f121';
+}
+.flaticon-eye-1:before {
+  content: '\f122';
+}
+.flaticon-upload-1:before {
+  content: '\f123';
+}
+.flaticon-production:before {
+  content: '\f124';
+}
+.flaticon-cube:before {
+  content: '\f125';
+}
+.flaticon-rotation:before {
+  content: '\f126';
+}
+.flaticon-rotation-1:before {
+  content: '\f127';
+}
+.flaticon-spinning:before {
+  content: '\f128';
+}
+.flaticon-spinning-1:before {
+  content: '\f129';
+}
+.flaticon-ready-stock:before {
+  content: '\f12a';
+}
+.flaticon-ready-stock-1:before {
+  content: '\f12b';
+}
+.flaticon-visible:before {
+  content: '\f12c';
+}
+.flaticon-printing:before {
+  content: '\f12d';
+}
+.flaticon-like:before {
+  content: '\f12e';
+}
+.flaticon-thumb-up:before {
+  content: '\f12f';
+}
+.flaticon-thumbs-up:before {
+  content: '\f130';
+}
+.flaticon-thumb-down:before {
+  content: '\f131';
+}
+.flaticon-dislike:before {
+  content: '\f132';
+}
+.flaticon-thumb-down-1:before {
+  content: '\f133';
+}
+.flaticon-pointing-right:before {
+  content: '\f134';
+}
+.flaticon-point:before {
+  content: '\f135';
+}
+.flaticon-history:before {
+  content: '\f136';
+}

package/dist/assets/icons/flaticon_hvc.scss

@@ -1,243 +1,243 @@
-$flaticon_hvc-font: 'flaticon_hvc';
-
-@font-face {
-  font-family: $flaticon_hvc-font;
-  src:
-    url('./flaticon_hvc.woff2?09127989b5c99a4f290cd7bb7c4bad12') format('woff2'),
-    url('./flaticon_hvc.woff?09127989b5c99a4f290cd7bb7c4bad12') format('woff'),
-    url('./flaticon_hvc.eot?09127989b5c99a4f290cd7bb7c4bad12#iefix') format('embedded-opentype'),
-    url('./flaticon_hvc.ttf?09127989b5c99a4f290cd7bb7c4bad12') format('truetype'),
-    url('./flaticon_hvc.svg?09127989b5c99a4f290cd7bb7c4bad12#flaticon_hvc') format('svg');
-}
-
-i[class^='flaticon-']:before,
-i[class*=' flaticon-']:before {
-  font-family: flaticon_hvc !important;
-  font-style: normal;
-  font-weight: normal !important;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-$flaticon_hvc-map: (
-  'setting': '\f101',
-  'refresh': '\f102',
-  'setting-1': '\f103',
-  'check': '\f104',
-  'bank': '\f105',
-  'user': '\f106',
-  'user-1': '\f107',
-  'info-sign': '\f108',
-  'clipboard': '\f109',
-  'right-arrow': '\f10a',
-  'home': '\f10b',
-  'search': '\f10c',
-  'eye': '\f10d',
-  'edit': '\f10e',
-  'delete': '\f10f',
-  'add-1': '\f110',
-  'plus-1': '\f111',
-  'compose': '\f112',
-  'trash': '\f113',
-  'download': '\f114',
-  'downloading': '\f115',
-  'upload': '\f116',
-  'right-arrow-1': '\f117',
-  'user-2': '\f118',
-  'man-in-suit-and-tie': '\f119',
-  'cancel': '\f11a',
-  'check-mark': '\f11b',
-  'bars': '\f11c',
-  'copy': '\f11d',
-  'printer': '\f11e',
-  'file': '\f11f',
-  'file-1': '\f120',
-  'file-2': '\f121',
-  'eye-1': '\f122',
-  'upload-1': '\f123',
-  'production': '\f124',
-  'cube': '\f125',
-  'rotation': '\f126',
-  'rotation-1': '\f127',
-  'spinning': '\f128',
-  'spinning-1': '\f129',
-  'ready-stock': '\f12a',
-  'ready-stock-1': '\f12b',
-  'visible': '\f12c',
-  'printing': '\f12d',
-  'like': '\f12e',
-  'thumb-up': '\f12f',
-  'thumbs-up': '\f130',
-  'thumb-down': '\f131',
-  'dislike': '\f132',
-  'thumb-down-1': '\f133',
-  'pointing-right': '\f134',
-  'point': '\f135',
-  'history': '\f136',
-);
-
-.flaticon-setting:before {
-  content: map-get($flaticon_hvc-map, 'setting');
-}
-.flaticon-refresh:before {
-  content: map-get($flaticon_hvc-map, 'refresh');
-}
-.flaticon-setting-1:before {
-  content: map-get($flaticon_hvc-map, 'setting-1');
-}
-.flaticon-check:before {
-  content: map-get($flaticon_hvc-map, 'check');
-}
-.flaticon-bank:before {
-  content: map-get($flaticon_hvc-map, 'bank');
-}
-.flaticon-user:before {
-  content: map-get($flaticon_hvc-map, 'user');
-}
-.flaticon-user-1:before {
-  content: map-get($flaticon_hvc-map, 'user-1');
-}
-.flaticon-info-sign:before {
-  content: map-get($flaticon_hvc-map, 'info-sign');
-}
-.flaticon-clipboard:before {
-  content: map-get($flaticon_hvc-map, 'clipboard');
-}
-.flaticon-right-arrow:before {
-  content: map-get($flaticon_hvc-map, 'right-arrow');
-}
-.flaticon-home:before {
-  content: map-get($flaticon_hvc-map, 'home');
-}
-.flaticon-search:before {
-  content: map-get($flaticon_hvc-map, 'search');
-}
-.flaticon-eye:before {
-  content: map-get($flaticon_hvc-map, 'eye');
-}
-.flaticon-edit:before {
-  content: map-get($flaticon_hvc-map, 'edit');
-}
-.flaticon-delete:before {
-  content: map-get($flaticon_hvc-map, 'delete');
-}
-.flaticon-add-1:before {
-  content: map-get($flaticon_hvc-map, 'add-1');
-}
-.flaticon-plus-1:before {
-  content: map-get($flaticon_hvc-map, 'plus-1');
-}
-.flaticon-compose:before {
-  content: map-get($flaticon_hvc-map, 'compose');
-}
-.flaticon-trash:before {
-  content: map-get($flaticon_hvc-map, 'trash');
-}
-.flaticon-download:before {
-  content: map-get($flaticon_hvc-map, 'download');
-}
-.flaticon-downloading:before {
-  content: map-get($flaticon_hvc-map, 'downloading');
-}
-.flaticon-upload:before {
-  content: map-get($flaticon_hvc-map, 'upload');
-}
-.flaticon-right-arrow-1:before {
-  content: map-get($flaticon_hvc-map, 'right-arrow-1');
-}
-.flaticon-user-2:before {
-  content: map-get($flaticon_hvc-map, 'user-2');
-}
-.flaticon-man-in-suit-and-tie:before {
-  content: map-get($flaticon_hvc-map, 'man-in-suit-and-tie');
-}
-.flaticon-cancel:before {
-  content: map-get($flaticon_hvc-map, 'cancel');
-}
-.flaticon-check-mark:before {
-  content: map-get($flaticon_hvc-map, 'check-mark');
-}
-.flaticon-bars:before {
-  content: map-get($flaticon_hvc-map, 'bars');
-}
-.flaticon-copy:before {
-  content: map-get($flaticon_hvc-map, 'copy');
-}
-.flaticon-printer:before {
-  content: map-get($flaticon_hvc-map, 'printer');
-}
-.flaticon-file:before {
-  content: map-get($flaticon_hvc-map, 'file');
-}
-.flaticon-file-1:before {
-  content: map-get($flaticon_hvc-map, 'file-1');
-}
-.flaticon-file-2:before {
-  content: map-get($flaticon_hvc-map, 'file-2');
-}
-.flaticon-eye-1:before {
-  content: map-get($flaticon_hvc-map, 'eye-1');
-}
-.flaticon-upload-1:before {
-  content: map-get($flaticon_hvc-map, 'upload-1');
-}
-.flaticon-production:before {
-  content: map-get($flaticon_hvc-map, 'production');
-}
-.flaticon-cube:before {
-  content: map-get($flaticon_hvc-map, 'cube');
-}
-.flaticon-rotation:before {
-  content: map-get($flaticon_hvc-map, 'rotation');
-}
-.flaticon-rotation-1:before {
-  content: map-get($flaticon_hvc-map, 'rotation-1');
-}
-.flaticon-spinning:before {
-  content: map-get($flaticon_hvc-map, 'spinning');
-}
-.flaticon-spinning-1:before {
-  content: map-get($flaticon_hvc-map, 'spinning-1');
-}
-.flaticon-ready-stock:before {
-  content: map-get($flaticon_hvc-map, 'ready-stock');
-}
-.flaticon-ready-stock-1:before {
-  content: map-get($flaticon_hvc-map, 'ready-stock-1');
-}
-.flaticon-visible:before {
-  content: map-get($flaticon_hvc-map, 'visible');
-}
-.flaticon-printing:before {
-  content: map-get($flaticon_hvc-map, 'printing');
-}
-.flaticon-like:before {
-  content: map-get($flaticon_hvc-map, 'like');
-}
-.flaticon-thumb-up:before {
-  content: map-get($flaticon_hvc-map, 'thumb-up');
-}
-.flaticon-thumbs-up:before {
-  content: map-get($flaticon_hvc-map, 'thumbs-up');
-}
-.flaticon-thumb-down:before {
-  content: map-get($flaticon_hvc-map, 'thumb-down');
-}
-.flaticon-dislike:before {
-  content: map-get($flaticon_hvc-map, 'dislike');
-}
-.flaticon-thumb-down-1:before {
-  content: map-get($flaticon_hvc-map, 'thumb-down-1');
-}
-.flaticon-pointing-right:before {
-  content: map-get($flaticon_hvc-map, 'pointing-right');
-}
-.flaticon-point:before {
-  content: map-get($flaticon_hvc-map, 'point');
-}
-.flaticon-history:before {
-  content: map-get($flaticon_hvc-map, 'history');
-}
+$flaticon_hvc-font: 'flaticon_hvc';
+
+@font-face {
+  font-family: $flaticon_hvc-font;
+  src:
+    url('./flaticon_hvc.woff2?09127989b5c99a4f290cd7bb7c4bad12') format('woff2'),
+    url('./flaticon_hvc.woff?09127989b5c99a4f290cd7bb7c4bad12') format('woff'),
+    url('./flaticon_hvc.eot?09127989b5c99a4f290cd7bb7c4bad12#iefix') format('embedded-opentype'),
+    url('./flaticon_hvc.ttf?09127989b5c99a4f290cd7bb7c4bad12') format('truetype'),
+    url('./flaticon_hvc.svg?09127989b5c99a4f290cd7bb7c4bad12#flaticon_hvc') format('svg');
+}
+
+i[class^='flaticon-']:before,
+i[class*=' flaticon-']:before {
+  font-family: flaticon_hvc !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+$flaticon_hvc-map: (
+  'setting': '\f101',
+  'refresh': '\f102',
+  'setting-1': '\f103',
+  'check': '\f104',
+  'bank': '\f105',
+  'user': '\f106',
+  'user-1': '\f107',
+  'info-sign': '\f108',
+  'clipboard': '\f109',
+  'right-arrow': '\f10a',
+  'home': '\f10b',
+  'search': '\f10c',
+  'eye': '\f10d',
+  'edit': '\f10e',
+  'delete': '\f10f',
+  'add-1': '\f110',
+  'plus-1': '\f111',
+  'compose': '\f112',
+  'trash': '\f113',
+  'download': '\f114',
+  'downloading': '\f115',
+  'upload': '\f116',
+  'right-arrow-1': '\f117',
+  'user-2': '\f118',
+  'man-in-suit-and-tie': '\f119',
+  'cancel': '\f11a',
+  'check-mark': '\f11b',
+  'bars': '\f11c',
+  'copy': '\f11d',
+  'printer': '\f11e',
+  'file': '\f11f',
+  'file-1': '\f120',
+  'file-2': '\f121',
+  'eye-1': '\f122',
+  'upload-1': '\f123',
+  'production': '\f124',
+  'cube': '\f125',
+  'rotation': '\f126',
+  'rotation-1': '\f127',
+  'spinning': '\f128',
+  'spinning-1': '\f129',
+  'ready-stock': '\f12a',
+  'ready-stock-1': '\f12b',
+  'visible': '\f12c',
+  'printing': '\f12d',
+  'like': '\f12e',
+  'thumb-up': '\f12f',
+  'thumbs-up': '\f130',
+  'thumb-down': '\f131',
+  'dislike': '\f132',
+  'thumb-down-1': '\f133',
+  'pointing-right': '\f134',
+  'point': '\f135',
+  'history': '\f136',
+);
+
+.flaticon-setting:before {
+  content: map-get($flaticon_hvc-map, 'setting');
+}
+.flaticon-refresh:before {
+  content: map-get($flaticon_hvc-map, 'refresh');
+}
+.flaticon-setting-1:before {
+  content: map-get($flaticon_hvc-map, 'setting-1');
+}
+.flaticon-check:before {
+  content: map-get($flaticon_hvc-map, 'check');
+}
+.flaticon-bank:before {
+  content: map-get($flaticon_hvc-map, 'bank');
+}
+.flaticon-user:before {
+  content: map-get($flaticon_hvc-map, 'user');
+}
+.flaticon-user-1:before {
+  content: map-get($flaticon_hvc-map, 'user-1');
+}
+.flaticon-info-sign:before {
+  content: map-get($flaticon_hvc-map, 'info-sign');
+}
+.flaticon-clipboard:before {
+  content: map-get($flaticon_hvc-map, 'clipboard');
+}
+.flaticon-right-arrow:before {
+  content: map-get($flaticon_hvc-map, 'right-arrow');
+}
+.flaticon-home:before {
+  content: map-get($flaticon_hvc-map, 'home');
+}
+.flaticon-search:before {
+  content: map-get($flaticon_hvc-map, 'search');
+}
+.flaticon-eye:before {
+  content: map-get($flaticon_hvc-map, 'eye');
+}
+.flaticon-edit:before {
+  content: map-get($flaticon_hvc-map, 'edit');
+}
+.flaticon-delete:before {
+  content: map-get($flaticon_hvc-map, 'delete');
+}
+.flaticon-add-1:before {
+  content: map-get($flaticon_hvc-map, 'add-1');
+}
+.flaticon-plus-1:before {
+  content: map-get($flaticon_hvc-map, 'plus-1');
+}
+.flaticon-compose:before {
+  content: map-get($flaticon_hvc-map, 'compose');
+}
+.flaticon-trash:before {
+  content: map-get($flaticon_hvc-map, 'trash');
+}
+.flaticon-download:before {
+  content: map-get($flaticon_hvc-map, 'download');
+}
+.flaticon-downloading:before {
+  content: map-get($flaticon_hvc-map, 'downloading');
+}
+.flaticon-upload:before {
+  content: map-get($flaticon_hvc-map, 'upload');
+}
+.flaticon-right-arrow-1:before {
+  content: map-get($flaticon_hvc-map, 'right-arrow-1');
+}
+.flaticon-user-2:before {
+  content: map-get($flaticon_hvc-map, 'user-2');
+}
+.flaticon-man-in-suit-and-tie:before {
+  content: map-get($flaticon_hvc-map, 'man-in-suit-and-tie');
+}
+.flaticon-cancel:before {
+  content: map-get($flaticon_hvc-map, 'cancel');
+}
+.flaticon-check-mark:before {
+  content: map-get($flaticon_hvc-map, 'check-mark');
+}
+.flaticon-bars:before {
+  content: map-get($flaticon_hvc-map, 'bars');
+}
+.flaticon-copy:before {
+  content: map-get($flaticon_hvc-map, 'copy');
+}
+.flaticon-printer:before {
+  content: map-get($flaticon_hvc-map, 'printer');
+}
+.flaticon-file:before {
+  content: map-get($flaticon_hvc-map, 'file');
+}
+.flaticon-file-1:before {
+  content: map-get($flaticon_hvc-map, 'file-1');
+}
+.flaticon-file-2:before {
+  content: map-get($flaticon_hvc-map, 'file-2');
+}
+.flaticon-eye-1:before {
+  content: map-get($flaticon_hvc-map, 'eye-1');
+}
+.flaticon-upload-1:before {
+  content: map-get($flaticon_hvc-map, 'upload-1');
+}
+.flaticon-production:before {
+  content: map-get($flaticon_hvc-map, 'production');
+}
+.flaticon-cube:before {
+  content: map-get($flaticon_hvc-map, 'cube');
+}
+.flaticon-rotation:before {
+  content: map-get($flaticon_hvc-map, 'rotation');
+}
+.flaticon-rotation-1:before {
+  content: map-get($flaticon_hvc-map, 'rotation-1');
+}
+.flaticon-spinning:before {
+  content: map-get($flaticon_hvc-map, 'spinning');
+}
+.flaticon-spinning-1:before {
+  content: map-get($flaticon_hvc-map, 'spinning-1');
+}
+.flaticon-ready-stock:before {
+  content: map-get($flaticon_hvc-map, 'ready-stock');
+}
+.flaticon-ready-stock-1:before {
+  content: map-get($flaticon_hvc-map, 'ready-stock-1');
+}
+.flaticon-visible:before {
+  content: map-get($flaticon_hvc-map, 'visible');
+}
+.flaticon-printing:before {
+  content: map-get($flaticon_hvc-map, 'printing');
+}
+.flaticon-like:before {
+  content: map-get($flaticon_hvc-map, 'like');
+}
+.flaticon-thumb-up:before {
+  content: map-get($flaticon_hvc-map, 'thumb-up');
+}
+.flaticon-thumbs-up:before {
+  content: map-get($flaticon_hvc-map, 'thumbs-up');
+}
+.flaticon-thumb-down:before {
+  content: map-get($flaticon_hvc-map, 'thumb-down');
+}
+.flaticon-dislike:before {
+  content: map-get($flaticon_hvc-map, 'dislike');
+}
+.flaticon-thumb-down-1:before {
+  content: map-get($flaticon_hvc-map, 'thumb-down-1');
+}
+.flaticon-pointing-right:before {
+  content: map-get($flaticon_hvc-map, 'pointing-right');
+}
+.flaticon-point:before {
+  content: map-get($flaticon_hvc-map, 'point');
+}
+.flaticon-history:before {
+  content: map-get($flaticon_hvc-map, 'history');
+}

package/dist/components/FileUpload/index.d.ts

@@ -1,2 +1,3 @@
 export { default as FormRenderFileUpload } from '../FormComponents/FileUpload/FormRenderFileUpload';
 export { default as FormRenderMultiFileUpload } from '../FormComponents/FileUpload/FormRenderMultiFileUpload';
+export { default as MultiFileWithPreview } from '../FormComponents/FileUpload/MultiFileWithPreview';

package/dist/components/FileUpload/index.esm.js

@@ -1,2 +1,3 @@
 export { default as FormRenderFileUpload } from '../FormComponents/FileUpload/FormRenderFileUpload.esm.js';
 export { default as FormRenderMultiFileUpload } from '../FormComponents/FileUpload/FormRenderMultiFileUpload.esm.js';
+export { default as MultiFileWithPreview } from '../FormComponents/FileUpload/MultiFileWithPreview.esm.js';

package/dist/components/Form/FormRender.esm.js

@@ -18,6 +18,7 @@ const RichTextEditorWrapper = lazy(() => import('../RichTextEditor/index.esm.js'
 const MultiSelectV1 = lazy(() => import('../FormComponents/Select/MultiSelectv1.esm.js'));
 const FormRenderFileUpload = lazy(() => import('../FileUpload/index.esm.js').then((m) => ({ default: m.FormRenderFileUpload })));
 const FormRenderMultiFileUpload = lazy(() => import('../FileUpload/index.esm.js').then((m) => ({ default: m.FormRenderMultiFileUpload })));
+const MultiFileWithPreview = lazy(() => import('../FileUpload/index.esm.js').then((m) => ({ default: m.MultiFileWithPreview })));
 const DatepickerWrapperV2 = lazy(() => import('../DatePicker/index.esm.js').then((m) => ({ default: m.DatepickerWrapperV2 })));
 const Monthpickerrender = lazy(() => import('../DatePicker/index.esm.js').then((m) => ({ default: m.Monthpickerrender })));
 const TimePickerFieldWrapper = lazy(() => import('../TimePicker/index.esm.js').then((m) => ({ default: m.TimePicker })));
@@ -109,6 +110,9 @@ const RenderForm = (props) => {
         // Multi file upload
         case 'multifile':
             return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(FormRenderMultiFileUpload, { props: props, variant: variant }) }));
+        // Multi file upload with preview carousel
+        case 'multifile-with-preview':
+            return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(MultiFileWithPreview, { props: props, variant: variant }) }));
         // Single checkbox
         case 'checkbox':
             return jsx(FormCheckBox, { props: props, variant: variant });

package/dist/components/FormComponents/FileUpload/MultiFileWithPreview.d.ts

@@ -0,0 +1,6 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+declare const MultiFileWithPreview: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiFileWithPreview;

package/dist/components/FormComponents/FileUpload/MultiFileWithPreview.esm.js

@@ -0,0 +1,187 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, Button, IconButton, Modal, Typography } from '@mui/material';
+import { useRef, useState, useEffect } from 'react';
+import { useWatch } from 'react-hook-form';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import CloseIcon from '@mui/icons-material/Close';
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import DeleteIcon from '@mui/icons-material/Delete';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+
+const MultiFileWithPreview = ({ props, variant, }) => {
+    const inputRef = useRef(null);
+    const watched = useWatch({ control: props.control, name: props.item.name });
+    const [open, setOpen] = useState(false);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [currentFileIndex, setCurrentFileIndex] = useState(0);
+    // Determine if this is single or multiple file mode
+    const isSingleFileMode = props.item.maxLength === 1;
+    useEffect(() => {
+        if (watched === null || watched === undefined) {
+            if (inputRef.current)
+                inputRef.current.value = '';
+        }
+        // Handle preloaded files from backend (array of URLs)
+        if (Array.isArray(watched) && typeof watched[0] === 'string') {
+            setSelectedFiles(watched);
+        }
+    }, [watched]);
+    const isError = !!props.errors?.[props.item.name];
+    const handleFileChange = (event) => {
+        const files = event.target.files;
+        if (!files)
+            return;
+        const fileArray = Array.from(files);
+        const allowedExtensions = {
+            excel: ['xls', 'xlsx'],
+            pdf: ['pdf'],
+            image: ['jpg', 'jpeg', 'png'],
+            all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip']};
+        const validExtensions = props.item.fileType === 'excel'
+            ? allowedExtensions.excel
+            : props.item.fileType === 'pdf'
+                ? allowedExtensions.pdf
+                : props.item.fileType === 'image'
+                    ? allowedExtensions.image
+                    : allowedExtensions.all;
+        const invalidFile = fileArray.find((file) => {
+            const ext = file.name.split('.').pop()?.toLowerCase();
+            return !ext || !validExtensions.includes(ext);
+        });
+        if (invalidFile) {
+            props.item?.handleFileError?.(`Please upload ${validExtensions.join(', ')} files only`);
+            event.target.value = '';
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'File', []);
+            return;
+        }
+        const largeFile = fileArray.find((file) => file.size > 20000000);
+        if (largeFile) {
+            props.item?.handleFileError?.('File size should be less than 20MB');
+            event.target.value = '';
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'File', []);
+            return;
+        }
+        // Handle single vs multiple file mode
+        let combinedFiles;
+        if (isSingleFileMode) {
+            // In single file mode, replace the existing file
+            combinedFiles = fileArray;
+        }
+        else {
+            // In multiple file mode, combine with existing files
+            combinedFiles = [...selectedFiles, ...fileArray];
+            // Check if maxLength is exceeded
+            if (props.item.maxLength && combinedFiles.length > props.item.maxLength) {
+                props.item?.handleFileError?.(`You can only upload up to ${props.item.maxLength} files`);
+                event.target.value = '';
+                return;
+            }
+        }
+        const combinedFileNames = combinedFiles
+            .map((f) => (f instanceof File ? f.name : f.split('/').pop()))
+            .join(',');
+        props.setValue(props.item.name, combinedFileNames);
+        props.setValue(props.item.name + 'File', combinedFiles);
+        setSelectedFiles(combinedFiles);
+        props.item.onChangeSetFileFn?.(combinedFiles);
+    };
+    const handlePreviewClick = () => {
+        setCurrentFileIndex(0);
+        setOpen(true);
+    };
+    const handleClose = () => setOpen(false);
+    const handlePrevious = () => {
+        setCurrentFileIndex((prev) => prev > 0 ? prev - 1 : selectedFiles.length - 1);
+    };
+    const handleNext = () => {
+        setCurrentFileIndex((prev) => prev < selectedFiles.length - 1 ? prev + 1 : 0);
+    };
+    const handleDeleteFile = (indexToDelete) => {
+        const updatedFiles = selectedFiles.filter((_, index) => index !== indexToDelete);
+        setSelectedFiles(updatedFiles);
+        if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+        if (updatedFiles.length === 0) {
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'File', []);
+        }
+        else {
+            const fileNames = updatedFiles
+                .map((f) => (f instanceof File ? f.name : f.split('/').pop()))
+                .join(',');
+            props.setValue(props.item.name, fileNames);
+            props.setValue(props.item.name + 'File', updatedFiles);
+        }
+        if (currentFileIndex >= updatedFiles.length) {
+            setCurrentFileIndex(Math.max(0, updatedFiles.length - 1));
+        }
+        props.item.onChangeSetFileFn &&
+            props.item.onChangeSetFileFn(updatedFiles);
+        if (updatedFiles.length === 0) {
+            setOpen(false);
+        }
+    };
+    const isImageFile = (file) => {
+        const ext = typeof file === 'string'
+            ? file.split('.').pop()?.toLowerCase()
+            : file.name.split('.').pop()?.toLowerCase();
+        return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext || '');
+    };
+    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: "4px", sx: { ...props.item.sx, position: 'relative' }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px' }, children: renderLabel(variant, props, true) })), jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [jsxs(Button, { variant: "outlined", component: "label", startIcon: jsx(UploadFileIcon, {}), sx: { flex: 1, textTransform: 'none' }, color: isError ? 'error' : 'primary', children: [selectedFiles.length > 0
+                                        ? isSingleFileMode
+                                            ? '1 file selected'
+                                            : `${selectedFiles.length} file(s) selected`
+                                        : isSingleFileMode
+                                            ? 'Upload File'
+                                            : 'Upload Files', jsx("input", { type: "file", hidden: true, multiple: !isSingleFileMode, accept: props.item.fileType === 'excel'
+                                            ? '.xls,.xlsx'
+                                            : props.item.fileType === 'pdf'
+                                                ? '.pdf'
+                                                : props.item.fileType === 'image'
+                                                    ? '.jpg,.jpeg,.png'
+                                                    : props.item.fileType === 'all'
+                                                        ? '.pdf,.jpg,.jpeg,.png,.xls,.xlsx,.doc,.docx'
+                                                        : '', ref: inputRef, onChange: handleFileChange })] }), props.item.showFileCarousel && selectedFiles.length > 0 && (jsx(IconButton, { onClick: handlePreviewClick, color: "primary", size: "small", sx: { mt: 0.5 }, children: jsx(VisibilityIcon, {}) }))] })] }), jsx(FormBottomField, { ...props }), jsx(Modal, { open: open, onClose: handleClose, children: jsxs(Box, { sx: {
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        width: 600,
+                        bgcolor: 'background.paper',
+                        borderRadius: 2,
+                        boxShadow: 24,
+                        p: 3,
+                    }, children: [jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [jsx(Typography, { variant: "h6", children: "File Preview" }), jsxs(Box, { display: "flex", gap: 1, children: [jsx(IconButton, { onClick: () => handleDeleteFile(currentFileIndex), color: "error", title: "Delete current file", children: jsx(DeleteIcon, {}) }), jsx(IconButton, { onClick: handleClose, children: jsx(CloseIcon, {}) })] })] }), jsx(Box, { mt: 2, children: selectedFiles.length > 0 && (jsxs(Fragment, { children: [jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: 2, children: [jsx(IconButton, { onClick: handlePrevious, disabled: selectedFiles.length <= 1, children: jsx(NavigateBeforeIcon, {}) }), jsx(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", sx: { p: 2, minHeight: '400px', width: '100%' }, children: (() => {
+                                                    const currentFile = selectedFiles[currentFileIndex];
+                                                    if (currentFile instanceof File) {
+                                                        if (isImageFile(currentFile)) {
+                                                            return (jsx("img", { alt: "Preview", src: URL.createObjectURL(currentFile), style: {
+                                                                    maxHeight: '400px',
+                                                                    maxWidth: '100%',
+                                                                    objectFit: 'contain',
+                                                                    borderRadius: 8,
+                                                                } }));
+                                                        }
+                                                        return (jsx(Typography, { variant: "body1", children: currentFile.name }));
+                                                    }
+                                                    else if (typeof currentFile === 'string') {
+                                                        const isImg = isImageFile(currentFile);
+                                                        return isImg ? (jsx("img", { alt: "Preview", src: currentFile, style: {
+                                                                maxHeight: '400px',
+                                                                maxWidth: '100%',
+                                                                objectFit: 'contain',
+                                                                borderRadius: 8,
+                                                            } })) : (jsx(Typography, { variant: "body1", children: currentFile.split('/').pop() }));
+                                                    }
+                                                    return null;
+                                                })() }), jsx(IconButton, { onClick: handleNext, disabled: selectedFiles.length <= 1, children: jsx(NavigateNextIcon, {}) })] }), selectedFiles.length > 1 && (jsx(Box, { display: "flex", justifyContent: "center", mt: 2, children: jsxs(Typography, { variant: "body2", color: "text.secondary", children: [currentFileIndex + 1, " of ", selectedFiles.length] }) }))] })) })] }) })] }));
+};
+
+export { MultiFileWithPreview as default };

package/dist/components/FormComponents/FileUpload/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FormRenderFileUpload } from './FormRenderFileUpload';
+export { default as FormRenderMultiFileUpload } from './FormRenderMultiFileUpload';
+export { default as MultiFileWithPreview } from './MultiFileWithPreview';

package/dist/components/FormComponents/FileUpload/index.esm.js

@@ -0,0 +1,3 @@
+export { default as FormRenderFileUpload } from './FormRenderFileUpload.esm.js';
+export { default as FormRenderMultiFileUpload } from './FormRenderMultiFileUpload.esm.js';
+export { default as MultiFileWithPreview } from './MultiFileWithPreview.esm.js';

package/dist/components/FormComponents/index.esm.js

@@ -17,8 +17,19 @@ export { default as YearPickerField } from './YearPickerField/YearPickerField.es
 export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
 export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
 export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
+import 'react/jsx-runtime';
+import '@mui/material';
+import 'react';
+import 'react-hook-form';
+import 'dayjs';
+export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
+import '@mui/icons-material/Visibility';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/NavigateBefore';
+import '@mui/icons-material/NavigateNext';
+import '@mui/icons-material/Delete';
+import '@mui/icons-material/UploadFile';
 export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
 export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
-export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
 export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
 export { default as HelperText } from './HelperText/HelperText.esm.js';

package/dist/components/Global.styles.esm.js

@@ -1,79 +1,79 @@
 import { styled } from '@mui/material/styles';
 import { Button, Typography, Grid, Dialog, DialogTitle } from '@mui/material';
 
-styled(Button) `
-  border: 0;
-  color: #fff;
-  position: absolute;
-  text-align: center;
-  padding: 5px 12px;
-  font-size: 13px;
-  height: 30px;
-  right: -38px;
-  text-transform: none;
-  z-index: 2;
-  border-radius: 10px 0px 0px 10px;
-  &:hover {
-    right: 0px;
-  }
+styled(Button) `
+  border: 0;
+  color: #fff;
+  position: absolute;
+  text-align: center;
+  padding: 5px 12px;
+  font-size: 13px;
+  height: 30px;
+  right: -38px;
+  text-transform: none;
+  z-index: 2;
+  border-radius: 10px 0px 0px 10px;
+  &:hover {
+    right: 0px;
+  }
 `;
-const SubmitButton = styled(Button) `
-  text-transform: none;
+const SubmitButton = styled(Button) `
+  text-transform: none;
 `;
-const CancelButton = styled(Button) `
-  text-transform: none;
-  color: #000;
-  background: #ececee;
-  &:hover {
-    background: #0009;
-    color: #fff;
-  }
+const CancelButton = styled(Button) `
+  text-transform: none;
+  color: #000;
+  background: #ececee;
+  &:hover {
+    background: #0009;
+    color: #fff;
+  }
 `;
-const SaveAsDraftButton = styled(Button) `
-  text-transform: none;
-  font-size: 12px;
-  background: orange;
-  &:hover {
-    background: orange;
-  }
+const SaveAsDraftButton = styled(Button) `
+  text-transform: none;
+  font-size: 12px;
+  background: orange;
+  &:hover {
+    background: orange;
+  }
 `;
 styled(Typography) ``;
 styled(Grid, {
     shouldForwardProp: (prop) => prop !== 'isActive' && prop !== 'noOfColumn',
-}) `
-  flex-direction: column;
-  margin-bottom: 8px;
-  min-width: 10%;
-  padding-left: 0px;
-  z-index: 2;
-  padding-right: 0px;
-  border: 1px solid #0003;
-  font-size: 12px;
-  padding: 6px;
-  text-align: center;
-  &:hover {
-    cursor: pointer;
-  }
+}) `
+  flex-direction: column;
+  margin-bottom: 8px;
+  min-width: 10%;
+  padding-left: 0px;
+  z-index: 2;
+  padding-right: 0px;
+  border: 1px solid #0003;
+  font-size: 12px;
+  padding: 6px;
+  text-align: center;
+  &:hover {
+    cursor: pointer;
+  }
 `;
-const DialogContainer = styled(Dialog) `
-  position: fixed;
-  top: -16px;
-  left: 0;
-  right: 0;
-  bottom: auto;
-  & .css-tlc64q-MuiPaper-root-MuiDialog-paper,
-  .css-mbdu2s {
-    max-width: 900px;
-  }
+const DialogContainer = styled(Dialog) `
+  position: fixed;
+  top: -16px;
+  left: 0;
+  right: 0;
+  bottom: auto;
+  & .css-tlc64q-MuiPaper-root-MuiDialog-paper,
+  .css-mbdu2s {
+    max-width: 900px;
+  }
 `;
-const DialogTitleWrapper = styled(DialogTitle) `
-  padding: 8px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  cursor: move;
-  border-bottom: 1px solid rgb(229 231 235 / 1);
+const DialogTitleWrapper = styled(DialogTitle) `
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  cursor: move;
+  border-bottom: 1px solid rgb(229 231 235 / 1);
 `;
 
 export { CancelButton, DialogContainer, DialogTitleWrapper, SaveAsDraftButton, SubmitButton };

package/dist/utils/Interface/FormInterface.d.ts

@@ -10,7 +10,7 @@ export interface TextFieldInputProps {
 export interface FormSectionPropsItem {
     name: string;
     label: string;
-    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'datepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | '';
+    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'datepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | '';
     options?: OptionsProps[];
     required?: boolean;
     errorMessage?: string;
@@ -18,7 +18,8 @@ export interface FormSectionPropsItem {
     disable?: boolean;
     onChangeFn?: (e: string | number | undefined | null | boolean) => void;
     onBlurFn?: (e: string | number | undefined | null | boolean) => void;
-    onChangeSetFileFn?: (e: File) => void;
+    onChangeSetFileFn?: (e: File | File[]) => void;
+    showFileCarousel?: boolean;
     maxLength?: number;
     autoFocus?: boolean;
     maxValue?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements-dev",
-  "version": "1.12.32",
+  "version": "1.12.33",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",