@solostylist/ui-kit 1.0.79 → 1.0.80

package/dist/{outlinedInputClasses-E4FwVkZh.js → outlinedInputClasses-Cor6Mcxo.js}

@@ -1,5 +1,5 @@
-import { g as n } from "./generateUtilityClasses-BpNk3DNr.js";
-import { g as e } from "./createTheme-DuP3DZSF.js";
+import { g as n } from "./generateUtilityClasses-D-O3RBPF.js";
+import { g as e } from "./colorManipulator-CPZHCebU.js";
 function l(t) {
   return e("MuiInputBase", t);
 }

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

@@ -1,11 +1,42 @@
 import { default as React } from 'react';
 import { AutocompleteProps } from '@mui/material';
+/**
+ * Props interface for SAutocomplete component - extends Material-UI AutocompleteProps
+ * with form integration capabilities. Uses complex generic types to maintain
+ * Material-UI's type safety for different autocomplete configurations.
+ *
+ * @template T - Type of the option values
+ * @template Multiple - Whether multiple selection is enabled
+ * @template DisableClearable - Whether the clear button is disabled
+ * @template FreeSolo - Whether free text input is allowed
+ */
 export interface SAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined = undefined> extends Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'renderInput'> {
+    /** Optional custom renderInput function for advanced input customization */
     renderInput?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>['renderInput'];
+    /** Field label displayed above the autocomplete */
     label?: string | React.ReactNode;
+    /** Whether the field is required (shows asterisk in label) */
     required?: boolean;
+    /** Error message to display below the field */
     error?: string;
+    /** HTML id attribute for the input element */
     htmlFor?: string;
 }
+/**
+ * SAutocomplete - A standardized autocomplete/combobox component that wraps Material-UI Autocomplete
+ * with consistent form labeling, validation, and help text patterns.
+ *
+ * Key features:
+ * - Maintains full Material-UI Autocomplete API and type safety
+ * - Integrates with SForm for consistent label and error handling
+ * - Supports all autocomplete modes: single/multiple selection, free solo, etc.
+ * - Provides accessible form labeling with htmlFor/id association
+ * - Uses forwardRef for proper ref forwarding to underlying components
+ * - Disables portal by default for better layout predictability
+ *
+ * @param props - SAutocompleteProps with form integration and Material-UI Autocomplete props
+ * @param ref - Forward ref to the underlying Autocomplete component
+ * @returns JSX.Element - Wrapped Autocomplete with form labeling and validation
+ */
 declare const SAutocomplete: React.ForwardRefExoticComponent<Omit<SAutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined>, "ref"> & React.RefAttributes<unknown>>;
 export default SAutocomplete;

package/dist/s-autocomplete/s-autocomplete.js

@@ -1,26 +1,29 @@
-import { j as r } from "../jsx-runtime-DywqP_6a.js";
-import { forwardRef as l } from "react";
-import { Autocomplete as p, TextField as u } from "@mui/material";
-import d from "../s-form/s-form.js";
-const c = l(
+import { j as t } from "../jsx-runtime-DywqP_6a.js";
+import { forwardRef as i, useId as p } from "react";
+import { Autocomplete as a, TextField as n } from "@mui/material";
+import c from "../s-form/s-form.js";
+const F = i(
   ({
     label: e = "",
-    required: o = !1,
+    required: r = !1,
     error: m,
-    htmlFor: t,
-    ...i
-  }, s) => /* @__PURE__ */ r.jsx(d, { error: m, label: e, required: o, htmlFor: t, children: /* @__PURE__ */ r.jsx(
-    p,
-    {
-      disablePortal: !0,
-      fullWidth: !0,
-      renderInput: (f) => /* @__PURE__ */ r.jsx(u, { ...f }),
-      id: t,
-      ...i,
-      ref: s
-    }
-  ) })
+    htmlFor: l,
+    ...s
+  }, d) => {
+    const u = p(), o = l ?? u;
+    return /* @__PURE__ */ t.jsx(c, { error: m, label: e, required: r, htmlFor: o, children: /* @__PURE__ */ t.jsx(
+      a,
+      {
+        disablePortal: !0,
+        fullWidth: !0,
+        renderInput: (f) => /* @__PURE__ */ t.jsx(n, { ...f }),
+        id: o,
+        ...s,
+        ref: d
+      }
+    ) });
+  }
 );
 export {
-  c as default
+  F as default
 };

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

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

