@julseb-lib/react 0.0.36 → 0.0.38

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import k, { StyleSheetManager as C8, css as y, keyframes as P2 } from "styled-components";
 import { ThemeProvider as Zi } from "styled-components";
-import I1, { Fragment as J2, useState as P, useRef as o2, useCallback as c2, useEffect as z2, forwardRef as C, useLayoutEffect as n3, useMemo as G0, createContext as S1, useContext as N1, useReducer as $8, lazy as V1, Suspense as E1, memo as A8, createRef as L8, createElement as D1, isValidElement as R8 } from "react";
+import I1, { Fragment as l0, useState as P, useRef as o2, useCallback as c2, useEffect as z2, forwardRef as C, useLayoutEffect as n3, useMemo as G0, createContext as S1, useContext as N1, useReducer as $8, lazy as V1, Suspense as E1, memo as A8, createRef as L8, createElement as D1, isValidElement as R8 } from "react";
 import { uuid as J, slugify as l1, stringifyPx as O, scrollToTop as D0, detectLanguage as _8, convertYoutube as j8, getRandomString as R0, capitalize as O2, filterObject as I8, getPercentage as M3, generateNumbers as G1, enableScroll as T0, disableScroll as g3, convertDateShort as M0, getYesterday as S8, convertDate as N8, getToday as c1, toSentenceCase as T1, formatDate as V8 } from "@julseb-lib/utils";
 import { addDay as Ki, addMonth as Xi, addYear as qi, calculateAverage as Qi, calculateTotalSum as Ji, capitalize as lf, convertDate as cf, convertDateShort as ef, convertPrice as af, convertToEmail as tf, convertYoutube as hf, deleteDuplicates as df, detectLanguage as ff, disableScroll as rf, emailRegex as mf, enableScroll as sf, filterObject as of, formatDate as pf, formatHour as zf, generateNumbers as vf, getFirstName as nf, getInitials as Mf, getLastName as gf, getPercentage as kf, getRandom as bf, getRandomAvatar as wf, getRandomDate as uf, getRandomNumber as xf, getRandomString as Hf, getRandomTime as yf, getTimeNow as Cf, getToday as $f, getTomorrow as Af, getYesterday as Lf, hexToRgb as Rf, passwordRegex as _f, rgbToHex as jf, scrollToTop as If, slugify as Sf, sortByFrequency as Nf, stringifyPx as Vf, toCamelCase as Ef, toConstantCase as Df, toDotCase as Gf, toKebabCase as Tf, toPascalCase as Of, toPathCase as Bf, toSentenceCase as Yf, toSnakeCase as Pf, toTitleCase as Ff, unslugify as Uf, uuid as Zf } from "@julseb-lib/utils";
 import { useSearchParams as _0, Link as N2, useNavigate as E8, createSearchParams as D8, NavLink as G8, useLocation as T8 } from "react-router-dom";
@@ -9,9 +9,9 @@ import B8 from "fuse.js";
 import { HelmetData as Y8, Helmet as P8 } from "react-helmet-async";
 import F8 from "react-syntax-highlighter";
 import O1 from "markdown-to-jsx";
