xtreme-ui 0.0.70 → 0.0.72

package/README.md

@@ -1,6 +1,24 @@
-# XtremeUI
+# XtremeUI - React Component Library
 
-XtremeUI is a UI Library built using Vite + React + Scss.  
-It is a collection of reusable components that can be used in web projects.
+Welcome to XtremeUI, a versatile React component library built on Vite, React, and Scss. This library offers a collection of reusable and customizable UI components to expedite frontend development.
 
+## Features
 
+- **Vite-Powered**: Utilizes Vite for blazing-fast development and optimized builds.
+- **React Components**: A diverse set of reusable React components for easy integration.
+- **Scss Styling**: Customizable styles using Scss to match various design needs.
+- **Responsive Design**: Ensures compatibility and responsiveness across devices.
+- **Accessibility**: Compliant with accessibility standards for an inclusive user experience.
+- **Comprehensive Documentation**: Detailed documentation with usage examples for straightforward implementation.
+
+## Installation
+
+Install the library via npm or yarn:
+
+```bash
+npm install xtreme-ui
+# or
+yarn add xtreme-ui
+# or
+pnpm add xtreme-ui
+```

package/dist/components/base/ActionCard/actionCard.module.scss.js

@@ -1,14 +1,13 @@
-"use client";
-const i = "_actionCard_1jg2o_1", e = "_miniSize_1jg2o_14", o = "_smallSize_1jg2o_17", m = "_mediumSize_1jg2o_20", n = {
+const i = "_actionCard_1715r_1", e = "_miniSize_1715r_14", m = "_smallSize_1715r_17", _ = "_mediumSize_1715r_20", a = {
   actionCard: i,
   miniSize: e,
-  smallSize: o,
-  mediumSize: m
+  smallSize: m,
+  mediumSize: _
 };
 export {
   i as actionCard,
-  n as default,
-  m as mediumSize,
+  a as default,
+  _ as mediumSize,
   e as miniSize,
-  o as smallSize
+  m as smallSize
 };

package/dist/components/base/ActionCard/types.js

@@ -1,4 +1,3 @@
-"use client";
 var u = /* @__PURE__ */ ((l) => (l[l.mini = 100] = "mini", l[l.default = 164] = "default", l[l.large = 254] = "large", l))(u || {});
 export {
   u as EActionCardSize

package/dist/components/base/Avatar/avatar.module.scss.js

@@ -1,18 +1,17 @@
-"use client";
-const a = "_avatar_13i6u_1", _ = "_placeholder_13i6u_20", e = "_image_13i6u_23", o = "_loading_13i6u_34", i = "_spin_13i6u_1", r = "_error_13i6u_40", n = {
+const a = "_avatar_13i6u_1", _ = "_placeholder_13i6u_20", o = "_image_13i6u_23", r = "_loading_13i6u_34", e = "_spin_13i6u_1", i = "_error_13i6u_40", n = {
   avatar: a,
   placeholder: _,
-  image: e,
-  loading: o,
-  spin: i,
-  error: r
+  image: o,
+  loading: r,
+  spin: e,
+  error: i
 };
 export {
   a as avatar,
   n as default,
-  r as error,
-  e as image,
-  o as loading,
+  i as error,
+  o as image,
+  r as loading,
   _ as placeholder,
-  i as spin
+  e as spin
 };

package/dist/components/base/Avatar/types.js

@@ -1,4 +1,3 @@
-"use client";
 var n = /* @__PURE__ */ ((l) => (l[l.mini = 64] = "mini", l[l.default = 96] = "default", l[l.large = 128] = "large", l))(n || {});
 export {
   n as EAvatarSize

package/dist/components/base/Button/button.module.scss.js

@@ -1,11 +1,10 @@
-"use client";
-const e = "_button_o6rm6_1", n = "_label_o6rm6_14", o = "_icon_o6rm6_21", r = "_underline_o6rm6_25", _ = "_primaryType_o6rm6_48", i = "_primaryDangerType_o6rm6_48", a = "_secondaryType_o6rm6_52", y = "_secondaryDangerType_o6rm6_52", l = "_linkType_o6rm6_56", c = "_linkDangerType_o6rm6_56", s = "_miniSize_o6rm6_85", t = "_iconOnly_o6rm6_96", p = "_defaultSize_o6rm6_103", m = "_largeSize_o6rm6_121", T = "_loading_o6rm6_149", d = "_barberPole_o6rm6_1", g = "_spin_o6rm6_1", b = {
+const e = "_button_9wxq7_1", n = "_label_9wxq7_14", _ = "_icon_9wxq7_21", i = "_underline_9wxq7_25", o = "_primaryType_9wxq7_48", r = "_primaryDangerType_9wxq7_48", a = "_secondaryType_9wxq7_52", y = "_secondaryDangerType_9wxq7_52", l = "_linkType_9wxq7_56", c = "_linkDangerType_9wxq7_56", s = "_miniSize_9wxq7_85", t = "_iconOnly_9wxq7_96", p = "_defaultSize_9wxq7_103", x = "_largeSize_9wxq7_121", T = "_loading_9wxq7_149", q = "_barberPole_9wxq7_1", w = "_spin_9wxq7_1", d = {
   button: e,
   label: n,
-  icon: o,
-  underline: r,
-  primaryType: _,
-  primaryDangerType: i,
+  icon: _,
+  underline: i,
+  primaryType: o,
+  primaryDangerType: r,
   secondaryType: a,
   secondaryDangerType: y,
   linkType: l,
@@ -13,28 +12,28 @@ const e = "_button_o6rm6_1", n = "_label_o6rm6_14", o = "_icon_o6rm6_21", r = "_
   miniSize: s,
   iconOnly: t,
   defaultSize: p,
-  largeSize: m,
+  largeSize: x,
   loading: T,
-  barberPole: d,
-  spin: g
+  barberPole: q,
+  spin: w
 };
 export {
-  d as barberPole,
+  q as barberPole,
   e as button,
-  b as default,
+  d as default,
   p as defaultSize,
-  o as icon,
+  _ as icon,
   t as iconOnly,
   n as label,
-  m as largeSize,
+  x as largeSize,
   c as linkDangerType,
   l as linkType,
   T as loading,
   s as miniSize,
-  i as primaryDangerType,
-  _ as primaryType,
+  r as primaryDangerType,
+  o as primaryType,
   y as secondaryDangerType,
   a as secondaryType,
-  g as spin,
-  r as underline
+  w as spin,
+  i as underline
 };

package/dist/components/base/Button/types.js

@@ -1,4 +1,3 @@
-"use client";
 var a = /* @__PURE__ */ ((r) => (r.primary = "primary", r.primaryDanger = "primaryDanger", r.secondary = "secondary", r.secondaryDanger = "secondaryDanger", r.link = "link", r.linkDanger = "linkDanger", r))(a || {});
 export {
   a as EButtonTypes

package/dist/components/base/ColorPicker/colorPicker.module.scss.js

@@ -1,14 +1,13 @@
-"use client";
-const e = "_colorPicker_1lsi0_1", l = "_wheel_1lsi0_6", s = "_shade_1lsi0_10", c = "_alpha_1lsi0_10", o = {
+const e = "_colorPicker_1lsi0_1", l = "_wheel_1lsi0_6", s = "_shade_1lsi0_10", o = "_alpha_1lsi0_10", _ = {
   colorPicker: e,
   wheel: l,
   shade: s,
-  alpha: c
+  alpha: o
 };
 export {
-  c as alpha,
+  o as alpha,
   e as colorPicker,
-  o as default,
+  _ as default,
   s as shade,
   l as wheel
 };

package/dist/components/base/Icon/icon.module.scss.js

@@ -1,8 +1,7 @@
-"use client";
-const o = "_icon_1w5r3_2", t = "_thin_1w5r3_25", r = "_light_1w5r3_29", _ = "_regular_1w5r3_33", n = "_solid_1w5r3_37", s = "_duotone_1w5r3_41", i = "_sharpSolid_1w5r3_52", a = "_sharpRegular_1w5r3_56", c = "_sharpLight_1w5r3_60", h = "_brand_1w5r3_64", l = "_iconButton_1w5r3_68", e = {
+const o = "_icon_1w5r3_2", r = "_thin_1w5r3_25", t = "_light_1w5r3_29", _ = "_regular_1w5r3_33", n = "_solid_1w5r3_37", s = "_duotone_1w5r3_41", i = "_sharpSolid_1w5r3_52", a = "_sharpRegular_1w5r3_56", c = "_sharpLight_1w5r3_60", h = "_brand_1w5r3_64", l = "_iconButton_1w5r3_68", d = {
   icon: o,
-  thin: t,
-  light: r,
+  thin: r,
+  light: t,
   regular: _,
   solid: n,
   duotone: s,
@@ -14,15 +13,15 @@ const o = "_icon_1w5r3_2", t = "_thin_1w5r3_25", r = "_light_1w5r3_29", _ = "_re
 };
 export {
   h as brand,
-  e as default,
+  d as default,
   s as duotone,
   o as icon,
   l as iconButton,
-  r as light,
+  t as light,
   _ as regular,
   c as sharpLight,
   a as sharpRegular,
   i as sharpSolid,
   n as solid,
-  t as thin
+  r as thin
 };

package/dist/components/base/Icon/types.js

@@ -1,4 +1,3 @@
-"use client";
 var a = /* @__PURE__ */ ((r) => (r[r.mini = 12] = "mini", r[r.default = 18] = "default", r[r.large = 24] = "large", r))(a || {});
 export {
   a as EIconSize

package/dist/components/base/Lottie/lottie.module.scss.js

@@ -1,5 +1,4 @@
-"use client";
-const o = "_main_1hnbl_1", e = "_animation_1hnbl_1", t = "_controls_1hnbl_1", _ = "_toolbar_1hnbl_1", n = "_popover_1hnbl_1", r = "_active_1hnbl_1", l = "_seeker_1hnbl_1", p = "_error_1hnbl_1", i = "_lottie_1hnbl_2", a = {
+const o = "_main_1hnbl_1", e = "_animation_1hnbl_1", t = "_controls_1hnbl_1", _ = "_toolbar_1hnbl_1", n = "_popover_1hnbl_1", r = "_active_1hnbl_1", l = "_seeker_1hnbl_1", p = "_error_1hnbl_1", a = "_lottie_1hnbl_2", i = {
   "dotlottie-container": "_dotlottie-container_1hnbl_1",
   main: o,
   animation: e,
@@ -18,15 +17,15 @@ const o = "_main_1hnbl_1", e = "_animation_1hnbl_1", t = "_controls_1hnbl_1", _
   "popover-items": "_popover-items_1hnbl_1",
   "popover-subnav": "_popover-subnav_1hnbl_1",
   "popover-item": "_popover-item_1hnbl_1",
-  lottie: i
+  lottie: a
 };
 export {
   r as active,
   e as animation,
   t as controls,
-  a as default,
+  i as default,
   p as error,
-  i as lottie,
+  a as lottie,
   o as main,
   n as popover,
   l as seeker,

package/dist/components/base/Lottie/types.js

@@ -1,4 +1,3 @@
-"use client";
 var a = /* @__PURE__ */ ((r) => (r[r.mini = 64] = "mini", r[r.default = 128] = "default", r[r.large = 256] = "large", r))(a || {});
 export {
   a as ELottieSize

package/dist/components/base/ProgressBar/progressbar.module.scss.js

@@ -1,7 +1,6 @@
-"use client";
-const e = "_progressBar_luf46_1", r = "_progress_luf46_1", s = "_intermediate_luf46_31", o = "_barberPole_luf46_1", t = {
-  progressBar: e,
-  progress: r,
+const r = "_progressBar_luf46_1", e = "_progress_luf46_1", s = "_intermediate_luf46_31", o = "_barberPole_luf46_1", t = {
+  progressBar: r,
+  progress: e,
   intermediate: s,
   barberPole: o
 };
@@ -9,6 +8,6 @@ export {
   o as barberPole,
   t as default,
   s as intermediate,
-  r as progress,
-  e as progressBar
+  e as progress,
+  r as progressBar
 };

package/dist/components/base/Spinner/spinner.module.scss.js

@@ -1,19 +1,18 @@
-"use client";
-const e = "_spinner_ob963_1", p = "_fullpage_ob963_14", n = "_label_ob963_18", _ = "_spinnerWrapper_ob963_26", c = "_spin_ob963_1", s = "_cubeTop_ob963_34", o = "_cubeWrapper_ob963_52", b = "_cubeFace_ob963_58", r = {
+const e = "_spinner_2g38j_1", p = "_fullpage_2g38j_14", n = "_label_2g38j_18", _ = "_spinnerWrapper_2g38j_26", c = "_spin_2g38j_1", s = "_cubeTop_2g38j_34", r = "_cubeWrapper_2g38j_53", a = "_cubeFace_2g38j_59", l = {
   spinner: e,
   fullpage: p,
   label: n,
   spinnerWrapper: _,
   spin: c,
   cubeTop: s,
-  cubeWrapper: o,
-  cubeFace: b
+  cubeWrapper: r,
+  cubeFace: a
 };
 export {
-  b as cubeFace,
+  a as cubeFace,
   s as cubeTop,
-  o as cubeWrapper,
-  r as default,
+  r as cubeWrapper,
+  l as default,
   p as fullpage,
   n as label,
   c as spin,

package/dist/components/base/Spinner/types.js

@@ -1,4 +1,3 @@
-"use client";
 var l = /* @__PURE__ */ ((a) => (a[a.mini = 64] = "mini", a[a.default = 96] = "default", a[a.large = 128] = "large", a))(l || {});
 export {
   l as ESpinnerSize

package/dist/components/base/Textfield/textfield.module.scss.js

@@ -1,24 +1,23 @@
-"use client";
-const e = "_textfield_inyvc_1", n = "_icon_inyvc_29", t = "_dialCode_inyvc_39", c = "_input_inyvc_59", _ = "_placeholder_inyvc_72", o = "_withIcon_inyvc_97", i = "_textarea_inyvc_107", a = "_phone_inyvc_116", l = "_hasValue_inyvc_122", s = {
-  textfield: e,
-  icon: n,
-  dialCode: t,
-  input: c,
-  placeholder: _,
-  withIcon: o,
-  textarea: i,
-  phone: a,
-  hasValue: l
+const t = "_textfield_1faip_1", e = "_icon_1faip_29", a = "_dialCode_1faip_39", _ = "_input_1faip_60", o = "_placeholder_1faip_79", i = "_withIcon_1faip_92", n = "_textarea_1faip_102", c = "_phone_1faip_111", p = "_hasValue_1faip_117", l = {
+  textfield: t,
+  icon: e,
+  dialCode: a,
+  input: _,
+  placeholder: o,
+  withIcon: i,
+  textarea: n,
+  phone: c,
+  hasValue: p
 };
 export {
-  s as default,
-  t as dialCode,
-  l as hasValue,
-  n as icon,
-  c as input,
-  a as phone,
-  _ as placeholder,
-  i as textarea,
-  e as textfield,
-  o as withIcon
+  l as default,
+  a as dialCode,
+  p as hasValue,
+  e as icon,
+  _ as input,
+  c as phone,
+  o as placeholder,
+  n as textarea,
+  t as textfield,
+  i as withIcon
 };

package/dist/components/context/Theme/type.js

@@ -1,11 +1,10 @@
-"use client";
-var n = /* @__PURE__ */ ((t) => (t.light = "light", t.dark = "dark", t.system = "system", t))(n || {});
+var a = /* @__PURE__ */ ((t) => (t.light = "light", t.dark = "dark", t.system = "system", t))(a || {});
 const r = "system";
-var a = /* @__PURE__ */ ((t) => (t.red = "red", t.pink = "pink", t.orange = "orange", t.green = "green", t.blue = "blue", t.violet = "violet", t.black = "black", t))(a || {});
+var n = /* @__PURE__ */ ((t) => (t.red = "red", t.pink = "pink", t.orange = "orange", t.green = "green", t.blue = "blue", t.violet = "violet", t.black = "black", t))(n || {});
 const s = "violet";
 export {
-  a as EThemeColor,
-  n as EThemeScheme,
+  n as EThemeColor,
+  a as EThemeScheme,
   s as defaultColor,
   r as defaultScheme
 };

package/dist/components/context/useContext.js

@@ -1,8 +1,7 @@
-"use client";
 import { useContext as t } from "react";
-import { DataContext as e } from "./Data/DataContext.js";
-import { ThemeContext as o } from "./Theme/ThemeContext.js";
-const s = () => t(e), a = () => t(o);
+import { DataContext as o } from "./Data/DataContext.js";
+import { ThemeContext as e } from "./Theme/ThemeContext.js";
+const s = () => t(o), a = () => t(e);
 export {
   s as useXData,
   a as useXTheme

package/dist/components/layout/ColorPopper/ColorPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPopper.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/ColorPopper/ColorPopper.tsx"],"names":[],"mappings":";AAuBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAI5C,eAAO,MAAM,WAAW,8GAoGtB,CAAC"}
+{"version":3,"file":"ColorPopper.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/ColorPopper/ColorPopper.tsx"],"names":[],"mappings":";AAsBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAI5C,eAAO,MAAM,WAAW,8GAuGtB,CAAC"}

package/dist/components/layout/ColorPopper/ColorPopper.js

@@ -1,42 +1,42 @@
 "use client";
-import { jsxs as f, Fragment as D, jsx as l } from "react/jsx-runtime";
-import { forwardRef as L, useMemo as g, useState as p, useEffect as U } from "react";
-import { useFloating as q, shift as z, flip as A, offset as B, autoUpdate as G, useTransitionStyles as J, useInteractions as K, useClick as Q, useDismiss as V } from "@floating-ui/react";
+import { jsxs as f, Fragment as q, jsx as l } from "react/jsx-runtime";
+import { forwardRef as D, useMemo as g, useState as p, useEffect as L } from "react";
+import { useFloating as U, shift as z, flip as A, offset as B, autoUpdate as G, useTransitionStyles as J, useInteractions as K, useClick as Q, useDismiss as V } from "@floating-ui/react";
 import C from "clsx";
-import { getFormat as H, colord as t } from "colord";
+import { colord as t, getFormat as H } from "colord";
 import { ColorPicker as W } from "../../base/ColorPicker/ColorPicker.js";
 import { Icon as X } from "../../base/Icon/Icon.js";
 import { Textfield as Y } from "../../base/Textfield/Textfield.js";
 import { mergeRefs as Z } from "../../../utils/function/mergeRefs.js";
 import h from "./colorPopper.module.scss.js";
-const _ = L((v, y) => {
-  const { className: P, popperClassName: F, placeholder: N = "Color Picker", showReset: R = !0, shade: b, alpha: k, color: s, setColor: o } = v, r = g(() => H(s), [s]), d = g(() => t(s), []), [n, i] = p(t(s).toHsv()), [w, a] = p(t(s).toHex()), [I, u] = p(!1), { refs: x, floatingStyles: S, context: c } = q({
+const _ = D((v, y) => {
+  const { className: P, popperClassName: F, placeholder: N = "Color Picker", showReset: R = !0, shade: b, alpha: k, color: s, setColor: o } = v, u = g(() => t(s), []), r = g(() => H(s), [s]), [i, n] = p(t(s).toHsv()), [w, a] = p(t(s).toHex()), [I, d] = p(!1), { refs: x, floatingStyles: S, context: c } = U({
     open: I,
-    onOpenChange: u,
+    onOpenChange: d,
     middleware: [
       z(),
       A(),
       B(({ placement: e }) => e === "bottom" ? 10 : 16)
     ],
     whileElementsMounted: G
-  }), { isMounted: T, styles: M } = J(c, {
+  }), { isMounted: T, styles: E } = J(c, {
     duration: 200,
     initial: (e) => ({
       opacity: 0,
       scale: 0.9,
       translate: (e == null ? void 0 : e.side) === "bottom" ? "0 12px" : "0 -12px"
     })
-  }), { getReferenceProps: O, getFloatingProps: j } = K([
+  }), { getReferenceProps: M, getFloatingProps: O } = K([
     Q(c),
     V(c)
-  ]), E = (e) => {
+  ]), j = (e) => {
     const m = H(e);
-    a(e), m && (m === "hex" && e.length > 6 || m !== "hex") && i(t(e).toHsv());
+    a(e), m && (m === "hex" && e.length > 6 || m !== "hex") && n(t(e).toHsv());
   };
-  return U(() => {
-    const e = t(n);
-    r === "rgb" ? o == null || o(e.toRgb()) : r === "hex" ? o == null || o(e.toHex()) : r === "hsl" ? o == null || o(e.toHsl()) : r === "hsv" && (o == null || o(e.toHsv()));
-  }, [r, n, o]), /* @__PURE__ */ f(D, { children: [
+  return L(() => {
+    const e = t(i);
+    e.isEqual(t(s)) || (r === "rgb" ? o == null || o(e.toRgb()) : r === "hex" ? o == null || o(e.toHex()) : r === "hsl" ? o == null || o(e.toHsl()) : r === "hsv" && (o == null || o(e.toHsv())));
+  }, [s, r, i, o]), /* @__PURE__ */ f(q, { children: [
     /* @__PURE__ */ l(
       Y,
       {
@@ -45,10 +45,10 @@ const _ = L((v, y) => {
         placeholder: N,
         icon: "color",
         value: w,
-        onChange: (e) => E(e.target.value),
-        style: { "--chipColor": t(n).toHex() },
-        onFocus: () => u(!0),
-        ...O()
+        onChange: (e) => j(e.target.value),
+        style: { "--chipColor": t(i).toHex() },
+        onFocus: () => d(!0),
+        ...M()
       }
     ),
     T && /* @__PURE__ */ f(
@@ -56,8 +56,8 @@ const _ = L((v, y) => {
       {
         ref: Z([y, x.setFloating]),
         className: C(h.colorPopper, F),
-        style: { ...S, ...M },
-        ...j(),
+        style: { ...S, ...E },
+        ...O(),
         children: [
           /* @__PURE__ */ f("div", { className: h.header, children: [
             /* @__PURE__ */ l("h1", { children: "Choose a color" }),
@@ -66,7 +66,7 @@ const _ = L((v, y) => {
               {
                 code: "f1da",
                 onClick: () => {
-                  i(d.toHsv()), a(d.toHex());
+                  n(u.toHsv()), a(u.toHex());
                 }
               }
             )
@@ -76,9 +76,9 @@ const _ = L((v, y) => {
             {
               shade: b,
               alpha: k,
-              color: n,
+              color: i,
               setColor: (e) => {
-                i(e), a(t(e).toHex());
+                n(e), a(t(e).toHex());
               }
             }
           )

package/dist/components/layout/ColorPopper/colorPopper.module.scss.js

@@ -1,12 +1,11 @@
-"use client";
-const o = "_colorInput_1pojq_1", e = "_colorPopper_1pojq_10", p = "_header_1pojq_22", r = {
+const o = "_colorInput_1pojq_1", p = "_colorPopper_1pojq_10", r = "_header_1pojq_22", e = {
   colorInput: o,
-  colorPopper: e,
-  header: p
+  colorPopper: p,
+  header: r
 };
 export {
   o as colorInput,
-  e as colorPopper,
-  r as default,
-  p as header
+  p as colorPopper,
+  e as default,
+  r as header
 };

package/dist/components/layout/Navigation/navigation.module.scss.js

@@ -1,4 +1,3 @@
-"use client";
 const r = "_navigation_1vrjr_1", o = "_brand_1vrjr_10", t = "_routeList_1vrjr_19", _ = "_route_1vrjr_19", n = "_icon_1vrjr_52", a = "_label_1vrjr_59", e = "_loading_1vrjr_79", i = "_barberPole_1vrjr_1", c = "_active_1vrjr_98", s = {
   navigation: r,
   brand: o,

package/dist/components/layout/Sider/sider.module.scss.js

@@ -1,4 +1,3 @@
-"use client";
 const e = "_sider_1dq8m_1", i = "_leftSiderContainer_1dq8m_13", t = "_rightSiderContainer_1dq8m_21", n = "_content_1dq8m_29", r = "_miniLeftSider_1dq8m_39", d = "_miniRightSider_1dq8m_46", _ = "_leftOpen_1dq8m_53", o = "_rightOpen_1dq8m_66", s = {
   sider: e,
   leftSiderContainer: i,

package/dist/components/layout/Sider/types.js

@@ -1,4 +1,3 @@
-"use client";
 const e = "closed";
 export {
   e as defaultSiderMode

package/dist/components/layout/SiderModal/siderModal.module.scss.js

@@ -1,20 +1,19 @@
-"use client";
-const o = "_siderModal_3x26c_1", c = "_header_3x26c_8", t = "_back_3x26c_16", _ = "_icon_3x26c_21", e = "_title_3x26c_21", s = "_footer_3x26c_28", d = "_body_3x26c_37", n = {
+const o = "_siderModal_3x26c_1", c = "_header_3x26c_8", _ = "_back_3x26c_16", t = "_icon_3x26c_21", e = "_title_3x26c_21", s = "_footer_3x26c_28", d = "_body_3x26c_37", a = {
   siderModal: o,
   header: c,
-  back: t,
-  icon: _,
+  back: _,
+  icon: t,
   title: e,
   footer: s,
   body: d
 };
 export {
-  t as back,
+  _ as back,
   d as body,
-  n as default,
+  a as default,
   s as footer,
   c as header,
-  _ as icon,
+  t as icon,
   o as siderModal,
   e as title
 };

package/dist/components/layout/ThemePicker/themePicker.module.scss.js

@@ -1,4 +1,3 @@
-"use client";
 const e = "_themePicker_18b3g_1", t = "_themeSchemes_18b3g_11", o = "_themeSchemeItem_18b3g_18", _ = "_system_18b3g_30", n = "_light_18b3g_51", c = "_dark_18b3g_60", s = "_design_18b3g_69", g = "_navigation_18b3g_77", i = "_navigationItem_18b3g_89", m = "_content_18b3g_102", a = "_header_18b3g_112", r = "_profile_18b3g_141", h = "_footer_18b3g_164", b = "_footerIcon_18b3g_175", l = "_footerLabel_18b3g_180", f = "_active_18b3g_191", d = "_themeColors_18b3g_203", v = {
   themePicker: e,
   themeSchemes: t,

package/dist/components/layout/ThemePicker/type.js

@@ -1,4 +1,3 @@
-"use client";
 var t = /* @__PURE__ */ ((l) => (l[l.mini = 128] = "mini", l[l.default = 180] = "default", l[l.large = 254] = "large", l))(t || {}), n = /* @__PURE__ */ ((l) => (l[l.mini = 16] = "mini", l[l.default = 24] = "default", l[l.large = 36] = "large", l))(n || {});
 export {
   n as EThemePickerGap,

package/dist/index.js

@@ -1,10 +1,9 @@
-"use client";
 import "./styles/index.scss.js";
 import { STORAGE as t } from "./utils/constants/commons.js";
-import { getLocalState as m, setLocalState as i } from "./utils/function/localStorage.js";
+import { getLocalState as m, setLocalState as f } from "./utils/function/localStorage.js";
 import { mergeRefs as x } from "./utils/function/mergeRefs.js";
 import { capitalizeFirstLetter as a, safeStringFromCodePoint as n, unicodeToString as S } from "./utils/function/string.js";
-import { doc as c, elementObserver as C, getCssProperty as P, getCssPropertyPx as d, getCssPropertyVh as g, getCssPropertyVw as E, isClient as u, localStore as y, setCssProperty as z, waitForElement as T, win as v } from "./utils/helper/domHelper.js";
+import { doc as c, elementObserver as C, getCssProperty as P, getCssPropertyPx as d, getCssPropertyVh as g, getCssPropertyVw as E, isClient as y, localStore as z, setCssProperty as T, waitForElement as u, win as v } from "./utils/helper/domHelper.js";
 import { themeController as L } from "./utils/helper/themeController.js";
 import { XProvider as w } from "./components/context/index.js";
 import { useXData as F, useXTheme as X } from "./components/context/useContext.js";
@@ -19,10 +18,10 @@ import { EIconSize as Q } from "./components/base/Icon/types.js";
 import { Lottie as W } from "./components/base/Lottie/Lottie.js";
 import { ELottieSize as Z } from "./components/base/Lottie/types.js";
 import { ProgressBar as $ } from "./components/base/ProgressBar/ProgressBar.js";
-import { Spinner as er } from "./components/base/Spinner/Spinner.js";
+import { Spinner as or } from "./components/base/Spinner/Spinner.js";
 import { ESpinnerSize as tr } from "./components/base/Spinner/types.js";
 import { Textfield as mr } from "./components/base/Textfield/Textfield.js";
-import { ColorPopper as fr } from "./components/layout/ColorPopper/ColorPopper.js";
+import { ColorPopper as ir } from "./components/layout/ColorPopper/ColorPopper.js";
 import { Sider as sr } from "./components/layout/Sider/Sider.js";
 import { SiderModal as nr } from "./components/layout/SiderModal/SiderModal.js";
 import { Navigation as lr } from "./components/layout/Navigation/Navigation.js";
@@ -31,7 +30,7 @@ export {
   O as ActionCard,
   k as Avatar,
   N as Button,
-  fr as ColorPopper,
+  ir as ColorPopper,
   V as EActionCardSize,
   G as EAvatarSize,
   q as EButtonTypes,
@@ -45,7 +44,7 @@ export {
   t as STORAGE,
   sr as Sider,
   nr as SiderModal,
-  er as Spinner,
+  or as Spinner,
   mr as Textfield,
   Cr as ThemePicker,
   w as XProvider,
@@ -57,16 +56,16 @@ export {
   g as getCssPropertyVh,
   E as getCssPropertyVw,
   m as getLocalState,
-  u as isClient,
-  y as localStore,
+  y as isClient,
+  z as localStore,
   x as mergeRefs,
   n as safeStringFromCodePoint,
-  z as setCssProperty,
-  i as setLocalState,
+  T as setCssProperty,
+  f as setLocalState,
   L as themeController,
   S as unicodeToString,
   F as useXData,
   X as useXTheme,
-  T as waitForElement,
+  u as waitForElement,
   v as win
 };