@solostylist/ui-kit 1.0.44 → 1.0.45

package/dist/main.d.ts

@@ -52,6 +52,8 @@ export { default as SForm } from './s-form/index';
 export type { SFormProps } from './s-form/index';
 export { default as SSmartTextField } from './s-smart-text-field/index';
 export type { SSmartTextFieldProps } from './s-smart-text-field/index';
+export { SStripeNumber, SStripeExpiry, SStripeCVC, StripeTextField } from './s-stripe/index';
+export type { StripeTextFieldProps, StripeElement } from './s-stripe/index';
 export { default as SThemeProvider } from './s-theme-provider/index';
 export type { SThemeProviderProps } from './s-theme-provider/index';
 export * from './hooks';

package/dist/main.js

@@ -1,81 +1,86 @@
 import { default as r } from "./s-autocomplete/s-autocomplete.js";
-import { default as t } from "./s-button-link/s-button-link.js";
+import { default as a } from "./s-button-link/s-button-link.js";
 import { default as l } from "./s-text-editor/s-text-editor.js";
 import { default as m } from "./s-checkbox/s-checkbox.js";
-import { default as x } from "./s-chips/s-chips.js";
-import { default as u } from "./s-data-table/s-data-table.js";
+import { default as S } from "./s-chips/s-chips.js";
+import { default as d } from "./s-data-table/s-data-table.js";
 import { DialogConfirmProvider as i, default as g, useDialogConfirm as n } from "./s-dialog-confirm/s-dialog-confirm.js";
-import { DialogMessageProvider as D, default as T, useDialogMessage as P } from "./s-dialog-message/s-dialog-message.js";
+import { DialogMessageProvider as D, default as T, useDialogMessage as b } from "./s-dialog-message/s-dialog-message.js";
 import { default as v } from "./s-error/s-error.js";
-import { default as k } from "./s-empty/s-empty.js";
-import { default as C } from "./s-dialog/s-dialog.js";
+import { default as M } from "./s-empty/s-empty.js";
+import { default as F } from "./s-dialog/s-dialog.js";
 import { default as y } from "./s-file-dropzone/s-file-dropzone.js";
-import { default as h } from "./s-file-icon/s-file-icon.js";
+import { default as I } from "./s-file-icon/s-file-icon.js";
 import { default as z } from "./s-i18n-provider/s-i18n-provider.js";
-import { default as j } from "./s-icon-button/s-icon-button.js";
-import { default as G } from "./s-label/s-label.js";
-import { default as q } from "./s-multi-select/s-multi-select.js";
-import { default as H } from "./s-no-ssr/s-no-ssr.js";
-import { default as K } from "./s-text-field/s-text-field.js";
-import { default as Q } from "./s-pagination/s-pagination.js";
-import { default as U } from "./s-select/s-select.js";
+import { default as N } from "./s-icon-button/s-icon-button.js";
+import { default as A } from "./s-label/s-label.js";
+import { default as V } from "./s-multi-select/s-multi-select.js";
+import { default as w } from "./s-no-ssr/s-no-ssr.js";
+import { default as J } from "./s-text-field/s-text-field.js";
+import { default as O } from "./s-pagination/s-pagination.js";
+import { default as R } from "./s-select/s-select.js";
 import { default as W } from "./s-skeleton/s-skeleton.js";
 import { default as Y } from "./s-tip/s-tip.js";
 import { default as _ } from "./s-text-truncation/s-text-truncation.js";
 import { default as ee, SnackbarMessageProvider as oe, useSnackbarMessage as re } from "./s-snackbar-message/s-snackbar-message.js";
-import { default as te } from "./s-image-gallery/s-image-gallery.js";
+import { default as ae } from "./s-image-gallery/s-image-gallery.js";
 import { default as le } from "./s-form/s-form.js";
-import { SSmartTextField as me } from "./s-smart-text-field/s-text-field.js";
-import { default as xe } from "./s-theme-provider/s-theme-provider.js";
-import { useDialog as ue } from "./hooks/use-dialog.js";
-import { usePopover as ie } from "./hooks/use-popover.js";
-import { formatDatePosted as ne } from "./utils/dayjs.js";
-import { bytesToSize as De } from "./utils/bytes-to-size.js";
-import { LogLevel as Pe, Logger as be, createLogger as ve, logger as Me } from "./utils/logger.js";
-import { default as Le } from "dayjs";
+import { SSmartTextField as me } from "./s-smart-text-field/s-smart-text-field.js";
+import { SStripeCVC as Se, SStripeExpiry as xe, SStripeNumber as de, StripeTextField as ue } from "./s-stripe/s-stripe.js";
+import { default as ge } from "./s-theme-provider/s-theme-provider.js";
+import { useDialog as ce } from "./hooks/use-dialog.js";
+import { usePopover as Te } from "./hooks/use-popover.js";
+import { formatDatePosted as Pe } from "./utils/dayjs.js";
+import { bytesToSize as Ce } from "./utils/bytes-to-size.js";
+import { LogLevel as ke, Logger as Fe, createLogger as Le, logger as ye } from "./utils/logger.js";
+import { default as Ie } from "dayjs";
 export {
   i as DialogConfirmProvider,
   D as DialogMessageProvider,
-  Pe as LogLevel,
-  be as Logger,
+  ke as LogLevel,
+  Fe as Logger,
   r as SAutocomplete,
-  t as SButtonLink,
+  a as SButtonLink,
   m as SCheckbox,
-  x as SChips,
-  u as SDataTable,
-  C as SDialog,
+  S as SChips,
+  d as SDataTable,
+  F as SDialog,
   g as SDialogConfirm,
   T as SDialogMessage,
-  k as SEmpty,
+  M as SEmpty,
   v as SError,
   y as SFileDropzone,
-  h as SFileIcon,
+  I as SFileIcon,
   le as SForm,
   z as SI18nProvider,
-  j as SIconButton,
-  te as SImageGallery,
-  G as SLabel,
-  q as SMultiSelect,
-  H as SNoSsr,
-  Q as SPagination,
-  U as SSelect,
+  N as SIconButton,
+  ae as SImageGallery,
+  A as SLabel,
+  V as SMultiSelect,
+  w as SNoSsr,
+  O as SPagination,
+  R as SSelect,
   W as SSkeleton,
   me as SSmartTextField,
   ee as SSnackbarMessage,
+  Se as SStripeCVC,
+  xe as SStripeExpiry,
+  de as SStripeNumber,
   l as STextEditor,
-  K as STextField,
+  J as STextField,
   _ as STextTruncation,
-  xe as SThemeProvider,
+  ge as SThemeProvider,
   Y as STip,
   oe as SnackbarMessageProvider,
-  De as bytesToSize,
-  ve as createLogger,
-  Le as dayjs,
-  ne as formatDatePosted,
-  Me as logger,
-  ue as useDialog,
+  ue as StripeTextField,
+  Ce as bytesToSize,
+  Le as createLogger,
+  Ie as dayjs,
+  Pe as formatDatePosted,
+  ye as logger,
+  ce as useDialog,
   n as useDialogConfirm,
-  P as useDialogMessage,
-  ie as usePopover,
+  b as useDialogMessage,
+  Te as usePopover,
   re as useSnackbarMessage
 };

