import "clsx";
import * as colors_dark from "./colors.dark.mjs";
import * as colors from "./colors.mjs";
import { FONT_FAMILY } from "./font.mjs";
import { createTheme } from "../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/MantineProvider/create-theme/create-theme.mjs";
import { rem } from "../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/utils/units-converters/rem.mjs";
import { mergeMantineTheme } from "../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/MantineProvider/merge-mantine-theme/merge-mantine-theme.mjs";
import { DEFAULT_THEME } from "../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/MantineProvider/default-theme.mjs";
import { getThemeColor } from "../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/MantineProvider/color-functions/get-theme-color/get-theme-color.mjs";
import { getPrimaryShade } from "../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/MantineProvider/color-functions/get-primary-shade/get-primary-shade.mjs";
import { keyframes } from "@emotion/react";
const Colors = Object.keys(colors);
function themeColor(theme2, color, shade) {
  return getThemeColor([color, shade].join("."), theme2);
}
const InputSizes = {
  xl: 48,
  lg: 44,
  md: 40,
  sm: 32,
  xs: 28
};
const InputFontSizes = {
  xl: 16,
  lg: 14,
  md: 14,
  sm: 13,
  xs: 12
};
function getInputStyles(theme2, props) {
  const size = InputSizes[props.size ?? "md"];
  const inputFontSize = InputFontSizes[props.size ?? "md"];
  const inputSize = size ? {
    "--input-size": `${size}px`,
    "--input-height": `${size}px`,
    "--input-line-height": `${size - 2}px`,
    "--input-fz": `${inputFontSize}px`
  } : {};
  const passwordInnerInputSize = size ? {
    height: size - 2,
    minHeight: size - 2,
    lineHeight: `${size - 2}px`,
    fontSize: inputFontSize
  } : {};
  if (props.variant === "unstyled") {
    return {
      input: {
        "&:not(.mantine-Textarea-input)": {
          ...inputSize
        },
        "& .mantine-PasswordInput-innerInput": {
          ...passwordInnerInputSize
        },
        "&::placeholder": {
          color: `${themeColor(theme2, "carbon", 6)} !important`
        }
      }
    };
  }
  if (props.variant === "filled") {
    return {
      input: {
        "--input-bg": themeColor(theme2, "carbon", 3),
        "--input-bd-focus": themeColor(theme2, "carbon", 9),
        "&:not(.mantine-Textarea-input)": {
          ...inputSize
        },
        "& .mantine-PasswordInput-innerInput": {
          ...passwordInnerInputSize
        },
        "&::placeholder": {
          color: `${themeColor(theme2, "carbon", 6)} !important`
        }
      }
    };
  }
  return {
    label: {
      color: themeColor(theme2, "carbon", 8),
      marginBottom: 6,
      lineHeight: "20px",
      fontSize: 14
    },
    description: {
      color: themeColor(theme2, "carbon", 7),
      fontSize: 12
    },
    input: {
      color: theme2.colors.carbon[8],
      border: `1px solid ${themeColor(theme2, "carbon", 4)}`,
      backgroundColor: themeColor(theme2, "carbon", 0),
      "&:not(.mantine-Textarea-input)": {
        ...inputSize
      },
      "&:hover": {
        borderColor: themeColor(theme2, "carbon", 5)
      },
      "&:focus, &:focus-within": {
        borderColor: themeColor(theme2, "carbon", 9)
      },
      "&:disabled": {
        borderColor: themeColor(theme2, "carbon", 4),
        backgroundColor: themeColor(theme2, "carbon", 2),
        color: themeColor(theme2, "carbon", 8),
        opacity: 1
      },
      "&::placeholder": {
        color: `${themeColor(theme2, "carbon", 6)} !important`
      },
      "& .mantine-PasswordInput-innerInput": {
        ...passwordInnerInputSize,
        "&::placeholder": {
          color: `${themeColor(theme2, "carbon", 6)} !important`
        }
      }
    },
    error: {
      color: themeColor(theme2, "red", 7)
    },
    wrapper: {
      "&[data-error]": {
        ".mantine-Input-input, .mantine-TextInput-input, .mantine-PasswordInput-innerInput": {
          color: themeColor(theme2, "red", 7),
          borderColor: themeColor(theme2, "red", 4),
          "& .mantine-PasswordInput-innerInput": {
            borderColor: "transparent"
          },
          "&:hover": {
            borderColor: themeColor(theme2, "red", 4)
          },
          "&:focus, &:focus-within": {
            borderColor: themeColor(theme2, "red", 4)
          },
          "&::placeholder": {
            color: `${themeColor(theme2, "carbon", 6)} !important`
          }
        }
      }
    },
    section: {
      overflow: "hidden",
      "& .mantine-PasswordInput-visibilityToggle svg": {
        color: themeColor(theme2, "carbon", 6)
      }
    }
  };
}
const theme = createTheme({
  primaryColor: "carbon",
  primaryShade: 7,
  defaultRadius: 8,
  cursorType: "pointer",
  fontFamily: FONT_FAMILY,
  breakpoints: {
    xs: "36em",
    sm: "48em",
    md: "60em",
    lg: "75em",
    xl: "90em"
  },
  shadows: {
    xs: "0px 2px 4px rgba(0, 0, 0, 0.04)",
    sm: "0px 4px 16px rgba(0, 0, 0, 0.04)",
    md: "0px 8px 32px rgba(0, 0, 0, 0.08)",
    lg: "0px 8px 64px rgba(0, 0, 0, 0.08)",
    xl: "0px 16px 64px rgba(0, 0, 0, 0.08)"
  },
  fontSizes: {
    xs: "12px",
    sm: "14px",
    md: "14px",
    lg: "18px",
    xl: "20px"
  },
  spacing: {
    xs: rem(10),
    sm: rem(12),
    md: rem(16),
    lg: rem(20),
    xl: rem(24)
  },
  components: {
    Button: {
      defaultProps: {
        size: "md",
        variant: "filled"
      },
      styles: (theme2, props, u) => {
        let color = props.color || theme2.primaryColor;
        const getFilledStyles = () => {
          const bgColorShade = color.includes("carbon") ? 9 : getPrimaryShade(theme2, "light");
          const hoverBgColorShade = color.includes("carbon") ? bgColorShade - 1 : bgColorShade + 1;
          const bgColor = themeColor(theme2, color, bgColorShade);
          const bgHoverColor = themeColor(theme2, color, hoverBgColorShade);
          return {
            color: theme2.white,
            backgroundColor: bgColor,
            "&:hover": {
              backgroundColor: bgHoverColor
            },
            "&:disabled, &[data-disabled]": {
              color: theme2.white,
              backgroundColor: themeColor(theme2, color, 5)
            }
          };
        };
        const getLightStyles = () => {
          color = color || "peacock";
          const fontColorShade = 7;
          const bgColorShade = 1;
          const borderColorShade = 4;
          return {
            color: themeColor(theme2, color, fontColorShade),
            backgroundColor: themeColor(theme2, color, bgColorShade),
            borderWidth: 1,
            borderStyle: "solid",
            borderColor: themeColor(theme2, color, borderColorShade),
            "&:hover": {
              color: themeColor(theme2, color, fontColorShade + 1),
              borderColor: themeColor(theme2, color, borderColorShade + 1),
              backgroundColor: themeColor(theme2, color, bgColorShade + 1)
            },
            "&:disabled, &[data-disabled]": {
              color: themeColor(theme2, color, 6),
              borderColor: themeColor(theme2, color, borderColorShade + 1),
              backgroundColor: themeColor(theme2, color, 2)
            }
          };
        };
        const getDefaultStyles = () => {
          const fontColorShade = color === "carbon" ? 8 : 7;
          const bgColorShade = 2;
          const borderColorShade = color === "carbon" ? 5 : 4;
          return {
            color: themeColor(theme2, color, fontColorShade),
            backgroundColor: themeColor(theme2, color, bgColorShade),
            borderColor: themeColor(theme2, color, borderColorShade),
            "&:hover": {
              color: themeColor(theme2, color, fontColorShade + 1),
              borderColor: themeColor(theme2, color, borderColorShade + 1),
              backgroundColor: themeColor(theme2, color, bgColorShade + 1)
            },
            "&:disabled, &[data-disabled]": {
              color: themeColor(theme2, "carbon", 6),
              backgroundColor: themeColor(theme2, "carbon", 2)
            }
          };
        };
        const getSubtleStyles = () => {
          color = color || "peacock";
          const fontColorShade = 7;
          const bgColorShade = 1;
          return {
            color: themeColor(theme2, color, fontColorShade),
            backgroundColor: "transparent",
            "&:hover": {
              color: themeColor(theme2, color, fontColorShade + 1),
              backgroundColor: themeColor(theme2, color, bgColorShade + 1)
            },
            "&:disabled, &[data-disabled]": {
              color: themeColor(theme2, color, 6)
            }
          };
        };
        const variantStyles = {
          filled: getFilledStyles(),
          light: getLightStyles(),
          default: getDefaultStyles(),
          subtle: getSubtleStyles(),
          outline: getDefaultStyles()
        };
        const sizeStyles = {
          xs: {
            height: 28
          },
          sm: {
            height: 32
          },
          md: {
            height: 40
          },
          lg: {
            height: 48
          },
          xl: {
            height: 56
          }
        };
        const variantStyle = variantStyles[props.variant];
        const sizeStyle = sizeStyles[props.size];
        const finalStyles = {
          label: {
            fontWeight: 500,
            fontSize: props.size === "xs" ? 12 : 14
          },
          root: {
            overflow: "unset",
            paddingLeft: 12,
            paddingRight: 12,
            ...variantStyle,
            ...sizeStyle
          },
          leftIcon: {
            marginRight: 4
          },
          rightIcon: {
            marginLeft: 4
          }
        };
        return finalStyles;
      }
    },
    Loader: {
      defaultProps: {
        color: "carbon.5"
      }
    },
    Skeleton: {
      styles(theme2, props) {
        const animation = keyframes({
          "0%": {
            backgroundPosition: "200% 0"
          },
          "100%": {
            backgroundPosition: "-200% 0"
          }
        });
        const c1 = themeColor(theme2, "carbon", 2);
        const c2 = themeColor(theme2, "carbon", 4);
        return {
          root: {
            "&::after": {
              backgroundImage: `linear-gradient(90deg,${c1},${c2},${c1},${c2})`,
              backgroundSize: "400% 100%",
              animation: props.animate ? `${animation} 5000ms ease-in-out infinite` : "none"
            }
          }
        };
      }
    },
    Tabs: {
      styles(theme2, props) {
        return {
          list: {
            gap: props.orientation === "vertical" ? 8 : 32,
            border: 0
          },
          tab: {
            color: themeColor(theme2, "carbon", 7),
            fontWeight: 600,
            paddingLeft: 0,
            paddingRight: props.orientation === "vertical" ? 8 : 0,
            "&[data-active]": {
              color: themeColor(theme2, "carbon", 9)
            },
            "&:hover": {
              color: themeColor(theme2, "carbon", 9),
              backgroundColor: "transparent"
            }
          }
        };
      }
    },
    Notification: {
      styles: (theme2) => {
        return {
          root: {
            padding: 8,
            paddingLeft: 28,
            "&:before": {
              top: 8,
              bottom: 8,
              left: 8,
              width: 4
            }
          },
          body: {
            marginRight: 8,
            lineHeight: 20,
            fontSize: 16
          },
          title: {
            fontWeight: 600,
            color: themeColor(theme2, "carbon", 8)
          },
          description: {
            color: themeColor(theme2, "carbon", 7)
          }
        };
      }
    },
    Menu: {
      styles: (theme2) => {
        const bgHoverColor = themeColor(theme2, "carbon", 3);
        const bgActiveColor = themeColor(theme2, "carbon", 4);
        return {
          dropdown: {
            boxShadow: theme2.shadows.md
          },
          item: {
            transition: "background 150ms ease-in-out",
            "&:hover, &[data-hovered]": {
              backgroundColor: bgHoverColor
            },
            "&:active, &[data-active]": {
              backgroundColor: bgActiveColor
            }
          }
        };
      }
    },
    NavLink: {
      defaultProps: {
        px: 10,
        lh: 1.5,
        fw: 500,
        variant: "light",
        /**
         * mantine changed the default component to `a` instead of `button` in v7
         * we need to set it back to `button` to keep the same behavior as before
         */
        component: "button"
      },
      styles: (theme2, props) => {
        const withThemeColor = (shade) => themeColor(theme2, props.color ?? theme2.primaryColor, shade);
        const rootStyles = {
          light: {
            color: withThemeColor(8),
            "&:hover": {
              color: withThemeColor(8),
              backgroundColor: withThemeColor(2)
            },
            "&:active": {
              color: withThemeColor(8),
              backgroundColor: withThemeColor(4)
            },
            "&[data-active]": {
              color: withThemeColor(9),
              backgroundColor: withThemeColor(4),
              "&:hover": {
                backgroundColor: withThemeColor(4)
              },
              "&:active": {
                backgroundColor: withThemeColor(4)
              }
            }
          }
        };
        const matchedStyle = rootStyles[props.variant] || {};
        return {
          root: {
            ...matchedStyle,
            borderRadius: theme2.defaultRadius,
            transition: "background 150ms ease-in-out"
          },
          label: {
            lineHeight: "24px"
          }
        };
      }
    },
    Stepper: {
      styles: (theme2, props) => {
        const color = props.color || theme2.primaryColor;
        return {
          stepIcon: {
            backgroundColor: themeColor(theme2, color, 0),
            borderColor: themeColor(theme2, color, 4),
            color: themeColor(theme2, color, 7),
            "&[data-progress]": {
              backgroundColor: themeColor(theme2, color, 9),
              color: themeColor(theme2, color, 0),
              borderColor: themeColor(theme2, color, 9)
            },
            "&[data-completed]": {
              backgroundColor: themeColor(theme2, color, 3),
              color: themeColor(theme2, color, 9),
              borderColor: themeColor(theme2, color, 9)
            }
          },
          stepCompletedIcon: {
            color: themeColor(theme2, color, 9),
            "& > svg": {
              width: "14px !important",
              height: "14px !important"
            }
          },
          separator: {
            backgroundColor: themeColor(theme2, color, 4),
            "&[data-active]": {
              backgroundColor: themeColor(theme2, color, 9)
            }
          },
          verticalSeparator: {
            borderColor: themeColor(theme2, color, 4),
            "&[data-active]": {
              borderColor: themeColor(theme2, color, 9)
            }
          }
        };
      }
    },
    Alert: {
      defaultProps: {
        color: "peacock"
      },
      styles: (theme2, props) => {
        const color = props.color || theme2.primaryColor;
        return {
          root: {
            borderRadius: 0,
            border: "none",
            borderLeft: `2px solid ${themeColor(theme2, color, 7)}`,
            color: themeColor(theme2, color, 9),
            backgroundColor: themeColor(theme2, color, 1)
          },
          title: {
            color: "inherit"
          },
          icon: {
            color: "inherit",
            marginRight: 4
          },
          message: {
            color: "inherit"
          }
        };
      }
    },
    Select: {
      defaultProps: {
        size: "md",
        withCheckIcon: true,
        checkIconPosition: "right",
        allowDeselect: false
      },
      styles: (theme2, props) => {
        return {
          label: {
            lineHeight: "20px",
            marginBottom: 6
          },
          description: {
            color: themeColor(theme2, "carbon", 7)
          },
          input: {
            color: themeColor(theme2, "carbon", 8),
            ...props.variant === "unstyled" && {
              border: "none",
              "&:disabled": {
                color: themeColor(theme2, "carbon", 7)
              }
            },
            ...props.variant === "filled" && {
              backgroundColor: themeColor(theme2, "carbon", 2),
              borderColor: "transparent",
              "&:disabled": {
                color: themeColor(theme2, "carbon", 6),
                cursor: "not-allowed"
              }
            }
          },
          option: {
            transition: "background 150ms ease-in-out",
            color: themeColor(theme2, "carbon", 8),
            "&:hover": {
              color: themeColor(theme2, "carbon", 8),
              backgroundColor: themeColor(theme2, "carbon", 3)
            },
            "&[data-checked]": {
              color: themeColor(theme2, "carbon", 8),
              fontWeight: 700,
              backgroundColor: "transparent",
              "&:hover": {
                backgroundColor: themeColor(theme2, "carbon", 3)
              },
              // check icon color
              "& > svg": {
                color: themeColor(theme2, "carbon", 9),
                opacity: 1
              }
            }
          },
          section: {
            "& > svg": {
              color: `${themeColor(theme2, "carbon", 7)} !important`
            }
          },
          dropdown: {
            "--popover-border-color": themeColor(theme2, "carbon", 3),
            "--popover-shadow": "0px 8px 32px 0px #00000014"
          }
        };
      }
    },
    MultiSelect: {
      defaultProps: {
        size: "md",
        withCheckIcon: false
      },
      styles: (theme2, props) => {
        return {
          label: {
            fontSize: 14,
            marginBottom: 6
          },
          inputField: {
            "&::placeholder": {
              color: `${themeColor(theme2, "carbon", 6)} !important`
            }
          },
          pill: {
            backgroundColor: themeColor(theme2, "carbon", 3),
            color: themeColor(theme2, "carbon", 8),
            borderRadius: theme2.radius.sm
          },
          section: {
            "& > svg": {
              color: `${themeColor(theme2, "carbon", 7)} !important`
            }
          },
          option: {
            "&[data-checked]": {
              fontWeight: 700
            }
          }
        };
      }
    },
    Input: {
      defaultProps: {
        size: "md"
      },
      styles: getInputStyles
    },
    TextInput: {
      defaultProps: {
        size: "md",
        inputWrapperOrder: ["label", "input", "description", "error"]
      },
      styles: getInputStyles
    },
    PasswordInput: {
      defaultProps: {
        size: "md"
      },
      styles: getInputStyles
    },
    NumberInput: {
      defaultProps: {
        size: "md"
      },
      styles: getInputStyles
    },
    Textarea: {
      styles: getInputStyles
    },
    Badge: {
      defaultProps: {
        color: "peacock",
        size: "md",
        variant: "light"
      },
      styles(theme2, props) {
        const color = props.color ?? theme2.primaryColor;
        const mainShade = color.includes("carbon") ? 9 : 7;
        const sizes = {
          xs: 11,
          sm: 12,
          md: 13,
          lg: 14,
          xl: 16
        };
        const fontSize = sizes[props.size];
        const styles = {
          dot: {
            border: "none",
            textTransform: "capitalize",
            fontWeight: 400,
            fontSize,
            backgroundColor: "transparent",
            color: themeColor(theme2, theme2.primaryColor, 8),
            padding: 0,
            borderRadius: 0,
            "&:before": {
              backgroundColor: themeColor(theme2, color, 7)
            }
          },
          outline: {
            color: themeColor(theme2, color, mainShade),
            borderColor: themeColor(theme2, color, 4)
          },
          light: {
            backgroundColor: themeColor(theme2, color, 1),
            color: themeColor(theme2, color, mainShade)
          },
          filled: {
            backgroundColor: themeColor(theme2, color, mainShade),
            color: theme2.white
          }
        };
        return {
          root: {
            // @ts-ignore
            ...styles[props.variant]
          }
        };
      }
    },
    Checkbox: {
      styles(theme2, props) {
        const withThemeColor = (shade) => themeColor(theme2, props.color ?? theme2.primaryColor, shade);
        return {
          input: {
            borderRadius: 4,
            borderColor: withThemeColor(6),
            "&:checked:not(:disabled)": {
              backgroundColor: withThemeColor(9),
              borderColor: withThemeColor(9)
            },
            "&:disabled:checked": {
              backgroundColor: themeColor(theme2, "carbon", 6),
              borderColor: themeColor(theme2, "carbon", 6)
            }
          },
          label: {
            color: themeColor(theme2, "carbon", 8),
            "&[data-disabled]": {
              color: themeColor(theme2, "carbon", 6)
            }
          }
        };
      }
    },
    Divider: {
      defaultProps: {
        color: "carbon.4"
      }
    },
    Card: {
      defaultProps: {
        shadow: "none",
        withBorder: true
      },
      styles: (theme2) => {
        return {
          root: {
            borderColor: theme2.colors.carbon[4]
          },
          section: {
            borderColor: theme2.colors.carbon[4]
          }
        };
      }
    },
    Paper: {
      defaultProps: {
        shadow: "none",
        withBorder: false
      },
      styles: (theme2, props) => {
        return {
          root: {
            backgroundColor: themeColor(theme2, "carbon", 0),
            borderColor: props.withBorder ? themeColor(theme2, "carbon", 4) : "transparent"
          }
        };
      }
    },
    Drawer: {
      defaultProps: (theme2) => ({
        overlayProps: {
          backgroundOpacity: 0.9,
          blur: 3,
          color: themeColor(theme2, "carbon", 2)
        }
      })
    },
    Modal: {
      defaultProps: (theme2) => ({
        shadow: "xl",
        padding: 0,
        centered: true,
        transitionProps: {
          duration: 200,
          transition: "fade-down"
        },
        overlayProps: {
          backgroundOpacity: 0.9,
          blur: 3,
          color: themeColor(theme2, "carbon", 2)
        }
      }),
      styles: (theme2) => ({
        content: {
          border: `1px solid ${themeColor(theme2, "carbon", 4)} !important`
        },
        header: {
          borderTopLeftRadius: theme2.defaultRadius,
          borderTopRightRadius: theme2.defaultRadius,
          padding: "16px 16px 16px 24px",
          margin: 0,
          backgroundColor: themeColor(theme2, "carbon", 1),
          borderBottom: `1px solid ${themeColor(theme2, "carbon", 4)}`
        },
        title: {
          fontWeight: 700,
          fontSize: 16,
          lineHeight: 1.5,
          color: themeColor(theme2, "carbon", 9)
        },
        body: {
          padding: 24,
          backgroundColor: themeColor(theme2, "carbon", 0),
          borderBottomLeftRadius: theme2.defaultRadius,
          borderBottomRightRadius: theme2.defaultRadius
        }
      })
    },
    Table: {
      styles: (theme2, props) => {
        const borderStyles = props.withTableBorder ? {
          borderCollapse: "separate",
          borderSpacing: 0,
          borderRadius: theme2.defaultRadius,
          "thead tr:first-of-type th:first-of-type": {
            borderTopLeftRadius: theme2.defaultRadius
          },
          "thead tr:first-of-type th:last-of-type": {
            borderTopRightRadius: theme2.defaultRadius
          }
        } : {};
        return {
          table: {
            ...borderStyles,
            "--table-border-color": themeColor(theme2, "carbon", 3)
          },
          thead: {
            backgroundColor: themeColor(theme2, "carbon", 2)
          },
          tr: {
            "&:where([data-with-row-border]):not(:last-of-type)": {
              td: {
                borderBottom: `1px solid ${themeColor(theme2, "carbon", 3)} !important`
              }
            }
          }
        };
      }
    },
    Switch: {
      styles: (theme2, props) => {
        const color = props.color ?? theme2.primaryColor;
        return {
          root: {
            "& input:checked+.mantine-Switch-track": {
              backgroundColor: themeColor(theme2, color, 9),
              borderColor: themeColor(theme2, color, 9)
            },
            "& input:disabled+.mantine-Switch-track": {
              backgroundColor: themeColor(theme2, color, 4),
              borderColor: themeColor(theme2, color, 4)
            },
            "& input:disabled:checked+.mantine-Switch-track": {
              backgroundColor: themeColor(theme2, color, 7),
              borderColor: themeColor(theme2, color, 7)
            },
            "& input+*>.mantine-Switch-trackLabel": {
              color: themeColor(theme2, color, 8)
            },
            "& input:checked+*>.mantine-Switch-trackLabel": {
              color: themeColor(theme2, color, 0)
            }
          },
          label: {
            "&[data-disabled]": {
              color: themeColor(theme2, color, 6)
            }
          },
          track: {
            backgroundColor: themeColor(theme2, color, 5),
            borderColor: themeColor(theme2, color, 5)
          },
          trackLabel: {
            color: themeColor(theme2, color, 8)
          }
        };
      }
    },
    Radio: {
      styles(theme2, props) {
        var _a;
        const color = ((_a = props.color) == null ? void 0 : _a.includes(".")) ? props.color.split(".")[0] : props.color ?? "carbon";
        const shade = color.includes("carbon") ? 9 : 7;
        const sizes = {
          xs: 14,
          sm: 16,
          md: 20,
          lg: 24,
          xl: 30
        };
        const iconSizes = {
          xs: 5,
          sm: 6,
          md: 8,
          lg: 10,
          xl: 12
        };
        const size = sizes[props.size ?? "sm"];
        const iconSize = iconSizes[props.size ?? "sm"];
        return {
          root: {
            "--radio-size": rem(size),
            "--radio-icon-size": rem(iconSize),
            "--radio-color": themeColor(theme2, color, shade) + " !important",
            "--radio-icon-color": props.variant === "outline" ? themeColor(theme2, color, shade) : theme2.white + " !important"
          },
          label: {
            lineHeight: `${size}px`,
            "&[data-disabled]": {
              color: themeColor(theme2, color, 6)
            }
          },
          icon: {
            transform: "var(--radio-icon-transform, scale(0.2))"
          },
          radio: {
            borderColor: themeColor(theme2, "carbon", 6),
            "&:disabled:not(:checked)": {
              background: themeColor(theme2, "carbon", 4),
              borderColor: themeColor(theme2, "carbon", 6),
              cursor: "not-allowed"
            },
            "&:disabled:checked": {
              color: themeColor(theme2, "carbon", 2),
              background: themeColor(theme2, "carbon", 6),
              borderColor: themeColor(theme2, "carbon", 6),
              cursor: "not-allowed"
            }
          }
        };
      }
    },
    RadioIndicator: {
      styles: (theme2, props) => {
        var _a;
        const color = ((_a = props.color) == null ? void 0 : _a.includes(".")) ? props.color.split(".")[0] : props.color ?? "carbon";
        const shade = color.includes("carbon") ? 9 : 7;
        return {
          indicator: {
            "--radio-color": themeColor(theme2, color, shade) + " !important",
            "--radio-icon-color": props.variant === "outline" ? themeColor(theme2, color, shade) : theme2.white + " !important",
            borderColor: themeColor(theme2, "carbon", 6),
            "&[data-disabled]:not([data-checked])": {
              background: themeColor(theme2, "carbon", 4),
              borderColor: themeColor(theme2, "carbon", 6),
              cursor: "not-allowed"
            },
            "&[data-disabled][data-checked]": {
              color: themeColor(theme2, "carbon", 2),
              background: themeColor(theme2, "carbon", 6),
              borderColor: themeColor(theme2, "carbon", 6),
              cursor: "not-allowed"
            }
          }
        };
      }
    },
    SegmentedControl: {
      styles: (theme2) => {
        return {
          root: {
            backgroundColor: themeColor(theme2, "carbon", 4)
          },
          indicator: {
            backgroundColor: themeColor(theme2, "carbon", 0)
          },
          label: {
            color: themeColor(theme2, "carbon", 7) + " !important",
            "&[data-active]": {
              color: themeColor(theme2, "carbon", 9) + " !important"
            },
            "&[data-disabled]": {
              color: themeColor(theme2, "carbon", 6) + " !important"
            }
          },
          control: {
            "--separator-color": themeColor(theme2, "carbon", 5)
          }
        };
      }
    },
    Tooltip: {
      defaultProps: {
        withArrow: true
      },
      styles(theme2) {
        return {
          tooltip: {
            backgroundColor: themeColor(theme2, "carbon", 8),
            color: themeColor(theme2, "carbon", 1)
          }
        };
      }
    },
    ActionIcon: {
      defaultProps: {
        variant: "subtle",
        color: "carbon",
        size: "md"
      },
      styles(theme2, props) {
        const color = props.color ?? theme2.primaryColor;
        const shade = color.includes("carbon") ? 8 : 7;
        const variantStyles = {
          default: {
            backgroundColor: themeColor(theme2, color, 2),
            borderColor: themeColor(theme2, color, 5),
            color: themeColor(theme2, color, 8),
            "&:hover": {
              backgroundColor: themeColor(theme2, color, 3),
              borderColor: themeColor(theme2, color, 6),
              color: themeColor(theme2, color, 9)
            },
            "&:active": {
              backgroundColor: themeColor(theme2, color, 4),
              borderColor: themeColor(theme2, color, 6),
              color: themeColor(theme2, color, 9)
            },
            "&:disabled": {
              backgroundColor: themeColor(theme2, color, 2),
              borderColor: themeColor(theme2, color, 5),
              color: themeColor(theme2, color, 6)
            }
          },
          transparent: {
            backgroundColor: "transparent",
            color: themeColor(theme2, color, shade),
            "&:hover": {
              color: themeColor(theme2, color, shade)
            }
          },
          subtle: {
            backgroundColor: "transparent",
            color: themeColor(theme2, color, 8),
            borderColor: "transparent",
            "&:hover": {
              backgroundColor: themeColor(theme2, color, 3),
              color: themeColor(theme2, color, 8)
            },
            "&:active": {
              backgroundColor: themeColor(theme2, color, 4)
            },
            "&:disabled": {
              color: themeColor(theme2, color, 6),
              backgroundColor: "transparent",
              borderColor: "transparent",
              cursor: "not-allowed"
            }
          },
          outline: {
            backgroundColor: "transparent",
            color: themeColor(theme2, color, shade),
            border: `1px solid ${themeColor(theme2, color, 4)}`,
            "&:hover": {
              backgroundColor: themeColor(theme2, color, 2),
              color: themeColor(theme2, color, shade)
            }
          },
          filled: {
            backgroundColor: themeColor(theme2, color, color.includes("carbon") ? 9 : 7),
            color: theme2.white,
            "&:hover": {
              color: theme2.white
            }
          },
          light: {
            backgroundColor: themeColor(theme2, color, 3),
            color: themeColor(theme2, color, 8),
            "&:hover": {
              backgroundColor: themeColor(theme2, color, 4),
              color: themeColor(theme2, color, 8)
            },
            "&:active": {
              backgroundColor: themeColor(theme2, color, 5)
            }
          }
        };
        const sizes = {
          xs: 16,
          sm: 20,
          md: 28,
          lg: 32,
          xl: 40
        };
        const size = sizes[props.size ?? "md"];
        const variantStyle = variantStyles[props.variant ?? "default"];
        return {
          root: {
            ...variantStyle,
            "--ai-size": size
          }
        };
      }
    },
    DatePicker: {
      styles: (theme2) => {
        const color = theme2.primaryColor;
        return {
          calendarHeaderLevel: {
            color: themeColor(theme2, color, 8)
          },
          calendarHeaderControl: {
            color: themeColor(theme2, color, 8)
          },
          weekday: {
            color: themeColor(theme2, color, 8)
          },
          calendarHeader: {
            maxWidth: "100%"
          },
          day: {
            "--day-size-sm": "32px",
            "--day-size-md": "40px",
            color: themeColor(theme2, color, 8),
            "&[data-in-range]": {
              backgroundColor: themeColor(theme2, color, 3),
              borderRadius: theme2.defaultRadius
            },
            "&[data-first-in-range]": {
              borderRadius: theme2.defaultRadius
            },
            "&[data-last-in-range]": {
              borderRadius: theme2.defaultRadius
            },
            "&[data-selected]": {
              backgroundColor: themeColor(theme2, color, 9),
              color: theme2.white
            },
            "&[data-weekend]": {
              color: themeColor(theme2, color, 8),
              "&[data-selected]": {
                color: theme2.white
              },
              "&[data-disabled], &:disabled": {
                color: themeColor(theme2, color, 6)
              }
            },
            "&[data-disabled], &:disabled": {
              color: themeColor(theme2, color, 6)
            },
            "&[data-outside]": {
              color: themeColor(theme2, color, 6)
            }
          }
        };
      }
    },
    Anchor: {
      defaultProps: {
        c: "peacock.7"
      }
    },
    Progress: {
      styles: () => {
        return {
          section: {
            "&:where(:first-of-type)": {
              borderStartStartRadius: "var(--progress-radius) !important",
              borderEndStartRadius: "var(--progress-radius) !important"
            },
            "&:where(:last-of-type)": {
              borderStartEndRadius: "var(--progress-radius) !important",
              borderEndEndRadius: "var(--progress-radius) !important"
            }
          }
        };
      }
    },
    HoverCard: {
      defaultProps: {
        withArrow: true,
        shadow: "md"
      }
    },
    Popover: {
      defaultProps: {
        withArrow: true,
        shadow: "md"
      }
    }
  }
});
const useTheme = (colorScheme) => {
  const isLight = colorScheme === "light";
  const colors$1 = isLight ? colors : colors_dark;
  const mergedTheme = mergeMantineTheme(DEFAULT_THEME, {
    ...theme,
    colors: colors$1,
    white: colors$1.carbon[0],
    black: colors$1.carbon[8]
  });
  return mergedTheme;
};
export {
  Colors,
  useTheme
};
