funda-ui 4.7.125 → 4.7.150

package/lib/cjs/SplitterPanel/index.js

@@ -446,7 +446,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
          */
 
         var useIsMobile = function useIsMobile() {
-          var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 768;
+          var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 600;
           var _useState = (0, react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
             _useState2 = _slicedToArray(_useState, 2),
             isMobile = _useState2[0],
@@ -459,8 +459,72 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             // Set the mounted state to true after the component has mounted
             setIsMounted(true);
             var handleResize = function handleResize() {
-              if (window) {
-                setIsMobile(window.innerWidth <= breakpoint);
+              if (typeof window !== 'undefined') {
+                var detectDeviceType = function detectDeviceType() {
+                  // 1. First check if window and navigator are available (SSR compatibility)
+                  if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+                    return 'desktop'; // Default to desktop
+                  }
+
+                  // 2. Get user agent string
+                  var ua = navigator.userAgent.toLowerCase();
+
+                  // 3. Get platform info
+                  var platform = navigator.platform ? navigator.platform.toLowerCase() : '';
+
+                  // 4. Check screen characteristics using window.matchMedia
+                  var isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+                  var isPortrait = window.matchMedia('(orientation: portrait)').matches;
+                  var isLandscape = window.matchMedia('(orientation: landscape)').matches;
+
+                  // 5. Get screen dimensions
+                  var screenWidth = window.screen.width;
+                  var screenHeight = window.screen.height;
+                  var minScreenSize = Math.min(screenWidth, screenHeight);
+                  var maxScreenSize = Math.max(screenWidth, screenHeight);
+
+                  // Define device characteristics
+                  var isTablet =
+                  // Traditional UA detection
+                  /ipad/.test(ua) || /android/.test(ua) && !/mobile/.test(ua) || /tablet/.test(ua) || /playbook/.test(ua) || /nexus (7|9|10)/.test(ua) || /sm-t/.test(ua) || /huawei(.*)mediapad/.test(ua) ||
+                  // Special detection for iPad Pro and newer iPads
+                  navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ||
+                  // Screen size characteristics (tablets typically fall within this range)
+                  minScreenSize >= breakpoint && maxScreenSize <= 1366 && isTouch ||
+                  // Specific device detection
+                  /kindle|silk|kftt|kfot|kfjwa|kfjwi|kfsowi|kfthwa|kfthwi|kfapwa|kfapwi/i.test(ua);
+                  var isMobile = !isTablet && (
+                  // Prevent tablets from being detected as phones
+                  // Traditional mobile device detection
+                  /iphone|ipod|android.*mobile|windows phone|mobi/.test(ua) ||
+                  // Screen size characteristics (phones typically smaller than 600px)
+                  minScreenSize < breakpoint && isTouch ||
+                  // Additional mobile device detection
+                  /blackberry|\bbb\d+|meego|webos|palm|phone|pocket|mobile|mini|iemobile/i.test(ua));
+
+                  // 6. Comprehensive decision logic
+                  if (isMobile) {
+                    // Additional check for small tablets
+                    if (maxScreenSize >= 1024 && isTouch) {
+                      return 'tablet';
+                    }
+                    return 'mobile';
+                  }
+                  if (isTablet) {
+                    // Additional check for touch-enabled laptops
+                    if (maxScreenSize > 1366 && /windows/.test(ua)) {
+                      return 'desktop';
+                    }
+                    return 'tablet';
+                  }
+
+                  // 7. Check for touch-enabled laptops
+                  if (isTouch && /windows/.test(ua) && maxScreenSize > 1366) {
+                    return 'desktop';
+                  }
+                  return 'desktop';
+                };
+                setIsMobile(detectDeviceType() === 'mobile');
               }
             };
 

package/lib/cjs/Switch/index.js

@@ -533,7 +533,7 @@ var Switch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
   var uniqueID = funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_1___default()();
   var idRes = id || uniqueID;
   var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)( false || false),
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     val = _useState2[0],
     setVal = _useState2[1]; // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
@@ -569,7 +569,9 @@ var Switch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   }
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    setVal(checked);
+    if (typeof checked === 'boolean') {
+      setVal(checked);
+    }
   }, [checked]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'),

