@julseb-lib/react 0.1.46 → 0.1.48

package/dist/index.cjs

@@ -177,27 +177,27 @@ __export(index_exports, {
   Tooltip: () => Tooltip,
   URL_REGEX: () => URL_REGEX,
   Wrapper: () => Wrapper,
-  addDay: () => import_utils150.addDay,
-  addMonth: () => import_utils150.addMonth,
-  addYear: () => import_utils150.addYear,
-  calculateAverage: () => import_utils150.calculateAverage,
-  calculateTotalSum: () => import_utils150.calculateTotalSum,
-  capitalize: () => import_utils150.capitalize,
+  addDay: () => import_utils151.addDay,
+  addMonth: () => import_utils151.addMonth,
+  addYear: () => import_utils151.addYear,
+  calculateAverage: () => import_utils151.calculateAverage,
+  calculateTotalSum: () => import_utils151.calculateTotalSum,
+  capitalize: () => import_utils151.capitalize,
   clsx: () => clsx,
-  convertDate: () => import_utils150.convertDate,
-  convertDateShort: () => import_utils150.convertDateShort,
-  convertPrice: () => import_utils150.convertPrice,
-  convertToEmail: () => import_utils150.convertToEmail,
-  convertYoutube: () => import_utils150.convertYoutube,
-  deleteDuplicates: () => import_utils150.deleteDuplicates,
+  convertDate: () => import_utils151.convertDate,
+  convertDateShort: () => import_utils151.convertDateShort,
+  convertPrice: () => import_utils151.convertPrice,
+  convertToEmail: () => import_utils151.convertToEmail,
+  convertYoutube: () => import_utils151.convertYoutube,
+  deleteDuplicates: () => import_utils151.deleteDuplicates,
   designTokens: () => designTokens,
-  detectLanguage: () => import_utils150.detectLanguage,
-  disableScroll: () => import_utils150.disableScroll,
-  emailRegex: () => import_utils150.emailRegex,
-  enableScroll: () => import_utils150.enableScroll,
-  filterObject: () => import_utils150.filterObject,
-  formatDate: () => import_utils150.formatDate,
-  formatHour: () => import_utils150.formatHour,
+  detectLanguage: () => import_utils151.detectLanguage,
+  disableScroll: () => import_utils151.disableScroll,
+  emailRegex: () => import_utils151.emailRegex,
+  enableScroll: () => import_utils151.enableScroll,
+  filterObject: () => import_utils151.filterObject,
+  formatDate: () => import_utils151.formatDate,
+  formatHour: () => import_utils151.formatHour,
   genAlignContent: () => genAlignContent,
   genAlignItems: () => genAlignItems,
   genBgAllColors: () => genBgAllColors,
@@ -232,43 +232,43 @@ __export(index_exports, {
   genTextColorHover: () => genTextColorHover,
   genTextColorShort: () => genTextColorShort,
   genVAlign: () => genVAlign,
-  generateNumbers: () => import_utils150.generateNumbers,
-  getFirstName: () => import_utils150.getFirstName,
-  getInitials: () => import_utils150.getInitials,
-  getLastName: () => import_utils150.getLastName,
-  getNextDay: () => import_utils150.getNextDay,
-  getPercentage: () => import_utils150.getPercentage,
-  getRandom: () => import_utils150.getRandom,
-  getRandomAvatar: () => import_utils150.getRandomAvatar,
-  getRandomDate: () => import_utils150.getRandomDate,
-  getRandomNumber: () => import_utils150.getRandomNumber,
-  getRandomString: () => import_utils150.getRandomString,
-  getRandomTime: () => import_utils150.getRandomTime,
-  getTimeNow: () => import_utils150.getTimeNow,
-  getToday: () => import_utils150.getToday,
-  getTomorrow: () => import_utils150.getTomorrow,
-  getYesterday: () => import_utils150.getYesterday,
-  hexToRgb: () => import_utils150.hexToRgb,
+  generateNumbers: () => import_utils151.generateNumbers,
+  getFirstName: () => import_utils151.getFirstName,
+  getInitials: () => import_utils151.getInitials,
+  getLastName: () => import_utils151.getLastName,
+  getNextDay: () => import_utils151.getNextDay,
+  getPercentage: () => import_utils151.getPercentage,
+  getRandom: () => import_utils151.getRandom,
+  getRandomAvatar: () => import_utils151.getRandomAvatar,
+  getRandomDate: () => import_utils151.getRandomDate,
+  getRandomNumber: () => import_utils151.getRandomNumber,
+  getRandomString: () => import_utils151.getRandomString,
+  getRandomTime: () => import_utils151.getRandomTime,
+  getTimeNow: () => import_utils151.getTimeNow,
+  getToday: () => import_utils151.getToday,
+  getTomorrow: () => import_utils151.getTomorrow,
+  getYesterday: () => import_utils151.getYesterday,
+  hexToRgb: () => import_utils151.hexToRgb,
   libMarkdownEditorOptions: () => libMarkdownEditorOptions,
   libOptionsMarkdown: () => libOptionsMarkdown,
   linkifyText: () => linkifyText,
-  passwordRegex: () => import_utils150.passwordRegex,
-  rgbToHex: () => import_utils150.rgbToHex,
-  scrollToTop: () => import_utils150.scrollToTop,
-  slugify: () => import_utils150.slugify,
-  sortByFrequency: () => import_utils150.sortByFrequency,
-  stringifyPx: () => import_utils150.stringifyPx,
-  toCamelCase: () => import_utils150.toCamelCase,
-  toConstantCase: () => import_utils150.toConstantCase,
-  toDotCase: () => import_utils150.toDotCase,
-  toKebabCase: () => import_utils150.toKebabCase,
-  toPascalCase: () => import_utils150.toPascalCase,
-  toPathCase: () => import_utils150.toPathCase,
-  toSentenceCase: () => import_utils150.toSentenceCase,
-  toSnakeCase: () => import_utils150.toSnakeCase,
-  toTitleCase: () => import_utils150.toTitleCase,
+  passwordRegex: () => import_utils151.passwordRegex,
+  rgbToHex: () => import_utils151.rgbToHex,
+  scrollToTop: () => import_utils151.scrollToTop,
+  slugify: () => import_utils151.slugify,
+  sortByFrequency: () => import_utils151.sortByFrequency,
+  stringifyPx: () => import_utils151.stringifyPx,
+  toCamelCase: () => import_utils151.toCamelCase,
+  toConstantCase: () => import_utils151.toConstantCase,
+  toDotCase: () => import_utils151.toDotCase,
+  toKebabCase: () => import_utils151.toKebabCase,
+  toPascalCase: () => import_utils151.toPascalCase,
+  toPathCase: () => import_utils151.toPathCase,
+  toSentenceCase: () => import_utils151.toSentenceCase,
+  toSnakeCase: () => import_utils151.toSnakeCase,
+  toTitleCase: () => import_utils151.toTitleCase,
   toast: () => toast,
-  unslugify: () => import_utils150.unslugify,
+  unslugify: () => import_utils151.unslugify,
   useClickOutside: () => useClickOutside,
   useCopyToClipboard: () => useCopyToClipboard,
   useDebounce: () => useDebounce,
@@ -285,7 +285,7 @@ __export(index_exports, {
   usePagination: () => usePagination,
   useTouchScreen: () => useTouchScreen,
   useTranslation: () => useTranslation,
-  uuid: () => import_utils150.uuid
+  uuid: () => import_utils151.uuid
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1589,6 +1589,9 @@ var genVAlign = {
   "align-super": "align-super"
 };
 
+// src/lib/components/Text/Text.tsx
+var import_react2 = require("react");
+
 // src/lib/components/Text/templates/H1.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var H1 = (_a) => {
@@ -2184,6 +2187,7 @@ var Text = (_a) => {
 };
 
 // src/lib/components/Table/Table.tsx
+var import_react3 = require("react");
 var import_utils17 = require("@julseb-lib/utils");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Table = (_a) => {
@@ -2319,12 +2323,12 @@ var genRingColorChildren = {
 };
 
 // src/lib/index.ts
-var import_utils150 = require("@julseb-lib/utils");
+var import_utils151 = require("@julseb-lib/utils");
 
 // src/lib/hooks/useClickOutside.tsx
-var import_react2 = require("react");
+var import_react4 = require("react");
 var useClickOutside = (ref, handler) => {
-  (0, import_react2.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const listener = (e) => {
       const target = e.target;
       if (target.getAttribute("href")) return false;
@@ -2342,9 +2346,9 @@ var useClickOutside = (ref, handler) => {
 };
 
 // src/lib/hooks/useCopyToClipboard.tsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 var useCopyToClipboard = () => {
-  const [copiedText, setCopiedText] = (0, import_react3.useState)(null);
+  const [copiedText, setCopiedText] = (0, import_react5.useState)(null);
   const copy = (text) => __async(null, null, function* () {
     if (!(navigator == null ? void 0 : navigator.clipboard)) {
       console.warn("Clipboard not supported");
@@ -2364,10 +2368,10 @@ var useCopyToClipboard = () => {
 };
 
 // src/lib/hooks/useDebounce.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 var useDebounce = (value, delay = 1e3) => {
-  const [debouncedValue, setDebouncedValue] = (0, import_react4.useState)(value);
-  (0, import_react4.useEffect)(() => {
+  const [debouncedValue, setDebouncedValue] = (0, import_react6.useState)(value);
+  (0, import_react6.useEffect)(() => {
     const timedValue = setTimeout(() => setDebouncedValue(value), delay);
     return () => clearTimeout(timedValue);
   }, [value, delay]);
@@ -2411,21 +2415,21 @@ var useExportData = () => {
 };
 
 // src/lib/hooks/useFetch.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var useFetch = (fetchFunction, dependencies) => {
-  const [response, setResponse] = (0, import_react5.useState)(null);
-  const [loading, setLoading] = (0, import_react5.useState)(true);
-  const [error, setError] = (0, import_react5.useState)(void 0);
-  (0, import_react5.useEffect)(() => {
+  const [response, setResponse] = (0, import_react7.useState)(null);
+  const [loading, setLoading] = (0, import_react7.useState)(true);
+  const [error, setError] = (0, import_react7.useState)(void 0);
+  (0, import_react7.useEffect)(() => {
     fetchFunction.then((res) => setResponse(res)).catch((err) => setError(err)).finally(() => setLoading(false));
   }, [dependencies]);
   return { response, error, loading };
 };
 
 // src/lib/hooks/useForm.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 var useForm = (initialState = {}, onSubmit) => {
-  const [formData, setFormData] = (0, import_react6.useState)(initialState);
+  const [formData, setFormData] = (0, import_react8.useState)(initialState);
   const handleInputs = (e) => setFormData(__spreadProps(__spreadValues({}, formData), { [e.target.id]: e.target.value }));
   const resetForm = () => setFormData(initialState);
   const handleSubmit = (e) => {
@@ -2436,10 +2440,10 @@ var useForm = (initialState = {}, onSubmit) => {
 };
 
 // src/lib/hooks/useIsOverflow.ts
-var import_react7 = require("react");
+var import_react9 = require("react");
 var useIsOverflow = (ref, options) => {
-  const [isOverflow, setIsOverflow] = (0, import_react7.useState)(void 0);
-  (0, import_react7.useLayoutEffect)(() => {
+  const [isOverflow, setIsOverflow] = (0, import_react9.useState)(void 0);
+  (0, import_react9.useLayoutEffect)(() => {
     const { current } = ref;
     const trigger = () => {
       if (current) {
@@ -2454,9 +2458,9 @@ var useIsOverflow = (ref, options) => {
 };
 
 // src/lib/hooks/useKeyPress.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 var useKeyPress = (keyCodes, callback, excludeKeys) => {
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const singleHandler = ({ code }) => {
       if (keyCodes.includes(code)) {
         callback();
@@ -2495,10 +2499,10 @@ var useKeyPress = (keyCodes, callback, excludeKeys) => {
 };
 
 // src/lib/hooks/useMaxWidth.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 var useMaxWidth = (width) => {
-  const [isMax, setIsMax] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [isMax, setIsMax] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
     const detectSize = () => {
       if (window.innerWidth <= width) {
         setIsMax(true);
@@ -2513,9 +2517,9 @@ var useMaxWidth = (width) => {
 };
 
 // src/lib/hooks/useMergeRefs.ts
-var import_react10 = require("react");
+var import_react12 = require("react");
 var useMergeRefs = (refs) => {
-  return (0, import_react10.useMemo)(() => {
+  return (0, import_react12.useMemo)(() => {
     if (refs.every((ref) => ref == null)) {
       return null;
     }
@@ -2533,10 +2537,10 @@ var useMergeRefs = (refs) => {
 };
 
 // src/lib/hooks/useMinWidth.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var useMinWidth = (width) => {
-  const [isMin, setIsMin] = (0, import_react11.useState)(false);
-  (0, import_react11.useEffect)(() => {
+  const [isMin, setIsMin] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => {
     const detectSize = () => {
       if (window.innerWidth >= width) {
         setIsMin(true);
@@ -2596,10 +2600,10 @@ var usePagination = ({
 };
 
 // src/lib/hooks/useTouchScreen.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var useTouchScreen = () => {
-  const [isTouchScreen, setIsTouchScreen] = (0, import_react12.useState)(false);
-  (0, import_react12.useLayoutEffect)(() => {
+  const [isTouchScreen, setIsTouchScreen] = (0, import_react14.useState)(false);
+  (0, import_react14.useLayoutEffect)(() => {
     const isTouchDevice = () => {
       return "ontouchstart" in window || navigator.maxTouchPoints > 0;
     };
@@ -2609,12 +2613,12 @@ var useTouchScreen = () => {
 };
 
 // src/lib/hooks/useTranslation.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_utils20 = require("@julseb-lib/utils");
 var useTranslation = (translations) => {
-  const [language, setLanguage] = (0, import_react13.useState)("en");
+  const [language, setLanguage] = (0, import_react15.useState)("en");
   const languages = Object.keys(translations);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     var _a;
     if (window && typeof window !== "undefined") {
       setLanguage((_a = (0, import_utils20.detectLanguage)()) != null ? _a : "en");
@@ -2839,11 +2843,11 @@ var ICON_MULTIPLIER = 0.6;
 var INPUT_HEIGHT = 32;
 
 // src/lib/context/Theme.context.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react14.createContext)(null);
+var ThemeContext = (0, import_react16.createContext)(null);
 var ThemeProviderWrapper = ({ children }) => {
-  const [theme, setTheme] = (0, import_react14.useState)("light");
+  const [theme, setTheme] = (0, import_react16.useState)("light");
   const switchToLight = () => {
     if (typeof window !== "undefined") {
       document.documentElement.classList.add("light");
@@ -2860,7 +2864,7 @@ var ThemeProviderWrapper = ({ children }) => {
       localStorage.setItem("theme", "dark");
     }
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (typeof window !== "undefined") {
       const storedTheme = localStorage.getItem("theme");
       if (storedTheme) {
@@ -2879,9 +2883,10 @@ var ThemeProviderWrapper = ({ children }) => {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ThemeContext.Provider, { value: { theme, setTheme, switchTheme }, children });
 };
-var useLibTheme = () => (0, import_react14.useContext)(ThemeContext);
+var useLibTheme = () => (0, import_react16.useContext)(ThemeContext);
 
 // src/lib/components/Wrapper/Wrapper.tsx
+var import_react17 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Wrapper = (_a) => {
   var _b = _a, {
@@ -2937,6 +2942,7 @@ var genMinHeight = {
 };
 
 // src/lib/components/Main/Main.tsx
+var import_react18 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var Main = (_a) => {
   var _b = _a, {
@@ -2981,6 +2987,7 @@ var maxWidth = {
 };
 
 // src/lib/components/Aside/Aside.tsx
+var import_react19 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var Aside = (_a) => {
   var _b = _a, {
@@ -3021,6 +3028,7 @@ var asideSize = {
 };
 
 // src/lib/components/Section/Section.tsx
+var import_react20 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var Section = (_a) => {
   var _b = _a, {
@@ -3054,6 +3062,7 @@ var Section = (_a) => {
 };
 
 // src/lib/components/Grid/Grid.tsx
+var import_react21 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var Grid = (_a) => {
   var _b = _a, {
@@ -3123,6 +3132,7 @@ var genGridColumns = {
 };
 
 // src/lib/components/Flexbox/Flexbox.tsx
+var import_react22 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var Flexbox = (_a) => {
   var _b = _a, {
@@ -3193,7 +3203,7 @@ var genFlexWrap = {
 };
 
 // src/lib/components/Key/Key.tsx
-var import_react15 = require("react");
+var import_react23 = require("react");
 var import_utils27 = require("@julseb-lib/utils");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var Key = (_a) => {
@@ -3215,7 +3225,7 @@ var Key = (_a) => {
     "accentColor"
   ]);
   const Element = element;
-  const childrenArray = import_react15.Children.toArray(
+  const childrenArray = import_react23.Children.toArray(
     children == null ? void 0 : children.toString().replaceAll(",", "").split("")
   );
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -3234,7 +3244,7 @@ var Key = (_a) => {
         className
       )
     }, rest), {
-      children: childrenArray.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react15.Fragment, { children: [
+      children: childrenArray.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react23.Fragment, { children: [
         child,
         withSeparator && i !== childrenArray.length - 1 && " + "
       ] }, (0, import_utils27.uuid)()))
@@ -3258,13 +3268,16 @@ var genBorderBottom = {
   large: "border-b-4"
 };
 
+// src/lib/components/Highlight/Highlight.tsx
+var import_react26 = require("react");
+
 // src/lib/lib-utils/get-highlighted-text.tsx
-var import_react16 = require("react");
+var import_react24 = require("react");
 var import_utils29 = require("@julseb-lib/utils");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var getHighlightedText = (text, value, highlightStyle, className) => {
   const parts = text == null ? void 0 : text.toString().split(new RegExp(`(${value})`, "gi"));
-  return parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react16.Fragment, { children: (0, import_utils29.slugify)(part) === (0, import_utils29.slugify)(value) ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react24.Fragment, { children: (0, import_utils29.slugify)(part) === (0, import_utils29.slugify)(value) ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Text,
     {
       tag: "strong",
@@ -3283,16 +3296,16 @@ var transformSearchKeys = (keys) => {
 };
 
 // src/lib/lib-utils/use-keyboard-navigation.tsx
-var import_react17 = require("react");
+var import_react25 = require("react");
 var useKeyboardNavigation = ({
   data,
   value,
   setValue
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
-  const [cursor, setCursor] = (0, import_react17.useState)(0);
-  const listRef = (0, import_react17.useRef)(null);
-  const handleKeyboardNavigation = (0, import_react17.useCallback)(
+  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
+  const [cursor, setCursor] = (0, import_react25.useState)(0);
+  const listRef = (0, import_react25.useRef)(null);
+  const handleKeyboardNavigation = (0, import_react25.useCallback)(
     (e) => {
       var _a, _b, _c, _d, _e;
       const { key } = e;
@@ -3336,7 +3349,7 @@ var useKeyboardNavigation = ({
     },
     [isOpen, cursor, data, value, setValue]
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     document.addEventListener("keydown", handleKeyboardNavigation);
     return () => document.removeEventListener("keydown", handleKeyboardNavigation);
   }, [handleKeyboardNavigation]);
@@ -3373,7 +3386,7 @@ var Highlight = (_a) => {
 };
 
 // src/lib/components/Linkify/Linkify.tsx
-var import_react18 = require("react");
+var import_react27 = require("react");
 var import_utils32 = require("@julseb-lib/utils");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var URL_REGEX2 = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm;
@@ -3396,7 +3409,7 @@ var Linkify = (_a) => {
   const Element = element;
   const words = children ? children.split(" ") : [];
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Element, __spreadProps(__spreadValues({ ref, className: clsx("linkify", className) }, rest), { children: words == null ? void 0 : words.map(
-    (word) => word.match(URL_REGEX2) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react18.Fragment, { children: [
+    (word) => word.match(URL_REGEX2) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react27.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "a",
         {
@@ -3413,6 +3426,7 @@ var Linkify = (_a) => {
 };
 
 // src/lib/components/Hr/Hr.tsx
+var import_react28 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var Hr = (_a) => {
   var _b = _a, {
@@ -3448,6 +3462,7 @@ var Hr = (_a) => {
 };
 
 // src/lib/components/Skeleton/Skeleton.tsx
+var import_react29 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var Skeleton = (_a) => {
   var _b = _a, {
@@ -3530,7 +3545,7 @@ var SkeletonCard = (_a) => {
 };
 
 // src/lib/components/Tooltip/Tooltip.tsx
-var import_react19 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var Tooltip = (_a) => {
   var _b = _a, {
@@ -3571,18 +3586,18 @@ var Tooltip = (_a) => {
   const Element = element;
   const isTouchScreen = useTouchScreen();
   const defaultTrigger = trigger === "click" || isTouchScreen ? "click" : "hover";
-  const [isVisible, setIsVisible] = (0, import_react19.useState)(false);
-  const el = (0, import_react19.useRef)(null);
+  const [isVisible, setIsVisible] = (0, import_react30.useState)(false);
+  const el = (0, import_react30.useRef)(null);
   useClickOutside(el, () => {
     if (isVisible && defaultTrigger === "click") setIsVisible(false);
   });
-  const handleClick = (0, import_react19.useCallback)(() => {
+  const handleClick = (0, import_react30.useCallback)(() => {
     setIsVisible(!isVisible);
   }, [isVisible]);
-  const handleHover = (0, import_react19.useCallback)(() => {
+  const handleHover = (0, import_react30.useCallback)(() => {
     setIsVisible(true);
   }, []);
-  const handleLeave = (0, import_react19.useCallback)(() => {
+  const handleLeave = (0, import_react30.useCallback)(() => {
     setIsVisible(false);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
@@ -3675,6 +3690,7 @@ var genPosition = {
 };
 
 // src/lib/components/Image/Image.tsx
+var import_react31 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var Image = (_a) => {
   var _b = _a, {
@@ -3745,15 +3761,15 @@ var Image = (_a) => {
 };
 
 // src/lib/components/Masonry/Masonry.tsx
-var import_react21 = require("react");
+var import_react33 = require("react");
 var import_utils39 = require("@julseb-lib/utils");
 
 // src/lib/components/Masonry/utils.tsx
-var import_react20 = require("react");
+var import_react32 = require("react");
 function useEventListener(eventNames, handler, element = globalThis) {
-  const savedHandler = (0, import_react20.useRef)(null);
-  (0, import_react20.useEffect)(() => savedHandler.current = handler, [handler]);
-  (0, import_react20.useEffect)(() => {
+  const savedHandler = (0, import_react32.useRef)(null);
+  (0, import_react32.useEffect)(() => savedHandler.current = handler, [handler]);
+  (0, import_react32.useEffect)(() => {
     if (!element.addEventListener) return;
     const listener = (e) => savedHandler.current(e);
     for (const e of eventNames) element.addEventListener(e, listener);
@@ -3785,17 +3801,17 @@ var Masonry = (_a) => {
     "col",
     "gap"
   ]);
-  const el = (0, import_react21.useRef)(null);
-  const [numCols, setNumCols] = (0, import_react21.useState)(col);
+  const el = (0, import_react33.useRef)(null);
+  const [numCols, setNumCols] = (0, import_react33.useState)(col);
   const cols = [...Array(col)].map(() => []);
   fillCols(children, cols);
-  const resizeHandler = (0, import_react21.useCallback)(
+  const resizeHandler = (0, import_react33.useCallback)(
     () => setNumCols(
       Math.ceil(window.innerWidth / (window.innerWidth / numCols))
     ),
     [numCols]
   );
-  (0, import_react21.useEffect)(resizeHandler, [numCols, resizeHandler]);
+  (0, import_react33.useEffect)(resizeHandler, [numCols, resizeHandler]);
   useEventListener("resize", resizeHandler);
   const Element = element;
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -3822,6 +3838,7 @@ var Masonry = (_a) => {
 };
 
 // src/lib/components/Badge/Badge.tsx
+var import_react34 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var Badge = (_a) => {
   var _b = _a, {
@@ -3860,7 +3877,11 @@ var Badge = (_a) => {
   );
 };
 
+// src/lib/components/Avatar/Avatar.tsx
+var import_react36 = require("react");
+
 // src/lib/components/Avatar/AvatarFn.tsx
+var import_react35 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var AvatarFn = (_a) => {
   var _b = _a, {
@@ -3973,6 +3994,12 @@ var Avatar = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AvatarFn, __spreadValues({}, avatarProps));
 };
 
+// src/lib/components/Loader/Loader.tsx
+var import_react40 = require("react");
+
+// src/lib/components/Loader/templates/LoaderOne.tsx
+var import_react37 = require("react");
+
 // src/lib/components/Loader/utils/gen-border-bottom.ts
 var genBorderBottomColorAll = {
   black: "border-b-black",
@@ -4093,6 +4120,7 @@ var LoaderOne = (_a) => {
 };
 
 // src/lib/components/Loader/templates/LoaderTwo.tsx
+var import_react38 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var SPAN_COMMON = "block absolute w-full h-full border-8 border-transparent rounded-full animate-[spin_1200ms_var(--animate-cubic-bezier)_infinite_var(--spinner-delay)]";
 var LoaderTwo = (_a) => {
@@ -4168,6 +4196,7 @@ var LoaderTwo = (_a) => {
 };
 
 // src/lib/components/Loader/templates/LoaderThree.tsx
+var import_react39 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var LoaderThree = (_a) => {
   var _b = _a, {
@@ -4244,6 +4273,7 @@ var Loader = (_a) => {
 };
 
 // src/lib/components/Burger/Burger.tsx
+var import_react41 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var SPAN_COMMON2 = "left-0 absolute w-full h-0.5 transition-all duration-200 ease-in-out";
 var Burger = (_a) => {
@@ -4339,6 +4369,7 @@ var genHover = {
 };
 
 // src/lib/components/Button/Button.tsx
+var import_react42 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var Button = (_a) => {
   var _b = _a, {
@@ -4419,7 +4450,11 @@ var Button = (_a) => {
   );
 };
 
+// src/lib/components/ButtonIcon/ButtonIcon.tsx
+var import_react44 = require("react");
+
 // src/lib/components/ButtonIcon/ButtonFn.tsx
+var import_react43 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var ButtonIconFn = (_a) => {
   var _b = _a, {
@@ -4565,7 +4600,7 @@ var ButtonIcon = (_a) => {
 };
 
 // src/lib/components/ButtonGroup/ButtonGroup.tsx
-var import_react22 = require("react");
+var import_react45 = require("react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var ButtonGroup = (_a) => {
   var _b = _a, {
@@ -4604,7 +4639,7 @@ var ButtonGroup = (_a) => {
     alignItems: "center"
   }, rest);
   if (buttons)
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Element, __spreadProps(__spreadValues({}, elementProps), { children: buttons.map((button, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react22.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Element, __spreadProps(__spreadValues({}, elementProps), { children: buttons.map((button, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react45.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "button",
         __spreadProps(__spreadValues({
@@ -4646,6 +4681,7 @@ var ButtonGroup = (_a) => {
 };
 
 // src/lib/components/Tag/Tag.tsx
+var import_react46 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var Tag = (_a) => {
   var _b = _a, {
@@ -4694,6 +4730,7 @@ var Tag = (_a) => {
 };
 
 // src/lib/components/InputContainer/InputContainer.tsx
+var import_react47 = require("react");
 var import_bi = require("react-icons/bi");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var InputContainer = (_a) => {
@@ -4809,6 +4846,12 @@ var InputContainer = (_a) => {
   );
 };
 
+// src/lib/components/Input/Input.tsx
+var import_react58 = require("react");
+
+// src/lib/components/Input/templates/ColorInput.tsx
+var import_react49 = require("react");
+
 // src/lib/components/InputComponents/InputValidation.tsx
 var import_bi2 = require("react-icons/bi");
 
@@ -4943,6 +4986,7 @@ var InputIcon = ({ icon, inputVariant, disabled }) => {
 };
 
 // src/lib/components/InputComponents/InputWrapper.tsx
+var import_react48 = require("react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var InputWrapper = ({
   children,
@@ -5111,7 +5155,7 @@ var ColorInput = (_a) => {
 };
 
 // src/lib/components/Input/templates/DateInput.tsx
-var import_react23 = require("react");
+var import_react50 = require("react");
 var import_bi3 = require("react-icons/bi");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var DateInput = (_a) => {
@@ -5136,7 +5180,7 @@ var DateInput = (_a) => {
     "iconCalendar",
     "disabled"
   ]);
-  const el = (0, import_react23.useRef)(null);
+  const el = (0, import_react50.useRef)(null);
   const showPicker = () => {
     var _a2;
     return (_a2 = el.current) == null ? void 0 : _a2.showPicker();
@@ -5182,6 +5226,7 @@ var DateInput = (_a) => {
 };
 
 // src/lib/components/Input/templates/FileInput.tsx
+var import_react51 = require("react");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var FileInput = (_a) => {
   var _b = _a, {
@@ -5227,7 +5272,7 @@ var FileInput = (_a) => {
 };
 
 // src/lib/components/Input/templates/PasswordInput.tsx
-var import_react24 = require("react");
+var import_react52 = require("react");
 var import_bi4 = require("react-icons/bi");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var PasswordInput = (_a) => {
@@ -5253,7 +5298,7 @@ var PasswordInput = (_a) => {
     "disabled"
   ]);
   var _a2, _b2, _c, _d;
-  const [inputType, setInputType] = (0, import_react24.useState)("password");
+  const [inputType, setInputType] = (0, import_react52.useState)("password");
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     InputWrapper,
     {
@@ -5301,7 +5346,7 @@ var PasswordInput = (_a) => {
 };
 
 // src/lib/components/Input/templates/SearchInput.tsx
-var import_react25 = require("react");
+var import_react53 = require("react");
 var import_bi5 = require("react-icons/bi");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var SearchInput = (_a) => {
@@ -5335,7 +5380,7 @@ var SearchInput = (_a) => {
     "disabled"
   ]);
   const isTouchScreen = useTouchScreen();
-  const el = (0, import_react25.useRef)(null);
+  const el = (0, import_react53.useRef)(null);
   const handleFocus = () => {
     var _a2;
     return (_a2 = el == null ? void 0 : el.current) == null ? void 0 : _a2.focus();
@@ -5387,7 +5432,7 @@ var SearchInput = (_a) => {
 };
 
 // src/lib/components/Input/templates/SelectInput.tsx
-var import_react26 = require("react");
+var import_react54 = require("react");
 var import_bi6 = require("react-icons/bi");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var SelectInput = (_a) => {
@@ -5412,7 +5457,7 @@ var SelectInput = (_a) => {
     "iconSelect",
     "disabled"
   ]);
-  const el = (0, import_react26.useRef)(null);
+  const el = (0, import_react54.useRef)(null);
   const handleContainerClick = () => {
     if (!disabled && el.current) {
       el.current.focus();
@@ -5465,6 +5510,7 @@ var SelectInput = (_a) => {
 };
 
 // src/lib/components/Input/templates/TextareaInput.tsx
+var import_react55 = require("react");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var TextareaInput = (_a) => {
   var _b = _a, {
@@ -5494,6 +5540,7 @@ var TextareaInput = (_a) => {
 };
 
 // src/lib/components/Input/templates/TextInput.tsx
+var import_react56 = require("react");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var TextInput = (_a) => {
   var _b = _a, {
@@ -5556,7 +5603,7 @@ var TextInput = (_a) => {
 };
 
 // src/lib/components/Input/templates/TimeInput.tsx
-var import_react27 = require("react");
+var import_react57 = require("react");
 var import_bi7 = require("react-icons/bi");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var TimeInput = (_a) => {
@@ -5583,7 +5630,7 @@ var TimeInput = (_a) => {
     "disabled",
     "prefix"
   ]);
-  const el = (0, import_react27.useRef)(null);
+  const el = (0, import_react57.useRef)(null);
   const showPicker = () => {
     var _a2;
     return (_a2 = el.current) == null ? void 0 : _a2.showPicker();
@@ -5725,7 +5772,7 @@ var Input = (_a) => {
 };
 
 // src/lib/components/InputImage/InputImage.tsx
-var import_react28 = require("react");
+var import_react59 = require("react");
 
 // src/lib/components/InputImage/HoverContainer.tsx
 var import_bi8 = require("react-icons/bi");
@@ -5797,7 +5844,7 @@ var InputImage = (_a) => {
     "id",
     "containerClassName"
   ]);
-  const [isHovered, setIsHovered] = (0, import_react28.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react59.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     InputContainer,
     {
@@ -5849,6 +5896,7 @@ var InputImage = (_a) => {
 };
 
 // src/lib/components/InputCheck/InputCheck.tsx
+var import_react60 = require("react");
 var import_bi10 = require("react-icons/bi");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var InputCheck = (_a) => {
@@ -5977,7 +6025,7 @@ var InputCheck = (_a) => {
 };
 
 // src/lib/components/InputPhone/InputPhone.tsx
-var import_react29 = require("react");
+var import_react61 = require("react");
 var import_bi12 = require("react-icons/bi");
 
 // src/lib/components/InputPhone/utils/flags/af.svg
@@ -7153,16 +7201,16 @@ var InputPhone = (_a) => {
     "containerClassName"
   ]);
   var _a2, _b2;
-  const [isOpen, setIsOpen] = (0, import_react29.useState)(false);
-  const country = (0, import_react29.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react61.useState)(false);
+  const country = (0, import_react61.useMemo)(() => {
     if (selectedCountry) return selectedCountry;
     else return countries.find((country2) => (country2 == null ? void 0 : country2.code) === defaultCountry);
   }, [defaultCountry, selectedCountry]);
-  const listRef = (0, import_react29.useRef)(null);
+  const listRef = (0, import_react61.useRef)(null);
   useClickOutside(listRef, () => {
     if (isOpen) setIsOpen(false);
   });
-  const [search, setSearch] = (0, import_react29.useState)("");
+  const [search, setSearch] = (0, import_react61.useState)("");
   const results = countries.filter(
     (country2) => (country2 == null ? void 0 : country2.name.toLowerCase().includes(search.toLowerCase())) || (country2 == null ? void 0 : country2.dial_code.toLowerCase().includes(search.toLowerCase())) || (country2 == null ? void 0 : country2.code.toLowerCase().includes(search.toLowerCase()))
   );
@@ -7330,6 +7378,7 @@ var InputPhone = (_a) => {
 };
 
 // src/lib/components/InputCounter/InputCounter.tsx
+var import_react62 = require("react");
 var import_bi13 = require("react-icons/bi");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var InputCounter = (_a) => {
@@ -7453,7 +7502,7 @@ var InputCounter = (_a) => {
 };
 
 // src/lib/components/InputSlider/InputSlider.tsx
-var import_react30 = require("react");
+var import_react63 = require("react");
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var InputSlider = (_a) => {
   var _b = _a, {
@@ -7488,7 +7537,7 @@ var InputSlider = (_a) => {
     "containerClassName"
   ]);
   const percentage = (Number(value) - min) / (max - min) * 100;
-  const [isTooltipVisible, setIsTooltipVisible] = (0, import_react30.useState)(
+  const [isTooltipVisible, setIsTooltipVisible] = (0, import_react63.useState)(
     !!(showValue === "always")
   );
   const inputProps = __spreadValues({
@@ -7576,7 +7625,7 @@ var InputSlider = (_a) => {
 };
 
 // src/lib/components/Select/Select.tsx
-var import_react31 = require("react");
+var import_react64 = require("react");
 var import_bi14 = require("react-icons/bi");
 var import_jsx_runtime75 = require("react/jsx-runtime");
 var Select = (_a) => {
@@ -7618,7 +7667,7 @@ var Select = (_a) => {
     "containerClassName"
   ]);
   var _a2;
-  const el = (0, import_react31.useRef)(null);
+  const el = (0, import_react64.useRef)(null);
   useClickOutside(el, () => {
     if (isOpen) setIsOpen(false);
   });
@@ -7725,7 +7774,7 @@ var Select = (_a) => {
 };
 
 // src/lib/components/Autocomplete/Autocomplete.tsx
-var import_react32 = require("react");
+var import_react65 = require("react");
 var import_fuse = __toESM(require("fuse.js"), 1);
 var import_bi15 = require("react-icons/bi");
 var import_utils82 = require("@julseb-lib/utils");
@@ -7778,13 +7827,13 @@ var Autocomplete = (_a) => {
   ]);
   var _a2;
   const isTouchScreen = useTouchScreen();
-  const inputRef = (0, import_react32.useRef)(null);
+  const inputRef = (0, import_react65.useRef)(null);
   const keys = focusKeys;
   useKeyPress(keys, () => {
     var _a3;
     return (_a3 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a3.focus();
   });
-  const fuzzyResults = (0, import_react32.useMemo)(() => {
+  const fuzzyResults = (0, import_react65.useMemo)(() => {
     var _a3, _b2;
     const fuse = new import_fuse.default(listResults, fuzzyOptions);
     return (_b2 = (_a3 = fuse == null ? void 0 : fuse.search(value)) == null ? void 0 : _a3.slice(0, 20)) == null ? void 0 : _b2.map((res) => res.item);
@@ -7903,6 +7952,7 @@ var Autocomplete = (_a) => {
 };
 
 // src/lib/components/Rating/Rating.tsx
+var import_react66 = require("react");
 var import_bi16 = require("react-icons/bi");
 var import_utils84 = require("@julseb-lib/utils");
 var import_jsx_runtime77 = require("react/jsx-runtime");
@@ -7989,7 +8039,7 @@ var Rating = (_a) => {
 };
 
 // src/lib/components/InputPin/InputPin.tsx
-var import_react33 = require("react");
+var import_react67 = require("react");
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var InputPin = (_a) => {
   var _b = _a, {
@@ -8027,8 +8077,8 @@ var InputPin = (_a) => {
     "autoFocus",
     "containerClassName"
   ]);
-  const [inputsRefsArr] = (0, import_react33.useState)(
-    () => Array.from({ length: Object.keys(values).length }, () => (0, import_react33.createRef)())
+  const [inputsRefsArr] = (0, import_react67.useState)(
+    () => Array.from({ length: Object.keys(values).length }, () => (0, import_react67.createRef)())
   );
   const handleChange = (e, i) => {
     setValues(__spreadProps(__spreadValues({}, values), { [e.target.id]: e.target.value }));
@@ -8090,6 +8140,7 @@ var InputPin = (_a) => {
 };
 
 // src/lib/components/Fieldset/Fieldset.tsx
+var import_react68 = require("react");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var Fieldset = (_a) => {
   var _b = _a, {
@@ -8152,6 +8203,7 @@ var Fieldset = (_a) => {
 };
 
 // src/lib/components/Form/Form.tsx
+var import_react69 = require("react");
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var Form = (_a) => {
   var _b = _a, {
@@ -8210,11 +8262,11 @@ var Form = (_a) => {
 };
 
 // src/lib/components/ListGroup/ListGroup.tsx
-var import_react35 = require("react");
+var import_react72 = require("react");
 var import_utils91 = require("@julseb-lib/utils");
 
 // src/lib/components/ListGroup/ListGroupTitle.tsx
-var import_react34 = require("react");
+var import_react70 = require("react");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var ListGroupTitle = (_a) => {
   var _b = _a, {
@@ -8237,8 +8289,8 @@ var ListGroupTitle = (_a) => {
     "noSeparator"
   ]);
   const Element = element;
-  const [isScrolled, setIsScrolled] = (0, import_react34.useState)(false);
-  (0, import_react34.useEffect)(() => {
+  const [isScrolled, setIsScrolled] = (0, import_react70.useState)(false);
+  (0, import_react70.useEffect)(() => {
     if (listRef && typeof listRef !== "function" && listRef.current) {
       const handleScroll = () => {
         var _a2;
@@ -8276,6 +8328,7 @@ var ListGroupTitle = (_a) => {
 };
 
 // src/lib/components/ListGroup/ListGroupItem.tsx
+var import_react71 = require("react");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var ListGroupItem = (_a) => {
   var _b = _a, {
@@ -8328,7 +8381,7 @@ var ListGroupItem = (_a) => {
 
 // src/lib/components/ListGroup/ListGroup.tsx
 var import_jsx_runtime83 = require("react/jsx-runtime");
-var import_react36 = require("react");
+var import_react73 = require("react");
 var ListGroup = (_a) => {
   var _b = _a, {
     className,
@@ -8350,7 +8403,7 @@ var ListGroup = (_a) => {
     "items"
   ]);
   const Element = element;
-  const listRef = (0, import_react35.useRef)(null);
+  const listRef = (0, import_react72.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
     Element,
     __spreadProps(__spreadValues({
@@ -8374,7 +8427,7 @@ var ListGroup = (_a) => {
             children: typeof title === "object" ? title.text : title
           })
         ),
-        items ? items.map((item, i) => /* @__PURE__ */ (0, import_react36.createElement)(
+        items ? items.map((item, i) => /* @__PURE__ */ (0, import_react73.createElement)(
           ListGroupItem,
           __spreadProps(__spreadValues({}, item), {
             key: (0, import_utils91.uuid)(),
@@ -8391,7 +8444,7 @@ var ListGroup = (_a) => {
 };
 
 // src/lib/components/Breadcrumbs/Breadcrumbs.tsx
-var import_react37 = require("react");
+var import_react74 = require("react");
 var import_utils93 = require("@julseb-lib/utils");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var Breadcrumbs = (_a) => {
@@ -8409,7 +8462,7 @@ var Breadcrumbs = (_a) => {
     "separator"
   ]);
   const Element = element;
-  const childrenArray = import_react37.Children.toArray(children);
+  const childrenArray = import_react74.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     Element,
     __spreadProps(__spreadValues({
@@ -8420,7 +8473,7 @@ var Breadcrumbs = (_a) => {
         className
       )
     }, rest), {
-      children: childrenArray.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_react37.Fragment, { children: [
+      children: childrenArray.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_react74.Fragment, { children: [
         child,
         i !== childrenArray.length - 1 && (typeof separator === "string" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
           Text,
@@ -8436,12 +8489,14 @@ var Breadcrumbs = (_a) => {
 };
 
 // src/lib/components/Accordion/Accordion.tsx
+var import_react78 = require("react");
 var import_utils98 = require("@julseb-lib/utils");
 
 // src/lib/components/Accordion/AccordionItem.tsx
-var import_react38 = require("react");
+var import_react77 = require("react");
 
 // src/lib/components/Accordion/AccordionTitle.tsx
+var import_react75 = require("react");
 var import_bi17 = require("react-icons/bi");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var AccordionTitle = (_a) => {
@@ -8504,6 +8559,7 @@ var AccordionTitle = (_a) => {
 };
 
 // src/lib/components/Accordion/AccordionContent.tsx
+var import_react76 = require("react");
 var import_jsx_runtime86 = require("react/jsx-runtime");
 var AccordionContent = (_a) => {
   var _b = _a, {
@@ -8561,7 +8617,7 @@ var AccordionItem = (_a) => {
     "className"
   ]);
   const Element = element;
-  const [isOpen, setIsOpen] = (0, import_react38.useState)(defaultOpen);
+  const [isOpen, setIsOpen] = (0, import_react77.useState)(defaultOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
     Element,
     __spreadProps(__spreadValues({
@@ -8633,10 +8689,11 @@ var Accordion = (_a) => {
 };
 
 // src/lib/components/Dropdown/Dropdown.tsx
-var import_react39 = require("react");
+var import_react80 = require("react");
 var import_utils101 = require("@julseb-lib/utils");
 
 // src/lib/components/Dropdown/DropdownItem.tsx
+var import_react79 = require("react");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var DropdownItem = (_a) => {
   var _b = _a, {
@@ -8666,7 +8723,7 @@ var DropdownItem = (_a) => {
 
 // src/lib/components/Dropdown/Dropdown.tsx
 var import_jsx_runtime90 = require("react/jsx-runtime");
-var import_react40 = require("react");
+var import_react81 = require("react");
 var Dropdown = (_a) => {
   var _b = _a, {
     className,
@@ -8693,7 +8750,7 @@ var Dropdown = (_a) => {
   ]);
   var _a2;
   const Element = element;
-  const el = (0, import_react39.useRef)(null);
+  const el = (0, import_react80.useRef)(null);
   useClickOutside(el, () => {
     if (isOpen) setIsOpen(false);
   });
@@ -8714,7 +8771,7 @@ var Dropdown = (_a) => {
     }, rest), {
       children: (_a2 = items == null ? void 0 : items.map((item) => {
         var _a3;
-        return /* @__PURE__ */ (0, import_react40.createElement)(
+        return /* @__PURE__ */ (0, import_react81.createElement)(
           DropdownItem,
           __spreadProps(__spreadValues({}, item), {
             key: (0, import_utils101.uuid)(),
@@ -8729,6 +8786,7 @@ var Dropdown = (_a) => {
 };
 
 // src/lib/components/Toast/Toast.tsx
+var import_react82 = require("react");
 var import_bi18 = require("react-icons/bi");
 
 // src/lib/components/Toast/utils.ts
@@ -8956,6 +9014,7 @@ var toast = {
 };
 
 // src/lib/components/Alert/Alert.tsx
+var import_react83 = require("react");
 var import_jsx_runtime94 = require("react/jsx-runtime");
 var Alert = (_a) => {
   var _b = _a, {
@@ -8990,7 +9049,7 @@ var Alert = (_a) => {
 };
 
 // src/lib/components/Modal/Modal.tsx
-var import_react41 = require("react");
+var import_react84 = require("react");
 var import_bi19 = require("react-icons/bi");
 var import_utils106 = require("@julseb-lib/utils");
 var import_jsx_runtime95 = require("react/jsx-runtime");
@@ -9019,7 +9078,7 @@ var Modal = (_a) => {
     "labelClose"
   ]);
   const Element = element;
-  const el = (0, import_react41.useRef)(null);
+  const el = (0, import_react84.useRef)(null);
   const handleClose = () => {
     if (isOpen) {
       setIsOpen(false);
@@ -9074,9 +9133,10 @@ var Modal = (_a) => {
 };
 
 // src/lib/components/DragList/DragList.tsx
-var import_react42 = require("react");
+var import_react86 = require("react");
 
 // src/lib/components/DragList/DragListItem.tsx
+var import_react85 = require("react");
 var import_bi20 = require("react-icons/bi");
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var DragListItem = ({
@@ -9141,7 +9201,7 @@ var DragListItem = ({
 
 // src/lib/components/DragList/DragList.tsx
 var import_jsx_runtime97 = require("react/jsx-runtime");
-var import_react43 = require("react");
+var import_react87 = require("react");
 var DragList = (_a) => {
   var _b = _a, {
     className,
@@ -9165,8 +9225,8 @@ var DragList = (_a) => {
     "hideSeparator"
   ]);
   const Element = element;
-  const [dragIndex, setDragIndex] = (0, import_react42.useState)(-1);
-  const dragNode = (0, import_react42.useRef)(null);
+  const [dragIndex, setDragIndex] = (0, import_react86.useState)(-1);
+  const dragNode = (0, import_react86.useRef)(null);
   const handleDragStart = (e, i) => {
     const { target } = e;
     setDragIndex(i);
@@ -9197,8 +9257,8 @@ var DragList = (_a) => {
         className
       )
     }, rest), {
-      children: items ? items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(import_react42.Fragment, { children: [
-        /* @__PURE__ */ (0, import_react43.createElement)(
+      children: items ? items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(import_react86.Fragment, { children: [
+        /* @__PURE__ */ (0, import_react87.createElement)(
           DragListItem,
           __spreadProps(__spreadValues({}, item), {
             key: item.id,
@@ -9218,9 +9278,11 @@ var DragList = (_a) => {
 };
 
 // src/lib/components/Pagination/Pagination.tsx
+var import_react89 = require("react");
 var import_bi21 = require("react-icons/bi");
 
 // src/lib/components/Pagination/PaginationButton.tsx
+var import_react88 = require("react");
 var import_jsx_runtime98 = require("react/jsx-runtime");
 var PaginationButton = (_a) => {
   var _b = _a, {
@@ -9388,6 +9450,7 @@ var Pagination = (_a) => {
 };
 
 // src/lib/components/Paginator/Paginator.tsx
+var import_react90 = require("react");
 var import_bi22 = require("react-icons/bi");
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var Paginator = (_a) => {
@@ -9502,6 +9565,7 @@ var Paginator = (_a) => {
 };
 
 // src/lib/components/ProgressBar/ProgressBar.tsx
+var import_react91 = require("react");
 var import_utils113 = require("@julseb-lib/utils");
 var import_jsx_runtime101 = require("react/jsx-runtime");
 var ProgressBar = (_a) => {
@@ -9563,7 +9627,7 @@ var genProgressColor = {
 };
 
 // src/lib/components/ProgressCircle/ProgressCircle.tsx
-var import_react44 = require("react");
+var import_react92 = require("react");
 var import_jsx_runtime102 = require("react/jsx-runtime");
 var ProgressCircle = (_a) => {
   var _b = _a, {
@@ -9590,13 +9654,13 @@ var ProgressCircle = (_a) => {
     "icon"
   ]);
   const Element = element;
-  const [animatedValue, setAnimatedValue] = (0, import_react44.useState)(noAnimation ? value : 0);
+  const [animatedValue, setAnimatedValue] = (0, import_react92.useState)(noAnimation ? value : 0);
   const radius = (size - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const strokeDashoffset = circumference - animatedValue / 100 * circumference;
   const backgroundColor = designTokens.libColors["gray-200"];
   const strokeColor = genStrokeColor[color];
-  (0, import_react44.useEffect)(() => {
+  (0, import_react92.useEffect)(() => {
     if (!noAnimation) {
       const timer = setTimeout(() => {
         setAnimatedValue(value);
@@ -9687,10 +9751,11 @@ var genStrokeColor = {
 };
 
 // src/lib/components/Tabs/Tabs.tsx
-var import_react45 = require("react");
+var import_react97 = require("react");
 var import_utils120 = require("@julseb-lib/utils");
 
 // src/lib/components/Tabs/TabsContainer.tsx
+var import_react93 = require("react");
 var import_jsx_runtime103 = require("react/jsx-runtime");
 var TabsContainer = (_a) => {
   var _b = _a, {
@@ -9717,6 +9782,7 @@ var TabsContainer = (_a) => {
 };
 
 // src/lib/components/Tabs/TabsButtonsContainer.tsx
+var import_react94 = require("react");
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var TabsButtonsContainer = (_a) => {
   var _b = _a, {
@@ -9755,6 +9821,7 @@ var TabsButtonsContainer = (_a) => {
 };
 
 // src/lib/components/Tabs/TabsButton.tsx
+var import_react95 = require("react");
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var TabsButton = (_a) => {
   var _b = _a, {
@@ -9806,6 +9873,7 @@ var TabsButton = (_a) => {
 };
 
 // src/lib/components/Tabs/TabsContent.tsx
+var import_react96 = require("react");
 var import_jsx_runtime106 = require("react/jsx-runtime");
 var TabsContent = (_a) => {
   var _b = _a, {
@@ -9839,7 +9907,7 @@ var TabsContent = (_a) => {
 
 // src/lib/components/Tabs/Tabs.tsx
 var import_jsx_runtime107 = require("react/jsx-runtime");
-var import_react46 = require("react");
+var import_react98 = require("react");
 var Tabs = (_a) => {
   var _b = _a, {
     className,
@@ -9858,7 +9926,7 @@ var Tabs = (_a) => {
     "variant",
     "activeTab"
   ]);
-  const [tab, setTab] = (0, import_react45.useState)(activeTab);
+  const [tab, setTab] = (0, import_react97.useState)(activeTab);
   return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
     TabsContainer,
     __spreadProps(__spreadValues({
@@ -9869,7 +9937,7 @@ var Tabs = (_a) => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(TabsButtonsContainer, { justify, variant, children: items == null ? void 0 : items.map((item, i) => {
           var _a2;
-          return /* @__PURE__ */ (0, import_react46.createElement)(
+          return /* @__PURE__ */ (0, import_react98.createElement)(
             TabsButton,
             __spreadProps(__spreadValues({}, item), {
               key: (_a2 = item.id) != null ? _a2 : (0, import_utils120.uuid)(),
@@ -9881,7 +9949,7 @@ var Tabs = (_a) => {
             item.title
           );
         }) }),
-        items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ (0, import_react46.createElement)(
+        items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ (0, import_react98.createElement)(
           TabsContent,
           __spreadProps(__spreadValues({}, item), {
             key: (0, import_utils120.uuid)(),
@@ -9895,10 +9963,11 @@ var Tabs = (_a) => {
 };
 
 // src/lib/components/Slideshow/Slideshow.tsx
-var import_react47 = require("react");
+var import_react101 = require("react");
 var import_utils125 = require("@julseb-lib/utils");
 
 // src/lib/components/Slideshow/SlideshowButton.tsx
+var import_react99 = require("react");
 var import_bi23 = require("react-icons/bi");
 var import_jsx_runtime108 = require("react/jsx-runtime");
 var SlideshowButton = ({
@@ -9945,6 +10014,7 @@ var SlideshowButton = ({
 };
 
 // src/lib/components/Slideshow/SlideshowPagination.tsx
+var import_react100 = require("react");
 var import_utils123 = require("@julseb-lib/utils");
 var import_jsx_runtime109 = require("react/jsx-runtime");
 var SlideshowPagination = ({
@@ -10069,18 +10139,18 @@ var Slideshow = (_a) => {
   ]);
   var _a2, _b2, _c, _d, _e;
   const Element = element;
-  const childrenArray = import_react47.Children.toArray(children);
+  const childrenArray = import_react101.Children.toArray(children);
   const slides = images != null ? images : childrenArray;
   const totalSlides = slides.length;
-  const [currentSlide, setCurrentSlide] = (0, import_react47.useState)(0);
-  const [isTransitioning, setIsTransitioning] = (0, import_react47.useState)(false);
-  const touchStartX = (0, import_react47.useRef)(0);
-  const touchEndX = (0, import_react47.useRef)(0);
-  const touchStartY = (0, import_react47.useRef)(0);
-  const touchEndY = (0, import_react47.useRef)(0);
-  const [isDragging, setIsDragging] = (0, import_react47.useState)(false);
-  const slidesRef = (0, import_react47.useRef)(null);
-  (0, import_react47.useEffect)(() => {
+  const [currentSlide, setCurrentSlide] = (0, import_react101.useState)(0);
+  const [isTransitioning, setIsTransitioning] = (0, import_react101.useState)(false);
+  const touchStartX = (0, import_react101.useRef)(0);
+  const touchEndX = (0, import_react101.useRef)(0);
+  const touchStartY = (0, import_react101.useRef)(0);
+  const touchEndY = (0, import_react101.useRef)(0);
+  const [isDragging, setIsDragging] = (0, import_react101.useState)(false);
+  const slidesRef = (0, import_react101.useRef)(null);
+  (0, import_react101.useEffect)(() => {
     if (totalSlides > 1) {
       let intervalId = null;
       if (hideControls && hidePagination && !(options == null ? void 0 : options.autoPlay)) {
@@ -10305,6 +10375,7 @@ var Slideshow = (_a) => {
 };
 
 // src/lib/components/Cover/Cover.tsx
+var import_react102 = require("react");
 var import_jsx_runtime111 = require("react/jsx-runtime");
 var Cover = (_a) => {
   var _b = _a, {
@@ -10374,7 +10445,7 @@ var Cover = (_a) => {
 };
 
 // src/lib/components/PageLoading/PageLoading.tsx
-var import_react48 = require("react");
+var import_react103 = require("react");
 var import_utils128 = require("@julseb-lib/utils");
 var import_jsx_runtime112 = require("react/jsx-runtime");
 var PageLoading = (_a) => {
@@ -10396,7 +10467,7 @@ var PageLoading = (_a) => {
     "stopScrolling"
   ]);
   const Element = element;
-  (0, import_react48.useEffect)(() => {
+  (0, import_react103.useEffect)(() => {
     if (stopScrolling) (0, import_utils128.disableScroll)();
   }, [stopScrolling]);
   return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
@@ -10416,6 +10487,7 @@ var PageLoading = (_a) => {
 };
 
 // src/lib/components/Sticky/Sticky.tsx
+var import_react104 = require("react");
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var Sticky = (_a) => {
   var _b = _a, {
@@ -10454,16 +10526,17 @@ var genTop = {
 };
 
 // src/lib/components/MarkdownEditor/MarkdownEditor.tsx
-var import_react50 = require("react");
+var import_react109 = require("react");
 var import_markdown_to_jsx = __toESM(require("markdown-to-jsx"), 1);
 
 // src/lib/components/MarkdownEditor/MarkdownEditorTitles.tsx
-var import_react49 = require("react");
+var import_react106 = require("react");
 
 // src/lib/components/MarkdownEditor/buttons/markdown-buttons.tsx
 var import_bi24 = require("react-icons/bi");
 
 // src/lib/components/MarkdownEditor/buttons/icons.tsx
+var import_react105 = require("react");
 var import_jsx_runtime114 = require("react/jsx-runtime");
 var IconCode = ({ size }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
@@ -10720,7 +10793,7 @@ var MarkdownEditorTitles = ({
   setIsOpen
 }) => {
   if ((options == null ? void 0 : options.titles) === false) return null;
-  const el = (0, import_react49.useRef)(null);
+  const el = (0, import_react106.useRef)(null);
   useClickOutside(el, () => setIsOpen(false));
   return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: clsx("relative", "dropdown-container"), ref: el, children: [
     /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
@@ -10776,6 +10849,7 @@ var MarkdownEditorTitles = ({
 };
 
 // src/lib/components/MarkdownEditor/MarkdownButtons.tsx
+var import_react107 = require("react");
 var import_utils132 = require("@julseb-lib/utils");
 var import_jsx_runtime117 = require("react/jsx-runtime");
 var MarkdownButtons = ({
@@ -10806,6 +10880,7 @@ var MarkdownButtons = ({
 };
 
 // src/lib/components/MarkdownEditor/MarkdownViewButtons.tsx
+var import_react108 = require("react");
 var import_utils134 = require("@julseb-lib/utils");
 var import_jsx_runtime118 = require("react/jsx-runtime");
 var MarkdownViewButtons = ({
@@ -10878,9 +10953,9 @@ var MarkdownEditor = (_a) => {
     "icons",
     "containerClassName"
   ]);
-  const [view, setView] = (0, import_react50.useState)(defaultView);
-  const [isTitlesOpen, setIsTitlesOpen] = (0, import_react50.useState)(false);
-  const el = (0, import_react50.useRef)(null);
+  const [view, setView] = (0, import_react109.useState)(defaultView);
+  const [isTitlesOpen, setIsTitlesOpen] = (0, import_react109.useState)(false);
+  const el = (0, import_react109.useRef)(null);
   const addCode = (code) => {
     var _a2;
     setValue(`${value}${code}`);
@@ -11010,6 +11085,7 @@ var MarkdownEditor = (_a) => {
 };
 
 // src/lib/components/MarkdownContainer/MarkdownContainer.tsx
+var import_react110 = require("react");
 var import_markdown_to_jsx2 = __toESM(require("markdown-to-jsx"), 1);
 var import_jsx_runtime120 = require("react/jsx-runtime");
 var MarkdownContainer = (_a) => {
@@ -11041,7 +11117,7 @@ var MarkdownContainer = (_a) => {
 };
 
 // src/lib/components/Fade/Fade.tsx
-var import_react51 = require("react");
+var import_react111 = require("react");
 var import_jsx_runtime121 = require("react/jsx-runtime");
 var Fade = (_a) => {
   var _b = _a, {
@@ -11056,9 +11132,9 @@ var Fade = (_a) => {
     "children"
   ]);
   const Element = element;
-  const [isVisible, setIsVisible] = (0, import_react51.useState)(true);
-  const fadeRef = (0, import_react51.useRef)(null);
-  (0, import_react51.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react111.useState)(true);
+  const fadeRef = (0, import_react111.useRef)(null);
+  (0, import_react111.useEffect)(() => {
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => setIsVisible(entry.isIntersecting));
     });
@@ -11082,7 +11158,7 @@ var Fade = (_a) => {
 };
 
 // src/lib/components/BackToTop/BackToTop.tsx
-var import_react52 = require("react");
+var import_react112 = require("react");
 var import_bi25 = require("react-icons/bi");
 var import_utils139 = require("@julseb-lib/utils");
 var import_jsx_runtime122 = require("react/jsx-runtime");
@@ -11102,8 +11178,8 @@ var BackToTop = (_a) => {
     "tooltip",
     "showTooltip"
   ]);
-  const [isVisible, setIsVisible] = (0, import_react52.useState)(false);
-  (0, import_react52.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react112.useState)(false);
+  (0, import_react112.useEffect)(() => {
     const scrollFn = () => {
       if (window.scrollY >= 200) {
         setIsVisible(true);
@@ -11149,7 +11225,7 @@ var BackToTop = (_a) => {
 };
 
 // src/lib/components/Drawer/Drawer.tsx
-var import_react53 = require("react");
+var import_react113 = require("react");
 var import_bi26 = require("react-icons/bi");
 var import_utils141 = require("@julseb-lib/utils");
 var import_jsx_runtime123 = require("react/jsx-runtime");
@@ -11190,12 +11266,12 @@ var Drawer = (_a) => {
     "hideCloseButton"
   ]);
   const Element = element;
-  const el = (0, import_react53.useRef)(null);
+  const el = (0, import_react113.useRef)(null);
   useClickOutside(el, () => isOpen && setIsOpen(false));
   useKeyPress("Escape", () => {
     if (!disableEsc && isOpen) setIsOpen(false);
   });
-  (0, import_react53.useEffect)(() => {
+  (0, import_react113.useEffect)(() => {
     if (!enableScrollingOpen && isOpen) (0, import_utils141.disableScroll)();
     else (0, import_utils141.enableScroll)();
   }, [enableScrollingOpen, isOpen]);
@@ -11262,10 +11338,11 @@ var Drawer = (_a) => {
 };
 
 // src/lib/components/Header/Header.tsx
-var import_react54 = require("react");
+var import_react115 = require("react");
 var import_utils145 = require("@julseb-lib/utils");
 
 // src/lib/components/Header/HeaderSearch.tsx
+var import_react114 = require("react");
 var import_utils143 = require("@julseb-lib/utils");
 var import_jsx_runtime124 = require("react/jsx-runtime");
 var HeaderSearch = ({ search, handleClose }) => {
@@ -11358,9 +11435,9 @@ var Header = (_a) => {
   ]);
   const Element = element;
   const isMobile = useMaxWidth(16 * 48);
-  const el = (0, import_react54.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react54.useState)(false);
-  const [isHidden, setIsHidden] = (0, import_react54.useState)(false);
+  const el = (0, import_react115.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react115.useState)(false);
+  const [isHidden, setIsHidden] = (0, import_react115.useState)(false);
   const handleOpen = () => {
     if (!enableScrollingOpen) (0, import_utils145.disableScroll)();
     setIsOpen(true);
@@ -11369,7 +11446,7 @@ var Header = (_a) => {
     if (!enableScrollingOpen) (0, import_utils145.enableScroll)();
     setTimeout(() => setIsOpen(false), 10);
   };
-  (0, import_react54.useEffect)(() => {
+  (0, import_react115.useEffect)(() => {
     const handleHideScroll = () => {
       const hidePosition = typeof hideOnScroll === "number" ? hideOnScroll : 400;
       if (window.pageYOffset >= hidePosition) {
@@ -11477,7 +11554,7 @@ var Header = (_a) => {
 };
 
 // src/lib/components/Footer/Footer.tsx
-var import_react55 = require("react");
+var import_react116 = require("react");
 var import_utils147 = require("@julseb-lib/utils");
 var import_jsx_runtime126 = require("react/jsx-runtime");
 var Footer = (_a) => {
@@ -11508,7 +11585,7 @@ var Footer = (_a) => {
   ]);
   var _a2;
   const Element = element;
-  const childrenArray = import_react55.Children.toArray(children);
+  const childrenArray = import_react116.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
     Element,
     __spreadProps(__spreadValues({
@@ -11523,7 +11600,7 @@ var Footer = (_a) => {
     }, rest), {
       children: [
         logo,
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex items-container gap-2", children: (_a2 = items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_react55.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex items-container gap-2", children: (_a2 = items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_react116.Fragment, { children: [
           item,
           i !== items.length - 1 && !hideLinksSeparator && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
             "span",
@@ -11534,7 +11611,7 @@ var Footer = (_a) => {
               children: linksSeparator === "dot" ? "\u2022" : "-"
             }
           )
-        ] }, (0, import_utils147.uuid)()))) != null ? _a2 : childrenArray.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_react55.Fragment, { children: [
+        ] }, (0, import_utils147.uuid)()))) != null ? _a2 : childrenArray.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_react116.Fragment, { children: [
           child,
           i !== childrenArray.length - 1 && !hideLinksSeparator && (linksSeparator === "dot" ? "\u2022" : "-")
         ] }, (0, import_utils147.uuid)())) })
@@ -11544,6 +11621,7 @@ var Footer = (_a) => {
 };
 
 // src/lib/components/Meta/Meta.tsx
+var import_react117 = require("react");
 var import_jsx_runtime127 = require("react/jsx-runtime");
 var Meta = ({
   children,
@@ -11618,6 +11696,7 @@ var Meta = ({
 };
 
 // src/lib/components/PageLayout/PageLayout.tsx
+var import_react118 = require("react");
 var import_jsx_runtime128 = require("react/jsx-runtime");
 var PageLayout = ({
   children,
@@ -11638,6 +11717,7 @@ var PageLayout = ({
 };
 
 // src/lib/components/SrOnly/SrOnly.tsx
+var import_react119 = require("react");
 var import_jsx_runtime129 = require("react/jsx-runtime");
 var SrOnly = ({ element = "div", ref, children }) => {
   const Element = element;
@@ -11645,7 +11725,7 @@ var SrOnly = ({ element = "div", ref, children }) => {
 };
 
 // src/lib/components/CodeContainer/CodeContainer.tsx
-var import_react56 = require("react");
+var import_react120 = require("react");
 var import_prism_react_renderer = require("prism-react-renderer");
 var import_bi27 = require("react-icons/bi");
 var import_jsx_runtime130 = require("react/jsx-runtime");
@@ -11654,14 +11734,16 @@ var CodeContainer = (_a) => {
     children,
     code,
     showNumbers,
-    language = "tsx"
+    language = "tsx",
+    className
   } = _b, rest = __objRest(_b, [
     "children",
     "code",
     "showNumbers",
-    "language"
+    "language",
+    "className"
   ]);
-  const [hasCopied, setHasCopied] = (0, import_react56.useState)(false);
+  const [hasCopied, setHasCopied] = (0, import_react120.useState)(false);
   const copyToClipboard = () => {
     if (children) {
       let copyString = children.toString();
@@ -11673,7 +11755,7 @@ var CodeContainer = (_a) => {
     }
     setTimeout(() => setHasCopied(false), 1e3);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "relative bg-[#282c34] p-6", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: clsx("relative bg-[#282c34] p-6", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       import_prism_react_renderer.Highlight,
       __spreadProps(__spreadValues({
@@ -11685,7 +11767,7 @@ var CodeContainer = (_a) => {
           "pre",
           {
             style,
-            className: "relative max-w-full overflow-x-scroll",
+            className: "relative max-w-full overflow-x-scroll hide-scrollbar",
             children: tokens.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", __spreadProps(__spreadValues({}, getLineProps({ line })), { children: [
               showNumbers && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "mr-6", children: i + 1 }),
               line.map((token, key) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(