@solostylist/ui-kit 1.0.44 → 1.0.46

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,47 @@
+import { j as r } from "../jsx-runtime-C5mzlN2N.js";
+import { CardNumberElement as a, CardExpiryElement as E, CardCvcElement as s } from "@stripe/react-stripe-js";
+import C from "../s-text-field/s-text-field.js";
+import b from "./stripe-input.js";
+const n = (t) => {
+  var p;
+  const { helperText: u, slotProps: e, inputProps: m, error: i, labelErrorMessage: l, stripeElement: o, ...x } = t;
+  return /* @__PURE__ */ r.jsx(
+    C,
+    {
+      fullWidth: !0,
+      slotProps: {
+        inputLabel: {
+          ...e == null ? void 0 : e.inputLabel,
+          shrink: !0
+        },
+        input: {
+          ...e == null ? void 0 : e.input,
+          inputProps: {
+            ...m,
+            ...(p = e == null ? void 0 : e.input) == null ? void 0 : p.inputProps,
+            component: o
+          },
+          inputComponent: b
+        }
+      },
+      error: i,
+      helperText: i ? l : u,
+      ...x
+    }
+  );
+};
+function j(t) {
+  return /* @__PURE__ */ r.jsx(n, { label: "Card Number", stripeElement: a, ...t });
+}
+function h(t) {
+  return /* @__PURE__ */ r.jsx(n, { label: "Expiration", stripeElement: E, ...t });
+}
+function T(t) {
+  return /* @__PURE__ */ r.jsx(n, { label: "CVC", stripeElement: s, ...t });
+}
+export {
+  T as SStripeCVC,
+  h as SStripeExpiry,
+  j as SStripeNumber,
+  n 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.46",
   "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",