package/dist/s-smart-text-field/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './s-text-field';
-export type { SSmartTextFieldProps } from './s-text-field';
+export { default } from './s-smart-text-field';
+export type { SSmartTextFieldProps } from './s-smart-text-field';

package/dist/s-smart-text-field/index.js

@@ -1,4 +1,4 @@
-import { SSmartTextField as a } from "./s-text-field.js";
+import { SSmartTextField as a } from "./s-smart-text-field.js";
 export {
   a as default
 };

package/dist/s-smart-text-field/{s-text-field.d.ts → s-smart-text-field.d.ts}

@@ -1,3 +1,4 @@
+import { CopilotKitProps } from '@copilotkit/react-core';
 import { AutosuggestionsConfigUserSpecified, CopilotTextarea } from '@copilotkit/react-textarea';
 export type SSmartTextFieldProps = Omit<React.ComponentProps<typeof CopilotTextarea>, 'autosuggestionsConfig'> & {
     autosuggestionsConfig?: AutosuggestionsConfigUserSpecified;
@@ -6,6 +7,7 @@ export type SSmartTextFieldProps = Omit<React.ComponentProps<typeof CopilotTexta
     error?: string;
     required?: boolean;
     htmlFor?: string;
+    copilotKitProps: Omit<CopilotKitProps, 'children'>;
 };
