xtreme-ui 0.0.111 → 0.0.113

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/base/ColorPopper/ColorPopper.d.ts.map +1 -1
  2. package/dist/components/base/ColorPopper/ColorPopper.js +72 -69
  3. package/dist/components/context/Theme/ThemeContext.d.ts.map +1 -1
  4. package/dist/components/context/Theme/ThemeContext.js +26 -20
  5. package/dist/components/hooks/useScreen.d.ts +2 -2
  6. package/dist/components/hooks/useScreen.d.ts.map +1 -1
  7. package/dist/components/hooks/useScreen.js +18 -13
  8. package/dist/components/layout/ThemePicker/ThemePicker.d.ts.map +1 -1
  9. package/dist/components/layout/ThemePicker/ThemePicker.js +47 -43
  10. package/dist/utils/helper/themeController.d.ts.map +1 -1
  11. package/dist/utils/helper/themeController.js +21 -12
  12. package/dist/xtreme-ui.css +1 -1
  13. package/package.json +1 -1
package/dist/components/base/ColorPopper/ColorPopper.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorPopper.d.ts","sourceRoot":"","sources":["../../../../src/components/base/ColorPopper/ColorPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoD,GAAG,EAAE,MAAM,OAAO,CAAC;AAyB9E,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAoB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,KAAK,EAAE,QAAQ,EAAoB,MAAM,cAAc,CAAC;AAE/D,iBAAS,gBAAgB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAAG,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,2CAwP9G;kBAxPQ,gBAAgB;;;AA0PzB,eAAO,MAAM,WAAW,EAAmC,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACxF,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KACvD,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
1
+ {"version":3,"file":"ColorPopper.d.ts","sourceRoot":"","sources":["../../../../src/components/base/ColorPopper/ColorPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoD,GAAG,EAAE,MAAM,OAAO,CAAC;AAyB9E,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAoB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,KAAK,EAAE,QAAQ,EAAoB,MAAM,cAAc,CAAC;AAE/D,iBAAS,gBAAgB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAAG,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,2CAgQ9G;kBAhQQ,gBAAgB;;;AAkQzB,eAAO,MAAM,WAAW,EAAmC,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACxF,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KACvD,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
package/dist/components/base/ColorPopper/ColorPopper.js CHANGED
@@ -1,55 +1,55 @@
1
1
  "use client";
2
- import { jsxs as i, Fragment as le, jsx as t } from "react/jsx-runtime";
3
- import { forwardRef as ne, useMemo as T, useState as C, useRef as ie, useEffect as L } from "react";
4
- import { useFloating as ae, autoUpdate as ce, shift as he, flip as de, offset as me, useTransitionStyles as pe, useInteractions as ue, useClick as fe, useDismiss as Ce } from "@floating-ui/react";
2
+ import { jsxs as i, Fragment as ne, jsx as t } from "react/jsx-runtime";
3
+ import { forwardRef as ie, useMemo as M, useState as C, useRef as ae, useEffect as L } from "react";
4
+ import { useFloating as ce, autoUpdate as de, shift as he, flip as me, offset as pe, useTransitionStyles as ue, useInteractions as fe, useClick as Ce, useDismiss as ge } from "@floating-ui/react";
5
5
  import g from "clsx";
6
- import { colord as s, getFormat as ge } from "colord";
6
+ import { colord as s, getFormat as ve } from "colord";
7
7
  import { ColorPicker as xe } from "../ColorPicker/ColorPicker.js";
8
- import { Icon as ve } from "../Icon/Icon.js";
9
- import { Textfield as ye } from "../Textfield/Textfield.js";
10
- import { useScreenType as He } from "../../hooks/useScreen.js";
11
- import { getColorLabel as Ne } from "../../../utils/helper/colorHelper.js";
12
- import { THEME_SCHEME as $e } from "../../../utils/constants/theme.js";
13
- import { mergeRefs as Pe } from "../../../utils/function/mergeRefs.js";
14
- import { Button as b } from "../Button/Button.js";
8
+ import { Icon as ye } from "../Icon/Icon.js";
9
+ import { Textfield as He } from "../Textfield/Textfield.js";
10
+ import { useScreenType as Ne } from "../../hooks/useScreen.js";
11
+ import { getColorLabel as $e } from "../../../utils/helper/colorHelper.js";
12
+ import { THEME_SCHEME as Pe } from "../../../utils/constants/theme.js";
13
+ import { mergeRefs as be } from "../../../utils/function/mergeRefs.js";
14
+ import { Button as R } from "../Button/Button.js";
15
15
  /* empty css */
16
16
  function O(j, z) {
17
17
  const {
18
- className: R,
18
+ className: T,
19
19
  popperClassName: A,
20
- input: x = "textfield",
20
+ input: v = "textfield",
21
21
  size: D = "default",
22
22
  placeholder: q = "Color Picker",
23
23
  colorHeading: m = "Pick color",
24
24
  schemeHeading: S,
25
- themeScheme: v,
25
+ themeScheme: x,
26
26
  setThemeScheme: y,
27
27
  showReset: U = !0,
28
28
  alpha: W,
29
29
  shade: _,
30
30
  swatch: H,
31
31
  hideWheel: I = !1,
32
- color: a,
32
+ color: c,
33
33
  setColor: p
34
- } = j, { isDesktop: G } = He(), r = T(() => s(a), []), u = T(() => ge(a), [a]), [N, c] = C(r.toHsv()), [h, d] = C(r.toHex()), [J, K] = C(m), $ = ie(!1), [E, P] = C(!1), { refs: k, floatingStyles: Q, context: w } = ae({
34
+ } = j, { isDesktop: G } = Ne(), r = M(() => s(c), []), u = M(() => ve(c), [c]), [N, d] = C(r.toHsv()), [a, h] = C(r.toHex()), [J, K] = C(m), $ = ae(!1), Q = a !== r.toHex(), [E, P] = C(!1), { refs: b, floatingStyles: X, context: k } = ce({
35
35
  open: E,
36
36
  onOpenChange: P,
37
37
  middleware: [
38
38
  he({ crossAxis: !0, padding: 18 }),
39
- de(),
40
- me(({ placement: e }) => e === "bottom" ? 10 : 16)
39
+ me(),
40
+ pe(({ placement: e }) => e === "bottom" ? 10 : 16)
41
41
  ],
42
- whileElementsMounted: ce
43
- }), { isMounted: X, styles: Y } = pe(w, {
42
+ whileElementsMounted: de
43
+ }), { isMounted: Y, styles: Z } = ue(k, {
44
44
  duration: 200,
45
45
  initial: ({ side: e }) => ({
46
46
  opacity: 0,
47
47
  translate: e === "bottom" ? "0px 8px" : "0px -8px"
48
48
  })
49
- }), { getReferenceProps: F, getFloatingProps: Z } = ue([
50
- fe(w),
51
- Ce(w)
52
- ]), [M, ee, B] = T(() => {
49
+ }), { getReferenceProps: F, getFloatingProps: ee } = fe([
50
+ Ce(k),
51
+ ge(k)
52
+ ]), [w, oe, B] = M(() => {
53
53
  const e = s(N), o = e.toHsl(), l = r.toHsl();
54
54
  return [
55
55
  `${Math.round(o.h)} ${Math.round(o.s)}% ${Math.round(o.l)}%`,
@@ -59,79 +59,79 @@ function O(j, z) {
59
59
  }, [r, N]), f = (e) => {
60
60
  $.current = !0, u === "rgb" ? p(e.toRgb()) : u === "hex" ? p(e.toHex()) : u === "hsl" ? p(e.toHsl()) : u === "hsv" && p(e.toHsv());
61
61
  }, V = (e) => {
62
- d(e);
62
+ h(e);
63
63
  const o = s(e);
64
- o.isValid() && (c(o.toHsv()), f(o));
65
- }, oe = (e) => {
66
- const o = s(e);
67
- c(e), d(o.toHex()), f(o);
64
+ o.isValid() && (d(o.toHsv()), f(o));
68
65
  }, te = (e) => {
69
66
  const o = s(e);
70
- c(o.toHsv()), d(o.toHex()), f(o);
71
- }, se = () => {
72
- c(r.toHsv()), d(r.toHex()), f(r);
67
+ d(e), h(o.toHex()), f(o);
68
+ }, se = (e) => {
69
+ const o = s(e);
70
+ d(o.toHsv()), h(o.toHex()), f(o);
71
+ }, re = () => {
72
+ d(r.toHsv()), h(r.toHex()), f(r);
73
73
  };
74
74
  return L(() => {
75
75
  if (!$.current) {
76
- const e = s(a);
77
- c(e.toHsv()), d(e.toHex());
76
+ const e = s(c);
77
+ d(e.toHsv()), h(e.toHex());
78
78
  }
79
79
  $.current = !1;
80
- }, [a]), L(() => {
81
- K(Ne(s(h).toHsl()) ?? m);
82
- }, [m, h]), /* @__PURE__ */ i(le, { children: [
83
- x === "button" ? /* @__PURE__ */ t(
84
- b,
80
+ }, [c]), L(() => {
81
+ K($e(s(a).toHsl()) ?? m);
82
+ }, [m, a]), /* @__PURE__ */ i(ne, { children: [
83
+ v === "button" ? /* @__PURE__ */ t(
84
+ R,
85
85
  {
86
86
  className: "xtrColorButton",
87
- ref: k.setReference,
87
+ ref: b.setReference,
88
88
  size: D,
89
89
  icon: "f53f",
90
90
  iconType: "solid",
91
91
  style: {
92
- "--themeColor": M,
92
+ "--themeColor": w,
93
93
  "--iconColor": B
94
94
  },
95
95
  onClick: () => P(!0),
96
96
  ...F()
97
97
  }
98
98
  ) : /* @__PURE__ */ t(
99
- ye,
99
+ He,
100
100
  {
101
- className: g("xtrColorInput", R),
102
- ref: k.setReference,
101
+ className: g("xtrColorInput", T),
102
+ ref: b.setReference,
103
103
  placeholder: q,
104
104
  icon: "f53f",
105
105
  iconType: "solid",
106
106
  active: E,
107
- value: h,
107
+ value: a,
108
108
  onChange: (e) => V(e.target.value),
109
109
  style: {
110
- "--colorBrandPrimary": M,
110
+ "--colorBrandPrimary": w,
111
111
  "--iconColor": B
112
112
  },
113
113
  onFocus: () => P(!0),
114
114
  ...F()
115
115
  }
116
116
  ),
117
- X && /* @__PURE__ */ i(
117
+ Y && /* @__PURE__ */ i(
118
118
  "div",
119
119
  {
120
- ref: Pe([z, k.setFloating]),
120
+ ref: be([z, b.setFloating]),
121
121
  className: g("xtrColorPopper", A),
122
- style: { ...Q, ...Y, "--colorBrandPrimary": M },
123
- ...Z(),
122
+ style: { ...X, ...Z, "--colorBrandPrimary": w },
123
+ ...ee(),
124
124
  children: [
125
- (H || !I) && /* @__PURE__ */ i("div", { className: g("header", x === "button" && "withInput"), children: [
125
+ (H || !I) && /* @__PURE__ */ i("div", { className: g("header", v === "button" && "withInput"), children: [
126
126
  /* @__PURE__ */ i("div", { className: "heading", children: [
127
127
  /* @__PURE__ */ i("div", { children: [
128
128
  /* @__PURE__ */ t("h1", { children: J }),
129
- x === "button" && /* @__PURE__ */ t(
129
+ v === "button" && /* @__PURE__ */ t(
130
130
  "input",
131
131
  {
132
132
  placeholder: "#Hex",
133
- className: g("popperInput", R),
134
- value: h,
133
+ className: g("popperInput", T),
134
+ value: a,
135
135
  autoFocus: G,
136
136
  onChange: (e) => V(e.target.value)
137
137
  }
@@ -140,29 +140,32 @@ function O(j, z) {
140
140
  /* @__PURE__ */ t("h1", { children: m })
141
141
  ] }),
142
142
  U && /* @__PURE__ */ t(
143
- ve,
143
+ ye,
144
144
  {
145
145
  code: "f1da",
146
146
  type: "solid",
147
- style: { "--colorBrandPrimary": ee },
148
- onClick: se
147
+ style: {
148
+ "--colorBrandPrimary": oe,
149
+ visibility: Q ? "visible" : "hidden"
150
+ },
151
+ onClick: re
149
152
  }
150
153
  )
151
154
  ] }),
152
155
  H && /* @__PURE__ */ t("div", { className: "swatch", children: H.map((e, o) => {
153
- const l = s(h).isEqual(e), n = s(e).toHsl(), re = `${n.h} ${n.s}% ${n.l}%`;
156
+ const l = s(a).isEqual(e), n = s(e).toHsl(), le = `${n.h} ${n.s}% ${n.l}%`;
154
157
  return /* @__PURE__ */ t(
155
- b,
158
+ R,
156
159
  {
157
160
  className: "swatchItem",
158
161
  icon: "f00c",
159
162
  iconType: "solid",
160
163
  size: "mini",
161
164
  style: {
162
- "--themeColor": re,
165
+ "--themeColor": le,
163
166
  color: l ? "white" : "transparent"
164
167
  },
165
- onClick: () => te(n)
168
+ onClick: () => se(n)
166
169
  },
167
170
  `ThemeColor-${n.h}${n.s}${n.l}-${o}`
168
171
  );
@@ -174,21 +177,21 @@ function O(j, z) {
174
177
  alpha: W,
175
178
  shade: _,
176
179
  color: N,
177
- setColor: oe
180
+ setColor: te
178
181
  }
179
182
  ),
180
183
  S && /* @__PURE__ */ i("div", { className: "themeScheme", children: [
181
184
  /* @__PURE__ */ t("div", { className: "header", children: /* @__PURE__ */ i("div", { className: "heading", children: [
182
- /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t("h1", { children: v }) }),
185
+ /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t("h1", { children: x }) }),
183
186
  /* @__PURE__ */ t("h1", { children: S })
184
187
  ] }) }),
185
- /* @__PURE__ */ t("div", { className: "schemeSelector", children: $e.map(({ name: e, icon: o }, l) => /* @__PURE__ */ t(
186
- b,
188
+ /* @__PURE__ */ t("div", { className: "schemeSelector", children: Pe.map(({ name: e, icon: o }, l) => /* @__PURE__ */ t(
189
+ R,
187
190
  {
188
191
  icon: o,
189
192
  iconType: "solid",
190
- disabled: v === e,
191
- type: v === e ? "primary" : "secondary",
193
+ disabled: x === e,
194
+ type: x === e ? "primary" : "secondary",
192
195
  onClick: () => y == null ? void 0 : y(e)
193
196
  },
194
197
  `ThemeScheme-${e}-${l}`
@@ -199,8 +202,8 @@ function O(j, z) {
199
202
  )
200
203
  ] });
201
204
  }
202
- const je = ne(O);
205
+ const ze = ie(O);
203
206
  O.displayName = "ColorPopper";
204
207
  export {
205
- je as ColorPopper
208
+ ze as ColorPopper
206
209
  };
package/dist/components/context/Theme/ThemeContext.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/components/context/Theme/ThemeContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAe,iBAAiB,EAAE,mBAAmB,EAAgB,MAAM,SAAS,CAAC;AAU5F,QAAA,MAAM,YAAY,4CAA8B,CAAC;AACjD,QAAA,MAAM,aAAa,GAAI,cAAc,mBAAmB,4CAiDvD,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC"}
1
+ {"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/components/context/Theme/ThemeContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAe,iBAAiB,EAAE,mBAAmB,EAAgB,MAAM,SAAS,CAAC;AAU5F,QAAA,MAAM,YAAY,4CAA8B,CAAC;AACjD,QAAA,MAAM,aAAa,GAAI,cAAc,mBAAmB,4CA4DvD,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC"}
package/dist/components/context/Theme/ThemeContext.js CHANGED
@@ -1,33 +1,39 @@
1
1
  "use client";
2
- import { jsx as f } from "react/jsx-runtime";
3
- import { createContext as p, useState as c, useEffect as s } from "react";
4
- import { STORAGE as m, defaultColorPreset as d } from "../../../utils/constants/theme.js";
2
+ import { jsx as p } from "react/jsx-runtime";
3
+ import { createContext as v, useState as n, useEffect as h } from "react";
4
+ import { STORAGE as m, defaultColorPreset as u } from "../../../utils/constants/theme.js";
5
5
  import "color-namer";
6
- const n = {
6
+ const l = {
7
7
  isDarkTheme: void 0,
8
8
  themeScheme: void 0,
9
9
  setThemeScheme: () => null,
10
10
  themeColor: void 0,
11
11
  setThemeColor: () => null
12
- }, g = p(n), k = ({ children: u }) => {
13
- const [t, a] = c(n.themeScheme), [e, h] = c(n.themeColor), i = () => matchMedia("(prefers-color-scheme: dark)").matches, [S, l] = c(t === "auto" ? i() : t === "dark");
14
- return s(() => {
15
- let o = localStorage.getItem(m.themeScheme), r;
12
+ }, T = v(l), $ = ({ children: S }) => {
13
+ const [o, a] = n(l.themeScheme), [r, s] = n(l.themeColor), f = () => matchMedia("(prefers-color-scheme: dark)").matches, [C, d] = n(o === "auto" ? f() : o === "dark");
14
+ return h(() => {
15
+ let e = localStorage.getItem(m.themeScheme), t;
16
16
  try {
17
- r = JSON.parse(localStorage.getItem(m.themeColor) || "null") || d;
17
+ t = JSON.parse(localStorage.getItem(m.themeColor) || "null") || u;
18
18
  } catch {
19
- r = d;
19
+ t = u;
20
20
  }
21
- o || (o = (document == null ? void 0 : document.documentElement.getAttribute(m.themeSchemeAttr)) ?? void 0), o && a(o), r && h(r);
22
- }, []), s(() => {
23
- !t || !e || (document.documentElement.setAttribute(m.themeSchemeAttr, t), document.documentElement.style.setProperty("--H", `${e == null ? void 0 : e.h}`), document.documentElement.style.setProperty("--S", `${e == null ? void 0 : e.s}%`), document.documentElement.style.setProperty("--L", `${e == null ? void 0 : e.l}%`), localStorage.setItem(m.themeScheme, t), localStorage.setItem(m.themeColor, JSON.stringify(e)));
24
- }, [t, e]), s(() => {
25
- if (t !== "auto") return l(t === "dark");
26
- const o = matchMedia("(prefers-color-scheme: dark)"), r = () => l(o.matches);
27
- return r(), o.addEventListener("change", r), () => o.removeEventListener("change", r);
28
- }, [t]), /* @__PURE__ */ f(g.Provider, { value: { isDarkTheme: S, themeScheme: t, setThemeScheme: a, themeColor: e, setThemeColor: h }, children: u });
21
+ e || (e = (document == null ? void 0 : document.documentElement.getAttribute(m.themeSchemeAttr)) ?? void 0), e && a(e), t && s(t);
22
+ }, []), h(() => {
23
+ if (!o || !r) return;
24
+ const { h: e, s: t, l: i } = r;
25
+ document.documentElement.setAttribute(m.themeSchemeAttr, o);
26
+ const g = document.getElementById(m.themeColor) || document.head.appendChild(Object.assign(document.createElement("style"), { id: m.themeColor }));
27
+ g.textContent = `:root{ --H: ${e}; --S: ${t}%; --L: ${i}% }`;
28
+ let c = document.querySelector('meta[name="theme-color"]');
29
+ c || (c = document.createElement("meta"), c.name = "theme-color", document.head.appendChild(c)), c.content = `hsl(${e},${t}%,${i}%)`, localStorage.setItem(m.themeScheme, o), localStorage.setItem(m.themeColor, JSON.stringify(r));
30
+ }, [o, r]), h(() => {
31
+ if (o !== "auto") return d(o === "dark");
32
+ const e = matchMedia("(prefers-color-scheme: dark)"), t = () => d(e.matches);
33
+ return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
34
+ }, [o]), /* @__PURE__ */ p(T.Provider, { value: { isDarkTheme: C, themeScheme: o, setThemeScheme: a, themeColor: r, setThemeColor: s }, children: S });
29
35
  };
30
36
  export {
31
- g as ThemeContext,
32
- k as ThemeProvider
37
+ T as ThemeContext,
38
+ $ as ThemeProvider
33
39
  };
package/dist/components/hooks/useScreen.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export type TScreenType = 'mobile' | 'tablet' | 'desktop';
2
2
  type Breakpoints = {
3
- mobile?: string;
4
- tablet?: string;
3
+ mobile: number;
4
+ tablet: number;
5
5
  };
6
6
  export declare const useScreenType: (customBreakpoints?: Breakpoints) => {
7
7
  screenType: TScreenType;
package/dist/components/hooks/useScreen.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useScreen.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useScreen.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE1D,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAOF,eAAO,MAAM,aAAa,GAAI,oBAAoB,WAAW;;;;;CAwB5D,CAAC"}
1
+ {"version":3,"file":"useScreen.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useScreen.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE1D,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAYF,eAAO,MAAM,aAAa,GAAI,oBAAoB,WAAW;;;;;CA4B5D,CAAC"}
package/dist/components/hooks/useScreen.js CHANGED
@@ -1,17 +1,22 @@
1
1
  "use client";
2
- import { useState as c, useEffect as l } from "react";
2
+ import { useState as c, useEffect as r } from "react";
3
3
  const b = {
4
- mobile: "(max-width: 639px)",
5
- tablet: "(min-width: 640px) and (max-width: 1023px)"
6
- }, m = (i) => {
7
- const e = { ...b, ...i }, [t, n] = c("desktop");
8
- return l(() => {
9
- const a = {
10
- mobile: window.matchMedia(e.mobile),
11
- tablet: window.matchMedia(e.tablet)
12
- }, o = () => n(a.mobile.matches ? "mobile" : a.tablet.matches ? "tablet" : "desktop");
13
- return o(), Object.values(a).forEach((s) => s.addEventListener("change", o)), () => Object.values(a).forEach((s) => s.removeEventListener("change", o));
14
- }, [e.mobile, e.tablet]), {
4
+ mobile: 640,
5
+ tablet: 1024
6
+ }, m = (e) => ({
7
+ mobile: `(max-width: ${e.mobile - 1}px)`,
8
+ tablet: `(min-width: ${e.mobile}px) and (max-width: ${e.tablet - 1}px)`
9
+ }), p = (e) => {
10
+ const l = { ...b, ...e }, s = m(l), [t, a] = c("desktop");
11
+ return r(() => {
12
+ const i = {
13
+ mobile: window.matchMedia(s.mobile),
14
+ tablet: window.matchMedia(s.tablet)
15
+ }, o = () => {
16
+ i.mobile.matches ? a("mobile") : i.tablet.matches ? a("tablet") : a("desktop");
17
+ };
18
+ return o(), Object.values(i).forEach((n) => n.addEventListener("change", o)), () => Object.values(i).forEach((n) => n.removeEventListener("change", o));
19
+ }, [s]), {
15
20
  screenType: t,
16
21
  isMobile: t === "mobile",
17
22
  isTablet: t === "tablet",
@@ -19,5 +24,5 @@ const b = {
19
24
  };
20
25
  };
21
26
  export {
22
- m as useScreenType
27
+ p as useScreenType
23
28
  };
package/dist/components/layout/ThemePicker/ThemePicker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/ThemePicker/ThemePicker.tsx"],"names":[],"mappings":"AAaA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAqC,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG/E,eAAO,MAAM,WAAW,8GAwEtB,CAAC"}
1
+ {"version":3,"file":"ThemePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/ThemePicker/ThemePicker.tsx"],"names":[],"mappings":"AAcA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAqC,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG/E,eAAO,MAAM,WAAW,8GAsFtB,CAAC"}
package/dist/components/layout/ThemePicker/ThemePicker.js CHANGED
@@ -1,77 +1,81 @@
1
1
  "use client";
2
- import { jsxs as r, jsx as o } from "react/jsx-runtime";
3
- import { forwardRef as N } from "react";
4
- import s from "clsx";
5
- import { ActionCard as v } from "../../base/ActionCard/ActionCard.js";
6
- import { Button as C } from "../../base/Button/Button.js";
7
- import { Icon as $ } from "../../base/Icon/Icon.js";
8
- import { useXTheme as S } from "../../context/useContext.js";
9
- import { isEqual as u } from "../../../utils/function/common.js";
10
- import { THEME_SCHEME as E, ThemeColorsPreset as g } from "../../../utils/constants/theme.js";
2
+ import { jsx as i, jsxs as o } from "react/jsx-runtime";
3
+ import { forwardRef as $ } from "react";
4
+ import t from "clsx";
5
+ import { ActionCard as C } from "../../base/ActionCard/ActionCard.js";
6
+ import { Button as w } from "../../base/Button/Button.js";
7
+ import { Icon as x } from "../../base/Icon/Icon.js";
8
+ import { useXTheme as g } from "../../context/useContext.js";
9
+ import { useScreenType as E } from "../../hooks/useScreen.js";
10
+ import { isEqual as k } from "../../../utils/function/common.js";
11
+ import { THEME_SCHEME as b, ThemeColorsPreset as y } from "../../../utils/constants/theme.js";
11
12
  import "color-namer";
12
- import { ThemeSelect as k } from "../ThemeSelect/ThemeSelect.js";
13
+ import { ThemeSelect as h } from "../ThemeSelect/ThemeSelect.js";
13
14
  /* empty css */
14
- import { EThemePickerGap as x, EThemePickerSize as P } from "./types.js";
15
- const y = Object.values(g), I = N((l, c) => {
16
- const { className: a, size: m = "default" } = l, { themeScheme: t, setThemeScheme: h, themeColor: n, setThemeColor: d } = S(), p = s(
15
+ import { EThemePickerGap as P, EThemePickerSize as I } from "./types.js";
16
+ const z = Object.values(y), M = $((n, m) => {
17
+ const { className: d, size: s } = n, { themeScheme: l, setThemeScheme: p, themeColor: f, setThemeColor: T } = g(), { isMobile: N, isTablet: u } = E({
18
+ mobile: 420,
19
+ tablet: 640
20
+ }), c = s ?? (u ? "mini" : "default"), a = t(
17
21
  "xtrThemePicker",
18
- a
22
+ d
19
23
  );
20
- return /* @__PURE__ */ r(
24
+ return N ? /* @__PURE__ */ i("div", { ref: m, role: "region", className: t(a, "mobile"), children: /* @__PURE__ */ i(h, { withScheme: !0, withSwatch: !0, input: "textfield" }) }) : /* @__PURE__ */ o(
21
25
  "div",
22
26
  {
23
- ref: c,
24
- className: p,
27
+ ref: m,
28
+ className: a,
25
29
  role: "region",
26
30
  style: {
27
- "--schemeSize": `${P[m]}px`,
28
- "--schemeGap": `${x[m]}px`
31
+ "--schemeSize": `${I[c]}px`,
32
+ "--schemeGap": `${P[c]}px`
29
33
  },
30
34
  children: [
31
- /* @__PURE__ */ o("div", { className: "themeSchemes", role: "radiogroup", children: E.map(({ name: e, icon: i }, f) => /* @__PURE__ */ r(
32
- v,
35
+ /* @__PURE__ */ i("div", { className: "themeSchemes", role: "radiogroup", children: b.map(({ name: e, icon: r }, v) => /* @__PURE__ */ o(
36
+ C,
33
37
  {
34
- className: s("themeSchemeItem", e, t === e && "active"),
35
- onClick: () => h(e),
38
+ className: t("themeSchemeItem", e, l === e && "active"),
39
+ onClick: () => p(e),
36
40
  children: [
37
- /* @__PURE__ */ r("div", { className: "design", children: [
38
- /* @__PURE__ */ o("div", { className: "navigation", children: Array.from({ length: 6 }, (j, T) => /* @__PURE__ */ o("div", { className: "navigationItem" }, `ThemeScheme-${e}-navigation-${T}`)) }),
39
- /* @__PURE__ */ r("div", { className: "content", children: [
40
- /* @__PURE__ */ o("div", { className: "header" }),
41
- /* @__PURE__ */ o("div", { className: "profile" })
41
+ /* @__PURE__ */ o("div", { className: "design", children: [
42
+ /* @__PURE__ */ i("div", { className: "navigation", children: Array.from({ length: 6 }, (j, S) => /* @__PURE__ */ i("div", { className: "navigationItem" }, `ThemeScheme-${e}-navigation-${S}`)) }),
43
+ /* @__PURE__ */ o("div", { className: "content", children: [
44
+ /* @__PURE__ */ i("div", { className: "header" }),
45
+ /* @__PURE__ */ i("div", { className: "profile" })
42
46
  ] })
43
47
  ] }),
44
- /* @__PURE__ */ r("div", { className: "footer", children: [
45
- /* @__PURE__ */ o($, { className: "footerIcon", code: t === e ? "f058" : i, type: "solid" }),
46
- /* @__PURE__ */ o("span", { className: "footerLabel", children: e })
48
+ /* @__PURE__ */ o("div", { className: "footer", children: [
49
+ /* @__PURE__ */ i(x, { className: "footerIcon", code: l === e ? "f058" : r, type: "solid" }),
50
+ /* @__PURE__ */ i("span", { className: "footerLabel", children: e })
47
51
  ] })
48
52
  ]
49
53
  },
50
- `ThemeScheme-${e}-${f}`
54
+ `ThemeScheme-${e}-${v}`
51
55
  )) }),
52
- /* @__PURE__ */ r("div", { className: s("themeColors", m), role: "radiogroup", children: [
53
- y.map((e, i) => /* @__PURE__ */ o(
54
- C,
56
+ /* @__PURE__ */ o("div", { className: "swatches", role: "radiogroup", children: [
57
+ z.map((e, r) => /* @__PURE__ */ i(
58
+ w,
55
59
  {
56
- className: "themeColorsItem",
57
- size: m,
60
+ className: "swatchItem",
61
+ size: s,
58
62
  icon: "f00c",
59
63
  iconType: "solid",
60
64
  style: {
61
65
  "--themeColor": `${e.h} ${e.s}% ${e.l}%`,
62
- color: u(e, n) ? "white" : "transparent"
66
+ color: k(e, f) ? "white" : "transparent"
63
67
  },
64
- onClick: () => d(e)
68
+ onClick: () => T(e)
65
69
  },
66
- `ThemeColor-${e.h}${e.s}${e.l}-${i}`
70
+ `ThemeColor-${e.h}${e.s}${e.l}-${r}`
67
71
  )),
68
- /* @__PURE__ */ o(k, { withScheme: !1 })
72
+ /* @__PURE__ */ i(h, { withScheme: !1, withSwatch: !1, input: "textfield" })
69
73
  ] })
70
74
  ]
71
75
  }
72
76
  );
73
77
  });
74
- I.displayName = "ThemePicker";
78
+ M.displayName = "ThemePicker";
75
79
  export {
76
- I as ThemePicker
80
+ M as ThemePicker
77
81
  };
package/dist/utils/helper/themeController.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"themeController.d.ts","sourceRoot":"","sources":["../../../src/utils/helper/themeController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAG7E,KAAK,WAAW,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,0CAK7B,WAAgB,WAmClB,CAAC"}
1
+ {"version":3,"file":"themeController.d.ts","sourceRoot":"","sources":["../../../src/utils/helper/themeController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAG7E,KAAK,WAAW,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,0CAK7B,WAAgB,WA4ClB,CAAC"}
package/dist/utils/helper/themeController.js CHANGED
@@ -1,21 +1,21 @@
1
- import { defaultScheme as n } from "../../components/context/Theme/types.js";
1
+ import { defaultScheme as a } from "../../components/context/Theme/types.js";
2
2
  import { defaultColorPreset as h, STORAGE as e } from "../constants/theme.js";
3
- const d = ({
3
+ const S = ({
4
4
  scheme: t,
5
- color: r,
6
- defScheme: o = n,
7
- defColor: l = h
5
+ color: o,
6
+ defScheme: r = a,
7
+ defColor: m = h
8
8
  } = {}) => {
9
- const m = t != null ? `'${t}'` : "null", s = r ? JSON.stringify(r) : "null", c = JSON.stringify(l);
9
+ const l = t != null ? `'${t}'` : "null", n = o ? JSON.stringify(o) : "null", c = JSON.stringify(m);
10
10
  return `(function() {
11
11
  try {
12
12
  let storedScheme = localStorage.getItem('${e.themeScheme}');
13
- const themeScheme = ${m} ?? storedScheme ?? '${o}';
13
+ const themeScheme = ${l} ?? storedScheme ?? '${r}';
14
14
 
15
15
  const themeColorRaw = localStorage.getItem('${e.themeColor}');
16
16
  let { h, s, l } = ${c};
17
17
 
18
- const preferredColor = ${s};
18
+ const preferredColor = ${n};
19
19
 
20
20
  if (preferredColor) {
21
21
  ({ h, s, l } = preferredColor);
@@ -29,9 +29,18 @@ const d = ({
29
29
  }
30
30
 
31
31
  document.documentElement.setAttribute('${e.themeSchemeAttr}', themeScheme);
32
- document.documentElement.style.setProperty('--H', h.toString());
33
- document.documentElement.style.setProperty('--S', s + '%');
34
- document.documentElement.style.setProperty('--L', l + '%');
32
+
33
+ const style = document.getElementById('${e.themeColor}') ||
34
+ document.head.appendChild(Object.assign(document.createElement('style'), { id: '${e.themeColor}' }));
35
+ style.textContent = \`:root{ --H: \${h}; --S: \${s}%; --L: \${l}% }\`;
36
+
37
+ let meta = document.head.querySelector('meta[name="theme-color"]');
38
+ if (!meta) {
39
+ meta = document.createElement('meta');
40
+ meta.name = 'theme-color';
41
+ document.head.appendChild(meta);
42
+ }
43
+ meta.content = \`hsl(\${h},\${s}%,\${l}%)\`;
35
44
 
36
45
  localStorage.setItem('${e.themeScheme}', themeScheme);
37
46
  localStorage.setItem('${e.themeColor}', JSON.stringify({ h, s, l }));
@@ -39,5 +48,5 @@ const d = ({
39
48
  })();`;
40
49
  };
41
50
  export {
42
- d as themeController
51
+ S as themeController
43
52
  };
package/dist/xtreme-ui.css CHANGED
@@ -1 +1 @@
1
- .react-datetime-picker{display:inline-flex;position:relative}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker *:before,.react-datetime-picker *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.react-datetime-picker--disabled{background-color:#f0f0f0;color:#6d6d6d}.react-datetime-picker__wrapper{display:flex;flex-grow:1;flex-shrink:0;border:thin solid gray}.react-datetime-picker__inputGroup{min-width:calc(16px + 3.24em + .434em);flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{padding:1px 0;white-space:pre}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{display:inline-block;font:inherit}.react-datetime-picker__inputGroup__input{min-width:.54em;height:calc(100% - 2px);position:relative;padding:1px;border:0;background:none;color:currentColor;font:inherit;box-sizing:content-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button,.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__inputGroup__amPm{font:inherit;-webkit-appearance:menulist;-moz-appearance:menulist;appearance:menulist}.react-datetime-picker__button{border:0;background:transparent;padding:4px 6px}.react-datetime-picker__button:enabled{cursor:pointer}.react-datetime-picker__button:enabled:hover .react-datetime-picker__button__icon,.react-datetime-picker__button:enabled:focus .react-datetime-picker__button__icon{stroke:#0078d7}.react-datetime-picker__button:disabled .react-datetime-picker__button__icon{stroke:#6d6d6d}.react-datetime-picker__button svg{display:inherit}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-datetime-picker__clock{width:200px;height:200px;max-width:100vw;padding:25px;background-color:#fff;border:thin solid #a0a096}.react-calendar{width:350px;max-width:100%;background:#fff;border:1px solid #a0a096;font-family:Arial,Helvetica,sans-serif;line-height:1.125em}.react-calendar--doubleView{width:700px}.react-calendar--doubleView .react-calendar__viewContainer{display:flex;margin:-.5em}.react-calendar--doubleView .react-calendar__viewContainer>*{width:50%;margin:.5em}.react-calendar,.react-calendar *,.react-calendar *:before,.react-calendar *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.react-calendar button{margin:0;border:0;outline:none}.react-calendar button:enabled:hover{cursor:pointer}.react-calendar__navigation{display:flex;height:44px;margin-bottom:1em}.react-calendar__navigation button{min-width:44px;background:none}.react-calendar__navigation button:disabled{background-color:#f0f0f0}.react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus{background-color:#e6e6e6}.react-calendar__month-view__weekdays{text-align:center;text-transform:uppercase;font:inherit;font-size:.75em;font-weight:700}.react-calendar__month-view__weekdays__weekday{padding:.5em}.react-calendar__month-view__weekNumbers .react-calendar__tile{display:flex;align-items:center;justify-content:center;font:inherit;font-size:.75em;font-weight:700}.react-calendar__month-view__days__day--weekend{color:#d10000}.react-calendar__month-view__days__day--neighboringMonth,.react-calendar__decade-view__years__year--neighboringDecade,.react-calendar__century-view__decades__decade--neighboringCentury{color:#757575}.react-calendar__year-view .react-calendar__tile,.react-calendar__decade-view .react-calendar__tile,.react-calendar__century-view .react-calendar__tile{padding:2em .5em}.react-calendar__tile{max-width:100%;padding:10px 6.6667px;background:none;text-align:center;font:inherit;font-size:.833em}.react-calendar__tile:disabled{background-color:#f0f0f0;color:#ababab}.react-calendar__month-view__days__day--neighboringMonth:disabled,.react-calendar__decade-view__years__year--neighboringDecade:disabled,.react-calendar__century-view__decades__decade--neighboringCentury:disabled{color:#cdcdcd}.react-calendar__tile:enabled:hover,.react-calendar__tile:enabled:focus{background-color:#e6e6e6}.react-calendar__tile--now{background:#ffff76}.react-calendar__tile--now:enabled:hover,.react-calendar__tile--now:enabled:focus{background:#ffffa9}.react-calendar__tile--hasActive{background:#76baff}.react-calendar__tile--hasActive:enabled:hover,.react-calendar__tile--hasActive:enabled:focus{background:#a9d4ff}.react-calendar__tile--active{background:#006edc;color:#fff}.react-calendar__tile--active:enabled:hover,.react-calendar__tile--active:enabled:focus{background:#1087ff}.react-calendar--selectRange .react-calendar__tile--hover{background-color:#e6e6e6}.react-clock{display:block;position:relative}.react-clock,.react-clock *,.react-clock *:before,.react-clock *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.react-clock__face{position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid black;border-radius:50%}.react-clock__hand{position:absolute;top:0;bottom:0;left:50%;right:50%}.react-clock__hand__body{position:absolute;background-color:#000;transform:translate(-50%)}.react-clock__mark{position:absolute;top:0;bottom:0;left:50%;right:50%}.react-clock__mark__body{position:absolute;background-color:#000;transform:translate(-50%)}.react-clock__mark__number{position:absolute;left:-40px;width:80px;text-align:center}.react-clock__second-hand__body{background-color:red}@font-face{font-family:FontAwesome;font-style:normal;font-weight:100;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-thin-100.woff2) format("woff2")}@font-face{font-family:FontAwesome;font-style:normal;font-weight:300;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-light-300.woff2) format("woff2")}@font-face{font-family:FontAwesome;font-style:normal;font-weight:400;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-regular-400.woff2) format("woff2")}@font-face{font-family:FontAwesome;font-style:normal;font-weight:900;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-solid-900.woff2) format("woff2")}@font-face{font-family:FontAwesomeDuotone;font-style:normal;font-weight:900;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-duotone-900.woff2) format("woff2")}@font-face{font-family:FontAwesomeSharp;font-style:normal;font-weight:300;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-sharp-light-300.woff2) format("woff2")}@font-face{font-family:FontAwesomeSharp;font-style:normal;font-weight:400;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-sharp-regular-400.woff2) format("woff2")}@font-face{font-family:FontAwesomeSharp;font-style:normal;font-weight:900;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-sharp-solid-900.woff2) format("woff2")}@font-face{font-family:FontAwesomeBrand;font-style:normal;font-weight:400;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-brands-400.woff2) format("woff2")}.fontAwesome{position:relative;width:var(--iconSize);height:var(--iconSize);font-size:var(--iconSize);display:flex;justify-content:center;align-items:center;font-variant:normal;text-rendering:auto;font-style:normal;-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;z-index:1;transition:all .4s var(--cubicBezierPrimary)}.fontAwesome:before{position:absolute;display:block;color:inherit;content:attr(data-content)}.fontAwesome.thin{font-family:FontAwesome;font-weight:100}.fontAwesome.light{font-family:FontAwesome;font-weight:300}.fontAwesome.regular{font-family:FontAwesome;font-weight:400}.fontAwesome.solid{font-family:FontAwesome;font-weight:900}.fontAwesome.duotone{font-family:FontAwesomeDuotone;font-weight:900}.fontAwesome.duotone:after{position:absolute;display:block;color:inherit;content:attr(data-content) attr(data-content);opacity:.3}.fontAwesome.sharpSolid{font-family:FontAwesomeSharp;font-weight:900}.fontAwesome.sharpRegular{font-family:FontAwesomeSharp;font-weight:400}.fontAwesome.sharpLight{font-family:FontAwesomeSharp;font-weight:300}.fontAwesome.brand{font-family:FontAwesomeBrand;font-weight:400}.shadowRipple{--rippleDuration: var(--animDurDefault);--rippleColor: var(--colorBrandPrimary);--rippleShadowColor: var(--colorBackgroundTertiary);--rippleSize: 30px 15px;border-radius:inherit;box-shadow:0 0 var(--rippleSize) hsl(var(--rippleColor)/0%);transition:box-shadow var(--rippleDuration) linear}.shadowRipple:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;box-shadow:0 0 0 1px var(--rippleShadowColor);transition:all var(--animDurDefault) var(--cubicBezierPrimary);z-index:-1}.shadowRipple:hover:before{box-shadow:0 0 0 3px hsl(var(--rippleColor)/50%)}.shadowRipple:active{transition:0s!important;box-shadow:0 0 hsl(var(--rippleColor)/50%)}.shadowRipple:active:before{box-shadow:0 0 0 5px hsl(var(--rippleColor)/50%)}html{scroll-behavior:smooth;background:var(--colorBackgroundPrimary);--H: 2;--S: 100%;--L: 70%;--L2: min(calc(var(--L) + 10%), 100%);--L3: min(calc(var(--L) + 20%), 100%);--colorBrandPrimary: var(--H) var(--S) var(--L);--colorBrandSecondary: var(--H) var(--S) var(--L2);--colorBrandTertiary: var(--H) var(--S) var(--L3);--colorAlertError: 4 100% 60%;--colorAlertWarning: 52 100% 50%;--colorAlertSuccess: 126 63% 49%;--colorBorderPrimary: #ABB0BB;--gradientBrand: linear-gradient(320deg, rgb(var(--colorBrandPrimary)), rgb(var(--colorBrandSecondaryRgb)));--animDurSlow: 1s;--animDurDefault: .6s;--animDurFast: .4s;--cubicBezierPrimary: cubic-bezier(.23, 1, .32, 1)}html ::selection{color:#fff;background:hsl(var(--colorBrandPrimary))}@media (prefers-color-scheme: light){html[data-theme-scheme=auto]{color-scheme:light;--colorContentPrimary: #383838;--colorContentSecondary: #666;--colorContentTertiary: #b4b4b4;--colorBackgroundPrimary: #FFF;--colorBackgroundSecondary: #DDD;--colorBackgroundTertiary: #AAA}}@media (prefers-color-scheme: dark){html[data-theme-scheme=auto]{color-scheme:dark;--colorContentPrimary: #A1A1A1;--colorContentSecondary: #636363;--colorContentTertiary: #383838;--colorBackgroundPrimary: #111;--colorBackgroundSecondary: #222;--colorBackgroundTertiary: #333}}html[data-theme-scheme=light]{color-scheme:light;--colorContentPrimary: #383838;--colorContentSecondary: #666;--colorContentTertiary: #b4b4b4;--colorBackgroundPrimary: #FFF;--colorBackgroundSecondary: #DDD;--colorBackgroundTertiary: #AAA}html[data-theme-scheme=dark]{color-scheme:dark;--colorContentPrimary: #A1A1A1;--colorContentSecondary: #636363;--colorContentTertiary: #383838;--colorBackgroundPrimary: #111;--colorBackgroundSecondary: #222;--colorBackgroundTertiary: #333}html *{font-variation-settings:"wdth" 75,"wght" 500;color:var(--colorContentPrimary);box-sizing:border-box}._actionCard_114zv_1{--cardWidth: 164px;--cardHeight: 164px;--rippleColor: var(--colorBrandPrimary);--rippleShadowColor: var(--colorBackgroundTertiary);--cardBorderRadius: calc(min(var(--cardWidth), var(--cardHeight))*.1) ;position:relative;width:var(--cardWidth);height:var(--cardHeight);border-radius:var(--cardBorderRadius);background:var(--colorBackgroundSecondary);cursor:pointer}._actionCard_114zv_1._miniSize_114zv_14{--rippleSize: 24px 12px}._actionCard_114zv_1._smallSize_114zv_17{--rippleSize: 30px 15px}._actionCard_114zv_1._mediumSize_114zv_20{--rippleSize: 48px 24px}.xtrIcon.iconButton{border-radius:9999px;padding:16px}.xtrIcon.iconButton:hover{cursor:pointer;background:hsl(var(--colorBrandPrimary)/75%);color:#fff}.xtrIcon.iconButton:active{background:hsl(var(--colorBrandPrimary))}.xtrAvatar{--avatarSize: 64px;position:relative;width:var(--avatarSize);height:var(--avatarSize);display:flex;justify-content:center;align-items:center;cursor:pointer}.xtrAvatar:before{content:"";position:absolute;width:var(--avatarSize);height:var(--avatarSize);border-radius:9999px;border:calc(2px + var(--avatarSize) / 300) solid hsl(var(--colorBrandPrimary)/75%);transition:all var(--animDurFast) var(--cubicBezierPrimary)}.xtrAvatar:after{content:"";position:absolute;width:var(--avatarSize);height:var(--avatarSize);border-radius:9999px;border:calc(4px + var(--avatarSize) / 300) solid hsl(var(--colorBrandPrimary)/100%);border-left-color:transparent;border-right-color:transparent;opacity:0;transition:all var(--animDurFast) var(--cubicBezierPrimary)}.xtrAvatar .placeholder{color:hsl(var(--colorBrandPrimary)/100%)}.xtrAvatar .image{--imageSize: calc(100% - (4px + var(--avatarSize) / 100));position:absolute;width:var(--imageSize);height:var(--imageSize);border-radius:50%;object-fit:cover;object-position:center;z-index:2;transition:all var(--animDurFast) var(--cubicBezierPrimary);animation:fadeIn .2s ease-out forwards}.xtrAvatar.loading:after{opacity:1;animation:avatarSpin 1s infinite linear}.xtrAvatar.error:before,.xtrAvatar.error:after{border-color:hsl(var(--colorAlertError))}.xtrAvatar.error .placeholder{color:hsl(var(--colorAlertError))}.xtrAvatar:hover:before,.xtrAvatar:hover:after{scale:1.1}.xtrAvatar:active:before,.xtrAvatar:active:after{scale:1}@keyframes avatarSpin{0%{transform:rotate(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}50%{transform:rotate(360deg);animation-timing-function:cubic-bezier(.215,.61,.355,1)}to{transform:rotate(720deg)}}._progressBar_192yn_1{position:relative;width:100%;height:3px;display:flex;justify-content:flex-start;align-items:center;border-radius:9999px;overflow:hidden}._progressBar_192yn_1:before{content:"";position:absolute;left:0;width:100%;height:1px;border-radius:9999px;opacity:.3;background:var(--colorBorderPrimary);transition:all .5s var(--cubicBezierPrimary)}._progressBar_192yn_1>._progress_192yn_1{position:absolute;width:100%;height:3px;display:block;background:var(--gradientBrand);border-radius:9999px;transition:all .5s var(--cubicBezierPrimary)}._progressBar_192yn_1._intermediate_192yn_31{border-radius:9999px}._progressBar_192yn_1._intermediate_192yn_31:before{height:100%;background:hsl(var(--colorBrandPrimary))}._progressBar_192yn_1._intermediate_192yn_31>._progress_192yn_1{width:150%;background-image:repeating-linear-gradient(60deg,transparent,transparent .5rem,hsl(var(--colorBrandPrimary)) .5rem,hsl(var(--colorBrandPrimary)) 1.5rem);animation:_barberPole_192yn_1 .2s infinite linear}@keyframes _barberPole_192yn_1{0%{transform:translate(-1.75rem)}to{transform:translate(0)}}._button_1n6xg_1{--themeColor: var(--colorBrandPrimary);--rippleColor: var(--themeColor);--rippleShadowColor: var(--themeColor);position:relative;display:flex;justify-content:center;align-items:center;border:none;border-radius:9999px;cursor:pointer;-webkit-user-select:none;user-select:none}._button_1n6xg_1 ._label_1n6xg_14{margin:0;text-transform:uppercase;z-index:1;color:inherit;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}._button_1n6xg_1 ._icon_1n6xg_21{color:inherit;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}._button_1n6xg_1 ._underline_1n6xg_25{position:absolute;width:100%;left:0;bottom:0}._button_1n6xg_1 ._underline_1n6xg_25>span{width:20%!important}._button_1n6xg_1:before{content:"";position:absolute;display:block;width:100%;height:100%;background:hsl(var(--themeColor));filter:contrast(1.2) brightness(.8);clip-path:circle(0% at 50% 50%);border-radius:inherit;z-index:0;opacity:0;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}._button_1n6xg_1._primaryType_1n6xg_48,._button_1n6xg_1._primaryDangerType_1n6xg_48{background:hsl(var(--themeColor));color:#fff}._button_1n6xg_1._secondaryType_1n6xg_52,._button_1n6xg_1._secondaryDangerType_1n6xg_52{background:var(--colorBackgroundSecondary);color:var(--colorContentPrimary)}._button_1n6xg_1._linkType_1n6xg_56,._button_1n6xg_1._linkDangerType_1n6xg_56{background:none;box-shadow:none!important;border-radius:unset;color:var(--colorContentPrimary);overflow:unset}._button_1n6xg_1._linkType_1n6xg_56 ._label_1n6xg_14,._button_1n6xg_1._linkDangerType_1n6xg_56 ._label_1n6xg_14{letter-spacing:unset;text-transform:unset}._button_1n6xg_1._linkType_1n6xg_56:before,._button_1n6xg_1._linkDangerType_1n6xg_56:before{display:none}._button_1n6xg_1._linkType_1n6xg_56:hover,._button_1n6xg_1._linkDangerType_1n6xg_56:hover{color:hsl(var(--themeColor))}._button_1n6xg_1._linkType_1n6xg_56:hover ._label_1n6xg_14,._button_1n6xg_1._linkDangerType_1n6xg_56:hover ._label_1n6xg_14{filter:contrast(.8) brightness(1.2)}._button_1n6xg_1._linkType_1n6xg_56:active ._label_1n6xg_14,._button_1n6xg_1._linkDangerType_1n6xg_56:active ._label_1n6xg_14{filter:contrast(1.2) brightness(.8)}._button_1n6xg_1._primaryDangerType_1n6xg_48,._button_1n6xg_1._secondaryDangerType_1n6xg_52,._button_1n6xg_1._linkDangerType_1n6xg_56{--themeColor: var(--colorAlertError)}._button_1n6xg_1._primaryDangerType_1n6xg_48 ._underline_1n6xg_25 span,._button_1n6xg_1._secondaryDangerType_1n6xg_52 ._underline_1n6xg_25 span,._button_1n6xg_1._linkDangerType_1n6xg_56 ._underline_1n6xg_25 span{background:hsl(var(--themeColor))}._button_1n6xg_1._miniSize_1n6xg_85{--rippleSize: 24px 12px;line-height:16px;padding:8px 16px;gap:8px}._button_1n6xg_1._miniSize_1n6xg_85 ._label_1n6xg_14{font-size:12px;font-variation-settings:"wdth" 75,"wght" 400;letter-spacing:2px}._button_1n6xg_1._miniSize_1n6xg_85._iconOnly_1n6xg_96{padding:0}._button_1n6xg_1._miniSize_1n6xg_85._iconOnly_1n6xg_96 ._icon_1n6xg_21{width:32px;height:32px}._button_1n6xg_1._defaultSize_1n6xg_103{--rippleSize: 30px 15px;line-height:18px;padding:10px 20px;gap:10px}._button_1n6xg_1._defaultSize_1n6xg_103 ._label_1n6xg_14{font-size:14px;font-variation-settings:"wdth" 75,"wght" 500;letter-spacing:2px}._button_1n6xg_1._defaultSize_1n6xg_103._iconOnly_1n6xg_96{padding:0}._button_1n6xg_1._defaultSize_1n6xg_103._iconOnly_1n6xg_96 ._icon_1n6xg_21{width:44px;height:44px}._button_1n6xg_1._largeSize_1n6xg_121{--rippleSize: 48px 24px;line-height:28px;padding:16px 32px;gap:14px}._button_1n6xg_1._largeSize_1n6xg_121 ._label_1n6xg_14{font-size:22px;font-variation-settings:"wdth" 75,"wght" 600;letter-spacing:4px}._button_1n6xg_1._largeSize_1n6xg_121._iconOnly_1n6xg_96{padding:0}._button_1n6xg_1._largeSize_1n6xg_121._iconOnly_1n6xg_96 ._icon_1n6xg_21{width:60px;height:60px}._button_1n6xg_1:hover{color:#fff}._button_1n6xg_1:hover ._underline_1n6xg_25 span{width:100%!important}._button_1n6xg_1:hover:before{clip-path:circle(100% at 50% 50%);opacity:1}._button_1n6xg_1._loading_1n6xg_149{--loaderColor: hsl(var(--themeColor));pointer-events:none;overflow:hidden;background:hsl(var(--themeColor)/80%)}._button_1n6xg_1._loading_1n6xg_149._secondaryType_1n6xg_52,._button_1n6xg_1._loading_1n6xg_149._secondaryDangerType_1n6xg_52{--loaderColor: var(--colorBackgroundTertiary);background:var(--colorBackgroundSecondary)}._button_1n6xg_1._loading_1n6xg_149._linkType_1n6xg_56,._button_1n6xg_1._loading_1n6xg_149._linkDangerType_1n6xg_56{background:none}._button_1n6xg_1._loading_1n6xg_149._linkType_1n6xg_56 ._underline_1n6xg_25>span,._button_1n6xg_1._loading_1n6xg_149._linkDangerType_1n6xg_56 ._underline_1n6xg_25>span{width:150%!important}._button_1n6xg_1._loading_1n6xg_149._linkType_1n6xg_56:after,._button_1n6xg_1._loading_1n6xg_149._linkDangerType_1n6xg_56:after{display:none}._button_1n6xg_1._loading_1n6xg_149:after{content:"";position:absolute;display:block;width:150%;height:100%;z-index:0;border-radius:9999px;background-image:repeating-linear-gradient(60deg,transparent,transparent .75rem,var(--loaderColor) .75rem,var(--loaderColor) 1.5rem);animation:_barberPole_1n6xg_1 .25s infinite linear}._button_1n6xg_1._loading_1n6xg_149._iconOnly_1n6xg_96{background:transparent;overflow:unset}._button_1n6xg_1._loading_1n6xg_149._iconOnly_1n6xg_96._secondaryType_1n6xg_52,._button_1n6xg_1._loading_1n6xg_149._iconOnly_1n6xg_96._secondaryDangerType_1n6xg_52{color:#fff}._button_1n6xg_1._loading_1n6xg_149._iconOnly_1n6xg_96:before{clip-path:circle(45% at 50% 50%);opacity:1}._button_1n6xg_1._loading_1n6xg_149._iconOnly_1n6xg_96:after{width:100%;background:none;border:2px solid hsl(var(--themeColor));border-top-color:transparent;border-bottom-color:transparent;animation:_spin_1n6xg_1 .25s infinite linear}._button_1n6xg_1:disabled{background:hsl(var(--themeColor)/20%);color:hsl(var(--themeColor)/75%);pointer-events:none;filter:grayscale(1)}._button_1n6xg_1:disabled._secondaryType_1n6xg_52,._button_1n6xg_1:disabled._secondaryDangerType_1n6xg_52{background:hsl(var(--themeColor)/5%)}._button_1n6xg_1:disabled._linkType_1n6xg_56{background:none}._button_1n6xg_1:disabled._linkType_1n6xg_56 ._underline_1n6xg_25:before{width:0%}._button_1n6xg_1:disabled._linkType_1n6xg_56 ._underline_1n6xg_25 span{width:0%}@keyframes _barberPole_1n6xg_1{0%{transform:translate(-1.75rem)}to{transform:translate(0)}}@keyframes _spin_1n6xg_1{0%{transform:rotate(0)}to{transform:rotate(180deg)}}._lottieWrapper_wawrm_1{width:var(--lottieSize);height:var(--lottieSize);display:flex;justify-content:center;align-items:center}._lottie_wawrm_1{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.xtrSpinner{--spinnerSize: 64px;--spinnerCubeSize: calc(var(--spinnerSize) / 2);--spinnerShadowSize: calc(var(--spinnerSize) / 20);--spinnerTopColor: 0 0% 20%;position:relative;width:var(--spinnerSize);height:var(--spinnerSize);display:flex;justify-content:center;align-items:center;flex-direction:column}.xtrSpinner.fullpage{width:100%;height:100%}.xtrSpinner .label{position:absolute;bottom:50%;font-variation-settings:"wdth" 75,"wght" 500;font-size:calc(8px + var(--spinnerSize) / 18);color:var(--colorContentPrimary);transform:translateY(calc(5px + var(--spinnerSize) / 1.6))}.xtrSpinner .spinnerWrapper{position:relative;width:var(--spinnerCubeSize);height:var(--spinnerCubeSize);margin-top:calc(var(--spinnerCubeSize) * -.1);transform-style:preserve-3d;animation:spin .8s linear infinite}.xtrSpinner .spinnerWrapper .cubeTop{position:absolute;width:var(--spinnerCubeSize);height:var(--spinnerCubeSize);background:hsl(var(--spinnerTopColor));transform:rotateX(90deg) translateZ(calc(var(--spinnerCubeSize) / 2));transform-style:preserve-3d;transition:all var(--animDurFast) var(--cubicBezierPrimary)}.xtrSpinner .spinnerWrapper .cubeTop:before{content:"";position:absolute;width:var(--spinnerCubeSize);height:var(--spinnerCubeSize);background:hsl(var(--colorBrandPrimary)/80%);transform:translateZ(calc(-1 * var(--spinnerCubeSize) * 1.2));filter:blur(var(--spinnerShadowSize));box-shadow:0 0 var(--spinnerShadowSize) hsl(var(--spinnerTopColor)),0 0 calc(var(--spinnerShadowSize) * 2) hsl(var(--colorBrandPrimary)),0 0 calc(var(--spinnerShadowSize) * 3) hsl(var(--spinnerTopColor)),0 0 calc(var(--spinnerShadowSize) * 4) hsl(var(--colorBrandPrimary))}.xtrSpinner .spinnerWrapper .cubeWrapper{position:absolute;width:100%;height:100%;transform-style:preserve-3d}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace{position:absolute;width:100%;height:100%;background:#fff;transition:all var(--animDurFast) var(--cubicBezierPrimary)}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:before{content:"";position:absolute;top:0;display:block;width:100%;height:100%;background:linear-gradient(to bottom,hsl(var(--colorBrandPrimary)/100%),hsl(var(--colorBrandPrimary)/40%))}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:after{content:"";position:absolute;top:0;display:block;width:100%;height:100%;background:linear-gradient(to bottom,hsl(var(--spinnerTopColor)/100%) 0%,hsl(var(--spinnerTopColor)/40%) 5%,hsl(var(--spinnerTopColor)/10%) 10%,transparent 100%)}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:nth-child(1){transform:rotateY(90deg) translateZ(calc(var(--spinnerCubeSize) / 2))}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--spinnerCubeSize) / 2))}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:nth-child(3){transform:rotateY(270deg) translateZ(calc(var(--spinnerCubeSize) / 2))}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:nth-child(4){transform:rotateY(360deg) translateZ(calc(var(--spinnerCubeSize) / 2))}@keyframes spin{0%{transform:rotateX(-30deg) rotateY(0)}to{transform:rotateX(-30deg) rotateY(360deg)}}.xtrTextfield{--fontSize: 14px;--primaryColor: var(--colorBackgroundSecondary);--secondaryColor: var(--colorBackgroundPrimary);position:relative;width:300px;display:flex;justify-content:center;align-items:center;border-radius:22px;box-shadow:0 0 0 1px hsl(var(--colorBrandPrimary)/50%);background:var(--primaryColor);color:hsl(var(--colorContentPrimary));transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield:before{content:"";position:absolute;display:block;width:100%;height:100%;background:hsl(var(--colorBrandPrimary));clip-path:circle(0% at 22px 50%);border-radius:9999px;z-index:0;opacity:0;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield .xtrIcon{position:absolute;left:0;width:44px;height:44px;font-size:calc(var(--fontSize) + 2px);color:hsl(var(--colorBrandPrimary)/100%);pointer-events:none;transition:all 0s}.xtrTextfield .dialCode{position:absolute;left:0;display:flex;align-items:center;gap:4px}.xtrTextfield .dialCode span{display:flex;width:44px;height:44px;background-size:cover;background-position:center;border-radius:9999px;scale:.8}.xtrTextfield .dialCode p{margin:0;font-size:var(--fontSize);transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield .input{width:100%;outline:none;border:none;background:transparent;padding:20px 22px 6px;line-height:18px;z-index:1;font-size:var(--fontSize);font-variation-settings:"wdth" 75,"wght" 400;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield .input[type=number]::-webkit-inner-spin-button,.xtrTextfield .input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.xtrTextfield .input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.xtrTextfield .placeholder{position:absolute;left:0;display:flex;align-items:center;color:var(--colorContentSecondary);translate:16px 0;transform-origin:0 50%;font-size:var(--fontSize);line-height:20px;padding:0 8px;z-index:2;pointer-events:none;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield.withIcon:before{clip-path:circle(16px at 22px 50%);opacity:.4}.xtrTextfield.withIcon .input{padding-left:48px}.xtrTextfield.withIcon .placeholder{translate:40px 0}.xtrTextfield.textarea .input{height:200px;padding:0 22px;margin:26px 0 8px;resize:none}.xtrTextfield.textarea .placeholder{top:0;translate:16px 20px}.xtrTextfield.phone .input{padding-left:74px}.xtrTextfield.phone .placeholder{translate:68px 0}.xtrTextfield.hasValue .placeholder{font-variation-settings:"wdth" 75,"wght" 700;color:hsl(var(--colorBrandPrimary)/100%);translate:16px -9px;scale:.75}.xtrTextfield.hasValue .placeholder:before{scale:1}.xtrTextfield.hasValue.withIcon .placeholder,.xtrTextfield.hasValue.phone .placeholder{translate:42px -9px}.xtrTextfield.hasValue.phone .dialCode p{margin-top:14px}.xtrTextfield.hasValue.textarea .placeholder{translate:16px 8px}.xtrTextfield:focus-within,.xtrTextfield.active{box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%);background:var(--secondaryColor)}.xtrTextfield:focus-within .placeholder,.xtrTextfield.active .placeholder{font-variation-settings:"wdth" 75,"wght" 700;color:hsl(var(--colorBrandPrimary)/100%);translate:16px -9px;scale:.75}.xtrTextfield:focus-within .placeholder:before,.xtrTextfield.active .placeholder:before{scale:1}.xtrTextfield:focus-within.withIcon .placeholder,.xtrTextfield.active.withIcon .placeholder{translate:42px -9px}.xtrTextfield:focus-within.phone .placeholder,.xtrTextfield.active.phone .placeholder{translate:42px -9px}.xtrTextfield:focus-within.phone .dialCode p,.xtrTextfield.active.phone .dialCode p{margin-top:14px}.xtrTextfield:focus-within.textarea .placeholder,.xtrTextfield.active.textarea .placeholder{translate:16px 8px}.xtrTextfield:focus-within.withIcon:before,.xtrTextfield.active.withIcon:before{clip-path:circle(18px at 22px 50%);opacity:.8}.xtrTextfield:focus-within.withIcon .xtrIcon,.xtrTextfield.active.withIcon .xtrIcon{color:#fff;font-weight:900}.xtrTextfield:focus-within .input,.xtrTextfield.active .input{cursor:text!important}.xtrDatePicker{--fontSize: 14px;--primaryColor: var(--colorBackgroundSecondary);--secondaryColor: var(--colorBackgroundPrimary);display:flex;width:fit-content;min-width:300px;justify-content:center;align-items:center;border-radius:22px;box-shadow:0 0 0 1px hsl(var(--colorBrandPrimary)/50%);background:var(--primaryColor);color:hsl(var(--colorContentPrimary));transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrDatePicker:before{content:"";position:absolute;display:block;width:100%;height:100%;background:hsl(var(--colorBrandPrimary));clip-path:circle(16px at 22px 50%);border-radius:9999px;z-index:0;opacity:.4;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrDatePicker:after{content:attr(data-testid);position:absolute;top:3px;left:40px;font-size:var(--fontSize);line-height:20px;color:hsl(var(--colorBrandPrimary)/100%);scale:.75;font-variation-settings:"wdth" 75,"wght" 700}.xtrDatePicker .react-datetime-picker__wrapper{position:relative;display:flex;padding:20px 8px 4px 48px;border:none}.xtrDatePicker .react-datetime-picker__wrapper *{line-height:18px;font-size:14px;font-variation-settings:"wdth" 75,"wght" 400}.xtrDatePicker .react-datetime-picker__wrapper .react-datetime-picker__inputGroup__input{border:none;outline:none;background:none}.xtrDatePicker .react-datetime-picker__wrapper .react-datetime-picker__calendar-button,.xtrDatePicker .react-datetime-picker__wrapper .react-datetime-picker__clock-button{position:absolute;left:0;top:0;padding:0;background:transparent;outline:none;border:none;cursor:pointer}.xtrDatePicker .react-datetime-picker__wrapper .react-datetime-picker__calendar-button>i,.xtrDatePicker .react-datetime-picker__wrapper .react-datetime-picker__clock-button>i{width:44px;height:44px;font-size:calc(var(--fontSize));color:hsl(var(--colorBrandPrimary)/100%);pointer-events:none;transition:all 0s}.xtrDatePicker .react-datetime-picker__wrapper .react-datetime-picker__clear-button{position:absolute;top:0;bottom:0;right:8px;background:transparent;outline:none;border:none;cursor:pointer}.xtrDatePicker .react-datetime-picker__calendar{position:relative;width:100%;border-radius:4px 4px 22px 22px;box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%);background:var(--colorBackgroundPrimary);padding:4px;margin-top:10px;z-index:100}.xtrDatePicker .react-datetime-picker__calendar .react-calendar{width:100%;background:transparent;border:none;-webkit-user-select:none;user-select:none}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__arrow{position:relative;aspect-ratio:1;background:none}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__arrow:before{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:9999px;z-index:-1}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__arrow:hover{color:#fff!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__arrow:hover:before{background:hsl(var(--colorBrandPrimary)/75%)}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__arrow:hover *{color:#fff!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__label{position:relative;border-radius:8px;background:none}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__label:before{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:9999px;z-index:-1}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__label:hover{color:#fff!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__label:hover:before{background:hsl(var(--colorBrandPrimary)/75%)}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__label:hover *{color:#fff!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile{position:relative;aspect-ratio:1;background:none}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile:before{content:"";position:absolute;top:1;right:1;bottom:1;left:1;border-radius:9999px}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile.react-calendar__month-view__days__day--neighboringMonth abbr{color:var(--colorContentTertiary)}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile--now:before{top:0;right:0;bottom:0;left:0;background:none;border:1px solid hsl(var(--colorBrandPrimary)/75%)}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile:before{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:9999px;z-index:-1}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile:hover{color:#fff!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile:hover:before{background:hsl(var(--colorBrandPrimary)/75%)}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile:hover *{color:#fff!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile--active:before,.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile--hasActive:before{top:0;right:0;bottom:0;left:0;background:hsl(var(--colorBrandPrimary)/100%)!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile--active abbr,.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile--hasActive abbr{color:#fff}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__year-view__months .react-calendar__tile,.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__decade-view__years .react-calendar__tile{aspect-ratio:unset;color:#fff}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__year-view__months .react-calendar__tile:before,.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__decade-view__years .react-calendar__tile:before{top:3px;right:3px;bottom:3px;left:3px;border-radius:16px}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__year-view__months .react-calendar__tile--now abbr,.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__decade-view__years .react-calendar__tile--now abbr{color:#fff}.xtrDatePicker .react-datetime-picker__clock{--clockColor: hsl(var(--colorBrandPrimary) / 100%);width:100%;height:auto;border-radius:4px 4px 22px 22px;border:none;box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%);background:var(--colorBackgroundPrimary);padding:16px;margin-top:10px;z-index:100}.xtrDatePicker .react-datetime-picker__clock .react-clock{margin:auto}.xtrDatePicker .react-datetime-picker__clock .react-clock .react-clock__face{border-color:var(--clockColor)}.xtrDatePicker .react-datetime-picker__clock .react-clock .react-clock__mark__body,.xtrDatePicker .react-datetime-picker__clock .react-clock .react-clock__hand__body{background:var(--clockColor)}.xtrDatePicker.react-datetime-picker--open{border-radius:22px 22px 4px 4px!important;box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%);background:var(--secondaryColor)}.xtrDatePicker.react-datetime-picker--open:before{clip-path:circle(18px at 22px 50%);opacity:.8}.xtrDatePicker.react-datetime-picker--open .react-datetime-picker__calendar-button>i{color:#fff!important;font-weight:900}.xtrImageEditor{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.xtrImageEditor .editorControls{position:absolute;bottom:20px;padding:8px;background-color:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;border-radius:9999px;align-items:center;gap:8px}.xtrImageEditor .editorControls .xtrIcon{padding:24px;border:1px solid rgba(255,255,255,.1333333333);color:#fffd}.xtrImageEditor .editorControls .xtrIcon:hover{border:1px solid hsl(var(--colorBrandPrimary)/75%);color:#fff}.xtrImageEditor .xtrSpinner{position:absolute}.xtrFilePicker{position:relative}.xtrFilePicker.draggable{width:500px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:2px dotted var(--colorContentTertiary);border-radius:24px;cursor:pointer;-webkit-user-select:none;user-select:none;padding:32px;transition:all .2s ease-out}.xtrFilePicker.draggable>i{margin-bottom:12px}.xtrFilePicker.draggable>h2{margin:0 0 4px;font-variation-settings:"wdth" 75,"wght" 200}.xtrFilePicker.draggable>p{margin:0;font-size:14px;font-variation-settings:"wdth" 75,"wght" 300}.xtrFilePicker.draggable:hover{background:hsl(var(--colorBrandPrimary)/10%);border-color:hsl(var(--colorBrandPrimary)/50%)}.xtrFilePicker.draggable:hover>i{color:hsl(var(--colorBrandPrimary)/100%);transform:scale(1.05)}.xtrSelectWrapper{position:relative;display:flex;width:auto;align-items:center}.xtrSelectWrapper .xtrSelect{width:auto;position:relative}.xtrSelectWrapper .xtrSelect__control{min-width:250px;width:auto;position:relative;background:var(--colorBackgroundSecondary)!important;border:none!important;padding:0 8px 0 22px!important;border-radius:22px!important;box-shadow:0 0 0 0 var(--colorBackgroundSecondary)!important;transition:all var(--animDurDefault) var(--cubicBezierPrimary)!important}.xtrSelectWrapper .xtrSelect__control:before{content:"";position:absolute;left:0;display:block;width:100%;height:100%;background:var(--colorContentSecondary);clip-path:circle(0% at 22px);border-radius:9999px;opacity:0;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrSelectWrapper .xtrSelect__value-container{padding:16px 16px 2px 0!important;font-size:14px}.xtrSelectWrapper .xtrSelect__value-container.xtrSelect__value-container--is-multi{padding:9px 0!important}.xtrSelectWrapper .xtrSelect__value-container.xtrSelect__value-container--is-multi.xtrSelect__value-container--has-value{margin-left:-10px}.xtrSelectWrapper .xtrSelect__multi-value{background:var(--colorBackgroundTertiary)!important;border-radius:9999px!important;overflow:hidden!important}.xtrSelectWrapper .xtrSelect__multi-value__label{padding:3px 6px 3px 8px!important;color:var(--colorContentPrimary)!important}.xtrSelectWrapper .xtrSelect__multi-value__remove{color:var(--colorContentPrimary)!important;padding:0 8px 0 2px!important;cursor:pointer!important}.xtrSelectWrapper .xtrSelect__multi-value__remove:hover{background:hsl(var(--colorAlertError)/50%)!important}.xtrSelectWrapper .xtrSelect__indicator-separator{display:none}.xtrSelectWrapper .xtrSelect__indicator{cursor:pointer}.xtrSelectWrapper .xtrSelect__single-value,.xtrSelectWrapper .xtrSelect__input{color:var(--colorContentPrimary)!important}.xtrSelectWrapper .xtrSelect__menu{background:var(--colorBackgroundPrimary)!important;box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%)!important;border-radius:4px 4px 22px 22px!important;margin-top:10px!important;overflow:hidden!important;animation:showDropDown .2s ease-out forwards;z-index:100}.xtrSelectWrapper .xtrSelect__menu-list{padding:0!important}.xtrSelectWrapper .xtrSelect__option{padding:12px 24px!important;cursor:pointer!important}.xtrSelectWrapper .xtrSelect__option--is-focused{color:#fff!important;background:hsl(var(--colorBrandPrimary)/50%)!important}.xtrSelectWrapper .xtrSelect__option--is-selected{color:#fff!important;background:hsl(var(--colorBrandPrimary))!important}.xtrSelectWrapper .xtrSelect--is-disabled{opacity:.5!important}.xtrSelectWrapper .xtrSelectIcon{position:absolute;left:0;width:44px;height:44px;font-size:16px;color:var(--colorContentPrimary)}.xtrSelectWrapper .placeholder{position:absolute;left:18px;font-size:14px;color:var(--colorContentSecondary);transform-origin:0 50%;pointer-events:none;margin:0;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrSelectWrapper.single .xtrSelect__placeholder{opacity:0}.xtrSelectWrapper.open .xtrSelect__control:before,.xtrSelectWrapper.withValue .xtrSelect__control:before{background:hsl(var(--colorBrandPrimary))}.xtrSelectWrapper.open .placeholder,.xtrSelectWrapper.withValue .placeholder{transform:translate(8px,-12px);scale:.75;font-variation-settings:"wdth" 75,"wght" 700;color:hsl(var(--colorBrandPrimary)/100%)}.xtrSelectWrapper.withIcon .xtrSelect__control{padding:0 8px 0 48px!important}.xtrSelectWrapper.withIcon .xtrSelect__control:before{clip-path:circle(17px at 22px);opacity:.4}.xtrSelectWrapper.withIcon .xtrSelect__control--menu-is-open:before{clip-path:circle(19px at 22px);opacity:.8}.xtrSelectWrapper.withIcon .xtrSelect__value-container.xtrSelect__value-container--is-multi.xtrSelect__value-container--has-value{padding-left:10px!important}.xtrSelectWrapper.withIcon .input{padding-left:48px}.xtrSelectWrapper.withIcon .placeholder{transform:translate(30px)}.xtrSelectWrapper.withIcon.withValue .placeholder,.xtrSelectWrapper.withIcon.open .placeholder{transform:translate(42px,-12px)}.xtrSelectWrapper.open .xtrSelect__control{border-radius:22px 22px 4px 4px!important;background:var(--colorBackgroundPrimary)!important;box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%)!important}.xtrSelectWrapper.open .xtrSelect__control:before{background:hsl(var(--colorBrandPrimary))}.xtrSelectWrapper.open .xtrSelectIcon{color:#fff;font-weight:900}.xtrSelectWrapper.miniSize{width:auto}.xtrSelectWrapper.miniSize .xtrSelect{width:auto;position:relative}.xtrSelectWrapper.miniSize .xtrSelect__control{min-width:100px;width:auto;height:32px;min-height:32px;padding:0 8px 0 16px!important}.xtrSelectWrapper.miniSize .xtrSelect__control:before{clip-path:circle(12px at 16px)}.xtrSelectWrapper.miniSize .xtrSelect__value-container{padding:12px 16px 2px 0!important;font-size:11px}.xtrSelectWrapper.miniSize .xtrSelect__menu{margin-top:6px!important;border-radius:4px 4px 16px 16px!important}.xtrSelectWrapper.miniSize .xtrSelect__option{padding:8px 24px!important;font-size:12px}.xtrSelectWrapper.miniSize .xtrSelect__indicator svg{width:16px;height:16px}.xtrSelectWrapper.miniSize .xtrSelect__menu-list{max-height:220px}.xtrSelectWrapper.miniSize .xtrSelectIcon{width:31px;height:31px;font-size:12px}.xtrSelectWrapper.miniSize .placeholder{font-variation-settings:"wdth" 75,"wght" 500;scale:1;font-size:12px;transform:translate(0)}.xtrSelectWrapper.miniSize.withIcon .xtrSelect__control{padding:0 8px 0 36px!important}.xtrSelectWrapper.miniSize.withIcon .placeholder{transform:translate(20px)}.xtrSelectWrapper.miniSize.open .xtrSelect__control{border-radius:16px 16px 4px 4px!important}.xtrSelectWrapper.miniSize.open .xtrSelect__control:before{clip-path:circle(14px at 16px)}.xtrSelectWrapper.miniSize.open:not(.noSearch) .placeholder,.xtrSelectWrapper.miniSize.withValue .placeholder{font-variation-settings:"wdth" 75,"wght" 600;scale:.75!important;transform:translate(2px,-10px)}.xtrSelectWrapper.miniSize.open:not(.noSearch).withIcon .placeholder,.xtrSelectWrapper.miniSize.withValue.withIcon .placeholder{scale:.75!important;transform:translate(28px,-10px)}.xtrSelectWrapper.largeSize{width:auto}.xtrSelectWrapper.largeSize .xtrSelect{width:auto;position:relative}.xtrSelectWrapper.largeSize .xtrSelect__control{min-width:300px;width:auto;height:60px;min-height:60px;border-radius:30px!important;padding:0 12px 0 24px!important}.xtrSelectWrapper.largeSize .xtrSelect__control:before{clip-path:circle(24px at 30px)}.xtrSelectWrapper.largeSize .xtrSelect__value-container{font-size:22px;padding:18px 16px 0 0!important}.xtrSelectWrapper.largeSize .xtrSelect__option{padding:18px 24px!important;font-size:20px}.xtrSelectWrapper.largeSize .xtrSelect__indicator svg{width:24px;height:24px}.xtrSelectWrapper.largeSize .xtrSelect__menu-list{max-height:420px}.xtrSelectWrapper.largeSize .xtrSelectIcon{width:60px;height:60px;font-size:22px}.xtrSelectWrapper.largeSize .placeholder{font-variation-settings:"wdth" 75,"wght" 500;scale:1;font-size:20px;transform:translate(8px)}.xtrSelectWrapper.largeSize.withIcon .xtrSelect__control{padding:0 8px 0 64px!important}.xtrSelectWrapper.largeSize.withIcon .placeholder{transform:translate(50px)}.xtrSelectWrapper.largeSize.open .xtrSelect__control{border-radius:30px 30px 4px 4px!important}.xtrSelectWrapper.largeSize.open .xtrSelect__control:before{clip-path:circle(26px at 30px)}.xtrSelectWrapper.largeSize.open:not(.noSearch) .placeholder,.xtrSelectWrapper.largeSize.withValue .placeholder{font-variation-settings:"wdth" 75,"wght" 600;scale:.75!important;transform:translate(12px,-18px)}.xtrSelectWrapper.largeSize.open:not(.noSearch).withIcon .placeholder,.xtrSelectWrapper.largeSize.withValue.withIcon .placeholder{scale:.75!important;transform:translate(66px,-18px)}.xtrSelectWrapper.noSearch *{cursor:pointer}@keyframes showDropDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.xtrSelectWrapper:not(.open) .xtrSelect__input{caret-color:transparent}._colorPicker_16j6k_1{display:flex;flex-direction:column}._colorPicker_16j6k_1 ._wheel_16j6k_5{cursor:crosshair;margin-bottom:24px}._colorPicker_16j6k_1 ._shade_16j6k_9,._colorPicker_16j6k_1 ._alpha_16j6k_9{height:5px!important;border-radius:9999px!important}._colorPicker_16j6k_1 ._shade_16j6k_9 div:first-child,._colorPicker_16j6k_1 ._alpha_16j6k_9 div:first-child{border-radius:9999px!important}._colorPicker_16j6k_1 ._shade_16j6k_9 div:last-child,._colorPicker_16j6k_1 ._alpha_16j6k_9 div:last-child{display:flex;align-items:center}._colorPicker_16j6k_1 ._shade_16j6k_9{margin-bottom:16px}.xtrColorButton i{color:var(--iconColor)!important;--iconSize: 15px !important}.xtrColorInput{box-shadow:0 0 0 0 transparent;transition:box-shadow 0s,background var(--animDurDefault)}.xtrColorInput:before{background:hsl(var(--colorBrandPrimary))!important;opacity:1!important;transition:all var(--animDurDefault) var(--cubicBezierPrimary),background 0s!important}.xtrColorInput i{color:var(--iconColor)!important}.xtrColorInput input{cursor:pointer;text-transform:uppercase}.xtrColorPopper{min-width:200px;box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:24px;background:var(--colorBackgroundPrimary);z-index:9999;transition:all var(--animDurDefault) var(--cubicBezierPrimary);overflow:hidden}.xtrColorPopper .themeScheme{width:100%}.xtrColorPopper .themeScheme .schemeSelector{display:flex;justify-content:center;padding-top:16px}.xtrColorPopper .themeScheme .schemeSelector button{flex-grow:1;border-radius:0;padding:0 8px;filter:unset!important}.xtrColorPopper .themeScheme .schemeSelector button:first-child{border-top-left-radius:24px;border-bottom-left-radius:24px}.xtrColorPopper .themeScheme .schemeSelector button:last-child{border-top-right-radius:24px;border-bottom-right-radius:24px}.xtrColorPopper .themeScheme .schemeSelector button i{height:38px!important}.xtrColorPopper .header{width:100%;display:flex;justify-content:space-between;align-items:center}.xtrColorPopper .header .heading{position:relative;width:100%;max-width:172px;padding-right:16px;display:flex;align-items:flex-start;height:32px}.xtrColorPopper .header .heading h1{position:absolute;width:100%;height:100%;font-size:14px;text-transform:uppercase;line-height:32px;-webkit-user-select:none;user-select:none;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variation-settings:"wdth" 75,"wght" 600;background:var(--colorBackgroundPrimary);animation:slideOutRight .4s ease 1s forwards}.xtrColorPopper .header .heading div{position:absolute;width:100%;height:100%;display:flex;flex-direction:column;animation:slideInLeft .4s ease 1s forwards}.xtrColorPopper .header .heading div h1{position:relative;animation:none}.xtrColorPopper .header .heading div .popperInput{width:100%;outline:none;border:none;background:none;letter-spacing:.8px;text-transform:uppercase;color:var(--colorContentSecondary);font-size:14px;padding:0;margin-top:-4px;z-index:2}.xtrColorPopper .header .heading div .popperInput:focus-within{color:hsl(var(--colorBrandPrimary));font-variation-settings:"wdth" 75,"wght" 800}.xtrColorPopper .header.withInput .heading{height:44px}.xtrColorPopper .header i{font-size:small;opacity:0;animation:fadeIn .4s ease 1.1s forwards}.xtrColorPopper hr{width:20%;height:4px;background:var(--colorContentPrimary);border:none;margin:0;opacity:.2;border-radius:9999px}.xtrColorPopper .swatch{width:100%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:8px 12px}.xtrColorPopper .swatch .swatchItem{aspect-ratio:1;border-radius:9999px;cursor:pointer}@keyframes slideInLeft{0%{opacity:0;z-index:1;transform:translate(50px)}to{opacity:1;z-index:2;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;z-index:2;transform:translate(0)}to{opacity:0;z-index:1;transform:translate(-50px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}._sider_11os5_1{--paddingLeft: 0px;--paddingRight: 0px;--borderRadius: 36px;--siderWidthMini: 60px;width:100%;height:100%;background:var(--colorBackgroundSecondary);padding:0 var(--paddingRight) 0 var(--paddingLeft);overflow:hidden;transition:all var(--animDurDefault) ease}._sider_11os5_1 ._leftSiderContainer_11os5_13{position:fixed;left:0;width:auto;height:100%;z-index:0;transition:transform var(--animDurDefault) var(--cubicBezierPrimary)}._sider_11os5_1 ._rightSiderContainer_11os5_21{position:fixed;right:0;width:auto;height:100%;z-index:1;transition:transform var(--animDurDefault) var(--cubicBezierPrimary)}._sider_11os5_1 ._content_11os5_29{position:relative;width:100%;height:100%;background:var(--colorBackgroundPrimary);box-shadow:0 0 50px 2px #0000003d;border-radius:0;z-index:2;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}._sider_11os5_1._miniLeftSider_11os5_39{--paddingLeft: var(--siderWidthMini)}._sider_11os5_1._miniLeftSider_11os5_39 ._content_11os5_29{border-top-left-radius:var(--borderRadius);border-bottom-left-radius:var(--borderRadius)}._sider_11os5_1._miniRightSider_11os5_46{--paddingRight: var(--siderWidthMini)}._sider_11os5_1._miniRightSider_11os5_46 ._content_11os5_29{border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius)}._sider_11os5_1._leftOpen_11os5_53{--transform: translateX(calc(32px + var(--leftSiderWidth) - var(--paddingLeft)))}._sider_11os5_1._leftOpen_11os5_53 ._rightSiderContainer_11os5_21{transform:var(--transform);pointer-events:none}._sider_11os5_1._leftOpen_11os5_53 ._content_11os5_29{border-radius:36px;transform:var(--transform);transform-origin:left center;scale:.95}._sider_11os5_1._rightOpen_11os5_66{--transform: translateX(calc((32px + var(--rightSiderWidth) - var(--paddingRight)) * -1))}._sider_11os5_1._rightOpen_11os5_66 ._leftSiderContainer_11os5_13{transform:var(--transform);pointer-events:none}._sider_11os5_1._rightOpen_11os5_66 ._content_11os5_29{border-radius:36px;transform:var(--transform);transform-origin:right center;scale:.95}@media (width <= 512px){._sider_11os5_1._miniLeftSider_11os5_39{--paddingLeft: 0px !important}._sider_11os5_1:not(._leftOpen_11os5_53) ._content_11os5_29{border-top-left-radius:0!important;border-bottom-left-radius:0!important}._sider_11os5_1._rightOpen_11os5_66{--transform: translateX(calc((32px + 100vh - var(--paddingRight)) * -1))}._sider_11os5_1._miniRightSider_11os5_46{--paddingRight: 0px !important}._sider_11os5_1:not(._rightOpen_11os5_66) ._content_11os5_29{border-top-right-radius:0!important;border-bottom-right-radius:0!important}}._siderModal_1rtdm_1{width:fit-content;height:100%;min-width:300px;display:flex;flex-direction:column}._siderModal_1rtdm_1 ._header_1rtdm_8{width:100%;height:100px;display:flex;align-items:center;padding:0 24px;gap:24px}._siderModal_1rtdm_1 ._header_1rtdm_8 ._back_1rtdm_16{border-top-left-radius:0;border-bottom-left-radius:0;display:none}._siderModal_1rtdm_1 ._header_1rtdm_8 ._icon_1rtdm_21,._siderModal_1rtdm_1 ._header_1rtdm_8 ._title_1rtdm_21{font-size:x-large;font-variation-settings:"wdth" 75,"wght" 400;color:var(--colorContentPrimary);margin:0;-webkit-user-select:none;user-select:none}._siderModal_1rtdm_1 ._footer_1rtdm_28{width:100%;height:100px;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;padding:0 24px}._siderModal_1rtdm_1 ._body_1rtdm_37{flex:1;padding:16px 0;overflow-y:auto;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}@media (width <= 512px){._siderModal_1rtdm_1 ._header_1rtdm_8{padding:0 24px 0 0}._siderModal_1rtdm_1 ._header_1rtdm_8 ._back_1rtdm_16{display:flex}._siderModal_1rtdm_1 ._body_1rtdm_37{width:100vw}}._navigation_10g7s_1{--animDurFast: .4s;--borderRadius: 30px;width:250px;height:100%;display:flex;flex-direction:column;padding:16px 0 28px}._navigation_10g7s_1 ._brand_10g7s_10{font-size:32px;padding:24px 8px;font-variation-settings:"wdth" 75,"wght" 400;text-transform:capitalize;-webkit-user-select:none;user-select:none;color:var(--colorContentPrimary);cursor:pointer}._navigation_10g7s_1 ._routeList_10g7s_19{width:100%;display:flex;flex-direction:column;flex:1;-webkit-user-select:none;user-select:none;cursor:pointer}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19{position:relative;display:flex;align-items:center;gap:2px;text-decoration:none;color:var(--colorContentPrimary);border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius);transition:all var(--animDurFast) var(--cubicBezierPrimary);-webkit-tap-highlight-color:transparent;overflow:hidden}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19:before{content:"";position:absolute;width:100%;height:100%;transform:translate(-100%);background:hsl(var(--colorBrandPrimary));z-index:0;border-radius:0;transition:all var(--animDurFast) var(--cubicBezierPrimary),transform .2s ease;overflow:hidden}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19 ._icon_10g7s_52{width:var(--siderWidthMini);height:var(--siderWidthMini);font-size:calc(var(--siderWidthMini) - 40px);transition:all var(--animDurFast) var(--cubicBezierPrimary);color:inherit}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19 ._label_10g7s_59{font-size:16px;font-variation-settings:"wdth" 75,"wght" 400;text-transform:capitalize;color:inherit;z-index:1;transition:all var(--animDurFast) var(--cubicBezierPrimary)}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19:last-of-type{margin-top:auto}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19:hover:before{transform:translate(calc(4px - 100%))}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19:active ._icon_10g7s_52{scale:.9}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19:active:before{transform:translate(calc(6px - 100%))}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19._loading_10g7s_79{--loaderColor: hsl(var(--colorBrandPrimary) / 50%);background:hsl(var(--colorBrandPrimary)/0%);pointer-events:none}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19._loading_10g7s_79:before{content:"";position:absolute;width:150%;height:100%;background:none;background-image:repeating-linear-gradient(60deg,transparent,transparent .75rem,var(--loaderColor) .75rem,var(--loaderColor) 1.5rem);z-index:2;border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius);transform:translate(0);transition:all var(--animDurFast) var(--cubicBezierPrimary),transform var(--animDurFast) ease;animation:_barberPole_10g7s_1 .18s linear infinite}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19._active_10g7s_98{color:#fff}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19._active_10g7s_98:before{border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius);transform:translate(0);transition:all var(--animDurFast) var(--cubicBezierPrimary),transform var(--animDurFast) ease}@keyframes _barberPole_10g7s_1{0%{transform:translate(-1.75rem)}to{transform:translate(0)}}.xtrThemeSelect{width:150px}.xtrThemePicker{--schemeSize: 180px;--schemeGap: 24px;--globalTertiaryColor: var(--colorBackgroundTertiary);position:relative;width:fit-content;display:flex;flex-direction:column;gap:var(--schemeGap)}.xtrThemePicker .themeSchemes{width:fit-content;display:flex;gap:calc(var(--schemeGap) / 1.2)}.xtrThemePicker .themeSchemes *{transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrThemePicker .themeSchemes .themeSchemeItem{--rippleShadowColor: var(--globalTertiaryColor);--cardBorderRadius: calc(var(--schemeGap) / 2);position:relative;width:var(--schemeSize);height:calc(var(--schemeSize) * .8);background:var(--colorBackgroundSecondary);-webkit-user-select:none;user-select:none;border:2px solid var(--colorBackgroundTertiary);cursor:pointer;transition:all var(--animDurDefault) var(--cubicBezierPrimary),box-shadow var(--animDurDefault) linear}@media (prefers-color-scheme: light){.xtrThemePicker .themeSchemes .themeSchemeItem.auto{color-scheme:light;--colorContentPrimary: #383838;--colorContentSecondary: #666;--colorContentTertiary: #b4b4b4;--colorBackgroundPrimary: #FFF;--colorBackgroundSecondary: #DDD;--colorBackgroundTertiary: #AAA}}@media (prefers-color-scheme: dark){.xtrThemePicker .themeSchemes .themeSchemeItem.auto{color-scheme:dark;--colorContentPrimary: #A1A1A1;--colorContentSecondary: #636363;--colorContentTertiary: #383838;--colorBackgroundPrimary: #111;--colorBackgroundSecondary: #222;--colorBackgroundTertiary: #333}}.xtrThemePicker .themeSchemes .themeSchemeItem.light{color-scheme:light;--colorContentPrimary: #383838;--colorContentSecondary: #666;--colorContentTertiary: #b4b4b4;--colorBackgroundPrimary: #FFF;--colorBackgroundSecondary: #DDD;--colorBackgroundTertiary: #AAA}.xtrThemePicker .themeSchemes .themeSchemeItem.dark{color-scheme:dark;--colorContentPrimary: #A1A1A1;--colorContentSecondary: #636363;--colorContentTertiary: #383838;--colorBackgroundPrimary: #111;--colorBackgroundSecondary: #222;--colorBackgroundTertiary: #333}.xtrThemePicker .themeSchemes .themeSchemeItem .design{position:relative;width:100%;height:100%;border-radius:inherit;overflow:hidden;background:var(--colorBackgroundTertiary)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .navigation{position:absolute;top:0;left:0;width:25%;height:100%;display:flex;flex-direction:column;gap:calc(var(--schemeGap) / 6);padding:calc(var(--schemeGap) / 2.4) 0;background:var(--colorBackgroundTertiary)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .navigation .navigationItem{width:100%;height:calc(var(--schemeGap) / 6);background:#000;opacity:.2}.xtrThemePicker .themeSchemes .themeSchemeItem .design .navigation .navigationItem:first-child{margin-top:10px;background:#fff}.xtrThemePicker .themeSchemes .themeSchemeItem .design .navigation .navigationItem:last-child{margin-top:auto}.xtrThemePicker .themeSchemes .themeSchemeItem .design .content{position:absolute;top:0;left:4%;width:96%;height:100%;border-top-left-radius:calc(var(--schemeGap) / 2);border-bottom-left-radius:calc(var(--schemeGap) / 2);background:var(--colorBackgroundPrimary)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .content .header{position:absolute;top:0;left:0;width:100%;height:calc(var(--schemeGap) / 2)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .content .header:before{content:"";position:absolute;top:calc(var(--schemeGap) / 3);left:calc(var(--schemeGap) / 3);display:block;width:calc(var(--schemeGap) / 4);height:calc(var(--schemeGap) / 4);border-radius:9999px;background:var(--colorBackgroundTertiary)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .content .header:after{content:"";position:absolute;top:calc(var(--schemeGap) / 3);left:calc(var(--schemeGap) / 1.2);display:block;width:calc(var(--schemeGap) * 2);height:calc(var(--schemeGap) / 4);border-radius:9999px;background:var(--colorBackgroundTertiary)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .content .profile{position:absolute;top:calc(var(--schemeGap) / 1.1);left:50%;transform:translate(-50%);width:calc(var(--schemeGap));height:calc(var(--schemeGap));border-radius:9999px;background:var(--colorBackgroundTertiary)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .content .profile:before{content:"";position:absolute;top:calc(var(--schemeGap) * 1.2);left:50%;transform:translate(-50%);display:block;width:calc(var(--schemeGap) * 1.5);height:calc(var(--schemeGap) / 8);border-radius:9999px;background:var(--colorBackgroundTertiary);transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrThemePicker .themeSchemes .themeSchemeItem .footer{position:absolute;bottom:0;width:100%;display:flex;justify-content:center;align-items:center;color:var(--colorContentPrimary);margin-bottom:calc(var(--schemeGap) / 2);gap:calc(var(--schemeGap) / 3)}.xtrThemePicker .themeSchemes .themeSchemeItem .footer .footerIcon{font-size:calc(var(--schemeGap) / 1.5);text-transform:capitalize;color:inherit}.xtrThemePicker .themeSchemes .themeSchemeItem .footer .footerLabel{font-size:calc(var(--schemeGap) / 1.6);font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase;color:inherit}.xtrThemePicker .themeSchemes .themeSchemeItem:hover .design .content{top:0;left:20%;width:80%}.xtrThemePicker .themeSchemes .themeSchemeItem.active .design .navigation,.xtrThemePicker .themeSchemes .themeSchemeItem:hover .design .navigation{background:hsl(var(--colorBrandPrimary))}.xtrThemePicker .themeSchemes .themeSchemeItem.active .design .navigation .navigationItem,.xtrThemePicker .themeSchemes .themeSchemeItem:hover .design .navigation .navigationItem{opacity:.3}.xtrThemePicker .themeSchemes .themeSchemeItem.active .design .content .header:before,.xtrThemePicker .themeSchemes .themeSchemeItem:hover .design .content .header:before{background:hsl(var(--colorBrandPrimary))}.xtrThemePicker .themeSchemes .themeSchemeItem.active .footer,.xtrThemePicker .themeSchemes .themeSchemeItem:hover .footer{color:hsl(var(--colorBrandPrimary))}.xtrThemePicker .themeColors{max-width:580px;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;gap:12px}.xtrThemePicker .themeColors .xtrThemeSelect{width:unset!important;grid-column:span 2}.xtrThemePicker .themeColors.mini{max-width:412px}.xtrThemePicker .themeColors.large{max-width:822px}.xtrThemeSwitch{display:flex}.xtrThemeSwitch button i{width:unset!important;aspect-ratio:1.2}.xtrThemeSwitch button.xtrThemeScheme{padding-right:1rem;border-top-right-radius:0;border-bottom-right-radius:0}.xtrThemeSwitch button.xtrThemeColor{padding-left:1rem;border-top-left-radius:0;border-bottom-left-radius:0}.xtrThemeSwitch .xtrSelectWrapper .xtrSelect__control{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.xtrThemeSwitch .xtrSelectWrapper.open .xtrSelect__control{border-top-left-radius:0!important}.xtrThemeSwitch.withLabel i{aspect-ratio:1}
1
+ .react-datetime-picker{display:inline-flex;position:relative}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker *:before,.react-datetime-picker *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.react-datetime-picker--disabled{background-color:#f0f0f0;color:#6d6d6d}.react-datetime-picker__wrapper{display:flex;flex-grow:1;flex-shrink:0;border:thin solid gray}.react-datetime-picker__inputGroup{min-width:calc(16px + 3.24em + .434em);flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{padding:1px 0;white-space:pre}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{display:inline-block;font:inherit}.react-datetime-picker__inputGroup__input{min-width:.54em;height:calc(100% - 2px);position:relative;padding:1px;border:0;background:none;color:currentColor;font:inherit;box-sizing:content-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button,.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__inputGroup__amPm{font:inherit;-webkit-appearance:menulist;-moz-appearance:menulist;appearance:menulist}.react-datetime-picker__button{border:0;background:transparent;padding:4px 6px}.react-datetime-picker__button:enabled{cursor:pointer}.react-datetime-picker__button:enabled:hover .react-datetime-picker__button__icon,.react-datetime-picker__button:enabled:focus .react-datetime-picker__button__icon{stroke:#0078d7}.react-datetime-picker__button:disabled .react-datetime-picker__button__icon{stroke:#6d6d6d}.react-datetime-picker__button svg{display:inherit}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-datetime-picker__clock{width:200px;height:200px;max-width:100vw;padding:25px;background-color:#fff;border:thin solid #a0a096}.react-calendar{width:350px;max-width:100%;background:#fff;border:1px solid #a0a096;font-family:Arial,Helvetica,sans-serif;line-height:1.125em}.react-calendar--doubleView{width:700px}.react-calendar--doubleView .react-calendar__viewContainer{display:flex;margin:-.5em}.react-calendar--doubleView .react-calendar__viewContainer>*{width:50%;margin:.5em}.react-calendar,.react-calendar *,.react-calendar *:before,.react-calendar *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.react-calendar button{margin:0;border:0;outline:none}.react-calendar button:enabled:hover{cursor:pointer}.react-calendar__navigation{display:flex;height:44px;margin-bottom:1em}.react-calendar__navigation button{min-width:44px;background:none}.react-calendar__navigation button:disabled{background-color:#f0f0f0}.react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus{background-color:#e6e6e6}.react-calendar__month-view__weekdays{text-align:center;text-transform:uppercase;font:inherit;font-size:.75em;font-weight:700}.react-calendar__month-view__weekdays__weekday{padding:.5em}.react-calendar__month-view__weekNumbers .react-calendar__tile{display:flex;align-items:center;justify-content:center;font:inherit;font-size:.75em;font-weight:700}.react-calendar__month-view__days__day--weekend{color:#d10000}.react-calendar__month-view__days__day--neighboringMonth,.react-calendar__decade-view__years__year--neighboringDecade,.react-calendar__century-view__decades__decade--neighboringCentury{color:#757575}.react-calendar__year-view .react-calendar__tile,.react-calendar__decade-view .react-calendar__tile,.react-calendar__century-view .react-calendar__tile{padding:2em .5em}.react-calendar__tile{max-width:100%;padding:10px 6.6667px;background:none;text-align:center;font:inherit;font-size:.833em}.react-calendar__tile:disabled{background-color:#f0f0f0;color:#ababab}.react-calendar__month-view__days__day--neighboringMonth:disabled,.react-calendar__decade-view__years__year--neighboringDecade:disabled,.react-calendar__century-view__decades__decade--neighboringCentury:disabled{color:#cdcdcd}.react-calendar__tile:enabled:hover,.react-calendar__tile:enabled:focus{background-color:#e6e6e6}.react-calendar__tile--now{background:#ffff76}.react-calendar__tile--now:enabled:hover,.react-calendar__tile--now:enabled:focus{background:#ffffa9}.react-calendar__tile--hasActive{background:#76baff}.react-calendar__tile--hasActive:enabled:hover,.react-calendar__tile--hasActive:enabled:focus{background:#a9d4ff}.react-calendar__tile--active{background:#006edc;color:#fff}.react-calendar__tile--active:enabled:hover,.react-calendar__tile--active:enabled:focus{background:#1087ff}.react-calendar--selectRange .react-calendar__tile--hover{background-color:#e6e6e6}.react-clock{display:block;position:relative}.react-clock,.react-clock *,.react-clock *:before,.react-clock *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.react-clock__face{position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid black;border-radius:50%}.react-clock__hand{position:absolute;top:0;bottom:0;left:50%;right:50%}.react-clock__hand__body{position:absolute;background-color:#000;transform:translate(-50%)}.react-clock__mark{position:absolute;top:0;bottom:0;left:50%;right:50%}.react-clock__mark__body{position:absolute;background-color:#000;transform:translate(-50%)}.react-clock__mark__number{position:absolute;left:-40px;width:80px;text-align:center}.react-clock__second-hand__body{background-color:red}@font-face{font-family:FontAwesome;font-style:normal;font-weight:100;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-thin-100.woff2) format("woff2")}@font-face{font-family:FontAwesome;font-style:normal;font-weight:300;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-light-300.woff2) format("woff2")}@font-face{font-family:FontAwesome;font-style:normal;font-weight:400;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-regular-400.woff2) format("woff2")}@font-face{font-family:FontAwesome;font-style:normal;font-weight:900;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-solid-900.woff2) format("woff2")}@font-face{font-family:FontAwesomeDuotone;font-style:normal;font-weight:900;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-duotone-900.woff2) format("woff2")}@font-face{font-family:FontAwesomeSharp;font-style:normal;font-weight:300;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-sharp-light-300.woff2) format("woff2")}@font-face{font-family:FontAwesomeSharp;font-style:normal;font-weight:400;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-sharp-regular-400.woff2) format("woff2")}@font-face{font-family:FontAwesomeSharp;font-style:normal;font-weight:900;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-sharp-solid-900.woff2) format("woff2")}@font-face{font-family:FontAwesomeBrand;font-style:normal;font-weight:400;font-display:block;src:url(https://raw.githubusercontent.com/itzzjarvis/Assets/main/fonts/fontAwesome/fa-brands-400.woff2) format("woff2")}.fontAwesome{position:relative;width:var(--iconSize);height:var(--iconSize);font-size:var(--iconSize);display:flex;justify-content:center;align-items:center;font-variant:normal;text-rendering:auto;font-style:normal;-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;z-index:1;transition:all .4s var(--cubicBezierPrimary)}.fontAwesome:before{position:absolute;display:block;color:inherit;content:attr(data-content)}.fontAwesome.thin{font-family:FontAwesome;font-weight:100}.fontAwesome.light{font-family:FontAwesome;font-weight:300}.fontAwesome.regular{font-family:FontAwesome;font-weight:400}.fontAwesome.solid{font-family:FontAwesome;font-weight:900}.fontAwesome.duotone{font-family:FontAwesomeDuotone;font-weight:900}.fontAwesome.duotone:after{position:absolute;display:block;color:inherit;content:attr(data-content) attr(data-content);opacity:.3}.fontAwesome.sharpSolid{font-family:FontAwesomeSharp;font-weight:900}.fontAwesome.sharpRegular{font-family:FontAwesomeSharp;font-weight:400}.fontAwesome.sharpLight{font-family:FontAwesomeSharp;font-weight:300}.fontAwesome.brand{font-family:FontAwesomeBrand;font-weight:400}.shadowRipple{--rippleDuration: var(--animDurDefault);--rippleColor: var(--colorBrandPrimary);--rippleShadowColor: var(--colorBackgroundTertiary);--rippleSize: 30px 15px;border-radius:inherit;box-shadow:0 0 var(--rippleSize) hsl(var(--rippleColor)/0%);transition:box-shadow var(--rippleDuration) linear}.shadowRipple:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;box-shadow:0 0 0 1px var(--rippleShadowColor);transition:all var(--animDurDefault) var(--cubicBezierPrimary);z-index:-1}.shadowRipple:hover:before{box-shadow:0 0 0 3px hsl(var(--rippleColor)/50%)}.shadowRipple:active{transition:0s!important;box-shadow:0 0 hsl(var(--rippleColor)/50%)}.shadowRipple:active:before{box-shadow:0 0 0 5px hsl(var(--rippleColor)/50%)}html{scroll-behavior:smooth;background:var(--colorBackgroundPrimary);--H: 2;--S: 100%;--L: 70%;--L2: min(calc(var(--L) + 10%), 100%);--L3: min(calc(var(--L) + 20%), 100%);--colorBrandPrimary: var(--H) var(--S) var(--L);--colorBrandSecondary: var(--H) var(--S) var(--L2);--colorBrandTertiary: var(--H) var(--S) var(--L3);--colorAlertError: 4 100% 60%;--colorAlertWarning: 52 100% 50%;--colorAlertSuccess: 126 63% 49%;--colorBorderPrimary: #ABB0BB;--gradientBrand: linear-gradient(320deg, rgb(var(--colorBrandPrimary)), rgb(var(--colorBrandSecondaryRgb)));--animDurSlow: 1s;--animDurDefault: .6s;--animDurFast: .4s;--cubicBezierPrimary: cubic-bezier(.23, 1, .32, 1)}html ::selection{color:#fff;background:hsl(var(--colorBrandPrimary))}@media (prefers-color-scheme: light){html[data-theme-scheme=auto]{color-scheme:light;--colorContentPrimary: #383838;--colorContentSecondary: #666;--colorContentTertiary: #b4b4b4;--colorBackgroundPrimary: #FFF;--colorBackgroundSecondary: #DDD;--colorBackgroundTertiary: #AAA}}@media (prefers-color-scheme: dark){html[data-theme-scheme=auto]{color-scheme:dark;--colorContentPrimary: #A1A1A1;--colorContentSecondary: #636363;--colorContentTertiary: #383838;--colorBackgroundPrimary: #111;--colorBackgroundSecondary: #222;--colorBackgroundTertiary: #333}}html[data-theme-scheme=light]{color-scheme:light;--colorContentPrimary: #383838;--colorContentSecondary: #666;--colorContentTertiary: #b4b4b4;--colorBackgroundPrimary: #FFF;--colorBackgroundSecondary: #DDD;--colorBackgroundTertiary: #AAA}html[data-theme-scheme=dark]{color-scheme:dark;--colorContentPrimary: #A1A1A1;--colorContentSecondary: #636363;--colorContentTertiary: #383838;--colorBackgroundPrimary: #111;--colorBackgroundSecondary: #222;--colorBackgroundTertiary: #333}html *{font-variation-settings:"wdth" 75,"wght" 500;color:var(--colorContentPrimary);box-sizing:border-box}._actionCard_114zv_1{--cardWidth: 164px;--cardHeight: 164px;--rippleColor: var(--colorBrandPrimary);--rippleShadowColor: var(--colorBackgroundTertiary);--cardBorderRadius: calc(min(var(--cardWidth), var(--cardHeight))*.1) ;position:relative;width:var(--cardWidth);height:var(--cardHeight);border-radius:var(--cardBorderRadius);background:var(--colorBackgroundSecondary);cursor:pointer}._actionCard_114zv_1._miniSize_114zv_14{--rippleSize: 24px 12px}._actionCard_114zv_1._smallSize_114zv_17{--rippleSize: 30px 15px}._actionCard_114zv_1._mediumSize_114zv_20{--rippleSize: 48px 24px}.xtrIcon.iconButton{border-radius:9999px;padding:16px}.xtrIcon.iconButton:hover{cursor:pointer;background:hsl(var(--colorBrandPrimary)/75%);color:#fff}.xtrIcon.iconButton:active{background:hsl(var(--colorBrandPrimary))}.xtrAvatar{--avatarSize: 64px;position:relative;width:var(--avatarSize);height:var(--avatarSize);display:flex;justify-content:center;align-items:center;cursor:pointer}.xtrAvatar:before{content:"";position:absolute;width:var(--avatarSize);height:var(--avatarSize);border-radius:9999px;border:calc(2px + var(--avatarSize) / 300) solid hsl(var(--colorBrandPrimary)/75%);transition:all var(--animDurFast) var(--cubicBezierPrimary)}.xtrAvatar:after{content:"";position:absolute;width:var(--avatarSize);height:var(--avatarSize);border-radius:9999px;border:calc(4px + var(--avatarSize) / 300) solid hsl(var(--colorBrandPrimary)/100%);border-left-color:transparent;border-right-color:transparent;opacity:0;transition:all var(--animDurFast) var(--cubicBezierPrimary)}.xtrAvatar .placeholder{color:hsl(var(--colorBrandPrimary)/100%)}.xtrAvatar .image{--imageSize: calc(100% - (4px + var(--avatarSize) / 100));position:absolute;width:var(--imageSize);height:var(--imageSize);border-radius:50%;object-fit:cover;object-position:center;z-index:2;transition:all var(--animDurFast) var(--cubicBezierPrimary);animation:fadeIn .2s ease-out forwards}.xtrAvatar.loading:after{opacity:1;animation:avatarSpin 1s infinite linear}.xtrAvatar.error:before,.xtrAvatar.error:after{border-color:hsl(var(--colorAlertError))}.xtrAvatar.error .placeholder{color:hsl(var(--colorAlertError))}.xtrAvatar:hover:before,.xtrAvatar:hover:after{scale:1.1}.xtrAvatar:active:before,.xtrAvatar:active:after{scale:1}@keyframes avatarSpin{0%{transform:rotate(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}50%{transform:rotate(360deg);animation-timing-function:cubic-bezier(.215,.61,.355,1)}to{transform:rotate(720deg)}}._progressBar_192yn_1{position:relative;width:100%;height:3px;display:flex;justify-content:flex-start;align-items:center;border-radius:9999px;overflow:hidden}._progressBar_192yn_1:before{content:"";position:absolute;left:0;width:100%;height:1px;border-radius:9999px;opacity:.3;background:var(--colorBorderPrimary);transition:all .5s var(--cubicBezierPrimary)}._progressBar_192yn_1>._progress_192yn_1{position:absolute;width:100%;height:3px;display:block;background:var(--gradientBrand);border-radius:9999px;transition:all .5s var(--cubicBezierPrimary)}._progressBar_192yn_1._intermediate_192yn_31{border-radius:9999px}._progressBar_192yn_1._intermediate_192yn_31:before{height:100%;background:hsl(var(--colorBrandPrimary))}._progressBar_192yn_1._intermediate_192yn_31>._progress_192yn_1{width:150%;background-image:repeating-linear-gradient(60deg,transparent,transparent .5rem,hsl(var(--colorBrandPrimary)) .5rem,hsl(var(--colorBrandPrimary)) 1.5rem);animation:_barberPole_192yn_1 .2s infinite linear}@keyframes _barberPole_192yn_1{0%{transform:translate(-1.75rem)}to{transform:translate(0)}}._button_1n6xg_1{--themeColor: var(--colorBrandPrimary);--rippleColor: var(--themeColor);--rippleShadowColor: var(--themeColor);position:relative;display:flex;justify-content:center;align-items:center;border:none;border-radius:9999px;cursor:pointer;-webkit-user-select:none;user-select:none}._button_1n6xg_1 ._label_1n6xg_14{margin:0;text-transform:uppercase;z-index:1;color:inherit;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}._button_1n6xg_1 ._icon_1n6xg_21{color:inherit;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}._button_1n6xg_1 ._underline_1n6xg_25{position:absolute;width:100%;left:0;bottom:0}._button_1n6xg_1 ._underline_1n6xg_25>span{width:20%!important}._button_1n6xg_1:before{content:"";position:absolute;display:block;width:100%;height:100%;background:hsl(var(--themeColor));filter:contrast(1.2) brightness(.8);clip-path:circle(0% at 50% 50%);border-radius:inherit;z-index:0;opacity:0;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}._button_1n6xg_1._primaryType_1n6xg_48,._button_1n6xg_1._primaryDangerType_1n6xg_48{background:hsl(var(--themeColor));color:#fff}._button_1n6xg_1._secondaryType_1n6xg_52,._button_1n6xg_1._secondaryDangerType_1n6xg_52{background:var(--colorBackgroundSecondary);color:var(--colorContentPrimary)}._button_1n6xg_1._linkType_1n6xg_56,._button_1n6xg_1._linkDangerType_1n6xg_56{background:none;box-shadow:none!important;border-radius:unset;color:var(--colorContentPrimary);overflow:unset}._button_1n6xg_1._linkType_1n6xg_56 ._label_1n6xg_14,._button_1n6xg_1._linkDangerType_1n6xg_56 ._label_1n6xg_14{letter-spacing:unset;text-transform:unset}._button_1n6xg_1._linkType_1n6xg_56:before,._button_1n6xg_1._linkDangerType_1n6xg_56:before{display:none}._button_1n6xg_1._linkType_1n6xg_56:hover,._button_1n6xg_1._linkDangerType_1n6xg_56:hover{color:hsl(var(--themeColor))}._button_1n6xg_1._linkType_1n6xg_56:hover ._label_1n6xg_14,._button_1n6xg_1._linkDangerType_1n6xg_56:hover ._label_1n6xg_14{filter:contrast(.8) brightness(1.2)}._button_1n6xg_1._linkType_1n6xg_56:active ._label_1n6xg_14,._button_1n6xg_1._linkDangerType_1n6xg_56:active ._label_1n6xg_14{filter:contrast(1.2) brightness(.8)}._button_1n6xg_1._primaryDangerType_1n6xg_48,._button_1n6xg_1._secondaryDangerType_1n6xg_52,._button_1n6xg_1._linkDangerType_1n6xg_56{--themeColor: var(--colorAlertError)}._button_1n6xg_1._primaryDangerType_1n6xg_48 ._underline_1n6xg_25 span,._button_1n6xg_1._secondaryDangerType_1n6xg_52 ._underline_1n6xg_25 span,._button_1n6xg_1._linkDangerType_1n6xg_56 ._underline_1n6xg_25 span{background:hsl(var(--themeColor))}._button_1n6xg_1._miniSize_1n6xg_85{--rippleSize: 24px 12px;line-height:16px;padding:8px 16px;gap:8px}._button_1n6xg_1._miniSize_1n6xg_85 ._label_1n6xg_14{font-size:12px;font-variation-settings:"wdth" 75,"wght" 400;letter-spacing:2px}._button_1n6xg_1._miniSize_1n6xg_85._iconOnly_1n6xg_96{padding:0}._button_1n6xg_1._miniSize_1n6xg_85._iconOnly_1n6xg_96 ._icon_1n6xg_21{width:32px;height:32px}._button_1n6xg_1._defaultSize_1n6xg_103{--rippleSize: 30px 15px;line-height:18px;padding:10px 20px;gap:10px}._button_1n6xg_1._defaultSize_1n6xg_103 ._label_1n6xg_14{font-size:14px;font-variation-settings:"wdth" 75,"wght" 500;letter-spacing:2px}._button_1n6xg_1._defaultSize_1n6xg_103._iconOnly_1n6xg_96{padding:0}._button_1n6xg_1._defaultSize_1n6xg_103._iconOnly_1n6xg_96 ._icon_1n6xg_21{width:44px;height:44px}._button_1n6xg_1._largeSize_1n6xg_121{--rippleSize: 48px 24px;line-height:28px;padding:16px 32px;gap:14px}._button_1n6xg_1._largeSize_1n6xg_121 ._label_1n6xg_14{font-size:22px;font-variation-settings:"wdth" 75,"wght" 600;letter-spacing:4px}._button_1n6xg_1._largeSize_1n6xg_121._iconOnly_1n6xg_96{padding:0}._button_1n6xg_1._largeSize_1n6xg_121._iconOnly_1n6xg_96 ._icon_1n6xg_21{width:60px;height:60px}._button_1n6xg_1:hover{color:#fff}._button_1n6xg_1:hover ._underline_1n6xg_25 span{width:100%!important}._button_1n6xg_1:hover:before{clip-path:circle(100% at 50% 50%);opacity:1}._button_1n6xg_1._loading_1n6xg_149{--loaderColor: hsl(var(--themeColor));pointer-events:none;overflow:hidden;background:hsl(var(--themeColor)/80%)}._button_1n6xg_1._loading_1n6xg_149._secondaryType_1n6xg_52,._button_1n6xg_1._loading_1n6xg_149._secondaryDangerType_1n6xg_52{--loaderColor: var(--colorBackgroundTertiary);background:var(--colorBackgroundSecondary)}._button_1n6xg_1._loading_1n6xg_149._linkType_1n6xg_56,._button_1n6xg_1._loading_1n6xg_149._linkDangerType_1n6xg_56{background:none}._button_1n6xg_1._loading_1n6xg_149._linkType_1n6xg_56 ._underline_1n6xg_25>span,._button_1n6xg_1._loading_1n6xg_149._linkDangerType_1n6xg_56 ._underline_1n6xg_25>span{width:150%!important}._button_1n6xg_1._loading_1n6xg_149._linkType_1n6xg_56:after,._button_1n6xg_1._loading_1n6xg_149._linkDangerType_1n6xg_56:after{display:none}._button_1n6xg_1._loading_1n6xg_149:after{content:"";position:absolute;display:block;width:150%;height:100%;z-index:0;border-radius:9999px;background-image:repeating-linear-gradient(60deg,transparent,transparent .75rem,var(--loaderColor) .75rem,var(--loaderColor) 1.5rem);animation:_barberPole_1n6xg_1 .25s infinite linear}._button_1n6xg_1._loading_1n6xg_149._iconOnly_1n6xg_96{background:transparent;overflow:unset}._button_1n6xg_1._loading_1n6xg_149._iconOnly_1n6xg_96._secondaryType_1n6xg_52,._button_1n6xg_1._loading_1n6xg_149._iconOnly_1n6xg_96._secondaryDangerType_1n6xg_52{color:#fff}._button_1n6xg_1._loading_1n6xg_149._iconOnly_1n6xg_96:before{clip-path:circle(45% at 50% 50%);opacity:1}._button_1n6xg_1._loading_1n6xg_149._iconOnly_1n6xg_96:after{width:100%;background:none;border:2px solid hsl(var(--themeColor));border-top-color:transparent;border-bottom-color:transparent;animation:_spin_1n6xg_1 .25s infinite linear}._button_1n6xg_1:disabled{background:hsl(var(--themeColor)/20%);color:hsl(var(--themeColor)/75%);pointer-events:none;filter:grayscale(1)}._button_1n6xg_1:disabled._secondaryType_1n6xg_52,._button_1n6xg_1:disabled._secondaryDangerType_1n6xg_52{background:hsl(var(--themeColor)/5%)}._button_1n6xg_1:disabled._linkType_1n6xg_56{background:none}._button_1n6xg_1:disabled._linkType_1n6xg_56 ._underline_1n6xg_25:before{width:0%}._button_1n6xg_1:disabled._linkType_1n6xg_56 ._underline_1n6xg_25 span{width:0%}@keyframes _barberPole_1n6xg_1{0%{transform:translate(-1.75rem)}to{transform:translate(0)}}@keyframes _spin_1n6xg_1{0%{transform:rotate(0)}to{transform:rotate(180deg)}}._lottieWrapper_wawrm_1{width:var(--lottieSize);height:var(--lottieSize);display:flex;justify-content:center;align-items:center}._lottie_wawrm_1{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.xtrSpinner{--spinnerSize: 64px;--spinnerCubeSize: calc(var(--spinnerSize) / 2);--spinnerShadowSize: calc(var(--spinnerSize) / 20);--spinnerTopColor: 0 0% 20%;position:relative;width:var(--spinnerSize);height:var(--spinnerSize);display:flex;justify-content:center;align-items:center;flex-direction:column}.xtrSpinner.fullpage{width:100%;height:100%}.xtrSpinner .label{position:absolute;bottom:50%;font-variation-settings:"wdth" 75,"wght" 500;font-size:calc(8px + var(--spinnerSize) / 18);color:var(--colorContentPrimary);transform:translateY(calc(5px + var(--spinnerSize) / 1.6))}.xtrSpinner .spinnerWrapper{position:relative;width:var(--spinnerCubeSize);height:var(--spinnerCubeSize);margin-top:calc(var(--spinnerCubeSize) * -.1);transform-style:preserve-3d;animation:spin .8s linear infinite}.xtrSpinner .spinnerWrapper .cubeTop{position:absolute;width:var(--spinnerCubeSize);height:var(--spinnerCubeSize);background:hsl(var(--spinnerTopColor));transform:rotateX(90deg) translateZ(calc(var(--spinnerCubeSize) / 2));transform-style:preserve-3d;transition:all var(--animDurFast) var(--cubicBezierPrimary)}.xtrSpinner .spinnerWrapper .cubeTop:before{content:"";position:absolute;width:var(--spinnerCubeSize);height:var(--spinnerCubeSize);background:hsl(var(--colorBrandPrimary)/80%);transform:translateZ(calc(-1 * var(--spinnerCubeSize) * 1.2));filter:blur(var(--spinnerShadowSize));box-shadow:0 0 var(--spinnerShadowSize) hsl(var(--spinnerTopColor)),0 0 calc(var(--spinnerShadowSize) * 2) hsl(var(--colorBrandPrimary)),0 0 calc(var(--spinnerShadowSize) * 3) hsl(var(--spinnerTopColor)),0 0 calc(var(--spinnerShadowSize) * 4) hsl(var(--colorBrandPrimary))}.xtrSpinner .spinnerWrapper .cubeWrapper{position:absolute;width:100%;height:100%;transform-style:preserve-3d}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace{position:absolute;width:100%;height:100%;background:#fff;transition:all var(--animDurFast) var(--cubicBezierPrimary)}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:before{content:"";position:absolute;top:0;display:block;width:100%;height:100%;background:linear-gradient(to bottom,hsl(var(--colorBrandPrimary)/100%),hsl(var(--colorBrandPrimary)/40%))}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:after{content:"";position:absolute;top:0;display:block;width:100%;height:100%;background:linear-gradient(to bottom,hsl(var(--spinnerTopColor)/100%) 0%,hsl(var(--spinnerTopColor)/40%) 5%,hsl(var(--spinnerTopColor)/10%) 10%,transparent 100%)}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:nth-child(1){transform:rotateY(90deg) translateZ(calc(var(--spinnerCubeSize) / 2))}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--spinnerCubeSize) / 2))}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:nth-child(3){transform:rotateY(270deg) translateZ(calc(var(--spinnerCubeSize) / 2))}.xtrSpinner .spinnerWrapper .cubeWrapper .cubeFace:nth-child(4){transform:rotateY(360deg) translateZ(calc(var(--spinnerCubeSize) / 2))}@keyframes spin{0%{transform:rotateX(-30deg) rotateY(0)}to{transform:rotateX(-30deg) rotateY(360deg)}}.xtrTextfield{--fontSize: 14px;--primaryColor: var(--colorBackgroundSecondary);--secondaryColor: var(--colorBackgroundPrimary);position:relative;width:300px;display:flex;justify-content:center;align-items:center;border-radius:22px;box-shadow:0 0 0 1px hsl(var(--colorBrandPrimary)/50%);background:var(--primaryColor);color:hsl(var(--colorContentPrimary));transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield:before{content:"";position:absolute;display:block;width:100%;height:100%;background:hsl(var(--colorBrandPrimary));clip-path:circle(0% at 22px 50%);border-radius:9999px;z-index:0;opacity:0;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield .xtrIcon{position:absolute;left:0;width:44px;height:44px;font-size:calc(var(--fontSize) + 2px);color:hsl(var(--colorBrandPrimary)/100%);pointer-events:none;transition:all 0s}.xtrTextfield .dialCode{position:absolute;left:0;display:flex;align-items:center;gap:4px}.xtrTextfield .dialCode span{display:flex;width:44px;height:44px;background-size:cover;background-position:center;border-radius:9999px;scale:.8}.xtrTextfield .dialCode p{margin:0;font-size:var(--fontSize);transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield .input{width:100%;outline:none;border:none;background:transparent;padding:20px 22px 6px;line-height:18px;z-index:1;font-size:var(--fontSize);font-variation-settings:"wdth" 75,"wght" 400;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield .input[type=number]::-webkit-inner-spin-button,.xtrTextfield .input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.xtrTextfield .input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.xtrTextfield .placeholder{position:absolute;left:0;display:flex;align-items:center;color:var(--colorContentSecondary);translate:16px 0;transform-origin:0 50%;font-size:var(--fontSize);line-height:20px;padding:0 8px;z-index:2;pointer-events:none;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield.withIcon:before{clip-path:circle(16px at 22px 50%);opacity:.4}.xtrTextfield.withIcon .input{padding-left:48px}.xtrTextfield.withIcon .placeholder{translate:40px 0}.xtrTextfield.textarea .input{height:200px;padding:0 22px;margin:26px 0 8px;resize:none}.xtrTextfield.textarea .placeholder{top:0;translate:16px 20px}.xtrTextfield.phone .input{padding-left:74px}.xtrTextfield.phone .placeholder{translate:68px 0}.xtrTextfield.hasValue .placeholder{font-variation-settings:"wdth" 75,"wght" 700;color:hsl(var(--colorBrandPrimary)/100%);translate:16px -9px;scale:.75}.xtrTextfield.hasValue .placeholder:before{scale:1}.xtrTextfield.hasValue.withIcon .placeholder,.xtrTextfield.hasValue.phone .placeholder{translate:42px -9px}.xtrTextfield.hasValue.phone .dialCode p{margin-top:14px}.xtrTextfield.hasValue.textarea .placeholder{translate:16px 8px}.xtrTextfield:focus-within,.xtrTextfield.active{box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%);background:var(--secondaryColor)}.xtrTextfield:focus-within .placeholder,.xtrTextfield.active .placeholder{font-variation-settings:"wdth" 75,"wght" 700;color:hsl(var(--colorBrandPrimary)/100%);translate:16px -9px;scale:.75}.xtrTextfield:focus-within .placeholder:before,.xtrTextfield.active .placeholder:before{scale:1}.xtrTextfield:focus-within.withIcon .placeholder,.xtrTextfield.active.withIcon .placeholder{translate:42px -9px}.xtrTextfield:focus-within.phone .placeholder,.xtrTextfield.active.phone .placeholder{translate:42px -9px}.xtrTextfield:focus-within.phone .dialCode p,.xtrTextfield.active.phone .dialCode p{margin-top:14px}.xtrTextfield:focus-within.textarea .placeholder,.xtrTextfield.active.textarea .placeholder{translate:16px 8px}.xtrTextfield:focus-within.withIcon:before,.xtrTextfield.active.withIcon:before{clip-path:circle(18px at 22px 50%);opacity:.8}.xtrTextfield:focus-within.withIcon .xtrIcon,.xtrTextfield.active.withIcon .xtrIcon{color:#fff;font-weight:900}.xtrTextfield:focus-within .input,.xtrTextfield.active .input{cursor:text!important}.xtrDatePicker{--fontSize: 14px;--primaryColor: var(--colorBackgroundSecondary);--secondaryColor: var(--colorBackgroundPrimary);display:flex;width:fit-content;min-width:300px;justify-content:center;align-items:center;border-radius:22px;box-shadow:0 0 0 1px hsl(var(--colorBrandPrimary)/50%);background:var(--primaryColor);color:hsl(var(--colorContentPrimary));transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrDatePicker:before{content:"";position:absolute;display:block;width:100%;height:100%;background:hsl(var(--colorBrandPrimary));clip-path:circle(16px at 22px 50%);border-radius:9999px;z-index:0;opacity:.4;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrDatePicker:after{content:attr(data-testid);position:absolute;top:3px;left:40px;font-size:var(--fontSize);line-height:20px;color:hsl(var(--colorBrandPrimary)/100%);scale:.75;font-variation-settings:"wdth" 75,"wght" 700}.xtrDatePicker .react-datetime-picker__wrapper{position:relative;display:flex;padding:20px 8px 4px 48px;border:none}.xtrDatePicker .react-datetime-picker__wrapper *{line-height:18px;font-size:14px;font-variation-settings:"wdth" 75,"wght" 400}.xtrDatePicker .react-datetime-picker__wrapper .react-datetime-picker__inputGroup__input{border:none;outline:none;background:none}.xtrDatePicker .react-datetime-picker__wrapper .react-datetime-picker__calendar-button,.xtrDatePicker .react-datetime-picker__wrapper .react-datetime-picker__clock-button{position:absolute;left:0;top:0;padding:0;background:transparent;outline:none;border:none;cursor:pointer}.xtrDatePicker .react-datetime-picker__wrapper .react-datetime-picker__calendar-button>i,.xtrDatePicker .react-datetime-picker__wrapper .react-datetime-picker__clock-button>i{width:44px;height:44px;font-size:calc(var(--fontSize));color:hsl(var(--colorBrandPrimary)/100%);pointer-events:none;transition:all 0s}.xtrDatePicker .react-datetime-picker__wrapper .react-datetime-picker__clear-button{position:absolute;top:0;bottom:0;right:8px;background:transparent;outline:none;border:none;cursor:pointer}.xtrDatePicker .react-datetime-picker__calendar{position:relative;width:100%;border-radius:4px 4px 22px 22px;box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%);background:var(--colorBackgroundPrimary);padding:4px;margin-top:10px;z-index:100}.xtrDatePicker .react-datetime-picker__calendar .react-calendar{width:100%;background:transparent;border:none;-webkit-user-select:none;user-select:none}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__arrow{position:relative;aspect-ratio:1;background:none}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__arrow:before{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:9999px;z-index:-1}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__arrow:hover{color:#fff!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__arrow:hover:before{background:hsl(var(--colorBrandPrimary)/75%)}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__arrow:hover *{color:#fff!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__label{position:relative;border-radius:8px;background:none}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__label:before{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:9999px;z-index:-1}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__label:hover{color:#fff!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__label:hover:before{background:hsl(var(--colorBrandPrimary)/75%)}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__navigation__label:hover *{color:#fff!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile{position:relative;aspect-ratio:1;background:none}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile:before{content:"";position:absolute;top:1;right:1;bottom:1;left:1;border-radius:9999px}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile.react-calendar__month-view__days__day--neighboringMonth abbr{color:var(--colorContentTertiary)}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile--now:before{top:0;right:0;bottom:0;left:0;background:none;border:1px solid hsl(var(--colorBrandPrimary)/75%)}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile:before{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:9999px;z-index:-1}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile:hover{color:#fff!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile:hover:before{background:hsl(var(--colorBrandPrimary)/75%)}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile:hover *{color:#fff!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile--active:before,.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile--hasActive:before{top:0;right:0;bottom:0;left:0;background:hsl(var(--colorBrandPrimary)/100%)!important}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile--active abbr,.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__tile--hasActive abbr{color:#fff}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__year-view__months .react-calendar__tile,.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__decade-view__years .react-calendar__tile{aspect-ratio:unset;color:#fff}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__year-view__months .react-calendar__tile:before,.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__decade-view__years .react-calendar__tile:before{top:3px;right:3px;bottom:3px;left:3px;border-radius:16px}.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__year-view__months .react-calendar__tile--now abbr,.xtrDatePicker .react-datetime-picker__calendar .react-calendar .react-calendar__decade-view__years .react-calendar__tile--now abbr{color:#fff}.xtrDatePicker .react-datetime-picker__clock{--clockColor: hsl(var(--colorBrandPrimary) / 100%);width:100%;height:auto;border-radius:4px 4px 22px 22px;border:none;box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%);background:var(--colorBackgroundPrimary);padding:16px;margin-top:10px;z-index:100}.xtrDatePicker .react-datetime-picker__clock .react-clock{margin:auto}.xtrDatePicker .react-datetime-picker__clock .react-clock .react-clock__face{border-color:var(--clockColor)}.xtrDatePicker .react-datetime-picker__clock .react-clock .react-clock__mark__body,.xtrDatePicker .react-datetime-picker__clock .react-clock .react-clock__hand__body{background:var(--clockColor)}.xtrDatePicker.react-datetime-picker--open{border-radius:22px 22px 4px 4px!important;box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%);background:var(--secondaryColor)}.xtrDatePicker.react-datetime-picker--open:before{clip-path:circle(18px at 22px 50%);opacity:.8}.xtrDatePicker.react-datetime-picker--open .react-datetime-picker__calendar-button>i{color:#fff!important;font-weight:900}.xtrImageEditor{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.xtrImageEditor .editorControls{position:absolute;bottom:20px;padding:8px;background-color:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;border-radius:9999px;align-items:center;gap:8px}.xtrImageEditor .editorControls .xtrIcon{padding:24px;border:1px solid rgba(255,255,255,.1333333333);color:#fffd}.xtrImageEditor .editorControls .xtrIcon:hover{border:1px solid hsl(var(--colorBrandPrimary)/75%);color:#fff}.xtrImageEditor .xtrSpinner{position:absolute}.xtrFilePicker{position:relative}.xtrFilePicker.draggable{width:500px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:2px dotted var(--colorContentTertiary);border-radius:24px;cursor:pointer;-webkit-user-select:none;user-select:none;padding:32px;transition:all .2s ease-out}.xtrFilePicker.draggable>i{margin-bottom:12px}.xtrFilePicker.draggable>h2{margin:0 0 4px;font-variation-settings:"wdth" 75,"wght" 200}.xtrFilePicker.draggable>p{margin:0;font-size:14px;font-variation-settings:"wdth" 75,"wght" 300}.xtrFilePicker.draggable:hover{background:hsl(var(--colorBrandPrimary)/10%);border-color:hsl(var(--colorBrandPrimary)/50%)}.xtrFilePicker.draggable:hover>i{color:hsl(var(--colorBrandPrimary)/100%);transform:scale(1.05)}.xtrSelectWrapper{position:relative;display:flex;width:auto;align-items:center}.xtrSelectWrapper .xtrSelect{width:auto;position:relative}.xtrSelectWrapper .xtrSelect__control{min-width:250px;width:auto;position:relative;background:var(--colorBackgroundSecondary)!important;border:none!important;padding:0 8px 0 22px!important;border-radius:22px!important;box-shadow:0 0 0 0 var(--colorBackgroundSecondary)!important;transition:all var(--animDurDefault) var(--cubicBezierPrimary)!important}.xtrSelectWrapper .xtrSelect__control:before{content:"";position:absolute;left:0;display:block;width:100%;height:100%;background:var(--colorContentSecondary);clip-path:circle(0% at 22px);border-radius:9999px;opacity:0;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrSelectWrapper .xtrSelect__value-container{padding:16px 16px 2px 0!important;font-size:14px}.xtrSelectWrapper .xtrSelect__value-container.xtrSelect__value-container--is-multi{padding:9px 0!important}.xtrSelectWrapper .xtrSelect__value-container.xtrSelect__value-container--is-multi.xtrSelect__value-container--has-value{margin-left:-10px}.xtrSelectWrapper .xtrSelect__multi-value{background:var(--colorBackgroundTertiary)!important;border-radius:9999px!important;overflow:hidden!important}.xtrSelectWrapper .xtrSelect__multi-value__label{padding:3px 6px 3px 8px!important;color:var(--colorContentPrimary)!important}.xtrSelectWrapper .xtrSelect__multi-value__remove{color:var(--colorContentPrimary)!important;padding:0 8px 0 2px!important;cursor:pointer!important}.xtrSelectWrapper .xtrSelect__multi-value__remove:hover{background:hsl(var(--colorAlertError)/50%)!important}.xtrSelectWrapper .xtrSelect__indicator-separator{display:none}.xtrSelectWrapper .xtrSelect__indicator{cursor:pointer}.xtrSelectWrapper .xtrSelect__single-value,.xtrSelectWrapper .xtrSelect__input{color:var(--colorContentPrimary)!important}.xtrSelectWrapper .xtrSelect__menu{background:var(--colorBackgroundPrimary)!important;box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%)!important;border-radius:4px 4px 22px 22px!important;margin-top:10px!important;overflow:hidden!important;animation:showDropDown .2s ease-out forwards;z-index:100}.xtrSelectWrapper .xtrSelect__menu-list{padding:0!important}.xtrSelectWrapper .xtrSelect__option{padding:12px 24px!important;cursor:pointer!important}.xtrSelectWrapper .xtrSelect__option--is-focused{color:#fff!important;background:hsl(var(--colorBrandPrimary)/50%)!important}.xtrSelectWrapper .xtrSelect__option--is-selected{color:#fff!important;background:hsl(var(--colorBrandPrimary))!important}.xtrSelectWrapper .xtrSelect--is-disabled{opacity:.5!important}.xtrSelectWrapper .xtrSelectIcon{position:absolute;left:0;width:44px;height:44px;font-size:16px;color:var(--colorContentPrimary)}.xtrSelectWrapper .placeholder{position:absolute;left:18px;font-size:14px;color:var(--colorContentSecondary);transform-origin:0 50%;pointer-events:none;margin:0;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrSelectWrapper.single .xtrSelect__placeholder{opacity:0}.xtrSelectWrapper.open .xtrSelect__control:before,.xtrSelectWrapper.withValue .xtrSelect__control:before{background:hsl(var(--colorBrandPrimary))}.xtrSelectWrapper.open .placeholder,.xtrSelectWrapper.withValue .placeholder{transform:translate(8px,-12px);scale:.75;font-variation-settings:"wdth" 75,"wght" 700;color:hsl(var(--colorBrandPrimary)/100%)}.xtrSelectWrapper.withIcon .xtrSelect__control{padding:0 8px 0 48px!important}.xtrSelectWrapper.withIcon .xtrSelect__control:before{clip-path:circle(17px at 22px);opacity:.4}.xtrSelectWrapper.withIcon .xtrSelect__control--menu-is-open:before{clip-path:circle(19px at 22px);opacity:.8}.xtrSelectWrapper.withIcon .xtrSelect__value-container.xtrSelect__value-container--is-multi.xtrSelect__value-container--has-value{padding-left:10px!important}.xtrSelectWrapper.withIcon .input{padding-left:48px}.xtrSelectWrapper.withIcon .placeholder{transform:translate(30px)}.xtrSelectWrapper.withIcon.withValue .placeholder,.xtrSelectWrapper.withIcon.open .placeholder{transform:translate(42px,-12px)}.xtrSelectWrapper.open .xtrSelect__control{border-radius:22px 22px 4px 4px!important;background:var(--colorBackgroundPrimary)!important;box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%)!important}.xtrSelectWrapper.open .xtrSelect__control:before{background:hsl(var(--colorBrandPrimary))}.xtrSelectWrapper.open .xtrSelectIcon{color:#fff;font-weight:900}.xtrSelectWrapper.miniSize{width:auto}.xtrSelectWrapper.miniSize .xtrSelect{width:auto;position:relative}.xtrSelectWrapper.miniSize .xtrSelect__control{min-width:100px;width:auto;height:32px;min-height:32px;padding:0 8px 0 16px!important}.xtrSelectWrapper.miniSize .xtrSelect__control:before{clip-path:circle(12px at 16px)}.xtrSelectWrapper.miniSize .xtrSelect__value-container{padding:12px 16px 2px 0!important;font-size:11px}.xtrSelectWrapper.miniSize .xtrSelect__menu{margin-top:6px!important;border-radius:4px 4px 16px 16px!important}.xtrSelectWrapper.miniSize .xtrSelect__option{padding:8px 24px!important;font-size:12px}.xtrSelectWrapper.miniSize .xtrSelect__indicator svg{width:16px;height:16px}.xtrSelectWrapper.miniSize .xtrSelect__menu-list{max-height:220px}.xtrSelectWrapper.miniSize .xtrSelectIcon{width:31px;height:31px;font-size:12px}.xtrSelectWrapper.miniSize .placeholder{font-variation-settings:"wdth" 75,"wght" 500;scale:1;font-size:12px;transform:translate(0)}.xtrSelectWrapper.miniSize.withIcon .xtrSelect__control{padding:0 8px 0 36px!important}.xtrSelectWrapper.miniSize.withIcon .placeholder{transform:translate(20px)}.xtrSelectWrapper.miniSize.open .xtrSelect__control{border-radius:16px 16px 4px 4px!important}.xtrSelectWrapper.miniSize.open .xtrSelect__control:before{clip-path:circle(14px at 16px)}.xtrSelectWrapper.miniSize.open:not(.noSearch) .placeholder,.xtrSelectWrapper.miniSize.withValue .placeholder{font-variation-settings:"wdth" 75,"wght" 600;scale:.75!important;transform:translate(2px,-10px)}.xtrSelectWrapper.miniSize.open:not(.noSearch).withIcon .placeholder,.xtrSelectWrapper.miniSize.withValue.withIcon .placeholder{scale:.75!important;transform:translate(28px,-10px)}.xtrSelectWrapper.largeSize{width:auto}.xtrSelectWrapper.largeSize .xtrSelect{width:auto;position:relative}.xtrSelectWrapper.largeSize .xtrSelect__control{min-width:300px;width:auto;height:60px;min-height:60px;border-radius:30px!important;padding:0 12px 0 24px!important}.xtrSelectWrapper.largeSize .xtrSelect__control:before{clip-path:circle(24px at 30px)}.xtrSelectWrapper.largeSize .xtrSelect__value-container{font-size:22px;padding:18px 16px 0 0!important}.xtrSelectWrapper.largeSize .xtrSelect__option{padding:18px 24px!important;font-size:20px}.xtrSelectWrapper.largeSize .xtrSelect__indicator svg{width:24px;height:24px}.xtrSelectWrapper.largeSize .xtrSelect__menu-list{max-height:420px}.xtrSelectWrapper.largeSize .xtrSelectIcon{width:60px;height:60px;font-size:22px}.xtrSelectWrapper.largeSize .placeholder{font-variation-settings:"wdth" 75,"wght" 500;scale:1;font-size:20px;transform:translate(8px)}.xtrSelectWrapper.largeSize.withIcon .xtrSelect__control{padding:0 8px 0 64px!important}.xtrSelectWrapper.largeSize.withIcon .placeholder{transform:translate(50px)}.xtrSelectWrapper.largeSize.open .xtrSelect__control{border-radius:30px 30px 4px 4px!important}.xtrSelectWrapper.largeSize.open .xtrSelect__control:before{clip-path:circle(26px at 30px)}.xtrSelectWrapper.largeSize.open:not(.noSearch) .placeholder,.xtrSelectWrapper.largeSize.withValue .placeholder{font-variation-settings:"wdth" 75,"wght" 600;scale:.75!important;transform:translate(12px,-18px)}.xtrSelectWrapper.largeSize.open:not(.noSearch).withIcon .placeholder,.xtrSelectWrapper.largeSize.withValue.withIcon .placeholder{scale:.75!important;transform:translate(66px,-18px)}.xtrSelectWrapper.noSearch *{cursor:pointer}@keyframes showDropDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.xtrSelectWrapper:not(.open) .xtrSelect__input{caret-color:transparent}._colorPicker_16j6k_1{display:flex;flex-direction:column}._colorPicker_16j6k_1 ._wheel_16j6k_5{cursor:crosshair;margin-bottom:24px}._colorPicker_16j6k_1 ._shade_16j6k_9,._colorPicker_16j6k_1 ._alpha_16j6k_9{height:5px!important;border-radius:9999px!important}._colorPicker_16j6k_1 ._shade_16j6k_9 div:first-child,._colorPicker_16j6k_1 ._alpha_16j6k_9 div:first-child{border-radius:9999px!important}._colorPicker_16j6k_1 ._shade_16j6k_9 div:last-child,._colorPicker_16j6k_1 ._alpha_16j6k_9 div:last-child{display:flex;align-items:center}._colorPicker_16j6k_1 ._shade_16j6k_9{margin-bottom:16px}.xtrColorButton i{color:var(--iconColor)!important;--iconSize: 15px !important}.xtrColorInput{box-shadow:0 0 0 0 transparent;transition:box-shadow 0s,background var(--animDurDefault)}.xtrColorInput:before{background:hsl(var(--colorBrandPrimary))!important;opacity:1!important;transition:all var(--animDurDefault) var(--cubicBezierPrimary),background 0s!important}.xtrColorInput i{color:var(--iconColor)!important}.xtrColorInput input{cursor:pointer;text-transform:uppercase}.xtrColorPopper{min-width:200px;box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:24px;background:var(--colorBackgroundPrimary);z-index:9999;transition:all var(--animDurDefault) var(--cubicBezierPrimary);overflow:hidden}.xtrColorPopper .themeScheme{width:100%}.xtrColorPopper .themeScheme .schemeSelector{display:flex;justify-content:center;padding-top:16px}.xtrColorPopper .themeScheme .schemeSelector button{flex-grow:1;border-radius:0;padding:0 8px;filter:unset!important}.xtrColorPopper .themeScheme .schemeSelector button:first-child{border-top-left-radius:24px;border-bottom-left-radius:24px}.xtrColorPopper .themeScheme .schemeSelector button:last-child{border-top-right-radius:24px;border-bottom-right-radius:24px}.xtrColorPopper .themeScheme .schemeSelector button i{height:38px!important}.xtrColorPopper .header{width:100%;display:flex;justify-content:space-between;align-items:center}.xtrColorPopper .header .heading{position:relative;width:100%;max-width:172px;padding-right:16px;display:flex;align-items:flex-start;height:32px}.xtrColorPopper .header .heading h1{position:absolute;width:100%;height:100%;font-size:14px;text-transform:uppercase;line-height:32px;-webkit-user-select:none;user-select:none;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variation-settings:"wdth" 75,"wght" 600;background:var(--colorBackgroundPrimary);animation:slideOutRight .4s ease 1s forwards}.xtrColorPopper .header .heading div{position:absolute;width:100%;height:100%;display:flex;flex-direction:column;animation:slideInLeft .4s ease 1s forwards}.xtrColorPopper .header .heading div h1{position:relative;animation:none}.xtrColorPopper .header .heading div .popperInput{width:100%;outline:none;border:none;background:none;letter-spacing:.8px;text-transform:uppercase;color:hsl(var(--colorBrandPrimary));font-size:14px;padding:0;margin-top:-4px;z-index:2;animation:slideInLeft .4s ease 1s forwards}.xtrColorPopper .header .heading div .popperInput:focus-within{color:hsl(var(--colorBrandPrimary));font-variation-settings:"wdth" 75,"wght" 800}.xtrColorPopper .header.withInput .heading{height:44px}.xtrColorPopper .header i{font-size:small;opacity:0;animation:fadeIn .4s ease 1.1s forwards}.xtrColorPopper hr{width:20%;height:4px;background:var(--colorContentPrimary);border:none;margin:0;opacity:.2;border-radius:9999px}.xtrColorPopper .swatch{width:100%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:8px 12px}.xtrColorPopper .swatch .swatchItem{aspect-ratio:1;border-radius:9999px;cursor:pointer}@keyframes slideInLeft{0%{opacity:0;z-index:1;transform:translate(50px)}to{opacity:1;z-index:2;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;z-index:2;transform:translate(0)}to{opacity:0;z-index:1;transform:translate(-50px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}._sider_11os5_1{--paddingLeft: 0px;--paddingRight: 0px;--borderRadius: 36px;--siderWidthMini: 60px;width:100%;height:100%;background:var(--colorBackgroundSecondary);padding:0 var(--paddingRight) 0 var(--paddingLeft);overflow:hidden;transition:all var(--animDurDefault) ease}._sider_11os5_1 ._leftSiderContainer_11os5_13{position:fixed;left:0;width:auto;height:100%;z-index:0;transition:transform var(--animDurDefault) var(--cubicBezierPrimary)}._sider_11os5_1 ._rightSiderContainer_11os5_21{position:fixed;right:0;width:auto;height:100%;z-index:1;transition:transform var(--animDurDefault) var(--cubicBezierPrimary)}._sider_11os5_1 ._content_11os5_29{position:relative;width:100%;height:100%;background:var(--colorBackgroundPrimary);box-shadow:0 0 50px 2px #0000003d;border-radius:0;z-index:2;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}._sider_11os5_1._miniLeftSider_11os5_39{--paddingLeft: var(--siderWidthMini)}._sider_11os5_1._miniLeftSider_11os5_39 ._content_11os5_29{border-top-left-radius:var(--borderRadius);border-bottom-left-radius:var(--borderRadius)}._sider_11os5_1._miniRightSider_11os5_46{--paddingRight: var(--siderWidthMini)}._sider_11os5_1._miniRightSider_11os5_46 ._content_11os5_29{border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius)}._sider_11os5_1._leftOpen_11os5_53{--transform: translateX(calc(32px + var(--leftSiderWidth) - var(--paddingLeft)))}._sider_11os5_1._leftOpen_11os5_53 ._rightSiderContainer_11os5_21{transform:var(--transform);pointer-events:none}._sider_11os5_1._leftOpen_11os5_53 ._content_11os5_29{border-radius:36px;transform:var(--transform);transform-origin:left center;scale:.95}._sider_11os5_1._rightOpen_11os5_66{--transform: translateX(calc((32px + var(--rightSiderWidth) - var(--paddingRight)) * -1))}._sider_11os5_1._rightOpen_11os5_66 ._leftSiderContainer_11os5_13{transform:var(--transform);pointer-events:none}._sider_11os5_1._rightOpen_11os5_66 ._content_11os5_29{border-radius:36px;transform:var(--transform);transform-origin:right center;scale:.95}@media (width <= 512px){._sider_11os5_1._miniLeftSider_11os5_39{--paddingLeft: 0px !important}._sider_11os5_1:not(._leftOpen_11os5_53) ._content_11os5_29{border-top-left-radius:0!important;border-bottom-left-radius:0!important}._sider_11os5_1._rightOpen_11os5_66{--transform: translateX(calc((32px + 100vh - var(--paddingRight)) * -1))}._sider_11os5_1._miniRightSider_11os5_46{--paddingRight: 0px !important}._sider_11os5_1:not(._rightOpen_11os5_66) ._content_11os5_29{border-top-right-radius:0!important;border-bottom-right-radius:0!important}}._siderModal_1rtdm_1{width:fit-content;height:100%;min-width:300px;display:flex;flex-direction:column}._siderModal_1rtdm_1 ._header_1rtdm_8{width:100%;height:100px;display:flex;align-items:center;padding:0 24px;gap:24px}._siderModal_1rtdm_1 ._header_1rtdm_8 ._back_1rtdm_16{border-top-left-radius:0;border-bottom-left-radius:0;display:none}._siderModal_1rtdm_1 ._header_1rtdm_8 ._icon_1rtdm_21,._siderModal_1rtdm_1 ._header_1rtdm_8 ._title_1rtdm_21{font-size:x-large;font-variation-settings:"wdth" 75,"wght" 400;color:var(--colorContentPrimary);margin:0;-webkit-user-select:none;user-select:none}._siderModal_1rtdm_1 ._footer_1rtdm_28{width:100%;height:100px;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;padding:0 24px}._siderModal_1rtdm_1 ._body_1rtdm_37{flex:1;padding:16px 0;overflow-y:auto;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}@media (width <= 512px){._siderModal_1rtdm_1 ._header_1rtdm_8{padding:0 24px 0 0}._siderModal_1rtdm_1 ._header_1rtdm_8 ._back_1rtdm_16{display:flex}._siderModal_1rtdm_1 ._body_1rtdm_37{width:100vw}}._navigation_10g7s_1{--animDurFast: .4s;--borderRadius: 30px;width:250px;height:100%;display:flex;flex-direction:column;padding:16px 0 28px}._navigation_10g7s_1 ._brand_10g7s_10{font-size:32px;padding:24px 8px;font-variation-settings:"wdth" 75,"wght" 400;text-transform:capitalize;-webkit-user-select:none;user-select:none;color:var(--colorContentPrimary);cursor:pointer}._navigation_10g7s_1 ._routeList_10g7s_19{width:100%;display:flex;flex-direction:column;flex:1;-webkit-user-select:none;user-select:none;cursor:pointer}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19{position:relative;display:flex;align-items:center;gap:2px;text-decoration:none;color:var(--colorContentPrimary);border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius);transition:all var(--animDurFast) var(--cubicBezierPrimary);-webkit-tap-highlight-color:transparent;overflow:hidden}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19:before{content:"";position:absolute;width:100%;height:100%;transform:translate(-100%);background:hsl(var(--colorBrandPrimary));z-index:0;border-radius:0;transition:all var(--animDurFast) var(--cubicBezierPrimary),transform .2s ease;overflow:hidden}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19 ._icon_10g7s_52{width:var(--siderWidthMini);height:var(--siderWidthMini);font-size:calc(var(--siderWidthMini) - 40px);transition:all var(--animDurFast) var(--cubicBezierPrimary);color:inherit}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19 ._label_10g7s_59{font-size:16px;font-variation-settings:"wdth" 75,"wght" 400;text-transform:capitalize;color:inherit;z-index:1;transition:all var(--animDurFast) var(--cubicBezierPrimary)}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19:last-of-type{margin-top:auto}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19:hover:before{transform:translate(calc(4px - 100%))}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19:active ._icon_10g7s_52{scale:.9}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19:active:before{transform:translate(calc(6px - 100%))}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19._loading_10g7s_79{--loaderColor: hsl(var(--colorBrandPrimary) / 50%);background:hsl(var(--colorBrandPrimary)/0%);pointer-events:none}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19._loading_10g7s_79:before{content:"";position:absolute;width:150%;height:100%;background:none;background-image:repeating-linear-gradient(60deg,transparent,transparent .75rem,var(--loaderColor) .75rem,var(--loaderColor) 1.5rem);z-index:2;border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius);transform:translate(0);transition:all var(--animDurFast) var(--cubicBezierPrimary),transform var(--animDurFast) ease;animation:_barberPole_10g7s_1 .18s linear infinite}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19._active_10g7s_98{color:#fff}._navigation_10g7s_1 ._routeList_10g7s_19 ._route_10g7s_19._active_10g7s_98:before{border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius);transform:translate(0);transition:all var(--animDurFast) var(--cubicBezierPrimary),transform var(--animDurFast) ease}@keyframes _barberPole_10g7s_1{0%{transform:translate(-1.75rem)}to{transform:translate(0)}}.xtrThemeSelect{width:150px}.xtrThemePicker{--schemeSize: 180px;--schemeGap: 24px;--globalTertiaryColor: var(--colorBackgroundTertiary);position:relative;width:calc(var(--schemeSize) * 3 + var(--schemeGap) * 2 / 1.2);display:flex;flex-direction:column;gap:var(--schemeGap)}.xtrThemePicker .themeSchemes{width:fit-content;display:flex;gap:calc(var(--schemeGap) / 1.2)}.xtrThemePicker .themeSchemes *{transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrThemePicker .themeSchemes .themeSchemeItem{--rippleShadowColor: var(--globalTertiaryColor);--cardBorderRadius: calc(var(--schemeGap) / 2);position:relative;width:var(--schemeSize);height:calc(var(--schemeSize) * .8);background:var(--colorBackgroundSecondary);-webkit-user-select:none;user-select:none;border:2px solid var(--colorBackgroundTertiary);cursor:pointer;transition:all var(--animDurDefault) var(--cubicBezierPrimary),box-shadow var(--animDurDefault) linear}@media (prefers-color-scheme: light){.xtrThemePicker .themeSchemes .themeSchemeItem.auto{color-scheme:light;--colorContentPrimary: #383838;--colorContentSecondary: #666;--colorContentTertiary: #b4b4b4;--colorBackgroundPrimary: #FFF;--colorBackgroundSecondary: #DDD;--colorBackgroundTertiary: #AAA}}@media (prefers-color-scheme: dark){.xtrThemePicker .themeSchemes .themeSchemeItem.auto{color-scheme:dark;--colorContentPrimary: #A1A1A1;--colorContentSecondary: #636363;--colorContentTertiary: #383838;--colorBackgroundPrimary: #111;--colorBackgroundSecondary: #222;--colorBackgroundTertiary: #333}}.xtrThemePicker .themeSchemes .themeSchemeItem.light{color-scheme:light;--colorContentPrimary: #383838;--colorContentSecondary: #666;--colorContentTertiary: #b4b4b4;--colorBackgroundPrimary: #FFF;--colorBackgroundSecondary: #DDD;--colorBackgroundTertiary: #AAA}.xtrThemePicker .themeSchemes .themeSchemeItem.dark{color-scheme:dark;--colorContentPrimary: #A1A1A1;--colorContentSecondary: #636363;--colorContentTertiary: #383838;--colorBackgroundPrimary: #111;--colorBackgroundSecondary: #222;--colorBackgroundTertiary: #333}.xtrThemePicker .themeSchemes .themeSchemeItem .design{position:relative;width:100%;height:100%;border-radius:inherit;overflow:hidden;background:var(--colorBackgroundTertiary)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .navigation{position:absolute;top:0;left:0;width:25%;height:100%;display:flex;flex-direction:column;gap:calc(var(--schemeGap) / 6);padding:calc(var(--schemeGap) / 2.4) 0;background:var(--colorBackgroundTertiary)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .navigation .navigationItem{width:100%;height:calc(var(--schemeGap) / 6);background:#000;opacity:.2}.xtrThemePicker .themeSchemes .themeSchemeItem .design .navigation .navigationItem:first-child{margin-top:10px;background:#fff}.xtrThemePicker .themeSchemes .themeSchemeItem .design .navigation .navigationItem:last-child{margin-top:auto}.xtrThemePicker .themeSchemes .themeSchemeItem .design .content{position:absolute;top:0;left:4%;width:96%;height:100%;border-top-left-radius:calc(var(--schemeGap) / 2);border-bottom-left-radius:calc(var(--schemeGap) / 2);background:var(--colorBackgroundPrimary)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .content .header{position:absolute;top:0;left:0;width:100%;height:calc(var(--schemeGap) / 2)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .content .header:before{content:"";position:absolute;top:calc(var(--schemeGap) / 3);left:calc(var(--schemeGap) / 3);display:block;width:calc(var(--schemeGap) / 4);height:calc(var(--schemeGap) / 4);border-radius:9999px;background:var(--colorBackgroundTertiary)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .content .header:after{content:"";position:absolute;top:calc(var(--schemeGap) / 3);left:calc(var(--schemeGap) / 1.2);display:block;width:calc(var(--schemeGap) * 2);height:calc(var(--schemeGap) / 4);border-radius:9999px;background:var(--colorBackgroundTertiary)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .content .profile{position:absolute;top:calc(var(--schemeGap) / 1.1);left:50%;transform:translate(-50%);width:calc(var(--schemeGap));height:calc(var(--schemeGap));border-radius:9999px;background:var(--colorBackgroundTertiary)}.xtrThemePicker .themeSchemes .themeSchemeItem .design .content .profile:before{content:"";position:absolute;top:calc(var(--schemeGap) * 1.2);left:50%;transform:translate(-50%);display:block;width:calc(var(--schemeGap) * 1.5);height:calc(var(--schemeGap) / 8);border-radius:9999px;background:var(--colorBackgroundTertiary);transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrThemePicker .themeSchemes .themeSchemeItem .footer{position:absolute;bottom:0;width:100%;display:flex;justify-content:center;align-items:center;color:var(--colorContentPrimary);margin-bottom:calc(var(--schemeGap) / 2);gap:calc(var(--schemeGap) / 3)}.xtrThemePicker .themeSchemes .themeSchemeItem .footer .footerIcon{font-size:max(13px,var(--schemeGap) / 1.5);text-transform:capitalize;color:inherit}.xtrThemePicker .themeSchemes .themeSchemeItem .footer .footerLabel{font-size:max(13px,var(--schemeGap) / 1.6);font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase;color:inherit}.xtrThemePicker .themeSchemes .themeSchemeItem:hover .design .content{top:0;left:20%;width:80%}.xtrThemePicker .themeSchemes .themeSchemeItem.active .design .navigation,.xtrThemePicker .themeSchemes .themeSchemeItem:hover .design .navigation{background:hsl(var(--colorBrandPrimary))}.xtrThemePicker .themeSchemes .themeSchemeItem.active .design .navigation .navigationItem,.xtrThemePicker .themeSchemes .themeSchemeItem:hover .design .navigation .navigationItem{opacity:.3}.xtrThemePicker .themeSchemes .themeSchemeItem.active .design .content .header:before,.xtrThemePicker .themeSchemes .themeSchemeItem:hover .design .content .header:before{background:hsl(var(--colorBrandPrimary))}.xtrThemePicker .themeSchemes .themeSchemeItem.active .footer,.xtrThemePicker .themeSchemes .themeSchemeItem:hover .footer{color:hsl(var(--colorBrandPrimary))}.xtrThemePicker .swatches{position:relative;width:100%;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;gap:calc(var(--schemeGap) / 2);padding:0 4px}.xtrThemePicker .swatches .xtrThemeSelect{width:100%!important;grid-column:span 2}.xtrThemePicker.mobile{width:100%}.xtrThemePicker.mobile>.xtrThemeSelect{width:100%!important}.xtrThemePicker.mobile>.xtrColorPopper{width:calc(100% - 4px);min-width:260px;margin-left:-16px}@media (max-width: 640px){.xtrThemePicker .swatches{grid-template-columns:1fr}.xtrThemePicker .swatches .swatchItem{display:none}.xtrThemePicker .swatches .xtrColorPopper{width:100%;margin-left:-16px}}.xtrThemeSwitch{display:flex}.xtrThemeSwitch button i{width:unset!important;aspect-ratio:1.2}.xtrThemeSwitch button.xtrThemeScheme{padding-right:1rem;border-top-right-radius:0;border-bottom-right-radius:0}.xtrThemeSwitch button.xtrThemeColor{padding-left:1rem;border-top-left-radius:0;border-bottom-left-radius:0}.xtrThemeSwitch .xtrSelectWrapper .xtrSelect__control{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.xtrThemeSwitch .xtrSelectWrapper.open .xtrSelect__control{border-top-left-radius:0!important}.xtrThemeSwitch.withLabel i{aspect-ratio:1}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xtreme-ui",
3
- "version": "0.0.111",
3
+ "version": "0.0.113",
4
4
  "type": "module",
5
5
  "description": "Collection of reusable components that can be used in web projects",
6
6
  "main": "dist/index.js",