@solostylist/ui-kit 1.0.97 → 1.0.99

package/dist/main.d.ts

@@ -95,6 +95,10 @@ export { default as SImageComparison } from './s-image-comparison/index';
 export type { SImageComparisonProps } from './s-image-comparison/index';
 export { default as SRadialPulseAnimate } from './s-radial-pulse-animate/index';
 export type { SRadialPulseAnimateProps } from './s-radial-pulse-animate/index';
+export { default as SRating } from './s-rating/index';
+export type { SRatingProps } from './s-rating/index';
+export { STabs, STab, STabPanel } from './s-tabs/index';
+export type { STabsProps, STabItem, STabProps, STabPanelProps } from './s-tabs/index';
 export { default as STextShimmer } from './s-text-shimmer/index';
 export type { STextShimmerProps } from './s-text-shimmer/index';
 export * from './hooks';

package/dist/main.js

@@ -1,4 +1,4 @@
-import { default as t } from "./s-accordion/s-accordion.js";
+import { default as a } from "./s-accordion/s-accordion.js";
 import { default as f } from "./s-autocomplete/s-autocomplete.js";
 import { default as m } from "./s-avatar/s-avatar.js";
 import { default as p } from "./s-button/s-button.js";
@@ -6,16 +6,16 @@ import { default as S } from "./s-button-link/s-button-link.js";
 import { default as u } from "./s-carousel/s-carousel.js";
 import { default as n } from "./s-chat-input/s-chat-input.js";
 import { default as c } from "./s-chat-message/s-chat-message.js";
-import { default as D } from "./s-text-editor/s-text-editor.js";
+import { default as C } from "./s-text-editor/s-text-editor.js";
 import "./s-text-editor/s-text-editor-toolbar.js";
-import { default as T } from "./s-checkbox/s-checkbox.js";
-import { default as M } from "./s-chip/s-chip.js";
-import { default as b } from "./s-chips/s-chips.js";
+import { default as D } from "./s-checkbox/s-checkbox.js";
+import { default as v } from "./s-chip/s-chip.js";
+import { default as I } from "./s-chips/s-chips.js";
 import { default as L } from "./s-data-table/s-data-table.js";
 import { DialogConfirmProvider as y, default as F, useDialogConfirm as B } from "./s-dialog-confirm/s-dialog-confirm.js";
 import { DialogMessageProvider as A, default as E, useDialogMessage as G } from "./s-dialog-message/s-dialog-message.js";
-import { default as j } from "./s-error/s-error.js";
-import { default as K } from "./s-empty/s-empty.js";
+import { default as R } from "./s-error/s-error.js";
+import { default as w } from "./s-empty/s-empty.js";
 import { default as V } from "./s-dialog/s-dialog.js";
 import { default as H } from "./s-file-dropzone/s-file-dropzone.js";
 import { default as O } from "./s-file-icon/s-file-icon.js";
@@ -24,23 +24,23 @@ import { default as X } from "./s-icon-button/s-icon-button.js";
 import { default as Z } from "./s-label/s-label.js";
 import { default as $ } from "./s-multi-select/s-multi-select.js";
 import { default as oe } from "./s-no-ssr/s-no-ssr.js";
-import { default as te } from "./s-text-field/s-text-field.js";
+import { default as ae } from "./s-text-field/s-text-field.js";
 import { default as fe } from "./s-pagination/s-pagination.js";
 import { default as me } from "./s-select/s-select.js";
 import { default as pe } from "./s-skeleton/s-skeleton.js";
 import { default as Se } from "./s-tip/s-tip.js";
 import { default as ue } from "./s-text-truncation/s-text-truncation.js";
 import { default as ne, SnackbarMessageProvider as ge, useSnackbarMessage as ce } from "./s-snackbar-message/s-snackbar-message.js";
-import { default as De } from "./s-form/s-form.js";
-import { SSmartTextField as Te } from "./s-smart-text-field/s-smart-text-field.js";
-import { SCopilotKitProvider as Me } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
-import { SStripeCVC as be, SStripeExpiry as ke, SStripeNumber as Le, StripeTextField as he } from "./s-stripe/s-stripe.js";
+import { default as Ce } from "./s-form/s-form.js";
+import { SSmartTextField as De } from "./s-smart-text-field/s-smart-text-field.js";
+import { SCopilotKitProvider as ve } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
+import { SStripeCVC as Ie, SStripeExpiry as ke, SStripeNumber as Le, StripeTextField as he } from "./s-stripe/s-stripe.js";
 import { default as Fe } from "./s-theme-provider/s-theme-provider.js";
 import { default as ze } from "./s-datetime-picker/s-datetime-picker.js";
 import { default as Ee } from "./s-date-picker/s-date-picker.js";
 import { default as Ne } from "./s-localization-provider/s-localization-provider.js";