package/lib/cjs/Utils/format-string.d.ts

@@ -32,13 +32,14 @@ declare function trimAll(input: string): string;
  */
 declare function multiSpacesToSingle(input: string): string;
 /**
- * Convert HTML text to plain text
+ * Convert HTML text to plain text (Remove html tag content)
  * @param {string} input - The input string to process
  * @returns {string} The processed string
  */
 declare function htmlToPlain(input: string): string;
 /**
  * Strip HTML tags and their content
+ * !!!Important: It will remove nested tags
  * @param {string} input - The input string to process
  * @returns {string} The processed string
  */

package/lib/cjs/Utils/format-string.js

@@ -67,7 +67,7 @@ __webpack_require__.r(__webpack_exports__);
  * @returns {string} The processed string
  */
 function rmSpec(input) {
-  return input.replace(/[^a-zA-Z0-9 \u4E00-\u9FFF]/g, "");
+  return input === null || input === void 0 ? void 0 : input.replace(/[^a-zA-Z0-9 \u4E00-\u9FFF]/g, "");
 }
 
 /**
@@ -76,7 +76,7 @@ function rmSpec(input) {
  * @returns {string} The processed string
  */
 function onlyNumAndLetter(input) {
-  return input.replace(/[^a-zA-Z0-9 ]/g, "");
+  return input === null || input === void 0 ? void 0 : input.replace(/[^a-zA-Z0-9 ]/g, "");
 }
 
 /**
@@ -85,7 +85,7 @@ function onlyNumAndLetter(input) {
  * @returns {string} The processed string
  */
 function rmAllSpace(input) {
-  return input.replace(/\s/g, "");
+  return input === null || input === void 0 ? void 0 : input.replace(/\s/g, "");
 }
 
 /**
@@ -94,7 +94,7 @@ function rmAllSpace(input) {
  * @returns {string} The processed string
  */
 function trimAll(input) {
-  return input.replace(/(^\s+)|(\s+$)/g, "");
+  return input === null || input === void 0 ? void 0 : input.replace(/(^\s+)|(\s+$)/g, "");
 }
 
 /**
@@ -103,25 +103,35 @@ function trimAll(input) {
  * @returns {string} The processed string
  */
 function multiSpacesToSingle(input) {
-  return input.replace(/\s+(\W)/g, ' ');
+  return input === null || input === void 0 ? void 0 : input.replace(/\s+(\W)/g, ' ');
 }
 
 /**
- * Convert HTML text to plain text
+ * Convert HTML text to plain text (Remove html tag content)
  * @param {string} input - The input string to process
  * @returns {string} The processed string
  */
+/*
+Examples:
+console.log(htmlToPlain("<p>Hello <b>World</b></p>"));   // Hello World
+*/
 function htmlToPlain(input) {
-  return input.replace(/(<([^>]+)>)/ig, '');
+  return input === null || input === void 0 ? void 0 : input.replace(/(<([^>]+)>)/ig, '');
 }
 
 /**
- * Strip HTML tags and their content
+ * Strip HTML tags and their content 
+ * !!!Important: It will remove nested tags
  * @param {string} input - The input string to process
  * @returns {string} The processed string
  */
