import { theme } from '@chakra-ui/react';
import { mode } from '@chakra-ui/theme-tools';

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
const components = {
  Heading: {
    baseStyle: {
      fontWeight: "600",
      color: "darkblue.900",
      _dark: {
        color: "white"
      }
    }
  },
  Input: {
    defaultProps: {
      focusBorderColor: "focus.500"
    },
    sizes: {
      md: {
        borderRadius: "full"
      }
    }
  },
  NumberInput: {
    defaultProps: {
      focusBorderColor: "focus.500"
    }
  },
  Button: {
    baseStyle: {
      borderRadius: "full",
      padding: "0 1.15rem !important",
      fontWeight: "600"
    },
    variants: {
      inputOutline: (props) => {
        var _a, _b, _c, _d;
        return __spreadProps(__spreadValues({}, (_d = (_c = (_b = (_a = theme) == null ? void 0 : _a.components) == null ? void 0 : _b.Button) == null ? void 0 : _c.variants) == null ? void 0 : _d.outline(props)), {
          fontWeight: "500",
          borderColor: "gray.200"
        });
      },
      outline: {
        fontWeight: "500"
      },
      link: {
        fontWeight: "500",
        textDecoration: "underline",
        px: "0.5rem"
      },
      nav: {
        borderRadius: "sm",
        background: "transparent",
        color: "gray.500",
        alignContent: "left",
        _hover: {
          background: "gray.100"
        }
      },
      icon: (props) => ({
        opacity: 0.9,
        background: "transparent",
        color: mode("blackAlpha.800", "whiteAlpha.800")(props),
        _hover: {
          color: mode("brand.500", "brand.400")(props)
        },
        _active: {
          color: mode("brand.600", "brand.500")(props)
        }
      }),
      ghost: (props) => ({
        _hover: {
          background: mode("blackAlpha.100", "whiteAlpha.100")(props)
        },
        _active: {
          background: mode("blackAlpha.300", "whiteAlpha.300")(props)
        }
      }),
      "ghost-white": () => ({
        color: "white",
        _hover: {
          background: "blackAlpha.100",
          color: "gray.200"
        },
        _active: {
          background: "blackAlpha.300"
        }
      }),
      subtle: (props) => ({
        background: mode("blackAlpha.200", "whiteAlpha.200")(props)
      })
    }
  },
  Link: {
    defaultProps: {
      variant: "primary"
    },
    variants: {
      primary: (props) => ({
        textDecoration: "underline",
        textUnderlineOffset: "2px",
        transitionDuration: "100ms",
        color: mode("black", "white")(props),
        _hover: {
          color: mode("brand.500", "brand.400")(props)
        },
        _active: {
          color: mode("brand.600", "brand.500")(props)
        }
      }),
      nav: (props) => ({
        borderRadius: "md",
        bg: "transparent",
        color: "white",
        padding: "0.5rem 0.75rem",
        fontSize: "0.9rem",
        // Note: this is used for the sidebar.
        fontWeight: "400",
        _hover: {
          bg: mode("whiteAlpha.200", "blackAlpha.400")(props),
          textDecoration: "none"
        },
        _activeLink: {
          fontWeight: "600",
          bg: mode("whiteAlpha.200", "blackAlpha.400")(props)
        }
      }),
      "nav-disabled": (props) => ({
        borderRadius: "md",
        bg: "transparent",
        color: "gray.500",
        padding: "0.5rem 0.75rem",
        fontSize: "0.8rem",
        fontWeight: "medium",
        cursor: "not-allowed",
        _hover: {
          bg: mode("whiteAlpha.100", "gray.900")(props),
          textDecoration: "none"
        },
        _activeLink: {
          color: mode("gray.500", "white")(props),
          bg: mode("gray.50", "gray.900")(props)
        }
      })
    }
  },
  Tabs: {
    defaultProps: {
      colorScheme: "darkblue"
    },
    variants: {
      line: (props) => ({
        tab: {
          border: 0,
          borderBottom: 0,
          position: "relative",
          fontWeight: "500",
          _active: {
            bg: mode("blackAlpha.200", "whiteAlpha.200")(props)
          },
          _selected: {
            color: mode(`darkblue.800`, "white")(props),
            _after: {
              position: "absolute",
              left: 0,
              right: 0,
              bottom: 0,
              content: `" "`,
              // Note: necessary to make the pseudo-element appear
              height: "3px",
              width: "100%",
              bg: mode(`darkblue.800`, "white")(props),
              borderRadius: "2px"
            }
          }
        },
        tablist: {
          borderBottom: "1px solid"
        }
      })
    }
  },
  Table: {
    parts: ["th", "tbody", "td"],
    baseStyle: (props) => ({
      th: __spreadValues({}, tableBorderStyle(props)),
      tbody: {
        tr: {
          _hover: {
            bg: mode("whiteAlpha.500", "blackAlpha.200")(props)
          }
        }
      },
      td: __spreadValues({}, tableBorderStyle(props))
    })
  },
  FormLabel: {
    baseStyle: {
      fontWeight: "600",
      fontSize: "sm",
      span: {
        color: "darkblue.900",
        _dark: {
          color: "white"
        }
      },
      marginBottom: "3px"
    }
  },
  List: {
    defaultProps: {
      spacing: "50px"
    },
    baseStyle: {
      container: {
        spacing: "150px !important"
      }
    }
  }
};
const tableBorderStyle = (props) => ({
  "border-bottom-color": mode(
    "var(--chakra-colors-blackAlpha-200) !important",
    "var(--chakra-colors-whiteAlpha-200) !important"
  )(props)
});

export { components };
//# sourceMappingURL=components.js.map