-import { default as we } from "./s-gradient-icon/s-gradient-icon.js";
-import { default as Re } from "./s-glow-button/s-glow-button.js";
+import { default as je } from "./s-gradient-icon/s-gradient-icon.js";
+import { default as Ke } from "./s-glow-button/s-glow-button.js";
 import { default as qe } from "./s-moving-border/s-moving-border.js";
 import { default as Je } from "./s-copyable-text/s-copyable-text.js";
 import { MediaItem as Qe, default as Ue } from "./s-interactive-gallery/s-interactive-gallery.js";
@@ -48,20 +48,24 @@ import { default as Xe } from "./s-image-modal/s-image-modal.js";
 import { default as Ze } from "./s-lazy-image/s-lazy-image.js";
 import { default as $e } from "./s-image-comparison/s-image-comparison.js";
 import { default as oo } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
-import { default as to } from "./s-text-shimmer/s-text-shimmer.js";
-import { useDialog as fo } from "./hooks/use-dialog.js";
-import { usePopover as mo } from "./hooks/use-popover.js";
-import { formatDatePosted as po } from "./utils/dayjs.js";
-import { bytesToSize as xo } from "./utils/bytes-to-size.js";
-import { LogLevel as io, Logger as no, createLogger as go, logger as co } from "./utils/logger.js";
-import { default as Do } from "dayjs";
+import { default as ao } from "./s-rating/s-rating.js";
+import { default as fo } from "./s-tabs/s-tabs.js";
+import { default as mo } from "./s-tabs/s-tab.js";
+import { default as po } from "./s-tabs/s-tab-panel.js";
+import { default as xo } from "./s-text-shimmer/s-text-shimmer.js";
+import { useDialog as io } from "./hooks/use-dialog.js";
+import { usePopover as go } from "./hooks/use-popover.js";
+import { formatDatePosted as To } from "./utils/dayjs.js";
+import { bytesToSize as Po } from "./utils/bytes-to-size.js";
+import { LogLevel as bo, Logger as vo, createLogger as Mo, logger as Io } from "./utils/logger.js";
+import { default as Lo } from "dayjs";
 export {
   y as DialogConfirmProvider,
   A as DialogMessageProvider,
-  io as LogLevel,
-  no as Logger,
+  bo as LogLevel,
+  vo as Logger,
   Qe as MediaItem,
-  t as SAccordion,
+  a as SAccordion,
   f as SAutocomplete,
   m as SAvatar,
   p as SButton,
@@ -69,10 +73,10 @@ export {
   u as SCarousel,
   n as SChatInput,
   c as SChatMessage,
-  T as SCheckbox,
-  M as SChip,
-  b as SChips,
-  Me as SCopilotKitProvider,
+  D as SCheckbox,
+  v as SChip,
+  I as SChips,
+  ve as SCopilotKitProvider,
   Je as SCopyableText,
   L as SDataTable,
   Ee as SDatePicker,
@@ -80,13 +84,13 @@ export {
   V as SDialog,
   F as SDialogConfirm,
   E as SDialogMessage,
-  K as SEmpty,
-  j as SError,
+  w as SEmpty,
+  R as SError,
   H as SFileDropzone,
   O as SFileIcon,
-  De as SForm,
-  Re as SGlowButton,
-  we as SGradientIcon,
+  Ce as SForm,
+  Ke as SGlowButton,
+  je as SGradientIcon,
   U as SI18nProvider,
   X as SIconButton,
   $e as SImageComparison,
@@ -100,29 +104,33 @@ export {
   oe as SNoSsr,
   fe as SPagination,
   oo as SRadialPulseAnimate,
+  ao as SRating,
   me as SSelect,
   pe as SSkeleton,
-  Te as SSmartTextField,
+  De as SSmartTextField,
   ne as SSnackbarMessage,
-  be as SStripeCVC,
+  Ie as SStripeCVC,
   ke as SStripeExpiry,
   Le as SStripeNumber,
-  D as STextEditor,
-  te as STextField,
-  to as STextShimmer,
+  mo as STab,
+  po as STabPanel,
+  fo as STabs,
+  C as STextEditor,
+  ae as STextField,
+  xo as STextShimmer,
   ue as STextTruncation,
   Fe as SThemeProvider,
   Se as STip,
   ge as SnackbarMessageProvider,
   he as StripeTextField,
-  xo as bytesToSize,
-  go as createLogger,
-  Do as dayjs,
-  po as formatDatePosted,
-  co as logger,
-  fo as useDialog,
+  Po as bytesToSize,
+  Mo as createLogger,
+  Lo as dayjs,
+  To as formatDatePosted,
+  Io as logger,
+  io as useDialog,
   B as useDialogConfirm,
   G as useDialogMessage,
-  mo as usePopover,
+  go as usePopover,
   ce as useSnackbarMessage
 };

package/dist/s-chat-input/s-chat-input.js

@@ -1,64 +1,71 @@
-import { j as t } from "../jsx-runtime-DywqP_6a.js";
-import { forwardRef as k, useState as x, useId as F, useEffect as E } from "react";
-import { Box as o, outlinedInputClasses as K } from "@mui/material";
-import A from "../s-file-icon/s-file-icon.js";
-import j from "../s-icon-button/s-icon-button.js";
-import O from "../s-text-field/s-text-field.js";
-import { C as P } from "../Close-BSG2-e7H.js";
-import { b } from "../createSvgIcon-CS-Z7P80.js";
-const W = b(/* @__PURE__ */ t.jsx("path", {
+import { j as r } from "../jsx-runtime-DywqP_6a.js";
+import { forwardRef as F, useState as c, useRef as K, useId as O, useEffect as B } from "react";
+import { Box as s, outlinedInputClasses as T, Popper as W, ClickAwayListener as D } from "@mui/material";
+import H from "emoji-picker-react";
+import _ from "../s-file-icon/s-file-icon.js";
+import d from "../s-icon-button/s-icon-button.js";
+import q from "../s-text-field/s-text-field.js";
+import { C as G } from "../Close-BSG2-e7H.js";
+import { b as v } from "../createSvgIcon-CS-Z7P80.js";
+const J = v(/* @__PURE__ */ r.jsx("path", {
   d: "m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z"
-}), "ArrowUpward"), B = b(/* @__PURE__ */ t.jsx("path", {
+}), "ArrowUpward"), N = v(/* @__PURE__ */ r.jsx("path", {
   d: "M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6z"
-}), "AttachFile"), N = k(
-  ({ onSubmit: c, onFileSelect: d, disabled: i, acceptedFileTypes: I, maxFileSize: g, ...C }, U) => {
-    const [p, v] = x(""), [l, m] = x([]), [a, h] = x(/* @__PURE__ */ new Map()), w = F(), u = (e) => e.type.startsWith("image/"), z = (e) => {
-      const s = `${e.name}-${e.size}-${e.lastModified}`;
-      if (a.has(s))
-        return a.get(s);
-      if (u(e)) {
-        const r = URL.createObjectURL(e);
-        return h((n) => new Map(n).set(s, r)), r;
+}), "AttachFile"), Q = v(/* @__PURE__ */ r.jsx("path", {
+  d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8M12 18c-2.28 0-4.22-1.66-5-4h10c-.78 2.34-2.72 4-5 4m3.5-7c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5"
+}), "EmojiEmotions"), ae = F(
+  ({ onSubmit: p, onFileSelect: m, disabled: a, acceptedFileTypes: E, maxFileSize: k, ...z }, M) => {
+    const [u, h] = c(""), [l, x] = c([]), [i, f] = c(/* @__PURE__ */ new Map()), [C, g] = c(!1), y = K(null), w = O(), b = (e) => e.type.startsWith("image/"), U = (e) => {
+      const o = `${e.name}-${e.size}-${e.lastModified}`;
+      if (i.has(o))
+        return i.get(o);
+      if (b(e)) {
+        const n = URL.createObjectURL(e);
+        return f((t) => new Map(t).set(o, n)), n;
       }
       return "";
-    }, $ = (e) => {
-      v(e.target.value);
-    }, y = () => {
-      i || p.trim().length === 0 && l.length === 0 || (c == null || c(p, l), v(""), a.forEach((e) => URL.revokeObjectURL(e)), h(/* @__PURE__ */ new Map()), m([]));
     }, L = (e) => {
-      const r = Array.from(e.target.files || []).filter((n) => !(g && n.size > g));
-      m((n) => [...n, ...r]), d == null || d(r), e.target.value = "";
-    }, M = (e) => {
-      const s = l[e];
-      if (s && u(s)) {
-        const r = `${s.name}-${s.size}-${s.lastModified}`, n = a.get(r);
-        n && (URL.revokeObjectURL(n), h((f) => {
-          const R = new Map(f);
-          return R.delete(r), R;
+      h(e.target.value);
+    }, $ = (e) => {
+      h((o) => o + e.emoji), g(!1);
+    }, P = () => {
+      g(!C);
+    }, R = () => {
+      a || u.trim().length === 0 && l.length === 0 || (p == null || p(u, l), h(""), i.forEach((e) => URL.revokeObjectURL(e)), f(/* @__PURE__ */ new Map()), x([]));
+    }, S = (e) => {
+      const n = Array.from(e.target.files || []).filter((t) => !(k && t.size > k));
+      x((t) => [...t, ...n]), m == null || m(n), e.target.value = "";
+    }, V = (e) => {
+      const o = l[e];
+      if (o && b(o)) {
+        const n = `${o.name}-${o.size}-${o.lastModified}`, t = i.get(n);
+        t && (URL.revokeObjectURL(t), f((j) => {
+          const I = new Map(j);
+          return I.delete(n), I;
         }));
       }
-      m((r) => r.filter((n, f) => f !== e));
-    }, V = (e) => {
-      e.key === "Enter" && !e.shiftKey && (e.preventDefault(), y());
+      x((n) => n.filter((t, j) => j !== e));
+    }, A = (e) => {
+      e.key === "Enter" && !e.shiftKey && (e.preventDefault(), R());
     };
-    return E(() => () => {
-      a.forEach((e) => URL.revokeObjectURL(e));
-    }, [a]), /* @__PURE__ */ t.jsxs(o, { border: "1px solid", borderColor: "divider", borderRadius: 2, padding: "8px 12px", children: [
-      /* @__PURE__ */ t.jsx(
-        O,
+    return B(() => () => {
+      i.forEach((e) => URL.revokeObjectURL(e));
+    }, [i]), /* @__PURE__ */ r.jsxs(s, { border: "1px solid", borderColor: "divider", borderRadius: 2, padding: "8px 12px", children: [
+      /* @__PURE__ */ r.jsx(
+        q,
         {
           placeholder: "Enter your message here...",
-          disabled: i,
-          value: p,
-          onChange: $,
-          onKeyDown: V,
+          disabled: a,
+          value: u,
+          onChange: L,
+          onKeyDown: A,
           multiline: !0,
           minRows: 1,
           maxRows: 10,
           size: "small",
           variant: "outlined",
           fullWidth: !0,
-          inputRef: U,
+          inputRef: M,
           slotProps: {
             input: {
               sx: {
@@ -66,7 +73,7 @@ const W = b(/* @__PURE__ */ t.jsx("path", {
                 backgroundColor: "transparent",
                 border: "none",
                 padding: 0,
-                [`&.${K.focused}`]: {
+                [`&.${T.focused}`]: {
                   outline: "none"
                 },
                 "& fieldset": {
@@ -81,13 +88,13 @@ const W = b(/* @__PURE__ */ t.jsx("path", {
               }
             }
           },
-          ...C
+          ...z
         }
       ),
-      l.length > 0 && /* @__PURE__ */ t.jsx(o, { mt: 1, children: l.map((e, s) => {
-        const r = u(e), n = e.name.split(".").pop();
-        return /* @__PURE__ */ t.jsxs(
-          o,
+      l.length > 0 && /* @__PURE__ */ r.jsx(s, { mt: 1, children: l.map((e, o) => {
+        const n = b(e), t = e.name.split(".").pop();
+        return /* @__PURE__ */ r.jsxs(
+          s,
           {
             display: "flex",
             alignItems: "center",
@@ -100,12 +107,12 @@ const W = b(/* @__PURE__ */ t.jsx("path", {
               mb: 0.5
             },
             children: [
-              /* @__PURE__ */ t.jsxs(o, { display: "flex", alignItems: "center", gap: 1, children: [
-                r ? /* @__PURE__ */ t.jsx(
-                  o,
+              /* @__PURE__ */ r.jsxs(s, { display: "flex", alignItems: "center", gap: 1, children: [
+                n ? /* @__PURE__ */ r.jsx(
+                  s,
                   {
                     component: "img",
-                    src: z(e),
+                    src: U(e),
                     alt: e.name,
                     sx: {
                       width: 40,
@@ -115,41 +122,41 @@ const W = b(/* @__PURE__ */ t.jsx("path", {
                       border: "1px solid var(--s-palette-divider)"
                     }
                   }
-                ) : /* @__PURE__ */ t.jsx(A, { extension: n }),
-                /* @__PURE__ */ t.jsxs(o, { children: [
-                  /* @__PURE__ */ t.jsx(o, { component: "span", sx: { fontSize: "0.875rem", fontWeight: 500 }, children: e.name }),
-                  /* @__PURE__ */ t.jsxs(o, { component: "span", sx: { fontSize: "0.75rem", color: "text.secondary", ml: 1 }, children: [
+                ) : /* @__PURE__ */ r.jsx(_, { extension: t }),
+                /* @__PURE__ */ r.jsxs(s, { children: [
+                  /* @__PURE__ */ r.jsx(s, { component: "span", sx: { fontSize: "0.875rem", fontWeight: 500 }, children: e.name }),
+                  /* @__PURE__ */ r.jsxs(s, { component: "span", sx: { fontSize: "0.75rem", color: "text.secondary", ml: 1 }, children: [
                     "(",
                     Math.round(e.size / 1024),
                     " KB)"
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ t.jsx(j, { size: "small", onClick: () => M(s), sx: { minWidth: "auto", p: 0.5 }, children: /* @__PURE__ */ t.jsx(P, {}) })
+              /* @__PURE__ */ r.jsx(d, { size: "small", onClick: () => V(o), sx: { minWidth: "auto", p: 0.5 }, children: /* @__PURE__ */ r.jsx(G, {}) })
             ]
           },
-          `${e.name}-${s}`
+          `${e.name}-${o}`
         );
       }) }),
-      /* @__PURE__ */ t.jsxs(o, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 1, children: [
-        /* @__PURE__ */ t.jsxs(o, { children: [
-          /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ r.jsxs(s, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 1, children: [
+        /* @__PURE__ */ r.jsxs(s, { display: "flex", gap: 1, children: [
+          /* @__PURE__ */ r.jsx(
             "input",
             {
               type: "file",
               multiple: !0,
-              accept: I,
-              onChange: L,
+              accept: E,
+              onChange: S,
               style: { display: "none" },
               id: `file-attachment-input-${w}`,
-              disabled: i
+              disabled: a
             }
           ),
-          /* @__PURE__ */ t.jsx("label", { htmlFor: `file-attachment-input-${w}`, children: /* @__PURE__ */ t.jsx(
-            j,
+          /* @__PURE__ */ r.jsx("label", { htmlFor: `file-attachment-input-${w}`, children: /* @__PURE__ */ r.jsx(
+            d,
             {
               component: "span",
-              disabled: i,
+              disabled: a,
               size: "small",
               sx: {
                 transition: "transform 0.3s ease",
@@ -157,15 +164,31 @@ const W = b(/* @__PURE__ */ t.jsx("path", {
                   transform: "scale(1.1)"
                 }
               },
-              children: /* @__PURE__ */ t.jsx(B, {})
+              children: /* @__PURE__ */ r.jsx(N, {})
             }
-          ) })
+          ) }),
+          /* @__PURE__ */ r.jsx(
+            d,
+            {
+              ref: y,
+              onClick: P,
+              disabled: a,
+              size: "small",
+              sx: {
+                transition: "transform 0.3s ease",
+                "&:hover": {
+                  transform: "scale(1.1)"
+                }
+              },
+              children: /* @__PURE__ */ r.jsx(Q, {})
+            }
+          )
         ] }),
-        /* @__PURE__ */ t.jsx(
-          j,
+        /* @__PURE__ */ r.jsx(
+          d,
           {
-            onClick: y,
-            disabled: i,
+            onClick: R,
+            disabled: a,
             size: "small",
             sx: {
               transition: "transform 0.3s ease",
@@ -173,13 +196,116 @@ const W = b(/* @__PURE__ */ t.jsx("path", {
                 transform: "scale(1.2)"
               }
             },
-            children: /* @__PURE__ */ t.jsx(W, {})
+            children: /* @__PURE__ */ r.jsx(J, {})
           }
         )
-      ] })
+      ] }),
+      /* @__PURE__ */ r.jsx(W, { open: C, anchorEl: y.current, placement: "top-start", sx: { zIndex: 1300 }, children: /* @__PURE__ */ r.jsx(D, { onClickAway: () => g(!1), children: /* @__PURE__ */ r.jsx(
+        s,
+        {
+          sx: {
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: 1,
+            overflow: "hidden",
+            "& .epr-main": {
+              backgroundColor: "background.paper",
+              border: "none"
+            },
+            "& .epr-header": {
+              backgroundColor: "background.paper"
+            },
+            "& .epr-search-container": {
+              backgroundColor: "background.paper"
+            },
+            "& .epr-search-container > .epr-icn-search": {
+              display: "none"
+            },
+            "& .epr-search-container > input": {
+              backgroundColor: "background.default",
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: 1,
+              color: "text.primary",
+              padding: "8px 12px",
+              "&:focus": {
+                outline: "none",
+                borderColor: "primary.main"
+              },
+              "&::placeholder": {
+                color: "text.secondary"
+              }
+            },
+            "& .epr-category-nav": {
+              backgroundColor: "background.paper",
+              borderBottom: "1px solid",
+              borderColor: "divider",
+              padding: "0px 8px 8px 8px"
+            },
+            "& .epr-cat-btn": {
+              backgroundColor: "transparent !important",
+              border: "none",
+              transition: "all 0.2s ease"
+            },
+            "& .epr-body": {
+              backgroundColor: "background.paper"
+            },
+            "& .epr-emoji-category-label": {
+              backgroundColor: "background.paper",
+              color: "text.primary",
+              fontSize: 12,
+              fontWeight: 600,
+              padding: "8px 16px 4px",
+              textTransform: "uppercase",
+              letterSpacing: "0.5px"
+            },
+            "& .epr-emoji-list": {
+              backgroundColor: "background.paper"
+            },
+            "& .epr-emoji": {
+              borderRadius: 1,
+              margin: "2px",
+              transition: "all 0.2s ease",
+              "&:hover": {
+                backgroundColor: "action.hover",
+                transform: "scale(1.1)"
+              },
+              "&:active": {
+                transform: "scale(0.95)"
+              }
+            },
+            "& .epr-skin-tones": {
+              backgroundColor: "background.paper",
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: 1,
+              display: "none"
+            },
+            "& .epr-tone": {
+              border: "none",
+              borderRadius: 1,
+              transition: "all 0.2s ease",
+              "&:hover": {
+                transform: "scale(1.1)"
+              }
+            }
+          },
+          children: /* @__PURE__ */ r.jsx(
+            H,
+            {
+              onEmojiClick: $,
+              width: 300,
+              height: 400,
+              searchDisabled: !1,
+              skinTonesDisabled: !1,
+              previewConfig: { showPreview: !1 }
+            }
+          )
+        }
+      ) }) })
     ] });
   }
 );
 export {
-  N as default
+  ae as default
 };

package/dist/s-label/s-label.js

@@ -1,21 +1,15 @@
 import { j as e } from "../jsx-runtime-DywqP_6a.js";
-import { b as r } from "../createSvgIcon-CS-Z7P80.js";
-import { Stack as i, Tooltip as s } from "@mui/material";
-const c = r(/* @__PURE__ */ e.jsx("path", {
+import { b as s } from "../createSvgIcon-CS-Z7P80.js";
+import { Stack as o, Box as c, Tooltip as l } from "@mui/material";
+const m = s(/* @__PURE__ */ e.jsx("path", {
   d: "M11 18h2v-2h-2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4"
-}), "HelpOutlineOutlined"), d = ({ label: n, children: l, hint: t, sx: o }) => /* @__PURE__ */ e.jsxs(i, { width: "100%", sx: o, children: [
-  /* @__PURE__ */ e.jsxs(i, { direction: "row", alignItems: "center", children: [
-    /* @__PURE__ */ e.jsx(
-      "div",
-      {
-        style: { fontSize: "0.875rem", fontWeight: 500, lineHeight: 1.57, color: "var(--s-palette-text-secondary)" },
-        children: n
-      }
-    ),
-    t ? /* @__PURE__ */ e.jsx(s, { title: t, placement: "top", children: /* @__PURE__ */ e.jsx(c, { style: { marginLeft: "4px", fontSize: 16 } }) }) : null
+}), "HelpOutlineOutlined"), p = ({ label: n, children: r, hint: t, sx: i }) => /* @__PURE__ */ e.jsxs(o, { width: "100%", sx: i, children: [
+  /* @__PURE__ */ e.jsxs(o, { direction: "row", alignItems: "center", mb: 1, children: [
+    /* @__PURE__ */ e.jsx(c, { sx: { fontSize: "0.875rem", fontWeight: 500, lineHeight: 1.57, color: "text.secondary" }, children: n }),
+    t ? /* @__PURE__ */ e.jsx(l, { title: t, placement: "top", children: /* @__PURE__ */ e.jsx(m, { sx: { marginLeft: "4px", fontSize: 16, color: "text.secondary" } }) }) : null
   ] }),
-  l
+  r
 ] });
 export {
-  d as default
+  p as default
 };

package/dist/s-rating/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-rating';
+export type { SRatingProps } from './s-rating';

package/dist/s-rating/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./s-rating.js";
+export {
+  o as default
+};

package/dist/s-rating/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

package/dist/s-rating/s-rating.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { RatingProps } from '@mui/material';
+export interface SRatingProps extends RatingProps {
+}
+declare const SRating: React.ForwardRefExoticComponent<Omit<SRatingProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default SRating;

package/dist/s-rating/s-rating.js

@@ -0,0 +1,7 @@
+import { j as o } from "../jsx-runtime-DywqP_6a.js";
+import { forwardRef as m } from "react";
+import { Rating as a } from "@mui/material";
+const e = m((r, t) => /* @__PURE__ */ o.jsx(a, { ref: t, ...r }));
+export {
+  e as default
+};

package/dist/s-tabs/index.d.ts

@@ -0,0 +1,6 @@
+export { default as STabs } from './s-tabs';
+export type { STabsProps, STabItem } from './s-tabs';
+export { default as STab } from './s-tab';
+export type { STabProps } from './s-tab';
+export { default as STabPanel } from './s-tab-panel';
+export type { STabPanelProps } from './s-tab-panel';

package/dist/s-tabs/index.js

@@ -0,0 +1,8 @@
+import { default as f } from "./s-tabs.js";
+import { default as r } from "./s-tab.js";
+import { default as l } from "./s-tab-panel.js";
+export {
+  r as STab,
+  l as STabPanel,
+  f as STabs
+};

package/dist/s-tabs/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "s-tabs",
+  "main": "./index.ts"
+}

package/dist/s-tabs/s-tab-panel.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { BoxProps } from '@mui/material';
+export interface STabPanelProps extends BoxProps {
+    children?: React.ReactNode;
+    index: number;
+    value: number;
+    keepMounted?: boolean;
+}
+declare const STabPanel: React.ForwardRefExoticComponent<Omit<STabPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default STabPanel;

package/dist/s-tabs/s-tab-panel.js

@@ -0,0 +1,28 @@
+import { j as d } from "../jsx-runtime-DywqP_6a.js";
+import { forwardRef as i } from "react";
+import { Box as p } from "@mui/material";
+const b = i(
+  ({ children: o, value: r, index: a, keepMounted: l = !1, sx: t, ...s }, n) => {
+    const e = r === a;
+    return e || l ? /* @__PURE__ */ d.jsx(
+      p,
+      {
+        ref: n,
+        role: "tabpanel",
+        hidden: !e,
+        id: `tabpanel-${a}`,
+        "aria-labelledby": `tab-${a}`,
+        sx: {
+          ...t,
+          display: e ? "block" : "none"
+        },
+        ...s,
+        children: o
+      }
+    ) : null;
+  }
+);
+b.displayName = "STabPanel";
+export {
+  b as default
+};

package/dist/s-tabs/s-tab.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { TabProps } from '@mui/material';
+export interface STabProps extends TabProps {
+}
+declare const STab: React.ForwardRefExoticComponent<Omit<STabProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default STab;

package/dist/s-tabs/s-tab.js

@@ -0,0 +1,8 @@
+import { j as a } from "../jsx-runtime-DywqP_6a.js";
+import { forwardRef as t } from "react";
+import { Tab as m } from "@mui/material";
+const s = t((r, o) => /* @__PURE__ */ a.jsx(m, { ref: o, ...r }));
+s.displayName = "STab";
+export {
+  s as default
+};

package/dist/s-tabs/s-tabs.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { BoxProps, TabProps, TabsProps } from '@mui/material';
+export interface STabsProps extends Omit<TabsProps, 'children'> {
+    tabs: STabItem[];
+    activeTab?: number | false;
+    onTabChange?: (event: React.SyntheticEvent, value: any) => void;
+    children?: React.ReactNode;
+    tabPanelProps?: BoxProps;
+}
+export interface STabItem {
+    label: React.ReactNode;
+    value?: any;
+    disabled?: boolean;
+    icon?: React.ReactElement;
+    iconPosition?: 'start' | 'end' | 'top' | 'bottom';
+    wrapped?: boolean;
+    tabProps?: Omit<TabProps, 'label' | 'value' | 'disabled' | 'icon' | 'iconPosition' | 'wrapped'>;
+}
+declare const STabs: React.ForwardRefExoticComponent<Omit<STabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default STabs;

package/dist/s-tabs/s-tabs.js

@@ -0,0 +1,34 @@
+import { j as o } from "../jsx-runtime-DywqP_6a.js";
+import i, { forwardRef as c } from "react";
+import { Tabs as x, Tab as j, Box as P } from "@mui/material";
+const R = c(
+  ({ tabs: t, activeTab: e = 0, onTabChange: l, children: d, tabPanelProps: a, ...n }, m) => {
+    const [p, f] = i.useState(e);
+    i.useEffect(() => {
+      e !== !1 && f(e);
+    }, [e]);
+    const u = (s, r) => {
+      e === !1 && f(r), l == null || l(s, r);
+    };
+    return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+      /* @__PURE__ */ o.jsx(x, { ref: m, value: p, onChange: u, ...n, children: t.map((s, r) => /* @__PURE__ */ o.jsx(
+        j,
+        {
+          label: s.label,
+          value: s.value ?? r,
+          disabled: s.disabled,
+          icon: s.icon,
+          iconPosition: s.iconPosition,
+          wrapped: s.wrapped,
+          ...s.tabProps
+        },
+        r
+      )) }),
+      d && /* @__PURE__ */ o.jsx(P, { role: "tabpanel", padding: 2, ...a, children: i.Children.toArray(d)[p] })
+    ] });
+  }
+);
+R.displayName = "STabs";
+export {
+  R as default
+};

package/dist/theme/customizations/navigation.js

@@ -1,12 +1,12 @@
 import { j as t } from "../../jsx-runtime-DywqP_6a.js";
 import * as i from "react";
-import { b as l } from "../../createSvgIcon-CS-Z7P80.js";
-import { gray as o, brand as s } from "../theme-primitives.js";
+import { b as s } from "../../createSvgIcon-CS-Z7P80.js";
+import { gray as o, brand as l } from "../theme-primitives.js";
 import { t as a } from "../../tabClasses-Bub2PPlp.js";
 import { a as d } from "../../colorManipulator-ep5lERxB.js";
-const n = l(/* @__PURE__ */ t.jsx("path", {
+const n = s(/* @__PURE__ */ t.jsx("path", {
   d: "m12 5.83 2.46 2.46c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L12.7 3.7a.996.996 0 0 0-1.41 0L8.12 6.88c-.39.39-.39 1.02 0 1.41s1.02.39 1.41 0zm0 12.34-2.46-2.46a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l3.17 3.18c.39.39 1.02.39 1.41 0l3.17-3.17c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
-}), "UnfoldMoreRounded"), g = {
+}), "UnfoldMoreRounded"), y = {
   MuiAppBar: {
     styleOverrides: {
       root: ({ theme: r }) => ({
@@ -77,7 +77,7 @@ const n = l(/* @__PURE__ */ t.jsx("path", {
           width: 0
         },
         "&:focus-visible": {
-          outline: `3px solid ${d(s[500], 0.5)}`,
+          outline: `3px solid ${d(l[500], 0.5)}`,
           outlineOffset: "4px",
           borderRadius: "2px"
         }
@@ -132,21 +132,17 @@ const n = l(/* @__PURE__ */ t.jsx("path", {
         borderLeft: "none",
         borderRight: "none",
         ":hover": {
-          color: (r.vars || r).palette.text.primary,
-          backgroundColor: (r.vars || r).palette.action.hover
+          color: (r.vars || r).palette.text.primary
         },
         [`&.${a.selected}`]: {
-          color: (r.vars || r).palette.text.primary,
-          backgroundColor: (r.vars || r).palette.action.selected
+          color: (r.vars || r).palette.text.primary
         },
         ...r.applyStyles("dark", {
           ":hover": {
-            color: (r.vars || r).palette.text.primary,
-            backgroundColor: (r.vars || r).palette.action.hover
+            color: (r.vars || r).palette.text.primary
           },
           [`&.${a.selected}`]: {
-            color: (r.vars || r).palette.text.primary,
-            backgroundColor: (r.vars || r).palette.action.selected
+            color: (r.vars || r).palette.text.primary
           }
         })
       })
@@ -216,5 +212,5 @@ const n = l(/* @__PURE__ */ t.jsx("path", {
   }
 };
 export {
-  g as navigationCustomizations
+  y as navigationCustomizations
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.97",
+  "version": "1.0.99",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",
@@ -55,7 +55,8 @@
     "react-router-dom": "^7.8.2",
     "react-slick": "^0.31.0",
     "slick-carousel": "^1.8.1",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.0",
+    "emoji-picker-react": "^4.13.3"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.4.2",