-export declare function SSmartTextField({ autosuggestionsConfig, label, hint, error, required, htmlFor, ...props }: SSmartTextFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function SSmartTextField({ autosuggestionsConfig, label, hint, error, required, htmlFor, copilotKitProps, ...props }: SSmartTextFieldProps): import("react/jsx-runtime").JSX.Element;
 export default SSmartTextField;

package/dist/s-smart-text-field/{s-text-field.js → s-smart-text-field.js}

@@ -27124,10 +27124,10 @@ const $N = Vv(RN)(({ theme: e }) => ({
     }
   ]
 })), MN = {
-  textareaPurpose: "Create a detailed prompt for an image-to-image AI model (e.g., ControlNet, Stable Diffusion img2img, or Photoshop Generative Fill) that transforms a given input image into a new visual style or concept. The prompt should include guidance on what changes to apply (e.g., style, environment, pose, lighting, or composition), while preserving key subject details.",
+  textareaPurpose: "",
   chatApiConfigs: {
     suggestionsApiConfig: {
-      maxTokens: 100,
+      maxTokens: 512,
       stop: [".", "?", "!"]
     }
   }
@@ -27139,9 +27139,10 @@ function ZN({
   error: r,
   required: i = !1,
   htmlFor: a,
-  ...o
+  copilotKitProps: o,
+  ...s
 }) {
-  return /* @__PURE__ */ V.jsx(Wv, { label: t, hint: n, error: r, required: i, htmlFor: a, children: /* @__PURE__ */ V.jsx(RD, { publicApiKey: "ck_pub_020d5739b1bb0a773109f77f43fe51b9", children: /* @__PURE__ */ V.jsx($N, { disableBranding: !0, autosuggestionsConfig: e, ...o }) }) });
+  return /* @__PURE__ */ V.jsx(Wv, { label: t, hint: n, error: r, required: i, htmlFor: a, children: /* @__PURE__ */ V.jsx(RD, { ...o, children: /* @__PURE__ */ V.jsx($N, { disableBranding: !0, autosuggestionsConfig: e, ...s }) }) });
 }
 export {
   ZN as SSmartTextField,

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

@@ -0,0 +1,2 @@
+export { SStripeNumber, SStripeExpiry, SStripeCVC, StripeTextField } from './s-stripe';
+export type { StripeTextFieldProps, StripeElement } from './s-stripe';

package/dist/s-stripe/index.js

@@ -0,0 +1,7 @@
+import { SStripeCVC as S, SStripeExpiry as i, SStripeNumber as p, StripeTextField as t } from "./s-stripe.js";
+export {
+  S as SStripeCVC,
+  i as SStripeExpiry,
+  p as SStripeNumber,
+  t as StripeTextField
+};

package/dist/s-stripe/package.json

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

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

@@ -0,0 +1,13 @@
+import { AuBankAccountElement, CardCvcElement, CardExpiryElement, CardNumberElement, FpxBankElement, IbanElement, IdealBankElement } from '@stripe/react-stripe-js';
+import { STextFieldProps } from '../s-text-field';
+export type StripeElement = typeof AuBankAccountElement | typeof CardCvcElement | typeof CardExpiryElement | typeof CardNumberElement | typeof FpxBankElement | typeof IbanElement | typeof IdealBankElement;
+export interface StripeTextFieldProps<T extends StripeElement> extends Omit<STextFieldProps, 'onChange' | 'inputComponent' | 'inputProps'> {
+    inputProps?: React.ComponentProps<T>;
+    labelErrorMessage?: string;
+    onChange?: React.ComponentProps<T>['onChange'];
+    stripeElement?: T;
+}
+export declare const StripeTextField: <T extends StripeElement>(props: StripeTextFieldProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare function SStripeNumber(props: StripeTextFieldProps<typeof CardNumberElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SStripeExpiry(props: StripeTextFieldProps<typeof CardExpiryElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SStripeCVC(props: StripeTextFieldProps<typeof CardCvcElement>): import("react/jsx-runtime").JSX.Element;

package/dist/s-stripe/s-stripe.js

@@ -0,0 +1,325 @@
+import { j as w } from "../jsx-runtime-C5mzlN2N.js";
+import l from "react";
+import { P as u } from "../createTheme-CyFSna1a.js";
+import ne from "../s-text-field/s-text-field.js";
+import oe from "./stripe-input.js";
+function M(r, e) {
+  var t = Object.keys(r);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(r);
+    e && (n = n.filter(function(a) {
+      return Object.getOwnPropertyDescriptor(r, a).enumerable;
+    })), t.push.apply(t, n);
+  }
+  return t;
+}
+function W(r) {
+  for (var e = 1; e < arguments.length; e++) {
+    var t = arguments[e] != null ? arguments[e] : {};
+    e % 2 ? M(Object(t), !0).forEach(function(n) {
+      K(r, n, t[n]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(r, Object.getOwnPropertyDescriptors(t)) : M(Object(t)).forEach(function(n) {
+      Object.defineProperty(r, n, Object.getOwnPropertyDescriptor(t, n));
+    });
+  }
+  return r;
+}
+function j(r) {
+  "@babel/helpers - typeof";
+  return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? j = function(e) {
+    return typeof e;
+  } : j = function(e) {
+    return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+  }, j(r);
+}
+function K(r, e, t) {
+  return e in r ? Object.defineProperty(r, e, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : r[e] = t, r;
+}
+function ae(r, e) {
+  if (r == null) return {};
+  var t = {}, n = Object.keys(r), a, o;
+  for (o = 0; o < n.length; o++)
+    a = n[o], !(e.indexOf(a) >= 0) && (t[a] = r[a]);
+  return t;
+}
+function ie(r, e) {
+  if (r == null) return {};
+  var t = ae(r, e), n, a;
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(r);
+    for (a = 0; a < o.length; a++)
+      n = o[a], !(e.indexOf(n) >= 0) && Object.prototype.propertyIsEnumerable.call(r, n) && (t[n] = r[n]);
+  }
+  return t;
+}
+function ue(r, e) {
+  return ce(r) || se(r, e) || le(r, e) || pe();
+}
+function ce(r) {
+  if (Array.isArray(r)) return r;
+}
+function se(r, e) {
+  var t = r && (typeof Symbol < "u" && r[Symbol.iterator] || r["@@iterator"]);
+  if (t != null) {
+    var n = [], a = !0, o = !1, p, h;
+    try {
+      for (t = t.call(r); !(a = (p = t.next()).done) && (n.push(p.value), !(e && n.length === e)); a = !0)
+        ;
+    } catch (i) {
+      o = !0, h = i;
+    } finally {
+      try {
+        !a && t.return != null && t.return();
+      } finally {
+        if (o) throw h;
+      }
+    }
+    return n;
+  }
+}
+function le(r, e) {
+  if (r) {
+    if (typeof r == "string") return D(r, e);
+    var t = Object.prototype.toString.call(r).slice(8, -1);
+    if (t === "Object" && r.constructor && (t = r.constructor.name), t === "Map" || t === "Set") return Array.from(r);
+    if (t === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return D(r, e);
+  }
+}
+function D(r, e) {
+  (e == null || e > r.length) && (e = r.length);
+  for (var t = 0, n = new Array(e); t < e; t++) n[t] = r[t];
+  return n;
+}
+function pe() {
+  throw new TypeError(`Invalid attempt to destructure non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`);
+}
+var y = function(e, t, n) {
+  var a = !!n, o = l.useRef(n);
+  l.useEffect(function() {
+    o.current = n;
+  }, [n]), l.useEffect(function() {
+    if (!a || !e)
+      return function() {
+      };
+    var p = function() {
+      o.current && o.current.apply(o, arguments);
+    };
+    return e.on(t, p), function() {
+      e.off(t, p);
+    };
+  }, [a, t, e, o]);
+}, fe = function(e) {
+  var t = l.useRef(e);
+  return l.useEffect(function() {
+    t.current = e;
+  }, [e]), t.current;
+}, A = function(e) {
+  return e !== null && j(e) === "object";
+}, F = "[object Object]", de = function r(e, t) {
+  if (!A(e) || !A(t))
+    return e === t;
+  var n = Array.isArray(e), a = Array.isArray(t);
+  if (n !== a) return !1;
+  var o = Object.prototype.toString.call(e) === F, p = Object.prototype.toString.call(t) === F;
+  if (o !== p) return !1;
+  if (!o && !n) return e === t;
+  var h = Object.keys(e), i = Object.keys(t);
+  if (h.length !== i.length) return !1;
+  for (var b = {}, g = 0; g < h.length; g += 1)
+    b[h[g]] = !0;
+  for (var E = 0; E < i.length; E += 1)
+    b[i[E]] = !0;
+  var m = Object.keys(b);
+  if (m.length !== h.length)
+    return !1;
+  var P = e, R = t, k = function(S) {
+    return r(P[S], R[S]);
+  };
+  return m.every(k);
+}, me = function(e, t, n) {
+  return A(e) ? Object.keys(e).reduce(function(a, o) {
+    var p = !A(t) || !de(e[o], t[o]);
+    return n.includes(o) ? (p && console.warn("Unsupported prop change: options.".concat(o, " is not a mutable property.")), a) : p ? W(W({}, a || {}), {}, K({}, o, e[o])) : a;
+  }, null) : null;
+}, $ = /* @__PURE__ */ l.createContext(null);
+$.displayName = "ElementsContext";
+var ye = function(e, t) {
+  if (!e)
+    throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(t, " in an <Elements> provider."));
+  return e;
+};
+u.any, u.object;
+u.func.isRequired;
+var z = /* @__PURE__ */ l.createContext(null);
+z.displayName = "CheckoutSdkContext";
+var he = function(e, t) {
+  if (!e)
+    throw new Error("Could not find CheckoutProvider context; You need to wrap the part of your app that ".concat(t, " in an <CheckoutProvider> provider."));
+  return e;
+}, ve = /* @__PURE__ */ l.createContext(null);
+ve.displayName = "CheckoutContext";
+u.any, u.shape({
+  fetchClientSecret: u.func.isRequired,
+  elementsOptions: u.object
+}).isRequired;
+var Y = function(e) {
+  var t = l.useContext(z), n = l.useContext($);
+  if (t && n)
+    throw new Error("You cannot wrap the part of your app that ".concat(e, " in both <CheckoutProvider> and <Elements> providers."));
+  return t ? he(t, e) : ye(n, e);
+}, Ce = ["mode"], be = function(e) {
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}, c = function(e, t) {
+  var n = "".concat(be(e), "Element"), a = function(i) {
+    var b = i.id, g = i.className, E = i.options, m = E === void 0 ? {} : E, P = i.onBlur, R = i.onFocus, k = i.onReady, B = i.onChange, S = i.onEscape, V = i.onClick, H = i.onLoadError, J = i.onLoaderStart, G = i.onNetworksChange, Q = i.onConfirm, X = i.onCancel, Z = i.onShippingAddressChange, ee = i.onShippingRateChange, x = Y("mounts <".concat(n, ">")), O = "elements" in x ? x.elements : null, C = "checkoutSdk" in x ? x.checkoutSdk : null, te = l.useState(null), I = ue(te, 2), d = I[0], re = I[1], v = l.useRef(null), N = l.useRef(null);
+    y(d, "blur", P), y(d, "focus", R), y(d, "escape", S), y(d, "click", V), y(d, "loaderror", H), y(d, "loaderstart", J), y(d, "networkschange", G), y(d, "confirm", Q), y(d, "cancel", X), y(d, "shippingaddresschange", Z), y(d, "shippingratechange", ee), y(d, "change", B);
+    var T;
+    k && (e === "expressCheckout" ? T = k : T = function() {
+      k(d);
+    }), y(d, "ready", T), l.useLayoutEffect(function() {
+      if (v.current === null && N.current !== null && (O || C)) {
+        var f = null;
+        if (C)
+          switch (e) {
+            case "payment":
+              f = C.createPaymentElement(m);
+              break;
+            case "address":
+              if ("mode" in m) {
+                var _ = m.mode, q = ie(m, Ce);
+                if (_ === "shipping")
+                  f = C.createShippingAddressElement(q);
+                else if (_ === "billing")
+                  f = C.createBillingAddressElement(q);
+                else
+                  throw new Error("Invalid options.mode. mode must be 'billing' or 'shipping'.");
+              } else
+                throw new Error("You must supply options.mode. mode must be 'billing' or 'shipping'.");
+              break;
+            case "expressCheckout":
+              f = C.createExpressCheckoutElement(m);
+              break;
+            case "currencySelector":
+              f = C.createCurrencySelectorElement();
+              break;
+            default:
+              throw new Error("Invalid Element type ".concat(n, ". You must use either the <PaymentElement />, <AddressElement options={{mode: 'shipping'}} />, <AddressElement options={{mode: 'billing'}} />, or <ExpressCheckoutElement />."));
+          }
+        else O && (f = O.create(e, m));
+        v.current = f, re(f), f && f.mount(N.current);
+      }
+    }, [O, C, m]);
+    var U = fe(m);
+    return l.useEffect(function() {
+      if (v.current) {
+        var f = me(m, U, ["paymentRequest"]);
+        f && "update" in v.current && v.current.update(f);
+      }
+    }, [m, U]), l.useLayoutEffect(function() {
+      return function() {
+        if (v.current && typeof v.current.destroy == "function")
+          try {
+            v.current.destroy(), v.current = null;
+          } catch {
+          }
+      };
+    }, []), /* @__PURE__ */ l.createElement("div", {
+      id: b,
+      className: g,
+      ref: N
+    });
+  }, o = function(i) {
+    Y("mounts <".concat(n, ">"));
+    var b = i.id, g = i.className;
+    return /* @__PURE__ */ l.createElement("div", {
+      id: b,
+      className: g
+    });
+  }, p = t ? o : a;
+  return p.propTypes = {
+    id: u.string,
+    className: u.string,
+    onChange: u.func,
+    onBlur: u.func,
+    onFocus: u.func,
+    onReady: u.func,
+    onEscape: u.func,
+    onClick: u.func,
+    onLoadError: u.func,
+    onLoaderStart: u.func,
+    onNetworksChange: u.func,
+    onConfirm: u.func,
+    onCancel: u.func,
+    onShippingAddressChange: u.func,
+    onShippingRateChange: u.func,
+    options: u.object
+  }, p.displayName = n, p.__elementType = e, p;
+}, s = typeof window > "u", ge = /* @__PURE__ */ l.createContext(null);
+ge.displayName = "EmbeddedCheckoutProviderContext";
+c("auBankAccount", s);
+c("card", s);
+var Ee = c("cardNumber", s), ke = c("cardExpiry", s), Se = c("cardCvc", s);
+c("fpxBank", s);
+c("iban", s);
+c("idealBank", s);
+c("p24Bank", s);
+c("epsBank", s);
+c("payment", s);
+c("expressCheckout", s);
+c("currencySelector", s);
+c("paymentRequestButton", s);
+c("linkAuthentication", s);
+c("address", s);
+c("shippingAddress", s);
+c("paymentMethodMessaging", s);
+c("affirmMessage", s);
+c("afterpayClearpayMessage", s);
+const L = (r) => {
+  var i;
+  const { helperText: e, slotProps: t, inputProps: n, error: a, labelErrorMessage: o, stripeElement: p, ...h } = r;
+  return /* @__PURE__ */ w.jsx(
+    ne,
+    {
+      fullWidth: !0,
+      slotProps: {
+        inputLabel: {
+          ...t == null ? void 0 : t.inputLabel,
+          shrink: !0
+        },
+        input: {
+          ...t == null ? void 0 : t.input,
+          inputProps: {
+            ...n,
+            ...(i = t == null ? void 0 : t.input) == null ? void 0 : i.inputProps,
+            component: p
+          },
+          inputComponent: oe
+        }
+      },
+      error: a,
+      helperText: a ? o : e,
+      ...h
+    }
+  );
+};
+function Pe(r) {
+  return /* @__PURE__ */ w.jsx(L, { label: "Card Number", stripeElement: Ee, ...r });
+}
+function Re(r) {
+  return /* @__PURE__ */ w.jsx(L, { label: "Expiration", stripeElement: ke, ...r });
+}
+function Ne(r) {
+  return /* @__PURE__ */ w.jsx(L, { label: "CVC", stripeElement: Se, ...r });
+}
+export {
+  Ne as SStripeCVC,
+  Re as SStripeExpiry,
+  Pe as SStripeNumber,
+  L as StripeTextField
+};

package/dist/s-stripe/stripe-input.d.ts

@@ -0,0 +1,4 @@
+import { InputBaseComponentProps } from '@mui/material/InputBase';
+import * as React from 'react';
+declare const StripeInput: React.ForwardRefExoticComponent<Omit<InputBaseComponentProps, "ref"> & React.RefAttributes<any>>;
+export default StripeInput;

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

@@ -0,0 +1,31 @@
+import { j as u } from "../jsx-runtime-C5mzlN2N.js";
+import * as o from "react";
+import { useTheme as i } from "@mui/material";
+import { gray as c } from "../theme/theme-primitives.js";
+const R = o.forwardRef(function(e, r) {
+  const { component: n, options: s, ...m } = e, [t, p] = o.useState(null), a = i();
+  return o.useImperativeHandle(
+    r,
+    () => ({
+      focus: () => t.focus()
+    }),
+    [t]
+  ), /* @__PURE__ */ u.jsx(
+    n,
+    {
+      onReady: p,
+      options: {
+        ...s,
+        style: {
+          base: {
+            color: a.palette.mode === "dark" ? "rgb(255, 255, 255)" : c[800]
+          }
+        }
+      },
+      ...m
+    }
+  );
+});
+export {
+  R as default
+};

package/dist/s-theme-provider/s-theme-provider.d.ts

@@ -1,13 +1,14 @@
-import { ThemeOptions, ThemeProviderProps } from '@mui/material';
+import { Theme, ThemeOptions, ThemeProviderProps } from '@mui/material';
 import * as React from 'react';
-export interface SThemeProviderProps {
+export interface SThemeProviderProps extends Omit<ThemeProviderProps, 'defaultMode' | 'theme'> {
     children: React.ReactNode;
     /**
      * This is for the docs site. You can ignore it or remove it.
      */
     disableCustomTheme?: boolean;
     themeComponents?: ThemeOptions['components'];
-    themeProviderProps?: ThemeProviderProps;
+    defaultMode?: 'light' | 'dark' | 'system' | undefined;
+    theme?: Theme;
 }
-declare const SThemeProvider: ({ children, disableCustomTheme, themeComponents, themeProviderProps, }: SThemeProviderProps) => React.JSX.Element;
+declare const SThemeProvider: ({ children, disableCustomTheme, themeComponents, defaultMode, theme, ...themeProviderProps }: SThemeProviderProps) => React.JSX.Element;
 export default SThemeProvider;

package/dist/s-theme-provider/s-theme-provider.js

@@ -1,51 +1,56 @@
-import { j as m } from "../jsx-runtime-C5mzlN2N.js";
-import * as s from "react";
-import { createTheme as e, ThemeProvider as n } from "@mui/material";
-import { components as c } from "../theme/components/components.js";
-import { dataDisplayCustomizations as f } from "../theme/customizations/data-display.js";
-import { feedbackCustomizations as u } from "../theme/customizations/feedback.js";
-import { inputsCustomizations as p } from "../theme/customizations/inputs.js";
+import { j as e } from "../jsx-runtime-C5mzlN2N.js";
+import * as m from "react";
+import { createTheme as p, ThemeProvider as c } from "@mui/material";
+import { components as f } from "../theme/components/components.js";
+import { dataDisplayCustomizations as u } from "../theme/customizations/data-display.js";
+import { feedbackCustomizations as d } from "../theme/customizations/feedback.js";
+import { inputsCustomizations as h } from "../theme/customizations/inputs.js";
 import { navigationCustomizations as l } from "../theme/customizations/navigation.js";
 import { surfacesCustomizations as x } from "../theme/customizations/surfaces.js";
-import { shape as z, shadows as g, typography as h, colorSchemes as j } from "../theme/theme-primitives.js";
-const b = ({
-  children: a,
-  disableCustomTheme: t,
-  themeComponents: r,
-  themeProviderProps: o
+import { shape as z, shadows as g, typography as j, colorSchemes as S } from "../theme/theme-primitives.js";
+const w = ({
+  children: r,
+  disableCustomTheme: o,
+  themeComponents: t,
+  defaultMode: s = "dark",
+  theme: a,
+  ...i
 }) => {
-  const i = s.useMemo(() => t ? {} : e({
+  const n = m.useMemo(() => o ? {} : p({
     // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
     cssVariables: {
       colorSchemeSelector: "data-mui-color-scheme",
       cssVarPrefix: "s"
     },
-    colorSchemes: j,
+    palette: {
+      mode: "dark"
+    },
+    colorSchemes: S,
     // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
-    typography: h,
+    typography: j,
     shadows: g,
     shape: z,
     components: {
-      ...p,
-      ...f,
+      ...h,
       ...u,
+      ...d,
       ...l,
       ...x,
-      ...c,
-      ...r
+      ...f,
+      ...t
     }
-  }), [t, r]);
-  return t ? /* @__PURE__ */ m.jsx(s.Fragment, { children: a }) : /* @__PURE__ */ m.jsx(
-    n,
+  }), [o, t]);
+  return o ? /* @__PURE__ */ e.jsx(m.Fragment, { children: r }) : /* @__PURE__ */ e.jsx(
+    c,
     {
       disableTransitionOnChange: !0,
-      defaultMode: "dark",
-      ...o,
-      theme: { ...i, ...o == null ? void 0 : o.theme },
-      children: a
+      ...i,
+      theme: { ...n, ...a },
+      defaultMode: s,
+      children: r
     }
   );
 };
 export {
-  b as default
+  w as default
 };

package/dist/theme/customizations/inputs.js

@@ -18,14 +18,18 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
       disableRipple: !0
     },
     styleOverrides: {
-      root: ({ theme: o }) => ({
+      // root: ({ theme }) => ({
+      //   boxSizing: 'border-box',
+      //   transition: 'all 100ms ease-in',
+      //   '&:focus-visible': {
+      //     outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
+      //     outlineOffset: '2px',
+      //   },
+      // }),
+      root: {
         boxSizing: "border-box",
-        transition: "all 100ms ease-in",
-        "&:focus-visible": {
-          outline: `3px solid ${t(o.palette.primary.main, 0.5)}`,
-          outlineOffset: "2px"
-        }
-      })
+        transition: "all 100ms ease-in"
+      }
     }
   },
   MuiButton: {

package/dist/theme/customizations/surfaces.js

@@ -73,7 +73,7 @@ const i = {
             style: {
               border: `1px solid ${(r.vars || r).palette.divider}`,
               boxShadow: "none",
-              background: "hsl(0, 0%, 100%)",
+              background: "rgb(255, 255, 255)",
               ...r.applyStyles("dark", {
                 background: a(o[900], 0.4)
               })

package/dist/theme/theme-primitives.js

@@ -1,5 +1,5 @@
-import { b as n, a as o } from "../createTheme-CyFSna1a.js";
-const e = n(), p = [...e.shadows], t = {
+import { b as s, a as r } from "../createTheme-CyFSna1a.js";
+const a = s(), n = [...a.shadows], t = {
   50: "hsl(210, 100%, 95%)",
   100: "hsl(210, 100%, 92%)",
   200: "hsl(210, 100%, 80%)",
@@ -10,18 +10,28 @@ const e = n(), p = [...e.shadows], t = {
   700: "hsl(210, 100%, 35%)",
   800: "hsl(210, 100%, 16%)",
   900: "hsl(210, 100%, 21%)"
-}, h = {
-  50: "hsl(220, 35%, 97%)",
-  100: "hsl(220, 30%, 94%)",
-  200: "hsl(220, 20%, 88%)",
-  300: "hsl(220, 20%, 80%)",
-  400: "hsl(220, 20%, 65%)",
-  500: "hsl(220, 20%, 42%)",
-  600: "hsl(220, 20%, 35%)",
-  700: "hsl(220, 20%, 25%)",
-  800: "hsl(220, 30%, 6%)",
-  900: "hsl(220, 35%, 3%)"
-}, s = {
+}, e = {
+  50: "rgb(243, 246, 250)",
+  // hsl(220, 35%, 97%)
+  100: "rgb(235, 238, 244)",
+  // hsl(220, 30%, 94%)
+  200: "rgb(218, 222, 231)",
+  // hsl(220, 20%, 88%)
+  300: "rgb(194, 201, 214)",
+  // hsl(220, 20%, 80%)
+  400: "rgb(148, 160, 184)",
+  // hsl(220, 20%, 65%)
+  500: "rgb(86, 100, 129)",
+  // hsl(220, 20%, 42%)
+  600: "rgb(71, 83, 107)",
+  // hsl(220, 20%, 35%)
+  700: "rgb(51, 60, 77)",
+  // hsl(220, 20%, 25%)
+  800: "rgb(11, 14, 20)",
+  // hsl(220, 30%, 6%)
+  900: "rgb(5, 7, 10)"
+  // hsl(220, 35%, 3%)
+}, o = {
   50: "hsl(120, 80%, 98%)",
   100: "hsl(120, 75%, 94%)",
   200: "hsl(120, 75%, 87%)",
@@ -32,7 +42,7 @@ const e = n(), p = [...e.shadows], t = {
   700: "hsl(120, 75%, 16%)",
   800: "hsl(120, 84%, 10%)",
   900: "hsl(120, 87%, 6%)"
-}, a = {
+}, h = {
   50: "hsl(45, 100%, 97%)",
   100: "hsl(45, 92%, 90%)",
   200: "hsl(45, 94%, 80%)",
@@ -54,15 +64,15 @@ const e = n(), p = [...e.shadows], t = {
   700: "hsl(0, 94%, 18%)",
   800: "hsl(0, 95%, 12%)",
   900: "hsl(0, 93%, 6%)"
-}, y = (r) => (p[1] = r === "dark" ? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px" : "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px", {
+}, y = (p) => (n[1] = p === "dark" ? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px" : "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px", {
   palette: {
-    mode: r,
+    mode: p,
     primary: {
       light: t[200],
       main: t[400],
       dark: t[700],
       contrastText: t[50],
-      ...r === "dark" && {
+      ...p === "dark" && {
         contrastText: t[50],
         light: t[300],
         main: t[400],
@@ -73,8 +83,8 @@ const e = n(), p = [...e.shadows], t = {
       light: t[100],
       main: t[300],
       dark: t[600],
-      contrastText: h[50],
-      ...r === "dark" && {
+      contrastText: e[50],
+      ...p === "dark" && {
         contrastText: t[300],
         light: t[500],
         main: t[700],
@@ -82,112 +92,112 @@ const e = n(), p = [...e.shadows], t = {
       }
     },
     warning: {
-      light: a[300],
-      main: a[400],
-      dark: a[800],
-      ...r === "dark" && {
-        light: a[400],
-        main: a[500],
-        dark: a[700]
+      light: h[300],
+      main: h[400],
+      dark: h[800],
+      ...p === "dark" && {
+        light: h[400],
+        main: h[500],
+        dark: h[700]
       }
     },
     error: {
       light: i[300],
       main: i[400],
       dark: i[800],
-      ...r === "dark" && {
+      ...p === "dark" && {
         light: i[400],
         main: i[500],
         dark: i[700]
       }
     },
     success: {
-      light: s[300],
-      main: s[400],
-      dark: s[800],
-      ...r === "dark" && {
-        light: s[400],
-        main: s[500],
-        dark: s[700]
+      light: o[300],
+      main: o[400],
+      dark: o[800],
+      ...p === "dark" && {
+        light: o[400],
+        main: o[500],
+        dark: o[700]
       }
     },
     grey: {
-      ...h
+      ...e
     },
-    divider: r === "dark" ? o(h[700], 0.6) : o(h[300], 0.4),
+    divider: p === "dark" ? r(e[700], 0.6) : r(e[300], 0.4),
     background: {
       default: "hsl(0, 0%, 99%)",
       paper: "hsl(220, 35%, 97%)",
-      ...r === "dark" && { default: h[900], paper: "hsl(220, 30%, 7%)" }
+      ...p === "dark" && { default: e[900], paper: "hsl(220, 30%, 7%)" }
     },
     text: {
-      primary: h[800],
-      secondary: h[600],
-      warning: a[400],
-      ...r === "dark" && { primary: "hsl(0, 0%, 100%)", secondary: h[400] }
+      primary: e[800],
+      secondary: e[600],
+      warning: h[400],
+      ...p === "dark" && { primary: "rgb(255, 255, 255)", secondary: e[400] }
     },
     action: {
-      hover: o(h[200], 0.2),
-      selected: `${o(h[200], 0.3)}`,
-      ...r === "dark" && {
-        hover: o(h[600], 0.2),
-        selected: o(h[600], 0.3)
+      hover: r(e[200], 0.2),
+      selected: `${r(e[200], 0.3)}`,
+      ...p === "dark" && {
+        hover: r(e[600], 0.2),
+        selected: r(e[600], 0.3)
       }
     }
   },
   typography: {
     fontFamily: "Inter, sans-serif",
     h1: {
-      fontSize: e.typography.pxToRem(48),
+      fontSize: a.typography.pxToRem(48),
       fontWeight: 600,
       lineHeight: 1.2,
       letterSpacing: -0.5
     },
     h2: {
-      fontSize: e.typography.pxToRem(36),
+      fontSize: a.typography.pxToRem(36),
       fontWeight: 600,
       lineHeight: 1.2
     },
     h3: {
-      fontSize: e.typography.pxToRem(30),
+      fontSize: a.typography.pxToRem(30),
       lineHeight: 1.2
     },
     h4: {
-      fontSize: e.typography.pxToRem(24),
+      fontSize: a.typography.pxToRem(24),
       fontWeight: 600,
       lineHeight: 1.5
     },
     h5: {
-      fontSize: e.typography.pxToRem(20),
+      fontSize: a.typography.pxToRem(20),
       fontWeight: 600
     },
     h6: {
-      fontSize: e.typography.pxToRem(18),
+      fontSize: a.typography.pxToRem(18),
       fontWeight: 600
     },
     subtitle1: {
-      fontSize: e.typography.pxToRem(18)
+      fontSize: a.typography.pxToRem(18)
     },
     subtitle2: {
-      fontSize: e.typography.pxToRem(14),
+      fontSize: a.typography.pxToRem(14),
       fontWeight: 500
     },
     body1: {
-      fontSize: e.typography.pxToRem(14)
+      fontSize: a.typography.pxToRem(14)
     },
     body2: {
-      fontSize: e.typography.pxToRem(14),
+      fontSize: a.typography.pxToRem(14),
       fontWeight: 400
     },
     caption: {
-      fontSize: e.typography.pxToRem(12),
+      fontSize: a.typography.pxToRem(12),
       fontWeight: 400
     }
   },
   shape: {
     borderRadius: 8
   },
-  shadows: p
+  shadows: n
 }), x = {
   light: {
     palette: {
@@ -201,12 +211,12 @@ const e = n(), p = [...e.shadows], t = {
         light: t[100],
         main: t[300],
         dark: t[600],
-        contrastText: h[50]
+        contrastText: e[50]
       },
       warning: {
-        light: a[300],
-        main: a[400],
-        dark: a[800]
+        light: h[300],
+        main: h[400],
+        dark: h[800]
       },
       error: {
         light: i[300],
@@ -214,26 +224,26 @@ const e = n(), p = [...e.shadows], t = {
         dark: i[800]
       },
       success: {
-        light: s[300],
-        main: s[400],
-        dark: s[800]
+        light: o[300],
+        main: o[400],
+        dark: o[800]
       },
       grey: {
-        ...h
+        ...e
       },
-      divider: o(h[300], 0.4),
+      divider: r(e[300], 0.4),
       background: {
         default: "hsl(0, 0%, 99%)",
         paper: "hsl(220, 35%, 97%)"
       },
       text: {
-        primary: h[800],
-        secondary: h[600],
-        warning: a[400]
+        primary: e[800],
+        secondary: e[600],
+        warning: h[400]
       },
       action: {
-        hover: o(h[200], 0.2),
-        selected: `${o(h[200], 0.3)}`
+        hover: r(e[200], 0.2),
+        selected: `${r(e[200], 0.3)}`
       },
       baseShadow: "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px"
     }
@@ -253,9 +263,9 @@ const e = n(), p = [...e.shadows], t = {
         dark: t[900]
       },
       warning: {
-        light: a[400],
-        main: a[500],
-        dark: a[700]
+        light: h[400],
+        main: h[500],
+        dark: h[700]
       },
       error: {
         light: i[400],
@@ -263,25 +273,25 @@ const e = n(), p = [...e.shadows], t = {
         dark: i[700]
       },
       success: {
-        light: s[400],
-        main: s[500],
-        dark: s[700]
+        light: o[400],
+        main: o[500],
+        dark: o[700]
       },
       grey: {
-        ...h
+        ...e
       },
-      divider: o(h[700], 0.6),
+      divider: r(e[700], 0.6),
       background: {
-        default: h[900],
+        default: e[900],
         paper: "hsl(220, 30%, 7%)"
       },
       text: {
-        primary: "hsl(0, 0%, 100%)",
-        secondary: h[400]
+        primary: "rgb(255, 255, 255)",
+        secondary: e[400]
       },
       action: {
-        hover: o(h[600], 0.2),
-        selected: o(h[600], 0.3)
+        hover: r(e[600], 0.2),
+        selected: r(e[600], 0.3)
       },
       baseShadow: "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
     }
@@ -289,61 +299,61 @@ const e = n(), p = [...e.shadows], t = {
 }, d = {
   fontFamily: "Inter, sans-serif",
   h1: {
-    fontSize: e.typography.pxToRem(48),
+    fontSize: a.typography.pxToRem(48),
     fontWeight: 600,
     lineHeight: 1.2,
     letterSpacing: -0.5
   },
   h2: {
-    fontSize: e.typography.pxToRem(36),
+    fontSize: a.typography.pxToRem(36),
     fontWeight: 600,
     lineHeight: 1.2
   },
   h3: {
-    fontSize: e.typography.pxToRem(30),
+    fontSize: a.typography.pxToRem(30),
     lineHeight: 1.2
   },
   h4: {
-    fontSize: e.typography.pxToRem(24),
+    fontSize: a.typography.pxToRem(24),
     fontWeight: 600,
     lineHeight: 1.5
   },
   h5: {
-    fontSize: e.typography.pxToRem(20),
+    fontSize: a.typography.pxToRem(20),
     fontWeight: 600
   },
   h6: {
-    fontSize: e.typography.pxToRem(18),
+    fontSize: a.typography.pxToRem(18),
     fontWeight: 600
   },
   subtitle1: {
-    fontSize: e.typography.pxToRem(18)
+    fontSize: a.typography.pxToRem(18)
   },
   subtitle2: {
-    fontSize: e.typography.pxToRem(14),
+    fontSize: a.typography.pxToRem(14),
     fontWeight: 500
   },
   body1: {
-    fontSize: e.typography.pxToRem(14)
+    fontSize: a.typography.pxToRem(14)
   },
   body2: {
-    fontSize: e.typography.pxToRem(14),
+    fontSize: a.typography.pxToRem(14),
     fontWeight: 400
   },
   caption: {
-    fontSize: e.typography.pxToRem(12),
+    fontSize: a.typography.pxToRem(12),
     fontWeight: 400
   }
 }, f = {
   borderRadius: 8
-}, l = ["none", "var(--s-palette-baseShadow)", ...e.shadows.slice(2)], c = l;
+}, l = ["none", "var(--s-palette-baseShadow)", ...a.shadows.slice(2)], c = l;
 export {
   t as brand,
   x as colorSchemes,
   y as getDesignTokens,
-  h as gray,
-  s as green,
-  a as orange,
+  e as gray,
+  o as green,
+  h as orange,
   i as red,
   c as shadows,
   f as shape,

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.44",
+  "version": "1.0.45",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",
@@ -47,7 +47,9 @@
     "react-dropzone": "^14.3.8",
     "react-i18next": "^15.5.1",
     "react-image-gallery": "^1.4.0",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.0",
+    "@stripe/react-stripe-js": "^3.7.0",
+    "@stripe/stripe-js": "^7.3.1"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.4.2",