-var v = /* @__PURE__ */ ((l) => (l.BLACK = "var(--color-black)", l.WHITE = "var(--color-white)", l.GRAY_50 = "var(--color-light-gray-50)", l.GRAY_100 = "var(--color-light-gray-100)", l.GRAY_200 = "var(--color-light-gray-200)", l.GRAY_300 = "var(--color-light-gray-300)", l.GRAY_400 = "var(--color-light-gray-400)", l.GRAY_500 = "var(--color-light-gray-500)", l.GRAY_600 = "var(--color-light-gray-600)", l.GRAY_700 = "var(--color-light-gray-700)", l.GRAY_800 = "var(--color-light-gray-800)", l.GRAY_900 = "var(--color-light-gray-900)", l.PRIMARY_50 = "var(--color-light-primary-50)", l.PRIMARY_100 = "var(--color-light-primary-100)", l.PRIMARY_200 = "var(--color-light-primary-200)", l.PRIMARY_300 = "var(--color-light-primary-300)", l.PRIMARY_400 = "var(--color-light-primary-400)", l.PRIMARY_500 = "var(--color-light-primary-500)", l.PRIMARY_600 = "var(--color-light-primary-600)", l.PRIMARY_700 = "var(--color-light-primary-700)", l.PRIMARY_800 = "var(--color-light-primary-800)", l.PRIMARY_900 = "var(--color-light-primary-900)", l.SECONDARY_50 = "var(--color-light-secondary-50)", l.SECONDARY_100 = "var(--color-light-secondary-100)", l.SECONDARY_200 = "var(--color-light-secondary-200)", l.SECONDARY_300 = "var(--color-light-secondary-300)", l.SECONDARY_400 = "var(--color-light-secondary-400)", l.SECONDARY_500 = "var(--color-light-secondary-500)", l.SECONDARY_600 = "var(--color-light-secondary-600)", l.SECONDARY_700 = "var(--color-light-secondary-700)", l.SECONDARY_800 = "var(--color-light-secondary-800)", l.SECONDARY_900 = "var(--color-light-secondary-900)", l.SUCCESS_50 = "var(--color-light-success-50)", l.SUCCESS_100 = "var(--color-light-success-100)", l.SUCCESS_200 = "var(--color-light-success-200)", l.SUCCESS_300 = "var(--color-light-success-300)", l.SUCCESS_400 = "var(--color-light-success-400)", l.SUCCESS_500 = "var(--color-light-success-500)", l.SUCCESS_600 = "var(--color-light-success-600)", l.SUCCESS_700 = "var(--color-light-success-700)", l.SUCCESS_800 = "var(--color-light-success-800)", l.SUCCESS_900 = "var(--color-light-success-900)", l.DANGER_50 = "var(--color-light-danger-50)", l.DANGER_100 = "var(--color-light-danger-100)", l.DANGER_200 = "var(--color-light-danger-200)", l.DANGER_300 = "var(--color-light-danger-300)", l.DANGER_400 = "var(--color-light-danger-400)", l.DANGER_500 = "var(--color-light-danger-500)", l.DANGER_600 = "var(--color-light-danger-600)", l.DANGER_700 = "var(--color-light-danger-700)", l.DANGER_800 = "var(--color-light-danger-800)", l.DANGER_900 = "var(--color-light-danger-900)", l.WARNING_50 = "var(--color-light-warning-50)", l.WARNING_100 = "var(--color-light-warning-100)", l.WARNING_200 = "var(--color-light-warning-200)", l.WARNING_300 = "var(--color-light-warning-300)", l.WARNING_400 = "var(--color-light-warning-400)", l.WARNING_500 = "var(--color-light-warning-500)", l.WARNING_600 = "var(--color-light-warning-600)", l.WARNING_700 = "var(--color-light-warning-700)", l.WARNING_800 = "var(--color-light-warning-800)", l.WARNING_900 = "var(--color-light-warning-900)", l.BACKGROUND = "var(--color-light-background)", l.FONT = "var(--color-light-font)", l.LINK_FONT_DEFAULT = "var(--color-light-link-font-default)", l.LINK_FONT_HOVER = "var(--color-light-link-font-hover)", l.LINK_FONT_ACTIVE = "var(--color-light-link-font-active)", l.LINK_BACKGROUND_DEFAULT = "var(--color-light-link-background-default)", l.LINK_BACKGROUND_HOVER = "var(--color-light-link-background-hover)", l.LINK_BACKGROUND_ACTIVE = "var(--color-light-link-background-active)", l.FONT_GHOST_DEFAULT = "var(--color-light-font-ghost-default)", l.FONT_GHOST_HOVER = "var(--color-light-font-ghost-hover)", l.FONT_GHOST_ACTIVE = "var(--color-light-font-ghost-active)", l.BACKGROUND_GHOST_DEFAULT = "var(--color-light-background-ghost-default)", l.BACKGROUND_GHOST_HOVER = "var(--color-light-background-ghost-hover)", l.BACKGROUND_GHOST_ACTIVE = "var(--color-light-background-ghost-active)", l.TRANSPARENT = "transparent", l.CURRENT_COLOR = "currentColor", l))(v || {}), b = /* @__PURE__ */ ((l) => (l.BLACK = "var(--color-black)", l.WHITE = "var(--color-white)", l.GRAY_50 = "var(--color-dark-gray-50)", l.GRAY_100 = "var(--color-dark-gray-100)", l.GRAY_200 = "var(--color-dark-gray-200)", l.GRAY_300 = "var(--color-dark-gray-300)", l.GRAY_400 = "var(--color-dark-gray-400)", l.GRAY_500 = "var(--color-dark-gray-500)", l.GRAY_600 = "var(--color-dark-gray-600)", l.GRAY_700 = "var(--color-dark-gray-700)", l.GRAY_800 = "var(--color-dark-gray-800)", l.GRAY_900 = "var(--color-dark-gray-900)", l.PRIMARY_50 = "var(--color-dark-primary-50)", l.PRIMARY_100 = "var(--color-dark-primary-100)", l.PRIMARY_200 = "var(--color-dark-primary-200)", l.PRIMARY_300 = "var(--color-dark-primary-300)", l.PRIMARY_400 = "var(--color-dark-primary-400)", l.PRIMARY_500 = "var(--color-dark-primary-500)", l.PRIMARY_600 = "var(--color-dark-primary-600)", l.PRIMARY_700 = "var(--color-dark-primary-700)", l.PRIMARY_800 = "var(--color-dark-primary-800)", l.PRIMARY_900 = "var(--color-dark-primary-900)", l.SECONDARY_50 = "var(--color-dark-secondary-50)", l.SECONDARY_100 = "var(--color-dark-secondary-100)", l.SECONDARY_200 = "var(--color-dark-secondary-200)", l.SECONDARY_300 = "var(--color-dark-secondary-300)", l.SECONDARY_400 = "var(--color-dark-secondary-400)", l.SECONDARY_500 = "var(--color-dark-secondary-500)", l.SECONDARY_600 = "var(--color-dark-secondary-600)", l.SECONDARY_700 = "var(--color-dark-secondary-700)", l.SECONDARY_800 = "var(--color-dark-secondary-800)", l.SECONDARY_900 = "var(--color-dark-secondary-900)", l.SUCCESS_50 = "var(--color-dark-success-50)", l.SUCCESS_100 = "var(--color-dark-success-100)", l.SUCCESS_200 = "var(--color-dark-success-200)", l.SUCCESS_300 = "var(--color-dark-success-300)", l.SUCCESS_400 = "var(--color-dark-success-400)", l.SUCCESS_500 = "var(--color-dark-success-500)", l.SUCCESS_600 = "var(--color-dark-success-600)", l.SUCCESS_700 = "var(--color-dark-success-700)", l.SUCCESS_800 = "var(--color-dark-success-800)", l.SUCCESS_900 = "var(--color-dark-success-900)", l.DANGER_50 = "var(--color-dark-danger-50)", l.DANGER_100 = "var(--color-dark-danger-100)", l.DANGER_200 = "var(--color-dark-danger-200)", l.DANGER_300 = "var(--color-dark-danger-300)", l.DANGER_400 = "var(--color-dark-danger-400)", l.DANGER_500 = "var(--color-dark-danger-500)", l.DANGER_600 = "var(--color-dark-danger-600)", l.DANGER_700 = "var(--color-dark-danger-700)", l.DANGER_800 = "var(--color-dark-danger-800)", l.DANGER_900 = "var(--color-dark-danger-900)", l.WARNING_50 = "var(--color-dark-warning-50)", l.WARNING_100 = "var(--color-dark-warning-100)", l.WARNING_200 = "var(--color-dark-warning-200)", l.WARNING_300 = "var(--color-dark-warning-300)", l.WARNING_400 = "var(--color-dark-warning-400)", l.WARNING_500 = "var(--color-dark-warning-500)", l.WARNING_600 = "var(--color-dark-warning-600)", l.WARNING_700 = "var(--color-dark-warning-700)", l.WARNING_800 = "var(--color-dark-warning-800)", l.WARNING_900 = "var(--color-dark-warning-900)", l.BACKGROUND = "var(--color-dark-background)", l.FONT = "var(--color-dark-font)", l.LINK_FONT_DEFAULT = "var(--color-dark-link-font-default)", l.LINK_FONT_HOVER = "var(--color-dark-link-font-hover)", l.LINK_FONT_ACTIVE = "var(--color-dark-link-font-active)", l.LINK_BACKGROUND_DEFAULT = "var(--color-dark-link-background-default)", l.LINK_BACKGROUND_HOVER = "var(--color-dark-link-background-hover)", l.LINK_BACKGROUND_ACTIVE = "var(--color-dark-link-background-active)", l.FONT_GHOST_DEFAULT = "var(--color-dark-font-ghost-default)", l.FONT_GHOST_HOVER = "var(--color-dark-font-ghost-hover)", l.FONT_GHOST_ACTIVE = "var(--color-dark-font-ghost-active)", l.BACKGROUND_GHOST_DEFAULT = "var(--color-dark-background-ghost-default)", l.BACKGROUND_GHOST_HOVER = "var(--color-dark-background-ghost-hover)", l.BACKGROUND_GHOST_ACTIVE = "var(--color-dark-background-ghost-active)", l.TRANSPARENT = "transparent", l.CURRENT_COLOR = "currentColor", l))(b || {}), I2 = /* @__PURE__ */ ((l) => (l.BLACK_50 = "var(--overlay-black-50)", l.BLACK_80 = "var(--overlay-black-80)", l.WHITE_50 = "var(--overlay-white-50)", l.WHITE_80 = "var(--overlay-white-80)", l.GRADIENT_BLACK = "var(--overlay-gradient-black)", l.GRADIENT_WHITE = "var(--overlay-gradient-white)", l))(I2 || {}), V2 = /* @__PURE__ */ ((l) => (l.BODY = "var(--font-family-body)", l.CODE = "var(--font-family-code)", l))(V2 || {}), K = /* @__PURE__ */ ((l) => (l.DISPLAY_H1 = "var(--font-size-display-h1)", l.DISPLAY_H2 = "var(--font-size-display-h2)", l.DISPLAY_H3 = "var(--font-size-display-h3)", l.DISPLAY_H4 = "var(--font-size-display-h4)", l.DISPLAY_H5 = "var(--font-size-display-h5)", l.H1 = "var(--font-size-h1)", l.H2 = "var(--font-size-h2)", l.H3 = "var(--font-size-h3)", l.H4 = "var(--font-size-h4)", l.H5 = "var(--font-size-h5)", l.H6 = "var(--font-size-h6)", l.BODY = "var(--font-size-body)", l.SMALL = "var(--font-size-small)", l))(K || {}), r2 = /* @__PURE__ */ ((l) => (l.REGULAR = "var(--font-weight-regular)", l.BOLD = "var(--font-weight-bold)", l.BLACK = "var(--font-weight-black)", l))(r2 || {}), n2 = /* @__PURE__ */ ((l) => (l.BODY = "var(--line-height-body)", l.CODE = "var(--line-height-code)", l))(n2 || {}), q2 = /* @__PURE__ */ ((l) => (l.XXL = "var(--shadow-xxl)", l.XL = "var(--shadow-xl)", l.L = "var(--shadow-l)", l.M = "var(--shadow-m)", l.S = "var(--shadow-s)", l.XS = "var(--shadow-xs)", l))(q2 || {}), R = /* @__PURE__ */ ((l) => (l.XXL = "var(--spacer-xxl)", l.XL = "var(--spacer-xl)", l.L = "var(--spacer-l)", l.M = "var(--spacer-m)", l.S = "var(--spacer-s)", l.XS = "var(--spacer-xs)", l.XXS = "var(--spacer-xxs)", l))(R || {}), E = /* @__PURE__ */ ((l) => (l.XXL = "var(--radius-xxl)", l.XL = "var(--radius-xl)", l.L = "var(--radius-l)", l.M = "var(--radius-m)", l.S = "var(--radius-s)", l.XS = "var(--radius-xs)", l.ROUND = "var(--radius-round)", l.CIRCLE = "var(--radius-circle)", l))(E || {}), d0 = /* @__PURE__ */ ((l) => (l.MAIN_DEFAULT = "var(--main-default)", l.MAIN_LARGE = "var(--main-large)", l.MAIN_FORM = "var(--main-form)", l.MAIN_FULL = "var(--main-full)", l.ASIDE_DEFAULT = "var(--aside-default)", l.ASIDE_SMALL = "var(--aside-small)", l))(d0 || {}), F = /* @__PURE__ */ ((l) => (l.SHORT = "var(--transition-short)", l.LONG = "var(--transition-long)", l.BEZIER = "var(--transition-bezier)", l.PROGRESS_CIRCLE = "var(--transition-progress-circle)", l))(F || {}), V = /* @__PURE__ */ ((l) => (l.TABLET_LARGE = "(max-width: 1024px)", l.TABLET_SMALL = "(max-width: 768px)", l.MOBILE = "(max-width: 600px)", l.TOUCH = "(hover: none) and (pointer: coarse)", l.HOVER = "(hover: hover)", l))(V || {});
+var v = /* @__PURE__ */ ((l) => (l.BLACK = "var(--color-black)", l.WHITE = "var(--color-white)", l.GRAY_50 = "var(--color-light-gray-50)", l.GRAY_100 = "var(--color-light-gray-100)", l.GRAY_200 = "var(--color-light-gray-200)", l.GRAY_300 = "var(--color-light-gray-300)", l.GRAY_400 = "var(--color-light-gray-400)", l.GRAY_500 = "var(--color-light-gray-500)", l.GRAY_600 = "var(--color-light-gray-600)", l.GRAY_700 = "var(--color-light-gray-700)", l.GRAY_800 = "var(--color-light-gray-800)", l.GRAY_900 = "var(--color-light-gray-900)", l.PRIMARY_50 = "var(--color-light-primary-50)", l.PRIMARY_100 = "var(--color-light-primary-100)", l.PRIMARY_200 = "var(--color-light-primary-200)", l.PRIMARY_300 = "var(--color-light-primary-300)", l.PRIMARY_400 = "var(--color-light-primary-400)", l.PRIMARY_500 = "var(--color-light-primary-500)", l.PRIMARY_600 = "var(--color-light-primary-600)", l.PRIMARY_700 = "var(--color-light-primary-700)", l.PRIMARY_800 = "var(--color-light-primary-800)", l.PRIMARY_900 = "var(--color-light-primary-900)", l.SECONDARY_50 = "var(--color-light-secondary-50)", l.SECONDARY_100 = "var(--color-light-secondary-100)", l.SECONDARY_200 = "var(--color-light-secondary-200)", l.SECONDARY_300 = "var(--color-light-secondary-300)", l.SECONDARY_400 = "var(--color-light-secondary-400)", l.SECONDARY_500 = "var(--color-light-secondary-500)", l.SECONDARY_600 = "var(--color-light-secondary-600)", l.SECONDARY_700 = "var(--color-light-secondary-700)", l.SECONDARY_800 = "var(--color-light-secondary-800)", l.SECONDARY_900 = "var(--color-light-secondary-900)", l.SUCCESS_50 = "var(--color-light-success-50)", l.SUCCESS_100 = "var(--color-light-success-100)", l.SUCCESS_200 = "var(--color-light-success-200)", l.SUCCESS_300 = "var(--color-light-success-300)", l.SUCCESS_400 = "var(--color-light-success-400)", l.SUCCESS_500 = "var(--color-light-success-500)", l.SUCCESS_600 = "var(--color-light-success-600)", l.SUCCESS_700 = "var(--color-light-success-700)", l.SUCCESS_800 = "var(--color-light-success-800)", l.SUCCESS_900 = "var(--color-light-success-900)", l.DANGER_50 = "var(--color-light-danger-50)", l.DANGER_100 = "var(--color-light-danger-100)", l.DANGER_200 = "var(--color-light-danger-200)", l.DANGER_300 = "var(--color-light-danger-300)", l.DANGER_400 = "var(--color-light-danger-400)", l.DANGER_500 = "var(--color-light-danger-500)", l.DANGER_600 = "var(--color-light-danger-600)", l.DANGER_700 = "var(--color-light-danger-700)", l.DANGER_800 = "var(--color-light-danger-800)", l.DANGER_900 = "var(--color-light-danger-900)", l.WARNING_50 = "var(--color-light-warning-50)", l.WARNING_100 = "var(--color-light-warning-100)", l.WARNING_200 = "var(--color-light-warning-200)", l.WARNING_300 = "var(--color-light-warning-300)", l.WARNING_400 = "var(--color-light-warning-400)", l.WARNING_500 = "var(--color-light-warning-500)", l.WARNING_600 = "var(--color-light-warning-600)", l.WARNING_700 = "var(--color-light-warning-700)", l.WARNING_800 = "var(--color-light-warning-800)", l.WARNING_900 = "var(--color-light-warning-900)", l.BACKGROUND = "var(--color-light-background)", l.FONT = "var(--color-light-font)", l.LINK_FONT_DEFAULT = "var(--color-light-link-font-default)", l.LINK_FONT_HOVER = "var(--color-light-link-font-hover)", l.LINK_FONT_ACTIVE = "var(--color-light-link-font-active)", l.LINK_BACKGROUND_DEFAULT = "var(--color-light-link-background-default)", l.LINK_BACKGROUND_HOVER = "var(--color-light-link-background-hover)", l.LINK_BACKGROUND_ACTIVE = "var(--color-light-link-background-active)", l.FONT_GHOST_DEFAULT = "var(--color-light-font-ghost-default)", l.FONT_GHOST_HOVER = "var(--color-light-font-ghost-hover)", l.FONT_GHOST_ACTIVE = "var(--color-light-font-ghost-active)", l.BACKGROUND_GHOST_DEFAULT = "var(--color-light-background-ghost-default)", l.BACKGROUND_GHOST_HOVER = "var(--color-light-background-ghost-hover)", l.BACKGROUND_GHOST_ACTIVE = "var(--color-light-background-ghost-active)", l.TRANSPARENT = "transparent", l.CURRENT_COLOR = "currentColor", l))(v || {}), b = /* @__PURE__ */ ((l) => (l.BLACK = "var(--color-black)", l.WHITE = "var(--color-white)", l.GRAY_50 = "var(--color-dark-gray-50)", l.GRAY_100 = "var(--color-dark-gray-100)", l.GRAY_200 = "var(--color-dark-gray-200)", l.GRAY_300 = "var(--color-dark-gray-300)", l.GRAY_400 = "var(--color-dark-gray-400)", l.GRAY_500 = "var(--color-dark-gray-500)", l.GRAY_600 = "var(--color-dark-gray-600)", l.GRAY_700 = "var(--color-dark-gray-700)", l.GRAY_800 = "var(--color-dark-gray-800)", l.GRAY_900 = "var(--color-dark-gray-900)", l.PRIMARY_50 = "var(--color-dark-primary-50)", l.PRIMARY_100 = "var(--color-dark-primary-100)", l.PRIMARY_200 = "var(--color-dark-primary-200)", l.PRIMARY_300 = "var(--color-dark-primary-300)", l.PRIMARY_400 = "var(--color-dark-primary-400)", l.PRIMARY_500 = "var(--color-dark-primary-500)", l.PRIMARY_600 = "var(--color-dark-primary-600)", l.PRIMARY_700 = "var(--color-dark-primary-700)", l.PRIMARY_800 = "var(--color-dark-primary-800)", l.PRIMARY_900 = "var(--color-dark-primary-900)", l.SECONDARY_50 = "var(--color-dark-secondary-50)", l.SECONDARY_100 = "var(--color-dark-secondary-100)", l.SECONDARY_200 = "var(--color-dark-secondary-200)", l.SECONDARY_300 = "var(--color-dark-secondary-300)", l.SECONDARY_400 = "var(--color-dark-secondary-400)", l.SECONDARY_500 = "var(--color-dark-secondary-500)", l.SECONDARY_600 = "var(--color-dark-secondary-600)", l.SECONDARY_700 = "var(--color-dark-secondary-700)", l.SECONDARY_800 = "var(--color-dark-secondary-800)", l.SECONDARY_900 = "var(--color-dark-secondary-900)", l.SUCCESS_50 = "var(--color-dark-success-50)", l.SUCCESS_100 = "var(--color-dark-success-100)", l.SUCCESS_200 = "var(--color-dark-success-200)", l.SUCCESS_300 = "var(--color-dark-success-300)", l.SUCCESS_400 = "var(--color-dark-success-400)", l.SUCCESS_500 = "var(--color-dark-success-500)", l.SUCCESS_600 = "var(--color-dark-success-600)", l.SUCCESS_700 = "var(--color-dark-success-700)", l.SUCCESS_800 = "var(--color-dark-success-800)", l.SUCCESS_900 = "var(--color-dark-success-900)", l.DANGER_50 = "var(--color-dark-danger-50)", l.DANGER_100 = "var(--color-dark-danger-100)", l.DANGER_200 = "var(--color-dark-danger-200)", l.DANGER_300 = "var(--color-dark-danger-300)", l.DANGER_400 = "var(--color-dark-danger-400)", l.DANGER_500 = "var(--color-dark-danger-500)", l.DANGER_600 = "var(--color-dark-danger-600)", l.DANGER_700 = "var(--color-dark-danger-700)", l.DANGER_800 = "var(--color-dark-danger-800)", l.DANGER_900 = "var(--color-dark-danger-900)", l.WARNING_50 = "var(--color-dark-warning-50)", l.WARNING_100 = "var(--color-dark-warning-100)", l.WARNING_200 = "var(--color-dark-warning-200)", l.WARNING_300 = "var(--color-dark-warning-300)", l.WARNING_400 = "var(--color-dark-warning-400)", l.WARNING_500 = "var(--color-dark-warning-500)", l.WARNING_600 = "var(--color-dark-warning-600)", l.WARNING_700 = "var(--color-dark-warning-700)", l.WARNING_800 = "var(--color-dark-warning-800)", l.WARNING_900 = "var(--color-dark-warning-900)", l.BACKGROUND = "var(--color-dark-background)", l.FONT = "var(--color-dark-font)", l.LINK_FONT_DEFAULT = "var(--color-dark-link-font-default)", l.LINK_FONT_HOVER = "var(--color-dark-link-font-hover)", l.LINK_FONT_ACTIVE = "var(--color-dark-link-font-active)", l.LINK_BACKGROUND_DEFAULT = "var(--color-dark-link-background-default)", l.LINK_BACKGROUND_HOVER = "var(--color-dark-link-background-hover)", l.LINK_BACKGROUND_ACTIVE = "var(--color-dark-link-background-active)", l.FONT_GHOST_DEFAULT = "var(--color-dark-font-ghost-default)", l.FONT_GHOST_HOVER = "var(--color-dark-font-ghost-hover)", l.FONT_GHOST_ACTIVE = "var(--color-dark-font-ghost-active)", l.BACKGROUND_GHOST_DEFAULT = "var(--color-dark-background-ghost-default)", l.BACKGROUND_GHOST_HOVER = "var(--color-dark-background-ghost-hover)", l.BACKGROUND_GHOST_ACTIVE = "var(--color-dark-background-ghost-active)", l.TRANSPARENT = "transparent", l.CURRENT_COLOR = "currentColor", l))(b || {}), I2 = /* @__PURE__ */ ((l) => (l.BLACK_50 = "var(--overlay-black-50)", l.BLACK_80 = "var(--overlay-black-80)", l.WHITE_50 = "var(--overlay-white-50)", l.WHITE_80 = "var(--overlay-white-80)", l.GRADIENT_BLACK = "var(--overlay-gradient-black)", l.GRADIENT_WHITE = "var(--overlay-gradient-white)", l))(I2 || {}), V2 = /* @__PURE__ */ ((l) => (l.BODY = "var(--font-family-body)", l.CODE = "var(--font-family-code)", l))(V2 || {}), K = /* @__PURE__ */ ((l) => (l.DISPLAY_H1 = "var(--font-size-display-h1)", l.DISPLAY_H2 = "var(--font-size-display-h2)", l.DISPLAY_H3 = "var(--font-size-display-h3)", l.DISPLAY_H4 = "var(--font-size-display-h4)", l.DISPLAY_H5 = "var(--font-size-display-h5)", l.H1 = "var(--font-size-h1)", l.H2 = "var(--font-size-h2)", l.H3 = "var(--font-size-h3)", l.H4 = "var(--font-size-h4)", l.H5 = "var(--font-size-h5)", l.H6 = "var(--font-size-h6)", l.BODY = "var(--font-size-body)", l.SMALL = "var(--font-size-small)", l))(K || {}), r2 = /* @__PURE__ */ ((l) => (l.REGULAR = "var(--font-weight-regular)", l.BOLD = "var(--font-weight-bold)", l.BLACK = "var(--font-weight-black)", l))(r2 || {}), n2 = /* @__PURE__ */ ((l) => (l.BODY = "var(--line-height-body)", l.CODE = "var(--line-height-code)", l))(n2 || {}), Q2 = /* @__PURE__ */ ((l) => (l.XXL = "var(--shadow-xxl)", l.XL = "var(--shadow-xl)", l.L = "var(--shadow-l)", l.M = "var(--shadow-m)", l.S = "var(--shadow-s)", l.XS = "var(--shadow-xs)", l))(Q2 || {}), R = /* @__PURE__ */ ((l) => (l.XXL = "var(--spacer-xxl)", l.XL = "var(--spacer-xl)", l.L = "var(--spacer-l)", l.M = "var(--spacer-m)", l.S = "var(--spacer-s)", l.XS = "var(--spacer-xs)", l.XXS = "var(--spacer-xxs)", l))(R || {}), E = /* @__PURE__ */ ((l) => (l.XXL = "var(--radius-xxl)", l.XL = "var(--radius-xl)", l.L = "var(--radius-l)", l.M = "var(--radius-m)", l.S = "var(--radius-s)", l.XS = "var(--radius-xs)", l.ROUND = "var(--radius-round)", l.CIRCLE = "var(--radius-circle)", l))(E || {}), d0 = /* @__PURE__ */ ((l) => (l.MAIN_DEFAULT = "var(--main-default)", l.MAIN_LARGE = "var(--main-large)", l.MAIN_FORM = "var(--main-form)", l.MAIN_FULL = "var(--main-full)", l.ASIDE_DEFAULT = "var(--aside-default)", l.ASIDE_SMALL = "var(--aside-small)", l))(d0 || {}), F = /* @__PURE__ */ ((l) => (l.SHORT = "var(--transition-short)", l.LONG = "var(--transition-long)", l.BEZIER = "var(--transition-bezier)", l.PROGRESS_CIRCLE = "var(--transition-progress-circle)", l))(F || {}), V = /* @__PURE__ */ ((l) => (l.BREAKPOINT_TABLET_LARGE = "(max-width: 1024px)", l.BREAKPOINT_TABLET_SMALL = "(max-width: 768px)", l.BREAKPOINT_MOBILE = "(max-width: 600px)", l.TOUCH = "(hover: none) and (pointer: coarse)", l.HOVER = "(hover: hover)", l.PREFERS_LIGHT = "(prefers-color-scheme: light)", l.PREFERS_DARK = "(prefers-color-scheme: dark)", l))(V || {});
 const U8 = 0.6, B2 = 32, N = (l) => l.forEach(
-  (c) => c.defaultProps = { theme: v }
+  (c) => c.prototype = { theme: v }
 ), Z8 = {
   light: {
     black: {
@@ -1100,7 +1100,7 @@ function el() {
         G < 0 && x("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var X2 = u.ReactCurrentDispatcher, o0;
+    var q2 = u.ReactCurrentDispatcher, o0;
     function p0(w, _, D) {
       {
         if (o0 === void 0)
@@ -1132,7 +1132,7 @@ function el() {
       var f2 = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
       var s2;
-      s2 = X2.current, X2.current = null, i2();
+      s2 = q2.current, q2.current = null, i2();
       try {
         if (_) {
           var h2 = function() {
@@ -1185,10 +1185,10 @@ function el() {
             }
         }
       } finally {
-        W0 = !1, X2.current = s2, w2(), Error.prepareStackTrace = f2;
+        W0 = !1, q2.current = s2, w2(), Error.prepareStackTrace = f2;
       }
-      var v0 = w ? w.displayName || w.name : "", e0 = v0 ? p0(v0) : "";
-      return typeof w == "function" && I0.set(w, e0), e0;
+      var v0 = w ? w.displayName || w.name : "", a0 = v0 ? p0(v0) : "";
+      return typeof w == "function" && I0.set(w, a0), a0;
     }
     function e8(w, _, D) {
       return T3(w, !1);
@@ -1514,17 +1514,17 @@ Check the top-level render call using <` + D + ">.");
               q3(j2, w);
         }
         if (x0.call(_, "key")) {
-          var e0 = U(w), y2 = Object.keys(_).filter(function(y8) {
+          var a0 = U(w), y2 = Object.keys(_).filter(function(y8) {
             return y8 !== "key";
           }), l3 = y2.length > 0 ? "{key: someKey, " + y2.join(": ..., ") + ": ...}" : "{key: someKey}";
-          if (!Q3[e0 + l3]) {
+          if (!Q3[a0 + l3]) {
             var H8 = y2.length > 0 ? "{" + y2.join(": ..., ") + ": ...}" : "{}";
             x(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`, l3, e0, H8, e0), Q3[e0 + l3] = !0;
+  <%s key={someKey} {...props} />`, l3, a0, H8, a0), Q3[a0 + l3] = !0;
           }
         }
         return w === a ? k8(M2) : g8(M2), M2;
@@ -1568,7 +1568,7 @@ const dl = (l, c) => typeof c == "string" ? hl(l) : !0, il = ({
 ), fl = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm, rl = (l, c) => {
   const e = l == null ? void 0 : l.split(" ");
   return e == null ? void 0 : e.map(
-    (a) => a.match(fl) ? /* @__PURE__ */ t.jsxs(J2, { children: [
+    (a) => a.match(fl) ? /* @__PURE__ */ t.jsxs(l0, { children: [
       /* @__PURE__ */ t.jsx(
         "a",
         {
@@ -1582,7 +1582,7 @@ const dl = (l, c) => typeof c == "string" ? hl(l) : !0, il = ({
       " "
     ] }, J()) : a + " "
   );
-}, ml = (l, c, e, a) => (l == null ? void 0 : l.toString().split(new RegExp(`(${c})`, "gi"))).map((d) => /* @__PURE__ */ t.jsx(J2, { children: l1(d) === l1(c) ? /* @__PURE__ */ t.jsx(
+}, ml = (l, c, e, a) => (l == null ? void 0 : l.toString().split(new RegExp(`(${c})`, "gi"))).map((d) => /* @__PURE__ */ t.jsx(l0, { children: l1(d) === l1(c) ? /* @__PURE__ */ t.jsx(
   X,
   {
     tag: "strong",
@@ -1751,7 +1751,7 @@ const pl = /* @__PURE__ */ new Map([
   ["white-80", I2.WHITE_80],
   ["gradient-black", I2.GRADIENT_BLACK],
   ["gradient-white", I2.GRADIENT_WHITE]
-]), p2 = (l) => Number((l * U8).toFixed(2)), Q2 = (l = "body") => {
+]), p2 = (l) => Number((l * U8).toFixed(2)), J2 = (l = "body") => {
   const c = (a) => Number(C2["font-sizes"][a].px.replace("px", ""));
   return (/* @__PURE__ */ new Map([
     ["display-h1", c("display-h1")],
@@ -4130,12 +4130,12 @@ class zl {
       ["long", F.LONG],
       ["bezier", F.BEZIER]
     ])).get(c) : null, this.Shadow = (c) => c ? (/* @__PURE__ */ new Map([
-      ["xxl", q2.XXL],
-      ["xl", q2.XL],
-      ["l", q2.L],
-      ["m", q2.M],
-      ["s", q2.S],
-      ["xs", q2.XS]
+      ["xxl", Q2.XXL],
+      ["xl", Q2.XL],
+      ["l", Q2.L],
+      ["m", Q2.M],
+      ["s", Q2.S],
+      ["xs", Q2.XS]
     ])).get(c) : null, this.BoxShadow = (c) => c ? typeof c == "string" ? y`
                 box-shadow: ${m.Shadow(c)};
             ` : y`
@@ -4517,7 +4517,7 @@ const m = new zl(), k3 = ({
             }
         }
     }
-`, c0 = ({
+`, e0 = ({
   $disabled: l,
   $inputBackground: c,
   $inputVariant: e,
@@ -5256,7 +5256,7 @@ const vl = C(
             font-size: ${K.SMALL};
         }
 
-        @media ${V.MOBILE} {
+        @media ${V.BREAKPOINT_MOBILE} {
             display: block;
         }
     }
@@ -5510,7 +5510,7 @@ const h1 = C(
   editorLive: !0,
   editorPreview: !0,
   titles: !0
-}, W2 = (l, c) => {
+}, K2 = (l, c) => {
   z2(() => {
     const e = (a) => {
       if (a.target.getAttribute("href")) return !1;
@@ -5708,7 +5708,7 @@ const Yd = (l) => {
     language: c,
     languages: a
   };
-}, a0 = {
+}, W2 = {
   light: {
     BLACK: v.BLACK,
     WHITE: v.WHITE,
@@ -5874,19 +5874,25 @@ const Yd = (l) => {
   stylesheetManager: c
 }) => {
   const [e, a] = P(void 0), [h, d] = P(
-    e === "dark" ? a0.dark : a0.light
+    e === "dark" ? W2.dark : W2.light
   ), f = document.body, i = () => {
-    e === "light" ? (a("dark"), d(a0.dark), localStorage.setItem("theme", "dark"), f.classList.add("dark")) : (a("light"), d(a0.light), localStorage.setItem("theme", "light"), f.classList.remove("dark"));
+    e === "light" ? (a("dark"), d(W2.dark), localStorage.setItem("theme", "dark"), f.classList.add("dark")) : (a("light"), d(W2.light), localStorage.setItem("theme", "light"), f.classList.remove("dark"));
   };
   return z2(() => {
-    typeof window < "u" && (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches && !e || localStorage.getItem("theme") === "dark" ? (a("dark"), d(a0.dark), f.classList.add("dark")) : localStorage.getItem("theme") === "light" ? (a("light"), d(a0.light), f.classList.remove("dark")) : (!localStorage.getItem("theme") || localStorage.getItem("theme") === null || localStorage.getItem("theme") === null) && window.localStorage.setItem("theme", "light"));
-  }, [e, f]), /* @__PURE__ */ t.jsx(f4.Provider, { value: { theme: h, selectedTheme: e, toggleTheme: i }, children: c ? /* @__PURE__ */ t.jsx(
-    il,
+    typeof window < "u" && (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches && !e ? (a("dark"), d(W2.dark), f.classList.add("dark")) : !localStorage.getItem("theme") || localStorage.getItem("theme") === null || localStorage.getItem("theme") === void 0 ? (window.localStorage.setItem("theme", "light"), a("light"), d(W2.light)) : localStorage.getItem("theme") === "light" ? (a("light"), d(W2.light), f.classList.remove("dark")) : localStorage.getItem("theme") === "dark" && (a("dark"), d(W2.dark), f.classList.add("dark")));
+  }, [e, f]), /* @__PURE__ */ t.jsx(
+    f4.Provider,
     {
-      ...c,
-      children: l
+      value: { theme: h ?? W2.light, selectedTheme: e, toggleTheme: i },
+      children: c ? /* @__PURE__ */ t.jsx(
+        il,
+        {
+          ...c,
+          children: l
+        }
+      ) : l
     }
-  ) : l });
+  );
 }, Fd = () => N1(f4), Y0 = ({ $size: l }) => y`
     width: ${l && O(l)};
     height: ${l && O(l)};
@@ -7761,7 +7767,7 @@ const C4 = k.div`
   $justifyContent: "center"
 })}
 
-    @media ${V.TABLET_LARGE} {
+    @media ${V.BREAKPOINT_TABLET_LARGE} {
         flex-direction: column;
         align-items: center;
         min-height: inherit;
@@ -7820,7 +7826,7 @@ const uc = C(
             }
         `}
 
-    @media ${V.TABLET_SMALL} {
+    @media ${V.BREAKPOINT_TABLET_SMALL} {
         height: unset;
     }
 `;
@@ -7867,7 +7873,7 @@ const xc = C(
         flex-shrink: 0;
     }
 
-    @media ${V.TABLET_SMALL} {
+    @media ${V.BREAKPOINT_TABLET_SMALL} {
         height: inherit;
     }
 `;
@@ -8185,7 +8191,7 @@ const Xd = C(
 ), $c = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm, s1 = C(({ children: l, blank: c, className: e, ...a }, h) => {
   const d = l ? l.split(" ") : [];
   return /* @__PURE__ */ t.jsx(X, { ref: h, className: e, ...a, children: d == null ? void 0 : d.map(
-    (f) => f.match($c) ? /* @__PURE__ */ t.jsxs(J2, { children: [
+    (f) => f.match($c) ? /* @__PURE__ */ t.jsxs(l0, { children: [
       /* @__PURE__ */ t.jsx(
         "a",
         {
@@ -8338,7 +8344,7 @@ const Ac = C(
     ...n
   }, H) => {
     const u = u3(), x = i === "click" || u ? "click" : "hover", [$, A] = P(!1), L = o2(null);
-    W2(L, () => {
+    K2(L, () => {
       $ && x === "click" && A(!1);
     });
     const j = c2(() => {
@@ -9790,7 +9796,7 @@ const Dc = C(
         $color: h,
         ...z,
         children: [
-          a == null ? void 0 : a.map(($, A) => /* @__PURE__ */ t.jsxs(J2, { children: [
+          a == null ? void 0 : a.map(($, A) => /* @__PURE__ */ t.jsxs(l0, { children: [
             /* @__PURE__ */ t.jsx(
               Ec,
               {
@@ -9808,7 +9814,7 @@ const Dc = C(
               J()
             )
           ] }, J())),
-          r == null ? void 0 : r.map(($, A) => /* @__PURE__ */ t.jsxs(J2, { children: [
+          r == null ? void 0 : r.map(($, A) => /* @__PURE__ */ t.jsxs(l0, { children: [
             /* @__PURE__ */ t.jsx(
               Dc,
               {
@@ -9866,8 +9872,8 @@ const Gc = C(
     fontSize: s = "small",
     icons: o,
     iconSizes: p = {
-      left: Q2(s),
-      right: Q2(s)
+      left: J2(s),
+      right: J2(s)
     },
     iconBaseUrl: z,
     gap: g = "xs",
@@ -10798,21 +10804,21 @@ const Tc = ({
       {
         "data-testid": l && `${l}.ValidationHelper.IconContainer.Icon`,
         className: c && "ValidationIconBottom",
-        size: Q2("small"),
+        size: J2("small"),
         color: "danger"
       }
     ),
-    iconNotPassedSize: f = Q2("small"),
+    iconNotPassedSize: f = J2("small"),
     iconPassed: i = /* @__PURE__ */ t.jsx(
       y3,
       {
         "data-testid": l && `${l}.ValidationHelper.IconContainer.Icon`,
         className: c && "ValidationIconBottom",
-        size: Q2("small"),
+        size: J2("small"),
         color: "success"
       }
     ),
-    iconPassedSize: r = Q2("small"),
+    iconPassedSize: r = J2("small"),
     iconBaseUrl: s
   } = e;
   return !h || !e || a === void 0 ? null : /* @__PURE__ */ t.jsxs(
@@ -10970,7 +10976,7 @@ const Tc = ({
       children: h
     }
   )
-), K2 = ({
+), X2 = ({
   "data-testid": l,
   className: c,
   prefix: e,
@@ -11043,7 +11049,7 @@ const Tc = ({
       fontStyle: i,
       icon: r,
       iconColor: s = "primary",
-      iconSize: o = Q2("small"),
+      iconSize: o = J2("small"),
       linkColor: p
     } = e;
     return h ? /* @__PURE__ */ t.jsx(i0, { linkColor: p, children: h }) : r ? /* @__PURE__ */ t.jsxs(
@@ -11065,7 +11071,7 @@ const Tc = ({
                   className: c && "HelperBottomIcon",
                   icon: r,
                   color: s,
-                  size: o || Q2("small"),
+                  size: o || J2("small"),
                   baseUrl: a
                 }
               )
@@ -11192,7 +11198,7 @@ const Tc = ({
     }
   )
 ), Pc = `calc(${K.BODY} * ${n2.BODY} * 4 + ${R.XXS} * 2)`, Z2 = k.input`
-    ${c0}
+    ${e0}
 
     ${({ $isSelect: l }) => l && y`
             -webkit-appearance: none;
@@ -11289,7 +11295,7 @@ const Fc = C(
           disabled: s,
           children: [
             /* @__PURE__ */ t.jsx(
-              K2,
+              X2,
               {
                 "data-testid": l,
                 className: r,
@@ -11463,7 +11469,7 @@ const Fc = C(
           disabled: s,
           children: [
             $ && /* @__PURE__ */ t.jsx(
-              K2,
+              X2,
               {
                 "data-testid": l,
                 className: r,
@@ -11601,7 +11607,7 @@ const Fc = C(
           disabled: r,
           children: [
             /* @__PURE__ */ t.jsx(
-              K2,
+              X2,
               {
                 "data-testid": l,
                 className: i,
@@ -11719,7 +11725,7 @@ const Fc = C(
           disabled: s,
           children: [
             /* @__PURE__ */ t.jsx(
-              K2,
+              X2,
               {
                 "data-testid": l,
                 className: r,
@@ -11852,7 +11858,7 @@ const Fc = C(
         disabled: o,
         children: [
           /* @__PURE__ */ t.jsx(
-            K2,
+            X2,
             {
               "data-testid": l,
               className: s,
@@ -11970,7 +11976,7 @@ const Fc = C(
           disabled: s,
           children: [
             /* @__PURE__ */ t.jsx(
-              K2,
+              X2,
               {
                 "data-testid": l,
                 className: r,
@@ -13069,7 +13075,7 @@ const fi = C(
   { name: "Zambia", dial_code: "+260", code: "zm", flag: $h },
   { name: "Zimbabwe", dial_code: "+263", code: "zw", flag: Ah }
 ], P7 = k.input`
-    ${c0}
+    ${e0}
     padding-left: 0;
 `, F7 = k.button`
     height: 100%;
@@ -13262,7 +13268,7 @@ const V0 = {
     ), [z, o]), [U, q] = P(!1), G = c2(() => {
       q(!U);
     }, [U]), Q = o2(null);
-    W2(
+    K2(
       Q,
       c2(() => {
         U && q(!1);
@@ -13512,7 +13518,7 @@ const V0 = {
 `, Lh = k(s0)`
     width: fit-content;
 `, X7 = k.input`
-    ${c0}
+    ${e0}
     width: ${({ $length: l }) => l > 3 ? `calc(48px + ${l} * ${R.XS})` : "48px"};
     text-align: center;
     flex-grow: inherit;
@@ -13751,7 +13757,7 @@ const n1 = 32, mi = C(
         border-radius: ${E.CIRCLE};
         cursor: pointer;
         transition: ${F.SHORT};
-        box-shadow: ${q2.S};
+        box-shadow: ${Q2.S};
         position: relative;
         z-index: 2;
 
@@ -14113,7 +14119,7 @@ const d3 = C(
     position: relative;
     width: 100%;
 `, e5 = k.button`
-    ${c0}
+    ${e0}
     text-align: left;
     font-weight: ${r2.REGULAR};
     cursor: ${({ $hasOptions: l }) => l ? "pointer" : "default"};
@@ -14192,7 +14198,7 @@ const g1 = C(
       value: z,
       setValue: g
     });
-    W2(G, () => U(!1));
+    K2(G, () => U(!1));
     const Q = (m2) => {
       m2.stopPropagation(), !W && M && M.length > 1 && U(!0);
     };
@@ -14264,7 +14270,7 @@ const g1 = C(
                         disabled: p,
                         children: [
                           /* @__PURE__ */ t.jsx(
-                            K2,
+                            X2,
                             {
                               "data-testid": l,
                               className: c,
@@ -14369,7 +14375,7 @@ const g1 = C(
     );
   }
 ), a5 = k.input`
-    ${c0}
+    ${e0}
 `;
 N([a5]);
 const Rh = C(
@@ -14409,8 +14415,8 @@ const Rh = C(
       }, [])
     );
     const G = G0(() => {
-      var X2, o0;
-      return (o0 = (X2 = new B8(z, n).search(o)) == null ? void 0 : X2.slice(0, 20)) == null ? void 0 : o0.map((p0) => p0.item);
+      var q2, o0;
+      return (o0 = (q2 = new B8(z, n).search(o)) == null ? void 0 : q2.slice(0, 20)) == null ? void 0 : o0.map((p0) => p0.item);
     }, [n, z, o]), { isOpen: Q, setIsOpen: l2, cursor: m2, listRef: k2 } = b3({
       data: G,
       value: o,
@@ -14582,7 +14588,7 @@ const Rh = C(
                   validationStatus: i == null ? void 0 : i.status,
                   isOpen: !!(o && Q),
                   ref: k2,
-                  children: G != null && G.length ? /* @__PURE__ */ t.jsx(t.Fragment, { children: G.map((w2, X2) => /* @__PURE__ */ t.jsx(
+                  children: G != null && G.length ? /* @__PURE__ */ t.jsx(t.Fragment, { children: G.map((w2, q2) => /* @__PURE__ */ t.jsx(
                     f0,
                     {
                       "data-testid": l,
@@ -14590,7 +14596,7 @@ const Rh = C(
                       validationStatus: i == null ? void 0 : i.status,
                       inputBackground: r,
                       onClick: () => _2(w2),
-                      isActive: X2 === m2,
+                      isActive: q2 === m2,
                       isHovered: o === w2,
                       children: /* @__PURE__ */ t.jsx(Cc, { highlightedText: o, children: w2 })
                     },
@@ -14750,7 +14756,7 @@ const zi = C(
     );
   }
 ), h5 = k.input`
-    ${c0}
+    ${e0}
     border: 1px solid ${({ theme: l }) => l.GRAY_200};
     border-radius: ${E.S};
     width: ${({ $inputSize: l }) => l}px;
@@ -15359,7 +15365,7 @@ const Ih = C(
       $linkColor: h,
       $activeColor: d,
       ...s,
-      children: a == null ? void 0 : a.map((p, z) => /* @__PURE__ */ t.jsxs(J2, { children: [
+      children: a == null ? void 0 : a.map((p, z) => /* @__PURE__ */ t.jsxs(l0, { children: [
         p,
         z !== a.length - 1 && /* @__PURE__ */ t.jsx(
           n5,
@@ -15887,7 +15893,7 @@ const y5 = C(
     ...z
   }, g) => {
     const M = o2(null);
-    return W2(
+    return K2(
       M,
       c2(() => d(!1), [d])
     ), /* @__PURE__ */ t.jsx(
@@ -16076,7 +16082,7 @@ const k1 = 48, Oh = "Close modal", wi = C(
       }, [f, g, h])
     );
     const M = o2(null);
-    W2(M, () => g());
+    K2(M, () => g());
     const n = R0(10, !0), H = (a == null ? void 0 : a.split(" ")[0]) || n;
     return r0(`
             ${o ? `#${o}` : `.${H}`} {
@@ -17045,7 +17051,7 @@ const Uh = C(
         $inline: !0
       })};
 
-                    @media ${V.MOBILE} {
+                    @media ${V.BREAKPOINT_MOBILE} {
                         flex-direction: column;
                     }
                 `;
@@ -17056,7 +17062,7 @@ const Uh = C(
         $col: c
       })};
 
-                    @media ${V.MOBILE} {
+                    @media ${V.BREAKPOINT_MOBILE} {
                         grid-template-columns: repeat(1, 1fr);
                     }
                 `;
@@ -17080,7 +17086,7 @@ const Uh = C(
                     z-index: 2;
                     color: ${e.FONT};
 
-                    @media ${V.MOBILE} {
+                    @media ${V.BREAKPOINT_MOBILE} {
                         width: 100%;
                     }
 
@@ -18625,7 +18631,7 @@ const o6 = k.div`
     border-radius: ${E.M} ${E.M} 0 0;
     padding: ${R.XS};
 
-    @media ${V.MOBILE} {
+    @media ${V.BREAKPOINT_MOBILE} {
         gap: 0;
         align-items: flex-start;
         justify-content: flex-start;
@@ -19380,7 +19386,7 @@ const Vi = C(
     display: none;
     z-index: 999;
 
-    @media ${V.MOBILE} {
+    @media ${V.BREAKPOINT_MOBILE} {
         display: inherit;
     }
 `, C6 = k.header`
@@ -19399,7 +19405,7 @@ const Vi = C(
     background-color: ${({ $backgroundColor: l }) => m.AllColors(l)};
     color: ${({ $textColor: l }) => m.AllColors(l)};
 
-    @media ${V.MOBILE} {
+    @media ${V.BREAKPOINT_MOBILE} {
         height: ${({ $headerHeight: l }) => l}px;
     }
 
@@ -19421,7 +19427,7 @@ const Vi = C(
     }
 
     ${({ $burgerPosition: l }) => l === "left" && y`
-            @media ${V.MOBILE} {
+            @media ${V.BREAKPOINT_MOBILE} {
                 justify-content: flex-start;
                 gap: ${R.XS};
             }
@@ -19468,7 +19474,7 @@ const Vi = C(
       return y`
                     background-color: transparent;
 
-                    @media ${V.MOBILE} {
+                    @media ${V.BREAKPOINT_MOBILE} {
                         &.Open {
                             background-color: ${c.PRIMARY_500};
 
@@ -19542,7 +19548,7 @@ const Vi = C(
             flex-grow: 1;
         `}
 
-    @media ${V.MOBILE} {
+    @media ${V.BREAKPOINT_MOBILE} {
         position: absolute;
         background-color: ${({ theme: l, $variant: c }) => c === "white" ? l.WHITE : l.PRIMARY_500};
         transition: ${F.SHORT};
@@ -19623,7 +19629,7 @@ const Vi = C(
     width: 100%;
     max-width: ${({ $maxWidth: l }) => l && O(l)};
 
-    @media ${V.MOBILE} {
+    @media ${V.BREAKPOINT_MOBILE} {
         max-width: 100%;
     }
 `;
@@ -19781,7 +19787,7 @@ const R1 = C(
   nav: z
 }) => {
   const g = w3(600), M = o2(null);
-  W2(M, ($) => {
+  K2(M, ($) => {
     var A;
     (A = o == null ? void 0 : o.current) != null && A.contains($.target) || p();
   });
@@ -20103,7 +20109,7 @@ const nd = C(
     ...z
   }, g) => {
     const [M, n] = P(!1), H = o2(null);
-    return W2(H, () => {
+    return K2(H, () => {
       M && n(!1);
     }), /* @__PURE__ */ t.jsxs(
       R6,
@@ -20211,7 +20217,7 @@ const nd = C(
         }
     }
 
-    @media ${V.MOBILE} {
+    @media ${V.BREAKPOINT_MOBILE} {
         flex-direction: column;
         gap: ${R.XS};
     }
@@ -20239,7 +20245,7 @@ const nd = C(
   gap: "xs",
   flexWrap: "wrap"
 })`
-    @media ${V.MOBILE} {
+    @media ${V.BREAKPOINT_MOBILE} {
         justify-content: center;
         align-items: center;
     }
@@ -20325,7 +20331,7 @@ const Md = ({
           {
             "data-testid": l && `${l}.FooterLinksContainer`,
             className: a && "FooterLinksContainer",
-            children: d ? d.map((p, z) => /* @__PURE__ */ t.jsxs(J2, { children: [
+            children: d ? d.map((p, z) => /* @__PURE__ */ t.jsxs(l0, { children: [
               /* @__PURE__ */ t.jsx(
                 gd,
                 {
@@ -20790,7 +20796,7 @@ const ud = C(
         $padding: p,
         $borderRadius: z,
         ...M,
-        children: (r == null ? void 0 : r.map((L, j) => /* @__PURE__ */ t.jsxs(J2, { children: [
+        children: (r == null ? void 0 : r.map((L, j) => /* @__PURE__ */ t.jsxs(l0, { children: [
           /* @__PURE__ */ t.jsx(
             ud,
             {
@@ -20918,14 +20924,14 @@ const Bi = C(
   oct: "October",
   nov: "November",
   dec: "December"
-}, l0 = 32, j1 = 24, K6 = k.input`
+}, c0 = 32, j1 = 24, K6 = k.input`
     font-weight: ${r2.REGULAR};
     cursor: pointer;
     ${m.Flexbox({
   $alignItems: "center",
   $justifyContent: "space-between"
 })};
-    ${c0};
+    ${e0};
 
     &:disabled {
         cursor: not-allowed;
@@ -20951,11 +20957,11 @@ const Bi = C(
   switch (l) {
     case "up":
       return y`
-                    bottom: ${l0}px;
+                    bottom: ${c0}px;
                 `;
     case "down":
       return y`
-                    top: ${l0}px;
+                    top: ${c0}px;
                 `;
     default:
       return null;
@@ -21003,8 +21009,8 @@ const Bi = C(
   }
 }}
 `, v3 = k.button`
-    width: ${l0}px;
-    height: ${l0}px;
+    width: ${c0}px;
+    height: ${c0}px;
     ${m.Flexbox({
   $inline: !0,
   $alignItems: "center",
@@ -21091,8 +21097,8 @@ const Bi = C(
   }
 }}
 `, h0 = k.span`
-    width: ${l0}px;
-    height: ${l0}px;
+    width: ${c0}px;
+    height: ${c0}px;
 `, Q6 = k.div`
     ${m.Grid({
   $col: 7,
@@ -21120,8 +21126,8 @@ const Bi = C(
   }
 }}
 `, J6 = k.button`
-    width: ${l0}px;
-    height: ${l0}px;
+    width: ${c0}px;
+    height: ${c0}px;
     padding: 0;
     border: 1px solid transparent;
     border-radius: ${E.CIRCLE};
@@ -21165,7 +21171,7 @@ const Bi = C(
         color: ${({ theme: l }) => l.GRAY_500};
     }
 
-    @media ${V.MOBILE} {
+    @media ${V.BREAKPOINT_MOBILE} {
         width: ${j1}px;
         height: ${j1}px;
     }
@@ -21542,7 +21548,7 @@ const yd = ({
     ...S
   }, B) => {
     const [Y, t2] = P(!1), W = o2(null);
-    W2(W, () => t2(!1));
+    K2(W, () => t2(!1));
     const q = !!(H || u || x || $ || A), G = () => {
       if (!g) t2(!0);
       else return;
@@ -21594,7 +21600,7 @@ const yd = ({
                         disabled: g,
                         children: [
                           I && /* @__PURE__ */ t.jsx(
-                            K2,
+                            X2,
                             {
                               "data-testid": l,
                               className: c,
@@ -21716,7 +21722,7 @@ const yd = ({
   $alignItems: "center",
   $justifyContent: "space-between"
 })};
-    ${c0};
+    ${e0};
 
     &:disabled {
         cursor: not-allowed;
@@ -21776,7 +21782,7 @@ const Pi = C(
     }, H2 = () => Q(!0), R2 = () => Q(!1), _2 = (i2) => j(i2.target.value), D2 = (i2) => {
       j(i2), R2();
     };
-    return W2(m2, R2), /* @__PURE__ */ t.jsx(
+    return K2(m2, R2), /* @__PURE__ */ t.jsx(
       L2,
       {
         "data-testid": l,
@@ -21823,7 +21829,7 @@ const Pi = C(
                         disabled: S,
                         children: [
                           I && /* @__PURE__ */ t.jsx(
-                            K2,
+                            X2,
                             {
                               "data-testid": l,
                               className: c,
@@ -21946,7 +21952,6 @@ export {
   Zd as Aside,
   pi as Autocomplete,
   ai as Avatar,
-  V as BREAKPOINTS,
   Vi as BackToTop,
   A0 as Badge,
   gi as Breadcrumbs,
@@ -21999,12 +22004,13 @@ export {
   d0 as LAYOUTS,
   C2 as LIB_TOKENS,
   n2 as LINE_HEIGHTS,
-  a0 as LibThemeColors,
+  W2 as LibThemeColors,
   s1 as Linkify,
   Mi as ListGroup,
   jh as ListGroupItem,
   _h as ListGroupTitle,
   w0 as Loader,
+  V as MEDIA,
   xc as Main,
   Ii as MarkdownContainer,
   ji as MarkdownEditor,
@@ -22027,7 +22033,7 @@ export {
   E as RADIUSES,
   zi as Rating,
   Di as ResetScroll,
-  q2 as SHADOWS,
+  Q2 as SHADOWS,
   R as SPACERS,
   Wd as Section,
   oi as Select,
@@ -22122,7 +22128,7 @@ export {
   Pf as toSnakeCase,
   Ff as toTitleCase,
   Uf as unslugify,
-  W2 as useClickOutside,
+  K2 as useClickOutside,
   Nd as useCopyToClipboard,
   Vd as useDebounce,
   Ed as useExportData,