diff --git a/docs/source/installation/settings.html b/docs/source/installation/settings.html
index 832938d..b1bf1ff 100644
--- a/docs/source/installation/settings.html
+++ b/docs/source/installation/settings.html
@@ -1,4 +1,81 @@
-
+`;
+const rotateAnimation = typeof circularRotateKeyframe !== "string" ? css`
+ animation: ${circularRotateKeyframe} 1.4s linear infinite;
+ ` : null;
+const dashAnimation = typeof circularDashKeyframe !== "string" ? css`
+ animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
+ ` : null;
+const useUtilityClasses$u = (ownerState) => {
+ const {
+ classes,
+ variant,
+ color: color2,
+ disableShrink
+ } = ownerState;
+ const slots = {
+ root: ["root", variant, `color${capitalize(color2)}`],
+ svg: ["svg"],
+ circle: ["circle", `circle${capitalize(variant)}`, disableShrink && "circleDisableShrink"]
+ };
+ return composeClasses(slots, getCircularProgressUtilityClass, classes);
+};
+const CircularProgressRoot = styled("span", {
+ name: "MuiCircularProgress",
+ slot: "Root",
+ overridesResolver: (props, styles2) => {
+ const {
+ ownerState
+ } = props;
+ return [styles2.root, styles2[ownerState.variant], styles2[`color${capitalize(ownerState.color)}`]];
+ }
+})(memoTheme(({
+ theme
+}) => ({
+ display: "inline-block",
+ variants: [{
+ props: {
+ variant: "determinate"
+ },
+ style: {
+ transition: theme.transitions.create("transform")
+ }
+ }, {
+ props: {
+ variant: "indeterminate"
+ },
+ style: rotateAnimation || {
+ animation: `${circularRotateKeyframe} 1.4s linear infinite`
+ }
+ }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+ props: {
+ color: color2
+ },
+ style: {
+ color: (theme.vars || theme).palette[color2].main
+ }
+ }))]
+})));
+const CircularProgressSVG = styled("svg", {
+ name: "MuiCircularProgress",
+ slot: "Svg",
+ overridesResolver: (props, styles2) => styles2.svg
+})({
+ display: "block"
+ // Keeps the progress centered
+});
+const CircularProgressCircle = styled("circle", {
+ name: "MuiCircularProgress",
+ slot: "Circle",
+ overridesResolver: (props, styles2) => {
+ const {
+ ownerState
+ } = props;
+ return [styles2.circle, styles2[`circle${capitalize(ownerState.variant)}`], ownerState.disableShrink && styles2.circleDisableShrink];
+ }
+})(memoTheme(({
+ theme
+}) => ({
+ stroke: "currentColor",
+ variants: [{
+ props: {
+ variant: "determinate"
+ },
+ style: {
+ transition: theme.transitions.create("stroke-dashoffset")
+ }
+ }, {
+ props: {
+ variant: "indeterminate"
+ },
+ style: {
+ // Some default value that looks fine waiting for the animation to kicks in.
+ strokeDasharray: "80px, 200px",
+ strokeDashoffset: 0
+ // Add the unit to fix a Edge 16 and below bug.
+ }
+ }, {
+ props: ({
+ ownerState
+ }) => ownerState.variant === "indeterminate" && !ownerState.disableShrink,
+ style: dashAnimation || {
+ // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+ animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
+ }
+ }]
+})));
+const CircularProgress = /* @__PURE__ */ reactExports.forwardRef(function CircularProgress2(inProps, ref) {
+ const props = useDefaultProps({
+ props: inProps,
+ name: "MuiCircularProgress"
+ });
+ const {
+ className,
+ color: color2 = "primary",
+ disableShrink = false,
+ size = 40,
+ style: style2,
+ thickness = 3.6,
+ value = 0,
+ variant = "indeterminate",
+ ...other
+ } = props;
+ const ownerState = {
+ ...props,
+ color: color2,
+ disableShrink,
+ size,
+ thickness,
+ value,
+ variant
+ };
+ const classes = useUtilityClasses$u(ownerState);
+ const circleStyle = {};
+ const rootStyle = {};
+ const rootProps = {};
+ if (variant === "determinate") {
+ const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
+ circleStyle.strokeDasharray = circumference.toFixed(3);
+ rootProps["aria-valuenow"] = Math.round(value);
+ circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
+ rootStyle.transform = "rotate(-90deg)";
+ }
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressRoot, {
+ className: clsx(classes.root, className),
+ style: {
+ width: size,
+ height: size,
+ ...rootStyle,
+ ...style2
+ },
+ ownerState,
+ ref,
+ role: "progressbar",
+ ...rootProps,
+ ...other,
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressSVG, {
+ className: classes.svg,
+ ownerState,
+ viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressCircle, {
+ className: classes.circle,
+ style: circleStyle,
+ ownerState,
+ cx: SIZE,
+ cy: SIZE,
+ r: (SIZE - thickness) / 2,
+ fill: "none",
+ strokeWidth: thickness
+ })
+ })
+ });
+});
+function getIconButtonUtilityClass(slot) {
+ return generateUtilityClass("MuiIconButton", slot);
+}
+const iconButtonClasses = generateUtilityClasses("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]);
+const useUtilityClasses$t = (ownerState) => {
+ const {
+ classes,
+ disabled,
+ color: color2,
+ edge,
+ size,
+ loading
+ } = ownerState;
+ const slots = {
+ root: ["root", loading && "loading", disabled && "disabled", color2 !== "default" && `color${capitalize(color2)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`],
+ loadingIndicator: ["loadingIndicator"],
+ loadingWrapper: ["loadingWrapper"]
+ };
+ return composeClasses(slots, getIconButtonUtilityClass, classes);
+};
+const IconButtonRoot = styled(ButtonBase, {
+ name: "MuiIconButton",
+ slot: "Root",
+ overridesResolver: (props, styles2) => {
+ const {
+ ownerState
+ } = props;
+ return [styles2.root, ownerState.loading && styles2.loading, ownerState.color !== "default" && styles2[`color${capitalize(ownerState.color)}`], ownerState.edge && styles2[`edge${capitalize(ownerState.edge)}`], styles2[`size${capitalize(ownerState.size)}`]];
+ }
+})(memoTheme(({
+ theme
+}) => ({
+ textAlign: "center",
+ flex: "0 0 auto",
+ fontSize: theme.typography.pxToRem(24),
+ padding: 8,
+ borderRadius: "50%",
+ color: (theme.vars || theme).palette.action.active,
+ transition: theme.transitions.create("background-color", {
+ duration: theme.transitions.duration.shortest
+ }),
+ variants: [{
+ props: (props) => !props.disableRipple,
+ style: {
+ "--IconButton-hoverBg": theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+ "&:hover": {
+ backgroundColor: "var(--IconButton-hoverBg)",
+ // Reset on touch devices, it doesn't add specificity
+ "@media (hover: none)": {
+ backgroundColor: "transparent"
+ }
+ }
+ }
+ }, {
+ props: {
+ edge: "start"
+ },
+ style: {
+ marginLeft: -12
+ }
+ }, {
+ props: {
+ edge: "start",
+ size: "small"
+ },
+ style: {
+ marginLeft: -3
+ }
+ }, {
+ props: {
+ edge: "end"
+ },
+ style: {
+ marginRight: -12
+ }
+ }, {
+ props: {
+ edge: "end",
+ size: "small"
+ },
+ style: {
+ marginRight: -3
+ }
+ }]
+})), memoTheme(({
+ theme
+}) => ({
+ variants: [{
+ props: {
+ color: "inherit"
+ },
+ style: {
+ color: "inherit"
+ }
+ }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+ props: {
+ color: color2
+ },
+ style: {
+ color: (theme.vars || theme).palette[color2].main
+ }
+ })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+ props: {
+ color: color2
+ },
+ style: {
+ "--IconButton-hoverBg": theme.vars ? `rgba(${(theme.vars || theme).palette[color2].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color2].main, theme.palette.action.hoverOpacity)
+ }
+ })), {
+ props: {
+ size: "small"
+ },
+ style: {
+ padding: 5,
+ fontSize: theme.typography.pxToRem(18)
+ }
+ }, {
+ props: {
+ size: "large"
+ },
+ style: {
+ padding: 12,
+ fontSize: theme.typography.pxToRem(28)
+ }
+ }],
+ [`&.${iconButtonClasses.disabled}`]: {
+ backgroundColor: "transparent",
+ color: (theme.vars || theme).palette.action.disabled
+ },
+ [`&.${iconButtonClasses.loading}`]: {
+ color: "transparent"
+ }
+})));
+const IconButtonLoadingIndicator = styled("span", {
+ name: "MuiIconButton",
+ slot: "LoadingIndicator",
+ overridesResolver: (props, styles2) => styles2.loadingIndicator
+})(({
+ theme
+}) => ({
+ display: "none",
+ position: "absolute",
+ visibility: "visible",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)",
+ color: (theme.vars || theme).palette.action.disabled,
+ variants: [{
+ props: {
+ loading: true
+ },
+ style: {
+ display: "flex"
+ }
+ }]
+}));
+const IconButton = /* @__PURE__ */ reactExports.forwardRef(function IconButton2(inProps, ref) {
+ const props = useDefaultProps({
+ props: inProps,
+ name: "MuiIconButton"
+ });
+ const {
+ edge = false,
+ children,
+ className,
+ color: color2 = "default",
+ disabled = false,
+ disableFocusRipple = false,
+ size = "medium",
+ id: idProp,
+ loading = null,
+ loadingIndicator: loadingIndicatorProp,
+ ...other
+ } = props;
+ const loadingId = useId(idProp);
+ const loadingIndicator = loadingIndicatorProp ?? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, {
+ "aria-labelledby": loadingId,
+ color: "inherit",
+ size: 16
+ });
+ const ownerState = {
+ ...props,
+ edge,
+ color: color2,
+ disabled,
+ disableFocusRipple,
+ loading,
+ loadingIndicator,
+ size
+ };
+ const classes = useUtilityClasses$t(ownerState);
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconButtonRoot, {
+ id: loading ? loadingId : idProp,
+ className: clsx(classes.root, className),
+ centerRipple: true,
+ focusRipple: !disableFocusRipple,
+ disabled: disabled || loading,
+ ref,
+ ...other,
+ ownerState,
+ children: [typeof loading === "boolean" && // use plain HTML span to minimize the runtime overhead
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+ className: classes.loadingWrapper,
+ style: {
+ display: "contents"
+ },
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconButtonLoadingIndicator, {
+ className: classes.loadingIndicator,
+ ownerState,
+ children: loading && loadingIndicator
+ })
+ }), children]
+ });
+});
+function getTypographyUtilityClass(slot) {
+ return generateUtilityClass("MuiTypography", slot);
+}
+const typographyClasses = generateUtilityClasses("MuiTypography", ["root", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "inherit", "button", "caption", "overline", "alignLeft", "alignRight", "alignCenter", "alignJustify", "noWrap", "gutterBottom", "paragraph"]);
+const v6Colors = {
+ primary: true,
+ secondary: true,
+ error: true,
+ info: true,
+ success: true,
+ warning: true,
+ textPrimary: true,
+ textSecondary: true,
+ textDisabled: true
+};
+const extendSxProp = internal_createExtendSxProp();
+const useUtilityClasses$s = (ownerState) => {
+ const {
+ align,
+ gutterBottom,
+ noWrap,
+ paragraph: paragraph2,
+ variant,
+ classes
+ } = ownerState;
+ const slots = {
+ root: ["root", variant, ownerState.align !== "inherit" && `align${capitalize(align)}`, gutterBottom && "gutterBottom", noWrap && "noWrap", paragraph2 && "paragraph"]
+ };
+ return composeClasses(slots, getTypographyUtilityClass, classes);
+};
+const TypographyRoot = styled("span", {
+ name: "MuiTypography",
+ slot: "Root",
+ overridesResolver: (props, styles2) => {
+ const {
+ ownerState
+ } = props;
+ return [styles2.root, ownerState.variant && styles2[ownerState.variant], ownerState.align !== "inherit" && styles2[`align${capitalize(ownerState.align)}`], ownerState.noWrap && styles2.noWrap, ownerState.gutterBottom && styles2.gutterBottom, ownerState.paragraph && styles2.paragraph];
+ }
+})(memoTheme(({
+ theme
+}) => {
+ var _a;
+ return {
+ margin: 0,
+ variants: [{
+ props: {
+ variant: "inherit"
+ },
+ style: {
+ // Some elements, like