@fairmint/ui 0.2.7 → 0.2.9

package/dist/fairmint-ui.cjs

@@ -21,7 +21,7 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
-function clamp$3(value, min2, max2) {
+function clamp$4(value, min2, max2) {
   if (min2 === void 0 && max2 === void 0) {
     return value;
   }
@@ -2751,6 +2751,23 @@ TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
   childFactory: PropTypes.func
 } : {};
 TransitionGroup.defaultProps = defaultProps$_;
+var extendStatics = function(d, b) {
+  extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {
+    d2.__proto__ = b2;
+  } || function(d2, b2) {
+    for (var p in b2) if (Object.prototype.hasOwnProperty.call(b2, p)) d2[p] = b2[p];
+  };
+  return extendStatics(d, b);
+};
+function __extends(d, b) {
+  if (typeof b !== "function" && b !== null)
+    throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+  extendStatics(d, b);
+  function __() {
+    this.constructor = d;
+  }
+  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
 var __assign = function() {
   __assign = Object.assign || function __assign2(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -3857,8 +3874,8 @@ function mergeClassNames(objects) {
   });
   return merged;
 }
-function resolveClassNames({ theme: theme2, classNames, props, stylesCtx }) {
-  const arrayClassNames = Array.isArray(classNames) ? classNames : [classNames];
+function resolveClassNames({ theme: theme2, classNames: classNames2, props, stylesCtx }) {
+  const arrayClassNames = Array.isArray(classNames2) ? classNames2 : [classNames2];
   const resolvedClassNames = arrayClassNames.map(
     (item) => typeof item === "function" ? item(theme2, props, stylesCtx) : item || EMPTY_CLASS_NAMES
   );
@@ -5168,7 +5185,7 @@ function MantineProvider({
 }
 MantineProvider.displayName = "@mantine/core/MantineProvider";
 function useResolvedStylesApi({
-  classNames,
+  classNames: classNames2,
   styles,
   props,
   stylesCtx
@@ -5177,7 +5194,7 @@ function useResolvedStylesApi({
   return {
     resolvedClassNames: resolveClassNames({
       theme: theme2,
-      classNames,
+      classNames: classNames2,
       props,
       stylesCtx: stylesCtx || void 0
     }),
@@ -5218,10 +5235,10 @@ function getResolvedClassNames({
   selector,
   stylesCtx,
   theme: theme2,
-  classNames,
+  classNames: classNames2,
   props
 }) {
-  return resolveClassNames({ theme: theme2, classNames, props, stylesCtx })[selector];
+  return resolveClassNames({ theme: theme2, classNames: classNames2, props, stylesCtx })[selector];
 }
 function getRootClassName({ rootSelector, selector, className }) {
   return rootSelector === selector ? className : void 0;
@@ -5270,7 +5287,7 @@ function getClassName({
   themeName,
   selector,
   classNamesPrefix,
-  classNames,
+  classNames: classNames2,
   classes: classes2,
   unstyled,
   className,
@@ -5285,7 +5302,7 @@ function getClassName({
     getGlobalClassNames({ theme: theme2, options, unstyled: unstyled || headless }),
     getThemeClassNames({ theme: theme2, themeName, selector, props, stylesCtx }),
     getVariantClassName({ options, classes: classes2, selector, unstyled }),
-    getResolvedClassNames({ selector, stylesCtx, theme: theme2, classNames, props }),
+    getResolvedClassNames({ selector, stylesCtx, theme: theme2, classNames: classNames2, props }),
     getResolvedClassNames({ selector, stylesCtx, theme: theme2, classNames: transformedStyles, props }),
     getOptionsClassNames({ selector, stylesCtx, options, props, theme: theme2 }),
     getRootClassName({ rootSelector, selector, className }),
@@ -5411,7 +5428,7 @@ function useStyles({
   style,
   rootSelector = "root",
   unstyled,
-  classNames,
+  classNames: classNames2,
   styles,
   vars,
   varsResolver: varsResolver2,
@@ -5434,7 +5451,7 @@ function useStyles({
       themeName,
       selector,
       classNamesPrefix,
-      classNames,
+      classNames: classNames2,
       classes: classes2,
       unstyled,
       className,
@@ -6372,7 +6389,7 @@ const oppositeSideMap = {
   bottom: "top",
   top: "bottom"
 };
-function clamp$2(start, value, end) {
+function clamp$3(start, value, end) {
   return max(start, min(value, end));
 }
 function evaluate(value, param) {
@@ -6878,7 +6895,7 @@ const arrow$3 = (options) => ({
     const min$1 = minPadding;
     const max2 = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset2 = clamp$2(min$1, center, max2);
+    const offset2 = clamp$3(min$1, center, max2);
     const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
     const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
     return {
@@ -7295,14 +7312,14 @@ const shift$2 = function(options) {
         const maxSide = mainAxis === "y" ? "bottom" : "right";
         const min2 = mainAxisCoord + overflow[minSide];
         const max2 = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = clamp$2(min2, mainAxisCoord, max2);
+        mainAxisCoord = clamp$3(min2, mainAxisCoord, max2);
       }
       if (checkCrossAxis) {
         const minSide = crossAxis === "y" ? "top" : "left";
         const maxSide = crossAxis === "y" ? "bottom" : "right";
         const min2 = crossAxisCoord + overflow[minSide];
         const max2 = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = clamp$2(min2, crossAxisCoord, max2);
+        crossAxisCoord = clamp$3(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
         ...state,
@@ -9769,7 +9786,7 @@ function linearScale(input, output) {
     return output[0] + ratio * (value - input[0]);
   };
 }
-function clamp$1(value, [min2, max2]) {
+function clamp$2(value, [min2, max2]) {
   return Math.min(max2, Math.max(min2, value));
 }
 function getThumbOffsetFromScroll(scrollPos, sizes2, dir = "ltr") {
@@ -9779,7 +9796,7 @@ function getThumbOffsetFromScroll(scrollPos, sizes2, dir = "ltr") {
   const maxScrollPos = sizes2.content - sizes2.viewport;
   const maxThumbPos = scrollbar - thumbSizePx;
   const scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
-  const scrollWithoutMomentum = clamp$1(scrollPos, scrollClampRange);
+  const scrollWithoutMomentum = clamp$2(scrollPos, scrollClampRange);
   const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
   return interpolate(scrollWithoutMomentum);
 }
@@ -10367,7 +10384,7 @@ const varsResolver$T = createVarsResolver(
 const ScrollArea = factory((_props, ref) => {
   const props = useProps("ScrollArea", defaultProps$X, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -10397,7 +10414,7 @@ const ScrollArea = factory((_props, ref) => {
     classes: classes$Q,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -10497,7 +10514,7 @@ ScrollArea.displayName = "@mantine/core/ScrollArea";
 const ScrollAreaAutosize = factory((props, ref) => {
   const {
     children,
-    classNames,
+    classNames: classNames2,
     styles,
     scrollbarSize,
     scrollHideDelay,
@@ -10565,7 +10582,7 @@ const ScrollAreaAutosize = factory((props, ref) => {
       children: /* @__PURE__ */ jsxRuntime.jsx(
         ScrollArea,
         {
-          classNames,
+          classNames: classNames2,
           styles,
           scrollHideDelay,
           scrollbarSize,
@@ -10605,7 +10622,7 @@ const UnstyledButton = polymorphicFactory(
       component = "button",
       __staticSelector,
       unstyled,
-      classNames,
+      classNames: classNames2,
       styles,
       style,
       attributes,
@@ -10617,7 +10634,7 @@ const UnstyledButton = polymorphicFactory(
       classes: classes$P,
       className,
       style,
-      classNames,
+      classNames: classNames2,
       styles,
       unstyled,
       attributes
@@ -10639,14 +10656,14 @@ UnstyledButton.displayName = "@mantine/core/UnstyledButton";
 var classes$O = { "root": "m_515a97f8" };
 const VisuallyHidden = factory((_props, ref) => {
   const props = useProps("VisuallyHidden", null, _props);
-  const { classNames, className, style, styles, unstyled, vars, attributes, ...others } = props;
+  const { classNames: classNames2, className, style, styles, unstyled, vars, attributes, ...others } = props;
   const getStyles2 = useStyles({
     name: "VisuallyHidden",
     classes: classes$O,
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes
@@ -10665,7 +10682,7 @@ const varsResolver$S = createVarsResolver((_, { radius, shadow }) => ({
 const Paper = polymorphicFactory((_props, ref) => {
   const props = useProps("Paper", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -10685,7 +10702,7 @@ const Paper = polymorphicFactory((_props, ref) => {
     classes: classes$N,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -10861,7 +10878,7 @@ const varsResolver$R = createVarsResolver(
 const Overlay = polymorphicFactory((_props, ref) => {
   const props = useProps("Overlay", defaultProps$V, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -10886,7 +10903,7 @@ const Overlay = polymorphicFactory((_props, ref) => {
     classes: classes$M,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -11269,7 +11286,7 @@ const PopoverDropdown = factory((_props, ref) => {
     children,
     onKeyDownCapture,
     variant,
-    classNames,
+    classNames: classNames2,
     styles,
     ...others
   } = props;
@@ -11319,7 +11336,7 @@ const PopoverDropdown = factory((_props, ref) => {
           ...ctx.getStyles("dropdown", {
             className,
             props,
-            classNames,
+            classNames: classNames2,
             styles,
             style: [
               {
@@ -11351,7 +11368,7 @@ const PopoverDropdown = factory((_props, ref) => {
                 arrowPosition: ctx.arrowPosition,
                 ...ctx.getStyles("arrow", {
                   props,
-                  classNames,
+                  classNames: classNames2,
                   styles
                 })
               }
@@ -11589,7 +11606,7 @@ function Popover(_props) {
     arrowRadius,
     arrowPosition,
     unstyled,
-    classNames,
+    classNames: classNames2,
     styles,
     closeOnClickOutside,
     withinPortal,
@@ -11625,7 +11642,7 @@ function Popover(_props) {
     name: __staticSelector,
     props,
     classes: classes$L,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -11633,7 +11650,7 @@ function Popover(_props) {
     vars,
     varsResolver: varsResolver$Q
   });
-  const { resolvedStyles } = useResolvedStylesApi({ classNames, styles, props });
+  const { resolvedStyles } = useResolvedStylesApi({ classNames: classNames2, styles, props });
   const [dropdownVisible, setDropdownVisible] = React.useState(opened ?? defaultOpened ?? false);
   const positionRef = React.useRef(position);
   const arrowRef = React.useRef(null);
@@ -11739,7 +11756,7 @@ function Popover(_props) {
         withRoles,
         targetProps: others,
         __staticSelector,
-        classNames,
+        classNames: classNames2,
         styles,
         unstyled,
         variant,
@@ -11808,7 +11825,7 @@ const varsResolver$P = createVarsResolver((theme2, { size: size2, color }) => ({
     "--loader-color": color ? getThemeColor(color, theme2) : void 0
   }
 }));
-const Loader = factory((_props, ref) => {
+const Loader$1 = factory((_props, ref) => {
   const props = useProps("Loader", defaultProps$R, _props);
   const {
     size: size2,
@@ -11817,7 +11834,7 @@ const Loader = factory((_props, ref) => {
     vars,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     loaders,
@@ -11832,7 +11849,7 @@ const Loader = factory((_props, ref) => {
     classes: classes$K,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -11854,9 +11871,9 @@ const Loader = factory((_props, ref) => {
     }
   );
 });
-Loader.defaultLoaders = defaultLoaders;
-Loader.classes = classes$K;
-Loader.displayName = "@mantine/core/Loader";
+Loader$1.defaultLoaders = defaultLoaders;
+Loader$1.classes = classes$K;
+Loader$1.displayName = "@mantine/core/Loader";
 var classes$J = { "root": "m_8d3f4000", "icon": "m_8d3afb97", "loader": "m_302b9fb1", "group": "m_1a0f1b21", "groupSection": "m_437b6484" };
 const defaultProps$Q = {
   orientation: "horizontal"
@@ -11869,7 +11886,7 @@ const ActionIconGroup = factory((_props, ref) => {
   const {
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     orientation,
@@ -11886,7 +11903,7 @@ const ActionIconGroup = factory((_props, ref) => {
     classes: classes$J,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -11935,7 +11952,7 @@ const ActionIconGroupSection = factory((_props, ref) => {
   const {
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     vars,
@@ -11952,7 +11969,7 @@ const ActionIconGroupSection = factory((_props, ref) => {
     classes: classes$J,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -11992,7 +12009,7 @@ const ActionIcon$1 = polymorphicFactory((_props, ref) => {
     className,
     unstyled,
     variant,
-    classNames,
+    classNames: classNames2,
     styles,
     style,
     loading,
@@ -12017,7 +12034,7 @@ const ActionIcon$1 = polymorphicFactory((_props, ref) => {
     className,
     style,
     classes: classes$J,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -12036,7 +12053,7 @@ const ActionIcon$1 = polymorphicFactory((_props, ref) => {
       ref,
       mod: [{ loading, disabled: disabled || dataDisabled }, mod],
       children: [
-        typeof loading === "boolean" && /* @__PURE__ */ jsxRuntime.jsx(Transition$1, { mounted: loading, transition: "slide-down", duration: 150, children: (transitionStyles) => /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", ...getStyles2("loader", { style: transitionStyles }), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { color: "var(--ai-color)", size: "calc(var(--ai-size) * 0.55)", ...loaderProps }) }) }),
+        typeof loading === "boolean" && /* @__PURE__ */ jsxRuntime.jsx(Transition$1, { mounted: loading, transition: "slide-down", duration: 150, children: (transitionStyles) => /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", ...getStyles2("loader", { style: transitionStyles }), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(Loader$1, { color: "var(--ai-color)", size: "calc(var(--ai-size) * 0.55)", ...loaderProps }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", mod: { loading }, ...getStyles2("icon"), children })
       ]
     }
@@ -12088,7 +12105,7 @@ const CloseButton = polymorphicFactory((_props, ref) => {
     vars,
     radius,
     className,
-    classNames,
+    classNames: classNames2,
     style,
     styles,
     unstyled,
@@ -12107,7 +12124,7 @@ const CloseButton = polymorphicFactory((_props, ref) => {
     className,
     style,
     classes: classes$I,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -12158,7 +12175,7 @@ const varsResolver$K = createVarsResolver(
 const Group = factory((_props, ref) => {
   const props = useProps("Group", defaultProps$O, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -12189,7 +12206,7 @@ const Group = factory((_props, ref) => {
     className,
     style,
     classes: classes$H,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -12519,10 +12536,10 @@ const [InputContext, useInputContext] = createOptionalContext({
 var classes$F = { "wrapper": "m_6c018570", "input": "m_8fb7ebe7", "section": "m_82577fc2", "placeholder": "m_88bacfd0", "root": "m_46b77525", "label": "m_8fdc1311", "required": "m_78a94662", "error": "m_8f816625", "description": "m_fe47ce59" };
 const InputClearButton = factory((_props, ref) => {
   const props = useProps("InputClearButton", null, _props);
-  const { size: size2, variant, vars, classNames, styles, ...others } = props;
+  const { size: size2, variant, vars, classNames: classNames2, styles, ...others } = props;
   const ctx = useInputContext();
   const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
-    classNames,
+    classNames: classNames2,
     styles,
     props
   });
@@ -12592,7 +12609,7 @@ const varsResolver$J = createVarsResolver((_, { size: size2 }) => ({
 const InputDescription = factory((_props, ref) => {
   const props = useProps("InputDescription", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -12612,7 +12629,7 @@ const InputDescription = factory((_props, ref) => {
     classes: classes$F,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -12643,7 +12660,7 @@ const varsResolver$I = createVarsResolver((_, { size: size2 }) => ({
 const InputError = factory((_props, ref) => {
   const props = useProps("InputError", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -12662,7 +12679,7 @@ const InputError = factory((_props, ref) => {
     classes: classes$F,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -12698,7 +12715,7 @@ const varsResolver$H = createVarsResolver((_, { size: size2 }) => ({
 const InputLabel = factory((_props, ref) => {
   const props = useProps("InputLabel", defaultProps$N, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -12722,7 +12739,7 @@ const InputLabel = factory((_props, ref) => {
     classes: classes$F,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -12761,7 +12778,7 @@ InputLabel.displayName = "@mantine/core/InputLabel";
 const InputPlaceholder = factory((_props, ref) => {
   const props = useProps("InputPlaceholder", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -12780,7 +12797,7 @@ const InputPlaceholder = factory((_props, ref) => {
     classes: classes$F,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -12828,7 +12845,7 @@ const varsResolver$G = createVarsResolver((_, { size: size2 }) => ({
 const InputWrapper = factory((_props, ref) => {
   const props = useProps("InputWrapper", defaultProps$M, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -12861,7 +12878,7 @@ const InputWrapper = factory((_props, ref) => {
     classes: classes$F,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -12985,7 +13002,7 @@ const varsResolver$F = createVarsResolver((_, props, ctx) => ({
 const Input = polymorphicFactory((_props, ref) => {
   const props = useProps("Input", defaultProps$L, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -13030,7 +13047,7 @@ const Input = polymorphicFactory((_props, ref) => {
     classes: classes$F,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -13130,7 +13147,7 @@ function useInputProps(component, defaultProps2, _props) {
     description,
     error: error2,
     required,
-    classNames,
+    classNames: classNames2,
     styles,
     className,
     unstyled,
@@ -13158,7 +13175,7 @@ function useInputProps(component, defaultProps2, _props) {
     description,
     error: error2,
     required,
-    classNames,
+    classNames: classNames2,
     className,
     __staticSelector,
     __stylesApiProps: __stylesApiProps || props,
@@ -13180,13 +13197,13 @@ function useInputProps(component, defaultProps2, _props) {
   };
   return {
     ...rest,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     wrapperProps: { ...wrapperProps, ...styleProps },
     inputProps: {
       required,
-      classNames,
+      classNames: classNames2,
       styles,
       unstyled,
       size: size2,
@@ -13223,7 +13240,7 @@ var classes$E = { "root": "m_8bffd616" };
 const Flex = polymorphicFactory((_props, ref) => {
   const props = useProps("Flex", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -13245,7 +13262,7 @@ const Flex = polymorphicFactory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -13404,7 +13421,7 @@ const varsResolver$E = createVarsResolver(
 const FloatingIndicator = factory((_props, ref) => {
   const props = useProps("FloatingIndicator", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -13424,7 +13441,7 @@ const FloatingIndicator = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -13516,7 +13533,7 @@ const varsResolver$D = createVarsResolver(
 const Alert$1 = factory((_props, ref) => {
   const props = useProps("Alert", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -13543,7 +13560,7 @@ const Alert$1 = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -13627,7 +13644,7 @@ const Text = polymorphicFactory((_props, ref) => {
     vars,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     variant,
@@ -13642,7 +13659,7 @@ const Text = polymorphicFactory((_props, ref) => {
     classes: classes$B,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -13703,7 +13720,7 @@ const [AppShellProvider, useAppShellContext] = createSafeContext(
 var classes$z = { "root": "m_89ab340", "navbar": "m_45252eee", "aside": "m_9cdde9a", "header": "m_3b16f56b", "main": "m_8983817", "footer": "m_3840c879", "section": "m_6dcfc7c7" };
 const AppShellAside = factory((_props, ref) => {
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -13726,7 +13743,7 @@ const AppShellAside = factory((_props, ref) => {
       mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
       ...ctx.getStyles("aside", {
         className: clsx({ [ReactRemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
-        classNames,
+        classNames: classNames2,
         styles,
         style
       }),
@@ -13739,7 +13756,7 @@ AppShellAside.classes = classes$z;
 AppShellAside.displayName = "@mantine/core/AppShellAside";
 const AppShellFooter = factory((_props, ref) => {
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -13762,7 +13779,7 @@ const AppShellFooter = factory((_props, ref) => {
       mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
       ...ctx.getStyles("footer", {
         className: clsx({ [ReactRemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
-        classNames,
+        classNames: classNames2,
         styles,
         style
       }),
@@ -13775,7 +13792,7 @@ AppShellFooter.classes = classes$z;
 AppShellFooter.displayName = "@mantine/core/AppShellFooter";
 const AppShellHeader = factory((_props, ref) => {
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -13798,7 +13815,7 @@ const AppShellHeader = factory((_props, ref) => {
       mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
       ...ctx.getStyles("header", {
         className: clsx({ [ReactRemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
-        classNames,
+        classNames: classNames2,
         styles,
         style
       }),
@@ -13810,7 +13827,7 @@ const AppShellHeader = factory((_props, ref) => {
 AppShellHeader.classes = classes$z;
 AppShellHeader.displayName = "@mantine/core/AppShellHeader";
 const AppShellMain = factory((_props, ref) => {
-  const { classNames, className, style, styles, vars, ...others } = useProps(
+  const { classNames: classNames2, className, style, styles, vars, ...others } = useProps(
     "AppShellMain",
     null,
     _props
@@ -13821,7 +13838,7 @@ const AppShellMain = factory((_props, ref) => {
     {
       component: "main",
       ref,
-      ...ctx.getStyles("main", { className, style, classNames, styles }),
+      ...ctx.getStyles("main", { className, style, classNames: classNames2, styles }),
       ...others
     }
   );
@@ -14193,7 +14210,7 @@ function AppShellMediaStyles({
 }
 const AppShellNavbar = factory((_props, ref) => {
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -14214,7 +14231,7 @@ const AppShellNavbar = factory((_props, ref) => {
       component: "nav",
       ref,
       mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
-      ...ctx.getStyles("navbar", { className, classNames, styles, style }),
+      ...ctx.getStyles("navbar", { className, classNames: classNames2, styles, style }),
       ...others,
       __vars: { "--app-shell-navbar-z-index": `calc(${zIndex ?? ctx.zIndex} + 1)` }
     }
@@ -14223,7 +14240,7 @@ const AppShellNavbar = factory((_props, ref) => {
 AppShellNavbar.classes = classes$z;
 AppShellNavbar.displayName = "@mantine/core/AppShellNavbar";
 const AppShellSection = polymorphicFactory((_props, ref) => {
-  const { classNames, className, style, styles, vars, grow, mod, ...others } = useProps(
+  const { classNames: classNames2, className, style, styles, vars, grow, mod, ...others } = useProps(
     "AppShellSection",
     null,
     _props
@@ -14234,7 +14251,7 @@ const AppShellSection = polymorphicFactory((_props, ref) => {
     {
       ref,
       mod: [{ grow }, mod],
-      ...ctx.getStyles("section", { className, style, classNames, styles }),
+      ...ctx.getStyles("section", { className, style, classNames: classNames2, styles }),
       ...others
     }
   );
@@ -14286,7 +14303,7 @@ const varsResolver$B = createVarsResolver(
 const AppShell = factory((_props, ref) => {
   const props = useProps("AppShell", defaultProps$H, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -14316,7 +14333,7 @@ const AppShell = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -14403,14 +14420,14 @@ const varsResolver$A = createVarsResolver((theme2, { size: size2, color }) => ({
 }));
 const ComboboxChevron = factory((_props, ref) => {
   const props = useProps("ComboboxChevron", defaultProps$G, _props);
-  const { size: size2, error: error2, style, className, classNames, styles, unstyled, vars, mod, ...others } = props;
+  const { size: size2, error: error2, style, className, classNames: classNames2, styles, unstyled, vars, mod, ...others } = props;
   const getStyles2 = useStyles({
     name: "ComboboxChevron",
     classes: classes$y,
     props,
     style,
     className,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     vars,
@@ -14467,7 +14484,7 @@ const ComboboxClearButton = React.forwardRef(
 );
 ComboboxClearButton.displayName = "@mantine/core/ComboboxClearButton";
 const ComboboxDropdown = factory((props, ref) => {
-  const { classNames, styles, className, style, hidden: hidden2, ...others } = useProps(
+  const { classNames: classNames2, styles, className, style, hidden: hidden2, ...others } = useProps(
     "ComboboxDropdown",
     null,
     props
@@ -14480,7 +14497,7 @@ const ComboboxDropdown = factory((props, ref) => {
       ref,
       role: "presentation",
       "data-hidden": hidden2 || void 0,
-      ...ctx.getStyles("dropdown", { className, style, classNames, styles })
+      ...ctx.getStyles("dropdown", { className, style, classNames: classNames2, styles })
     }
   );
 });
@@ -14501,7 +14518,7 @@ const ComboboxDropdownTarget = factory((props, ref) => {
 });
 ComboboxDropdownTarget.displayName = "@mantine/core/ComboboxDropdownTarget";
 const ComboboxEmpty = factory((props, ref) => {
-  const { classNames, className, style, styles, vars, ...others } = useProps(
+  const { classNames: classNames2, className, style, styles, vars, ...others } = useProps(
     "ComboboxEmpty",
     null,
     props
@@ -14511,7 +14528,7 @@ const ComboboxEmpty = factory((props, ref) => {
     Box,
     {
       ref,
-      ...ctx.getStyles("empty", { className, classNames, styles, style }),
+      ...ctx.getStyles("empty", { className, classNames: classNames2, styles, style }),
       ...others
     }
   );
@@ -14637,7 +14654,7 @@ const ComboboxEventsTarget = factory((props, ref) => {
 });
 ComboboxEventsTarget.displayName = "@mantine/core/ComboboxEventsTarget";
 const ComboboxFooter = factory((props, ref) => {
-  const { classNames, className, style, styles, vars, ...others } = useProps(
+  const { classNames: classNames2, className, style, styles, vars, ...others } = useProps(
     "ComboboxFooter",
     null,
     props
@@ -14647,7 +14664,7 @@ const ComboboxFooter = factory((props, ref) => {
     Box,
     {
       ref,
-      ...ctx.getStyles("footer", { className, classNames, style, styles }),
+      ...ctx.getStyles("footer", { className, classNames: classNames2, style, styles }),
       ...others,
       onMouseDown: (event) => {
         event.preventDefault();
@@ -14658,7 +14675,7 @@ const ComboboxFooter = factory((props, ref) => {
 ComboboxFooter.classes = classes$y;
 ComboboxFooter.displayName = "@mantine/core/ComboboxFooter";
 const ComboboxGroup = factory((props, ref) => {
-  const { classNames, className, style, styles, vars, children, label, id, ...others } = useProps(
+  const { classNames: classNames2, className, style, styles, vars, children, label, id, ...others } = useProps(
     "ComboboxGroup",
     null,
     props
@@ -14671,10 +14688,10 @@ const ComboboxGroup = factory((props, ref) => {
       ref,
       role: "group",
       "aria-labelledby": label ? _id : void 0,
-      ...ctx.getStyles("group", { className, classNames, style, styles }),
+      ...ctx.getStyles("group", { className, classNames: classNames2, style, styles }),
       ...others,
       children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx("div", { id: _id, ...ctx.getStyles("groupLabel", { classNames, styles }), children: label }),
+        label && /* @__PURE__ */ jsxRuntime.jsx("div", { id: _id, ...ctx.getStyles("groupLabel", { classNames: classNames2, styles }), children: label }),
         children
       ]
     }
@@ -14683,7 +14700,7 @@ const ComboboxGroup = factory((props, ref) => {
 ComboboxGroup.classes = classes$y;
 ComboboxGroup.displayName = "@mantine/core/ComboboxGroup";
 const ComboboxHeader = factory((props, ref) => {
-  const { classNames, className, style, styles, vars, ...others } = useProps(
+  const { classNames: classNames2, className, style, styles, vars, ...others } = useProps(
     "ComboboxHeader",
     null,
     props
@@ -14693,7 +14710,7 @@ const ComboboxHeader = factory((props, ref) => {
     Box,
     {
       ref,
-      ...ctx.getStyles("header", { className, classNames, style, styles }),
+      ...ctx.getStyles("header", { className, classNames: classNames2, style, styles }),
       ...others,
       onMouseDown: (event) => {
         event.preventDefault();
@@ -14721,7 +14738,7 @@ ComboboxHiddenInput.displayName = "@mantine/core/ComboboxHiddenInput";
 const ComboboxOption = factory((_props, ref) => {
   const props = useProps("ComboboxOption", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -14742,7 +14759,7 @@ const ComboboxOption = factory((_props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
-      ...ctx.getStyles("option", { className, classNames, styles, style }),
+      ...ctx.getStyles("option", { className, classNames: classNames2, styles, style }),
       ...others,
       ref,
       id: _id,
@@ -14777,7 +14794,7 @@ ComboboxOption.classes = classes$y;
 ComboboxOption.displayName = "@mantine/core/ComboboxOption";
 const ComboboxOptions = factory((_props, ref) => {
   const props = useProps("ComboboxOptions", null, _props);
-  const { classNames, className, style, styles, id, onMouseDown, labelledBy, ...others } = props;
+  const { classNames: classNames2, className, style, styles, id, onMouseDown, labelledBy, ...others } = props;
   const ctx = useComboboxContext();
   const _id = useId$1(id);
   React.useEffect(() => {
@@ -14787,7 +14804,7 @@ const ComboboxOptions = factory((_props, ref) => {
     Box,
     {
       ref,
-      ...ctx.getStyles("options", { className, style, classNames, styles }),
+      ...ctx.getStyles("options", { className, style, classNames: classNames2, styles }),
       ...others,
       id: _id,
       role: "listbox",
@@ -14808,7 +14825,7 @@ const defaultProps$D = {
 const ComboboxSearch = factory((_props, ref) => {
   const props = useProps("ComboboxSearch", defaultProps$D, _props);
   const {
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     vars,
@@ -14832,7 +14849,7 @@ const ComboboxSearch = factory((_props, ref) => {
     Input,
     {
       ref: useMergedRef(ref, ctx.store.searchRef),
-      classNames: [{ input: _styles.className }, classNames],
+      classNames: [{ input: _styles.className }, classNames2],
       styles: [{ input: _styles.style }, styles],
       size: size2 || ctx.size,
       ...targetProps,
@@ -15132,7 +15149,7 @@ const varsResolver$z = createVarsResolver((_, { size: size2, dropdownPadding })
 function Combobox(_props) {
   const props = useProps("Combobox", defaultProps$B, _props);
   const {
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     children,
@@ -15154,7 +15171,7 @@ function Combobox(_props) {
     name: __staticSelector || "Combobox",
     classes: classes$y,
     props,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -15216,7 +15233,7 @@ const InlineInput = React.forwardRef(
     __staticSelector,
     __stylesApiProps,
     className,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     children,
@@ -15242,7 +15259,7 @@ const InlineInput = React.forwardRef(
       className,
       style,
       classes: classes$x,
-      classNames,
+      classNames: classNames2,
       styles,
       unstyled,
       attributes
@@ -15307,7 +15324,7 @@ const varsResolver$y = createVarsResolver((_, { radius }) => ({
 const CheckboxCard = factory((_props, ref) => {
   const props = useProps("CheckboxCard", defaultProps$A, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -15329,7 +15346,7 @@ const CheckboxCard = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -15471,7 +15488,7 @@ const varsResolver$x = createVarsResolver(
 const CheckboxIndicator = factory((_props, ref) => {
   const props = useProps("CheckboxIndicator", defaultProps$z, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -15496,7 +15513,7 @@ const CheckboxIndicator = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -15542,7 +15559,7 @@ const varsResolver$w = createVarsResolver(
 const Checkbox$1 = factory((_props, forwardedRef) => {
   const props = useProps("Checkbox", defaultProps$y, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -15578,7 +15595,7 @@ const Checkbox$1 = factory((_props, forwardedRef) => {
     classes: classes$w,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -15620,7 +15637,7 @@ const Checkbox$1 = factory((_props, forwardedRef) => {
       description,
       error: error2,
       disabled: withContextProps.disabled,
-      classNames,
+      classNames: classNames2,
       styles,
       unstyled,
       "data-checked": withContextProps.checked || checked || void 0,
@@ -15847,14 +15864,14 @@ const varsResolver$v = createVarsResolver((_, { spacing }) => ({
 }));
 const AvatarGroup = factory((_props, ref) => {
   const props = useProps("AvatarGroup", null, _props);
-  const { classNames, className, style, styles, unstyled, vars, spacing, attributes, ...others } = props;
+  const { classNames: classNames2, className, style, styles, unstyled, vars, spacing, attributes, ...others } = props;
   const getStyles2 = useStyles({
     name: "AvatarGroup",
     classes: classes$t,
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -15945,7 +15962,7 @@ const varsResolver$u = createVarsResolver(
 const Avatar$1 = polymorphicFactory((_props, ref) => {
   const props = useProps("Avatar", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -15973,7 +15990,7 @@ const Avatar$1 = polymorphicFactory((_props, ref) => {
     classes: classes$t,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -16034,7 +16051,7 @@ const varsResolver$t = createVarsResolver(
 const Badge$1 = polymorphicFactory((_props, ref) => {
   const props = useProps("Badge", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -16060,7 +16077,7 @@ const Badge$1 = polymorphicFactory((_props, ref) => {
     classes: classes$s,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -16108,7 +16125,7 @@ const varsResolver$s = createVarsResolver(
 const Burger = factory((_props, ref) => {
   const props = useProps("Burger", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -16128,7 +16145,7 @@ const Burger = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -16154,7 +16171,7 @@ const ButtonGroup = factory((_props, ref) => {
   const {
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     orientation,
@@ -16171,7 +16188,7 @@ const ButtonGroup = factory((_props, ref) => {
     classes: classes$q,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -16220,7 +16237,7 @@ const ButtonGroupSection = factory((_props, ref) => {
   const {
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     vars,
@@ -16237,7 +16254,7 @@ const ButtonGroupSection = factory((_props, ref) => {
     classes: classes$q,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -16297,7 +16314,7 @@ const Button$1 = polymorphicFactory((_props, ref) => {
     loading,
     loaderProps,
     gradient,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     "data-disabled": dataDisabled,
@@ -16312,7 +16329,7 @@ const Button$1 = polymorphicFactory((_props, ref) => {
     classes: classes$q,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -16342,7 +16359,7 @@ const Button$1 = polymorphicFactory((_props, ref) => {
       ...others,
       children: [
         typeof loading === "boolean" && /* @__PURE__ */ jsxRuntime.jsx(Transition$1, { mounted: loading, transition: loaderTransition, duration: 150, children: (transitionStyles) => /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", ...getStyles2("loader", { style: transitionStyles }), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Loader,
+          Loader$1,
           {
             color: "var(--button-color)",
             size: "calc(var(--button-height) / 1.8)",
@@ -16368,14 +16385,14 @@ const [CardProvider, useCardContext] = createSafeContext(
 var classes$p = { "root": "m_e615b15f", "section": "m_599a2148" };
 const CardSection = polymorphicFactory((_props, ref) => {
   const props = useProps("CardSection", null, _props);
-  const { classNames, className, style, styles, vars, withBorder, inheritPadding, mod, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, withBorder, inheritPadding, mod, ...others } = props;
   const ctx = useCardContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
       ref,
       mod: [{ "with-border": withBorder, "inherit-padding": inheritPadding }, mod],
-      ...ctx.getStyles("section", { className, style, styles, classNames }),
+      ...ctx.getStyles("section", { className, style, styles, classNames: classNames2 }),
       ...others
     }
   );
@@ -16390,7 +16407,7 @@ const varsResolver$o = createVarsResolver((_, { padding }) => ({
 const Card$1 = polymorphicFactory((_props, ref) => {
   const props = useProps("Card", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -16407,7 +16424,7 @@ const Card$1 = polymorphicFactory((_props, ref) => {
     classes: classes$p,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -16433,7 +16450,7 @@ var classes$o = { "root": "m_4451eb3a" };
 const Center = polymorphicFactory((_props, ref) => {
   const props = useProps("Center", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -16450,7 +16467,7 @@ const Center = polymorphicFactory((_props, ref) => {
     classes: classes$o,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -16469,7 +16486,7 @@ const varsResolver$n = createVarsResolver((_, { size: size2, fluid }) => ({
 const Container = factory((_props, ref) => {
   const props = useProps("Container", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -16487,7 +16504,7 @@ const Container = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -16520,7 +16537,7 @@ const varsResolver$m = createVarsResolver((theme2, { color, variant, size: size2
 const Divider = factory((_props, ref) => {
   const props = useProps("Divider", defaultProps$w, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -16540,7 +16557,7 @@ const Divider = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -16567,13 +16584,13 @@ const [DrawerProvider, useDrawerContext] = createSafeContext(
 );
 const DrawerBody = factory((_props, ref) => {
   const props = useProps("DrawerBody", null, _props);
-  const { classNames, className, style, styles, vars, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, ...others } = props;
   const ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalBaseBody,
     {
       ref,
-      ...ctx.getStyles("body", { classNames, style, styles, className }),
+      ...ctx.getStyles("body", { classNames: classNames2, style, styles, className }),
       ...others
     }
   );
@@ -16582,13 +16599,13 @@ DrawerBody.classes = classes$l;
 DrawerBody.displayName = "@mantine/core/DrawerBody";
 const DrawerCloseButton = factory((_props, ref) => {
   const props = useProps("DrawerCloseButton", null, _props);
-  const { classNames, className, style, styles, vars, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, ...others } = props;
   const ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalBaseCloseButton,
     {
       ref,
-      ...ctx.getStyles("close", { classNames, style, styles, className }),
+      ...ctx.getStyles("close", { classNames: classNames2, style, styles, className }),
       ...others
     }
   );
@@ -16597,14 +16614,14 @@ DrawerCloseButton.classes = classes$l;
 DrawerCloseButton.displayName = "@mantine/core/DrawerCloseButton";
 const DrawerContent = factory((_props, ref) => {
   const props = useProps("DrawerContent", null, _props);
-  const { classNames, className, style, styles, vars, children, radius, __hidden, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, children, radius, __hidden, ...others } = props;
   const ctx = useDrawerContext();
   const Scroll = ctx.scrollAreaComponent || NativeScrollArea;
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalBaseContent,
     {
-      ...ctx.getStyles("content", { className, style, styles, classNames }),
-      innerProps: ctx.getStyles("inner", { className, style, styles, classNames }),
+      ...ctx.getStyles("content", { className, style, styles, classNames: classNames2 }),
+      innerProps: ctx.getStyles("inner", { className, style, styles, classNames: classNames2 }),
       ref,
       ...others,
       radius: radius || ctx.radius || 0,
@@ -16617,13 +16634,13 @@ DrawerContent.classes = classes$l;
 DrawerContent.displayName = "@mantine/core/DrawerContent";
 const DrawerHeader = factory((_props, ref) => {
   const props = useProps("DrawerHeader", null, _props);
-  const { classNames, className, style, styles, vars, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, ...others } = props;
   const ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalBaseHeader,
     {
       ref,
-      ...ctx.getStyles("header", { classNames, style, styles, className }),
+      ...ctx.getStyles("header", { classNames: classNames2, style, styles, className }),
       ...others
     }
   );
@@ -16632,13 +16649,13 @@ DrawerHeader.classes = classes$l;
 DrawerHeader.displayName = "@mantine/core/DrawerHeader";
 const DrawerOverlay = factory((_props, ref) => {
   const props = useProps("DrawerOverlay", null, _props);
-  const { classNames, className, style, styles, vars, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, ...others } = props;
   const ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalBaseOverlay,
     {
       ref,
-      ...ctx.getStyles("overlay", { classNames, style, styles, className }),
+      ...ctx.getStyles("overlay", { classNames: classNames2, style, styles, className }),
       ...others
     }
   );
@@ -16697,7 +16714,7 @@ const varsResolver$l = createVarsResolver((_, { position, size: size2, offset: o
 const DrawerRoot = factory((_props, ref) => {
   const props = useProps("DrawerRoot", defaultProps$v, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -16717,7 +16734,7 @@ const DrawerRoot = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -16766,13 +16783,13 @@ function DrawerStack({ children }) {
 DrawerStack.displayName = "@mantine/core/DrawerStack";
 const DrawerTitle = factory((_props, ref) => {
   const props = useProps("DrawerTitle", null, _props);
-  const { classNames, className, style, styles, vars, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, ...others } = props;
   const ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalBaseTitle,
     {
       ref,
-      ...ctx.getStyles("title", { classNames, style, styles, className }),
+      ...ctx.getStyles("title", { classNames: classNames2, style, styles, className }),
       ...others
     }
   );
@@ -16945,7 +16962,7 @@ const defaultProps$t = {
 };
 const GridCol = factory((_props, ref) => {
   const props = useProps("GridCol", defaultProps$t, _props);
-  const { classNames, className, style, styles, vars, span, order, offset: offset2, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, span, order, offset: offset2, ...others } = props;
   const ctx = useGridContext();
   const responsiveClassName = useRandomClassName();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -16965,7 +16982,7 @@ const GridCol = factory((_props, ref) => {
         ...ctx.getStyles("col", {
           className: clsx(className, responsiveClassName),
           style,
-          classNames,
+          classNames: classNames2,
           styles
         }),
         ...others
@@ -17025,7 +17042,7 @@ const varsResolver$k = createVarsResolver((_, { justify, align, overflow }) => (
 const Grid = factory((_props, ref) => {
   const props = useProps("Grid", defaultProps$s, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -17048,7 +17065,7 @@ const Grid = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -17075,7 +17092,7 @@ const [MenuContextProvider, useMenuContext] = createSafeContext(
 );
 var classes$j = { "dropdown": "m_dc9b7c9f", "label": "m_9bfac126", "divider": "m_efdf90cb", "item": "m_99ac2aa1", "itemLabel": "m_5476e0d3", "itemSection": "m_8b75e504", "chevron": "m_b85b0bed" };
 const MenuDivider = factory((props, ref) => {
-  const { classNames, className, style, styles, vars, ...others } = useProps(
+  const { classNames: classNames2, className, style, styles, vars, ...others } = useProps(
     "MenuDivider",
     null,
     props
@@ -17085,7 +17102,7 @@ const MenuDivider = factory((props, ref) => {
     Box,
     {
       ref,
-      ...ctx.getStyles("divider", { className, style, styles, classNames }),
+      ...ctx.getStyles("divider", { className, style, styles, classNames: classNames2 }),
       ...others
     }
   );
@@ -17094,7 +17111,7 @@ MenuDivider.classes = classes$j;
 MenuDivider.displayName = "@mantine/core/MenuDivider";
 const MenuDropdown = factory((props, ref) => {
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -17134,7 +17151,7 @@ const MenuDropdown = factory((props, ref) => {
         className,
         style,
         styles,
-        classNames,
+        classNames: classNames2,
         withStaticClass: false
       }),
       tabIndex: -1,
@@ -17152,7 +17169,7 @@ MenuDropdown.displayName = "@mantine/core/MenuDropdown";
 const [SubMenuProvider, useSubMenuContext] = createOptionalContext();
 const MenuItem = polymorphicFactory((props, ref) => {
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -17197,7 +17214,7 @@ const MenuItem = polymorphicFactory((props, ref) => {
       ...others,
       unstyled: ctx.unstyled,
       tabIndex: ctx.menuItemTabIndex,
-      ...ctx.getStyles("item", { className, style, styles, classNames }),
+      ...ctx.getStyles("item", { className, style, styles, classNames: classNames2 }),
       ref: useMergedRef(itemRef, ref),
       role: "menuitem",
       disabled,
@@ -17219,9 +17236,9 @@ const MenuItem = polymorphicFactory((props, ref) => {
         "--menu-item-hover": colors2?.hover
       },
       children: [
-        leftSection && /* @__PURE__ */ jsxRuntime.jsx("div", { ...ctx.getStyles("itemSection", { styles, classNames }), "data-position": "left", children: leftSection }),
-        children && /* @__PURE__ */ jsxRuntime.jsx("div", { ...ctx.getStyles("itemLabel", { styles, classNames }), children }),
-        rightSection && /* @__PURE__ */ jsxRuntime.jsx("div", { ...ctx.getStyles("itemSection", { styles, classNames }), "data-position": "right", children: rightSection })
+        leftSection && /* @__PURE__ */ jsxRuntime.jsx("div", { ...ctx.getStyles("itemSection", { styles, classNames: classNames2 }), "data-position": "left", children: leftSection }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { ...ctx.getStyles("itemLabel", { styles, classNames: classNames2 }), children }),
+        rightSection && /* @__PURE__ */ jsxRuntime.jsx("div", { ...ctx.getStyles("itemSection", { styles, classNames: classNames2 }), "data-position": "right", children: rightSection })
       ]
     }
   );
@@ -17229,7 +17246,7 @@ const MenuItem = polymorphicFactory((props, ref) => {
 MenuItem.classes = classes$j;
 MenuItem.displayName = "@mantine/core/MenuItem";
 const MenuLabel = factory((props, ref) => {
-  const { classNames, className, style, styles, vars, ...others } = useProps(
+  const { classNames: classNames2, className, style, styles, vars, ...others } = useProps(
     "MenuLabel",
     null,
     props
@@ -17239,7 +17256,7 @@ const MenuLabel = factory((props, ref) => {
     Box,
     {
       ref,
-      ...ctx.getStyles("label", { className, style, styles, classNames }),
+      ...ctx.getStyles("label", { className, style, styles, classNames: classNames2 }),
       ...others
     }
   );
@@ -17248,7 +17265,7 @@ MenuLabel.classes = classes$j;
 MenuLabel.displayName = "@mantine/core/MenuLabel";
 const MenuSubDropdown = factory((props, ref) => {
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -17277,7 +17294,7 @@ const MenuSubDropdown = factory((props, ref) => {
         className,
         style,
         styles,
-        classNames,
+        classNames: classNames2,
         withStaticClass: false
       }),
       tabIndex: -1,
@@ -17290,7 +17307,7 @@ MenuSubDropdown.classes = classes$j;
 MenuSubDropdown.displayName = "@mantine/core/MenuSubDropdown";
 const MenuSubItem = polymorphicFactory((props, ref) => {
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -17336,7 +17353,7 @@ const MenuSubItem = polymorphicFactory((props, ref) => {
       ...others,
       unstyled: ctx.unstyled,
       tabIndex: ctx.menuItemTabIndex,
-      ...ctx.getStyles("item", { className, style, styles, classNames }),
+      ...ctx.getStyles("item", { className, style, styles, classNames: classNames2 }),
       ref: useMergedRef(itemRef, ref),
       role: "menuitem",
       disabled,
@@ -17361,9 +17378,9 @@ const MenuSubItem = polymorphicFactory((props, ref) => {
         "--menu-item-hover": colors2?.hover
       },
       children: [
-        leftSection && /* @__PURE__ */ jsxRuntime.jsx("div", { ...ctx.getStyles("itemSection", { styles, classNames }), "data-position": "left", children: leftSection }),
-        children && /* @__PURE__ */ jsxRuntime.jsx("div", { ...ctx.getStyles("itemLabel", { styles, classNames }), children }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ...ctx.getStyles("itemSection", { styles, classNames }), "data-position": "right", children: rightSection || /* @__PURE__ */ jsxRuntime.jsx(AccordionChevron, { ...ctx.getStyles("chevron"), size: 14 }) })
+        leftSection && /* @__PURE__ */ jsxRuntime.jsx("div", { ...ctx.getStyles("itemSection", { styles, classNames: classNames2 }), "data-position": "left", children: leftSection }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { ...ctx.getStyles("itemLabel", { styles, classNames: classNames2 }), children }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ...ctx.getStyles("itemSection", { styles, classNames: classNames2 }), "data-position": "right", children: rightSection || /* @__PURE__ */ jsxRuntime.jsx(AccordionChevron, { ...ctx.getStyles("chevron"), size: 14 }) })
       ]
     }
   );
@@ -17498,7 +17515,7 @@ function Menu$1(_props) {
     trigger,
     openDelay,
     closeDelay,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     variant,
@@ -17513,7 +17530,7 @@ function Menu$1(_props) {
     name: "Menu",
     classes: classes$j,
     props,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes
@@ -17540,7 +17557,7 @@ function Menu$1(_props) {
   const { openDropdown, closeDropdown } = useDelayedHover({ open, close, closeDelay, openDelay });
   const getItemIndex = (node) => getContextItemIndex("[data-menu-item]", "[data-menu-dropdown]", node);
   const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
-    classNames,
+    classNames: classNames2,
     styles,
     props
   });
@@ -17602,13 +17619,13 @@ const [ModalProvider, useModalContext] = createSafeContext(
 );
 const ModalBody = factory((_props, ref) => {
   const props = useProps("ModalBody", null, _props);
-  const { classNames, className, style, styles, vars, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, ...others } = props;
   const ctx = useModalContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalBaseBody,
     {
       ref,
-      ...ctx.getStyles("body", { classNames, style, styles, className }),
+      ...ctx.getStyles("body", { classNames: classNames2, style, styles, className }),
       ...others
     }
   );
@@ -17617,13 +17634,13 @@ ModalBody.classes = classes$i;
 ModalBody.displayName = "@mantine/core/ModalBody";
 const ModalCloseButton = factory((_props, ref) => {
   const props = useProps("ModalCloseButton", null, _props);
-  const { classNames, className, style, styles, vars, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, ...others } = props;
   const ctx = useModalContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalBaseCloseButton,
     {
       ref,
-      ...ctx.getStyles("close", { classNames, style, styles, className }),
+      ...ctx.getStyles("close", { classNames: classNames2, style, styles, className }),
       ...others
     }
   );
@@ -17632,14 +17649,14 @@ ModalCloseButton.classes = classes$i;
 ModalCloseButton.displayName = "@mantine/core/ModalCloseButton";
 const ModalContent = factory((_props, ref) => {
   const props = useProps("ModalContent", null, _props);
-  const { classNames, className, style, styles, vars, children, __hidden, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, children, __hidden, ...others } = props;
   const ctx = useModalContext();
   const Scroll = ctx.scrollAreaComponent || NativeScrollArea;
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalBaseContent,
     {
-      ...ctx.getStyles("content", { className, style, styles, classNames }),
-      innerProps: ctx.getStyles("inner", { className, style, styles, classNames }),
+      ...ctx.getStyles("content", { className, style, styles, classNames: classNames2 }),
+      innerProps: ctx.getStyles("inner", { className, style, styles, classNames: classNames2 }),
       "data-full-screen": ctx.fullScreen || void 0,
       "data-modal-content": true,
       "data-hidden": __hidden || void 0,
@@ -17661,13 +17678,13 @@ ModalContent.classes = classes$i;
 ModalContent.displayName = "@mantine/core/ModalContent";
 const ModalHeader = factory((_props, ref) => {
   const props = useProps("ModalHeader", null, _props);
-  const { classNames, className, style, styles, vars, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, ...others } = props;
   const ctx = useModalContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalBaseHeader,
     {
       ref,
-      ...ctx.getStyles("header", { classNames, style, styles, className }),
+      ...ctx.getStyles("header", { classNames: classNames2, style, styles, className }),
       ...others
     }
   );
@@ -17676,13 +17693,13 @@ ModalHeader.classes = classes$i;
 ModalHeader.displayName = "@mantine/core/ModalHeader";
 const ModalOverlay = factory((_props, ref) => {
   const props = useProps("ModalOverlay", null, _props);
-  const { classNames, className, style, styles, vars, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, ...others } = props;
   const ctx = useModalContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalBaseOverlay,
     {
       ref,
-      ...ctx.getStyles("overlay", { classNames, style, styles, className }),
+      ...ctx.getStyles("overlay", { classNames: classNames2, style, styles, className }),
       ...others
     }
   );
@@ -17715,7 +17732,7 @@ const varsResolver$j = createVarsResolver(
 const ModalRoot = factory((_props, ref) => {
   const props = useProps("ModalRoot", defaultProps$o, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -17737,7 +17754,7 @@ const ModalRoot = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -17786,13 +17803,13 @@ function ModalStack({ children }) {
 ModalStack.displayName = "@mantine/core/ModalStack";
 const ModalTitle = factory((_props, ref) => {
   const props = useProps("ModalTitle", null, _props);
-  const { classNames, className, style, styles, vars, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, ...others } = props;
   const ctx = useModalContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ModalBaseTitle,
     {
       ref,
-      ...ctx.getStyles("title", { classNames, style, styles, className }),
+      ...ctx.getStyles("title", { classNames: classNames2, style, styles, className }),
       ...others
     }
   );
@@ -17909,7 +17926,7 @@ const varsResolver$i = createVarsResolver(
 const NavLink = polymorphicFactory((_props, ref) => {
   const props = useProps("NavLink", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -17941,7 +17958,7 @@ const NavLink = polymorphicFactory((_props, ref) => {
     classes: classes$h,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -18027,7 +18044,7 @@ const Notification = factory((_props, ref) => {
     children,
     onClose,
     closeButtonProps,
-    classNames,
+    classNames: classNames2,
     style,
     styles,
     unstyled,
@@ -18044,7 +18061,7 @@ const Notification = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -18061,7 +18078,7 @@ const Notification = factory((_props, ref) => {
       ...others,
       children: [
         icon && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles2("icon"), children: icon }),
-        loading && /* @__PURE__ */ jsxRuntime.jsx(Loader, { size: 28, color, ...loaderProps, ...getStyles2("loader") }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx(Loader$1, { size: 28, color, ...loaderProps, ...getStyles2("loader") }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles2("body"), children: [
           title && /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles2("title"), children: title }),
           /* @__PURE__ */ jsxRuntime.jsx(Box, { ...getStyles2("description"), mod: { "data-with-title": !!title }, children })
@@ -18294,7 +18311,7 @@ var findChangedRangeFromCaretPositions = function(lastCaretPositions, currentCar
     to: { start: startPosition, end: currentCaretPosition }
   };
 };
-function clamp(num, min2, max2) {
+function clamp$1(num, min2, max2) {
   return Math.min(Math.max(num, min2), max2);
 }
 function geInputCaretPosition(el) {
@@ -18372,7 +18389,7 @@ function getCaretPosition(newFormattedValue, lastFormattedValue, curValue, curCa
 }
 function getCaretPosInBoundary(value, caretPos, boundary, direction) {
   var valLn = value.length;
-  caretPos = clamp(caretPos, 0, valLn);
+  caretPos = clamp$1(caretPos, 0, valLn);
   if (direction === "left") {
     while (caretPos >= 0 && !boundary[caretPos]) {
       caretPos--;
@@ -19171,7 +19188,7 @@ function clampAndSanitizeInput(sanitizedValue, max2, min2) {
   if (parsedValue > Number.MAX_SAFE_INTEGER) {
     return max2 !== void 0 ? max2 : replaced;
   }
-  const clamped = clamp$3(parsedValue, min2, max2);
+  const clamped = clamp$4(parsedValue, min2, max2);
   if (hasTrailingDecimalSeparator) {
     const clampedString = clamped.toString().replace(/^0+(?=\d)/, "");
     return `${clampedString}.`;
@@ -19182,7 +19199,7 @@ const NumberInput = factory((_props, ref) => {
   const props = useProps("NumberInput", defaultProps$l, _props);
   const {
     className,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     vars,
@@ -19223,7 +19240,7 @@ const NumberInput = factory((_props, ref) => {
     name: "NumberInput",
     classes: classes$f,
     props,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -19231,7 +19248,7 @@ const NumberInput = factory((_props, ref) => {
     varsResolver: varsResolver$g
   });
   const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
-    classNames,
+    classNames: classNames2,
     styles,
     props
   });
@@ -19276,7 +19293,7 @@ const NumberInput = factory((_props, ref) => {
     const maxPrecision = Math.max(currentValuePrecision, stepPrecision);
     const factor = 10 ** maxPrecision;
     if (!isNumberString(_value) && (typeof _value !== "number" || Number.isNaN(_value))) {
-      val = clamp$3(startValue, min2, max2);
+      val = clamp$4(startValue, min2, max2);
     } else if (max2 !== void 0) {
       const incrementedValue = (Math.round(Number(_value) * factor) + Math.round(step * factor)) / factor;
       val = incrementedValue <= max2 ? incrementedValue : max2;
@@ -19303,7 +19320,7 @@ const NumberInput = factory((_props, ref) => {
     const maxPrecision = Math.max(currentValuePrecision, stepPrecision);
     const factor = 10 ** maxPrecision;
     if (!isNumberString(_value) && typeof _value !== "number" || Number.isNaN(_value)) {
-      val = clamp$3(startValue, minValue, max2);
+      val = clamp$4(startValue, minValue, max2);
     } else {
       const decrementedValue = (Math.round(Number(_value) * factor) - Math.round(step * factor)) / factor;
       val = minValue !== void 0 && decrementedValue < minValue ? minValue : decrementedValue;
@@ -19343,7 +19360,7 @@ const NumberInput = factory((_props, ref) => {
   const handleBlur = (event) => {
     let sanitizedValue = _value;
     if (clampBehavior === "blur" && typeof sanitizedValue === "number") {
-      sanitizedValue = clamp$3(sanitizedValue, min2, max2);
+      sanitizedValue = clamp$4(sanitizedValue, min2, max2);
     }
     if (trimLeadingZeroesOnBlur && typeof sanitizedValue === "string" && getDecimalPlaces2(sanitizedValue) < 15) {
       sanitizedValue = clampAndSanitizeInput(sanitizedValue, max2, min2);
@@ -19472,7 +19489,7 @@ const defaultProps$k = {
 const PaginationControl = factory((_props, ref) => {
   const props = useProps("PaginationControl", defaultProps$k, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -19491,7 +19508,7 @@ const PaginationControl = factory((_props, ref) => {
       ref,
       disabled: _disabled,
       mod: [{ active, disabled: _disabled, "with-padding": withPadding }, mod],
-      ...ctx.getStyles("control", { className, style, classNames, styles, active: !_disabled }),
+      ...ctx.getStyles("control", { className, style, classNames: classNames2, styles, active: !_disabled }),
       ...others
     }
   );
@@ -19554,9 +19571,9 @@ const defaultProps$j = {
 };
 const PaginationDots = factory((_props, ref) => {
   const props = useProps("PaginationDots", defaultProps$j, _props);
-  const { classNames, className, style, styles, vars, icon: Icon, ...others } = props;
+  const { classNames: classNames2, className, style, styles, vars, icon: Icon, ...others } = props;
   const ctx = usePaginationContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, ...ctx.getStyles("dots", { className, style, styles, classNames }), ...others, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, ...ctx.getStyles("dots", { className, style, styles, classNames: classNames2 }), ...others, children: /* @__PURE__ */ jsxRuntime.jsx(
     Icon,
     {
       style: {
@@ -19662,7 +19679,7 @@ const varsResolver$f = createVarsResolver(
 const PaginationRoot = factory((_props, ref) => {
   const props = useProps("PaginationRoot", defaultProps$i, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -19692,7 +19709,7 @@ const PaginationRoot = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -19811,7 +19828,7 @@ const varsResolver$e = createVarsResolver((_, { size: size2 }) => ({
 const PasswordInput$1 = factory((_props, ref) => {
   const props = useProps("PasswordInput", defaultProps$g, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -19865,7 +19882,7 @@ const PasswordInput$1 = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -19873,7 +19890,7 @@ const PasswordInput$1 = factory((_props, ref) => {
     varsResolver: varsResolver$e
   });
   const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
-    classNames,
+    classNames: classNames2,
     styles,
     props
   });
@@ -20033,7 +20050,7 @@ const PinInput = factory((props, ref) => {
     gap,
     style,
     size: size2,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     length,
@@ -20067,7 +20084,7 @@ const PinInput = factory((props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -20075,7 +20092,7 @@ const PinInput = factory((props, ref) => {
     varsResolver: varsResolver$d
   });
   const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
-    classNames,
+    classNames: classNames2,
     styles,
     props
   });
@@ -20274,7 +20291,7 @@ const [ProgressProvider, useProgressContext] = createSafeContext(
   "Progress.Root component was not found in tree"
 );
 const ProgressLabel = factory((props, ref) => {
-  const { classNames, className, style, styles, vars, ...others } = useProps(
+  const { classNames: classNames2, className, style, styles, vars, ...others } = useProps(
     "ProgressLabel",
     null,
     props
@@ -20284,7 +20301,7 @@ const ProgressLabel = factory((props, ref) => {
     Box,
     {
       ref,
-      ...ctx.getStyles("label", { className, style, classNames, styles }),
+      ...ctx.getStyles("label", { className, style, classNames: classNames2, styles }),
       ...others
     }
   );
@@ -20303,7 +20320,7 @@ const varsResolver$c = createVarsResolver(
 const ProgressRoot = factory((_props, ref) => {
   const props = useProps("ProgressRoot", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -20322,7 +20339,7 @@ const ProgressRoot = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -20338,7 +20355,7 @@ const defaultProps$e = {
 };
 const ProgressSection = factory((props, ref) => {
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -20364,7 +20381,7 @@ const ProgressSection = factory((props, ref) => {
     Box,
     {
       ref,
-      ...ctx.getStyles("section", { className, classNames, styles, style }),
+      ...ctx.getStyles("section", { className, classNames: classNames2, styles, style }),
       ...others,
       ...ariaAttributes,
       mod: [{ striped: striped || animated, animated }, mod],
@@ -20382,7 +20399,7 @@ const Progress = factory((_props, ref) => {
   const props = useProps("Progress", null, _props);
   const {
     value,
-    classNames,
+    classNames: classNames2,
     styles,
     vars,
     color,
@@ -20392,7 +20409,7 @@ const Progress = factory((_props, ref) => {
     ...others
   } = props;
   const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
-    classNames,
+    classNames: classNames2,
     styles,
     props
   });
@@ -20509,7 +20526,7 @@ const TooltipFloating = factory((_props, ref) => {
     withinPortal,
     style,
     className,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     radius,
@@ -20534,7 +20551,7 @@ const TooltipFloating = factory((_props, ref) => {
     classes: classes$a,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -20752,7 +20769,7 @@ const Tooltip$1 = factory((_props, ref) => {
     withinPortal,
     radius,
     color,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     style,
@@ -20817,7 +20834,7 @@ const Tooltip$1 = factory((_props, ref) => {
     classes: classes$a,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -20970,7 +20987,7 @@ const varsResolver$9 = createVarsResolver(
 const SegmentedControl = factory((_props, ref) => {
   const props = useProps("SegmentedControl", defaultProps$a, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -21003,7 +21020,7 @@ const SegmentedControl = factory((_props, ref) => {
     classes: classes$9,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -21125,7 +21142,7 @@ const defaultProps$9 = {
 const Select$1 = factory((_props, ref) => {
   const props = useProps("Select", defaultProps$9, _props);
   const {
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     vars,
@@ -21223,7 +21240,7 @@ const Select$1 = factory((_props, ref) => {
   const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
     props,
     styles,
-    classNames
+    classNames: classNames2
   });
   React.useEffect(() => {
     if (selectFirstOptionOnChange) {
@@ -21491,7 +21508,7 @@ const defaultProps$8 = {
 const SimpleGrid = factory((_props, ref) => {
   const props = useProps("SimpleGrid", defaultProps$8, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -21510,7 +21527,7 @@ const SimpleGrid = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -21547,7 +21564,7 @@ const varsResolver$8 = createVarsResolver(
 const Skeleton$1 = factory((_props, ref) => {
   const props = useProps("Skeleton", defaultProps$7, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -21569,7 +21586,7 @@ const Skeleton$1 = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -21601,7 +21618,7 @@ const varsResolver$7 = createVarsResolver((_, { gap, align, justify }) => ({
 const Stack = factory((_props, ref) => {
   const props = useProps("Stack", defaultProps$6, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -21620,7 +21637,7 @@ const Stack = factory((_props, ref) => {
     classes: classes$6,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -21692,7 +21709,7 @@ const varsResolver$6 = createVarsResolver((theme2, { radius, color, size: size2
 const Switch$1 = factory((_props, ref) => {
   const props = useProps("Switch", defaultProps$5, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -21729,7 +21746,7 @@ const Switch$1 = factory((_props, ref) => {
     classes: classes$5,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -21766,7 +21783,7 @@ const Switch$1 = factory((_props, ref) => {
       disabled: withContextProps.disabled,
       bodyElement: "label",
       labelElement: "span",
-      classNames,
+      classNames: classNames2,
       styles,
       unstyled,
       "data-checked": withContextProps.checked,
@@ -21857,7 +21874,7 @@ function tableElement(element, options) {
   const name = `Table${element.charAt(0).toUpperCase()}${element.slice(1)}`;
   const Component = factory((_props, ref) => {
     const props = useProps(name, {}, _props);
-    const { classNames, className, style, styles, ...others } = props;
+    const { classNames: classNames2, className, style, styles, ...others } = props;
     const ctx = useTableContext();
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
@@ -21865,7 +21882,7 @@ function tableElement(element, options) {
         component: element,
         ref,
         ...getDataAttributes(ctx, options),
-        ...ctx.getStyles(element, { className, classNames, style, styles, props }),
+        ...ctx.getStyles(element, { className, classNames: classNames2, style, styles, props }),
         ...others
       }
     );
@@ -21909,7 +21926,7 @@ const varsResolver$5 = createVarsResolver(
 const TableScrollContainer = factory((_props, ref) => {
   const props = useProps("TableScrollContainer", defaultProps$4, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -21929,7 +21946,7 @@ const TableScrollContainer = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -21984,7 +22001,7 @@ const varsResolver$4 = createVarsResolver(
 const Table$1 = factory((_props, ref) => {
   const props = useProps("Table", defaultProps$3, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -22018,7 +22035,7 @@ const Table$1 = factory((_props, ref) => {
     className,
     style,
     classes: classes$4,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -22070,7 +22087,7 @@ const [TabsProvider, useTabsContext] = createSafeContext(
 var classes$3 = { "root": "m_89d60db1", "list--default": "m_576c9d4", "list": "m_89d33d6d", "tab": "m_4ec4dce6", "panel": "m_b0c91715", "tabSection": "m_fc420b1f", "tabLabel": "m_42bbd1ae", "tab--default": "m_539e827b", "list--outline": "m_6772fbd5", "tab--outline": "m_b59ab47c", "tab--pills": "m_c3381914" };
 const TabsList = factory((_props, ref) => {
   const props = useProps("TabsList", null, _props);
-  const { children, className, grow, justify, classNames, styles, style, mod, ...others } = props;
+  const { children, className, grow, justify, classNames: classNames2, styles, style, mod, ...others } = props;
   const ctx = useTabsContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
@@ -22079,7 +22096,7 @@ const TabsList = factory((_props, ref) => {
       ...ctx.getStyles("list", {
         className,
         style,
-        classNames,
+        classNames: classNames2,
         styles,
         props,
         variant: ctx.variant
@@ -22106,7 +22123,7 @@ TabsList.classes = classes$3;
 TabsList.displayName = "@mantine/core/TabsList";
 const TabsPanel = factory((_props, ref) => {
   const props = useProps("TabsPanel", null, _props);
-  const { children, className, value, classNames, styles, style, mod, keepMounted, ...others } = props;
+  const { children, className, value, classNames: classNames2, styles, style, mod, keepMounted, ...others } = props;
   const ctx = useTabsContext();
   const active = ctx.value === value;
   const content = ctx.keepMounted || keepMounted ? children : active ? children : null;
@@ -22115,7 +22132,7 @@ const TabsPanel = factory((_props, ref) => {
     {
       ...ctx.getStyles("panel", {
         className,
-        classNames,
+        classNames: classNames2,
         styles,
         style: [style, !active ? { display: "none" } : void 0],
         props
@@ -22145,7 +22162,7 @@ const TabsTab = factory((_props, ref) => {
     disabled,
     color,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     vars,
     mod,
@@ -22160,7 +22177,7 @@ const TabsTab = factory((_props, ref) => {
     ctx.onChange(ctx.allowTabDeactivation ? value === ctx.value ? null : value : value);
     onClick?.(event);
   };
-  const stylesApiProps = { classNames, styles, props };
+  const stylesApiProps = { classNames: classNames2, styles, props };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     UnstyledButton,
     {
@@ -22240,7 +22257,7 @@ const Tabs$1 = factory((_props, ref) => {
     inverted,
     placement,
     keepMounted,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     className,
@@ -22264,7 +22281,7 @@ const Tabs$1 = factory((_props, ref) => {
     classes: classes$3,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -22350,7 +22367,7 @@ const varsResolver$2 = createVarsResolver(
 const ThemeIcon = factory((_props, ref) => {
   const props = useProps("ThemeIcon", null, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -22366,7 +22383,7 @@ const ThemeIcon = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -22419,7 +22436,7 @@ const varsResolver$1 = createVarsResolver((_, { order, size: size2, lineClamp, t
 const Title = factory((_props, ref) => {
   const props = useProps("Title", defaultProps$1, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -22440,7 +22457,7 @@ const Title = factory((_props, ref) => {
     classes: classes$1,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     attributes,
@@ -22598,7 +22615,7 @@ const varsResolver = createVarsResolver((_, { zIndex, containerWidth }) => ({
 const Notifications = factory((_props, ref) => {
   const props = useProps("Notifications", defaultProps, _props);
   const {
-    classNames,
+    classNames: classNames2,
     className,
     style,
     styles,
@@ -22630,7 +22647,7 @@ const Notifications = factory((_props, ref) => {
     props,
     className,
     style,
-    classNames,
+    classNames: classNames2,
     styles,
     unstyled,
     vars,
@@ -26821,6 +26838,9 @@ Checkbox.displayName = "Checkbox";
 function Drawer(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(Drawer$1, { position: "right", size: "lg", p: "lg", ...props });
 }
+function Loader(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Loader$1, { ...props });
+}
 function MenuBase(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(Menu$1, { shadow: "md", ...props });
 }
@@ -26904,6 +26924,13 @@ function FairmintLogo({
     }
   );
 }
+const radii = {
+  xs: "0.25rem",
+  sm: "0.375rem",
+  md: "0.5rem",
+  lg: "0.75rem",
+  xl: "1rem"
+};
 const indigo = [
   "#EEF2FF",
   "#E0E7FF",
@@ -27008,13 +27035,7 @@ const theme = createTheme({
     fontFamily: '"Plus Jakarta Sans", sans-serif',
     fontWeight: "700"
   },
-  radius: {
-    xs: "0.25rem",
-    sm: "0.375rem",
-    md: "0.5rem",
-    lg: "0.75rem",
-    xl: "1rem"
-  },
+  radius: radii,
   defaultRadius: "md",
   breakpoints: {
     xs: "30em",
@@ -28238,6 +28259,72 @@ function PhoneField({ error: error2, ...rest }) {
     }
   );
 }
+const US_STATES = [
+  { value: "AL", label: "Alabama" },
+  { value: "AK", label: "Alaska" },
+  { value: "AZ", label: "Arizona" },
+  { value: "AR", label: "Arkansas" },
+  { value: "CA", label: "California" },
+  { value: "CO", label: "Colorado" },
+  { value: "CT", label: "Connecticut" },
+  { value: "DE", label: "Delaware" },
+  { value: "FL", label: "Florida" },
+  { value: "GA", label: "Georgia" },
+  { value: "HI", label: "Hawaii" },
+  { value: "ID", label: "Idaho" },
+  { value: "IL", label: "Illinois" },
+  { value: "IN", label: "Indiana" },
+  { value: "IA", label: "Iowa" },
+  { value: "KS", label: "Kansas" },
+  { value: "KY", label: "Kentucky" },
+  { value: "LA", label: "Louisiana" },
+  { value: "ME", label: "Maine" },
+  { value: "MD", label: "Maryland" },
+  { value: "MA", label: "Massachusetts" },
+  { value: "MI", label: "Michigan" },
+  { value: "MN", label: "Minnesota" },
+  { value: "MS", label: "Mississippi" },
+  { value: "MO", label: "Missouri" },
+  { value: "MT", label: "Montana" },
+  { value: "NE", label: "Nebraska" },
+  { value: "NV", label: "Nevada" },
+  { value: "NH", label: "New Hampshire" },
+  { value: "NJ", label: "New Jersey" },
+  { value: "NM", label: "New Mexico" },
+  { value: "NY", label: "New York" },
+  { value: "NC", label: "North Carolina" },
+  { value: "ND", label: "North Dakota" },
+  { value: "OH", label: "Ohio" },
+  { value: "OK", label: "Oklahoma" },
+  { value: "OR", label: "Oregon" },
+  { value: "PA", label: "Pennsylvania" },
+  { value: "RI", label: "Rhode Island" },
+  { value: "SC", label: "South Carolina" },
+  { value: "SD", label: "South Dakota" },
+  { value: "TN", label: "Tennessee" },
+  { value: "TX", label: "Texas" },
+  { value: "UT", label: "Utah" },
+  { value: "VT", label: "Vermont" },
+  { value: "VA", label: "Virginia" },
+  { value: "WA", label: "Washington" },
+  { value: "WV", label: "West Virginia" },
+  { value: "WI", label: "Wisconsin" },
+  { value: "WY", label: "Wyoming" },
+  { value: "DC", label: "District of Columbia" }
+];
+function USStateField({ label, placeholder, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Select,
+    {
+      label: label ?? "State",
+      placeholder: placeholder ?? "Select state",
+      data: [...US_STATES],
+      searchable: true,
+      clearable: true,
+      ...rest
+    }
+  );
+}
 const US_ZIP_REGEX = /^\d{5}(-\d{4})?$/;
 const INTL_POSTAL_REGEX = /^[A-Z0-9]+(?:[ -][A-Z0-9]+)*$/i;
 function createZipSchema(options) {
@@ -28457,7 +28544,7 @@ function DataTable({
           styles: onRowClick ? {
             tr: {
               "&:hover": {
-                backgroundColor: `var(--mantine-color-${colors.neutral}-0)`
+                backgroundColor: neutralColors[50]
               }
             }
           } : void 0,
@@ -28639,10 +28726,10 @@ function ListRow({
         root: {
           transition: "background-color 0.15s ease",
           "&:hover": {
-            backgroundColor: `var(--mantine-color-${colors.neutral}-0)`
+            backgroundColor: neutralColors[50]
           },
           "&:focus-visible": {
-            outline: `2px solid var(--mantine-color-${colors.primary}-5)`,
+            outline: `2px solid ${brandColors.indigo}`,
             outlineOffset: "-2px"
           }
         }
@@ -28656,6 +28743,1257 @@ function ListRow({
 function Percent({ value, decimals = 2, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Text, { component: "span", ...rest, children: formatPercent(value, decimals) });
 }
+var UserAgent_DEPRECATED_1;
+var hasRequiredUserAgent_DEPRECATED;
+function requireUserAgent_DEPRECATED() {
+  if (hasRequiredUserAgent_DEPRECATED) return UserAgent_DEPRECATED_1;
+  hasRequiredUserAgent_DEPRECATED = 1;
+  var _populated = false;
+  var _ie, _firefox, _opera, _webkit, _chrome;
+  var _ie_real_version;
+  var _osx, _windows, _linux, _android;
+  var _win64;
+  var _iphone, _ipad, _native;
+  var _mobile;
+  function _populate() {
+    if (_populated) {
+      return;
+    }
+    _populated = true;
+    var uas = navigator.userAgent;
+    var agent = /(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(uas);
+    var os = /(Mac OS X)|(Windows)|(Linux)/.exec(uas);
+    _iphone = /\b(iPhone|iP[ao]d)/.exec(uas);
+    _ipad = /\b(iP[ao]d)/.exec(uas);
+    _android = /Android/i.exec(uas);
+    _native = /FBAN\/\w+;/i.exec(uas);
+    _mobile = /Mobile/i.exec(uas);
+    _win64 = !!/Win64/.exec(uas);
+    if (agent) {
+      _ie = agent[1] ? parseFloat(agent[1]) : agent[5] ? parseFloat(agent[5]) : NaN;
+      if (_ie && document && document.documentMode) {
+        _ie = document.documentMode;
+      }
+      var trident = /(?:Trident\/(\d+.\d+))/.exec(uas);
+      _ie_real_version = trident ? parseFloat(trident[1]) + 4 : _ie;
+      _firefox = agent[2] ? parseFloat(agent[2]) : NaN;
+      _opera = agent[3] ? parseFloat(agent[3]) : NaN;
+      _webkit = agent[4] ? parseFloat(agent[4]) : NaN;
+      if (_webkit) {
+        agent = /(?:Chrome\/(\d+\.\d+))/.exec(uas);
+        _chrome = agent && agent[1] ? parseFloat(agent[1]) : NaN;
+      } else {
+        _chrome = NaN;
+      }
+    } else {
+      _ie = _firefox = _opera = _chrome = _webkit = NaN;
+    }
+    if (os) {
+      if (os[1]) {
+        var ver = /(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(uas);
+        _osx = ver ? parseFloat(ver[1].replace("_", ".")) : true;
+      } else {
+        _osx = false;
+      }
+      _windows = !!os[2];
+      _linux = !!os[3];
+    } else {
+      _osx = _windows = _linux = false;
+    }
+  }
+  var UserAgent_DEPRECATED = {
+    /**
+     *  Check if the UA is Internet Explorer.
+     *
+     *
+     *  @return float|NaN Version number (if match) or NaN.
+     */
+    ie: function() {
+      return _populate() || _ie;
+    },
+    /**
+     * Check if we're in Internet Explorer compatibility mode.
+     *
+     * @return bool true if in compatibility mode, false if
+     * not compatibility mode or not ie
+     */
+    ieCompatibilityMode: function() {
+      return _populate() || _ie_real_version > _ie;
+    },
+    /**
+     * Whether the browser is 64-bit IE.  Really, this is kind of weak sauce;  we
+     * only need this because Skype can't handle 64-bit IE yet.  We need to remove
+     * this when we don't need it -- tracked by #601957.
+     */
+    ie64: function() {
+      return UserAgent_DEPRECATED.ie() && _win64;
+    },
+    /**
+     *  Check if the UA is Firefox.
+     *
+     *
+     *  @return float|NaN Version number (if match) or NaN.
+     */
+    firefox: function() {
+      return _populate() || _firefox;
+    },
+    /**
+     *  Check if the UA is Opera.
+     *
+     *
+     *  @return float|NaN Version number (if match) or NaN.
+     */
+    opera: function() {
+      return _populate() || _opera;
+    },
+    /**
+     *  Check if the UA is WebKit.
+     *
+     *
+     *  @return float|NaN Version number (if match) or NaN.
+     */
+    webkit: function() {
+      return _populate() || _webkit;
+    },
+    /**
+     *  For Push
+     *  WILL BE REMOVED VERY SOON. Use UserAgent_DEPRECATED.webkit
+     */
+    safari: function() {
+      return UserAgent_DEPRECATED.webkit();
+    },
+    /**
+     *  Check if the UA is a Chrome browser.
+     *
+     *
+     *  @return float|NaN Version number (if match) or NaN.
+     */
+    chrome: function() {
+      return _populate() || _chrome;
+    },
+    /**
+     *  Check if the user is running Windows.
+     *
+     *  @return bool `true' if the user's OS is Windows.
+     */
+    windows: function() {
+      return _populate() || _windows;
+    },
+    /**
+     *  Check if the user is running Mac OS X.
+     *
+     *  @return float|bool   Returns a float if a version number is detected,
+     *                       otherwise true/false.
+     */
+    osx: function() {
+      return _populate() || _osx;
+    },
+    /**
+     * Check if the user is running Linux.
+     *
+     * @return bool `true' if the user's OS is some flavor of Linux.
+     */
+    linux: function() {
+      return _populate() || _linux;
+    },
+    /**
+     * Check if the user is running on an iPhone or iPod platform.
+     *
+     * @return bool `true' if the user is running some flavor of the
+     *    iPhone OS.
+     */
+    iphone: function() {
+      return _populate() || _iphone;
+    },
+    mobile: function() {
+      return _populate() || (_iphone || _ipad || _android || _mobile);
+    },
+    nativeApp: function() {
+      return _populate() || _native;
+    },
+    android: function() {
+      return _populate() || _android;
+    },
+    ipad: function() {
+      return _populate() || _ipad;
+    }
+  };
+  UserAgent_DEPRECATED_1 = UserAgent_DEPRECATED;
+  return UserAgent_DEPRECATED_1;
+}
+var ExecutionEnvironment_1;
+var hasRequiredExecutionEnvironment;
+function requireExecutionEnvironment() {
+  if (hasRequiredExecutionEnvironment) return ExecutionEnvironment_1;
+  hasRequiredExecutionEnvironment = 1;
+  var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+  var ExecutionEnvironment = {
+    canUseDOM,
+    canUseWorkers: typeof Worker !== "undefined",
+    canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent),
+    canUseViewport: canUseDOM && !!window.screen,
+    isInWorker: !canUseDOM
+    // For now, this is true - might change in the future.
+  };
+  ExecutionEnvironment_1 = ExecutionEnvironment;
+  return ExecutionEnvironment_1;
+}
+var isEventSupported_1;
+var hasRequiredIsEventSupported;
+function requireIsEventSupported() {
+  if (hasRequiredIsEventSupported) return isEventSupported_1;
+  hasRequiredIsEventSupported = 1;
+  var ExecutionEnvironment = requireExecutionEnvironment();
+  var useHasFeature;
+  if (ExecutionEnvironment.canUseDOM) {
+    useHasFeature = document.implementation && document.implementation.hasFeature && // always returns true in newer browsers as per the standard.
+    // @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
+    document.implementation.hasFeature("", "") !== true;
+  }
+  function isEventSupported(eventNameSuffix, capture) {
+    if (!ExecutionEnvironment.canUseDOM || capture && !("addEventListener" in document)) {
+      return false;
+    }
+    var eventName = "on" + eventNameSuffix;
+    var isSupported = eventName in document;
+    if (!isSupported) {
+      var element = document.createElement("div");
+      element.setAttribute(eventName, "return;");
+      isSupported = typeof element[eventName] === "function";
+    }
+    if (!isSupported && useHasFeature && eventNameSuffix === "wheel") {
+      isSupported = document.implementation.hasFeature("Events.wheel", "3.0");
+    }
+    return isSupported;
+  }
+  isEventSupported_1 = isEventSupported;
+  return isEventSupported_1;
+}
+var normalizeWheel_1;
+var hasRequiredNormalizeWheel$1;
+function requireNormalizeWheel$1() {
+  if (hasRequiredNormalizeWheel$1) return normalizeWheel_1;
+  hasRequiredNormalizeWheel$1 = 1;
+  var UserAgent_DEPRECATED = requireUserAgent_DEPRECATED();
+  var isEventSupported = requireIsEventSupported();
+  var PIXEL_STEP = 10;
+  var LINE_HEIGHT = 40;
+  var PAGE_HEIGHT = 800;
+  function normalizeWheel2(event) {
+    var sX = 0, sY = 0, pX = 0, pY = 0;
+    if ("detail" in event) {
+      sY = event.detail;
+    }
+    if ("wheelDelta" in event) {
+      sY = -event.wheelDelta / 120;
+    }
+    if ("wheelDeltaY" in event) {
+      sY = -event.wheelDeltaY / 120;
+    }
+    if ("wheelDeltaX" in event) {
+      sX = -event.wheelDeltaX / 120;
+    }
+    if ("axis" in event && event.axis === event.HORIZONTAL_AXIS) {
+      sX = sY;
+      sY = 0;
+    }
+    pX = sX * PIXEL_STEP;
+    pY = sY * PIXEL_STEP;
+    if ("deltaY" in event) {
+      pY = event.deltaY;
+    }
+    if ("deltaX" in event) {
+      pX = event.deltaX;
+    }
+    if ((pX || pY) && event.deltaMode) {
+      if (event.deltaMode == 1) {
+        pX *= LINE_HEIGHT;
+        pY *= LINE_HEIGHT;
+      } else {
+        pX *= PAGE_HEIGHT;
+        pY *= PAGE_HEIGHT;
+      }
+    }
+    if (pX && !sX) {
+      sX = pX < 1 ? -1 : 1;
+    }
+    if (pY && !sY) {
+      sY = pY < 1 ? -1 : 1;
+    }
+    return {
+      spinX: sX,
+      spinY: sY,
+      pixelX: pX,
+      pixelY: pY
+    };
+  }
+  normalizeWheel2.getEventType = function() {
+    return UserAgent_DEPRECATED.firefox() ? "DOMMouseScroll" : isEventSupported("wheel") ? "wheel" : "mousewheel";
+  };
+  normalizeWheel_1 = normalizeWheel2;
+  return normalizeWheel_1;
+}
+var normalizeWheel$1;
+var hasRequiredNormalizeWheel;
+function requireNormalizeWheel() {
+  if (hasRequiredNormalizeWheel) return normalizeWheel$1;
+  hasRequiredNormalizeWheel = 1;
+  normalizeWheel$1 = requireNormalizeWheel$1();
+  return normalizeWheel$1;
+}
+var normalizeWheelExports = requireNormalizeWheel();
+const normalizeWheel = /* @__PURE__ */ getDefaultExportFromCjs(normalizeWheelExports);
+function getCropSize(mediaWidth, mediaHeight, containerWidth, containerHeight, aspect, rotation) {
+  if (rotation === void 0) {
+    rotation = 0;
+  }
+  var _a = rotateSize(mediaWidth, mediaHeight, rotation), width = _a.width, height = _a.height;
+  var fittingWidth = Math.min(width, containerWidth);
+  var fittingHeight = Math.min(height, containerHeight);
+  if (fittingWidth > fittingHeight * aspect) {
+    return {
+      width: fittingHeight * aspect,
+      height: fittingHeight
+    };
+  }
+  return {
+    width: fittingWidth,
+    height: fittingWidth / aspect
+  };
+}
+function getMediaZoom(mediaSize) {
+  return mediaSize.width > mediaSize.height ? mediaSize.width / mediaSize.naturalWidth : mediaSize.height / mediaSize.naturalHeight;
+}
+function restrictPosition(position, mediaSize, cropSize, zoom, rotation) {
+  if (rotation === void 0) {
+    rotation = 0;
+  }
+  var _a = rotateSize(mediaSize.width, mediaSize.height, rotation), width = _a.width, height = _a.height;
+  return {
+    x: restrictPositionCoord(position.x, width, cropSize.width, zoom),
+    y: restrictPositionCoord(position.y, height, cropSize.height, zoom)
+  };
+}
+function restrictPositionCoord(position, mediaSize, cropSize, zoom) {
+  var maxPosition = mediaSize * zoom / 2 - cropSize / 2;
+  return clamp(position, -maxPosition, maxPosition);
+}
+function getDistanceBetweenPoints(pointA, pointB) {
+  return Math.sqrt(Math.pow(pointA.y - pointB.y, 2) + Math.pow(pointA.x - pointB.x, 2));
+}
+function getRotationBetweenPoints(pointA, pointB) {
+  return Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x) * 180 / Math.PI;
+}
+function computeCroppedArea(crop, mediaSize, cropSize, aspect, zoom, rotation, restrictPosition2) {
+  if (rotation === void 0) {
+    rotation = 0;
+  }
+  if (restrictPosition2 === void 0) {
+    restrictPosition2 = true;
+  }
+  var limitAreaFn = restrictPosition2 ? limitArea : noOp;
+  var mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
+  var mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
+  var croppedAreaPercentages = {
+    x: limitAreaFn(100, ((mediaBBoxSize.width - cropSize.width / zoom) / 2 - crop.x / zoom) / mediaBBoxSize.width * 100),
+    y: limitAreaFn(100, ((mediaBBoxSize.height - cropSize.height / zoom) / 2 - crop.y / zoom) / mediaBBoxSize.height * 100),
+    width: limitAreaFn(100, cropSize.width / mediaBBoxSize.width * 100 / zoom),
+    height: limitAreaFn(100, cropSize.height / mediaBBoxSize.height * 100 / zoom)
+  };
+  var widthInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.width, croppedAreaPercentages.width * mediaNaturalBBoxSize.width / 100));
+  var heightInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.height, croppedAreaPercentages.height * mediaNaturalBBoxSize.height / 100));
+  var isImgWiderThanHigh = mediaNaturalBBoxSize.width >= mediaNaturalBBoxSize.height * aspect;
+  var sizePixels = isImgWiderThanHigh ? {
+    width: Math.round(heightInPixels * aspect),
+    height: heightInPixels
+  } : {
+    width: widthInPixels,
+    height: Math.round(widthInPixels / aspect)
+  };
+  var croppedAreaPixels = __assign(__assign({}, sizePixels), {
+    x: Math.round(limitAreaFn(mediaNaturalBBoxSize.width - sizePixels.width, croppedAreaPercentages.x * mediaNaturalBBoxSize.width / 100)),
+    y: Math.round(limitAreaFn(mediaNaturalBBoxSize.height - sizePixels.height, croppedAreaPercentages.y * mediaNaturalBBoxSize.height / 100))
+  });
+  return {
+    croppedAreaPercentages,
+    croppedAreaPixels
+  };
+}
+function limitArea(max2, value) {
+  return Math.min(max2, Math.max(0, value));
+}
+function noOp(_max, value) {
+  return value;
+}
+function getInitialCropFromCroppedAreaPercentages(croppedAreaPercentages, mediaSize, rotation, cropSize, minZoom, maxZoom) {
+  var mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
+  var zoom = clamp(cropSize.width / mediaBBoxSize.width * (100 / croppedAreaPercentages.width), minZoom, maxZoom);
+  var crop = {
+    x: zoom * mediaBBoxSize.width / 2 - cropSize.width / 2 - mediaBBoxSize.width * zoom * (croppedAreaPercentages.x / 100),
+    y: zoom * mediaBBoxSize.height / 2 - cropSize.height / 2 - mediaBBoxSize.height * zoom * (croppedAreaPercentages.y / 100)
+  };
+  return {
+    crop,
+    zoom
+  };
+}
+function getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize) {
+  var mediaZoom = getMediaZoom(mediaSize);
+  return cropSize.height > cropSize.width ? cropSize.height / (croppedAreaPixels.height * mediaZoom) : cropSize.width / (croppedAreaPixels.width * mediaZoom);
+}
+function getInitialCropFromCroppedAreaPixels(croppedAreaPixels, mediaSize, rotation, cropSize, minZoom, maxZoom) {
+  if (rotation === void 0) {
+    rotation = 0;
+  }
+  var mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
+  var zoom = clamp(getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize), minZoom, maxZoom);
+  var cropZoom = cropSize.height > cropSize.width ? cropSize.height / croppedAreaPixels.height : cropSize.width / croppedAreaPixels.width;
+  var crop = {
+    x: ((mediaNaturalBBoxSize.width - croppedAreaPixels.width) / 2 - croppedAreaPixels.x) * cropZoom,
+    y: ((mediaNaturalBBoxSize.height - croppedAreaPixels.height) / 2 - croppedAreaPixels.y) * cropZoom
+  };
+  return {
+    crop,
+    zoom
+  };
+}
+function getCenter(a, b) {
+  return {
+    x: (b.x + a.x) / 2,
+    y: (b.y + a.y) / 2
+  };
+}
+function getRadianAngle(degreeValue) {
+  return degreeValue * Math.PI / 180;
+}
+function rotateSize(width, height, rotation) {
+  var rotRad = getRadianAngle(rotation);
+  return {
+    width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
+    height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
+  };
+}
+function clamp(value, min2, max2) {
+  return Math.min(Math.max(value, min2), max2);
+}
+function classNames() {
+  var args = [];
+  for (var _i = 0; _i < arguments.length; _i++) {
+    args[_i] = arguments[_i];
+  }
+  return args.filter(function(value) {
+    if (typeof value === "string" && value.length > 0) {
+      return true;
+    }
+    return false;
+  }).join(" ").trim();
+}
+var css_248z = ".reactEasyCrop_Container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: hidden;\n  user-select: none;\n  touch-action: none;\n  cursor: move;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.reactEasyCrop_Image,\n.reactEasyCrop_Video {\n  will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */\n}\n\n.reactEasyCrop_Contain {\n  max-width: 100%;\n  max-height: 100%;\n  margin: auto;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.reactEasyCrop_Cover_Horizontal {\n  width: 100%;\n  height: auto;\n}\n.reactEasyCrop_Cover_Vertical {\n  width: auto;\n  height: 100%;\n}\n\n.reactEasyCrop_CropArea {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  box-sizing: border-box;\n  box-shadow: 0 0 0 9999em;\n  color: rgba(0, 0, 0, 0.5);\n  overflow: hidden;\n}\n\n.reactEasyCrop_CropAreaRound {\n  border-radius: 50%;\n}\n\n.reactEasyCrop_CropAreaGrid::before {\n  content: ' ';\n  box-sizing: border-box;\n  position: absolute;\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  top: 0;\n  bottom: 0;\n  left: 33.33%;\n  right: 33.33%;\n  border-top: 0;\n  border-bottom: 0;\n}\n\n.reactEasyCrop_CropAreaGrid::after {\n  content: ' ';\n  box-sizing: border-box;\n  position: absolute;\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  top: 33.33%;\n  bottom: 33.33%;\n  left: 0;\n  right: 0;\n  border-left: 0;\n  border-right: 0;\n}\n";
+var MIN_ZOOM = 1;
+var MAX_ZOOM = 3;
+var KEYBOARD_STEP = 1;
+var Cropper = (
+  /** @class */
+  (function(_super) {
+    __extends(Cropper2, _super);
+    function Cropper2() {
+      var _this = _super !== null && _super.apply(this, arguments) || this;
+      _this.cropperRef = React__namespace.createRef();
+      _this.imageRef = React__namespace.createRef();
+      _this.videoRef = React__namespace.createRef();
+      _this.containerPosition = {
+        x: 0,
+        y: 0
+      };
+      _this.containerRef = null;
+      _this.styleRef = null;
+      _this.containerRect = null;
+      _this.mediaSize = {
+        width: 0,
+        height: 0,
+        naturalWidth: 0,
+        naturalHeight: 0
+      };
+      _this.dragStartPosition = {
+        x: 0,
+        y: 0
+      };
+      _this.dragStartCrop = {
+        x: 0,
+        y: 0
+      };
+      _this.gestureZoomStart = 0;
+      _this.gestureRotationStart = 0;
+      _this.isTouching = false;
+      _this.lastPinchDistance = 0;
+      _this.lastPinchRotation = 0;
+      _this.rafDragTimeout = null;
+      _this.rafPinchTimeout = null;
+      _this.wheelTimer = null;
+      _this.currentDoc = typeof document !== "undefined" ? document : null;
+      _this.currentWindow = typeof window !== "undefined" ? window : null;
+      _this.resizeObserver = null;
+      _this.previousCropSize = null;
+      _this.isInitialized = false;
+      _this.state = {
+        cropSize: null,
+        hasWheelJustStarted: false,
+        mediaObjectFit: void 0
+      };
+      _this.initResizeObserver = function() {
+        if (typeof window.ResizeObserver === "undefined" || !_this.containerRef) {
+          return;
+        }
+        var isFirstResize = true;
+        _this.resizeObserver = new window.ResizeObserver(function(entries) {
+          if (isFirstResize) {
+            isFirstResize = false;
+            return;
+          }
+          _this.computeSizes();
+        });
+        _this.resizeObserver.observe(_this.containerRef);
+      };
+      _this.preventZoomSafari = function(e) {
+        return e.preventDefault();
+      };
+      _this.cleanEvents = function() {
+        if (!_this.currentDoc) return;
+        _this.currentDoc.removeEventListener("mousemove", _this.onMouseMove);
+        _this.currentDoc.removeEventListener("mouseup", _this.onDragStopped);
+        _this.currentDoc.removeEventListener("touchmove", _this.onTouchMove);
+        _this.currentDoc.removeEventListener("touchend", _this.onDragStopped);
+        _this.currentDoc.removeEventListener("gesturechange", _this.onGestureChange);
+        _this.currentDoc.removeEventListener("gestureend", _this.onGestureEnd);
+        _this.currentDoc.removeEventListener("scroll", _this.onScroll);
+      };
+      _this.clearScrollEvent = function() {
+        if (_this.containerRef) _this.containerRef.removeEventListener("wheel", _this.onWheel);
+        if (_this.wheelTimer) {
+          clearTimeout(_this.wheelTimer);
+        }
+      };
+      _this.onMediaLoad = function() {
+        var cropSize = _this.computeSizes();
+        if (cropSize) {
+          _this.previousCropSize = cropSize;
+          _this.emitCropData();
+          _this.setInitialCrop(cropSize);
+          _this.isInitialized = true;
+        }
+        if (_this.props.onMediaLoaded) {
+          _this.props.onMediaLoaded(_this.mediaSize);
+        }
+      };
+      _this.setInitialCrop = function(cropSize) {
+        if (_this.props.initialCroppedAreaPercentages) {
+          var _a = getInitialCropFromCroppedAreaPercentages(_this.props.initialCroppedAreaPercentages, _this.mediaSize, _this.props.rotation, cropSize, _this.props.minZoom, _this.props.maxZoom), crop = _a.crop, zoom = _a.zoom;
+          _this.props.onCropChange(crop);
+          _this.props.onZoomChange && _this.props.onZoomChange(zoom);
+        } else if (_this.props.initialCroppedAreaPixels) {
+          var _b = getInitialCropFromCroppedAreaPixels(_this.props.initialCroppedAreaPixels, _this.mediaSize, _this.props.rotation, cropSize, _this.props.minZoom, _this.props.maxZoom), crop = _b.crop, zoom = _b.zoom;
+          _this.props.onCropChange(crop);
+          _this.props.onZoomChange && _this.props.onZoomChange(zoom);
+        }
+      };
+      _this.computeSizes = function() {
+        var _a, _b, _c, _d, _e, _f;
+        var mediaRef = _this.imageRef.current || _this.videoRef.current;
+        if (mediaRef && _this.containerRef) {
+          _this.containerRect = _this.containerRef.getBoundingClientRect();
+          _this.saveContainerPosition();
+          var containerAspect = _this.containerRect.width / _this.containerRect.height;
+          var naturalWidth = ((_a = _this.imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) || ((_b = _this.videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) || 0;
+          var naturalHeight = ((_c = _this.imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalHeight) || ((_d = _this.videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) || 0;
+          var isMediaScaledDown = mediaRef.offsetWidth < naturalWidth || mediaRef.offsetHeight < naturalHeight;
+          var mediaAspect = naturalWidth / naturalHeight;
+          var renderedMediaSize = void 0;
+          if (isMediaScaledDown) {
+            switch (_this.state.mediaObjectFit) {
+              default:
+              case "contain":
+                renderedMediaSize = containerAspect > mediaAspect ? {
+                  width: _this.containerRect.height * mediaAspect,
+                  height: _this.containerRect.height
+                } : {
+                  width: _this.containerRect.width,
+                  height: _this.containerRect.width / mediaAspect
+                };
+                break;
+              case "horizontal-cover":
+                renderedMediaSize = {
+                  width: _this.containerRect.width,
+                  height: _this.containerRect.width / mediaAspect
+                };
+                break;
+              case "vertical-cover":
+                renderedMediaSize = {
+                  width: _this.containerRect.height * mediaAspect,
+                  height: _this.containerRect.height
+                };
+                break;
+            }
+          } else {
+            renderedMediaSize = {
+              width: mediaRef.offsetWidth,
+              height: mediaRef.offsetHeight
+            };
+          }
+          _this.mediaSize = __assign(__assign({}, renderedMediaSize), {
+            naturalWidth,
+            naturalHeight
+          });
+          if (_this.props.setMediaSize) {
+            _this.props.setMediaSize(_this.mediaSize);
+          }
+          var cropSize = _this.props.cropSize ? _this.props.cropSize : getCropSize(_this.mediaSize.width, _this.mediaSize.height, _this.containerRect.width, _this.containerRect.height, _this.props.aspect, _this.props.rotation);
+          if (((_e = _this.state.cropSize) === null || _e === void 0 ? void 0 : _e.height) !== cropSize.height || ((_f = _this.state.cropSize) === null || _f === void 0 ? void 0 : _f.width) !== cropSize.width) {
+            _this.props.onCropSizeChange && _this.props.onCropSizeChange(cropSize);
+          }
+          _this.setState({
+            cropSize
+          }, _this.recomputeCropPosition);
+          if (_this.props.setCropSize) {
+            _this.props.setCropSize(cropSize);
+          }
+          return cropSize;
+        }
+      };
+      _this.saveContainerPosition = function() {
+        if (_this.containerRef) {
+          var bounds = _this.containerRef.getBoundingClientRect();
+          _this.containerPosition = {
+            x: bounds.left,
+            y: bounds.top
+          };
+        }
+      };
+      _this.onMouseDown = function(e) {
+        if (!_this.currentDoc) return;
+        e.preventDefault();
+        _this.currentDoc.addEventListener("mousemove", _this.onMouseMove);
+        _this.currentDoc.addEventListener("mouseup", _this.onDragStopped);
+        _this.saveContainerPosition();
+        _this.onDragStart(Cropper2.getMousePoint(e));
+      };
+      _this.onMouseMove = function(e) {
+        return _this.onDrag(Cropper2.getMousePoint(e));
+      };
+      _this.onScroll = function(e) {
+        if (!_this.currentDoc) return;
+        e.preventDefault();
+        _this.saveContainerPosition();
+      };
+      _this.onTouchStart = function(e) {
+        if (!_this.currentDoc) return;
+        _this.isTouching = true;
+        if (_this.props.onTouchRequest && !_this.props.onTouchRequest(e)) {
+          return;
+        }
+        _this.currentDoc.addEventListener("touchmove", _this.onTouchMove, {
+          passive: false
+        });
+        _this.currentDoc.addEventListener("touchend", _this.onDragStopped);
+        _this.saveContainerPosition();
+        if (e.touches.length === 2) {
+          _this.onPinchStart(e);
+        } else if (e.touches.length === 1) {
+          _this.onDragStart(Cropper2.getTouchPoint(e.touches[0]));
+        }
+      };
+      _this.onTouchMove = function(e) {
+        e.preventDefault();
+        if (e.touches.length === 2) {
+          _this.onPinchMove(e);
+        } else if (e.touches.length === 1) {
+          _this.onDrag(Cropper2.getTouchPoint(e.touches[0]));
+        }
+      };
+      _this.onGestureStart = function(e) {
+        if (!_this.currentDoc) return;
+        e.preventDefault();
+        _this.currentDoc.addEventListener("gesturechange", _this.onGestureChange);
+        _this.currentDoc.addEventListener("gestureend", _this.onGestureEnd);
+        _this.gestureZoomStart = _this.props.zoom;
+        _this.gestureRotationStart = _this.props.rotation;
+      };
+      _this.onGestureChange = function(e) {
+        e.preventDefault();
+        if (_this.isTouching) {
+          return;
+        }
+        var point = Cropper2.getMousePoint(e);
+        var newZoom = _this.gestureZoomStart - 1 + e.scale;
+        _this.setNewZoom(newZoom, point, {
+          shouldUpdatePosition: true
+        });
+        if (_this.props.onRotationChange) {
+          var newRotation = _this.gestureRotationStart + e.rotation;
+          _this.props.onRotationChange(newRotation);
+        }
+      };
+      _this.onGestureEnd = function(e) {
+        _this.cleanEvents();
+      };
+      _this.onDragStart = function(_a) {
+        var _b, _c;
+        var x = _a.x, y = _a.y;
+        _this.dragStartPosition = {
+          x,
+          y
+        };
+        _this.dragStartCrop = __assign({}, _this.props.crop);
+        (_c = (_b = _this.props).onInteractionStart) === null || _c === void 0 ? void 0 : _c.call(_b);
+      };
+      _this.onDrag = function(_a) {
+        var x = _a.x, y = _a.y;
+        if (!_this.currentWindow) return;
+        if (_this.rafDragTimeout) _this.currentWindow.cancelAnimationFrame(_this.rafDragTimeout);
+        _this.rafDragTimeout = _this.currentWindow.requestAnimationFrame(function() {
+          if (!_this.state.cropSize) return;
+          if (x === void 0 || y === void 0) return;
+          var offsetX = x - _this.dragStartPosition.x;
+          var offsetY = y - _this.dragStartPosition.y;
+          var requestedPosition = {
+            x: _this.dragStartCrop.x + offsetX,
+            y: _this.dragStartCrop.y + offsetY
+          };
+          var newPosition = _this.props.restrictPosition ? restrictPosition(requestedPosition, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : requestedPosition;
+          _this.props.onCropChange(newPosition);
+        });
+      };
+      _this.onDragStopped = function() {
+        var _a, _b;
+        _this.isTouching = false;
+        _this.cleanEvents();
+        _this.emitCropData();
+        (_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+      };
+      _this.onWheel = function(e) {
+        if (!_this.currentWindow) return;
+        if (_this.props.onWheelRequest && !_this.props.onWheelRequest(e)) {
+          return;
+        }
+        e.preventDefault();
+        var point = Cropper2.getMousePoint(e);
+        var pixelY = normalizeWheel(e).pixelY;
+        var newZoom = _this.props.zoom - pixelY * _this.props.zoomSpeed / 200;
+        _this.setNewZoom(newZoom, point, {
+          shouldUpdatePosition: true
+        });
+        if (!_this.state.hasWheelJustStarted) {
+          _this.setState({
+            hasWheelJustStarted: true
+          }, function() {
+            var _a, _b;
+            return (_b = (_a = _this.props).onInteractionStart) === null || _b === void 0 ? void 0 : _b.call(_a);
+          });
+        }
+        if (_this.wheelTimer) {
+          clearTimeout(_this.wheelTimer);
+        }
+        _this.wheelTimer = _this.currentWindow.setTimeout(function() {
+          return _this.setState({
+            hasWheelJustStarted: false
+          }, function() {
+            var _a, _b;
+            return (_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+          });
+        }, 250);
+      };
+      _this.getPointOnContainer = function(_a, containerTopLeft) {
+        var x = _a.x, y = _a.y;
+        if (!_this.containerRect) {
+          throw new Error("The Cropper is not mounted");
+        }
+        return {
+          x: _this.containerRect.width / 2 - (x - containerTopLeft.x),
+          y: _this.containerRect.height / 2 - (y - containerTopLeft.y)
+        };
+      };
+      _this.getPointOnMedia = function(_a) {
+        var x = _a.x, y = _a.y;
+        var _b = _this.props, crop = _b.crop, zoom = _b.zoom;
+        return {
+          x: (x + crop.x) / zoom,
+          y: (y + crop.y) / zoom
+        };
+      };
+      _this.setNewZoom = function(zoom, point, _a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.shouldUpdatePosition, shouldUpdatePosition = _c === void 0 ? true : _c;
+        if (!_this.state.cropSize || !_this.props.onZoomChange) return;
+        var newZoom = clamp(zoom, _this.props.minZoom, _this.props.maxZoom);
+        if (shouldUpdatePosition) {
+          var zoomPoint = _this.getPointOnContainer(point, _this.containerPosition);
+          var zoomTarget = _this.getPointOnMedia(zoomPoint);
+          var requestedPosition = {
+            x: zoomTarget.x * newZoom - zoomPoint.x,
+            y: zoomTarget.y * newZoom - zoomPoint.y
+          };
+          var newPosition = _this.props.restrictPosition ? restrictPosition(requestedPosition, _this.mediaSize, _this.state.cropSize, newZoom, _this.props.rotation) : requestedPosition;
+          _this.props.onCropChange(newPosition);
+        }
+        _this.props.onZoomChange(newZoom);
+      };
+      _this.getCropData = function() {
+        if (!_this.state.cropSize) {
+          return null;
+        }
+        var restrictedPosition = _this.props.restrictPosition ? restrictPosition(_this.props.crop, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : _this.props.crop;
+        return computeCroppedArea(restrictedPosition, _this.mediaSize, _this.state.cropSize, _this.getAspect(), _this.props.zoom, _this.props.rotation, _this.props.restrictPosition);
+      };
+      _this.emitCropData = function() {
+        var cropData = _this.getCropData();
+        if (!cropData) return;
+        var croppedAreaPercentages = cropData.croppedAreaPercentages, croppedAreaPixels = cropData.croppedAreaPixels;
+        if (_this.props.onCropComplete) {
+          _this.props.onCropComplete(croppedAreaPercentages, croppedAreaPixels);
+        }
+        if (_this.props.onCropAreaChange) {
+          _this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
+        }
+      };
+      _this.emitCropAreaChange = function() {
+        var cropData = _this.getCropData();
+        if (!cropData) return;
+        var croppedAreaPercentages = cropData.croppedAreaPercentages, croppedAreaPixels = cropData.croppedAreaPixels;
+        if (_this.props.onCropAreaChange) {
+          _this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
+        }
+      };
+      _this.recomputeCropPosition = function() {
+        var _a, _b;
+        if (!_this.state.cropSize) return;
+        var adjustedCrop = _this.props.crop;
+        if (_this.isInitialized && ((_a = _this.previousCropSize) === null || _a === void 0 ? void 0 : _a.width) && ((_b = _this.previousCropSize) === null || _b === void 0 ? void 0 : _b.height)) {
+          var sizeChanged = Math.abs(_this.previousCropSize.width - _this.state.cropSize.width) > 1e-6 || Math.abs(_this.previousCropSize.height - _this.state.cropSize.height) > 1e-6;
+          if (sizeChanged) {
+            var scaleX = _this.state.cropSize.width / _this.previousCropSize.width;
+            var scaleY = _this.state.cropSize.height / _this.previousCropSize.height;
+            adjustedCrop = {
+              x: _this.props.crop.x * scaleX,
+              y: _this.props.crop.y * scaleY
+            };
+          }
+        }
+        var newPosition = _this.props.restrictPosition ? restrictPosition(adjustedCrop, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : adjustedCrop;
+        _this.previousCropSize = _this.state.cropSize;
+        _this.props.onCropChange(newPosition);
+        _this.emitCropData();
+      };
+      _this.onKeyDown = function(event) {
+        var _a, _b;
+        var _c = _this.props, crop = _c.crop, onCropChange = _c.onCropChange, keyboardStep = _c.keyboardStep, zoom = _c.zoom, rotation = _c.rotation;
+        var step = keyboardStep;
+        if (!_this.state.cropSize) return;
+        if (event.shiftKey) {
+          step *= 0.2;
+        }
+        var newCrop = __assign({}, crop);
+        switch (event.key) {
+          case "ArrowUp":
+            newCrop.y -= step;
+            event.preventDefault();
+            break;
+          case "ArrowDown":
+            newCrop.y += step;
+            event.preventDefault();
+            break;
+          case "ArrowLeft":
+            newCrop.x -= step;
+            event.preventDefault();
+            break;
+          case "ArrowRight":
+            newCrop.x += step;
+            event.preventDefault();
+            break;
+          default:
+            return;
+        }
+        if (_this.props.restrictPosition) {
+          newCrop = restrictPosition(newCrop, _this.mediaSize, _this.state.cropSize, zoom, rotation);
+        }
+        if (!event.repeat) {
+          (_b = (_a = _this.props).onInteractionStart) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        onCropChange(newCrop);
+      };
+      _this.onKeyUp = function(event) {
+        var _a, _b;
+        switch (event.key) {
+          case "ArrowUp":
+          case "ArrowDown":
+          case "ArrowLeft":
+          case "ArrowRight":
+            event.preventDefault();
+            break;
+          default:
+            return;
+        }
+        _this.emitCropData();
+        (_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+      };
+      return _this;
+    }
+    Cropper2.prototype.componentDidMount = function() {
+      if (!this.currentDoc || !this.currentWindow) return;
+      if (this.containerRef) {
+        if (this.containerRef.ownerDocument) {
+          this.currentDoc = this.containerRef.ownerDocument;
+        }
+        if (this.currentDoc.defaultView) {
+          this.currentWindow = this.currentDoc.defaultView;
+        }
+        this.initResizeObserver();
+        if (typeof window.ResizeObserver === "undefined") {
+          this.currentWindow.addEventListener("resize", this.computeSizes);
+        }
+        this.props.zoomWithScroll && this.containerRef.addEventListener("wheel", this.onWheel, {
+          passive: false
+        });
+        this.containerRef.addEventListener("gesturestart", this.onGestureStart);
+      }
+      this.currentDoc.addEventListener("scroll", this.onScroll);
+      if (!this.props.disableAutomaticStylesInjection) {
+        this.styleRef = this.currentDoc.createElement("style");
+        this.styleRef.setAttribute("type", "text/css");
+        if (this.props.nonce) {
+          this.styleRef.setAttribute("nonce", this.props.nonce);
+        }
+        this.styleRef.innerHTML = css_248z;
+        this.currentDoc.head.appendChild(this.styleRef);
+      }
+      if (this.imageRef.current && this.imageRef.current.complete) {
+        this.onMediaLoad();
+      }
+      if (this.props.setImageRef) {
+        this.props.setImageRef(this.imageRef);
+      }
+      if (this.props.setVideoRef) {
+        this.props.setVideoRef(this.videoRef);
+      }
+      if (this.props.setCropperRef) {
+        this.props.setCropperRef(this.cropperRef);
+      }
+    };
+    Cropper2.prototype.componentWillUnmount = function() {
+      var _a, _b;
+      if (!this.currentDoc || !this.currentWindow) return;
+      if (typeof window.ResizeObserver === "undefined") {
+        this.currentWindow.removeEventListener("resize", this.computeSizes);
+      }
+      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+      if (this.containerRef) {
+        this.containerRef.removeEventListener("gesturestart", this.preventZoomSafari);
+      }
+      if (this.styleRef) {
+        (_b = this.styleRef.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.styleRef);
+      }
+      this.cleanEvents();
+      this.props.zoomWithScroll && this.clearScrollEvent();
+    };
+    Cropper2.prototype.componentDidUpdate = function(prevProps) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+      if (prevProps.rotation !== this.props.rotation) {
+        this.computeSizes();
+        this.recomputeCropPosition();
+      } else if (prevProps.aspect !== this.props.aspect) {
+        this.computeSizes();
+      } else if (prevProps.objectFit !== this.props.objectFit) {
+        this.computeSizes();
+      } else if (prevProps.zoom !== this.props.zoom) {
+        this.recomputeCropPosition();
+      } else if (((_a = prevProps.cropSize) === null || _a === void 0 ? void 0 : _a.height) !== ((_b = this.props.cropSize) === null || _b === void 0 ? void 0 : _b.height) || ((_c = prevProps.cropSize) === null || _c === void 0 ? void 0 : _c.width) !== ((_d = this.props.cropSize) === null || _d === void 0 ? void 0 : _d.width)) {
+        this.computeSizes();
+      } else if (((_e = prevProps.crop) === null || _e === void 0 ? void 0 : _e.x) !== ((_f = this.props.crop) === null || _f === void 0 ? void 0 : _f.x) || ((_g = prevProps.crop) === null || _g === void 0 ? void 0 : _g.y) !== ((_h = this.props.crop) === null || _h === void 0 ? void 0 : _h.y)) {
+        this.emitCropAreaChange();
+      }
+      if (prevProps.zoomWithScroll !== this.props.zoomWithScroll && this.containerRef) {
+        this.props.zoomWithScroll ? this.containerRef.addEventListener("wheel", this.onWheel, {
+          passive: false
+        }) : this.clearScrollEvent();
+      }
+      if (prevProps.video !== this.props.video) {
+        (_j = this.videoRef.current) === null || _j === void 0 ? void 0 : _j.load();
+      }
+      var objectFit = this.getObjectFit();
+      if (objectFit !== this.state.mediaObjectFit) {
+        this.setState({
+          mediaObjectFit: objectFit
+        }, this.computeSizes);
+      }
+    };
+    Cropper2.prototype.getAspect = function() {
+      var _a = this.props, cropSize = _a.cropSize, aspect = _a.aspect;
+      if (cropSize) {
+        return cropSize.width / cropSize.height;
+      }
+      return aspect;
+    };
+    Cropper2.prototype.getObjectFit = function() {
+      var _a, _b, _c, _d;
+      if (this.props.objectFit === "cover") {
+        var mediaRef = this.imageRef.current || this.videoRef.current;
+        if (mediaRef && this.containerRef) {
+          this.containerRect = this.containerRef.getBoundingClientRect();
+          var containerAspect = this.containerRect.width / this.containerRect.height;
+          var naturalWidth = ((_a = this.imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) || ((_b = this.videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) || 0;
+          var naturalHeight = ((_c = this.imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalHeight) || ((_d = this.videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) || 0;
+          var mediaAspect = naturalWidth / naturalHeight;
+          return mediaAspect < containerAspect ? "horizontal-cover" : "vertical-cover";
+        }
+        return "horizontal-cover";
+      }
+      return this.props.objectFit;
+    };
+    Cropper2.prototype.onPinchStart = function(e) {
+      var pointA = Cropper2.getTouchPoint(e.touches[0]);
+      var pointB = Cropper2.getTouchPoint(e.touches[1]);
+      this.lastPinchDistance = getDistanceBetweenPoints(pointA, pointB);
+      this.lastPinchRotation = getRotationBetweenPoints(pointA, pointB);
+      this.onDragStart(getCenter(pointA, pointB));
+    };
+    Cropper2.prototype.onPinchMove = function(e) {
+      var _this = this;
+      if (!this.currentDoc || !this.currentWindow) return;
+      var pointA = Cropper2.getTouchPoint(e.touches[0]);
+      var pointB = Cropper2.getTouchPoint(e.touches[1]);
+      var center = getCenter(pointA, pointB);
+      this.onDrag(center);
+      if (this.rafPinchTimeout) this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout);
+      this.rafPinchTimeout = this.currentWindow.requestAnimationFrame(function() {
+        var distance = getDistanceBetweenPoints(pointA, pointB);
+        var newZoom = _this.props.zoom * (distance / _this.lastPinchDistance);
+        _this.setNewZoom(newZoom, center, {
+          shouldUpdatePosition: false
+        });
+        _this.lastPinchDistance = distance;
+        var rotation = getRotationBetweenPoints(pointA, pointB);
+        var newRotation = _this.props.rotation + (rotation - _this.lastPinchRotation);
+        _this.props.onRotationChange && _this.props.onRotationChange(newRotation);
+        _this.lastPinchRotation = rotation;
+      });
+    };
+    Cropper2.prototype.render = function() {
+      var _this = this;
+      var _a;
+      var _b = this.props, image = _b.image, video = _b.video, mediaProps = _b.mediaProps, cropperProps = _b.cropperProps, transform = _b.transform, _c = _b.crop, x = _c.x, y = _c.y, rotation = _b.rotation, zoom = _b.zoom, cropShape = _b.cropShape, showGrid = _b.showGrid, roundCropAreaPixels = _b.roundCropAreaPixels, _d = _b.style, containerStyle = _d.containerStyle, cropAreaStyle = _d.cropAreaStyle, mediaStyle = _d.mediaStyle, _e = _b.classes, containerClassName = _e.containerClassName, cropAreaClassName = _e.cropAreaClassName, mediaClassName = _e.mediaClassName;
+      var objectFit = (_a = this.state.mediaObjectFit) !== null && _a !== void 0 ? _a : this.getObjectFit();
+      return React__namespace.createElement("div", {
+        onMouseDown: this.onMouseDown,
+        onTouchStart: this.onTouchStart,
+        ref: function ref(el) {
+          return _this.containerRef = el;
+        },
+        "data-testid": "container",
+        style: containerStyle,
+        className: classNames("reactEasyCrop_Container", containerClassName)
+      }, image ? React__namespace.createElement("img", __assign({
+        alt: "",
+        className: classNames("reactEasyCrop_Image", objectFit === "contain" && "reactEasyCrop_Contain", objectFit === "horizontal-cover" && "reactEasyCrop_Cover_Horizontal", objectFit === "vertical-cover" && "reactEasyCrop_Cover_Vertical", mediaClassName)
+      }, mediaProps, {
+        src: image,
+        ref: this.imageRef,
+        style: __assign(__assign({}, mediaStyle), {
+          transform: transform || "translate(".concat(x, "px, ").concat(y, "px) rotate(").concat(rotation, "deg) scale(").concat(zoom, ")")
+        }),
+        onLoad: this.onMediaLoad
+      })) : video && React__namespace.createElement("video", __assign({
+        autoPlay: true,
+        playsInline: true,
+        loop: true,
+        muted: true,
+        className: classNames("reactEasyCrop_Video", objectFit === "contain" && "reactEasyCrop_Contain", objectFit === "horizontal-cover" && "reactEasyCrop_Cover_Horizontal", objectFit === "vertical-cover" && "reactEasyCrop_Cover_Vertical", mediaClassName)
+      }, mediaProps, {
+        ref: this.videoRef,
+        onLoadedMetadata: this.onMediaLoad,
+        style: __assign(__assign({}, mediaStyle), {
+          transform: transform || "translate(".concat(x, "px, ").concat(y, "px) rotate(").concat(rotation, "deg) scale(").concat(zoom, ")")
+        }),
+        controls: false
+      }), (Array.isArray(video) ? video : [{
+        src: video
+      }]).map(function(item) {
+        return React__namespace.createElement("source", __assign({
+          key: item.src
+        }, item));
+      })), this.state.cropSize && React__namespace.createElement("div", __assign({
+        ref: this.cropperRef,
+        style: __assign(__assign({}, cropAreaStyle), {
+          width: roundCropAreaPixels ? Math.round(this.state.cropSize.width) : this.state.cropSize.width,
+          height: roundCropAreaPixels ? Math.round(this.state.cropSize.height) : this.state.cropSize.height
+        }),
+        tabIndex: 0,
+        onKeyDown: this.onKeyDown,
+        onKeyUp: this.onKeyUp,
+        "data-testid": "cropper",
+        className: classNames("reactEasyCrop_CropArea", cropShape === "round" && "reactEasyCrop_CropAreaRound", showGrid && "reactEasyCrop_CropAreaGrid", cropAreaClassName)
+      }, cropperProps)));
+    };
+    Cropper2.defaultProps = {
+      zoom: 1,
+      rotation: 0,
+      aspect: 4 / 3,
+      maxZoom: MAX_ZOOM,
+      minZoom: MIN_ZOOM,
+      cropShape: "rect",
+      objectFit: "contain",
+      showGrid: true,
+      style: {},
+      classes: {},
+      mediaProps: {},
+      cropperProps: {},
+      zoomSpeed: 1,
+      restrictPosition: true,
+      zoomWithScroll: true,
+      keyboardStep: KEYBOARD_STEP
+    };
+    Cropper2.getMousePoint = function(e) {
+      return {
+        x: Number(e.clientX),
+        y: Number(e.clientY)
+      };
+    };
+    Cropper2.getTouchPoint = function(touch) {
+      return {
+        x: Number(touch.clientX),
+        y: Number(touch.clientY)
+      };
+    };
+    return Cropper2;
+  })(React__namespace.Component)
+);
+async function getCroppedBlob(imageSrc, croppedAreaPixels) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener("load", () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = croppedAreaPixels.width;
+      canvas.height = croppedAreaPixels.height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        reject(new Error("Canvas 2D context unavailable"));
+        return;
+      }
+      ctx.drawImage(
+        image,
+        croppedAreaPixels.x,
+        croppedAreaPixels.y,
+        croppedAreaPixels.width,
+        croppedAreaPixels.height,
+        0,
+        0,
+        croppedAreaPixels.width,
+        croppedAreaPixels.height
+      );
+      canvas.toBlob(
+        (blob) => {
+          if (blob) resolve(blob);
+          else reject(new Error("canvas.toBlob returned null"));
+        },
+        "image/jpeg",
+        0.92
+      );
+    });
+    image.addEventListener("error", () => reject(new Error("Failed to load image for crop")));
+    image.src = imageSrc;
+  });
+}
+function PhotoCropModal({
+  opened,
+  file,
+  onConfirm,
+  onClose,
+  onError,
+  aspect = 1,
+  cropShape = "round"
+}) {
+  const [imageUrl, setImageUrl] = React.useState(null);
+  const [crop, setCrop] = React.useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = React.useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);
+  const [isConfirming, setIsConfirming] = React.useState(false);
+  React.useEffect(() => {
+    if (!file) {
+      setImageUrl(null);
+      setCrop({ x: 0, y: 0 });
+      setZoom(1);
+      setCroppedAreaPixels(null);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setImageUrl(url);
+    setCrop({ x: 0, y: 0 });
+    setZoom(1);
+    setCroppedAreaPixels(null);
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+  const onCropComplete = React.useCallback((_croppedArea, pixels) => {
+    setCroppedAreaPixels(pixels);
+  }, []);
+  const handleConfirm = async () => {
+    if (!imageUrl || !croppedAreaPixels || isConfirming) return;
+    setIsConfirming(true);
+    try {
+      let blob;
+      try {
+        blob = await getCroppedBlob(imageUrl, croppedAreaPixels);
+      } catch (err) {
+        onError?.(err instanceof Error ? err : new Error("Crop failed"));
+        return;
+      }
+      try {
+        await onConfirm(blob);
+      } catch (err) {
+        onError?.(err instanceof Error ? err : new Error("Upload failed"));
+      }
+    } finally {
+      setIsConfirming(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Modal, { opened, onClose, title: "Adjust photo", size: "md", children: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Box,
+      {
+        style: {
+          position: "relative",
+          height: 320,
+          borderRadius: radii.md,
+          overflow: "hidden",
+          background: neutralColors[900]
+        },
+        children: imageUrl && /* @__PURE__ */ jsxRuntime.jsx(
+          Cropper,
+          {
+            image: imageUrl,
+            crop,
+            zoom,
+            aspect,
+            cropShape,
+            showGrid: false,
+            onCropChange: setCrop,
+            onCropComplete,
+            onZoomChange: setZoom,
+            mediaProps: {
+              onError: () => {
+                onError?.(new Error("Failed to load image preview"));
+                setImageUrl(null);
+                setCrop({ x: 0, y: 0 });
+                setZoom(1);
+                setCroppedAreaPixels(null);
+              }
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: "dimmed", ta: "center", children: "Drag to reposition · Scroll or pinch to zoom" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Group, { justify: "flex-end", gap: "xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "subtle", color: "gray", onClick: onClose, disabled: isConfirming, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleConfirm, loading: isConfirming, disabled: !croppedAreaPixels, children: "Apply" })
+    ] })
+  ] }) });
+}
 function SearchInput({
   value,
   onChange,
@@ -28736,32 +30074,24 @@ function StatCard({
   trend,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Card,
-    {
-      bg: `${color}.0`,
-      style: { border: `1px solid var(--mantine-color-${color}-2)` },
-      ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(Group, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: 4, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Text,
-            {
-              size: "xs",
-              fw: 600,
-              tt: "uppercase",
-              c: `${color}.6`,
-              style: { letterSpacing: "0.05em" },
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { fw: 700, size: "xl", lh: 1, children: value }),
-          trend && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: "dimmed", children: trend })
-        ] }),
-        icon && /* @__PURE__ */ jsxRuntime.jsx(Box, { c: `${color}.5`, fz: "1.5rem", children: icon })
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Card, { bg: `${color}.0`, bd: `1px solid ${color}.2`, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Group, { justify: "space-between", align: "flex-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Text,
+        {
+          size: "xs",
+          fw: 600,
+          tt: "uppercase",
+          c: `${color}.6`,
+          style: { letterSpacing: "0.05em" },
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Text, { fw: 700, size: "xl", lh: 1, children: value }),
+      trend && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: "dimmed", children: trend })
+    ] }),
+    icon && /* @__PURE__ */ jsxRuntime.jsx(Box, { c: `${color}.5`, fz: "1.5rem", children: icon })
+  ] }) });
 }
 const DEFAULT_COLOR_MAP = {
   active: colors.success,
@@ -28807,7 +30137,7 @@ function LoadingSpinner({ size: size2 = 32 }) {
       "svg",
       {
         ...iconProps,
-        stroke: "var(--mantine-color-gray-3)",
+        stroke: neutralColors[300],
         style: { position: "absolute", inset: 0 },
         "aria-hidden": "true",
         children: paths
@@ -28817,7 +30147,7 @@ function LoadingSpinner({ size: size2 = 32 }) {
       "svg",
       {
         ...iconProps,
-        stroke: "var(--mantine-color-indigo-5)",
+        stroke: brandColors.indigo,
         style: { position: "absolute", inset: 0, animation: "fillUp 1.4s ease-in-out infinite" },
         "aria-hidden": "true",
         children: paths
@@ -28868,14 +30198,14 @@ function SideNav({ items, onItemClick, color = "indigo" }) {
       onClick: () => onItemClick(item.id),
       color,
       variant: "light",
-      style: { borderRadius: "var(--mantine-radius-md)" },
+      style: { borderRadius: radii.md },
       styles: {
         root: {
-          color: item.active ? void 0 : "var(--mantine-color-gray-5)",
+          color: item.active ? void 0 : neutralColors[500],
           fontWeight: item.active ? 500 : 400
         },
         section: {
-          color: item.active ? void 0 : "var(--mantine-color-gray-4)"
+          color: item.active ? void 0 : neutralColors[400]
         }
       }
     },
@@ -28992,6 +30322,43 @@ function InvestmentCard({
     }
   );
 }
+function DefaultPencilIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+    }
+  );
+}
+function DefaultCameraIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "white",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "13", r: "4" })
+      ]
+    }
+  );
+}
 function formatMemberSince(iso) {
   const date = new Date(iso);
   if (Number.isNaN(date.getTime())) return null;
@@ -29004,16 +30371,97 @@ function InvestorProfileCard({
   verificationStatus,
   memberSince,
   subtitle,
-  children
+  children,
+  onEditName,
+  onUploadPhoto,
+  photoUploading,
+  editNameIcon,
+  uploadPhotoIcon
 }) {
   const memberSinceText = memberSince ? formatMemberSince(memberSince) : null;
+  const [isAvatarHovered, setIsAvatarHovered] = React.useState(false);
+  const [isAvatarFocused, setIsAvatarFocused] = React.useState(false);
+  const displayName = name?.trim() || "Add your name";
+  const avatarEl = /* @__PURE__ */ jsxRuntime.jsx(
+    Avatar,
+    {
+      src: avatarUrl,
+      alt: displayName,
+      radius: "md",
+      size: 56,
+      color: getAvatarColor(displayName),
+      children: displayName.charAt(0).toUpperCase()
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "md", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "md", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatarUrl, alt: name, radius: "md", size: 56, color: getAvatarColor(name), children: name.charAt(0).toUpperCase() }),
+      onUploadPhoto ? /* @__PURE__ */ jsxRuntime.jsxs(
+        Box,
+        {
+          component: "button",
+          type: "button",
+          onClick: onUploadPhoto,
+          onMouseEnter: () => setIsAvatarHovered(true),
+          onMouseLeave: () => setIsAvatarHovered(false),
+          onFocus: () => setIsAvatarFocused(true),
+          onBlur: () => setIsAvatarFocused(false),
+          "aria-label": "Upload profile photo",
+          disabled: !!photoUploading,
+          style: {
+            position: "relative",
+            display: "inline-block",
+            cursor: photoUploading ? "not-allowed" : "pointer",
+            background: "none",
+            border: "none",
+            padding: 0,
+            borderRadius: radii.md,
+            flexShrink: 0
+          },
+          children: [
+            avatarEl,
+            photoUploading ? /* @__PURE__ */ jsxRuntime.jsx(
+              Box,
+              {
+                "data-testid": "photo-uploading-overlay",
+                "aria-label": "Uploading photo",
+                role: "status",
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  borderRadius: radii.md,
+                  backgroundColor: `${neutralColors[900]}80`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { size: "xs", color: "white" })
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              Box,
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  borderRadius: radii.md,
+                  backgroundColor: `${neutralColors[900]}73`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  opacity: isAvatarHovered || isAvatarFocused ? 1 : 0,
+                  transition: "opacity 150ms ease",
+                  pointerEvents: "none"
+                },
+                children: uploadPhotoIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultCameraIcon, {})
+              }
+            )
+          ]
+        }
+      ) : avatarEl,
       /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { fw: 600, size: "md", children: name }),
-          verificationStatus && /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: verificationStatus, size: "xs" })
+        /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { fw: 600, size: "md", children: displayName }),
+          verificationStatus && /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: verificationStatus, size: "xs" }),
+          onEditName && /* @__PURE__ */ jsxRuntime.jsx(ActionIcon, { variant: "subtle", size: "sm", onClick: onEditName, "aria-label": "Edit name", children: editNameIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultPencilIcon, {}) })
         ] }),
         email && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", c: `${colors.neutral}.5`, children: email }),
         memberSinceText && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: `${colors.neutral}.4`, children: memberSinceText }),
@@ -29111,8 +30559,8 @@ function WalletList({
         justify: "space-between",
         p: "xs",
         style: {
-          borderRadius: "var(--mantine-radius-sm)",
-          border: "1px solid var(--mantine-color-default-border)"
+          borderRadius: radii.sm,
+          border: `1px solid ${neutralColors[200]}`
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "xs", children: [
@@ -29284,6 +30732,7 @@ exports.Group = Group;
 exports.InvestmentCard = InvestmentCard;
 exports.InvestorProfileCard = InvestorProfileCard;
 exports.ListRow = ListRow;
+exports.Loader = Loader;
 exports.LoadingSpinner = LoadingSpinner;
 exports.MOBILE_BREAKPOINT = MOBILE_BREAKPOINT;
 exports.Menu = Menu;
@@ -29299,6 +30748,7 @@ exports.PasswordField = PasswordField;
 exports.PasswordInput = PasswordInput;
 exports.Percent = Percent;
 exports.PhoneField = PhoneField;
+exports.PhotoCropModal = PhotoCropModal;
 exports.PinInput = PinInput;
 exports.Progress = Progress;
 exports.ScrollArea = ScrollArea;
@@ -29320,6 +30770,8 @@ exports.TextInput = TextInput;
 exports.ThemeIcon = ThemeIcon;
 exports.Title = Title;
 exports.Tooltip = Tooltip;
+exports.USStateField = USStateField;
+exports.US_STATES = US_STATES;
 exports.UnstyledButton = UnstyledButton;
 exports.UserMenu = UserMenu;
 exports.WalletList = WalletList;
@@ -29342,6 +30794,7 @@ exports.neutralColors = neutralColors;
 exports.notify = notify;
 exports.passwordSchema = passwordSchema;
 exports.phoneSchema = phoneSchema;
+exports.radii = radii;
 exports.semanticColors = semanticColors;
 exports.theme = theme;
 exports.truncateAddress = truncateAddress;