+/*
+Examples:
+console.log(stripTagsAndContent("<p>Hello <b>World</b></p>"));  // World
+console.log(stripTagsAndContent("Hello <b>World</b>"));  // Hello
+*/
 function stripTagsAndContent(input) {
-  return input.replace(/<\/?[^>]+(>|$)(.*?)<\/?[^>]+(>|$)/ig, '');
+  return input === null || input === void 0 ? void 0 : input.replace(/<\/?[^>]+(>|$)(.*?)<\/?[^>]+(>|$)/ig, '');
 }
 
 /**
@@ -130,7 +140,7 @@ function stripTagsAndContent(input) {
  * @returns {string} The processed URL
  */
 function removeFirstLastSlash(input) {
-  return input.replace(/^\/|\/$/g, '');
+  return input === null || input === void 0 ? void 0 : input.replace(/^\/|\/$/g, '');
 }
 
 /**
@@ -139,7 +149,7 @@ function removeFirstLastSlash(input) {
  * @returns {string} The processed URL
  */
 function removeTrailingSlash(input) {
-  return input.replace(/\/+$/, '');
+  return input === null || input === void 0 ? void 0 : input.replace(/\/+$/, '');
 }
 
 /**
@@ -148,7 +158,7 @@ function removeTrailingSlash(input) {
  * @returns {string} The processed URL
  */
 function removeFirstSlash(input) {
-  return input.replace(/\//, '');
+  return input === null || input === void 0 ? void 0 : input.replace(/\//, '');
 }
 
 /******/ 	return __webpack_exports__;

package/lib/cjs/Utils/time.d.ts

@@ -17,18 +17,18 @@ declare function getTimeslots(startTime: string, endTime: string, timeInterval:
  * @param  {Date} endDate  -  ebd date
  * @returns Number
  */
-declare function getMinutesBetweenDates(startDate: any, endDate: any): number;
+declare function getMinutesBetweenDates(startDate: Date, endDate: Date): number;
 /**
  * Get minutes between two time
  * @param  {String} startTime  -  start time
  * @param  {String} endTime  -  ebd time
  * @returns Number
  */
-declare function getMinutesBetweenTime(startTime: any, endTime: any): string;
+declare function getMinutesBetweenTime(startTime: string, endTime: string): string;
 /**
  * Convert HH:MM:SS into minute
  * @param  {String} timeStr  -  time string
  * @returns Number
  */
-declare function convertTimeToMin(timeStr: any): number;
+declare function convertTimeToMin(timeStr: string): number;
 export { getTimeslots, getMinutesBetweenDates, getMinutesBetweenTime, convertTimeToMin };

package/lib/cjs/Utils/useIsMobile.js

@@ -127,7 +127,7 @@ const App = () => {
  */
 
 var useIsMobile = function useIsMobile() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 768;
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 600;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMobile = _useState2[0],
@@ -140,8 +140,72 @@ var useIsMobile = function useIsMobile() {
     // Set the mounted state to true after the component has mounted
     setIsMounted(true);
     var handleResize = function handleResize() {
-      if (window) {
-        setIsMobile(window.innerWidth <= breakpoint);
+      if (typeof window !== 'undefined') {
+        var detectDeviceType = function detectDeviceType() {
+          // 1. First check if window and navigator are available (SSR compatibility)
+          if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+            return 'desktop'; // Default to desktop
+          }
+
+          // 2. Get user agent string
+          var ua = navigator.userAgent.toLowerCase();
+
+          // 3. Get platform info
+          var platform = navigator.platform ? navigator.platform.toLowerCase() : '';
+
+          // 4. Check screen characteristics using window.matchMedia
+          var isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+          var isPortrait = window.matchMedia('(orientation: portrait)').matches;
+          var isLandscape = window.matchMedia('(orientation: landscape)').matches;
+
+          // 5. Get screen dimensions
+          var screenWidth = window.screen.width;
+          var screenHeight = window.screen.height;
+          var minScreenSize = Math.min(screenWidth, screenHeight);
+          var maxScreenSize = Math.max(screenWidth, screenHeight);
+
+          // Define device characteristics
+          var isTablet =
+          // Traditional UA detection
+          /ipad/.test(ua) || /android/.test(ua) && !/mobile/.test(ua) || /tablet/.test(ua) || /playbook/.test(ua) || /nexus (7|9|10)/.test(ua) || /sm-t/.test(ua) || /huawei(.*)mediapad/.test(ua) ||
+          // Special detection for iPad Pro and newer iPads
+          navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ||
+          // Screen size characteristics (tablets typically fall within this range)
+          minScreenSize >= breakpoint && maxScreenSize <= 1366 && isTouch ||
+          // Specific device detection
+          /kindle|silk|kftt|kfot|kfjwa|kfjwi|kfsowi|kfthwa|kfthwi|kfapwa|kfapwi/i.test(ua);
+          var isMobile = !isTablet && (
+          // Prevent tablets from being detected as phones
+          // Traditional mobile device detection
+          /iphone|ipod|android.*mobile|windows phone|mobi/.test(ua) ||
+          // Screen size characteristics (phones typically smaller than 600px)
+          minScreenSize < breakpoint && isTouch ||
+          // Additional mobile device detection
+          /blackberry|\bbb\d+|meego|webos|palm|phone|pocket|mobile|mini|iemobile/i.test(ua));
+
+          // 6. Comprehensive decision logic
+          if (isMobile) {
+            // Additional check for small tablets
+            if (maxScreenSize >= 1024 && isTouch) {
+              return 'tablet';
+            }
+            return 'mobile';
+          }
+          if (isTablet) {
+            // Additional check for touch-enabled laptops
+            if (maxScreenSize > 1366 && /windows/.test(ua)) {
+              return 'desktop';
+            }
+            return 'tablet';
+          }
+
+          // 7. Check for touch-enabled laptops
+          if (isTouch && /windows/.test(ua) && maxScreenSize > 1366) {
+            return 'desktop';
+          }
+          return 'desktop';
+        };
+        setIsMobile(detectDeviceType() === 'mobile');
       }
     };
 

package/lib/cjs/index.d.ts

@@ -29,6 +29,7 @@ export const NumberInput: any;
 export const Pagination: any;
 export const Radio: any;
 export const RangeSlider: any;
+export const Refresher: any;
 export const RootPortal: any;
 export const ScrollReveal: any;
 export const Scrollbar: any;

package/lib/cjs/index.js

@@ -31,6 +31,7 @@ exports.NumberInput = _interopRequireDefault(require("./NumberInput")).default;
 exports.Pagination = _interopRequireDefault(require("./Pagination")).default;
 exports.Radio = _interopRequireDefault(require("./Radio")).default;
 exports.RangeSlider = _interopRequireDefault(require("./RangeSlider")).default;
+exports.Refresher = _interopRequireDefault(require("./Refresher")).default;
 exports.RootPortal = _interopRequireDefault(require("./RootPortal")).default;
 exports.ScrollReveal = _interopRequireDefault(require("./ScrollReveal")).default;
 exports.Scrollbar = _interopRequireDefault(require("./Scrollbar")).default;

package/lib/css/CascadingSelect/index.css

@@ -89,10 +89,11 @@
   --cas-select-items-li-border-color: #eee;
   --cas-select-loader-color: #000000;
   --cas-select-clean-btn-color: #b5b5b5;
+  --cas-select-searchbox-border-color: #ddd;
   box-shadow: var(--cas-select-items-box-shadow);
   position: absolute;
   left: auto;
-  max-height: 350px;
+  max-height: 300px;
   border: 1px solid var(--cas-select-items-border-color);
   background: var(--cas-select-items-bg);
   padding: 10px;
@@ -106,6 +107,7 @@
   display: none;
   z-index: 1055; /* --bs-modal-zindex */
   /* each item */
+  /* Searchbox */
   /* Options */
 }
 .cas-select__items-wrapper.active {
@@ -124,19 +126,22 @@
   top: 0;
   margin-left: 5px;
   z-index: 1;
-  z-index: 1;
   width: 12px;
   height: 12px;
   text-align: center;
-  transform-origin: bottom;
+  transform-origin: center;
+  transform: translate(2px, 5px) rotate(0);
   animation: 1s linear infinite cas-select__spinner;
 }
+.cas-select__items-wrapper .cas-select__items-loader svg {
+  vertical-align: top;
+}
 .cas-select__items-wrapper .cas-select__items-loader svg path {
   fill: var(--cas-select-loader-color);
 }
 @keyframes cas-select__spinner {
   to {
-    transform: rotate(-360deg);
+    transform: translate(2px, 5px) rotate(-360deg);
   }
 }
 .cas-select__items-wrapper .cas-select__close svg {
@@ -167,6 +172,12 @@
   margin-right: 0;
   border-right: none;
 }
+.cas-select__items-wrapper .cas-select__items-col-searchbox input {
+  border: 1px solid var(--cas-select-searchbox-border-color);
+  border-radius: 0.35rem;
+  background: transparent;
+  font-size: 0.75rem;
+}
 .cas-select__items-wrapper .cas-select__opt {
   padding: var(--cas-select-opt-padding-y) var(--cas-select-opt-padding-x);
   font-size: var(--cas-select-opt-font-size);

package/lib/css/CascadingSelectE2E/index.css

@@ -89,10 +89,11 @@
   --cas-select-e2e-items-li-border-color: #eee;
   --cas-select-e2e-loader-color: #000000;
   --cas-select-e2e-clean-btn-color: #b5b5b5;
+  --cas-select-e2e-searchbox-border-color: #ddd;
   box-shadow: var(--cas-select-e2e-items-box-shadow);
   position: absolute;
   left: auto;
-  max-height: 350px;
+  max-height: 300px;
   border: 1px solid var(--cas-select-e2e-items-border-color);
   background: var(--cas-select-e2e-items-bg);
   padding: 10px;
@@ -106,6 +107,7 @@
   display: none;
   z-index: 1055; /* --bs-modal-zindex */
   /* each item */
+  /* Searchbox */
   /* Options */
 }
 .cas-select-e2e__items-wrapper.active {
@@ -124,19 +126,22 @@
   top: 0;
   margin-left: 5px;
   z-index: 1;
-  z-index: 1;
   width: 12px;
   height: 12px;
   text-align: center;
-  transform-origin: bottom;
+  transform-origin: center;
+  transform: translate(2px, 5px) rotate(0);
   animation: 1s linear infinite cas-select-e2e__spinner;
 }
+.cas-select-e2e__items-wrapper .cas-select-e2e__items-loader svg {
+  vertical-align: top;
+}
 .cas-select-e2e__items-wrapper .cas-select-e2e__items-loader svg path {
   fill: var(--cas-select-e2e-loader-color);
 }
 @keyframes cas-select-e2e__spinner {
   to {
-    transform: rotate(-360deg);
+    transform: translate(2px, 5px) rotate(-360deg);
   }
 }
 .cas-select-e2e__items-wrapper .cas-select-e2e__close svg {
@@ -167,6 +172,12 @@
   margin-right: 0;
   border-right: none;
 }
+.cas-select-e2e__items-wrapper .cas-select-e2e__items-col-searchbox input {
+  border: 1px solid var(--cas-select-e2e-searchbox-border-color);
+  border-radius: 0.35rem;
+  background: transparent;
+  font-size: 0.75rem;
+}
 .cas-select-e2e__items-wrapper .cas-select-e2e__opt {
   padding: var(--cas-select-e2e-opt-padding-y) var(--cas-select-e2e-opt-padding-x);
   font-size: var(--cas-select-e2e-opt-font-size);

package/lib/css/Select/index.css

@@ -56,6 +56,8 @@
 .custom-select__wrapper .custom-select-multi__control-blinking-cursor {
   display: inline-block;
   color: var(--cus-sel-placeholder-color);
+  width: 100%;
+  /* Text preview */
 }
 .custom-select__wrapper .custom-select-multi__control-blinking-cursor.animated {
   animation: 1s mf-sel-blink step-end infinite;
@@ -63,6 +65,13 @@
 .custom-select__wrapper .custom-select-multi__control-blinking-cursor.control-placeholder {
   color: var(--cus-sel-input-placeholder-color);
 }
+.custom-select__wrapper .custom-select-multi__control-blinking-cursor > span {
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+}
 .custom-select__wrapper .custom-select-multi__control-blinking-following-cursor {
   position: absolute;
   top: 0.375rem;
@@ -269,9 +278,12 @@
   --cus-sel-listgroup-content-scrollbar-w: 10px;
   --cus-sel-listgroup-grouptitle-color: #a2a2a2;
   --cus-sel-listgroup-groupborder-color: #d8d8d8;
+  --cus-sel-loader-color: #000000;
   display: none;
   min-width: var(--cus-sel-listgroup-popwin-min-width);
   z-index: 1055; /* --bs-modal-zindex */
+  /*------ Loader ------*/
+  /*------ Options ------*/
   /*------ Multiple selection ------*/
   /*------ Group ------*/
   /*------ Extended buttons of Multiple selection ------*/
@@ -280,6 +292,27 @@
 .custom-select__options-wrapper.active {
   display: block !important;
 }
+.custom-select__options-wrapper .cus-select-loader {
+  pointer-events: none;
+  z-index: 1;
+  width: 12px;
+  height: 12px;
+  text-align: center;
+  transform-origin: center;
+  transform: translate(-5px, 0) rotate(0);
+  animation: 1s linear infinite cus-select__spinner;
+}
+.custom-select__options-wrapper .cus-select-loader svg {
+  vertical-align: top;
+}
+.custom-select__options-wrapper .cus-select-loader svg path {
+  fill: var(--cus-sel-loader-color);
+}
+@keyframes cus-select__spinner {
+  to {
+    transform: translate(-5px, 0) rotate(-360deg);
+  }
+}
 .custom-select__options-wrapper .custom-select__options-contentlist {
   overflow: hidden;
   overflow-y: auto;

package/lib/esm/CascadingSelect/index.scss

@@ -125,11 +125,13 @@
     --cas-select-loader-color: #000000;
     --cas-select-clean-btn-color: #b5b5b5;
     
+    --cas-select-searchbox-border-color: #ddd;
+    
 
     box-shadow: var(--cas-select-items-box-shadow);
     position: absolute;
     left: auto;
-    max-height: 350px;
+    max-height: 300px;
     border: 1px solid var(--cas-select-items-border-color);
     background: var(--cas-select-items-bg);
     padding: 10px;
@@ -165,21 +167,25 @@
         top: 0;
         margin-left: 5px;
         z-index: 1;
-        z-index: 1;
         width: 12px;
         height: 12px;
         text-align: center;
-        transform-origin: bottom;
+        transform-origin: center;
+        transform: translate(2px, 5px) rotate(0);
         animation: 1s linear infinite cas-select__spinner;
 
-        svg path {
-            fill: var(--cas-select-loader-color);
+        svg {
+            vertical-align: top;
+            
+            path {
+                fill: var(--cas-select-loader-color);
+            }
         }
     }
 
     @keyframes cas-select__spinner {
         to {
-            transform: rotate(-360deg);
+            transform: translate(2px, 5px) rotate(-360deg);
         }
     }
 
@@ -224,7 +230,16 @@
     }
 
 
-
+    /* Searchbox */
+    .cas-select__items-col-searchbox {
+        input {
+            border: 1px solid var(--cas-select-searchbox-border-color);
+            border-radius: 0.35rem;
+            background: transparent;
+            font-size: 0.75rem;
+        }
+    }
+    
     /* Options */
     .cas-select__opt {
         padding: var(--cas-select-opt-padding-y) var(--cas-select-opt-padding-x);