package/dist/s-button/index.js

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

package/dist/s-button/package.json

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

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

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

package/dist/s-button/s-button.js

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

package/dist/s-button-link/s-button-link.d.ts

@@ -1,15 +1,51 @@
+import * as React from 'react';
+/**
+ * Props interface for SButtonLink component
+ */
 export interface SButtonLinkProps {
+    /** Text or element displayed before the main link */
     beforeText?: string | React.ReactNode;
+    /** Text or element displayed after the main link */
     afterText?: string | React.ReactNode;
+    /** The main clickable link text or element */
     mainText?: string | React.ReactNode;
+    /** URL for the link (defaults to '#') */
     href?: string;
+    /** Component to render the link as (e.g., RouterLink for client-side routing) */
     component?: any;
+    /** Target attribute for the link (e.g., '_blank' for new tab) */
     target?: string;
+    /** Color of the surrounding text */
     color?: string;
+    /** Color of the link itself (overrides default link color) */
     linkColor?: string;
+    /** Line height for the typography */
     lineHeight?: string;
+    /** Typography variant for the container text */
     variant?: 'body1' | 'body2' | 'button' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'inherit' | 'overline' | 'subtitle1' | 'subtitle2';
+    /** Click handler for the link */
     onClick?: () => void;
 }
-declare const SButtonLink: ({ onClick, beforeText, afterText, mainText, href, component, target, color, linkColor, variant, lineHeight, }: SButtonLinkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * SButtonLink - A flexible link component that combines text and a clickable link element.
+ * Useful for creating contextual links within text content, such as "Don't have an account? Sign up here."
+ *
+ * Key features:
+ * - Supports text before and after the main link
+ * - Configurable typography variant and colors
+ * - Component prop for integration with routing libraries (e.g., React Router)
+ * - Target attribute support for controlling link behavior
+ * - Consistent cursor and font size inheritance
+ * - Default fallback values for common use cases
+ *
+ * Common use cases:
+ * - Authentication flows ("Already have an account? Sign in")
+ * - Call-to-action text with embedded links
+ * - Help text with contextual links
+ * - Navigation breadcrumbs with text context
+ *
+ * @param props - SButtonLinkProps with text content, link configuration, and styling
+ * @returns JSX.Element - Typography containing text with embedded link
+ */
+declare const SButtonLink: ({ onClick, beforeText, afterText, mainText, href, component, target, color, linkColor, variant, lineHeight, }: SButtonLinkProps) => React.JSX.Element;
 export default SButtonLink;

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

@@ -1,7 +1,28 @@
 import { default as React } from 'react';
 import { CheckboxProps } from '@mui/material';
+/**
+ * Props interface for SCheckbox component - extends Material-UI CheckboxProps
+ * but removes 'content' to avoid conflicts with our custom content prop
+ */
 export interface SCheckboxProps extends Omit<CheckboxProps, 'content'> {
+    /** Content displayed as a clickable label next to the checkbox */
     content?: string | React.ReactNode;
 }
+/**
+ * SCheckbox - A checkbox component with integrated label support that maintains
+ * proper accessibility and consistent styling with the design system.
+ *
+ * Key features:
+ * - Automatic ID generation for accessibility when no ID is provided
+ * - Clickable label that toggles the checkbox state
+ * - Horizontal layout with proper spacing between checkbox and label
+ * - Full Material-UI Checkbox API compatibility
+ * - Forward ref support for form libraries and external control
+ * - Typography integration for consistent text styling
+ *
+ * @param props - SCheckboxProps with content and Material-UI Checkbox props
+ * @param ref - Forward ref to the underlying Checkbox component
+ * @returns JSX.Element - Checkbox with optional integrated label
+ */
 declare const SCheckbox: React.ForwardRefExoticComponent<Omit<SCheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default SCheckbox;

package/dist/s-checkbox/s-checkbox.js

@@ -1,15 +1,15 @@
 import { j as r } from "../jsx-runtime-DywqP_6a.js";
-import { forwardRef as a, useId as d } from "react";
-import { Stack as s, Checkbox as l, Typography as n } from "@mui/material";
-const m = a(
-  ({ content: e, ...t }, o) => {
-    const i = d();
-    return /* @__PURE__ */ r.jsxs(s, { alignItems: "center", direction: "row", display: "flex", gap: 1, justifyContent: "start", children: [
-      /* @__PURE__ */ r.jsx(l, { ref: o, ...t, id: t.id ?? i }),
-      e && /* @__PURE__ */ r.jsx("label", { htmlFor: t.id ?? i, children: /* @__PURE__ */ r.jsx(n, { variant: "body2", children: e }) })
+import { forwardRef as d, useId as a } from "react";
+import { Stack as c, Checkbox as n, Typography as l } from "@mui/material";
+const h = d(
+  ({ content: t, ...e }, s) => {
+    const i = a(), o = e.id ?? i;
+    return /* @__PURE__ */ r.jsxs(c, { alignItems: "center", direction: "row", display: "flex", justifyContent: "start", children: [
+      /* @__PURE__ */ r.jsx(n, { ref: s, ...e, id: o }),
+      t && /* @__PURE__ */ r.jsx("label", { htmlFor: o, children: /* @__PURE__ */ r.jsx(l, { variant: "body2", children: t }) })
     ] });
   }
 );
 export {
-  m as default
+  h as default
 };

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

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

package/dist/s-chip/index.js

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

package/dist/s-chip/package.json

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

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

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

package/dist/s-chip/s-chip.js

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

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

@@ -1,8 +1,33 @@
+import * as React from 'react';
+/**
+ * Props interface for SChips component
+ */
 export interface SChipsProps {
+    /** Array of strings to display as chips */
     chips: string[];
+    /** Whether to handle overflow with '+N more' chip (default: true) */
     overflow?: boolean;
+    /** Callback fired when a chip is clicked */
     onClick?: (tag: string) => void;
+    /** Text used in overflow chip (default: 'keywords') */
     overflowText?: string;
 }
-declare const SChips: ({ chips, overflow, onClick, overflowText }: SChipsProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * SChips - A smart chip display component that handles overflow with intelligent truncation.
+ *
+ * Key features:
+ * - Responsive overflow handling that shows '+N more' when chips exceed container width
+ * - Dynamic width calculation using DOM measurement
+ * - Tooltip display of hidden chips on hover
+ * - Click handling for individual chips
+ * - Automatic recalculation on window resize
+ * - Configurable overflow text for different use cases
+ *
+ * The component uses real DOM measurement to accurately calculate chip widths
+ * and determines how many chips can fit in the available space.
+ *
+ * @param props - SChipsProps with chips array and configuration options
+ * @returns JSX.Element - Responsive chip display with overflow handling
+ */
+declare const SChips: ({ chips, overflow, onClick, overflowText }: SChipsProps) => React.JSX.Element;
 export default SChips;

package/dist/s-chips/s-chips.js

@@ -1,38 +1,43 @@
 import { j as s } from "../jsx-runtime-DywqP_6a.js";
-import { useRef as S, useState as m, useEffect as E } from "react";
-import { Box as o, Chip as h, Tooltip as R } from "@mui/material";
-const P = ({ chips: n, overflow: l = !0, onClick: r, overflowText: c = "keywords" }) => {
-  const u = S(null), [w, C] = m([]), [j, y] = m([]), [x, W] = m(0), a = () => {
+import { useRef as S, useState as m, useEffect as v } from "react";
+import { Box as a, Chip as h, Tooltip as E } from "@mui/material";
+const L = ({ chips: n, overflow: r = !0, onClick: l, overflowText: c = "keywords" }) => {
+  const u = S(null), [C, w] = m([]), [W, j] = m([]), [x, y] = m(0), p = () => {
     var f;
     const t = ((f = u.current) == null ? void 0 : f.offsetWidth) || 0;
     let e = 0, i = 0;
-    for (let p = 0; p < n.length; p++) {
-      const b = d(n[p]);
+    for (let o = 0; o < n.length; o++) {
+      const b = d(n[o]);
       if (e + b <= t)
         e += b, i++;
       else
         break;
     }
-    const g = d(`+${n.length - i} ${c}`);
-    for (; e + g > t && i > 0; )
-      i--, e -= d(n[i]);
-    C(n.slice(0, i)), y(n.slice(i)), W(n.length - i);
+    if (i < n.length) {
+      const o = d(`+${n.length - i} ${c}`);
+      for (; e + o > t && i > 0; )
+        i--, e -= d(n[i]);
+    }
+    w(n.slice(0, i)), j(n.slice(i)), y(n.length - i);
   }, d = (t) => {
     const e = document.createElement("span");
     e.style.visibility = "hidden", e.style.position = "absolute", e.style.whiteSpace = "nowrap", e.textContent = t.trim(), document.body.appendChild(e);
     const i = e.offsetWidth;
     return document.body.removeChild(e), i + 16;
-  }, v = l ? { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" } : {};
-  return E(() => (a(), window.addEventListener("resize", a), () => {
-    window.removeEventListener("resize", a);
-  }), [n]), /* @__PURE__ */ s.jsxs(o, { ref: u, display: "flex", maxWidth: "100%", ...v, children: [
-    (l ? w : n).map((t) => /* @__PURE__ */ s.jsx(
-      o,
+  }, g = r ? { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" } : {};
+  return v(() => {
+    if (r)
+      return p(), window.addEventListener("resize", p), () => {
+        window.removeEventListener("resize", p);
+      };
+  }, [n, r]), /* @__PURE__ */ s.jsxs(a, { ref: u, display: "flex", maxWidth: "100%", flexWrap: r ? "nowrap" : "wrap", ...g, children: [
+    (r ? C : n).map((t) => /* @__PURE__ */ s.jsx(
+      a,
       {
         component: "span",
         textTransform: "lowercase",
         onClick: () => {
-          r == null || r(t);
+          l == null || l(t);
         },
         children: /* @__PURE__ */ s.jsx(
           h,
@@ -42,21 +47,21 @@ const P = ({ chips: n, overflow: l = !0, onClick: r, overflowText: c = "keywords
               mr: 1,
               mb: 1,
               userSelect: "none",
-              cursor: r ? "pointer" : "default"
+              cursor: l ? "pointer" : "default"
             }
           }
         )
       },
       t
     )),
-    l && x > 0 && /* @__PURE__ */ s.jsx(
-      R,
+    r && x > 0 && /* @__PURE__ */ s.jsx(
+      E,
       {
         slotProps: {
           tooltip: { style: { padding: "0.5rem" } }
         },
-        title: /* @__PURE__ */ s.jsx(o, { display: "flex", gap: 1, maxWidth: "240px", flexWrap: "wrap", children: j.map((t) => /* @__PURE__ */ s.jsx(h, { label: t.trim() }, t)) }),
-        children: /* @__PURE__ */ s.jsx(o, { component: "span", textTransform: "lowercase", children: /* @__PURE__ */ s.jsx(
+        title: /* @__PURE__ */ s.jsx(a, { display: "flex", gap: 1, maxWidth: "240px", flexWrap: "wrap", children: W.map((t) => /* @__PURE__ */ s.jsx(h, { label: t.trim() }, t)) }),
+        children: /* @__PURE__ */ s.jsx(a, { component: "span", textTransform: "lowercase", children: /* @__PURE__ */ s.jsx(
           h,
           {
             label: `+${x} ${c}`,
@@ -69,5 +74,5 @@ const P = ({ chips: n, overflow: l = !0, onClick: r, overflowText: c = "keywords
   ] });
 };
 export {
-  P as default
+  L as default
 };

package/dist/s-copilot-kit-provider/s-copilot-kit-provider.d.ts

@@ -1,7 +1,35 @@
 import { default as React } from 'react';
 import { CopilotKitProps } from '@copilotkit/react-core';
+/**
+ * Props for the SCopilotKitProvider component
+ * Extends CopilotKit props but ensures children is always ReactNode type
+ */
 export type SCopilotKitProviderProps = Omit<CopilotKitProps, 'children'> & {
+    /** Child components that will have access to CopilotKit functionality */
     children: React.ReactNode;
 };
+/**
+ * Enhanced CopilotKit provider wrapper with default configurations
+ *
+ * Provides a configured CopilotKit context to child components with sensible defaults.
+ * The dev console is disabled by default for cleaner production experience.
+ *
+ * CopilotKit enables AI-powered features like:
+ * - Chatbots and conversational interfaces
+ * - AI-assisted text editing and completion
+ * - Context-aware AI actions and responses
+ * - Integration with various AI models and services
+ *
+ * @param children - Child components that will have access to CopilotKit
+ * @param copilotKitProps - All other CopilotKit configuration props
+ * @returns JSX element wrapping children with CopilotKit context
+ *
+ * @example
+ * ```tsx
+ * <SCopilotKitProvider publicApiKey="your-api-key">
+ *   <YourApp />
+ * </SCopilotKitProvider>
+ * ```
+ */
 export declare function SCopilotKitProvider({ children, ...copilotKitProps }: SCopilotKitProviderProps): import("react/jsx-runtime").JSX.Element;
 export default SCopilotKitProvider;

package/dist/s-copyable-text/s-copyable-text.d.ts

@@ -1,8 +1,49 @@
-import { TypographyProps } from '@mui/material';
+import { PaperProps, TypographyProps } from '@mui/material';
+/**
+ * Props for the SCopyableText component
+ */
 export interface SCopyableTextProps {
+    /** The text content to display and copy */
     text?: string;
+    /** Additional props to pass to the Typography component */
     typographyProps?: TypographyProps;
+    /** Callback function called when text is successfully copied */
     onCopied?: () => void;
+    /** Additional props to pass to the Paper component */
+    paperProps?: PaperProps;
 }
-declare const SCopyableText: ({ text, typographyProps, onCopied }: SCopyableTextProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Text display component with built-in copy-to-clipboard functionality
+ *
+ * Displays text content in a styled container with a copy button overlay.
+ * Features visual feedback when copying is successful and handles copy
+ * errors gracefully.
+ *
+ * Features:
+ * - One-click copy to clipboard using modern Clipboard API
+ * - Visual feedback with icon change and color indication
+ * - Automatic reset of copied state after 2 seconds
+ * - Styled text container with border and proper spacing
+ * - Word wrapping and break-word handling for long content
+ * - Customizable typography through props
+ * - Optional callback for copy success events
+ *
+ * @param text - The text content to display and enable copying for
+ * @param typographyProps - Additional Material-UI Typography props for styling
+ * @param onCopied - Optional callback function triggered when copy succeeds
+ * @returns JSX element containing styled text with copy button, or null if no text
+ *
+ * @example
+ * ```tsx
+ * <SCopyableText
+ *   text="const apiKey = 'sk-1234567890abcdef';"
+ *   onCopied={() => console.log('API key copied!')}
+ *   typographyProps={{
+ *     variant: 'code',
+ *     color: 'primary'
+ *   }}
+ * />
+ * ```
+ */
+declare const SCopyableText: ({ text, typographyProps, onCopied, paperProps }: SCopyableTextProps) => import("react/jsx-runtime").JSX.Element | null;
 export default SCopyableText;

package/dist/s-copyable-text/s-copyable-text.js

@@ -1,56 +1,64 @@
 import { j as e } from "../jsx-runtime-DywqP_6a.js";
 import { useState as l } from "react";
-import { Box as d, IconButton as m, Typography as x } from "@mui/material";
-import { c as i } from "../createSvgIcon-DN-sh_sr.js";
-const u = i(/* @__PURE__ */ e.jsx("path", {
+import { Paper as x, Box as m, IconButton as h, Typography as u } from "@mui/material";
+import { c } from "../createSvgIcon-9XY7lJan.js";
+const p = c(/* @__PURE__ */ e.jsx("path", {
   d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-}), "Check"), h = i(/* @__PURE__ */ e.jsx("path", {
+}), "Check"), f = c(/* @__PURE__ */ e.jsx("path", {
   d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"
-}), "ContentCopy"), b = ({ text: t, typographyProps: o, onCopied: r }) => {
-  const [s, c] = l(!1), a = async () => {
-    if (t)
+}), "ContentCopy"), w = ({ text: r, typographyProps: t, onCopied: o, paperProps: i }) => {
+  const [s, a] = l(!1), n = async () => {
+    if (r)
       try {
-        await navigator.clipboard.writeText(t), c(!0), setTimeout(() => c(!1), 2e3), r == null || r();
-      } catch (n) {
-        console.error("Failed to copy text:", n);
+        await navigator.clipboard.writeText(r), a(!0), setTimeout(() => a(!1), 2e3), o == null || o();
+      } catch (d) {
+        console.error("Failed to copy text:", d);
       }
   };
-  return t ? /* @__PURE__ */ e.jsxs(d, { sx: { position: "relative" }, children: [
+  return r ? /* @__PURE__ */ e.jsx(x, { sx: { p: 2, border: "1px dashed", borderColor: "divider" }, ...i, children: /* @__PURE__ */ e.jsxs(m, { sx: { position: "relative" }, children: [
     /* @__PURE__ */ e.jsx(
-      m,
+      h,
       {
-        onClick: a,
+        onClick: n,
         size: "small",
         sx: {
           position: "absolute",
-          top: 8,
-          right: 8,
+          top: "50%",
+          transform: "translateY(-50%)",
+          right: 0,
           zIndex: 1,
+          // Ensure button appears above text
           color: s ? "success.main" : "inherit"
+          // Green when copied
         },
-        children: s ? /* @__PURE__ */ e.jsx(u, { fontSize: "small" }) : /* @__PURE__ */ e.jsx(h, { fontSize: "small" })
+        children: s ? /* @__PURE__ */ e.jsx(p, {}) : /* @__PURE__ */ e.jsx(f, {})
       }
     ),
     /* @__PURE__ */ e.jsx(
-      x,
+      u,
       {
         variant: "body1",
         sx: {
           marginBottom: 0,
           whiteSpace: "pre-wrap",
+          // Preserve whitespace and line breaks
           padding: 2,
+          // Inner spacing
           borderRadius: 1,
           border: "1px solid var(--s-palette-divider)",
+          // Theme-aware border
           wordBreak: "break-word",
-          ...o == null ? void 0 : o.sx
+          // Handle long words gracefully
+          ...t == null ? void 0 : t.sx
+          // Allow custom styling override
         },
         color: "text.secondary",
-        ...o,
-        children: t
+        ...t,
+        children: r
       }
     )
-  ] }) : null;
+  ] }) }) : null;
 };
 export {
-  b as default
+  w as default
 };